/* ================================================================
   JALIER — Shared Stylesheet
   Industrial Gas Generation Equipment — Foreign Trade Website
   Deep Blue #1A2A4A + Gold #C9A84C Accent
   ================================================================ */

/* ---------- RESET & ROOT ---------- */
:root{
  --p:#1A2A4A; --pd:#0F172A; --a:#C9A84C; --ah:#B89842;
  --bg:#F8FAFC; --w:#FFF; --t:#1A2A4A; --ts:#64748B; --tm:#94A3B8;
  --b:#E2E8F0; --mb:#F1F5F9;
  --tr:all .3s cubic-bezier(.4,0,.2,1);
  --sh:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
  --shl:0 20px 25px -5px rgba(0,0,0,.08);
  --mw:1280px;
}
*,::before,::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;line-height:1.6;color:var(--t);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:var(--mw);margin:0 auto;padding:0 2rem}

/* ---------- HEADER / NAVIGATION ---------- */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--p);height:64px;
  transition:var(--tr);
}
.hd.sc{box-shadow:0 4px 20px rgba(0,0,0,.3)}
.hd-inner{
  display:flex;align-items:center;
  max-width:var(--mw);margin:0 auto;padding:0 2rem;
  height:64px;
  flex-wrap:nowrap;overflow:visible;
}
.hd-inner>*{min-width:0}

/* Logo — fixed width, never shrinks */
.hd-logo{
  display:flex;align-items:center;gap:9px;
  flex-shrink:0;
  width:140px; /* fixed width prevents overlap */
}
.hd-icon{
  width:34px;height:34px;
  background:var(--a);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.hd-icon svg{color:var(--p)}
.hd-logo-text{
  font-size:1.1rem;font-weight:700;color:#fff;
  letter-spacing:1.5px;white-space:nowrap;
}

/* Nav links — allow shrinking if needed */
.hd-nav{
  display:flex;align-items:center;gap:0;
  flex-shrink:1;overflow:visible;
  margin:0 1.5rem;
}
.hd-nav>li{
  position:relative;list-style:none;
  display:flex;align-items:center;height:64px;
}
.hd-nav>li>a{
  display:inline-flex;align-items:center;gap:4px;
  padding:0 8px;height:64px;font-size:.875rem;font-weight:500;
  color:#CBD5E1;white-space:nowrap;transition:var(--tr);
  cursor:pointer;text-decoration:none;
  position:relative;
}
.hd-nav>li>a::after{
  content:'';position:absolute;bottom:14px;left:8px;right:8px;
  height:2px;background:var(--a);
  transform:scaleX(0);transition:transform .3s ease;
}
.hd-nav>li>a:hover{color:#fff}
.hd-nav>li>a:hover::after{transform:scaleX(1)}
.hd-nav>li>a i{font-size:.6875rem;transition:transform .3s}
.hd-nav>li:hover>a{color:#fff}
.hd-nav>li:hover>a i{transform:rotate(180deg)}

/* CTA — pushed to right, fixed width */
.hd-cta{
  flex-shrink:0;
  margin-left:auto;
}
.hd-cta .btn{padding:9px 20px;font-size:.8rem;font-weight:600}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:10px 22px;font-size:.8rem;font-weight:600;
  border-radius:4px;border:none;cursor:pointer;
  transition:var(--tr);white-space:nowrap;
  font-family:'Inter',sans-serif;
}
.btn-p{background:var(--a);color:var(--p)}
.btn-p:hover{background:var(--ah);transform:translateY(-1px);box-shadow:var(--sh)}
.btn-o{background:transparent;color:var(--a);border:1.5px solid var(--a)}
.btn-o:hover{background:var(--a);color:var(--p)}
.btn-w{background:#fff;color:var(--p)}
.btn-w:hover{background:#f0f0f0;transform:translateY(-1px);box-shadow:var(--sh)}
.btn-lg{padding:14px 32px;font-size:1rem}
.btn-sm{padding:7px 16px;font-size:.75rem}
.btn-bl{width:100%;justify-content:center}

/* ---------- NAVIGATION DROPDOWNS ---------- */
/* Dropdown panel */
.dd{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:var(--w);border-radius:0 0 4px 4px;
  box-shadow:0 20px 40px rgba(0,0,0,.18);
  padding:1.5rem;min-width:560px;
  display:none;z-index:1001;
  border-top:3px solid var(--a);
}
.hd-nav>li:hover>.dd{display:flex;gap:2rem}
.dd-col{flex:1}
.dd-col h4{
  font-size:.6875rem;font-weight:700;color:var(--a);
  text-transform:uppercase;letter-spacing:1.5px;
  margin-bottom:.75rem;
}
.dd-col a{
  display:block !important;padding:6px 0 !important;height:auto !important;
  font-size:.8125rem !important;color:var(--p) !important;font-weight:500 !important;
  white-space:nowrap;transition:var(--tr);
}
.dd-col a:hover{color:var(--a) !important}
.dd-col a::after{display:none !important}

/* Compact dropdown (Solutions, Resources) */
.dd-sm{min-width:240px;flex-direction:column !important;gap:.25rem !important;padding:1rem}
.dd-sm a{padding:8px 12px !important;font-size:.8125rem;color:var(--p);border-radius:4px;transition:var(--tr)}
.dd-sm a:hover{background:var(--mb);color:var(--a)}

/* Resources dropdown - icon style */
.dd-sm a i{color:var(--a);margin-right:8px;width:16px;text-align:center;font-size:.75rem}

/* ---------- MOBILE MENU ---------- */
.hd-menu-btn{
  display:none;flex-shrink:0;
  background:none;border:none;color:#fff;
  font-size:1.5rem;cursor:pointer;
  padding:8px;margin-left:auto;
}
@media(max-width:1040px){
  .hd-nav>li>a{padding:0 6px;font-size:.8125rem}
  .dd{min-width:400px}
}
@media(max-width:920px){
  .hd-nav{
    display:none;
    position:absolute;top:64px;left:0;right:0;
    background:var(--pd);flex-direction:column;
    padding:0.5rem 0;gap:0;
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .hd-nav.open{display:flex}
  .hd-nav>li{flex-direction:column;height:auto;margin:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .hd-nav>li>a{padding:16px 2rem;height:auto;font-size:1rem;justify-content:space-between;min-height:48px;align-items:center}
  .hd-nav>li>a i{font-size:.8rem}
  .hd-nav>li>a::after{display:none}
  .hd-nav>li:hover>a i{transform:none}
  .dd{position:static;transform:none;min-width:0;width:100%;box-shadow:none;border-top:none;border-radius:0;padding:.5rem 2rem 1rem;background:rgba(0,0,0,.15);display:none !important}
  .hd-nav>li.open>.dd{display:flex !important;flex-direction:column;gap:4px}
  .dd-col{margin-bottom:.5rem}
  .dd-col a,.dd-sm a{color:#CBD5E1 !important;font-size:.9rem !important;padding:10px 0 !important;min-height:44px;display:flex;align-items:center}
  .dd-col h4{font-size:.75rem;margin-bottom:.5rem}
  .dd-sm{padding:.5rem 2rem 1rem !important}
  .hd-cta{display:none}
  .hd-menu-btn{display:block;font-size:1.5rem;min-width:48px;min-height:48px}
}

/* ---------- STICKY SIDEBAR CONTACT ---------- */
.sdbr{
  position:fixed;right:20px;bottom:100px;z-index:999;
  display:flex;flex-direction:column;gap:10px;
}
.sdbr-btn{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;transition:var(--tr);
  font-size:1.25rem;position:relative;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  text-decoration:none;
}
.sdbr-btn:hover{transform:scale(1.1)}
.sdbr-wa{background:#25D366;color:#fff}
.sdbr-em{background:var(--p);color:#fff}
.sdbr-em i{font-size:1rem}
.sdbr-top{background:var(--a);color:var(--p)}
.sdbr-label{
  position:absolute;right:58px;top:50%;transform:translateY(-50%);
  background:var(--p);color:#fff;padding:6px 12px;border-radius:4px;
  font-size:.6875rem;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.sdbr-btn:hover .sdbr-label{opacity:1}

/* ---------- PAGE BANNER ---------- */
.pg-hero{
  background:var(--p);padding:120px 0 50px;
}
.pg-hero.is-img{
  position:relative;overflow:hidden;
}
.pg-hero.is-img .pg-hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.15;
}
.pg-hero.is-img .container{position:relative;z-index:1}
.bc{font-size:.75rem;color:var(--tm);margin-bottom:.75rem}
.bc a{color:var(--a)}.bc a:hover{text-decoration:underline}
.pg-hero h1{font-size:2rem;font-weight:700;color:#fff;margin-bottom:.5rem;line-height:1.25}
.pg-hero h1 span{color:var(--a)}
.pg-hero .pg-sub{font-size:.9375rem;color:var(--tm);max-width:560px;line-height:1.6}

.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(201,168,76,.12);color:var(--a);
  padding:5px 14px;border-radius:4px;
  font-size:.75rem;font-weight:500;
  border:1px solid rgba(201,168,76,.2);
}

/* ---------- SECTIONS ---------- */
.sec{padding:5rem 0}
.sec-sm{padding:3rem 0}
.sec-dk{background:var(--pd)}
.sec-w{background:var(--w)}
.sh{text-align:center;margin-bottom:3.5rem}
.sl{font-size:.75rem;font-weight:600;color:var(--a);text-transform:uppercase;letter-spacing:2px;margin-bottom:.75rem}
.st{font-size:2.25rem;font-weight:700;color:var(--t);line-height:1.25;margin-bottom:.75rem;letter-spacing:-.02em}
.sd{font-size:.9375rem;color:var(--ts);max-width:560px;margin:0 auto}
.sec-dk .st{color:#fff}.sec-dk .sd{color:var(--tm)}

/* Section heading with gold left border */
.sec-hd{
  font-size:1.5rem;font-weight:700;color:var(--t);
  margin-bottom:2rem;
  border-left:4px solid var(--a);padding-left:1rem;
}
.sec-dk .sec-hd{color:#fff}

/* ---------- CARDS & GRIDS ---------- */
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.eco-card{
  background:var(--w);border:1px solid var(--b);border-radius:4px;
  padding:1.75rem 1.5rem;transition:var(--tr);
  display:flex;gap:1rem;align-items:flex-start;
}
.eco-card:hover{box-shadow:var(--shl);transform:translateY(-4px);border-color:var(--a)}
.eco-ico{
  width:44px;height:44px;background:var(--p);border-radius:4px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.eco-ico i{color:var(--a);font-size:1.1rem}
.eco-card h3{font-size:1.0625rem;font-weight:600;color:var(--p);margin-bottom:.375rem}
.eco-card p{font-size:.8125rem;color:var(--ts);line-height:1.5}

.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ind-card{
  background:var(--w);border-radius:4px;padding:1.75rem 1.5rem;
  transition:var(--tr);border:1px solid var(--b);
  display:flex;flex-direction:column;gap:.75rem;
}
.ind-card:hover{box-shadow:var(--shl);transform:translateY(-4px);border-color:var(--a)}
.ind-card .ico{
  width:40px;height:40px;background:var(--p);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
}
.ind-card .ico i{color:var(--a);font-size:1rem}
.ind-card h3{font-size:1.0625rem;font-weight:600;color:var(--p)}
.ind-card p{font-size:.8125rem;color:var(--ts);line-height:1.5;flex:1}
.ind-card .lk{
  font-size:.8125rem;font-weight:600;color:var(--a);
  display:inline-flex;align-items:center;gap:6px;transition:var(--tr);
}
.ind-card .lk:hover{gap:10px}
.ind-card .lk i{font-size:.6875rem}

.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.case-card{
  background:var(--w);border:1px solid var(--b);border-radius:4px;
  overflow:hidden;transition:var(--tr);display:flex;flex-direction:column;
}
.case-card:hover{box-shadow:var(--shl);transform:translateY(-4px)}
.case-body{padding:1.5rem;flex:1;display:flex;flex-direction:column;gap:.75rem}
.case-ind{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.6875rem;font-weight:600;color:var(--a);
  text-transform:uppercase;letter-spacing:1px;
}
.case-card h3{font-size:1rem;font-weight:700;color:var(--p);line-height:1.4}
.case-card .desc{font-size:.8125rem;color:var(--ts);line-height:1.5;flex:1}
.case-res{
  background:var(--p);padding:1rem 1.5rem;
  display:flex;align-items:center;gap:10px;
}
.case-res .met{font-size:1.5rem;font-weight:800;color:var(--a);white-space:nowrap}
.case-res .lbl{font-size:.625rem;color:#CBD5E1;text-transform:uppercase;letter-spacing:1px;line-height:1.4}

.rsc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.rsc-card{
  background:var(--mb);border-radius:4px;padding:1.5rem;
  transition:var(--tr);border:1px solid transparent;
}
.rsc-card:hover{background:var(--w);border-color:var(--b);box-shadow:var(--sh)}
.rsc-ico{
  width:36px;height:36px;background:var(--a);border-radius:4px;
  display:flex;align-items:center;justify-content:center;margin-bottom:.75rem;
}
.rsc-ico i{color:var(--p);font-size:.9rem}
.rsc-card h3{font-size:.9375rem;font-weight:600;color:var(--p);margin-bottom:.375rem}
.rsc-card p{font-size:.75rem;color:var(--ts);line-height:1.5;margin-bottom:.75rem}
.rsc-card .lk{font-size:.75rem;font-weight:600;color:var(--a)}

.cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
.cta-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:4px;padding:2rem 1.5rem;transition:var(--tr);text-align:center;
}
.cta-card:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.cta-ico{
  width:48px;height:48px;background:rgba(201,168,76,.2);border-radius:4px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;
}
.cta-ico i{color:var(--a);font-size:1.25rem}
.cta-card h3{font-size:1.0625rem;font-weight:600;color:#fff;margin-bottom:.5rem}
.cta-card p{font-size:.8125rem;color:var(--tm);line-height:1.5;margin-bottom:1.25rem}
.cta-card .btn{width:100%;justify-content:center}

/* ---------- TABLES ---------- */
.prd-tbl-wrapper{overflow-x:auto}
.prd-tbl{width:100%;min-width:700px;border-collapse:collapse;background:var(--w)}
.prd-tbl th{
  text-align:left;font-size:.75rem;font-weight:600;color:var(--ts);
  text-transform:uppercase;letter-spacing:1.5px;padding:14px 16px;
  border-bottom:2px solid var(--b);background:var(--mb);
}
.prd-tbl td{padding:16px;border-bottom:1px solid var(--b);font-size:.875rem;vertical-align:middle}
.prd-tbl tr:hover td{background:var(--mb)}
.prd-tbl .mdl{font-weight:700;color:var(--p);font-size:1rem}
.prd-tbl .flow{font-weight:600}
.prd-tbl .specs{font-size:.8125rem;color:var(--ts)}

.spec-tbl{width:100%;border-collapse:collapse}
.spec-tbl th,.spec-tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--b);font-size:.875rem}
.spec-tbl th{background:var(--mb);font-size:.75rem;font-weight:600;color:var(--ts);text-transform:uppercase;letter-spacing:1px;width:200px}

/* ---------- TAGS ---------- */
.tag{display:inline-block;padding:3px 10px;border-radius:4px;font-size:.6875rem;font-weight:600;margin:2px}
.tag-g{background:rgba(201,168,76,.12);color:var(--a)}
.tag-b{background:rgba(26,42,74,.08);color:var(--p)}

/* ---------- FEATURES ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.feat-item{
  display:flex;gap:1rem;padding:1.25rem;
  background:var(--mb);border-radius:4px;transition:var(--tr);
}
.feat-item:hover{background:var(--w);box-shadow:var(--sh)}
.feat-item i{color:var(--a);font-size:1.1rem;margin-top:2px;flex-shrink:0}
.feat-item h4{font-size:.9375rem;font-weight:600;color:var(--p);margin-bottom:.25rem}
.feat-item p{font-size:.8125rem;color:var(--ts);line-height:1.5}

.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.rel-card{
  background:var(--mb);padding:1.5rem;border-radius:4px;transition:var(--tr);
}
.rel-card:hover{background:var(--w);box-shadow:var(--sh)}
.rel-card h4{font-size:.875rem;font-weight:600;color:var(--p);margin-bottom:.25rem}
.rel-card p{font-size:.75rem;color:var(--ts)}

.model-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.model-card{
  background:var(--mb);padding:1.5rem;border-radius:4px;
  border:1px solid var(--b);transition:var(--tr);
}
.model-card:hover{background:var(--w);box-shadow:var(--sh)}
.model-card h4{font-size:1rem;font-weight:600;color:var(--p);margin-bottom:.5rem}
.model-specs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.model-specs span{
  font-size:.6875rem;background:var(--w);padding:3px 8px;
  border-radius:4px;color:var(--ts);border:1px solid var(--b);
}
.model-card p{font-size:.75rem;color:var(--ts);line-height:1.5}

/* ---------- PROCESS STEPS ---------- */
.process{display:flex;gap:0;align-items:stretch;margin-top:2rem}
.pstep{
  flex:1;text-align:center;padding:1.5rem 1rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  position:relative;
}
.pstep .num{
  width:32px;height:32px;background:var(--a);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto .75rem;font-weight:700;color:var(--p);font-size:.8125rem;
}
.pstep h4{font-size:.9375rem;font-weight:600;color:#fff;margin-bottom:.5rem}
.pstep p{font-size:.75rem;color:var(--tm);line-height:1.5}
.parrow{
  position:absolute;right:-10px;top:50%;transform:translateY(-50%);
  color:var(--a);font-size:1rem;z-index:1;
}

/* ---------- CTA BANNER (dark) ---------- */
.cta-banner{
  background:var(--p);padding:2.5rem;text-align:center;border-radius:4px;margin-top:3rem;
}
.cta-banner h3{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:.75rem}
.cta-banner p{color:var(--tm);font-size:.9375rem;margin-bottom:1.5rem;max-width:500px;margin-left:auto;margin-right:auto}

/* ---------- FORM ---------- */
.form-grid{display:grid;grid-template-columns:350px 1fr;gap:60px}
.form-info{position:sticky;top:100px}
.form-info h2{font-size:1.75rem;font-weight:700;color:var(--t);margin-bottom:.75rem}
.form-info>p{font-size:.875rem;color:var(--ts);line-height:1.6;margin-bottom:1.5rem}
.fo-box{
  background:var(--w);border:1px solid var(--b);border-radius:4px;
  padding:1.25rem;margin-bottom:.75rem;
}
.fo-box h4{font-size:.8125rem;font-weight:600;color:var(--p);margin-bottom:.375rem}
.fo-box h4 i{color:var(--a);margin-right:6px}
.fo-box p{font-size:.75rem;color:var(--ts);line-height:1.5}
.form-main{background:var(--w);border:1px solid var(--b);border-radius:4px;padding:2rem}
.fs{margin-bottom:1.5rem}
.fs h3{
  font-size:1.125rem;font-weight:600;color:var(--p);margin-bottom:.5rem;
  display:flex;align-items:center;gap:10px;
}
.fs h3 .sn{
  width:24px;height:24px;background:var(--p);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;flex-shrink:0;
}
.frow{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:.75rem}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:.75rem;font-weight:600;color:var(--t)}
.fg label .req{color:var(--a)}
.fg input,.fg select,.fg textarea{
  width:100%;padding:10px 12px;border:1px solid var(--b);border-radius:4px;
  font-size:.8125rem;font-family:'Inter',sans-serif;color:var(--t);
  background:var(--bg);transition:var(--tr);
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  outline:none;border-color:var(--a);box-shadow:0 0 0 3px rgba(201,168,76,.12);
}
.fg textarea{resize:vertical;min-height:80px}

/* ---------- HOMEPAGE HERO ---------- */
.hero-sec{
  background:var(--p);padding:140px 0 80px;
  position:relative;overflow:hidden;
}
.hero-sec::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(26,42,74,.97) 0%,rgba(15,23,42,.93) 100%);
  z-index:1;
}
.hero-bg{
  position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1920&q=80') center/cover;
  opacity:.15;
}
.hero-sec .container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-left{}
.hero-left h1{
  font-size:3rem;font-weight:800;color:#fff;
  line-height:1.15;margin-bottom:1rem;letter-spacing:-.02em;
}
.hero-left h1 span{color:var(--a)}
.hero-left>p{
  font-size:1.0625rem;color:var(--tm);line-height:1.7;
  margin-bottom:2rem;max-width:500px;
}
.hero-act{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.hero-trust{
  display:flex;align-items:center;gap:10px;
  margin-top:1.25rem;font-size:.75rem;color:#64748B;
}
.hero-trust i{color:var(--a)}
.hero-right{display:flex;flex-direction:column;gap:16px}
.hero-stat{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center;
}
.hero-stat .val{font-size:1.75rem;font-weight:800;color:var(--a);line-height:1}
.hero-stat .lbl{font-size:.6875rem;color:var(--tm);margin-top:4px;text-transform:uppercase;letter-spacing:1px}
.hero-eco{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:20px 24px;display:flex;align-items:center;gap:12px;
}
.hero-eco i{color:var(--a);font-size:.875rem}
.hero-eco>div{font-size:.8125rem;color:#CBD5E1;line-height:1.5}
.hero-eco>div strong{color:#fff}

/* ---------- PRODUCT DETAIL HERO ---------- */
.prod-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-top:1.5rem}
.prod-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;background:var(--mb)}
.prod-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem}
.prod-hl{
  background:rgba(255,255,255,.08);padding:14px;
  text-align:center;border-radius:4px;
}
.prod-hl .v{font-size:1.5rem;font-weight:700;color:var(--a)}
.prod-hl .l{font-size:.625rem;color:var(--tm);letter-spacing:1px;margin-top:4px}

/* ---------- 2-COL LAYOUT ---------- */
.col2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}

/* ---------- METRICS SIDEBAR ---------- */
.metrics{
  background:var(--mb);padding:1.5rem;border-radius:4px;
}
.metrics h4{font-size:.9375rem;font-weight:600;color:var(--p);margin-bottom:1rem}
.metrics-list{display:flex;flex-direction:column;gap:.75rem}
.metrics-list .mv{font-size:1.5rem;font-weight:700;color:var(--a)}
.metrics-list .ml{font-size:.75rem;color:var(--ts)}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:.75rem}
.faq-q{
  background:var(--w);border:1px solid var(--b);border-radius:4px;
  padding:1.25rem 1.5rem;cursor:pointer;
}
.faq-q summary{
  font-weight:600;color:var(--p);font-size:.9375rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
}
.faq-q summary i{font-size:.75rem;color:var(--a);transition:var(--tr)}
.faq-q[open] summary i{transform:rotate(180deg)}
.faq-q .faq-a{margin-top:.75rem;color:var(--ts);font-size:.875rem;line-height:1.6}

/* ---------- BLOG CONTENT ---------- */
.blog-body{font-size:.9375rem;color:var(--ts);line-height:1.8}
.blog-body h2{font-size:1.25rem;font-weight:700;color:var(--p);margin:2rem 0 1rem}
.blog-body h3{font-size:1.0625rem;font-weight:600;color:var(--p);margin:1.5rem 0 .75rem}
.blog-body p{margin-bottom:1rem}
.blog-body .tbl-wrap{overflow-x:auto;margin:1.5rem 0}
.blog-body table{width:100%;border-collapse:collapse}
.blog-body thead tr{background:var(--mb)}
.blog-body th,.blog-body td{padding:10px 14px;border:1px solid var(--b);font-size:.8125rem}
.blog-body th{text-align:left;font-weight:600;color:var(--p)}
.blog-body td.text-right{text-align:right}
.blog-body .cost-negative{color:#DC2626}
.blog-body .cost-positive{color:#16A34A}
.blog-body .highlight{font-weight:600;color:var(--p);font-size:1.125rem}

/* ---------- ARCHITECTURE GRID ---------- */
.arch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:left}
.arch-grid h4{font-size:.8125rem;font-weight:600;color:var(--p);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:1px}
.arch-grid .alist{font-size:.75rem;color:var(--ts);line-height:1.8}
.arch-grid .alist strong{color:var(--a)}

/* ---------- FOOTER ---------- */
.ft{background:var(--pd);padding:4rem 0 2rem}
.ft-grid{display:grid;grid-template-columns:280px 1fr;gap:4rem;margin-bottom:3rem}
.ft-brand p{font-size:.8125rem;color:var(--tm);line-height:1.6;margin-top:.75rem}
.ft-links{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.ft-links h4{font-size:.75rem;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:1.25rem}
.ft-links a{display:block;font-size:.75rem;color:var(--tm);margin-bottom:.5rem;transition:var(--tr)}
.ft-links a:hover{color:var(--a)}
.ft-bot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);
  font-size:.6875rem;color:#64748B;
}
.ft-soc{display:flex;gap:1.25rem}
.ft-soc a{color:var(--tm);transition:var(--tr)}
.ft-soc a:hover{color:var(--a)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .hero-right{display:none}
  .hero-left h1{font-size:2.25rem}
  .eco-grid,.ind-grid,.case-grid,.cta-grid,.feat-grid,.rsc-grid{grid-template-columns:repeat(2,1fr)}
  .rel-grid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr}
  .ft-links{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr;gap:2rem}
  .form-info{position:static}
  .model-grid,.col2,.prod-hero-grid{grid-template-columns:1fr}
  .process{flex-direction:column;gap:.5rem}
  .parrow{display:none}
  .arch-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  /* Base */
  .container{padding:0 1rem}
  .hd-inner{padding:0 1rem}
  html{font-size:18px} /* scale rem-based sizes up */

  /* Nav */
  .hd-nav>li>a{padding:14px 1.5rem;font-size:1.05rem}
  .hd-nav .dd a{font-size:.95rem !important;padding:10px 1.5rem !important}
  .hd-menu-btn{font-size:1.5rem;padding:12px}
  .hd-cta .btn{padding:12px 24px;font-size:.95rem}

  /* Hero */
  .hero-sec{padding:100px 0 50px}
  .hero-left h1{font-size:1.65rem;line-height:1.3}
  .hero-left p{font-size:.95rem;line-height:1.5}
  .pg-hero h1{font-size:1.65rem}
  .pg-hero .pg-sub{font-size:.95rem;max-width:100%}
  .hero-badge{font-size:.8rem}

  /* Section titles */
  .st{font-size:1.65rem}
  .sec-hd{font-size:1.35rem}
  .sd{font-size:1rem}

  /* Cards */
  .eco-card h3,.ind-card h3,.case-card h3,.rel-card h4{font-size:1rem}
  .eco-card p,.ind-card p,.case-card .desc{font-size:.9rem;line-height:1.6}
  .ind-card .tag{font-size:.75rem}
  .ind-card .lk{font-size:.9rem}

  /* Body / article text */
  p,.eco-card p,.ind-card p{font-size:.9rem}
  .pg-hero p,.sec p{font-size:.9rem}

  /* Tables */
  .prod-tbl td,.spec-tbl td,.spec-tbl th{font-size:.85rem;padding:10px 8px}
  .prod-tbl .mdl{font-size:.9rem}

  /* Grids */
  .eco-grid,.ind-grid,.case-grid,.cta-grid,.feat-grid,.rsc-grid{grid-template-columns:1fr}
  .ft-links{grid-template-columns:1fr}
  .ft-bot{flex-direction:column;gap:.75rem;text-align:center}
  .frow{grid-template-columns:1fr}
  .arch-grid{grid-template-columns:1fr}
  .prod-highlights{grid-template-columns:1fr}

  /* Footer */
  .ft-links a{font-size:.85rem}
  .ft-links h4{font-size:.8rem}
  .ft-brand p{font-size:.85rem}

  /* Buttons */
  .btn{padding:12px 24px;font-size:.9rem}
  .btn-lg{padding:16px 32px;font-size:1.05rem}
  .btn-sm{padding:10px 20px;font-size:.85rem}

  /* Forms */
  .fg input,.fg select,.fg textarea{font-size:16px;padding:14px 16px}
  .fg label{font-size:.85rem}
  .form-info h2{font-size:1.35rem}

  /* Tables responsive */
  .spec-tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prd-tbl-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Breadcrumb */
  .bc{font-size:.8rem}

  /* CTA banner */
  .cta-banner h3{font-size:1.25rem}
  .cta-banner p{font-size:.9rem}
}