/* ==========================================================================
   BLOTTER GAMES — clinical-signal design system
   Aesthetic: dark diagnostic monitor. Deep slate canvas, EKG grid,
   indigo signal glow, per-app accent punctuation.
   Type: Fraunces (display serif) · Hanken Grotesk (body) · IBM Plex Mono (readouts)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --display: 'Fraunces', Georgia, serif;
  --body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Canvas — deep clinical slate */
  --bg: #070a14;
  --bg-2: #0a0f1e;
  --ink: #eef2fb;
  --ink-soft: #aab4cb;
  --ink-mute: #6b7691;

  /* Surfaces */
  --panel: rgba(18, 24, 41, 0.66);
  --panel-2: rgba(28, 36, 58, 0.5);
  --line: rgba(124, 138, 173, 0.16);
  --line-strong: rgba(124, 138, 173, 0.30);

  /* Signal — indigo primary */
  --indigo: #6366f1;
  --indigo-bright: #818cf8;
  --indigo-deep: #4338ca;

  /* Per-app / game accents (from the real Stat! app) */
  --rose: #fb7185;       /* Syndrome   */
  --emerald: #34d399;    /* Traits     */
  --violet: #a78bfa;     /* Associations */
  --amber: #fbbf24;      /* Tangent (soon) */

  --shadow-1: 0 2px 12px rgba(0,0,0,.35);
  --shadow-2: 0 24px 60px rgba(0,0,0,.55);
  --shadow-3: 0 40px 110px rgba(0,0,0,.65);
  --glow-indigo: 0 0 0 1px rgba(99,102,241,.4), 0 18px 50px rgba(79,70,229,.45);

  --r-sm: 14px;
  --r: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --maxw: 1180px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- Atmosphere: EKG grid + signal auroras + grain ---------------------- */
.bg-layers { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.bg-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(124,138,173,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,138,173,.05) 1px, transparent 1px),
    linear-gradient(rgba(124,138,173,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,138,173,.025) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 80%);
}
.bg-aurora {
  position: absolute; inset: 0;
  background:
    radial-gradient(48% 40% at 14% 4%, rgba(99,102,241,.30), transparent 60%),
    radial-gradient(42% 38% at 88% 0%, rgba(167,139,250,.18), transparent 60%),
    radial-gradient(60% 50% at 50% 108%, rgba(52,211,153,.10), transparent 60%);
}
.bg-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--indigo); color: #fff; }

/* ---- Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }
.section { padding: 110px 0; position: relative; }

h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; }

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--indigo-bright);
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before { content: ''; width: 26px; height: 1px; background: currentColor; opacity: .6; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  font-family: var(--body); font-weight: 700; font-size: 16px;
  padding: 16px 28px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
}
.btn svg { width: 20px; height: 20px; }
.btn-primary { background: linear-gradient(135deg, var(--indigo), var(--indigo-deep)); color: #fff; box-shadow: var(--glow-indigo); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(129,140,248,.6), 0 26px 60px rgba(79,70,229,.6); }
.btn-ghost { background: var(--panel); color: var(--ink); border-color: var(--line-strong); backdrop-filter: blur(12px); }
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--indigo-bright); }

/* ---- Nav ---------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.nav.scrolled { background: rgba(7,10,20,.72); backdrop-filter: blur(20px) saturate(160%); border-color: var(--line); }
.nav-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { color: var(--ink-soft); font-weight: 600; font-size: 15px; padding: 9px 15px; border-radius: 999px; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--ink); background: var(--panel-2); }

/* ---- Brand logo (custom Blotter Games pulse-mark) ----------------------- */
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand-mark { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 6px 16px rgba(99,102,241,.5)); }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name b { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.brand-name span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-mute); margin-top: 3px; }

/* ---- Panels ------------------------------------------------------------- */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  backdrop-filter: blur(16px); box-shadow: var(--shadow-2);
}

/* ---- Footer ------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding: 56px 0 44px; margin-top: 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 36px; flex-wrap: wrap; align-items: flex-start; }
.footer-links { display: flex; gap: 30px; flex-wrap: wrap; }
.footer-links a { color: var(--ink-mute); font-weight: 500; font-size: 15px; transition: color .2s; }
.footer-links a:hover { color: var(--ink); }
.footer-base { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-mute); font-size: 13px; font-family: var(--mono); }

/* ---- Reveal ------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .section { padding: 74px 0; }
  .nav-hide { display: none; }
  body { font-size: 16px; }
}