:root {
  --bg: #060816;
  --bg-2: #0b1024;
  --text: #e7ecff;
  --muted: #aab6e7;
  --line: rgba(130, 170, 255, 0.18);
  --cyan: #63f3ff;
  --pink: #ff4fd8;
  --violet: #8a7dff;
  --panel: rgba(12, 16, 38, 0.68);
  --panel-strong: rgba(15, 22, 54, 0.9);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 20%, rgba(99,243,255,0.12), transparent 24%),
    radial-gradient(circle at 85% 18%, rgba(255,79,216,0.16), transparent 28%),
    radial-gradient(circle at 50% 80%, rgba(138,125,255,0.15), transparent 25%),
    linear-gradient(180deg, #040611 0%, #090d1d 35%, #05070f 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }

.noise,
.grid,
.mouse-aura {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.noise {
  opacity: 0.07;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 3px 3px, 4px 4px;
  mix-blend-mode: soft-light;
}

.grid {
  background-image:
    linear-gradient(rgba(99,243,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,243,255,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.75), transparent 95%);
}

.mouse-aura {
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(99,243,255,0.12), transparent 55%);
  transition: background 0.08s linear;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px min(32px, 4vw);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(4,7,18,0.72), rgba(4,7,18,0.28));
  border-bottom: 1px solid rgba(99,243,255,0.08);
}

.brand,
.eyebrow,
.section-tag,
.year,
.terminal-label {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand {
  font-size: 0.92rem;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(99,243,255,0.35);
}

.pill,
.btn {
  border: 1px solid rgba(99,243,255,0.24);
  border-radius: 999px;
  padding: 12px 18px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.pill:hover,
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(99,243,255,0.16); }

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}
.hero::before {
  width: 320px; height: 320px; right: -80px; top: 110px;
  background: rgba(255,79,216,0.34);
}
.hero::after {
  width: 380px; height: 380px; left: -100px; bottom: 40px;
  background: rgba(99,243,255,0.24);
}

.hero-content {
  position: relative;
  padding: 90px 0 80px;
  z-index: 2;
}

.eyebrow, .section-tag, .year, .terminal-label {
  color: var(--cyan);
  font-size: 0.78rem;
}

.hero h1 {
  margin: 14px 0 16px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  line-height: 0.95;
  max-width: 920px;
  text-transform: uppercase;
}
.hero h1 span {
  color: var(--pink);
  text-shadow: 0 0 18px rgba(255,79,216,0.45), 0 0 42px rgba(255,79,216,0.18);
}

.lead {
  max-width: 740px;
  font-size: clamp(1rem, 1.8vw, 1.24rem);
  line-height: 1.7;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 34px;
}

.btn-primary {
  background: linear-gradient(90deg, rgba(99,243,255,0.16), rgba(138,125,255,0.18));
}

.btn-secondary {
  background: rgba(255,255,255,0.03);
}

.hero-panel,
.timeline-card,
.fact-card,
.quote-box {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  border-radius: var(--radius);
}

.hero-panel {
  max-width: 620px;
  padding: 24px;
}

.hero-panel::before,
.timeline-card::before,
.fact-card::before,
.quote-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(99,243,255,0.6), rgba(255,79,216,0.15), rgba(138,125,255,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.keys-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
.keys-rain span {
  position: absolute;
  top: -10vh;
  font-family: 'Orbitron', sans-serif;
  color: rgba(99,243,255,0.16);
  animation: fall linear infinite;
  user-select: none;
}
.keys-rain span:nth-child(1){left:5%;font-size:4rem;animation-duration:13s;}
.keys-rain span:nth-child(2){left:14%;font-size:2rem;animation-duration:10s;animation-delay:-1s;}
.keys-rain span:nth-child(3){left:24%;font-size:3rem;animation-duration:15s;animation-delay:-2s;}
.keys-rain span:nth-child(4){left:34%;font-size:2.2rem;animation-duration:12s;animation-delay:-5s;}
.keys-rain span:nth-child(5){left:44%;font-size:4.5rem;animation-duration:17s;animation-delay:-3s;}
.keys-rain span:nth-child(6){left:54%;font-size:2.8rem;animation-duration:11s;animation-delay:-4s;}
.keys-rain span:nth-child(7){left:62%;font-size:2.2rem;animation-duration:16s;animation-delay:-2s;}
.keys-rain span:nth-child(8){left:70%;font-size:3.2rem;animation-duration:12.5s;animation-delay:-6s;}
.keys-rain span:nth-child(9){left:78%;font-size:2rem;animation-duration:13.5s;animation-delay:-2.5s;}
.keys-rain span:nth-child(10){left:86%;font-size:3.8rem;animation-duration:15s;animation-delay:-1.8s;}
.keys-rain span:nth-child(11){left:92%;font-size:2.4rem;animation-duration:11.5s;animation-delay:-3.3s;}
.keys-rain span:nth-child(12){left:9%;font-size:1.8rem;animation-duration:18s;animation-delay:-8s;}
.keys-rain span:nth-child(13){left:29%;font-size:2.2rem;animation-duration:14s;animation-delay:-7s;}
.keys-rain span:nth-child(14){left:49%;font-size:2rem;animation-duration:16s;animation-delay:-6s;}
.keys-rain span:nth-child(15){left:67%;font-size:2.7rem;animation-duration:14.2s;animation-delay:-3.7s;}
.keys-rain span:nth-child(16){left:82%;font-size:2rem;animation-duration:17s;animation-delay:-5.5s;}
.keys-rain span:nth-child(17){left:39%;font-size:2.4rem;animation-duration:19s;animation-delay:-9s;}
.keys-rain span:nth-child(18){left:58%;font-size:1.7rem;animation-duration:11s;animation-delay:-2.1s;}

.section {
  padding: 90px 0;
  position: relative;
}

.section h2 {
  margin: 10px 0 18px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  max-width: 900px;
}
.section p, .fact-card p, .timeline-card p, .hero-panel p, .sources li {
  color: var(--muted);
  line-height: 1.75;
}

.timeline {
  position: relative;
  display: grid;
  gap: 24px;
  margin-top: 40px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: min(20px, 3vw);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(99,243,255,0.85), rgba(255,79,216,0.25), transparent 96%);
  box-shadow: 0 0 18px rgba(99,243,255,0.32);
}
.timeline-card {
  margin-left: 46px;
  padding: 24px 24px 22px;
}
.timeline-card::after {
  content: "";
  position: absolute;
  left: -37px;
  top: 26px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cyan) 0%, var(--pink) 65%, transparent 70%);
  box-shadow: 0 0 20px rgba(99,243,255,0.9);
}
.timeline-card h3, .fact-card h3 {
  margin: 8px 0 10px;
  font-size: 1.2rem;
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.fact-card {
  padding: 24px;
}
.quote-box {
  padding: 34px;
  text-align: center;
  font-size: clamp(1.08rem, 2.3vw, 1.4rem);
}
.sources ul {
  margin: 14px 0 0;
  padding-left: 18px;
}

.footer {
  padding: 24px 0 36px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #93a0d1;
  font-size: 0.95rem;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
}
.tilt-card:hover {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99,243,255,0.08);
}

@keyframes fall {
  0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(115vh) translateX(20px) rotate(8deg); opacity: 0; }
}

@media (max-width: 900px) {
  .facts-grid { grid-template-columns: 1fr; }
  .hero-content { padding-top: 60px; }
  .footer-inner { flex-direction: column; }
}

@media (max-width: 680px) {
  .topbar { padding-inline: 16px; }
  .timeline::before { left: 12px; }
  .timeline-card { margin-left: 32px; padding: 20px; }
  .timeline-card::after { left: -25px; width: 12px; height: 12px; }
  .hero-actions { gap: 10px; }
  .btn, .pill { width: 100%; text-align: center; }
}