/* =========================================================
   Periodização Online · Metodologia IHP — Fernando Jaeger
   ========================================================= */
:root {
  --ink-0: #00070F;
  --ink-1: #000C18;
  --ink-2: #001428;
  --ink-3: #001C34;
  --ink-4: #0B2840;
  --line: rgba(160, 205, 225, .12);
  --line-2: rgba(160, 205, 225, .22);
  --teal: #33798D;
  --teal-2: #5CB8CF;
  --teal-3: #9ADCEB;
  --amber: #FFBB00;
  --amber-2: #FFD148;
  --amber-ink: #1A1200;
  --bone: #F1EEE6;
  --bone-2: #E4E0D5;
  --text: #EAF2F6;
  --muted: #8EA4B4;
  --muted-2: #5E7586;

  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --header-h: 76px;
  --ticker-h: 34px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--ink-1);
  color: var(--text);
  font-family: var(--f-body);
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: #fff; }
em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--amber); color: var(--amber-ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 999; background: var(--amber); color: #000; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip:focus { left: 8px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.muted { color: var(--muted); }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.5; color: #D5E3EA; }
.note { font-size: .8rem; color: var(--muted-2); margin-top: .6rem; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75em;
  font-family: var(--f-display); font-stretch: 100%;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-2); margin-bottom: 1.6rem;
}
.eyebrow .num { display: inline-grid; place-items: center; min-width: 2.6em; height: 1.9em; padding-inline: .5em; border: 1px solid var(--line-2); border-radius: 99px; color: var(--text); letter-spacing: .06em; font-size: .92em; }
.eyebrow .dot, .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255,187,0,.18); flex: none; animation: pulse 2.2s infinite; }
.eyebrow--amber { color: var(--amber); }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(255,187,0,0); } }

.display, .title {
  font-family: var(--f-display);
  font-stretch: 72%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .94;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
.display { font-size: clamp(2.3rem, 5vw, 5rem); }
.title { font-size: clamp(1.9rem, 3.5vw, 3.4rem); line-height: .98; }
.display em, .title em {
  text-transform: none; font-stretch: normal;
  font-size: 1.08em; line-height: .8; letter-spacing: -.01em;
  color: var(--amber);
}
.display > span, .title > span { display: inline; }
.display > span[data-split], .title > span[data-split] { display: block; }
.accent-teal { color: var(--teal-3); }
.accent-amber { color: var(--amber); }
.line-mask { padding: .16em .04em .1em; margin: -.16em -.04em -.1em; }
.hero__l1 .line-mask { padding-top: .2em; margin-top: -.2em; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--amber); --fg: var(--amber-ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .8em;
  min-height: 58px; padding: 0 28px; border-radius: 99px;
  font-family: var(--f-display); font-stretch: 90%; font-weight: 700; font-size: .98rem;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--bg); color: var(--fg);
  transition: box-shadow .5s var(--ease);
  box-shadow: 0 10px 40px -10px rgba(255, 187, 0, .55), inset 0 -2px 0 rgba(0,0,0,.12);
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #fff; border-radius: inherit;
  transform: translateY(101%); transition: transform .55s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { box-shadow: 0 16px 60px -12px rgba(255, 187, 0, .8); }
.btn span, .btn i { position: relative; pointer-events: none; }
.btn__arrow { font-style: normal; display: inline-block; transition: transform .5s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: .8rem; white-space: nowrap; }
.offer-card .btn { font-size: .9rem; letter-spacing: .02em; }
.btn--xl { min-height: 66px; font-size: 1.05rem; }
.btn--block { width: 100%; }

.tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; font-family: var(--f-display); font-stretch: 90%; font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.tag--amber { background: var(--amber); color: var(--amber-ink); }
.tag--line { border: 1px solid var(--line-2); color: var(--teal-3); }
.microcopy { font-size: .8rem; color: var(--muted); text-align: center; margin-top: .9rem; letter-spacing: .01em; }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 1000; background: var(--ink-0); display: grid; place-items: center; }
.js .loader { display: grid; animation: loaderSafety .6s 7s forwards; }
@keyframes loaderSafety { to { opacity: 0; visibility: hidden; } }
html:not(.js) .loader { display: none; }
.loader__inner { width: min(420px, 80vw); }
.loader__mark { display: flex; gap: .02em; font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: clamp(5rem, 16vw, 9rem); line-height: .8; color: #fff; overflow: hidden; }
.loader__mark span { display: inline-block; }
.loader__mark img { width: auto; height: clamp(84px, 16vw, 128px); }
.loader__bar { height: 2px; background: var(--line); margin: 1.6rem 0 .8rem; overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--teal-2), var(--amber)); transform-origin: left; transform: scaleX(0); }
.loader__meta { display: flex; justify-content: space-between; font-family: var(--f-display); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.loader__count { font-variant-numeric: tabular-nums; color: #fff; }

/* ---------- Overlays ---------- */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{background-position:0 0} 20%{background-position:-37px 23px} 40%{background-position:29px -51px} 60%{background-position:-61px 11px} 80%{background-position:47px 38px} 100%{background-position:0 0} }
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 120; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-2), var(--amber)); transform-origin: left; transform: scaleX(0); }
.cursor { position: fixed; left: 0; top: 0; z-index: 130; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; opacity: 0; mix-blend-mode: difference; }
.cursor i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .45s var(--ease); }
.cursor.is-hover i { transform: scale(5.2); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Ticker ---------- */
.ticker { position: relative; z-index: 60; height: var(--ticker-h); background: var(--amber); color: var(--amber-ink); overflow: hidden; display: flex; align-items: center; }
.ticker__track { display: flex; gap: 22px; white-space: nowrap; animation: tick 38s linear infinite; font-family: var(--f-display); font-stretch: 85%; font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.ticker__track b { font-weight: 900; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 80; height: var(--header-h); transition: transform .6s var(--ease), background .4s; }
.header::before { content: ""; position: absolute; inset: 0; background: rgba(0, 10, 22, .62); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .4s; }
.header.is-scrolled::before { opacity: 1; }
.header.is-hidden { transform: translateY(-100%); }
.header__inner { position: relative; height: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 32px; }
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo { gap: 14px; }
.fj21 { display: block; width: auto; height: 34px; flex: none; }
.logo__txt { display: flex; flex-direction: column; line-height: 1.05; padding-left: 14px; border-left: 1px solid var(--line-2); }
.logo__txt b { font-family: var(--f-display); font-stretch: 85%; font-weight: 800; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; }
.logo__txt small { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-2); margin-top: 3px; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { position: relative; font-size: .88rem; font-weight: 500; color: #C7D6DF; transition: color .3s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: calc(100svh - var(--ticker-h)); margin-top: calc(var(--header-h) * -1); padding-top: calc(var(--header-h) + clamp(32px, 6vh, 72px)); padding-bottom: clamp(56px, 8vh, 96px); display: flex; align-items: center; overflow: clip; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 20%; transform-origin: 70% 30%; }
.hero__person { position: absolute; bottom: 0; left: 75%; height: 92%; transform: translateX(-50%); }
.hero__person img { width: auto; height: 100%; max-width: none; transform-origin: 50% 100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink-1) 0%, rgba(0,12,24,.94) 30%, rgba(0,12,24,.45) 50%, rgba(0,12,24,0) 64%),
    linear-gradient(0deg, var(--ink-1) 0%, rgba(0,12,24,0) 26%),
    radial-gradient(60% 50% at 75% 40%, rgba(51,121,141,.18), transparent 70%);
}
.hero__wave { position: absolute; inset: auto 0 0 0; width: 100%; height: 42%; z-index: 1; opacity: .32; }
.hero__wave path { fill: none; stroke: var(--teal-2); stroke-width: 1.4; }
.hero__wave path + path { stroke: var(--amber); opacity: .55; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-areas: "content ." "content offer"; column-gap: clamp(24px, 5vw, 80px); align-items: end; }
.hero__content { grid-area: content; max-width: 800px; }
.hero__eyebrow { color: #CFE3EC; }
.hero__title { margin: 0 0 1.6rem; font-weight: 400; }
.hero__l1 { display: block; font-family: var(--f-display); font-stretch: 68%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.9rem, 5.7vw, 5.9rem); line-height: .88; letter-spacing: -.015em; color: #fff; }
.hero__l2 { display: block; margin-top: .55em; font-family: var(--f-display); font-stretch: 100%; font-weight: 500; font-size: clamp(1.25rem, 2.1vw, 2rem); line-height: 1.18; letter-spacing: -.01em; color: #DCE9EF; max-width: 30ch; }
.hero__l2 em { color: var(--amber); font-size: 1.22em; }
.hero__copy { max-width: 600px; color: #B7CAD5; font-size: .95rem; }
.hero__copy .lead { font-size: clamp(1.05rem, 1.3vw, 1.18rem); color: #D9E6ED; }
.hero__offer { grid-area: offer; align-self: end; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; background: rgba(4, 20, 36, .55); border: 1px solid var(--line-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); line-height: 1.2; }
.chip b { display: block; font-size: .85rem; font-weight: 600; }
.chip small { font-size: .72rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.chip__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(140deg, var(--amber-2), #E79A00); color: var(--amber-ink); font-size: 1.1rem; }
.chip--seal img { width: 44px; height: 44px; }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.hero__scroll i { width: 1px; height: 42px; background: linear-gradient(var(--teal-2), transparent); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--amber); animation: drop 2s var(--ease) infinite; }
@keyframes drop { to { top: 110%; } }

/* Offer card (glass) */
.offer-card { position: relative; padding: 26px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(14, 40, 62, .72), rgba(2, 14, 28, .82)); border: 1px solid var(--line-2); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); }
.offer-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(255,187,0,.7), transparent 35%, transparent 65%, rgba(92,184,207,.6)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.offer-card__top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.offer-card__product { font-family: var(--f-display); font-stretch: 85%; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: .95rem; margin-bottom: 12px; }
.offer-card__product small { display: block; text-transform: none; font-family: var(--f-body); font-weight: 400; color: var(--muted); font-size: .8rem; letter-spacing: 0; margin-top: 2px; }
.price { display: grid; gap: 2px; margin-bottom: 18px; }
.price__from { font-size: .9rem; color: var(--muted); }
.price__from s { text-decoration-color: #ff5d5d; text-decoration-thickness: 2px; }
.price__main { display: flex; align-items: baseline; gap: 8px; color: #fff; }
.price__main b { font-family: var(--f-display); font-stretch: 70%; font-weight: 900; font-size: clamp(3.2rem, 5vw, 4.4rem); line-height: .9; letter-spacing: -.02em; color: var(--amber); }
.price__main small { font-size: .85rem; color: var(--muted); }
.price__inst { font-size: .95rem; color: #CFE0E8; }
.price__inst b { color: #fff; }

/* ---------- Marquee ---------- */
.marquee { position: relative; padding-block: clamp(26px, 4vw, 48px); border-block: 1px solid var(--line); overflow: hidden; background: var(--ink-0); }
.marquee__track, .names__track { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); width: max-content; will-change: transform; }
.marquee__track span { font-family: var(--f-display); font-stretch: 65%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 6.4vw, 6.4rem); line-height: 1; letter-spacing: -.01em; color: #fff; }
.marquee__track span.o { color: transparent; -webkit-text-stroke: 1.5px rgba(154, 220, 235, .55); }
.marquee__track i { font-style: normal; color: var(--amber); font-size: clamp(1.4rem, 3vw, 2.6rem); }

/* ---------- VSL ---------- */
.vsl { background: radial-gradient(70% 60% at 50% 0%, rgba(51,121,141,.22), transparent 70%), var(--ink-1); }
.vsl__head { text-align: center; max-width: 1050px; margin: 0 auto clamp(40px, 6vw, 72px); }
.vsl__head .eyebrow { justify-content: center; }
.vsl__pre { font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: #C8D9E2; max-width: 34ch; margin: 0 auto 1.2rem; line-height: 1.4; }
.vsl__title { margin: 0; }
.vsl__frame { position: relative; max-width: 1180px; margin: 0 auto; }
.video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 60px 120px -50px rgba(0,0,0,.9), 0 0 0 1px var(--line-2); }
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.9) brightness(.8); }
.video:hover img { transform: scale(1.04); filter: saturate(1) brightness(.9); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { position: absolute; left: 50%; top: 50%; width: clamp(76px, 9vw, 116px); aspect-ratio: 1; margin: calc(clamp(76px, 9vw, 116px) / -2) 0 0 calc(clamp(76px, 9vw, 116px) / -2); border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: var(--amber-ink); box-shadow: 0 0 0 14px rgba(255,187,0,.18), 0 20px 50px -10px rgba(255,187,0,.6); transition: transform .6s var(--ease); }
.video__play::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255,187,0,.6); animation: ring 2.4s var(--ease) infinite; }
@keyframes ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.video:hover .video__play { transform: scale(1.08); }
.video__play svg { width: 36%; fill: currentColor; margin-left: 6%; }
.video__label { position: absolute; left: 22px; bottom: 18px; font-family: var(--f-display); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; padding: 8px 14px; border-radius: 99px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); }
.vsl__corner { position: absolute; width: 56px; height: 56px; border: 2px solid var(--amber); pointer-events: none; }
.vsl__corner--tl { left: -14px; top: -14px; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.vsl__corner--br { right: -14px; bottom: -14px; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; }

/* ---------- Problem ---------- */
.problem { background: var(--ink-1); }
.problem__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.problem__aside { position: sticky; top: calc(var(--header-h) + 40px); }
.questions { counter-reset: q; border-top: 1px solid var(--line); }
.questions li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: baseline; padding: clamp(22px, 3vw, 34px) 0; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-stretch: 85%; font-weight: 700; font-size: clamp(1.2rem, 1.9vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; color: #fff; transition: color .5s, opacity .5s; }
.questions li span { font-size: .8rem; letter-spacing: .14em; color: var(--teal-2); font-stretch: 100%; }
.js .questions li { opacity: .22; }
.js .questions li.is-active { opacity: 1; }
.js .questions li.is-active span { color: var(--amber); }
.problem__bridge { margin-top: clamp(40px, 5vw, 72px); font-family: var(--f-serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.2; color: #D7E5EC; text-align: center; max-width: 900px; }

/* ---------- Statement (amber band) ---------- */
.statement { background: var(--amber); color: var(--amber-ink); padding-block: clamp(64px, 8vw, 116px); position: relative; overflow: hidden; }
.statement::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 120px); }
.statement__line { position: relative; font-family: var(--f-display); font-stretch: 66%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 5.2vw, 5.2rem); line-height: .92; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.statement__line em { text-transform: none; font-stretch: normal; font-size: 1.05em; }
.statement__line--b { margin-top: .3em; }
.statement .word { display: inline-block; }

/* ---------- Build ---------- */
.build { background: linear-gradient(180deg, var(--ink-1), var(--ink-2)); }
.build__head { max-width: 1100px; }
.build__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.4vw, 32px); max-width: 860px; margin-top: clamp(32px, 4vw, 56px); }
.build__text .muted { margin-bottom: 0; }
.build__text { color: #C3D3DC; }
.build__swap { padding: clamp(24px, 3.4vw, 44px); border-radius: var(--radius); background: linear-gradient(160deg, var(--ink-4), var(--ink-2)); border: 1px solid var(--line); }
.build__old { position: relative; display: inline-block; font-family: var(--f-display); font-stretch: 80%; font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.3rem); line-height: 1.15; color: var(--muted); margin-bottom: 1.4rem; }
.build__strike { position: absolute; left: -2%; right: -2%; top: 52%; height: 3px; background: #FF5D5D; transform-origin: left; border-radius: 3px; }
.js .build__strike { transform: scaleX(0); }
.build__then { margin-bottom: 1rem; }
.build__new { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.build__new li { padding: 22px 20px; border-radius: var(--radius-sm); background: rgba(255,187,0,.06); border: 1px solid rgba(255,187,0,.35); font-family: var(--f-display); font-stretch: 72%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1; color: var(--amber); }
.build__close { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: #C3D3DC; }

/* ---------- Method (horizontal) ---------- */
.method { position: relative; padding-top: clamp(72px, 9vw, 128px); background: var(--ink-2); overflow: clip; }
.method__intro { margin-bottom: clamp(40px, 6vw, 80px); }
.method__intro .display { max-width: 1100px; }
.method__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); color: #BFD0D9; margin-top: 2rem; }
.hscroll { position: relative; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.hscroll__track { display: flex; gap: clamp(16px, 2vw, 28px); padding-inline: var(--gutter); width: max-content; will-change: transform; }
.pillar { position: relative; flex: none; width: clamp(300px, 34vw, 480px); min-height: min(62svh, 560px); padding: clamp(28px, 3vw, 44px); border-radius: var(--radius); background: linear-gradient(170deg, var(--ink-4) 0%, var(--ink-3) 60%, var(--ink-2) 100%); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.pillar::after { content: ""; position: absolute; right: -30%; top: -30%; width: 80%; aspect-ratio: 1; background: radial-gradient(circle, rgba(92,184,207,.18), transparent 65%); pointer-events: none; }
.pillar__n { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: clamp(5rem, 9vw, 9rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px rgba(154,220,235,.35); }
.pillar__t { margin: auto 0 .6rem; font-family: var(--f-display); font-stretch: 68%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 4vw, 3.8rem); line-height: .95; color: #fff; }
.pillar p { color: #B8CAD4; max-width: 34ch; margin: 0; }
.pillar__ico { position: absolute; right: clamp(24px, 3vw, 40px); top: clamp(28px, 3vw, 44px); width: clamp(56px, 6vw, 80px); }
.pillar__ico * { fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pillar--end { background: var(--amber); color: var(--amber-ink); justify-content: flex-end; gap: 1rem; }
.pillar--end::after { display: none; }
.pillar--end p { color: rgba(26,18,0,.8); }
.pillar__quote { font-family: var(--f-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1.02; color: var(--amber-ink) !important; }
.pillar__strong { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; color: var(--amber-ink) !important; }
.hscroll__bar { position: relative; margin: clamp(28px, 4vw, 48px) var(--gutter) 0; height: 2px; background: var(--line); max-width: calc(var(--container) - 2 * var(--gutter)); }
.hscroll__bar i { position: absolute; inset: 0; background: var(--amber); transform-origin: left; transform: scaleX(0); }

/* ---------- Hybrid ---------- */
.hybrid { background: linear-gradient(180deg, var(--ink-2), var(--ink-1)); }
.hybrid__head { max-width: 1150px; }
.hybrid__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 90px); margin-top: clamp(40px, 5vw, 72px); align-items: center; }
.hybrid__text { color: #C3D3DC; }
.hybrid__pairs { margin: 1.6rem 0; border-left: 2px solid var(--amber); padding-left: 20px; display: grid; gap: 8px; }
.hybrid__pairs li { font-family: var(--f-display); font-stretch: 80%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.15rem, 1.8vw, 1.55rem); line-height: 1.15; color: #fff; }
.hybrid__pairs span { font-family: var(--f-serif); font-style: italic; text-transform: none; font-weight: 400; color: var(--amber); font-size: 1.15em; }
.wave-chart { margin: 0; padding: clamp(20px, 3vw, 36px); border-radius: var(--radius); background: linear-gradient(170deg, rgba(11,40,64,.9), rgba(0,20,40,.9)); border: 1px solid var(--line); }
.wave-chart__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--teal-3); }
.wave-chart__cap small { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted-2); }
.wave-chart__plot { position: relative; height: clamp(300px, 34vw, 430px); }
.wave-chart__svg { position: absolute; inset: 0 0 42px 0; width: 100%; height: calc(100% - 42px); z-index: 2; overflow: visible; }
.wave-chart__grid path { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; }
.wave-chart__line { fill: none; stroke: var(--amber); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(255,187,0,.6)); }
.wave-chart__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(6px, 1.2vw, 16px); }
.wcol { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; }
.wcol i { display: block; width: 100%; height: calc((100% - 42px) * var(--h) * .75 + 6px); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, rgba(92,184,207,.55), rgba(51,121,141,.08)); border: 1px solid rgba(92,184,207,.35); transform-origin: bottom; margin-bottom: 12px; }
.wcol b { font-family: var(--f-display); font-stretch: 80%; font-weight: 700; text-transform: uppercase; font-size: clamp(.58rem, .9vw, .78rem); letter-spacing: .04em; line-height: 1.1; color: #fff; min-height: 2.3em; display: flex; align-items: center; }
.hybrid__close { margin-top: clamp(48px, 6vw, 88px); display: grid; gap: .15em; }
.hybrid__close p { margin: 0; font-family: var(--f-display); font-stretch: 70%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 3.6vw, 3.6rem); line-height: 1; color: #fff; }
.hybrid__close p:nth-child(2) { color: var(--teal-3); }
.hybrid__close em { text-transform: none; font-stretch: normal; color: var(--amber); font-size: 1.05em; }

/* ---------- Realities (bento) ---------- */
.realities { background: var(--ink-1); }
.realities__head { max-width: 1100px; }
.realities__head .lead { max-width: 60ch; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); margin-top: clamp(32px, 4vw, 56px); }
.bento__item { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); padding: clamp(16px, 1.5vw, 22px); background: linear-gradient(160deg, var(--ink-4), var(--ink-2)); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; transition: border-color .4s; }
.bento__item:hover { border-color: rgba(255,187,0,.45); }
.bento__item > span:last-child { position: relative; z-index: 2; font-family: var(--f-display); font-stretch: 82%; font-weight: 800; text-transform: uppercase; font-size: clamp(.95rem, 1.15vw, 1.15rem); line-height: 1.08; color: #fff; }
.bento__n { position: absolute; z-index: 2; top: clamp(14px, 1.4vw, 20px); left: clamp(16px, 1.5vw, 22px); font-family: var(--f-display); font-weight: 700; font-size: .78rem; letter-spacing: .16em; color: var(--teal-2); }
.bento__item--img .bento__n { color: var(--amber); }
.bento__item--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.85) brightness(.75); transition: filter .6s, transform 1.2s var(--ease); }
.bento__item--img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,10,22,.95) 0%, rgba(0,10,22,.1) 55%), linear-gradient(180deg, rgba(0,10,22,.55) 0%, rgba(0,10,22,0) 22%); z-index: 1; }
.bento__item--img:hover img { filter: saturate(1) brightness(.85); }
.realities__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); margin-top: clamp(48px, 6vw, 96px); align-items: center; color: #C3D3DC; }
.pullquote { margin: 0; font-family: var(--f-display); font-stretch: 72%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.02; color: #fff; padding-left: clamp(18px, 2vw, 28px); border-left: 3px solid var(--amber); }
.pullquote em { text-transform: none; font-stretch: normal; color: var(--amber); }

/* ---------- Light sections ---------- */
.light { background: var(--bone); color: #0C1A24; }
.light strong { color: #000; }
.light .eyebrow { color: var(--teal); }
.light .eyebrow .num { color: #0C1A24; border-color: rgba(0,0,0,.18); }
.light .lead { color: #1C2E3A; }
.light .muted { color: #4E6371; }
.light .title em, .light .display em { color: var(--teal); }

/* ---------- Audience ---------- */
.audience__head { max-width: 1100px; margin-bottom: clamp(32px, 4vw, 56px); }
.rows { border-top: 1px solid rgba(0,0,0,.14); }
.row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(12px, 3vw, 48px); align-items: center; padding: clamp(24px, 3.2vw, 44px) 0; border-bottom: 1px solid rgba(0,0,0,.14); overflow: hidden; isolation: isolate; transition: color .5s var(--ease); }
.row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-2); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.row:hover { color: #fff; }
.row:hover::before { transform: scaleY(1); }
.row__n { font-family: var(--f-display); font-weight: 700; font-size: .85rem; letter-spacing: .14em; color: var(--teal); padding-left: 12px; }
.row h3 { margin: 0; font-family: var(--f-display); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.35rem, 2.4vw, 2.2rem); line-height: 1; transition: transform .6s var(--ease); }
.row p { margin: 0; color: #3B4F5C; transition: color .5s; padding-right: 12px; }
.row:hover p { color: #C3D3DC; }
.row:hover h3 { transform: translateX(10px); color: var(--amber); }
.audience__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 90px); margin-top: clamp(40px, 6vw, 80px); align-items: end; color: #3B4F5C; }
.audience__statement { font-family: var(--f-display); font-stretch: 80%; font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.12; color: #0C1A24; margin: 0; }
.audience__statement strong { color: var(--teal); font-weight: 800; }

/* ---------- Daily ---------- */
.daily { background: var(--ink-1); }
.daily__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.daily__aside { position: sticky; top: calc(var(--header-h) + 40px); color: #C3D3DC; }
.checks { display: grid; gap: 10px; }
.checks li { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: var(--radius-sm); background: linear-gradient(90deg, rgba(11,40,64,.75), rgba(0,20,40,.4)); border: 1px solid var(--line); font-family: var(--f-display); font-stretch: 90%; font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.25; color: #fff; }
.checks svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: rgba(255,187,0,.12); border: 1px solid rgba(255,187,0,.5); }
.checks path { fill: none; stroke: var(--amber); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 0; }
.js .checks path { stroke-dashoffset: 30; }
.daily__close { margin-top: clamp(48px, 6vw, 88px); }
.daily__close p { margin: 0; font-family: var(--f-display); font-stretch: 68%; font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 4.4vw, 4.4rem); line-height: .96; }
.daily__close s { text-decoration-color: #FF5D5D; text-decoration-thickness: .08em; color: var(--muted-2); }
.daily__close em { text-transform: none; font-stretch: normal; color: var(--amber); }

/* ---------- Work / process ---------- */
.work { background: radial-gradient(60% 50% at 100% 0%, rgba(51,121,141,.2), transparent 70%), var(--ink-2); }
.work__head { max-width: 1150px; }
.work__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 100px); margin-top: clamp(40px, 5vw, 72px); color: #C3D3DC; }
.process { position: relative; display: grid; gap: 0; padding-left: 44px; }
.process__line { position: absolute; left: 13px; top: 18px; bottom: 18px; width: 4px; height: calc(100% - 36px); overflow: visible; }
.process__line path { stroke: var(--line-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.process__line .fill { stroke: var(--amber); stroke-width: 3; }
.process li { position: relative; padding: 18px 0 22px; border-bottom: 1px solid var(--line); }
.process li:last-of-type { border-bottom: 0; }
.process b { display: block; font-family: var(--f-display); font-stretch: 72%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1; color: #fff; transition: color .5s; }
.process small { font-family: var(--f-serif); font-style: italic; font-size: 1.15rem; color: var(--muted); }
.process__dot { position: absolute; left: -44px; top: 26px; width: 30px; height: 30px; border-radius: 50%; background: var(--ink-2); border: 2px solid var(--line-2); transition: background .5s, border-color .5s, box-shadow .5s; z-index: 2; }
.process li.is-on .process__dot { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 8px rgba(255,187,0,.15); }
.process li.is-on b { color: var(--amber); }
.work__perception { margin-top: clamp(48px, 6vw, 88px); text-align: center; }
.work__before { font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--muted); margin-bottom: .4em; }
.work__before span { text-decoration: line-through; text-decoration-color: #FF5D5D; }
.work__after { font-family: var(--f-display); font-stretch: 66%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 5.4vw, 5.4rem); line-height: .92; margin: 0; }
.work__after em { text-transform: none; font-stretch: normal; color: var(--amber); }
.work__foot { max-width: 820px; margin: clamp(48px, 6vw, 80px) auto 0; text-align: center; color: #C3D3DC; }

/* ---------- Efficiency ---------- */
.efficiency { background: var(--ink-1); }
.efficiency__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.efficiency__head .title { margin-bottom: 0; }
.efficiency__text { color: #C3D3DC; }
.efficiency__close { margin-top: clamp(48px, 6vw, 88px); text-align: center; }
.efficiency__close p:first-child { font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--muted); }
.efficiency__big { font-family: var(--f-display); font-stretch: 66%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 5rem); line-height: .94; margin: 0; }
.efficiency__big em { text-transform: none; font-stretch: normal; color: var(--amber); }

/* ---------- Curriculum ---------- */
.curriculum { background: linear-gradient(180deg, var(--ink-1), var(--ink-2)); }
.curriculum__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.curriculum__aside { position: sticky; top: calc(var(--header-h) + 32px); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 2rem 0 0; }
.stats div { padding: 18px 16px; border-radius: var(--radius-sm); background: rgba(11,40,64,.6); border: 1px solid var(--line); display: flex; flex-direction: column-reverse; gap: 4px; }
.stats dt { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; line-height: 1.3; }
.stats dd { margin: 0; font-family: var(--f-display); font-stretch: 66%; font-weight: 900; font-size: clamp(2.4rem, 3.6vw, 3.4rem); line-height: .9; color: var(--amber); }
.curriculum__phone { margin: 28px 0 0; max-width: 340px; }
.lessons { border-top: 1px solid var(--line); }
.lessons li { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; padding: 18px 8px; border-bottom: 1px solid var(--line); font-size: clamp(1rem, 1.3vw, 1.15rem); color: #D3E1E8; transition: background .4s, color .4s, padding .5s var(--ease); }
.lessons li span { font-family: var(--f-display); font-stretch: 70%; font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--teal-2); transition: color .4s; }
.lessons li:hover { background: rgba(92,184,207,.07); color: #fff; padding-left: 18px; }
.lessons li:hover span { color: var(--amber); }

/* ---------- Extras ---------- */
.extras { background: var(--ink-2); }
.extras__head { max-width: 1100px; }
.extras__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(40px, 5vw, 64px); }
.extra { position: relative; padding: clamp(18px, 2vw, 26px); border-radius: var(--radius); background: linear-gradient(170deg, var(--ink-4), var(--ink-3)); border: 1px solid var(--line); display: flex; flex-direction: column; transition: border-color .4s; }
.extra:hover { border-color: rgba(255,187,0,.45); }
.extra__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: radial-gradient(80% 80% at 50% 40%, #EAF1F4, #B9C9D2); display: grid; place-items: center; margin-bottom: 22px; }
.extra__media img { width: 86%; height: 86%; object-fit: contain; transition: transform 1s var(--ease); }
.extra:hover .extra__media img { transform: scale(1.05) rotate(-1deg); }
.extra:hover .extra__media--video img { transform: scale(1.04); }
.extra__media--video { background: var(--ink-1); }
.extra__media--video img { width: 100%; height: 100%; object-fit: cover; }
.extra__media--doc img { width: auto; height: 88%; box-shadow: 0 20px 40px -14px rgba(0,0,0,.4); transform: rotate(-3deg); }
.extra:hover .extra__media--doc img { transform: rotate(0) scale(1.04); }
.extra__badge { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--amber); color: var(--amber-ink); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1; }
.extra__badge b { font-family: var(--f-display); font-stretch: 66%; font-weight: 900; font-size: 2.2rem; letter-spacing: 0; }
.extra h3 { display: flex; gap: 10px; margin: 0 0 .5rem; font-family: var(--f-display); font-stretch: 85%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.12; color: #fff; }
.tick { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: var(--amber-ink); font-size: .75rem; margin-top: 1px; }
.extra p { color: #AFC2CD; font-size: .95rem; }
.extras__plus { margin-top: clamp(40px, 5vw, 72px); }
.extras__also { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--teal-2); }
.perks { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: clamp(12px, 1.6vw, 22px); }
.perks li { position: relative; overflow: hidden; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius); border: 1px solid var(--line); background: rgba(11,40,64,.5); display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; }
.perks b { font-family: var(--f-display); font-stretch: 72%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1; color: #fff; }
.perks small { color: var(--muted); margin-top: 4px; }
.perks__ico { position: absolute; top: 20px; left: 22px; font-size: 1.8rem; color: var(--amber); }
.perks__ico--inf { width: 64px; }
.perks__cert { background: linear-gradient(140deg, var(--ink-4), var(--ink-2)); }
.perks__cert img { position: absolute; right: -6%; top: 10%; width: 64%; transform: rotate(-6deg); border-radius: 8px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); opacity: .95; }
.perks__cert b, .perks__cert small { position: relative; max-width: 48%; }
.extras__note { margin-top: 1.6rem; max-width: 60ch; }

/* ---------- Perception ---------- */
.perception { background: var(--ink-1); }
.perception__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 100px); align-items: center; color: #C3D3DC; }
.exists { display: grid; gap: 4px; }
.exists li { font-family: var(--f-display); font-stretch: 68%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 3.2rem); line-height: 1; color: var(--muted-2); padding: 6px 0; border-bottom: 1px solid var(--line); transition: color .6s; }
.exists li.is-on { color: #fff; }
.exists li.is-on::first-letter { color: var(--amber); }
.perception__foot { max-width: 900px; margin-top: clamp(40px, 5vw, 72px); color: #C3D3DC; }
.perception__big { font-family: var(--f-display); font-stretch: 78%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.7rem, 3.2vw, 3rem); line-height: 1.02; color: #fff; }
.perception__big strong { color: var(--amber); font-weight: 800; }

/* ---------- Teacher ---------- */
.teacher { background: radial-gradient(70% 60% at 0% 30%, rgba(51,121,141,.25), transparent 70%), var(--ink-2); padding-bottom: 0; }
.teacher__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.teacher__media { position: sticky; top: calc(var(--header-h) + 32px); }
.teacher__photo { position: relative; margin: 0; aspect-ratio: 4 / 4.4; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: radial-gradient(70% 60% at 50% 35%, rgba(92,184,207,.38), transparent 70%), linear-gradient(170deg, #134457 0%, var(--ink-3) 55%, var(--ink-1) 100%); }
.teacher__photo::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 80px); }
.teacher__photo picture { position: absolute; left: 50%; bottom: 0; height: 94%; transform: translateX(-50%); }
.teacher__photo picture img { width: auto; height: 100%; max-width: none; transform-origin: 50% 100%; }
.teacher__seal { position: absolute; top: 18px; right: 18px; width: clamp(64px, 7vw, 92px); height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.45)); }
.teacher__class { margin: -22% -6% 0 auto; width: 70%; position: relative; filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); }
.teacher__name { font-size: clamp(2.8rem, 6vw, 6rem); margin-bottom: .25em; }
.stats--teacher { margin: 1.8rem 0 2rem; }
.stats--teacher dd { font-size: clamp(2rem, 3vw, 2.8rem); }
.teacher__bio { color: #BFD0D9; }
.gallery { margin-top: clamp(56px, 7vw, 96px); overflow: hidden; }
html:not(.js) .gallery { overflow-x: auto; }
.gallery__track { display: flex; width: max-content; will-change: transform; }
.gallery figure { flex: none; height: clamp(190px, 20vw, 260px); margin: 0 clamp(10px, 1.2vw, 16px) 0 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--ink-3); }
.gallery img { width: auto; height: 100%; max-width: none; object-fit: cover; }
.gallery + .names { margin-top: clamp(28px, 3.5vw, 48px); }
.names { margin-top: clamp(56px, 7vw, 96px); padding-block: 26px; border-block: 1px solid var(--line); overflow: hidden; background: var(--ink-0); }
.names__track span { font-family: var(--f-display); font-stretch: 72%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2.4rem); color: #fff; white-space: nowrap; }
.names__track i { font-style: normal; color: var(--amber); font-size: 1.6rem; }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--ink-1); overflow: clip; }
.testimonials__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eye eye" "title nav"; align-items: end; gap: 0 32px; }
.testimonials__head .eyebrow { grid-area: eye; justify-self: start; }
.testimonials__head .title { grid-area: title; max-width: 980px; margin: 0; }
.testimonials__nav { grid-area: nav; display: flex; align-items: center; gap: 10px; }
.reel__btn { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,187,0,.5); color: var(--amber); transition: background .35s, color .35s, opacity .35s, border-color .35s; }
.reel__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.reel__btn:hover:not(:disabled) { background: var(--amber); color: var(--amber-ink); }
.reel__btn:disabled { opacity: .3; cursor: default; border-color: var(--line-2); color: var(--muted); }
.reel__bar { margin-top: clamp(24px, 3vw, 40px); }
.reel__bar span { display: block; position: relative; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.reel__bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 3px; background: var(--amber); }
.reel { margin-top: clamp(32px, 4vw, 56px); cursor: grab; user-select: none; -webkit-user-select: none; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.reel::-webkit-scrollbar { display: none; }
.reel.is-drag { cursor: grabbing; }
.reel__track { display: flex; gap: clamp(12px, 1.6vw, 22px); padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); width: max-content; }
.tcard { position: relative; display: block; width: clamp(240px, 24vw, 330px); aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line); text-align: left; }
.tcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: brightness(.82) saturate(.9); pointer-events: none; }
.tcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,8,16,.92) 0%, rgba(0,8,16,0) 45%); }
.tcard:hover img { transform: scale(1.05); filter: brightness(.95) saturate(1); }
.tcard__play { position: absolute; left: 50%; top: 45%; z-index: 2; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; background: var(--amber); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255,187,0,.18); transition: transform .6s var(--ease); }
.tcard__play svg { width: 40%; fill: var(--amber-ink); margin-left: 6%; }
.tcard:hover .tcard__play { transform: scale(1.12); }
.tcard__name { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; font-family: var(--f-display); font-stretch: 78%; font-weight: 800; text-transform: uppercase; font-size: 1.35rem; line-height: 1.05; color: #fff; }
.tcard__name small { display: block; font-family: var(--f-body); font-weight: 400; text-transform: none; font-size: .8rem; color: var(--teal-3); margin-top: 4px; }

/* ---------- Offer ---------- */
.offer { background: var(--ink-0); overflow: clip; isolation: isolate; }
.offer__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 50% at 75% 50%, rgba(255,187,0,.16), transparent 70%), radial-gradient(40% 50% at 10% 20%, rgba(51,121,141,.3), transparent 70%); }
.offer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 6vw, 100px); align-items: center; }
.offer__text { color: #C3D3DC; }
.included { display: grid; gap: 10px; margin-top: 2rem; }
.included li { position: relative; padding-left: 36px; font-weight: 500; color: #E2ECF1; }
.included li::before { content: "✔"; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,187,0,.14); border: 1px solid rgba(255,187,0,.5); color: var(--amber); font-size: .72rem; }
.ticket { position: relative; padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: linear-gradient(170deg, #0F3048 0%, #041628 55%, #020D1A 100%); border: 1px solid rgba(255,187,0,.4); box-shadow: 0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 8px rgba(255,187,0,.05), inset 0 1px 0 rgba(255,255,255,.1); }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 47%; width: 28px; height: 28px; border-radius: 50%; background: var(--ink-0); border: 1px solid rgba(255,187,0,.4); }
.ticket::before { left: -15px; clip-path: inset(0 0 0 50%); }
.ticket::after { right: -15px; clip-path: inset(0 50% 0 0); }
.ticket__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px dashed var(--line-2); margin-bottom: 18px; }
.ticket__brand { font-family: var(--f-display); font-stretch: 70%; font-weight: 900; text-transform: uppercase; font-size: 1.8rem; letter-spacing: .02em; }
.ticket__off { display: flex; align-items: baseline; gap: 4px; padding: 8px 14px; border-radius: 12px; background: var(--amber); color: var(--amber-ink); font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: .8rem; transform: rotate(3deg); }
.ticket__off b { font-stretch: 66%; font-weight: 900; font-size: 1.8rem; line-height: .9; }
.ticket__product { font-family: var(--f-display); font-stretch: 85%; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; color: var(--teal-3); }
.ticket__price { display: grid; margin: 6px 0 22px; }
.ticket__from { color: var(--muted); }
.ticket__from s { text-decoration-color: #FF5D5D; text-decoration-thickness: 2px; }
.ticket__now { display: flex; align-items: flex-start; gap: 6px; color: var(--amber); }
.ticket__now small { font-family: var(--f-display); font-weight: 800; font-size: 1.4rem; margin-top: .9rem; }
.ticket__now b { font-family: var(--f-display); font-stretch: 64%; font-weight: 900; font-size: clamp(5rem, 9vw, 7.4rem); line-height: .86; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ticket__cash { font-size: .9rem; color: var(--muted); margin-top: 4px; }
.ticket__or { font-size: 1.1rem; color: #E2ECF1; margin-top: 6px; }
.ticket__or b { color: #fff; font-size: 1.25em; }
.ticket__life { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: rgba(92,184,207,.1); border: 1px solid rgba(92,184,207,.3); margin-bottom: 20px; }
.ticket__inf { flex: none; width: 56px; }
.inf-ico { display: block; width: 100%; height: auto; overflow: visible; }
.inf-ico path { fill: none; stroke: var(--amber); stroke-width: 6; stroke-linecap: round; }
.ticket__life p { display: grid; margin: 0; line-height: 1.3; }
.ticket__life small { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.ticket__life b { font-family: var(--f-display); font-stretch: 78%; font-weight: 900; text-transform: uppercase; font-size: 1.35rem; }
.ticket__life span { font-size: .85rem; color: #BFD0D9; }
.ticket__secure { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); margin: 10px 0 0; }
.ticket__secure svg { width: 16px; height: 16px; fill: none; stroke: var(--teal-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Lifetime ---------- */
.lifetime { background: linear-gradient(180deg, var(--ink-0), var(--ink-1)); }
.lifetime__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 100px); align-items: center; color: #C3D3DC; }
.lifetime__inf { width: 100%; overflow: visible; }
.lifetime__inf path { fill: none; stroke: var(--amber); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 22px rgba(255,187,0,.45)); }
.lifetime__close { margin-top: 2rem; font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.2; }
.lifetime__close span { display: block; font-family: var(--f-display); font-stretch: 78%; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.lifetime__close em { display: block; color: #fff; font-size: 1.15em; }

/* ---------- Summary ---------- */
.summary .title { max-width: 900px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin: clamp(28px, 4vw, 48px) 0 0; border-top: 1px solid rgba(0,0,0,.14); }
.facts div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid rgba(0,0,0,.14); }
.facts dt { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--teal); padding-top: 3px; }
.facts dd { margin: 0; color: #22333F; }

/* ---------- FAQ ---------- */
.faq { background: var(--ink-1); padding-bottom: clamp(56px, 6vw, 88px); }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.faq__aside { position: sticky; top: calc(var(--header-h) + 32px); }
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa h3 { margin: 0; font-family: var(--f-display); font-stretch: 88%; font-weight: 700; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.25; color: #fff; transition: color .3s; }
.qa summary:hover h3 { color: var(--amber); }
.qa summary i { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); transition: background .4s, border-color .4s, transform .5s var(--ease); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--amber); border-radius: 2px; transition: transform .5s var(--ease); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i { background: var(--amber); border-color: var(--amber); transform: rotate(180deg); }
.qa[open] summary i::before, .qa[open] summary i::after { background: var(--amber-ink); }
.qa[open] summary i::after { transform: rotate(0); }
.qa__a { padding: 0 64px 28px 0; color: #BFD0D9; overflow: hidden; }

/* ---------- Closing ---------- */
.closing { overflow: clip; isolation: isolate; }
.closing__bg { position: absolute; inset: 0; z-index: -1; }
.closing__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 20%; opacity: .32; filter: grayscale(.4); }
.closing__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink-1) 0%, rgba(0,12,24,.7) 40%, var(--ink-0) 100%), linear-gradient(90deg, var(--ink-1) 10%, transparent 70%); }
.closing__title { max-width: 1200px; }
.closing__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 440px); gap: clamp(32px, 6vw, 100px); align-items: end; margin-top: clamp(32px, 4vw, 56px); }
.closing__text { color: #C3D3DC; }
.closing__life { font-family: var(--f-display); font-stretch: 80%; font-weight: 900; text-transform: uppercase; font-size: 1.3rem; color: var(--teal-3); margin-bottom: 18px; }

/* ---------- Footer ---------- */
.footer { padding: 56px 0 calc(48px + env(safe-area-inset-bottom)); background: var(--ink-0); border-top: 1px solid var(--line); }
.footer__inner { display: grid; grid-template-columns: auto 1fr; gap: 32px 64px; align-items: center; }
.footer__brand { display: flex; align-items: center; gap: 24px; }
.footer__brand > img { width: 64px; height: 64px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: flex-end; font-size: .88rem; color: #AFC2CD; }
.footer__nav a:hover { color: var(--amber); }
.footer__legal { grid-column: 1 / -1; font-size: .78rem; color: var(--muted-2); padding-top: 28px; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Sticky CTA ---------- */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 85; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 18px; background: rgba(2, 16, 30, .82); border: 1px solid rgba(255,187,0,.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 40px -10px rgba(0,0,0,.7); transform: translateY(140%); transition: transform .6s var(--ease); }
.sticky-cta.is-on { transform: translateY(0); }
.sticky-cta div { display: grid; line-height: 1.15; }
.sticky-cta small { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--amber); font-weight: 600; }
.sticky-cta b { font-family: var(--f-display); font-stretch: 85%; font-weight: 800; font-size: 1.05rem; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 5, 12, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal__box { position: relative; width: min(1100px, 100%); }
.modal__box.is-vertical { width: min(420px, 100%, calc((100svh - 80px) * 9 / 16)); }
.modal__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 40px 100px rgba(0,0,0,.8); }
.modal__box.is-vertical .modal__frame { aspect-ratio: 9 / 16; }
.modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal__close { position: absolute; right: 0; top: -54px; width: 44px; height: 44px; border-radius: 50%; background: var(--amber); color: var(--amber-ink); font-weight: 700; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .nav { display: none; }
  .header__inner .btn { margin-left: auto; }
  .hero__grid { grid-template-columns: 1fr; grid-template-areas: "content" "offer"; row-gap: 32px; }
  .hero__offer { max-width: 520px; }
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento__item > span:last-child { font-size: clamp(1rem, 2vw, 1.3rem); }
  .perks { grid-template-columns: 1fr 1fr; }
  .perks__cert { grid-column: 1 / -1; order: -1; }
}

@media (max-width: 820px) {
  :root { --header-h: 64px; --radius: 18px; }
  .logo__txt small { display: none; }
  .fj21 { height: 30px; }
  .logo { gap: 12px; }
  .logo__txt { padding-left: 12px; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 0px); align-items: flex-start; }
  .hero__media { height: 78svh; bottom: auto; }
  .hero__bg img { object-position: 55% 0%; }
  .hero__person { top: calc(var(--header-h) + 12px); bottom: 0; left: 50%; height: auto; }
  .hero__media::after { background: linear-gradient(0deg, var(--ink-1) 2%, rgba(0,12,24,.55) 38%, rgba(0,12,24,.1) 70%, rgba(0,12,24,.45) 100%); }
  .hero__grid { padding-top: 46svh; }
  .hero__l1 { font-size: clamp(2.8rem, 13vw, 4.4rem); }
  .hero__l2 { font-size: 1.22rem; }
  .hero__scroll { display: none; }
  .hero__wave { display: none; }

  .problem__grid, .build__body, .hybrid__grid, .daily__grid, .work__grid, .efficiency__grid,
  .curriculum__grid, .perception__grid, .teacher__grid, .offer__grid, .lifetime__grid,
  .faq__grid, .closing__grid, .realities__foot, .audience__foot { grid-template-columns: 1fr; }
  .problem__aside, .daily__aside, .curriculum__aside, .faq__aside, .teacher__media { position: static; }
  .js .questions li { opacity: 1; transition: none; }
  .method__cols { grid-template-columns: 1fr; gap: 0; }
  .hscroll { height: auto; display: block; }
  .hscroll__track { width: auto; flex-direction: column; padding-inline: var(--gutter); }
  .pillar { width: 100%; min-height: 0; }
  .pillar__t { margin-top: 2.4rem; }
  .hscroll__bar { display: none; }
  .method { padding-bottom: clamp(80px, 12vw, 120px); }
  .row { grid-template-columns: 40px 1fr; align-items: start; row-gap: 8px; }
  .row__n { grid-row: 1; padding-left: 0; padding-top: .35em; }
  .row h3 { grid-column: 2; grid-row: 1; }
  .row p { grid-column: 2; grid-row: 2; }
  .curriculum__phone { display: none; }
  .extras__grid { grid-template-columns: 1fr; }
  .teacher__class { margin: -18% -2% 0 auto; width: 76%; }

  .facts { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 6px; }
  .testimonials__head { grid-template-areas: "eye" "title" "nav"; grid-template-columns: 1fr; }
  .testimonials__nav { margin-top: 18px; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__nav { justify-content: flex-start; }
  .sticky-cta { display: flex; }
  .lifetime__inf { max-width: 280px; }
  .qa__a { padding-right: 0; }
}

@media (max-width: 560px) {
  .header .btn--sm { padding: 0 14px; font-size: .72rem; }
  .logo__txt b { font-size: .82rem; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .stats div { padding: 14px 10px; }
  .stats--teacher dt { font-size: .62rem; }
  .build__new { grid-template-columns: 1fr 1fr; }
  .build__new li { padding: 18px 14px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__item > span:last-child { font-size: .95rem; }
  .perks { grid-template-columns: 1fr; }
  .perks__cert { min-height: 240px; }
  .wcol b { font-size: .5rem; letter-spacing: 0; }
  .reel__btn { width: 48px; height: 48px; }
  .ticket__now b { font-size: 4.6rem; }
}

@media (max-width: 380px) {
  .header .logo__txt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .questions li { opacity: 1; }
  .js .checks path { stroke-dashoffset: 0; }
  .js .build__strike { transform: scaleX(1); }
}