@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap');
:root{color-scheme:dark;--bg:#06090a;--bg2:#0b1110;--surface:#101814;--line:#21302a;--ink:#eef4ec;--muted:#9fb0a2;--lime:#c4fc8b;--lime2:#8fe35a;--red:#ff6b6b;--amber:#ffb84d;--blue:#8ec5ff;--orange:#ffa95c;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 'DM Sans',system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}a:hover{color:var(--lime)}
.wrap{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.skip{position:fixed;left:12px;top:-80px;z-index:50;background:var(--lime);color:#10200a;padding:10px 14px;border-radius:8px}.skip:focus{top:10px}
a:focus-visible,button:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
h1,h2,h3{font-family:'Manrope',sans-serif;letter-spacing:-.045em;line-height:1.04;margin:0}
h2 span,h1 em{color:var(--muted);font-style:normal}h1 em{color:var(--lime)}
.eyebrow,.mini{font:600 12px/1.4 var(--mono);letter-spacing:.14em;color:var(--lime);margin:0 0 18px;text-transform:uppercase}
.mini{color:var(--muted);font-size:11px;margin-bottom:10px}

/* nav */
.nav{position:sticky;top:0;z-index:20;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 28px;background:#06090ae6;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font:800 24px 'Manrope';letter-spacing:-1px}.brand-icon{width:26px;height:26px;color:var(--lime)}
.nav nav{display:flex;gap:26px;font-size:14px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--lime);color:#11200a!important;font-weight:700;border-radius:10px;padding:13px 22px;border:1px solid var(--lime);box-shadow:0 0 0 0 #c4fc8b55;transition:box-shadow .3s,transform .2s}
.btn:hover{box-shadow:0 0 30px 2px #c4fc8b40;transform:translateY(-1px)}.btn.small{padding:9px 16px;font-size:14px}
.link{font-weight:600;border-bottom:1px solid #c4fc8b66;padding-bottom:2px}
.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap}

/* hero */
.live{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding:100px max(24px,calc((100vw - 1240px)/2)) 70px;
  background:radial-gradient(ellipse 60% 70% at 78% 40%,#1d3a1a55,transparent 70%),radial-gradient(ellipse 50% 50% at 10% 90%,#12302a40,transparent 70%)}
.kicker{display:inline-flex;gap:10px;align-items:center;font:500 13px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:6px 14px;margin:0 0 26px;background:#0d1512}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);animation:pulse 2s infinite}
.live-title{font-size:clamp(40px,4.8vw,72px);margin-bottom:26px}.live-title em{color:var(--lime);font-style:normal}
.lead{font-size:19px;color:#c3d0c4;max-width:540px;margin:0 0 30px}
.hero-facts{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:560px}
.hero-facts li{border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:var(--muted)}.hero-facts b{display:block;color:var(--ink);font:700 15px 'Manrope'}
.sim{position:relative;margin:0}
.sim-svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:24px;background:linear-gradient(160deg,#0d1612,#070b09);box-shadow:0 30px 120px #0008}
.sim figcaption{font-size:12px;color:var(--muted);margin-top:10px}
.boundary{fill:#0c1a1233;stroke:#3b6b3a;stroke-width:1.5;stroke-dasharray:6 6;animation:dash 30s linear infinite}
.gate{fill:#101a14;stroke:#4f7d43;stroke-width:1.5}
.tag{font:600 11px var(--mono);fill:#7fa274;letter-spacing:.08em}.tag.mid{text-anchor:middle;fill:var(--lime)}
.svc rect{stroke-width:1.5}.svc.ok rect{fill:#13240f;stroke:#6fb84a}.svc.no rect{fill:#2a1212;stroke:#c45656}
.svc-name{font:600 13px var(--mono);fill:var(--ink);text-anchor:middle}.svc-sub{font:11px 'DM Sans';fill:var(--muted);text-anchor:middle}
.spawn-line{fill:none;stroke:#c4fc8b;stroke-width:2;stroke-dasharray:200;stroke-dashoffset:200}
.flow{fill:none;stroke:#2f4a2b;stroke-width:2;stroke-dasharray:4 6}.flow.red{stroke:#5a2a2a}
.agent circle{stroke-width:2}.agent text{font:800 16px 'Manrope';text-anchor:middle;fill:#0b130a}
.agent .agent-name{font:600 12px 'DM Sans';fill:var(--ink)}
.agent.lead circle:not(.halo){fill:var(--lime);stroke:#e4ffc8}.agent.lead .halo{fill:url(#glow);stroke:none;animation:breathe 3s ease-in-out infinite;transform-origin:100px 250px}
.agent.code circle{fill:var(--blue);stroke:#d5ebff}.agent.infra circle{fill:var(--orange);stroke:#ffe0c2}
.agent.code,.agent.infra{opacity:0;transform-box:fill-box;transform-origin:center}
.sim.spawned .agent.code,.sim.spawned .agent.infra{animation:pop .6s cubic-bezier(.2,1.4,.4,1) forwards}.sim.spawned .agent.infra{animation-delay:.35s}
.sim.spawned .spawn-line{animation:draw 1s ease forwards}
.pkt{r:5}.pkt.ok{fill:var(--lime);filter:drop-shadow(0 0 4px #c4fc8b)}.pkt.no{fill:var(--red);filter:drop-shadow(0 0 5px #ff6b6b)}
.burst{fill:none;stroke:var(--red);stroke-width:2;opacity:0}.burst.on{animation:burst .5s ease-out}
.bubble{opacity:0;transition:opacity .5s}.bubble rect{fill:#13213a;stroke:#5a8de0}.bubble text{font:600 13px 'DM Sans';fill:#cfe2ff;text-anchor:middle}.sim.pressure .bubble{opacity:1}
.observer-card{margin-top:12px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4px 18px;align-items:start;background:#1b0f10f2;border:1px solid #6b2a2c;border-radius:16px;padding:14px 18px;box-shadow:0 20px 60px #000a}
.observer-card .obs-log{grid-column:2;grid-row:1/4;margin:0}
.obs-head{font:700 14px 'Manrope';display:flex;gap:8px;align-items:center}.obs-head small{font:500 11px 'DM Sans';color:#ff9b9b}.eye{color:#ff8a8a}
.obs-count{display:flex;align-items:baseline;gap:10px;margin:8px 0 2px}.obs-count b{font:800 40px 'Manrope';letter-spacing:-2px;color:#ffd0d0}.obs-count span{font-size:12px;color:#d9a5a5;line-height:1.3}
.obs-status{font-size:12px;color:#c9b3b3;display:flex;gap:6px;align-items:center}.obs-status i{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.obs-log{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:5px;max-height:118px;overflow:hidden}
.obs-log li{font:11px var(--mono);color:#e8c3c3;border-left:2px solid #ff8a8a;padding-left:7px;animation:slidein .35s ease}
.obs-log li .who{color:var(--orange)}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}
.pillars a{padding:28px 28px 26px;transition:background .3s}.pillars a:hover{background:#0f1813;color:inherit}.pillars a+a{border-left:1px solid var(--line)}
.pillars span{font:600 12px var(--mono);color:var(--lime)}.pillars h2{font-size:32px;margin:6px 0 8px}.pillars p{margin:0;color:var(--muted);font-size:15px}

/* blocks */
.block{padding:110px 0 30px}
.block-head{display:grid;grid-template-columns:1fr 1fr;gap:20px 64px;align-items:end;margin-bottom:46px}
.block-head .eyebrow{grid-column:1/-1;margin:0}.block-head h2{font-size:clamp(34px,4.4vw,62px)}.block-head p{margin:0;color:var(--muted);font-size:18px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.in{opacity:1;transform:none}

/* architecture */
.arch{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#0c1411,#080c0a);padding:20px;overflow-x:auto}
.arch-svg{width:100%;min-width:760px;height:auto;display:block}
.a-box rect{fill:#0f1914;stroke:#2f4a37;stroke-width:1.5}.a-box.ws>rect{stroke:#8b7cff;fill:#13122a}.a-box.gw>rect{stroke:#4f7d43}.a-box.net.bad>rect{stroke:#8a3a3a;fill:#1d0f10}
.a-title{font:700 16px 'Manrope';fill:var(--ink)}.a-line{font:13px var(--mono);fill:#c6d4c8}.a-sub{font:12px 'DM Sans';fill:var(--muted)}
.rule rect{stroke-width:1.2}.rule.allow rect{fill:#13240f;stroke:#5ea33e}.rule.flag rect{fill:#2a210d;stroke:#c99435}.rule.deny rect{fill:#2a1111;stroke:#c45656}
.pill{font:700 11px var(--mono)}.rule.allow .pill{fill:var(--lime)}.rule.flag .pill{fill:var(--amber)}.rule.deny .pill{fill:var(--red)}
.a-flow{fill:none;stroke:#6fb84a;stroke-width:2;stroke-dasharray:6 6;animation:dash 6s linear infinite}.a-flow.cut{stroke:#a34545}
.a-pkt{fill:var(--lime);filter:drop-shadow(0 0 5px #c4fc8b)}.a-pkt.red{fill:var(--red);filter:drop-shadow(0 0 5px #ff6b6b)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.cards3>div{border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--surface);transition:border-color .3s,transform .3s}.cards3>div:hover{border-color:#4d6b45;transform:translateY(-3px)}
.cards3 h3{font-size:21px;margin-bottom:10px}.cards3 p{margin:0;color:var(--muted);font-size:15px}

/* observer demo */
.observer-demo{display:grid;grid-template-columns:330px 1fr;gap:22px;border:1px solid #4a2224;border-radius:22px;padding:22px;background:linear-gradient(160deg,#1a0d0e,#0b0909 70%)}
.tree{border-right:1px solid #3a1d1f;padding-right:20px}
.t-node{display:flex;align-items:center;gap:8px;font:700 15px 'Manrope';margin:6px 0}.t-node small{font:500 12px 'DM Sans';color:var(--muted)}
.t-node i{width:11px;height:11px;border-radius:50%}.t-node.lead i{background:var(--lime)}.t-node.code i{background:var(--blue)}.t-node.infra i{background:var(--orange)}
.t-branch{margin:4px 0 26px 6px;padding-left:16px;border-left:1px dashed #5a3b3b}
.verdict{font:700 18px/1.35 'Manrope';color:#ffc9c9;margin:0}
.stream{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ev{border:1px solid #4d2628;border-left:4px solid #8a3a3a;border-radius:12px;padding:12px 14px;background:#1a0f10;opacity:.25;transform:translateX(16px);transition:opacity .6s,transform .6s}
.ev.on{opacity:1;transform:none}.ev b{font:700 13px 'Manrope';margin-right:10px}.ev p{margin:6px 0 0;color:#dcc3c3;font-size:14px}.ev code{display:block;margin-top:6px;font:12px var(--mono);color:#b79a9a}
.ev.created{border-left-color:#7d8f78}.ev.alert{border-color:#6b5a1d;border-left-color:#ffd24d;background:#1d190c}.ev.alert b{color:#ffd24d}
.ev.you{border-color:#28406b;border-left-color:#5a8de0;background:#0f1626}.ev.you b{color:var(--blue)}.ev.rule b{color:#ff9b9b}.ev.report{border-left-color:#ffd24d}.ev.report b{color:#ffe28a}
.badge{display:inline-block;font:700 11px 'DM Sans';color:#0b130a;border-radius:20px;padding:2px 9px;margin:0 4px;vertical-align:1px}
.badge.lead{background:var(--lime)}.badge.infra{background:var(--orange)}.badge.code{background:var(--blue)}
.note{color:var(--muted);font-size:13px;max-width:900px;margin:14px 0 0}

/* evals */
.evals-demo{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}
.chart{border:1px solid var(--line);border-radius:22px;padding:26px;background:var(--surface)}
.bar-row{display:grid;grid-template-columns:80px 1fr 56px;gap:14px;align-items:center;margin:22px 0}
.bar-row span{font:600 14px 'Manrope'}.bar-row em{font:700 16px var(--mono);font-style:normal;text-align:right}
.track{position:relative;height:30px;border-radius:8px;background:repeating-linear-gradient(90deg,#1b2620 0 1px,transparent 1px 10%),#0b120e}
.range{position:absolute;top:8px;height:14px;border-radius:7px;transition:left .5s ease,width .5s ease}.range.a{background:#c4fc8b55;border:1px solid var(--lime)}.range.b{background:#ff6b6b44;border:1px solid var(--red)}
.point{position:absolute;top:5px;width:4px;height:20px;border-radius:2px;margin-left:-2px;transition:left .5s ease}.point.a{background:var(--lime)}.point.b{background:var(--red)}
.chart-foot{font:600 15px 'Manrope';margin:6px 0 0;min-height:44px}.illus{font-size:12px;color:var(--muted);margin:8px 0 0}
.metrics{display:grid;gap:10px}.metrics div{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#0c1310}
.metrics b{display:block;font:700 16px 'Manrope';color:var(--lime)}.metrics span{font-size:14px;color:var(--muted)}

/* results */
.results{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px}
.result{border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--surface);display:flex;flex-direction:column;gap:12px}
.result p{margin:0;color:var(--muted);font-size:15px}
.big{display:flex;gap:14px;align-items:baseline}.big b{font:800 68px/1 'Manrope';letter-spacing:-4px;color:var(--orange);min-width:2ch}.big span{font-size:14px;color:var(--ink);line-height:1.35}
.quote{font:800 26px/1.2 'Manrope';letter-spacing:-.03em}
.contra{color:#ffb0b0!important}.contra code,.result code{font:12px var(--mono)}
.links a{color:var(--lime)}.shot img{width:100%;border-radius:12px;border:1px solid var(--line);display:block;margin-top:auto}

/* free */
.open-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.open-row a{border:1px solid var(--line);border-radius:30px;padding:9px 16px;font:500 14px var(--mono);background:#0d1512}.open-row a:hover{border-color:var(--lime)}
.also{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;border-block:1px solid var(--line);padding:22px 0;margin-top:90px}.also .mini{margin:0}.also a{color:var(--muted);font-size:14px}.also a:hover{color:var(--lime)}
.download{display:flex;justify-content:space-between;align-items:center;gap:40px;margin:70px auto;padding:40px;border-radius:24px;border:1px solid #3c562c;background:radial-gradient(ellipse at 90% 0%,#2d4a1f88,transparent 60%),#121c10}
.download h2{font-size:36px;margin-bottom:10px}.download p{color:var(--muted);margin:0;max-width:640px}
footer{border-top:1px solid var(--line);padding:30px 0 40px;display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:20px;font-size:14px;color:var(--muted)}footer p{width:100%;font-size:12px;color:var(--muted);margin:0}

@keyframes pulse{50%{opacity:.4}}@keyframes dash{to{stroke-dashoffset:-240}}@keyframes breathe{50%{transform:scale(1.18);opacity:.6}}
@keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}@keyframes draw{to{stroke-dashoffset:0}}
@keyframes burst{0%{opacity:.9;r:6}100%{opacity:0;r:26}}@keyframes slidein{from{opacity:0;transform:translateX(8px)}}

/* faster generation */
.speed{margin:26px 0 0;border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:var(--surface)}
.speed-key{display:flex;gap:18px;flex-wrap:wrap;font:500 13px var(--mono);color:var(--muted);margin-bottom:14px}
.speed-key span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.speed-key .was::before{background:#3a4a40}.speed-key .now::before{background:var(--lime)}.speed-key span:last-child::before{display:none}
.speed-row{display:grid;grid-template-columns:96px 1fr 64px;gap:14px;align-items:center;padding:7px 0}
.speed-label{font-size:15px}.speed-x{font:600 15px var(--mono);color:var(--lime);text-align:right}
.speed-bars{display:grid;gap:5px}
.speed-bars i{display:block;height:18px;width:var(--w);border-radius:5px;position:relative;min-width:44px}
.speed-bars .was{background:#3a4a40}.speed-bars .now{background:var(--lime)}
.speed-bars b{position:absolute;right:7px;top:0;font:600 12px/18px var(--mono);color:#0b110e}
.speed-bars .was b{color:#e6efe8}
.speed figcaption{margin-top:14px;color:var(--muted);font-size:13px}
@media (max-width:640px){.speed{padding:18px 16px}.speed-row{grid-template-columns:72px 1fr 48px;gap:10px}}
/* coding tools */
.announce{display:inline-flex;gap:10px;align-items:center;margin-top:22px;font:500 13px var(--mono);color:var(--ink);border:1px solid var(--line);border-radius:30px;padding:7px 14px 7px 8px;background:#0d1512cc}
.announce b{font:700 11px var(--mono);letter-spacing:.08em;color:#11200a;background:var(--lime);border-radius:20px;padding:3px 8px}.announce:hover{border-color:var(--lime)}
.term{border:1px solid var(--line);border-radius:16px;background:#050807;padding:22px 24px;font:500 15px/1.7 var(--mono);overflow-x:auto}
.term p{margin:0;white-space:pre}.term .prompt{color:var(--lime);margin-right:10px}.term .out{color:var(--muted)}
.coding code{font:500 13px var(--mono);color:var(--lime)}
@media(max-width:1000px){.live{grid-template-columns:1fr;padding-top:60px}
  .block-head,.observer-demo,.evals-demo,.results,.cards3{grid-template-columns:1fr}.tree{border-right:0;padding-right:0;border-bottom:1px solid #3a1d1f;padding-bottom:16px}
  .nav nav{display:none}.download{flex-direction:column;align-items:flex-start}}
@media(max-width:640px){.observer-card{grid-template-columns:1fr}.observer-card .obs-log{grid-column:1;grid-row:auto}.pillars{grid-template-columns:1fr}.pillars a+a{border-left:0;border-top:1px solid var(--line)}.hero-facts{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.agent.code,.agent.infra,.ev,.reveal{opacity:1!important;transform:none!important}.spawn-line{stroke-dashoffset:0}}