@font-face{font-family:"ZJ Sans";src:url(fonts/heros-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"ZJ Sans";src:url(fonts/heros-bold.woff) format("woff");font-weight:700;font-display:swap}

/* ============ tokens ============ */
:root{
  color-scheme:dark;
  --paper:#0a0d11; --surface:#11161b; --stage:#151b21; --stage-2:#1b222a; --photo:#151b21;
  --spot:radial-gradient(120% 90% at 50% 34%,#2b343e 0%,#1a2128 42%,#12171c 72%,#0e1216 100%);
  --ink:#f2f4f5; --ink-2:#d3d9dd; --muted:#9ba4ac; --faint:#7c858d;
  --line:#222a32; --line-2:#323c46;
  --night:#06080b; --night-2:#0f1419; --night-3:#171e25; --on-night:#f2f4f5; --on-night-muted:#9ba4ac; --night-line:rgba(255,255,255,.1);
  --brand:#e3392e; --brand-hover:#f24c40; --on-brand:#ffffff; --glow:rgba(227,57,46,.35);
  --wa:#1f9d55; --wa-hover:#1a8a4a; --ok:#35b26b; --err:#ff5a4f;
  --sans:"ZJ Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --max:1320px; --gutter:clamp(16px,4.4vw,56px); --hdr:84px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 30px 60px -30px rgba(0,0,0,.9);
}

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:150px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,5.4rem)}
h2{font-size:clamp(2rem,4vw,3.4rem)}
h3{font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.015em;line-height:1.2}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
::selection{background:var(--brand);color:#fff}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.label{font:700 .72rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.label.red{color:var(--brand)}
.lead{font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.6;color:var(--muted);max-width:38em}
.dark .lead,.dark .label:not(.red){color:var(--on-night-muted)}
.sec{padding-block:clamp(72px,10vw,140px)}
.sec-s{padding-block:clamp(44px,6vw,80px)}
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.head h2{margin-top:14px;max-width:17em}
.head .lead{margin-top:18px}
@media (max-width:760px){.head{grid-template-columns:1fr}}
.dark{background:var(--night);color:var(--on-night)}

/* ============ buttons & links ============ */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 26px;border:0;border-radius:2px;font:700 .95rem/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.btn svg{width:18px;height:18px;flex:none}
.btn-red{background:var(--brand);color:var(--on-brand)}
.btn-red:hover{background:var(--brand-hover)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--ink-2)}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-line:hover{box-shadow:inset 0 0 0 1px currentColor}
.btn-line[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--ok);color:var(--ok)}
.dark .btn-line{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.dark .btn-line:hover{box-shadow:inset 0 0 0 1px #fff}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-hover)}
.btn-sm{--h:42px;padding:0 18px;font-size:.88rem}
.more{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;text-decoration:none;white-space:nowrap}
.more svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.more:hover svg{transform:translateX(4px)}

/* ============ top bar & header ============ */
.topbar{background:var(--night);color:var(--on-night-muted);font-size:.8rem;position:relative;z-index:61}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:40px}
.topbar .l{display:flex;align-items:center;gap:10px}
.topbar .cert{font:700 .64rem/1 var(--sans);letter-spacing:.08em;border:1px solid var(--night-line);color:var(--on-night);padding:4px 6px;border-radius:2px}
.topbar .r{margin-left:auto;display:flex;gap:2px}
.topbar a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;text-decoration:none;color:var(--on-night);font-weight:700}
.topbar a:hover{background:rgba(255,255,255,.07)}
.topbar svg{width:14px;height:14px}
@media (max-width:700px){.topbar .l{display:none}.topbar .r{margin-left:0;width:100%;justify-content:space-between}}

.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line);transition:background .3s,border-color .3s,color .3s,box-shadow .3s,transform .35s var(--ease)}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:var(--hdr)}
.hdr.scrolled{box-shadow:0 12px 30px -24px rgba(0,0,0,.5)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;color:inherit}
.brand svg{width:34px;height:34px;flex:none}
.brand b{display:block;font:700 1.3rem/1 var(--sans);letter-spacing:.16em}
.brand small{display:block;margin-top:6px;font:700 .54rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;opacity:.6}
.nav{display:flex;align-items:stretch;height:100%;margin-left:auto}
.nav>a,.has-mega>a{display:flex;align-items:center;height:100%;padding:0 15px;text-decoration:none;font-weight:700;font-size:.92rem;position:relative;opacity:.86}
.nav>a:hover,.has-mega>a:hover,.nav a[aria-current="page"]{opacity:1}
.nav>a::after,.has-mega>a::after{content:"";position:absolute;left:15px;right:15px;bottom:-1px;height:2px;background:var(--brand);transform:scaleX(0);transition:transform .3s var(--ease)}
.nav>a:hover::after,.nav>a[aria-current="page"]::after,.has-mega:hover>a::after,.has-mega>a[aria-current="page"]::after,.has-mega.open>a::after{transform:scaleX(1)}
.has-mega{display:flex}
.has-mega>a svg{width:11px;height:11px;margin-left:7px;transition:transform .25s}
.has-mega:hover>a svg,.has-mega.open>a svg{transform:rotate(180deg)}
.hdr-cta{flex:none}
.burger{display:none;margin-left:auto;width:48px;height:48px;border:0;background:none;cursor:pointer;color:inherit}
.burger svg{width:26px;height:26px}
.nav .m-cta{display:none}

.mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);color:var(--ink);border-top:1px solid var(--line);box-shadow:0 40px 60px -40px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .3s var(--ease),visibility .25s}
.has-mega:hover .mega,.has-mega.open .mega{opacity:1;visibility:visible;transform:none}
.mega .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 250px;gap:10px 12px;padding-block:26px 30px;height:auto;align-items:start}
.mega-tile{display:grid;gap:10px;text-decoration:none;padding:10px;border-radius:2px;transition:background .2s}
.mega-tile:hover{background:var(--paper)}
.mega-tile .ph{position:relative;aspect-ratio:16/10;background:var(--spot);box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;overflow:hidden}
.mega-tile .ph img{position:absolute;inset:9%;width:82%;height:82%;object-fit:contain;transition:transform .5s var(--ease)}
.mega-tile:hover .ph img{transform:scale(1.06)}
.mega-tile b{font-size:.95rem;display:flex;justify-content:space-between;gap:8px}
.mega-tile b span{color:var(--faint);font-weight:400}
.mega-side{grid-column:5;grid-row:1 / span 2;border-left:1px solid var(--line);padding:10px 0 10px 26px;display:flex;flex-direction:column;gap:2px;align-self:stretch}
.mega-side .label{margin-bottom:10px}
.mega-side a:not(.btn){text-decoration:none;font-weight:700;min-height:40px;display:flex;align-items:center;justify-content:space-between}
.mega-side a:not(.btn):hover{color:var(--brand)}
.mega-side .btn{margin-top:auto}

/* header over the dark hero */
.hdr.over{background:transparent;border-color:transparent;color:#fff;margin-bottom:calc(var(--hdr) * -1)}
.hdr.over.solid,.hdr.over.menu-open,.hdr.over.mega-on{background:var(--surface);border-color:var(--line);color:var(--ink)}

@media (max-width:1100px){
  .burger{display:grid;place-items:center}
  .hdr-cta{display:none}
  .nav{position:fixed;left:0;right:0;top:var(--navtop,124px);bottom:0;height:auto;flex-direction:column;align-items:stretch;margin:0;background:var(--surface);color:var(--ink);padding:4px var(--gutter) 40px;overflow:auto;border-top:1px solid var(--line)}
  .nav:not(.open){display:none}
  .nav>a,.has-mega>a{height:auto;min-height:60px;padding:0;border-bottom:1px solid var(--line);font-size:1.15rem;opacity:1}
  .nav>a::after,.has-mega>a::after{display:none}
  .has-mega{flex-direction:column}
  .has-mega>a svg{display:none}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none}
  .mega .wrap{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 0 16px;gap:4px}
  .mega-tile{padding:6px}
  .mega-tile b{font-size:.86rem}
  .mega-side{display:none}
  .nav .m-cta{display:flex;margin-top:24px}
}

/* ============ hero slider ============ */
.hero{position:relative;background:var(--night);color:var(--on-night);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 65% at 72% 48%,#2b333c 0%,rgba(22,28,35,.7) 45%,transparent 76%),linear-gradient(180deg,#0b0f14 0%,#10161c 62%,#0b0f14 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:17%;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.01));border-top:1px solid rgba(255,255,255,.05)}
.slides{display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.slide.on{opacity:1;visibility:visible}
.hero-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,64px);align-items:center;min-height:clamp(640px,88vh,880px);padding-top:calc(var(--hdr) + 56px);padding-bottom:150px}
.slide-txt{display:grid;gap:22px;align-content:center}
.slide-txt h1{font-size:clamp(2.5rem,5vw,4.7rem);max-width:10.5em}
.slide-txt .lead{color:var(--on-night-muted)}
.slide-txt .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.slide .slide-txt>*{transform:translateY(20px);transition:transform 1s var(--ease)}
.slide.on .slide-txt>*{transform:none}
.slide.on .slide-txt>*:nth-child(2){transition-delay:.06s}.slide.on .slide-txt>*:nth-child(3){transition-delay:.12s}.slide.on .slide-txt>*:nth-child(4){transition-delay:.18s}.slide.on .slide-txt>*:nth-child(5){transition-delay:.24s}
.figs{display:flex;flex-wrap:wrap;margin-top:12px;border-top:1px solid var(--night-line)}
.figs div{padding:18px 26px 0 0;margin-right:26px;border-right:1px solid var(--night-line)}
.figs div:last-child{border-right:0;margin-right:0}
.figs b{display:block;font-size:clamp(1.45rem,2.2vw,2rem);font-weight:400;letter-spacing:-.02em;line-height:1}
.figs span{display:block;margin-top:8px;font-size:.78rem;color:var(--on-night-muted)}
.slide-img{position:relative}
.slide-img>img{width:100%;height:auto;filter:drop-shadow(0 40px 40px rgba(0,0,0,.6));transform:translateX(36px) scale(.97);transition:transform 1.2s var(--ease)}
.slide.on .slide-img>img{transform:none}
.slide-img .refl{position:absolute;left:0;right:0;top:calc(100% - 14px);height:40%;overflow:hidden;pointer-events:none;opacity:.12;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%);mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.slide-img .refl img{width:100%;transform:scaleY(-1);filter:blur(1.5px)}
.hero-ctl{position:absolute;left:0;right:0;bottom:34px;z-index:3}
.hero-ctl .wrap{display:flex;align-items:center;gap:28px}
.dots{display:flex;gap:24px;flex:1}
.dots button{flex:1;max-width:230px;background:none;border:0;color:var(--on-night-muted);padding:16px 0 0;text-align:left;cursor:pointer;position:relative;font:700 .78rem/1.3 var(--sans);letter-spacing:.04em;min-height:48px}
.dots button::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--night-line)}
.dots button i{position:absolute;left:0;top:0;height:2px;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.dots button.on{color:#fff}
.dots button.on i{transform:scaleX(1)}
.hero.auto .dots button.on i{animation:prog 7s linear both}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dots em{font-style:normal;color:var(--brand);margin-right:8px}
.arrows{display:flex;gap:8px;order:-1}
.arrows button{width:48px;height:48px;border-radius:50%;border:1px solid var(--night-line);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s}
.arrows button:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35)}
.arrows svg{width:18px;height:18px}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;min-height:0;padding-top:calc(var(--hdr) + 16px);padding-bottom:118px;gap:4px}
  .slide-img{order:-1;max-width:520px;width:100%;margin-inline:auto}
  .figs div{padding-right:14px;margin-right:14px}
  .dots span{display:none}
  .dots{gap:10px}
  .dots button{max-width:none}
}

/* ============ key figures band ============ */
.band{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-bottom:1px solid var(--line)}
.band>div{padding:clamp(28px,4vw,52px) var(--gutter);border-right:1px solid var(--line);display:grid;gap:10px}
.band>div:last-child{border-right:0}
.band b{font-size:clamp(2.4rem,4.6vw,4.2rem);font-weight:400;letter-spacing:-.045em;line-height:.95}
.band b small{font-size:.36em;letter-spacing:0;margin-left:5px;color:var(--muted)}
.band span{font-size:.88rem;color:var(--muted)}
@media (max-width:860px){.band{grid-template-columns:1fr 1fr}.band>div:nth-child(2){border-right:0}.band>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ============ series tiles ============ */
.series{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.s-tile{position:relative;display:flex;flex-direction:column;min-height:440px;background:var(--stage);color:var(--ink);text-decoration:none;overflow:hidden;border-radius:2px;transition:background .3s}
.s-tile.w2{grid-column:span 2}
.s-tile:hover{background:var(--stage-2)}
.s-tile .t{padding:28px 30px 0;display:grid;gap:10px;position:relative;z-index:1}
.s-tile h3{font-size:clamp(1.35rem,2vw,1.85rem)}
.s-tile p{color:var(--muted);font-size:.92rem;max-width:30em}
.s-tile .im{flex:1;position:relative;min-height:210px}
.s-tile .im img{position:absolute;inset:6% 8% 8%;width:84%;height:86%;object-fit:contain;transition:transform .8s var(--ease)}
.s-tile:hover .im img{transform:scale(1.05)}
.s-tile .f{display:flex;justify-content:space-between;align-items:center;padding:0 30px 26px;font-size:.88rem;font-weight:700;position:relative;z-index:1}
.go{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:background .25s,transform .3s var(--ease);flex:none}
.go svg{width:18px;height:18px}
.s-tile:hover .go{background:var(--brand);color:#fff;transform:translateX(4px)}
.s-tile.all{background:var(--night);color:var(--on-night);justify-content:space-between}
.s-tile.all p{color:var(--on-night-muted)}
.s-tile.all .big{font-size:clamp(4.4rem,9vw,8rem);font-weight:400;letter-spacing:-.06em;line-height:.9;padding:0 30px}
.s-tile.all .go{background:#fff;color:#0c1015}
@media (max-width:1100px){.series{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.series{grid-template-columns:1fr}.s-tile.w2{grid-column:auto}.s-tile{min-height:380px}}

/* ============ split feature ============ */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center}
.split .vis{position:relative;background:var(--night-2);aspect-ratio:5/4;border-radius:2px;overflow:hidden}
.split .vis img{position:absolute;inset:9%;width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(0,0,0,.5))}
.speclist{display:grid;margin-top:28px;border-top:1px solid var(--night-line)}
.speclist div{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--night-line);font-size:.95rem}
.speclist span{color:var(--on-night-muted)}
.speclist b{font-variant-numeric:tabular-nums}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.pills a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--night-line);border-radius:999px;text-decoration:none;font-weight:700;font-size:.86rem}
.pills a:hover{border-color:#fff}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ============ trust ============ */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.trust>div{padding:34px 36px 8px 0;display:grid;gap:14px;align-content:start;border-top:1px solid var(--ink)}
.trust>div+div{padding-left:36px}
.trust h3{font-size:1.35rem}
.trust p{color:var(--muted)}
.marks{display:flex;gap:10px}
.mark{display:grid;place-items:center;min-width:76px;height:58px;padding:0 14px;border:1.5px solid var(--ink);border-radius:2px;font:700 1.55rem/1 var(--sans)}
.colorbar{display:flex;height:12px;border-radius:1px;overflow:hidden;max-width:300px}
.colorbar i{flex:1}
@media (max-width:900px){.trust{grid-template-columns:1fr;gap:24px}.trust>div+div{padding-left:0}}

/* ============ product cards ============ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,264px),1fr));gap:36px 20px}
.pc{position:relative;display:flex;flex-direction:column;color:var(--ink)}
.pc .ph{position:relative;display:block;aspect-ratio:4/3;background:var(--spot);box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;overflow:hidden;transition:background .3s}
.pc .ph img{position:absolute;inset:10% 8%;width:84%;height:80%;object-fit:contain;transition:transform .6s var(--ease)}
.pc:hover .ph{background:var(--stage-2)}
.pc:hover .ph img{transform:scale(1.05)}
.pc .tag{position:absolute;left:12px;top:12px;z-index:1;font:700 .64rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--surface);color:var(--ink);padding:7px 9px;border-radius:2px}
.pc .ce{position:absolute;right:12px;top:14px;z-index:1;font:700 .62rem/1 var(--sans);letter-spacing:.08em;color:var(--faint)}
.pc .bd{padding:18px 0 0;display:flex;flex-direction:column;gap:6px;flex:1}
.pc .sr{font:700 .66rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.pc h3{font-size:1.28rem}
.pc h3 a{text-decoration:none}
.pc h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.pc .ti{color:var(--muted);font-size:.88rem;line-height:1.45}
.pc .kv{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.pc .kv div{display:grid;gap:2px}
.pc .kv b{font-size:.98rem;font-variant-numeric:tabular-nums}
.pc .kv span{font-size:.7rem;color:var(--faint)}
.pc .cmpt{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:.8rem;font-weight:700;color:var(--muted);cursor:pointer;min-height:40px;align-self:flex-start;user-select:none}
.pc .cmpt input{width:16px;height:16px;accent-color:var(--brand);margin:0}
.pc .cmpt:hover{color:var(--ink)}

/* ============ product center ============ */
.pcenter{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.filters{position:sticky;top:calc(var(--hdr) + 24px);max-height:calc(100vh - var(--hdr) - 48px);overflow:auto;padding-right:8px}
.fhead{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.fhead b{font-size:1rem}
.fgroup{border-top:1px solid var(--line);padding:16px 0 12px}
.fgroup h4{font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;color:var(--ink)}
.fopt{display:flex;align-items:center;gap:10px;min-height:38px;font-size:.92rem;cursor:pointer;color:var(--ink-2)}
.fopt input{width:17px;height:17px;accent-color:var(--brand);margin:0;flex:none}
.fopt span{margin-left:auto;color:var(--faint);font-size:.78rem;font-variant-numeric:tabular-nums}
.fopt.zero{opacity:.38}
.clearf{background:none;border:0;color:var(--brand);font-weight:700;cursor:pointer;min-height:40px;padding:0;font-size:.88rem}
.rbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.rbar .cnt{font-size:.95rem;color:var(--muted)}
.rbar .cnt b{color:var(--ink);font-size:1.25rem;margin-right:4px}
.rbar .r{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;font-size:.82rem;font-weight:700;cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip i{font-style:normal;color:var(--faint);font-size:1rem;line-height:1}
.select{min-height:44px;padding:0 38px 0 14px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23646c72' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none;font-weight:700;font-size:.9rem}
.fbtn{display:none}
.empty{padding:64px 0;text-align:center;color:var(--muted);display:grid;gap:16px;justify-items:center}
.drawer-head,.drawer-foot{display:none}
.scrim{position:fixed;inset:0;z-index:79;background:rgba(0,0,0,.45)}
@media (max-width:980px){
  .pcenter{grid-template-columns:1fr}
  .fbtn{display:inline-flex}
  .filters{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(360px,88vw);max-height:none;z-index:80;background:var(--surface);padding:12px 22px 110px;box-shadow:-30px 0 60px -20px rgba(0,0,0,.4);transform:translateX(105%);transition:transform .35s var(--ease)}
  .filters.open{transform:none}
  .drawer-head{display:flex;justify-content:space-between;align-items:center;min-height:56px}
  .drawer-head button{width:48px;height:48px;border:0;background:none;font-size:1.7rem;cursor:pointer;color:inherit}
  .drawer-foot{display:block;position:fixed;right:0;bottom:0;width:min(360px,88vw);padding:14px 22px calc(14px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);z-index:81}
  .drawer-foot .btn{width:100%}
  .fhead{display:none}
}

/* ============ page header ============ */
.phead{background:var(--surface);border-bottom:1px solid var(--line)}
.phead .wrap{padding-block:clamp(36px,5vw,80px) clamp(36px,5vw,64px);display:grid;gap:18px}
.phead h1{font-size:clamp(2.4rem,5vw,4.3rem);max-width:15em}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.82rem;color:var(--muted)}
.crumbs a{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;color:var(--line-2)}

/* ============ product detail ============ */
.pd-crumb{border-bottom:1px solid var(--line);background:var(--surface)}
.pd-crumb .wrap{min-height:52px;display:flex;align-items:center}
.pd-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:start;padding-block:32px clamp(56px,7vw,100px)}
.gal{display:grid;gap:12px}
.gal-main{position:relative;aspect-ratio:4/3;background:var(--spot);box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;overflow:hidden}
.gal-main .zoom{position:absolute;inset:0;border:0;padding:0;background:none;cursor:zoom-in;width:100%;height:100%}
.gal-main img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain}
.gal-main.photo img{inset:0;width:100%;height:100%;object-fit:cover}
.gal-main .nav2{position:absolute;right:14px;bottom:14px;display:flex;gap:6px;z-index:2}
.gal-main .nav2 button{width:46px;height:46px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
.gal-main .nav2 svg{width:16px;height:16px}
.gal-main .count{position:absolute;left:18px;bottom:18px;z-index:2;font:700 .74rem/1 var(--sans);letter-spacing:.1em;color:var(--muted);pointer-events:none}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.thumbs button{aspect-ratio:1;padding:0;border:0;border-radius:2px;background:var(--spot);overflow:hidden;cursor:pointer;box-shadow:inset 0 0 0 0 var(--ink);transition:box-shadow .2s}
.thumbs button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs button.co img{object-fit:contain;padding:10%}
.buy{display:grid;gap:24px;position:sticky;top:calc(var(--hdr) + 84px)}
.buy h1{font-size:clamp(2.4rem,4.4vw,3.9rem)}
.buy .ti{font-size:1.08rem;color:var(--muted);margin-top:10px}
.kf{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.kf div{padding:18px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
.kf div:nth-child(odd){padding-right:16px;border-right:1px solid var(--line)}
.kf div:nth-child(even){padding-left:22px}
.kf b{font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:400;letter-spacing:-.03em;line-height:1.05}
.kf span{font-size:.78rem;color:var(--faint)}
.badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.badge{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border:1px solid var(--line-2);border-radius:2px;font:700 .74rem/1 var(--sans);letter-spacing:.06em}
.acts{display:grid;gap:10px}
.acts .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qq{display:grid;gap:10px;padding-top:20px;border-top:1px solid var(--line)}
.qchips{display:flex;flex-wrap:wrap;gap:8px}
.qchip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;font-size:.84rem;font-weight:700;text-decoration:none;background:var(--surface);transition:border-color .2s,color .2s}
.qchip:hover{border-color:var(--wa);color:var(--wa)}
@media (max-width:980px){.pd-top{grid-template-columns:1fr}.buy{position:static}}

.subnav{position:sticky;top:calc(var(--hdr) + env(safe-area-inset-top,0px));z-index:50;background:var(--surface);border-block:1px solid var(--line)}
.subnav .wrap{display:flex;align-items:center;gap:4px;height:60px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav .mt{font-weight:700;margin-right:18px;white-space:nowrap}
.subnav button{flex:none;height:60px;padding:0 14px;background:none;border:0;font-weight:700;font-size:.9rem;color:var(--muted);cursor:pointer;position:relative}
.subnav button::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--brand);transform:scaleX(0);transition:transform .3s var(--ease)}
.subnav button[aria-current="true"]{color:var(--ink)}
.subnav button[aria-current="true"]::after{transform:scaleX(1)}
.subnav .btn{margin-left:auto;flex:none}
@media (max-width:760px){.subnav .mt,.subnav .btn{display:none}}

.hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));border-top:1px solid var(--ink)}
.hl>div{padding:28px 24px 12px 0;display:grid;gap:12px;align-content:start}
.hl>div+div{padding-left:24px;border-left:1px solid var(--line)}
.hl svg{width:30px;height:30px;color:var(--brand)}
.hl b{font-size:1.06rem;letter-spacing:-.01em;line-height:1.3}
.hl p{color:var(--muted);font-size:.92rem}
@media (max-width:900px){.hl{grid-template-columns:1fr}.hl>div+div{padding-left:0;border-left:0}.hl>div{border-bottom:1px solid var(--line);padding:22px 0;grid-template-columns:36px 1fr;column-gap:16px;row-gap:4px}.hl svg{grid-row:span 2}}

.glance{display:grid;grid-template-columns:repeat(5,1fr)}
.glance div{padding:6px 24px;border-left:1px solid var(--night-line);display:grid;gap:10px}
.glance div:first-child{border-left:0;padding-left:0}
.glance b{font-size:clamp(2rem,3.6vw,3.3rem);font-weight:400;letter-spacing:-.045em;line-height:1}
.glance b small{font-size:.4em;margin-left:4px;color:var(--on-night-muted);letter-spacing:0}
.glance span{font-size:.82rem;color:var(--on-night-muted)}
@media (max-width:900px){.glance{grid-template-columns:repeat(2,1fr);gap:28px 0}.glance div{border-left:0;padding-left:0}}

.spec-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:start}
.spec{width:100%;border-collapse:collapse;font-size:.95rem}
.spec th,.spec td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec td{font-weight:700;font-variant-numeric:tabular-nums;padding-left:16px}
.spec th{font-weight:400;color:var(--muted);width:48%}
.spec tr.grp th{padding:34px 0 12px;font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);width:auto}
.spec tbody:first-child tr.grp th{padding-top:0}
.dimfig{margin:0;background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;position:sticky;top:calc(var(--hdr) + 84px)}
.dimfig button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.dimfig figcaption{padding:14px 16px;font-size:.82rem;color:#646c72;border-top:1px solid #e2e4e3;display:flex;justify-content:space-between;gap:12px}
.dimfig figcaption b{color:#0e1114}
@media (max-width:900px){.spec-grid{grid-template-columns:1fr}.dimfig{position:static}}

/* ============ inquiry ============ */
.inq{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,6vw,96px);align-items:start}
.inq .side{display:grid;gap:24px;align-content:start}
.reach{display:grid;border-top:1px solid var(--night-line)}
.reach a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--night-line);text-decoration:none;min-height:64px}
.reach .k{font:700 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-muted)}
.reach .v{font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:700;display:flex;align-items:center;gap:10px}
.reach .v svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.reach a:hover .v svg{transform:translateX(4px)}
.bigphone{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:1;text-decoration:none;display:inline-block;white-space:nowrap}
.bigphone:hover{color:var(--brand)}
.clock{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--on-night-muted)}
.clock b{color:var(--on-night);font-variant-numeric:tabular-nums}
.clock i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.2)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;background:var(--surface);color:var(--ink);padding:clamp(22px,3vw,40px);border-radius:2px}
.form h3{grid-column:1/-1;font-size:1.5rem}
.form .full{grid-column:1/-1}
.field{display:grid;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--ink-2)}
.input{width:100%;min-width:0;min-height:50px;padding:12px 14px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);font-size:1rem;font-weight:400;letter-spacing:0;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
textarea.input{min-height:120px;resize:vertical}
select.input{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23646c72' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px}
.field .hint{color:var(--err);font-size:.78rem;letter-spacing:0}
.field.bad .input{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 15%,transparent)}
.form .foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.form-msg{grid-column:1/-1;display:grid;gap:12px;padding:18px;border:1px solid var(--line);border-left:3px solid var(--ok);background:var(--paper)}
.form-msg pre{margin:0;white-space:pre-wrap;font:400 .85rem/1.55 ui-monospace,Menlo,Consolas,monospace;max-height:180px;overflow:auto;color:var(--ink-2)}
.form-acts{display:flex;flex-wrap:wrap;gap:8px}
.note{font-size:.84rem;color:var(--muted)}
@media (max-width:900px){.inq{grid-template-columns:1fr}}
@media (max-width:560px){.form{grid-template-columns:1fr}}

/* ============ finder / calc ============ */
.finder{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:start}
.q{display:grid;gap:14px;padding:26px 0;border-top:1px solid var(--line)}
.q:first-child{border-top-color:var(--ink)}
.q h3{display:flex;gap:14px;align-items:baseline;font-size:1.15rem}
.q h3 em{font-style:normal;font-size:.78rem;color:var(--brand);letter-spacing:.08em}
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.opts.three{grid-template-columns:repeat(3,1fr)}
.opt{min-height:74px;padding:14px 16px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;display:grid;gap:4px;align-content:start;transition:border-color .2s,box-shadow .2s}
.opt b{font-size:.94rem}
.opt small{font-size:.78rem;color:var(--muted);line-height:1.35}
.opt:hover{border-color:var(--ink)}
.opt[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt[aria-pressed="true"] b::before{content:"";display:inline-block;width:8px;height:8px;background:var(--brand);border-radius:50%;margin-right:8px;vertical-align:1px}
.pick{position:sticky;top:calc(var(--hdr) + 24px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.pick .ph{position:relative;aspect-ratio:16/10;background:var(--spot);box-shadow:inset 0 0 0 1px var(--line)}
.pick .ph img{position:absolute;inset:9%;width:82%;height:82%;object-fit:contain}
.pick .bd{padding:26px;display:grid;gap:14px}
.pick h3{font-size:2rem;letter-spacing:-.03em}
.pick h3 a{text-decoration:none}
.why{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.93rem}
.why li{display:flex;gap:10px}
.why li::before{content:"";flex:none;width:14px;height:1px;background:var(--brand);margin-top:.8em}
.alts{font-size:.9rem;color:var(--muted)}
.alts a{font-weight:700;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);display:inline-block;padding:8px 0 2px}
@media (max-width:1100px){.opts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.finder{grid-template-columns:1fr}.pick{position:static}}
@media (max-width:420px){.opts.three{grid-template-columns:1fr 1fr}}
.calc{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,5vw,80px);align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:26px;display:grid;gap:16px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-2);border-radius:2px;overflow:hidden}
.seg button{min-height:46px;border:0;background:var(--surface);font-weight:700;cursor:pointer}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.chk{display:flex;align-items:center;gap:10px;min-height:40px;font-size:.92rem;cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--brand)}
.bars{display:grid;gap:0;max-height:760px;overflow:auto}
.bar{display:grid;grid-template-columns:170px minmax(0,1fr) 92px;gap:16px;align-items:center;min-height:40px;text-decoration:none;padding:2px 8px;border-radius:2px}
.bar:hover{background:var(--surface)}
.bar .n{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .t{height:8px;background:var(--line);border-radius:1px;overflow:hidden;display:block}
.bar .f{display:block;height:100%;background:var(--ink-2);transition:width .6s var(--ease)}
.bar.best .f{background:var(--brand)}
.bar .v{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;font-size:.9rem}
.bar .v small{color:var(--faint);font-weight:400}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
@media (max-width:480px){.bar{grid-template-columns:118px minmax(0,1fr) 70px;gap:10px}.bar .n{font-size:.82rem}}

/* ============ compare ============ */
.cmp-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.tbl{overflow-x:auto;border-top:1px solid var(--ink);margin-top:10px}
.cmp{border-collapse:collapse;width:100%;min-width:680px}
.cmp th,.cmp td{padding:15px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{vertical-align:bottom;padding-top:22px}
.cmp thead .ph{position:relative;aspect-ratio:4/3;background:var(--spot);box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;margin-bottom:12px}
.cmp thead .ph img{position:absolute;inset:9%;width:82%;height:82%;object-fit:contain}
.cmp thead a{font-size:1.2rem;text-decoration:none;display:inline-flex;min-height:40px;align-items:center}
.cmp tbody th{color:var(--muted);font-weight:400;width:190px;font-size:.92rem}
.cmp td{font-weight:700;font-variant-numeric:tabular-nums}
.cmp td.win{color:var(--brand)}
.cmp.diff-only tr.same{display:none}
@media (max-width:640px){.cmp-top{grid-template-columns:1fr}}

/* ============ uses ============ */
.uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 20px}
.use{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:10px;align-content:start;margin-bottom:40px}
.use .mods{align-self:start}
@supports not (grid-template-rows:subgrid){.use{grid-template-rows:auto auto 1fr auto}}
.use .ph{position:relative;aspect-ratio:4/3;background:var(--spot);box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;overflow:hidden}
.use .ph img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;transition:transform .6s var(--ease)}
.use:hover .ph img{transform:scale(1.05)}
.use h3{margin-top:8px}
.use p{color:var(--muted);font-size:.92rem}
.use .mods{display:flex;flex-wrap:wrap;gap:0 16px}
.use .mods a{font-size:.85rem;font-weight:700;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;border-bottom:1px solid var(--line-2)}
.use .mods a:hover{color:var(--brand);border-color:var(--brand)}
@media (max-width:1000px){.uses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.uses{grid-template-columns:1fr}}

/* ============ steps / faq ============ */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);counter-reset:s}
.steps li{padding:26px 22px 0 0;border-top:1px solid var(--ink);display:grid;gap:10px;align-content:start;counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);font-size:.8rem;font-weight:700;color:var(--brand);letter-spacing:.08em}
.steps b{font-size:1.1rem}
.steps span{color:var(--muted);font-size:.92rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;min-height:64px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-weight:700;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:var(--muted);max-width:52em}
.two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr}}

/* ============ CTA + footer ============ */
.cta .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 48px;align-items:end;padding-block:clamp(72px,10vw,140px)}
.cta h2{font-size:clamp(2.3rem,4.8vw,4.4rem);max-width:12em;margin-top:14px}
.cta .acts{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.cta .wrap{grid-template-columns:1fr}}
.ftr{background:var(--night);color:var(--on-night-muted);padding-block:72px 32px;border-top:1px solid var(--night-line)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px}
.ftr .brand{color:var(--on-night)}
.ftr p{margin-top:18px;font-size:.92rem;max-width:24em}
.ftr h4{font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-night);margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid}
.ftr a{text-decoration:none;display:inline-flex;align-items:center;min-height:36px;font-size:.92rem}
.ftr a:hover{color:#fff}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--night-line);font-size:.8rem}
@media (max-width:1000px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-grid>div:first-child{grid-column:1/-1}}

/* ============ floating / fixed ============ */
.fab{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:55;display:flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 18px;border-radius:28px;background:var(--wa);color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;box-shadow:0 18px 36px -14px rgba(10,60,30,.7);transition:transform .25s var(--ease),background .2s}
.fab:hover{transform:translateY(-2px);background:var(--wa-hover)}
.fab svg{width:24px;height:24px}
@media (max-width:760px){.fab{width:56px;padding:0;justify-content:center;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}.fab span{display:none}body.has-dock .fab{display:none}}
.tray{position:fixed;left:24px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:55;display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);padding:8px 8px 8px 18px;border-radius:2px;box-shadow:var(--shadow);max-width:calc(100% - 110px)}
.tray span{font-weight:700;font-size:.86rem;white-space:nowrap}
.tray .btn{--h:40px;padding:0 16px;font-size:.84rem}
.tray .clear{background:none;border:0;color:inherit;opacity:.7;cursor:pointer;font-weight:700;min-height:40px;font-size:.84rem}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:56;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
.dock .btn{flex:1;--h:48px;padding:0 10px;font-size:.9rem}
@media (max-width:760px){.dock{display:flex}body.has-dock{padding-bottom:70px}body.has-dock .tray{bottom:calc(80px + env(safe-area-inset-bottom,0px));left:12px;max-width:calc(100% - 24px)}.tray{left:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}}
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,10,12,.95);display:grid;grid-template-rows:auto 1fr auto;color:#fff}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font-weight:700;font-size:.9rem}
.lb-img{display:grid;place-items:center;padding:0 18px;min-height:0}
.lb-img img{max-width:100%;max-height:100%;object-fit:contain;background:#eceeed;border-radius:2px}
.lb-nav{display:flex;justify-content:center;gap:10px;padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px))}
.lb button{min-width:48px;min-height:48px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;border-radius:2px;font-weight:700;cursor:pointer;padding:0 18px}
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);z-index:120;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:2px;font-weight:700;font-size:.9rem;box-shadow:var(--shadow)}
.rv{transition:transform 1s var(--ease)}
.rv.pre{transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv.pre{transform:none}}
.brand{min-height:44px}
.pc h3 a{display:inline-block;padding:7px 0}
.alts a{padding:11px 0 4px!important}
.bigphone{min-height:48px;display:inline-flex;align-items:center}
.mega-side a svg{width:16px;height:16px;flex:none}

/* ===== v5: images on uniform 4:3 canvas (padding + shadow baked in) ===== */
.pc .ph img,.s-tile .im img,.mega-tile .ph img,.use .ph img,.pick .ph img,.cmp thead .ph img,.split .vis img,.gal-main img{inset:0;width:100%;height:100%;object-fit:contain}
.gal-main img{inset:2%;width:96%;height:96%}
.s-tile .im img{inset:0 4%;width:92%}
.split .vis img{filter:none}
.slide-img>img{filter:none}
.slide-img .refl{display:none}
.thumbs button.co img{padding:4%}

/* ===== custom select (model picker) ===== */
.zs{position:relative;min-width:0}
.zs-native{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0)}
.zs-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:6px 44px 6px 12px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;position:relative;font-weight:400;letter-spacing:0;transition:border-color .2s,box-shadow .2s}
.zs-btn:hover{border-color:var(--ink)}
.zs.open .zs-btn,.zs-btn:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
.zs-btn::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.zs.open .zs-btn::after{transform:translateY(-25%) rotate(-135deg)}
.zs-th{flex:none;width:52px;height:39px;border-radius:2px;background:var(--spot);object-fit:contain}
.zs-v{display:grid;min-width:0;line-height:1.25}
.zs-v b{font-size:.98rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zs-v small{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zs.plain .zs-btn{min-height:44px;padding:0 40px 0 14px;font-weight:700;font-size:.9rem}
.zs-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:70;width:max(100%,340px);max-width:calc(100vw - 32px);background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:3px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);display:flex;flex-direction:column;max-height:min(460px,70vh);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .2s var(--ease),visibility .18s}
.zs.open .zs-pop{opacity:1;visibility:visible;transform:none}
.zs.up .zs-pop{top:auto;bottom:calc(100% + 6px)}
.zs.right .zs-pop{left:auto;right:0}
.zs.plain .zs-pop{width:max(100%,220px)}
.zs-search{padding:10px;border-bottom:1px solid var(--line)}
.zs-search input{width:100%;min-height:42px;padding:0 12px 0 36px;border:1px solid var(--line-2);border-radius:2px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23646c72' stroke-width='1.8'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat 12px center;font-size:.92rem}
.zs-search input:focus{outline:none;border-color:var(--ink)}
.zs-list{overflow:auto;padding:6px;overscroll-behavior:contain;scrollbar-width:thin}
.zs-g{padding:12px 10px 6px;font:700 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.zs-o{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;border-radius:2px;cursor:pointer}
.zs-o .zs-th{width:48px;height:36px}
.zs-o .zs-v b{font-size:.93rem}
.zs-o.act{background:var(--paper)}
.zs-o[aria-selected="true"]{background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.zs-o[aria-selected="true"]::after{content:"";margin-left:auto;flex:none;width:6px;height:11px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg) translate(-2px,-2px)}
.zs-o[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.zs-o[aria-disabled="true"] .zs-v small::after{content:" · already in comparison"}
.zs.plain .zs-o{min-height:42px;font-weight:700;font-size:.9rem}
.zs-empty{padding:18px 12px;color:var(--muted);font-size:.9rem}
@media (max-width:560px){.zs-pop{position:fixed;left:12px!important;right:12px!important;top:auto!important;bottom:12px!important;width:auto;max-width:none;max-height:72vh}}

/* ===== checkboxes, number inputs, stepper ===== */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;flex:none;border:1.5px solid var(--line-2);border-radius:2px;background:var(--surface);display:inline-grid;place-content:center;cursor:pointer;transition:background .15s,border-color .15s}
input[type=checkbox]::before{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .15s var(--ease)}
input[type=checkbox]:checked{background:var(--ink);border-color:var(--ink)}
input[type=checkbox]:checked::before{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.dark input[type=checkbox]:checked::before{border-color:var(--night)}
input[type=checkbox]:hover{border-color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) input[type=checkbox]::before{border-color:#0b0e11}}
:root[data-theme="dark"] input[type=checkbox]::before{border-color:#0b0e11}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step{display:grid;grid-template-columns:50px minmax(0,1fr) 50px;border:1px solid var(--line-2);border-radius:2px;overflow:hidden;background:var(--surface)}
.step .input{border:0;border-radius:0;text-align:center;font-weight:700;min-height:48px}
.step .input:focus{box-shadow:none}
.step:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
.step button{border:0;background:var(--paper);font-size:1.3rem;line-height:1;cursor:pointer;color:var(--ink)}
.step button:hover{background:var(--stage)}
.filters{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.zs-pop{display:none}
.zs.open .zs-pop{display:flex;animation:zsIn .2s var(--ease)}
@keyframes zsIn{from{opacity:0;transform:translateY(-4px)}}
/* v6: equal-height card rows */
.pc .ti{padding-bottom:12px}
.pc .kv{margin-top:auto}

/* v7: product pages — one sticky bar at a time */
.subnav-s{height:0}
.subnav{transition:top .35s var(--ease),box-shadow .3s}
.sub-on .hdr{transform:translateY(calc(-100% - 2px));box-shadow:none}
.sub-on .subnav{top:env(safe-area-inset-top,0px);box-shadow:0 10px 24px -18px rgba(0,0,0,.35)}
.sub-on .dimfig{top:84px}
.hl{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.hl{grid-template-columns:1fr}}

/* ================= v8: customer-first + SEO structure ================= */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.ul{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;font-weight:700}
a.ul:hover{color:var(--brand)}
/* hero masthead: the page's one H1 */
.hero-mast{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:calc(var(--hdr) + 22px);padding-bottom:14px;border-bottom:1px solid var(--night-line)}
.hero-mast h1{font:700 .8rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night);max-width:none}
.hero-mast h1 span{color:var(--on-night-muted);font-weight:700}
.hero-mast .hm-r{font-size:.78rem;color:var(--on-night-muted);white-space:nowrap}
.hero-in{padding-top:clamp(28px,4vw,56px)}
.slide-txt .ht{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.04;text-wrap:balance;font-size:clamp(2.5rem,5vw,4.7rem);max-width:10.5em}
@media (max-width:900px){.hero-mast{padding-top:calc(var(--hdr) + 12px)}.hero-mast .hm-r{display:none}.hero-mast h1{font-size:.7rem}.hero-in{padding-top:12px}.slide-txt .ht{font-size:clamp(2.1rem,8.6vw,3rem)}}
/* six-point trust grid */
.trust.t6{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(28px,4vw,48px)}
.trust.t6>div:nth-child(3n+1){padding-left:0}
.trust.t6>div:nth-child(3n+2),.trust.t6>div:nth-child(3n){padding-left:36px}
.mark.sm{font-size:1rem;min-width:0}
.trust .ico{width:58px;height:58px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:2px}
.trust .ico svg{width:28px;height:28px}
@media (max-width:900px){.trust.t6{grid-template-columns:1fr}.trust.t6>div{padding-left:0!important;padding-right:0}}
/* product page: title inside H1 */
.buy h1 .ti{display:block;font-size:1.08rem;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--muted);margin-top:10px}
/* product-line hero */
.shero{background:var(--surface);border-bottom:1px solid var(--line);overflow:hidden}
.shero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(28px,4vw,56px) clamp(40px,5vw,72px)}
.shero .st{display:grid;gap:18px;align-content:start}
.shero h1{font-size:clamp(2.3rem,4.6vw,4rem);max-width:12em}
.shero .acts{display:flex;flex-wrap:wrap;gap:12px}
.shero .si{background:var(--spot);box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;aspect-ratio:4/3;position:relative}
.shero .si img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sfacts div{padding:16px 14px 16px 0;display:grid;gap:6px}
.sfacts div+div{padding-left:16px;border-left:1px solid var(--line)}
.sfacts b{font-size:clamp(1.3rem,2vw,1.75rem);font-weight:400;letter-spacing:-.02em;line-height:1.05}
.sfacts span{font-size:.76rem;color:var(--muted)}
@media (max-width:900px){.shero .wrap{grid-template-columns:1fr}.shero .si{order:-1}.sfacts{grid-template-columns:1fr 1fr}.sfacts div:nth-child(3){padding-left:0;border-left:0}.sfacts div:nth-child(n+3){border-top:1px solid var(--line)}}
/* comparison table */
.mtable-wrap{overflow-x:auto;border-top:1px solid var(--ink);-webkit-overflow-scrolling:touch}
.mtable{width:100%;border-collapse:collapse;min-width:760px;font-variant-numeric:tabular-nums}
.mtable th,.mtable td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle;white-space:nowrap}
.mtable thead th{font:700 .68rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-block:14px}
.mtable tbody th a{display:flex;align-items:center;gap:14px;text-decoration:none;font-weight:700;font-size:1rem}
.mtable tbody th img{width:72px;height:54px;object-fit:contain;background:var(--spot);border-radius:2px;flex:none}
.mtable tbody th small{display:block;font-weight:400;font-size:.76rem;color:var(--muted);margin-top:2px}
.mtable tbody th a:hover span{color:var(--brand)}
.mtable td.lk{text-align:right;color:var(--muted);font-size:.82rem;font-weight:700}
.mtable td.lk a{display:inline-flex;align-items:center;gap:6px;min-height:40px;text-decoration:none;color:var(--ink)}
.mtable td.lk svg{width:16px;height:16px}
.mtable td.lk a:hover{color:var(--brand)}
.mtable tr.cur{background:var(--surface)}
.mtable tr.cur th a span{color:var(--brand)}
.mtable tbody tr{transition:background .2s}
.mtable tbody tr:hover{background:var(--surface)}
/* product-line strip */
.lines{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.lines.l7{grid-template-columns:repeat(7,minmax(0,1fr))}
.ln{display:grid;gap:10px;text-decoration:none;color:var(--ink);align-content:start}
.ln .ph{display:block;position:relative;aspect-ratio:4/3;background:var(--spot);box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;overflow:hidden;transition:background .3s}
.ln .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.ln:hover .ph img{transform:scale(1.05)}
.ln b{font-size:.9rem;line-height:1.3}
.ln small{font-size:.76rem;color:var(--muted);margin-top:-6px}
.ln:hover b{color:var(--brand)}
@media (max-width:1100px){.lines,.lines.l7{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:620px){.lines,.lines.l7{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);gap:10px;scrollbar-width:none}.lines::-webkit-scrollbar{display:none}.ln{flex:0 0 42%;scroll-snap-align:start}}
/* series: applications list */
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));margin-top:18px;border-top:1px solid var(--ink)}
.apps a{display:grid;gap:6px;padding:20px 20px 20px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.apps a span{color:var(--muted);font-size:.9rem}
.apps a:hover b{color:var(--brand)}
/* product center: line explainer */
.about7{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 28px;border-top:1px solid var(--ink);padding-top:28px}
.about7 h3 a{text-decoration:none}.about7 h3 a:hover{color:var(--brand)}
.about7 p{color:var(--muted);font-size:.92rem;margin-top:8px}
@media (max-width:900px){.about7{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.about7{grid-template-columns:1fr}}
/* contact: 4 things to send */
.steps.s4{grid-template-columns:1fr 1fr;gap:28px 24px}
@media (max-width:520px){.steps.s4{grid-template-columns:1fr}}
.sfacts b{white-space:nowrap;font-size:clamp(1.15rem,1.7vw,1.6rem)}
.pc .kv div{min-width:0}.pc .kv b{overflow-wrap:anywhere}
.only-m{display:none!important}
@media (max-width:760px){.only-d{display:none!important}.only-m{display:grid!important}}
.mtable-wrap{position:relative}
a.ul{display:inline-block;padding-block:9px;margin-block:-9px}
.about7 h3 a{display:inline-block;padding-block:8px;margin-block:-8px}
@media (min-width:901px){.hero-in{min-height:clamp(560px,calc(88vh - 64px),816px)}}
/* v9: product photos are opaque white-background shots */
.pc:hover .ph{background:var(--spot);box-shadow:inset 0 0 0 1px var(--ink)}
.s-tile .im{background:var(--spot);margin:18px 24px 0;border-radius:2px;min-height:0;aspect-ratio:4/3;flex:none}
.s-tile .im img{inset:0;width:100%;height:100%}
.s-tile.w2 .im{max-width:520px;width:calc(100% - 48px);align-self:center}
.split .vis{background:var(--spot)}
.split .vis img{inset:0;width:100%;height:100%;filter:none}
.gal-main img,.thumbs img{mix-blend-mode:normal}
.s-tile .f{padding-top:20px;margin-top:auto}
/* v9 home hero: light, one statement, product photo on white */
.lhero{background:var(--surface);border-bottom:1px solid var(--line)}
.lhero .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(36px,5vw,72px) clamp(44px,6vw,88px)}
.lhero .lt{display:grid;gap:22px;align-content:center}
.lhero h1{font-size:clamp(2.4rem,4.6vw,4.3rem);max-width:12em}
.lhero .acts{display:flex;flex-wrap:wrap;gap:12px}
.lhero .sfacts{margin-top:8px}
.lhero .li{position:relative;background:var(--spot);aspect-ratio:4/3;border-radius:2px}
.lhero .li img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lhero .li .cap{position:absolute;left:18px;bottom:14px;font:700 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#6b7176}
@media (max-width:900px){.lhero .wrap{grid-template-columns:1fr}.lhero .li{order:-1}}
/* applications as a decision list */
.jobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.job{padding:26px 24px 26px 0;border-bottom:1px solid var(--line);display:grid;gap:10px;align-content:start}
.job:not(:nth-child(4n+1)){padding-left:24px;border-left:1px solid var(--line)}
.job h3{font-size:1.12rem}
.job p{color:var(--muted);font-size:.9rem}
.jl{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.jl a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;font-size:.8rem;font-weight:700;text-decoration:none;color:var(--ink)}
.jl a:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:1000px){.jobs{grid-template-columns:1fr 1fr}.job:not(:nth-child(4n+1)){padding-left:0;border-left:0}.job:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}}
@media (max-width:560px){.jobs{grid-template-columns:1fr}.job:nth-child(even){padding-left:0;border-left:0}}

/* ================= v10: dark showcase ================= */
.lb-img img{background:var(--spot)}
/* --- showcase carousel --- */
.hero.sc{background:#05070a;isolation:isolate}
.hero.sc::before{background:
  radial-gradient(60% 70% at 68% 46%,rgba(255,255,255,.07) 0%,transparent 70%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/88px 88px,
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/88px 88px,
  linear-gradient(180deg,#05070a 0%,#0a0e12 60%,#05070a 100%)}
.hero.sc::after{display:none}
.sc-mast{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:26px;padding-bottom:16px;border-bottom:1px solid var(--night-line)}
.sc-mast h1{font:700 .8rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night);max-width:none}
.sc-mast h1 span{color:var(--on-night-muted)}
.sc-mast .hm-r{font-size:.78rem;color:var(--on-night-muted);white-space:nowrap}
.sc .slide{position:relative;overflow:hidden}
.sc-word{position:absolute;right:-1vw;top:46%;transform:translate(8%,-50%);font-weight:700;font-size:clamp(7rem,21vw,21rem);line-height:.8;letter-spacing:-.05em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.08);pointer-events:none;user-select:none;transition:transform 1.4s var(--ease),-webkit-text-stroke-color 1s}
.sc .slide.on .sc-word{transform:translate(0,-50%);-webkit-text-stroke-color:color-mix(in srgb,var(--acc) 30%,rgba(255,255,255,.06))}
.sc-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.28fr) 150px;gap:clamp(20px,3vw,48px);align-items:center;min-height:clamp(540px,calc(100vh - 290px),720px);padding-top:clamp(24px,3vw,40px);padding-bottom:150px}
.sc-txt{display:grid;gap:20px;align-content:center}
.sc-idx{font:400 .9rem/1 var(--sans);color:var(--on-night-muted);letter-spacing:.08em}
.sc-idx b{color:var(--acc);font-weight:700}
.sc-txt .label{color:var(--on-night-muted)}
.sc-txt .label a{color:var(--on-night);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--acc) 70%,transparent)}
.sc-txt .ht{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.02;font-size:clamp(2.4rem,4.6vw,4.4rem);text-wrap:balance;color:#fff}
.sc-txt .lead{color:var(--on-night-muted);max-width:28em}
.sc-txt .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.sc-img{position:relative;align-self:center}
.sc-img::before{content:"";position:absolute;left:6%;right:6%;bottom:4%;height:34%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 50%,transparent),transparent);filter:blur(14px);opacity:0;transition:opacity 1.2s .2s}
.sc-img::after{content:"";position:absolute;left:12%;right:12%;bottom:11%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 80%,transparent),transparent);opacity:0;transition:opacity 1.2s .4s}
.sc .slide.on .sc-img::before{opacity:.75}.sc .slide.on .sc-img::after{opacity:.8}
.sc-img img{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.7));transform:translateX(70px) scale(.93);opacity:0;transition:transform 1.3s var(--ease),opacity .9s}
.sc .slide.on .sc-img img{transform:none;opacity:1}
.sc-figs{display:grid;gap:0;align-self:center;border-top:1px solid var(--night-line)}
.sc-figs div{padding:16px 0;border-bottom:1px solid var(--night-line);display:grid;gap:6px}
.sc-figs b{font-size:clamp(1.4rem,2vw,1.9rem);font-weight:400;letter-spacing:-.02em;line-height:1;color:#fff}
.sc-figs div:first-child b{color:var(--acc)}
.sc-figs span{font-size:.74rem;color:var(--on-night-muted);letter-spacing:.02em}
.sc .slide .sc-txt>*,.sc .slide .sc-figs{transform:translateY(18px);opacity:0;transition:transform 1s var(--ease),opacity .8s}
.sc .slide.on .sc-txt>*,.sc .slide.on .sc-figs{transform:none;opacity:1}
.sc .slide.on .sc-txt>*:nth-child(2){transition-delay:.05s}.sc .slide.on .sc-txt>*:nth-child(3){transition-delay:.1s}.sc .slide.on .sc-txt>*:nth-child(4){transition-delay:.15s}.sc .slide.on .sc-txt>*:nth-child(5){transition-delay:.2s}.sc .slide.on .sc-figs{transition-delay:.25s}
/* thumbnail rail */
.sc .hero-ctl{bottom:28px}
.sc .hero-ctl .wrap{gap:16px;align-items:stretch}
.rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;flex:1}
.rail button{max-width:none;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;min-height:72px;background:rgba(255,255,255,.03);border:1px solid var(--night-line);border-radius:3px;color:var(--on-night-muted);overflow:hidden;transition:border-color .3s,background .3s,color .3s}
.rail button::before{display:none}
.rail button img{width:66px;height:50px;object-fit:contain;flex:none;transition:transform .5s var(--ease)}
.rail button span{display:grid;gap:3px;font:700 .8rem/1.25 var(--sans);letter-spacing:.01em;text-align:left}
.rail button em{font-style:normal;color:var(--acc);font-size:.7rem;letter-spacing:.1em}
.rail button i{top:auto;bottom:0;height:2px;background:var(--acc)}
.rail button:hover{background:rgba(255,255,255,.06);color:#fff}
.rail button:hover img{transform:scale(1.08)}
.rail button.on{border-color:color-mix(in srgb,var(--acc) 55%,transparent);background:color-mix(in srgb,var(--acc) 9%,transparent);color:#fff}
.sc .arrows{display:flex;flex-direction:column;gap:8px}
.sc .arrows button{width:44px;height:32px;border-radius:3px}
@media (max-width:1100px){.sc-in{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.sc-figs{grid-column:1/-1;grid-template-columns:repeat(3,1fr);border-top:0}.sc-figs div{border-bottom:0;border-top:1px solid var(--night-line);padding-right:14px}}
@media (max-width:900px){
  .sc-mast .hm-r{display:none}.sc-mast h1{font-size:.68rem}
  .sc-in{grid-template-columns:1fr;min-height:0;padding-top:8px;padding-bottom:128px;gap:8px}
  .sc-img{order:-1;max-width:560px;width:100%;margin-inline:auto}
  .sc-txt .ht{font-size:clamp(2rem,8.4vw,3rem)}
  .sc-word{top:24%;font-size:clamp(5rem,30vw,10rem)}
  .rail{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}.rail::-webkit-scrollbar{display:none}
  .rail button{flex:0 0 170px;scroll-snap-align:start;min-height:62px}
  .rail button img{width:52px;height:40px}
  .sc .arrows{display:none}
}
/* --- product-line tiles: image stage on top, fixed text rhythm so rows line up --- */
.s-tile{min-height:0;background:var(--stage);border:1px solid var(--line);transition:border-color .3s,transform .4s var(--ease)}
.s-tile:hover{background:var(--stage);border-color:var(--line-2);transform:translateY(-3px)}
.s-tile .im{order:0;margin:0;width:auto;max-width:none;align-self:stretch;aspect-ratio:16/10;background:var(--spot);border-radius:0;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.s-tile.w2 .im{aspect-ratio:21/9;width:auto;max-width:none}
.s-tile .im::after{content:"";position:absolute;left:18%;right:18%;bottom:6%;height:22%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:0;transition:opacity .5s}
.s-tile:hover .im::after{opacity:1}
.s-tile .im img{position:absolute;inset:4% 6%;width:88%;height:92%;object-fit:contain;z-index:1}
.s-tile .t{padding:24px 28px 0}
.s-tile h3{min-height:2.3em}
.s-tile.w2 h3{min-height:0}
.s-tile p{min-height:4.9em}
.s-tile .f{padding:20px 28px 24px;margin-top:auto}
.s-tile.all{background:linear-gradient(145deg,#e3392e 0%,#a3180f 100%);border-color:transparent;color:#fff;justify-content:space-between}
.s-tile.all .label,.s-tile.all p{color:rgba(255,255,255,.82)}
.s-tile.all .t{padding-top:34px}
.s-tile.all h3{font-size:clamp(1.6rem,2.6vw,2.4rem);max-width:14em}
.s-tile.all .go{background:#fff;color:#a3180f}
.s-tile .go{background:var(--ink);color:var(--paper)}
@media (max-width:760px){.s-tile h3,.s-tile p{min-height:0}.s-tile.w2 .im{aspect-ratio:16/10}}
/* --- product cards: spotlight + red floor glow on hover --- */
.pc .ph::after{content:"";position:absolute;left:16%;right:16%;bottom:5%;height:20%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:0;transition:opacity .5s;pointer-events:none}
.pc:hover .ph::after{opacity:1}
.pc .ph img{z-index:1}
.pc:hover .ph{background:var(--spot);box-shadow:inset 0 0 0 1px var(--line-2)}
.pc .tag{background:rgba(10,13,17,.8);color:var(--ink);border:1px solid var(--line-2);backdrop-filter:blur(4px)}
.pc .tag,.pc .ce{z-index:2}
.sc-in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 160px;min-height:clamp(470px,calc(100vh - 330px),640px);padding-bottom:124px}
.sc-txt .ht{font-size:clamp(2.3rem,4vw,4rem)}
.sc .slide.on .sc-word{-webkit-text-stroke-color:color-mix(in srgb,var(--acc) 22%,rgba(255,255,255,.04))}
.sc-figs{position:relative;z-index:2;background:rgba(5,7,10,.66);backdrop-filter:blur(6px);padding:0 16px;border:1px solid var(--night-line)}
.sc-figs div:last-child{border-bottom:0}
@media (max-width:1100px){.sc-figs{padding:0;background:none;border:0;backdrop-filter:none}}
/* wide tiles: photo left, text right */
.s-tile.w2:not(.all){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:1fr auto}
.s-tile.w2:not(.all) .im{grid-row:1/3;aspect-ratio:auto;min-height:300px;width:auto;max-width:none;border-bottom:0;border-right:1px solid var(--line)}
.s-tile.w2:not(.all) .t{padding-top:30px}
.s-tile.w2:not(.all) p{min-height:0}
@media (max-width:620px){.s-tile.w2:not(.all){display:flex}.s-tile.w2:not(.all) .im{aspect-ratio:16/10;min-height:0;border-right:0;border-bottom:1px solid var(--line)}}
.btn-ink{background:var(--stage-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ink:hover{background:var(--night-3);box-shadow:inset 0 0 0 1px var(--ink)}
.sc-txt .label a{display:inline-block;padding-block:12px;margin-block:-12px}
.sc .arrows button{height:40px}
.jl a{min-height:40px}
/* jobs: title / text / chips share rows across each line of 4 */
.jobs{grid-auto-rows:auto}
.job{grid-row:span 3;grid-template-rows:subgrid;row-gap:10px}
.job .jl{align-self:start;margin-top:4px}
@supports not (grid-template-rows:subgrid){.job p{min-height:3.2em}}
.sc-figs b{white-space:nowrap;font-size:clamp(1.25rem,1.7vw,1.7rem)}.sc-in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 180px}
/* ================= slope challenge ================= */
.slope-sec{padding-block:clamp(72px,9vw,120px);background:radial-gradient(70% 90% at 30% 70%,#10231a 0%,transparent 60%),var(--night);border-block:1px solid var(--line)}
.slope{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.sl-stage{position:relative;height:clamp(340px,40vw,500px);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/48px 48px,#070a0d}
.sl-svg{position:absolute;inset:0;width:100%;height:100%}
.sl-edge{stroke:#3fbf5f;stroke-width:3;filter:drop-shadow(0 0 6px rgba(63,191,95,.6))}
.slope.none .sl-edge,.none .sl-edge{stroke:var(--brand)}
.sl-base{stroke:rgba(255,255,255,.25);stroke-width:1;stroke-dasharray:4 5}
.sl-arc{fill:none;stroke:var(--brand);stroke-width:2}
.sl-ramp{position:absolute;height:0;transform-origin:0 0;will-change:transform}
.sl-mach{position:absolute;left:25%;bottom:0;width:min(300px,42%);height:auto;transform:translate(-50%,12%) scaleX(-1);filter:drop-shadow(0 12px 14px rgba(0,0,0,.7));transition:filter .3s}
.slip .sl-mach{animation:slip 1.2s ease-in-out infinite}
@keyframes slip{0%,100%{transform:translate(-50%,12%) scaleX(-1)}50%{transform:translate(-60%,12%) scaleX(-1) rotate(-3deg)}}
.sl-deg{position:absolute;font-size:.9rem;color:var(--brand);font-weight:700;transform:translateY(-50%)}
.sl-panel{display:grid;gap:18px;align-content:start;padding:28px;border:1px solid var(--line);border-radius:3px;background:var(--surface)}
.sl-lab{font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sl-read{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.sl-read b{font-size:clamp(4rem,7vw,6.4rem);font-weight:400;letter-spacing:-.05em;line-height:.9;color:#fff;font-variant-numeric:tabular-nums}
.sl-read span{color:var(--muted);font-size:.95rem}
.slope-sec input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;margin:0}
.slope-sec input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#3fbf5f 0%,#f5b800 60%,var(--brand) 93%,#5a1410 100%)}
.slope-sec input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#3fbf5f 0%,#f5b800 60%,var(--brand) 93%,#5a1410 100%)}
.slope-sec input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;border:4px solid var(--brand);box-shadow:0 0 0 6px rgba(227,57,46,.2)}
.slope-sec input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--brand)}
.sl-marks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sl-marks button{min-height:40px;border:1px solid var(--line-2);background:transparent;color:var(--ink);border-radius:3px;font:700 .85rem/1 var(--sans);cursor:pointer}
.sl-marks button:hover{border-color:var(--brand);color:var(--brand)}
.sl-res{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:12px}
.sl-count{margin:0;font-size:1.05rem}.sl-count b{color:#3fbf5f;font-size:1.4rem}
.none .sl-count b{color:var(--brand)}
.sl-lines{display:flex;flex-wrap:wrap;gap:8px;min-height:40px}
.sl-lines a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;text-decoration:none;color:var(--ink);font-size:.84rem;font-weight:700;animation:pop .35s var(--ease)}
.sl-lines a em{font-style:normal;color:var(--muted);font-weight:400}
.sl-lines a:hover{border-color:#3fbf5f}
.sl-no{color:var(--brand);font-weight:700;font-size:.9rem;align-self:center}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.sl-best{display:inline-flex;align-items:center;gap:8px;min-height:40px;text-decoration:none;color:var(--muted);font-size:.9rem}
.sl-best b{color:#fff}.sl-best svg{width:16px;height:16px}.sl-best:hover b{color:var(--brand)}
@media (max-width:900px){.slope{grid-template-columns:1fr}.sl-stage{height:300px}.sl-panel{padding:22px}}
.sl-stage>.sl-svg,.sl-stage>.sl-ramp,.sl-stage>.sl-deg{transform-box:border-box}
.sl-flip{position:absolute;inset:0;transform:scaleX(-1)}
.sl-deg b,.sl-deg{direction:ltr}
.sl-flip .sl-deg{transform:translateY(-50%) scaleX(-1)}