:root {
  /* Color */
  --bg: #070d16;
  --bg-elevated: #0b1522;
  --panel: #0e1a29;
  --panel-raised: #101f31;
  --hairline: #1c2f47;
  --hairline-strong: #2a4a6e;
  --border-soft: rgba(90, 130, 175, 0.16);
  --grid: rgba(120, 165, 215, 0.05);
  --text: #eef4fb;
  --text-dim: #8399b4;
  --text-faint: #56698a;
  --text-tertiary: #56698a;
  --accent: #5fd4e8;
  --accent-bright: #9ae8f5;
  --accent-dim: rgba(95, 212, 232, 0.14);
  --cyan-glow: rgba(95, 212, 232, 0.45);
  --amber: #f4a25c;
  --amber-dim: rgba(244, 162, 92, 0.14);
  --amber-glow: rgba(244, 162, 92, 0.4);
  --violet: #a78bfa;
  --violet-dim: rgba(167, 139, 250, 0.14);
  --violet-glow: rgba(167, 139, 250, 0.35);
  --green: #7ed99a;
  --danger: #ff7a6e;
  --danger-dim: rgba(255, 122, 110, 0.15);

  /* Brand/ambience gradient */
  --grad-accent: linear-gradient(135deg, #5fd4e8 0%, #7ed99a 100%);
  --grad-primary: linear-gradient(135deg, #5fd4e8 0%, #a78bfa 100%);
  --grad-hero: linear-gradient(120deg, #ffffff 30%, #5fd4e8 75%, #a78bfa 100%);
  --glow-accent: 0 8px 30px -8px var(--cyan-glow);
  --glow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(95, 212, 232, 0.08);

  /* Binding palette */
  --c1: #f4a25c;
  --c2: #a78bfa;
  --c3: #7ed99a;
  --c4: #5fd4e8;
  --c5: #7ea2ff;
  --c6: #5fe0d0;

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* Layout */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;
  --content-width: 1160px;

/* Motion */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--t-fast: 0.15s ease;
--t-med: 0.25s var(--ease);
}

/* Global entrance animations (referenced from every stylesheet) */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(95, 212, 232, 0.08), transparent 60%),
    radial-gradient(900px 480px at 88% -12%, rgba(167, 139, 250, 0.07), transparent 60%),
    radial-gradient(1000px 600px at 50% 115%, rgba(244, 162, 92, 0.05), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Ambient background: subtle grid overlay, fading out from the top */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 40%, transparent 90%);
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

::selection {
  background: var(--accent-dim);
  color: var(--text);
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

.mono {
  font-family: var(--font-mono);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}