/* PRAETOR LAYER — Landing page */
:root {
  --bg:#100d28; --bg2:#161138; --text:#e8e5fb; --muted:#a49bd6;
  --accent:#7c6cf6; --accent2:#b9b1f5; --accent3:#a08bff;
  --glow:rgba(124,108,246,.5); --hot:#ff6b8a; --ok:#40dca2; --warn:#ffc457;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--text); overflow-x:hidden;
  font:15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:#0c0a20;
}
h1,h2,h3,h4 { margin:0; }
a { color:inherit; }

/* ---------- animated background ---------- */
.bg-aurora {
  position:fixed; inset:-20% -20% auto -20%; height:120vh; z-index:-3; pointer-events:none;
  background:
    radial-gradient(40% 40% at 20% 20%, rgba(124,108,246,.45), transparent 60%),
    radial-gradient(45% 45% at 80% 15%, rgba(160,139,255,.35), transparent 60%),
    radial-gradient(40% 40% at 60% 70%, rgba(255,107,138,.18), transparent 60%);
  filter:blur(40px); animation:aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%{transform:translate3d(-3%,-2%,0) scale(1);}
  50%{transform:translate3d(4%,3%,0) scale(1.12);}
  100%{transform:translate3d(-2%,4%,0) scale(1.05);}
}
.bg-hexfield {
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.06;
  background-image:linear-gradient(30deg, var(--accent2) 1px, transparent 1px),
                   linear-gradient(150deg, var(--accent2) 1px, transparent 1px);
  background-size:46px 80px; mask-image:linear-gradient(180deg,#000,transparent 70%);
}
body::after { /* vignette */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, transparent 40%, #0a0819 100%);
}

/* ---------- nav ---------- */
.nav {
  position:sticky; top:14px; z-index:50; margin:14px auto 0; max-width:1180px;
  display:flex; align-items:center; gap:20px; padding:10px 14px 10px 16px;
  border-radius:18px;
}
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-brand img { width:34px; height:34px; border-radius:9px; box-shadow:0 0 0 1px rgba(255,255,255,.15),0 4px 16px var(--glow); }
.nav-name { font-weight:800; letter-spacing:1.5px; font-size:15px; }
.nav-name b { color:var(--accent2); font-weight:800; margin-left:3px; }
.nav-links { display:flex; gap:22px; margin-left:auto; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:14px; transition:color .15s; }
.nav-links a:hover { color:#fff; }

main { max-width:1180px; margin:0 auto; padding:0 22px; }

/* ---------- hero ---------- */
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center;
  min-height:76vh; padding:60px 0 40px; }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:2px; color:var(--accent2);
  margin-bottom:18px; }
.hero h1 { font-size:clamp(40px,6vw,72px); line-height:1.02; letter-spacing:-1.5px; font-weight:850; }
.grad { background:linear-gradient(100deg,var(--accent2),var(--accent),var(--hot));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:gradmove 6s linear infinite; }
@keyframes gradmove { to { background-position:200% center; } }
.lead { font-size:18px; color:var(--muted); max-width:560px; margin:22px 0 28px; }
.lead b { color:var(--text); font-weight:700; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }
.hero-badges { display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.badge-chip { padding:7px 14px; border-radius:20px; font-size:12px; font-family:var(--mono);
  color:var(--accent2); }

/* hero visual — layered guard stack with a live data-flow */
.hero-visual { position:relative; height:440px; display:grid; place-items:center; perspective:1100px; }
.hero-visual::before { content:""; position:absolute; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,108,246,.22), transparent 65%); filter:blur(26px); z-index:0; }
.hexring, .hexring2 { position:absolute; border-radius:50%; z-index:0; }
.hexring { width:346px; height:346px; border:1px dashed rgba(185,177,245,.28); animation:spin 44s linear infinite; }
.hexring::before { content:""; position:absolute; inset:38px; border-radius:50%;
  border:1px dashed rgba(124,108,246,.22); }
.hexring2 { width:250px; height:250px; border:1px dashed rgba(124,108,246,.18);
  animation:spin 60s linear infinite reverse; }
@keyframes spin { to { transform:rotate(360deg); } }

.layer-stack { position:relative; width:270px; height:372px; transform-style:preserve-3d; z-index:2; }
.hero-logo { position:absolute; top:0; left:50%; transform:translateX(-50%); width:88px; height:88px;
  border-radius:22px; box-shadow:0 0 0 1px rgba(185,177,245,.3), 0 20px 55px var(--glow);
  z-index:6; animation:bob 5s ease-in-out infinite; }

/* glowing spine + travelling packets: data flowing from the logo through each guard */
.flow-spine { position:absolute; top:94px; bottom:34px; left:50%; width:2px; transform:translateX(-50%); z-index:1;
  background:linear-gradient(180deg, transparent, rgba(124,108,246,.55) 14%, rgba(124,108,246,.55) 86%, transparent); }
.flow-spine i { position:absolute; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%;
  background:#e9e5ff; box-shadow:0 0 12px var(--accent2), 0 0 5px #fff;
  animation:flow-down 3.2s linear infinite; }
.flow-spine i:nth-child(2){ animation-delay:1.05s; }
.flow-spine i:nth-child(3){ animation-delay:2.1s; }
@keyframes flow-down { 0%{ top:-4px; opacity:0; } 12%{opacity:1;} 88%{opacity:1;} 100%{ top:100%; opacity:0; } }

.lp { position:absolute; left:50%; width:256px; padding:11px 15px; border-radius:15px;
  transform:translateX(-50%); display:flex; align-items:center; gap:12px; z-index:3;
  transition:border-color .2s, box-shadow .2s; }
.lp .lp-ic { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:11px;
  background:rgba(124,108,246,.14); border:1px solid rgba(185,177,245,.25); color:var(--accent2); }
.lp .lp-ic svg { width:19px; height:19px; }
.lp .lp-txt { display:flex; flex-direction:column; gap:2px; text-align:left; }
.lp .lp-txt b { font-family:var(--mono); font-size:12px; letter-spacing:1.2px; color:#efeaff; font-weight:700; }
.lp .lp-txt span { font-size:10.5px; color:var(--muted); letter-spacing:.3px; }
.lp:hover { border-color:rgba(185,177,245,.5); box-shadow:0 14px 34px var(--glow); }
.lp1 { top:112px; animation:bob 6s ease-in-out infinite; }
.lp2 { top:198px; animation:bob 6s ease-in-out .6s infinite; }
.lp3 { top:284px; animation:bob 6s ease-in-out 1.2s infinite; }
.lp1 .lp-ic { color:#9a8cff; }
.lp3 .lp-ic { color:#ff9d5c; background:rgba(255,157,92,.12); border-color:rgba(255,157,92,.3); }
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-10px);} }

/* ---------- ticker ---------- */
.ticker { display:flex; align-items:center; gap:0; margin:10px 0 60px; padding:0; border-radius:14px;
  overflow:hidden; }
.ticker-label { position:relative; z-index:2; flex:none; padding:12px 16px; font-family:var(--mono);
  font-size:11px; letter-spacing:1.5px; color:#0f0a2c; font-weight:800;
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  box-shadow:8px 0 16px rgba(12,10,32,.9); }
.ticker-track { -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.ticker-track { display:flex; align-items:center; gap:16px; white-space:nowrap;
  padding:12px 16px; font-family:var(--mono); font-size:13px; color:var(--muted);
  animation:marquee 34s linear infinite; }
.ticker-track span { color:var(--text); }
.ticker-track .dot { color:var(--accent); }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- section basics ---------- */
.sec-title { font-size:clamp(26px,3.4vw,40px); line-height:1.1; letter-spacing:-.6px; font-weight:800; }
.sec-title.center { text-align:center; }
.sec-sub { color:var(--muted); font-size:16px; max-width:640px; margin:14px auto 0; }
.sec-sub.center { text-align:center; }
.sec-text { color:var(--muted); font-size:16px; margin:18px 0; max-width:560px; }
.sec-text b { color:var(--text); }
.sec-fine { color:#8579b8; font-size:13px; margin:14px 0; max-width:520px; }
.block-sec { padding:70px 0; }

/* ---------- split (semantic) ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:70px 0; }
.compare { display:flex; align-items:center; gap:16px; justify-content:center; }
.compare-col { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:18px 20px; min-width:150px; }
.compare-col h4 { font-size:13px; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:10px; }
.compare-col.hot { border-color:rgba(124,108,246,.5); box-shadow:0 0 30px var(--glow);
  background:rgba(124,108,246,.08); }
.compare-col.hot h4 { color:var(--accent2); }
.compare-col ul { margin:0; padding-left:16px; }
.compare-col li { font-size:14px; margin:6px 0; }
.compare-col.hot li { color:var(--text); }
.compare-arrow { font-size:24px; color:var(--accent); }

/* ---------- threat grid ---------- */
.threat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:36px; }
.tcard { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:16px; transition:transform .2s, border-color .2s, box-shadow .2s; }
.tcard:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 12px 30px var(--glow); }
.tcard .tid { font-family:var(--mono); font-size:12px; color:var(--accent2); }
.tcard .towasp { float:right; font-family:var(--mono); font-size:11px; color:var(--muted); }
.tcard h4 { font-size:15px; margin:8px 0 6px; }
.tcard p { font-size:13px; color:var(--muted); margin:0; }

/* ---------- pipeline ---------- */
.pipe { display:flex; align-items:stretch; gap:0; margin-top:44px; flex-wrap:wrap; justify-content:center; }
.pipe-stage { flex:1; min-width:150px; text-align:center; padding:0 6px; }
.pipe-node { width:52px; height:52px; margin:0 auto 12px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--mono); font-weight:800; color:var(--accent2);
  background:rgba(124,108,246,.12); border:1px solid rgba(124,108,246,.4);
  box-shadow:0 0 0 0 var(--glow); animation:pulse 2.4s ease-in-out infinite; }
.pipe-stage:nth-child(3) .pipe-node { animation-delay:.3s; }
.pipe-stage:nth-child(5) .pipe-node { animation-delay:.6s; }
.pipe-stage:nth-child(7) .pipe-node { animation-delay:.9s; }
.pipe-node.hot { color:var(--hot); border-color:rgba(255,107,138,.5); background:rgba(255,107,138,.12); }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(124,108,246,.35);} 50%{box-shadow:0 0 0 10px rgba(124,108,246,0);} }
.pipe-stage h4 { font-size:15px; margin-bottom:4px; }
.pipe-stage p { font-size:12px; color:var(--muted); margin:0; }
.pipe-flow { flex:none; width:44px; align-self:flex-start; height:52px; position:relative; }
.pipe-flow::before { content:""; position:absolute; top:26px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); background-size:200% 100%;
  animation:flow 1.8s linear infinite; }
@keyframes flow { from{background-position:200% 0;} to{background-position:-200% 0;} }

/* ---------- action firewall ---------- */
.fw-sec { padding:44px; border-radius:24px; margin:20px 0; text-align:center; }
.fw-tag { display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:2px;
  color:var(--hot); border:1px solid rgba(255,107,138,.4); border-radius:20px; padding:5px 14px; margin-bottom:16px; }
.fw-sec .sec-text { margin:16px auto 30px; text-align:center; max-width:700px; }
.taint-demo { display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; margin:30px 0 24px; }
.td-node { padding:14px 18px; border-radius:14px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); font-size:13px; font-weight:600; }
.td-node small { color:var(--warn); font-weight:400; font-family:var(--mono); }
.td-node.egress small { color:var(--accent2); }
.td-wire { position:relative; width:90px; height:2px; background:rgba(185,177,245,.25); }
.packet { position:absolute; top:-4px; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--warn); box-shadow:0 0 12px var(--warn); animation:travel 2.4s ease-in-out infinite; }
.packet2 { animation-delay:1.2s; background:var(--hot); box-shadow:0 0 12px var(--hot); }
@keyframes travel { 0%{left:0; opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{left:80px; opacity:0;} }
.td-block { padding:14px 20px; border-radius:14px; margin-left:10px; font-weight:800; letter-spacing:1px;
  color:var(--hot); background:rgba(255,107,138,.14); border:1px solid rgba(255,107,138,.5);
  box-shadow:0 0 30px rgba(255,107,138,.3); animation:blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,60%,100%{opacity:.55;} 80%{opacity:1;} }
.risk-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.risk { font-family:var(--mono); font-size:12px; padding:6px 12px; border-radius:20px; border:1px solid; }
.risk.r0 { color:var(--ok);   border-color:rgba(64,220,162,.4); }
.risk.r1 { color:var(--accent2); border-color:rgba(185,177,245,.4); }
.risk.r2 { color:var(--warn); border-color:rgba(255,196,87,.4); }
.risk.r3 { color:var(--hot);  border-color:rgba(255,107,138,.4); }

/* ---------- KPI ---------- */
.kpi-sec { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:70px 0; }
.kpi { text-align:center; }
.kpi-v { font-family:var(--mono); font-weight:800; font-size:clamp(30px,4vw,46px);
  color:var(--accent2); text-shadow:0 0 24px var(--glow); }
.kpi-k { color:var(--muted); font-size:13px; margin-top:6px; }

/* ---------- token flywheel ---------- */
.token-sec { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:70px 0; }
.flywheel { position:relative; height:340px; display:grid; place-items:center; }
/* two counter-rotating dashed rings; labels stay upright */
.flywheel::before, .flywheel::after { content:""; position:absolute; border-radius:50%;
  border:1px dashed rgba(185,177,245,.25); }
.flywheel::before { width:300px; height:300px; animation:spin 26s linear infinite; }
.flywheel::after { width:224px; height:224px; border-color:rgba(124,108,246,.2);
  animation:spin 34s linear infinite reverse; }
.fw-core { width:120px; height:120px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-weight:800; font-size:20px; color:#0f0a2c; position:relative; z-index:2;
  background:radial-gradient(circle at 35% 30%, #d9d2ff, var(--accent));
  box-shadow:0 0 50px var(--glow); }
.orbit { position:absolute; z-index:3; }
.orbit span { font-family:var(--mono); font-size:12px; color:var(--accent2); background:#161138;
  padding:4px 12px; border-radius:14px; border:1px solid rgba(124,108,246,.45);
  box-shadow:0 4px 14px rgba(8,5,30,.6); white-space:nowrap; }
.orbit.o1 { top:2px;  left:50%; transform:translateX(-50%); }   /* Submit — top */
.orbit.o2 { right:0;  top:50%; transform:translateY(-50%); }    /* Validate — right */
.orbit.o3 { bottom:2px; left:50%; transform:translateX(-50%); } /* Curate — bottom */
.orbit.o4 { left:0;   top:50%; transform:translateY(-50%); }    /* Distribute — left */

/* ---------- roadmap ---------- */
.road-sec { padding:70px 0; }
.road { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px; position:relative; }
.road::before { content:""; position:absolute; top:14px; left:6%; right:6%; height:2px;
  background:linear-gradient(90deg,var(--accent),rgba(124,108,246,.15)); }
.road-item { position:relative; padding-top:34px; }
.road-item::before { content:""; position:absolute; top:8px; left:0; width:14px; height:14px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 16px var(--glow); }
.road-item b { font-family:var(--mono); font-size:14px; color:var(--accent2); }
.road-item p { font-size:13px; color:var(--muted); margin:8px 0 0; }
.road-live { display:inline-block; margin-left:8px; font-size:11px; color:var(--ok); }

/* ---------- CTA + footer ---------- */
.cta-sec { text-align:center; padding:56px 30px; border-radius:24px; margin:30px 0 40px; }
.cta-sec h2 { font-size:clamp(26px,3.4vw,38px); letter-spacing:-.5px; }
.cta-sec p { color:var(--muted); margin:14px 0 26px; }
.foot { max-width:1180px; margin:0 auto; padding:30px 22px 50px; display:flex; justify-content:space-between;
  color:var(--muted); font-size:13px; font-family:var(--mono); border-top:1px solid rgba(255,255,255,.07); }
.foot-conf { color:var(--hot); letter-spacing:1px; }

/* ---------- scroll reveal ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal[data-anim="left"]  { transform:translateX(-40px); }
.reveal[data-anim="right"] { transform:translateX(40px); }
.reveal[data-anim="fade"]  { transform:none; }
.reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .bg-aurora, .hero-logo, .lp, .hexring, .hexring2, .flow-spine i, .orbit, .orbit span, .packet, .pipe-node, .pipe-flow::before, .td-block, .grad { animation:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* ---------- responsive ---------- */
@media (max-width:940px) {
  .hero, .split, .token-sec { grid-template-columns:1fr; }
  .hero-visual { height:400px; }
  .nav-links { display:none; }
  .threat-grid { grid-template-columns:repeat(2,1fr); }
  .kpi-sec, .road { grid-template-columns:repeat(2,1fr); }
  .pipe-flow { display:none; }
}