:root{--ink:#0A0A0D;--ink2:#121217;--ink3:#1A1A21;--lt:#F3F1EC;--card:#FFFFFF;--tx:#F2F1EC;--mt:#9A98A3;--mt2:#5D5B66;--ln:rgba(255,255,255,.09);--lnl:#E2DED5;--lime:#D4FF3F;--lime2:#B8E62A;--lime-ink:#5E7F00;--e:cubic-bezier(.2,.7,.2,1);--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--serif:"Instrument Serif",Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ink);color:var(--tx);font:17px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#000;padding:8px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.k{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mt)}
h1,h2,h3{margin:0;font-weight:700}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
/* header */
header.top{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.top.sc{background:rgba(10,10,13,.72);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px);border-color:var(--ln)}
header.top .wrap{display:flex;align-items:center;height:72px;gap:28px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.02em}.brand em{font-family:Inter;font-style:normal;font-weight:500;color:var(--mt)}
nav{display:flex;gap:2px;margin-left:auto}nav a{text-decoration:none;font-size:14.5px;color:#CFCDD6;padding:8px 13px;border-radius:99px;transition:color .2s,background .2s}nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.ncta{display:inline-flex;gap:8px;align-items:center;text-decoration:none;font-weight:600;font-size:14.5px;background:#fff;color:var(--ink);padding:9px 16px;border-radius:99px;transition:background .2s}.ncta:hover{background:var(--lime)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:99px;font:600 16px/1 Inter,sans-serif;text-decoration:none;transition:transform .3s var(--e),background .3s,box-shadow .3s}
.btn svg{transition:transform .3s var(--e)}.btn:hover svg{transform:translateX(4px)}.btn:active{transform:scale(.98)}
.btn.lime{background:var(--lime);color:var(--ink);box-shadow:none}.btn.lime:hover{background:#E2FF73}
.btn.line{color:#fff;border:1px solid rgba(255,255,255,.2)}.btn.line:hover{background:rgba(255,255,255,.07)}
.btn.ink{background:var(--ink);color:#fff}.btn.ink:hover{background:#26262E}
/* hero */
.hero{position:relative;overflow:hidden;padding:150px 0 110px;background:var(--ink)}
.tex{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:26px 26px;-webkit-mask:radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 80%);mask:radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 80%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,255,63,.35),transparent)}
.hg{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#D9D7E0;border:1px solid var(--ln);background:rgba(255,255,255,.03);padding:8px 14px;border-radius:99px}.eyebrow b{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:none}
h1{font-size:clamp(3.1rem,7.6vw,6.9rem);line-height:.94;letter-spacing:-.055em;margin:28px 0 0;color:#fff}
h1 span{display:block;color:var(--lime)}
.lead{font-size:clamp(1.05rem,1.4vw,1.22rem);color:#B4B2BD;max-width:560px;margin:30px 0 0;line-height:1.55}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
.ticks{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:30px 0 0;font:500 12.5px var(--mono);color:var(--mt);text-transform:uppercase;letter-spacing:.05em}.ticks li::before{content:"✓ ";color:var(--lime)}
/* stage */
.stage{position:relative;height:560px;perspective:1600px}
.stack{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-18deg) rotateZ(3deg);transition:transform .6s var(--e)}
.win{position:absolute;background:linear-gradient(180deg,#17171D,#111116);border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;font-size:13px;color:#E6E4EC;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 80px -20px rgba(0,0,0,.8),0 20px 40px -20px rgba(0,0,0,.6)}
.wbar{display:flex;align-items:center;gap:6px;padding:10px 13px;border-bottom:1px solid var(--ln);font:500 11px var(--mono);color:#8D8B96}.wbar i{width:9px;height:9px;border-radius:50%;background:#2C2C35}.wbar span{margin-left:8px}
.w-chat{width:330px;left:0;top:30px;transform:translateZ(-60px);animation:fl1 7s ease-in-out infinite}
.w-flow{width:390px;right:0;top:0;transform:translateZ(0);animation:fl2 8s ease-in-out infinite}
.w-ai{width:400px;left:16%;bottom:10px;transform:translateZ(90px);animation:fl3 9s ease-in-out infinite;border-color:rgba(212,255,63,.28)}
@keyframes fl1{50%{transform:translateZ(-60px) translateY(-8px)}}@keyframes fl2{50%{transform:translateY(7px)}}@keyframes fl3{50%{transform:translateZ(90px) translateY(-10px)}}
.chat{padding:14px;display:flex;flex-direction:column;gap:8px;background:#0F1512}
.b{max-width:84%;padding:8px 11px;border-radius:12px;font-size:12.5px;line-height:1.4}
.b.in{align-self:flex-start;background:#22262A}.b.out{align-self:flex-end;background:#1F4D38;color:#E9FFF2}.b.ok{background:var(--lime);color:#101010;font-weight:600}
.js .b{opacity:0;transform:translateY(8px) scale(.97)}.js .play .b{animation:pop .5s var(--e) forwards;animation-delay:var(--d)}
@keyframes pop{to{opacity:1;transform:none}}
.fl{position:relative;height:190px;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:14px 14px}
.wires{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}.wires path{fill:none;stroke:#3A3A46;stroke-width:1.6;stroke-dasharray:5 5;animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.nd{position:absolute;background:#1C1C24;border:1px solid #33333F;border-radius:9px;padding:7px 11px;font-size:12px;white-space:nowrap;transition:border-color .3s,box-shadow .3s}.nd span{display:block;font:500 9.5px var(--mono);color:#8D8B96;text-transform:uppercase}
.js .play .nd{animation:lit 4s calc(var(--n)*.6s) infinite}
@keyframes lit{0%,8%{border-color:#33333F;box-shadow:none}14%,40%{border-color:var(--lime);box-shadow:none}55%,100%{border-color:#33333F;box-shadow:none}}
.ai{padding:16px}.q{background:#22222B;border-radius:10px;padding:9px 12px;margin-left:auto;max-width:86%;font-size:12.5px}
.a{margin-top:10px;border-left:2px solid var(--lime);padding:2px 0 2px 12px}.src{font:500 10px var(--mono);color:var(--lime);text-transform:uppercase}.a p{margin:4px 0 0;font-size:13px;line-height:1.5;min-height:4.5em}
.type.on::after{content:"";display:inline-block;width:2px;height:1em;background:var(--lime);margin-left:2px;vertical-align:-2px;animation:bl 1s steps(1) infinite}@keyframes bl{50%{opacity:0}}
.cap{position:absolute;right:0;bottom:-34px;font:500 11px var(--mono);color:#9A98A3;text-transform:uppercase;letter-spacing:.05em}
.js .stage .win{opacity:0}.js .stage.in .win{opacity:1;transition:opacity 1s var(--e)}.js .stage.in .w-flow{transition-delay:.15s}.js .stage.in .w-ai{transition-delay:.3s}
/* strip */
.strip{padding:44px 0 50px;border-bottom:1px solid var(--ln);background:var(--ink)}.strip .k{display:block;text-align:center;margin-bottom:24px}
.marq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mt{display:flex;align-items:center;gap:56px;width:max-content;animation:mq 60s linear infinite}.marq:hover .mt{animation-play-state:paused}@keyframes mq{to{transform:translateX(-50%)}}
.wm{white-space:nowrap;color:#8C8A95;transition:color .2s}.wm:hover{color:#fff}
.s1{font:700 22px Inter;letter-spacing:-.04em}.s2{font:500 19px var(--mono);letter-spacing:-.02em}.s3{font:italic 400 26px var(--serif)}.s4{font:800 17px Inter;text-transform:uppercase;letter-spacing:.08em}
/* section heads */
section.light,section.dark2{padding:130px 0}
.light{background:var(--lt);color:#111116}.light .k{color:#6B6975}
.dark2{background:var(--ink2);border-top:1px solid var(--ln)}
.sh{max-width:820px;margin-bottom:64px}.sh h2{font-size:clamp(2.3rem,5.2vw,4.6rem);line-height:1;letter-spacing:-.045em;margin:18px 0 0}.sh h2 em{color:var(--mt2)}.dark2 .sh h2 em{color:var(--lime)}
.sh p{font-size:1.15rem;margin:22px 0 0;max-width:620px;color:#5D5B66}.dark2 .sh p{color:#A6A4AF}
/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(0,auto);gap:18px}
.bc{position:relative;border-radius:22px;padding:30px;overflow:hidden;display:flex;flex-direction:column;gap:26px;background:var(--card);border:1px solid var(--lnl);box-shadow:0 1px 0 #fff inset,0 30px 60px -40px rgba(20,20,30,.35);transform-style:preserve-3d;transition:transform .5s var(--e),box-shadow .5s}
.bc:hover{box-shadow:0 1px 0 #fff inset,0 40px 80px -40px rgba(20,20,30,.5)}
.bc .k{color:#6B6975}.bc h3{font-size:1.7rem;line-height:1.1;letter-spacing:-.035em;margin:12px 0 10px;color:#0E0E12}.bc p{margin:0;color:#5D5B66;font-size:15.5px;max-width:460px}
.b-ai{grid-column:span 7;grid-row:span 2;background:var(--ink);border-color:var(--ink);color:#fff}.b-ai h3{color:#fff;font-size:2.3rem}.b-ai p{color:#A6A4AF}.b-ai .k{color:var(--lime)}
.b-wa{grid-column:span 5;background:#E9F7DC;border-color:#D3EBC0}
.b-fl{grid-column:span 5}
.b-db{grid-column:span 12;flex-direction:row;align-items:center;justify-content:space-between}
.mv{border-radius:16px;margin-top:auto}
.mv-ai{background:#15151B;border:1px solid var(--ln);padding:20px}.mv-ai .a p{font-size:14.5px;color:#E6E4EC}.mv-ai .q{font-size:14px;color:#fff}
.hand{margin-top:16px;font:500 11px var(--mono);color:#7C7A86;text-transform:uppercase;border-top:1px dashed #2C2C35;padding-top:12px}
.mv-wa{background:#0F1512;padding:16px;display:flex;flex-direction:column;gap:7px;color:#E6E4EC}
.mv-fl{background:#F6F5F1;border:1px solid var(--lnl);padding:24px 18px}
.chain{display:flex;align-items:center;gap:0;flex-wrap:nowrap}.chain span{font:600 12.5px Inter;background:#fff;border:1px solid #D9D5CB;border-radius:9px;padding:9px 12px;white-space:nowrap;color:#222}.chain i{flex:1;height:2px;min-width:14px;background:repeating-linear-gradient(90deg,#C9C4B8 0 5px,transparent 5px 9px)}
.js .play .chain span{animation:lit2 4s calc(var(--n)*.55s) infinite}
@keyframes lit2{0%,6%{background:#fff;border-color:#D9D5CB}12%,38%{background:var(--lime);border-color:#9DC21C}52%,100%{background:#fff;border-color:#D9D5CB}}
.mv-db{flex:0 0 52%;background:var(--ink);padding:22px 24px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:end;position:relative;margin:0}
.kp{display:flex;flex-direction:column;gap:14px}.kp span{display:block;font:500 10.5px var(--mono);color:#8D8B96;text-transform:uppercase}.kp b{font-size:2.4rem;letter-spacing:-.04em;color:#fff;line-height:1}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px}.bars i{flex:1;height:var(--h);background:linear-gradient(180deg,var(--lime),#7FA315);border-radius:5px 5px 2px 2px;transform-origin:bottom}
.js .bars i{transform:scaleY(0)}.js .play .bars i{transition:transform .9s var(--e) calc(var(--n)*.08s);transform:scaleY(1)}
.eg{position:absolute;right:14px;top:10px;font:500 9.5px var(--mono);color:#9A98A3;text-transform:uppercase}
/* more grid */
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mc,.pt{position:relative;text-decoration:none;border-radius:20px;padding:28px;background:linear-gradient(180deg,#18181F,#131318);border:1px solid var(--ln);min-height:210px;display:flex;flex-direction:column;transition:transform .5s var(--e),border-color .3s,background .3s}
.mc h3,.pt h3{font-size:1.35rem;letter-spacing:-.025em;margin-top:auto;color:#fff}.mc p,.pt p{margin:8px 0 0;color:#A6A4AF;font-size:15px}
.mc:hover,.pt:hover{border-color:rgba(212,255,63,.45)}
.go{position:absolute;top:24px;right:24px;width:36px;height:36px;border-radius:50%;border:1px solid var(--ln);display:grid;place-items:center;color:#fff;transition:all .35s var(--e)}.mc:hover .go,.pt:hover .go{background:var(--lime);color:var(--ink);border-color:var(--lime);transform:rotate(-45deg)}
/* how */
.how .hw{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}.how .sh{margin:0}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.steps li{display:grid;grid-template-columns:72px 1fr;column-gap:20px;background:#fff;border:1px solid var(--lnl);border-radius:20px;padding:26px 28px;transition:transform .4s var(--e)}.steps li:hover{transform:translateX(6px)}
.steps b{grid-row:span 2;font-size:3.4rem;line-height:.9;letter-spacing:-.05em;color:#111116}.steps li:last-child{background:var(--ink);color:#fff;border-color:var(--ink)}.steps li:last-child b{color:var(--lime)}
.steps h3{font-size:1.3rem;letter-spacing:-.02em}.steps p{margin:6px 0 0;color:#5D5B66}.steps li:last-child p{color:#A6A4AF}
/* tools */
.pts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pt{min-height:260px}.pt .k{color:var(--lime)}.pt h3{font-size:2rem}
/* final */
.final{background:var(--lime);color:var(--ink);padding:130px 0;text-align:left}
.final h2{font-size:clamp(3rem,9vw,8.5rem);line-height:.92;letter-spacing:-.06em}.final p{font-size:1.3rem;max-width:560px;margin:22px 0 36px;color:#2A3410}
/* footer */
.foot{background:var(--ink);padding:70px 0 30px;border-top:1px solid var(--ln)}
.fc{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}.fc div{display:flex;flex-direction:column;gap:8px}.fc a{color:#CFCDD6;text-decoration:none;font-size:15px}.fc a:hover{color:var(--lime)}
.fb{flex-direction:row!important;align-items:center;gap:10px!important;font-weight:700;font-size:18px}
.fl2{display:flex;justify-content:space-between;margin-top:56px;padding-top:22px;border-top:1px solid var(--ln);font:500 12px var(--mono);color:#9A98A3;text-transform:uppercase}
/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--e),transform .9s var(--e)}.js .rv.in{opacity:1;transform:none}
/* responsive */
@media(max-width:1080px){.hg{grid-template-columns:1fr}.stage{height:520px;max-width:640px;width:100%;margin:20px auto 0}.how .hw{grid-template-columns:1fr}}
@media(max-width:860px){nav{display:none}.ncta{margin-left:auto}.b-ai,.b-wa,.b-fl{grid-column:span 12}.b-db{flex-direction:column;align-items:stretch}.mv-db{flex:auto}.mg,.pts{grid-template-columns:1fr 1fr}.fc{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.wrap{padding:0 20px}.hero{padding:116px 0 80px}h1{font-size:3.05rem}.stage{height:430px}.stack{transform:rotateX(10deg) rotateY(-10deg) rotateZ(2deg) scale(.78);transform-origin:center top;left:-12%;right:-12%}.w-chat{width:300px}.w-flow{width:340px}.w-ai{width:330px;left:6%}
section.light,section.dark2{padding:88px 0}.sh{margin-bottom:40px}.mg,.pts{grid-template-columns:1fr}.bc{padding:22px}.b-ai h3{font-size:1.8rem}.chain span{padding:7px 8px;font-size:11px}.steps li{grid-template-columns:52px 1fr;padding:22px}.steps b{font-size:2.6rem}.final{padding:90px 0}.cap{bottom:-20px}}
/* iter 2 */
.hg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.stage{height:620px;margin-right:-80px}
.win{font-size:14px}.wbar{font-size:11.5px;padding:11px 14px}
.w-chat{width:360px;left:-2%;top:70px}.w-flow{width:440px;right:0;top:0}.w-ai{width:460px;left:8%;bottom:0}
.fl{height:215px}.nd{font-size:13px;padding:8px 12px}.b{font-size:13.5px}.a p{font-size:14px}.q{font-size:13.5px}
.mv-ai{padding:26px}.mv-ai .q{font-size:15.5px}.mv-ai .a p{font-size:17px;line-height:1.5}
.b-ai .mv-ai{flex:1;display:flex;flex-direction:column;justify-content:center}
.mv-fl{padding:30px 22px}.chain span{font-size:14px;padding:11px 14px}
.mc{min-height:190px}
.pt .mini{margin:22px 0 0;padding:14px;border-radius:12px;background:#0E0E12;border:1px solid var(--ln);font:500 12px var(--mono);color:#B4B2BD;display:flex;flex-direction:column;gap:6px}
.pt .mini b{color:var(--lime);font-weight:500}
@media(max-width:1080px){.stage{margin-right:0}}
@media(max-width:600px){.stage{height:470px}.stack{transform:rotateX(10deg) rotateY(-10deg) rotateZ(2deg) scale(.7)}.w-ai{width:380px}.w-flow{width:380px}.mv-ai .a p{font-size:15px}.chain span{font-size:11px;padding:7px 8px}}
/* iter 3 */
@media(max-width:1080px){.hg{grid-template-columns:1fr}}
.b-ai .mv-ai{justify-content:flex-end;gap:0}
.mv-ai .prev{opacity:.55;margin-bottom:18px;padding-bottom:18px;border-bottom:1px dashed #2C2C35}
.mv-ai .prev .a p{min-height:0;font-size:14.5px}
@media(max-width:600px){.stage{height:440px;margin-top:8px}.stack{left:-30%;right:-30%;transform:rotateX(10deg) rotateY(-10deg) rotateZ(2deg) scale(.66)}}
@media(max-width:600px){.stage{height:330px}.cap{bottom:-6px}}

/* v8: visible focus on light sections (WCAG 2.4.7, 1.4.11) */
.light :focus-visible{outline:2px solid #0A0A0D;outline-offset:2px;box-shadow:0 0 0 4px #D4FF3F}