:root {
  --ink: #1d1d1f;
  --paper: #ffffff;
  --paper-deep: #f5f5f7;
  --white: #ffffff;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.12);
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --blue-soft: #eaf4ff;
  --coral: #0071e3;
  --coral-soft: #eaf4ff;
  --sage: #f5f5f7;
  --sage-soft: #f5f5f7;
  --max: 1120px;
  --radius-small: 999px;
  --radius-medium: 22px;
  --radius-large: 30px;
  --section-space: clamp(5.5rem, 9vw, 9rem);
  --focus: #0071e3;
  --text-xs: 0.78rem;
  --text-body: clamp(1rem, 0.15vw + 0.96rem, 1.08rem);
  --text-lead: clamp(1.18rem, 0.55vw + 1rem, 1.48rem);
  --text-subhead: clamp(1.6rem, 1.4vw + 1rem, 2.7rem);
  --text-title: clamp(2.5rem, 3.4vw + 0.8rem, 4.8rem);
  --text-display: clamp(3.6rem, 6vw + 0.7rem, 7rem);
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 64px; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper-deep);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-body);
  line-height: 1.47;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
}
body::before { display: none; }
::selection { color: var(--ink); background: #cce7ff; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.site-header,
.course-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  min-height: 52px;
  padding: 0 max(24px, calc((100vw - var(--max)) / 2));
  background: rgba(250, 250, 252, 0.82);
  border-bottom: 0;
  backdrop-filter: saturate(180%) blur(20px);
}
.site-header.is-scrolled,
.course-header.is-scrolled {
  background: rgba(250, 250, 252, 0.92);
  border-color: transparent;
  backdrop-filter: saturate(180%) blur(20px);
}
.wordmark { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; }
.site-nav,
.course-nav { gap: clamp(1rem, 2vw, 2rem); }
.site-nav a,
.course-nav a,
.course-nav a:visited {
  color: #424245;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0;
}
.site-nav a:hover,
.course-nav a:hover { color: #000; }

.button,
.button:visited {
  min-height: 44px;
  padding: 0.65rem 1.2rem;
  color: #fff;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 999px;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.button:hover {
  color: #fff;
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  transform: none;
}
.button-small { min-height: 36px; padding: 0.45rem 0.95rem; font-size: 0.78rem; }

.catalyst-home .hero {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100svh;
  padding: 76px 24px 34px;
  background: #fff;
}
.catalyst-home .hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, var(--max));
  min-height: calc(100svh - 110px);
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.hero-concept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(120px, 0.42fr);
  gap: 1rem;
  width: 100%;
  flex: 1;
  margin-top: 0;
}
.hero-concept-card,
.hero-concept-card:visited {
  --hero-card-pad: clamp(1.5rem, 2.4vw, 2rem);
  position: relative;
  isolation: isolate;
  display: block;
  min-height: clamp(500px, calc(100svh - 210px), 650px);
  padding: var(--hero-card-pad);
  overflow: hidden;
  color: var(--ink);
  background: var(--paper-deep);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius-large);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  transition: border-color 220ms ease, box-shadow 260ms ease;
}
.hero-concept-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -150px;
  bottom: -190px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(0,113,227,0.14), rgba(0,113,227,0) 68%);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 320ms ease, transform 560ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.hero-concept-card:hover,
.hero-concept-card:focus-visible {
  border-color: rgba(0,113,227,0.24);
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
}
.hero-concept-card:is(:hover, :focus-visible)::before { opacity: 1; transform: scale(1); }
.hero-teach-card,
.hero-grow-card,
.hero-grow-card:visited { color: var(--ink); background: var(--paper-deep); }
.hero-card-copy { position: static; z-index: 2; }
.hero-card-copy :is(h1, h2) {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: var(--hero-card-pad);
  right: var(--hero-card-pad);
  margin: 0;
  font-size: clamp(2.6rem, 4vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.055em;
  transform: translateY(-50%);
  transition: top 500ms cubic-bezier(.2,.8,.2,1), transform 500ms cubic-bezier(.2,.8,.2,1);
}
.hero-card-details {
  position: absolute;
  z-index: 3;
  top: calc(var(--hero-card-pad) + 4.7rem);
  left: var(--hero-card-pad);
  right: var(--hero-card-pad);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 240ms ease 60ms, transform 420ms cubic-bezier(.2,.8,.2,1) 40ms;
}
.hero-card-details p {
  max-width: 25ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.4;
}
.hero-card-link {
  display: inline-flex;
  gap: 0.35rem;
  margin-top: 1rem;
  color: var(--blue);
  font-size: 0.88rem;
}
.hero-grow-card .hero-card-link { color: var(--blue); }
.hero-card-link span { transition: transform 180ms ease; }
.hero-concept-card:is(:hover, :focus-visible) .hero-card-link span { transform: translateX(3px); }
.hero-concept-card:is(:hover, :focus-visible) .hero-card-copy :is(h1, h2) { top: var(--hero-card-pad); transform: none; }
.hero-concept-card:is(:hover, :focus-visible) .hero-card-details { opacity: 1; transform: none; }

.hero-card-visual {
  position: absolute;
  z-index: 1;
  right: var(--hero-card-pad);
  bottom: var(--hero-card-pad);
  left: var(--hero-card-pad);
  width: auto;
  height: clamp(205px, 27svh, 270px);
  margin: 0;
  opacity: 0;
  transform: translateY(26px) scale(0.97);
  transition: opacity 260ms ease 80ms, transform 560ms cubic-bezier(.2,.8,.2,1) 60ms;
}
.hero-concept-card:is(:hover, :focus-visible) .hero-card-visual { opacity: 1; transform: none; }

/* Build: a small product interface assembles inside the card. */
.build-visual { display: grid; place-items: end center; }
.build-window {
  position: relative;
  width: min(100%, 285px);
  height: min(210px, 100%);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  box-shadow: 0 16px 35px rgba(0,0,0,0.08);
  transform: translateY(7px);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease;
}
.build-window-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  background: #f5f5f7;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.build-window-bar i { width: 6px; height: 6px; background: #c7c7cc; border-radius: 50%; }
.build-layout {
  display: grid;
  grid-template-columns: 0.58fr 1fr 1fr;
  grid-template-rows: 18px 1fr 0.62fr;
  gap: 8px;
  height: calc(100% - 30px);
  padding: 12px;
}
.build-layout span {
  background: #e5e5ea;
  border-radius: 7px;
  opacity: 0.48;
  transform: translateY(12px) scale(0.94);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
}
.build-layout .build-sidebar { grid-column: 1; grid-row: 1 / 4; background: var(--blue); }
.build-layout .build-header-block { grid-column: 2 / 4; grid-row: 1; background: #c7c7cc; }
.build-layout .build-feature { grid-column: 2 / 4; grid-row: 2; background: #d9ecff; }
.build-layout .build-tile-one { grid-column: 2; grid-row: 3; }
.build-layout .build-tile-two { grid-column: 3; grid-row: 3; }
.build-layout .build-header-block { transition-delay: 35ms; }
.build-layout .build-feature { transition-delay: 85ms; }
.build-layout .build-tile-one { transition-delay: 135ms; }
.build-layout .build-tile-two { transition-delay: 185ms; }
.build-cursor {
  position: absolute;
  right: 18%;
  bottom: 16%;
  width: 20px;
  height: 20px;
  background: var(--blue);
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(0,113,227,0.3);
  opacity: 0;
  transform: translate(20px, 16px) scale(0.7);
  transition: opacity 220ms ease 170ms, transform 520ms cubic-bezier(.2,.8,.2,1) 120ms;
}
.hero-build-card:is(:hover, :focus-visible) .build-window { transform: translateY(0); box-shadow: 0 20px 45px rgba(0,113,227,0.16); }
.hero-build-card:is(:hover, :focus-visible) .build-layout span { opacity: 1; transform: none; }
.hero-build-card:is(:hover, :focus-visible) .build-cursor { opacity: 1; transform: none; }

/* Teach: a small lesson sequence progresses to completion. */
.teach-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  overflow: hidden;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,113,227,0.08);
  border-radius: 18px;
}
.lesson-track {
  position: absolute;
  z-index: 0;
  left: 1.55rem;
  top: 18%;
  bottom: 18%;
  width: 2px;
  overflow: hidden;
  background: #d2d2d7;
  border-radius: 999px;
}
.lesson-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: scaleY(0.12);
  transform-origin: top center;
  transition: transform 620ms cubic-bezier(.2,.8,.2,1);
}
.lesson-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  min-height: 46px;
  padding: 0.65rem 0.75rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.05);
  transform: translateX(-8px);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease;
}
.lesson-step b {
  min-width: 3.7rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 600;
}
.lesson-step i {
  position: relative;
  height: 7px;
  overflow: hidden;
  background: #e5e5ea;
  border-radius: 999px;
}
.lesson-step i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  border-radius: inherit;
  transform: scaleX(0.25);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
}
.lesson-step em {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #86868b;
  background: #f5f5f7;
  border-radius: 50%;
  font-size: 0.7rem;
  font-style: normal;
  opacity: 0.45;
  transition: color 240ms ease, background 240ms ease, opacity 240ms ease, transform 360ms cubic-bezier(.2,.8,.2,1);
}
.lesson-step-two { transform: translateX(7px); transition-delay: 55ms; }
.lesson-step-three { transform: translateX(-3px); transition-delay: 110ms; }
.lesson-step-two i::after { transition-delay: 70ms; }
.lesson-step-three i::after { transition-delay: 140ms; }
.hero-teach-card:is(:hover, :focus-visible) .lesson-step { transform: none; box-shadow: 0 10px 28px rgba(0,113,227,0.1); }
.hero-teach-card:is(:hover, :focus-visible) .lesson-step i::after { transform: scaleX(1); }
.hero-teach-card:is(:hover, :focus-visible) .lesson-step em { color: #fff; background: var(--blue); opacity: 1; transform: scale(1.08); }
.hero-teach-card:is(:hover, :focus-visible) .lesson-track::after { transform: scaleY(1); }

/* Grow: a restrained bar system rises to a clear progression. */
.grow-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.7rem, 2vw, 1.2rem);
  padding: 20px 20px 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
}
.grow-visual > span {
  position: relative;
  z-index: 1;
  width: min(18%, 38px);
  height: var(--bar-height);
  background: var(--blue);
  border-radius: 10px 10px 3px 3px;
  opacity: 0.58;
  transform: scaleY(0.46);
  transform-origin: center bottom;
  transition: opacity 260ms ease, transform 520ms cubic-bezier(.2,.8,.2,1);
}
.grow-visual > span::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 220ms ease 180ms;
}
.grow-visual > span:nth-child(2) { transition-delay: 50ms; }
.grow-visual > span:nth-child(3) { transition-delay: 100ms; }
.grow-visual > span:nth-child(4) { transition-delay: 150ms; }
.hero-grow-card:is(:hover, :focus-visible) .grow-visual > span { opacity: 1; transform: scaleY(1); }
.hero-grow-card:is(:hover, :focus-visible) .grow-visual > span::after { opacity: 1; }
.growth-trend {
  position: absolute;
  z-index: 2;
  inset: 10px 14px 8px;
  width: calc(100% - 28px);
  height: calc(100% - 18px);
  overflow: visible;
  pointer-events: none;
}
.growth-trend path {
  fill: none;
  stroke: #1d1d1f;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  opacity: 0.7;
  transition: stroke-dashoffset 850ms cubic-bezier(.2,.8,.2,1);
}
.growth-trend circle {
  fill: #fff;
  stroke: var(--blue);
  stroke-width: 4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.5);
  transition: opacity 220ms ease, transform 340ms cubic-bezier(.2,.8,.2,1);
}
.growth-trend circle:nth-of-type(1) { transition-delay: 260ms; }
.growth-trend circle:nth-of-type(2) { transition-delay: 430ms; }
.growth-trend circle:nth-of-type(3) { transition-delay: 620ms; }
.hero-grow-card:is(:hover, :focus-visible) .growth-trend path { stroke-dashoffset: 0; }
.hero-grow-card:is(:hover, :focus-visible) .growth-trend circle { opacity: 1; transform: scale(1); }

.hero-book-card,
.hero-book-card:visited {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(500px, calc(100svh - 210px), 650px);
  padding: 1.35rem 1.1rem;
  overflow: hidden;
  color: #fff;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius-large);
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 260ms ease;
}
.hero-book-card:hover,
.hero-book-card:focus-visible {
  color: #fff;
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  box-shadow: 0 18px 50px rgba(0,113,227,0.22);
}
.hero-book-copy { display: block; line-height: 0.92; letter-spacing: -0.05em; }
.hero-book-copy > span { display: block; font-size: 1.15rem; font-weight: 600; }
.hero-book-copy strong { display: block; margin-top: 0.25rem; font-size: clamp(1.8rem, 2.5vw, 2.55rem); font-weight: 600; }
.hero-book-route {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 32px;
  margin: 2rem auto;
}
.hero-book-route::before,
.hero-book-route::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 2px;
  border-radius: 999px;
  transform: translateX(-50%);
}
.hero-book-route::before { background: rgba(255,255,255,0.28); }
.hero-book-route::after {
  background: #fff;
  transform: translateX(-50%) scaleY(0.12);
  transform-origin: top center;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.hero-book-route i {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  background: var(--blue);
  border: 2px solid rgba(255,255,255,0.75);
  border-radius: 50%;
  transition: background 220ms ease, transform 360ms cubic-bezier(.2,.8,.2,1);
}
.hero-book-card:is(:hover, :focus-visible) .hero-book-route::after { transform: translateX(-50%) scaleY(1); }
.hero-book-card:is(:hover, :focus-visible) .hero-book-route i { background: #fff; transform: scale(1.12); }
.hero-book-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  color: var(--blue);
  background: #fff;
  border-radius: 50%;
  font-size: 1.1rem;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1);
}
.hero-book-card:is(:hover, :focus-visible) .hero-book-arrow { transform: translateY(4px); }

@media (max-width: 900px) {
  .catalyst-home .hero { min-height: auto; padding-top: 86px; }
  .catalyst-home .hero-copy { min-height: auto; }
  .hero-concept-grid { grid-template-columns: 1fr; }
  .hero-concept-card { display: flex; flex-direction: column; min-height: 440px; }
  .hero-card-copy { position: relative; z-index: 3; }
  .hero-card-copy :is(h1, h2) { position: static; transform: none; }
  .hero-card-details { position: static; margin-top: 0.85rem; opacity: 1; transform: none; }
  .hero-card-visual { position: relative; inset: auto; width: 100%; height: 220px; margin-top: auto; opacity: 1; transform: none; }
  .hero-book-card { min-height: 180px; }
  .hero-book-route { flex-direction: row; width: 58%; min-height: 30px; margin: 1.3rem auto; }
  .hero-book-route::before,
  .hero-book-route::after { inset: 50% 8px auto; width: auto; height: 2px; transform: translateY(-50%); }
  .hero-book-route::after { transform: translateY(-50%) scaleX(0.12); transform-origin: left center; }
  .hero-book-card:is(:hover, :focus-visible) .hero-book-route::after { transform: translateY(-50%) scaleX(1); }
}

@media (max-width: 760px) {
  .site-header,
  .course-header { min-height: 52px; padding-inline: 18px; }
  .menu-button { display: block; min-height: 34px; padding: 0.4rem 0.75rem; border-radius: 999px; }
  .catalyst-home .hero { min-height: auto; padding: 78px 18px 48px; }
  .hero-concept-grid { grid-template-columns: 1fr; }
  .hero-concept-card { min-height: 390px; padding: 1.5rem; }
  .hero-card-visual { height: 185px; }
  .hero-card-copy :is(h1, h2) { font-size: clamp(2.7rem, 13vw, 3.7rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .build-window,
  .build-layout span,
  .build-cursor,
  .lesson-step,
  .lesson-step i::after,
  .lesson-step em,
  .lesson-track::after,
  .grow-visual > span,
  .growth-trend circle { opacity: 1 !important; transform: none !important; }
  .growth-trend path { stroke-dashoffset: 0 !important; }
}

@media (hover: none) {
  .build-layout span,
  .build-cursor,
  .lesson-step em,
  .growth-trend circle { opacity: 1; }
  .build-window,
  .build-layout span,
  .build-cursor,
  .lesson-step,
  .lesson-step i::after,
  .lesson-track::after,
  .grow-visual > span,
  .growth-trend circle { transform: none; }
  .growth-trend path { stroke-dashoffset: 0; }
  .hero-card-copy :is(h1, h2) { top: var(--hero-card-pad); transform: none; }
  .hero-card-details,
  .hero-card-visual { opacity: 1; transform: none; }
  .hero-book-route::after { transform: translateX(-50%) scaleY(1); }
  .hero-book-route i { background: #fff; }
}

@media (hover: none) and (max-width: 900px) {
  .hero-book-route::after { transform: translateY(-50%) scaleX(1); }
}

/* New Catalyst hero: one clear message and one coordinated motion canvas. */
.catalyst-hero {
  width: 100%;
  min-height: 100svh;
  padding: 88px max(24px, calc((100vw - var(--max)) / 2)) 42px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 113, 227, 0.08), transparent 24rem),
    #fff;
}
.catalyst-hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
  width: min(100%, var(--max));
  min-height: calc(100svh - 130px);
  margin: 0 auto;
}
.catalyst-hero-message { position: relative; z-index: 2; }
.catalyst-hero-title {
  max-width: 650px;
  margin: 0;
  font-size: clamp(3.45rem, 5.55vw, 6.15rem);
  font-weight: 600;
  line-height: 0.91;
  letter-spacing: -0.068em;
}
.hero-message-line {
  display: block;
  color: #87878d;
  transition: color 480ms ease, transform 540ms cubic-bezier(.2,.8,.2,1);
}
.hero-message-line + .hero-message-line { margin-top: 0.08em; }
.hero-message-line.is-active { color: var(--ink); transform: translateX(0.08em); }
.hero-message-line strong {
  color: var(--blue);
  font: inherit;
}
.catalyst-hero-summary {
  max-width: 37ch;
  margin: 2rem 0 0;
  color: #515154;
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem);
  line-height: 1.42;
  letter-spacing: -0.025em;
}
.catalyst-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.3rem;
  align-items: center;
  margin-top: 2rem;
}
.hero-book-button,
.hero-book-button:visited {
  min-height: 50px;
  padding-inline: 1.55rem;
  font-size: 0.98rem;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 113, 227, 0.18);
}
.hero-book-button:hover { box-shadow: 0 14px 34px rgba(0, 113, 227, 0.26); }
.catalyst-motion-stage {
  position: relative;
  isolation: isolate;
  min-height: clamp(540px, calc(100svh - 165px), 660px);
  overflow: hidden;
  color: #fff;
  background: #09090b;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 36px;
  box-shadow: 0 35px 90px rgba(0,0,0,0.2);
}
.catalyst-motion-stage::before,
.catalyst-motion-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  transition: background 700ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
}
.catalyst-motion-stage::before {
  top: -34%;
  right: -20%;
  width: 78%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,113,227,0.7), rgba(0,113,227,0) 68%);
  filter: blur(8px);
}
.catalyst-motion-stage::after {
  bottom: -28%;
  left: -18%;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(122,92,255,0.38), rgba(122,92,255,0) 70%);
  filter: blur(15px);
}
.catalyst-hero[data-hero-scene="teach"] .catalyst-motion-stage::before {
  background: radial-gradient(circle, rgba(91,92,255,0.72), rgba(91,92,255,0) 68%);
  transform: translate(-8%, 12%);
}
.catalyst-hero[data-hero-scene="grow"] .catalyst-motion-stage::before {
  background: radial-gradient(circle, rgba(0,196,140,0.64), rgba(0,196,140,0) 68%);
  transform: translate(-14%, 18%);
}
.motion-stage-head {
  position: absolute;
  z-index: 8;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 1.6rem;
  color: rgba(255,255,255,0.62);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.motion-stage-viewport { position: absolute; inset: 70px 20px 92px; }
.motion-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px) scale(0.975);
  transition: opacity 380ms ease, transform 680ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.motion-scene.is-active { z-index: 2; opacity: 1; transform: none; }
.motion-status {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0.62rem 0.85rem;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  backdrop-filter: blur(15px);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.motion-status > span {
  width: 7px;
  height: 7px;
  background: #64d2ff;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(100,210,255,0.12);
}
.motion-status-teach > span { background: #a8a7ff; box-shadow: 0 0 0 5px rgba(168,167,255,0.12); }
.motion-status-grow > span { background: #5ee6ae; box-shadow: 0 0 0 5px rgba(94,230,174,0.12); }

/* Build scene */
.build-product {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(88%, 430px);
  height: min(70%, 360px);
  overflow: hidden;
  background: #111114;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.56), 0 0 0 1px rgba(0,113,227,0.08) inset;
  transform: translate(-50%, -48%) rotate(-2deg);
  transition: transform 800ms cubic-bezier(.2,.8,.2,1);
}
.motion-build.is-active .build-product { transform: translate(-50%, -50%) rotate(0); }
.build-product-bar {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  color: rgba(255,255,255,0.44);
  background: #1a1a1e;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.55rem;
}
.build-product-bar i { width: 6px; height: 6px; background: #55555d; border-radius: 50%; }
.build-product-bar span { margin-left: auto; }
.build-product-body {
  display: grid;
  grid-template-columns: 0.38fr 1fr 1fr;
  grid-template-rows: 0.48fr 0.3fr 1fr;
  gap: 10px;
  height: calc(100% - 34px);
  padding: 16px;
}
.build-product-body > span {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 320ms ease, transform 540ms cubic-bezier(.2,.8,.2,1);
}
.build-product-nav {
  position: relative;
  grid-area: 1 / 1 / 4 / 2;
  overflow: hidden;
  background: #09090b;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.build-product-nav::before {
  content: "C";
  position: absolute;
  top: 12px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #fff;
  background: var(--blue);
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 700;
  transform: translateX(-50%);
}
.build-product-nav::after {
  content: "";
  position: absolute;
  top: 63px;
  right: 13px;
  left: 13px;
  height: 82px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.14) 0 5px, transparent 5px 22px);
  border-radius: 999px;
}
.build-product-title {
  position: relative;
  grid-area: 1 / 2 / 2 / 4;
  width: 78%;
  background: #29292f;
  border-radius: 9px;
}
.build-product-copy {
  position: relative;
  grid-area: 2 / 2 / 3 / 4;
  width: 90%;
  background: #202025;
  border-radius: 8px;
}
.build-product-cta {
  position: relative;
  grid-area: 3 / 2 / 4 / 3;
  overflow: hidden;
  background: linear-gradient(145deg, #087cff, #0057c8);
  border-radius: 12px;
}
.build-product-cta::after {
  content: "↗";
  position: absolute;
  right: 12px;
  bottom: 11px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--blue);
  background: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
}
.build-product-tile-one {
  position: relative;
  grid-area: 3 / 3 / 4 / 4;
  overflow: hidden;
  background: #19191e;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}
.build-product-tile-one::before,
.build-product-tile-one::after {
  content: "";
  position: absolute;
  top: 44%;
  left: 50%;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.build-product-tile-one::before { border: 1px solid rgba(100,210,255,0.24); }
.build-product-tile-one::after {
  border: 2px solid transparent;
  border-top-color: #64d2ff;
  border-right-color: rgba(100,210,255,0.55);
}
.build-product-tile-one i,
.build-product-tile-one b {
  position: absolute;
  z-index: 2;
  display: block;
  width: 9px;
  height: 9px;
  background: #64d2ff;
  border: 2px solid #19191e;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(100,210,255,0.7);
}
.build-product-tile-one i:nth-of-type(1) { top: calc(44% - 39px); left: calc(50% - 4px); }
.build-product-tile-one i:nth-of-type(2) { top: calc(44% + 27px); left: calc(50% - 35px); }
.build-product-tile-one i:nth-of-type(3) { top: calc(44% + 27px); right: calc(50% - 35px); }
.build-product-tile-one b {
  top: calc(44% - 8px);
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  background: var(--blue);
  border-width: 3px;
}
.build-product-tile-one small {
  position: absolute;
  right: 0;
  bottom: 12px;
  left: 0;
  color: rgba(255,255,255,0.46);
  font-size: 0.44rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.build-product-tile-two { display: none; }
.motion-build.is-active .build-product-body > span { opacity: 1; transform: none; }
.motion-build.is-active .build-product-nav { transition-delay: 80ms; }
.motion-build.is-active .build-product-title { transition-delay: 160ms; }
.motion-build.is-active .build-product-copy { transition-delay: 230ms; }
.motion-build.is-active .build-product-cta { transition-delay: 300ms; }
.motion-build.is-active .build-product-tile-one { transition-delay: 370ms; }
.motion-build.is-active .build-product-tile-one::after { animation: build-loop-spin 2.8s linear infinite; }
.motion-build.is-active .build-product-tile-one i { animation: build-node-pulse 2.4s ease-in-out infinite; }
.motion-build.is-active .build-product-tile-one i:nth-of-type(2) { animation-delay: 400ms; }
.motion-build.is-active .build-product-tile-one i:nth-of-type(3) { animation-delay: 800ms; }
.motion-build.is-active .build-product-tile-one b { animation: build-core-pulse 2.4s ease-in-out infinite; }
@keyframes build-loop-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes build-node-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  45% { opacity: 1; transform: scale(1.25); }
}
@keyframes build-core-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,113,227,0.34), 0 0 16px rgba(0,113,227,0.8); }
  50% { box-shadow: 0 0 0 8px rgba(0,113,227,0), 0 0 26px rgba(0,113,227,0.9); }
}

/* Teach scene */
.teach-orbit { position: absolute; inset: 4% 3% 9%; }
.teach-orbit-line {
  position: absolute;
  top: 15%;
  left: 18%;
  width: 62%;
  height: 65%;
  border: 1px dashed rgba(168,167,255,0.38);
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 60%;
  transform: rotate(-14deg) scale(0.65);
  transform-origin: center;
  opacity: 0;
  transition: opacity 400ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
}
.teach-step {
  position: absolute;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.8rem;
  align-items: center;
  width: min(72%, 315px);
  padding: 1rem 1.1rem;
  color: var(--ink);
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 18px;
  box-shadow: 0 22px 45px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity 300ms ease, transform 650ms cubic-bezier(.2,.8,.2,1);
}
.teach-step i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  background: #5b5cff;
  border-radius: 50%;
  font-size: 0.62rem;
  font-style: normal;
}
.teach-step strong { font-size: 1.05rem; font-weight: 600; }
.teach-step span { color: var(--muted); font-size: 0.73rem; }
.teach-step-one { top: 3%; left: 0; }
.teach-step-two { top: 34%; right: 0; }
.teach-step-three { bottom: 2%; left: 10%; }
.motion-teach.is-active .teach-orbit-line { opacity: 1; transform: rotate(-14deg) scale(1); }
.motion-teach.is-active .teach-step { opacity: 1; transform: none; }
.motion-teach.is-active .teach-step-one { transition-delay: 80ms; }
.motion-teach.is-active .teach-step-two { transition-delay: 210ms; }
.motion-teach.is-active .teach-step-three { transition-delay: 340ms; }

/* Grow scene: reach expands outward instead of using a chart. */
.growth-universe { position: absolute; inset: 0 0 5%; }
.growth-ring,
.growth-core,
.growth-signal,
.growth-dot { position: absolute; top: 50%; left: 50%; }
.growth-ring {
  border: 1px solid rgba(94,230,174,0.28);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.55);
}
.growth-ring-one { width: 150px; height: 150px; }
.growth-ring-two { width: 275px; height: 275px; }
.growth-ring-three { width: 410px; height: 410px; }
.motion-grow.is-active .growth-ring { opacity: 1; animation: growth-breathe 5s ease-in-out infinite; }
.motion-grow.is-active .growth-ring-two { animation-delay: 180ms; }
.motion-grow.is-active .growth-ring-three { animation-delay: 360ms; }
.growth-core {
  z-index: 3;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  color: #072a20;
  background: #5ee6ae;
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(94,230,174,0.34);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  transform: translate(-50%, -50%) scale(0.75);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.motion-grow.is-active .growth-core { transform: translate(-50%, -50%) scale(1); }
.growth-signal {
  z-index: 3;
  padding: 0.52rem 0.75rem;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  font-size: 0.66rem;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 300ms ease, transform 700ms cubic-bezier(.2,.8,.2,1);
}
.growth-signal-one { margin: -112px 0 0 -126px; }
.growth-signal-two { margin: -42px 0 0 150px; }
.growth-signal-three { margin: 135px 0 0 -70px; }
.motion-grow.is-active .growth-signal { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.motion-grow.is-active .growth-signal-one { transition-delay: 130ms; }
.motion-grow.is-active .growth-signal-two { transition-delay: 250ms; }
.motion-grow.is-active .growth-signal-three { transition-delay: 370ms; }
.growth-dot {
  z-index: 2;
  width: 8px;
  height: 8px;
  background: #5ee6ae;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(94,230,174,0.75);
  opacity: 0;
}
.growth-dot-one { margin: -155px 0 0 30px; }
.growth-dot-two { margin: -74px 0 0 -180px; }
.growth-dot-three { margin: 72px 0 0 177px; }
.growth-dot-four { margin: 168px 0 0 40px; }
.growth-dot-five { margin: 105px 0 0 -155px; }
.motion-grow.is-active .growth-dot { opacity: 1; animation: growth-dot-float 3.8s ease-in-out infinite alternate; }
.motion-grow.is-active .growth-dot-two { animation-delay: 320ms; }
.motion-grow.is-active .growth-dot-three { animation-delay: 640ms; }
.motion-grow.is-active .growth-dot-four { animation-delay: 960ms; }
.motion-grow.is-active .growth-dot-five { animation-delay: 1280ms; }
@keyframes growth-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.45; }
  50% { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
}
@keyframes growth-dot-float {
  from { transform: translate(-4px, 4px) scale(0.85); }
  to { transform: translate(7px, -8px) scale(1.15); }
}

.motion-stage-controls {
  position: absolute;
  z-index: 9;
  inset: auto 1.2rem 1.2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  padding: 0.38rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  backdrop-filter: blur(20px);
}
.motion-stage-control {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 0.6rem 0.7rem;
  color: rgba(255,255,255,0.62);
  background: transparent;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}
.motion-stage-control span { font-size: 0.6rem; opacity: 0.6; }
.motion-stage-control:hover { color: #fff; }
.motion-stage-control.is-active {
  color: #111113;
  background: #fff;
}

@media (max-width: 1020px) {
  .catalyst-hero { padding-top: 96px; }
  .catalyst-hero-shell { grid-template-columns: 1fr; gap: 3rem; }
  .catalyst-hero-message { text-align: center; }
  .catalyst-hero-title,
  .catalyst-hero-summary { margin-left: auto; margin-right: auto; }
  .catalyst-hero-actions { justify-content: center; }
  .catalyst-motion-stage { width: min(100%, 660px); min-height: 570px; margin: 0 auto; }
}

@media (max-width: 620px) {
  .catalyst-hero { padding: 82px 18px 42px; }
  .catalyst-hero-shell { gap: 2.4rem; }
  .catalyst-hero-title { font-size: clamp(3rem, 14.5vw, 4.4rem); line-height: 0.94; }
  .hero-message-line.is-active { transform: none; }
  .catalyst-hero-summary { margin-top: 1.5rem; font-size: 1.04rem; }
  .catalyst-hero-actions { margin-top: 1.5rem; }
  .catalyst-motion-stage { min-height: 500px; border-radius: 28px; }
  .motion-stage-head { padding: 1.25rem; }
  .motion-stage-viewport { inset: 62px 14px 88px; }
  .build-product { width: 94%; height: 63%; }
  .teach-orbit { inset: 4% 0 8%; }
  .teach-step { width: 78%; padding: 0.8rem; }
  .teach-step i { width: 34px; height: 34px; }
  .growth-ring-three { width: 340px; height: 340px; }
  .growth-ring-two { width: 235px; height: 235px; }
  .growth-signal-one { margin-left: -105px; }
  .growth-signal-two { margin-left: 112px; }
  .growth-dot-two { margin-left: -142px; }
  .growth-dot-three { margin-left: 140px; }
  .growth-dot-five { margin-left: -125px; }
  .motion-status { right: 50%; transform: translateX(50%); white-space: nowrap; }
  .motion-stage-controls { inset: auto 0.75rem 0.75rem; }
  .motion-stage-control { gap: 0.3rem; min-height: 44px; padding-inline: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-message-line,
  .motion-scene,
  .build-product,
  .build-product-body > span,
  .teach-orbit-line,
  .teach-step,
  .growth-core,
  .growth-signal { transition: none !important; }
  .motion-grow.is-active .growth-ring,
  .motion-grow.is-active .growth-dot { animation: none !important; }
}

/* Automatic hero experiment: one continuous Build → Teach → Grow sequence. */
.catalyst-flow-stage {
  position: relative;
  isolation: isolate;
  min-height: clamp(540px, calc(100svh - 165px), 660px);
  overflow: hidden;
  color: #fff;
  background: #08090d;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 36px;
  box-shadow: 0 35px 90px rgba(0,0,0,0.22);
}
.catalyst-flow-stage::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 82%, transparent);
}
.catalyst-flow-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -28%;
  right: -20%;
  width: 78%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,113,227,0.5), rgba(0,113,227,0) 68%);
  border-radius: 50%;
  filter: blur(10px);
  transition: background 700ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
}
.catalyst-hero[data-hero-scene="teach"] .catalyst-flow-stage::after {
  background: radial-gradient(circle, rgba(102,92,255,0.52), rgba(102,92,255,0) 68%);
  transform: translate(-10%, 16%);
}
.catalyst-hero[data-hero-scene="grow"] .catalyst-flow-stage::after {
  background: radial-gradient(circle, rgba(34,201,142,0.5), rgba(34,201,142,0) 68%);
  transform: translate(-18%, 22%);
}
.flow-stage-head {
  position: absolute;
  z-index: 8;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 1.6rem;
  color: rgba(255,255,255,0.56);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.flow-stage-viewport { position: absolute; inset: 70px 20px 82px; }
.flow-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition: opacity 420ms ease, transform 720ms cubic-bezier(.2,.8,.2,1);
}
.flow-scene.is-active { z-index: 2; opacity: 1; transform: none; }
.flow-scene-caption {
  position: absolute;
  z-index: 5;
  top: 1rem;
  left: 0.5rem;
  display: flex;
  flex-direction: column;
}
.flow-scene-caption span {
  color: #64d2ff;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.flow-teach .flow-scene-caption span { color: #aaa8ff; }
.flow-grow .flow-scene-caption span { color: #5ee6ae; }
.flow-scene-caption strong {
  margin-top: 0.3rem;
  color: #fff;
  font-size: clamp(1.9rem, 3.5vw, 3.15rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
}

/* Build: scattered parts repeatedly resolve into one useful system. */
.flow-build-machine { position: absolute; inset: 18% 0 0; }
.flow-build-piece,
.flow-build-spark,
.flow-build-orbit { position: absolute; top: 56%; left: 50%; }
.flow-build-orbit {
  width: 360px;
  height: 235px;
  border: 1px solid rgba(100,210,255,0.2);
  border-radius: 42%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-9deg) scale(0.75);
}
.flow-build-piece {
  width: 86px;
  height: 62px;
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07));
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 13px;
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
  opacity: 0;
}
.flow-build-piece-one { --from-x: -225px; --from-y: -155px; --to-x: -138px; --to-y: -80px; --turn: -16deg; }
.flow-build-piece-two { --from-x: 140px; --from-y: -175px; --to-x: -43px; --to-y: -80px; --turn: 13deg; background: linear-gradient(145deg, rgba(0,113,227,0.92), rgba(0,78,181,0.82)); }
.flow-build-piece-three { --from-x: 205px; --from-y: -40px; --to-x: 52px; --to-y: -80px; --turn: 19deg; }
.flow-build-piece-four { --from-x: -245px; --from-y: 80px; --to-x: -138px; --to-y: -9px; --turn: 12deg; }
.flow-build-piece-five { --from-x: -15px; --from-y: 155px; --to-x: -43px; --to-y: -9px; --turn: -10deg; background: linear-gradient(145deg, rgba(100,210,255,0.3), rgba(0,113,227,0.2)); }
.flow-build-piece-six { --from-x: 190px; --from-y: 115px; --to-x: 52px; --to-y: -9px; --turn: 15deg; }
.flow-build-spark {
  z-index: 4;
  width: 18px;
  height: 18px;
  background: #64d2ff;
  border: 4px solid #0b1b2b;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(100,210,255,0.4), 0 0 30px rgba(100,210,255,0.8);
  opacity: 0;
  transform: translate(-50%, -50%);
}
.flow-build.is-active .flow-build-piece { animation: flow-build-assemble 4.35s cubic-bezier(.2,.8,.2,1) infinite; }
.flow-build.is-active .flow-build-piece-two { animation-delay: 70ms; }
.flow-build.is-active .flow-build-piece-three { animation-delay: 140ms; }
.flow-build.is-active .flow-build-piece-four { animation-delay: 210ms; }
.flow-build.is-active .flow-build-piece-five { animation-delay: 280ms; }
.flow-build.is-active .flow-build-piece-six { animation-delay: 350ms; }
.flow-build.is-active .flow-build-orbit { animation: flow-build-orbit 4.35s ease-in-out infinite; }
.flow-build.is-active .flow-build-spark { animation: flow-build-spark 2.2s ease-in-out infinite; }
@keyframes flow-build-assemble {
  0%, 8% { opacity: 0.18; transform: translate(var(--from-x), var(--from-y)) rotate(var(--turn)) scale(0.72); }
  38%, 72% { opacity: 1; transform: translate(var(--to-x), var(--to-y)) rotate(0) scale(1); }
  94%, 100% { opacity: 0.18; transform: translate(var(--from-x), var(--from-y)) rotate(var(--turn)) scale(0.72); }
}
@keyframes flow-build-orbit {
  0%, 18%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(0.75); }
  44%, 74% { opacity: 1; transform: translate(-50%, -50%) rotate(5deg) scale(1); }
}
@keyframes flow-build-spark {
  0%, 100% { opacity: 0.45; box-shadow: 0 0 0 0 rgba(100,210,255,0.32), 0 0 24px rgba(100,210,255,0.72); }
  50% { opacity: 1; box-shadow: 0 0 0 14px rgba(100,210,255,0), 0 0 42px rgba(100,210,255,0.95); }
}

/* Teach: one idea travels outward and becomes shared knowledge. */
.flow-teach-field { position: absolute; inset: 19% 3% 2%; }
.flow-teach-core,
.flow-teach-ray,
.flow-teach-node { position: absolute; top: 56%; left: 50%; }
.flow-teach-core {
  z-index: 4;
  width: 86px;
  height: 86px;
  background: #6663ff;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 28px;
  box-shadow: 0 0 50px rgba(102,99,255,0.45);
  transform: translate(-50%, -50%) rotate(45deg) scale(0.7);
}
.flow-teach-core::before,
.flow-teach-core::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
  transform: rotate(-45deg);
}
.flow-teach-core::before { top: 28px; left: 28px; width: 12px; height: 12px; box-shadow: 22px 0 0 rgba(255,255,255,0.55), 0 22px 0 rgba(255,255,255,0.3); }
.flow-teach-core::after { right: 18px; bottom: 18px; width: 6px; height: 6px; opacity: 0.7; }
.flow-teach-ray {
  z-index: 1;
  width: var(--length);
  height: 2px;
  background: linear-gradient(90deg, #7775ff, rgba(170,168,255,0.16));
  transform: rotate(var(--angle)) scaleX(0);
  transform-origin: left center;
}
.flow-teach-node {
  z-index: 3;
  width: 22px;
  height: 22px;
  margin: var(--node-y) 0 0 var(--node-x);
  background: #aaa8ff;
  border: 5px solid #1d1c43;
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(170,168,255,0.55);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}
.flow-teach-ray-one { --length: 155px; --angle: -150deg; }
.flow-teach-node-one { --node-x: -132px; --node-y: -76px; }
.flow-teach-ray-two { --length: 172px; --angle: -86deg; }
.flow-teach-node-two { --node-x: 12px; --node-y: -171px; }
.flow-teach-ray-three { --length: 165px; --angle: -28deg; }
.flow-teach-node-three { --node-x: 145px; --node-y: -78px; }
.flow-teach-ray-four { --length: 150px; --angle: 38deg; }
.flow-teach-node-four { --node-x: 118px; --node-y: 92px; }
.flow-teach-ray-five { --length: 148px; --angle: 144deg; }
.flow-teach-node-five { --node-x: -120px; --node-y: 87px; }
.flow-teach.is-active .flow-teach-core { animation: flow-teach-core 3.2s ease-in-out infinite; }
.flow-teach.is-active .flow-teach-ray { animation: flow-teach-ray 3.9s cubic-bezier(.2,.8,.2,1) infinite; }
.flow-teach.is-active .flow-teach-node { animation: flow-teach-node 3.9s cubic-bezier(.2,.8,.2,1) infinite; }
.flow-teach.is-active :is(.flow-teach-ray-two, .flow-teach-node-two) { animation-delay: 120ms; }
.flow-teach.is-active :is(.flow-teach-ray-three, .flow-teach-node-three) { animation-delay: 240ms; }
.flow-teach.is-active :is(.flow-teach-ray-four, .flow-teach-node-four) { animation-delay: 360ms; }
.flow-teach.is-active :is(.flow-teach-ray-five, .flow-teach-node-five) { animation-delay: 480ms; }
@keyframes flow-teach-core {
  0%, 100% { transform: translate(-50%, -50%) rotate(45deg) scale(0.82); }
  50% { transform: translate(-50%, -50%) rotate(135deg) scale(1); }
}
@keyframes flow-teach-ray {
  0%, 12%, 100% { opacity: 0; transform: rotate(var(--angle)) scaleX(0); }
  42%, 76% { opacity: 1; transform: rotate(var(--angle)) scaleX(1); }
}
@keyframes flow-teach-node {
  0%, 22%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  48%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Grow: one seed becomes a branching network of opportunities. */
.flow-grow-network { position: absolute; inset: 17% 0 0; }
.flow-grow-seed,
.flow-grow-branch,
.flow-grow-node { position: absolute; top: 64%; left: 28%; }
.flow-grow-seed {
  z-index: 4;
  width: 38px;
  height: 38px;
  background: #5ee6ae;
  border: 7px solid #153a2d;
  border-radius: 50%;
  box-shadow: 0 0 36px rgba(94,230,174,0.68);
  transform: translate(-50%, -50%);
}
.flow-grow-branch {
  z-index: 1;
  width: var(--length);
  height: 2px;
  background: linear-gradient(90deg, #5ee6ae, rgba(94,230,174,0.16));
  transform: rotate(var(--angle)) scaleX(0);
  transform-origin: left center;
}
.flow-grow-node {
  z-index: 3;
  width: var(--size, 20px);
  height: var(--size, 20px);
  margin: var(--node-y) 0 0 var(--node-x);
  background: #5ee6ae;
  border: 4px solid #153a2d;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(94,230,174,0.56);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
}
.flow-grow-branch-one { --length: 118px; --angle: -128deg; }
.flow-grow-node-one { --node-x: -72px; --node-y: -93px; --size: 16px; }
.flow-grow-branch-two { --length: 178px; --angle: -82deg; }
.flow-grow-node-two { --node-x: 25px; --node-y: -177px; --size: 22px; }
.flow-grow-branch-three { --length: 238px; --angle: -42deg; }
.flow-grow-node-three { --node-x: 177px; --node-y: -158px; --size: 26px; }
.flow-grow-branch-four { --length: 270px; --angle: -9deg; }
.flow-grow-node-four { --node-x: 267px; --node-y: -42px; --size: 18px; }
.flow-grow-branch-five { --length: 225px; --angle: 24deg; }
.flow-grow-node-five { --node-x: 206px; --node-y: 91px; --size: 22px; }
.flow-grow-branch-six { --length: 125px; --angle: 62deg; }
.flow-grow-node-six { --node-x: 59px; --node-y: 110px; --size: 16px; }
.flow-grow.is-active .flow-grow-seed { animation: flow-grow-seed 2.2s ease-in-out infinite; }
.flow-grow.is-active .flow-grow-branch { animation: flow-grow-branch 4.1s cubic-bezier(.2,.8,.2,1) infinite; }
.flow-grow.is-active .flow-grow-node { animation: flow-grow-node 4.1s cubic-bezier(.2,.8,.2,1) infinite; }
.flow-grow.is-active :is(.flow-grow-branch-two, .flow-grow-node-two) { animation-delay: 100ms; }
.flow-grow.is-active :is(.flow-grow-branch-three, .flow-grow-node-three) { animation-delay: 200ms; }
.flow-grow.is-active :is(.flow-grow-branch-four, .flow-grow-node-four) { animation-delay: 300ms; }
.flow-grow.is-active :is(.flow-grow-branch-five, .flow-grow-node-five) { animation-delay: 400ms; }
.flow-grow.is-active :is(.flow-grow-branch-six, .flow-grow-node-six) { animation-delay: 500ms; }
@keyframes flow-grow-seed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94,230,174,0.3), 0 0 25px rgba(94,230,174,0.6); }
  50% { box-shadow: 0 0 0 15px rgba(94,230,174,0), 0 0 42px rgba(94,230,174,0.9); }
}
@keyframes flow-grow-branch {
  0%, 12%, 100% { opacity: 0; transform: rotate(var(--angle)) scaleX(0); }
  46%, 78% { opacity: 1; transform: rotate(var(--angle)) scaleX(1); }
}
@keyframes flow-grow-node {
  0%, 28%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
  52%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.flow-stage-progress {
  position: absolute;
  z-index: 9;
  right: 1.5rem;
  bottom: 1.35rem;
  left: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: 0.75rem;
  color: rgba(255,255,255,0.38);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.flow-stage-progress::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
}
.flow-stage-progress > span { transition: color 260ms ease; }
.flow-stage-progress > span:nth-of-type(2) { text-align: center; }
.flow-stage-progress > span:nth-of-type(3) { text-align: right; }
.flow-stage-progress > span.is-active { color: #fff; }
.flow-stage-progress > i {
  position: absolute;
  bottom: 0;
  width: 33.333%;
  height: 2px;
  background: #64d2ff;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
}
.catalyst-hero[data-hero-scene="build"] .flow-stage-progress > i { left: 0; animation: flow-progress-build 4.6s linear; }
.catalyst-hero[data-hero-scene="teach"] .flow-stage-progress > i { left: 33.333%; background: #aaa8ff; animation: flow-progress-teach 4.6s linear; }
.catalyst-hero[data-hero-scene="grow"] .flow-stage-progress > i { left: 66.666%; background: #5ee6ae; animation: flow-progress-grow 4.6s linear; }
@keyframes flow-progress-build { to { transform: scaleX(1); } }
@keyframes flow-progress-teach { to { transform: scaleX(1); } }
@keyframes flow-progress-grow { to { transform: scaleX(1); } }

@media (max-width: 1020px) {
  .catalyst-flow-stage { width: min(100%, 660px); min-height: 570px; margin: 0 auto; }
}
@media (max-width: 620px) {
  .catalyst-flow-stage { min-height: 500px; border-radius: 28px; }
  .flow-stage-head { padding: 1.25rem; }
  .flow-stage-viewport { inset: 62px 14px 76px; }
  .flow-scene-caption { top: 0.8rem; }
  .flow-build-machine,
  .flow-teach-field,
  .flow-grow-network { transform: scale(0.78); transform-origin: center; }
  .flow-stage-progress { right: 1rem; bottom: 1rem; left: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-scene { transition: none !important; }
  .flow-build.is-active :is(.flow-build-piece, .flow-build-orbit, .flow-build-spark),
  .flow-teach.is-active :is(.flow-teach-core, .flow-teach-ray, .flow-teach-node),
  .flow-grow.is-active :is(.flow-grow-seed, .flow-grow-branch, .flow-grow-node),
  .flow-stage-progress > i { animation: none !important; }
  .flow-build.is-active .flow-build-piece { opacity: 1; transform: translate(var(--to-x), var(--to-y)); }
  .flow-build.is-active .flow-build-orbit { opacity: 1; transform: translate(-50%, -50%) rotate(5deg) scale(1); }
  .flow-build.is-active .flow-build-spark { opacity: 1; }
  .flow-teach.is-active .flow-teach-core { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
  .flow-teach.is-active .flow-teach-ray { opacity: 1; transform: rotate(var(--angle)) scaleX(1); }
  .flow-teach.is-active .flow-teach-node { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .flow-grow.is-active .flow-grow-branch { opacity: 1; transform: rotate(var(--angle)) scaleX(1); }
  .flow-grow.is-active .flow-grow-node { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .flow-stage-progress > i { transform: scaleX(1); }
}

/* Shared Apple-inspired section system */
.section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--section-space) max(24px, calc((100vw - var(--max)) / 2));
  border: 0;
}
.section > * { width: min(100%, var(--max)); margin-left: auto; margin-right: auto; }
.section-heading {
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
  text-align: center;
}
.section-heading h2,
h2 {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(2.8rem, 4.5vw, 4.8rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.055em;
}
.section-heading > p,
.split-heading > p {
  max-width: 620px;
  margin: 1.2rem auto 0;
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: 1.35;
}
.split-heading {
  display: block;
  text-align: center;
}
.eyebrow {
  margin: 0 0 0.8rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow::first-letter { text-transform: uppercase; }

/* Short, high-impact emphasis inspired by Apple's editorial headline treatment. */
.headline-highlight {
  display: inline;
  padding: 0 0.12em 0.035em;
  border-radius: 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.highlight-blue { color: #fff; background: #0071e3; }
.highlight-green { color: #07150c; background: #32d74b; }
.highlight-orange { color: #1d1100; background: #ff9f0a; }
.highlight-purple { color: #fff; background: #8e5af7; }

/* What Catalyst does */
.audience-split { background: var(--paper-deep); }
.audience-split .section-heading h2 { max-width: 760px; }
.three-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  border: 0;
}
.large-panel,
.large-panel.accent-panel,
.large-panel.dark-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 390px;
  padding: clamp(2rem, 4vw, 3.2rem);
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: var(--radius-large);
  text-align: center;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease;
}
.large-panel:hover { transform: translateY(-5px); box-shadow: 0 18px 50px rgba(0,0,0,0.08); }
.large-panel .panel-number { display: none; }
.large-panel h3 {
  margin: 0 0 1rem;
  font-size: clamp(2.5rem, 3.8vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.055em;
}
.large-panel > p:not(.panel-number) {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 4.5em;
  margin: 0;
  color: var(--muted);
}
.large-panel .inline-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 1.4rem 0 0;
  min-height: 2.2rem;
}
.large-panel .inline-list li {
  padding: 0.38rem 0.65rem;
  color: #424245;
  background: var(--paper-deep);
  border-radius: 999px;
  font-size: 0.72rem;
}
.large-panel .text-link,
.large-panel .light-link {
  margin-top: auto;
  padding-top: 1.5rem;
  color: var(--blue);
  font-size: 0.94rem;
  text-decoration: none;
}
.large-panel .text-link:hover { text-decoration: underline; }

/* Courses as product tiles */
#courses { background: #fff; }
#courses .section-heading { text-align: center; }
.course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.course-card,
.course-card:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 630px;
  padding: clamp(2.2rem, 4vw, 3.8rem);
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 112%, rgba(0,113,227,0.13), transparent 42%),
    var(--paper-deep);
  border: 0;
  border-radius: var(--radius-large);
  text-align: center;
}
.course-card:nth-child(2) {
  color: #f5f5f7;
  background:
    radial-gradient(circle at 50% 112%, rgba(0,113,227,0.38), transparent 44%),
    #000;
}
.course-card::before,
.course-card:nth-child(2)::before { display: none; content: none; }
.course-card > *:not(.course-actions),
.course-card .course-meta,
.course-actions { margin-left: auto; margin-right: auto; }
.course-card .status-badge,
.course-card:nth-child(2) .status-badge {
  align-self: center;
  margin: 0;
  padding: 0;
  color: #bf4800;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.course-card:nth-child(2) .status-badge { color: #ff9f0a; }
.course-card h3 {
  max-width: 11ch;
  margin: 1rem auto 1rem;
  font-size: clamp(3rem, 4.7vw, 5.2rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.06em;
}
.course-card > p {
  max-width: 460px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.08rem;
}
.course-card:nth-child(2) > p { color: #a1a1a6; }
.course-card .course-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 0.8rem;
  max-width: 480px;
  margin-top: auto;
  margin-bottom: 1.7rem;
  padding-top: 3rem;
}
.course-meta li {
  padding: 0;
  color: #424245;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.76rem;
}
.course-card:nth-child(2) .course-meta li { color: #a1a1a6; }
.course-card:nth-child(2) .course-detail-link,
.course-card:nth-child(2) .course-detail-link:visited { color: #2997ff; }
.course-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem 1.15rem;
  margin-top: 0;
  margin-bottom: 0;
}
.course-detail-link,
.course-detail-link:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--blue);
  border: 0;
  font-size: 0.98rem;
  font-weight: 400;
}
.course-detail-link span:last-child {
  display: inline;
  width: auto;
  height: auto;
  margin-left: 0.2rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.course-detail-link:hover { border: 0; text-decoration: underline; }
.course-detail-link:hover span:last-child { background: transparent; transform: translate(2px,-2px); }
.course-card .button,
.course-card:nth-child(2) .button,
.course-card:nth-child(2) .button:visited { color: #fff; background: var(--blue); border-color: var(--blue); }
.course-card .button:hover,
.course-card:nth-child(2) .button:hover { color: #fff; background: var(--blue-hover); border-color: var(--blue-hover); }

/* Business services */
#services {
  color: #f5f5f7;
  background: #000;
}
#services .eyebrow,
#services .split-heading > p { color: #a1a1a6; }
#services h2 { color: #f5f5f7; }
.service-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  border: 0;
}
.service-list article {
  display: flex;
  flex-direction: column;
  min-height: 238px;
  padding: 1.75rem;
  color: #f5f5f7;
  background: #1d1d1f;
  border: 0;
  border-radius: var(--radius-medium);
  transition: background 300ms cubic-bezier(.2,.8,.2,1), transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease;
}
.service-list article:hover {
  padding-left: 1.75rem;
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 20px 42px rgba(0,0,0,0.35);
}
.service-list article:nth-child(4n + 1):hover { background: #006edb; }
.service-list article:nth-child(4n + 2):hover { background: #d45d00; }
.service-list article:nth-child(4n + 3):hover { background: #218548; }
.service-list article:nth-child(4n + 4):hover { background: #7651c9; }
.service-list article > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: #fff;
  background: #343437;
  border-radius: 50%;
  font-size: 0.8rem;
  transition: background 300ms ease, transform 300ms ease;
}
.service-list article:hover > span { background: rgba(0,0,0,0.2); transform: rotate(45deg); }
.service-list h3 {
  min-height: 3.1em;
  margin: auto 0 0.65rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.service-list h3::after { display: none; }
.service-list p { margin: 0; color: #a1a1a6; font-size: 0.9rem; }
.service-list article:hover h3,
.service-list article:hover p { color: #fff; }
#services .button,
#services .button:visited { margin-top: 2.5rem; color: #fff; background: var(--blue); border-color: var(--blue); }
#services > .button,
#services > .button:visited { width: auto; margin-left: auto; margin-right: auto; }

/* Flexible digital-team subscription */
.flexible-team-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  color: #1d1d1f;
  background: #f5f5f7;
}
.flexible-team-copy h2,
.creator-services-copy h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3.4rem, 5.4vw, 6.2rem);
  line-height: 0.95;
  letter-spacing: -0.065em;
}
.flexible-team-copy > p,
.creator-services-copy > p {
  max-width: 38rem;
  margin: 1.7rem 0 0;
  color: #6e6e73;
  font-size: 1.08rem;
  line-height: 1.6;
}
.flexible-team-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}
.flexible-team-points li {
  padding: 0.62rem 0.85rem;
  border: 1px solid #d2d2d7;
  border-radius: 999px;
  color: #424245;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
}
.flexible-team-copy > .button,
.creator-services-copy > .button { margin-top: 2rem; }
.team-console {
  position: relative;
  min-height: 500px;
  padding: clamp(1.7rem, 3vw, 2.5rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 36px;
  color: #f5f5f7;
  background: #0b0b0d;
  box-shadow: 0 34px 90px rgba(0,0,0,0.18);
  isolation: isolate;
}
.team-console::before {
  position: absolute;
  inset: auto -20% -45% 20%;
  z-index: -1;
  height: 78%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,113,227,0.3), transparent 68%);
  content: "";
  animation: team-console-breathe 6s ease-in-out infinite alternate;
}
.team-console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.team-console-header span { font-weight: 700; letter-spacing: -0.02em; }
.team-console-header strong { color: #64b5ff; font-size: 0.82rem; }
.team-service-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.team-service-selector button {
  min-height: 58px;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  color: #a1a1a6;
  text-align: left;
  background: rgba(255,255,255,0.045);
  cursor: pointer;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease;
}
.team-service-selector button:hover { color: #fff; border-color: rgba(100,181,255,0.5); transform: translateY(-2px); }
.team-service-selector button:focus-visible { outline: 3px solid #64b5ff; outline-offset: 3px; }
.team-service-selector button[aria-pressed="true"] {
  color: #fff;
  border-color: rgba(41,151,255,0.7);
  background: rgba(41,151,255,0.18);
}
.team-console-flow {
  display: grid;
  grid-template-columns: auto minmax(26px, 1fr) auto minmax(26px, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  margin-top: 3.2rem;
  color: #d1d1d6;
  font-size: 0.73rem;
}
.team-console-flow i {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,0.16);
}
.team-console-flow i::after {
  position: absolute;
  top: -2px;
  left: -7px;
  width: 7px;
  height: 5px;
  border-radius: 999px;
  background: #2997ff;
  box-shadow: 0 0 14px rgba(41,151,255,0.75);
  content: "";
  animation: team-flow 3.2s ease-in-out infinite;
}
.team-console-flow i:nth-of-type(2)::after { animation-delay: 1.15s; }
.team-console-note { margin: 1.2rem 0 0; color: #86868b; font-size: 0.8rem; }
@keyframes team-flow { 0%, 12% { left: -7px; opacity: 0; } 24% { opacity: 1; } 68% { left: calc(100% - 1px); opacity: 1; } 80%, 100% { left: calc(100% + 7px); opacity: 0; } }
@keyframes team-console-breathe { to { transform: translate3d(-8%, -4%, 0) scale(1.12); } }

/* Creator and influencer services */
.creator-services-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  overflow: hidden;
  color: #f5f5f7;
  background: #000;
}
.creator-services-copy > p { color: #a1a1a6; }
.creator-service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  max-width: 42rem;
  margin-top: 1.8rem;
}
.creator-service-list span {
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: #d1d1d6;
  background: rgba(255,255,255,0.055);
  font-size: 0.82rem;
}
.creator-system {
  position: relative;
  min-height: 560px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 40px;
  background: #0e0e11;
  box-shadow: inset 0 1px rgba(255,255,255,0.06);
}
.creator-system::before,
.creator-system::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(142,125,255,0.24);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}
.creator-system::before { width: 62%; aspect-ratio: 1; }
.creator-system::after { width: 83%; aspect-ratio: 1; border-color: rgba(255,159,10,0.14); }
.creator-system-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 190px;
  min-height: 190px;
  place-content: center;
  gap: 0.45rem;
  padding: 1.5rem;
  border: 1px solid rgba(142,125,255,0.55);
  border-radius: 50%;
  text-align: center;
  background: #17171b;
  box-shadow: 0 0 70px rgba(142,125,255,0.18);
  transform: translate(-50%, -50%);
}
.creator-system-core span { color: #a1a1a6; font-size: 0.75rem; }
.creator-system-core strong { font-size: 1.25rem; line-height: 1.05; }
.creator-system-output {
  position: absolute;
  z-index: 4;
  display: flex;
  min-width: 128px;
  min-height: 52px;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 17px;
  color: #d1d1d6;
  background: rgba(29,29,31,0.92);
  box-shadow: 0 18px 45px rgba(0,0,0,0.32);
  font-size: 0.82rem;
  animation: creator-output-float 4.8s ease-in-out infinite alternate;
}
.creator-system-output i { width: 8px; height: 8px; border-radius: 50%; background: #ff9f0a; }
.creator-output-brand { top: 13%; left: 10%; }
.creator-output-community { top: 17%; right: 8%; animation-delay: -1.2s; }
.creator-output-merch { right: 12%; bottom: 13%; animation-delay: -2.4s; }
.creator-output-portfolio { bottom: 16%; left: 8%; animation-delay: -3.6s; }
.creator-output-community i,
.creator-output-portfolio i { background: #8e7dff; }
.creator-signal {
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff9f0a;
  box-shadow: 0 0 18px rgba(255,159,10,0.68);
  animation: creator-signal-orbit 9s linear infinite;
}
.creator-signal-two { background: #8e7dff; box-shadow: 0 0 18px rgba(142,125,255,0.65); animation-duration: 13s; animation-direction: reverse; }
@keyframes creator-output-float { to { transform: translateY(-9px); } }
@keyframes creator-signal-orbit {
  from { transform: rotate(0deg) translateX(180px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(180px) rotate(-360deg); }
}

@media (max-width: 1220px) and (min-width: 1025px) {
  .flexible-team-section,
  .creator-services-section { grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr); gap: 3rem; }
  .team-console { min-height: 470px; }
  .creator-system { min-height: 500px; }
}

/* Support story */
.story-section { color: var(--ink); background: #fff; }
.story-intro {
  display: block;
  max-width: 820px;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.story-intro h2 { max-width: 760px; }
.story-intro > p { max-width: 620px; margin: 1.25rem auto 0; color: var(--muted); font-size: var(--text-lead); }
.story-section > article { width: auto; }
.story-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.25rem;
}
.story-section .story-intro { grid-column: 1 / -1; width: min(100%, 820px); }
.story-chapter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-height: 440px;
  padding: clamp(2rem, 3.5vw, 3rem);
  color: var(--ink);
  background: var(--paper-deep);
  border: 0;
  border-radius: var(--radius-large);
}
.story-chapter:nth-of-type(2) { background: var(--blue-soft); }
.story-chapter:last-child { border: 0; }
.story-chapter::before { display: none; }
.story-step {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}
.story-step span { display: none; }
.story-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0;
}
.story-copy .eyebrow { display: none; }
.story-copy h3 {
  max-width: none;
  margin: 0.6rem 0 1rem;
  color: var(--ink);
  font-size: clamp(2.1rem, 3.1vw, 3.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.story-copy > p:not(.eyebrow) { color: var(--muted); font-size: 0.98rem; }
.story-copy strong { color: var(--ink); }
.story-link,
.story-link:visited {
  display: inline-flex;
  align-self: flex-start;
  min-width: 0;
  margin-top: auto;
  padding: 1rem 0 0;
  color: var(--blue);
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
.story-link:hover { text-decoration: underline; }
.story-scholarship {
  color: #f5f5f7;
  background: #000;
}
.story-scholarship .story-step,
.story-scholarship .story-copy > p { color: #a1a1a6; }
.story-scholarship .story-copy h3,
.story-scholarship .story-copy strong { color: #f5f5f7; }
.story-scholarship .story-link { color: #2997ff; }
.checkup-board,
.career-map,
.scholarship-bridge { display: none; }

/* Shared homepage inquiry */
.final-cta {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(420px, 1fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 8rem);
  color: #f5f5f7;
  background: #000;
  border-radius: 0;
  text-align: left;
}
.inquiry-intro { position: sticky; top: 130px; }
.final-cta .inquiry-intro h2 {
  max-width: 8ch;
  margin: 0;
  color: #f5f5f7;
  text-align: left;
}
.final-cta .inquiry-intro p {
  max-width: 34rem;
  margin: 1.4rem 0 0;
  color: #a1a1a6;
  font-size: var(--text-lead);
}
.inquiry-panel {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: #1d1d1f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 30px;
}
.inquiry-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  padding: 0.35rem;
  background: #2c2c2e;
  border-radius: 999px;
}
.inquiry-tab {
  min-height: 46px;
  padding: 0.7rem 1rem;
  color: #f5f5f7;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}
.inquiry-tab:hover { background: rgba(255,255,255,0.08); }
.inquiry-tab.is-active { color: #fff; background: var(--blue); }
.homepage-inquiry-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.homepage-inquiry-form label,
.scholarship-form label {
  display: grid;
  gap: 0.55rem;
  color: #f5f5f7;
  font-size: 0.86rem;
  font-weight: 600;
}
.homepage-inquiry-form input,
.homepage-inquiry-form select,
.scholarship-form input {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  color: #f5f5f7;
  background: #2c2c2e;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
}
.homepage-inquiry-form select { color-scheme: dark; }
.homepage-inquiry-form input:focus,
.homepage-inquiry-form select:focus,
.scholarship-form input:focus {
  background: #333336;
  border-color: #2997ff;
  outline: 3px solid rgba(41,151,255,0.35);
  outline-offset: 1px;
}
.homepage-inquiry-form .full-field { grid-column: 1 / -1; }
.homepage-inquiry-form .button { justify-self: start; margin-top: 0.25rem; }
.form-status,
.final-cta .form-status { min-height: 1.3rem; margin: 0; color: #a1a1a6; font-size: 0.82rem; }
.form-status.is-success { color: #8ee6a7; }
.form-status.is-error { color: #ff9f9a; }

/* Scholarship application dialog */
.scholarship-dialog {
  width: min(620px, calc(100vw - 36px));
  max-height: calc(100svh - 36px);
  padding: clamp(1.4rem, 4vw, 2.5rem);
  color: #f5f5f7;
  background: #111113;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 28px;
  box-shadow: 0 30px 100px rgba(0,0,0,0.45);
}
.scholarship-dialog::backdrop {
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
}
.scholarship-dialog-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: start;
}
.scholarship-dialog h2 { margin: 0; color: #f5f5f7; font-size: clamp(2.2rem, 5vw, 3.5rem); }
.scholarship-dialog-header p { margin: 1rem 0 0; color: #a1a1a6; }
.dialog-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #f5f5f7;
  background: #2c2c2e;
  border: 0;
  border-radius: 50%;
  font: inherit;
  font-size: 1.5rem;
  cursor: pointer;
}
.dialog-close:hover { background: #3a3a3c; }
.scholarship-form { display: grid; gap: 1rem; margin-top: 2rem; }
.scholarship-form .button { justify-self: start; margin-top: 0.4rem; }

.site-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 2.5rem max(24px, calc((100vw - var(--max)) / 2));
  color: var(--muted);
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
}

/* Course pages */
.course-page { background: #fff; }
.course-page main > .section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--section-space) max(24px, calc((100vw - var(--max)) / 2));
}
.course-page main > .section > * { width: min(100%, var(--max)); margin-left: auto; margin-right: auto; }
.course-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: min(760px, 100svh);
  padding-top: 116px !important;
  padding-bottom: 70px !important;
  text-align: center;
  background: #fff;
}
.course-hero > div { width: min(100%, 980px) !important; }
.back-link,
.back-link:visited {
  display: block;
  width: 100%;
  margin: 0 0 4rem;
  color: var(--blue);
  font-size: 0.86rem;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }
.course-hero .eyebrow { color: #bf4800; }
.course-hero h1 {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(4rem, 7.2vw, 7.2rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.065em;
}
.course-hero .hero-text {
  max-width: 760px;
  margin: 1.4rem auto 1.8rem;
  color: #424245;
  font-size: clamp(1.35rem, 1.8vw, 1.8rem);
  line-height: 1.35;
}
.hero-facts { justify-content: center; }
.hero-facts span {
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.8rem;
}
.hero-facts span:not(:last-child)::after { content: " · "; margin-left: 0.5rem; }
.course-price-panel {
  width: auto !important;
  min-height: 0;
  margin-top: 2rem !important;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem 1.2rem;
  color: #f5f5f7;
  background: #1d1d1f;
  border: 0;
  border-radius: 18px;
}
.course-status-line { margin: 0; color: #a1a1a6; font-size: 0.82rem; }
.course-price-panel .price {
  margin: 0;
  padding: 0;
  color: #f5f5f7;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.course-price-panel .installment { margin: 0; padding: 0; color: #a1a1a6; font-size: 0.85rem; }
.course-primary-action { width: auto; margin: 0; }

.compact-section { background: var(--paper-deep); }
.compact-section .section-heading { margin-bottom: 0; }
.compact-section .section-heading > div { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.plain-audience-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.plain-audience-list li {
  display: flex;
  align-items: center;
  min-height: 76px;
  padding: 1.05rem 1.25rem;
  background: #fff;
  border: 0;
  border-radius: 18px;
  font-size: 1.05rem;
}
.plain-audience-list li::before {
  content: "✓";
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.75rem;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
  font-size: 0.75rem;
}

.course-dark-section {
  color: #f5f5f7;
  background: #000;
}
.course-dark-section .eyebrow,
.course-dark-section .split-heading > p { color: #a1a1a6; }
.course-dark-section h2 { color: #f5f5f7; }
.topic-cloud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  border: 0;
}
.topic-cloud span {
  display: flex;
  align-items: flex-end;
  min-height: 150px;
  padding: 1.4rem;
  color: #f5f5f7;
  background: #1d1d1f;
  border: 0;
  border-radius: 18px;
  font-size: 1rem;
  text-align: left;
}
.topic-cloud span::before { display: none; }
.topic-cloud span:nth-child(3n + 2) { background: #1d1d1f; }
.topic-cloud span:hover { padding: 1.4rem; background: #2c2c2e; }
.course-dark-section .section-action,
.course-dark-section .section-action:visited {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.curriculum-section {
  --progress: 0;
  color: #f5f5f7;
  background: #000;
  border-radius: 0;
}
.curriculum-section .eyebrow,
.curriculum-section .split-heading > p { color: #a1a1a6; }
.curriculum-section h2 { color: #f5f5f7; }
.curriculum-section .program-badge {
  display: inline-flex;
  width: auto;
  margin-bottom: 1.2rem;
  padding: 0.48rem 0.8rem;
  color: #82c1ff;
  background: rgba(0, 113, 227, 0.18);
  border: 1px solid rgba(41, 151, 255, 0.35);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.curriculum-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  background: #1d1d1f;
  border: 0;
  border-radius: 24px;
}
.curriculum-list::before,
.curriculum-list::after { display: none; }
.curriculum-list details,
.curriculum-list details[open] {
  position: relative;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.curriculum-list details:last-child { border-bottom: 0; }
.curriculum-list details::before { display: none; }
.curriculum-list summary {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 1.2rem;
  min-height: 88px;
  padding: 1.2rem 1.5rem;
  border: 0;
}
.curriculum-list details:last-child summary { border: 0; }
.curriculum-list summary:hover { background: #2c2c2e; }
.curriculum-list summary span { color: #a1a1a6; font-size: 0.75rem; writing-mode: initial; transform: none; }
.curriculum-list summary strong {
  padding: 0;
  color: #f5f5f7;
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.curriculum-list summary::after { color: var(--blue); font-size: 1.3rem; }
.week-content { max-width: 850px; padding: 0 1.5rem 1.6rem 9.7rem; }
.week-content p { color: #a1a1a6; }
.week-content b { color: #f5f5f7; }

#projects { background: #fff; }
.project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  border: 0;
}
.project-list li {
  display: flex;
  align-items: flex-end;
  min-height: 160px;
  padding: 1.5rem;
  color: var(--ink);
  background: var(--paper-deep);
  border: 0;
  border-radius: 18px;
  font-size: 1.2rem;
}
.project-list li:nth-child(odd) { border: 0; }
.project-list li:hover { padding-left: 1.5rem; background: #ececf0; }
.project-list li::before { display: none; }

.ai-section {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(3rem, 8vw, 8rem);
  color: #f5f5f7;
  background: #000;
  border-radius: 0;
}
.ai-section > * { width: auto !important; max-width: none; }
.ai-section .eyebrow { color: #a1a1a6; }
.ai-section h2 { color: #f5f5f7; text-align: left; }
.ai-section p { color: #a1a1a6; }
.simple-tag-list span { color: #f5f5f7; background: #1d1d1f; border: 0; border-radius: 999px; }

.learning-flow { max-width: 1000px; margin-bottom: 2rem; }
.learning-flow li::before { color: #fff; background: var(--blue); border-color: #fff; }
.experience-line { justify-content: center; border: 0; }
.experience-line span { color: #424245; background: var(--paper-deep); border: 0; border-radius: 999px; }

.requirements-layout { background: var(--paper-deep); }
.requirement-lines {
  display: grid;
  gap: 1rem;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.requirement-lines article,
.requirement-lines article:nth-child(even) {
  min-height: 130px;
  padding: 1.5rem;
  background: #fff;
  border: 0;
  border-radius: 18px;
}
.requirement-lines article::before { color: var(--blue); }

.career-outcome-section {
  color: var(--ink);
  background: linear-gradient(145deg, #eef7ff, #dceeff);
  border-radius: 0;
}
.role-list { justify-content: center; }
.role-list li { color: #424245; background: rgba(255,255,255,0.75); border: 0; border-radius: 999px; }

.registration-section {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 7rem);
  background: var(--paper-deep);
  border-radius: 0;
}
.registration-section > * { width: auto !important; }
.registration-price { font-size: clamp(2.8rem, 4.5vw, 4.7rem); }
.registration-form {
  padding: clamp(1.5rem, 3vw, 2.3rem);
  background: #fff;
  border-radius: 24px;
}
.registration-form input,
.registration-form select,
.registration-form textarea {
  background: var(--paper-deep);
  border: 1px solid transparent;
  border-radius: 12px;
}
.registration-form input:focus { background: #fff; border-color: var(--blue); }
.registration-form .button.full-field {
  width: auto;
  min-width: 0;
  justify-self: start;
  padding-inline: 1.25rem;
}

#faq { background: #fff; }
.faq-list {
  overflow: hidden;
  background: var(--paper-deep);
  border: 0;
  border-radius: 22px;
}
.faq-list details { padding: 0 1.4rem; border-bottom-color: var(--line); }
.faq-list summary { font-size: 1.05rem; }

.course-final-cta {
  min-height: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f5f5f7;
  background: #000;
  border-radius: 0;
}
.course-final-cta .eyebrow { color: #a1a1a6; }
.course-final-cta h2 { color: #f5f5f7; }
.course-final-cta > p:not(.eyebrow) { color: #a1a1a6; }
.course-final-cta .button,
.course-final-cta .button:visited {
  width: auto;
  min-width: 120px;
  align-self: center;
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}
.course-page .course-final-cta > a.button {
  width: auto !important;
  min-width: 120px;
  align-self: center;
  padding-inline: 1.4rem;
}

/* Secondary actions: outlined at rest, filled with inverted text on hover. */
a.secondary-button,
a.secondary-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;
  padding: 0.65rem 1.2rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
a.secondary-button:hover {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
  text-decoration: none;
  transform: none;
}
a.secondary-button-inverse,
a.secondary-button-inverse:visited {
  color: #fff;
  background: transparent;
  border-color: rgba(255,255,255,0.9);
}
a.secondary-button-inverse:hover {
  color: #000;
  background: #fff;
  border-color: #fff;
}
.hero-choice-services.secondary-button,
.hero-choice-services.secondary-button:visited {
  padding: 0.65rem 1.2rem;
  color: var(--ink);
  background: transparent;
  border-color: var(--ink);
}
.hero-choice-services.secondary-button:hover {
  padding-left: 1.2rem;
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
  text-decoration: none;
}
.course-card .course-detail-link.secondary-button,
.course-card .course-detail-link.secondary-button:visited {
  padding: 0.65rem 1.2rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
}
.course-card .course-detail-link.secondary-button:hover {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
  text-decoration: none;
}
.course-card:nth-child(2) .course-detail-link.secondary-button-inverse,
.course-card:nth-child(2) .course-detail-link.secondary-button-inverse:visited {
  color: #fff;
  background: transparent;
  border-color: rgba(255,255,255,0.9);
}
.course-card:nth-child(2) .course-detail-link.secondary-button-inverse:hover {
  color: #000;
  background: #fff;
  border-color: #fff;
}
.final-cta .final-work-button.secondary-button-inverse,
.final-cta .final-work-button.secondary-button-inverse:visited {
  color: #fff;
  background: transparent;
  border-color: rgba(255,255,255,0.9);
}
.final-cta .final-work-button.secondary-button-inverse:hover {
  color: #000;
  background: #fff;
  border-color: #fff;
  text-decoration: none;
}

/* Primary hover system: colour feedback without bounce or layout movement. */
.hero-choice:hover {
  transform: none;
}
.hero-choice-courses:hover {
  color: #fff;
  background: var(--blue-hover);
  border-color: var(--blue-hover);
}
.button:not(.secondary-button):hover {
  color: #fff;
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  transform: none;
}
#services .button:hover,
.final-cta .final-learn-button:hover,
.course-final-cta .button:hover,
.course-price-panel .button:hover {
  color: #fff;
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  transform: none;
}

.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.995);
  transition: opacity 650ms ease, transform 750ms cubic-bezier(.2,.75,.2,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .three-path-grid,
  .course-grid { grid-template-columns: 1fr; }
  .large-panel { min-height: 340px; }
  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-section { grid-template-columns: 1fr; row-gap: 1rem; }
  .story-section .story-intro { grid-column: 1; }
  .story-chapter { min-height: 360px; }
  .ai-section,
  .registration-section { grid-template-columns: 1fr; }
  .final-cta { grid-template-columns: 1fr; }
  .inquiry-intro { position: static; }
  .final-cta .inquiry-intro h2 { max-width: 10ch; }
}

@media (max-width: 680px) {
  :root { --section-space: 4.8rem; }
  .section,
  .course-page main > .section { padding-left: 18px; padding-right: 18px; }
  .section-heading h2,
  h2 { font-size: clamp(2.55rem, 12vw, 4rem); }
  .three-path-grid,
  .service-list,
  .plain-audience-list,
  .topic-cloud,
  .project-list { grid-template-columns: 1fr; }
  .large-panel { min-height: 330px; }
  .course-card { min-height: 560px; padding: 2rem 1.4rem; }
  .course-card h3 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .site-footer { grid-template-columns: 1fr; padding-inline: 18px; }
  .course-hero { min-height: auto; padding-top: 96px !important; }
  .course-hero h1 { font-size: clamp(3.8rem, 16vw, 5.5rem); }
  .back-link { margin-bottom: 3rem; }
  .course-price-panel { flex-direction: column; border-radius: 20px; }
  .curriculum-list summary { grid-template-columns: 4rem minmax(0, 1fr) auto; padding: 1rem; }
  .week-content { padding: 0 1rem 1.3rem; }
  .learning-flow { grid-template-columns: 1fr; }
  .learning-flow::before { left: 1.35rem; }
  .registration-form { padding: 1.25rem; border-radius: 18px; }
  .homepage-inquiry-form { grid-template-columns: 1fr; }
  .homepage-inquiry-form .full-field { grid-column: 1; }
  .inquiry-panel { padding: 1rem; border-radius: 22px; }
  .inquiry-switch { grid-template-columns: 1fr; border-radius: 20px; }
  .inquiry-tab { border-radius: 16px; }
  .scholarship-dialog { padding: 1.25rem; border-radius: 22px; }
}

/* Course hero experiences — dark, animated and distinct by subject. */
body.course-page .course-header:not(.is-scrolled) {
  background: rgba(9,9,11,0.76);
  border-color: rgba(255,255,255,0.08);
  backdrop-filter: saturate(150%) blur(20px);
}
body.course-page .course-header:not(.is-scrolled) .wordmark,
body.course-page .course-header:not(.is-scrolled) .course-nav a,
body.course-page .course-header:not(.is-scrolled) .course-nav a:visited { color: #f5f5f7; }
body.course-page .course-header:not(.is-scrolled) .course-nav a:hover { color: #fff; }
.course-page main > .course-hero-experience {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(3rem, 6vw, 6.5rem);
  align-items: center;
  min-height: 100svh;
  padding-top: 112px !important;
  padding-bottom: 60px !important;
  color: #f5f5f7;
  background: #09090b;
  text-align: left;
}
.course-page main > .course-hero-experience > * {
  width: auto !important;
  max-width: none;
  margin: 0;
}
.course-hero-experience .back-link,
.course-hero-experience .back-link:visited {
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  color: #8ac4ff;
  text-align: left;
}
.course-hero-experience h1 {
  max-width: 8.5ch;
  margin: 0;
  color: #f5f5f7;
  font-size: clamp(4.2rem, 6.6vw, 7rem);
  line-height: 0.9;
  text-align: left;
}
.course-hero-marketing h1 { max-width: 7.2ch; }
.course-hero-experience .hero-text {
  max-width: 32ch;
  margin: 1.5rem 0 1.6rem;
  color: #a1a1a6;
  font-size: clamp(1.15rem, 1vw + 0.9rem, 1.5rem);
  text-align: left;
}
.course-hero-experience .hero-facts { justify-content: flex-start; gap: 0.55rem; }
.course-hero-experience .hero-facts span {
  padding: 0.5rem 0.72rem;
  color: #d2d2d7;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  font-size: 0.7rem;
}
.course-hero-experience .hero-facts span::after { display: none; }
.course-hero-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  align-items: center;
  margin-top: 2rem;
}
.course-hero-price { display: flex; flex-direction: column; margin: 0; }
.course-hero-price strong {
  color: #fff;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.course-hero-price span { margin-top: 0.18rem; color: #86868b; font-size: 0.72rem; }
.course-hero-experience .course-primary-action { width: auto; min-width: 112px; margin: 0; }
.course-hero-art {
  position: relative;
  min-height: clamp(500px, calc(100svh - 190px), 630px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 34px;
  box-shadow: 0 32px 85px rgba(0,0,0,0.36);
}

/* UX/UI: a live design studio moves from wireframe to finished interface. */
.course-hero-art-ux {
  background:
    radial-gradient(circle at 72% 25%, rgba(91,92,255,0.45), transparent 38%),
    radial-gradient(circle at 20% 90%, rgba(0,113,227,0.25), transparent 38%),
    #111116;
}
.ux-studio-window {
  position: absolute;
  top: 11%;
  right: 8%;
  bottom: 11%;
  left: 8%;
  overflow: hidden;
  background: #17171c;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 22px;
  box-shadow: 0 28px 65px rgba(0,0,0,0.46);
  animation: ux-studio-float 6s ease-in-out infinite;
}
.ux-studio-bar {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  color: rgba(255,255,255,0.36);
  background: #202026;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.56rem;
}
.ux-studio-bar i { width: 6px; height: 6px; background: #5a5a63; border-radius: 50%; }
.ux-studio-bar span { margin-left: auto; }
.ux-studio-body { display: grid; grid-template-columns: 48px 1fr; height: calc(100% - 38px); }
.ux-studio-tools {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  padding-top: 18px;
  background: #0e0e12;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.ux-studio-tools i { width: 16px; height: 16px; border: 1px solid #55555f; border-radius: 4px; }
.ux-studio-tools i:nth-child(2) { border-radius: 50%; }
.ux-studio-tools i:nth-child(3) { width: 18px; height: 2px; background: #6663ff; border: 0; }
.ux-studio-canvas { position: relative; overflow: hidden; }
.ux-canvas-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 24px 24px;
}
.ux-phone-frame {
  position: absolute;
  top: 50%;
  left: 45%;
  width: 150px;
  height: 292px;
  padding: 9px;
  overflow: hidden;
  background: #09090b;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 31px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.48);
  transform: translate(-50%, -50%);
}
.ux-phone-wire,
.ux-phone-final { position: absolute; inset: 9px; overflow: hidden; border-radius: 23px; }
.ux-phone-wire {
  background:
    linear-gradient(#3a3a42 0 0) 16px 20px / 50px 9px no-repeat,
    linear-gradient(#2d2d34 0 0) 16px 40px / 92px 34px no-repeat,
    linear-gradient(#35353d 0 0) 16px 88px / 104px 92px no-repeat,
    linear-gradient(#2b2b32 0 0) 16px 194px / 48px 48px no-repeat,
    linear-gradient(#2b2b32 0 0) 76px 194px / 44px 48px no-repeat,
    #1c1c21;
}
.ux-phone-final {
  background:
    radial-gradient(circle at 72% 16%, rgba(255,255,255,0.45), transparent 22%),
    linear-gradient(155deg, #7472ff 0 42%, #1b89ff 42% 65%, #e8f4ff 65%);
  clip-path: inset(0 100% 0 0 round 23px);
  animation: ux-interface-reveal 5.4s cubic-bezier(.2,.8,.2,1) infinite;
}
.ux-phone-final::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 18px;
  width: 54px;
  height: 54px;
  background: rgba(255,255,255,0.88);
  border-radius: 18px;
  box-shadow: 0 79px 0 rgba(255,255,255,0.34), 62px 79px 0 rgba(255,255,255,0.52);
}
.ux-phone-final::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  height: 38px;
  background: #111113;
  border-radius: 14px;
}
.ux-prototype-link {
  position: absolute;
  top: 42%;
  left: calc(45% + 74px);
  width: 108px;
  height: 2px;
  background: linear-gradient(90deg, #7472ff, rgba(116,114,255,0.12));
  transform: scaleX(0);
  transform-origin: left center;
  animation: ux-prototype-link 5.4s ease-in-out infinite;
}
.ux-prototype-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 12px;
  height: 12px;
  background: #7472ff;
  border: 3px solid #252536;
  border-radius: 50%;
  transform: translateY(-50%);
}
.ux-design-cursor {
  position: absolute;
  top: 70%;
  left: 72%;
  width: 17px;
  height: 22px;
  background: #fff;
  clip-path: polygon(0 0, 100% 68%, 59% 72%, 42% 100%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  animation: ux-cursor-move 5.4s cubic-bezier(.2,.8,.2,1) infinite;
}
.ux-studio-chip {
  position: absolute;
  right: 4%;
  bottom: 5%;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 0.85rem;
  color: #d9d9ff;
  background: rgba(29,29,36,0.84);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  font-size: 0.68rem;
}
.ux-studio-chip span { width: 7px; height: 7px; background: #7472ff; border-radius: 50%; box-shadow: 0 0 12px #7472ff; }
@keyframes ux-studio-float { 0%, 100% { transform: translateY(4px) rotate(-0.7deg); } 50% { transform: translateY(-4px) rotate(0.5deg); } }
@keyframes ux-interface-reveal { 0%, 18%, 100% { clip-path: inset(0 100% 0 0 round 23px); } 48%, 78% { clip-path: inset(0 0 0 0 round 23px); } }
@keyframes ux-prototype-link { 0%, 30%, 100% { opacity: 0; transform: scaleX(0); } 52%, 78% { opacity: 1; transform: scaleX(1); } }
@keyframes ux-cursor-move { 0%, 12%, 100% { opacity: 0; transform: translate(30px, 34px); } 32% { opacity: 1; transform: translate(-20px, -74px); } 58%, 76% { opacity: 1; transform: translate(-82px, -128px); } 90% { opacity: 0; transform: translate(-92px, -138px); } }

/* Digital Marketing: AI routes one campaign signal across connected channels. */
.course-hero-art-marketing {
  background:
    radial-gradient(circle at 50% 50%, rgba(92,74,255,0.32), transparent 30%),
    radial-gradient(circle at 20% 90%, rgba(0,199,151,0.22), transparent 36%),
    #101015;
}
.marketing-signal-system { position: absolute; inset: 7% 5% 12%; }
.marketing-orbit,
.marketing-ai-core,
.marketing-channel,
.marketing-signal { position: absolute; top: 50%; left: 50%; }
.marketing-orbit {
  border: 1px dashed rgba(166,160,255,0.23);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.marketing-orbit-one { width: 240px; height: 240px; animation: marketing-orbit-spin 14s linear infinite; }
.marketing-orbit-two { width: 400px; height: 400px; border-color: rgba(94,230,174,0.16); animation: marketing-orbit-spin 20s linear infinite reverse; }
.marketing-ai-core {
  z-index: 4;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  color: #fff;
  background: linear-gradient(145deg, #756fff, #3942cc);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 36px;
  box-shadow: 0 0 70px rgba(102,92,255,0.46);
  transform: translate(-50%, -50%) rotate(45deg);
  animation: marketing-core-pulse 4s ease-in-out infinite;
}
.marketing-ai-core strong { font-size: 1.55rem; transform: rotate(-45deg); }
.marketing-ai-core i {
  position: absolute;
  right: 19px;
  bottom: 19px;
  width: 8px;
  height: 8px;
  background: #5ee6ae;
  border-radius: 50%;
  box-shadow: 0 0 14px #5ee6ae;
}
.marketing-channel {
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 70px;
  min-height: 42px;
  padding: 0.55rem 0.75rem;
  color: #f5f5f7;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  font-size: 0.7rem;
  font-weight: 600;
  animation: marketing-channel-float 4.5s ease-in-out infinite alternate;
}
.marketing-channel-seo { margin: -168px 0 0 -158px; }
.marketing-channel-social { margin: -176px 0 0 86px; animation-delay: 500ms; }
.marketing-channel-ads { margin: 106px 0 0 120px; animation-delay: 1000ms; }
.marketing-channel-data { margin: 124px 0 0 -182px; animation-delay: 1500ms; }
.marketing-signal {
  z-index: 5;
  width: 9px;
  height: 9px;
  background: #5ee6ae;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(94,230,174,0.88);
  transform-origin: 0 0;
}
.marketing-signal-one { --signal-radius: 120px; animation: marketing-signal-orbit 4.2s linear infinite; }
.marketing-signal-two { --signal-radius: 198px; animation: marketing-signal-orbit 6.2s linear infinite reverse; }
.marketing-signal-three { --signal-radius: 170px; animation: marketing-signal-orbit 5.2s linear infinite 1.2s; }
.marketing-system-status {
  position: absolute;
  right: 5%;
  bottom: 5%;
  display: flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0.65rem 0.85rem;
  color: #d8fff0;
  background: rgba(20,34,29,0.78);
  border: 1px solid rgba(94,230,174,0.2);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  font-size: 0.68rem;
}
.marketing-system-status span { width: 7px; height: 7px; background: #5ee6ae; border-radius: 50%; box-shadow: 0 0 12px #5ee6ae; animation: marketing-status-blink 1.8s ease-in-out infinite; }
@keyframes marketing-orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes marketing-core-pulse { 0%, 100% { box-shadow: 0 0 45px rgba(102,92,255,0.34); } 50% { box-shadow: 0 0 88px rgba(102,92,255,0.64); } }
@keyframes marketing-channel-float { from { transform: translate(-50%, -50%) translateY(5px); } to { transform: translate(-50%, -50%) translateY(-7px); } }
@keyframes marketing-signal-orbit { from { transform: rotate(0deg) translateX(var(--signal-radius)); } to { transform: rotate(360deg) translateX(var(--signal-radius)); } }
@keyframes marketing-status-blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* Registration: balanced pricing and form, without status or learning rows. */
.course-page main > .registration-section {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  overflow: hidden;
  background: #f5f5f7;
}
.course-page main > .registration-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -180px;
  left: -140px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0,113,227,0.13), rgba(0,113,227,0) 70%);
  border-radius: 50%;
  animation: registration-glow 8s ease-in-out infinite alternate;
}
.course-page .registration-intro { max-width: 560px; }
.course-page .registration-price {
  color: var(--ink);
  font-size: clamp(3.6rem, 5.8vw, 6rem);
  line-height: 0.92;
}
.course-page .registration-installment { margin: 1rem 0 2.4rem; color: var(--muted); font-size: 1.15rem; }
.course-page .registration-intro h2 { max-width: 11ch; margin-top: 0; font-size: clamp(2.3rem, 3.4vw, 3.9rem); line-height: 0.98; }
.course-page .registration-intro > p:last-child { max-width: 38ch; color: var(--muted); font-size: 1.02rem; }
.course-page .registration-section .registration-form {
  width: min(100%, 500px) !important;
  justify-self: end;
  gap: 1.05rem;
  padding: clamp(2rem, 3.2vw, 2.8rem);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.08);
  transition: box-shadow 260ms ease, transform 320ms cubic-bezier(.2,.8,.2,1);
}
.course-page .registration-section .registration-form:focus-within {
  box-shadow: 0 28px 80px rgba(0,113,227,0.12);
  transform: translateY(-3px);
}
.course-page .registration-form label { gap: 0.55rem; color: #343437; font-size: 0.82rem; }
.course-page .registration-form input {
  min-height: 58px;
  padding: 0.95rem 1rem;
  background: #f5f5f7;
  border: 1px solid #e3e3e8;
  border-radius: 14px;
}
.course-page .registration-form input:hover { border-color: #c7c7cc; }
.course-page .registration-form input:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,0.1); }
.course-page .registration-form .button.full-field {
  width: 100%;
  min-height: 52px;
  justify-self: stretch;
  margin-top: 0.2rem;
}
@keyframes registration-glow { from { transform: translate(0, 0) scale(0.9); } to { transform: translate(70px, 35px) scale(1.08); } }

@media (max-width: 980px) {
  .course-page main > .course-hero-experience { grid-template-columns: 1fr; min-height: auto; padding-top: 120px !important; padding-bottom: 80px !important; }
  .course-hero-experience .course-hero-main { max-width: 700px; }
  .course-hero-art { min-height: 560px; }
  .course-page main > .registration-section { grid-template-columns: 1fr; }
  .course-page .registration-section .registration-form { justify-self: start; width: min(100%, 620px) !important; }
}
@media (max-width: 680px) {
  .course-page main > .course-hero-experience { padding-top: 104px !important; padding-bottom: 58px !important; }
  .course-hero-experience h1 { font-size: clamp(3.65rem, 16vw, 5.2rem); }
  .course-hero-experience .back-link { margin-bottom: 2.5rem; }
  .course-hero-art { min-height: 450px; border-radius: 26px; }
  .ux-studio-window { top: 9%; right: 4%; bottom: 11%; left: 4%; }
  .ux-phone-frame { left: 52%; transform: translate(-50%, -50%) scale(0.84); }
  .ux-prototype-link { left: calc(52% + 56px); width: 64px; }
  .marketing-signal-system { transform: scale(0.76); }
  .course-page main > .registration-section { gap: 2.5rem; }
  .course-page .registration-price { font-size: clamp(3.35rem, 14vw, 4.8rem); }
  .course-page .registration-section .registration-form { padding: 1.35rem; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ux-studio-window,
  .ux-phone-final,
  .ux-prototype-link,
  .ux-design-cursor,
  .marketing-orbit,
  .marketing-ai-core,
  .marketing-channel,
  .marketing-signal,
  .marketing-system-status span,
  .course-page main > .registration-section::before { animation: none !important; }
  .ux-phone-final { clip-path: inset(0 0 0 0 round 23px); }
  .ux-prototype-link { opacity: 1; transform: scaleX(1); }
  .ux-design-cursor { opacity: 1; transform: translate(-82px, -128px); }
}

/* Clear, content-first digital-team subscription. */
.flexible-team-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.flexible-team-card-grid article {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  padding: clamp(1.7rem, 3vw, 2.6rem);
  border: 1px solid #d9d9de;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.045);
  transition: border-color 220ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.flexible-team-card-grid article:hover {
  border-color: #a9cfff;
  box-shadow: 0 26px 70px rgba(0, 80, 180, 0.1);
  transform: translateY(-4px);
}

.flexible-team-card-grid article > span {
  color: #0071e3;
  font-size: 0.76rem;
  font-weight: 750;
}

.flexible-team-card-grid h3 {
  max-width: 13ch;
  margin: auto 0 0;
  color: #1d1d1f;
  font-size: clamp(2rem, 2.5vw, 2.8rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.flexible-team-card-grid p {
  max-width: 30rem;
  margin: 1rem 0 0;
  color: #6e6e73;
  font-size: 0.98rem;
  line-height: 1.52;
}

.flexible-team-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.flexible-team-footer .flexible-team-points { margin: 0; }
.flexible-team-footer .button { flex: 0 0 auto; width: auto; margin: 0; }

/* Keep every desktop creator message inside one stable editorial frame. */
@media (min-width: 1025px) {
  .creator-editorial-card {
    height: clamp(680px, 58vw, 810px);
    min-height: 0;
  }

  .creator-editorial-copy {
    height: 100%;
    min-height: 0;
  }

  .creator-editorial-copy h2 {
    max-width: 11.5ch;
    min-height: 3.85em;
    font-size: clamp(2.9rem, 4.15vw, 4.85rem);
    line-height: 0.96;
  }

  .creator-editorial-copy > p {
    min-height: 4.8em;
  }
}

@media (max-width: 1180px) and (min-width: 1025px) {
  .flexible-team-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .flexible-team-card-grid article { transition: none; }
}

/* 2026 editorial business additions */
@media (min-width: 1025px) {
  .flexible-team-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(3rem, 5vw, 4.5rem);
  }

  .flexible-team-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .flexible-team-heading h2 {
    max-width: 920px;
    margin: 0 auto;
    font-size: clamp(3.5rem, 5vw, 5.75rem);
    line-height: 0.98;
    letter-spacing: -0.06em;
  }

  .flexible-team-heading > p {
    max-width: 700px;
    margin: 1.5rem auto 0;
    color: #6e6e73;
    font-size: 1.08rem;
    line-height: 1.55;
  }

  .flexible-team-heading .flexible-team-points {
    justify-content: center;
  }

  .flexible-team-heading > .button {
    width: auto;
    margin-top: 2rem;
  }

  .flexible-team-section .team-console {
    width: min(100%, 1080px);
    min-height: 390px;
  }

  .flexible-team-section .team-service-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .creator-services-section {
    display: block;
    padding-top: clamp(3.5rem, 6vw, 6rem);
    padding-bottom: clamp(3.5rem, 6vw, 6rem);
    color: #fff;
    background: #000;
  }
}

.creator-editorial-card {
  position: relative;
  width: min(100%, 1400px) !important;
  min-height: clamp(650px, 72vw, 810px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 38px;
  background: #0b1f3d;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.38);
  isolation: isolate;
}

.creator-editorial-card > img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.creator-editorial-card:hover > img {
  transform: scale(1.018);
}

.creator-editorial-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(4, 12, 27, 0.94) 0%, rgba(4, 12, 27, 0.73) 39%, rgba(4, 12, 27, 0.15) 68%, rgba(4, 12, 27, 0.05) 100%);
}

.creator-editorial-shade::after {
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(0deg, rgba(4, 10, 22, 0.8), transparent);
  content: "";
}

.creator-editorial-copy {
  display: flex;
  min-height: inherit;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: min(52%, 660px);
  padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5.5rem) 9.5rem;
}

.creator-editorial-label {
  margin-bottom: 1.4rem;
  color: #9ecbff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.creator-editorial-copy h2 {
  max-width: 10ch;
  margin: 0;
  color: #fff;
  font-size: clamp(3.5rem, 5.6vw, 6.25rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
  text-align: left;
}

.creator-editorial-copy > p {
  max-width: 560px;
  min-height: 4.9em;
  margin: 1.6rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.55;
}

.creator-editorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.creator-editorial-actions .button {
  width: auto;
  min-height: 48px;
  margin: 0;
}

.button-ghost-light,
.button-ghost-light:visited {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: rgba(4, 12, 27, 0.28);
  backdrop-filter: blur(12px);
}

.button-ghost-light:hover {
  border-color: #fff;
  color: #111;
  background: #fff;
}

.creator-editorial-tabs {
  position: absolute;
  right: 1.15rem;
  bottom: 1.15rem;
  left: 1.15rem;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(6, minmax(max-content, 1fr));
  gap: 0.35rem;
  padding: 0.42rem;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(4, 12, 27, 0.68);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(20px) saturate(140%);
  scrollbar-width: none;
}

.creator-editorial-tabs::-webkit-scrollbar { display: none; }

.creator-editorial-tabs button {
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
}

.creator-editorial-tabs button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.creator-editorial-tabs button[aria-selected="true"] {
  color: #0b1f3d;
  background: #f5f9ff;
}

.creator-editorial-tabs button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.creator-editorial-copy.is-changing h2,
.creator-editorial-copy.is-changing > p {
  animation: creator-copy-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes creator-copy-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1220px) and (min-width: 1025px) {
  .creator-editorial-card { min-height: 700px; }
  .creator-editorial-copy { width: 57%; padding-left: 3.5rem; }
  .creator-editorial-copy h2 { font-size: clamp(3.6rem, 5.5vw, 5.2rem); }
  .creator-editorial-tabs { grid-template-columns: repeat(6, max-content); }
}

@media (prefers-reduced-motion: reduce) {
  .creator-editorial-card > img,
  .creator-editorial-copy.is-changing h2,
  .creator-editorial-copy.is-changing > p {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Final desktop layout corrections after rendered-viewport review. */
@media (min-width: 1025px) {
  .flexible-team-section {
    gap: 2.75rem;
    padding-top: clamp(4.5rem, 6vw, 6.5rem);
    padding-bottom: clamp(4.5rem, 6vw, 6.5rem);
  }

  .flexible-team-heading h2 {
    max-width: 1080px;
    font-size: clamp(3.15rem, 4.05vw, 4.35rem);
    line-height: 0.98;
  }

  .flexible-team-heading > p { margin-top: 1.15rem; }

  .flexible-team-card-grid article {
    min-height: 238px;
    padding: 1.75rem;
  }

  .flexible-team-card-grid h3 {
    max-width: none;
    min-height: 2.05em;
    margin: 2.25rem 0 0;
    font-size: clamp(1.7rem, 1.9vw, 2.05rem);
    line-height: 1.02;
  }

  .flexible-team-card-grid p {
    min-height: 4.6em;
    margin-top: 0.85rem;
    font-size: 0.95rem;
  }

  .flexible-team-footer {
    width: min(100%, 1100px);
    margin-top: -0.35rem;
  }

  .creator-editorial-card {
    height: clamp(680px, 48vw, 760px);
    min-height: 0;
  }

  .creator-editorial-copy {
    display: grid;
    grid-template-rows: auto minmax(3.05em, auto) minmax(4.8em, auto) auto;
    align-content: center;
    gap: 0;
    width: min(52%, 650px);
    height: 100%;
    min-height: 0;
    padding: 4rem clamp(2.8rem, 4.5vw, 5rem) 7.75rem;
    box-sizing: border-box;
  }

  .creator-editorial-label { margin-bottom: 1.1rem; }

  .creator-editorial-copy h2 {
    width: 100%;
    max-width: 560px;
    min-height: 0;
    margin: 0;
    font-size: clamp(2.8rem, 3.35vw, 3.6rem);
    line-height: 0.98;
  }

  .creator-editorial-copy > p {
    max-width: 520px;
    min-height: 0;
    margin: 1.15rem 0 0;
    font-size: 0.98rem;
  }

  .creator-editorial-actions { margin-top: 1.45rem; }
}

@media (max-width: 1220px) and (min-width: 1025px) {
  .creator-editorial-copy {
    width: 58%;
    padding-right: 2.75rem;
    padding-left: 2.75rem;
  }

  .creator-editorial-copy h2 {
    font-size: clamp(2.55rem, 3.8vw, 3.15rem);
  }
}