:root {
  --paper: #f3eee2;
  --paper-2: #fbf8f1;
  --ink: #11120f;
  --muted: #6f6c63;
  --line: rgba(17,18,15,.16);
  --gold: #c99a3d;
  --gold-2: #edd19b;
  --lime: #c8ff2e;
  --blue: #2f6bff;
  --radius: 26px;
  --display: "Arial Narrow", "Bahnschrift Condensed", Impact, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); text-rendering: optimizeLegibility; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.skip { position: fixed; top: -80px; left: 20px; z-index: 999; padding: 14px 18px; background: var(--lime); transition: top .2s ease; }
.skip:focus { top: 20px; }

.topbar { position: fixed; z-index: 100; top: 18px; left: 50%; width: min(95vw, 1460px); transform: translateX(-50%); height: 68px; display: grid; grid-template-columns: 1.1fr auto 1fr; align-items: center; gap: 24px; padding: 8px 10px 8px 16px; border: 1px solid rgba(17,18,15,.14); border-radius: 20px; background: rgba(251,248,241,.86); box-shadow: 0 14px 42px rgba(31,27,18,.10); backdrop-filter: blur(18px); transition: transform .3s ease, background .3s ease; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.wordmark-orbit { position: relative; flex: 0 0 40px; width: 40px; height: 40px; border: 2px solid rgba(201,154,61,.78); border-radius: 50%; background: #fffaf0; box-shadow: inset 0 0 0 4px rgba(201,154,61,.08); }
.wordmark-orbit::before, .wordmark-orbit::after { content: ""; position: absolute; border-radius: 50%; }
.wordmark-orbit::before { inset: 7px; border: 5px solid var(--gold); border-left-color: var(--lime); transform: rotate(-35deg); }
.wordmark-orbit::after { width: 6px; height: 6px; right: -3px; top: 7px; background: var(--lime); box-shadow: 0 0 12px rgba(147,190,19,.55); }
.wordmark b { display: block; font-size: 16px; letter-spacing: -.03em; }
.wordmark small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); font-size: 12px; font-weight: 700; }
.nav a { position: relative; padding: 12px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 7px; height: 2px; background: var(--lime); transition: right .25s ease; }
.nav a:hover::after { right: 0; }
.top-cta { justify-self: end; display: inline-flex; align-items: center; gap: 12px; padding: 14px 17px; border-radius: 13px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }
.top-cta span { color: var(--lime); font-size: 16px; }

.section { width: min(100% - 48px, 1460px); margin: 0 auto; padding: 140px 0; }
.kicker { display: flex; align-items: center; gap: 11px; margin: 0 0 22px; color: #777167; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.kicker > span { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(200,255,46,.18); }
.kicker-light { color: rgba(255,255,255,.62); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.055em; }
h1 em, h2 em { color: var(--gold); font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -.065em; }
.section-head h2, .inside-intro h2, .toolkit-head h2, .market-head h2, .journey-head h2 { margin: 0; font-size: clamp(52px, 6.6vw, 102px); line-height: .91; }

.hero { min-height: 100svh; display: grid; grid-template-columns: minmax(520px, .9fr) minmax(640px, 1.1fr); align-items: center; gap: clamp(32px, 4vw, 70px); padding: 130px max(24px, calc((100vw - 1460px)/2)) 54px; background: radial-gradient(circle at 82% 37%, rgba(226,189,114,.24), rgba(243,238,226,0) 32%), linear-gradient(115deg, #fbf8f1 0 52%, #e9e0cf 52% 100%); }
.hero-copy { position: relative; z-index: 2; padding-bottom: 4vh; }
.hero h1 { max-width: 720px; margin: 0; font-size: clamp(68px, 7.2vw, 124px); line-height: .82; }
.hero h1 em { position: relative; display: inline-block; color: var(--ink); }
.hero h1 em::after { content: ""; position: absolute; z-index: -1; left: -1%; right: -2%; bottom: 1%; height: 20%; background: var(--lime); transform: rotate(-1deg); }
.hero-lead { max-width: 650px; margin: 34px 0 0; color: #555249; font-size: clamp(17px, 1.25vw, 21px); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 58px; padding: 0 22px; border-radius: 16px; font-size: 13px; font-weight: 900; letter-spacing: .01em; transition: transform .25s ease, box-shadow .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-dark { min-width: 228px; color: #fff; background: var(--ink); box-shadow: 0 18px 45px rgba(17,18,15,.18); }
.button-dark span { color: var(--lime); font-size: 20px; }
.button-lime { min-width: 235px; background: var(--lime); color: var(--ink); box-shadow: 0 22px 70px rgba(200,255,46,.18); }
.text-link { padding: 12px 0; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 800; }
.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 660px; margin: 42px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-proof li { min-height: 96px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; padding: 18px; border-right: 1px solid var(--line); }
.hero-proof li:first-child { padding-left: 0; }
.hero-proof li:last-child { border-right: 0; }
.hero-proof strong { font-family: var(--display); font-size: 35px; letter-spacing: -.05em; }
.hero-proof span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.hero-visual { position: relative; min-width: 0; }
.hero-frame { position: relative; height: min(74vh, 760px); min-height: 560px; overflow: hidden; border-radius: 2px 42px 42px 2px; box-shadow: 0 42px 110px rgba(42,32,16,.23); background: #cbbda6; isolation: isolate; }
.hero-frame::before { content: ""; position: absolute; z-index: 2; inset: 18px; border: 1px solid rgba(255,255,255,.5); border-radius: 0 27px 27px 0; pointer-events: none; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; display: block; transform: scale(1.03); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.hero-frame:hover img { transform: scale(1.075); }
.visual-label { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 4px; padding: 12px 15px; border-radius: 11px; box-shadow: 0 12px 28px rgba(0,0,0,.16); backdrop-filter: blur(12px); }
.visual-label b { font-family: var(--display); font-size: 15px; letter-spacing: .06em; }
.visual-label span { font-size: 9px; letter-spacing: .05em; }
.label-whieda { left: 35px; bottom: 40px; color: var(--ink); background: rgba(255,248,231,.86); border: 1px solid rgba(201,154,61,.55); }
.label-bmc { right: 34px; top: 42px; color: white; background: rgba(17,18,15,.76); border: 1px solid rgba(200,255,46,.55); }
.label-bmc b { color: var(--lime); }
.visual-scan { position: absolute; z-index: 2; top: -10%; bottom: -10%; width: 14%; left: -18%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.44), rgba(255,255,255,0)); transform: skewX(-18deg); mix-blend-mode: soft-light; animation: scan 6.6s ease-in-out infinite 1s; }
.image-note { max-width: 420px; margin: 18px 0 0 auto; color: var(--muted); font-size: 11px; text-align: right; letter-spacing: .06em; text-transform: uppercase; }
@keyframes scan { 0%, 18% { left: -18%; opacity: 0; } 32% { opacity: 1; } 62% { left: 115%; opacity: .7; } 100% { left: 115%; opacity: 0; } }

/* V4 signature hero: two pre-rendered films, one responsive HTML story layer. */
.motion-hero { position: relative; height: 500vh; color: var(--ink); background: var(--ink); }
.motion-hero-sticky { position: sticky; top: 0; height: 100svh; min-height: 660px; overflow: hidden; isolation: isolate; }
.hero-film { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #d8c8ad; }
#hero-canvas-desktop, #hero-canvas-mobile, .hero-film-fallback, .hero-film-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hero-canvas-desktop, #hero-canvas-mobile { z-index: 2; }
#hero-canvas-mobile { display: none; }
.hero-film-fallback { z-index: 1; }
.hero-film-fallback img { object-fit: cover; object-position: center; }
.hero-film.frames-ready .hero-film-fallback { opacity: 0; }
.hero-film-shade { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(247,243,234,.98) 0%, rgba(247,243,234,.92) 30%, rgba(247,243,234,.48) 43%, transparent 61%); }
.hero-film-meta { position: absolute; z-index: 5; right: 32px; bottom: 24px; display: flex; gap: 26px; color: rgba(255,255,255,.68); font-family: Consolas, monospace; font-size: 9px; letter-spacing: .16em; }
.hero-story { position: relative; z-index: 4; width: clamp(500px, 42vw, 690px); height: 100%; display: flex; flex-direction: column; padding: 118px 34px 42px max(28px, calc((100vw - 1460px)/2)); }
.hero-story-top { display: flex; align-items: center; justify-content: space-between; min-height: 34px; border-bottom: 1px solid rgba(17,18,15,.18); }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; color: #5e594f; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.hero-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(200,255,46,.2); }
.hero-stage-count { color: var(--gold); font-family: var(--display); font-size: 25px; font-weight: 900; }
.hero-stages { position: relative; flex: 1; min-height: 0; }
.hero-stage { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 180px 0 20px; opacity: 0; transform: translateY(26px); pointer-events: none; transition: opacity .34s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.hero-stage.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hero-stage > p { margin: 0 0 20px; color: #6f675b; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.hero-stage h1, .hero-stage h2 { max-width: 650px; margin: 0; font-size: clamp(64px, 5.55vw, 94px); line-height: .84; overflow-wrap: normal; hyphens: none; }
.hero-stage h1 em { position: relative; z-index: 0; display: inline-block; color: var(--ink); }
.hero-stage h1 em::after { content: ""; position: absolute; z-index: -1; left: -2%; right: -3%; bottom: 1%; height: 20%; background: var(--lime); transform: rotate(-1deg); }
.hero-stage > span { max-width: 570px; margin-top: 26px; color: #4f4b43; font-family: var(--serif); font-size: clamp(16px,1.2vw,20px); line-height: 1.52; }
.hero-stage .hero-actions { margin-top: 26px; }
.hero-stage .button-lime { min-width: 245px; box-shadow: 0 18px 48px rgba(121,156,18,.2); }
.hero-stage .button-lime b { font-size: 18px; }
.hero-scroll-progress { height: 3px; background: rgba(17,18,15,.16); overflow: hidden; }
.hero-scroll-progress i { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left center; }

.ticker { overflow: hidden; border-top: 1px solid #36382f; border-bottom: 1px solid #36382f; background: var(--ink); color: #fff; }
.ticker div { width: max-content; padding: 17px 0; font-family: var(--display); font-size: 18px; font-weight: 900; letter-spacing: .07em; white-space: nowrap; animation: ticker 24s linear infinite; }
.ticker i { margin: 0 24px; color: var(--lime); font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.duality { padding-top: 160px; }
.section-head { display: grid; grid-template-columns: 1fr 2.1fr; align-items: end; margin-bottom: 70px; }
.section-head .kicker { align-self: start; margin-top: 10px; }
.dual-grid { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: stretch; }
.dual-panel { position: relative; min-height: 660px; overflow: hidden; padding: 46px; border: 1px solid var(--line); background: var(--paper-2); }
.whieda-panel { border-radius: 38px 0 0 38px; background: linear-gradient(145deg, #fffaf0, #e8d8bb); }
.bmc-panel { border-radius: 0 38px 38px 0; color: #fff; background: #11120f; }
.panel-index { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.bmc-panel .panel-index { color: rgba(255,255,255,.48); }
.dual-panel h3 { margin: 86px 0 18px; font-family: var(--display); font-size: clamp(58px, 6vw, 96px); line-height: .9; text-transform: uppercase; letter-spacing: -.055em; }
.bmc-panel h3 { color: var(--lime); }
.dual-panel > p:not(.panel-index) { max-width: 490px; color: #514b40; font-family: var(--serif); font-size: 20px; line-height: 1.55; }
.bmc-panel > p:not(.panel-index) { color: rgba(255,255,255,.72); }
.dual-panel ul { position: absolute; z-index: 2; left: 46px; right: 46px; bottom: 40px; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(17,18,15,.16); }
.bmc-panel ul { border-color: rgba(255,255,255,.18); }
.dual-panel li { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(17,18,15,.12); font-size: 13px; font-weight: 700; }
.bmc-panel li { border-color: rgba(255,255,255,.12); }
.dual-panel li::after { content: "↗"; color: var(--gold); }
.bmc-panel li::after { color: var(--lime); }
.core-link { position: relative; z-index: 3; display: grid; place-content: center; justify-items: center; margin: 0 -1px; background: linear-gradient(#e9d8b3, #11120f); }
.core-link > div { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; color: var(--ink); background: var(--lime); box-shadow: 0 0 0 12px rgba(200,255,46,.10), 0 0 60px rgba(200,255,46,.35); }
.core-link span { font-family: var(--serif); font-size: 42px; }
.core-link p { margin: 22px 0 0; color: rgba(255,255,255,.84); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; writing-mode: vertical-rl; }
.material-sphere { position: absolute; width: 270px; height: 270px; right: -70px; top: 70px; border-radius: 50%; background: radial-gradient(circle at 32% 27%, #fff7da 0 7%, #d9aa48 24%, #875515 61%, #2b1d0c 100%); box-shadow: -35px 45px 80px rgba(90,56,9,.26); opacity: .58; }
.neural-lines { position: absolute; top: 75px; right: -40px; width: 280px; height: 200px; transform: rotate(-12deg); opacity: .62; }
.neural-lines i { position: absolute; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, rgba(200,255,46,0), var(--lime), rgba(200,255,46,0)); box-shadow: 0 0 12px rgba(200,255,46,.7); }
.neural-lines i:nth-child(1) { top: 30px; transform: rotate(16deg); }.neural-lines i:nth-child(2) { top: 90px; transform: rotate(-9deg); }.neural-lines i:nth-child(3) { top: 148px; transform: rotate(7deg); }

.cinema-scroll { position: relative; height: 430vh; margin: 80px 0 0; background: var(--ink); color: #fff; }
.cinema-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(360px, .42fr) minmax(0, 1fr); overflow: hidden; }
.cinema-copy { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: 96px 5vw 70px max(24px, calc((100vw - 1460px)/2)); border-right: 1px solid rgba(255,255,255,.13); background: var(--ink); }
.cinema-label { position: absolute; top: 42px; left: max(24px, calc((100vw - 1460px)/2)); right: 3vw; display: flex; align-items: center; justify-content: space-between; margin: 0; color: rgba(255,255,255,.5); font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.cinema-label b { color: var(--lime); font-family: var(--display); font-size: 25px; letter-spacing: -.02em; }
.cinema-stages { position: relative; height: 390px; }
.cinema-stage { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(30px); pointer-events: none; transition: opacity .38s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.cinema-stage.is-active { opacity: 1; transform: translateY(0); }
.cinema-stage > p { margin: 0 0 22px; color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .19em; }
.cinema-stage h2 { margin: 0; font-size: clamp(44px, 4vw, 72px); line-height: .92; }
.cinema-stage h2 em { color: #fff; }
.cinema-stage > span { max-width: 430px; margin-top: 28px; color: rgba(255,255,255,.62); font-size: 15px; line-height: 1.6; }
.cinema-progress { position: absolute; left: max(24px, calc((100vw - 1460px)/2)); right: 3vw; bottom: 42px; height: 2px; background: rgba(255,255,255,.15); }
.cinema-progress i { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left center; }
.cinema-canvas-wrap { position: relative; min-width: 0; height: 100%; overflow: hidden; background: #1a1915; }
#motion-canvas, .canvas-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
#motion-canvas { z-index: 2; }
.canvas-fallback { z-index: 1; }
.frames-ready .canvas-fallback { opacity: 0; }
.cinema-canvas-wrap::after { content: ""; position: absolute; z-index: 3; inset: 0; border: 22px solid var(--ink); border-left-width: 0; pointer-events: none; }
.canvas-meta { position: absolute; z-index: 4; left: 30px; right: 34px; bottom: 34px; display: flex; justify-content: space-between; color: rgba(255,255,255,.58); font-family: Consolas, monospace; font-size: 9px; letter-spacing: .15em; pointer-events: none; }

.inside { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(50px, 7vw, 110px); align-items: start; }
.inside-intro { position: sticky; top: 130px; }
.inside-intro p:last-child { max-width: 390px; margin: 34px 0 0; color: var(--muted); font-family: var(--serif); font-size: 19px; line-height: 1.55; }
.product-demo { min-width: 0; }
.demo-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.demo-tabs button { padding: 11px 15px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.44); cursor: pointer; font-size: 11px; font-weight: 800; transition: background .2s ease, color .2s ease, transform .2s ease; }
.demo-tabs button:hover { transform: translateY(-2px); }
.demo-tabs button.is-active { border-color: var(--ink); color: var(--lime); background: var(--ink); }
.demo-window { overflow: hidden; border: 1px solid rgba(17,18,15,.18); border-radius: 28px; background: white; box-shadow: 0 36px 90px rgba(57,45,24,.18); }
.window-bar { height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid #e9e4d9; background: #fbfaf6; }
.window-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d2c9b9; }.window-bar i:first-child { background: var(--gold); }.window-bar i:nth-child(2) { background: var(--lime); }
.window-bar span { margin-left: auto; margin-right: auto; color: #8b877f; font-family: Consolas, monospace; font-size: 9px; }
.screen-viewport { position: relative; height: min(43vw, 620px); min-height: 420px; overflow: hidden; background: #fff; }
.screen-viewport::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.92)); pointer-events: none; }
.screen-viewport img { width: 100%; min-height: 100%; object-fit: cover; object-position: top left; display: block; transition: opacity .24s ease, transform .48s cubic-bezier(.2,.8,.2,1); }
.screen-viewport img.is-changing { opacity: 0; transform: scale(.985) translateY(8px); }
.demo-caption { display: grid; grid-template-columns: 70px 1fr; gap: 22px; padding: 28px 10px 0; }
.demo-caption > span { font-family: var(--display); font-size: 58px; line-height: 1; color: var(--gold); }
.demo-caption h3 { margin: 4px 0 7px; font-family: var(--display); font-size: 28px; text-transform: uppercase; }
.demo-caption p { max-width: 600px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.academy { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(420px,.8fr) minmax(600px,1.2fr); gap: clamp(50px,7vw,110px); padding: 150px max(24px, calc((100vw - 1460px)/2)); background: #e8dfcd; }
.academy-copy h2 { margin: 0; font-size: clamp(56px, 6.3vw, 100px); line-height: .9; }
.academy-copy > p:not(.kicker) { max-width: 580px; margin: 32px 0 0; color: #5b574e; font-family: var(--serif); font-size: 18px; line-height: 1.6; }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 34px 0 0; padding: 0; list-style: none; border: 1px solid rgba(17,18,15,.18); }
.check-list li { padding: 16px; border: 1px solid rgba(17,18,15,.08); background: rgba(255,255,255,.28); font-size: 12px; font-weight: 700; }
.check-list li::before { content: "✓"; margin-right: 10px; color: #3d8f32; }
.lesson-player { position: relative; align-self: center; }
.player-shell { overflow: hidden; border-radius: 30px; color: #fff; background: var(--ink); box-shadow: 0 42px 110px rgba(33,25,12,.28); }
.player-top { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: rgba(255,255,255,.68); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.player-top span:last-child { color: var(--lime); }
.player-ratio { position: relative; padding-top: 56.25%; background: #000; }
.player-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; background: #eee; cursor: pointer; }
.video-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,13,11,.12), rgba(12,13,11,.48)); }
.video-poster > img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); filter: saturate(.85) contrast(1.02); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.video-poster:hover > img { transform: scale(1.08); }
.video-poster > span { position: absolute; z-index: 2; right: 8%; top: 50%; display: grid; justify-items: center; gap: 7px; transform: translateY(-50%); color: #fff; text-align: center; }
.video-poster i { display: grid; place-items: center; width: 68px; height: 68px; padding-left: 4px; border-radius: 50%; color: var(--ink); background: var(--lime); box-shadow: 0 0 0 12px rgba(200,255,46,.14); font-style: normal; }
.video-poster b { font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.video-poster small { color: rgba(255,255,255,.65); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.lesson-card { position: absolute; left: -42px; bottom: -48px; display: grid; gap: 4px; min-width: 290px; padding: 19px 22px; border-radius: 17px; color: #fff; background: var(--ink); box-shadow: 0 22px 60px rgba(0,0,0,.22); }
.lesson-card span, .lesson-card small { color: var(--gold-2); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.lesson-card b { font-family: var(--serif); font-size: 18px; font-weight: 400; }

.toolkit { padding-top: 170px; }
.toolkit-head { display: grid; grid-template-columns: .65fr 1.35fr; align-items: start; margin-bottom: 80px; }
.tool-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 220px; gap: 14px; }
.tool { position: relative; overflow: hidden; padding: 30px; border: 1px solid var(--line); border-radius: 28px; background: var(--paper-2); }
.tool > p { margin: 0 0 38px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.tool h3 { max-width: 500px; margin: 0 0 12px; font-family: var(--display); font-size: clamp(30px,3vw,46px); line-height: .95; text-transform: uppercase; }
.tool > span { display: block; max-width: 450px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.tool-ai { grid-column: span 7; grid-row: span 2; min-height: 454px; color: #fff; background: var(--ink); }
.tool-ai > p, .tool-ai > span { color: rgba(255,255,255,.58); }
.tool-ai h3 { color: var(--lime); font-size: clamp(52px, 5vw, 78px); }
.tool-chat { grid-column: span 5; grid-row: span 2; background: #fff7e8; }
.tool-crm { grid-column: span 5; }
.tool-forum { grid-column: span 4; color: #fff; background: #86310f; border-color: #86310f; }
.tool-forum > p, .tool-forum > span { color: rgba(255,255,255,.68); }
.tool-vpn { grid-column: span 3; background: var(--lime); }
.tool-vpn > p, .tool-vpn > span { color: rgba(17,18,15,.65); }
.ai-orb { position: absolute; right: -46px; bottom: -76px; display: grid; place-items: center; width: 310px; height: 310px; border-radius: 50%; border: 1px solid rgba(200,255,46,.46); color: var(--lime); font-family: var(--display); font-size: 78px; background: radial-gradient(circle at 35% 30%, #344610, #11120f 65%); box-shadow: inset 0 0 80px rgba(200,255,46,.17), 0 0 80px rgba(200,255,46,.12); }
.ai-orb i { position: absolute; inset: 33px; border: 1px dashed rgba(200,255,46,.46); border-radius: 50%; animation: orbit 12s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.tool-chat blockquote { position: absolute; left: 30px; right: 30px; bottom: 28px; margin: 0; padding: 20px 22px; border-radius: 20px 20px 20px 4px; color: #fff; background: #223c9b; font-family: var(--serif); font-size: 20px; }
.crm-flow { position: absolute; top: 42px; right: 24px; display: flex; align-items: center; gap: 12px; }
.crm-flow i { width: 24px; height: 24px; border-radius: 50%; border: 5px solid #fff; background: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.crm-flow i::after { content: ""; display: block; width: 12px; height: 2px; margin: 6px 0 0 23px; background: var(--gold); }
.tool-forum strong { position: absolute; right: 24px; bottom: 17px; font-family: var(--display); font-size: 48px; line-height: .75; color: var(--gold-2); text-align: right; }
.tool-forum small { font-family: var(--sans); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.shield { position: absolute; right: -15px; bottom: -30px; display: grid; place-items: center; width: 145px; height: 165px; border: 12px solid var(--ink); border-radius: 60px 60px 85px 85px; font-family: var(--display); font-size: 85px; transform: rotate(8deg); }

.market { padding-top: 170px; }
.market-head { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 50px; margin-bottom: 58px; }
.market-head > p { max-width: 460px; margin: 0 0 5px; color: var(--muted); font-family: var(--serif); font-size: 18px; line-height: 1.55; }
.market-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(310px, 1fr); gap: 14px; overflow-x: auto; padding: 4px 0 24px; scroll-snap-type: x mandatory; scrollbar-color: var(--gold) transparent; }
.product-card { scroll-snap-align: start; min-width: 0; padding: 10px 10px 18px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.42); }
.product-image { height: 470px; overflow: hidden; border-radius: 20px; background: #0b0a08; }
.product-image.light { background: #fff; }
.product-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.product-card:hover img { transform: scale(1.045); }
.product-card > p { margin: 20px 10px 11px; color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.product-card h3 { min-height: 52px; margin: 0 10px 8px; font-family: var(--display); font-size: 23px; line-height: 1; text-transform: uppercase; }
.product-card > span { display: block; min-height: 38px; margin: 0 10px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.product-card footer { display: flex; align-items: center; justify-content: space-between; margin: 18px 10px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.product-card footer b { font-family: var(--display); font-size: 25px; }
.product-card footer button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--ink); color: var(--lime); cursor: pointer; }

.referral { width: 100%; max-width: none; display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; padding: 150px max(24px, calc((100vw - 1460px)/2)) 90px; color: #fff; background: var(--ink); }
.referral-copy h2 { margin: 0; font-size: clamp(55px, 6vw, 94px); line-height: .9; }
.referral-copy h2 em { color: var(--lime); }
.referral-copy > p:not(.kicker) { max-width: 560px; margin: 34px 0 0; color: rgba(255,255,255,.66); font-family: var(--serif); font-size: 18px; line-height: 1.6; }
.ref-note { display: grid; gap: 7px; max-width: 510px; margin-top: 34px; padding: 20px; border: 1px solid rgba(200,255,46,.28); border-radius: 18px; background: rgba(200,255,46,.06); }
.ref-note b { color: var(--lime); font-family: var(--display); font-size: 25px; }
.ref-note span { color: rgba(255,255,255,.54); font-size: 11px; line-height: 1.45; }
.referral-proof { min-width: 0; }
.balance-shot { overflow: hidden; padding: 8px; border-radius: 26px; background: #eee3cc; box-shadow: 0 36px 100px rgba(0,0,0,.38); transform: rotate(1deg); }
.balance-shot img { width: 100%; display: block; border-radius: 19px; }
.ref-chain { display: grid; grid-template-columns: 72px 1fr 72px 1fr 72px 1fr 72px; align-items: center; gap: 8px; margin-top: 42px; }
.ref-chain > div { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: #1e201a; }
.ref-chain .you { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.ref-chain b { font-family: var(--display); font-size: 20px; }
.ref-chain span { color: rgba(255,255,255,.48); font-size: 8px; text-transform: uppercase; }
.ref-chain i { height: 1px; background: linear-gradient(90deg, var(--lime), rgba(255,255,255,.2)); }
.rates { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-top: 20px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.14); }
.rates article { min-height: 110px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 16px; background: var(--ink); }
.rates span { color: rgba(255,255,255,.48); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.rates b { color: var(--gold-2); font-family: var(--display); font-size: clamp(19px,2vw,27px); }
.referral-legal { grid-column: 1/-1; max-width: 1100px; margin: 0; color: rgba(255,255,255,.38); font-size: 10px; line-height: 1.55; }

.journey { padding-top: 170px; }
.journey-head { display: grid; grid-template-columns: .55fr 1.45fr; margin-bottom: 80px; }
.journey-line { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.journey-line::before { content: ""; position: absolute; top: 37px; left: 7%; right: 7%; height: 2px; background: var(--ink); }
.journey-line li { position: relative; z-index: 1; padding: 0 24px; }
.journey-line li:first-child { padding-left: 0; }.journey-line li:last-child { padding-right: 0; }
.journey-line b { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 28px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); font-family: var(--display); font-size: 25px; }
.journey-line li:nth-child(3) b { color: var(--ink); background: var(--lime); box-shadow: 0 0 0 10px rgba(200,255,46,.2); }
.journey-line h3 { margin: 0 0 9px; font-family: var(--display); font-size: 25px; text-transform: uppercase; }
.journey-line p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.final-cta { position: relative; min-height: 86svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 110px 24px 80px; color: #fff; background: #0c0d0b; text-align: center; }
.final-cta > *:not(.final-glow) { position: relative; z-index: 2; }
.final-cta h2 { max-width: 1200px; margin: 0; font-size: clamp(64px, 8vw, 126px); line-height: .86; }
.final-cta h2 em { color: var(--lime); }
.final-cta > p:not(.kicker) { max-width: 700px; margin: 34px auto; color: rgba(255,255,255,.58); font-family: var(--serif); font-size: 18px; line-height: 1.6; }
.final-glow { position: absolute; width: min(80vw, 1100px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(200,255,46,.16), rgba(200,255,46,0) 66%); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .7; } }
.final-sign { margin-top: 85px; color: rgba(255,255,255,.24); font-family: var(--display); font-size: clamp(32px, 5vw, 70px); font-weight: 900; letter-spacing: -.03em; }
.final-sign i { color: var(--gold); font-family: var(--serif); font-weight: 400; }
.footer { min-height: 86px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 24px; padding: 20px max(24px, calc((100vw - 1460px)/2)); border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.48); background: #0c0d0b; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.footer p { margin: 0; }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal[data-delay="1"] { transition-delay: .12s; }.reveal[data-delay="2"] { transition-delay: .2s; }.reveal[data-delay="3"] { transition-delay: .28s; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1180px) {
  .topbar { grid-template-columns: 1fr auto; }.nav { display: none; }
  .hero { grid-template-columns: minmax(430px,.9fr) minmax(480px,1.1fr); }
  .hero-frame { min-height: 520px; }
  .cinema-sticky { grid-template-columns: 38% 62%; }
  .inside { grid-template-columns: .62fr 1.38fr; }
  .tool-chat blockquote { font-size: 17px; }
  .rates { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 840px) {
  .topbar { top: 10px; width: calc(100% - 20px); height: 60px; border-radius: 16px; }.top-cta { padding: 12px 13px; }.top-cta { font-size: 0; }.top-cta span { font-size: 18px; }.wordmark small { display: none; }
  .section { width: min(100% - 32px, 720px); padding: 96px 0; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 44px; padding: 110px 16px 60px; background: linear-gradient(160deg, #fbf8f1 0 54%, #e9e0cf 54% 100%); }
  .hero h1 { font-size: clamp(62px, 19vw, 94px); }.hero-copy { padding: 0; }.hero-actions { flex-direction: column; align-items: stretch; }.button-dark { width: 100%; }.text-link { align-self: flex-start; }.hero-proof { grid-template-columns: 1fr; }.hero-proof li { min-height: 74px; border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; }.hero-proof li:last-child { border-bottom: 0; }
  .hero-frame { height: 68svh; min-height: 500px; border-radius: 30px; }.hero-frame::before { border-radius: 19px; }.hero-frame img { object-position: 58% center; }.visual-label { max-width: 55%; }.label-whieda { left: 24px; bottom: 26px; }.label-bmc { top: 26px; right: 24px; }.image-note { text-align: left; margin-left: 4px; }
  .ticker div { font-size: 15px; }
  .section-head, .toolkit-head, .market-head, .journey-head { grid-template-columns: 1fr; gap: 20px; }.section-head h2, .inside-intro h2, .toolkit-head h2, .market-head h2, .journey-head h2 { font-size: clamp(50px, 15vw, 74px); }
  .section-head h2, .inside-intro h2, .toolkit-head h2, .market-head h2, .journey-head h2, .academy-copy h2, .referral-copy h2 { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
  .dual-grid { grid-template-columns: 1fr; }.dual-panel { min-height: 580px; padding: 32px; }.whieda-panel { border-radius: 30px 30px 0 0; }.bmc-panel { border-radius: 0 0 30px 30px; }.core-link { min-height: 118px; background: linear-gradient(90deg, #e9d8b3, #11120f); }.core-link > div { width: 78px; height: 78px; }.core-link p { display: none; }.dual-panel ul { left: 32px; right: 32px; bottom: 28px; }.dual-panel h3 { margin-top: 70px; }
  .cinema-scroll { height: 360vh; margin-top: 40px; }.cinema-sticky { grid-template-columns: 1fr; grid-template-rows: 43% 57%; }.cinema-copy { padding: 62px 20px 22px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }.cinema-label { top: 18px; left: 20px; right: 20px; }.cinema-stages { height: 100%; }.cinema-stage h2 { font-size: clamp(38px, 10vw, 55px); }.cinema-stage > p { margin-bottom: 12px; }.cinema-stage > span { margin-top: 14px; font-size: 12px; line-height: 1.4; }.cinema-progress { left: 20px; right: 20px; bottom: 12px; }.cinema-canvas-wrap::after { border-width: 12px; }.canvas-meta { left: 20px; right: 20px; bottom: 20px; font-size: 7px; }
  .inside { grid-template-columns: 1fr; }.inside-intro { position: static; }.screen-viewport { height: 58vw; min-height: 310px; }.demo-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }.demo-tabs button { flex: 0 0 auto; }.demo-caption { grid-template-columns: 52px 1fr; }.demo-caption > span { font-size: 44px; }
  .academy { grid-template-columns: 1fr; padding: 100px 16px 130px; }.academy-copy h2 { font-size: clamp(54px, 15vw, 76px); }.check-list { grid-template-columns: 1fr; }.lesson-card { left: 16px; right: 16px; bottom: -64px; min-width: 0; }
  .tool-grid { display: block; }.tool { min-height: 290px; margin-bottom: 12px; }.tool-ai { min-height: 440px; }.tool-chat { min-height: 400px; }.tool-forum, .tool-vpn { min-height: 330px; }.tool > p { margin-bottom: 28px; }
  .market-row { grid-auto-columns: 83vw; margin-right: -16px; }.market-head > p { font-size: 16px; }.product-image { height: 440px; }
  .referral { grid-template-columns: 1fr; gap: 48px; padding: 100px 16px 70px; }.referral-copy h2 { font-size: clamp(52px, 14vw, 75px); }.ref-chain { grid-template-columns: 52px 1fr 52px 1fr 52px 1fr 52px; }.ref-chain > div { width: 52px; height: 52px; }.rates { grid-template-columns: repeat(2, 1fr); }.rates article { min-height: 96px; }.rates b { font-size: 20px; }
  .academy, .referral { width: 100%; max-width: none; margin: 0; }
  .journey-line { grid-template-columns: 1fr; gap: 0; }.journey-line::before { top: 0; bottom: 0; left: 36px; right: auto; width: 2px; height: auto; }.journey-line li { min-height: 142px; padding: 0 0 25px 98px; }.journey-line li:first-child { padding-left: 98px; }.journey-line b { position: absolute; left: 0; width: 74px; height: 74px; }
  .final-cta h2 { font-size: clamp(60px, 17vw, 92px); }.footer { grid-template-columns: 1fr auto; }.footer p:nth-child(2) { display: none; }
  .motion-hero { height: 520vh; }
  .motion-hero-sticky { min-height: 620px; }
  #hero-canvas-desktop { display: none; }
  #hero-canvas-mobile { display: block; }
  .hero-film-fallback img { object-position: center top; }
  .hero-film-shade { background: linear-gradient(180deg, rgba(17,18,15,0) 0 46%, rgba(17,18,15,.08) 54%, rgba(247,243,234,.88) 63%, rgba(247,243,234,.99) 74% 100%); }
  .hero-film-meta { top: 82px; right: 18px; bottom: auto; color: rgba(255,255,255,.78); font-size: 7px; }
  .hero-story { position: absolute; inset: auto 0 0; width: 100%; height: clamp(340px, 45svh, 410px); padding: 18px 18px 18px; }
  .hero-story-top { min-height: 28px; }
  .hero-eyebrow { font-size: 8px; letter-spacing: .12em; }
  .hero-stage-count { font-size: 21px; }
  .hero-stage { padding: 34px 0 12px; justify-content: flex-start; }
  .hero-stage > p { margin-bottom: 10px; font-size: 8px; letter-spacing: .12em; }
  .hero-stage h1, .hero-stage h2 { max-width: 100%; font-size: clamp(40px, 11.3vw, 52px); line-height: .86; }
  .hero-stage > span { max-width: 100%; margin-top: 12px; font-size: 13px; line-height: 1.38; }
  .hero-stage .hero-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 14px; }
  .hero-stage .button-lime { width: auto; min-width: 0; min-height: 48px; padding: 0 15px; border-radius: 13px; font-size: 11px; }
  .hero-stage .text-link { align-self: center; padding: 10px 0; font-size: 10px; white-space: nowrap; }
}

@media (max-width: 480px) {
  .wordmark-orbit { width: 34px; height: 34px; flex-basis: 34px; }.wordmark b { font-size: 14px; }
  .hero-frame { height: 560px; }.label-bmc { max-width: 64%; }.visual-label span { font-size: 7px; }
  .product-image { height: 420px; }.rates { grid-template-columns: 1fr 1fr; }.rates article { padding: 16px 12px; }
  .section-head h2, .inside-intro h2, .toolkit-head h2, .market-head h2, .journey-head h2 { font-size: 13vw; }
  .referral-copy h2 { font-size: 11.2vw; overflow-wrap: normal; hyphens: none; }
  .hero-film-meta span:first-child { display: none; }
  .hero-story { height: clamp(350px, 46svh, 400px); }
  .hero-stage h1, .hero-stage h2 { font-size: clamp(39px, 11.1vw, 49px); }
  .hero-stage > span { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .cinema-scroll { height: 120vh; }.cinema-stage { display: none; }.cinema-stage:first-child { display: flex; opacity: 1; transform: none; }
  #motion-canvas { display: none; }.canvas-fallback { opacity: 1 !important; }
  .motion-hero { height: 100svh; min-height: 720px; }
  #hero-canvas-desktop, #hero-canvas-mobile { display: none; }
  .hero-stage { display: none; }
  .hero-stage:first-child { display: flex; opacity: 1; transform: none; }
}