/* ================= MAGNET — coded from Figma ================= */
@import url('https://fonts.googleapis.com/css2?family=Tomorrow:ital,wght@0,500;0,700;1,700;1,800&family=Inter:wght@400;600;700&display=swap');
:root{--bg:#111118;--s1:#1B1B21;--s2:#222228;--hair:#29292F;--bd:#37373D;
--vio:#7925FF;--lav:#A375FF;--deep:#4B1EFF;--pink:#FF4F93;
--lbg:#F7F7F9;--lline:#E4E4E9;--grn:#1F8A4C;--amb:#E8890C;--red:#C0392B;
--fd:'Tomorrow',sans-serif;--fu:'Inter',sans-serif;--r:3px;--container:1280px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:#fff;font-family:var(--fu);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.container{max-width:var(--container);margin:0 auto;padding:0 32px}
:focus-visible{outline:2px solid var(--lav);outline-offset:2px}
/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(17,17,24,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-style:italic;font-weight:800;font-size:21px;letter-spacing:1px}
.logo svg{height:26px;width:auto}
.nav-links{display:flex;gap:32px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.75)}
.nav-links a:hover{color:#fff}
.nav-cta{display:flex;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:var(--r);font:600 13.5px var(--fu);cursor:pointer;transition:filter .12s ease-out,border-color .12s ease-out;border:0}
.btn-primary{background:var(--pink);color:#fff}.btn-primary:hover{filter:brightness(.92)}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}.btn-outline:hover{border-color:rgba(255,255,255,.75)}
.btn-white{background:#fff;color:#111118}
.burger{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:110px 0 96px;background:
radial-gradient(900px 480px at 78% 10%,rgba(121,37,255,.35),transparent 60%),
radial-gradient(700px 420px at 12% 85%,rgba(255,79,147,.16),transparent 60%),var(--bg)}
.hero:after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' filter='url(%23n)'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' opacity='.05'/%3E%3C/svg%3E");pointer-events:none}
.hero .container{position:relative;z-index:1}
.eyebrow{font:600 11px var(--fu);letter-spacing:3px;color:var(--lav);margin-bottom:18px}
h1{font-family:var(--fd);font-style:italic;font-weight:800;font-size:clamp(34px,4.6vw,58px);line-height:1.08;letter-spacing:-.5px;text-transform:uppercase}
h1 .grad{background:linear-gradient(92deg,var(--lav),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{max-width:560px;margin:22px 0 30px;color:rgba(255,255,255,.72);font-size:16.5px}
/* ---------- sections ---------- */
section{padding:96px 0}
.sec-title{text-align:center;max-width:760px;margin:0 auto 56px}
.tagline{font:600 12px var(--fu);letter-spacing:3px;color:var(--lav);text-transform:uppercase;margin-bottom:14px}
h2{font-family:var(--fd);font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.15}
h2 .accent{color:var(--lav)}
.sec-title p{color:rgba(255,255,255,.66);margin-top:16px;font-size:15.5px}
.light{background:var(--lbg);color:#16161c}
.light h2{color:#111118}.light .sec-title p{color:#4b4b55}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.card{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);padding:26px 22px;transition:transform .16s ease-out,border-color .16s ease-out}
.card:hover{transform:translateY(-2px);border-color:#3d3d46}
.card .num{font-family:var(--fd);font-weight:700;font-size:24px;color:var(--lav)}
.card h3{font:600 13px var(--fu);letter-spacing:2px;margin:10px 0 8px;text-transform:uppercase}
.card p{font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.6)}
/* tool sections (platform) */
.tool{padding:70px 0;border-top:1px solid var(--hair)}
.tool .grid{display:grid;grid-template-columns:520px 1fr;gap:60px;align-items:center}
.tool.flip .grid{grid-template-columns:1fr 520px}
.tool.flip .copy{order:2}
.toolnum{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.toolnum b{font-family:var(--fd);font-weight:700;font-size:38px;color:var(--lav)}
.toolnum span{border-left:2px solid rgba(255,255,255,.25);padding-left:12px;font:600 16px var(--fu);letter-spacing:3px}
.tool h2{font-size:clamp(26px,2.6vw,36px)}
.tool .copy>p{color:rgba(255,255,255,.72);margin:14px 0 18px;font-size:14.5px}
.bullets{list-style:none;display:grid;gap:10px;margin:0 0 20px}
.bullets li{position:relative;padding-left:18px;font-size:13.5px;color:rgba(255,255,255,.85)}
.bullets li:before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--lav)}
.value{background:rgba(163,117,255,.08);border:1px solid rgba(163,117,255,.4);border-radius:var(--r);padding:14px 16px;margin-bottom:22px}
.value b{display:block;font:600 9.5px var(--fu);letter-spacing:2px;color:var(--lav);margin-bottom:6px}
.value p{font-size:14px;font-weight:600;color:rgba(255,255,255,.94)}
/* mock screen */
.screen{background:#fff;color:#16161c;border-radius:var(--r);box-shadow:0 0 0 1px rgba(255,255,255,.22),0 24px 60px rgba(0,0,0,.45);overflow:hidden;font-size:12px}
.tbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #ECECF0}
.tbar i{width:8px;height:8px;border-radius:50%;background:#D9D9DE}
.tbar b{font-weight:600;letter-spacing:1.5px;font-size:11.5px;color:#333}
.tbar .chip{margin-left:auto;font:600 9px var(--fu);letter-spacing:1px;color:var(--vio);border:1px solid var(--vio);border-radius:3px;padding:3px 8px}
.tabs{display:flex;gap:22px;padding:0 16px;border-bottom:1px solid #ECECF0;font-weight:600;font-size:11.5px;color:#9a9aa2}
.tabs span{padding:11px 0}
.tabs .on{color:#16161c;border-bottom:2px solid var(--vio)}
.sbody{padding:14px 16px;display:grid;gap:10px}
.f label{display:block;font:600 8.5px var(--fu);letter-spacing:1.2px;color:#8a8a92;margin-bottom:4px}
.f div{background:var(--lbg);border:1px solid var(--lline);border-radius:3px;padding:8px 10px;font-size:11.5px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.panel{background:var(--lbg);border:1px solid var(--lline);border-radius:3px;padding:10px 12px}
.panel b{display:block;font:600 8.5px var(--fu);letter-spacing:1.2px;color:#8a8a92;margin-bottom:7px}
.prow{display:flex;justify-content:space-between;font-size:10.5px;padding:3px 0;color:#55555e}
.prow b{font-weight:600;color:#16161c;letter-spacing:0}
.p2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.exec{font:700 9px var(--fu);letter-spacing:1.5px;color:#C44074;margin-top:4px}
.prev{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pcard{border:1px solid var(--lline);border-radius:3px;padding:10px}
.viz{height:52px;background:var(--lbg);border-radius:2px;margin-bottom:8px;display:flex;align-items:flex-end;gap:5px;padding:8px}
.viz i{flex:1;background:var(--vio);border-radius:1px}
.viz i.pk{background:var(--pink)}
.pcard h4{font-size:10.5px;margin-bottom:3px}
.pcard p{font-size:8.5px;color:#8a8a92;margin-bottom:8px}
.pcard a{font:600 9.5px var(--fu);color:var(--vio);border:1px solid var(--vio);border-radius:3px;padding:4px 9px;display:inline-block}
.disc{font-size:8.5px;color:#9a9aa2;padding:0 16px 12px}
/* fan */
.fan-wrap{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);padding:40px;max-width:1150px;margin:0 auto}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.metric{background:var(--bg);border:1px solid var(--hair);border-radius:var(--r);padding:18px 22px}
.metric b{font-family:var(--fd);font-size:30px;font-weight:700}
.metric span{display:block;font:600 9px var(--fu);letter-spacing:2px;color:rgba(255,255,255,.55);margin-top:4px}
.metric.hot{border-color:var(--pink)}.metric.hot b{color:var(--pink)}
/* CTA band */
.cta-band{background:var(--deep);text-align:center;padding:72px 0}
.cta-band h2{font-size:clamp(26px,3vw,36px)}
.cta-band .btn{margin:26px 8px 0}
/* footer */
footer{border-top:1px solid var(--hair);padding:64px 0 32px;background:var(--bg)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.fgrid .logo svg{height:44px}
.fcol b{display:block;font-size:13.5px;margin-bottom:14px}
.fcol a{display:block;font-size:13px;color:rgba(255,255,255,.65);margin-bottom:10px}
.fcol a:hover{color:#fff}
.fbottom{display:flex;justify-content:space-between;border-top:1px solid var(--hair);margin-top:48px;padding-top:24px;font-size:12px;color:rgba(255,255,255,.5)}
.fbottom a{margin-left:20px;text-decoration:underline;text-underline-offset:3px}
.lin{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.75)}
.lin i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;background:#fff;color:#111118;font:700 10px var(--fu);font-style:normal}
/* reveal animation */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .3s ease-out,transform .3s ease-out}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{transition:opacity .15s ease-out;transform:none}.card{transition:none}}
/* responsive */
@media(max-width:1080px){.tool .grid,.tool.flip .grid{grid-template-columns:1fr}.tool.flip .copy{order:0}.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.nav-links,.nav-cta .btn-outline{display:none}.burger{display:block}section{padding:64px 0}.hero{padding:80px 0 64px}.metrics{grid-template-columns:1fr}.fbottom{flex-direction:column;gap:12px}.frow,.p2,.prev{grid-template-columns:1fr}}

/* ================= 8 AGENTS ================= */
.ag-lead{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;margin:0 0 40px;padding:26px 30px;background:var(--s1);border:1px solid var(--hair);border-radius:var(--r)}
.ag-lead .big{font-family:var(--fd);font-style:italic;font-weight:800;font-size:120px;line-height:.78;background:linear-gradient(150deg,var(--lav),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.ag-lead .t1{font-family:var(--fd);font-weight:700;font-size:24px;line-height:1.2}
.ag-lead .t2{color:rgba(255,255,255,.6);font-size:14.5px;margin-top:6px}
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ag{position:relative;background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);padding:20px 18px 16px;transition:transform .16s ease-out,border-color .16s ease-out}
.ag:hover{transform:translateY(-2px);border-color:var(--bd)}
.ag .code{font-family:var(--fd);font-weight:700;font-size:11px;letter-spacing:2.4px;color:var(--lav)}
.ag h3{font-size:15.5px;font-weight:600;margin:9px 0 8px;line-height:1.25}
.ag p{font-size:13px;line-height:1.5;color:rgba(255,255,255,.64)}
.ag .takes{margin-top:14px;padding-top:11px;border-top:1px solid var(--hair);font-size:9.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.38)}
.ag.hard{border-color:rgba(255,79,147,.42)}
.ag .stop{position:absolute;top:16px;right:16px;background:rgba(255,79,147,.16);border:1px solid rgba(255,79,147,.5);color:#FFCADD;font-size:9.5px;font-weight:700;letter-spacing:1.1px;padding:3px 8px;border-radius:2px}
.closing{margin-top:30px;padding:20px 24px;border-left:2px solid var(--lav);background:#1a1626;border-radius:0 var(--r) var(--r) 0;font-size:14.5px;color:var(--dim,#E4E4E9)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
/* ================= 8 STAGES ================= */
.metrics3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.m3{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);padding:20px}
.m3 .v{font-family:var(--fd);font-weight:700;font-size:38px;line-height:1;color:var(--lav)}
.m3 .l{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:8px;line-height:1.4}
.panel{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);padding:28px 30px}
.panel + .panel{margin-top:16px}
.panel .ttl{font-size:10.5px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--lav);margin-bottom:16px}
.panel h3{font-family:var(--fd);font-weight:700;font-size:19px;margin-bottom:18px}
.frow{display:grid;grid-template-columns:24px 118px 1fr 82px;gap:14px;align-items:center;margin-bottom:9px}
.frow .idx{width:24px;height:24px;border-radius:2px;background:var(--s2);border:1px solid var(--hair);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6)}
.frow .nm{font-size:13.5px;font-weight:600}
.frow .track{height:26px;background:var(--s2);border-radius:2px;overflow:hidden}
.frow .fill{height:100%;background:linear-gradient(90deg,var(--deep),var(--vio))}
.frow.win .fill{background:linear-gradient(90deg,var(--vio),var(--pink))}
.frow .pc{text-align:right;font-size:12.5px;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.fnote{margin-top:16px;font-size:13px;color:rgba(255,255,255,.66);display:flex;gap:9px;align-items:baseline}
.fnote b{flex:none;font-size:9px;line-height:1.9}
.fnote b{color:var(--pink)}
.disc{margin-top:10px;font-size:11px;color:rgba(255,255,255,.36)}
.ledger{width:100%;border-collapse:collapse;font-size:13px}
.ledger th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--bd);font-size:9.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.42)}
.ledger td{padding:9px 10px;border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums}
.ledger td:first-child{font-weight:600}
.ledger .n{text-align:right}
.ledger .up{color:#5FD98E}.ledger .dn{color:#F0A94A}.ledger .flat{color:rgba(255,255,255,.35)}
.ledger .sm{display:none}
@media(max-width:1080px){
  .agrid{grid-template-columns:repeat(2,1fr)}
  .ag-lead{grid-template-columns:1fr;gap:14px;text-align:left}
  .ag-lead .big{font-size:88px}
}
@media(max-width:760px){
  .agrid{grid-template-columns:1fr}
  .metrics3{grid-template-columns:1fr}
  .panel{padding:22px 18px}
  .frow{grid-template-columns:22px 1fr 62px;gap:10px}
  .frow .nm{display:none}
  .ledger{font-size:12px;table-layout:fixed;width:100%}
  .ledger th,.ledger td{padding:7px 3px}
  .ledger .lg{display:none}.ledger .sm{display:inline}
  .ledger .sent{display:none}
  .ledger th:nth-child(1),.ledger td:nth-child(1){width:22%}
  .ledger .up,.ledger .dn{white-space:nowrap}
}