:root{
  --orange:#ff5402;--orange-soft:#ff8853;--rust:#a1370a;--ink:#090a09;
  --stone-50:#f5f5f1;--stone-100:#edede7;--stone-200:#d9d9d0;--stone-400:#979a8e;--stone-600:#5e605a;
  --bg:#fff;--fg:#090a09;--muted:#5e605a;--card:#f5f5f1;--line:#d9d9d0;--code:#fff;
  --display:"Funnel Display",Inter,"Helvetica Neue",Arial,sans-serif;
  --sans:Inter,"Helvetica Neue",Arial,sans-serif;
  --mono:"Fira Code",ui-monospace,Menlo,monospace;
}
:root[data-theme="dark"]{--bg:#000;--fg:#f5f5f1;--muted:#a4a19c;--card:#0d0e0d;--line:#292b28;--code:#000}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange);margin-right:12px;vertical-align:middle;position:relative;top:-1px}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.02}
h1{font-size:clamp(48px,8vw,81px)}
h2{font-size:clamp(36px,5vw,56px)}
h3{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;line-height:1.1}
.orange{color:var(--orange)}
p.lead{color:var(--muted);font-size:16px;max-width:420px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;border-radius:999px;padding:0 24px;height:44px;font-size:15px;font-weight:500;border:1px solid var(--line);transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--orange);color:#090a09;border-color:var(--orange)}
/* top banner + nav */
.banner{background:var(--orange);color:#090a09;text-align:center;font-size:13px;padding:7px;display:flex;justify-content:center;gap:24px}.banner a{display:inline-flex;gap:8px;align-items:center}
nav{position:sticky;top:24px;z-index:10;max-width:1152px;height:64px;margin:24px auto 0;padding:0 24px;display:flex;align-items:center;gap:40px;border-radius:999px;background:var(--stone-100);transition:background .2s}
:root[data-theme="dark"] nav{background:#1b1d1b}
.mark{display:block;overflow:visible}.mark .ring{fill:var(--logo-bg,var(--bg));stroke:var(--orange);stroke-width:4.5}.mark .dot{fill:var(--fg)}nav{--logo-bg:var(--stone-100)}:root[data-theme="dark"] nav{--logo-bg:#1b1d1b}.logo{font-family:var(--display);font-weight:600;font-size:20px;display:flex;align-items:center;gap:8px}
nav .links{display:flex;gap:32px;font-size:15px;color:var(--fg)}
nav .links a:hover{color:var(--fg)}
nav .right{display:flex;gap:26px;align-items:center;margin-left:auto}.circ{width:32px;height:32px;border-radius:50%;background:var(--orange);color:#090a09;display:grid;place-items:center;font-size:14px}.dep{display:flex;gap:14px;align-items:center;font-size:15px}
.toggle{background:none;border:0;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}
@media(max-width:760px){nav .links{display:none}nav{margin:12px}}
/* hero */
.hero{padding:88px 0 24px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}
.hero h1{margin:20px 0 28px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero aside p{font-family:var(--display);font-size:18px;margin-bottom:10px;max-width:360px}
.hero aside span{color:var(--muted);font-size:14px;display:block;max-width:360px}
.stage{display:block;width:100%}.rim{fill:none;stroke:#979a8e;stroke-width:1;opacity:.7}.dash{stroke:#5e605a;stroke-width:1.5}.lead-line{stroke:var(--stone-400);fill:none;stroke-width:1}
.face-top{fill:var(--stone-100)}.face-l{fill:var(--stone-200)}.face-r{fill:var(--stone-400)}
:root[data-theme="dark"] .face-top{fill:#292b28}:root[data-theme="dark"] .face-l{fill:#1b1d1b}:root[data-theme="dark"] .face-r{fill:#0c0d0c}
.hot-top{fill:var(--orange)}.hot-l{fill:var(--rust)}.hot-r{fill:#d8440a}
.stage .block{animation:float 6s ease-in-out infinite}
.stage .block:nth-child(2){animation-delay:-2s}.stage .block:nth-child(3){animation-delay:-4s}
@keyframes float{50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.stage .block{animation:none}}body.still .stage .block{animation-play-state:paused}
.artwrap{position:relative;margin-top:8px}.ann{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;line-height:1.7}.ann small{display:block;color:var(--muted);text-transform:none;font-size:10px}.ann::before{content:"";position:absolute;left:-10px;top:6px;width:5px;height:5px;border-radius:50%;background:var(--orange)}.caps{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:16px 0 80px}
/* sections */
section{padding:114px 0 0}
.sec-head{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;margin:18px 0 48px}
.sec-head p{color:var(--muted)}
@media(max-width:860px){.hero,.sec-head{grid-template-columns:1fr}}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid .wide{grid-column:1/-1}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px}
.card h3{margin:14px 0 10px}.card p{color:var(--muted);font-size:15px}
pre{font-family:var(--mono);font-size:13px;line-height:1.7;background:var(--code);border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:20px;overflow:auto}
pre .k{color:var(--orange)}pre .c{color:var(--muted)}
.flow{display:flex;gap:12px;margin-top:28px}
.flow div{flex:1;border:1px solid var(--line);border-radius:12px;padding:20px 8px;text-align:center;font-family:var(--mono);font-size:11px;text-transform:uppercase;background:var(--bg)}
.flow div.on{border-color:var(--orange);color:var(--orange)}
.chart{width:100%;margin-top:16px}
.chart path{fill:none;stroke:var(--orange);stroke-width:2}
.chart .g{stroke:var(--line);stroke-width:1}
/* workloads */
.work{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:32px;align-items:center}
@media(max-width:860px){.work{grid-template-columns:1fr}}
.tabs button{display:flex;justify-content:space-between;width:100%;padding:18px 4px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--muted);font:inherit;font-size:17px;cursor:pointer;text-align:left}
.tabs button.on{color:var(--fg)}.tabs button.on::before{content:"";}
.tabs button span{font-family:var(--mono);font-size:11px;margin-right:12px;color:var(--orange)}
.panel h3{margin-bottom:14px}.panel p{color:var(--muted);margin-bottom:20px}
.viz{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.cells{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:14px 0}
.cells i{height:16px;background:var(--line);border-radius:2px}.cells i.h{background:var(--orange)}
.viz .row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase}
/* steps */
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:48px}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.steps li{list-style:none;padding:16px 0 0 34px;position:relative;margin-bottom:12px}
.steps li::before{content:attr(data-n);position:absolute;left:0;top:18px;font-family:var(--mono);font-size:11px;color:var(--orange)}
.steps b{font-weight:500;display:block}.steps span{color:var(--muted);font-size:14px}
/* lifecycle */
.life{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px}
.life .top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.life .top button{font:inherit;color:var(--fg);background:none;border:1px solid var(--line);border-radius:999px;padding:4px 12px;cursor:pointer}
.life .r{display:grid;grid-template-columns:150px 1fr 150px;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line);font-size:14px}
.life .bar{height:10px;background:var(--line);border-radius:5px;overflow:hidden}
.life .bar b{display:block;height:100%;width:0;background:var(--orange)}
.life small{color:var(--muted);text-align:right}
@media(max-width:700px){.life .r{grid-template-columns:1fr}.life small{text-align:left}}
/* notes */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.notes{grid-template-columns:1fr}}
.note .pic{height:170px;border-radius:16px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:16px}
.note .pic i{width:70px;height:70px;background:var(--orange);border-radius:10px;transform:rotate(45deg) skew(10deg,10deg)}
.note h4{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.02em;margin:8px 0 12px}
/* cta + footer */
.cta{text-align:center;padding:120px 0}
.cta h2{font-size:clamp(48px,9vw,96px);margin:20px 0}
.cta p{color:var(--muted);max-width:480px;margin:0 auto 28px}
.legal{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted);padding:20px 0;border-top:1px solid var(--line)}

:root{--slab-top:#edede7;--slab-l:#b9b9a9;--slab-r:#9b9d8f;--rimc:#979a8e;--navbg:#edede7}
:root[data-theme="dark"]{--slab-top:#1b1d1b;--slab-l:#101110;--slab-r:#080908;--rimc:#3a3d38;--navbg:#1b1d1b}
nav{background:var(--navbg)!important;--logo-bg:var(--navbg)!important}
.s-top{fill:var(--slab-top)}.s-l{fill:var(--slab-l)}.s-r{fill:var(--slab-r)}.rim{stroke:var(--rimc)}
.dash{stroke:var(--rimc)}
.tabs [role=tab]{display:flex;justify-content:space-between;width:100%;padding:18px 4px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--muted);font:inherit;font-size:17px;cursor:pointer;text-align:left}
.tabs [role=tab][aria-selected=true]{color:var(--fg)}
.tabs [role=tab] span{font-family:var(--mono);font-size:11px;margin-right:12px;color:var(--orange)}
.panel{animation:fade .35s ease}@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.codehead{display:flex;justify-content:space-between;align-items:center}
.copybtn{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--fg);padding:3px 9px;cursor:pointer;transition:background .15s,scale .15s}
.copybtn:hover{background:var(--card)}.copybtn:active{scale:.97}
#motion[aria-pressed=true] .pp::before{content:"\275A\275A"}#motion[aria-pressed=false] .pp::before{content:"\25B6"}
#motion{display:inline-flex;gap:12px;align-items:center;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg)}
body.still .stage .block{animation-play-state:paused}
.menubtn{display:none;background:none;border:0;color:var(--fg);font:inherit;font-size:15px;cursor:pointer}
.mpanel{display:none}
@media(max-width:760px){
 nav{padding:0 20px;margin:16px 16px 0;position:sticky}
 .menubtn{display:block}.dep{display:none!important}
 .mpanel.open{display:flex;flex-wrap:wrap;gap:20px 28px;position:absolute;top:72px;left:16px;right:16px;padding:24px;border-radius:24px;background:var(--navbg);z-index:20;font-size:16px}
 nav{overflow:visible}
}
.cardpage{max-width:680px;margin:64px auto 96px;border:1px solid var(--line);border-radius:28px;padding:40px;background:var(--card)}
.cardpage h1{font-size:clamp(32px,5vw,40px);margin:18px 0 28px;letter-spacing:-.02em}
.cardpage h2{font-size:26px;margin:34px 0 10px;letter-spacing:-.02em}
.cardpage p{color:var(--muted);line-height:1.8;margin-bottom:12px}
.cardpage label{display:block;font-size:14px;margin:22px 0 8px}
.cardpage input,.cardpage textarea{width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:12px 14px;font:inherit;font-size:16px}
.cardpage input:focus,.cardpage textarea:focus{outline:2px solid var(--orange);outline-offset:1px}
.cardpage textarea{min-height:90px;resize:vertical}
.cardpage .btn{margin-top:26px;cursor:pointer;font-family:inherit}
.cardpage small{display:block;color:var(--muted);font-size:12px;margin-top:16px}
/* footer */
footer{border-top:1px solid var(--line);margin-top:96px;padding:0;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:24px 24px}
.ftop,.fmid{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:20px 0}
.ftop .dot,.fmid .plus{color:var(--orange);margin-right:8px}
.fgrid{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;border:1px solid var(--line);margin:0}
.fgrid>div{padding:36px 32px;border-left:1px solid var(--line)}.fgrid>div:first-child{border-left:0}
.fgrid::before,.fgrid::after{content:"+";position:absolute;color:var(--muted);font-family:var(--mono);font-size:14px}
.fgrid::before{left:-5px;top:-11px}.fgrid::after{right:-5px;bottom:-11px}
.fgrid h5{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);margin:0 0 26px;font-weight:400}
.fgrid a{display:block;font-family:var(--mono);font-size:12px;color:var(--fg);padding:9px 0}
.fgrid a.u{display:inline-block;border-bottom:1px solid var(--fg);padding:0;margin:9px 0}
.fgrid a:hover{color:var(--orange)}
.flogo{display:grid;place-items:center;height:100%;text-align:center;gap:22px}
.fword{font-family:var(--display);font-weight:600;font-size:44px;letter-spacing:-.04em}.flogo p{font-family:var(--mono);font-size:12px;color:var(--muted)}
.appearance{margin-top:30px;font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase}
.seg{display:inline-flex;margin-top:10px;border:1px solid var(--line);border-radius:8px;padding:3px}
.seg button{border:0;background:none;color:var(--muted);font-family:var(--mono);font-size:11px;padding:8px 12px;border-radius:6px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--line);color:var(--fg)}
.big{font-family:var(--display);font-weight:600;font-size:clamp(90px,21vw,270px);line-height:.85;letter-spacing:-.05em;color:#828282;margin:40px 0 0;text-align:left;padding-bottom:40px;overflow:hidden}
:root:not([data-theme="dark"]) .big{color:var(--stone-200)}
.legal{display:flex;gap:28px;align-items:center;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--muted);padding:22px 0;background:var(--bg)}
.legal a:hover{color:var(--fg)}.legal .top{margin-left:auto}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div{border-top:1px solid var(--line)}}
.fmid{padding-bottom:0}
html{scroll-padding-top:90px}