/* ==========================================================================
   iLatex — Compatible HP Latex Ink & Parts
   Design system / global stylesheet
   ========================================================================== */

:root{
  /* ---- brand palette: taken straight from the iLatex logo (#F15A24) ---- */
  --ink-950:#0B0C0F;
  --ink-900:#121419;
  --ink-850:#171A20;
  --ink-800:#1E222A;
  --ink-700:#2A2F38;
  --brand:#F15A24;        /* logo orange — the company colour */
  --brand-d:#C2400F;      /* darker orange, for text on white */
  --brand-l:#FF9161;      /* light orange, for dark backgrounds */
  --brand-ink:#3A1204;    /* text sitting on an orange fill */
  --brand-soft:rgba(241,90,36,.10);

  /* ink-process colours (product colours, not brand colours) */
  --magenta:#E5006D;
  --yellow:#FFC61A;
  --cyan:#00B8E0;

  --text:#0D1B26;
  --muted:#5C6E80;
  --muted-2:#8496A6;
  --line:#E3EAF1;
  --soft:#F5F8FB;
  --soft-2:#EDF3F8;
  --white:#fff;

  --ok:#12A45B;
  --warn:#E8A100;

  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(24,26,31,.06),0 2px 8px rgba(24,26,31,.05);
  --shadow:0 10px 30px rgba(24,26,31,.08),0 2px 8px rgba(24,26,31,.05);
  --shadow-lg:0 30px 70px rgba(18,20,25,.16),0 8px 24px rgba(18,20,25,.08);
  --maxw:1200px;
  --nav-h:72px;
  --font:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",
         "PingFang SC","Microsoft YaHei",Roboto,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--white);
  font-size:16px;line-height:1.65;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.025em;font-weight:800;color:var(--ink-900)}
h1{font-size:clamp(2.1rem,4.6vw,3.7rem)}
h2{font-size:clamp(1.6rem,3vw,2.5rem)}
h3{font-size:clamp(1.1rem,1.7vw,1.4rem);letter-spacing:-.02em}
h4{font-size:1.02rem;letter-spacing:-.01em}
p{margin:0 0 1em}
small{font-size:.83rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1360px;margin:0 auto;padding:0 24px}
.center{text-align:center}
.muted{color:var(--muted)}
.dim{color:var(--muted-2)}

/* ---------- eyebrow / section head ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-d);margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--brand);border-radius:2px}
.eyebrow.on-dark{color:var(--brand-l)}
.eyebrow.on-dark::before{background:var(--brand-l)}
.lead{font-size:1.08rem;color:var(--muted);max-width:64ch}
.sec{padding:88px 0}
.sec-sm{padding:60px 0}
.sec-dark{background:var(--ink-900);color:#E6E7E9}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff}
.sec-dark .lead,.sec-dark p{color:#A9AEB6}
.sec-soft{background:var(--soft)}
.sec-head{max-width:760px;margin-bottom:44px}
.sec-head.center{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:100px;font-weight:700;font-size:.95rem;
  border:1.5px solid transparent;cursor:pointer;transition:.22s cubic-bezier(.2,.7,.3,1);
  white-space:nowrap;letter-spacing:-.01em;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--brand);color:#3A1204;box-shadow:0 8px 22px rgba(241,90,36,.34)}
.btn-primary:hover{background:var(--brand-l);transform:translateY(-2px);box-shadow:0 14px 30px rgba(241,90,36,.42)}
.btn-dark{background:var(--ink-900);color:#fff}
.btn-dark:hover{background:var(--ink-700);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.04)}
.btn-ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.6)}
.btn-outline{border-color:var(--line);color:var(--ink-900);background:#fff}
.btn-outline:hover{border-color:var(--brand);color:var(--brand-d);transform:translateY(-2px)}
.btn-wa{background:#25D366;color:#04301A}
.btn-wa:hover{filter:brightness(1.06);transform:translateY(-2px)}
.btn-lg{padding:17px 34px;font-size:1rem}
.btn-sm{padding:10px 18px;font-size:.85rem}
.btn-block{width:100%}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:90;height:var(--nav-h);
  background:rgba(18,20,25,.82);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.hdr.solid{background:rgba(255,255,255,.94);border-bottom-color:var(--line)}
.hdr .wrap-wide{height:100%;display:flex;align-items:center;gap:30px}
/* logo = the real iLatex vector wordmark (white on dark header, orange on light header) */
.logo{display:flex;align-items:center;flex:none}
.logo img{height:32px;width:auto;display:block}
.logo .lg-onlight{display:none}
.hdr.solid .logo .lg-ondark{display:none}
.hdr.solid .logo .lg-onlight{display:block}
.foot .logo img{height:36px}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  padding:9px 13px;border-radius:9px;font-size:.9rem;font-weight:600;
  color:rgba(255,255,255,.82);transition:.18s;
}
.hdr.solid .nav a{color:var(--muted)}
.nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.hdr.solid .nav a:hover{color:var(--brand-d);background:var(--soft-2)}
.nav a.active{color:#fff}
.hdr.solid .nav a.active{color:var(--brand-d)}
/* the video library is a headline destination, not a footer afterthought */
.nav a.nav-hot{display:inline-flex;align-items:center;gap:6px;color:var(--brand-l);background:rgba(241,90,36,.16)}
.nav a.nav-hot svg{width:12px;height:12px;flex:none}
.nav a.nav-hot:hover{color:#fff;background:rgba(241,90,36,.3)}
.hdr.solid .nav a.nav-hot{color:var(--brand-d);background:var(--brand-soft)}
.hdr.solid .nav a.nav-hot:hover,.hdr.solid .nav a.nav-hot.active{color:#fff;background:var(--brand)}
/* ---- product mega dropdown ---- */
.nav-has-sub{position:relative}
.nav-has-sub > a::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7}
.nav-sub{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  min-width:232px;background:var(--ink-900);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 18px 44px rgba(0,0,0,.30);opacity:0;visibility:hidden;
  transition:opacity .18s,visibility .18s;z-index:60;
}
.nav-has-sub:hover .nav-sub,
.nav-has-sub:focus-within .nav-sub{opacity:1;visibility:visible}
.nav .nav-sub a,
.hdr.solid .nav .nav-sub a{
  color:rgba(255,255,255,.86);background:none;padding:10px 14px;font-size:.88rem;font-weight:600;border-radius:8px;
}
.nav .nav-sub a:hover,
.hdr.solid .nav .nav-sub a:hover{color:#fff;background:rgba(255,255,255,.12)}
.nav .nav-sub a.active,
.hdr.solid .nav .nav-sub a.active{color:#fff;background:var(--brand)}
.hdr-cta{display:flex;align-items:center;gap:10px;margin-left:6px}
.hdr .btn{padding:11px 20px;font-size:.86rem}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:.2s}
.hdr.solid .burger span{background:var(--ink-900)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(1100px 620px at 78% -8%,rgba(241,90,36,.30),transparent 62%),
    radial-gradient(760px 520px at 6% 108%,rgba(255,145,97,.18),transparent 60%),
    linear-gradient(168deg,#121419 0%,#0E1013 52%,#0C0D10 100%);
  padding:74px 0 84px;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);
}
.hero .wrap-wide{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{color:#fff;max-width:15ch}
.hero h1 .grad{
  background:linear-gradient(100deg,#FFC2A3,var(--brand) 46%,#fff 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lead{color:#B5BAC2;font-size:1.12rem;max-width:52ch;margin-top:20px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
.hero-vidnote{margin:16px 0 0;font-size:.86rem;color:#9DA2AA;max-width:56ch}
.hero-vidnote a{color:var(--brand-l);font-weight:700;border-bottom:1px solid rgba(255,145,97,.45)}
.hero-vidnote a:hover{color:#fff;border-bottom-color:#fff}
.hero-badges{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.11)}
.hero-badges div{font-size:.83rem;color:#9DA2AA;display:flex;align-items:center;gap:8px}
.hero-badges svg{width:16px;height:16px;color:var(--brand-l);flex:none}
.hero-visual{position:relative}
.hero-shot{
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
  box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.09) inset;
  background:#000;
}
.hero-shot img{width:100%;display:block}
.float-card{
  position:absolute;background:rgba(255,255,255,.97);color:var(--ink-900);
  border-radius:14px;padding:13px 16px;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:11px;font-size:.83rem;font-weight:700;
}
.float-card small{display:block;font-weight:600;color:var(--muted);font-size:.74rem}
.float-card .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--soft-2);color:var(--brand-d)}
.float-card .ic svg{width:18px;height:18px}
.fc-1{left:-22px;bottom:64px;animation:float 6s ease-in-out infinite}
.fc-2{right:-16px;top:38px;animation:float 6s ease-in-out infinite .9s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* logo strip */
.logostrip{border-top:1px solid var(--line);background:var(--white);padding:26px 0}
.logostrip .row{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.logostrip .lbl{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.logostrip .items{display:flex;gap:34px;flex-wrap:wrap;align-items:center}
.logostrip .items span{font-weight:800;color:#9599A1;font-size:1rem;letter-spacing:-.02em}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.stat{padding:32px 26px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .n{font-size:clamp(1.9rem,3vw,2.6rem);font-weight:900;letter-spacing:-.04em;color:var(--ink-900);line-height:1}
.stat .n em{font-style:normal;color:var(--brand)}
.stat .l{font-size:.86rem;color:var(--muted);margin-top:9px;font-weight:600}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:22px}
.grid>*,.hero-grid>*,.contact-grid>*,.calc>*,.compare>*,.stats>*,.foot-grid>*,.quotes>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;transition:.25s cubic-bezier(.2,.7,.3,1);position:relative;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#DCDEE1}
.card .ic{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,rgba(241,90,36,.14),rgba(241,90,36,.06));color:var(--brand-d);
}
.card .ic svg{width:23px;height:23px}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);font-size:.93rem;margin:0}
.card.on-dark{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11)}
.card.on-dark:hover{background:rgba(255,255,255,.075)}
.card.on-dark .ic{background:rgba(241,90,36,.16);color:var(--brand-l)}
.card.on-dark p{color:#A9AEB6}

/* ---------- product cards ---------- */
.prod{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:.26s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column;
}
.prod:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#D6D8DC}
.prod .pic{aspect-ratio:4/3;background:var(--soft);display:grid;place-items:center;overflow:hidden;position:relative}
.prod .pic img{width:100%;height:100%;object-fit:cover;transition:.4s}
.prod:hover .pic img{transform:scale(1.045)}
.prod .tag{position:absolute;top:12px;left:12px;background:var(--ink-900);color:#fff;font-size:.7rem;font-weight:800;padding:6px 11px;border-radius:100px;letter-spacing:.03em}
.prod .tag.hot{background:var(--magenta)}
.prod .body{padding:22px;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:1.08rem;margin-bottom:6px}
.prod .sub{font-size:.82rem;color:var(--muted-2);font-weight:700;letter-spacing:.02em;margin-bottom:12px}
.prod p{font-size:.9rem;color:var(--muted);flex:1}
.prod .foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.prod .foot .pn{font-family:var(--mono);font-size:.78rem;color:var(--brand-d);font-weight:700}
.prod .foot a{font-size:.85rem;font-weight:800;color:var(--ink-900);display:inline-flex;align-items:center;gap:5px}
.prod .foot a:hover{color:var(--brand-d)}

/* ---------- swatch row ---------- */
.swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.sw{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;text-align:center;transition:.22s}
.sw:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.sw img{aspect-ratio:1;object-fit:cover;width:100%}
.sw .nm{font-size:.78rem;font-weight:800;padding:9px 4px;border-top:1px solid var(--line)}
.sw .dot{display:block;width:100%;height:5px}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.card .tbl-wrap table,.g3 .tbl-wrap table,.g4 .tbl-wrap table{min-width:0}
thead th{
  background:var(--ink-900);color:#fff;text-align:left;padding:15px 18px;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;white-space:nowrap;
}
tbody td{padding:14px 18px;border-top:1px solid var(--line);vertical-align:top}
tbody tr:hover{background:var(--soft)}
td .pn{font-family:var(--mono);font-size:.8rem;color:var(--brand-d);font-weight:700}
.badge{display:inline-block;font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:100px;letter-spacing:.02em}
.badge.ok{background:rgba(18,164,91,.12);color:#0C7A43}
.badge.brand{background:rgba(241,90,36,.13);color:var(--brand-d)}
.badge.mag{background:rgba(229,0,109,.1);color:#B00055}

/* ---------- compare (OEM vs compatible) ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.compare>div{padding:32px}
.compare .oem{background:var(--soft);border-right:1px solid var(--line)}
.compare .com{background:#fff}
.compare h4{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;font-weight:800}
.price-row{display:flex;align-items:baseline;justify-content:space-between;padding:13px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.price-row:last-child{border-bottom:0}
.price-row .v{font-weight:800;font-size:1.02rem}
.price-row .v.strike{text-decoration:line-through;color:var(--muted-2);font-weight:600}
.price-row .v.save{color:var(--ok)}
.pill-save{display:inline-flex;align-items:center;gap:7px;background:rgba(18,164,91,.12);color:#0C7A43;font-weight:800;font-size:.82rem;padding:8px 14px;border-radius:100px;margin-top:14px}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.calc .in{padding:38px}
.calc .out{background:var(--ink-900);color:#fff;padding:38px}
.calc label{display:block;font-size:.83rem;font-weight:700;color:var(--muted);margin:0 0 7px}
.calc .field{margin-bottom:20px}
.calc input[type=range]{width:100%;accent-color:var(--brand)}
.calc select,.calc input[type=number]{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  font-size:.95rem;font-family:inherit;background:#fff;color:var(--text);
}
.calc select:focus,.calc input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(241,90,36,.14)}
.rangeval{font-weight:800;color:var(--ink-900);float:right;font-family:var(--mono)}
.calc .out .top{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#8E939B;font-weight:800}
.calc .big{font-size:clamp(2.2rem,5vw,3.1rem);font-weight:900;letter-spacing:-.04em;color:#fff;line-height:1.05;margin:10px 0 4px}
.calc .big em{font-style:normal;color:var(--brand-l)}
.calc .sub{color:#A9AEB6;font-size:.9rem}
.calc .lines{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13)}
.calc .lines div{display:flex;justify-content:space-between;font-size:.9rem;padding:7px 0;color:#CFD1D5}

/* ---------- timeline / steps ---------- */
.steps{counter-reset:s;display:grid;gap:0}
.step{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);counter-increment:s}
.step:last-child{border-bottom:0}
.step .no{
  width:48px;height:48px;border-radius:14px;background:linear-gradient(140deg,var(--brand),var(--brand-d));color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:1.1rem;
}
.step .no::before{content:counter(s,decimal-leading-zero)}
.step h3{margin-bottom:6px;font-size:1.08rem}
.step p{color:var(--muted);font-size:.93rem;margin:0}

/* ---------- badges / certs ---------- */
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cert{border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px 18px;text-align:center;background:#fff;transition:.22s}
.cert:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.cert .ic{width:42px;height:42px;margin:0 auto 12px;border-radius:11px;background:var(--soft-2);display:grid;place-items:center;color:var(--brand-d)}
.cert .ic svg{width:21px;height:21px}
.cert .t{font-weight:800;font-size:.9rem}
.cert .d{font-size:.78rem;color:var(--muted);margin-top:3px}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal figure{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--soft);position:relative;aspect-ratio:1}
.gal figure.wide{grid-column:span 2;aspect-ratio:2/1}
.gal img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 13px;color:#fff;font-size:.84rem;font-weight:700;
  background:linear-gradient(transparent,rgba(11,12,15,.86));
}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column}
.quote .stars{color:#F5A623;letter-spacing:2px;font-size:.9rem;margin-bottom:12px}
.quote p{font-size:.95rem;color:var(--text);font-style:italic;flex:1}
.quote .who{display:flex;align-items:center;gap:11px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.quote .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,var(--brand),var(--brand-d));display:grid;place-items:center;color:#fff;font-weight:800;font-size:.85rem;flex:none}
.quote .who b{display:block;font-size:.88rem}
.quote .who small{color:var(--muted-2);font-size:.78rem}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;padding:20px 24px;font-weight:700;font-size:.98rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;transition:.18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--soft)}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--brand-d);line-height:1;flex:none;transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 24px 22px;color:var(--muted);font-size:.93rem}

/* ---------- CTA band ---------- */
.cta{
  border-radius:var(--radius-lg);padding:54px;position:relative;overflow:hidden;
  background:radial-gradient(800px 420px at 84% 0%,rgba(241,90,36,.34),transparent 60%),
             linear-gradient(150deg,#1A1D24,#0E1013);
  color:#fff;display:grid;grid-template-columns:1.4fr 1fr;gap:38px;align-items:center;
}
.cta h2{color:#fff}
.cta p{color:#B5BAC2;margin:14px 0 0;max-width:52ch}
.cta .acts{display:flex;flex-direction:column;gap:12px}

/* ---------- distributors-wanted band ---------- */
.pb-inner{
  border-radius:var(--radius-lg);padding:56px;position:relative;overflow:hidden;
  background:
    radial-gradient(760px 400px at 88% -8%,rgba(241,90,36,.16),transparent 62%),
    linear-gradient(150deg,#1A1D24,#0E1013);
  border:1px solid rgba(241,90,36,.22);
  color:#fff;display:grid;grid-template-columns:1.45fr 1fr;gap:40px;align-items:center;
}
.pb-inner .eyebrow.on-dark{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.95rem;font-weight:800;letter-spacing:.06em;
  color:#fff;background:rgba(241,90,36,.18);
  border:1px solid rgba(241,90,36,.55);border-radius:100px;
  padding:10px 22px;margin-bottom:20px;
}
.pb-inner .eyebrow.on-dark::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--brand-l);flex:none;
  box-shadow:0 0 0 4px rgba(255,145,97,.22);
}
.pb-inner h2{color:#fff}
.pb-inner .pb-sub{color:#B5BAC2;max-width:54ch;margin:14px 0 0}
.pb-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pb-chips .chip{
  display:inline-flex;align-items:center;padding:8px 16px;border-radius:100px;
  background:rgba(241,90,36,.10);border:1px solid rgba(241,90,36,.30);
  font-size:.86rem;font-weight:700;color:#FFD9C7;
}
.pb-chips .chip:hover{border-color:var(--brand);color:#fff}
.pb-inner .acts{display:flex;flex-direction:column;gap:12px}
.btn-light{background:#fff;color:var(--brand-d)}
.btn-light:hover{background:#FFF1E9;transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
@media (max-width:780px){
  .pb-inner{grid-template-columns:1fr;padding:38px 28px;gap:26px}
}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .field{margin-bottom:16px}
.form label{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.form input,.form select,.form textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;
  font-size:.94rem;font-family:inherit;background:#fff;color:var(--text);transition:.18s;
}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(241,90,36,.13)}
.form .note{font-size:.78rem;color:var(--muted-2);margin-top:12px}
.form-ok{display:none;background:rgba(18,164,91,.1);border:1px solid rgba(18,164,91,.3);color:#0C7A43;padding:14px 16px;border-radius:11px;font-size:.9rem;font-weight:700;margin-bottom:16px}
.contact-list{display:grid;gap:14px}
.cline{display:flex;gap:15px;padding:19px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:.2s}
.cline:hover{box-shadow:var(--shadow);border-color:#DCDEE1}
.cline .ic{width:44px;height:44px;border-radius:12px;background:var(--soft-2);color:var(--brand-d);display:grid;place-items:center;flex:none}
.cline .ic svg{width:21px;height:21px}
.cline .ic.wa{background:rgba(37,211,102,.14);color:#128C4A}
.cline b{display:block;font-size:.94rem}
.cline span{color:var(--muted);font-size:.86rem;word-break:break-word}

/* ---------- page hero (inner pages) ---------- */
.phero{
  background:
    radial-gradient(760px 420px at 80% -30%,rgba(241,90,36,.26),transparent 62%),
    linear-gradient(160deg,#121419,#0E1013);
  color:#fff;padding:60px 0 56px;position:relative;overflow:hidden;
}
.phero::after{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(64% 70% at 40% 30%,#000,transparent);
}
.phero .wrap-wide{position:relative;z-index:2}
.phero h1{color:#fff;max-width:20ch}
.phero p{color:#B5BAC2;max-width:62ch;margin-top:16px;font-size:1.06rem}
.crumb{font-size:.8rem;color:#8E939B;margin-bottom:16px;font-weight:600}
.crumb a:hover{color:#fff}

/* ---------- footer ---------- */
.foot{background:var(--ink-950);color:#8E939B;padding:64px 0 0;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1fr 1.55fr;gap:34px;padding-bottom:44px}
.foot h5{color:#fff;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 16px;font-weight:800}
.foot a{display:block;padding:5px 0;color:#8E939B;transition:.16s}
.foot a:hover{color:#fff}
.foot .logo{color:#fff;margin-bottom:16px}
.foot .desc{max-width:38ch;line-height:1.7}
.foot .bottom{border-top:1px solid rgba(255,255,255,.09);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#6D7178}
.foot .bottom a.foot-legal{display:inline;padding:0;color:#8E939B;transition:.16s}
.foot .bottom a.foot-legal:hover{color:#fff}

/* ---------- 隐私政策正文 ---------- */
.pv-sec{margin-bottom:36px}
.pv-sec h2{font-size:1.3rem;margin:0 0 14px}
.pv-sec p.muted{margin:0 0 12px;line-height:1.8}
.pv-list{margin:0 0 14px;padding-left:22px}
.pv-list li{margin:7px 0;line-height:1.65}
.foot .soc{display:flex;gap:10px}
.foot .soc a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;padding:0}
.foot .soc a:hover{background:var(--brand);color:#3A1204}
.foot .soc svg{width:17px;height:17px}

/* ---------- floating whatsapp ---------- */
.fab{
  position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:10px;
  background:#25D366;color:#04301A;padding:13px 18px;border-radius:100px;font-weight:800;font-size:.9rem;
  box-shadow:0 14px 34px rgba(37,211,102,.42);transition:.22s;
}
.fab:hover{transform:translateY(-3px) scale(1.02)}
.fab svg{width:20px;height:20px}

/* ==========================================================================
   HOMEPAGE VIDEO CENTRE (video is a headline feature, not a footer link)
   ========================================================================== */
.vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:36px}
.vhead .sec-head{margin-bottom:0}
.vhead .lead{margin-bottom:0}
.vhead-acts{display:flex;gap:11px;flex-wrap:wrap;flex:none}

.vfeat{display:grid;grid-template-columns:1.62fr 1fr;gap:22px;align-items:stretch}
.vplayer{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.1)}
.vplayer video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.vplayer .vtag{
  position:absolute;left:14px;top:14px;z-index:2;
  background:rgba(11,12,15,.74);backdrop-filter:blur(7px);color:#fff;
  font-size:.7rem;font-weight:800;letter-spacing:.06em;padding:6px 12px;border-radius:100px;text-transform:uppercase;
}
.vplayer .vtag::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-right:8px;vertical-align:1px}

.vrail{display:flex;flex-direction:column;gap:10px}
.vrail-item{
  display:flex;gap:13px;align-items:center;text-align:left;width:100%;
  padding:11px;border-radius:14px;border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.045);color:inherit;font:inherit;cursor:pointer;transition:.2s;
}
a.vrail-item:hover{background:rgba(255,255,255,.09);border-color:rgba(241,90,36,.55);transform:translateX(3px)}
.vrail-item.is-on{background:rgba(241,90,36,.14);border-color:rgba(241,90,36,.5)}
.vrail-item .vt{width:96px;aspect-ratio:16/9;border-radius:9px;overflow:hidden;flex:none;background:#000;position:relative}
.vrail-item .vt img{width:100%;height:100%;object-fit:cover;opacity:.86}
.vrail-item .vt i{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,12,15,.28)}
.vrail-item .vt i svg{width:16px;height:16px;color:#fff}
.vrail-item .vb{min-width:0}
.vrail-item b{display:block;font-size:.9rem;color:#fff;margin-bottom:4px;font-weight:700}
.vrail-item small{display:block;font-size:.76rem;color:#A9AEB6;font-family:var(--mono)}
.vrail-item .rb{display:inline-block;font-size:.6rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-l);margin-bottom:3px}
.vnote{
  margin-top:16px;font-size:.84rem;color:#A9AEB6;
  display:flex;gap:10px;align-items:flex-start;max-width:96ch;
}
.vnote svg{width:17px;height:17px;flex:none;color:var(--brand-l);margin-top:2px}
.vnote a{color:var(--brand-l);font-weight:700;border-bottom:1px solid rgba(255,145,97,.45)}
.vnote a:hover{color:#fff;border-bottom-color:#fff}
.vnote strong{color:#E6E7E9}

/* featured "now playing" card, usable on a light section */
.vfeature{
  display:grid;grid-template-columns:1.62fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--ink-950);box-shadow:var(--shadow-lg);margin-bottom:34px;
}
.vfeature .vplayer{border-radius:0;box-shadow:none;border:0}
.vfeature .vside{padding:34px 32px;display:flex;flex-direction:column;justify-content:center}
.vfeature .vside .rb{
  display:inline-block;font-size:.64rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-l);margin-bottom:10px;
}
.vfeature .vside h3{color:#fff;margin-bottom:10px;font-size:1.16rem}
.vfeature .vside p{color:#A9AEB6;font-size:.89rem;margin:0 0 16px}
.vside ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:9px}
.vside li{font-size:.86rem;color:#A9AEB6;display:flex;gap:10px;align-items:flex-start}
.vside li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;margin-top:8px}

/* ==========================================================================
   VIDEO LIBRARY
   ========================================================================== */
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vids.g2v{grid-template-columns:repeat(2,minmax(0,1fr))}
.vid{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:.26s cubic-bezier(.2,.7,.3,1);text-align:left;
  padding:0;cursor:pointer;font:inherit;color:inherit;width:100%;
}
.vid:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#D6D8DC}
.vid .thumb{position:relative;aspect-ratio:16/9;background:var(--ink-900);overflow:hidden;display:block}
.vid .thumb img{width:100%;height:100%;object-fit:cover;transition:.5s;opacity:.92}
.vid:hover .thumb img{transform:scale(1.05);opacity:1}
.vid .play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(11,12,15,.06),rgba(11,12,15,.42));
}
.vid .play i{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  background:rgba(255,255,255,.95);color:var(--ink-900);box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:.24s cubic-bezier(.2,.7,.3,1);
}
.vid .play i svg{width:22px;height:22px;margin-left:3px}
.vid:hover .play i{background:var(--brand);color:#3A1204;transform:scale(1.08)}
.vid .dur{
  position:absolute;right:10px;bottom:10px;background:rgba(11,12,15,.82);color:#fff;
  font-size:.72rem;font-weight:800;padding:4px 9px;border-radius:6px;letter-spacing:.03em;
  font-family:var(--mono);
}
.vid .ribbon{
  position:absolute;left:10px;top:10px;font-size:.68rem;font-weight:900;padding:5px 10px;
  border-radius:100px;letter-spacing:.05em;text-transform:uppercase;backdrop-filter:blur(4px);
}
.vid .ribbon.live{background:rgba(18,164,91,.92);color:#fff}
.vid .ribbon.soon{background:rgba(11,12,15,.7);color:#FFD24D;backdrop-filter:blur(6px)}
.vid .ribbon.soon::before{content:"◐ ";opacity:.8}
.vid .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.vid .cat{font-size:.7rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-d);margin-bottom:9px}
.vid h3{font-size:1.04rem;margin-bottom:8px;letter-spacing:-.02em}
.vid p{font-size:.89rem;color:var(--muted);margin:0;flex:1}
.vid .meta{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line);
}
.vid .meta span{
  font-size:.72rem;font-weight:700;color:var(--muted);background:var(--soft);border:1px solid var(--line);
  padding:3px 9px;border-radius:100px;
}

/* filter chips */
.filterbar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px;align-items:center}
.chip{
  font:inherit;font-size:.86rem;font-weight:700;padding:9px 17px;border-radius:100px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--muted);transition:.2s;white-space:nowrap;
}
.chip:hover{border-color:var(--brand);color:var(--brand-d)}
.chip.on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.chip .n{opacity:.55;font-weight:600;margin-left:5px;font-family:var(--mono);font-size:.78rem}
.sec-dark .chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#B5BAC2}
.sec-dark .chip:hover{border-color:var(--brand-l);color:#fff}
.sec-dark .chip.on{background:var(--brand);border-color:var(--brand);color:#3A1204}
.vid[hidden],.dlrow[hidden]{display:none}
.empty{display:none;padding:44px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);background:#fff}
.empty.show{display:block}

/* modal player */
.modal{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:24px;
  background:rgba(9,10,13,.86);backdrop-filter:blur(6px);
}
.modal.open{display:grid}
.modal .box{width:min(1040px,100%);background:var(--ink-950);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.modal .frame{position:relative;aspect-ratio:16/9;background:#000}
.modal .frame iframe,.modal .frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.modal .ph{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#A9AEB6;padding:30px;
}
.modal .ph b{display:block;color:#fff;font-size:1.05rem;margin-bottom:8px}
.modal .ph p{max-width:52ch;margin:0 auto 18px;font-size:.9rem}
.modal .mh{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 26px;color:#fff}
.modal .mh h3{color:#fff;font-size:1.06rem;margin-bottom:6px}
.modal .mh p{color:#A9AEB6;font-size:.88rem;margin:0;max-width:70ch;white-space:pre-line}
.modal .x{
  background:rgba(255,255,255,.09);border:0;color:#fff;width:38px;height:38px;border-radius:50%;
  cursor:pointer;flex:none;display:grid;place-items:center;font-size:1.1rem;transition:.2s;
}
.modal .x:hover{background:var(--magenta)}

/* ==========================================================================
   ICC / DOWNLOAD CENTRE
   ========================================================================== */
.icc-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.spectro{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow);
}
.spectro h4{margin-bottom:18px}
.delta{display:grid;gap:2px}
.delta .d-row{display:grid;grid-template-columns:88px 1fr 74px;gap:12px;align-items:center;font-size:.85rem;padding:9px 0;border-bottom:1px solid var(--line)}
.delta .d-row:last-child{border-bottom:0}
.delta .lab{font-weight:800;font-family:var(--mono);font-size:.8rem}
.delta .bar{height:9px;border-radius:100px;background:var(--soft-2);overflow:hidden;position:relative}
.delta .bar i{position:absolute;inset:0 auto 0 0;border-radius:100px;display:block}
.delta .vv{text-align:right;font-family:var(--mono);font-weight:800;font-size:.78rem;color:var(--muted)}
.delta .vv.good{color:var(--ok)}

.dl-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.dl-hd{
  display:grid;grid-template-columns:1.9fr 1.15fr 1.3fr .9fr .8fr 132px;gap:16px;align-items:center;
  padding:14px 20px;background:var(--ink-900);color:#fff;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:800;
}
.dlrow{
  display:grid;grid-template-columns:1.9fr 1.15fr 1.3fr .9fr .8fr 132px;gap:16px;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line);transition:.18s;font-size:.88rem;
}
.dlrow:last-child{border-bottom:0}
.dlrow:hover{background:var(--soft)}
.dlrow .nm{font-weight:700;display:flex;align-items:center;gap:11px;min-width:0}
.dlrow .nm i{
  width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(241,90,36,.16),rgba(241,90,36,.05));color:var(--brand-d);
  font-style:normal;font-size:.62rem;font-weight:900;letter-spacing:.02em;
}
.dlrow .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlrow .f{font-family:var(--mono);font-size:.76rem;color:var(--muted-2);font-weight:700}
.dlrow .s{color:var(--muted);font-size:.84rem}
.dlbtn{display:inline-flex;align-items:center;gap:7px;font-size:.82rem}
.dlbtn svg{width:15px;height:15px}

/* resource tiles */
.res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rtile{
  display:flex;gap:16px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  transition:.24s cubic-bezier(.2,.7,.3,1);
}
.rtile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#DCDEE1}
.rtile .ic{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--soft-2);color:var(--brand-d)}
.rtile .ic svg{width:22px;height:22px}
.rtile b{display:block;font-size:.97rem;margin-bottom:5px}
.rtile span{font-size:.86rem;color:var(--muted);display:block}

/* service tiles */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.svc{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px 26px;
  transition:.26s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column;
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#D6D8DC}
.svc .idx{
  position:absolute;top:-11px;left:26px;background:var(--ink-900);color:#fff;font-size:.7rem;font-weight:900;
  padding:5px 11px;border-radius:100px;letter-spacing:.1em;font-family:var(--mono);
}
.svc.free .idx{background:var(--ok)}
.svc .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(140deg,rgba(241,90,36,.15),rgba(241,90,36,.05));color:var(--brand-d)}
.svc .ic svg{width:24px;height:24px}
.svc h3{font-size:1.05rem;margin-bottom:9px}
.svc p{font-size:.9rem;color:var(--muted);margin:0 0 16px;flex:1}
.svc ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:7px}
.svc ul li{font-size:.85rem;color:var(--muted);display:flex;gap:9px;align-items:flex-start}
.svc ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;margin-top:8px}
.svc .go{font-size:.86rem;font-weight:800;color:var(--ink-900);display:inline-flex;align-items:center;gap:6px}
.svc .go:hover{color:var(--brand-d)}

/* dark-section r-tiles */
.sec-dark .rtile,.sec-dark .svc{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11)}
.sec-dark .rtile:hover,.sec-dark .svc:hover{background:rgba(255,255,255,.075)}
.sec-dark .rtile b,.sec-dark .svc h3{color:#fff}
.sec-dark .rtile span,.sec-dark .svc p{color:#A9AEB6}
.sec-dark .rtile .ic,.sec-dark .svc .ic{background:rgba(241,90,36,.16);color:var(--brand-l)}

/* notice */
.notice{
  display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--radius-sm);
  background:rgba(232,161,0,.09);border:1px solid rgba(232,161,0,.28);font-size:.88rem;color:#6B4B00;
}
.notice.brand{background:rgba(241,90,36,.08);border-color:rgba(241,90,36,.26);color:#8A3311}
.notice svg{width:19px;height:19px;flex:none;margin-top:2px}
.notice b{font-weight:800}

/* anchor nav */
.anchors{display:flex;gap:10px;flex-wrap:wrap;padding:8px;background:var(--soft);border:1px solid var(--line);border-radius:100px;width:fit-content}
.anchors a{font-size:.86rem;font-weight:700;padding:9px 18px;border-radius:100px;color:var(--muted);transition:.2s}
.anchors a:hover{background:#fff;color:var(--brand-d);box-shadow:var(--shadow-sm)}

/* steps accordion (install guides) */
.guide{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.guide details{border-bottom:1px solid var(--line)}
.guide details:last-child{border-bottom:0}
.guide summary{
  cursor:pointer;padding:18px 22px;font-weight:800;font-size:.96rem;list-style:none;
  display:flex;align-items:center;gap:13px;transition:.18s;
}
.guide summary::-webkit-details-marker{display:none}
.guide summary:hover{background:var(--soft)}
.guide summary .rip{
  font-family:var(--mono);font-size:.72rem;background:var(--ink-900);color:#fff;
  padding:3px 9px;border-radius:6px;letter-spacing:.02em;flex:none;
}
.guide summary::after{content:"+";margin-left:auto;font-size:1.3rem;font-weight:400;color:var(--brand-d);line-height:1;transition:.2s}
.guide details[open] summary::after{transform:rotate(45deg)}
.guide .g{padding:4px 22px 22px;color:var(--muted);font-size:.9rem}
.guide .g ol{margin:0;padding-left:20px;display:grid;gap:9px}
.guide .g li{padding-left:2px}
.guide .g code{
  font-family:var(--mono);font-size:.82rem;background:var(--soft-2);padding:2px 7px;border-radius:5px;
  color:var(--ink-900);font-weight:700;
}

/* ---------- reveal (fail-safe: only hides when JS is active) ---------- */
.reveal{transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
html.js .reveal{opacity:0;transform:translateY(22px)}
html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media(max-width:1240px){
  .hdr .wrap-wide{gap:18px}
  .nav a{padding:9px 10px;font-size:.855rem}
  .nav a.nav-hot{gap:5px}
}
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:42px}
  .hero h1{max-width:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .certs{grid-template-columns:repeat(2,1fr)}
  .vids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vfeat{grid-template-columns:1fr;gap:18px}
  .vfeature{grid-template-columns:1fr}
  .svc-grid,.res{grid-template-columns:repeat(2,minmax(0,1fr))}
  .icc-hero-grid{grid-template-columns:1fr;gap:34px}
  .dl-hd,.dlrow{grid-template-columns:1.7fr 1.1fr 1.2fr .8fr 118px;gap:13px}
  .dl-hd .h-rip,.dlrow .c-rip{display:none}
}
@media(max-width:1000px){
  .nav,.hdr-cta .btn{display:none}
  .burger{display:block}
  .hdr.open .nav{
    display:flex;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;
    background:var(--ink-900);padding:14px;gap:2px;border-bottom:1px solid rgba(255,255,255,.1);
  }
  .hdr.open .nav a{padding:13px 15px;font-size:.98rem}
  .hdr.open .nav a.nav-hot{background:rgba(241,90,36,.16)}
  .hdr.open .nav-has-sub{position:static}
  .hdr.open .nav-sub{
    position:static;transform:none;opacity:1;visibility:visible;
    background:rgba(255,255,255,.04);border:0;box-shadow:none;
    padding:4px 0 6px 16px;min-width:0;
  }
  .hdr.open .nav .nav-sub a{padding:11px 15px;font-size:.94rem}
}
@media(max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
  .g3,.g2,.compare,.calc,.contact-grid,.cta{grid-template-columns:1fr}
  .vids,.vids.g2v,.svc-grid,.res{grid-template-columns:1fr}
  .calc .out{border-radius:0}
  .compare .oem{border-right:0;border-bottom:1px solid var(--line)}
  .swatches{grid-template-columns:repeat(4,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr}
  .sec{padding:62px 0}
  .cta{padding:36px}
  .fab span{display:none}
  .fab{padding:15px}
  .dl-hd{display:none}
  .dlrow{grid-template-columns:1fr;gap:8px;padding:18px 20px}
  .dlrow .c-sub,.dlrow .c-size,.dlrow .c-ver{font-size:.8rem}
  .dlrow .c-act{justify-self:start;margin-top:4px}
  .anchors{border-radius:var(--radius);width:100%}
}
@media(max-width:560px){
  .g4,.certs,.gal{grid-template-columns:1fr}
  .gal figure.wide{grid-column:span 1}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .form .row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .float-card{display:none}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
  .spectro{padding:20px}
  .spectro h4{font-size:.92rem}
  .delta .d-row{grid-template-columns:72px 1fr 58px;gap:9px}
  .dl-list{border-radius:var(--radius-sm)}
  .dlrow{padding:16px}
  .vid .body{padding:17px 18px 19px}
  .svc{padding:24px 20px 22px}
  .svc .idx{left:20px}
  .modal{padding:10px}
  .modal .mh{padding:16px 18px;gap:12px}
  .modal .box{border-radius:var(--radius)}
  .rtile{padding:20px}
  .anchors a{padding:8px 14px;font-size:.82rem}
}

/* ==========================================================================
   MULTILINGUAL — language switcher, auto-detect notice, RTL support
   (pairs with assets/js/i18n.js)
   ========================================================================== */
.langs{position:relative;flex:none}
.langs-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  color:#fff;padding:9px 12px;border-radius:10px;font:inherit;font-size:.82rem;font-weight:700;
  letter-spacing:.02em;transition:.18s;
}
.langs-btn:hover{background:rgba(255,255,255,.18)}
.langs-btn svg{width:16px;height:16px;flex:none;opacity:.9}
.langs-chev{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.75;transition:.2s}
.langs.is-open .langs-chev{transform:rotate(180deg)}
.hdr.solid .langs-btn{background:var(--soft-2);border-color:var(--line);color:var(--ink-900)}
.hdr.solid .langs-btn:hover{background:var(--brand-soft);border-color:rgba(241,90,36,.3);color:var(--brand-d)}
.langs-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:80;min-width:212px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px;
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;
  max-height:min(72vh,520px);overflow:auto;
}
.langs.is-open .langs-menu{opacity:1;visibility:visible;transform:none}
.langs-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:none;border:0;cursor:pointer;font:inherit;font-size:.88rem;font-weight:600;
  color:var(--text);padding:9px 11px;border-radius:9px;text-align:left;transition:.14s;
}
.langs-item:hover{background:var(--soft-2);color:var(--brand-d)}
.langs-item.is-on{background:var(--brand-soft);color:var(--brand-d)}
.langs-item.is-on .lg-code{color:var(--brand)}
.lg-code{font-size:.68rem;font-weight:800;letter-spacing:.08em;color:var(--muted-2)}

/* ---- auto-detect notice bar ---- */
.lang-bar{
  position:fixed;left:18px;bottom:18px;z-index:120;max-width:min(520px,calc(100vw - 36px));
  display:flex;align-items:center;gap:11px;
  background:var(--ink-900);color:#fff;border:1px solid rgba(255,255,255,.14);
  padding:13px 15px;border-radius:14px;box-shadow:var(--shadow-lg);
  font-size:.86rem;line-height:1.45;
  opacity:0;transform:translateY(14px);transition:.26s;
}
.lang-bar.is-on{opacity:1;transform:none}
.lang-bar svg{width:18px;height:18px;flex:none;color:var(--brand-l)}
.lang-bar-tx{flex:1}
.lang-bar-a{
  background:var(--brand);color:#fff;border:0;border-radius:9px;cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:700;padding:8px 12px;white-space:nowrap;
}
.lang-bar-a:hover{background:var(--brand-d)}
.lang-bar-x{background:none;border:0;color:rgba(255,255,255,.6);font-size:1.3rem;line-height:1;cursor:pointer;padding:2px 4px}
.lang-bar-x:hover{color:#fff}

/* ---- right-to-left (Arabic) ---- */
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .nav a,html[dir="rtl"] .langs-item{text-align:right}
/* 语言菜单在 RTL 下仍以按钮右缘为基准向左展开，窄屏也不会溢出 */
html[dir="rtl"] .langs-menu{right:0;left:auto;max-width:calc(100vw - 24px)}
html[dir="rtl"] .lang-bar{left:auto;right:18px}
html[dir="rtl"] .sec-head,html[dir="rtl"] .card,html[dir="rtl"] .step,
html[dir="rtl"] .quote,html[dir="rtl"] .faq,html[dir="rtl"] .svc,
html[dir="rtl"] .vnote,html[dir="rtl"] .lead,html[dir="rtl"] .prod .body,
html[dir="rtl"] .vid .body,html[dir="rtl"] .cta,html[dir="rtl"] .dlrow{text-align:right}

/* ---- product cards (overview / category pages / homepage) ---- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pgrid.g4{grid-template-columns:repeat(4,1fr)}
.pgrid.g2{grid-template-columns:repeat(2,1fr)}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:.2s;
  box-shadow:0 6px 20px rgba(20,30,50,.05)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,30,50,.12);border-color:rgba(241,90,36,.35)}
.pcard-img{aspect-ratio:4/3;background:var(--soft);display:grid;place-items:center;overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:.3s}
.pcard:hover .pcard-img img{transform:scale(1.04)}
.pcard-bd{padding:16px 18px 20px}
.pcard-t{font-weight:700;font-size:1.02rem;display:block}
.pcard-d{color:var(--muted);font-size:.86rem;margin-top:4px;display:block;line-height:1.45}
.pcard-meta{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.pcard-more{margin-top:12px;color:var(--brand-d);font-weight:700;font-size:.86rem;display:inline-flex;align-items:center;gap:5px}
.pcard:hover .pcard-more{gap:9px}
.pcard-specs{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.pcard-specs li{font-size:.78rem;color:var(--muted-2);padding:6px 0;border-bottom:1px dashed var(--line);font-family:var(--mono);letter-spacing:.01em}
.pcard-specs li:last-child{border-bottom:0}
@media(max-width:1000px){.pgrid.g4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.pgrid,.pgrid.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pgrid,.pgrid.g2,.pgrid.g4{grid-template-columns:1fr}}
html[dir="rtl"] .pcard-bd,html[dir="rtl"] .pcard-more{text-align:right}
html[dir="rtl"] .sec-head.center,html[dir="rtl"] .sec-head[style*="center"]{text-align:center}
html[dir="rtl"] .foot-grid,html[dir="rtl"] .foot .desc{text-align:right}
html[dir="rtl"] table th,html[dir="rtl"] table td{text-align:right}
html[dir="rtl"] .fab svg{transform:scaleX(-1)}
html[dir="rtl"] .stat{text-align:center}
/* 未翻译的英文段落在 RTL 版式里会「句末句号跑到最左边」——
   用 unicode-bidi:plaintext 让每段按自身第一个强字符定方向，英文段落保持正确标点顺序 */
html[dir="rtl"] p,html[dir="rtl"] li,html[dir="rtl"] summary,html[dir="rtl"] figcaption,
html[dir="rtl"] .lead,html[dir="rtl"] .a,html[dir="rtl"] .desc,html[dir="rtl"] .sub,
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,
html[dir="rtl"] td,html[dir="rtl"] th,html[dir="rtl"] .dt,html[dir="rtl"] .lbl{unicode-bidi:plaintext}

/* arabic / CJK friendly stacks */
html.lang-ar body{font-family:"Segoe UI","Noto Naskh Arabic","Amiri",Tahoma,system-ui,sans-serif}
html.lang-ja body{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",system-ui,sans-serif}
html.lang-ko body{font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif}
html.lang-zhcn body{font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans SC",system-ui,sans-serif}
html:lang(ar) .eyebrow,html:lang(ar) .badge{letter-spacing:0}
/* 中日韩标题避免「末行只剩一两个字」的孤字行；不支持该属性的浏览器自动忽略 */
html.lang-zhcn h1,html.lang-zhcn h2,html.lang-ja h1,html.lang-ja h2,
html.lang-ko h1,html.lang-ko h2,html.lang-ar h1,html.lang-ar h2{text-wrap:pretty;word-break:normal}

@media(max-width:1000px){
  .langs-btn .langs-cur{display:none}
  .langs-btn{padding:9px 10px}
}
@media(max-width:560px){
  .lang-bar{left:12px;right:12px;bottom:12px;max-width:none}
  html[dir="rtl"] .lang-bar{right:12px;left:12px}
}