:root {
  color-scheme: dark;
  --bg: #050607;
  --panel: #0b0d10;
  --ink: #f5f7fa;
  --muted: #9aa0aa;
  --quiet: #a6adb5;
  --line: rgba(255, 255, 255, .12);
  --line-soft: rgba(255, 255, 255, .06);
  --accent: #00c853;
  --accent-bright: #00c853;
  --max: 1200px;
  --scene-x: 0px;
  --scene-y: 0px;
  --scene-rotate-x: 0deg;
  --scene-rotate-y: 0deg;
  --scene-scroll-y: 0px;
  --scene-scroll-scale: 1;
  --scene-scroll-rotate: 0deg;
  --hero-scroll-y: 0px;
  --journey-progress: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  overflow-x: clip;
  background:
    radial-gradient(circle at 68% 15%, rgba(180, 190, 208, .1), transparent 22%),
    #050607;
  color: var(--ink);
  font-family:'General Sans',ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 72% 18%, rgba(210,216,226,.055), transparent 31%),
    radial-gradient(ellipse at 18% 78%, rgba(255,255,255,.025), transparent 30%);
}

.journey-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  height: 2px;
  pointer-events: none;
  background: rgba(255, 255, 255, .05);
}
.journey-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--journey-progress));
  transform-origin: left center;
  background: var(--accent);
  box-shadow:none;
  will-change: transform;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background: #010203;
  animation: introCurtain 2.15s cubic-bezier(.76, 0, .24, 1) forwards;
}
.brand-intro::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: min(360px, 54vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: translateX(-50%) scaleX(0);
  animation: introLine 1.25s cubic-bezier(.16, 1, .3, 1) .28s forwards;
}
.brand-intro img {
  width: min(760px, 84vw);
  height: auto;
  opacity: 0;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 34px rgba(255, 255, 255, .08));
  transform: translateY(18px) scale(.965);
  animation: introMark 1.45s cubic-bezier(.16, 1, .3, 1) .12s forwards;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 800;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.wrap { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.nav {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: inline-flex; align-items: center; min-height: 48px; }
.brand-lockup { width: 188px; height: auto; display: block; mix-blend-mode: screen; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .06)); transition: opacity .2s ease, filter .2s ease; }
.brand:hover .brand-lockup { opacity: .86; filter: drop-shadow(0 0 20px rgba(255, 255, 255, .14)); }
.nav-right { display: flex; gap: 18px; align-items: center; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.outline { min-height: 40px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; align-items: center; color: var(--ink); transition: border-color .2s ease, background .2s ease; }
.outline:hover { border-color: rgba(0, 230, 118, .56); background: rgba(0, 200, 83, .08); color: var(--accent-bright); }

.hero, .hub-hero {
  min-height: calc(100svh - 72px);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  gap: 20px;
  align-items: center;
  padding: 54px 0 42px;
}
.eyebrow, .section-kicker, .path-meta {
  margin: 0 0 20px;
  color: #bac0c7;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.hero h1, .hub-hero h1 {
  margin: 0;
  max-width: 680px;
  font-size: clamp(62px, 6.6vw, 104px);
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: .86;
}
.hero h1 span, .hub-hero h1 span { display: block; }
.tag { margin: 26px 0 0; color: var(--accent-bright); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-shadow:none; }
.lead { max-width: 570px; margin: 27px 0 0; color: #b8bec6; font-size: 17px; line-height: 1.62; }
.offer { display: flex; gap: 12px; align-items: stretch; margin-top: 29px; }
.price {
  min-width: 126px;
  min-height: 60px;
  padding: 0 20px;
  border: 1px solid rgba(0, 230, 118, .32);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .018);
  font-size: 23px;
  font-weight: 950;
}
.primary {
  min-height: 60px;
  padding: 0 23px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #03120a;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .045em;
  box-shadow:0 18px 46px rgba(0,0,0,.34);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.primary:hover { transform: translateY(-2px); background: var(--accent-bright); box-shadow:0 20px 52px rgba(0,0,0,.38); }
.micro { margin: 10px 0 0; color: var(--quiet); font-size: 12.5px; line-height: 1.5; }

.hero-visual {
  min-height: 650px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}
.hero-copy-block.reveal.is-visible, .hub-intro.reveal.is-visible { transform: translate3d(0, var(--hero-scroll-y), 0); }
.scene {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 1;
  transform: translate3d(var(--scene-x), calc(var(--scene-y) + var(--scene-scroll-y)), 0) rotateX(var(--scene-rotate-x)) rotateY(var(--scene-rotate-y)) rotateZ(var(--scene-scroll-rotate)) scale(var(--scene-scroll-scale));
  transform-style: preserve-3d;
  transition: transform .2s ease-out;
  animation: sceneFloat 7s ease-in-out infinite;
  animation-play-state: var(--scene-play-state, running);
  will-change: transform;
}
.hero-art { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 38px 55px rgba(0, 0, 0, .52)); }
.scene-label { position: absolute; color: #878d97; font-size: 9px; font-weight: 850; letter-spacing: .06em; }
.scene-label-a { left: 7%; top: 34%; }
.scene-label-b { right: 3%; top: 36%; }
.scene-label-c { right: 8%; bottom: 19%; }
.scroll-note { position: absolute; right: 0; bottom: 13px; margin: 0; color: #a6adb5; font-size: 11px; font-weight: 800; letter-spacing: .05em; }

.register-section, .journey-section, .experience, .path-section { position: relative; padding: 92px 0 108px; border-top: 1px solid var(--line-soft); }
.register-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, .65fr); gap: 78px; align-items: start; }
.register-copy h2, .section-heading h2 {
  max-width: 880px;
  margin: 9px 0 22px;
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 930;
  letter-spacing: -.04em;
  line-height: .92;
}
.register-copy > p:last-of-type, .section-heading > p:last-child { max-width: 670px; color: #b2b8c0; font-size: 17px; line-height: 1.62; }
.signal-list { margin-top: 34px; border-top: 1px solid var(--line-soft); }
.signal { display: flex; justify-content: space-between; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.signal span:first-child { font-weight: 850; }
.signal span:last-child { color: #9ca3ac; text-align: right; }

.form-card {
  position: sticky;
  top: 24px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18, 20, 24, .96), rgba(8, 9, 11, .96));
  box-shadow: 0 34px 90px rgba(0, 0, 0, .45);
}
.form-card h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.form-card > p { margin: 7px 0 21px; color: #a6adb5; font-size: 12px; }
.honeypot { display: none; }
.field { margin-bottom: 13px; }
.field label { display: block; margin-bottom: 7px; color: #9aa0aa; font-size: 11px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.field input, .field select {
  width: 100%;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 11px;
  outline: none;
  background: #0a0c0f;
  color: var(--ink);
  padding: 0 14px;
}
.field input:focus, .field select:focus { border-color: rgba(255, 255, 255, .45); box-shadow: 0 0 0 3px rgba(255, 255, 255, .04); }
.field input:user-invalid, .field select:user-invalid { border-color: rgba(255, 155, 155, .62); }
.submit {
  width: 100%;
  min-height: 58px;
  margin-top: 3px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #03120a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
}
.submit:disabled { cursor: wait; opacity: .7; }
.form-note { margin: 11px 0 0 !important; color: #a6adb5 !important; font-size: 12px !important; line-height: 1.55 !important; }
.status { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #0d0f12; color: #bdc2ca; font-size: 12px; line-height: 1.5; }
.status[hidden] { display: none; }
.status-success { border-color: rgba(202, 255, 221, .24); }
.status-error { border-color: rgba(255, 160, 160, .32); }

.section-heading { margin-bottom: 38px; }
.stage-grid { display: grid; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stage-grid-five { grid-template-columns: repeat(5, 1fr); }
.stage { min-height: 190px; padding: 19px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .018), transparent); display: flex; flex-direction: column; justify-content: space-between; }
.stage > span { color: #a6adb5; font-size: 11px; letter-spacing: .045em; }
.stage h3 { margin: 0 0 8px; font-size: 19px; }
.stage p { margin: 0; color: #9ca3ac; font-size: 12px; line-height: 1.48; }

.phase-list { position: relative; }
.phase-list::before { content: ""; position: absolute; z-index: 2; left: 289px; top: 0; bottom: 0; width: 1px; transform: scaleY(var(--curriculum-progress, 0)); transform-origin: top; background: linear-gradient(var(--accent-bright), rgba(0, 200, 83, .08)); box-shadow:none; pointer-events: none; }
.phase { position: relative; display: grid; grid-template-columns: 290px minmax(0, 1fr); border-bottom: 1px solid var(--line); transition: background .7s ease; }
.phase::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; transform: scaleY(0); transform-origin: top; background: var(--accent); box-shadow:none; transition: transform .75s cubic-bezier(.16, 1, .3, 1); }
.phase.is-current { background: linear-gradient(90deg, rgba(0, 200, 83, .045), transparent 42%); }
.phase.is-current::after { transform: scaleY(1); }
.phase header { padding: 27px 28px 27px 0; border-right: 1px solid var(--line); }
.phase header p { margin: 0 0 14px; color: #aab0b8; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.phase header h3 { margin: 0; font-size: 34px; letter-spacing: -.045em; }
.phase header > span { display: block; margin-top: 42px; color: #a6adb5; font-size: 11px; font-weight: 800; letter-spacing: .05em; transition: color .35s ease, text-shadow .35s ease; }
.phase.is-current header > span { color: var(--accent-bright); text-shadow:none; }
.module-list { margin: 0; padding: 0; list-style: none; counter-reset: module var(--module-start, 0); }
.module-list[start="1"] { --module-start: 0; }
.module-list[start="5"] { --module-start: 4; }
.module-list[start="9"] { --module-start: 8; }
.module-list[start="13"] { --module-start: 12; }
.module-list[start="16"] { --module-start: 15; }
.module-list li { position: relative; counter-increment: module; min-height: 94px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 210px; gap: 17px; align-items: center; padding: 17px 0 17px 26px; border-bottom: 1px solid var(--line-soft); }
.module-list li::after { content: ""; position: absolute; left: 25px; right: 0; bottom: -1px; height: 1px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, rgba(0, 230, 118, .48), transparent 68%); transition: transform .9s cubic-bezier(.16, 1, .3, 1) var(--row-delay, 0ms); }
.module-list li.is-visible::after { transform: scaleX(1); }
.module-list li:last-child { border-bottom: 0; }
.module-list li::before { content: counter(module, decimal-leading-zero); color: #a6adb5; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.module-list b { display: block; font-size: 15px; line-height: 1.35; }
.module-list div span { display: block; margin-top: 5px; color: #9ca3ac; font-size: 12px; line-height: 1.45; }
.module-list em { padding-right: 4px; color: #b8bdc5; font-size: 11px; font-style: normal; font-weight: 850; letter-spacing: .04em; line-height: 1.45; text-align: right; }
.proof-strip { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.proof-strip span { padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; color: #c0c5cc; font-size: 11px; font-weight: 800; letter-spacing: .04em; }

.hub-hero { min-height: auto; padding-bottom: 10px; }
.hub-intro { align-self: center; }
.hub-visual { min-height: 580px; }
.path-section { padding-top: 66px; }
.path-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.path-card { min-height: 390px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 70%); }
.path-card-featured { background: radial-gradient(circle at 80% 15%, rgba(0, 230, 118, .09), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 70%); }
.path-card h3 { max-width: 480px; margin: 0; font-size: clamp(42px, 4vw, 64px); letter-spacing: -.04em; line-height: .94; }
.path-card > div > p:last-child { max-width: 500px; color: #8f959f; font-size: 15px; line-height: 1.58; }
.path-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.path-action strong { font-size: 24px; }

.footer { min-height: 82px; padding: 24px 0 34px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #a6adb5; font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.footer a { color: #aeb3bb; }
.mobile-stick { display: none; }

.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(22px) scale(.992); transition: opacity .82s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms), transform .82s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms); }
.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.motion-ready .hero-copy-block.reveal.is-visible, .motion-ready .hub-intro.reveal.is-visible { transform: translate3d(0, var(--hero-scroll-y), 0); }
.motion-ready .motion-row { opacity: 0; transform: translate3d(22px, 12px, 0); transition: opacity .72s cubic-bezier(.16, 1, .3, 1) var(--row-delay, 0ms), transform .72s cubic-bezier(.16, 1, .3, 1) var(--row-delay, 0ms); }
.motion-ready .motion-row.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

@keyframes sceneFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

@keyframes introMark {
  0% { opacity: 0; transform: translateY(18px) scale(.965); filter: blur(9px) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  52%, 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 0 34px rgba(255, 255, 255, .08)); }
}

@keyframes introLine {
  0% { transform: translateX(-50%) scaleX(0); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: translateX(-50%) scaleX(1); opacity: 0; }
}

@keyframes introCurtain {
  0%, 72% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (max-width: 980px) {
  .hero, .hub-hero { grid-template-columns: 1fr; padding-top: 40px; }
  .hero-visual, .hub-visual { min-height: 590px; }
  .register-grid { grid-template-columns: 1fr; gap: 54px; }
  .form-card { position: relative; top: auto; }
  .stage-grid-five { grid-template-columns: repeat(2, 1fr); }
  .phase { grid-template-columns: 220px minmax(0, 1fr); }
  .module-list li { grid-template-columns: 34px minmax(0, 1fr); }
  .module-list em { grid-column: 2; padding: 0; text-align: left; }
}

@media (min-width: 981px) {
  .phase header { position: sticky; top: 88px; align-self: start; }
}

@media (max-width: 680px) {
  .motion-ready .motion-row { transform: translate3d(0, 12px, 0); }
  .motion-ready .motion-row.is-visible { transform: translate3d(0, 0, 0); }
  .wrap { width: min(var(--max), calc(100% - 28px)); }
  .nav { min-height: 62px; }
  .brand { min-height: 42px; }
  .brand-lockup { width: 152px; }
  .nav-right > span { display: none; }
  .outline { min-height: 44px; padding: 0 13px; font-size: 11px; }
  .hero, .hub-hero { min-height: auto; padding: 32px 0 62px; gap: 0; }
  .hero h1, .hub-hero h1 { font-size: clamp(51px, 15.2vw, 76px); line-height: .86; }
  .eyebrow { margin-bottom: 17px; }
  .tag { margin-top: 22px; font-size: 11.5px; line-height: 1.5; letter-spacing: .045em; }
  .lead { margin-top: 20px; font-size: 15px; line-height: 1.56; }
  .offer { flex-direction: column; margin-top: 23px; }
  .price, .primary { width: 100%; min-height: 56px; }
  .hero-visual, .hub-visual { min-height: 410px; margin-top: 14px; }
  .scene { width: 100%; max-width: 500px; }
  .scene-label { display: none; }
  .scroll-note { display: none; }
  .register-section, .journey-section, .experience, .path-section { padding: 68px 0 84px; }
  .register-copy h2, .section-heading h2 { font-size: 46px; }
  .register-copy > p:last-of-type, .section-heading > p:last-child { font-size: 15px; }
  .signal { flex-direction: column; gap: 7px; }
  .signal span:last-child { text-align: left; }
  .form-card { padding: 19px; border-radius: 19px; }
  .stage-grid-five { grid-template-columns: 1fr; }
  .stage { min-height: 132px; }
  .phase { display: block; }
  .phase-list::before { left: 0; }
  .phase header { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .phase header h3 { font-size: 32px; }
  .phase header > span { margin-top: 22px; }
  .module-list li { min-height: 0; padding: 19px 0; grid-template-columns: 33px minmax(0, 1fr); gap: 11px; }
  .module-list b { font-size: 14px; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card { min-height: 360px; padding: 23px; }
  .path-card h3 { font-size: 47px; }
  .path-action { align-items: stretch; flex-direction: column; }
  .path-action .primary { width: 100%; }
  .footer { padding-bottom: 102px; display: block; line-height: 1.8; }
  .footer a { display: block; margin-top: 9px; }
  .mobile-stick { display: block; position: fixed; z-index: 50; left: 14px; right: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); opacity: 0; pointer-events: none; transform: translateY(18px); transition: opacity .28s ease, transform .35s cubic-bezier(.16, 1, .3, 1); }
  .mobile-stick.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mobile-stick a { min-height: 56px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #03120a; box-shadow:0 20px 58px rgba(0,0,0,.62); font-size: 12px; font-weight: 950; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .scene { transform: none; --scene-play-state: paused; }
  .reveal, .motion-ready .reveal, .motion-ready .motion-row { opacity: 1; transform: none; }
  .brand-intro { display: none; }
  .journey-progress, .phase-list::before, .phase::after, .module-list li::after { display: none; }
}


/* CLASS[Λ] Masterclass — Scene 01 reel entry
   The reel is optional and skippable. It hands off to the existing orbital
   system instead of acting as a detached splash screen. */
.reel-entry { display: none; }
.reel-entry.is-ready {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #010203;
  isolation: isolate;
}
body.reel-locked { overflow: hidden; }
.reel-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 43%, rgba(255,255,255,.055), transparent 28%),
    linear-gradient(180deg, #050607 0%, #010203 72%);
}
.reel-entry-video {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100vw, 56.25vh);
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
  background: #000;
  opacity: .34;
  filter: saturate(.8) contrast(1.04) brightness(.62);
  transform: scale(1.015);
  transition: opacity .65s cubic-bezier(.16,1,.3,1), filter .65s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
.reel-entry-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.62), transparent 28%, transparent 64%, rgba(0,0,0,.82)),
    linear-gradient(90deg, rgba(0,0,0,.55), transparent 34%, transparent 66%, rgba(0,0,0,.55));
  pointer-events: none;
}
.reel-entry-ui {
  position: relative;
  z-index: 3;
  width: min(1120px, calc(100% - 40px));
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding:
    max(8px, env(safe-area-inset-top))
    max(4px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(4px, env(safe-area-inset-left));
  pointer-events: none;
}
.reel-entry-logo {
  width: clamp(150px, 18vw, 245px);
  height: auto;
  display: block;
  mix-blend-mode: screen;
  opacity: .94;
  pointer-events: auto;
  transition: opacity .4s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.reel-entry-copy {
  max-width: 720px;
  margin-top: auto;
  margin-bottom: 112px;
  pointer-events: none;
  transition: opacity .45s ease, transform .65s cubic-bezier(.16,1,.3,1);
}
.reel-scene-label {
  margin: 0 0 16px;
  color: #c7cbd1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
}
.reel-entry-copy h1 {
  margin: 0;
  max-width: 11ch;
  color: #fff;
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 950;
  letter-spacing: -.05em;
  line-height: .88;
  text-wrap: balance;
}
.reel-entry-copy > p:last-child {
  max-width: 560px;
  margin: 24px 0 0;
  color: rgba(245,247,250,.68);
  font-size: 14px;
  line-height: 1.65;
}
.reel-entry-actions {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.reel-enter,
.reel-skip {
  min-height: 48px;
  border-radius: 999px;
  padding: 0 18px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}
.reel-enter {
  border: 0;
  background: #f5f7fa;
  color: #050607;
}
.reel-skip {
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(5,6,7,.66);
  color: #fff;
  backdrop-filter: blur(16px);
}
.reel-enter:hover { transform: translateY(-1px); }
.reel-skip:hover { border-color: rgba(255,255,255,.52); }
.reel-persistent-cta {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  min-height: 50px;
  width: min(560px, calc(100% - 32px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: #03120a;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .055em;
  box-shadow:0 18px 46px rgba(0,0,0,.34);
  transition: background .2s ease, transform .2s ease, opacity .3s ease;
}
.reel-persistent-cta:hover {
  background: var(--accent-bright);
  transform: translateX(-50%) translateY(-2px);
}
.reel-progress {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.08);
}
.reel-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--accent);
  transition: transform .08s linear;
}
.reel-morph {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: min(58vw, 520px);
  aspect-ratio: 1;
  transform: translate(-50%,-50%) scale(.42);
  opacity: 0;
  display: grid;
  place-items: center;
  color: rgba(245,247,250,.96);
  font-size: clamp(96px, 18vw, 210px);
  font-weight: 950;
  letter-spacing: -.045em;
  transition: opacity .36s ease, transform .52s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.reel-orbit {
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
}
.reel-orbit-a { transform: rotateX(62deg) rotateZ(14deg); }
.reel-orbit-b { transform: rotateY(62deg) rotateZ(-22deg); }
.reel-orbit-c { inset: 25%; border-color: rgba(0,200,83,.4); transform: rotateX(72deg) rotateY(28deg); }
.reel-entry.is-playing .reel-entry-video {
  opacity: 1;
  filter: none;
  transform: scale(1);
}
.reel-entry.is-playing .reel-entry-copy {
  opacity: 0;
  transform: translateY(18px);
}
.reel-entry.is-playing .reel-enter { opacity: 0; pointer-events: none; }
.reel-entry.is-playing .reel-entry-logo { opacity: .58; transform: scale(.94); transform-origin: left top; }
.reel-entry.is-morphing .reel-entry-video { opacity: .12; filter: grayscale(1) contrast(1.08); }
.reel-entry.is-morphing .reel-morph { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.reel-entry.is-morphing .reel-entry-ui,
.reel-entry.is-morphing .reel-persistent-cta { opacity: .35; }
.reel-entry.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease;
}

.stage-grid-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .stage-grid-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .reel-entry-ui { width: calc(100% - 26px); height: calc(100dvh - 26px); }
  .reel-entry-logo { width: 160px; }
  .reel-entry-actions { gap: 7px; }
  .reel-enter, .reel-skip { min-height: 46px; padding: 0 14px; font-size: 11px; }
  .reel-entry-copy { margin-bottom: 102px; }
  .reel-entry-copy h1 { font-size: clamp(45px, 14.5vw, 72px); }
  .reel-entry-copy > p:last-child { max-width: 34ch; font-size: 12px; }
  .reel-persistent-cta { bottom: max(14px, env(safe-area-inset-bottom)); min-height: 50px; font-size: 11px; }
  .stage-grid-six { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-entry { display: none !important; }
}


/* Spatial CLASS[Λ] object — shared by hub, masterclass and full course. */
.scene-orbit-system {
  position: absolute;
  inset: 7%;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 0;
}
.scene-orbit,
.scene-axis {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}
.scene-orbit {
  width: 82%;
  height: 82%;
  margin: -41% 0 0 -41%;
  border: 1px solid rgba(224,229,236,.22);
  border-radius: 50%;
  box-shadow: inset 0 0 34px rgba(255,255,255,.025);
}
.scene-orbit-1 {
  transform: rotateX(68deg) rotateZ(8deg) translateZ(34px);
  animation: classOrbitA 14s linear infinite;
}
.scene-orbit-2 {
  width: 68%;
  height: 68%;
  margin: -34% 0 0 -34%;
  border-color: rgba(174,181,192,.2);
  transform: rotateY(72deg) rotateZ(-20deg) translateZ(4px);
  animation: classOrbitB 18s linear infinite reverse;
}
.scene-orbit-3 {
  width: 56%;
  height: 56%;
  margin: -28% 0 0 -28%;
  border-color: rgba(0,200,83,.28);
  transform: rotateX(78deg) rotateY(24deg) rotateZ(34deg) translateZ(58px);
  animation: classOrbitC 11s linear infinite;
}
.scene-axis {
  width: 58%;
  height: 1px;
  margin-left: -29%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  opacity: .45;
}
.scene-axis-x { transform: rotateZ(18deg) translateZ(-18px); }
.scene-axis-y { transform: rotateZ(108deg) translateZ(-26px); }
.scene .hero-art {
  position: relative;
  z-index: 2;
  transform: translateZ(26px);
}
.scene .scene-label {
  z-index: 3;
  transform: translateZ(52px);
}
@keyframes classOrbitA {
  to { transform: rotateX(68deg) rotateZ(368deg) translateZ(34px); }
}
@keyframes classOrbitB {
  to { transform: rotateY(72deg) rotateZ(340deg) translateZ(4px); }
}
@keyframes classOrbitC {
  to { transform: rotateX(78deg) rotateY(24deg) rotateZ(394deg) translateZ(58px); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-orbit { animation: none !important; }
}

.nav-right,.tag,.micro,.scene-label,.scroll-note,.section-kicker,.path-meta,.phase header p,.phase header>span,.module-list li::before,.module-list em,.proof-strip span,.footer{letter-spacing:.04em}
.nav-right,.scene-label,.scroll-note,.phase header p,.phase header>span,.module-list li::before,.module-list em,.footer{font-size:12px}
.lead,.section-heading>p:last-child,.register-copy>p:last-of-type,.path-card>div>p:last-child,.module-list div span{color:#b4bac2}
.tag{color:#8ff0b5;text-shadow:none}
.journey-progress>span,.phase-list::before,.phase::after{box-shadow:none}
.primary,.primary:hover,.mobile-stick a{box-shadow:0 18px 48px rgba(0,0,0,.34)}
.hero h1,.hub-hero h1,.register-copy h2,.section-heading h2,.path-card h3{letter-spacing:-.04em}

/* Explicit surface ancestry for CLASS[Λ] contrast + rendering. */
.hub-page,.course-page,.hub-page .wrap,.course-page .wrap,.hub-hero,.course-page .hero,.path-section,.journey-section,.register-section,.phase-list,.phase,.path-card{background-color:#050607}
.form-card{background-color:#0b0d10}
.phase-list{border-top:0}

/* CLASS[Λ] locked 3D UI world — 2026-09-28 */
.hero-visual::before,.hub-visual::before{content:"";position:absolute;inset:34% 0 -18% 0;z-index:0;opacity:.25;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 68 68'%3E%3Cpath d='M0 .5H68M.5 0V68' stroke='%2300c853' stroke-opacity='.15' stroke-width='1'/%3E%3Ccircle cx='34' cy='34' r='1.2' fill='%2300c853' fill-opacity='.27'/%3E%3C/svg%3E");background-size:68px 68px;transform:perspective(850px) rotateX(68deg);transform-origin:center bottom;mask-image:linear-gradient(to top,#000,transparent 90%)}
.class-ui-stack{position:absolute;z-index:5;right:0;top:15%;width:min(290px,31vw);height:58%;pointer-events:none;perspective:1000px;transform-style:preserve-3d}
.class-ui-pane{position:absolute;right:0;width:100%;min-height:68px;padding:13px 15px;display:flex;align-items:center;gap:12px;border:1px solid rgba(0,200,83,.38);border-radius:14px;background:linear-gradient(145deg,rgba(11,18,15,.88),rgba(3,7,5,.75));box-shadow:0 22px 58px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(12px);transform-style:preserve-3d}
.class-ui-pane svg{width:28px;height:28px;fill:none;stroke:#00c853;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(0,200,83,.28))}
.class-ui-pane span{display:grid;gap:2px}.class-ui-pane small{font-size:10px;color:#00c853;font-weight:900;letter-spacing:.04em}.class-ui-pane strong{font-size:12px;letter-spacing:-.01em}
.class-ui-pane:nth-child(1){top:0;transform:translate3d(0,0,66px) rotateY(-8deg)}.class-ui-pane:nth-child(2){top:35%;transform:translate3d(-9%,0,38px) rotateY(-3deg)}.class-ui-pane:nth-child(3){top:70%;transform:translate3d(-1%,0,14px) rotateY(5deg)}
.path-card,.phase,.form-card{border-color:rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(10,14,12,.92),rgba(5,7,6,.88));box-shadow:0 22px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04)}
.path-card:hover,.phase.is-current{border-color:rgba(0,200,83,.38);box-shadow:0 28px 78px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.05)}
.primary,.submit,.mobile-stick a{background:#00c853;color:#001b0b}.tag,.path-meta,.phase header>span,.module-list em{color:#00c853}
@media(max-width:760px){.class-ui-stack{right:0;top:24%;width:min(76vw,300px);opacity:.9}}
@media(prefers-reduced-motion:reduce){.class-ui-pane{transform:none!important}}

html,body{max-width:100%;overflow-x:clip}
.hero-visual,.hub-visual{overflow:clip}