/* design-system-v4.css — ASTRA DOSSIER · deep navy intelligence */
:root{
  /* deep blue base */
  --bg-0:#020617;
  --bg-1:#07111f;
  --bg-2:#0a192f;
  --bg-3:#0f2747;
  --bg-4:#123056;

  /* legacy aliases */
  --stone-0:var(--bg-0);
  --stone-1:var(--bg-1);
  --stone-2:var(--bg-2);
  --stone-3:var(--bg-3);
  --stone-4:var(--bg-4);

  /* text */
  --ink:#f1f5f9;
  --text:#dbe5f0;
  --text-2:#8aa0bb;
  --text-3:#5a6f8a;
  --text-4:#3b4d66;

  --line:rgba(125,211,252,.07);
  --line-2:rgba(125,211,252,.16);

  /* accents — soft cyan / sky */
  --cyan:#7dd3fc;
  --sky:#38bdf8;
  --pale:#93c5fd;
  --edge:#38bdf8;

  --teal:var(--cyan);
  --yellow:var(--sky);
  --purple:var(--pale);
  --copper:var(--cyan);
  --blue:var(--sky);
  --ice:var(--cyan);

  --accent:var(--sky);
  --accent-ink:#020617;
  --live:var(--cyan);

  --grad: linear-gradient(90deg, #93c5fd 0%, #7dd3fc 50%, #38bdf8 100%);
  --grad-soft: linear-gradient(90deg, rgba(125,211,252,.10), rgba(56,189,248,.10));

  --r-sm:6px; --r:8px; --r-lg:14px;
  --shadow-card: 0 1px 0 rgba(255,255,255,.02) inset, 0 12px 40px -16px rgba(2,6,23,.85), 0 0 0 1px rgba(125,211,252,.04);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-0);color:var(--text)}
body{
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:"zero","tnum"}
.tnum{font-variant-numeric:tabular-nums}
::selection{background:var(--sky);color:var(--bg-0)}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* atmospheric ambient — deep ocean / satellite */
.scene{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(56,189,248,.10), transparent 65%),
    radial-gradient(900px 600px at 15% 110%, rgba(18,48,86,.55), transparent 60%),
    radial-gradient(900px 600px at 85% 110%, rgba(15,39,71,.5), transparent 60%),
    var(--bg-0);
}
.scene::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(125,211,252,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,211,252,.04) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.scene::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .8 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.04;mix-blend-mode:screen;
}
/* slow particles */
.particles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.particles span{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);opacity:.35;animation:drift 28s linear infinite}
@keyframes drift{from{transform:translateY(110vh)}to{transform:translateY(-10vh)}}

.bracket{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.bracket::before{content:"// "} .bracket::after{content:""}

h1,h2,h3,h4{margin:0;color:var(--ink)}
h1, h2{font-family:'Fraunces','Playfair Display',Georgia,serif;font-weight:300;letter-spacing:-0.025em;line-height:1.02}
h1{font-size:clamp(48px, 7.5vw, 108px)}
h2{font-size:clamp(36px, 5.2vw, 72px)}
h3{font-size:20px;line-height:1.2;letter-spacing:-0.01em;font-weight:500;font-family:'Inter',sans-serif}
h4{font-size:17px;line-height:1.25;letter-spacing:-0.005em;font-weight:500;font-family:'Inter',sans-serif}
p{margin:0}

.btn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:12px 20px;border-radius:var(--r);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-2); background:rgba(10,25,47,.4); color:var(--ink);
  cursor:default;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s, border-color .2s, transform .2s, box-shadow .25s;
}
.btn:hover{background:rgba(15,39,71,.6);border-color:rgba(125,211,252,.4)}
.btn-primary{
  background:rgba(56,189,248,.06);color:var(--ink);border-color:rgba(125,211,252,.35);
  box-shadow:0 0 0 1px rgba(125,211,252,.15) inset, 0 0 30px -8px rgba(56,189,248,.4);
}
.btn-primary:hover{background:rgba(56,189,248,.12);border-color:var(--cyan);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(125,211,252,.3) inset, 0 0 50px -6px rgba(56,189,248,.6)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2);text-transform:none;letter-spacing:0;font-weight:400}
.btn-ghost:hover{color:var(--ink);background:rgba(15,39,71,.4);border-color:transparent;box-shadow:none}

.card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}

.grad-text{background-image:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.grad-rule{height:1px;width:100%;background:var(--grad);opacity:.5}

/* glass panel */
.glass{
  background:linear-gradient(180deg, rgba(15,39,71,.55) 0%, rgba(7,17,31,.7) 100%);
  border:1px solid var(--line-2);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}