
:root{
  --bg:#040815; --panel:#0a1221; --line:rgba(255,255,255,.09); --text:#f6f8ff;
  --muted:#a5b5d4; --blue:#49a8ff; --cyan:#32dcff; --orange:#ff7a18;
  --red:#ff4d5f; --green:#32f0af; --shadow:0 34px 90px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-family:Inter,Segoe UI,Arial,sans-serif; overflow-x:hidden;
  background:radial-gradient(circle at 18% 16%,rgba(73,168,255,.18),transparent 34%),
             radial-gradient(circle at 82% 24%,rgba(73,168,255,.13),transparent 28%),
             linear-gradient(135deg,#050814,#07101e 62%,#071b2f);
}
.grid-layer{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,#000,transparent 92%)}
.ambient{position:fixed;width:430px;height:430px;border-radius:50%;filter:blur(92px);opacity:.20;pointer-events:none}.blue{right:-120px;top:2%;background:var(--blue)}.orange{left:-120px;bottom:4%;background:var(--orange)}
.scanline{position:fixed;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.035),transparent);height:150px;animation:scan 7s linear infinite;opacity:.34}
.rail{position:fixed;left:24px;top:24px;bottom:24px;width:72px;border:1px solid var(--line);background:rgba(8,14,28,.74);backdrop-filter:blur(18px);border-radius:28px;display:flex;flex-direction:column;align-items:center;padding:16px 10px;gap:16px;z-index:20;box-shadow:var(--shadow)}
.logo{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,var(--blue),var(--orange));display:grid;place-items:center;font-weight:900;font-size:24px}
.nav{width:48px;height:48px;border-radius:16px;border:1px solid transparent;background:rgba(0,0,0,.13);color:#9bb0d1;font-size:22px;cursor:pointer;transition:.25s}
.nav:hover,.nav.active{background:rgba(73,168,255,.16);border-color:rgba(73,168,255,.34);color:white;transform:translateY(-2px)}
.page{padding:34px 44px 84px 124px;max-width:1880px;margin:auto}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:54px;gap:24px}
.kicker{margin:0 0 9px;color:var(--blue);letter-spacing:.24em;font-size:12px;font-weight:900}.topbar h1{font-size:34px;margin:0}
.top-metrics{display:flex;gap:12px;flex-wrap:wrap}.top-metrics span{border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:18px;padding:13px 15px;color:#cfe0ff;position:relative;overflow:hidden}.top-metrics span:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-120%);animation:sweep 4.8s infinite}.top-metrics b{color:white}.top-metrics .danger i{color:var(--red);font-style:normal}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;min-height:560px}.chip{display:inline-flex;border:1px solid rgba(50,220,255,.25);color:var(--cyan);background:rgba(73,168,255,.08);padding:10px 18px;border-radius:999px;margin-bottom:28px}
.hero-copy h2{font-size:clamp(44px,6vw,92px);line-height:.94;margin:0 0 28px;letter-spacing:-.06em}.hero-copy p{font-size:20px;color:#c0cbe4;line-height:1.7;max-width:800px}.hero-copy strong{color:#fff}.action-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}
button{border:none;border-radius:18px;padding:15px 20px;background:linear-gradient(135deg,var(--blue),var(--orange));color:#fff;font-weight:900;font-size:15px;cursor:pointer;box-shadow:0 18px 50px rgba(73,168,255,.18);transition:.25s}.ghost{background:rgba(255,255,255,.06);border:1px solid var(--line);box-shadow:none}.deny{background:linear-gradient(135deg,var(--red),#8d1f34)}button:hover{transform:translateY(-3px);filter:brightness(1.08)}
.phone-stage{display:grid;place-items:center}.phone{width:min(390px,86vw);height:690px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,#0a1823,#07101d);border-radius:46px;padding:24px;box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 0 0 8px rgba(255,255,255,.025);position:relative;overflow:hidden;animation:floatPhone 6s ease-in-out infinite}.phone-top{display:flex;justify-content:space-between;font-weight:900;position:relative;z-index:2}
.phone-alert{position:relative;margin-top:46px;border-radius:28px;padding:24px;background:linear-gradient(135deg,rgba(255,77,95,.18),rgba(255,122,24,.1));border:1px solid rgba(255,77,95,.35);box-shadow:0 0 38px rgba(255,77,95,.10)}.phone-alert small{color:#ffc0c8;text-transform:uppercase;font-weight:900}.phone-alert strong{display:block;font-size:30px;margin:8px 0}.phone-alert p{color:#ffd7dc;line-height:1.55}.ping{position:absolute;right:22px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--red);animation:ping 1.8s infinite}
.segments{display:flex;background:rgba(255,255,255,.055);border-radius:18px;margin:24px 0;padding:6px}.segments span{flex:1;text-align:center;padding:10px;border-radius:14px;color:var(--muted);font-weight:900}.segments .active{background:var(--cyan);color:#001018}.mobile-list{display:grid;gap:14px}.mobile-list div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;background:rgba(255,255,255,.055);border:1px solid var(--line);padding:16px;border-radius:20px;color:#dce8ff}.mobile-list i{width:14px;height:14px;border-radius:50%;display:inline-block}.red{background:var(--red)}.blue{background:var(--blue)}.orange{background:var(--orange)}.dock{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:14px;background:rgba(0,0,0,.22);padding:10px 16px;border-radius:999px}.dock i{width:16px;height:16px;border-radius:50%;background:#243148}.dock .active{background:var(--cyan)}
.stats,.runtime-grid,.split,.doctrine{display:grid;gap:24px}.stats{grid-template-columns:repeat(4,1fr);margin-bottom:24px}.stat,.panel,.doctrine div{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.034));backdrop-filter:blur(18px);border-radius:28px;box-shadow:var(--shadow);position:relative;overflow:hidden}.stat{padding:24px}.stat small,.stat span{color:var(--muted)}.stat strong{display:block;font-size:38px;margin:8px 0}
.runtime-grid{grid-template-columns:1.4fr .8fr;margin-bottom:24px}.split{grid-template-columns:1fr 1fr;margin-bottom:24px}.panel{padding:28px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.panel-head h3{margin:0;color:var(--blue);font-size:26px}.panel-head span{color:var(--muted)}
.pipeline{display:flex;align-items:center;gap:10px;overflow-x:auto;padding:16px 0}.pipe-step{min-width:112px;height:112px;border-radius:28px;border:1px solid var(--line);background:rgba(255,255,255,.045);display:grid;place-items:center;text-align:center;transition:.28s}.pipe-step b{font-size:24px}.pipe-step span{font-size:12px;color:var(--muted);font-weight:900}.pipe-step em{font-size:11px;color:#7f93b5;font-style:normal}.pipe-step.active{border-color:var(--blue);box-shadow:0 0 28px rgba(73,168,255,.18)}.pipe-step.hold{border-color:var(--red);box-shadow:0 0 36px rgba(255,77,95,.25);animation:holdBreath 2.6s infinite}.pipe-step.approved{border-color:var(--green);box-shadow:0 0 36px rgba(50,240,175,.22)}
.pipe-line{height:3px;min-width:50px;background:rgba(255,255,255,.12);border-radius:99px;position:relative;overflow:hidden}.pipe-line:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,white,transparent);animation:lineRun 2.8s infinite}.pipe-line.active{background:var(--blue)}.pipe-line.hold{background:var(--red)}.pipe-line.ready{background:var(--green)}.pipe-line.muted:after{opacity:.15}
.console{margin-top:22px;background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:22px;padding:18px;font-family:ui-monospace,Consolas,monospace}.console p{margin:8px 0;color:#d8e4ff}.console span{color:var(--green);margin-right:14px}
.risk-meter{width:210px;height:210px;margin:6px auto 22px;border-radius:50%;border:22px solid rgba(255,255,255,.07);border-top-color:var(--red);border-right-color:var(--orange);display:grid;place-items:center;animation:slowSpin 10s linear infinite}.risk-meter strong{font-size:50px}.risk-meter small{display:block;color:var(--muted)}.risk-list{list-style:none;padding:0;margin:0;display:grid;gap:13px}.risk-list li{color:#dbe7ff}.risk-list li:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--orange);margin-right:8px;box-shadow:0 0 12px rgba(255,122,24,.55)}
.qr-wrap{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}.qr{width:190px;height:190px;border:1px solid rgba(50,220,255,.28);border-radius:26px;background:#eaf6ff;padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;box-shadow:0 0 44px rgba(50,220,255,.15);position:relative}.qr:after{content:"";position:absolute;left:16px;right:16px;height:3px;background:rgba(255,77,95,.75);top:20px;animation:qrScan 2.8s infinite}.qr i{background:#05101e;border-radius:8px}.qr-copy strong{font-size:24px}.qr-copy p{color:var(--muted);line-height:1.6}
.topology{position:relative;height:390px}.topology svg{position:absolute;inset:0;width:100%;height:100%;stroke:rgba(73,168,255,.42);stroke-width:2;fill:none}.topology path{stroke-dasharray:10 14;animation:dash 3s linear infinite}.core,.orbit{position:absolute;border-radius:50%;display:grid;place-items:center;font-weight:900}.core{width:110px;height:110px;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,var(--red),var(--orange));box-shadow:0 0 48px rgba(255,77,95,.36);z-index:2;animation:holdBreath 2.6s infinite}.core.approved{background:linear-gradient(135deg,var(--green),var(--blue))}.orbit{width:70px;height:70px;background:linear-gradient(135deg,var(--blue),var(--orange));z-index:2;animation:nodeFloat 5s ease-in-out infinite}.o1{top:25px;left:55px}.o2{top:30px;right:60px}.o3{bottom:35px;left:55px}.o4{bottom:35px;right:55px}
.delay-box{display:grid;place-items:center;text-align:center}.delay-ring{width:210px;height:210px;border-radius:50%;border:22px solid rgba(255,255,255,.07);border-right-color:var(--orange);display:grid;place-items:center}.delay-ring strong{font-size:42px}.delay-ring span{display:block;color:var(--muted)}.delay-box p,.decision-note{color:var(--muted);line-height:1.6}.decision-actions{display:flex;gap:14px;flex-wrap:wrap}
.audit{margin-bottom:24px}.audit-table{display:grid;gap:10px}.row{display:grid;grid-template-columns:1fr 2.4fr 1.2fr 1.5fr;gap:14px;padding:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:#dce7ff;transition:.25s}.row:hover,.row.flash{background:rgba(73,168,255,.08);border-color:rgba(73,168,255,.28)}.row.head{color:var(--blue);font-weight:900;background:transparent}.doctrine{grid-template-columns:repeat(4,1fr)}.doctrine div{padding:24px}.doctrine b{color:var(--blue)}.doctrine p{color:var(--muted);line-height:1.6}.mobile-tabs{display:none}
@keyframes scan{0%{transform:translateY(-180px)}100%{transform:translateY(100vh)}}@keyframes sweep{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}@keyframes floatPhone{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,77,95,.6)}100%{box-shadow:0 0 0 18px rgba(255,77,95,0)}}@keyframes holdBreath{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.12);transform:scale(1.025)}}@keyframes lineRun{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}@keyframes slowSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes dash{to{stroke-dashoffset:-48}}@keyframes nodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes qrScan{0%{top:20px}50%{top:166px}100%{top:20px}}
@media(max-width:1100px){.rail{display:none}.page{padding:26px 18px 96px}.topbar{flex-direction:column;align-items:flex-start}.hero{grid-template-columns:1fr}.phone-stage{order:-1}.stats,.runtime-grid,.split,.doctrine{grid-template-columns:1fr 1fr}.mobile-tabs{position:fixed;display:flex;left:12px;right:12px;bottom:12px;z-index:50;background:rgba(8,14,28,.84);border:1px solid var(--line);backdrop-filter:blur(18px);padding:8px;border-radius:22px;gap:8px}.mobile-tabs button{flex:1;padding:12px;border-radius:16px;background:transparent;box-shadow:none}.mobile-tabs .active{background:rgba(73,168,255,.18)}}@media(max-width:720px){.stats,.runtime-grid,.split,.doctrine{grid-template-columns:1fr}.top-metrics{width:100%}.top-metrics span{flex:1;text-align:center}.hero-copy h2{font-size:46px}.row{grid-template-columns:1fr}.phone{height:630px}.pipeline{padding-bottom:12px}.qr-wrap{grid-template-columns:1fr}.qr{margin:auto}}
