/* --- GOOGLE FONTS ------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Grotesk:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap');

/* --- DESIGN TOKENS ------------------------------------------ */
:root {
  /* Palette */
  --white:             #FFFFFF;
  --black:             #000000;
  --bg-deep:           #0A0F1F;

  /* Cards */
  --card-light-bg:     #FFFFFF;
  --card-light-text:   #000000;
  --card-dark-bg:      #0C1020;
  --card-dark-text:    #FFFFFF;
  --card-dark-border:  rgba(255, 255, 255, 0.09);

  /* Layout */
  --nav-height:        68px;
  --section-v-pad:     5.5rem;
  --section-h-pad:     6vw;
  --card-max-w:        1100px;
  --radius-img:        10px;

  /* Transitions */
  --t-card:            0.6s ease-in-out;
  --t-fast:            0.28s ease;

  /* Typography */
  --font-display:      'Orbitron', sans-serif;
  --font-body:         'Space Grotesk', sans-serif;
}

/* --- CSS RESET ---------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- BASE --------------------------------------------------- */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background: linear-gradient(148deg, var(--bg-deep) 0%, #070a18 55%, var(--black) 100%);
  background-attachment: fixed;
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ============================================================
   STAR FIELD
   Technique: fixed 1×1 pseudo-element at origin; box-shadows
   place ~80 stars across the viewport in white, pale-blue,
   and gray-blue tones. A slow twinkle animates the whole field.
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: transparent;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: twinkle 9s ease-in-out infinite alternate;
  box-shadow:
    /* ── White stars ──────────────────────────────── */
     45px  120px 1px 0   rgba(255, 255, 255, 0.55),
    140px  380px 1px 0   rgba(255, 255, 255, 0.45),
    280px   55px 1px 0   rgba(255, 255, 255, 0.60),
    390px  620px 0   0   rgba(255, 255, 255, 0.40),
    510px  240px 1px 0   rgba(255, 255, 255, 0.50),
    670px   80px 1px 0   rgba(255, 255, 255, 0.65),
    780px  450px 0   0   rgba(255, 255, 255, 0.40),
    920px  175px 1px 0   rgba(255, 255, 255, 0.50),
   1050px  710px 1px 0   rgba(255, 255, 255, 0.45),
   1180px  330px 1px 0   rgba(255, 255, 255, 0.55),
   1340px  580px 0   0   rgba(255, 255, 255, 0.40),
   1480px   90px 1px 0   rgba(255, 255, 255, 0.60),
   1650px  420px 1px 0   rgba(255, 255, 255, 0.50),
   1800px  680px 0   0   rgba(255, 255, 255, 0.35),
    200px  820px 1px 0   rgba(255, 255, 255, 0.45),
    370px 1050px 0   0   rgba(255, 255, 255, 0.40),
    580px  930px 1px 0   rgba(255, 255, 255, 0.55),
    760px 1200px 0   0   rgba(255, 255, 255, 0.35),
    980px 1080px 1px 0   rgba(255, 255, 255, 0.50),
   1150px 1350px 0   0   rgba(255, 255, 255, 0.40),
   1400px 1150px 1px 0   rgba(255, 255, 255, 0.45),
   1600px  980px 1px 0   rgba(255, 255, 255, 0.55),
   1820px 1250px 0   0   rgba(255, 255, 255, 0.35),
     60px 1380px 1px 0   rgba(255, 255, 255, 0.45),
    /* ── Pale-blue stars ──────────────────────────── */
     90px  290px 1px 0   rgba(148, 187, 255, 0.45),
    195px  640px 1px 0   rgba(148, 187, 255, 0.40),
    345px  190px 0   0   rgba(148, 187, 255, 0.50),
    495px  510px 1px 0   rgba(148, 187, 255, 0.40),
    640px  750px 0   0   rgba(148, 187, 255, 0.35),
    800px   30px 1px 0   rgba(148, 187, 255, 0.50),
    945px  400px 1px 0   rgba(148, 187, 255, 0.45),
   1110px  820px 0   0   rgba(148, 187, 255, 0.40),
   1280px  220px 1px 0   rgba(148, 187, 255, 0.55),
   1440px  760px 0   0   rgba(148, 187, 255, 0.35),
   1700px  310px 1px 0   rgba(148, 187, 255, 0.45),
   1850px  150px 1px 0   rgba(148, 187, 255, 0.40),
    130px 1100px 0   0   rgba(148, 187, 255, 0.45),
    420px 1300px 1px 0   rgba(148, 187, 255, 0.35),
    700px 1450px 0   0   rgba(148, 187, 255, 0.40),
   1000px 1200px 1px 0   rgba(148, 187, 255, 0.50),
   1250px 1380px 0   0   rgba(148, 187, 255, 0.35),
   1550px 1100px 1px 0   rgba(148, 187, 255, 0.40),
    /* ── Gray-blue stars ──────────────────────────── */
     25px  470px 0   0   rgba(185, 195, 225, 0.28),
    165px  190px 1px 0   rgba(185, 195, 225, 0.25),
    295px  750px 0   0   rgba(185, 195, 225, 0.30),
    450px  360px 0   0   rgba(185, 195, 225, 0.25),
    600px  610px 1px 0   rgba(185, 195, 225, 0.30),
    830px  280px 0   0   rgba(185, 195, 225, 0.28),
    975px  680px 1px 0   rgba(185, 195, 225, 0.25),
   1130px  440px 0   0   rgba(185, 195, 225, 0.30),
   1380px  170px 1px 0   rgba(185, 195, 225, 0.28),
   1620px  750px 0   0   rgba(185, 195, 225, 0.25),
     50px 1050px 0   0   rgba(185, 195, 225, 0.28),
    330px 1200px 1px 0   rgba(185, 195, 225, 0.25),
    620px 1300px 0   0   rgba(185, 195, 225, 0.30),
    900px 1430px 1px 0   rgba(185, 195, 225, 0.25),
   1200px 1250px 0   0   rgba(185, 195, 225, 0.28),
   1470px 1350px 1px 0   rgba(185, 195, 225, 0.25),
    /* ── Bright accent stars (larger glow) ────────── */
    555px   95px 2px 1px rgba(255, 255, 255, 0.75),
   1240px  540px 2px 1px rgba(255, 255, 255, 0.70),
    880px  340px 2px 1px rgba(200, 220, 255, 0.65),
    190px  770px 2px 1px rgba(255, 255, 255, 0.75),
   1700px  630px 2px 1px rgba(200, 220, 255, 0.70)
  ;
}

@keyframes twinkle {
  from { opacity: 0.60; }
  to   { opacity: 1.00; }
}

/* All main content sits above the star layer */
.navbar,
.main-container,
.main-footer {
  position: relative;
  z-index: 1;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.08em;
}

h2 {
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  letter-spacing: 0.10em;
}

h3 {
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: 700;
}

p {
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.85;
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--t-fast);
}

a:hover {
  opacity: 0.75;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: rgba(5, 7, 15, 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--section-h-pad);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
}

.nav-links a {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  transition: color var(--t-fast), letter-spacing var(--t-fast);
}

.nav-links a:hover {
  color: var(--white);
  letter-spacing: 0.22em;
  opacity: 1;
}

/* ============================================================
   MAIN CONTAINER
   ============================================================ */
.main-container {
  width: 100%;
  padding-top: var(--nav-height);
}

/* ============================================================
   ROADMAP HEADER
   ============================================================ */
.roadmap-header {
  width: 100%;
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6rem var(--section-h-pad) 4.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.roadmap-header h1 {
  color: var(--white);
  margin-bottom: 1.75rem;
}

.subtitle {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: rgba(255, 255, 255, 0.60);
  max-width: 820px;
  line-height: 1.95;
  font-weight: 300;
  font-style: italic;
}

/* ============================================================
   ROADMAP PHASE  (article sections)
   ============================================================ */
.roadmap-phase {
  width: 100%;
  min-height: 100vh;
  padding: var(--section-v-pad) var(--section-h-pad);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
}

.roadmap-phase h2 {
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  padding-left: 1rem;
  border-left: 3px solid rgba(255, 255, 255, 0.35);
}

.phase-description {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.95rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.025em;
  margin-bottom: 3.5rem;
  padding-left: 1.25rem;
}

/* ============================================================
   ROADMAP TIMELINE  (card wrapper)
   ============================================================ */
.roadmap-timeline {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
}

/* ============================================================
   ROADMAP CARDS
   Chess pattern:
     odd  cards → light (white bg / black text)
     even cards → dark  (deep bg  / white text)
   Hover inverts completely. Transition: 0.6s ease-in-out.
   ============================================================ */
.roadmap-card {
  width: 100%;
  max-width: var(--card-max-w);
  margin: 0 auto;
  padding: 2.5rem 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-radius: 4px;
  transition:
    background-color var(--t-card),
    color            var(--t-card),
    border-color     var(--t-card);
}

/* Smooth color transitions on all text-bearing children */
.roadmap-card h3,
.roadmap-card p,
.roadmap-card a {
  transition: color var(--t-card);
}

/* --- Odd cards: light --- */
.roadmap-card:nth-child(odd) {
  background-color: var(--card-light-bg);
  color:            var(--card-light-text);
  border: 1px solid transparent;
}

/* --- Even cards: dark --- */
.roadmap-card:nth-child(even) {
  background-color: var(--card-dark-bg);
  color:            var(--card-dark-text);
  border: 1px solid var(--card-dark-border);
}

/* --- Hover: full inversion --- */
.roadmap-card:nth-child(odd):hover {
  background-color: var(--black);
  color:            var(--white);
  border-color:     rgba(255, 255, 255, 0.12);
}

.roadmap-card:nth-child(even):hover {
  background-color: var(--white);
  color:            var(--black);
  border-color:     transparent;
}

/* Card inner layout: h3 and p span full width */
.roadmap-card h3  { flex: 0 0 100%; }
.roadmap-card > p { flex: 0 0 100%; }

/* ============================================================
   CARD MEDIA  (screenshots / gifs)
   ============================================================ */
.card-media {
  flex: 0 0 100%;
}

.card-media img {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-img);
  /* Light padding so images with any background can breathe */
  padding: 0.75rem;
  background: transparent;
}

/* ============================================================
   VIDEO CONTAINERS
   Two consecutive .video-container siblings sit side-by-side
   on desktop (2-col) because .roadmap-card is a flex container
   and each video-container has flex: 1 1 ~50%.
   ============================================================ */
.video-container {
  flex: 1 1 calc(50% - 0.75rem);
  min-width: 0; /* prevent flex overflow */
}

.video-container iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
  border-radius: var(--radius-img);
}

/* ============================================================
   FOOTER
   ============================================================ */
.main-footer {
  width: 100%;
  padding: 2.5rem var(--section-h-pad);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.30);
}

.main-footer a {
  color: rgba(255, 255, 255, 0.60);
  transition: color var(--t-fast);
}

.main-footer a:hover {
  color: var(--white);
  opacity: 1;
}

/* ============================================================
   RESPONSIVE — TABLET  (768px – 1200px)
   ============================================================ */
@media (max-width: 1200px) {
  :root {
    --section-h-pad: 4vw;
    --card-max-w:    100%;
  }

  .roadmap-card {
    padding: 2rem 2.25rem;
  }

  .roadmap-phase {
    padding: 4.5rem var(--section-h-pad);
  }
}

/* ============================================================
   RESPONSIVE — MOBILE  (< 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --nav-height:    56px;
    --section-v-pad: 3.5rem;
    --section-h-pad: 5vw;
  }

  /* Nav: tighter spacing */
  .nav-links {
    gap: 1.2rem;
  }

  .nav-links a {
    font-size: 0.58rem;
    letter-spacing: 0.10em;
  }

  /* Header */
  .roadmap-header {
    min-height: auto;
    padding: 3rem var(--section-h-pad) 2.5rem;
  }

  /* Phases: drop min-height so no empty space */
  .roadmap-phase {
    min-height: auto;
    padding-bottom: 3rem;
  }

  .phase-description {
    margin-bottom: 2rem;
  }

  /* Cards */
  .roadmap-card {
    padding: 1.5rem 1.25rem;
    gap: 1rem;
  }

  .roadmap-timeline {
    gap: 1.5rem;
  }

  /* Images */
  .card-media img {
    max-height: 240px;
    padding: 0.5rem;
  }

  /* Videos: stack to 1 column */
  .video-container {
    flex: 0 0 100%;
  }
}

/* ============================================================
   REDUCED MOTION  (accessibility)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body::before {
    animation: none;
    opacity: 0.85;
  }

  .roadmap-card,
  .roadmap-card h3,
  .roadmap-card p,
  .roadmap-card a {
    transition: none;
  }
}