/* ==========================================================================
   MAXDECAL 9600 Printable Series — Evolution Wrap Film · product feature page
   frontend/public/www/9600-printable/  (index.html en · zh.html · es.html share app.js)
   Livery language: paper body + carbon blocks + red diagonals; vivid colour = the film itself.
   Two backgrounds only (carbon #0B0B0D / paper #F4F2EE) plus white. Radius 0 everywhere.
   ========================================================================== */
:root{
  --red:#E32027; --red-t:#F5343C; --red-ink:#B8151C;
  --carbon:#0B0B0D; --ink:#141416; --ink2:#1E1E22;
  --paper:#F4F2EE; --paper2:#FAFAF8; --hair:#E2DFD9; --hair-d:#2A2A30;
  --tx:#141416; --tx2:#4E4B46; --mut:#6A665F; --mut-d:#A9A6A0;
  --blue:#2F6BFF; --violet:#8A3FFF; --gold:#E0A21B; --candy:#C8102E; --pearl:#F2EFF4; --chrome:#C9CCD2;
  --disp:'Saira Condensed','Arial Narrow',sans-serif;
  --body:'Saira',system-ui,sans-serif;
  --mono:'Chakra Petch',ui-monospace,monospace;
  --pad:clamp(18px,4vw,64px);
  --maxw:1480px;
  --ease:cubic-bezier(.22,1,.36,1);
  --nav:var(--mxsn-h,56px);
}
html[lang^="zh"]{--disp:'Saira Condensed','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;--body:'Noto Sans TC','Saira',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--tx);font-family:var(--body);font-size:16px;line-height:1.65;overflow-x:clip;font-synthesis:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
b,strong{font-weight:700}
.disp{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;line-height:.92}
html[lang^="zh"] .disp{font-style:normal;letter-spacing:.01em;line-height:1.14;font-weight:900}
.mono{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}
.in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* page-owned section nav (hidden; sitenav adopts .nav-sec links) */
.hdr{display:none}
.prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:9100;background:transparent;pointer-events:none}
.prog i{display:block;height:100%;width:0;background:var(--red);transition:width .12s linear}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- chapter heads (色帶級,一眼看到重點) ---------- */
.chap{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(16px,2.4vw,34px);align-items:end;margin-bottom:clamp(26px,3.6vw,48px);position:relative}
.chap .no{font-family:var(--disp);font-weight:800;font-style:italic;font-size:clamp(64px,9vw,150px);line-height:.8;color:var(--red);letter-spacing:-.02em}
.chap .no small{display:block;font:500 11.5px/1 var(--mono);letter-spacing:.22em;color:var(--mut);margin-bottom:10px;font-style:normal}
.chap h2{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(36px,5.4vw,84px);line-height:.92;letter-spacing:-.01em}
html[lang^="zh"] .chap h2{font-style:normal;font-weight:900;line-height:1.14;letter-spacing:.01em}
.chap h2 em{font-style:inherit;color:var(--red)}
.chap p{grid-column:2;max-width:64ch;color:var(--tx2);font-size:clamp(15px,1.15vw,18px);margin-top:14px}
.dark .chap h2{color:#fff}.dark .chap p{color:#CFCCC6}.dark .chap .no small{color:var(--mut-d)}
.chap-band{position:relative;background:var(--carbon);color:#fff;padding:clamp(18px,2.4vw,30px) var(--pad);margin-bottom:clamp(24px,3vw,44px);overflow:hidden}
.chap-band::before{content:"";position:absolute;left:-40px;top:0;bottom:0;width:clamp(90px,10vw,150px);background:var(--red);transform:skewX(-14deg)}
.chap-band .no{position:relative;z-index:1;font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(40px,5vw,72px);line-height:1;padding-left:clamp(20px,3vw,44px);color:#fff}
.chap-band .no small{font:500 11px/1 var(--mono);letter-spacing:.22em;display:block;font-style:normal;margin-bottom:6px;color:#fff}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:calc(100svh - var(--nav));background:var(--carbon);color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;opacity:0;transform:scale(1.06);transition:opacity 1.4s var(--ease),transform 2.2s var(--ease)}
.hero.ready .hero-img{opacity:1;transform:none}
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,#0B0B0Df8 0%,#0B0B0De4 40%,#0B0B0D66 66%,#0B0B0D10 100%),
  linear-gradient(0deg,#0B0B0Df5 0%,#0B0B0D80 32%,transparent 60%)}
.hero-slab{position:absolute;top:-10%;bottom:-10%;transform:skewX(-14deg);pointer-events:none}
.hero-slab.a{right:11%;width:clamp(60px,9vw,150px);background:var(--red);opacity:.92;translate:0 0;animation:slab 1.1s var(--ease) both}
.hero-slab.b{right:8.4%;width:clamp(10px,1.4vw,22px);background:#fff;opacity:.9;animation:slab 1.1s var(--ease) .12s both}
@keyframes slab{from{translate:60vw 0;opacity:0}to{translate:0 0;opacity:.92}}
@media(prefers-reduced-motion:reduce){.hero-slab{animation:none}}
.hero-ghost{position:absolute;right:-.04em;top:clamp(20px,4vw,60px);font-family:var(--disp);font-weight:800;font-style:italic;font-size:clamp(150px,26vw,420px);line-height:.8;color:#fff;opacity:.07;letter-spacing:-.04em;pointer-events:none;user-select:none;white-space:nowrap}
.hero-body{position:relative;z-index:2;padding:clamp(120px,16vh,180px) var(--pad) clamp(28px,4vw,56px);max-width:var(--maxw);margin:0 auto;width:100%}
.hero-eb{display:inline-flex;align-items:center;gap:12px;font:600 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#fff;background:rgba(11,11,13,.72);padding:8px 12px 8px 10px;backdrop-filter:blur(4px)}
.hero-eb::before{content:"";width:28px;height:2px;background:var(--red)}
.hero h1{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(58px,10.4vw,168px);line-height:.88;letter-spacing:-.015em;margin:18px 0 8px;text-shadow:0 2px 6px rgba(0,0,0,.85),0 6px 30px rgba(0,0,0,.7)}
.hero h1 span{display:block}
.hero h1 .l2{color:transparent;-webkit-text-stroke:0;background:linear-gradient(90deg,#fff 0%,#fff 55%,var(--red-t) 100%);-webkit-background-clip:text;background-clip:text;text-shadow:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.85)) drop-shadow(0 6px 22px rgba(0,0,0,.6))}
html[lang^="zh"] .hero h1{font-family:'Saira Condensed','Arial Narrow',sans-serif;font-style:italic;font-weight:800;line-height:.88;letter-spacing:-.015em;font-size:clamp(58px,10.4vw,168px)}
.hero-scope{max-width:64ch;margin-top:16px;padding:10px 14px 10px 16px;border-left:4px solid var(--red);background:rgba(11,11,13,.7);backdrop-filter:blur(4px);font-size:14.5px;line-height:1.55;color:#EDEBEF}
.hero-scope b{color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
html[lang^="zh"] .hero-scope b{text-transform:none;letter-spacing:0;color:var(--red-t)}
/* series marker: coloured text only, no plates (2026-09-21 user: boxes looked cheap) */
.hero-plate{display:flex;align-items:baseline;gap:14px;margin:14px 0 2px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.hero-plate .num{font-family:'Saira Condensed','Arial Narrow',sans-serif;font-style:italic;font-weight:800;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.01em;color:var(--red-t)}
.hero-plate .tag{font-family:var(--mono);font-weight:700;font-size:clamp(13px,1.1vw,16px);letter-spacing:.3em;text-transform:uppercase;color:#fff;padding-left:14px;border-left:2px solid var(--red)}
html[lang^="zh"] .hero-plate .tag{font-family:var(--body);font-weight:900;letter-spacing:.16em;font-size:clamp(15px,1.3vw,19px)}
.hero-sub{max-width:58ch;font-size:clamp(16px,1.35vw,20px);line-height:1.6;color:#EDEBEF;text-shadow:0 1px 12px rgba(0,0,0,.6);margin-top:18px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;font:600 13.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s}
.btn-red{background:var(--red);color:#fff;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);padding:0 28px}
.btn-red:hover{background:#fff;color:var(--carbon)}
.btn-line{border:1px solid rgba(255,255,255,.55);color:#fff}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn::after{content:"→";transition:transform .25s}
.btn:hover::after{transform:translateX(4px)}
.paper .btn-line{border-color:rgba(20,20,22,.5);color:var(--tx)}.paper .btn-line:hover{background:var(--carbon);color:#fff;border-color:var(--carbon)}
/* stat rail */
.hero-stats{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.18);background:rgba(11,11,13,.55);backdrop-filter:blur(8px)}
.hero-stats ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.hero-stats li{padding:18px 22px 18px 0;border-right:1px solid rgba(255,255,255,.14);margin-right:22px;min-width:0}
.hero-stats li:last-child{border:0;margin:0}
.hero-stats b{display:block;font-family:var(--disp);font-weight:800;font-style:italic;font-size:clamp(28px,3.2vw,46px);line-height:1;color:#fff;white-space:nowrap}
.hero-stats b i{font-style:inherit;color:var(--red-t);font-size:.55em;margin-left:4px}
.hero-stats span{display:block;font:500 11.5px/1.4 var(--mono);letter-spacing:.16em;color:#D9D6D0;margin-top:6px}
.hero-scroll{display:none}
.hero-scroll i{width:1px;height:38px;background:linear-gradient(#fff,transparent);animation:drop 1.6s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================
   01 ANATOMY — scrollytelling stack
   ========================================================= */
.anat{background:var(--paper);padding:clamp(56px,8vw,120px) 0 clamp(40px,6vw,90px)}
.anat-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:start}
.stack-fig{position:sticky;top:calc(var(--nav) + 24px);height:min(72svh,640px);min-height:440px;background:var(--carbon);overflow:hidden;color:#fff}
.stack-fig::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 1px,transparent 1px 16px);pointer-events:none}
.stack-fig .ghost{position:absolute;left:-.02em;bottom:-.14em;font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(120px,18vw,260px);color:#fff;opacity:.05;line-height:1;pointer-events:none}
.stack-scene{position:absolute;inset:0;display:grid;place-items:center;perspective:1400px}
.stack{position:relative;width:min(64%,420px);aspect-ratio:1.42;transform:rotateX(58deg) rotateZ(-32deg);transform-style:preserve-3d;transition:transform 1.1s var(--ease)}
.layer{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s var(--ease),opacity .8s var(--ease),filter .8s}
.layer .face{position:absolute;inset:0;box-shadow:0 30px 60px rgba(0,0,0,.45);transition:box-shadow .8s,opacity .8s}
.layer .edge{position:absolute;left:0;right:0;top:100%;height:var(--th,10px);transform-origin:top;transform:rotateX(-90deg);background:var(--edge,#555)}
.layer .side{position:absolute;top:0;bottom:0;left:100%;width:var(--th,10px);transform-origin:left;transform:rotateY(90deg);background:var(--side,#444)}
.l-cap .face{--th:6px;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.12) 45%,rgba(255,255,255,.5));border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(1px)}
.l-cap .edge,.l-cap .side{background:rgba(255,255,255,.75)}
.l-lam .face{--th:10px;background:linear-gradient(120deg,#2F6BFFcc 0%,#8A3FFFbb 42%,#E0A21Bb0 78%,#2F6BFFcc 100%);border:1px solid rgba(255,255,255,.4)}
.l-lam .edge,.l-lam .side{background:#5B4AB8}
.l-film .face{--th:12px;background:
  radial-gradient(circle at 18% 30%,#ffffff 0 9%,transparent 9.5%),
  radial-gradient(circle at 72% 62%,#0B0B0D 0 12%,transparent 12.5%),
  linear-gradient(115deg,#E32027 0 30%,#F4F2EE 30% 55%,#0B0B0D 55% 70%,#E32027 70%);border:1px solid rgba(255,255,255,.25)}
.l-film .edge,.l-film .side{background:#B8151C}
.l-liner .face{--th:14px;background:
  repeating-linear-gradient(90deg,transparent 0 22px,rgba(60,120,255,.28) 22px 23px),
  repeating-linear-gradient(0deg,transparent 0 22px,rgba(60,120,255,.28) 22px 23px),
  linear-gradient(135deg,#E8ECF3,#C9D1DD);border:1px solid rgba(255,255,255,.5)}
.l-liner .edge,.l-liner .side{background:#8C97A8}
/* base spacing along the stack axis (translateZ) */
.l-cap{transform:translateZ(60px)}.l-lam{transform:translateZ(40px)}.l-film{transform:translateZ(20px)}.l-liner{transform:translateZ(0)}
/* step states: explode + spotlight */
.stack-fig[data-step="1"] .l-cap{transform:translateZ(150px)}
.stack-fig[data-step="1"] .l-lam{transform:translateZ(40px)}
.stack-fig[data-step="2"] .l-cap{transform:translateZ(190px);opacity:.28}
.stack-fig[data-step="2"] .l-lam{transform:translateZ(120px)}
.stack-fig[data-step="3"] .l-cap{transform:translateZ(230px);opacity:.18}
.stack-fig[data-step="3"] .l-lam{transform:translateZ(170px);opacity:.3}
.stack-fig[data-step="3"] .l-film{transform:translateZ(100px)}
.stack-fig[data-step="4"] .l-cap{transform:translateZ(250px);opacity:.14}
.stack-fig[data-step="4"] .l-lam{transform:translateZ(200px);opacity:.2}
.stack-fig[data-step="4"] .l-film{transform:translateZ(140px);opacity:.32}
.stack-fig[data-step="4"] .l-liner{transform:translateZ(30px)}
.stack-fig[data-step="0"] .stack{transform:rotateX(58deg) rotateZ(-32deg) translateZ(-40px)}
/* spotlight label inside figure */
.stack-hud{position:absolute;left:clamp(16px,2.4vw,30px);right:clamp(16px,2.4vw,30px);top:clamp(16px,2.4vw,30px);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;z-index:3;pointer-events:none}
.stack-hud .k{font:500 11px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#D9D6D0}
.stack-hud .k b{display:block;font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(20px,2vw,30px);letter-spacing:0;color:#fff;text-transform:uppercase;margin-top:4px;line-height:1}
html[lang^="zh"] .stack-hud .k b{font-style:normal;font-weight:900}
.stack-hud .th{font:600 12px/1 var(--mono);letter-spacing:.12em;color:#fff;background:var(--red);padding:8px 10px;white-space:nowrap;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.stack-dots{position:absolute;left:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);display:flex;gap:8px;z-index:3}
.stack-dots i{width:22px;height:3px;background:rgba(255,255,255,.28);transition:background .3s,width .3s}
.stack-dots i.on{background:var(--red);width:38px}
/* steps */
.steps{display:flex;flex-direction:column}
.step{min-height:min(60svh,520px);display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,3vw,40px) 0;border-top:1px solid var(--hair);opacity:.38;transition:opacity .5s}
.step:first-child{border-top:0}
.step.on{opacity:1}
.step .n{font:600 12px/1 var(--mono);letter-spacing:.2em;color:var(--red);display:flex;align-items:center;gap:10px}
.step .n::after{content:"";flex:0 0 26px;height:2px;background:var(--red)}
.step h3{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.4vw,52px);line-height:.95;margin:10px 0 12px}
html[lang^="zh"] .step h3{font-style:normal;font-weight:900;line-height:1.16}
.step p{font-size:clamp(15px,1.15vw,18px);color:var(--tx2);max-width:52ch}
.step .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.step .facts i{font:500 11.5px/1 var(--mono);font-style:normal;letter-spacing:.08em;padding:9px 11px;border:1px solid #14141666;color:var(--tx);clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.step .note{margin-top:12px;font-size:14px;color:var(--mut);padding-left:12px;border-left:2px solid var(--red)}

/* =========================================================
   02 LAB — combination builder
   ========================================================= */
.lab{background:var(--carbon);color:#fff;padding:clamp(56px,8vw,120px) 0;position:relative;overflow:hidden}
.lab::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 1px,transparent 1px 16px);pointer-events:none}
.lab .in{position:relative}
.lab-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(22px,4vw,64px);align-items:start}
.pick{margin-bottom:26px}
.pick .lbl{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:500 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#D9D6D0;margin-bottom:12px}
.pick .lbl b{font-family:var(--disp);font-style:italic;font-weight:800;font-size:22px;letter-spacing:0;color:#fff;text-transform:uppercase}
html[lang^="zh"] .pick .lbl b{font-style:normal;font-weight:900}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:8px}
.chip{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;text-align:left;padding:8px 10px 8px 8px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);min-height:62px;transition:border-color .25s,background .25s,transform .25s;position:relative}
.chip img{width:44px;height:44px;object-fit:cover;border:1px solid rgba(255,255,255,.2)}
.chip .sw{width:44px;height:44px;border:1px solid rgba(255,255,255,.28);position:relative;overflow:hidden}
.chip .sw::after{content:"";position:absolute;top:0;bottom:0;left:78%;width:2px;background:rgba(255,255,255,.9);mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent)}
.chip .sw.satin::after{width:10px;left:70%;opacity:.35;filter:blur(3px)}
.chip .t{min-width:0}
.chip .t b{display:block;font:600 12px/1.2 var(--mono);letter-spacing:.06em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .t span{display:block;font-size:12.5px;line-height:1.3;color:#CFCCC6;margin-top:3px}
.chip:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
.chip.on{border-color:var(--red);background:rgba(227,32,39,.14)}
.chip.on::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;background:var(--red)}
/* preview panel */
.pv-col{position:sticky;top:calc(var(--nav) + 24px)}
.pv{position:relative;aspect-ratio:4/3;background:#1a1a1e;overflow:hidden;border:1px solid rgba(255,255,255,.14);touch-action:none;cursor:crosshair}
.pv-print{position:absolute;inset:0;background:#F4F2EE url(assets/gen/art.jpg) center/cover no-repeat;transition:filter .6s var(--ease),opacity .6s}
.pv-base{position:absolute;inset:0;pointer-events:none;transition:opacity .6s,background .6s}
.pv-lam{position:absolute;inset:0;pointer-events:none;transition:opacity .6s,background .6s,filter .6s;mix-blend-mode:screen}
.pv-gloss{position:absolute;inset:-20%;pointer-events:none;background:linear-gradient(calc(var(--ang,115deg)),transparent 38%,rgba(255,255,255,.55) 49%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.5) 51%,transparent 62%);opacity:.9;transition:opacity .6s,filter .6s;transform:translate(calc((var(--px,.5) - .5) * 40%),calc((var(--py,.5) - .5) * 40%))}
.pv[data-fin="satin"] .pv-gloss{opacity:.32;filter:blur(26px)}
.pv[data-fin="satin"] .pv-print{filter:contrast(.9) saturate(.9)}
.pv[data-fin="satin"] .pv-lam{filter:blur(18px)}
/* base finishes */
.pv[data-base="PG010"] .pv-base,.pv[data-base="CSG010"] .pv-base{opacity:0}
.pv[data-base="PGC100"] .pv-base{background:linear-gradient(115deg,#C8102Ee6,#7A0616e6 60%,#C8102Ee0);mix-blend-mode:multiply;opacity:1}
.pv[data-base="PGC100"] .pv-print{filter:saturate(.35) brightness(1.25) contrast(1.05)}
.pv[data-base="PPC120"] .pv-base{background:linear-gradient(calc(var(--ang,115deg) + 20deg),rgba(255,255,255,0) 30%,rgba(255,235,250,.55) 48%,rgba(210,235,255,.5) 56%,rgba(255,255,255,0) 72%);mix-blend-mode:screen;opacity:1}
.pv[data-base="PSC100"] .pv-base{background:linear-gradient(calc(var(--ang,115deg) - 10deg),#3a3b40 0%,#e9ebef 26%,#7c7f86 44%,#f7f8fa 58%,#505258 78%,#c9ccd2 100%);mix-blend-mode:hard-light;opacity:.92}
.pv[data-base="PSC100"] .pv-print{filter:contrast(1.1) saturate(.8)}
/* laminates */
.pv[data-lam="G600"] .pv-lam,.pv[data-lam="CSG000"] .pv-lam{opacity:0}
.pv[data-lam="S600"] .pv-lam{opacity:0}
.pv[data-lam="GDB604"] .pv-lam{opacity:1;background:linear-gradient(calc(var(--ang,115deg) + 30deg),rgba(47,107,255,0) 18%,rgba(47,107,255,.85) 42%,rgba(0,220,255,.55) 52%,rgba(120,60,255,.5) 62%,rgba(47,107,255,0) 84%)}
.pv[data-lam="GDP605"] .pv-lam{opacity:1;background:linear-gradient(calc(var(--ang,115deg) + 30deg),rgba(138,63,255,0) 18%,rgba(138,63,255,.85) 42%,rgba(255,80,200,.5) 52%,rgba(40,120,255,.5) 62%,rgba(138,63,255,0) 84%)}
.pv[data-lam="GDG602"] .pv-lam{opacity:1;background:linear-gradient(calc(var(--ang,115deg) + 30deg),rgba(224,162,27,0) 18%,rgba(224,162,27,.85) 42%,rgba(255,235,140,.55) 52%,rgba(120,220,120,.45) 62%,rgba(224,162,27,0) 84%)}
.pv-edge{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;background:linear-gradient(rgba(11,11,13,0),rgba(11,11,13,.82) 45%,rgba(11,11,13,.94));pointer-events:none}
.pv-edge .a{font:600 12px/1.3 var(--mono);letter-spacing:.1em;color:#fff;text-transform:uppercase}
.pv-edge .a small{display:block;font:500 10.5px/1.3 var(--mono);letter-spacing:.18em;color:#D9D6D0;margin-bottom:3px}
.pv-edge .b{font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;color:#F4F2EE;text-align:right;text-transform:uppercase}
.pv-corner{position:absolute;right:0;top:0;width:0;height:0;border-style:solid;border-width:0 54px 54px 0;border-color:transparent var(--red) transparent transparent}
/* readout */
.readout{margin-top:14px;border:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.03)}
.readout>div{padding:14px 16px;min-width:0}
.readout>div+div{border-left:1px solid rgba(255,255,255,.14)}
.readout .k{font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#D9D6D0}
.readout .v{font:600 15px/1.25 var(--mono);color:#fff;margin-top:8px;letter-spacing:.04em;word-break:break-word}
.readout .v small{display:block;font:400 13px/1.35 var(--body);color:#CFCCC6;margin-top:4px;letter-spacing:0;text-transform:none}
.readout .sum{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.readout .sum .v{margin:0;font-size:22px;font-family:var(--disp);font-style:italic;font-weight:800;letter-spacing:0}
.readout .sum .v i{font-style:inherit;color:var(--red-t);font-size:.62em;margin-left:6px}
.readout .links{display:flex;gap:8px;flex-wrap:wrap}
.readout .links a{font:600 11.5px/1 var(--mono);letter-spacing:.1em;padding:10px 12px;border:1px solid rgba(255,255,255,.4);color:#fff;transition:background .2s,border-color .2s;text-transform:uppercase}
.readout .links a:hover{background:var(--red);border-color:var(--red)}
.lab-note{margin-top:12px;font-size:13px;line-height:1.5;color:#CFCCC6;padding-left:12px;border-left:2px solid var(--red)}
.lab-count{display:inline-flex;align-items:baseline;gap:10px;font:500 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#D9D6D0;margin-top:10px}
.lab-count b{font-family:var(--disp);font-style:italic;font-weight:800;font-size:44px;letter-spacing:0;color:var(--red-t);line-height:1}

/* =========================================================
   03 EFFECTS — editorial spread
   ========================================================= */
.fx{background:var(--paper);padding:clamp(56px,8vw,120px) 0}
.fx-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:clamp(10px,1.4vw,18px)}
.fx-tile{position:relative;overflow:hidden;background:var(--carbon);color:#fff;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.fx-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);z-index:0}
.fx-tile:hover img{transform:scale(1.04)}
.fx-tile .sh{position:absolute;inset:0;background:linear-gradient(0deg,#0B0B0Df6 0%,#0B0B0Dd2 38%,#0B0B0D52 68%,transparent 100%);z-index:1}
.fx-tile h3,.fx-tile p{text-shadow:0 1px 4px rgba(0,0,0,.8),0 4px 18px rgba(0,0,0,.6)}
.fx-tile .tb{position:relative;z-index:2;padding:clamp(16px,2.2vw,28px)}
.fx-tile .k{font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:8px;background:rgba(11,11,13,.72);padding:7px 10px 7px 8px;backdrop-filter:blur(4px)}
.fx-tile .k::before{content:"";width:18px;height:2px;background:var(--red)}
.fx-tile h3{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.6vw,58px);line-height:.92;margin:8px 0 8px}
html[lang^="zh"] .fx-tile h3{font-style:normal;font-weight:900;line-height:1.14}
.fx-tile p{font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.55;color:#EDEBEF;max-width:46ch}
.fx-tile .skus{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fx-tile .skus span{font:600 11px/1 var(--mono);letter-spacing:.08em;padding:8px 10px;border:1px solid rgba(255,255,255,.45);color:#fff;background:rgba(11,11,13,.4);transition:background .2s,border-color .2s}
.fx-tile:hover .skus span:first-child{background:var(--red);border-color:var(--red)}
.fx-a{grid-column:1/8;grid-row:span 2;min-height:520px}
.fx-b{grid-column:8/13}
.fx-c{grid-column:8/13}
.fx-d{grid-column:1/6}
.fx-e{grid-column:6/13}
/* product-photo strip inside a tile (real photos, not AI) */
.fx-real{position:absolute;right:clamp(12px,1.6vw,22px);top:clamp(12px,1.6vw,22px);z-index:2;display:flex;gap:6px}
.fx-real img{position:static;width:64px;height:64px;object-fit:cover;border:2px solid #fff;transition:none}
.fx-real span{position:absolute;right:0;top:calc(100% + 6px);font:500 10px/1 var(--mono);letter-spacing:.16em;color:#fff;text-transform:uppercase;white-space:nowrap;background:rgba(11,11,13,.7);padding:5px 7px}

/* =========================================================
   04 BUILT FOR — ledger
   ========================================================= */
.who{background:var(--paper);padding:0 0 clamp(56px,8vw,120px)}
.ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.who-card{background:#fff;border:1px solid var(--hair);display:flex;flex-direction:column;position:relative;overflow:hidden}
.who-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--red)}
.who-head{padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px) 14px 28px;border-bottom:1px solid var(--hair)}
.who-head .k{font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.who-head h3{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(28px,2.6vw,42px);line-height:.95;margin-top:8px}
html[lang^="zh"] .who-head h3{font-style:normal;font-weight:900;line-height:1.14}
.who-head p{font-size:15px;color:var(--tx2);margin-top:8px}
.who-rows{padding:8px 0 10px}
.who-row{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px clamp(18px,2.4vw,28px) 12px 28px;align-items:start}
.who-row+.who-row{border-top:1px dashed var(--hair)}
.who-row .x{font:600 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--mut);padding:5px 7px;border:1px solid var(--hair);margin-top:3px;white-space:nowrap}
.who-row .x.ok{color:#fff;background:var(--carbon);border-color:var(--carbon)}
.who-row .pain{font-size:14.5px;color:var(--mut);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1.5px}
.who-row .fix{font-size:15.5px;color:var(--tx);margin-top:4px;line-height:1.5}
.who-row .fix b{color:var(--red-ink)}

/* =========================================================
   05 LINEUP
   ========================================================= */
.lineup{background:var(--paper);padding:clamp(56px,8vw,120px) 0}
.lu-summary{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);margin-bottom:22px}
.lu-summary b{font-family:var(--disp);font-style:italic;font-weight:800;font-size:22px;letter-spacing:0;color:var(--tx);text-transform:none}
.lu-summary i{width:1px;height:16px;background:var(--hair)}
.grp{margin-top:clamp(22px,3vw,40px)}
.grp-head{display:flex;align-items:center;gap:14px;background:var(--carbon);color:#fff;padding:0;position:relative;overflow:hidden;min-height:60px}
.grp-head .no{background:var(--red);font-family:var(--disp);font-style:italic;font-weight:800;font-size:28px;padding:0 22px 0 18px;height:60px;display:flex;align-items:center;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);flex:0 0 auto}
.grp-head h3{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.4vw,34px);line-height:1;letter-spacing:0}
html[lang^="zh"] .grp-head h3{font-style:normal;font-weight:900}
.grp-head .cnt{margin-left:auto;padding-right:18px;font:500 11.5px/1 var(--mono);letter-spacing:.18em;color:#D9D6D0;text-transform:uppercase;white-space:nowrap}
.rows{list-style:none;border:1px solid var(--hair);border-top:0;background:#fff}
.row{display:grid;grid-template-columns:88px minmax(0,1.15fr) minmax(0,.55fr) minmax(0,1.6fr) auto;gap:16px;align-items:center;padding:12px 16px;border-top:1px solid var(--hair);transition:background .2s}
.row:hover{background:#FBF9F5}
.row img{width:88px;height:88px;object-fit:cover;border:1px solid var(--hair);background:#fff}
.row .sku{font:700 15px/1.2 var(--mono);letter-spacing:.04em;color:var(--red-ink)}
.row .nm{font-size:15px;font-weight:600;color:var(--tx);margin-top:3px;line-height:1.35}
.row .ty{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.row .ty i{font:600 11.5px/1 var(--mono);font-style:normal;letter-spacing:.08em;padding:7px 9px;border:1px solid var(--tx);color:var(--tx);white-space:nowrap;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.row .ty i.cast{background:var(--carbon);color:#fff;border-color:var(--carbon)}
.row .ft{font-size:14.5px;line-height:1.5;color:var(--tx2)}
.row .ft b{color:var(--tx)}
.row .go{font:600 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:12px 14px;border:1px solid var(--tx);color:var(--tx);white-space:nowrap;transition:background .2s,color .2s,border-color .2s;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.row .go:hover{background:var(--red);border-color:var(--red);color:#fff}
.row .go::after{content:"↗"}
.compat{margin-top:clamp(22px,3vw,36px);display:grid;grid-template-columns:auto 1fr;gap:0;border:1px solid var(--hair);background:#fff}
.compat .k{background:var(--carbon);color:#fff;padding:18px 22px;font:500 11.5px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center}
.compat ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;padding:0 8px}
.compat li{padding:18px 22px;font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(20px,2vw,30px);line-height:1;color:var(--tx);display:flex;align-items:center;gap:14px}
.compat li::before{content:"";width:10px;height:10px;background:var(--red);transform:skewX(-14deg)}
.compat .roll{margin-left:auto;font:500 12px/1.5 var(--mono);letter-spacing:.12em;color:var(--tx2);padding:12px 22px;text-transform:uppercase}
.compat .roll b{display:block;font-family:var(--disp);font-style:italic;font-weight:800;font-size:22px;letter-spacing:0;color:var(--tx);text-transform:none}

/* =========================================================
   06 INSTALL TIP
   ========================================================= */
.tip{background:var(--carbon);color:#fff;padding:0;position:relative;overflow:hidden}
.tip-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:560px}
.tip-img{position:relative;min-height:360px}
.tip-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tip-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--carbon) 100%)}
.tip-img .slab{position:absolute;left:-30px;top:-10%;bottom:-10%;width:clamp(40px,5vw,80px);background:var(--red);transform:skewX(-14deg);opacity:.95}
.tip-body{padding:clamp(40px,6vw,90px) var(--pad) clamp(40px,6vw,90px) clamp(20px,3vw,50px);display:flex;flex-direction:column;justify-content:center}
.tip-body .eb{font:500 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--red-t);display:flex;align-items:center;gap:10px}
.tip-body .eb::before{content:"";width:26px;height:2px;background:var(--red)}
.tip-body h2{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.6vw,72px);line-height:.92;margin:14px 0 14px}
html[lang^="zh"] .tip-body h2{font-style:normal;font-weight:900;line-height:1.14}
.tip-body>p{font-size:clamp(15px,1.15vw,18px);color:#EDEBEF;max-width:54ch}
.tl{list-style:none;counter-reset:s;margin-top:26px;display:grid;gap:0}
.tl li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.16);align-items:start}
.tl li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.tl .st{counter-increment:s;font-family:var(--disp);font-style:italic;font-weight:800;font-size:34px;line-height:1;color:var(--red-t);min-width:52px}
.tl .st::before{content:"0" counter(s)}
.tl h4{font-size:17px;font-weight:700;color:#fff}
.tl p{font-size:15px;color:#CFCCC6;line-height:1.55;margin-top:3px}
.tl .nocap{margin-top:14px;font:500 12px/1.5 var(--mono);letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.08);border-left:3px solid var(--red);padding:10px 12px}

/* =========================================================
   CTA + FOOT
   ========================================================= */
.cta{background:var(--paper);padding:clamp(56px,8vw,120px) 0}
.cta-box{position:relative;background:var(--carbon);color:#fff;overflow:hidden;padding:clamp(36px,5vw,72px) var(--pad);display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:clamp(20px,3vw,40px);align-items:center}
.cta-box::before{content:"";position:absolute;right:-10%;top:-20%;bottom:-20%;width:clamp(90px,12vw,200px);background:var(--red);transform:skewX(-14deg);opacity:.95}
.cta-box::after{content:"";position:absolute;right:calc(-10% + clamp(90px,12vw,200px) + 14px);top:-20%;bottom:-20%;width:14px;background:#fff;transform:skewX(-14deg);opacity:.9}
.cta-box .ghost{position:absolute;left:-.02em;bottom:-.2em;font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(120px,22vw,320px);line-height:1;color:#fff;opacity:.05;pointer-events:none}
.cta-box>*{position:relative;z-index:1}
.cta-box .eb{font:500 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--red-t)}
.cta-box h2{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(36px,5vw,78px);line-height:.92;margin:12px 0 12px}
html[lang^="zh"] .cta-box h2{font-style:normal;font-weight:900;line-height:1.14}
.cta-box p{font-size:clamp(15px,1.15vw,18px);color:#EDEBEF;max-width:52ch}
.cta-box .btns{display:flex;flex-direction:column;gap:10px;align-items:stretch;padding-right:clamp(120px,14vw,240px)}
.cta-box .btn-line,.paper .cta-box .btn-line{background:var(--carbon);color:#fff;border-color:rgba(255,255,255,.6)}
.paper .cta-box .btn-line:hover{background:#fff;color:var(--carbon);border-color:#fff}
.cta-box .btn-line{justify-content:center}
.cta-box .btn-red{justify-content:center}
footer.pf{background:var(--carbon);color:#CFCCC6;border-top:6px solid transparent;border-image:linear-gradient(90deg,#E32027 0 14.28%,#F26A1B 0 28.56%,#F2C21B 0 42.84%,#29A84B 0 57.12%,#1FAFD1 0 71.4%,#2F6BFF 0 85.68%,#8A3FFF 0) 1}
footer.pf .in{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;padding-block:22px}
footer.pf img{height:34px;width:auto}
footer.pf .l{display:flex;align-items:center;gap:16px;font:500 11.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
footer.pf .l i{color:var(--red-t);font-style:normal}
footer.pf .r{font-size:13px;line-height:1.5;max-width:70ch;color:#CFCCC6}
footer.pf .r a{color:#fff;border-bottom:1px solid var(--red)}

/* =========================================================
   RESPONSIVE — phone is its own layout, not a shrink
   ========================================================= */
@media(max-width:1060px){
  .fx-a{grid-column:1/13;min-height:440px}
  .fx-b{grid-column:1/7}.fx-c{grid-column:7/13}
  .fx-d{grid-column:1/13}.fx-e{grid-column:1/13}
  .ledger{grid-template-columns:1fr}
  .row{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"img id ty" "img ft ft" "img go go";gap:8px 14px}
  .row img{grid-area:img;width:72px;height:72px}
  .row .id{grid-area:id}.row .ty{grid-area:ty;flex-direction:row}.row .ft{grid-area:ft}.row .go{grid-area:go;justify-self:start}
}
@media(max-width:820px){
  body{font-size:16px}
  .hero{min-height:calc(100svh - var(--nav))}
  .hero-img{object-position:64% 50%}
  .hero-shade{background:linear-gradient(0deg,#0B0B0Df8 0%,#0B0B0De8 46%,#0B0B0D96 70%,#0B0B0D30 100%)}
  .hero-body{padding-top:120px}
  .hero-eb{letter-spacing:.12em;font-size:12px;white-space:nowrap}
  .hero-ghost{font-size:clamp(110px,34vw,200px);top:12px}
  .hero h1{font-size:clamp(50px,15.5vw,84px)}
  html[lang^="zh"] .hero h1{font-size:clamp(50px,15.5vw,84px)}
  .hero-plate{margin:10px 0 2px;gap:10px}
  .hero-plate .num{font-size:30px}
  .hero-plate .tag{font-size:12px;letter-spacing:.22em;padding-left:10px}
  html[lang^="zh"] .hero-plate .tag{font-size:14px}
  .hero-scope{font-size:15px;margin-top:14px}
  .hero-sub{font-size:16.5px}
  .hero-slab.a{right:-6%;width:70px;opacity:.85}.hero-slab.b{right:-1%;width:10px}
  .hero-stats ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stats li{padding:14px 12px 14px 0;margin-right:12px}
  .hero-stats li:nth-child(2){border-right:0;margin-right:0}
  .hero-stats b{font-size:26px}
  .hero-stats span{font-size:12px}
  .hero-scroll{display:none}
  .chap{grid-template-columns:1fr;gap:6px}
  .chap .no{font-size:64px}.chap p{grid-column:1}
  .anat-grid{grid-template-columns:1fr;gap:16px}
  .stack-fig{position:sticky;top:var(--nav);height:min(44svh,360px);min-height:300px;z-index:2}
  .stack{width:min(70%,340px)}
  .stack-fig[data-step="1"] .l-cap{transform:translateZ(110px)}
  .stack-fig[data-step="2"] .l-cap{transform:translateZ(150px)}.stack-fig[data-step="2"] .l-lam{transform:translateZ(90px)}
  .stack-fig[data-step="3"] .l-cap{transform:translateZ(170px)}.stack-fig[data-step="3"] .l-lam{transform:translateZ(120px)}.stack-fig[data-step="3"] .l-film{transform:translateZ(70px)}
  .stack-fig[data-step="4"] .l-cap{transform:translateZ(190px)}.stack-fig[data-step="4"] .l-lam{transform:translateZ(150px)}.stack-fig[data-step="4"] .l-film{transform:translateZ(100px)}.stack-fig[data-step="4"] .l-liner{transform:translateZ(20px)}
  .step{min-height:0;padding:26px 0;opacity:1}
  .step h3{font-size:28px}
  .lab-grid{grid-template-columns:1fr;gap:14px}
  .pv-col{display:contents}
  .pv-wrap{position:sticky;top:var(--nav);z-index:4;order:-1;background:var(--carbon);padding-bottom:10px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .pv-wrap .pv{aspect-ratio:16/10}
  .pick-col{order:0}.lab-read{order:1}
  .hero-eb,.hero-stats span,.pv-edge .b,.pv-edge .a small,.readout .k,.who-row .x,.grp-head .cnt,.row .ty i,.row .go,.tip-body .eb,.chap .no small,.fx-tile .k,.step .n,.pick .lbl,.lab-count,.lu-summary,.fx-real span,.stack-hud .k,footer.pf .l,.who-head .k,.step .facts i,.cta-box .eb,.tl .nocap,.readout .links a,.row .go,.fx-tile .skus span,.compat .k{font-size:12px}
  .chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chip{min-height:64px}
  .chip .t span{white-space:normal;font-size:12.5px}
  .readout{grid-template-columns:1fr}
  .readout>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .readout .links a{min-height:44px;display:inline-flex;align-items:center}
  .fx-tile{min-height:300px}.fx-a{min-height:400px}
  .fx-b{grid-column:1/13}.fx-c{grid-column:1/13}
  .fx-real img{width:50px;height:50px}
  .grp-head{flex-wrap:wrap;min-height:0}
  .grp-head .cnt{width:100%;margin:0;padding:8px 16px 12px;font-size:12px}
  .row{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"img id" "ty ty" "ft ft" "go go";padding:14px 14px}
  .row img{width:64px;height:64px}
  .row .sku{font-size:15px}.row .nm{font-size:15px}
  .row .go{width:100%;justify-content:center}
  .compat{grid-template-columns:1fr}
  .compat .k{padding:12px 16px}
  .compat ul{padding:6px 8px}.compat li{padding:10px 12px;font-size:20px}
  .compat .roll{margin-left:0;padding:10px 16px 14px;width:100%}
  .tip-grid{grid-template-columns:1fr}
  .tip-img{min-height:260px}.tip-img::after{background:linear-gradient(0deg,var(--carbon) 0%,transparent 40%)}
  .tip-body{padding:26px var(--pad) 40px}
  .tl .st{font-size:28px;min-width:44px}
  .cta-box{grid-template-columns:1fr}
  .cta-box::before{display:none}.cta-box::after{display:none}
  .cta-box{border-top:6px solid var(--red)}
  .cta-box .btns{flex-direction:column;padding-right:0}
  footer.pf .in{flex-direction:column;align-items:flex-start}
}
@media(hover:none){.pv{cursor:default}}

/* =========================================================
   SKU spec modal (in place; carbon panel, red accents)
   ========================================================= */
html.skm-lock{overflow:hidden}
.skm-veil[hidden]{display:none !important}
.skm-veil{position:fixed;inset:0;z-index:9500;background:rgba(6,6,8,.78);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px}
.skm{position:relative;width:min(1060px,100%);max-height:calc(100svh - 48px);background:var(--carbon);color:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:auto;-webkit-overflow-scrolling:touch}
.skm::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--red) 0 60%,#fff 60% 64%,transparent 64%);z-index:2}
.skm-x{position:absolute;right:10px;top:12px;z-index:3;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:18px;background:rgba(11,11,13,.7);transition:background .2s,border-color .2s}
.skm-x:hover{background:var(--red);border-color:var(--red)}
.skm-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:420px}
.skm-loading{grid-column:1/-1;padding:80px 24px;text-align:center;font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#D9D6D0}
.skm-media{position:relative;background:#fff;display:flex;align-items:center;justify-content:center;padding:clamp(16px,2.4vw,32px)}
.skm-media img{width:100%;max-width:520px;height:auto;aspect-ratio:1;object-fit:cover}
.skm-type{position:absolute;left:0;top:18px;background:var(--carbon);color:#fff;font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:9px 14px 9px 16px;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.skm-info{padding:clamp(22px,3vw,40px) clamp(20px,3vw,40px) clamp(22px,3vw,36px);min-width:0}
.skm-eb{font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--red-t);display:flex;align-items:center;gap:10px}
.skm-eb::before{content:"";width:22px;height:2px;background:var(--red)}
.skm-sku{font:700 clamp(22px,2.2vw,30px)/1.1 var(--mono);letter-spacing:.02em;color:#fff;margin-top:12px}
.skm-name{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.6vw,38px);line-height:.98;margin:6px 0 12px;color:#fff}
html[lang^="zh"] .skm-name{font-style:normal;font-weight:900;line-height:1.16;text-transform:none}
.skm-desc{font-size:15px;line-height:1.6;color:#D9D6D0;max-width:60ch}
.skm-off{margin-top:8px;font-size:13px;color:#F4D06F;border-left:2px solid #F4D06F;padding-left:10px}
.skm-specs{margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px;border-top:1px solid rgba(255,255,255,.14)}
.skm-sr{display:grid;grid-template-columns:1fr;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);min-width:0}
.skm-sr dt{font:600 10.5px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#D9D6D0}
.skm-sr dd{margin:4px 0 0;font-size:14.5px;line-height:1.45;color:#fff;overflow-wrap:anywhere}
.skm-apps{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.skm-apps span{font:500 12px/1 var(--mono);letter-spacing:.06em;padding:8px 10px;border:1px solid rgba(255,255,255,.35);color:#F4F2EE}
.skm-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.skm-qty{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.35);height:48px}
.skm-qty span{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#D9D6D0;padding:0 12px}
.skm-qty button{width:44px;height:100%;color:#fff;font-size:20px;border-left:1px solid rgba(255,255,255,.2);transition:background .2s}
.skm-qty button:hover{background:rgba(255,255,255,.12)}
.skm-qty input{width:64px;height:100%;background:transparent;border:0;border-left:1px solid rgba(255,255,255,.2);color:#fff;text-align:center;font:700 18px/1 var(--mono);-moz-appearance:textfield}
.skm-qty input::-webkit-inner-spin-button,.skm-qty input::-webkit-outer-spin-button{-webkit-appearance:none}
.skm-add{cursor:pointer}
.skm-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
.skm-links a{font:600 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#F4F2EE;border-bottom:1px solid var(--red);padding-bottom:3px}
.skm-links a:hover{color:var(--red-t)}
.skm-toast{margin-top:14px;padding:12px 14px;background:rgba(41,168,75,.16);border-left:3px solid #29A84B;font-size:14.5px;color:#fff}
.skm-toast a{color:#fff;font-weight:700;border-bottom:1px solid #fff;margin-left:8px}
.row .row-img{display:block}
.row .sku{display:inline-block;border-bottom:1px dashed transparent;transition:border-color .2s}
.row .sku:hover,.row .row-img:hover+.id .sku{border-bottom-color:var(--red-ink)}
@media(max-width:820px){
  .skm-veil{padding:0;align-items:flex-end}
  .skm{width:100%;max-height:100svh;border:0}
  .skm-body{grid-template-columns:1fr;min-height:0}
  .skm-media{padding:14px 14px 0}
  .skm-media img{max-width:100%;aspect-ratio:16/10;object-fit:contain}
  .skm-info{padding:20px 18px 32px}
  .skm-specs{grid-template-columns:1fr}
  .skm-sr dt{font-size:12px}.skm-sr dd{font-size:15px}
  .skm-desc{font-size:15px}
  .skm-act{gap:10px}.skm-add{width:100%;justify-content:center}
  .skm-qty{width:100%;justify-content:space-between}
  .skm-links a{font-size:12px;min-height:44px;display:inline-flex;align-items:center}
  .skm-x{top:8px;right:8px}
  .skm-type,.skm-eb,.skm-qty span,.skm-apps span{font-size:12px}
}

/* ============================================================== inline emphasis in body copy (2026-09-21) -- */
/* <b> = bold + brand colour · <b class="up"> = same, slightly larger. Light sections use red-ink (5.9:1 on paper),
   dark sections use red-t (6.5:1 on carbon). Both measured WCAG AA for normal text. */
.hero-sub b,.chap p b,.step p b,.who-head p b,.fx-tile p b,.tip-body>p b,.tl p b,.cta-box p b{font-weight:700}
.chap p b,.step p b,.who-head p b{color:var(--red-ink)}
.hero-sub b,.dark .chap p b,.fx-tile p b,.tip-body>p b,.tl p b,.cta-box p b{color:var(--red-t)}
.hero-sub b{text-shadow:0 1px 10px rgba(0,0,0,.75)}
b.up{font-size:1.14em;font-weight:800;line-height:1.1}
html[lang^="zh"] b.up{font-weight:900;font-size:1.12em}
@media (max-width:720px){ b.up{font-size:1.1em} }

/* ============================================================== 03 effect tiles — 4-tier text colour (2026-09-21, Claude Design brief) -- */
/* Tiers: title = white + one keyword in brand red · label = per-series accent (one per card) · body = 78% white · SKU = grey pill.
   Text red uses --red-t (#FF5A60, 6.45:1 on carbon); flat #E30613 is only 4.06:1 on carbon so it is kept for lines/borders, never text. */
.fx-tile{--fxa:#B5B5B5}
.fx-tile[data-fx="delution"]{--fxa:#C9A3FF}
.fx-tile[data-fx="chrome"]{--fxa:#9FB6C9}
.fx-tile[data-fx="print"]{--fxa:#FF7AA8}
.fx-tile[data-fx="install"]{--fxa:#B5B5B5}
.fx-tile[data-fx="fleet"]{--fxa:#F5A34B}
.fx-tile .sh{background:linear-gradient(to top,rgba(8,8,10,.92),rgba(8,8,10,.72) 55%,transparent)}
.fx-tile .k{color:var(--fxa);background:none;padding:0;backdrop-filter:none;letter-spacing:.22em;font-weight:600}
.fx-tile .k::before{background:var(--fxa)}
.fx-tile h3{color:#fff;margin:10px 0 0}
.fx-tile h3 em{font-style:inherit;color:var(--red-t)}
.fx-tile h3::after{content:"";display:block;width:44px;height:4px;background:var(--red);margin:10px 0 12px}
.fx-tile p{color:rgba(255,255,255,.78);line-height:1.6}
.fx-tile .skus span{background:#161618;border-color:#2A2A2E;color:#B5B5B5;transition:border-color .2s,color .2s}
.fx-tile:hover .skus span:first-child{background:#161618;border-color:var(--red);color:#fff}
.fx-tile .skus span:hover{border-color:var(--red);color:#fff}
@media (max-width:720px){ .fx-tile h3::after{width:36px;height:3px;margin:8px 0 10px} }
/* keep text clear of the product-photo strip (top-right) now that titles carry a rule line: reserve its height */
.fx-tile:has(.fx-real) .tb{padding-top:calc(clamp(12px,1.6vw,22px) + 64px + 30px)}
.fx-tile h3::after{margin:8px 0 10px}

/* 2026-09-21 user: --red-t (#FF5A60) reads pink/cheap on carbon. Dark-section emphasis = pure white bold; title keyword = true brand red
   (#E30613 on carbon = 4.06:1, passes the 3:1 large-text threshold since fx h3 is >=30px/800). --red-t stays only on pre-existing hero plate. */
.hero-sub b,.dark .chap p b,.fx-tile p b,.tip-body>p b,.tl p b,.cta-box p b{color:#fff}
.fx-tile h3 em{color:var(--red)}

/* 2026-09-21 user: category labels on the effect tiles are too small (were 11px mono) */
.fx-tile .k{font-size:clamp(13.5px,1.15vw,15.5px);font-weight:700;letter-spacing:.2em;gap:10px;margin-bottom:2px}
.fx-tile .k::before{width:26px;height:2px}
html[lang^="zh"] .fx-tile .k{letter-spacing:.14em}
@media (max-width:720px){ .fx-tile .k{font-size:13.5px} }

/* ============================================================== 2026-09-21 user: the pinkish red (#FF5A60) reads cheap everywhere on this page.
   --red-t re-tuned to #F5343C = the brand red lifted just enough for carbon: 5.09:1 on #0B0B0D, 4.68:1 on #161618 (both >= 4.5 AA normal text),
   same r:g:b ratio as #E32027 so it reads as signal red, not pink. One token, every usage (hero plate, scope, stats, lab count, eyebrows, footer). */

/* ============================================================== SKU modal — 4-tier text (2026-09-21, Claude Design brief) -- */
/* label = 9600 series accent (series blue lifted for carbon, 9.2:1; the brief's Candy pink was rejected) · SKU = grey secondary ·
   name = white + finish keyword in brand red (>=24px/800 → 3:1 large-text rule, 4.22:1) + 44×4 red rule · body 78% white ·
   spec labels #8A8F98 (6.05:1) · key numbers 22px/700 white, units #B5B5B5 · dividers #232327 · chips #161618/#2A2A2E/#B5B5B5, red on hover */
.skm{--skm-a:#8FB0FF}
.skm-eb{color:var(--skm-a);letter-spacing:.24em;font-weight:600}
.skm-eb::before{height:3px;background:var(--skm-a)}
.skm-sku{color:#B5B5B5;letter-spacing:.08em;font-size:clamp(15px,1.5vw,18px);font-weight:600;margin-top:14px}
.skm-name{margin:4px 0 0}
.skm-name em{font-style:inherit;color:var(--red)}
.skm-name::after{content:"";display:block;width:44px;height:4px;background:var(--red);margin:12px 0 0}
.skm-desc{color:rgba(255,255,255,.78);line-height:1.65;margin-top:14px}
.skm-specs{border-top-color:#232327}
.skm-sr{border-bottom-color:#232327}
.skm-sr dt{color:#8A8F98;font-size:11px;letter-spacing:.16em}
.skm-sr dd{color:rgba(255,255,255,.9)}
.skm-sr dd.big{color:#B5B5B5}
.skm-sr dd b{font-weight:700;color:#fff}
.skm-sr dd.big b{font-size:22px;line-height:1;font-family:var(--mono);letter-spacing:-.01em;margin-right:3px}
.skm-apps span{background:#161618;border-color:#2A2A2E;color:#B5B5B5;transition:border-color .2s,color .2s}
.skm-apps span:hover{border-color:var(--red);color:#fff}
@media (max-width:720px){ .skm-sr dt{font-size:12px} .skm-sr dd.big b{font-size:20px} .skm-eb{font-size:12px} }

/* 2026-09-21 user: hero plate "9600" too red -> lavender-to-deep-blue gradient (ends on the 9600 series tint #2E5BE3 used site-wide).
   #C9B8FF 11.0:1 / #2E5BE3 3.5:1 on carbon; glyphs are 52px/800 italic so the >=3:1 large-text threshold holds at the darkest tip. */
.hero-plate .num{color:transparent;background:linear-gradient(118deg,#D9CCFF 0%,#B39CFF 38%,#6F86F5 72%,#2E5BE3 100%);-webkit-background-clip:text;background-clip:text;text-shadow:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(120,110,255,.35))}
.hero-plate .tag{border-left-color:#9FA8FF}

/* 2026-09-21 round 14 (user): light-section emphasis red -> black; hero title -> lavender-to-deep-blue gradient (matches the 9600 plate).
   Round 15 (user): hero title gradient reverted -> original white. */
.chap:not(.dark) p b,.step p b,.who-head p b{color:var(--ink)}
.chap.dark p b,.lab .chap p b{color:#fff}

/* 2026-09-22 配膜台搭配規則:鑄造印刷膜只搭鑄造護貝膜(其餘籤停用),高分子任意搭配 */
.chip[disabled]{opacity:.34;cursor:not-allowed;filter:grayscale(.7)}
.chip[disabled]:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.04);transform:none}
.chip[disabled] img{opacity:.7}
.lab-rule{margin:12px 0 0;font-size:14px;line-height:1.6;color:#D9D6D0;padding-left:12px;border-left:2px solid var(--red)}
.lab-rule b{color:#fff;font-weight:700}
@media (max-width:720px){ .lab-rule{font-size:15px} }

/* 2026-09-22 鑄造組合(CSG010 + CSG000)兩邊籤改黃色,與紅色的高分子組合區別 */
.lab{--yel:#FFC72C}
.lab.is-cast .chip.on{border-color:var(--yel);background:rgba(255,199,44,.13)}
.lab.is-cast .chip.on::before{background:var(--yel)}
.lab.is-cast .chip.on .t b{color:var(--yel)}
.lab.is-cast .lab-rule{border-left-color:var(--yel)}
.lab.is-cast .lab-rule b{color:var(--yel)}

/* 2026-09-22 配膜台分組:鑄造(黃)/ 高分子(紅),組頭常駐,不必選中才看得出材質 */
.chip-groups{display:grid;gap:14px}
.cgrp .cg-h{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#B5B5B5}
.cgrp .cg-h b{display:inline-flex;align-items:center;gap:7px;font:700 12.5px/1 var(--mono);letter-spacing:.16em;color:#fff}
.cgrp .cg-h b::before{content:"";width:10px;height:10px;background:var(--cg)}
.cgrp .cg-h em{font-style:normal;margin-left:auto;color:var(--cg);letter-spacing:.1em}
.cgrp-cast{--cg:#FFC72C}
.cgrp-poly{--cg:#F5343C}
.cgrp .chip{border-left:3px solid var(--cg)}
.cgrp .chip.on::before{background:var(--cg)}
.cgrp-cast .chip.on{border-color:#FFC72C;background:rgba(255,199,44,.13)}
.cgrp-cast .chip.on .t b{color:#FFC72C}
.cgrp.off .cg-h{opacity:.4}
.cgrp.off .chip{border-left-color:rgba(255,255,255,.22)}
html[lang^="zh"] .cgrp .cg-h,html[lang^="zh"] .cgrp .cg-h b{letter-spacing:.08em}
@media (max-width:720px){ .cgrp .cg-h{font-size:12.5px} .cgrp .cg-h b{font-size:13.5px} }

/* 2026-09-22 材質字接在 SKU 後面同一行(B 位置);選中的兩張(底膜 + 護貝膜)同時顯示,滑過的那張也顯示 */
.cgrp .chip .t b{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:3px;white-space:normal;overflow:visible}
.chip .mt{display:none;font:700 11px/1.2 var(--mono);font-style:normal;letter-spacing:.14em;color:#FFC72C}
.cgrp-poly .chip .mt{color:#F5343C}
.chip.on .mt{display:inline}
@media (hover:hover){ .chip:hover .mt,.chip:focus-visible .mt{display:inline} }
@media (max-width:720px){ .cgrp .cg-h{flex-wrap:wrap;row-gap:6px} .cgrp .cg-h span,.cgrp .cg-h em{white-space:nowrap} }

/* ==========================================================================
   ROUND 2 — polish & motion (2026-09-24, same pass as /3600-reflective/). Pointer effects are desktop-only;
   everything collapses to a static state under prefers-reduced-motion.
   ========================================================================== */

/* ---------- hero: Delution sheen sweep on load, line-by-line title, cursor gloss, parallax, staged entrance ---------- */
.hero-sheen{position:absolute;inset:-20% -40%;pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:0;transform:translateX(-60%) skewX(-14deg);
  background:linear-gradient(90deg,transparent 40%,rgba(47,107,255,.28) 46%,rgba(255,255,255,.42) 50%,rgba(138,63,255,.28) 54%,rgba(224,162,27,.18) 57%,transparent 62%)}
.hero.ready .hero-sheen{animation:hsheen 2s var(--ease) .35s both}
@keyframes hsheen{0%{opacity:0;transform:translateX(-60%) skewX(-14deg)}12%{opacity:1}100%{opacity:0;transform:translateX(60%) skewX(-14deg)}}
.hero-spot{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s;mix-blend-mode:screen;
  background:radial-gradient(circle clamp(180px,22vw,320px) at var(--sx,70%) var(--sy,50%),rgba(255,255,255,.26),rgba(200,215,255,.08) 55%,transparent 72%)}
.hero.lit .hero-spot{opacity:1}
.hero-img{translate:calc(var(--mx,0) * -16px) calc(var(--my,0) * -10px);transition:opacity 1.4s var(--ease),transform 2.2s var(--ease),translate .8s var(--ease)}
.hero-ghost{translate:calc(var(--mx,0) * 26px) calc(var(--my,0) * 14px);transition:translate 1s var(--ease)}
.hero h1 span{overflow:hidden;padding:.02em .08em .06em 0;margin-right:-.08em}
.hero h1 .wd{display:inline-block;font-style:inherit;transform:translateY(112%);opacity:0}
.hero h1 .l2 .wd{color:transparent;background:linear-gradient(90deg,#fff 0%,#fff 55%,var(--red-t) 100%);-webkit-background-clip:text;background-clip:text}
.hero.ready h1 .wd{animation:wdIn .95s var(--ease) both;animation-delay:calc(.3s + var(--d) * .18s)}
@keyframes wdIn{from{transform:translateY(112%);opacity:0}to{transform:none;opacity:1}}
.hero-stats li{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.hero.ready .hero-stats li{opacity:1;transform:none}
.hero.ready .hero-stats li:nth-child(1){transition-delay:.9s}.hero.ready .hero-stats li:nth-child(2){transition-delay:1s}.hero.ready .hero-stats li:nth-child(3){transition-delay:1.1s}.hero.ready .hero-stats li:nth-child(4){transition-delay:1.2s}
.hero-eb,.hero-plate,.hero-sub,.hero-scope,.hero-cta{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.hero.ready .hero-eb,.hero.ready .hero-plate,.hero.ready .hero-sub,.hero.ready .hero-scope,.hero.ready .hero-cta{opacity:1;transform:none}
.hero.ready .hero-eb{transition-delay:.15s}.hero.ready .hero-plate{transition-delay:.25s}.hero.ready .hero-sub{transition-delay:.85s}.hero.ready .hero-scope{transition-delay:.95s}.hero.ready .hero-cta{transition-delay:1.05s}

/* ---------- buttons: light sweep ---------- */
.btn-red{position:relative;overflow:hidden}
.btn-red::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-45%;width:34%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .55s var(--ease);pointer-events:none}
.btn-red:hover::before{left:125%}

/* ---------- chapter heads: number slides in, red rule grows under the title ---------- */
.chap .no{transition:opacity .7s var(--ease),transform .8s var(--ease)}
.chap.rv:not(.on) .no{opacity:0;transform:translateX(-28px)}
.chap h2::after{content:"";display:block;width:64px;height:4px;background:var(--red);margin-top:10px;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .35s}
.chap.on h2::after{transform:none}
.chap p{margin-top:12px}

/* ---------- section edges: paper cuts into carbon on a diagonal ---------- */
.lab::after,.tip::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:clamp(26px,4vw,64px);background:var(--paper);clip-path:polygon(0 0,100% 0,100% 100%);pointer-events:none;z-index:2}

/* ---------- 01: the stack breathes while idle, each face carries a moving sheen, steps stagger ---------- */
.stack-scene{animation:stackFloat 7s ease-in-out infinite}
@keyframes stackFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.layer .face{overflow:hidden}
.layer .face::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);transform:translateX(-60%);animation:faceSheen 6s var(--ease) infinite;pointer-events:none}
.l-lam .face::after{animation-delay:.6s}.l-film .face::after{animation-delay:1.2s}.l-liner .face::after{animation-delay:1.8s}
@keyframes faceSheen{0%,55%{transform:translateX(-60%)}85%,100%{transform:translateX(60%)}}
.step h3{transition:transform .5s var(--ease)}
.step.on h3{transform:translateX(4px)}
.step .facts i{transition:transform .25s var(--ease),background .25s,color .25s}
.step .facts i:hover{transform:translateY(-2px);background:var(--carbon);color:#fff}

/* ---------- 02: chip ping, preview state, readout tick ---------- */
.chip.on::after{content:"";position:absolute;inset:-1px;border:2px solid var(--cg,var(--red));animation:ping .9s var(--ease) both;pointer-events:none}
@keyframes ping{from{transform:scale(1);opacity:1}to{transform:scale(1.18);opacity:0}}
.chip img{transition:transform .25s var(--ease)}
.chip:hover img{transform:scale(1.08)}
.pv.peek{outline:1px dashed rgba(255,255,255,.45);outline-offset:-1px}
.pv-corner{transition:border-color .3s}
.pv.peek .pv-corner{border-color:transparent #fff transparent transparent}
.readout .v.tick{animation:tick .45s var(--ease)}
@keyframes tick{0%{opacity:.2;transform:translateY(5px)}100%{opacity:1;transform:none}}

/* ---------- 03: pointer parallax + headlight sweep on effect tiles, stagger ---------- */
.fx-tile img{transform:scale(1.08) translate(calc(var(--ix,0) * -14px),calc(var(--iy,0) * -10px));transition:transform .6s var(--ease)}
.fx-tile:hover img{transform:scale(1.1) translate(calc(var(--ix,0) * -14px),calc(var(--iy,0) * -10px))}
.fx-tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.2) 50%,transparent 58%);transform:translateX(-130%)}
.fx-tile:hover::after{animation:sweep 1.1s var(--ease)}
@keyframes sweep{to{transform:translateX(130%)}}
.fx-tile{transition:opacity .7s var(--ease),transform .9s var(--ease)}
.fx-grid .fx-tile:nth-child(2){transition-delay:.1s}.fx-grid .fx-tile:nth-child(3){transition-delay:.18s}.fx-grid .fx-tile:nth-child(4){transition-delay:.26s}.fx-grid .fx-tile:nth-child(5){transition-delay:.34s}
.fx-real img{transition:transform .3s var(--ease)}
.fx-tile:hover .fx-real img{transform:translateY(-3px)}

/* ---------- 04: cards stagger, rows light up ---------- */
.who-card{transition:opacity .7s var(--ease),transform .9s var(--ease),box-shadow .3s}
.ledger .who-card:nth-child(2){transition-delay:.12s}.ledger .who-card:nth-child(3){transition-delay:.24s}
.who-card:hover{box-shadow:0 18px 40px rgba(0,0,0,.12)}
.who-row{transition:background .25s}
.who-row:hover{background:#FBF9F5}
.who-row .x{transition:transform .25s var(--ease)}
.who-row:hover .x.ok{transform:translateX(3px)}

/* ---------- 05: rows stagger in, thumbnail sweep, hover lift ---------- */
.grp:not(.on) .row{opacity:0}
.grp.on .row{animation:rowIn .6s var(--ease) backwards}
.rows .row:nth-child(1){animation-delay:.05s}.rows .row:nth-child(2){animation-delay:.11s}.rows .row:nth-child(3){animation-delay:.17s}.rows .row:nth-child(4){animation-delay:.23s}.rows .row:nth-child(5){animation-delay:.29s}.rows .row:nth-child(6){animation-delay:.35s}
@keyframes rowIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.row .row-img{position:relative;overflow:hidden}
.row .row-img::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%);transform:translateX(-130%);pointer-events:none}
.row:hover .row-img::after{animation:sweep .9s var(--ease)}
.row .ty i{transition:transform .25s var(--ease)}
.row:hover .ty i:first-child{transform:translateX(3px)}
.compat li{transition:transform .3s var(--ease),color .3s}
.compat li:hover{transform:translateX(4px);color:var(--red-ink)}

/* ---------- 06: timeline steps ---------- */
.tl li{transition:opacity .6s var(--ease),transform .7s var(--ease)}
.tl li .st{transition:transform .3s var(--ease)}
.tl li:hover .st{transform:scale(1.12)}
.tip-img img{transition:transform 8s var(--ease)}
.tip:hover .tip-img img{transform:scale(1.05)}

/* ---------- CTA ---------- */
.cta-box{transition:opacity .7s var(--ease),transform .9s var(--ease)}
.cta-box .ghost{transition:transform 1.2s var(--ease)}
.cta-box:hover .ghost{transform:translateX(12px)}

/* ---------- reduced motion: everything static ---------- */
@media(prefers-reduced-motion:reduce){
  .hero-sheen,.hero.ready .hero-sheen{animation:none;opacity:0}
  .hero h1 .wd,.hero.ready h1 .wd{animation:none;transform:none;opacity:1}
  .hero-stats li,.hero-eb,.hero-plate,.hero-sub,.hero-scope,.hero-cta{transition:none;opacity:1;transform:none}
  .hero-img,.hero-ghost{translate:0 0}
  .stack-scene,.layer .face::after{animation:none}
  .grp:not(.on) .row{opacity:1}.grp.on .row{animation:none}
  .chap.rv:not(.on) .no{opacity:1;transform:none}
  .fx-tile::after,.row .row-img::after,.btn-red::before{display:none}
}
@media(max-width:820px){
  .hero h1 span{padding-right:0;margin-right:0}
  .lab::after,.tip::before{height:22px}
  .stack-scene{animation:none}
}

/* ==========================================================================
   ROUND 3 — /xtreme/ + /ppf/ motion vocabulary (2026-09-24): hero lines rise 70px with a -4° skew (.85s, 0.11s apart),
   hero drifts on scroll, progress bar = red gradient + glow. The whole-page scroll reveal itself is injected by app.js.
   ========================================================================== */
@keyframes rise{from{opacity:0;transform:translateY(70px) skewX(-4deg)}to{opacity:1;transform:none}}
@keyframes wdIn{from{opacity:0;transform:translateY(70px) skewX(-4deg)}to{opacity:1;transform:none}}
.hero h1 span{overflow:visible;padding:0;margin-right:0}
.hero.ready .hero-eb,.hero.ready .hero-plate,.hero.ready .hero-sub,.hero.ready .hero-scope,.hero.ready .hero-cta{transition:none;animation:rise .85s cubic-bezier(.16,1,.3,1) both}
.hero.ready .hero-eb{animation-delay:.06s}.hero.ready .hero-plate{animation-delay:.17s}
.hero.ready h1 .wd{animation:wdIn .85s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.28s + var(--d) * .11s)}
.hero.ready h1 .l2 .wd{animation-delay:calc(.39s + var(--d) * .11s)}
.hero.ready .hero-sub{animation-delay:.61s}.hero.ready .hero-scope{animation-delay:.72s}.hero.ready .hero-cta{animation-delay:.83s}
.hero-body{will-change:transform,opacity}
.hero-img{translate:calc(var(--mx,0) * -16px) calc(var(--my,0) * -10px + var(--scy,0px))}
.prog{background:rgba(255,255,255,.06)}
.prog i{background:linear-gradient(90deg,#E32027,#ff5a60);box-shadow:0 0 12px rgba(227,32,39,.6)}
@media(prefers-reduced-motion:reduce){
  .hero.ready .hero-eb,.hero.ready .hero-plate,.hero.ready .hero-sub,.hero.ready .hero-scope,.hero.ready .hero-cta,.hero.ready h1 .wd{animation:none;opacity:1;transform:none}
}

/* ---------- SKU click → the series page's own modal, embedded in place (2026-09-24) ---------- */
.skx{position:fixed;inset:0;z-index:9500;background:rgba(6,6,8,.55);display:flex;align-items:center;justify-content:center}
.skx.on{background:transparent}
.skx iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;opacity:0;transition:opacity .35s}
.skx.on iframe{opacity:1}
.skx-load{font:600 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:12px}
.skx-load i{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--red);border-radius:50%;animation:skxspin .8s linear infinite}
.skx.on .skx-load{display:none}
@keyframes skxspin{to{transform:rotate(360deg)}}