/* lum.css — the ONE cinematic design system, linked LAST so it overrides each page's inline tokens.
   Committed dark "luminous instrument": the living glyph is the light source, green = PROVEN, blue = structure.
   Pages keep their component markup; this restyles them into one coherent, modern world. */
@font-face{ font-family:"Space Grotesk"; src:url("/fonts/space-grotesk-latin.woff2") format("woff2"); font-weight:300 700; font-display:swap; }

:root{
  --bg:#07080b; --bg2:#0b0d12; --panel:#13151b; --panel-2:#0f1116;
  --ink:#f3f5fb; --muted:#9aa2b4; --faint:#616b80;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.055);
  --accent:#8ea2ff; --accent-2:#6f86ff; --accent-ink:#07080b; --accent-soft:#161c2b;
  --verify:#37e39a; --verify-soft:#0f2318; --good:#37e39a; --good-bg:#0f2318;
  --warn:#e8c07d; --warn-bg:#2a2114; --bad:#ff7a70; --bad-bg:#2a1513;
  --spine:rgba(255,255,255,.09); --chip:rgba(255,255,255,.05);
  /* aliases some pages use (verify/privacy/terms) — keep dark so forced-dark never breaks contrast */
  --ground:#07080b; --surface:#13151b; --surface-2:#0f1116; --card:#13151b; --amber:#e8c07d;
  --radius:16px; --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.5);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --disp:"Space Grotesk",var(--sans);
}
html{background:var(--bg)}
body{
  background:
    radial-gradient(56% 46% at 50% -8%, rgba(55,227,154,.14), transparent 60%),
    radial-gradient(48% 38% at 90% 6%, rgba(142,162,255,.12), transparent 60%),
    radial-gradient(60% 50% at 4% 30%, rgba(142,162,255,.07), transparent 55%),
    radial-gradient(70% 60% at 62% 112%, rgba(55,227,154,.09), transparent 60%),
    var(--bg) !important;
  background-attachment:fixed !important; color:var(--ink);
}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}
.wrap,header.top,main,section,footer{position:relative;z-index:1}

/* brand lockup: the living mark + "Lum" (the glyph IS the One) */
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);letter-spacing:-.01em}
.brand .mark{width:26px;height:26px;flex:none;border-radius:50%;background:url("/assets/one-glyph.png") center/contain no-repeat;filter:drop-shadow(0 0 10px rgba(55,227,154,.5))}
.brand b{background:linear-gradient(90deg,var(--accent),var(--verify));-webkit-background-clip:text;background-clip:text;color:transparent}

/* glass panels (component classes across pages use these tokens; add depth) */
.card,.sector,.teaser,.badge-card,.door{backdrop-filter:blur(10px)}
.card,.badge-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}

/* nav pills (engine pages) — dark, luminous current state */
nav.pages a{border:1px solid var(--line)!important;color:var(--muted)!important;background:transparent}
nav.pages a[aria-current="page"],nav.pages a.here{background:linear-gradient(180deg,#fff,#e9ecf5)!important;color:#0a0b0f!important;border-color:transparent!important;font-weight:600}

/* headings feel: display face on the big ones */
.brand,h1,h2{font-family:var(--disp)}

/* a11y: skip-to-content link — hidden until focused, then a visible on-brand chip at top-left */
.lumskip{position:fixed;top:-100px;left:12px;z-index:200;background:var(--accent);color:#07080b;font-family:var(--mono);
  font-size:13px;font-weight:600;padding:10px 16px;border-radius:10px;text-decoration:none;transition:top .15s}
.lumskip:focus{top:12px}
main#lum-main:focus{outline:none}
/* a11y: any link sitting on a dark panel must clear contrast — never fall back to the browser's default blue
   (~1.94:1 on our panels). Default all in-content links to the accent, which passes on the dark ground. */
a{color:var(--accent)}
a:hover{color:var(--verify)}

/* keyboard focus: a visible, on-brand ring everywhere (a11y + polish) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

/* the ONE shared top nav (nav.js) — identical on every page; one row, wraps gracefully, luminous current */
.lumnav{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:2px 0 22px;font-family:var(--mono);font-size:12.5px}
.lumnav a{padding:6px 13px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
  background:rgba(255,255,255,.02);text-decoration:none;transition:border-color .12s,color .12s,background .12s}
.lumnav a:hover{color:var(--ink);border-color:var(--accent);background:rgba(142,162,255,.07)}
.lumnav a.here,.lumnav .lumacct.here{background:linear-gradient(180deg,#fff,#e9ecf5);color:#0a0b0f;border-color:transparent;font-weight:600}
/* grouped menus (Build / Trust): a real IA, not twelve equal pills */
.lumnav .lumdrop{position:relative;display:inline-flex}
.lumnav .lumdrop-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);background:rgba(255,255,255,.02);font:inherit;font-size:12.5px;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.lumnav .lumdrop-btn:hover{color:var(--ink);border-color:var(--accent);background:rgba(142,162,255,.07)}
.lumnav .lumdrop-btn.here{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.lumnav .lumdrop.open .lumdrop-btn svg{transform:rotate(180deg)} .lumnav .lumdrop-btn svg{transition:transform .15s}
.lumnav .lumdrop-menu{position:absolute;top:calc(100% + 7px);left:0;z-index:50;min-width:210px;display:none;flex-direction:column;gap:2px;
  padding:7px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 94%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);box-shadow:var(--shadow)}
.lumnav .lumdrop.open .lumdrop-menu{display:flex}
.lumnav .lumdrop-menu a{display:block;padding:8px 11px;border-radius:9px;border:0;background:transparent;color:var(--muted);font-size:13px;white-space:nowrap}
.lumnav .lumdrop-menu a:hover{background:rgba(142,162,255,.1);color:var(--ink)}
.lumnav .lumdrop-menu a.here{background:linear-gradient(180deg,#fff,#e9ecf5);color:#0a0b0f;font-weight:600}
.lumnav .lumacct{margin-left:auto}   /* account sits at the far end */

/* shared page furniture: eyebrow label, big hero, and a trust strip — so every page speaks one language */
.lumhero .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.lumhero{padding:14px 0 30px;border-bottom:1px solid var(--line-2);margin-bottom:26px}
.lumhero h1{font-family:var(--disp);font-size:clamp(30px,4.4vw,52px);line-height:1.05;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance;max-width:20ch}
.lumhero h1 b{background:linear-gradient(90deg,var(--verify),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.lumhero .lead{font-size:16px;line-height:1.55;color:var(--muted);max-width:62ch;margin:0}
/* two reading levels: a plain-language line for everyone, sitting above the technical lead */
.plain{display:flex;gap:12px;align-items:baseline;margin:0 0 18px;padding:13px 16px;border-radius:13px;max-width:64ch;
  background:color-mix(in srgb,var(--verify) 7%,transparent);border:1px solid color-mix(in srgb,var(--verify) 22%,var(--line))}
.plain .pl{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--verify)}
.plain p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
@media(max-width:560px){.plain{flex-direction:column;gap:5px}}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:40px 0 8px}
.trust .t{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 20px;box-shadow:var(--shadow);transition:border-color .14s,transform .14s}
.trust .t:hover{border-color:color-mix(in srgb,var(--verify) 40%,var(--line));transform:translateY(-2px)}
.trust .t .ti{font-family:var(--disp);font-size:15px;font-weight:600;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.trust .t .ti .dot{width:8px;height:8px;border-radius:50%;background:var(--verify);box-shadow:0 0 10px var(--verify);flex:none}
.trust .t p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.reslabel{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin:22px 2px 2px}

/* a11y: honor reduced-motion — kill transforms/transitions/animations for users who ask */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .trust .t:hover{transform:none}
  .lumnav .lumdrop-btn svg{transition:none}
}

/* mobile: wide content (tables) scrolls inside its own card — the page body never scrolls sideways */
@media(max-width:700px){
  .card,.teaser,.sector{overflow-x:auto}
  table{max-width:100%}
}