/* ============================================================
   home.css — home page compositions
   ------------------------------------------------------------
   Composes core tokens and components. Defines no colours, and
   no spacing in raw px (Iron Rule 2, enforced on this folder).

   Anything here used on a second page has outgrown this file
   and belongs in core.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   HERO
   ------------------------------------------------------------
   Rebuilt after seeing it rendered. What was wrong:

     · the headline ran to three lines with "sticks." stranded
       on the last one, because t-display is sized for a short
       page title, not a two-clause sentence
     · the gaps between pill, headline, lead and buttons were
       all roughly equal, so nothing grouped
     · the right half was a pale illustration over a visible
       grey ellipse, which read as empty rather than composed
     · the whole band was tall enough to push the buttons to
       the fold

   Fixes: a display size of its own with tight leading and a
   measure that breaks it in two; a deliberate spacing rhythm;
   and a product panel with real contrast on the right.
   ════════════════════════════════════════════════════════════ */
.h-hero {
  padding-block: var(--s-12) var(--s-16);
  overflow: hidden;
}
@media (min-width: 1024px) { .h-hero { padding-block: var(--s-16) var(--s-20); } }

/* A single soft wash, rather than the three-layer mesh. The mesh was
   too faint to register and only served to grey the page down. */
.h-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 78% 18%,
      color-mix(in srgb, var(--brand-400) 20%, transparent), transparent 62%),
    radial-gradient(ellipse 60% 50% at 8% 82%,
      color-mix(in srgb, var(--gold-500) 12%, transparent), transparent 66%),
    linear-gradient(180deg, var(--surface-2), var(--bg) 62%);
}
.h-hero__grid-lines { opacity: .55; z-index: 0; }
.h-hero__spot   { top: -26%; right: -18%; opacity: .55; z-index: 0; }
.h-hero__spot-2 { bottom: -34%; left: -20%; width: 30rem; height: 30rem; opacity: .40; z-index: 0; }

.h-hero__grid {
  display: grid;
  gap: var(--s-12);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1100px) { .h-hero__grid { grid-template-columns: 1fr 1.02fr; gap: var(--s-12); } }

/* ── Copy ──────────────────────────────────────────────────── */
/* Its own scale. t-display tops out at 3rem, which at this measure
   forced a third line; this is larger at the top end but with much
   tighter leading, so two lines fit and the block reads as one unit. */
.h-hero__title {
  margin-top: var(--s-5);
  font-family: var(--ff-heading);
  font-size: clamp(2.15rem, 1.35rem + 3.3vw, 3.75rem);
  font-weight: var(--fw-extra);
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--text);
  max-width: 17ch;
}
.h-hero__lead {
  margin-top: var(--s-5);
  max-width: 48ch;
  font-size: var(--fs-lg);
  line-height: 1.62;
  color: var(--text-2);
}
.h-hero__actions { margin-top: var(--s-8); gap: var(--s-3); }

.h-hero__proof {
  list-style: none;
  padding: 0;
  margin: var(--s-8) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
}
.h-hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.h-hero__proof .c-icon { color: var(--success); }

/* ════════════════════════════════════════════════════════════
   PRODUCT PANEL
   ════════════════════════════════════════════════════════════ */
.h-hero__stage { position: relative; }

/* Tilted very slightly, which is enough to read as an object in space
   rather than a screenshot pasted onto the page. Straightened on hover
   so it does not feel like a static image. */
.h-panel {
  position: relative;
  z-index: 1;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--sh-4);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg);
  transition: transform var(--dur-3) var(--ease);
}
@media (max-width: 1099px) { .h-panel { transform: none; } }
.h-hero__stage:hover .h-panel { transform: perspective(1400px) rotateY(0) rotateX(0); }
@media (prefers-reduced-motion: reduce) {
  .h-panel, .h-hero__stage:hover .h-panel { transform: none; transition: none; }
}

/* Window chrome. Cheap, and it frames the content as an application. */
.h-panel__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.h-panel__dots { display: inline-flex; gap: var(--s-2); }
.h-panel__dots i {
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--border-strong);
}
.h-panel__crumb { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-medium); }

.h-panel__body { padding: var(--s-6); }
.h-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.h-panel__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted-2);
}
.h-panel__title {
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text);
  /* Optical nudge under the eyebrow. em, not a spacing token: the
     smallest token is 4px which opens a visible gap, and this should
     scale with the type rather than sit at a fixed distance. */
  margin-top: .12em;
}
.h-panel__pill {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  color: var(--brand-600);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* ── Chapter rows ──────────────────────────────────────────── */
.h-row {
  display: grid;
  grid-template-columns: 20px 1fr 72px 38px;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.h-row:first-of-type { border-top: 0; }

.h-row__tick {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--border-strong);
  color: transparent;
}
.h-row.is-done .h-row__tick {
  background: var(--success);
  border-color: var(--success);
  color: var(--white);
}
.h-row.is-now .h-row__tick {
  border-color: var(--brand-500);
  border-style: dashed;
}

.h-row__name {
  font-size: var(--fs-sm);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h-row.is-done .h-row__name { color: var(--muted); }
.h-row.is-now  .h-row__name { color: var(--text); font-weight: var(--fw-semibold); }

.h-row__bar {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  overflow: hidden;
}
.h-row__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--brand-500);
}
.h-row.is-done .h-row__fill { background: var(--success); }
.h-row.is-now  .h-row__fill { background: var(--grad-sunrise); }

.h-row__pct {
  font-size: var(--fs-xs);
  color: var(--muted-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.h-row.is-now .h-row__pct { color: var(--brand-600); font-weight: var(--fw-semibold); }

/* ── Floating cards ────────────────────────────────────────── */
.h-float {
  position: absolute;
  z-index: 2;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: var(--s-4);
  animation: h-float-drift 9s ease-in-out infinite;
}
.h-float__label { font-size: var(--fs-xs); color: var(--muted); }
.h-float__value {
  font-family: var(--ff-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extra);
  color: var(--text);
  line-height: 1.1;
}
.h-float__value span { color: var(--muted-2); font-size: var(--fs-lg); }
.h-float__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--success);
}

.h-float--score  { right: calc(var(--s-8) * -1); bottom: var(--s-10); }
.h-float--streak {
  left: calc(var(--s-6) * -1);
  top: var(--s-12);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  animation-delay: -4.5s;
}

/* Below the split the panel goes full width, and cards hanging off its
   edges would sit outside the gutter. */
@media (max-width: 1099px) { .h-float { display: none; } }

@keyframes h-float-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) { .h-float { animation: none; } }

/* ════════════════════════════════════════════════════════════
   COUNTS BAND
   ════════════════════════════════════════════════════════════ */
.h-counts { padding-block: var(--s-12); }
.h-counts__grid {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .h-counts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ════════════════════════════════════════════════════════════
   EXAM CARD  (carousel slide)
   ════════════════════════════════════════════════════════════ */
.h-exam {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  height: 100%;
  padding: var(--s-8);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-top: 4px solid var(--exam-accent, var(--brand-600));
  box-shadow: var(--sh-2);
}
.h-exam__head { display: flex; align-items: flex-start; gap: var(--s-5); }
.h-exam__lead { color: var(--text-2); margin: 0; }
.h-exam__subjects { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.h-exam__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.h-exam__foot .c-icon { vertical-align: -.15em; }

/* ════════════════════════════════════════════════════════════
   PATH ILLUSTRATION
   ════════════════════════════════════════════════════════════ */
.h-path {
  padding: var(--s-8);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.h-path__legend {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
  font-size: var(--fs-sm);
  color: var(--muted);
}
@media (min-width: 640px) { .h-path__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h-path__legend span { display: flex; align-items: center; gap: var(--s-3); }
.h-path__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--brand-500);
  flex-shrink: 0;
}
.h-path__dot--gold { background: var(--gold-500); }

/* ════════════════════════════════════════════════════════════
   SUBJECT CARD
   ════════════════════════════════════════════════════════════ */
.h-subject {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.h-subject:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }

/* ════════════════════════════════════════════════════════════
   CTA
   ════════════════════════════════════════════════════════════ */
/* No bottom padding: the footer already carries margin-top: --s-20.
   Both together left roughly 160px of empty page under the CTA. */
.h-cta-wrap { padding-bottom: 0; }

.h-cta__ghost { color: var(--on-dark); border: 1px solid var(--on-dark-line); }
.h-cta__ghost:hover { background: rgba(255, 255, 255, .08); color: var(--on-brand); }

/* Retained for the exam hub, which reuses the brand band. */
.h-cta__text { color: var(--on-dark); max-width: 52ch; margin-inline: auto; }