/* ==========================================================================
   NingBo CM Industry Ltd. — design system
   Hand-authored token-based CSS. No framework, no CDN.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* brand */
  --c-ink:#0d2436;
  --c-ink-2:#20455e;
  --c-ink-3:#3b5f78;
  --c-muted:#5f7688;
  --c-muted-2:#8298a7;
  --c-line:#dde6ed;
  --c-line-2:#eef3f7;
  --c-bg:#ffffff;
  --c-soft:#f4f8fb;
  --c-soft-2:#eaf2f8;
  --c-deep:#0d2436;
  --c-deep-2:#12324a;
  --c-brand:#0b6f9c;
  --c-brand-dark:#075271;
  --c-brand-lt:#e3f1f8;
  --c-brand-lt2:#f0f8fc;
  --c-accent:#e07b18;
  --c-accent-dk:#b96010;
  --c-wa:#1faa54;
  --c-ok:#1f8a5b;

  /* type scale */
  --fs-11:0.6875rem;
  --fs-12:0.75rem;
  --fs-13:0.8125rem;
  --fs-14:0.875rem;
  --fs-15:0.9375rem;
  --fs-16:1rem;
  --fs-17:1.0625rem;
  --fs-18:1.125rem;
  --fs-20:1.25rem;
  --fs-24:1.5rem;
  --fs-28:1.75rem;
  --fs-32:2rem;
  --fs-40:2.5rem;
  --fs-48:3rem;
  --fs-56:3.5rem;

  /* spacing scale */
  --s-1:0.25rem;
  --s-2:0.5rem;
  --s-3:0.75rem;
  --s-4:1rem;
  --s-5:1.25rem;
  --s-6:1.5rem;
  --s-8:2rem;
  --s-10:2.5rem;
  --s-12:3rem;
  --s-16:4rem;
  --s-20:5rem;
  --s-24:6rem;

  /* radii + shadows */
  --r-xs:4px;
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-xl:24px;
  --r-pill:999px;
  --sh-1:0 1px 2px rgba(13,36,54,.06);
  --sh-2:0 2px 8px rgba(13,36,54,.07);
  --sh-3:0 8px 24px rgba(13,36,54,.10);
  --sh-4:0 18px 48px rgba(13,36,54,.14);

  /* layout */
  --wrap:1240px;
  --wrap-narrow:840px;
  --wrap-mid:1040px;
  --header-h:74px;
  --tt:180ms cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Reset ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-16);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-brand);text-decoration:none}
a:hover{color:var(--c-brand-dark)}
h1,h2,h3,h4,h5{margin:0;line-height:1.18;font-weight:700;letter-spacing:-.018em;color:var(--c-ink)}
h1{font-size:var(--fs-40)}
h2{font-size:var(--fs-32)}
h3{font-size:var(--fs-20)}
h4{font-size:var(--fs-16)}
p{margin:0 0 var(--s-4)}
ul,ol{margin:0 0 var(--s-4);padding-left:1.15rem}
li{margin:0 0 var(--s-2)}
table{border-collapse:collapse;width:100%}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--c-brand);outline-offset:2px;border-radius:var(--r-xs)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--c-brand);color:#fff;padding:var(--s-3) var(--s-5);border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0;color:#fff}

/* ---------- 3. Layout helpers ------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s-5)}
.wrap-mid{max-width:var(--wrap-mid)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding:var(--s-20) 0}
.section-sm{padding:var(--s-12) 0}
.section-soft{background:var(--c-soft)}
.section-brandlt{background:var(--c-brand-lt2)}
.section-deep{background:var(--c-deep);color:#dbe7ef}
.section-deep h2,.section-deep h3,.section-deep h4{color:#fff}
.section-deep a{color:#8fd3f0}
.rule{height:1px;background:var(--c-line);border:0;margin:0}

.shead{max-width:760px;margin:0 0 var(--s-10)}
.shead--center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  display:inline-block;font-size:var(--fs-12);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-brand);margin-bottom:var(--s-3)
}
.section-deep .eyebrow{color:#7cc9e8}
.shead p{font-size:var(--fs-18);color:var(--c-muted);margin:var(--s-4) 0 0}
.section-deep .shead p{color:#a9c3d2}
.lead{font-size:var(--fs-18);color:var(--c-ink-3)}

.grid{display:grid;gap:var(--s-6)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr))}

/* ---------- 4. Buttons -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:0.72rem 1.35rem;border-radius:var(--r-pill);border:1px solid transparent;
  font-size:var(--fs-15);font-weight:600;letter-spacing:-.005em;
  transition:background var(--tt),color var(--tt),border-color var(--tt),transform var(--tt);
  text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{flex:0 0 auto}
.btn--primary{background:var(--c-brand);color:#fff}
.btn--primary:hover{background:var(--c-brand-dark);color:#fff}
.btn--accent{background:var(--c-accent);color:#fff}
.btn--accent:hover{background:var(--c-accent-dk);color:#fff}
.btn--wa{background:var(--c-wa);color:#fff}
.btn--wa:hover{background:#188342;color:#fff}
.btn--ghost{background:transparent;color:var(--c-ink);border-color:var(--c-line)}
.btn--ghost:hover{background:var(--c-soft);color:var(--c-ink);border-color:var(--c-muted-2)}
.btn--onimg{background:rgba(255,255,255,.92);color:var(--c-ink);border-color:rgba(13,36,54,.12);backdrop-filter:blur(6px)}
.btn--onimg:hover{background:#fff;color:var(--c-ink)}
.btn--ondeep{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--ondeep:hover{background:rgba(255,255,255,.12);color:#fff}
.btn--sm{padding:0.5rem 1rem;font-size:var(--fs-13)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.btn-row--center{justify-content:center}
.tlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:var(--fs-14)}
.tlink::after{content:"→";transition:transform var(--tt)}
.tlink:hover::after{transform:translateX(3px)}

/* ---------- 5. Top bar + header ---------------------------------------- */
.topbar{background:var(--c-deep);color:#b9cdda;font-size:var(--fs-12)}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between;min-height:38px}
.topbar a{color:#cfe2ee}
.topbar a:hover{color:#fff}
.topbar__l,.topbar__r{display:flex;flex-wrap:wrap;gap:var(--s-5);align-items:center}

.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--c-line);
}
.site-header .wrap{display:flex;align-items:center;gap:var(--s-6);min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:var(--s-3);flex:0 0 auto}
.brand__logo{height:46px;width:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-1)}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:5px;padding:0.6rem 0.85rem;border-radius:var(--r-sm);
  font-size:var(--fs-15);font-weight:600;color:var(--c-ink);white-space:nowrap;
  transition:background var(--tt),color var(--tt);
}
.nav__link:hover,.nav__item:hover>.nav__link,.nav__item--open>.nav__link{background:var(--c-soft-2);color:var(--c-brand-dark)}
.nav__link[aria-current="page"]{color:var(--c-brand)}
.caret{width:9px;height:9px;flex:0 0 auto;transition:transform var(--tt)}
.nav__item:hover .caret{transform:rotate(180deg)}
.header-cta{margin-left:var(--s-4);display:flex;gap:var(--s-2)}

/* dropdowns / mega menu */
.mega,.drop{
  position:absolute;top:100%;left:0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--tt),transform var(--tt),visibility var(--tt);
  background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);
  box-shadow:var(--sh-4);padding:var(--s-6);z-index:70;
}
.nav__item:hover>.mega,.nav__item:hover>.drop,
.nav__item:focus-within>.mega,.nav__item:focus-within>.drop{opacity:1;visibility:visible;transform:translateY(0)}
.mega{width:min(1060px,calc(100vw - 2.5rem));left:auto;right:0}
/* Keep the Products mega menu centered in the viewport instead of clipping at the nav edge. */
.nav__item--products{position:static}
.nav__item--products > .mega{left:50%;right:auto;transform:translate(-50%,6px)}
.nav__item--products:hover > .mega,.nav__item--products:focus-within > .mega{transform:translate(-50%,0)}
.mega__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}
.mega__col h4{font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--s-3)}
.mega__list{list-style:none;margin:0;padding:0}
.mega__list li{margin:0}
.mega__link{display:flex;align-items:center;gap:var(--s-3);padding:6px 8px;border-radius:var(--r-sm);color:var(--c-ink);font-size:var(--fs-14);font-weight:500}
.mega__link:hover{background:var(--c-brand-lt2);color:var(--c-brand-dark)}
.mega__thumb{width:40px;height:40px;flex:0 0 auto;border:1px solid var(--c-line);border-radius:var(--r-sm);background:#fff;object-fit:contain;padding:3px}
.mega__foot{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--c-line-2);display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:center;justify-content:space-between}
.drop{min-width:270px;padding:var(--s-3)}
.drop__list{list-style:none;margin:0;padding:0}
.drop__link{display:block;padding:8px 10px;border-radius:var(--r-sm);font-size:var(--fs-14);font-weight:500;color:var(--c-ink)}
.drop__link:hover{background:var(--c-brand-lt2);color:var(--c-brand-dark)}
.drop__link small{display:block;font-weight:400;color:var(--c-muted);font-size:var(--fs-12)}

/* burger + mobile drawer */
.burger{display:none;margin-left:auto;background:transparent;border:1px solid var(--c-line);border-radius:var(--r-sm);padding:9px 10px;line-height:0}
.burger span{display:block;width:20px;height:2px;background:var(--c-ink);border-radius:2px}
.burger span+span{margin-top:4px}
.mnav{display:none}

/* ---------- 6. Hero carousel ------------------------------------------- */
.hero{position:relative;background:var(--c-soft)}
.hero__track{position:relative;min-height:clamp(560px,78vh,900px)}
.hero__slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 700ms ease,visibility 700ms ease;
  display:flex;align-items:center;
}
.hero__slide.is-on{opacity:1;visibility:visible}
.hero__bg{position:absolute;inset:0;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__bg--object{background:linear-gradient(112deg,#dfeef7 0%,#eff8fc 34%,#fdfeff 62%,#ffffff 100%)}
.hero__bg--object::after{
  content:"";position:absolute;right:6%;top:14%;width:44%;height:72%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(11,111,156,.10),transparent 72%);
}
.hero__bg--object img{
  position:relative;z-index:1;
  object-fit:contain;object-position:86% 56%;
  width:min(54%,720px);height:84%;margin-left:auto;
  mix-blend-mode:multiply;
}
.hero__veil{position:absolute;inset:0}
.hero__slide--photo .hero__bg img{filter:saturate(.82) brightness(1.06)}
.hero__slide--photo .hero__veil{
  background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 34%,rgba(255,255,255,.5) 62%,rgba(240,247,251,.28) 100%);
}
.hero__slide--object .hero__veil{
  background:linear-gradient(100deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.55) 46%,rgba(255,255,255,0) 68%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding:var(--s-16) 0}
.hero__copy{max-width:640px}
.hero__kicker{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--c-line);
  border-radius:var(--r-pill);padding:5px 14px;font-size:var(--fs-12);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-brand-dark);box-shadow:var(--sh-1);
}
.hero h1{font-size:clamp(1.85rem,4.1vw,3rem);margin:var(--s-5) 0 var(--s-4);text-wrap:balance}
.hero__sub{font-size:clamp(1rem,1.5vw,1.1875rem);color:var(--c-ink-2);margin-bottom:var(--s-6);max-width:36em}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin-top:var(--s-8);font-size:var(--fs-13);color:var(--c-ink-3);font-weight:600}
.hero__meta span{display:inline-flex;align-items:center;gap:7px}
.hero__meta i{width:6px;height:6px;border-radius:50%;background:var(--c-brand);display:inline-block}
.hero__dots{
  position:absolute;left:0;right:0;bottom:var(--s-6);z-index:5;
  display:flex;gap:10px;justify-content:center;
}
.hero__dot{
  width:34px;height:4px;border:0;padding:0;border-radius:var(--r-pill);
  background:rgba(13,36,54,.22);transition:background var(--tt),width var(--tt);
}
.hero__dot.is-on{background:var(--c-brand);width:54px}
.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--c-line);
  background:rgba(255,255,255,.9);color:var(--c-ink);display:none;place-items:center;box-shadow:var(--sh-2);
}
.hero__arrow:hover{background:#fff}
.hero__arrow--prev{left:var(--s-4)}
.hero__arrow--next{right:var(--s-4)}

/* page banner (inner pages) */
.pbanner{
  position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(104deg,#0b1f30 0%,#10314a 46%,#134863 100%);
}
.pbanner__bg{position:absolute;inset:0}
.pbanner__bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.pbanner--cover::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(9,27,42,.94),rgba(11,34,52,.66))}
.pbanner__inner{position:relative;z-index:2;padding:var(--s-12) 0 var(--s-16)}
.pbanner__grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--s-10);align-items:center}
.pbanner__grid--plain{grid-template-columns:minmax(0,1fr)}
.pbanner h1{color:#fff;font-size:clamp(1.6rem,3.2vw,2.5rem);max-width:22em}
.pbanner p{color:#c4d8e5;font-size:var(--fs-18);max-width:44em;margin-top:var(--s-4)}
.pbanner .eyebrow{color:#8fd3f0}
.pbanner__art{
  background:#fff;border-radius:var(--r-lg);padding:var(--s-5);
  box-shadow:0 20px 50px rgba(0,0,0,.28);aspect-ratio:1/1;display:grid;place-items:center;
}
.pbanner__art img{width:100%;height:100%;object-fit:contain}
.pbanner::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 120% at 88% 6%,rgba(43,146,192,.35),transparent 58%);
}

/* breadcrumbs */
.crumbs{font-size:var(--fs-13);color:var(--c-muted);padding:var(--s-3) 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--c-muted-2)}
.crumbs a{color:var(--c-muted)}
.crumbs a:hover{color:var(--c-brand)}
.pbanner .crumbs,.pbanner .crumbs a{color:#a9c6d6}
.pbanner .crumbs a:hover{color:#fff}

/* ---------- 7. Cards --------------------------------------------------- */
.card{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow var(--tt),transform var(--tt),border-color var(--tt);
}
.card:hover{box-shadow:var(--sh-3);transform:translateY(-3px);border-color:var(--c-soft-2)}
.card__media{position:relative;background:#fff;border-bottom:1px solid var(--c-line-2);aspect-ratio:4/3;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:contain;padding:var(--s-4);transition:transform 420ms ease}
.card:hover .card__media img{transform:scale(1.04)}
.card__media--cover img{object-fit:cover;padding:0}
.card__body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.card__body h3{font-size:var(--fs-18)}
.card__body p{color:var(--c-muted);font-size:var(--fs-14);margin:0}
.card__tag{font-size:var(--fs-11);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.card__specs{list-style:none;margin:var(--s-2) 0 0;padding:0;font-size:var(--fs-13);color:var(--c-ink-3)}
.card__specs li{display:flex;justify-content:space-between;gap:var(--s-3);padding:5px 0;border-top:1px dashed var(--c-line);margin:0}
.card__specs b{font-weight:600;color:var(--c-ink)}
.card__foot{margin-top:auto;padding-top:var(--s-4)}
.card__count{font-size:var(--fs-12);color:var(--c-muted);font-weight:600}

/* compact product tile */
.ptile{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);
  display:flex;flex-direction:column;overflow:hidden;transition:box-shadow var(--tt),border-color var(--tt)
}
.ptile:hover{box-shadow:var(--sh-2);border-color:var(--c-brand-lt)}
.ptile__media{aspect-ratio:1/1;background:#fff;overflow:hidden;border-bottom:1px solid var(--c-line-2)}
.ptile__media img{width:100%;height:100%;object-fit:contain;padding:10px}
.ptile__body{padding:var(--s-3) var(--s-4) var(--s-4)}
.ptile__name{font-size:var(--fs-15);font-weight:700;color:var(--c-ink);display:block;line-height:1.3}
.ptile__meta{font-size:var(--fs-12);color:var(--c-muted);display:block;margin-top:3px}
.ptile__cta{font-size:var(--fs-12);font-weight:600;color:var(--c-brand);margin-top:var(--s-2);display:inline-block}

/* ---------- 8. Stats + facts ------------------------------------------- */
.stats{display:grid;gap:1px;background:var(--c-line);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden}
.stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stat{background:#fff;padding:var(--s-6) var(--s-5)}
.stat__n{display:block;font-size:var(--fs-32);font-weight:700;letter-spacing:-.03em;color:var(--c-brand-dark);line-height:1.1}
.stat__l{display:block;font-size:var(--fs-13);color:var(--c-muted);margin-top:6px;font-weight:500}
.section-deep .stats{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.section-deep .stat{background:var(--c-deep-2)}
.section-deep .stat__n{color:#fff}
.section-deep .stat__l{color:#a9c3d2}

.quad{display:grid;gap:var(--s-6);grid-template-columns:repeat(4,minmax(0,1fr))}
.quad__item{padding-top:var(--s-5);border-top:3px solid var(--c-brand)}
.quad__item h3{font-size:var(--fs-18);margin-bottom:var(--s-2)}
.quad__item p{color:var(--c-muted);font-size:var(--fs-15);margin:0}

.checklist{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
.checklist li{position:relative;padding-left:1.9rem;margin:0;color:var(--c-ink-2)}
.checklist li::before{
  content:"";position:absolute;left:0;top:.45em;width:18px;height:18px;border-radius:50%;
  background:var(--c-brand-lt) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6f9c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.section-deep .checklist li{color:#cddce6}
.section-deep .checklist li::before{background-color:rgba(143,211,240,.2)}

.numlist{list-style:none;padding:0;margin:0;counter-reset:n;display:grid;gap:var(--s-5)}
.numlist li{counter-increment:n;position:relative;padding-left:3rem;margin:0}
.numlist li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:0;
  font-size:var(--fs-13);font-weight:700;color:var(--c-brand);
  border:1px solid var(--c-brand-lt);background:var(--c-brand-lt2);
  width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;
}
.numlist h4{font-size:var(--fs-16);margin-bottom:2px}
.numlist p{font-size:var(--fs-14);color:var(--c-muted);margin:0}

/* ---------- 9. Tables -------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--c-line);border-radius:var(--r-md);background:#fff}
.dtable{font-size:var(--fs-14);min-width:420px}
.dtable th,.dtable td{padding:0.7rem 1rem;text-align:left;border-bottom:1px solid var(--c-line-2);vertical-align:top}
.dtable tr:last-child th,.dtable tr:last-child td{border-bottom:0}
.dtable th{font-weight:600;color:var(--c-ink);background:var(--c-soft);width:38%;white-space:nowrap}
.dtable td{color:var(--c-ink-2)}
.dtable--cmp th{width:34%}
.dtable thead th{background:var(--c-deep);color:#fff;white-space:normal}

/* ---------- 10. FAQ ---------------------------------------------------- */
.faq{max-width:820px;margin:0 auto}
.faq__item{border-bottom:1px solid var(--c-line)}
.faq__item:first-child{border-top:1px solid var(--c-line)}
.faq__q{
  width:100%;display:flex;gap:var(--s-4);align-items:flex-start;justify-content:space-between;
  background:none;border:0;padding:var(--s-5) 0;text-align:left;
  font-size:var(--fs-17,1.0625rem);font-weight:600;color:var(--c-ink);line-height:1.4;
}
.faq__q:hover{color:var(--c-brand-dark)}
.faq__ico{flex:0 0 auto;width:22px;height:22px;position:relative;margin-top:3px}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;background:var(--c-brand);border-radius:2px;transition:transform var(--tt),opacity var(--tt)}
.faq__ico::before{top:10px;left:2px;width:18px;height:2px}
.faq__ico::after{left:10px;top:2px;width:2px;height:18px}
.faq__item[data-open="1"] .faq__ico::after{transform:rotate(90deg);opacity:0}
.faq__a{display:none;padding:0 0 var(--s-5);color:var(--c-muted);max-width:64ch}
.faq__item[data-open="1"] .faq__a{display:block}
.faq__a p:last-child{margin-bottom:0}

/* ---------- 11. Gallery / product detail ------------------------------- */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s-10);align-items:start}
.gal__main{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);
  aspect-ratio:1/1;overflow:hidden;display:grid;place-items:center;
}
.gal__main img{width:100%;height:100%;object-fit:contain;padding:var(--s-6)}
.gal__thumbs{display:flex;gap:var(--s-3);margin-top:var(--s-3);flex-wrap:wrap}
.gal__thumb{
  width:74px;height:74px;border:1px solid var(--c-line);border-radius:var(--r-sm);
  background:#fff;padding:0;overflow:hidden;transition:border-color var(--tt)
}
.gal__thumb img{width:100%;height:100%;object-fit:contain;padding:5px}
.gal__thumb[aria-selected="true"]{border-color:var(--c-brand);box-shadow:0 0 0 1px var(--c-brand)}
.pdp__title h1{font-size:clamp(1.6rem,3vw,2.25rem)}
.pdp__series{font-size:var(--fs-13);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.pdp__sub{font-size:var(--fs-18);color:var(--c-muted);margin:var(--s-3) 0 var(--s-6)}
.qspec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--c-line);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;margin:var(--s-6) 0}
.qspec__i{background:var(--c-soft);padding:var(--s-4)}
.qspec__n{display:block;font-size:var(--fs-16);font-weight:700;color:var(--c-ink)}
.qspec__l{display:block;font-size:var(--fs-12);color:var(--c-muted);margin-top:2px}

.blocks{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-12)}
.block h2{font-size:var(--fs-24);margin-bottom:var(--s-4)}
.block h3{margin-bottom:var(--s-2)}
.block>p:last-child{margin-bottom:0}
.subgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8)}
.panel{background:var(--c-soft);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--s-6)}
.panel--brand{background:var(--c-brand-lt2);border-color:var(--c-brand-lt)}
.note{font-size:var(--fs-13);color:var(--c-muted);border-left:3px solid var(--c-brand-lt);padding-left:var(--s-4)}

/* process diagram */
.flow{display:grid;gap:var(--s-3);grid-template-columns:repeat(7,minmax(0,1fr))}
.flow__i{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-4) var(--s-3);
  text-align:center;position:relative
}
.flow__i svg{width:26px;height:26px;margin:0 auto var(--s-2);display:block;color:var(--c-brand)}
.flow__i b{display:block;font-size:var(--fs-13);line-height:1.3}
.flow__i span{display:block;font-size:var(--fs-11);color:var(--c-muted);margin-top:3px}
.flow__i:not(:last-child)::after{
  content:"";position:absolute;right:calc(-1 * var(--s-3) - 1px);top:50%;width:var(--s-3);height:1px;background:var(--c-line)
}

/* ---------- 12. CTA + floats ------------------------------------------ */
.cta{background:var(--c-deep);color:#fff;border-radius:var(--r-xl);padding:var(--s-12);text-align:center;position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 140% at 84% 8%,rgba(11,111,156,.55),transparent 62%);
}
.cta>*{position:relative}
.cta h2{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);max-width:24em;margin:0 auto var(--s-4)}
.cta p{color:#bad2e0;max-width:52em;margin:0 auto var(--s-8)}
.floats{position:fixed;right:14px;bottom:14px;z-index:80;display:grid;gap:8px;justify-items:end}
.float{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:var(--sh-3);transition:transform var(--tt)
}
.float:hover{transform:scale(1.06);color:#fff}
.float svg{width:25px;height:25px}
.float--wa{background:var(--c-wa)}
.float--mail{background:var(--c-brand)}
.float--top{background:#fff;color:var(--c-ink);border:1px solid var(--c-line);width:40px;height:40px}
.float--top svg{width:18px;height:18px}

/* ---------- 13. Footer ------------------------------------------------- */
.site-footer{background:var(--c-deep);color:#a9c3d2;font-size:var(--fs-14);padding:var(--s-16) 0 var(--s-8);margin-top:var(--s-4)}
.site-footer a{color:#cde0ec}
.site-footer a:hover{color:#fff}
.footer__top{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:var(--s-8);padding-bottom:var(--s-10);border-bottom:1px solid rgba(255,255,255,.12)}
.footer__brand img{height:44px;width:auto;margin-bottom:var(--s-4)}
.footer__brand p{color:#93aebf;font-size:var(--fs-14)}
.footer h4{color:#fff;font-size:var(--fs-13);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s-4)}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer__list li{margin:0;font-size:var(--fs-14)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;padding-top:var(--s-6);font-size:var(--fs-12);color:#7d9bad}
.footer__bottom a{color:#9bb8c9}
.footer__contact dt{font-size:var(--fs-12);color:#7d9bad;margin-top:var(--s-3)}
.footer__contact dd{margin:0;font-size:var(--fs-14)}

/* ---------- 14. Misc --------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:0}
.chip{
  display:inline-block;padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--c-line);
  background:#fff;font-size:var(--fs-13);font-weight:500;color:var(--c-ink-2)
}
.chip:hover{border-color:var(--c-brand);color:var(--c-brand-dark)}
.chip--on{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.figure{margin:0}
.figure img{border:1px solid var(--c-line);border-radius:var(--r-lg);width:100%}
.figure figcaption{font-size:var(--fs-13);color:var(--c-muted);margin-top:var(--s-3)}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12);align-items:center}
.article-body h2{font-size:var(--fs-24);margin:var(--s-10) 0 var(--s-4)}
.article-body h3{font-size:var(--fs-18);margin:var(--s-8) 0 var(--s-3)}
.article-body>*:first-child{margin-top:0}
.article-body p,.article-body li{color:var(--c-ink-2)}
.toc{background:var(--c-soft);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6)}
.toc h4{margin-bottom:var(--s-3)}
.toc ol{margin:0;padding-left:1.2rem}
.toc li{font-size:var(--fs-14)}
.dl-row{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between;padding:var(--s-5);border:1px solid var(--c-line);border-radius:var(--r-md);background:#fff}
.dl-row h3{font-size:var(--fs-16)}
.dl-row p{font-size:var(--fs-13);color:var(--c-muted);margin:2px 0 0}
.pager{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-10)}
.notfound{text-align:center;padding:var(--s-24) 0}
.notfound h1{font-size:clamp(2.4rem,7vw,4.5rem);color:var(--c-brand)}

/* ---------- 15. Responsive --------------------------------------------- */
@media (max-width:1180px){
  .mega{width:min(940px,calc(100vw - 2rem))}
  .nav__link{padding:0.6rem 0.6rem;font-size:var(--fs-14)}
  .g-6{grid-template-columns:repeat(4,minmax(0,1fr))}
  .flow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .flow__i:not(:last-child)::after{display:none}
}
@media (max-width:1024px){
  .topbar__l span:nth-child(n+3){display:none}
  .nav,.header-cta{display:none}
  .burger{display:block}
  .mnav{display:block;position:fixed;inset:0;top:0;z-index:100;background:#fff;overflow-y:auto;padding:var(--s-5) 0 var(--s-16);transform:translateX(100%);transition:transform 260ms ease;visibility:hidden}
  .mnav.is-on{transform:none;visibility:visible}
  .mnav__head{display:flex;align-items:center;justify-content:space-between;padding:0 var(--s-5) var(--s-5);border-bottom:1px solid var(--c-line)}
  .mnav__close{background:none;border:1px solid var(--c-line);border-radius:var(--r-sm);width:38px;height:38px;font-size:20px;line-height:1}
  .mnav__sec{border-bottom:1px solid var(--c-line-2);padding:0 var(--s-5)}
  .mnav__t{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;padding:var(--s-4) 0;font-size:var(--fs-16);font-weight:700;color:var(--c-ink)}
  .mnav__body{display:none;padding-bottom:var(--s-4)}
  .mnav__sec[data-open="1"] .mnav__body{display:block}
  .mnav__body a{display:block;padding:8px 0 8px var(--s-4);font-size:var(--fs-14);color:var(--c-ink-2);border-left:2px solid var(--c-line)}
  .mnav__body h5{margin:var(--s-3) 0 4px;font-size:var(--fs-11);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
  .mnav__cta{padding:var(--s-6) var(--s-5) 0;display:grid;gap:var(--s-3)}
  .pbanner__grid{grid-template-columns:minmax(0,1fr) 220px}
  .pdp{grid-template-columns:1fr;gap:var(--s-8)}
  .split,.subgrid{grid-template-columns:1fr;gap:var(--s-8)}
  .g-4,.g-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quad{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero__bg--object img{width:66%;object-position:96% 62%}
}
@media (max-width:860px){
  .hero__track{min-height:auto}
  .hero__slide{position:relative;inset:auto;display:none;opacity:1;visibility:visible}
  .hero__slide.is-on{display:flex}
  .hero__inner{padding:var(--s-12) 0 var(--s-16)}
  .hero__slide--object .hero__bg--object img{width:100%;height:220px;object-position:center;margin:0}
  .hero__slide--object .hero__bg{position:relative;height:auto}
  .hero__slide--object{flex-direction:column-reverse}
  .hero__slide--object .hero__veil{display:none}
  .g-3,.g-4,.g-5,.g-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats--4,.stats--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pbanner__grid{grid-template-columns:minmax(0,1fr);gap:var(--s-8)}
  .pbanner__art{max-width:220px}
  .section{padding:var(--s-16) 0}
  .cta{padding:var(--s-10) var(--s-6);border-radius:var(--r-lg)}
  h1{font-size:var(--fs-32)}
  h2{font-size:var(--fs-28)}
}
@media (max-width:640px){
  .topbar__l{display:none}
  .topbar .wrap{justify-content:center}
  .quad{grid-template-columns:1fr}
  .g-2{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr;gap:var(--s-8)}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qspec{grid-template-columns:1fr}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .hero__meta{gap:var(--s-2) var(--s-4);font-size:var(--fs-12)}
  .float{width:46px;height:46px}
  .brand__logo{height:38px}
  :root{--header-h:64px}
}
@media (max-width:420px){
  .g-3,.g-4,.g-5,.g-6{grid-template-columns:1fr}
  .wrap{padding:0 var(--s-4)}
  .stats--4,.stats--5{grid-template-columns:1fr}
  .gal__thumb{width:60px;height:60px}
}
@media (min-width:1400px){
  :root{--wrap:1320px}
  .hero__track{min-height:clamp(560px,78vh,900px)}
}
@media (min-width:861px){
  .hero__arrow{display:grid}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .card:hover,.btn:hover,.float:hover{transform:none}
}
@media print{
  .site-header,.topbar,.floats,.hero__dots,.hero__arrow,.site-footer,.cta{display:none!important}
  body{font-size:11pt}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}