/* ============================================================
   Antano & Harini — Site styles (vibrant gradient direction)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Gotham'; font-weight: 300; font-style: normal; src: url('../fonts/gothamlight.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Gotham'; font-weight: 400; font-style: normal; src: url('../fonts/gothambook.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Gotham'; font-weight: 400; font-style: italic; src: url('../fonts/gothambookitalic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Gotham'; font-weight: 500; font-style: normal; src: url('../fonts/gothammedium.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Gotham'; font-weight: 700; font-style: normal; src: url('../fonts/gothambold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Gotham'; font-weight: 900; font-style: normal; src: url('../fonts/gothamblack.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Gotham'; font-weight: 950; font-style: normal; src: url('../fonts/gothamultra.woff2') format('woff2'); font-display: swap; }

@import url('https://fonts.googleapis.com/css2?family=Allura&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Brand palette */
  --ah-blue:           #00AEEF;
  --ah-blue-dark:      #0076A3;
  --legacy-magenta:    #EC008C;
  --legacy-magenta-dk: #A70063;
  --orange:            #F26522;
  --orange-dark:       #B44B14;
  --chrome:            #FFC20E;
  --chrome-dark:       #BC9109;
  --ctd-green:         #39B54A;
  --big-purple:        #9A258F;
  --big-purple-dark:   #62005A;
  --sirt-teal:         #00AAAD;
  --sirt-teal-dark:    #006D6F;

  /* Surfaces */
  --bg:                #07080C;
  --bg-soft:           #0E1014;
  --bg-card:           #12141A;
  --bg-panel:          #181B22;
  --white:             #FFFFFF;
  --ink:               #F4F5F7;
  --ink-muted:         rgba(244,245,247,.72);
  --ink-faint:         rgba(244,245,247,.46);
  --ink-dim:           rgba(244,245,247,.28);

  --line:              rgba(255,255,255,.10);
  --line-strong:       rgba(255,255,255,.22);

  /* Fonts */
  --font-display:      'Gotham', system-ui, sans-serif;
  --font-text:         'Gotham', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', ui-monospace, monospace;
  --font-script:       'Allura', cursive;

  /* Type scale */
  --fs-hero:    clamp(56px, 9vw, 144px);
  --fs-display: clamp(48px, 6.5vw, 104px);
  --fs-h1:      clamp(40px, 4.6vw, 72px);
  --fs-h2:      clamp(32px, 3.4vw, 52px);
  --fs-h3:      clamp(22px, 2vw, 30px);
  --fs-h4:      20px;
  --fs-body-lg: 19px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  /* Space */
  --container:  1320px;
  --gutter:     clamp(20px, 4vw, 56px);

  /* Brand gradient — banner-inspired */
  --brand-gradient: linear-gradient(
    100deg,
    #00AEEF 0%,
    #5B6FE8 18%,
    #9A258F 36%,
    #EC008C 54%,
    #F26522 74%,
    #FFC20E 92%,
    #00AAAD 100%
  );

  --brand-gradient-loop: linear-gradient(
    100deg,
    #00AEEF, #5B6FE8, #9A258F, #EC008C, #F26522, #FFC20E, #00AAAD,
    #00AEEF, #5B6FE8, #9A258F, #EC008C, #F26522, #FFC20E, #00AAAD
  );
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { position: relative; }

/* ---------- Type ---------- */
.t-eyebrow {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.t-eyebrow.is-magenta { color: var(--legacy-magenta); }
.t-eyebrow.is-blue    { color: var(--ah-blue); }
.t-eyebrow.is-teal    { color: var(--sirt-teal); }
.t-eyebrow.is-purple  { color: #C56CD6; }
.t-eyebrow.is-orange  { color: var(--orange); }
.t-eyebrow.is-chrome  { color: var(--chrome); }

.t-script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
  font-feature-settings: "liga", "dlig";
}

.t-mono {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum", "ss01";
}

.t-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.t-gradient-anim {
  background: var(--brand-gradient-loop);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: gradient-shift 12s linear infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; }
p { margin: 0; }

/* Heading classes */
.t-hero    { font-size: var(--fs-hero);    line-height: .92; letter-spacing: -0.035em; font-weight: 900; text-wrap: balance; }
.t-display { font-size: var(--fs-display); line-height: .98; letter-spacing: -0.03em;  font-weight: 900; text-wrap: balance; }
.t-h1      { font-size: var(--fs-h1);      line-height: 1.02; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
.t-h2      { font-size: var(--fs-h2);      line-height: 1.08; letter-spacing: -0.022em; font-weight: 700; text-wrap: balance; }
.t-h3      { font-size: var(--fs-h3);      line-height: 1.18; letter-spacing: -0.015em; font-weight: 700; }
.t-h4      { font-size: var(--fs-h4);      line-height: 1.3;  letter-spacing: -0.01em;  font-weight: 700; }
.t-body-lg { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--ink-muted); }
.t-body    { font-size: var(--fs-body);    line-height: 1.6;  color: var(--ink-muted); }
.t-small   { font-size: var(--fs-small);   line-height: 1.5;  color: var(--ink-muted); }

/* ---------- Animated gradient backgrounds ---------- */
.bg-rainbow {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 15% 30%, #5B2FB5 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 85% 25%, #EC008C 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 10% 90%, #00AEEF 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 90% 95%, #F26522 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%, #00AAAD 0%, transparent 70%),
    #0E0625;
}

.bg-rainbow-anim::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at var(--p1, 20%) 30%, #5B2FB5 0%, transparent 55%),
    radial-gradient(ellipse 65% 50% at var(--p2, 80%) 20%, #EC008C 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at var(--p3, 15%) 85%, #00AEEF 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at var(--p4, 88%) 90%, #F26522 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at var(--p5, 55%) 55%, #00AAAD 0%, transparent 70%);
  filter: saturate(1.05);
  animation: orb-drift 28s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes orb-drift {
  0%   {
    background-position:
      0% 0%, 100% 0%, 0% 100%, 100% 100%, 50% 50%;
    transform: scale(1);
  }
  50%  {
    transform: scale(1.08);
  }
  100% {
    background-position:
      20% 30%, 80% 20%, 30% 70%, 70% 80%, 60% 40%;
    transform: scale(1.02);
  }
}

/* Grain overlay (subtle) — disabled in standalone-friendly builds */
.bg-rainbow::after {
  content: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 0;
  transition: transform .2s var(--ease-out, cubic-bezier(.2,.7,.2,1)),
              box-shadow .2s,
              background .2s,
              color .2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(4px); }

.btn-primary {
  background: var(--brand-gradient);
  background-size: 200% 100%;
  color: #fff;
  box-shadow: 0 10px 30px rgba(236,0,140,.28), 0 4px 12px rgba(0,174,239,.18);
  animation: btn-shimmer 8s linear infinite;
}
.btn-primary:hover { box-shadow: 0 14px 40px rgba(236,0,140,.42), 0 6px 16px rgba(0,174,239,.24); }
@keyframes btn-shimmer { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid var(--line-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--ink-muted); }

.btn-outline-gradient {
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--brand-gradient) border-box;
  border: 1.5px solid transparent;
  color: #fff;
}
.btn-outline-gradient:hover { background:
    linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
    var(--brand-gradient) border-box; }

/* ---------- Top Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7,8,12,.62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #fff;
}
.nav-brand .amp { color: var(--legacy-magenta); font-weight: 400; padding: 0 2px; }
/* Every page renders the wordmark as an <img>, not the text form above.
   Cap its height so the 1200x300 PNG fits the 72px nav instead of overflowing.
   (Footer brand <img> carries an inline height that intentionally overrides this.) */
.nav-brand img { height: 32px; width: auto; display: block; }
.nav-links {
  display: flex; align-items: center; gap: 36px;
}
.nav-links a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  position: relative;
  padding: 8px 0;
  transition: color .2s;
}
.nav-links a:hover { color: #fff; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--brand-gradient);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  padding: 10px 22px;
  font-size: 12px;
  letter-spacing: 0.16em;
}
/* ---------- Hamburger button ---------- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 6px;
  margin-left: 8px;
}

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,0.9);
  border-radius: 2px;
}

/* ---------- Mobile menu drawer ---------- */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100vh; min-height: 100%;
  background: rgba(6,4,12,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9999;
  flex-direction: column;
  justify-content: flex-start;
  padding: 96px var(--gutter) 48px;
  gap: 0;
  overflow-y: auto;
}
.nav-mobile-menu.is-open { display: flex; }
.nav-mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 42px);
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  letter-spacing: -0.025em;
  transition: color .2s;
}
.nav-mobile-menu a:hover { color: #fff; }
.nav-mobile-menu a.nav-mobile-apply {
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  padding: 14px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.nav-mobile-close {
  position: absolute;
  top: 20px;
  right: calc(var(--gutter) + 4px);
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  transition: color .2s;
}
.nav-mobile-close:hover { color: #fff; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero .container { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 100px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--brand-gradient);
  box-shadow: 0 0 12px rgba(236,0,140,.6);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} }

.hero-title {
  margin-top: 32px;
  color: #fff;
  font-size: var(--fs-hero);
  line-height: .92;
  letter-spacing: -0.035em;
  font-weight: 900;
  text-wrap: balance;
}
.hero-title .script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.25em;
  font-style: normal;
  letter-spacing: 0;
  background: linear-gradient(90deg, #FFD27A, #FFC20E, #F26522, #EC008C);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  padding: 0 0.04em;
  position: relative;
  display: inline-block;
  transform: translateY(0.06em);
}

.hero-sub {
  margin-top: 28px;
  max-width: 640px;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: rgba(255,255,255,.86);
}

.hero-cta-row {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px;
}

/* Hero side photo */
.hero-photo-frame {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 42%;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to left, #000 60%, transparent 100%);
          mask-image: linear-gradient(to left, #000 60%, transparent 100%);
  opacity: 0.55;
  mix-blend-mode: screen;
}
.hero-photo-frame image-slot {
  width: 100%; height: 100%;
}

@media (max-width: 900px) {
  .hero-photo-frame { display: none; }
}

/* Trust marquee under hero */
.trust-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  background: rgba(7,8,12,.88);
  position: relative;
  z-index: 3;
}
.trust-bar-inner {
  display: flex; align-items: center; gap: 48px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  overflow: hidden;
}
.trust-bar-inner > * { white-space: nowrap; }
.trust-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--ink-dim); }

/* ---------- Section base ---------- */
.section {
  padding: clamp(80px, 10vw, 160px) 0;
  position: relative;
}
.section-eyebrow-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.section-eyebrow-row .bar {
  width: 32px; height: 1px; background: currentColor; opacity: .35;
}

/* Stats bar (mono-led) */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-block: 1px solid var(--line);
  background: var(--bg-soft);
}
.stat-band .stat {
  padding: 36px var(--gutter);
  border-right: 1px solid var(--line);
}
.stat-band .stat:last-child { border-right: 0; }
.stat-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.stat-num.is-magenta { background: linear-gradient(90deg, #FFB2D9, var(--legacy-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-num.is-blue    { background: linear-gradient(90deg, #7EE2FF, var(--ah-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-num.is-orange  { background: linear-gradient(90deg, #FFCB9E, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-num.is-teal    { background: linear-gradient(90deg, #66E3E5, var(--sirt-teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-num.is-chrome  { background: linear-gradient(90deg, #FFE38A, var(--chrome)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-num.is-purple  { background: linear-gradient(90deg, #D6A6E3, var(--big-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.stat-label {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
  max-width: 22ch;
}

@media (max-width: 900px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat-band .stat:nth-child(2) { border-right: 0; }
  .stat-band .stat:nth-child(1),
  .stat-band .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Core problem / two col ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 880px) {
  .two-col { grid-template-columns: 1fr; }
}

.pull-quote {
  margin-top: 32px;
  padding: 24px 28px;
  border-left: 3px solid;
  border-image: var(--brand-gradient) 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-muted);
  background: rgba(255,255,255,.02);
}

/* ---------- Pillars (01-04) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 0;
}
.pillar {
  background: var(--bg);
  padding: clamp(40px, 5vw, 72px);
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow: hidden;
  isolation: isolate;
}
.pillar > div:first-of-type { margin-top: auto; }
.pillar::before {
  content: "";
  position: absolute; inset: auto -20% -40% auto;
  width: 70%; height: 70%;
  border-radius: 999px;
  filter: blur(80px);
  opacity: 0.35;
  z-index: -1;
  transition: opacity .4s var(--ease-out, ease);
}
.pillar:nth-child(1)::before { background: var(--ah-blue); }
.pillar:nth-child(2)::before { background: var(--legacy-magenta); }
.pillar:nth-child(3)::before { background: var(--orange); }
.pillar:nth-child(4)::before { background: var(--big-purple); }
.pillar:hover::before { opacity: 0.6; }

.pillar-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(80px, 9vw, 140px);
  line-height: .85;
  letter-spacing: -0.04em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 0.18;
  position: absolute;
  top: 24px; right: 32px;
}

.pillar h3 { color: #fff; margin-bottom: 18px; }
.pillar p { color: var(--ink-muted); max-width: 36ch; }

@media (max-width: 800px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- Programs cards ---------- */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.program-card {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease-out, ease), border-color .3s;
}
.program-card::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--card-grad, linear-gradient(180deg, transparent, transparent));
  opacity: 0;
  transition: opacity .4s var(--ease-out, ease);
  z-index: -1;
}
.program-card:hover { transform: translateY(-6px); border-color: transparent; }
.program-card:hover::before { opacity: 1; }
.program-card:hover .program-tag { color: #fff; }
.program-card:hover .program-price { color: #fff; }
.program-card:hover .program-body { color: rgba(255,255,255,.86); }

.program-card.is-orange   { --card-grad: linear-gradient(160deg, #F26522 0%, #B44B14 100%); --card-tag: var(--orange); }
.program-card.is-magenta  { --card-grad: linear-gradient(160deg, #EC008C 0%, #62005A 100%); --card-tag: var(--legacy-magenta); }
.program-card.is-teal     { --card-grad: linear-gradient(160deg, #00AAAD 0%, #1B3A8C 100%); --card-tag: var(--sirt-teal); }
.program-card.is-purple   { --card-grad: linear-gradient(160deg, #9A258F 0%, #2B0B5F 100%); --card-tag: #C56CD6; }

.program-tag {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--card-tag, var(--ink-muted));
  margin-bottom: 24px;
  transition: color .3s;
}
.program-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 14px;
}
.program-name .bang { color: var(--chrome); font-style: normal; }
.program-card.is-magenta .program-name .bang,
.program-card.is-purple .program-name .bang,
.program-card.is-orange .program-name .bang,
.program-card.is-teal .program-name .bang { color: #fff; }
.program-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
  transition: color .3s;
  margin-bottom: 24px;
  flex: 1;
}
.program-price {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--card-tag, #fff);
  margin-bottom: 20px;
  transition: color .3s;
}
.program-link {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap .2s;
}
.program-link:hover { gap: 14px; }

@media (max-width: 1100px) { .programs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .programs-grid { grid-template-columns: 1fr; } }

/* ---------- Arena (live crucible) ---------- */
.arena {
  position: relative;
  padding: clamp(80px, 10vw, 160px) 0;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background: #08050F;
}
.arena-photo {
  position: absolute; inset: 0;
  z-index: 0;
  opacity: 0.4;
}
.arena-photo image-slot { width: 100%; height: 100%; }
.arena::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0%, rgba(8,5,15,.85) 80%),
    linear-gradient(180deg, rgba(8,5,15,.4) 0%, rgba(8,5,15,.9) 100%);
  z-index: 1;
}
.arena .container { position: relative; z-index: 2; }
.arena-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 10vw, 140px);
  line-height: .85;
  letter-spacing: -0.04em;
  font-weight: 900;
  color: #fff;
}
.arena-title .accent {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.arena-sub {
  max-width: 580px;
  margin: 32px auto 0;
  color: rgba(255,255,255,.78);
  font-size: 19px;
  line-height: 1.55;
}

/* ---------- Disruptive legend ---------- */
.legend-list {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.legend-list li { list-style: none; color: var(--ink-faint); transition: color .3s; }
.legend-list { padding: 0; margin: 0; }
.legend-list li:hover { color: var(--ink-muted); }
.legend-list li.is-you {
  font-weight: 700;
  font-style: normal;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- B!G section ---------- */
.big-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: clamp(80px, 12vw, 200px) 0;
}
.big-section .container { position: relative; z-index: 2; }
.big-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 9vw, 160px);
  line-height: .9;
  letter-spacing: -0.04em;
  color: #fff;
  text-wrap: balance;
}
.big-display .bang { color: var(--chrome); }
.big-display .script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0;
  display: inline-block;
  transform: translateY(0.08em);
  background: linear-gradient(90deg, #FFD27A, #FFC20E);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- Life-stories grid ---------- */
.story-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 48px;
}
.story-filter {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all .2s;
}
.story-filter:hover { color: #fff; border-color: var(--ink-muted); }
.story-filter.is-active {
  background: var(--brand-gradient);
  color: #fff;
  border-color: transparent;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.story-card {
  padding: 28px 24px;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  min-height: 240px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--ease-out, ease);
}
.story-card::before {
  content: "";
  position: absolute; right: -30%; bottom: -30%;
  width: 80%; height: 80%; border-radius: 999px;
  filter: blur(50px);
  opacity: 0.55;
  z-index: -1;
}
.story-card:nth-child(1)::before { background: var(--ah-blue); }
.story-card:nth-child(2)::before { background: var(--chrome); }
.story-card:nth-child(3)::before { background: var(--sirt-teal); }
.story-card:nth-child(4)::before { background: var(--legacy-magenta); }
.story-card:nth-child(5)::before { background: var(--orange); }
.story-card:hover { transform: translateY(-4px); }
.story-card h4 { color: #fff; }
.story-card p { color: var(--ink-muted); font-size: 14px; margin-top: 10px; flex: 1; }
.story-card .watch {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex; gap: 6px; align-items: center;
  color: #fff;
}
.story-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}

@media (max-width: 1100px) { .story-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .story-grid { grid-template-columns: 1fr; } }

/* ---------- Mini stat cards (100+) ---------- */
.mini-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.mini-stat {
  padding: 22px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  text-align: left;
}
.mini-stat .n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.mini-stat .l {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.4;
  margin-bottom: 14px;
}
.mini-stat .dl {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chrome);
  display: inline-flex; gap: 6px; align-items: center;
}
@media (max-width: 1100px) { .mini-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .mini-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Big stat callout strip (compression) ---------- */
.compression {
  background:
    linear-gradient(180deg, rgba(7,8,12,.4), rgba(7,8,12,.92)),
    var(--brand-gradient);
  background-size: 100% 100%, 200% 200%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.compression::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--brand-gradient-loop);
  background-size: 300% 100%;
  mix-blend-mode: color;
  opacity: 0.4;
  animation: gradient-shift 22s linear infinite;
  z-index: -1;
}
.compression-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 56px;
}
.compression-stats .num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(60px, 7vw, 120px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
}
.compression-stats .lab {
  font-size: 14px;
  color: rgba(255,255,255,.78);
  margin-top: 12px;
  letter-spacing: 0.01em;
}
@media (max-width: 800px) { .compression-stats { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Incubated businesses (8) ---------- */
.incubated {
  position: relative;
  padding: 48px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(7,8,12,.6), rgba(7,8,12,.92)),
    linear-gradient(135deg, #1B0F3D 0%, #0C0820 60%);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  margin-top: 48px;
}
.incubated::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 50% at 90% 10%, var(--legacy-magenta) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 100%, var(--ah-blue) 0%, transparent 60%);
  opacity: 0.4;
  z-index: -1;
}
.incubated-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(80px, 9vw, 140px);
  line-height: .9;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #FFC20E, #EC008C, #00AEEF);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.incubated h3 { color: #fff; max-width: 14ch; margin-top: 12px; }
.incubated p { color: var(--ink-muted); max-width: 50ch; margin-top: 18px; }
.pill-row {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px;
}
.pill {
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Founders dual portrait ---------- */
.founders {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  align-items: stretch;
}
.founders-photo {
  position: relative;
  min-height: 540px;
  background: var(--bg-card);
  overflow: hidden;
}
.founders-photo image-slot { width: 100%; height: 100%; }
.founders-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 40%, var(--bg) 100%);
  pointer-events: none;
}
.founders-copy {
  padding: clamp(40px, 6vw, 96px) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 880px) { .founders { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 80px 0 40px;
  background: var(--bg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 72px;
}
.footer h5 {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
  margin: 0 0 18px;
  font-family: var(--font-text);
}
.footer-link {
  display: block;
  font-size: 15px;
  color: var(--ink);
  padding: 5px 0;
  transition: color .2s;
}
.footer-link:hover { color: var(--legacy-magenta); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.footer-notes {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.55;
  max-width: 720px;
}
.footer-notes p { color: inherit; font-size: inherit; margin: 4px 0; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* ---------- Utility ---------- */
.flex-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.text-center { text-align: center; }
.max-680 { max-width: 680px; }
.max-540 { max-width: 540px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.divider {
  height: 1px; width: 64px;
  background: var(--brand-gradient);
  margin: 24px 0;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-out, ease), transform .8s var(--ease-out, ease);
}

/* ---------- Mobile heading + button overflow fixes (<= 520px) ---------- */
@media (max-width: 520px) {
  :root {
    --fs-display: clamp(32px, 9vw, 48px);
    --fs-h1: clamp(28px, 8vw, 40px);
  }
  .arena-title { font-size: clamp(34px, 11vw, 56px); overflow-wrap: break-word; }
  .big-display  { font-size: clamp(38px, 12vw, 64px); overflow-wrap: break-word; }
  .arena-sub    { font-size: 16px; max-width: 100%; }
  .legend-list  { font-size: clamp(20px, 6vw, 28px); }
  .btn { font-size: 11px; padding: 11px 18px; letter-spacing: 0.10em; }
}
.reveal.is-in { opacity: 1; transform: none; }