:root {
  /* ===== Palette sampled directly from the Spectrum Edu logo ===== */
  --ink: #071a30;          /* Primary — logo's deep navy */
  --ink-soft: #102c4a;     /* primary, lifted panel */
  --ink-line: #274566;     /* primary, hairlines on dark */
  --paper: #0b1e3a;        /* background — neat, elegant navy (lighter than near-black, still dark) */
  --paper-dim: #14304f;    /* lifted panel navy — subtle rhythm between sections */
  --paper-ink: #f4eee2;    /* text color — warm ivory for a premium, readable contrast on dark */

  --amber: #ff9601;        /* Accent — logo's orange (swoosh mid-tone) */
  --amber-bright: #ffcf03; /* hottest accent — logo's gold (wordmark / tassel) */
  --amber-soft: #ffd873;
  --amber-deep: #e05a00;

  --red: #eb1c1c;          /* logo's red (swoosh top) — sparing accent use */
  --red-deep: #a30f0f;

  --ink-rgb: 7, 26, 48;
  --amber-rgb: 255, 150, 1;
  --red-rgb: 235, 28, 28;
  --paper-rgb: 11, 30, 58;

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Solid, saturated amber "stat band" surfaces — the richness anchor of the page */
.section-amber {
  background: linear-gradient(135deg, var(--amber-deep) 0%, var(--amber) 55%, var(--amber-bright) 100%);
  color: var(--paper-ink);
}

/* Warm cream alternation — breaks up the dark, still on-palette (paper is ink's own inverse) */
.section-light {
  background: var(--paper);
  color: var(--paper-ink);
}
.section-light .eyebrow { color: var(--amber-bright); }
.section-light .hairline { background: linear-gradient(90deg, transparent, rgba(244,238,226,0.15) 20%, rgba(244,238,226,0.15) 80%, transparent); }

.glow-strong {
  box-shadow: 0 30px 80px -20px rgba(var(--amber-rgb), 0.45);
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  color-scheme: dark;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--paper-ink);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Fraunces', Georgia, serif;
}

.font-mono {
  font-family: 'IBM Plex Mono', monospace;
}

::selection {
  background: var(--amber);
  color: var(--ink);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--paper-dim); }
::-webkit-scrollbar-thumb { background: var(--amber); border-radius: 4px; }

/* Custom cursor */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--amber);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(var(--amber-rgb), 0.6);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: width .3s var(--ease-soft), height .3s var(--ease-soft), opacity .3s;
}

@media (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
}

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

.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container-x {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.grad-text {
  background: linear-gradient(90deg, var(--paper) 0%, var(--amber-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-magnetic {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--amber-soft);
}

.hairline {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(244,238,226,0.15) 20%, rgba(244,238,226,0.15) 80%, transparent);
}

.card-glass {
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}

.card-glass-light {
  background: linear-gradient(160deg, rgba(244,238,226,0.05), rgba(244,238,226,0.02));
  border: 1px solid rgba(244,238,226,0.08);
}

.hero-sweep {
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,0.0) 35%,
    rgba(255,207,3,0.14) 50%,
    rgba(255,255,255,0.0) 65%,
    transparent 100%
  );
  transform: skewX(-12deg);
}

.hero-slide img { display: block; will-change: transform; transform-origin: center; }

/* Transparent brand logo — used bare (no card) across header/footer/loader */
.brand-logo {
  filter: drop-shadow(0 0 16px rgba(244,238,226,0.18)) drop-shadow(0 2px 10px rgba(0,0,0,0.45));
}

/* Cinematic hero — full-bleed backdrop treatment */
.hero-cine-slide img { display: block; will-change: transform; transform-origin: center; }
.hero-vignette {
  background:
    linear-gradient(180deg, rgba(7,26,48,0.35) 0%, rgba(7,26,48,0.3) 30%, rgba(7,26,48,0.55) 65%, rgba(7,26,48,0.88) 100%),
    linear-gradient(100deg, rgba(7,26,48,0.75) 0%, rgba(7,26,48,0.35) 40%, rgba(7,26,48,0.05) 68%, transparent 100%);
}
@keyframes floatParticle {
  0%, 100% { transform: translateY(0) translateX(0); opacity: var(--p-op, 0.5); }
  50% { transform: translateY(-26px) translateX(8px); opacity: calc(var(--p-op, 0.5) * 1.6); }
}
.hero-particle { animation: floatParticle 7s ease-in-out infinite; }
@keyframes pulseRing {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
.hero-pulse-ring { animation: pulseRing 2.4s ease-out infinite; }

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(4%, -6%) scale(1.08); }
  66% { transform: translate(-3%, 4%) scale(0.96); }
}
.blob-drift { animation: drift 14s ease-in-out infinite; }
.blob-drift-slow { animation: drift 22s ease-in-out infinite reverse; }

/* Partners marquee (from Partners.jsx inline <style>) */
.marquee-track-a, .marquee-track-b {
  width: max-content;
}
.marquee-track-a { animation: marquee-l 42s linear infinite; }
.marquee-track-b { animation: marquee-r 42s linear infinite; }
.marquee-track-a:hover, .marquee-track-b:hover { animation-play-state: paused; }
@keyframes marquee-l {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marquee-r {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Mobile nav helpers (was conditional React rendering) */
.mobile-nav { display: none; }
.mobile-nav.open { display: block; }

/* Hamburger bar transforms (were inline conditional classNames) */
.hamburger-bar { transition: transform .3s, opacity .3s; }
.hamburger.open .bar-1 { transform: translateY(8px) rotate(45deg); }
.hamburger.open .bar-2 { opacity: 0; }
.hamburger.open .bar-3 { transform: translateY(-8px) rotate(-45deg); }