/* ============================================================================
   Brute Info — css/pages/home.css
   Page styles for index.html only. Everything here is built from the tokens in
   css/tokens.css and the primitives in base.css / components.css; no shared
   component is restyled from this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SCROLL PROGRESS + SCROLL REVEAL
   -------------------------------------------------------------------------- */
.home-scrollbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
  background: transparent;
}
.home-scrollbar-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--home-progress, 0));
  transform-origin: left center;
  background: var(--grad-brand-warm);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 55%, transparent);
}

/* Reveal is armed by js/pages/home.js only when motion is allowed, so the page
   is fully visible with JavaScript disabled or when motion is reduced. */
html.home-anim [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.home-anim [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(var(--space-12), 5vw, var(--space-24)) var(--section-y);
}

.home-hero-backdrop {
  position: absolute;
  inset: -20% 0 -10%;
  z-index: -1;
  pointer-events: none;
}

.home-wash {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(70px);
  opacity: 0.75;
  will-change: transform;
}
.home-wash-1 {
  inset-block-start: 4%;
  inset-inline-start: -10%;
  width: 46vw;
  min-width: 20rem;
  aspect-ratio: 1.2;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--primary) 55%, transparent) 0%, transparent 68%);
  animation: home-drift-a 22s var(--ease-standard) infinite alternate;
}
.home-wash-2 {
  inset-block-start: -8%;
  inset-inline-end: -6%;
  width: 40vw;
  min-width: 18rem;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 66%);
  animation: home-drift-b 26s var(--ease-standard) infinite alternate;
}
.home-wash-3 {
  inset-block-end: -14%;
  inset-inline-start: 32%;
  width: 44vw;
  min-width: 18rem;
  aspect-ratio: 1.4;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--a-500) 42%, transparent) 0%, transparent 70%);
  animation: home-drift-c 30s var(--ease-standard) infinite alternate;
}

@keyframes home-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8%, 6%, 0) scale(1.12); }
}
@keyframes home-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-9%, 8%, 0) scale(0.92); }
}
@keyframes home-drift-c {
  from { transform: translate3d(0, 0, 0) scale(0.95); }
  to   { transform: translate3d(6%, -7%, 0) scale(1.1); }
}

/* Fine dot lattice, faded out radially */
.home-lattice {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--grid-line) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 72% 62% at 50% 34%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 34%, #000 12%, transparent 76%);
  opacity: 0.9;
}

.home-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-10), 5vw, var(--space-20));
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.home-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--primary-soft-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  box-shadow: var(--shadow-xs);
}

.home-hero-title {
  font-size: var(--fs-6xl);
  line-height: 1.02;
  letter-spacing: var(--tracking-tighter);
  max-width: 15ch;
}

.home-hero-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 56ch;
}

.home-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.home-hero-note {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.home-trust {
  list-style: none;
  margin: 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
}
.home-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.home-trust-text {
  font-size: var(--fs-md);
  color: var(--text-muted);
}
.home-trust-text strong {
  color: var(--text);
  font-weight: var(--fw-bold);
}
.home-trust-mark {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--primary);
}
.home-trust-mark > svg { width: 1.25rem; height: 1.25rem; }

/* --------------------------------------------------------------------------
   1b. HERO SCENE — hand-authored SVG + floating cards
   -------------------------------------------------------------------------- */
.home-scene {
  position: relative;
  min-height: 30rem;
  --px: 0px;
  --py: 0px;
}

.home-scene-glow {
  position: absolute;
  inset: 8% 6% 10%;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--primary) 26%, transparent) 0%, transparent 68%);
  filter: blur(48px);
  z-index: 0;
}

.home-scene-svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: translate3d(calc(var(--px) * 0.4), calc(var(--py) * 0.4), 0);
  transition: transform var(--dur-slow) var(--ease-out);
}

.home-edge {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.9;
}
.home-scene.is-live .home-edge {
  animation: home-draw var(--dur-slower) var(--ease-out) forwards;
  animation-delay: calc(var(--e, 1) * 110ms);
}
.home-edge-dashed { stroke-dasharray: 0.045 0.045; opacity: 0.55; }
.home-scene.is-live .home-edge-dashed { animation: none; stroke-dashoffset: 0; }

@keyframes home-draw {
  to { stroke-dashoffset: 0; }
}

.home-node-dot {
  fill: var(--surface);
  stroke: var(--primary);
  stroke-width: 3;
}
.home-node-root .home-node-dot { stroke: var(--accent); }
.home-node-halo { opacity: 0.55; transform-box: fill-box; transform-origin: center; }
.home-scene.is-live .home-node-halo {
  animation: home-halo 3.4s var(--ease-standard) infinite;
  animation-delay: calc(var(--n, 1) * 220ms);
}
.home-scene.is-live .home-node {
  animation: home-pop var(--dur-slow) var(--ease-spring) both;
  animation-delay: calc(var(--n, 1) * 90ms + 120ms);
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes home-halo {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.85; }
}
@keyframes home-pop {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.home-float {
  position: absolute;
  z-index: 2;
  transform: translate3d(calc(var(--px) * var(--pf, 1)), calc(var(--py) * var(--pf, 1)), 0);
  transition: transform var(--dur-slow) var(--ease-out);
}

.home-float-code {
  --pf: 1.6;
  inset-block-start: 2%;
  inset-inline-start: -8%;
  width: min(23rem, 82%);
  box-shadow: var(--shadow-xl);
}
.home-float-code pre { font-size: var(--fs-xs); }

.home-float-progress {
  --pf: 2.4;
  inset-block-end: 4%;
  inset-inline-end: -6%;
  width: min(20rem, 78%);
  box-shadow: var(--shadow-xl);
}

.home-float-cert {
  --pf: 3.2;
  inset-block-end: 30%;
  inset-inline-start: -4%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.home-cert-mark {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-md);
  background: var(--success-soft);
  color: var(--success);
}
.home-cert-mark > svg { width: 1.25rem; height: 1.25rem; }
.home-cert-copy { display: flex; flex-direction: column; line-height: 1.25; }
.home-cert-copy strong { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.home-cert-copy small { font-size: var(--fs-xs); color: var(--text-muted); }

.home-mini-head { display: flex; align-items: center; gap: var(--space-3); }
.home-mini-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
}
.home-mini-icon > svg { width: 1.35rem; height: 1.35rem; }
.home-mini-titles { display: flex; flex-direction: column; min-width: 0; }
.home-mini-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-mini-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.home-mini-foot { font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================================================
   2. TRUST MARQUEE
   ========================================================================== */
.home-marquee-section { overflow: clip; }

.home-marquee-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--space-8);
}

.home-marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.home-marquee-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  padding-inline-end: clamp(var(--space-8), 6vw, var(--space-16));
  flex: 0 0 auto;
}
.home-marquee.is-animated .home-marquee-track {
  animation: home-marquee 48s linear infinite;
}
.home-marquee.is-animated:hover .home-marquee-track,
.home-marquee.is-animated:focus-within .home-marquee-track {
  animation-play-state: paused;
}
@keyframes home-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* Full opacity at rest: the wordmarks are readable text, not wallpaper. The
   hover dim is gentle enough to stay above 4.5:1 on both grounds. */
.home-marquee-item {
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
  opacity: 1;
}
.home-marquee:hover .home-marquee-item { opacity: 0.82; }
.home-marquee .home-marquee-item:hover { color: var(--text); opacity: 1; }

.home-wordmark { height: 1.75rem; width: auto; }
.home-wordmark-text {
  fill: currentColor;
  font-family: var(--font-sans);
  /* SVG user units inside the 34-unit-tall viewBox, not CSS pixels — the
     wordmark scales with .home-wordmark's height, so a rem here would fight it. */
  font-size: 17px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.2px;
}

/* ==========================================================================
   3. VALUE PROPS
   ========================================================================== */
.home-values { --tile-gap: var(--space-5); }

.home-value {
  position: relative;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}
.home-value::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad-brand-warm);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
  pointer-events: none;
}
.home-value:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.home-value:hover::before { opacity: 1; }

.home-value-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  color: var(--primary);
  transition: background-color var(--dur-base) var(--ease-standard);
}
.home-value-icon > svg { width: 1.75rem; height: 1.75rem; }
.home-value:hover .home-value-icon { background: var(--primary-soft-hover); }
.home-value-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.home-value .card-body { gap: var(--space-4); }

/* ==========================================================================
   4. COURSES
   ========================================================================== */
.home-courses {
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
}

/* Empty and error states fill the whole grid rather than sitting in one cell,
   so a failed or empty catalogue still reads as a designed panel. */
.home-grid-state { grid-column: 1 / -1; }

.home-course-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.home-course-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: var(--text-on-brand);
  box-shadow: var(--shadow-md);
}
.home-course-icon > svg { width: 1.75rem; height: 1.75rem; }

.home-course-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.home-course-title a { color: inherit; }
.home-course-title a:hover { color: var(--primary); text-decoration: none; }

.home-course-blurb {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-course-rating { display: flex; align-items: center; gap: var(--space-2); }

.home-course .card-body { gap: var(--space-4); }
.home-course .meta-list { margin-top: auto; }

.home-course-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.home-course-foot .price-main { font-size: var(--fs-2xl); }
.home-course-actions { display: flex; align-items: center; gap: var(--space-2); }

.home-course-progress { width: 100%; display: flex; flex-direction: column; gap: var(--space-2); }
.home-course-progress-row { display: flex; align-items: center; gap: var(--space-3); }
.home-course-progress-row .progress { flex: 1; }

/* ==========================================================================
   5. INTERACTIVE SYLLABUS
   ========================================================================== */
.home-syllabus {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
/* Set by js/pages/home.js when there is no syllabus to rail through, so the
   state panel gets the whole band instead of an orphaned empty column. */
.home-syllabus.is-empty { grid-template-columns: minmax(0, 1fr); }

.home-syllabus-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
}

.home-syl-tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}
.home-syl-tab:hover { background: var(--surface-2); color: var(--text); }
.home-syl-tab[aria-selected="true"] {
  background: var(--primary-soft);
  border-color: var(--primary-border);
  color: var(--primary-soft-text);
}
.home-syl-tab-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: var(--text-on-brand);
  box-shadow: var(--shadow-xs);
}
.home-syl-tab-icon > svg { width: 1.25rem; height: 1.25rem; }
.home-syl-tab-copy { display: flex; flex-direction: column; min-width: 0; }
.home-syl-tab-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-syl-tab[aria-selected="true"] .home-syl-tab-title { color: var(--primary-soft-text); }
.home-syl-tab-meta { font-size: var(--fs-xs); color: var(--text-muted); }

.home-syllabus-pane { min-height: 32rem; }

/* Loading placeholders — the rail and the pane both reserve their real
   footprint so switching from skeleton to syllabus shifts nothing. */
.home-syl-skeleton {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  padding: var(--space-3);
}
.home-syl-skeleton .skeleton-circle { width: 2.25rem; flex: 0 0 auto; }
.home-syl-skeleton .skeleton-line-group { flex: 1; min-width: 0; }

.home-syl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.home-syl-head-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.home-syl-head-sub { font-size: var(--fs-md); color: var(--text-muted); }

html.home-anim .home-syl-body { animation: home-swap var(--dur-slow) var(--ease-out) both; }
@keyframes home-swap {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.home-lec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.home-lec {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--fs-md);
  color: var(--text-muted);
}
.home-lec + .home-lec { border-top: 1px solid var(--border-subtle); }
.home-lec-mark {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  color: var(--text-muted);
}
.home-lec-mark > svg { width: 1.15rem; height: 1.15rem; }
.home-lec.is-free .home-lec-mark { color: var(--success); }
.home-lec-name { flex: 1; min-width: 0; }
.home-lec-time {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   6. HOW IT WORKS
   ========================================================================== */
/* The connector is a sibling of the <ol>, not a child of it: an <ol> may only
   contain <li>, and a stray <span> inside one is invalid markup that assistive
   technology has to guess at. .home-steps-wrap is the positioning context. */
.home-steps-wrap { position: relative; }

.home-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-8), 4vw, var(--space-12));
}

.home-steps-line {
  position: absolute;
  inset-block-start: 1.5rem;
  inset-inline: 8%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--primary-border) 0%,
    var(--primary) 45%,
    var(--accent) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform calc(var(--dur-slower) * 2.5) var(--ease-out);
  z-index: 0;
}
.home-steps-line.is-drawn { transform: scaleX(1); }

.home-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.home-step-num {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--primary-border);
  background: var(--surface);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-sm);
}
.home-step-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

/* ==========================================================================
   7. OUTCOMES / STATS
   ========================================================================== */
.home-stats {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  padding: clamp(var(--space-8), 4vw, var(--space-16));
  border-radius: var(--radius-3xl);
  background: linear-gradient(135deg, var(--a-800) 0%, var(--a-600) 46%, var(--a-900) 100%);
  color: var(--text-on-brand);
  /* Shadows do almost nothing on the dark ground, so the panel carries its own
     hairline edge — it is what separates it from the page in dark mode. */
  border: 1px solid color-mix(in srgb, var(--text-on-brand) 16%, transparent);
  box-shadow: var(--shadow-xl);
}
.home-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 88% 6%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 62%),
    radial-gradient(50% 60% at 6% 96%, color-mix(in srgb, var(--a-300) 30%, transparent) 0%, transparent 66%);
  pointer-events: none;
}
.home-stats::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px,
    color-mix(in srgb, var(--text-on-brand) 16%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 80% at 20% 20%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 20% 20%, #000 0%, transparent 70%);
  pointer-events: none;
}

.home-stats-copy { display: flex; flex-direction: column; gap: var(--space-3); }
.home-stats-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  /* Small text on the brand gradient. The amber palette has the lightest
     mid-stop (--a-600 #b45309), where 88% white measured 4.26:1 — under the
     floor. 96% clears 4.5:1 on every accent, including under the warm radial
     wash painted by ::before. */
  color: color-mix(in srgb, var(--text-on-brand) 96%, transparent);
}
.home-stats-title {
  font-size: var(--fs-4xl);
  color: var(--text-on-brand);
  letter-spacing: var(--tracking-tighter);
}
.home-stats-sub {
  font-size: var(--fs-lg);
  color: color-mix(in srgb, var(--text-on-brand) 96%, transparent);
  max-width: 34ch;
}

.home-stats-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-6), 3vw, var(--space-10));
}
.home-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.home-stat-label {
  order: 2;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: color-mix(in srgb, var(--text-on-brand) 96%, transparent);
}
.home-stat-value {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-on-brand);
}
.home-stat-hint {
  order: 3;
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--text-on-brand) 96%, transparent);
}

/* ==========================================================================
   8. PRICING
   ========================================================================== */
.home-pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
  max-width: 62rem;
  margin-inline: auto;
}

.home-pricing-state { grid-column: 1 / -1; }

.home-tier { position: relative; }
.home-tier-featured {
  border-color: var(--primary);
  box-shadow: var(--shadow-xl), 0 0 0 2px var(--primary);
}
.home-tier-badge {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-end: var(--space-5);
  z-index: 1;
}
.home-tier .card-body { gap: var(--space-5); }
.home-tier-name {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
}
.home-tier-tagline { font-size: var(--fs-md); color: var(--text-muted); max-width: 42ch; }
.home-tier-price {
  padding-block: var(--space-5);
  border-block: 1px solid var(--border-subtle);
}
.home-tier-price .price-main { font-size: var(--fs-4xl); }
.home-tier-features { margin-top: var(--space-1); }
.home-tier-features li { font-size: var(--fs-md); }

/* The footnote under the two plans — centred on the same measure as the cards
   so it reads as part of the pricing block rather than loose body copy. */
.home-pricing-note {
  margin-top: var(--space-8);
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

/* ==========================================================================
   9. TESTIMONIALS
   ========================================================================== */
.home-quotes-nav { display: flex; gap: var(--space-2); }

.home-quotes { display: flex; flex-direction: column; gap: var(--space-6); }

.home-quotes-rail {
  list-style: none;
  margin: 0;
  padding: var(--space-1);
  display: flex;
  gap: var(--tile-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.home-quotes-rail::-webkit-scrollbar { display: none; }

.home-quote {
  flex: 0 0 calc((100% - 2 * var(--tile-gap)) / 3);
  scroll-snap-align: start;
}
.home-quote .card-body { gap: var(--space-4); }
.home-quote-text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text);
  flex: 1;
}
.home-quote-text::before { content: "\201C"; }
.home-quote-text::after { content: "\201D"; }

.home-quotes-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}
.home-dot {
  width: 2.25rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  border: 0;
  background: var(--border-strong);
  transition: background-color var(--dur-base) var(--ease-standard), width var(--dur-base) var(--ease-out);
}
.home-dot:hover { background: var(--text-muted); }
.home-dot:active { background: var(--primary-hover); }
.home-dot[aria-current="true"] { background: var(--primary); width: 3.25rem; }

/* ==========================================================================
   10. FAQ
   ========================================================================== */
.home-faq .accordion-panel p { color: var(--text-muted); line-height: var(--lh-relaxed); }

/* ==========================================================================
   11. FINAL CTA
   ========================================================================== */
.home-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: center;
  gap: clamp(var(--space-8), 4vw, var(--space-14));
  padding: clamp(var(--space-8), 4vw, var(--space-16));
  border-radius: var(--radius-3xl);
  background: linear-gradient(120deg, var(--a-900) 0%, var(--a-700) 55%, var(--a-800) 100%);
  border: 1px solid color-mix(in srgb, var(--text-on-brand) 16%, transparent);
  box-shadow: var(--shadow-xl);
}
.home-cta-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 70% at 78% 12%, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 60%),
    radial-gradient(50% 60% at 12% 92%, color-mix(in srgb, var(--a-400) 34%, transparent) 0%, transparent 66%);
  pointer-events: none;
}
.home-cta-copy { display: flex; flex-direction: column; gap: var(--space-3); }
.home-cta-title {
  font-size: var(--fs-4xl);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-on-brand);
}
.home-cta-sub {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: color-mix(in srgb, var(--text-on-brand) 96%, transparent);
  max-width: 46ch;
}
.home-cta-panel {
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.home-cta-form { display: flex; flex-direction: column; gap: var(--space-4); }
.home-cta-legal { font-size: var(--fs-xs); color: var(--text-muted); }
.home-cta-legal a { color: var(--text-muted); text-decoration: underline; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .home-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .home-hero-title { max-width: 18ch; }
  .home-scene { min-height: 0; }
  .home-stats { grid-template-columns: minmax(0, 1fr); }
  .home-quote { flex-basis: calc((100% - var(--tile-gap)) / 2); }
}

@media (max-width: 1100px) {
  /* The floating layers become a readable stack once the scene loses its
     dedicated column — parallax is dropped with them. */
  .home-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }
  .home-scene-svg { max-width: 32rem; order: 1; transform: none; }
  .home-scene-glow { display: none; }
  .home-float { position: static; transform: none; width: min(28rem, 100%); }
  .home-float-code { order: 2; }
  .home-float-progress { order: 3; }
  .home-float-cert { order: 4; width: auto; }
}

@media (max-width: 960px) {
  .home-syllabus { grid-template-columns: minmax(0, 1fr); }
  .home-syllabus-rail {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .home-syllabus-rail::-webkit-scrollbar { display: none; }
  .home-syl-tab { width: auto; flex: 0 0 auto; }
  .home-syllabus-pane { min-height: 0; }
  .home-steps { grid-template-columns: minmax(0, 1fr); }
  .home-steps-line {
    inset-block: 3rem 3rem;
    inset-inline: 1.5rem auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--primary-border) 0%, var(--primary) 45%, var(--accent) 100%);
    transform: scaleY(0);
    transform-origin: center top;
  }
  .home-steps-line.is-drawn { transform: scaleY(1); }
  .home-cta { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .home-pricing { grid-template-columns: minmax(0, 1fr); }
  .home-stats-grid { gap: var(--space-6); }
}

@media (max-width: 720px) {
  .home-quote { flex-basis: 100%; }
  .home-course-foot { flex-direction: column; align-items: stretch; }
  .home-course-actions .btn { flex: 1; }
  .home-hero-cta .btn { flex: 1 1 12rem; }
}

@media (max-width: 560px) {
  .home-stats-grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero-title { font-size: var(--fs-5xl); max-width: none; }
  .home-quotes-nav { display: none; }
}

/* Motion is honoured globally by base.css; these rules remove the looping
   decorations entirely rather than leaving them mid-frame. */
@media (prefers-reduced-motion: reduce) {
  .home-wash { animation: none; }
  .home-marquee.is-animated .home-marquee-track { animation: none; }
  .home-scene.is-live .home-edge,
  .home-scene.is-live .home-node,
  .home-scene.is-live .home-node-halo { animation: none; }
  .home-edge { stroke-dashoffset: 0; }
  .home-steps-line { transform: none; }
}