/* ============================================================
   PROOF OF ASSURANCE — shared visual system
   Deep navy night sky · gold accent · protocol geometry
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* night sky */
  --ink:        #04070e;
  --navy:       #06101d;
  --navy-2:     #0a1626;
  --navy-3:     #102134;
  --line:       rgba(232, 181, 74, 0.30);
  --line-soft:  rgba(255, 255, 255, 0.08);
  --card:       rgba(14, 28, 47, 0.66);

  /* gold */
  --gold:       #e8b54a;
  --gold-bright:#ffd479;
  --gold-deep:  #b98a2e;

  /* signal */
  --green:      #34e0a1;
  --red:        #ff5d6c;
  --violet:     #a78bfa;

  /* type */
  --text:       #f4f7fb;
  --muted:      #93a1b5;
  --muted-2:    #5d6c80;

  --display: 'Space Grotesk', sans-serif;
  --ui:      'Manrope', sans-serif;
  --mono:    'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

/* ---------- night-sky background ---------- */
.sky {
  position: relative;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(232,181,74,0.16), transparent 42%),
    radial-gradient(90% 70% at 20% 100%, rgba(40,86,150,0.22), transparent 55%),
    linear-gradient(180deg, #03060c 0%, var(--navy) 48%, #050c17 100%);
  overflow: hidden;
}
.stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.stars i {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: var(--o, .6);
}
.scene > * { position: relative; z-index: 2; }

/* ---------- orbit rings ---------- */
.orbits { position: absolute; pointer-events: none; z-index: 1; }
.orbits .ring {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(232,181,74,0.16);
  border-radius: 50%;
}
.orbits .ring.dim { border-color: rgba(255,255,255,0.05); }
.orbits .node {
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 12px 2px rgba(255,212,121,0.7);
}

/* ---------- glass pyramid wireframe ---------- */
.pyramid { display: block; }
.pyramid .face   { fill: url(#pgrad); stroke: var(--gold); stroke-width: 1.4; }
.pyramid .pane   { stroke: rgba(232,181,74,0.42); stroke-width: 0.9; fill: none; }
.pyramid .rib    { stroke: rgba(232,181,74,0.30); stroke-width: 0.8; fill: none; }
.pyramid .refl   { stroke: rgba(232,181,74,0.16); stroke-width: 1; fill: none; }
.pyramid .horizon{ stroke: rgba(232,181,74,0.28); stroke-width: 1; }
.pyramid .apex   { fill: var(--gold-bright); }

/* ---------- type utilities ---------- */
.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--gold);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.9em;
}
.eyebrow::before {
  content: ""; width: 2.4em; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--text);
}
.display .gold { color: var(--gold); }
.serif-accent { font-family: var(--ui); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

.wordmark {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.wordmark .o { color: var(--gold); }

/* the Ø assurance glyph */
.glyph-o {
  display: inline-grid; place-items: center;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  position: relative;
  color: var(--gold);
}
.glyph-o::after {
  content: ""; position: absolute;
  width: 140%; height: 1.5px; background: var(--gold);
  transform: rotate(-45deg);
}

/* pill / chip */
.chip {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-bright);
  border: 1px solid var(--line);
  background: rgba(232,181,74,0.07);
  padding: 6px 12px; border-radius: 999px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.chip.live .dot { background: var(--red); box-shadow: 0 0 10px var(--red); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* vignette top/bottom for legibility */
.vignette::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,6,12,0.35) 0%, transparent 22%, transparent 70%, rgba(3,6,12,0.55) 100%);
}