/* ===================================================================
   AI Momentum Home overview - programme landing + site navigation guide.
   Every selector is scoped under #home-root or body.mode-home so it cannot
   touch Learn or Delivery. Reuses the --hub-* tokens from hub.css. Home is
   theme-locked to programme violet: its own accents hardcode #4B2AAD (and
   #3A1F8C / #6B4FCC) so a stale body.theme-topic-N left by the last Delivery
   render can never recolour Home.
=================================================================== */

/* Home-local violet ramp (never reads --topic-N so theme bleed is impossible) */
#home-root {
  --home-violet:        #4B2AAD;
  --home-violet-dark:   #3A1F8C;
  --home-violet-light:  #6B4FCC;
  --home-violet-rgb:    75, 42, 173;

  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--hub-text-primary);
  background-color: var(--surface-page);
  min-height: 60vh;
}

/* Container is shared by every section so the rhythm reads as one page. */
#home-root .home-container {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* Hide the Home root when not the active mode (mirrors hub.css for learn/delivery). */
#home-root[hidden] { display: none; }

/* ===================================================================
   SKIP LINK (WCAG 2.4.1): first focusable element in the body. Hidden
   off-screen until focused, then surfaces top-left above the gate overlay
   (gate is z-index 1000) so keyboard users can jump straight to main.
=================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1100;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 12px 18px;
  border-radius: 8px;
  background: #4B2AAD;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 8px 24px rgba(20, 8, 48, 0.45);
}

/* The Delivery cohort dropdown only drives Delivery; hide it on Home. */
body.mode-home #cohort-select { display: none; }
/* Delivery scroll-progress bar belongs to Delivery only. */
body.mode-home .scroll-progress { display: none; }
/* The theme toggle is a Learn affordance; keep Home clean like Delivery. */
body.mode-home .theme-toggle { display: none; }

/* Focus ring + sticky-header scroll offset for in-page section anchors. */
#home-root :focus-visible {
  outline: 2px solid var(--home-violet);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Dark-mode accent token: a lighter violet that clears AA (>= 4.8:1) on both
   dark surfaces (#161624, #0E0E1A). The base --home-violet-light (#6B4FCC)
   only reaches ~3.1:1 as text, so accent text in dark mode uses this. */
[data-theme="dark"] #home-root {
  --home-accent-text: #A78BFA;
}
[data-theme="dark"] #home-root :focus-visible { outline-color: var(--home-accent-text); }
#home-root section[id] { scroll-margin-top: 80px; }

/* ===================================================================
   S1 - HERO: full-bleed violet gradient band, the programme thesis.
=================================================================== */
#home-root .home-hero {
  position: relative;
  background: linear-gradient(135deg, #2E1466 0%, #3A1F8C 50%, #4B2AAD 100%);
  color: #fff;
  padding-block: clamp(3rem, 8vw, 7rem);
  overflow: hidden;
}
/* Faint film-grain wash, same SVG noise the Learn hero uses, for depth. */
#home-root .home-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
}
/* Soft radial glow anchored top-right so the flat gradient reads as lit. */
#home-root .home-hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 60%; height: 120%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.14), transparent 70%);
  pointer-events: none;
}
/* Dark mode: let the hero recede against the dark page rather than glow.
   White hero text stays well above AA on this darker ramp. */
[data-theme="dark"] #home-root .home-hero {
  background: linear-gradient(135deg, #1A0E40 0%, #241258 55%, #2E1466 100%);
}
#home-root .home-hero-inner {
  position: relative;
  z-index: 1;
}
#home-root .home-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 18px;
}
#home-root .home-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 18ch;
  margin: 0 0 20px;
}
#home-root .home-hero-subhead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
  margin: 0;
}

/* Three glass anchor tiles. */
#home-root .home-anchor-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 600px;
}
#home-root .home-anchor-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-radius: 14px;
  /* Dark violet glass: darker than the gradient behind it so pure-white text
     clears AA comfortably (>10:1) on the lightest gradient stop. */
  background: rgba(20, 8, 54, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
#home-root .home-anchor-stat .home-stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
#home-root .home-anchor-stat .home-stat-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #ffffff;
}

/* Downward scroll cue, gentle bounce only when motion is welcome. */
#home-root .home-scroll-cue {
  display: block;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  font-size: 22px;
  color: rgba(255, 255, 255, 0.7);
}
@media (prefers-reduced-motion: no-preference) {
  #home-root .home-scroll-cue i {
    display: inline-block;
    animation: homeScrollBounce 1.8s var(--ease-productive) infinite;
  }
}
@keyframes homeScrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ===================================================================
   SECTION RHYTHM
=================================================================== */
#home-root .home-section {
  padding-block: clamp(3rem, 6vw, 5rem);
}
/* Alternating sections sit on the page surface for a faint tonal shift; a
   hair of violet wash keeps the programme colour present without a hard band. */
#home-root .home-section--alt {
  /* A subtle violet wash over the full section height so adjacent sections
     read as distinct zones. ~8% violet is perceptible but never a hard band. */
  background:
    linear-gradient(rgba(var(--home-violet-rgb), 0.08), rgba(var(--home-violet-rgb), 0.08)),
    var(--surface-page);
  border-block: 1px solid var(--border-subtle);
}
[data-theme="dark"] #home-root .home-section--alt {
  background:
    radial-gradient(ellipse 900px 360px at 50% 0, rgba(var(--home-violet-rgb), 0.16), transparent 70%),
    var(--surface-page);
}

#home-root .home-section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.95rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--hub-text-primary);
  margin: 0 0 16px;
  max-width: 24ch;
}
#home-root .home-lead {
  font-size: clamp(1.0625rem, 1.02rem + 0.25vw, 1.2rem);
  line-height: 1.7;
  color: var(--hub-text-secondary);
  max-width: 680px;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}
#home-root .home-subheading {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hub-text-primary);
  margin: clamp(2rem, 4vw, 2.75rem) 0 16px;
}

/* ===================================================================
   PULL-QUOTE: a single cleared exec line. Violet accent bar.
=================================================================== */
#home-root .home-quote {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  padding: 4px 0 4px clamp(18px, 2.5vw, 26px);
  border-left: 4px solid var(--home-violet);
  max-width: 640px;
}
#home-root .home-quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--hub-text-primary);
  margin: 0 0 10px;
}
#home-root .home-quote-cite {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--home-violet);
}
[data-theme="dark"] #home-root .home-quote { border-left-color: var(--home-violet-light); }
[data-theme="dark"] #home-root .home-quote-cite { color: var(--home-accent-text); }

/* ===================================================================
   SHARED GRIDS - auto-fit so cards wrap with no extra breakpoints.
=================================================================== */
#home-root .home-info-grid,
#home-root .home-fac-grid,
#home-root .home-nav-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
#home-root .home-stat-grid {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
#home-root .home-info-grid > *,
#home-root .home-fac-grid > *,
#home-root .home-nav-grid > *,
#home-root .home-stat-grid > * { min-width: 0; }

/* Shared white card base. */
#home-root .home-info-card,
#home-root .home-stat-tile,
#home-root .home-fac-card,
#home-root .home-nav-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: var(--hub-shadow-sm);
  padding: clamp(20px, 2.4vw, 24px);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #home-root .home-info-card,
  #home-root .home-nav-card {
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  #home-root .home-info-card:hover,
  #home-root .home-nav-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--hub-shadow-md);
  }
}

/* ----- What-it-is info cards ----- */
#home-root .home-info-card {
  position: relative;
  padding-top: calc(clamp(20px, 2.4vw, 24px) + 6px);
}
#home-root .home-info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--home-violet), var(--home-violet-light));
}
#home-root .home-info-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hub-text-primary);
  margin: 0 0 10px;
}
#home-root .home-info-card-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hub-text-secondary);
  margin: 0;
}

/* ----- Lane note ----- */
#home-root .home-lane-note {
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(var(--home-violet-rgb), 0.06);
  border: 1px solid rgba(var(--home-violet-rgb), 0.16);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--hub-text-secondary);
}
[data-theme="dark"] #home-root .home-lane-note {
  background: rgba(var(--home-violet-rgb), 0.18);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ===================================================================
   SIGNATURE - AI SPECTRUM: four levelled stations on a coloured rail.
   The programme's core mental model, rendered as the one memorable element.
=================================================================== */
#home-root .home-spectrum {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(16px, 2vw, 24px);
  position: relative;
}
#home-root .home-spectrum-station {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px 18px;
  border-radius: 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  /* top accent uses the per-station topic colour carried by .tc-t{n} */
  border-top: 3px solid var(--tc);
  box-shadow: var(--hub-shadow-sm);
}
#home-root .home-spectrum-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  /* opaque per-station colour fill (uses .tc-t{n} --tc) */
  background: var(--tc);
}
#home-root .home-spectrum-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hub-text-primary);
}
#home-root .home-spectrum-blurb {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--hub-text-secondary);
}

/* ===================================================================
   S3 - FACILITATOR CARDS + circular photo avatar
=================================================================== */
#home-root .home-fac-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
#home-root .home-fac-photo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--home-violet);
}
[data-theme="dark"] #home-root .home-fac-photo {
  border-color: var(--home-accent-text);
}
#home-root .home-fac-body { min-width: 0; }
#home-root .home-fac-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hub-text-primary);
  margin: 2px 0 8px;
}
#home-root .home-fac-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--home-violet);
  margin: 0 0 8px;
}
[data-theme="dark"] #home-root .home-fac-role { color: var(--home-accent-text); }
#home-root .home-fac-owns {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hub-text-secondary);
  margin: 0;
}

/* Calm single-paragraph format note under the facilitator grid. */
#home-root .home-format-note {
  margin-top: 20px;
  color: var(--hub-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 680px;
}

/* ----- "How a session works": a true numbered sequence ----- */
#home-root .home-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 1.6vw, 16px);
  counter-reset: home-step;
  max-width: 760px;
}
#home-root .home-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--hub-shadow-sm);
}
#home-root .home-step-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--home-violet-rgb), 0.1);
  color: var(--home-violet);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}
[data-theme="dark"] #home-root .home-step-num {
  background: rgba(var(--home-violet-rgb), 0.28);
  color: #fff;
}
#home-root .home-step-body {
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--hub-text-secondary);
  padding-top: 4px;
}

/* ===================================================================
   S4 - PROOF: stat tiles + four-topic typed list
=================================================================== */
#home-root .home-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#home-root .home-stat-tile .home-stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--home-violet);
}
[data-theme="dark"] #home-root .home-stat-tile .home-stat-value { color: var(--home-violet-light); }
#home-root .home-stat-tile .home-stat-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hub-text-primary);
}
#home-root .home-stat-tile .home-stat-context {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--hub-text-secondary);
}

/* Four-topic list: badge / name / new skill / satisfaction. */
#home-root .home-topic-list {
  list-style: none;
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--hub-shadow-sm);
  background: var(--surface-card);
}
#home-root .home-topic-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1.1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-left: 3px solid var(--tc);
}
#home-root .home-topic-row + .home-topic-row { border-top: 1px solid var(--divider); }
#home-root .home-topic-badge {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tc);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}
#home-root .home-topic-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hub-text-primary);
  min-width: 0;
}
#home-root .home-topic-skill {
  font-size: 0.925rem;
  line-height: 1.5;
  color: var(--hub-text-secondary);
  min-width: 0;
}
#home-root .home-topic-sat {
  justify-self: end;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tc-text);
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--tc-tint);
}
[data-theme="dark"] #home-root .home-topic-sat {
  background: rgba(var(--tc-rgb), 0.18);
}
/* Stack the row on narrow viewports so the skill text never crushes. */
@media (max-width: 599px) {
  #home-root .home-topic-row {
    grid-template-columns: 36px 1fr;
    grid-template-areas:
      "badge name"
      "badge skill"
      "badge sat";
    row-gap: 8px;
  }
  #home-root .home-topic-badge { grid-area: badge; align-self: start; }
  #home-root .home-topic-name { grid-area: name; }
  #home-root .home-topic-skill { grid-area: skill; }
  #home-root .home-topic-sat { grid-area: sat; justify-self: start; }
}

#home-root .home-honest-note {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--hub-text-secondary);
  max-width: 720px;
  margin: 0 0 12px;
  padding-left: 14px;
  border-left: 2px solid var(--border-default);
}
#home-root .home-caption {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--hub-text-muted);
  max-width: 720px;
  margin: 0;
}

/* ===================================================================
   S5 - NAV GUIDE cards (real buttons that switch mode)
=================================================================== */
#home-root .home-nav-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  width: 100%;
  min-height: 44px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
/* current view: not a button, gets a violet ring instead of hover lift */
#home-root .home-nav-card.is-current {
  cursor: default;
  border-color: var(--home-violet);
  box-shadow: var(--hub-shadow-sm), 0 0 0 1px var(--home-violet);
  background:
    linear-gradient(rgba(var(--home-violet-rgb), 0.04), rgba(var(--home-violet-rgb), 0.04)),
    var(--surface-card);
}
[data-theme="dark"] #home-root .home-nav-card.is-current {
  background:
    linear-gradient(rgba(var(--home-violet-rgb), 0.2), rgba(var(--home-violet-rgb), 0.2)),
    var(--surface-card);
}
#home-root .home-nav-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hub-text-primary);
  margin: 0;
}
#home-root .home-nav-card-body {
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--hub-text-secondary);
  margin: 0;
  flex: 1;
}
#home-root .home-nav-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--home-violet);
}
[data-theme="dark"] #home-root .home-nav-action { color: var(--home-accent-text); }
#home-root .home-nav-action i {
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #home-root .home-nav-card:hover .home-nav-action i { transform: translateX(3px); }
}
/* "You are here" pill: the one sparing use of gold. */
#home-root .home-nav-here {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--home-violet-dark);
  background: rgba(244, 183, 64, 0.22);
  border: 1px solid rgba(244, 183, 64, 0.5);
  border-radius: 20px;
  padding: 5px 12px;
  align-self: flex-start;
}
[data-theme="dark"] #home-root .home-nav-here {
  /* Solid gold badge with near-black text (8.3:1); the tinted treatment used
     in light mode would only reach 4.46:1 on the dark surface. */
  color: #1A1A2E;
  background: var(--accent-gold);
  border: none;
}

/* ===================================================================
   S6 - CTA row
=================================================================== */
#home-root .home-cta { text-align: center; }
#home-root .home-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
#home-root .home-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 13px 28px;
  border: none;
  border-radius: 12px;
  background: var(--home-violet);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--hub-shadow-md);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
#home-root .home-cta-primary i { transition: transform var(--dur-fast) var(--ease-out); }
#home-root .home-cta-primary:hover {
  background: var(--home-violet-dark);
  box-shadow: var(--hub-shadow-lg);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #home-root .home-cta-primary:hover i { transform: translateX(3px); }
}
#home-root .home-cta-primary:active { transform: scale(0.98); }
#home-root .home-cta-secondary {
  min-height: 44px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--home-violet);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
[data-theme="dark"] #home-root .home-cta-secondary { color: var(--home-accent-text); }
#home-root .home-cta-secondary:hover { color: var(--home-violet-dark); }
[data-theme="dark"] #home-root .home-cta-secondary:hover { color: #fff; }

/* ===================================================================
   ENTRANCE - once per session, keyed on body.home-landed, motion-gated.
   Default state (no .home-landed, or reduced motion) is fully visible.
=================================================================== */
@media (prefers-reduced-motion: no-preference) {
  body.home-landed #home-root .home-section,
  body.home-landed #home-root .home-anchor-stat,
  body.home-landed #home-root .home-info-card,
  body.home-landed #home-root .home-spectrum-station,
  body.home-landed #home-root .home-fac-card,
  body.home-landed #home-root .home-step,
  body.home-landed #home-root .home-stat-tile,
  body.home-landed #home-root .home-nav-card {
    opacity: 0;
    transform: translateY(12px);
    animation: homeReveal var(--dur-moderate) var(--ease-expressive) forwards;
  }
  body.home-landed #home-root .home-anchor-stat:nth-child(2) { animation-delay: 70ms; }
  body.home-landed #home-root .home-anchor-stat:nth-child(3) { animation-delay: 140ms; }
  body.home-landed #home-root .home-spectrum-station:nth-child(2) { animation-delay: 60ms; }
  body.home-landed #home-root .home-spectrum-station:nth-child(3) { animation-delay: 120ms; }
  body.home-landed #home-root .home-spectrum-station:nth-child(4) { animation-delay: 180ms; }
}
@keyframes homeReveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #home-root *, #home-root *::before, #home-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body.home-landed #home-root .home-section,
  body.home-landed #home-root .home-anchor-stat,
  body.home-landed #home-root .home-info-card,
  body.home-landed #home-root .home-spectrum-station,
  body.home-landed #home-root .home-fac-card,
  body.home-landed #home-root .home-step,
  body.home-landed #home-root .home-stat-tile,
  body.home-landed #home-root .home-nav-card {
    opacity: 1;
    transform: none;
  }
}