/* ThinkWay — main.css
   色彩/字体/版式见 docs/03-风格与前端效果.md。数值为草案。 */

/* ---------- fonts（自托管，Geist 可变字重） ---------- */
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../assets/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --blue:#007DFF;
  --bg-dark:#0B0B0C; --bg-dark2:#141416; --bg-dark3:#1C1C1F;
  --bg-light:#F4F2EE; --bg-light2:#ECE9E3;
  --ink:#111111; --paper:#ECEAE4; --dim:#8A8884;
  --font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Noto Sans CJK SC","Noto Sans",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC","Hiragino Sans","Apple SD Gothic Neo",monospace;
  --wrap:1440px; --gut:clamp(20px,4vw,64px);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:144px; --s8:200px;
  --r:18px; --r-sm:10px;
  --ease:cubic-bezier(.2,.7,.2,1); --t:.7s;
  --nav-h:72px;
  color-scheme:dark;
}
/* theme per section */
.dark{--bg:var(--bg-dark);--bg2:var(--bg-dark2);--fg:var(--paper);--fg-dim:var(--dim);--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.18);--ph-bg:var(--bg-dark2);--ph-grid:rgba(255,255,255,.045);--ph-ink:rgba(236,234,228,.42)}
.light{--bg:var(--bg-light);--bg2:var(--bg-light2);--fg:var(--ink);--fg-dim:#6E6C68;--line:rgba(0,0,0,.09);--line-2:rgba(0,0,0,.18);--ph-bg:var(--bg-light2);--ph-grid:rgba(0,0,0,.05);--ph-ink:rgba(17,17,17,.38)}
.light.alt{--bg:var(--bg-light2);--bg2:var(--bg-light)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--bg-dark);color:var(--paper);font-family:var(--font);font-size:17px;line-height:1.55;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,blockquote,figure{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

section{background:var(--bg);color:var(--fg);position:relative}
.section{padding-block:clamp(96px,12vw,200px)}
.wrap{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto}
.wrap.narrow{max-width:800px}
.wrap.center{text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,112px);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---------- type ---------- */
.h1{font-weight:500;font-size:clamp(40px,7vw,112px);line-height:.98;letter-spacing:-.03em;text-wrap:balance;max-width:14ch}
.h2{font-weight:500;font-size:clamp(30px,4.2vw,60px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance;max-width:22ch}
.h3{font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-.015em}
h3{font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.25;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:var(--fg);max-width:52ch;font-weight:300}
.sub{font-size:clamp(17px,1.5vw,22px);line-height:1.45;max-width:46ch;font-weight:300;color:var(--fg)}
.small{font-size:13px;line-height:1.5;color:var(--fg-dim);max-width:60ch}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.dim{color:var(--fg-dim)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--fg-dim);margin-bottom:var(--s3)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue)}
.num{color:var(--fg-dim)}
:lang(zh) .h1,:lang(ja) .h1,:lang(ko) .h1{letter-spacing:0;line-height:1.18;font-weight:600;font-size:clamp(34px,5.6vw,88px)}
:lang(zh) .h2,:lang(ja) .h2,:lang(ko) .h2{letter-spacing:0;line-height:1.25;font-weight:600;font-size:clamp(26px,3.6vw,52px)}
:lang(zh) h3,:lang(ja) h3,:lang(ko) h3{letter-spacing:0}
:lang(zh) body,:lang(zh) .lead,:lang(zh) .sub{letter-spacing:0;line-height:1.7}
:lang(de) .h1{hyphens:auto;font-size:clamp(36px,6vw,96px)}

/* ---------- links & buttons ---------- */
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;margin-top:var(--s4);position:relative;padding-bottom:3px}
.link-arrow::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform-origin:left;transition:transform .5s var(--ease)}
.link-arrow:hover::after{transform:scaleX(.3)}
.link-arrow i{width:14px;height:14px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg) scale(.7);transition:transform .5s var(--ease)}
.link-arrow:hover i{transform:rotate(45deg) scale(.7) translate(3px,-3px)}
.btn{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 20px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;border:1px solid var(--line-2);color:var(--fg);transition:border-color .4s,background .4s,color .4s,transform .4s var(--ease);white-space:nowrap;position:relative}
.btn-lg{height:56px;padding:0 28px;font-size:13px}
.btn:hover{border-color:currentColor}
.btn .led,.led{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 rgba(0,125,255,.6);flex:none;transition:box-shadow .4s}
.btn:hover .led{box-shadow:0 0 14px 2px rgba(0,125,255,.7)}
.btn-solid{background:var(--fg);color:var(--bg);border-color:transparent}
.btn-solid:hover{background:var(--fg)}
.btn-ghost em{font-style:normal;color:var(--fg-dim);margin-left:4px}
.btn-cta{color:var(--paper);border-color:rgba(255,255,255,.22)}
.nav[data-theme="light"] .btn-cta{color:var(--ink);border-color:rgba(0,0,0,.2)}

/* ---------- intro / grain ---------- */
#intro{position:fixed;inset:0;z-index:100;background:var(--bg-dark);display:grid;place-items:center;pointer-events:none;animation:introOut .9s var(--ease) 2.3s forwards}
#intro .dot{width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 30px 4px rgba(0,125,255,.65);animation:breathe 1.3s ease-in-out infinite}
#intro.done{animation:introOut .9s var(--ease) forwards}
html.no-intro #intro{display:none}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.light .grain{opacity:.03}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--nav-h);transition:transform .6s var(--ease),background .5s,backdrop-filter .5s;color:var(--paper)}
.nav[data-theme="light"]{color:var(--ink)}
.nav.scrolled{background:rgba(11,11,12,.55);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
.nav.scrolled[data-theme="light"]{background:rgba(244,242,238,.6)}
.nav.hidden{transform:translateY(-100%)}
.nav-in{height:100%;width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.logo img{height:26px;width:auto}
.logo .logo-light{display:none}
.nav[data-theme="light"] .logo-dark{display:none}
.nav[data-theme="light"] .logo-light{display:block}
.nav-links{display:flex;gap:clamp(20px,3vw,44px);font-size:14px;font-weight:500;letter-spacing:.01em}
.nav-links a{position:relative;padding:6px 0;opacity:.85;transition:opacity .3s}
.nav-links a:hover,.nav-links a[aria-current]{opacity:1}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:14px}
.lang{position:relative}
.lang-btn{height:36px;padding:0 12px;border-radius:999px;border:1px solid transparent;font-family:var(--mono);font-size:12px;letter-spacing:.12em;display:flex;align-items:center;gap:8px;transition:border-color .3s}
.lang-btn::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.lang-btn:hover,.lang.open .lang-btn{border-color:var(--line-2)}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:160px;background:var(--bg-dark2);color:var(--paper);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:6px;display:none;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.lang.open .lang-menu{display:block}
.lang-menu a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;font-size:14px}
.lang-menu a:hover{background:rgba(255,255,255,.06)}
.lang-menu a[aria-selected]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.nav.menu-open .burger span:first-child{top:21px;transform:rotate(45deg)}
.nav.menu-open .burger span:last-child{top:21px;transform:rotate(-45deg)}
.mobile-menu{display:none}
@media (max-width:900px){
  .nav-links,.nav-right .lang,.nav-right .btn-cta{display:none}
  .burger{display:block}
  .mobile-menu{position:fixed;inset:var(--nav-h) 0 0 0;background:var(--bg-dark);color:var(--paper);padding:var(--s4) var(--gut);display:flex;flex-direction:column;gap:var(--s3);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .4s,transform .5s var(--ease)}
  .nav.menu-open{background:var(--bg-dark);color:var(--paper)}
  .nav.menu-open .logo-light{display:none}.nav.menu-open .logo-dark{display:block}
  .nav.menu-open .mobile-menu{opacity:1;transform:none;pointer-events:auto}
  .mobile-menu>a{font-size:32px;font-weight:500;letter-spacing:-.02em;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .mobile-langs{margin-top:auto;display:flex;gap:18px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding-bottom:env(safe-area-inset-bottom)}
  .mobile-langs a{opacity:.5}.mobile-langs a[aria-current]{opacity:1}
}

/* ---------- placeholders ---------- */
.ph{position:relative;width:100%;border-radius:var(--r);overflow:hidden;background:var(--ph-bg);color:var(--ph-ink);background-image:linear-gradient(var(--ph-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ph-grid) 1px,transparent 1px);background-size:40px 40px;isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 45%,rgba(0,125,255,.08),transparent 70%)}
.ph-case{position:absolute;left:50%;top:50%;height:42%;width:auto;transform:translate(-50%,-50%)}
.ph-led{animation:breathe 2.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.ph-tag{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:8px;color:var(--ph-ink)}
.ph-tag i{width:5px;height:5px;border-radius:50%;background:var(--blue)}
.ph--scene{background-image:none;background:radial-gradient(90% 70% at 30% 70%,#1A2230 0%,transparent 60%),radial-gradient(70% 60% at 75% 25%,#20242B 0%,transparent 60%),var(--bg-dark2)}
.ph--scene::before{background:linear-gradient(120deg,transparent 30%,rgba(0,125,255,.07) 50%,transparent 70%);background-size:300% 100%;animation:fog 14s linear infinite}
@keyframes fog{from{background-position:100% 0}to{background-position:-100% 0}}
.media{width:100%;height:auto;object-fit:cover;border-radius:var(--r);background:var(--bg2)}

/* ---------- reveal / split ---------- */
html.js:not(.static) .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s var(--ease)}
html.js:not(.static) .reveal.in{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
html.js:not(.static) .split .w>span{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 55ms)}
html.js:not(.static) .split.in .w>span{transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.split .w>span{opacity:1;transform:none;transition:none}
  #intro{display:none}.ph--scene::before,.ph-led,.kenburns .ph,.kenburns .media,.scroll-cue i{animation:none}
}

/* ---------- hero：整屏视频 ---------- */
.hero{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:var(--bg-dark);color:var(--paper)}
.hero-media{position:absolute;inset:0;overflow:hidden;background:var(--bg-dark)}
.hero-media .ph,.hero-media .media,.hero-video{position:absolute;inset:0;width:100%;height:100%;border-radius:0;aspect-ratio:auto!important;object-fit:cover;object-position:center}
.hero-video{opacity:0;transition:opacity 1.2s ease}
.hero-video.ready,html.static .hero-video{opacity:1}
.hero-media .ph-tag{left:auto;right:var(--gut);bottom:auto;top:calc(var(--nav-h) + 18px)}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.42) 34%,rgba(11,11,12,0) 64%),
  linear-gradient(180deg,rgba(11,11,12,.5) 0%,rgba(11,11,12,0) 28%,rgba(11,11,12,0) 70%,rgba(11,11,12,.55) 100%)}
.hero-text{position:relative;padding-top:calc(var(--nav-h) + 6vh);padding-bottom:clamp(96px,14vh,160px);text-shadow:0 2px 28px rgba(0,0,0,.35)}
.hero-h1{font-size:clamp(42px,6.2vw,104px);max-width:12ch}
:lang(zh) .hero-h1{font-size:clamp(36px,5.6vw,92px)}
.hero .sub{margin-top:var(--s3);color:rgba(236,234,228,.86);max-width:38ch}
.hero-actions{margin-top:var(--s4)}
.hero .btn-cta{text-shadow:none;background:rgba(11,11,12,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(255,255,255,.35)}
.hero .btn-cta:hover{background:rgba(236,234,228,.96);color:var(--ink);border-color:transparent}
.scroll-cue{position:absolute;left:50%;bottom:-26px;width:52px;height:52px;margin-left:-26px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .5s var(--ease),background .4s}
.scroll-cue i{width:12px;height:12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);animation:cue 2s var(--ease) infinite}
.scroll-cue:hover{transform:translateY(3px)}
@keyframes cue{0%,100%{translate:0 -2px;opacity:.55}50%{translate:0 2px;opacity:1}}
@media (min-width:1024px){.hero-media .hero-video{width:120%;max-width:none;height:120%;left:0;top:-10%}}
@media (max-width:720px){.hero-text{padding-bottom:clamp(110px,18vh,170px)}.hero .sub{font-size:16px}.scroll-cue{width:46px;height:46px;margin-left:-23px;bottom:-23px}}

/* ---------- sequence (scroll-driven canvas) ---------- */
.sequence{height:320vh;background:var(--bg-dark)}
.seq-pin{position:sticky;top:0;height:100svh;overflow:hidden}
#seq-canvas{position:absolute;inset:0;width:100%;height:100%}
.seq-ui{position:absolute;inset:0;pointer-events:none}
.seq-ui .eyebrow{position:absolute;top:calc(var(--nav-h) + 28px);left:var(--gut)}
.seq-lines{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);width:min(44vw,560px)}
.seq-line{position:absolute;left:0;top:0;transform:translateY(-50%);font-size:clamp(30px,3.8vw,56px);font-weight:500;letter-spacing:-.025em;line-height:1.05;opacity:0;transition:opacity .5s,transform .7s var(--ease);translate:0 14px}
.seq-line.on{opacity:1;translate:0 0}
.seq-timer{position:absolute;right:var(--gut);bottom:40px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;color:var(--dim)}
.seq-timer #seq-time{font-size:clamp(28px,4vw,56px);letter-spacing:.02em;color:var(--paper);font-variant-numeric:tabular-nums;transition:color .3s}
.seq-timer.live #seq-time{color:var(--blue)}
@media (max-width:900px){.seq-lines{width:70vw;top:auto;bottom:120px;transform:none}.seq-line{transform:none;top:auto;bottom:0}.seq-timer{bottom:36px}}

/* ---------- colours ---------- */
.colours{padding-top:clamp(96px,12vw,200px);padding-bottom:clamp(64px,8vw,120px)}
.colours .hint{margin:var(--s2) 0 var(--s5);color:var(--fg-dim)}
.panels{display:flex;gap:10px;height:min(82vh,860px);min-height:520px;padding-inline:var(--gut)}
.panel{position:relative;flex:1;overflow:hidden;border-radius:var(--r);transition:flex .8s var(--ease);cursor:pointer;background:var(--bg2);outline-offset:4px}
.panel:hover,.panel:focus-visible,.panel.active{flex:1.9}
.panel-still,.panel-scene{position:absolute;inset:0}
.panel-still .ph,.panel-still .media,.panel-scene .ph,.panel-scene .media{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important;border-radius:0}
.panel-scene{opacity:0;transition:opacity .8s ease}
.panel-scene .media{object-fit:cover;object-position:50% 50%;background:transparent}
.panel:hover .panel-scene,.panel:focus-visible .panel-scene,.panel.active .panel-scene{opacity:1}
/* 真图（抠底 PNG/WebP）：留边、居中、投影；没有场景视频时悬停只轻微放大 */
.panel-still img.media{object-fit:contain;background:transparent;padding:8% 12% 18%;filter:drop-shadow(0 28px 36px rgba(0,0,0,.32));transition:transform 1s var(--ease)}
.panel--sand .panel-cap{color:var(--ink);background:linear-gradient(180deg,transparent,rgba(230,223,211,.92))}
.panel--grey .panel-cap{background:linear-gradient(180deg,transparent,rgba(40,42,46,.55))}
.panel:hover .panel-still img.media,.panel:focus-visible .panel-still img.media,.panel.active .panel-still img.media{transform:scale(1.04)}
.panel--black{background:#15161A}.panel--grey{background:#A9ABAF}.panel--sand{background:#E6DFD3}
.panel--black .ph{--ph-bg:#15161A;--ph-grid:rgba(255,255,255,.05);--ph-ink:rgba(236,234,228,.4)}
.panel--grey .ph{--ph-bg:#A9ABAF;--ph-grid:rgba(0,0,0,.06);--ph-ink:rgba(17,17,17,.45)}
.panel--sand .ph{--ph-bg:#E6DFD3;--ph-grid:rgba(0,0,0,.05);--ph-ink:rgba(17,17,17,.4)}
.panel-cap{position:absolute;left:0;right:0;bottom:0;padding:28px;color:var(--paper);background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));display:grid;gap:6px}
.panel-cap h3{font-size:clamp(20px,1.8vw,26px)}
.panel-cap p{font-size:15px;opacity:0;transform:translateY(8px);transition:opacity .6s .15s,transform .6s .15s var(--ease);max-width:30ch}
.panel:hover .panel-cap p,.panel:focus-visible .panel-cap p,.panel.active .panel-cap p{opacity:.9;transform:none}
@media (max-width:900px){
  .panels{flex-direction:column;height:auto;min-height:0}
  .panel{flex:none;height:40vh;min-height:260px;transition:height .7s var(--ease)}
  .panel-still img.media{padding:6% 10% 30%}
  .panel.active{height:62vh}
  .panel:hover{flex:none}
}

/* ---------- proof ---------- */
.proof .trip{margin:var(--s4) 0 var(--s3);color:var(--fg-dim)}
.inventory{display:grid;gap:10px;margin-bottom:var(--s4)}
.inv{display:flex;align-items:center;gap:14px;font-size:17px;transition:opacity .6s,transform .6s var(--ease);transition-delay:var(--d)}
.inv i{width:8px;height:8px;border-radius:50%;border:1px solid var(--fg-dim);transition:background .4s,border-color .4s,box-shadow .4s;transition-delay:var(--d)}
html.js:not(.static) .inv{opacity:.35;transform:translateX(-6px)}
html.js:not(.static) .inventory.in .inv{opacity:1;transform:none}
html.static .inv i{background:var(--blue);border-color:var(--blue)}
.inventory.in .inv i{background:var(--blue);border-color:var(--blue);box-shadow:0 0 10px rgba(0,125,255,.6)}
.proof .result{font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:-.015em}
.compare{position:relative;border-radius:var(--r);overflow:hidden;--pos:50%;user-select:none;touch-action:pan-y}
.compare .ph,.compare .media{border-radius:0}
.cmp-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-before .ph{--ph-bg:#DCD6CB}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:1px;background:rgba(255,255,255,.9);transform:translateX(-.5px);cursor:ew-resize}
.cmp-handle span{position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);background:rgba(11,11,12,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5);display:grid;place-items:center}
.cmp-handle span::before,.cmp-handle span::after{content:"";position:absolute;top:50%;width:6px;height:6px;border-top:1.5px solid #fff;border-left:1.5px solid #fff}
.cmp-handle span::before{left:12px;transform:translateY(-50%) rotate(-45deg)}
.cmp-handle span::after{right:12px;transform:translateY(-50%) rotate(135deg)}
.cmp-tag{position:absolute;top:14px;padding:6px 10px;border-radius:999px;background:rgba(11,11,12,.55);color:var(--paper);backdrop-filter:blur(8px)}
.cmp-tag--b{left:14px}.cmp-tag--a{right:14px}
.stat{display:flex;align-items:baseline;gap:18px;margin-top:var(--s4);flex-wrap:wrap}
.stat-num{font-size:clamp(56px,7vw,104px);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat-num b{font-weight:500}
.stat-cap{font-size:14px;color:var(--fg-dim);max-width:26ch;line-height:1.4}
.proof .small{margin-top:var(--s2)}

/* ---------- steps (horizontal, pinned) ---------- */
.steps{height:calc(100svh + var(--track,2400px));color:var(--paper)}
.steps-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:var(--s5)}
.steps-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.steps-progress{flex:1;max-width:320px;height:1px;background:var(--line);position:relative;margin-bottom:14px}
.steps-progress i{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--blue);border-radius:2px;box-shadow:0 0 10px rgba(0,125,255,.7)}
.steps-track{display:flex;gap:clamp(20px,2.5vw,40px);padding-left:max(var(--gut),(100vw - var(--wrap))/2);padding-right:var(--gut);will-change:transform}
.step{flex:none;width:min(360px,78vw)}
.step-media{margin-bottom:var(--s3)}
.step .num{display:block;margin-bottom:10px}
.step p{color:var(--dim);margin-top:8px;font-size:15px}
.step--two{display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--line);padding-left:var(--s4);width:min(420px,78vw)}
.step--two h3{font-size:clamp(24px,2.4vw,34px);margin-bottom:12px}
.step--two p{font-size:17px}
@media (max-width:900px){
  .steps{height:auto;padding-block:var(--s6)}
  .steps-pin{position:static;height:auto;overflow:visible;gap:var(--s4)}
  .steps-head{flex-direction:column;align-items:flex-start}
  .steps-progress{display:none}
  .steps-track{flex-direction:column;padding-inline:var(--gut);transform:none!important;gap:var(--s5)}
  .step{width:100%}
  .step--two{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:var(--s4)}
}

/* ---------- details bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(170px,20vw,300px);gap:12px;margin-top:var(--s5)}
.cell{position:relative;overflow:hidden;border-radius:var(--r);background:var(--bg2)}
.cell>.ph,.cell>.media{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important;transition:transform 1.2s var(--ease)}
.cell:hover>.ph,.cell:hover>.media{transform:scale(1.04)}
.cell--shell{grid-column:span 4;grid-row:span 2}
.cell--wheels{grid-column:span 2;grid-row:span 2}
.cell--handle,.cell--battery,.cell--lock{grid-column:span 2}
.cell--zipper{grid-column:span 6}
.cell-cap{position:absolute;left:0;right:0;bottom:0;padding:22px;color:var(--paper);background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}
.cell-cap p{font-size:14px;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s var(--ease);max-width:36ch;margin-top:4px}
.cell:hover .cell-cap p{opacity:.9;transform:none}
@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(150px,42vw)}
  .cell{grid-column:span 1!important;grid-row:span 1!important}
  .cell--shell,.cell--zipper{grid-column:span 2!important}
  .cell-cap p{opacity:.9;transform:none;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cell .ph-tag{display:none}
  .cell-cap{padding:16px}
}
.spec-line{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:var(--s5)}
.spec-chip{display:flex;align-items:baseline;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;font-size:15px;flex-wrap:wrap}
.spec-chip .size{color:var(--fg)}
.spec-line .link-arrow{margin:0 0 0 auto}

/* ---------- engineer ---------- */
.eng-media{display:grid;gap:12px}
.eng-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.engineer blockquote,.story blockquote,#david blockquote{margin:var(--s4) 0}
blockquote p{font-size:clamp(20px,2vw,28px);font-weight:300;line-height:1.35;letter-spacing:-.01em;max-width:36ch}
blockquote cite{display:block;margin-top:14px;font-style:normal;color:var(--fg-dim)}
.decisions{border-top:1px solid var(--line)}
.decision{border-bottom:1px solid var(--line)}
.decision summary{list-style:none;display:flex;align-items:center;gap:18px;padding:18px 0;cursor:pointer;font-size:clamp(16px,1.3vw,19px);font-weight:500}
.decision summary::-webkit-details-marker{display:none}
.decision summary i{margin-left:auto;width:14px;height:14px;position:relative;flex:none}
.decision summary i::before,.decision summary i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transition:transform .5s var(--ease)}
.decision summary i::after{transform:rotate(90deg)}
.decision[open] summary i::after{transform:rotate(0)}
.decision p{padding:0 0 20px 44px;color:var(--fg-dim);max-width:46ch}

/* ---------- journey ---------- */
.journey{min-height:92svh;display:grid;place-items:center;overflow:hidden;text-align:center}
.journey-media{position:absolute;inset:0}
.journey-media .ph,.journey-media .media{position:absolute;inset:0;width:100%;height:100%;border-radius:0;aspect-ratio:auto!important}
.kenburns .ph,.kenburns .media,.journey-media .ph,.journey-media .media{animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.journey-veil{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,rgba(11,11,12,.2),rgba(11,11,12,.85))}
.journey-text{position:relative;display:grid;justify-items:center;gap:var(--s3);padding-block:var(--s7)}
.journey-text .h1{max-width:18ch;margin-inline:auto}
.journey-text .btn{margin-top:var(--s2)}

/* ---------- notify ---------- */
.notify{text-align:center;border-top:1px solid var(--line)}
.notify .wrap{display:grid;justify-items:center;gap:var(--s3)}
.notify .h2{margin-inline:auto}
.email{display:flex;gap:10px;width:min(520px,100%);margin-top:var(--s2)}
.email input{flex:1;height:52px;background:transparent;border:0;border-bottom:1px solid var(--line-2);color:var(--fg);font:inherit;font-size:16px;padding:0 4px;outline:0;transition:border-color .3s;border-radius:0}
.email input:focus{border-color:var(--fg)}
.email input::placeholder{color:var(--fg-dim)}
.email.sent{display:block;color:var(--fg);font-size:18px}
@media (max-width:600px){.email{flex-direction:column}.email .btn{justify-content:center}}

/* ---------- footer ---------- */
.footer{background:var(--bg-dark2);color:var(--paper);padding:var(--s6) 0 var(--s4);border-top:1px solid rgba(255,255,255,.06)}
.f-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s5)}
.f-brand img{height:24px;width:auto;margin-bottom:var(--s3)}
.f-brand p{color:var(--dim);max-width:30ch;font-size:15px}
.f-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:var(--s2);font-weight:500}
.f-col a{display:block;padding:6px 0;font-size:15px;opacity:.85}
.f-col a:hover{opacity:1}
.f-bottom{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.06);color:var(--dim);font-size:11px}
.f-legal a{margin-left:18px}
@media (max-width:900px){.f-top{grid-template-columns:1fr 1fr}.f-brand{grid-column:span 2}.footer{padding-bottom:calc(var(--s4) + 64px)}}


/* ---------- cursor dot ---------- */
.cursor{position:fixed;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--blue);pointer-events:none;z-index:95;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .3s,height .3s,opacity .3s;opacity:0}
.cursor.on{opacity:1}
.cursor.big{width:28px;height:28px;background:transparent;border:1px solid var(--blue)}
@media (pointer:coarse){.cursor{display:none}}

/* ---------- subpages ---------- */
.page-hero{padding-top:calc(var(--nav-h) + clamp(72px,12vh,160px));padding-bottom:var(--s6)}
.page-hero .sub{margin-top:var(--s3);margin-bottom:var(--s6)}
.page-hero.compact .sub{margin-bottom:var(--s4)}
.demo .ph{min-height:40vh}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--s3);margin-top:var(--s5)}
.steps-grid .step{width:auto}
@media (max-width:900px){.steps-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps-grid{grid-template-columns:1fr}}
.labels{display:grid;gap:12px;margin-top:var(--s4)}
.labels li{display:flex;align-items:center;gap:12px;font-size:15px}
.labels li i{width:6px;height:6px;border-radius:50%;border:1px solid var(--fg-dim);flex:none}
.labels li i.led{border:0}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5)}
.case-cap{padding:18px 4px}
.case-cap h3{margin:6px 0 8px}
.case-cap p{font-size:14px;color:var(--fg-dim)}
.case-cap .result{color:var(--fg);margin-top:8px;font-weight:500}
@media (max-width:900px){.cases{grid-template-columns:1fr}}
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s5)}
.size h3{margin-top:var(--s3);font-size:clamp(22px,2.4vw,32px)}
.size p{margin-top:8px}
.size .mono{color:var(--fg-dim)}
@media (max-width:600px){.sizes{grid-template-columns:1fr}}
.swatches{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s3)}
.swatch{display:flex;align-items:center;gap:12px;font-size:15px}
.swatch i{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2)}
.swatch--black i{background:#141416}.swatch--grey i{background:#A9ABAF}.swatch--sand i{background:#E6DFD3}
.plain{display:grid;gap:14px;margin-top:var(--s4);border-left:1px solid var(--line);padding-left:var(--s3)}
.plain li{font-size:16px;color:var(--fg)}
.fact .num{display:block;margin-bottom:10px}
.fact p{color:var(--fg-dim);margin-top:8px;font-size:15px}
.specs{width:100%;border-collapse:collapse;margin-top:var(--s5)}
.specs th,.specs td{text-align:left;padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top;font-weight:400}
.specs th{width:28%;color:var(--fg-dim);padding-right:var(--s3)}
.specs + .small{margin-top:var(--s3)}
.rings{display:flex;align-items:center;gap:0;margin-top:var(--s4);flex-wrap:wrap}
.rings span{display:flex;align-items:center;gap:10px;font-size:15px}
.rings span i{width:8px;height:8px;border-radius:50%;border:1px solid var(--fg)}
.rings span:not(:last-child)::after{content:"";width:48px;height:1px;background:var(--line-2);margin:0 14px}

/* ---------- support / faq ---------- */
.search{display:flex;align-items:center;gap:12px;width:min(560px,100%);border-bottom:1px solid var(--line-2);padding:8px 0}
.search i{width:14px;height:14px;border:1.5px solid var(--dim);border-radius:50%;position:relative;flex:none}
.search i::after{content:"";position:absolute;width:6px;height:1.5px;background:var(--dim);right:-5px;bottom:-2px;transform:rotate(45deg)}
.search input{flex:1;background:transparent;border:0;color:inherit;font:inherit;font-size:17px;outline:0}
.grid-faq{display:grid;grid-template-columns:240px 1fr;gap:var(--s6);align-items:start}
.faq-nav{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:4px}
.faq-nav a{padding:8px 0 8px 16px;border-left:1px solid var(--line);font-size:14px;color:var(--fg-dim);transition:color .3s,border-color .3s}
.faq-nav a.active,.faq-nav a:hover{color:var(--fg);border-color:var(--blue)}
.faq-group{margin-bottom:var(--s6);scroll-margin-top:calc(var(--nav-h) + 24px)}
.faq-group .h3{margin-bottom:var(--s3)}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-of-type{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:20px 0;cursor:pointer;font-size:clamp(17px,1.4vw,20px);font-weight:500}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{width:14px;height:14px;position:relative;flex:none}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transition:transform .5s var(--ease)}
.faq-item summary i::after{transform:rotate(90deg)}
.faq-item[open] summary i::after{transform:rotate(0)}
.faq-item p{padding-bottom:22px;color:var(--fg-dim);max-width:62ch;font-size:16px}
.faq-item[hidden]{display:none}
.battery-box{margin-top:var(--s4);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);display:grid;gap:var(--s3)}
.battery-box ol{list-style:decimal;padding-left:20px;display:grid;gap:8px;color:var(--fg)}
.contact-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--s4)}
@media (max-width:900px){.grid-faq{grid-template-columns:1fr}.faq-nav{position:static;display:flex;gap:16px;overflow-x:auto;padding-bottom:8px}.faq-nav a{border-left:0;border-bottom:1px solid var(--line);padding:8px 0;white-space:nowrap}}

/* ---------- generic hidden ---------- */
[hidden]{display:none!important}

/* 静态模式（?static=1）：关动效，便于截图与排查 */
html.static .grain,html.static .cursor{display:none}
html.static .seq-line[data-i="4"]{opacity:1}

/* ---------- 首页：线稿段缩短、结尾段（10-24 转正） ---------- */
.sequence.short{height:210vh}
.closing{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center}
.closing-in{position:relative;display:grid;justify-items:center;gap:var(--s3);padding-block:var(--s7)}
.closing-in .h1{max-width:18ch;margin-inline:auto}
.closing blockquote{margin-top:var(--s2)}
.closing blockquote p{font-size:clamp(17px,1.4vw,21px);max-width:44ch;margin-inline:auto;color:rgba(236,234,228,.8)}
.closing blockquote cite a{border-bottom:1px solid var(--line-2)}
.closing .email{margin-top:var(--s3)}
.closing .journey-veil{background:linear-gradient(180deg,rgba(11,11,12,.62),rgba(11,11,12,.78)),radial-gradient(70% 70% at 50% 50%,rgba(11,11,12,.1),rgba(11,11,12,.6))}

/* ---------- 产品页：首屏竖版演示 / 手稿配实物 / 两尺寸并排 ---------- */
.phero{align-items:center}
.phero .demo{width:min(100%,400px);margin-inline:auto}
.phero .demo .ph{min-height:0}
.pairs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5) var(--s3);margin-top:var(--s5)}
.pair{cursor:pointer;outline-offset:4px}
.pair-media{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#F1EFEA}
.pair-media .media,.pair-media .ph{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important;border-radius:0}
.pair-real{opacity:0;transition:opacity .9s var(--ease)}
.pair:hover .pair-real,.pair:focus-visible .pair-real,.pair.active .pair-real{opacity:1}
.pair h3{margin-top:var(--s3);font-size:clamp(17px,1.3vw,20px)}
.pair p{color:var(--fg-dim);font-size:15px;margin-top:6px}
.sizes-pair{margin-top:var(--s5)}
.sizes-pair + .sizes{margin-top:var(--s4)}
.sizes .size h3{margin-top:0}
.cases{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
@media (max-width:900px){.pairs{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s2)}.phero .demo{width:min(100%,320px)}}
/* ---------- 关于我们：草图横条 ---------- */
.strip{display:flex;gap:14px;overflow-x:auto;padding:var(--s5) var(--gut) 8px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip-item{flex:none;width:min(300px,68vw);scroll-snap-align:start}
/* ---------- 首页：亮点四格 ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s5)}
.tile-media .media,.tile-media .ph{border-radius:var(--r)}
.tile h3{margin-top:var(--s3);font-size:clamp(18px,1.4vw,22px)}
.tile p{color:var(--fg-dim);font-size:15px;margin-top:6px;max-width:30ch}
@media (max-width:900px){.tiles{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s2)}}

/* ---------- 看完整影片：播放按钮 + 弹层 ---------- */
.play{display:inline-flex;align-items:center;gap:14px;font-size:15px;font-weight:500;color:inherit;margin-top:var(--s3)}
.play i{width:44px;height:44px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;transition:background .4s,color .4s}
.play i::before{content:"";width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.play:hover i{background:var(--paper);color:var(--ink)}
.page-hero .play{margin-top:0;margin-bottom:var(--s5)}
.film{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;display:none;place-items:center}
.film[open]{display:grid}
.film::backdrop{background:rgba(11,11,12,.96)}
.film video{width:min(92vw,calc(100dvh - 120px)*16/9);aspect-ratio:16/9;background:#000;border-radius:var(--r-sm);outline:0}
.film-close{position:fixed;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;z-index:2}
.film-close span{position:absolute;width:18px;height:1.5px;background:var(--paper);transform:rotate(45deg)}.film-close span+span{transform:rotate(-45deg)}
.seal-media{gap:var(--s3)}
.seal-media .media{aspect-ratio:16/9;object-fit:cover}

/* ---------- 法务页（隐私 / 条款）与表单旁的隐私链接 ---------- */
.small a.u{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:currentColor;opacity:.85}
.small a.u:hover{opacity:1}
.email{position:relative}
.email .err-line{position:absolute;left:4px;top:calc(100% + 6px);font-size:13px;color:#ff8a8a}
.legal.section{padding-block:clamp(56px,7vw,112px)}
.prose{max-width:760px;font-size:17px;line-height:1.7;color:var(--fg)}
.prose > * + *{margin-top:var(--s2)}
.prose h2{font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.015em;line-height:1.25;margin-top:var(--s5)}
.prose h3{font-size:18px;font-weight:600;letter-spacing:-.005em;margin-top:var(--s4)}
.prose h2 + p,.prose h3 + p{margin-top:var(--s1)}
.prose ul{padding-left:1.2em;list-style:disc}
.prose li + li{margin-top:6px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose .legal-meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--fg-dim)}
:lang(zh) .prose{line-height:1.85}