@charset "utf-8";
/* ==========================================================================
   Hontai Global — theme layer (loaded AFTER css/nomal.css, purely additive)
   Design tokens: deep navy + premium gold, Inter/Sora type, card system
   ========================================================================== */

:root{
  --hg-navy:#12263F;
  --hg-navy-2:#1E4E9A;
  --hg-ink:#1F2937;
  --hg-body:#4B5563;
  --hg-muted:#6B7280;
  --hg-gold:#C9A24B;
  --hg-gold-dark:#A9822F;
  --hg-gold-soft:rgba(201,162,75,.12);
  --hg-bg:#FFFFFF;
  --hg-bg-alt:#F6F8FB;
  --hg-line:#E5E9F0;
  --hg-radius:14px;
  --hg-shadow:0 8px 28px rgba(18,38,63,.08);
  --hg-shadow-lg:0 18px 50px rgba(18,38,63,.14);
  --hg-head:"Sora","Inter","Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --hg-text:"Inter","Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
}

html{scroll-behavior:smooth}
body{font-family:var(--hg-text);color:var(--hg-body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}

/* ---------- typography scale ---------- */
.hg-h1,.hg-h2,.hg-h3,.hg-h4{font-family:var(--hg-head);color:var(--hg-navy);font-weight:700;margin:0 0 .6em}
.eyebrow{display:inline-block;font-family:var(--hg-head);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--hg-gold-dark);margin-bottom:10px}
.hg-section-head{max-width:760px;margin:0 auto 44px;text-align:center}
.hg-section-head .eyebrow{margin-bottom:6px}
.hg-section-head h2{font-size:clamp(24px,3vw,34px);line-height:1.3}
.hg-section-head .hg-rule{width:56px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--hg-gold),#E8CE8F);margin:14px auto 18px}
.hg-section-head p{color:var(--hg-muted);font-size:17px;margin:0}

/* ---------- buttons ---------- */
.hg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--hg-head);font-weight:600;font-size:15px;letter-spacing:.02em;line-height:1;border-radius:999px;padding:14px 28px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:all .25s ease-in-out;white-space:nowrap}
.hg-btn:hover{text-decoration:none}
.hg-btn-gold{background:linear-gradient(135deg,var(--hg-gold),var(--hg-gold-dark));color:#fff;box-shadow:0 8px 20px rgba(169,130,47,.28)}
.hg-btn-gold:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(169,130,47,.38)}
.hg-btn-navy{background:var(--hg-navy-2);color:#fff}
.hg-btn-navy:hover{color:#fff;background:#173e7c;transform:translateY(-2px)}
.hg-btn-ghost{border-color:rgba(255,255,255,.85);color:#fff;background:transparent}
.hg-btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.hg-btn-outline{border-color:var(--hg-navy-2);color:var(--hg-navy-2);background:transparent}
.hg-btn-outline:hover{background:var(--hg-navy-2);color:#fff}
.hg-btn-sm{padding:10px 20px;font-size:14px}

/* ---------- navbar refresh ---------- */
#header .navbar{box-shadow:0 2px 18px rgba(18,38,63,.10);border-bottom:none;transition:box-shadow .3s}
.navbar-default{background:#fff}
.navbar-default .navbar-nav>li>a{font-family:var(--hg-head);font-size:15px !important;font-weight:600;color:var(--hg-ink);padding:25px 14px;position:relative;transition:color .2s}
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a{color:var(--hg-navy-2)}
.navbar-default .navbar-nav>li>a:after{content:"";position:absolute;left:14px;right:14px;bottom:16px;height:2px;background:var(--hg-gold);transform:scaleX(0);transition:transform .25s;transform-origin:center}
.navbar-default .navbar-nav>li:hover>a:after,.navbar-default .navbar-nav>.active>a:after{transform:scaleX(1)}
.navbar-default .navbar-nav>li.nav-cta{margin-left:14px}
.navbar-default .navbar-nav>li.nav-cta>a{background:linear-gradient(135deg,var(--hg-gold),var(--hg-gold-dark));color:#fff;border-radius:999px;padding:11px 22px;margin:17px 0;font-size:14px !important}
.navbar-default .navbar-nav>li.nav-cta>a:hover{color:#fff;transform:translateY(-1px)}
.navbar-default .navbar-nav>li.nav-cta>a:after{display:none}
.navbar-default .navbar-nav>li .line-top{display:none}
#header .navbar-brand>img{height:52px !important;max-width:210px !important;width:auto}
#header .navbar{padding:12px 0}

/* offset for fixed navbar on pages without .lanmu banner */
body.hg-no-banner main,body.hg-no-banner .hg-page-top{padding-top:104px}

/* ---------- hero (home) ---------- */
.banner{position:relative;height:760px;min-height:560px;background-image:url(../images/opt/hero.jpg);background-size:cover !important;background-position:center 35% !important}
.banner:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,44,.30) 0%,rgba(10,22,44,.68) 100%);z-index:1}
.banner .bannercont{z-index:2;bottom:auto;top:50%;transform:translateY(-42%);text-align:left;max-width:860px;color:#fff;font-size:18px;padding:0 15px}
.banner_text{font-family:var(--hg-head);font-size:clamp(34px,5.2vw,62px);font-weight:700;line-height:1.14;letter-spacing:-.01em;text-shadow:0 4px 26px rgba(0,0,0,.35);margin-bottom:18px}
.banner_sub{font-size:clamp(15px,1.6vw,20px);line-height:1.65;max-width:640px;margin:0 0 30px;color:rgba(255,255,255,.92);text-shadow:0 2px 12px rgba(0,0,0,.35)}
.banner_ctas{display:flex;gap:14px;flex-wrap:wrap}
.banner .scrolldown_img{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;opacity:.85}
.banner .btn_wrapper{display:inline}

/* ---------- inner page banner ---------- */
.lanmu{position:relative;background-size:cover !important;background-position:center 40% !important}
.lanmu:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,38,63,.62),rgba(18,38,63,.48));z-index:1}
.lanmu .container{position:relative;z-index:2;color:#fff}
.lanmu .breadcrumb_text{color:#fff;text-decoration:none;font-size:14px;font-weight:500;opacity:.9}
.lanmu .breadcrumb_text:hover{color:var(--hg-gold)}
.lanmu .linktit{color:#fff;font-family:var(--hg-head);font-weight:700;letter-spacing:.02em;text-shadow:0 3px 16px rgba(0,0,0,.35)}

/* ---------- layout rhythm ---------- */
.mg{margin-top:64px;margin-bottom:0}
.mg-lg{margin-top:84px}
.hg-pb{padding-bottom:64px}
.hg-lead{font-size:17.5px;line-height:1.85;color:var(--hg-body)}
.hg-muted{color:var(--hg-muted)}
.hg-gold-text{color:var(--hg-gold-dark)}
.hg-bg-alt{background:var(--hg-bg-alt)}

/* ---------- cards ---------- */
.hg-card{background:#fff;border:1px solid var(--hg-line);border-radius:var(--hg-radius);box-shadow:var(--hg-shadow);padding:34px 28px;height:100%;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden}
.hg-card:hover{transform:translateY(-6px);box-shadow:var(--hg-shadow-lg);border-color:rgba(201,162,75,.45)}
.hg-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--hg-gold),#E8CE8F);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.hg-card:hover:before{transform:scaleX(1)}
.hg-card h3{font-family:var(--hg-head);color:var(--hg-navy);font-size:19px;font-weight:700;margin-bottom:10px}
.hg-card p{font-size:15px;color:var(--hg-body);margin:0;line-height:1.7}
.hg-why-card{display:flex;gap:16px;align-items:flex-start;text-align:left}
.hg-why-card .hg-card-icon{flex:0 0 56px;width:56px;height:56px;border-radius:14px;background:var(--hg-gold-soft);display:flex;align-items:center;justify-content:center}
.hg-why-card .hg-card-icon img{width:30px;height:30px}

/* ---------- compact card variant (4-col layouts) ---------- */
.hg-card-sm{padding:22px 18px}
.hg-card-sm h3{font-size:16px;margin-bottom:8px}
.hg-card-sm p{font-size:13.5px;line-height:1.65}
.hg-card-sm .hg-card-icon svg{width:36px;height:36px}

/* ---------- product overview cards ---------- */
.hg-product-card{display:block;background:#fff;border:1px solid var(--hg-line);border-radius:var(--hg-radius);box-shadow:var(--hg-shadow);overflow:hidden;transition:transform .25s,box-shadow .25s;height:100%}
.hg-product-card:hover{transform:translateY(-6px);box-shadow:var(--hg-shadow-lg)}
.hg-product-card .hg-product-img{height:180px;background:linear-gradient(160deg,#EDF2F9,#F8FAFC);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--hg-line)}
.hg-product-card .hg-product-img img{max-height:150px;width:auto}
.hg-product-card .hg-product-body{padding:24px}
.hg-product-card .hg-grade{font-family:var(--hg-head);font-size:22px;font-weight:700;color:var(--hg-navy);margin-bottom:6px}
.hg-product-card .hg-grade-tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hg-gold-dark);background:var(--hg-gold-soft);border-radius:999px;padding:4px 10px;margin-bottom:12px}
.hg-product-card p{font-size:14.5px;color:var(--hg-body);line-height:1.65;margin:0 0 14px}
.hg-product-card .hg-more{font-family:var(--hg-head);font-weight:600;font-size:14px;color:var(--hg-navy-2)}
.hg-product-card:hover .hg-more{color:var(--hg-gold-dark)}

/* ---------- TDS table ---------- */
.hg-tds{background:#fff;border:1px solid var(--hg-line);border-radius:var(--hg-radius);box-shadow:var(--hg-shadow);overflow:hidden;margin:28px 0}
.hg-tds-head{background:linear-gradient(135deg,var(--hg-navy),var(--hg-navy-2));color:#fff;padding:18px 26px;font-family:var(--hg-head);font-weight:600;font-size:17px;letter-spacing:.02em}
.hg-tds table{width:100%;border-collapse:collapse;margin:0}
.hg-tds th{background:#EEF2F8;color:var(--hg-navy);font-family:var(--hg-head);font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:13px 26px;border-bottom:1px solid var(--hg-line)}
.hg-tds td{padding:13px 26px;font-size:15px;border-bottom:1px solid var(--hg-line);color:var(--hg-body)}
.hg-tds tr:last-child td{border-bottom:none}
.hg-tds tbody tr:nth-child(even){background:#FAFBFD}
.hg-tds td:first-child{font-weight:600;color:var(--hg-ink)}
.hg-tds .na{color:#9AA4B2;font-style:italic;font-weight:400}

/* ---------- CTA band ---------- */
.hg-cta-band{background:linear-gradient(120deg,var(--hg-navy) 0%,var(--hg-navy-2) 100%);border-radius:var(--hg-radius);padding:48px 44px;color:#fff;position:relative;overflow:hidden;margin:0}
.hg-cta-band:after{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.35),rgba(201,162,75,0) 70%)}
.hg-cta-band h2{color:#fff;font-family:var(--hg-head);font-size:clamp(20px,2.4vw,28px);margin:0 0 8px}
.hg-cta-band p{color:rgba(255,255,255,.85);margin:0 0 22px;max-width:560px}

/* ---------- application blocks ---------- */
.hg-app-block{display:flex;gap:22px;align-items:flex-start;background:#fff;border:1px solid var(--hg-line);border-radius:var(--hg-radius);box-shadow:var(--hg-shadow);padding:30px 28px;height:100%;transition:transform .25s,box-shadow .25s}
.hg-app-block:hover{transform:translateY(-5px);box-shadow:var(--hg-shadow-lg)}
.hg-app-block .hg-app-num{flex:0 0 52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--hg-navy),var(--hg-navy-2));color:#fff;font-family:var(--hg-head);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;letter-spacing:.03em}
.hg-app-block h3{font-family:var(--hg-head);color:var(--hg-navy);font-size:18px;font-weight:700;margin:0 0 8px}
.hg-app-block p{font-size:14.5px;margin:0 0 10px}
.hg-chip{display:inline-block;font-size:12px;font-weight:600;color:var(--hg-navy-2);background:#EAF0FA;border-radius:999px;padding:4px 12px;margin-right:6px}
/* ---------- forms ---------- */
.hg-form-panel{background:#fff;border:1px solid var(--hg-line);border-radius:var(--hg-radius);box-shadow:var(--hg-shadow);padding:36px 34px}
.hg-inquiry .form-group{width:100%;margin-bottom:18px}
.hg-inquiry .hg-half{display:flex;gap:16px}
.hg-inquiry .hg-half>div{flex:1}
.hg-inquiry label{display:block;font-family:var(--hg-head);font-size:13.5px;font-weight:600;color:var(--hg-ink);margin-bottom:7px;letter-spacing:.02em}
.hg-inquiry label .req{color:#D64545;padding-left:2px}
.hg-inquiry input[type=text],.hg-inquiry input[type=email],.hg-inquiry select,.hg-inquiry textarea{display:block;width:100%;height:46px;padding:10px 14px;font-size:15px;color:var(--hg-ink);background:#FBFCFE;border:1.5px solid var(--hg-line);border-radius:10px;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.hg-inquiry textarea{height:auto;min-height:120px;resize:vertical}
.hg-inquiry input:focus,.hg-inquiry select:focus,.hg-inquiry textarea:focus{border-color:var(--hg-navy-2);box-shadow:0 0 0 3px rgba(30,78,154,.12);outline:none;background:#fff}
.hg-inquiry .hg-has-error input,.hg-inquiry .hg-has-error select,.hg-inquiry .hg-has-error textarea{border-color:#D64545;box-shadow:0 0 0 3px rgba(214,69,69,.10)}
.hg-form-note{margin-top:16px;font-size:14px;line-height:1.6}
.hg-note-err{color:#D64545}
.hg-note-ok{color:#1E7E34}

/* ---------- WhatsApp float ---------- */
.hg-whatsapp-float{position:fixed;right:22px;bottom:26px;z-index:9998;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,211,102,.45);transition:transform .2s}
.hg-whatsapp-float:hover{transform:scale(1.08)}
.hg-whatsapp-float .hg-whatsapp-tip{position:absolute;right:70px;background:var(--hg-navy);color:#fff;font-size:13px;padding:7px 14px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.hg-whatsapp-float:hover .hg-whatsapp-tip{opacity:1}

/* ---------- footer (navy) ---------- */
.footer_sec1{background:linear-gradient(180deg,var(--hg-navy) 0%,#0D1C30 100%);color:#AFC0D8;margin-top:84px;padding:64px 0 44px}
.footer_sec1 .link_heading,.footer_sec1 .connect_heading{color:#fff;font-family:var(--hg-head);font-size:16px;font-weight:600;letter-spacing:.14em;padding-left:0;margin-bottom:22px}
.footer_sec1 .list_item{color:#DCE6F2;font-size:15px;font-weight:400;margin-bottom:14px;display:flex;align-items:center}
.footer_sec1 a.list_item{transition:color .2s}
.footer_sec1 a.list_item:hover{color:var(--hg-gold)}
.footer_sec1 .list_desc{color:#AFC0D8;font-size:14.5px;padding-left:14px;line-height:1.6}
.footer_sec1 .connect_icons{width:20px !important;max-width:20px !important;filter:brightness(0) invert(.75)}
.footer_sec1 .footer_logo{width:190px;height:auto;background:#fff;border-radius:10px;padding:10px 14px}
.footer_sec1 .link_list a{text-decoration:none}
.footer_sec2{background:#0A1626;height:auto;padding:16px 0}
.footer_sec2 .copyright_flex p{color:#7E90AC;font-size:13px}

/* ---------- misc ---------- */
.hg-stat-row{display:flex;flex-wrap:wrap;gap:0;margin:36px 0 0}
.hg-stat{flex:1 1 33.333%;text-align:center;padding:22px 10px}
.hg-stat .num{font-family:var(--hg-head);font-size:34px;font-weight:700;color:var(--hg-navy-2);line-height:1.1}
.hg-stat .num em{font-style:normal;color:var(--hg-gold-dark)}
.hg-stat .lbl{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--hg-muted);margin-top:6px}
.hg-link-plain{color:var(--hg-navy-2);font-weight:600}
.hg-link-plain:hover{color:var(--hg-gold-dark)}
img{max-width:100%;height:auto}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .banner{height:620px}
  .hg-tds td,.hg-tds th{padding:11px 16px}
}
@media (max-width:768px){
  .banner{height:520px;min-height:420px}
  .banner .bannercont{padding:0 22px}
  .hg-btn{padding:12px 22px;font-size:14px}
  .hg-cta-band{padding:34px 24px}
  .hg-form-panel{padding:26px 20px}
  .hg-inquiry .hg-half{flex-direction:column;gap:0}
  .footer_sec1{margin-top:56px}
  .mg{margin-top:48px}
  .navbar-default .navbar-nav>li.nav-cta{margin:8px 0 0}
  .navbar-default .navbar-nav>li.nav-cta>a{margin:0}
  .lanmu{height:200px}
  .linktit{line-height:150px;font-size:26px}
}

/* Standalone comparison/matrix tables (products, applications) */
.hg-tds-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--hg-line);border-radius:var(--hg-radius);overflow:hidden;box-shadow:var(--hg-shadow)}
.hg-tds-table th{background:#EEF2F8;color:var(--hg-navy);font-family:var(--hg-head);font-size:13.5px;font-weight:600;padding:13px 16px;text-align:left;border-bottom:2px solid var(--hg-line)}
.hg-tds-table td{padding:12px 16px;font-size:14.5px;border-bottom:1px solid var(--hg-line);color:var(--hg-body)}
.hg-tds-table tr:last-child td{border-bottom:none}
.hg-tds-table tbody tr:nth-child(even){background:#FAFBFD}
.hg-tds-table td.prop{font-weight:600;color:var(--hg-ink);background:#F7F9FC}

/* Certification badge */
.hg-badge-cert{display:inline-flex;align-items:center;justify-content:center;font-family:var(--hg-head);font-weight:700;font-size:13px;letter-spacing:.06em;color:#fff;background:linear-gradient(135deg,var(--hg-navy),var(--hg-navy-2));border:1px solid var(--hg-gold);border-radius:999px;padding:6px 18px;margin-bottom:12px}

/* Product detail page bits */
.hg-detail-img{background:#fff;border:1px solid var(--hg-line);border-radius:var(--hg-radius);box-shadow:var(--hg-shadow-lg);padding:22px;text-align:center}
.hg-detail-img img{max-width:100%;height:auto;border-radius:10px}
.hg-grade-chips{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.hg-grade-chips a{display:inline-flex;align-items:center;font-family:var(--hg-head);font-size:13.5px;font-weight:600;color:var(--hg-navy-2);background:#EEF2F8;border:1px solid var(--hg-line);border-radius:999px;padding:7px 16px;transition:all .2s}
.hg-grade-chips a:hover{background:var(--hg-navy);color:#fff;border-color:var(--hg-navy)}
.hg-spec-highlight{display:flex;gap:26px;flex-wrap:wrap;margin:22px 0 4px}
.hg-spec-highlight .item{flex:1 1 120px;background:#fff;border:1px solid var(--hg-line);border-radius:var(--hg-radius);padding:16px 18px;box-shadow:var(--hg-shadow)}
.hg-spec-highlight .item b{display:block;font-family:var(--hg-head);font-size:20px;color:var(--hg-navy-2)}
.hg-spec-highlight .item span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--hg-muted)}

/* ---- Hero: nudge banner content to the right ---- */
.banner .bannercont{padding-left:clamp(16px,5vw,72px)}

/* ---- Site-wide: equal-height flex row (fixes BS3 float stagger) ---- */
.hg-flex-row{display:flex;flex-wrap:wrap}
.hg-flex-row>[class*="col-"]{margin-bottom:24px}
.hg-flex-row .hg-card,.hg-flex-row .hg-cta-band,.hg-flex-row .hg-product-card{height:100%}
.hg-card-icon{flex-shrink:0}