:root{--bg:#07101e;--panel:#0e1b2f;--line:#233752;--text:#eef5ff;--muted:#9fb0c7;--cyan:#58d6ff;--blue:#75a7ff;--green:#7ce6ad}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,Segoe UI,sans-serif;color:var(--text);background:radial-gradient(circle at 15% -10%,rgba(62,124,255,.22),transparent 34%),linear-gradient(180deg,#07101e,#050b14)}
a{color:inherit;text-decoration:none}.shell{max-width:1180px;margin:auto;padding:0 24px}.nav{position:sticky;top:0;z-index:5;background:rgba(7,16,30,.86);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav-inner{height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-weight:800}.btn,.ghost{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--line);font-weight:800;cursor:pointer}
.btn{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#05111a}.ghost{background:#0b1728}.hero{padding:72px 0 38px}.eyebrow{color:var(--cyan);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:800}
h1{font-size:clamp(2.5rem,6vw,5.2rem);line-height:.98;letter-spacing:-.05em;max-width:980px;margin:14px 0}.lead{color:var(--muted);font-size:1.08rem;line-height:1.75;max-width:790px}
.notice{margin-top:24px;padding:14px 16px;border:1px solid #5f5733;background:rgba(255,214,122,.06);border-radius:12px;color:#d5d7c7}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:32px 0 54px}.metric,.card{border:1px solid var(--line);background:linear-gradient(180deg,#101f35,#0b1728);border-radius:16px}
.metric{padding:18px}.metric b{font-size:1.8rem}.metric span{display:block;color:var(--muted);margin-top:6px}.section{padding:40px 0}.section h2{font-size:2rem;margin:8px 0 18px}
.demo-grid{display:grid;grid-template-columns:.9fr 1.35fr;gap:16px}.card{padding:20px}.card-title{font-size:.82rem;color:#cbd8e9;font-weight:800;margin-bottom:12px}.field label{display:block;color:var(--muted);font-size:.78rem;margin-bottom:6px}
select{width:100%;background:#091524;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:12px}.question{padding:13px;border:1px solid var(--line);background:#091524;border-radius:10px;line-height:1.55;margin:14px 0}
.conditions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.condition{padding:10px;border:1px solid var(--line);border-radius:10px}.condition b{display:block;color:var(--muted);font-size:.74rem;margin-bottom:4px}
.placeholder{min-height:360px;display:grid;place-items:center;text-align:center;color:var(--muted)}.loading,.result{display:none}.loading.active{display:grid}.result.active{display:block}.badges{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.badge{padding:6px 9px;border:1px solid var(--line);border-radius:999px;font-size:.74rem;font-weight:800}.ok{color:var(--green)}.summary{color:#c2cfdf;line-height:1.65}
.timeline{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.step{padding:9px 6px;border:1px solid var(--line);border-radius:9px;font-size:.66rem;text-align:center}.dot{width:8px;height:8px;border-radius:50%;background:var(--green);margin:0 auto 6px}
.two,.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.ev{padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:9px}.ev code{color:#9ddfff;font-size:.75rem}.ev p{color:#c2cfdf;line-height:1.5;font-size:.88rem}
.analytic{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding:12px 0}.analytic small{display:block;color:var(--muted);margin-top:4px}
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.node{padding:18px 10px;border:1px solid var(--line);border-radius:12px;text-align:center;background:#0b1728;font-weight:800;font-size:.8rem}
.row{margin:12px 0}.row-head{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;margin-bottom:6px}.bar{height:9px;background:#071321;border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue))}
.footer{border-top:1px solid var(--line);margin-top:42px;padding:28px 0 40px;color:var(--muted);font-size:.85rem}.links{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:900px){.metrics{grid-template-columns:1fr 1fr}.demo-grid,.two,.charts{grid-template-columns:1fr}.timeline{grid-template-columns:1fr 1fr}.flow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.conditions,.timeline,.flow{grid-template-columns:1fr}}