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

:root{
  --bg: #0B0D0E;
  --surface: #14181A;
  --surface-2: #1B2023;
  --border: #262C2F;
  --border-soft: #1E2426;
  --text: #ECEFEE;
  --text-muted: #939C9F;
  --text-faint: #5C6467;
  --brass: #C9A15A;
  --brass-soft: rgba(201,161,90,0.14);
  --ice: #6FA1C9;
  --green: #6FCF97;
  --amber: #F2C94C;
  --red: #EB6B6B;
}

html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}
.font-display{ font-family:'Space Grotesk', sans-serif; }
.font-mono{ font-family:'JetBrains Mono', monospace; }

::selection{ background:var(--brass); color:#0B0D0E; }

/* Grain / noise texture, very subtle */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hairline top rules used as section dividers */
.rule-top{ border-top:1px solid var(--border-soft); }

/* Nav blur */
.nav-blur{
  background:rgba(11,13,14,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Gauge instrument */
.gauge-needle{
  transform-origin:150px 150px;
  animation:sweep 1.6s cubic-bezier(.2,.9,.25,1) forwards;
}
@keyframes sweep{
  from{ transform:rotate(-92deg); opacity:0; }
  to{ transform:rotate(var(--needle-angle,18deg)); opacity:1; }
}
.gauge-fill{
  stroke-dasharray:377;
  stroke-dashoffset:377;
  animation:fillarc 1.4s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:.15s;
}
@keyframes fillarc{
  to{ stroke-dashoffset:var(--arc-offset,120); }
}

/* Signal bars */
.signal-bar-fill{
  transform:scaleX(0);
  transform-origin:left;
  animation:barfill 1s ease-out forwards;
  animation-delay:var(--delay,0s);
}
@keyframes barfill{ to{ transform:scaleX(1); } }

/* Chat bubble rise */
.bubble-in{
  opacity:0; transform:translateY(8px);
  animation:bubblein .5s ease-out forwards;
  animation-delay:var(--delay,0s);
}
@keyframes bubblein{ to{ opacity:1; transform:translateY(0); } }

/* Ticking value counter aesthetic */
.tabular{ font-variant-numeric: tabular-nums; }

/* Scroll reveal */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .gauge-needle, .gauge-fill, .signal-bar-fill, .bubble-in, .reveal{
    animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;
  }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px; border-radius:2px;
}

/* Divider dot */
.dot-sep::before{ content:'·'; color:var(--text-faint); margin:0 .5rem; }

.card-surface{
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
  border:1px solid var(--border);
}
.card-surface:hover{ border-color:#3a4245; }

.badge{
  border:1px solid var(--border); background:var(--surface);
  font-family:'JetBrains Mono', monospace;
}

.legal-page h2{ font-family:'Space Grotesk', sans-serif; }
.legal-page a{ color:var(--brass); text-decoration:underline; text-underline-offset:3px; }