:root {
  --bg: #05040c;
  --bg-2: #0b0920;
  --text: #fff8e9;
  --muted: #c8bddf;
  --dim: #8f83ac;
  --line: rgba(223, 207, 255, 0.18);
  --glass: rgba(24, 18, 42, 0.68);
  --glass-2: rgba(12, 10, 27, 0.62);
  --cyan: #6df3ff;
  --violet: #a875ff;
  --pink: #ff5dbf;
  --gold: #ffd56f;
  --radius-xl: 34px;
  --radius-lg: 26px;
  --shadow: 0 34px 100px rgba(0, 0, 0, 0.46);
  --display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 14% 16%, rgba(125, 85, 255, 0.28), transparent 34%),
    radial-gradient(circle at 86% 38%, rgba(40, 210, 255, 0.22), transparent 34%),
    radial-gradient(circle at 48% 94%, rgba(255, 72, 173, 0.16), transparent 38%),
    linear-gradient(135deg, #04030a, #09061a 48%, #02070d);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 50% 28%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 28%, black, transparent 72%);
}

.site-shell {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

.cosmic-noise {
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 36% 22%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 64%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 76%, rgba(255,255,255,.75) 0 1px, transparent 1.5px);
  background-size: 420px 420px, 500px 500px, 560px 560px, 620px 620px, 720px 720px;
}

.electric-field {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
}

.bolt {
  position: absolute;
  width: 2px;
  height: 44vh;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, rgba(109, 243, 255, 0.95), rgba(255, 93, 191, 0.72), transparent);
  filter: blur(0.3px) drop-shadow(0 0 14px rgba(109,243,255,0.72));
  opacity: 0.38;
  transform: rotate(25deg);
  animation: boltFlicker 4.4s steps(2, end) infinite;
}

.bolt-a { left: 12%; top: 10%; animation-delay: .2s; }
.bolt-b { right: 18%; top: 3%; height: 56vh; transform: rotate(-18deg); animation-delay: 1.2s; }
.bolt-c { left: 54%; top: 44%; height: 34vh; transform: rotate(42deg); animation-delay: 2.4s; }

.topbar {
  position: sticky;
  top: 20px;
  z-index: 10;
  width: min(1120px, calc(100% - 32px));
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(25, 18, 43, 0.64);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.brand-orb {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #04030a 0 22%, transparent 24%),
    conic-gradient(from 210deg, var(--cyan), var(--violet), var(--pink), var(--gold), var(--cyan));
  box-shadow: 0 0 0 9px rgba(255,255,255,.07), 0 0 30px rgba(168,117,255,.6);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 800;
  padding: 12px 16px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.nav-links a:hover {
  color: var(--text);
  background: rgba(255,255,255,.09);
  transform: translateY(-1px);
}

.section-pad {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 80px 0;
}

.hero {
  min-height: calc(100vh - 92px);
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr);
  align-items: center;
  gap: 32px;
  padding-top: 92px;
}

.glass-panel {
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.025)),
    var(--glass);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.13);
  overflow: hidden;
}

.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(109,243,255,.12), transparent 30%),
    radial-gradient(circle at 82% 74%, rgba(255,93,191,.12), transparent 32%);
  pointer-events: none;
}

.hero-copy {
  padding: clamp(34px, 5.6vw, 68px);
}

.eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  color: var(--gold);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
}

h1, h2 {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  margin: 0;
  letter-spacing: -0.07em;
  line-height: .88;
}

h1 {
  font-size: clamp(4.2rem, 12vw, 9.2rem);
  max-width: 7ch;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  text-wrap: balance;
}

.hero-lede,
.section-heading p,
.mini-panel p,
.note-card p,
.resource-card p {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.68;
}

.hero-lede {
  max-width: 640px;
  margin: 28px 0 0;
  color: #e8def6;
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
}

.hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.button:hover { transform: translateY(-2px); }

.button-primary {
  color: #100715;
  background: linear-gradient(135deg, var(--gold), var(--pink));
  box-shadow: 0 18px 42px rgba(255,93,191,.22);
}

.button-secondary {
  color: var(--text);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.065);
}

.hero-visual {
  min-height: 540px;
  display: grid;
  place-items: center;
  padding: 34px;
}

.plasma-core {
  width: min(70%, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff9d8 0 4%, var(--gold) 5% 13%, var(--pink) 14% 23%, var(--violet) 24% 40%, transparent 62%);
  filter: drop-shadow(0 0 26px rgba(109,243,255,.52)) drop-shadow(0 0 64px rgba(255,93,191,.32));
  animation: breathe 3.6s ease-in-out infinite alternate;
}

.orbital-ring,
.arc {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ring-one {
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,213,111,.32);
}

.ring-two {
  width: 54%;
  aspect-ratio: 1;
  border: 1px solid rgba(109,243,255,.32);
  transform: rotate(48deg) scaleY(.62);
}

.arc-one,
.arc-two {
  width: 82%;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-top-color: rgba(109,243,255,.5);
  border-left-color: rgba(255,93,191,.34);
  transform: rotate(20deg) scaleY(.42);
  filter: drop-shadow(0 0 18px rgba(109,243,255,.28));
}

.arc-two {
  width: 66%;
  transform: rotate(-38deg) scaleY(.5);
  border-top-color: rgba(255,213,111,.48);
  border-left-color: rgba(168,117,255,.36);
}

.visual-caption {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 26px;
  z-index: 1;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px;
  background: rgba(5,4,12,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.visual-caption span,
.note-card span,
.card-kicker {
  display: block;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.visual-caption strong {
  display: block;
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.section-heading {
  max-width: 720px;
  margin-bottom: 30px;
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.resource-card {
  position: relative;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 26px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 20% 10%, rgba(109,243,255,.14), transparent 34%),
    radial-gradient(circle at 90% 85%, rgba(255,93,191,.14), transparent 36%),
    rgba(18, 14, 34, 0.7);
  box-shadow: 0 20px 64px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.resource-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(145deg, rgba(109,243,255,.36), transparent 28%, rgba(255,93,191,.34));
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.resource-card > * { position: relative; z-index: 1; }

.resource-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255,255,255,.28);
}

.resource-card:hover::before { opacity: .45; }

.resource-card strong {
  display: block;
  margin-top: 18px;
  font-family: var(--display);
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  line-height: .95;
  letter-spacing: -0.055em;
}

.card-arrow {
  color: #fff8e9;
  font-weight: 900;
}

.split-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding-top: 30px;
}

.mini-panel {
  padding: clamp(28px, 4vw, 46px);
}

.pulse-panel {
  background:
    radial-gradient(circle at 20% 22%, rgba(255,213,111,.13), transparent 30%),
    radial-gradient(circle at 78% 62%, rgba(109,243,255,.16), transparent 34%),
    var(--glass-2);
}

.note-section { padding-top: 20px; }

.note-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
}

.note-card p {
  margin: 0;
  font-size: 1rem;
}

@keyframes boltFlicker {
  0%, 72%, 100% { opacity: .10; }
  74%, 76% { opacity: .62; }
  78%, 80% { opacity: .22; }
  82%, 84% { opacity: .74; }
}

@keyframes breathe {
  from { transform: scale(.94); opacity: .82; }
  to { transform: scale(1.04); opacity: 1; }
}

@media (max-width: 980px) {
  .hero,
  .split-section {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 70px;
  }

  .link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .topbar {
    align-items: flex-start;
    border-radius: 28px;
    flex-direction: column;
  }

  .nav-links {
    width: 100%;
    flex-wrap: wrap;
  }

  .nav-links a {
    flex: 1;
    text-align: center;
    padding-inline: 10px;
  }

  .section-pad {
    width: min(100% - 24px, 1120px);
    padding: 54px 0;
  }

  .hero-copy {
    padding: 30px;
  }

  h1 {
    font-size: clamp(3.7rem, 20vw, 5.6rem);
  }

  .hero-visual {
    min-height: 420px;
  }

  .link-grid {
    grid-template-columns: 1fr;
  }

  .resource-card {
    min-height: 250px;
  }

  .note-card {
    align-items: flex-start;
    border-radius: 28px;
    flex-direction: column;
  }
}