/* zaela.com · teaser site
   Concept: mimicry. The butterfly logo (Friday's motion logo, ported to SVG) takes on the colours of whatever
   you are looking at; JS drives the palette through --bf-a / --bf-b / --bf-c / --accent.
   Type: Instrument Serif (display) · Plus Jakarta Sans (wordmark + text) · IBM Plex Mono (labels). */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --cream:#FBF7F2; --cream2:#F6EFE6; --coral:#E8694F; --coral-deep:#B9472F; --ink:#2B1F33; --night:#150F19; --night2:#0E0A11;
  --bf-a:#F6EFE6; --bf-b:#E8694F; --bf-c:#F6EFE6; --accent:#E8694F;
  --serif:"Instrument Serif","Songti SC","STSong","Noto Serif SC","Source Han Serif SC",Georgia,serif;
  --sans:"Plus Jakarta Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC","Microsoft YaHei",monospace;
  --pad:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--night)}
html.theatre-open{overflow:hidden}
body{margin:0;background:var(--night);color:var(--cream2);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,canvas,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:99px;font:600 14px/1 var(--sans);text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* ---------- the butterfly (logo mark) ---------- */
.bf{width:100%;height:auto;overflow:visible}
.bf-lo{fill:var(--bf-a);stroke:var(--bf-b);stroke-width:2;stroke-linejoin:round}
.bf-up{fill:var(--bf-b)}
.bf-hl{fill:var(--bf-a);opacity:.5}
.bf-body{fill:var(--bf-c)}
.bf-ant{fill:none;stroke:var(--bf-c);stroke-width:2;stroke-linecap:round}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:16px var(--pad);color:var(--cream2);transition:color .5s,background-color .5s,backdrop-filter .5s,padding .4s}
.hdr[data-tone="light"]{color:var(--ink)}
.hdr.is-solid{padding-top:10px;padding-bottom:10px;background:rgba(21,15,25,.62);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.hdr.is-solid[data-tone="light"]{background:rgba(251,247,242,.74)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand .bf{width:40px;flex:none}
.wm{font:800 25px/1 "Plus Jakarta Sans",var(--sans);letter-spacing:-.045em;white-space:nowrap}
.wm span{font-weight:500;color:var(--bf-b);transition:color .3s}
.hdr .brand .bf .bf-body,.hdr .brand .bf .bf-ant{transition:fill .5s,stroke .5s}
.langs{margin-left:auto;display:flex;align-items:center;gap:2px}
.langs a{font:500 12px/1 var(--mono);letter-spacing:.06em;padding:9px 8px;border-radius:99px;text-decoration:none;opacity:.6;transition:opacity .2s,box-shadow .2s}
.langs a:hover{opacity:1}
.langs a[aria-current="page"]{opacity:1;box-shadow:inset 0 -1.5px 0 var(--accent);border-radius:0}
.hdr-cta{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:12px 16px;border-radius:99px;border:1px solid currentColor;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.hdr-cta:hover{background:var(--cream2);color:var(--ink);border-color:var(--cream2)}
.hdr[data-tone="light"] .hdr-cta:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
html[lang^="zh"] .hdr-cta{text-transform:none;letter-spacing:.02em}

/* ---------- shared bits ---------- */
.label{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 28px;display:flex;align-items:center;gap:12px}
.label::before{content:"";width:24px;height:1px;background:currentColor;opacity:.55}
html[lang^="zh"] .label{letter-spacing:.08em}
.hint{margin:36px 0 0;font:400 12px/1.4 var(--mono);letter-spacing:.04em;opacity:.62;display:flex;gap:12px;align-items:center}
.hint i{flex:none;width:1px;height:26px;background:currentColor;transform-origin:top;animation:hint 1.9s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.dur{font:500 .86em/1 var(--mono);opacity:.62;letter-spacing:.04em}
html.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--night) url(/assets/img/hero-poster.webp) center/cover no-repeat;color:var(--cream2);display:grid;align-items:end}
.hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.04 + var(--hp,0) * .08))}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(14,10,17,.55) 0%,rgba(14,10,17,0) 20%,rgba(14,10,17,0) 42%,rgba(14,10,17,.82) 100%),
  radial-gradient(110% 70% at 0% 100%,rgba(14,10,17,.6),transparent 62%)}
.hero-in{position:relative;padding:0 var(--pad) clamp(84px,13vh,150px);max-width:1500px;transform:translateY(calc(var(--hp,0) * -60px));opacity:calc(1 - var(--hp,0) * 1.4)}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;display:flex;gap:10px;align-items:center;margin:0 0 clamp(26px,3.4vh,38px)}
html[lang^="zh"] .eyebrow{letter-spacing:.08em}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}70%,100%{box-shadow:0 0 0 12px transparent}}
.hero-h{font:400 clamp(50px,9vw,164px)/.92 var(--serif);letter-spacing:-.025em;margin:0 0 clamp(28px,4.4vh,48px);text-wrap:balance}
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-h .ln>span{display:inline-block;transform:translateY(108%);animation:rise 1.4s var(--ease) .15s forwards}
.hero-h .ln.em>span{font-style:italic;color:color-mix(in srgb,var(--bf-b) 42%,var(--cream2));animation-delay:.32s}
html[lang^="zh"] .hero-h{font-size:clamp(44px,7.4vw,132px);line-height:1.08;letter-spacing:.02em}
html[lang^="zh"] .hero-h .ln.em>span{font-style:normal}
@keyframes rise{to{transform:none}}
.play-btn{display:inline-flex;align-items:center;gap:18px;background:none;border:0;padding:0;cursor:pointer;text-align:left;opacity:0;animation:fadein 1s var(--ease) .9s forwards}
@keyframes fadein{to{opacity:1}}
.play-ring{position:relative;flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:rgba(251,247,242,.09);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .6s var(--ease),background .4s;--bf-c:var(--cream2)}
.play-ring .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.play-ring circle{fill:none;stroke:var(--cream2);stroke-opacity:.45;stroke-width:1.2;stroke-dasharray:301.6;stroke-dashoffset:0}
.play-ring .bf{width:50px;transform:translateY(2px)}
.play-btn:hover .play-ring,.play-btn:focus-visible .play-ring{transform:scale(1.07);background:rgba(251,247,242,.16)}
.play-btn:hover circle,.play-btn:focus-visible circle{stroke:var(--accent);stroke-opacity:1;animation:draw 1.2s var(--ease)}
@keyframes draw{from{stroke-dashoffset:301.6}to{stroke-dashoffset:0}}
.play-txt strong{display:block;font:600 clamp(17px,1.3vw,20px)/1.2 var(--sans);letter-spacing:-.01em}
.play-txt small{display:block;margin-top:6px;font:500 12px/1 var(--mono);letter-spacing:.08em;opacity:.7}
.scroll-cue{position:absolute;right:var(--pad);bottom:clamp(30px,5vh,48px);display:flex;align-items:center;gap:14px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;opacity:.75;transition:opacity .3s}
.scroll-cue:hover{opacity:1}
.scroll-cue i{position:relative;width:1px;height:46px;background:rgba(246,239,230,.3);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--cream2);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
html[lang^="zh"] .scroll-cue{text-transform:none;letter-spacing:.06em}

/* ---------- I · mimicry (scroll-scrubbed morph) ---------- */
.mim{position:relative;height:340vh;background:var(--cream);color:var(--ink)}
.mim-stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4.5vw,84px);align-items:center;padding:92px var(--pad) 40px}
.mim-media{margin:0;display:grid;gap:14px}
.mim-frame{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#C9C3BA;box-shadow:0 50px 90px -50px rgba(43,31,51,.55)}
.mim-frame img,.mim-frame canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mim-meter{display:flex;align-items:center;gap:14px;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(43,31,51,.7)}
html[lang^="zh"] .mim-meter{text-transform:none}
.mim-bar{position:relative;flex:1;height:2px;background:rgba(43,31,51,.14);overflow:hidden}
.mim-bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--m,0));background:var(--accent)}
.mim-read{min-width:9.5em;text-align:right}
.mim-read b{font-weight:500;color:var(--ink)}
.mim-steps{display:grid}
.mim-steps>.step{grid-area:1/1;margin:0;opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .9s var(--ease);pointer-events:none}
.mim-steps>.step.is-on{opacity:1;transform:none;pointer-events:auto}
html:not(.js) .mim-steps>.step{position:static;opacity:1;transform:none;grid-area:auto;margin-bottom:24px}
p.step,.step h2{font:400 clamp(30px,3.2vw,54px)/1.08 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.step h2{margin:0 0 20px}
.step h2+p{margin:0;font:400 clamp(16px,1.2vw,19px)/1.65 var(--sans);color:rgba(43,31,51,.78);max-width:32em}
html[lang^="zh"] p.step,html[lang^="zh"] .step h2{line-height:1.35;letter-spacing:.01em;font-size:clamp(26px,2.6vw,44px)}
html[lang^="zh"] .step h2+p{line-height:1.9}

/* ---------- the agents adapt (cards) ---------- */
.adapt{background:var(--cream2);color:var(--ink);padding:clamp(100px,16vh,180px) var(--pad) clamp(110px,18vh,200px)}
.adapt-head{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:40px;align-items:end;margin:0 auto clamp(44px,7vh,80px);max-width:1500px}
.adapt-head h2{font:400 clamp(34px,4.5vw,76px)/1.02 var(--serif);letter-spacing:-.018em;margin:0;max-width:17em;text-wrap:balance}
html[lang^="zh"] .adapt-head h2{line-height:1.3;letter-spacing:.01em;font-size:clamp(28px,3.6vw,60px)}
.adapt-head p{margin:0;justify-self:end;text-align:right;max-width:15em;font:500 12.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(43,31,51,.72)}
html[lang^="zh"] .adapt-head p{text-transform:none;letter-spacing:.04em;font-size:14px;max-width:22em}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] .fx-lines,html[lang^="zh"] .triad,html[lang^="zh"] p.step,html[lang^="zh"] .band-h{font-feature-settings:"palt";text-spacing-trim:trim-start}
.adapt-grid{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,26px);max-width:1500px}
.adapt-grid li:nth-child(even){margin-top:clamp(28px,7vw,110px)}
.adapt-grid figure{margin:0;position:relative;overflow:hidden;border-radius:6px;aspect-ratio:4/5;background:#D7CEC2}
.adapt-grid img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--ease)}
.adapt-grid figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(21,15,25,.74));pointer-events:none}
.adapt-grid figcaption{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;color:var(--cream);font:500 clamp(15px,1.15vw,18px)/1.32 var(--sans);text-wrap:balance}
.adapt-grid figcaption span{display:block;margin-bottom:10px;font:500 11px/1 var(--mono);letter-spacing:.14em;opacity:.75}
.adapt-grid li:hover img,.adapt-grid li.is-pick img{transform:scale(1.08)}
.adapt-grid li{transition-delay:var(--d,0s)}

/* ---------- II · the butterfly effect ---------- */
.fx{position:relative;background:var(--night2);color:var(--cream2);isolation:isolate;clip-path:inset(0)}
.fx-bg{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;z-index:-1}
.fx-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.dust{position:absolute;inset:0;width:100%;height:100%}
.fx-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,10,17,.86) 0%,rgba(14,10,17,.6) 42%,rgba(14,10,17,.12) 100%),linear-gradient(0deg,rgba(14,10,17,.55),transparent 34%)}
.fx-in{position:relative;padding:clamp(130px,20vh,220px) var(--pad) clamp(120px,18vh,200px);max-width:1240px}
.fx .label{color:var(--accent)}
.fx-h{font:400 clamp(44px,6.4vw,112px)/.98 var(--serif);letter-spacing:-.022em;margin:0 0 clamp(70px,14vh,160px);max-width:10.5em;text-wrap:balance}
.fx-lines{list-style:none;margin:0 0 clamp(80px,14vh,160px);padding:0;display:grid;gap:clamp(8px,1.6vh,18px)}
.fx-lines li{font:400 clamp(34px,4.8vw,82px)/1.04 var(--serif);letter-spacing:-.016em}
.fx-lines li:nth-child(2){padding-left:clamp(20px,6vw,110px)}
.fx-lines li:nth-child(3){padding-left:clamp(40px,12vw,220px)}
.fx-lines span{opacity:.6}
.fx-lines em{font-style:italic;color:var(--accent)}
.fx-rows{margin:0 0 clamp(90px,16vh,170px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,52px);max-width:1100px}
.fx-rows>div{border-top:1px solid rgba(246,239,230,.24);padding-top:20px;transition-delay:var(--d,0s)}
.fx-rows dt{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.fx-rows dd{margin:0;font:400 clamp(16px,1.25vw,20px)/1.55 var(--sans);color:rgba(246,239,230,.86)}
.triad{font:400 clamp(42px,7vw,124px)/.98 var(--serif);letter-spacing:-.022em;margin:0;display:flex;flex-wrap:wrap;gap:0 .28em}
.triad span:nth-child(3){font-style:italic;color:var(--accent)}
.fx-hint{opacity:.55}
html[lang^="zh"] .fx-h,html[lang^="zh"] .fx-lines li,html[lang^="zh"] .triad{letter-spacing:.02em;line-height:1.25}
html[lang^="zh"] .fx-lines em,html[lang^="zh"] .triad span{font-style:normal}
html[lang^="zh"] .fx-rows dt{text-transform:none;letter-spacing:.06em}

/* ---------- the film band ---------- */
.band{background:var(--night2)}
.band-btn{display:block;position:relative;width:100%;height:min(92svh,56.25vw);min-height:480px;border:0;padding:0;margin:0;background:#000;color:var(--cream2);text-align:left;cursor:pointer;overflow:hidden}
.band-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform 1.8s var(--ease),opacity .6s}
.band-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,10,17,.72),rgba(14,10,17,.12) 60%),linear-gradient(0deg,rgba(14,10,17,.6),transparent 45%)}
.band-btn:hover img{transform:scale(1.04);opacity:1}
.band-in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(40px,9vh,96px);z-index:1;display:grid;gap:30px;justify-items:start}
.band-h{font:400 clamp(40px,5.8vw,100px)/1 var(--serif);letter-spacing:-.022em;max-width:9.5em;text-wrap:balance}
html[lang^="zh"] .band-h{line-height:1.25;letter-spacing:.02em}
.chip{display:inline-flex;align-items:center;gap:12px;padding:12px 22px 12px 12px;border-radius:99px;background:var(--cream2);color:var(--ink);font:600 15px/1 var(--sans);transition:transform .5s var(--ease),background .3s}
.chip .dur{color:var(--ink)}
.chip-ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);--bf-c:var(--cream2)}
.chip-ico .bf{width:24px;transform:translateY(1px)}
.band-btn:hover .chip,.band-btn:focus-visible .chip{transform:translateX(6px)}

/* ---------- contact ---------- */
.contact{background:var(--cream);color:var(--ink);padding:clamp(100px,16vh,180px) var(--pad) clamp(100px,14vh,160px)}
.contact-in{position:relative;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(40px,7vw,130px);align-items:start}
.contact .label{color:var(--ink)}
.contact-intro h2{font:400 clamp(40px,4.9vw,84px)/1 var(--serif);letter-spacing:-.022em;margin:0 0 26px;text-wrap:balance}
html[lang^="zh"] .contact-intro h2{line-height:1.25;letter-spacing:.02em;font-size:clamp(34px,3.8vw,64px)}
.lede{margin:0;font:400 clamp(17px,1.3vw,20px)/1.6 var(--sans);color:rgba(43,31,51,.78);max-width:25em}
.big-bf{width:clamp(110px,13vw,190px);margin-top:clamp(36px,7vh,72px);--bf-c:var(--ink)}
.lead{display:grid;grid-template-columns:1fr 1fr;gap:28px 26px;transition-delay:.12s}
.f{grid-column:1/-1;position:relative;display:grid;gap:8px;align-content:start}
.f.half{grid-column:span 1}
.f>label{font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(43,31,51,.72)}
html[lang^="zh"] .f>label{text-transform:none;letter-spacing:.04em;font-size:13px}
.f>label small{font-size:11px;text-transform:none;letter-spacing:.02em;opacity:.85}
.f input[type="text"],.f input[type="email"],.f input[type="tel"],.f textarea{width:100%;font:400 18px/1.4 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid rgba(43,31,51,.26);border-radius:0;padding:8px 0 11px;outline:none;transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none}
.f textarea{resize:vertical;min-height:3.4em}
.f input:focus,.f textarea:focus{border-color:var(--ink);box-shadow:0 1.5px 0 var(--ink)}
.f.invalid input,.f.invalid textarea{border-color:#B3261E;box-shadow:0 1.5px 0 #B3261E}
.err{font:500 13px/1.3 var(--sans);color:#B3261E}
.err:empty{display:none}
.f.consent{grid-template-columns:auto 1fr;gap:6px 14px;align-items:start;margin-top:4px}
.f.consent input{width:21px;height:21px;margin:2px 0 0;accent-color:var(--ink);cursor:pointer}
.f.consent label{font:400 14px/1.6 var(--sans);text-transform:none;letter-spacing:0;color:rgba(43,31,51,.8);cursor:pointer}
.f.consent .err{grid-column:2}
.f.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:6px}
.submit{display:inline-flex;align-items:center;gap:16px;background:var(--ink);color:var(--cream);border:0;border-radius:99px;padding:19px 26px 19px 30px;font:600 16px/1 var(--sans);cursor:pointer;transition:background .3s,transform .3s}
.submit:hover{background:var(--coral-deep)}
.submit:active{transform:scale(.98)}
.submit[disabled]{opacity:.6;cursor:progress}
.s-arrow{transition:transform .3s var(--ease)}
.submit:hover .s-arrow{transform:translateX(5px)}
.privacy{margin:0;max-width:22em;font:400 13px/1.5 var(--sans);color:rgba(43,31,51,.62)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-msg{grid-column:1/-1;margin:0;font:500 14px/1.5 var(--sans);color:#B3261E}
.lead-msg:empty{display:none}
.lead-done{grid-column:2;grid-row:1;align-self:center;display:grid;gap:14px;justify-items:start;outline:none}
.lead-done[hidden]{display:none}
.done-bf{width:120px;--bf-c:var(--ink)}
.lead-done h3{font:400 clamp(48px,6vw,96px)/1 var(--serif);letter-spacing:-.02em;margin:10px 0 0}
.done-p{margin:0;font:400 18px/1.6 var(--sans);color:rgba(43,31,51,.8);max-width:24em}

/* ---------- footer ---------- */
.foot{background:var(--night);color:var(--cream2);padding:44px var(--pad) calc(40px + env(safe-area-inset-bottom));--bf-c:var(--cream2)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px;max-width:1500px;margin:0 auto}
.foot .brand .bf{width:34px}
.foot .wm{font-size:21px}
.foot .made{margin:0;font:400 14px/1.4 var(--sans);opacity:.82}
.foot .made a{text-underline-offset:3px;text-decoration-thickness:1px}
.foot .langs{margin-left:auto}
.rights{margin:0;font:400 12px/1 var(--mono);opacity:.5;letter-spacing:.04em}

/* ---------- theatre (film player) ---------- */
.theatre{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#09060B;opacity:0;transition:opacity .45s var(--ease)}
.theatre[hidden]{display:none}
.theatre.is-open{opacity:1}
.th-stage{position:relative;width:min(100vw,calc((100vh - 110px) * 16 / 9));width:min(100vw,calc((100svh - 110px) * 16 / 9));aspect-ratio:16/9;background:#000;transform:scale(.97);transition:transform .6s var(--ease)}
.theatre.is-open .th-stage{transform:none}
.th-stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;transform:none}
.th-v{width:100%;height:100%;object-fit:contain;background:#000}

.th-close{position:fixed;top:16px;right:16px;z-index:5;width:50px;height:50px;border-radius:50%;border:1px solid rgba(246,239,230,.28);background:rgba(246,239,230,.06);cursor:pointer;transition:background .3s,transform .4s var(--ease)}
.th-close:hover{background:rgba(246,239,230,.16);transform:rotate(90deg)}
.th-close span,.th-close span::after{position:absolute;left:50%;top:50%;width:20px;height:1.5px;background:var(--cream2);transform:translate(-50%,-50%) rotate(45deg)}
.th-close span::after{content:"";transform:translate(-50%,-50%) rotate(90deg)}
.th-caps{position:absolute;left:5%;right:5%;bottom:12.5%;z-index:1;text-align:center;pointer-events:none;transition:bottom .4s var(--ease)}
.theatre.idle .th-caps{bottom:7%}
.th-caps span{font:500 clamp(14px,1.9vw,30px)/1.42 var(--sans);color:#fff;white-space:pre-line;background:rgba(9,6,11,.58);padding:.1em .42em;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:3px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.th-caps span:empty{display:none}
.th-big{position:absolute;left:50%;top:50%;z-index:3;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:1px solid rgba(246,239,230,.4);background:rgba(9,6,11,.45);cursor:pointer;display:grid;place-items:center;--bf-c:var(--cream2)}
.th-big[hidden]{display:none}
.th-big span{width:56px}
.th-end{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:28px;padding:24px;text-align:center;background:rgba(9,6,11,.62);animation:fadein .8s var(--ease) both}
.th-end[hidden]{display:none}
.th-end-h{margin:0;font:400 clamp(34px,4.6vw,72px)/1 var(--serif);color:var(--cream2);letter-spacing:-.02em}
.th-end-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pill{display:inline-flex;align-items:center;padding:16px 24px;border-radius:99px;border:1px solid rgba(246,239,230,.5);background:transparent;color:var(--cream2);font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .3s,color .3s}
.pill:hover{background:rgba(246,239,230,.12)}
.pill.solid{background:var(--cream2);color:var(--ink);border-color:var(--cream2)}
.pill.solid:hover{background:#fff}
.th-ctrl{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:6px;padding:34px 14px 10px;background:linear-gradient(transparent,rgba(9,6,11,.78));color:var(--cream2);transition:opacity .45s}
.theatre.idle .th-ctrl{opacity:0}
.theatre.idle{cursor:none}
.th-ctrl button{flex:none;width:42px;height:42px;border:0;border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.th-ctrl button:hover{background:rgba(246,239,230,.12)}
.th-ctrl svg{width:22px;height:22px;fill:currentColor}
.i-pause,.i-mute,.theatre.is-playing .i-play,.theatre.is-muted .i-vol{display:none}
.theatre.is-playing .i-pause,.theatre.is-muted .i-mute{display:block}
.c-time,.c-dur{flex:none;font:500 12px/1 var(--mono);letter-spacing:.04em;opacity:.9;min-width:3em;text-align:center}
.c-bar{position:relative;flex:1;height:30px;cursor:pointer;touch-action:none}
.c-bar::before,.c-buf,.c-pos{content:"";position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px}
.c-bar::before{right:0;background:rgba(246,239,230,.22)}
.c-buf{width:var(--buf,0%);background:rgba(246,239,230,.35)}
.c-pos{width:var(--pos,0%);background:var(--coral)}
.c-pos::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--cream2);transform:scale(0);transition:transform .2s}
.c-bar:hover .c-pos::after,.c-bar:focus-visible .c-pos::after,.c-bar.drag .c-pos::after{transform:scale(1)}
.c-cc-wrap{position:relative;flex:none}
.th-ctrl .c-cc{width:auto;height:28px;padding:0 9px;border-radius:5px;border:1.5px solid rgba(246,239,230,.6);font:600 11.5px/1 var(--mono);letter-spacing:.04em;margin:0 6px}
.th-ctrl .c-cc.on{background:var(--cream2);color:var(--ink);border-color:var(--cream2)}
.c-cc-menu{position:absolute;right:0;bottom:44px;margin:0;padding:6px;list-style:none;min-width:168px;background:rgba(21,15,25,.97);border:1px solid rgba(246,239,230,.16);border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.c-cc-menu[hidden]{display:none}
.th-ctrl .c-cc-menu button{width:100%;height:auto;border-radius:7px;display:flex;gap:10px;align-items:center;padding:10px 12px;font:500 14px/1.2 var(--sans);text-align:left}
.c-cc-menu button::before{content:"";width:14px;flex:none;font-size:12px}
.c-cc-menu button[aria-checked="true"]::before{content:"✓"}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .adapt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adapt-grid li:nth-child(even){margin-top:clamp(28px,8vw,70px)}
  .adapt-grid li:nth-child(3){margin-top:-10px}
  .fx-rows{grid-template-columns:1fr;max-width:640px}
}
@media (max-width:860px){
  .hdr-cta{display:none}
  .mim{height:300vh}
  .mim-stick{grid-template-columns:1fr;align-content:center;gap:26px;padding:84px var(--pad) 28px}
  p.step,.step h2{font-size:clamp(26px,6.6vw,40px)}
  .step h2+p{font-size:16px}
  .mim-text .hint{margin-top:22px}
  .adapt-head{grid-template-columns:1fr;gap:18px}
  .adapt-head p{justify-self:start;text-align:left}
  .contact-in{grid-template-columns:1fr}
  .lead-done{grid-column:1;grid-row:auto}
  .big-bf{display:none}
}
@media (max-width:640px){
  .brand .bf{width:34px}
  .wm{font-size:21px}
  .langs a{padding:8px 5px;font-size:11px;letter-spacing:.03em}
  .hero-in{padding-bottom:96px}
  .play-ring{width:78px;height:78px}
  .play-ring .bf{width:42px}
  .scroll-cue{left:var(--pad);right:auto;bottom:28px}
  .scroll-cue i{height:30px}
  .adapt-grid{gap:12px}
  .adapt-grid figcaption{left:12px;right:12px;bottom:12px;font-size:14px}
  .fx-lines li:nth-child(2),.fx-lines li:nth-child(3){padding-left:0}
  .band-btn{height:78svh;min-height:440px}
  .band-btn img{object-position:72% 50%}
  .lead{grid-template-columns:1fr}
  .f.half{grid-column:1/-1}
  .foot .langs{margin-left:0;width:100%}
  .th-ctrl{gap:2px;padding:28px 6px 6px}
  .c-dur{display:none}
  .th-ctrl button{width:38px;height:38px}
  .th-close{top:10px;right:10px;width:44px;height:44px}
}
@media (max-width:380px){
  .wm{font-size:19px}
  .brand{gap:7px}
  .brand .bf{width:30px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-h .ln>span,.play-btn{animation:none;transform:none;opacity:1}
  .hint i,.scroll-cue i::after,.eyebrow .dot{animation:none}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  .hero-in,.hero-v{transform:none;opacity:1}
}

/* =====================================================================================================
   v2 · navigation between the two pages, the homepage "explore" band and the platform page
   ===================================================================================================== */

/* ---------- header: page nav + compact language menu on small screens ---------- */
.mainnav{margin-left:auto;display:flex;align-items:center;gap:2px}
.mainnav a{font:500 14px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;padding:10px 12px;border-radius:99px;opacity:.78;transition:opacity .2s,background .2s;white-space:nowrap}
.mainnav a:hover{opacity:1}
.mainnav a[aria-current="page"]{opacity:1;box-shadow:inset 0 -1.5px 0 var(--accent);border-radius:0}
.hdr .langs{margin-left:6px}
.lang-dd{display:none;position:relative}
.lang-dd summary{list-style:none;cursor:pointer;font:500 12px/1 var(--mono);letter-spacing:.06em;padding:10px 12px;border:1px solid currentColor;border-radius:99px;opacity:.85}
.lang-dd summary::-webkit-details-marker{display:none}
.lang-dd summary::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 2px 7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.lang-dd-list{position:absolute;right:0;top:calc(100% + 8px);display:grid;min-width:120px;padding:6px;border-radius:12px;background:rgba(21,15,25,.96);color:var(--cream2);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.lang-dd-list a{font:500 13px/1 var(--mono);padding:11px 12px;border-radius:7px;text-decoration:none}
.lang-dd-list a[aria-current="page"]{background:rgba(246,239,230,.12)}

/* ---------- shared bits for the new sections ---------- */
.pill.ink{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pill.ink:hover{background:var(--coral-deep);border-color:var(--coral-deep)}
.pill .pill-bf{width:26px;margin:-4px 10px -4px -6px;--bf-c:var(--cream2)}
.pill.solid .pill-bf{--bf-c:var(--ink)}
.pill{gap:4px}
.sec-head{max-width:1500px;margin:0 auto clamp(40px,6vh,72px)}
.sec-head h2{font:400 clamp(36px,4.6vw,78px)/1.02 var(--serif);letter-spacing:-.02em;margin:0 0 22px;max-width:16em;text-wrap:balance}
.sec-head .lede{margin:0;font:400 clamp(17px,1.3vw,20px)/1.6 var(--sans);max-width:40em;opacity:.82;color:inherit}
html[lang^="zh"] .sec-head h2{line-height:1.28;letter-spacing:.02em;font-size:clamp(30px,3.8vw,62px);font-feature-settings:"palt"}
html[lang^="zh"] .sec-head .lede{line-height:1.9}
.chips{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font:500 13px/1 var(--sans);padding:8px 12px;border-radius:99px;background:rgba(43,31,51,.06);border:1px solid rgba(43,31,51,.1)}

/* ---------- homepage: the way into the platform page ---------- */
.explore{background:var(--cream2);color:var(--ink);padding:clamp(90px,14vh,160px) var(--pad)}
.explore-in{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(36px,6vw,110px);align-items:end}
.explore-head h2{font:400 clamp(40px,5vw,84px)/1 var(--serif);letter-spacing:-.022em;margin:0 0 22px}
.explore-head .lede{margin:0 0 34px;font:400 clamp(17px,1.3vw,20px)/1.6 var(--sans);color:rgba(43,31,51,.78);max-width:26em}
html[lang^="zh"] .explore-head h2{line-height:1.25;letter-spacing:.02em}
.explore-links{list-style:none;margin:0;padding:0;border-top:1px solid rgba(43,31,51,.16)}
.explore-links li{border-bottom:1px solid rgba(43,31,51,.16);transition-delay:var(--d,0s)}
.explore-links a{display:flex;align-items:baseline;gap:22px;padding:26px 4px;text-decoration:none;color:inherit;transition:padding .5s var(--ease),color .3s}
.explore-links .n{font:500 12px/1 var(--mono);letter-spacing:.1em;opacity:.55}
.explore-links .t{flex:1;font:400 clamp(26px,2.6vw,42px)/1.1 var(--serif);letter-spacing:-.01em}
html[lang^="zh"] .explore-links .t{font-size:clamp(22px,2.1vw,34px)}
.explore-links i{font-style:normal;font-size:22px;transition:transform .5s var(--ease)}
.explore-links a:hover{padding-left:16px;color:var(--coral-deep)}
.explore-links a:hover i{transform:translateX(6px)}

/* ---------- platform: hero ---------- */
.p-hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:var(--night) url(/assets/img/hero-poster.webp) center/cover no-repeat;color:var(--cream2)}
.p-hero .hero-in{padding-bottom:clamp(140px,20vh,210px)}
.p-h1{font-size:clamp(46px,7.4vw,136px)}
html[lang^="zh"] .p-h1{font-size:clamp(40px,6.2vw,110px)}
.p-lede{margin:0 0 34px;max-width:36em;font:400 clamp(17px,1.35vw,21px)/1.6 var(--sans);color:rgba(246,239,230,.88);opacity:0;animation:fadein 1s var(--ease) .8s forwards}
html[lang^="zh"] .p-lede{line-height:1.9}
.p-ctas{display:flex;flex-wrap:wrap;gap:12px;opacity:0;animation:fadein 1s var(--ease) 1s forwards}
.p-toc{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(26px,4vh,40px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;border-top:1px solid rgba(246,239,230,.22);padding-top:18px}
.p-toc a{display:flex;gap:12px;align-items:baseline;font:500 14px/1.3 var(--sans);text-decoration:none;opacity:.78;transition:opacity .2s}
.p-toc a:hover{opacity:1}
.p-toc b{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--accent)}

/* ---------- platform: 01 what it does ---------- */
.p-what{background:var(--cream);color:var(--ink);padding:clamp(100px,15vh,170px) var(--pad)}
.what-grid{list-style:none;margin:0 auto;padding:0;max-width:1500px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.what-grid li{padding:30px 26px 32px;border-radius:8px;background:var(--cream2);border:1px solid rgba(43,31,51,.08);transition:transform .6s var(--ease),box-shadow .6s var(--ease);transition-delay:var(--d,0s)}
.what-grid li:hover{transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(43,31,51,.5)}
.ico{width:42px;height:42px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:26px}
.what-grid h3{font:400 clamp(26px,2.2vw,36px)/1.05 var(--serif);margin:0 0 12px}
.what-grid p{margin:0;font:400 16px/1.6 var(--sans);color:rgba(43,31,51,.78)}
.works{max-width:1500px;margin:clamp(28px,4vh,44px) auto 0;display:flex;gap:26px;align-items:center;padding:28px 30px;border-radius:8px;background:var(--ink);color:var(--cream2);--bf-c:var(--cream2)}
.works-bf{width:64px;flex:none}
.works h3{font:600 18px/1.3 var(--sans);margin:0 0 6px}
.works p{margin:0;font:400 15.5px/1.6 var(--sans);opacity:.82;max-width:60em}

/* ---------- platform: 02 how it works · the flow ---------- */
.p-how{background:var(--night2);color:var(--cream2);padding:clamp(100px,15vh,170px) var(--pad)}
.p-how .label{color:var(--accent)}
.flow{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,3vw,48px);align-items:start}
.flow-lab{font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin:6px 0 16px}
html[lang^="zh"] .flow-lab{text-transform:none;letter-spacing:.04em}
.scen-list{display:grid;gap:8px}
.scen{display:flex;gap:14px;align-items:baseline;width:100%;text-align:left;padding:16px 18px;border-radius:10px;border:1px solid rgba(246,239,230,.14);background:rgba(246,239,230,.03);cursor:pointer;font:400 16px/1.45 var(--sans);color:rgba(246,239,230,.82);transition:background .3s,border-color .3s,color .3s}
.scen:hover{background:rgba(246,239,230,.08)}
.scen[aria-selected="true"]{background:var(--cream2);color:var(--ink);border-color:var(--cream2)}
.scen-n{font:500 11px/1 var(--mono);letter-spacing:.08em;opacity:.55;flex:none}
.flow-stage{position:relative;border-radius:14px;background:radial-gradient(120% 80% at 50% 0%,rgba(232,105,79,.12),transparent 60%),rgba(246,239,230,.04);border:1px solid rgba(246,239,230,.12);padding:clamp(18px,2vw,30px);display:grid;gap:18px}
.fl-k{display:block;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-bottom:10px}
html[lang^="zh"] .fl-k{text-transform:none;letter-spacing:.04em}
.fl-you .fl-q{margin:0;font:400 clamp(22px,2vw,32px)/1.2 var(--serif);min-height:1.2em}
.fl-you .fl-q::before{content:"“"}.fl-you .fl-q::after{content:"”"}
html[lang^="zh"] .fl-you .fl-q::before{content:"「"}html[lang^="zh"] .fl-you .fl-q::after{content:"」"}
.fl-map{position:relative;display:grid;grid-template-columns:1fr minmax(150px,.8fr) 1fr;grid-template-rows:auto auto auto;gap:14px 18px;padding:6px 0}
.fl-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fl-lines line{stroke:rgba(246,239,230,.16);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:4 5}
.fl-lines line.on{stroke:var(--accent);stroke-dasharray:none;animation:linein .5s var(--ease)}
@keyframes linein{from{opacity:0}to{opacity:1}}
.fl-node{position:relative;z-index:1;min-height:132px;padding:16px 16px 14px;border-radius:10px;background:rgba(14,10,17,.82);border:1px solid rgba(246,239,230,.12);transition:border-color .4s,box-shadow .4s,transform .5s var(--ease)}
.fl-node[data-node="memory"]{grid-area:1/1}.fl-node[data-node="agents"]{grid-area:1/3}
.fl-node[data-node="skills"]{grid-area:3/1}.fl-node[data-node="tools"]{grid-area:3/3}
.fl-node.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 50px -30px var(--accent)}
.fl-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fl-chips li{font:500 13px/1.2 var(--sans);padding:7px 10px;border-radius:99px;background:rgba(246,239,230,.1);transition:opacity .35s,transform .45s var(--ease)}
.fl-chips li.none{background:none;opacity:.45;padding-left:0;font-style:italic}
.js .fl-chips li.pending{opacity:0;transform:translateY(6px)}
.fl-ai{grid-area:2/2;position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:4px;padding:16px 10px;border-radius:999px;background:rgba(14,10,17,.9);border:1px solid rgba(246,239,230,.2);--bf-c:var(--cream2)}
.fl-bf{width:54px;margin-bottom:4px}
.fl-ai strong{font:600 15px/1.2 var(--sans)}
.fl-ai small{font:400 12px/1.3 var(--sans);opacity:.6}
.fl-ai.pulse{animation:aipulse 1.2s var(--ease)}
@keyframes aipulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:0 0 0 26px transparent}}
.fl-res{padding:18px 20px;border-radius:10px;background:var(--cream2);color:var(--ink);transition:opacity .5s,transform .6s var(--ease)}
.fl-res .fl-r{margin:0;font:500 16.5px/1.5 var(--sans)}
.js .fl-res.pending{opacity:0;transform:translateY(10px)}
.flow-note{grid-column:2;margin:0;font:400 13px/1.5 var(--sans);opacity:.55}

/* ---------- platform: the four building blocks, loop, safety ---------- */
.p-blocks{background:var(--cream2);color:var(--ink);padding:clamp(90px,14vh,160px) var(--pad)}
.blocks{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.blk{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:10px;overflow:hidden;background:var(--cream);border:1px solid rgba(43,31,51,.08);transition-delay:var(--d,0s)}
.blk figure{margin:0;min-height:100%;background:#cfc6ba}
.blk img{width:100%;height:100%;object-fit:cover}
.blk-txt{padding:clamp(22px,2.2vw,34px)}
.blk-k{display:flex;gap:12px;align-items:center;margin:0 0 14px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.blk-k b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--cream);font-weight:500;letter-spacing:0}
html[lang^="zh"] .blk-k{text-transform:none;letter-spacing:.04em}
.blk h3{font:400 clamp(28px,2.4vw,40px)/1.05 var(--serif);margin:0 0 12px}
.blk p{margin:0;font:400 15.5px/1.6 var(--sans);color:rgba(43,31,51,.8)}
.blk .more{display:inline-block;margin-top:16px;font:600 14px/1.45 var(--sans);color:var(--ink);text-underline-offset:4px}
.blk .more+.more{display:block;margin-top:10px}
.loop{max-width:1500px;margin:clamp(70px,11vh,130px) auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:center}
.loop-txt h3{font:400 clamp(40px,5vw,84px)/1 var(--serif);letter-spacing:-.022em;margin:0 0 20px}
html[lang^="zh"] .loop-txt h3{line-height:1.25;letter-spacing:.02em}
.loop-txt p{margin:0;font:400 clamp(17px,1.3vw,20px)/1.6 var(--sans);color:rgba(43,31,51,.8);max-width:28em}
.loop-ring{list-style:none;margin:40px 0;padding:0;position:relative;aspect-ratio:1;max-width:440px;width:100%;justify-self:center;border-radius:50%;border:1.5px dashed rgba(43,31,51,.25)}
.loop-ring li{position:absolute;width:40%;font:500 15px/1.35 var(--sans);text-align:center;transform:translate(-50%,-50%);background:var(--cream2);padding:8px 6px}
.loop-ring li span{display:block;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--coral-deep);margin-bottom:6px}
.loop-ring li:nth-child(1){left:50%;top:0}.loop-ring li:nth-child(2){left:100%;top:50%}
.loop-ring li:nth-child(3){left:50%;top:100%}.loop-ring li:nth-child(4){left:0;top:50%}
.loop-ring .loop-core{left:50%;top:50%;width:30%;background:none;padding:0;--bf-c:var(--ink)}
.loop-ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.safe{max-width:1500px;margin:clamp(70px,11vh,130px) auto 0;padding:clamp(28px,3vw,48px);border-radius:12px;background:var(--ink);color:var(--cream2)}
.safe h3{font:400 clamp(32px,3.4vw,56px)/1.05 var(--serif);margin:0 0 26px}
html[lang^="zh"] .safe h3{line-height:1.3}
.safe ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 30px}
.safe li{position:relative;padding:16px 0 0 30px;border-top:1px solid rgba(246,239,230,.18);font:400 15.5px/1.55 var(--sans);color:rgba(246,239,230,.88)}
.safe li::before{content:"";position:absolute;left:2px;top:21px;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* ---------- platform: 03 tools ---------- */
.p-tools{background:var(--cream);color:var(--ink);padding:clamp(100px,15vh,170px) var(--pad)}
.tool-filter{max-width:1500px;margin:0 auto 26px;display:flex;flex-wrap:wrap;gap:8px}
.tf{font:500 14px/1 var(--sans);padding:11px 16px;border-radius:99px;border:1px solid rgba(43,31,51,.2);background:transparent;color:var(--ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.tf sup{font:500 10px/1 var(--mono);opacity:.6;margin-left:3px}
.tf:hover{border-color:var(--ink)}
.tf[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.tool-grid{list-style:none;margin:0 auto;padding:0;max-width:1500px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tool{padding:20px 20px 22px;border-radius:8px;background:var(--cream2);border:1px solid rgba(43,31,51,.07);transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .3s}
.tool:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(43,31,51,.55)}
.tool-cat{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:12px}
html[lang^="zh"] .tool-cat{text-transform:none;letter-spacing:.04em}
.tool h3{font:600 17px/1.25 var(--sans);margin:0 0 8px;letter-spacing:-.01em}
.tool p{margin:0;font:400 14.5px/1.55 var(--sans);color:rgba(43,31,51,.75)}
.tool.out{display:none}
.tool-note{max-width:1500px;margin:26px auto 0;font:400 14px/1.6 var(--sans);color:rgba(43,31,51,.62)}

/* ---------- platform: 04 achieve ---------- */
.p-ach{background:var(--night2);color:var(--cream2);padding:clamp(100px,15vh,170px) var(--pad)}
.p-ach .label{color:var(--accent)}
.ach-grid{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.ach{position:relative;border-radius:12px;overflow:hidden;background:#000;min-height:420px;display:grid;align-items:end;transition-delay:var(--d,0s)}
.ach img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform 1.4s var(--ease),opacity .6s}
.ach:hover img{transform:scale(1.05);opacity:.75}
.ach::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,6,11,.92) 10%,rgba(9,6,11,.2) 70%)}
.ach-txt{position:relative;z-index:1;padding:clamp(22px,2.4vw,36px)}
.ach-k{margin:0 0 10px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
html[lang^="zh"] .ach-k{text-transform:none;letter-spacing:.06em}
.ach h3{font:400 clamp(30px,2.8vw,48px)/1.05 var(--serif);margin:0 0 12px;letter-spacing:-.01em}
.ach p{margin:0;font:400 15.5px/1.6 var(--sans);color:rgba(246,239,230,.86);max-width:34em}
.ach .ach-ex{margin-top:16px;padding-top:14px;border-top:1px solid rgba(246,239,230,.2);font-size:14.5px;color:rgba(246,239,230,.75)}
.ach-ex span{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-bottom:8px}
.ach-triad{max-width:1500px;margin:clamp(60px,10vh,110px) auto 0}

/* ---------- platform: proof band + 05 start ---------- */
.proof-label{color:var(--accent);margin:0}
.proof-p{display:block;max-width:34em;font:400 clamp(15px,1.15vw,18px)/1.6 var(--sans);color:rgba(246,239,230,.85)}
.p-proof .band-h{max-width:13em;font-size:clamp(34px,4.4vw,76px)}
.p-start{background:var(--cream2);color:var(--ink);padding:clamp(100px,15vh,170px) var(--pad) clamp(70px,10vh,110px)}
.start-steps{list-style:none;margin:0 auto;padding:0;max-width:1500px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);counter-reset:s}
.start-steps li{padding:28px 0 0;border-top:2px solid var(--ink);transition-delay:var(--d,0s)}
.start-steps .n{display:block;font:400 clamp(56px,6vw,96px)/.8 var(--serif);color:var(--coral-deep);margin-bottom:22px}
.start-steps h3{font:600 20px/1.3 var(--sans);margin:0 0 10px;letter-spacing:-.01em}
.start-steps p{margin:0;font:400 16px/1.6 var(--sans);color:rgba(43,31,51,.78)}
.start-cta{margin:clamp(40px,6vh,64px) auto 0;display:flex;width:max-content}
.p-start .start-cta{margin-left:max(0px,calc((100% - 1500px) / 2))}

/* ---------- responsive (v2) ---------- */
@media (max-width:1180px){
  .what-grid,.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:1fr}
  .flow-note{grid-column:1}
  .scen-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blocks{grid-template-columns:1fr}
  .safe ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .hdr .langs{display:none}
  .lang-dd{display:block}
  .explore-in{grid-template-columns:1fr;align-items:start}
  .loop{grid-template-columns:1fr}
  .loop-ring{max-width:420px;margin:30px 0}
  .p-toc{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
  .p-hero .hero-in{padding-bottom:200px}
  .p-hero .hero-scrim{background:linear-gradient(180deg,rgba(14,10,17,.5) 0%,rgba(14,10,17,0) 18%,rgba(14,10,17,.28) 34%,rgba(14,10,17,.8) 58%,rgba(14,10,17,.9) 100%)}
  .ach-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .mainnav a[aria-current="page"]{display:none}
  .mainnav a{font-size:13px;padding:9px 8px}
  .what-grid,.tool-grid,.scen-list,.safe ul,.start-steps{grid-template-columns:1fr}
  .blk{grid-template-columns:1fr}
  .blk figure{aspect-ratio:16/9}
  .fl-map{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
  .fl-ai{grid-area:1/1/2/3;border-radius:12px;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:12px;text-align:left}
  .fl-ai .fl-bf{grid-row:1/3;width:40px;margin:0}
  .fl-node[data-node="memory"]{grid-area:2/1}.fl-node[data-node="agents"]{grid-area:2/2}
  .fl-node[data-node="skills"]{grid-area:3/1}.fl-node[data-node="tools"]{grid-area:3/2}
  .fl-node{min-height:0;padding:12px}
  .fl-lines{display:none}
  .fl-chips li{font-size:12px;padding:6px 8px}
  .scen{padding:13px 14px;font-size:15px}
  .loop-ring{aspect-ratio:auto;max-width:none;margin:10px 0 0;border:0;border-radius:0;display:grid;gap:8px}
  .loop-ring::after,.loop-ring .loop-core{display:none}
  .loop-ring li{position:static;transform:none;width:auto;text-align:left;padding:14px 16px;border-radius:8px;background:var(--cream);font-size:15px}
  .p-toc{display:none}
  .p-hero .hero-in{padding-bottom:84px}
  .ach{min-height:380px}
  .works{flex-direction:column;align-items:flex-start}
}
@media (max-width:380px){
  .mainnav a{font-size:12px;padding:8px 6px}
}
@media (prefers-reduced-motion:reduce){
  .loop-ring::after{animation:none}
  .p-lede,.p-ctas{animation:none;opacity:1}
}

/* =====================================================================
   v3 · Website Builder page (/website-builder/)
   The page runs in the blueprint palette (the logo turns blueprint blue).
   Signature: a sticky "browser" stage that plays the seven steps while the texts scroll.
   ===================================================================== */
.wb-hero,.wb-build,.wb-bar-sec{--wb-bg:#0B1220;--wb-bg2:#101A2C;--wb-line:rgba(143,176,220,.18);--wb-sky:#9DBBE3;--wb-blue:#3462A6;--wb-coral:#E8694F}
.mainnav[data-page="builder"] a[data-nav="platform"]{opacity:1}
.wb-hero{position:relative;min-height:92vh;min-height:92svh;display:grid;align-items:end;overflow:hidden;background:radial-gradient(90% 70% at 78% 30%,rgba(52,98,166,.34),transparent 62%),var(--wb-bg);color:var(--cream2)}
.wb-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(157,187,227,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(157,187,227,.09) 1px,transparent 1px);background-size:56px 56px;background-position:-1px -1px;-webkit-mask-image:radial-gradient(80% 70% at 70% 35%,#000 20%,transparent 75%);mask-image:radial-gradient(80% 70% at 70% 35%,#000 20%,transparent 75%);animation:wbgrid 40s linear infinite}
@keyframes wbgrid{to{background-position:55px 55px}}
.wb-hero-in{position:relative;z-index:1;padding-bottom:clamp(150px,22vh,230px)}
.wb-bp{position:absolute;right:calc(var(--pad) - 10px);top:clamp(92px,13vh,140px);width:min(38vw,580px);height:auto;overflow:visible;opacity:.62;pointer-events:none}
.wb-bp *{fill:none;stroke:#9DBBE3;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:bpdraw 1.6s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(.3s + var(--i,0) * .09s)}
.wb-bp .dim{stroke:rgba(157,187,227,.55);stroke-width:1}
.wb-bp text{stroke:none;fill:#9DBBE3;font:400 11px var(--mono);letter-spacing:.06em;stroke-dasharray:none;opacity:0;animation:fadein .8s ease forwards;animation-delay:calc(1.4s + var(--i,0) * .08s)}
.wb-bp .fill-img{stroke:none;fill:url(#bpg);stroke-dasharray:none;opacity:0;animation:fadein 1.4s ease 2.6s forwards}
.wb-bp .fill-cta{stroke:none;fill:#E8694F;stroke-dasharray:none;opacity:0;animation:fadein .8s ease 3s forwards}
.wb-bp .fill-h{stroke:none;fill:#F6EFE6;stroke-dasharray:none;opacity:0;animation:fadein .9s ease 2.8s forwards}
@keyframes bpdraw{to{stroke-dashoffset:0}}
.wb-back{display:inline-flex;gap:8px;align-items:center;margin:0 0 clamp(22px,4vh,40px);font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;opacity:.7;transition:opacity .2s}
.wb-back:hover{opacity:1}
html[lang^="zh"] .wb-back{text-transform:none}
.wb-h1{font-size:clamp(46px,6.3vw,118px)}
html[lang^="zh"] .wb-h1{font-size:clamp(40px,6.2vw,108px)}
.wb-index{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(26px,4vh,40px);margin:0;padding:18px 0 0;list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;border-top:1px solid rgba(246,239,230,.2)}
.wb-index a{display:flex;flex-direction:column;gap:8px;font:500 13.5px/1.3 var(--sans);text-decoration:none;opacity:.74;transition:opacity .2s}
.wb-index a:hover{opacity:1}
.wb-index b{font:500 11px/1 var(--mono);color:var(--wb-sky);letter-spacing:.08em}

/* ---- the method: scrollytelling ---- */
.wb-build{background:var(--wb-bg);color:var(--cream2);padding:clamp(100px,15vh,170px) var(--pad) clamp(80px,12vh,140px)}
.wb-build .label,.wb-bar-sec .label{color:var(--wb-sky)}
.wb-scrolly{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr);gap:clamp(32px,5vw,90px);align-items:start}
.wb-stage-col{grid-column:2;grid-row:1;height:100%}
.wb-steps{grid-column:1;grid-row:1}
.wb-stage{position:sticky;top:clamp(86px,calc(50vh - 300px),200px)}
.wb-step{min-height:76vh;display:flex;flex-direction:column;justify-content:center;padding:4vh 0;opacity:.32;transition:opacity .6s var(--ease)}
.wb-step:first-child{min-height:62vh;justify-content:flex-start;padding-top:2vh}
.wb-step:last-child{min-height:70vh}
.wb-step.on{opacity:1}
.wb-k{display:flex;align-items:center;gap:14px;margin:0 0 18px;font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--wb-sky)}
html[lang^="zh"] .wb-k{letter-spacing:.06em}
.wb-k b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid currentColor;font-weight:500;letter-spacing:0;transition:background .4s,color .4s}
.wb-step.on .wb-k b{background:var(--wb-sky);color:var(--wb-bg)}
.wb-step h3{font:400 clamp(30px,3.1vw,50px)/1.06 var(--serif);letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance}
html[lang^="zh"] .wb-step h3{line-height:1.3;letter-spacing:.02em}
.wb-step>p{margin:0;font:400 clamp(16px,1.15vw,18px)/1.65 var(--sans);color:rgba(246,239,230,.84);max-width:34em}
.wb-li{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;max-width:34em}
.wb-li li{position:relative;padding-left:26px;font:400 15px/1.55 var(--sans);color:rgba(246,239,230,.72)}
.wb-li li::before{content:"";position:absolute;left:2px;top:.72em;width:12px;height:1px;background:var(--wb-sky)}
.wb-note{max-width:1500px;margin:clamp(30px,5vh,60px) auto 0;font:400 13px/1.5 var(--sans);opacity:.55}

/* the browser window */
.wb-win{position:relative;border-radius:14px;background:var(--wb-bg2);border:1px solid var(--wb-line);box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.3);overflow:hidden;aspect-ratio:16/11;container-type:inline-size}
.wb-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--wb-line);background:rgba(11,18,32,.6)}
.wb-bar>i{width:10px;height:10px;border-radius:50%;background:rgba(157,187,227,.25)}
.wb-bar>i:first-child{background:rgba(232,105,79,.7)}
.wb-url{flex:1;min-width:0;margin-left:10px;padding:6px 12px;border-radius:99px;background:rgba(157,187,227,.08);font:400 11.5px/1 var(--mono);color:rgba(246,239,230,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-eg{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--wb-sky);border:1px solid rgba(157,187,227,.4);padding:5px 8px;border-radius:99px;white-space:nowrap}
html[lang^="zh"] .wb-eg{letter-spacing:.04em}
.wb-view{position:absolute;inset:38px 0 0;font:400 max(11px,1.5cqw)/1.35 var(--sans);color:var(--cream2)}
.sc{position:absolute;inset:0;padding:4.2cqw;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.sc.on{opacity:1;visibility:visible;transition:opacity .55s var(--ease) .1s,visibility 0s}
.sc *{transition-timing-function:cubic-bezier(.22,1,.36,1)}
.s-k{margin:0 0 1.4cqw;font:500 max(9.5px,1.15cqw)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--wb-sky)}
html[lang^="zh"] .s-k{letter-spacing:.04em}
/* rail */
.wb-rail{display:flex;gap:8px;justify-content:center;margin-top:18px}
.wb-rail a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--wb-line);font:500 11px/1 var(--mono);color:rgba(246,239,230,.6);text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.wb-rail a:hover{border-color:var(--wb-sky);color:var(--cream2)}
.wb-rail a[aria-current="step"]{background:var(--wb-sky);border-color:var(--wb-sky);color:var(--wb-bg)}

/* scene 1 · goal and market */
.sc1{display:grid;grid-template-columns:1fr 1.15fr;gap:4cqw;align-items:start}
.s1-tags{list-style:none;margin:0 0 3cqw;padding:0;display:flex;flex-wrap:wrap;gap:1cqw}
.s1-tags li{padding:.9cqw 1.6cqw;border-radius:99px;border:1px solid rgba(157,187,227,.45);color:var(--wb-sky);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s}
.sc1.on .s1-tags li{opacity:1;transform:none}
.sc1.on .s1-tags li:nth-child(2){transition-delay:.12s}.sc1.on .s1-tags li:nth-child(3){transition-delay:.24s}
.s1-meters{display:grid;gap:2.2cqw}
.meter span{display:block;margin-bottom:.8cqw;opacity:.85}
.meter i{display:block;height:1.1cqw;min-height:6px;border-radius:99px;background:rgba(157,187,227,.14);position:relative;overflow:hidden}
.meter i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--wb-blue),var(--wb-sky));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.22,1,.36,1)}
.sc1.on .meter i::after{transform:scaleX(var(--v))}
.sc1.on .meter:nth-child(1) i::after{transition-delay:.4s}.sc1.on .meter:nth-child(2) i::after{transition-delay:.6s}.sc1.on .meter:nth-child(3) i::after{transition-delay:.8s}
.s1-src{margin:3cqw 0 0;font:400 max(9.5px,1.1cqw)/1.3 var(--mono);opacity:.55}
.s1-serp ol{list-style:none;margin:0;padding:0;display:grid;gap:1.3cqw}
.s1-serp li{position:relative;display:grid;grid-template-columns:2.4cqw 1fr;gap:1.4cqw;align-items:center;padding:1.3cqw 1.5cqw;border-radius:8px;background:rgba(246,239,230,.05);border:1px solid rgba(246,239,230,.08);opacity:0;transform:translateX(12px);transition:opacity .5s,transform .6s,border-color .4s}
.s1-serp li b{width:2.4cqw;height:2.4cqw;border-radius:4px;background:rgba(157,187,227,.3)}
.s1-serp li i{height:2.6cqw;background:linear-gradient(rgba(246,239,230,.32),rgba(246,239,230,.32)) 0 15%/72% 32% no-repeat,linear-gradient(rgba(246,239,230,.14),rgba(246,239,230,.14)) 0 95%/92% 26% no-repeat}
.s1-serp li em{position:absolute;right:1.2cqw;top:50%;translate:0 -50%;font:500 max(9px,1.05cqw)/1 var(--mono);font-style:normal;letter-spacing:.04em;padding:.7cqw 1cqw;border-radius:99px;background:var(--wb-coral);color:#fff;opacity:0;scale:.6;transition:opacity .35s,scale .5s cubic-bezier(.34,1.56,.64,1)}
.sc1.on .s1-serp li{opacity:1;transform:none}
.sc1.on .s1-serp li:nth-child(1){transition-delay:.3s}.sc1.on .s1-serp li:nth-child(2){transition-delay:.4s}.sc1.on .s1-serp li:nth-child(3){transition-delay:.5s}.sc1.on .s1-serp li:nth-child(4){transition-delay:.6s}.sc1.on .s1-serp li:nth-child(5){transition-delay:.7s}
.sc1.on .s1-serp li em{opacity:1;scale:1}
.sc1.on .s1-serp li:nth-child(1) em{transition-delay:1.3s}.sc1.on .s1-serp li:nth-child(3) em{transition-delay:1.55s}.sc1.on .s1-serp li:nth-child(4) em{transition-delay:1.8s}
.sc1.on .s1-serp li:has(em){border-color:rgba(232,105,79,.45);transition-delay:1.3s}
.s1-stamp{position:absolute;right:5cqw;bottom:5cqw;padding:1.4cqw 2.4cqw;border:2px solid var(--wb-coral);border-radius:6px;color:var(--wb-coral);font:500 max(13px,2.3cqw)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;rotate:-8deg;opacity:0;scale:1.8;transition:opacity .25s,scale .45s cubic-bezier(.3,1.4,.5,1)}
html[lang^="zh"] .s1-stamp{letter-spacing:.1em}
.sc1.on .s1-stamp{opacity:1;scale:1;transition-delay:2.35s}

/* scene 2 · promise and structure */
.sc2{display:grid;align-content:center;gap:4.4cqw}
.s2-hero{border-radius:10px;background:var(--cream);color:var(--ink);padding:4cqw 4.4cqw 3.6cqw;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .7s}
.sc2.on .s2-hero{opacity:1;transform:none}
.s2-promise{margin:0 0 2.4cqw;min-height:1.1em;font:400 max(20px,4.4cqw)/1.05 var(--serif);letter-spacing:-.015em}
.s2-promise.typing::after{content:"";display:inline-block;width:2px;height:.9em;margin-left:3px;vertical-align:-.08em;background:var(--wb-blue);animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.s2-check{display:inline-flex;align-items:center;gap:1cqw;padding:.9cqw 1.6cqw .9cqw 1.1cqw;border-radius:99px;background:rgba(52,98,166,.12);color:var(--wb-blue);font:600 max(11px,1.35cqw)/1 var(--sans);opacity:0;scale:.8;transition:opacity .4s,scale .5s cubic-bezier(.34,1.56,.64,1)}
.s2-check svg{width:max(12px,1.6cqw);height:auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sc2.done .s2-check{opacity:1;scale:1}
.s2-tree{display:grid;justify-items:center;align-content:start}
.s2-tree span,.s2-tree li{padding:1.1cqw 2cqw;border-radius:8px;border:1px solid rgba(157,187,227,.4);background:rgba(11,18,32,.7);white-space:nowrap}
.s2-root{color:var(--wb-sky);opacity:0;transition:opacity .4s}
.s2-lines{width:100%;height:6cqw;overflow:visible}
.s2-lines path{fill:none;stroke:rgba(157,187,227,.5);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:800;stroke-dashoffset:800;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
.s2-tree ul{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:0;justify-items:center}
.s2-tree li{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s}
.sc2.done .s2-root{opacity:1}
.sc2.done .s2-lines path{stroke-dashoffset:0;transition-delay:.2s}
.sc2.done .s2-tree li{opacity:1;transform:none}
.sc2.done .s2-tree li:nth-child(1){transition-delay:.7s}.sc2.done .s2-tree li:nth-child(2){transition-delay:.8s}.sc2.done .s2-tree li:nth-child(3){transition-delay:.9s}.sc2.done .s2-tree li:nth-child(4){transition-delay:1s}

/* scene 3 · style frame */
.sc3{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2.2cqw}
.s3-tile{position:relative;border-radius:10px;border:1px solid var(--wb-line);background:rgba(11,18,32,.55);padding:2.2cqw 2.4cqw;overflow:hidden;opacity:0;transform:scale(.96);transition:opacity .5s,transform .7s}
.sc3.on .s3-tile{opacity:1;transform:none}
.sc3.on .s3-tile:nth-child(2){transition-delay:.15s}.sc3.on .s3-tile:nth-child(3){transition-delay:.3s}.sc3.on .s3-tile:nth-child(4){transition-delay:.45s}
.s3-type{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:2.6cqw}
.s3-type .s-k{grid-column:1/3}
.s3-aa{font:400 max(34px,8.4cqw)/.9 var(--serif);align-self:center}
.s3-type ul{list-style:none;margin:0;padding:0;display:grid;gap:1cqw;align-content:center}
.s3-type li{position:relative;font:400 max(9px,1.05cqw)/1 var(--mono);opacity:.6;padding-left:4cqw}
.s3-type li::before{content:"";position:absolute;left:0;top:50%;height:max(4px,.7cqw);width:calc(var(--w) * .7);max-width:calc(100% - 4cqw);translate:4cqw -50%;border-radius:2px;background:rgba(246,239,230,.7);transform-origin:0 50%;transform:scaleX(0);transition:transform .9s cubic-bezier(.22,1,.36,1) .6s}
.s3-type li{padding-left:0}
.s3-type li::before{left:0;translate:4cqw -50%}
.sc3.on .s3-type li::before{transform:scaleX(1)}
.s3-col ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,1fr);gap:.5cqw;align-items:end;height:calc(100% - 3cqw)}
.s3-col li{height:100%;border-radius:3px;background:var(--c);transform-origin:50% 100%;transform:scaleY(0);transition:transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(.45s + var(--i) * 45ms)}
.sc3.on .s3-col li{transform:scaleY(1)}
.s3-space ul{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:1.6cqw;height:calc(100% - 3cqw)}
.s3-space li{width:calc(var(--s) * .26cqw);aspect-ratio:1;border:1px solid var(--wb-sky);background:rgba(157,187,227,.12);opacity:0;transition:opacity .4s;transition-delay:calc(.6s + var(--s) * 18ms)}
.sc3.on .s3-space li{opacity:1}
.s3-motion svg{position:absolute;left:2.4cqw;right:2.4cqw;top:5.2cqw;bottom:5cqw;width:calc(100% - 4.8cqw);height:calc(100% - 10.2cqw)}
.s3-axis{fill:none;stroke:rgba(246,239,230,.2);stroke-width:1;vector-effect:non-scaling-stroke}
.s3-curve{fill:none;stroke:var(--wb-sky);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1) .7s}
.sc3.on .s3-curve{stroke-dashoffset:0}
.s3-run{position:absolute;left:2.4cqw;right:2.4cqw;top:5.2cqw;bottom:5cqw}
.s3-run b{position:absolute;left:0;bottom:0;width:max(9px,1.3cqw);height:max(9px,1.3cqw);margin:0 0 calc(max(9px,1.3cqw) / -2) calc(max(9px,1.3cqw) / -2);border-radius:50%;background:var(--wb-coral);box-shadow:0 0 0 4px rgba(232,105,79,.2);opacity:0}
.sc3.on .s3-run b{opacity:1;transition:opacity .3s 1.6s;animation:runx 2.2s linear 1.6s infinite alternate,runy 2.2s cubic-bezier(.22,1,.36,1) 1.6s infinite alternate}
@keyframes runx{from{left:0}to{left:100%}}
@keyframes runy{from{bottom:0}to{bottom:100%}}
.s3-motion code{position:absolute;left:2.4cqw;bottom:1.4cqw;font:400 max(8.5px,.95cqw)/1 var(--mono);opacity:.55}
.s3-sig{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:center;gap:1cqw;padding:1.3cqw 2.2cqw;border-radius:99px;background:var(--wb-coral);color:#fff;font:600 max(11px,1.45cqw)/1 var(--sans);white-space:nowrap;box-shadow:0 14px 40px -12px rgba(232,105,79,.7);opacity:0;scale:.5;transition:opacity .35s,scale .6s cubic-bezier(.34,1.56,.64,1)}
.s3-sig svg{width:max(13px,1.7cqw);fill:currentColor}
.sc3.on .s3-sig{opacity:1;scale:1;transition-delay:2s}

/* scene 4 · stack */
.sc4{display:grid;align-content:center;gap:4cqw}
.s4-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw}
.s4-card{position:relative;display:grid;gap:1.4cqw;padding:3cqw 2.6cqw;border-radius:12px;border:1px solid var(--wb-line);background:rgba(11,18,32,.55);opacity:0;transform:translateY(14px);transition:opacity .5s,transform .7s}
.sc4.on .s4-card{opacity:1;transform:none;animation:pick 6s 1.2s infinite}
.sc4.on .s4-card:nth-child(2){transition-delay:.15s;animation-delay:3.2s}
.sc4.on .s4-card:nth-child(3){transition-delay:.3s;animation-delay:5.2s}
@keyframes pick{0%,4%{border-color:var(--wb-line);box-shadow:none;transform:none}8%,30%{border-color:var(--wb-sky);box-shadow:0 0 0 1px var(--wb-sky),0 24px 50px -24px rgba(157,187,227,.6);transform:translateY(-6px)}34%,100%{border-color:var(--wb-line);box-shadow:none;transform:none}}
.s4-card b{font:600 max(12px,1.7cqw)/1.25 var(--sans)}
.s4-card code{font:400 max(10px,1.3cqw)/1.2 var(--mono);color:var(--wb-sky)}
.s4-ico{display:flex;gap:.6cqw;height:5cqw;align-items:flex-end}
.s4-ico i{flex:1;border-radius:3px;background:rgba(157,187,227,.3)}
.s4-ico i:nth-child(1){height:100%}.s4-ico i:nth-child(2){height:70%}.s4-ico i:nth-child(3){height:45%}
.s4-ico2 i:nth-child(1){height:60%;background:rgba(232,105,79,.5)}.s4-ico2 i:nth-child(2){height:100%}
.s4-ico3 i{height:100%;max-width:40%}
.s4-tag{justify-self:center;margin:0;padding:1.1cqw 2.2cqw;border-radius:99px;border:1px dashed rgba(157,187,227,.5);font:400 max(10px,1.3cqw)/1 var(--mono);color:var(--wb-sky);opacity:0;transition:opacity .5s .9s}
.sc4.on .s4-tag{opacity:1}

/* scene 5 · build */
.sc5{display:grid;grid-template-columns:1.6fr 1fr;gap:3cqw;align-items:center}
.s5-page{border-radius:10px;background:var(--cream);color:var(--ink);padding:2.2cqw;display:grid;gap:2.2cqw;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .7s}
.sc5.on .s5-page{opacity:1;transform:none}
.s5-nav{display:flex;align-items:center;gap:1.6cqw}
.s5-nav i{width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--wb-coral)}
.s5-nav span{width:6cqw;height:.9cqw;border-radius:2px;background:rgba(43,31,51,.2)}
.s5-nav span:first-of-type{margin-left:auto}
.s5-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:2cqw;align-items:center}
.s5-txt{display:grid;gap:1.1cqw;justify-items:start}
.s5-h{margin:0;font:400 max(14px,2.5cqw)/1.05 var(--serif);color:transparent;border-radius:3px;background:rgba(43,31,51,.12);transition:color .6s .8s,background-color .6s .8s}
.sc5.on .s5-h{color:var(--ink);background-color:transparent}
.s5-l{width:100%;height:.9cqw;border-radius:2px;background:rgba(43,31,51,.16)}
.s5-l.s{width:70%}
.s5-cta{padding:.9cqw 1.8cqw;border-radius:99px;background:rgba(43,31,51,.12);color:transparent;font:600 max(9px,1.15cqw)/1 var(--sans);transition:background-color .5s 1.1s,color .5s 1.1s}
.sc5.on .s5-cta{background:var(--ink);color:var(--cream)}
.s5-img{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:rgba(43,31,51,.1);display:grid;align-items:end}
.s5-img::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 30% 30%,#F6EFE6 0%,transparent 60%),linear-gradient(135deg,#3462A6 0%,#9DBBE3 48%,#E8694F 100%);opacity:0;transition:opacity 1s 1.3s}
.s5-img::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);translate:-120% 0}
.sc5.on .s5-img::before{opacity:1}
.sc5.on .s5-img::after{animation:sheen 1.4s 1.5s ease-out}
@keyframes sheen{to{translate:120% 0}}
.s5-img span{position:relative;z-index:1;margin:1cqw;justify-self:start;padding:.6cqw 1cqw;border-radius:99px;background:rgba(14,10,17,.72);color:#fff;font:500 max(8.5px,1cqw)/1 var(--mono);opacity:0;transition:opacity .4s 2.1s}
.sc5.on .s5-img span{opacity:1}
.s5-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw}
.s5-cards i{height:6cqw;border-radius:6px;background:rgba(43,31,51,.08);border:1px solid rgba(43,31,51,.1);transition:background-color .5s,border-color .5s}
.sc5.on .s5-cards i{background:#fff;border-color:rgba(43,31,51,.14)}
.sc5.on .s5-cards i:nth-child(1){transition-delay:1.5s}.sc5.on .s5-cards i:nth-child(2){transition-delay:1.65s}.sc5.on .s5-cards i:nth-child(3){transition-delay:1.8s}
.s5-seo{list-style:none;margin:0;padding:0;display:grid;gap:1.2cqw}
.s5-seo li,.s6-checks li{display:flex;align-items:center;gap:1.2cqw;padding:1.1cqw 1.4cqw;border-radius:8px;border:1px solid var(--wb-line);background:rgba(11,18,32,.55);font:400 max(10px,1.3cqw)/1 var(--mono);opacity:0;transform:translateX(10px);transition:opacity .4s,transform .5s;transition-delay:calc(1s + var(--i) * .22s)}
.s5-seo svg,.s6-checks svg{flex:none;width:max(11px,1.5cqw);height:auto;fill:none;stroke:var(--wb-sky);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sc5.on .s5-seo li,.sc6.on .s6-checks li{opacity:1;transform:none}

/* scene 6 · test */
.sc6{display:grid;grid-template-columns:1.45fr 1fr;gap:3cqw;align-items:center}
.s6-devs{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:2.2cqw;padding:2cqw 0}
.s6-dev{display:grid;gap:1cqw;justify-items:center;font:500 max(9px,1.05cqw)/1 var(--mono);color:rgba(246,239,230,.6);opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s}
.sc6.on .s6-dev{opacity:1;transform:none}
.sc6.on .s6-dev.t{transition-delay:.12s}.sc6.on .s6-dev.m{transition-delay:.24s}
.s6-scr{display:grid;align-content:start;gap:7%;padding:8%;border-radius:6px;border:2px solid rgba(246,239,230,.35);background:var(--cream)}
.s6-dev.d .s6-scr{width:26cqw;aspect-ratio:16/10}
.s6-dev.t .s6-scr{width:12cqw;aspect-ratio:3/4}
.s6-dev.m .s6-scr{width:6.4cqw;aspect-ratio:9/18;border-radius:8px}
.s6-scr i{height:max(3px,.8cqw);border-radius:2px;background:rgba(43,31,51,.18)}
.s6-scr i:first-child{background:var(--wb-coral);width:40%}
.s6-scr i:last-child{height:max(10px,3cqw);background:rgba(52,98,166,.3)}
.s6-scan{position:absolute;top:0;bottom:2.4cqw;left:0;width:3px;border-radius:2px;background:var(--wb-sky);box-shadow:0 0 18px 4px rgba(157,187,227,.6);opacity:0}
.sc6.on .s6-scan{animation:scan 2.6s .8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes scan{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
.s6-side{display:grid;gap:2cqw}
.s6-checks{list-style:none;margin:0;padding:0;display:grid;gap:1cqw}
.s6-checks li{padding:.9cqw 1.3cqw}
.s6-foot{display:flex;flex-wrap:wrap;gap:1cqw;align-items:center}
.s6-r,.s6-score{padding:.9cqw 1.4cqw;border-radius:99px;font:500 max(9.5px,1.15cqw)/1 var(--mono);border:1px solid var(--wb-line);opacity:0;transition:opacity .4s,background-color .4s,color .4s}
.sc6.on .s6-r:nth-child(1){opacity:1;transition-delay:2.6s}
.sc6.on .s6-r:nth-child(2){opacity:1;background:var(--wb-sky);color:var(--wb-bg);border-color:var(--wb-sky);transition-delay:3.2s}
.s6-score{background:var(--wb-coral);border-color:var(--wb-coral);color:#fff}
.sc6.on .s6-score{opacity:1;transition-delay:3.7s}

/* scene 7 · deliver and go live */
.sc7{display:grid;grid-template-columns:1fr 1.5fr;gap:4cqw;align-items:center}
.s7-files{list-style:none;margin:0;padding:2.4cqw;border-radius:10px;border:1px solid var(--wb-line);background:rgba(11,18,32,.55);display:grid;gap:1.2cqw;font:400 max(10px,1.35cqw)/1 var(--mono)}
.s7-files li{position:relative;padding-left:2.8cqw;opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .5s}
.s7-files li::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:1.6cqw;height:1.9cqw;border-radius:2px;border:1px solid rgba(246,239,230,.5)}
.s7-files li.dir{padding-left:2.8cqw;color:var(--wb-sky)}
.s7-files li.dir::before{height:1.4cqw;border-color:var(--wb-sky);background:rgba(157,187,227,.2)}
.s7-files li:not(.dir){margin-left:2cqw}
.sc7.on .s7-files li{opacity:1;transform:none}
.sc7.on .s7-files li:nth-child(2){transition-delay:.12s}.sc7.on .s7-files li:nth-child(3){transition-delay:.24s}.sc7.on .s7-files li:nth-child(4){transition-delay:.36s}.sc7.on .s7-files li:nth-child(5){transition-delay:.48s}.sc7.on .s7-files li:nth-child(6){transition-delay:.6s}.sc7.on .s7-files li:nth-child(7){transition-delay:.72s}
.s7-pipe{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;align-items:center}
.s7-n{position:relative;z-index:1;display:grid;justify-items:center;gap:.8cqw;padding:2.4cqw 1cqw;border-radius:12px;border:1px solid var(--wb-line);background:var(--wb-bg2);text-align:center;font:600 max(11px,1.6cqw)/1.15 var(--sans);transition:border-color .4s,box-shadow .4s}
.s7-n small{font:400 max(9px,1.05cqw)/1.2 var(--mono);opacity:.6}
.s7-track{position:absolute;left:12%;right:12%;top:50%;height:2px;background:rgba(157,187,227,.2)}
.s7-track b{position:absolute;left:0;top:50%;width:max(10px,1.4cqw);height:max(10px,1.4cqw);translate:-50% -50%;border-radius:50%;background:var(--wb-sky);box-shadow:0 0 14px 3px rgba(157,187,227,.6);opacity:0}
.sc7.on .s7-track b{animation:travel 2.6s 1s cubic-bezier(.65,0,.35,1) forwards}
@keyframes travel{0%{left:0;opacity:1}100%{left:100%;opacity:1}}
.sc7.on .s7-n:nth-child(1){border-color:var(--wb-sky);transition-delay:.9s}
.sc7.on .s7-n:nth-child(2){border-color:var(--wb-sky);transition-delay:2.1s}
.sc7.on .s7-live{border-color:var(--wb-coral);box-shadow:0 0 0 1px var(--wb-coral),0 20px 50px -20px rgba(232,105,79,.7);transition-delay:3.5s}
.s7-bf{width:max(28px,5cqw);--bf-a:#F6EFE6;--bf-b:#E8694F;--bf-c:#F6EFE6}
.s7-bf .bf-lo{fill:#F6EFE6;stroke:#E8694F}.s7-bf .bf-up{fill:#E8694F}.s7-bf .bf-body{fill:#F6EFE6}.s7-bf .bf-ant{stroke:#F6EFE6}

/* ---- principles ---- */
.wb-rules{background:var(--cream);color:var(--ink);padding:clamp(100px,15vh,170px) var(--pad)}
.wb-rule-grid{list-style:none;margin:0 auto;padding:0;max-width:1500px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(20px,2.4vw,40px)}
.wb-rule-grid li{padding-top:22px;border-top:1px solid rgba(43,31,51,.2);transition-delay:var(--d,0s)}
.wb-rule-grid .n{display:block;font:500 12px/1 var(--mono);color:var(--wb-blue,#3462A6);letter-spacing:.1em;margin-bottom:16px}
.wb-rule-grid h3{font:400 clamp(26px,2.4vw,36px)/1.1 var(--serif);margin:0 0 12px;letter-spacing:-.01em}
.wb-rule-grid p{margin:0;font:400 16px/1.6 var(--sans);color:rgba(43,31,51,.78)}
/* ---- quality bar ---- */
.wb-bar-sec{background:var(--wb-bg);color:var(--cream2);padding:clamp(100px,15vh,170px) var(--pad)}
.wb-nums{list-style:none;margin:0 auto;padding:0;max-width:1500px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--wb-line);border:1px solid var(--wb-line);border-radius:14px;overflow:hidden}
.wb-nums li{display:grid;align-content:start;gap:14px;padding:clamp(22px,2.4vw,36px);background:var(--wb-bg)}
.wb-nums b{font:400 clamp(38px,4vw,64px)/1 var(--serif);letter-spacing:-.02em;color:var(--wb-sky);white-space:nowrap}
.wb-nums span{font:400 15px/1.5 var(--sans);color:rgba(246,239,230,.75)}
/* ---- team ---- */
.wb-team{background:var(--cream2);color:var(--ink);padding:clamp(100px,15vh,170px) var(--pad) clamp(80px,12vh,130px)}
.wb-team-grid{list-style:none;margin:0 auto;padding:0;max-width:1500px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wb-team-grid>li{padding:24px 22px;border-radius:12px;background:var(--cream);border:1px solid rgba(43,31,51,.1);transition-delay:var(--d,0s)}
.wb-team-grid h3{font:600 17px/1.3 var(--sans);margin:0 0 8px;letter-spacing:-.01em}
.wb-team-grid p{margin:0;font:400 15px/1.55 var(--sans);color:rgba(43,31,51,.75)}
.wb-team-grid>li.wb-tools-tile{background:var(--ink);color:var(--cream2);border-color:var(--ink)}
.wb-tools-tile h3{font:500 12px/1.2 var(--mono)!important;letter-spacing:.14em;text-transform:uppercase;color:#9DBBE3}
html[lang^="zh"] .wb-tools-tile h3{letter-spacing:.04em}
.wb-tools-tile ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.wb-tools-tile li{position:relative;padding-left:18px;font:400 15px/1.45 var(--sans);color:rgba(246,239,230,.85)}
.wb-tools-tile li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:#9DBBE3}
.wb-never li::before{border:0;width:12px;height:2px;background:var(--accent);transform:none;top:26px}
/* ---- delivery ---- */
.wb-deliver{background:var(--cream);color:var(--ink);padding:clamp(100px,15vh,170px) var(--pad) clamp(90px,13vh,150px)}
.wb-files{list-style:none;margin:0 auto;padding:0;max-width:1500px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wb-files li{display:grid;align-content:start;gap:10px;padding:24px 22px 26px;border-radius:12px;border:1px solid rgba(43,31,51,.12);background:#fff;transition-delay:var(--d,0s)}
.wb-files code{justify-self:start;font:500 12.5px/1 var(--mono);padding:7px 10px;border-radius:6px;background:rgba(52,98,166,.1);color:#24497F}
.wb-files h3{font:400 clamp(24px,2vw,30px)/1.1 var(--serif);margin:6px 0 0}
.wb-files p{margin:0;font:400 15px/1.55 var(--sans);color:rgba(43,31,51,.75)}
.wb-end{max-width:1500px;margin:clamp(60px,9vh,100px) auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;padding-top:clamp(30px,4vh,46px);border-top:1px solid rgba(43,31,51,.2)}
.wb-end-h{margin:0;font:400 clamp(30px,3.4vw,54px)/1.05 var(--serif);letter-spacing:-.015em;max-width:16em;text-wrap:balance}
.wb-end-btns{display:flex;flex-wrap:wrap;gap:12px}
.pill.ink-line{color:var(--ink);border-color:rgba(43,31,51,.4)}
.pill.ink-line:hover{background:rgba(43,31,51,.06)}
html[lang^="zh"] .wb-step h3,html[lang^="zh"] .wb-rule-grid h3,html[lang^="zh"] .wb-files h3,html[lang^="zh"] .wb-end-h{line-height:1.3;letter-spacing:.02em}

/* the stage in a narrow box (phones, or a narrow column) */
@container (max-width:560px){
  .sc{padding:4.4cqw}
  .sc1{grid-template-columns:1fr;gap:3cqw}
  .s1-tags{margin-bottom:2cqw}
  .s1-meters{gap:1.6cqw}
  .s1-src{display:none}
  .s1-serp .s-k{display:none}
  .s1-serp li:nth-child(n+4){display:none}
  .s1-serp ol{gap:1.6cqw}
  .s1-serp li{padding:1.6cqw 2cqw}
  .sc3{gap:2.6cqw}
  .s3-aa{font-size:9cqw}
  .s3-type ul{display:none}
  .s4-cards{grid-template-columns:1fr;gap:2cqw}
  .s4-card{grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:3cqw;row-gap:.6cqw;padding:2.4cqw 3cqw}
  .s4-ico{grid-row:1/3;width:9cqw;height:7cqw}
  .sc5{grid-template-columns:1fr;gap:2.4cqw;align-content:start}
  .s5-seo{grid-template-columns:repeat(3,1fr);gap:1.4cqw}
  .s5-seo li{padding:1.4cqw;gap:1cqw;font-size:max(9.5px,2.4cqw)}
  .s5-cards{display:none}
  .sc6{grid-template-columns:1fr;gap:2.4cqw;align-content:start}
  .s6-devs{padding:0}
  .s6-dev.d .s6-scr{width:40cqw}.s6-dev.t .s6-scr{width:17cqw}.s6-dev.m .s6-scr{width:9cqw}
  .s6-checks{grid-template-columns:1fr 1fr}
  .s6-checks li{font-size:max(9.5px,2.3cqw)}
  .sc7{grid-template-columns:1fr;gap:3cqw;align-content:center}
  .s7-files{grid-template-columns:repeat(2,1fr);padding:3cqw;gap:1.8cqw}
  .s7-files li.dir{grid-column:1/3}
  .s7-files li:not(.dir){margin-left:0}
}

@media (max-width:1180px){
  .wb-bp{opacity:.3}
  .wb-index{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wb-index li:nth-child(n+5){display:none}
  .wb-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-files{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-rule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .wb-bp{display:none}
  .wb-scrolly{grid-template-columns:1fr;gap:0}
  .wb-stage-col{grid-column:1;grid-row:1;height:auto;position:sticky;top:62px;z-index:3;margin:0 calc(var(--pad) * -1);padding:10px var(--pad) 12px;background:linear-gradient(var(--wb-bg) calc(100% - 16px),rgba(11,18,32,0))}
  .wb-stage{position:static}
  .wb-win{aspect-ratio:16/12}
  .wb-rail{margin-top:10px;gap:6px}
  .wb-rail a{width:28px;height:28px;font-size:10px}
  .wb-steps{grid-column:1;grid-row:2;position:relative;z-index:1}
  .wb-step,.wb-step:first-child,.wb-step:last-child{min-height:0;padding:9vh 0 12vh;justify-content:flex-start}
  .wb-step:first-child{padding-top:5vh}
  .wb-step:last-child{padding-bottom:4vh}
}
@media (max-width:640px){
  .mainnav[data-page="builder"] a[data-nav="home"]{display:none}
  .wb-index{display:none}
  .wb-hero-in{padding-bottom:84px}
  .wb-bar{height:30px;padding:0 10px;gap:5px}
  .wb-bar>i{width:8px;height:8px}
  .wb-view{inset:30px 0 0}
  .wb-url{margin-left:6px;padding:5px 9px;font-size:10px}
  .wb-eg{font-size:9px;padding:4px 6px}
  .wb-win{aspect-ratio:1/1}
  .wb-nums,.wb-team-grid,.wb-files,.wb-rule-grid{grid-template-columns:1fr}
  .wb-step h3{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .wb-grid{animation:none}
  .wb-bp *{animation:none!important;stroke-dashoffset:0;opacity:1}
  .sc,.sc *{transition:none!important;animation:none!important}
  .sc .s3-run b{display:none}
  .s7-track b{display:none}
  .wb-step{opacity:1;transition:none}
}