/* /Components/Propagate.razor.rz.scp.css */
/* Propagate.razor.css — scoped to the Propagate component.
   Base styles + CSS variables live on the .pg root (not :root/body),
   so Blazor's CSS isolation can scope them correctly. */

.pg[b-7hk3zm2wo5]{
  --void:#07080D; --void-2:#0A0C14; --surface:#10121C; --surface-2:#161930;
  --line:rgba(146,156,196,.14); --line-2:rgba(146,156,196,.28);
  --ink:#EAECF6; --muted:#9DA3BC; --muted-2:#6C7292;
  --cyan:#37E2E6; --violet:#7C5CFF; --magenta:#FF4D9D; --amber:#FFC24B;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1180px;

  background:var(--void); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh;
}
.pg *[b-7hk3zm2wo5]{box-sizing:border-box}
.pg a[b-7hk3zm2wo5]{color:inherit; text-decoration:none}
.pg [b-7hk3zm2wo5]::selection{background:var(--magenta); color:#0a0a0a}

.wrap[b-7hk3zm2wo5]{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.mono[b-7hk3zm2wo5]{font-family:var(--mono)}
.eyebrow[b-7hk3zm2wo5]{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan); display:inline-flex; align-items:center; gap:10px; margin:0 0 22px;
}
.eyebrow[b-7hk3zm2wo5]::before{content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--cyan))}

/* ---------- NAV ---------- */
nav[b-7hk3zm2wo5]{
  position:sticky; top:0; z-index:50;
  background:rgba(7,8,13,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
nav .wrap[b-7hk3zm2wo5]{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand[b-7hk3zm2wo5]{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:600; letter-spacing:-.01em; font-size:18px}
.brand .glyph[b-7hk3zm2wo5]{width:14px; height:14px; border-radius:50%; position:relative;
  background:var(--magenta); box-shadow:0 0 0 4px rgba(255,77,157,.18),0 0 0 9px rgba(124,92,255,.10),0 0 0 15px rgba(55,226,230,.06)}
.navlinks[b-7hk3zm2wo5]{display:flex; gap:30px; align-items:center; font-size:14px; color:var(--muted); font-family:var(--mono)}
.navlinks a:hover[b-7hk3zm2wo5]{color:var(--ink)}
.navlinks .pill[b-7hk3zm2wo5]{border:1px solid var(--line-2); padding:8px 16px; border-radius:999px; color:var(--ink)}
.navlinks .pill:hover[b-7hk3zm2wo5]{border-color:var(--cyan); box-shadow:0 0 24px -6px var(--cyan)}
@media(max-width:720px){ .navlinks a:not(.pill)[b-7hk3zm2wo5]{display:none} }

/* ---------- HERO ---------- */
.hero[b-7hk3zm2wo5]{position:relative; padding:96px 0 84px; overflow:hidden}
.hero[id][b-7hk3zm2wo5]{scroll-margin-top:80px}
#field[b-7hk3zm2wo5]{position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block}
.hero[b-7hk3zm2wo5]::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 78% 8%, transparent 30%, var(--void) 78%),
             linear-gradient(180deg, transparent 55%, var(--void) 100%)}
.hero .wrap[b-7hk3zm2wo5]{position:relative; z-index:2}
.hero h1[b-7hk3zm2wo5]{
  font-family:var(--display); font-weight:600; letter-spacing:-.025em;
  font-size:clamp(38px,6.4vw,74px); line-height:1.02; margin:0 0 26px; max-width:15ch;
}
.hero h1 .lit[b-7hk3zm2wo5]{
  background:linear-gradient(105deg,var(--cyan),var(--violet) 55%,var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead[b-7hk3zm2wo5]{font-size:clamp(17px,2vw,21px); color:var(--muted); max-width:56ch; margin:0 0 38px}
.cta-row[b-7hk3zm2wo5]{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.btn[b-7hk3zm2wo5]{font-family:var(--mono); font-size:14px; padding:14px 24px; border-radius:12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; transition:.18s; border:1px solid transparent}
.btn.primary[b-7hk3zm2wo5]{background:var(--ink); color:var(--void); font-weight:600}
.btn.primary:hover[b-7hk3zm2wo5]{transform:translateY(-2px); box-shadow:0 14px 40px -14px rgba(234,236,246,.5)}
.btn.ghost[b-7hk3zm2wo5]{border-color:var(--line-2); color:var(--ink)}
.btn.ghost:hover[b-7hk3zm2wo5]{border-color:var(--cyan); color:var(--cyan); box-shadow:inset 0 0 30px -18px var(--cyan)}
.btn .arrow[b-7hk3zm2wo5]{transition:transform .18s}
.btn:hover .arrow[b-7hk3zm2wo5]{transform:translateX(3px)}

.heroStats[b-7hk3zm2wo5]{display:flex; gap:40px; margin-top:64px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:30px}
.heroStats .s .n[b-7hk3zm2wo5]{font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1}
.heroStats .s .n .u[b-7hk3zm2wo5]{color:var(--cyan)}
.heroStats .s .k[b-7hk3zm2wo5]{font-family:var(--mono); font-size:12px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.14em; margin-top:9px}

/* ---------- SECTIONS ---------- */
section[b-7hk3zm2wo5]{position:relative}
section[id][b-7hk3zm2wo5]{scroll-margin-top:80px}
.band[b-7hk3zm2wo5]{padding:104px 0; border-top:1px solid var(--line)}
.band.alt[b-7hk3zm2wo5]{background:linear-gradient(180deg,var(--void-2),var(--void))}
h2[b-7hk3zm2wo5]{font-family:var(--display); font-weight:600; letter-spacing:-.02em; font-size:clamp(28px,4vw,44px); line-height:1.08; margin:0 0 20px; max-width:20ch}
.sub[b-7hk3zm2wo5]{color:var(--muted); max-width:60ch; font-size:18px}
.lede-strong[b-7hk3zm2wo5]{color:var(--ink)}

/* difference / contrast */
.contrast[b-7hk3zm2wo5]{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:56px}
@media(max-width:820px){ .contrast[b-7hk3zm2wo5]{grid-template-columns:1fr} }
.card[b-7hk3zm2wo5]{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px; position:relative; overflow:hidden}
.cardtag[b-7hk3zm2wo5]{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin:0 0 18px}
.cardtag.us[b-7hk3zm2wo5]{color:var(--cyan)}
.card h3[b-7hk3zm2wo5]{font-family:var(--display); font-weight:600; font-size:22px; margin:0 0 10px; letter-spacing:-.01em}
.card p[b-7hk3zm2wo5]{color:var(--muted); font-size:15.5px; margin:0}
.card.us[b-7hk3zm2wo5]{border-color:rgba(55,226,230,.35); box-shadow:0 0 60px -30px var(--cyan)}
.diag[b-7hk3zm2wo5]{height:150px; margin-bottom:22px; border-radius:12px; background:var(--void); border:1px solid var(--line); position:relative; overflow:hidden}
.texgrid[b-7hk3zm2wo5]{position:absolute; left:24px; top:50%; transform:translateY(-50%); display:grid; grid-template-columns:repeat(5,12px); gap:6px}
.texgrid i[b-7hk3zm2wo5]{width:12px; height:12px; border-radius:3px; background:var(--surface-2); border:1px solid var(--line)}
.texgrid i:nth-child(3n)[b-7hk3zm2wo5]{background:rgba(124,92,255,.5)}
.texgrid i:nth-child(4n)[b-7hk3zm2wo5]{background:rgba(55,226,230,.4)}
.sampleArrow[b-7hk3zm2wo5]{position:absolute; left:150px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:11px; color:var(--muted-2); letter-spacing:.1em}
.ledcol[b-7hk3zm2wo5]{position:absolute; right:26px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:9px}
.ledcol i[b-7hk3zm2wo5]{width:9px; height:9px; border-radius:50%; background:var(--muted-2)}
.rings[b-7hk3zm2wo5]{position:absolute; inset:0}
.rings i[b-7hk3zm2wo5]{position:absolute; left:26%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid var(--cyan); opacity:0; animation:ring-b-7hk3zm2wo5 3.4s linear infinite}
.rings i:nth-child(2)[b-7hk3zm2wo5]{animation-delay:1.13s; border-color:var(--violet)}
.rings i:nth-child(3)[b-7hk3zm2wo5]{animation-delay:2.26s; border-color:var(--magenta)}
@keyframes ring-b-7hk3zm2wo5{0%{width:8px;height:8px;opacity:.9}100%{width:230px;height:230px;opacity:0}}
.origin[b-7hk3zm2wo5]{position:absolute; left:26%; top:50%; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--magenta); box-shadow:0 0 14px var(--magenta)}
.dots3d i[b-7hk3zm2wo5]{position:absolute; width:7px; height:7px; border-radius:50%; background:rgba(146,156,196,.35)}

/* pipeline (numbered — a real sequence) */
.steps[b-7hk3zm2wo5]{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:56px; border:1px solid var(--line); border-radius:18px; overflow:hidden}
@media(max-width:900px){ .steps[b-7hk3zm2wo5]{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .steps[b-7hk3zm2wo5]{grid-template-columns:1fr} }
.step[b-7hk3zm2wo5]{padding:30px 26px; border-right:1px solid var(--line); position:relative; background:var(--surface)}
.step:last-child[b-7hk3zm2wo5]{border-right:none}
.step .no[b-7hk3zm2wo5]{font-family:var(--mono); font-size:12px; color:var(--cyan); letter-spacing:.14em}
.step h4[b-7hk3zm2wo5]{font-family:var(--display); font-weight:600; font-size:18px; margin:16px 0 10px; letter-spacing:-.01em}
.step p[b-7hk3zm2wo5]{color:var(--muted); font-size:14.5px; margin:0}
.step .chip[b-7hk3zm2wo5]{display:inline-block; margin-top:16px; font-family:var(--mono); font-size:11px; color:var(--muted-2); border:1px solid var(--line); border-radius:6px; padding:4px 8px}

/* architecture split */
.arch[b-7hk3zm2wo5]{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:56px}
@media(max-width:820px){ .arch[b-7hk3zm2wo5]{grid-template-columns:1fr} }
.archcard[b-7hk3zm2wo5]{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:34px}
.archcard .k[b-7hk3zm2wo5]{font-family:var(--mono); font-size:12px; color:var(--muted-2); letter-spacing:.14em; text-transform:uppercase}
.archcard h3[b-7hk3zm2wo5]{font-family:var(--display); font-weight:600; font-size:24px; margin:14px 0 12px; letter-spacing:-.01em}
.archcard h3 span[b-7hk3zm2wo5]{color:var(--cyan)}
.archcard p[b-7hk3zm2wo5]{color:var(--muted); font-size:15.5px; margin:0 0 20px}
.archcard ul[b-7hk3zm2wo5]{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.archcard li[b-7hk3zm2wo5]{font-family:var(--mono); font-size:13px; color:var(--ink); display:flex; gap:11px; align-items:baseline}
.archcard li[b-7hk3zm2wo5]::before{content:"›"; color:var(--violet)}

/* domain grid */
.concepts[b-7hk3zm2wo5]{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:56px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden}
@media(max-width:820px){ .concepts[b-7hk3zm2wo5]{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .concepts[b-7hk3zm2wo5]{grid-template-columns:1fr} }
.concept[b-7hk3zm2wo5]{background:var(--surface); padding:26px 24px; transition:.18s}
.concept:hover[b-7hk3zm2wo5]{background:var(--surface-2)}
.concept .t[b-7hk3zm2wo5]{font-family:var(--mono); font-size:14px; color:var(--cyan); margin:0 0 8px; letter-spacing:.02em}
.concept p[b-7hk3zm2wo5]{color:var(--muted); font-size:14px; margin:0}

/* protocols */
.protos[b-7hk3zm2wo5]{display:flex; gap:12px; flex-wrap:wrap; margin-top:44px}
.proto[b-7hk3zm2wo5]{font-family:var(--mono); font-size:13px; border:1px solid var(--line-2); border-radius:10px; padding:12px 18px; color:var(--ink);
  display:flex; gap:10px; align-items:center}
.proto b[b-7hk3zm2wo5]{color:var(--muted-2); font-weight:500}
.proto .dot[b-7hk3zm2wo5]{width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.proto.soon[b-7hk3zm2wo5]{opacity:.55}
.proto.soon .dot[b-7hk3zm2wo5]{background:var(--amber)}

/* video placeholder */
.video[b-7hk3zm2wo5]{margin-top:52px; border:1px solid var(--line); border-radius:20px; aspect-ratio:16/9; position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%, rgba(124,92,255,.18), transparent 55%),var(--surface);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px}
.video .play[b-7hk3zm2wo5]{width:74px; height:74px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04); transition:.2s}
.video:hover .play[b-7hk3zm2wo5]{border-color:var(--cyan); box-shadow:0 0 50px -14px var(--cyan)}
.video .play[b-7hk3zm2wo5]::after{content:""; border-left:16px solid var(--ink); border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:5px}
.video .cap[b-7hk3zm2wo5]{font-family:var(--mono); font-size:12px; color:var(--muted-2); letter-spacing:.14em; text-transform:uppercase}

/* cta */
.final[b-7hk3zm2wo5]{padding:120px 0; text-align:center; border-top:1px solid var(--line);
  background:radial-gradient(90% 140% at 50% 120%, rgba(55,226,230,.10), transparent 60%)}
.final h2[b-7hk3zm2wo5]{margin:0 auto 22px}
.final .sub[b-7hk3zm2wo5]{margin:0 auto 40px}
.final .cta-row[b-7hk3zm2wo5]{justify-content:center}

footer[b-7hk3zm2wo5]{border-top:1px solid var(--line); padding:44px 0; color:var(--muted-2); font-family:var(--mono); font-size:13px}
footer .wrap[b-7hk3zm2wo5]{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
footer a:hover[b-7hk3zm2wo5]{color:var(--ink)}

/* reveal */
.reveal[b-7hk3zm2wo5]{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in[b-7hk3zm2wo5]{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .reveal[b-7hk3zm2wo5]{opacity:1; transform:none; transition:none} .rings i[b-7hk3zm2wo5]{animation:none} }