/* Hero block */

.hero {
  position: relative;
  padding-block: var(--space-3xl) var(--space-section);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(242, 102, 24, 0.10), transparent 55%),
    radial-gradient(900px 500px at 110% 30%, rgba(30, 58, 138, 0.10), transparent 55%),
    linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg-alt) 100%);
  overflow: hidden;
}
/* Mobile: tighter vertical rhythm, drop the floating glyphs (they crowd the
   already-busy three-card composition at 390px), and let the hero CTAs span
   full-width so the primary action looks committed under the thumb. */
@media (max-width: 640px) {
  .hero {
    padding-block: var(--space-2xl) var(--space-3xl);
  }
}
/* Subtle notebook grid behind the hero — very faint, reads as "paper" not "tech".
   `background-attachment: fixed` locks the grid to the viewport so it stays in
   place while the hero content scrolls past (parallax-style depth). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 58, 138, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 35%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }

.hero__inner {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-3xl);
  }
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-bottom: var(--space-md);
}
.hero__kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
  font-variation-settings: "opsz" 144;
}
.hero__title .swash {
  color: var(--color-accent);
  font-style: italic;
  font-weight: 500;
}
/* Legacy support: any plain <span> inside the title still looks accented */
.hero__title span:not(.swash):not(.marker-underline) {
  color: var(--color-accent);
  font-style: italic;
  font-weight: 500;
}

/* Entrance animation — stagger the hero elements in on load */
.hero__content > * {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-rise var(--dur-xslow) var(--ease-out) forwards;
}
.hero__content > *:nth-child(1) { animation-delay: 60ms; }
.hero__content > *:nth-child(2) { animation-delay: 180ms; }
.hero__content > *:nth-child(3) { animation-delay: 300ms; }
.hero__content > *:nth-child(4) { animation-delay: 420ms; }

.hero__media {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  animation: hero-rise var(--dur-xslow) var(--ease-out) 120ms forwards;
}

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__content > *,
  .hero__media {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.hero__subtitle {
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-xl);
  max-width: 56ch;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  isolation: isolate;
  overflow: visible; /* let soft card shadows breathe beyond the frame */
}
/* Scene: three layered cards evoking a study desk — grid paper, test paper, equation card. */
.hero__scene {
  position: absolute;
  inset: 0;
  overflow: hidden; /* clip floating glyphs that would otherwise leak into neighbors */
  border-radius: var(--radius-lg);
}
.hero__scene .hero-card {
  position: absolute;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow:
    0 18px 40px rgba(30, 58, 138, 0.18),
    0 2px 6px rgba(30, 58, 138, 0.08),
    inset 0 0 0 1px rgba(30, 58, 138, 0.06);
  overflow: hidden;
  transform-origin: center;
  transition: transform var(--dur-slow) var(--ease);
}
.hero__media:hover .hero-card { transform: translateY(-2px); }

/* Card 1: grid paper with a graph curve */
.hero-card--grid {
  inset: 4% 38% 24% 2%;
  transform: rotate(-4deg);
  background:
    linear-gradient(rgba(30, 58, 138, 0.12) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, rgba(30, 58, 138, 0.12) 1px, transparent 1px) 0 0/24px 24px,
    #fdfbf5;
  z-index: 1;
}
.hero-card--grid::after {
  content: "";
  position: absolute;
  inset: 12% 8% 10% 8%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' fill='none'><path d='M5 100 Q 50 10, 100 60 T 195 20' stroke='%23f26618' stroke-width='3' stroke-linecap='round'/><circle cx='60' cy='48' r='3.5' fill='%231e3a8a'/><circle cx='130' cy='52' r='3.5' fill='%231e3a8a'/><path d='M5 110 L195 110' stroke='%231e3a8a' stroke-width='1.2' opacity='0.35'/><path d='M10 5 L10 115' stroke='%231e3a8a' stroke-width='1.2' opacity='0.35'/></svg>") center/contain no-repeat;
}

/* Card 2: equation card, front-center */
.hero-card--eqn {
  inset: 28% 12% 6% 16%;
  transform: rotate(2deg);
  background: #fff;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.hero-card--eqn::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-bright) 100%);
}
.hero-card__eqn {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  color: var(--color-ink);
  line-height: 1.2;
  text-align: center;
  font-variation-settings: "opsz" 144;
}
.hero-card__eqn .op { color: var(--color-accent); }
.hero-card__eqn small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--space-xs);
}

/* Card 3: test paper with a big A+ grade */
.hero-card--grade {
  inset: 2% 2% 42% 48%;
  transform: rotate(5deg);
  background: #fff;
  z-index: 2;
  padding: var(--space-md);
}
.hero-card--grade::before {
  content: "A+";
  position: absolute;
  top: 10%;
  right: 12%;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--color-accent);
  font-variation-settings: "opsz" 144;
  transform: rotate(-6deg);
}
.hero-card--grade::after {
  content: "";
  position: absolute;
  inset: 55% 12% 10% 12%;
  background:
    linear-gradient(#1e3a8a 2px, transparent 2px) 0 0 / 100% 16px;
  opacity: 0.18;
}

/* Floating math glyphs — subtle decoration */
.hero__scene .hero-glyph {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
  font-variation-settings: "opsz" 144;
  animation: hero-float 8s var(--ease) infinite;
}
.hero-glyph--pi    { top: 6%;   right: 4%;  font-size: 3rem;   animation-delay: 0s; animation-duration: 7s; }
.hero-glyph--sig   { bottom: 8%; left: 2%;   font-size: 3.5rem; animation-delay: -3s; animation-duration: 9s; color: var(--color-accent); opacity: 0.22; }
.hero-glyph--sqrt  { top: 52%;  right: 2%;  font-size: 2.5rem; animation-delay: -5s; animation-duration: 8s; }

@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-8px) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glyph { animation: none; }
}

@media (max-width: 1023px) {
  .hero__media {
    aspect-ratio: 16 / 9;
    order: -1;
  }
}

/* Desktop / tablet shuffle: three fixed slots — back-left, back-right,
   front-middle — and each .hero-card cycles through them every 3.8s. The
   inset / transform / z-index of each slot are pinned to the original
   variant positions, so when the cards aren't actively shuffled (initial
   paint or reduced-motion) the composition still reads correctly. State
   selectors win over the variant base rules on specificity. */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  .hero__scene .hero-card {
    transition:
      inset var(--dur-xslow) var(--ease-out),
      transform var(--dur-xslow) var(--ease-out),
      box-shadow var(--dur-slow) var(--ease);
    will-change: inset, transform;
  }
  .hero__scene .hero-card.is-front {
    inset: 28% 12% 6% 16%;
    transform: rotate(2deg);
    z-index: 4;
    box-shadow:
      0 30px 60px -16px rgba(30, 58, 138, 0.32),
      0 6px 14px rgba(30, 58, 138, 0.12),
      inset 0 0 0 1px rgba(30, 58, 138, 0.06);
  }
  .hero__scene .hero-card.is-back-1 {
    inset: 4% 38% 24% 2%;
    transform: rotate(-4deg);
    z-index: 1;
  }
  .hero__scene .hero-card.is-back-2 {
    inset: 2% 2% 42% 48%;
    transform: rotate(5deg);
    z-index: 2;
  }
}

@media (max-width: 640px) {
  /* Mobile hero scene = sliding card-deck. All three art cards share the
     same position; JS rotates which one wears `.is-front` every 3.8s, and
     CSS interpolates the back stack into a fanned, layered shuffle.
     Saves ~150px of vertical space vs. the three-rotated-card mosaic.
     Width is set with clamp() (not max-width + auto margins) because grid
     items with `align-items: center` collapse to 0 when both axis sizes
     come from constraint props instead of explicit values. */
  .hero__media {
    inline-size: clamp(240px, 75%, 320px);
    aspect-ratio: 5 / 4;
    justify-self: center;
    block-size: auto;
  }
  .hero__scene { perspective: 1000px; }

  /* Quiet the floating glyphs — they fight for attention with the deck. */
  .hero__scene .hero-glyph { display: none; }

  /* Reset all three card variants to the same stage, so the layered
     transforms below are the only thing positioning them. The stage is
     biased to the LEFT so the back cards have room to fan out to the
     RIGHT without getting clipped by the scene's overflow. */
  .hero__scene .hero-card--grid,
  .hero__scene .hero-card--grade,
  .hero__scene .hero-card--eqn {
    inset: 6% 22% 6% 4%;
    transform-origin: 0% 100%;
    transition:
      transform var(--dur-xslow) var(--ease-out),
      opacity   var(--dur-slow)  var(--ease),
      box-shadow var(--dur-xslow) var(--ease);
    will-change: transform, opacity;
  }

  /* Hidden by default — JS sets .is-front / .is-back-1 / .is-back-2 on each
     tick, so on first paint the first card in source order is the front. */
  .hero__scene .hero-card { z-index: 1; opacity: 0; pointer-events: none; }

  .hero__scene .hero-card.is-front {
    z-index: 3;
    opacity: 1;
    transform: translate(0, 0) rotate(-2deg);
    box-shadow:
      0 24px 48px -12px rgba(30, 58, 138, 0.28),
      0 4px 12px rgba(30, 58, 138, 0.10),
      inset 0 0 0 1px rgba(30, 58, 138, 0.06);
  }
  .hero__scene .hero-card.is-back-1 {
    z-index: 2;
    opacity: 1;
    transform: translate(28px, -6px) rotate(4deg);
    box-shadow:
      0 14px 32px -10px rgba(30, 58, 138, 0.20),
      inset 0 0 0 1px rgba(30, 58, 138, 0.06);
  }
  .hero__scene .hero-card.is-back-2 {
    z-index: 1;
    opacity: 0.92;
    transform: translate(56px, -2px) rotate(10deg);
    box-shadow:
      0 10px 24px -12px rgba(30, 58, 138, 0.16),
      inset 0 0 0 1px rgba(30, 58, 138, 0.06);
  }

  /* The A+ stamp is sized for the original 50%-width card; rebalance it
     since each card now occupies the full stage. */
  .hero-card--grade::before { font-size: 2.5rem; top: 8%; right: 12%; }

  .hero__ctas { gap: var(--space-sm); }
  .hero__ctas > .btn {
    flex: 1 1 100%;
    min-height: 48px;
  }
  .hero__subtitle { font-size: var(--fs-base); }

  @media (prefers-reduced-motion: reduce) {
    .hero__scene .hero-card { transition: none; }
  }
}


/* Social proof bar — editorial stat row */
.proof-bar {
  background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-ink-deep) 100%);
  color: #fff;
  border-block: 1px solid var(--color-ink);
  padding-block: var(--space-2xl);
  position: relative;
  overflow: hidden;
}
@media (max-width: 640px) {
  .proof-bar { padding-block: var(--space-xl); }
}
/* Subtle diagonal noise via layered gradients — adds texture without an image */
.proof-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(242, 102, 24, 0.18), transparent 40%),
    radial-gradient(ellipse at 90% 80%, rgba(251, 146, 60, 0.12), transparent 45%);
  pointer-events: none;
}
.proof-bar > .container { position: relative; z-index: 1; }

.proof-bar__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
@media (min-width: 768px) {
  .proof-bar__list { grid-template-columns: repeat(4, 1fr); }
}

.proof-bar__list li {
  margin: 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--fw-medium);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-md);
  transition: transform var(--dur) var(--ease);
}
.proof-bar__list li:hover { transform: translateX(2px); }
.proof-bar__list strong {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 500;
  font-style: italic;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variation-settings: "opsz" 144;
  text-transform: none;
}
.proof-bar__list strong .suffix {
  font-style: normal;
  color: var(--color-accent-bright);
  margin-left: 2px;
}