@font-face { font-family:"Geist Pixel Circle"; src:url("fonts/GeistPixel-Circle.woff2") format("woff2"); font-weight:400; font-display:swap; }
:root { --bg:#000000; --text:#ffffff; --muted:#8e8e8e; --nav-text:#2e2e2e; --pill-dark:#28282a; --sign-in-text:#c8c8c8; --nav-shadow:0 4px 14px rgba(0,0,0,.16); --trust-bg:#28282a; --trust-border:rgba(255,255,255,.4); --trust-text:#c4c2c3; --font-sans:"Inter","Segoe UI",system-ui,sans-serif; --font-display:"BubbledotICG-FinePos","Geist Pixel Circle",monospace; }
* { box-sizing:border-box; } html,body { width:100%; min-height:100%; } body { margin:0; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a { color:inherit; text-decoration:none; } button { font:inherit; }
.bg { position:fixed; inset:0; overflow:hidden; background:#111; } .bg::after { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.24) 45%,rgba(0,0,0,.5)); pointer-events:none; } .bg-video { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; transform:translateZ(0); will-change:opacity; transition:opacity .08s linear; } .bg-video.is-active { z-index:1; opacity:1; }
.page { position:relative; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; padding:clamp(16px,2.4vh,28px) clamp(14px,3vw,32px); }.header { position:relative; z-index:1; flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:clamp(18px,2.8vw,28px); width:min(760px,100%); margin:0 auto; animation:slideDown .7s cubic-bezier(.22,1,.36,1) both; }
.logo { display:grid; flex:0 0 auto; place-items:center; width:clamp(40px,4.4vw,46px); height:clamp(40px,4.4vw,46px); overflow:hidden; border-radius:50%; background:#fff; box-shadow:var(--nav-shadow); transition:transform .25s ease; } .logo:hover { transform:scale(1.04); } .logo img { width:72%; height:72%; object-fit:contain; }
.desktop-nav { display:flex; flex:1 1 auto; align-items:stretch; justify-content:space-around; max-width:430px; height:clamp(44px,5.2vw,48px); padding:4px 8px; border-radius:999px; background:#fff; box-shadow:var(--nav-shadow); } .desktop-nav a { position:relative; display:grid; place-items:center; padding:0 7px; color:var(--nav-text); font-size:clamp(13px,1.4vw,15px); font-weight:500; letter-spacing:-.01em; opacity:.5; transition:opacity .2s ease; white-space:nowrap; } .desktop-nav a:hover { opacity:.75; } .desktop-nav a.active { opacity:1; } .desktop-nav a.active::after { content:""; position:absolute; bottom:5px; width:3px; height:3px; border-radius:50%; background:#000; box-shadow:-5px 0 #000,5px 0 #000; }
.signin { display:inline-grid; place-items:center; height:clamp(44px,5.2vw,48px); padding:0 20px; border-radius:999px; background:var(--pill-dark); color:var(--sign-in-text); box-shadow:var(--nav-shadow); font-size:clamp(13px,1.4vw,15px); font-weight:500; white-space:nowrap; transition:background .2s ease,color .2s ease,transform .2s ease; } .signin:hover { background:#323234; color:#fff; transform:translateY(-1px); }.menu-toggle { display:none; }
.hero { position:relative; z-index:1; display:grid; flex:1 1 auto; min-height:0; place-items:center; text-align:center; } .hero-content { display:flex; flex-direction:column; align-items:center; width:100%; max-width:900px; }.trust-row { --trust-size:clamp(36px,4.5vw,42px); display:inline-flex; align-items:center; margin-bottom:clamp(16px,2.5vh,26px); } .avatar { display:grid; place-items:center; width:var(--trust-size); height:var(--trust-size); padding:5px; border:1px solid var(--trust-border); border-radius:50%; background:var(--trust-bg); transition:transform .35s ease; } .avatar + .avatar { margin-left:calc(var(--trust-size) * -.42); } .avatar span { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:#fff; color:#111; font-size:calc(var(--trust-size) * .34); } .a1 { z-index:1; } .a2 { z-index:2; } .a3 { z-index:4; } .a1:hover { transform:translateY(-2px); }.a2:hover { transform:translateY(-4px); }.a3:hover { transform:translateY(-2px); }.trust-pill { z-index:3; display:flex; align-items:center; height:var(--trust-size); margin-left:calc(var(--trust-size) * -.42); padding:0 15px 0 calc(var(--trust-size) * .58); border:1px solid var(--trust-border); border-radius:999px; background:var(--trust-bg); color:var(--trust-text); font-size:clamp(12px,1.4vw,13.5px); font-weight:500; white-space:nowrap; }
.headline { margin:0; overflow:hidden; color:#fff; font-family:var(--font-display); font-size:clamp(28px,6.2vw,80px); font-weight:400; letter-spacing:-.04em; line-height:1.18; -webkit-text-stroke:.7px rgba(0,0,0,.9); paint-order:stroke fill; text-shadow:none; } .headline span { display:block; overflow:hidden; white-space:nowrap; opacity:0; transform:translateY(14px); animation:headlineFade .85s cubic-bezier(.22,1,.36,1) forwards; } .headline span:nth-child(1) { animation-delay:.12s; } .headline span:nth-child(2) { animation-delay:.3s; }.headline span:nth-child(3) { animation-delay:.48s; }.subhead { width:min(500px,92%); margin:clamp(15px,2.6vh,23px) auto 0; color:#d0d0d0; font-size:clamp(calc(13.5px + 2pt),calc(1.55vw + 2pt),calc(16.5px + 2pt)); font-weight:400; line-height:1.55; opacity:.8; }.cta { margin-top:clamp(18px,3vh,29px); padding:clamp(11px,1.6vh,13px) clamp(22px,3vw,28px); border-radius:999px; background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 22px rgba(255,255,255,.32),0 0 44px rgba(255,255,255,.12); color:#000; font-size:clamp(13.5px,1.5vw,14.5px); font-weight:600; transition:transform .22s ease,box-shadow .22s ease; } .cta:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 28px rgba(255,255,255,.46),0 0 52px rgba(255,255,255,.2); }
.stats { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); width:min(920px,100%); margin:0 auto; } .stat { display:flex; justify-content:center; align-items:center; gap:12px; } .stat-symbol { width:clamp(22px,3vw,33px); color:#fff; font-family:var(--font-display); font-size:clamp(22px,3vw,33px); line-height:1; text-align:center; } .stat div { display:grid; gap:3px; } .stat strong { color:#fff; font-size:clamp(18px,2.2vw,26px); font-weight:500; letter-spacing:-.025em; line-height:1; font-variant-numeric:tabular-nums; } .stat div span { color:var(--muted); font-size:clamp(11px,1.2vw,12.5px); white-space:nowrap; }.anim { opacity:0; filter:blur(6px); transform:translateY(22px) scale(.98); animation:reveal .85s cubic-bezier(.22,1,.36,1) var(--d,0s) forwards; } .cta.anim { animation-name:revealPulse; }
.mobile-overlay { position:fixed; z-index:5; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .mobile-menu { position:fixed; z-index:6; top:84px; left:14px; right:14px; display:grid; gap:3px; padding:22px 18px 20px; border-radius:28px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.45); color:var(--nav-text); } .mobile-menu[hidden],.mobile-overlay[hidden] { display:none !important; } .mobile-menu a { position:relative; padding:13px 14px; font-size:16px; font-weight:500; opacity:.65; } .mobile-menu a.active { opacity:1; } .mobile-menu a.active::after { content:""; position:absolute; bottom:8px; left:28px; width:3px; height:3px; border-radius:50%; background:#000; box-shadow:-5px 0 #000,5px 0 #000; } .mobile-menu .signin { width:100%; margin-top:8px; color:var(--sign-in-text); } body.menu-open .mobile-overlay { animation:overlayIn .28s both; } body.menu-open .mobile-menu { animation:menuIn .38s cubic-bezier(.22,1,.36,1) both; } body.menu-open .mobile-menu a { animation:linkIn .35s cubic-bezier(.22,1,.36,1) both; } body.menu-open .mobile-menu a:nth-child(1){animation-delay:.06s} body.menu-open .mobile-menu a:nth-child(2){animation-delay:.1s} body.menu-open .mobile-menu a:nth-child(3){animation-delay:.14s} body.menu-open .mobile-menu a:nth-child(4){animation-delay:.18s} body.menu-open .mobile-menu a:nth-child(5){animation-delay:.22s}
@keyframes slideDown { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:none; } } @keyframes reveal { to { opacity:1; filter:blur(0); transform:none; } } @keyframes revealPulse { 0% { opacity:0; filter:blur(6px); transform:translateY(22px) scale(.9); } 72% { opacity:1; filter:blur(0); transform:translateY(-1px) scale(1.035); } 100% { opacity:1; filter:blur(0); transform:none; } } @keyframes headlineFade { to { opacity:1; transform:none; } } @keyframes overlayIn { from { opacity:0; } to { opacity:1; } } @keyframes menuIn { from { opacity:0; transform:translateY(-14px) scale(.98); } to { opacity:1; transform:none; } } @keyframes linkIn { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@media (max-width:720px) { .page { padding:16px 14px max(16px,env(safe-area-inset-bottom)); } .header { justify-content:space-between; width:100%; } .logo,.menu-toggle { width:48px; height:48px; } .desktop-nav,.desktop-signin { display:none; } .menu-toggle { display:grid; place-content:center; gap:5px; border:0; border-radius:50%; background:var(--pill-dark); color:#fff; cursor:pointer; transition:background .25s ease; } .menu-toggle span { display:block; width:18px; height:1.5px; border-radius:999px; background:currentColor; transition:transform .25s ease,opacity .2s ease; } body.menu-open .menu-toggle { position:relative; z-index:7; background:#fff; color:#000; } body.menu-open .menu-toggle span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); } body.menu-open .menu-toggle span:nth-child(2) { opacity:0; } body.menu-open .menu-toggle span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); } .hero-content { max-width:100%; } .headline { letter-spacing:-.08em; line-height:1.05; } .stats { grid-template-columns:repeat(2,1fr); gap:18px 8px; padding-top:12px; } .stat { justify-content:flex-start; gap:9px; } .desktop-break { display:none; } }
@media (max-width:700px) and (max-height:760px) { .trust-row { margin-bottom:10px; } .subhead { margin-top:12px; } .cta { margin-top:14px; } } @media (max-width:420px) { .trust-row { --trust-size:34px; } .trust-pill { padding-right:10px; font-size:12px; } .headline { font-size:clamp(26px,10vw,40px); letter-spacing:-.09em; line-height:1.04; } .subhead { width:98%; } .stat div span { white-space:normal; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } .anim,.headline span { opacity:1; filter:none; transform:none; } }

/* Long-form course content: the panels stay translucent so the video remains part of every section. */
.course { position:relative; z-index:1; width:min(1160px,calc(100% - 48px)); margin:0 auto; padding:28px 0 82px; display:grid; gap:18px; }.course-section { padding:clamp(28px,5vw,62px); }.glass { border:1px solid rgba(255,255,255,.19); border-radius:28px; background:linear-gradient(135deg,rgba(26,28,32,.72),rgba(6,7,9,.58) 55%,rgba(76,83,99,.31)); box-shadow:inset 0 1px rgba(255,255,255,.14),0 22px 70px rgba(0,0,0,.3); backdrop-filter:blur(22px) saturate(115%); -webkit-backdrop-filter:blur(22px) saturate(115%); }.eyebrow { margin:0; color:#c7c7c7; font-size:11px; font-weight:600; letter-spacing:.15em; }.course h2 { max-width:820px; margin:15px 0 0; font-family:var(--font-display); font-size:clamp(38px,5.3vw,68px); font-weight:400; letter-spacing:-.05em; line-height:1.04; }.course h2 em { color:#bfc4cf; font-style:normal; }.copy { max-width:660px; margin:22px 0 0; color:#d3d3d3; font-size:16px; line-height:1.68; }.track-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:38px; }.track { min-height:234px; padding:25px; border:1px solid rgba(255,255,255,.14); border-radius:17px; background:rgba(9,10,12,.43); box-shadow:inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); transition:transform .3s ease,border-color .3s ease,background .3s ease; }.track:hover { transform:translateY(-4px); border-color:rgba(232,237,255,.55); background:rgba(43,48,59,.52); }.track > span { color:#acb4c3; font-size:11px; font-weight:600; letter-spacing:.1em; }.track h3 { margin:35px 0 0; font-size:20px; font-weight:500; letter-spacing:-.035em; line-height:1.12; }.track p { margin:13px 0 0; color:#c0c0c0; font-size:14px; line-height:1.52; }.track b { display:block; margin-top:17px; color:#f0f0f0; font-size:12px; font-weight:500; line-height:1.45; }.trioma { display:grid; grid-template-columns:1.08fr .92fr; align-items:end; gap:50px; }.outline-action { display:inline-flex; align-items:center; justify-content:center; min-height:45px; margin-top:26px; padding:0 19px; border:1px solid rgba(255,255,255,.44); border-radius:999px; background:rgba(255,255,255,.06); color:#fff; font-size:14px; font-weight:500; transition:background .22s ease,border-color .22s ease,transform .22s ease; }.outline-action:hover { transform:translateY(-2px); border-color:#fff; background:rgba(255,255,255,.14); }.steps { padding:0; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:17px; list-style:none; background:rgba(255,255,255,.08); }.steps li { display:grid; grid-template-columns:40px 1fr; gap:14px; padding:22px; background:rgba(8,9,11,.55); }.steps li+li { border-top:1px solid rgba(255,255,255,.13); }.steps b { color:#aeb8cb; font-size:12px; }.steps strong,.steps span { display:block; }.steps strong { color:#fff; font-size:15px; }.steps span { margin-top:5px; color:#bcbcbc; font-size:13px; line-height:1.45; }.comparison { margin-top:38px; border:1px solid rgba(255,255,255,.16); border-radius:16px; overflow:hidden; background:rgba(8,9,11,.43); }.comparison-row { display:grid; grid-template-columns:1fr 150px 150px; align-items:center; min-height:58px; border-top:1px solid rgba(255,255,255,.12); color:#d3d3d3; font-size:14px; }.comparison-row:first-child { border-top:0; }.comparison-row > * { padding:14px 18px; }.comparison-row > b { border-left:1px solid rgba(255,255,255,.12); color:#fff; font-weight:500; }.comparison-row.heading { color:#fff; background:rgba(255,255,255,.08); font-size:12px; letter-spacing:.08em; }.plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }.plan { padding:29px; border:1px solid rgba(255,255,255,.17); border-radius:17px; background:rgba(8,9,11,.5); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }.plan.featured { border-color:rgba(224,232,255,.65); background:linear-gradient(145deg,rgba(111,124,153,.44),rgba(9,10,13,.6)); }.plan-title { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }.plan h3 { margin:0; font-size:15px; letter-spacing:.1em; }.plan-title strong { font-size:27px; font-weight:500; letter-spacing:-.04em; }.plan > p { color:#bcbcbc; font-size:14px; }.plan ul { display:grid; gap:11px; padding:0; margin:25px 0 0; list-style:none; }.plan li { display:flex; gap:9px; color:#e0e0e0; font-size:13px; line-height:1.45; }.plan li::before { content:"✓"; color:#fff; }.plan .outline-action,.plan .cta { width:100%; margin-top:27px; }.plan .cta { border:0; cursor:pointer; }.contact-section { text-align:center; }.contact-section h2,.contact-section .copy { margin-left:auto; margin-right:auto; }.consult-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; max-width:760px; margin:32px auto 0; text-align:left; }.consult-form label { display:grid; gap:7px; color:#dedede; font-size:12px; }.consult-form small { color:#909090; }.consult-form input:not([type="checkbox"]) { width:100%; height:48px; padding:0 14px; border:1px solid rgba(255,255,255,.22); border-radius:10px; outline:none; background:rgba(0,0,0,.38); color:#fff; font:inherit; }.consult-form input:focus { border-color:rgba(255,255,255,.75); }.consent { grid-column:1/-1; display:flex !important; align-items:flex-start; grid-template-columns:auto 1fr; color:#a9a9a9 !important; line-height:1.4; }.consult-form .cta { grid-column:1/-1; justify-self:center; border:0; cursor:pointer; }.site-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:9px 22px; padding:14px 12px 0; color:#aaa; font-size:13px; text-align:center; }.site-footer a { color:#fff; }.site-footer p { flex-basis:100%; max-width:780px; margin:9px 0 0; color:#888; font-size:11px; line-height:1.55; }.reveal-section { opacity:1; transform:none; }
@media (max-width:760px) { .course { width:min(calc(100% - 28px),1160px); grid-template-columns:minmax(0,1fr); padding:14px 0 56px; gap:14px; }.course-section { min-width:0; padding:27px 20px; }.glass { border-radius:21px; }.track-grid,.plans,.trioma { grid-template-columns:1fr; }.track-grid { margin-top:27px; }.track { min-height:auto; }.trioma { gap:28px; }.comparison { min-width:0; margin-top:27px; overflow-x:auto; }.comparison-row { min-width:620px; grid-template-columns:1fr 110px 110px; font-size:12px; }.comparison-row > * { padding:12px; }.consult-form { grid-template-columns:1fr; }.consult-form .consent,.consult-form .cta { grid-column:auto; }.course h2 { font-size:clamp(34px,10vw,48px); }.copy { font-size:15px; } }

@font-face { font-family:"Matrix Sans Print"; src:url("fonts/matrix-sans-print.woff2") format("woff2"); font-display:swap; font-style:normal; font-weight:400; }
/* Matrix Sans Print is the Cyrillic-safe dotted face; Bubbledot remains only for the inherited hero metrics. */
:root { --font-display:"Matrix Sans Print","Geist Pixel Circle",monospace; }.stat-symbol { font-family:"BubbledotICG-FinePos","Geist Pixel Circle",monospace; }.stat strong { display:none; }.stat div { min-height:31px; align-content:center; }.course h2 { max-width:none; font-family:"Matrix Sans Print","Geist Pixel Circle",monospace; font-size:clamp(34px,4.6vw,59px); line-height:1.17; letter-spacing:-.035em; }.track { appearance:none; width:100%; color:inherit; text-align:left; font-family:inherit; cursor:pointer; }.track > span { min-height:24px; display:block; }.track h3 { margin-top:26px; }.track b { display:flex; justify-content:space-between; align-items:center; }.track b i { font-size:19px; font-style:normal; transition:transform .25s ease; }.track:hover b i { transform:translateX(5px); }.trioma { display:block; }.trioma-heading h2 { width:100%; max-width:100%; margin-top:18px; font-size:clamp(38px,5.4vw,72px); line-height:1.13; }.trioma-heading h2 em { white-space:nowrap; }.trioma-body { display:grid; grid-template-columns:1.08fr .92fr; align-items:end; gap:50px; margin-top:36px; }.trioma-body .copy { margin-top:0; }.plan-title { align-items:flex-start; }.plan h3 { margin:0; font-family:"Matrix Sans Print","Geist Pixel Circle",monospace; font-size:clamp(33px,4.2vw,54px); font-weight:400; line-height:.95; letter-spacing:-.04em; }.plan-title strong { padding-top:5px; white-space:nowrap; }.plan ul { gap:12px; }.plan.featured ul { gap:10px; }.track-dialog { width:min(700px,calc(100% - 32px)); max-height:min(720px,calc(100dvh - 32px)); padding:clamp(26px,5vw,48px); overflow:auto; border:1px solid rgba(255,255,255,.28); border-radius:23px; background:linear-gradient(135deg,rgba(32,35,42,.96),rgba(7,8,11,.96)); color:#fff; box-shadow:0 24px 90px rgba(0,0,0,.65); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }.track-dialog::backdrop { background:rgba(0,0,0,.63); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }.track-dialog h2 { margin:16px 44px 0 0; font-family:"Matrix Sans Print","Geist Pixel Circle",monospace; font-size:clamp(29px,4vw,46px); font-weight:400; line-height:1.15; }.dialog-close { position:absolute; top:18px; right:18px; width:35px; height:35px; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:25px; line-height:1; cursor:pointer; }.dialog-meta { margin:15px 0 0; color:#bfc4cf; font-size:14px; }.lesson-list { display:grid; gap:1px; margin-top:27px; overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:13px; background:rgba(255,255,255,.11); }.lesson-list p { display:grid; grid-template-columns:116px 1fr; gap:14px; margin:0; padding:18px; background:rgba(0,0,0,.33); color:#ddd; font-size:14px; line-height:1.45; }.lesson-list b { color:#fff; font-size:12px; letter-spacing:.04em; }
@media (max-width:760px) { .trioma-heading h2 em { white-space:normal; }.trioma-body { grid-template-columns:1fr; gap:28px; margin-top:28px; }.plan h3 { font-size:42px; }.plan-title strong { font-size:23px; }.track-dialog { padding:26px 20px; }.lesson-list p { grid-template-columns:1fr; gap:6px; } }

/* Brand and hero-metric audit pass */
.brand-lockup { display:flex; align-items:center; gap:10px; color:#fff; }.brand-lockup .logo { display:grid; flex:0 0 auto; place-items:center; width:46px; height:46px; overflow:hidden; border-radius:50%; background:#fff; color:#111; box-shadow:var(--nav-shadow); transition:transform .25s ease; }.brand-lockup .logo:hover { transform:scale(1.05); }.brand-lockup svg { width:29px; height:29px; }.brand-name { padding:7px 9px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(4,5,7,.46); box-shadow:inset 0 1px rgba(255,255,255,.1); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); color:#fff; font-size:10px; font-weight:600; letter-spacing:.075em; white-space:nowrap; }.brand-name b { color:#d7ddea; font-weight:600; }.trust-pill b { color:#fff; font-weight:600; }.header { width:min(930px,100%); }.stats { grid-template-columns:repeat(3,minmax(0,1fr)); width:min(1120px,100%); gap:0; padding:10px 0 2px; }.stat { min-height:84px; justify-content:center; gap:18px; }.stat+.stat { border-left:1px solid rgba(255,255,255,.16); }.stat-symbol { width:auto; min-width:68px; font-size:clamp(48px,5.3vw,72px); letter-spacing:-.06em; }.stat div { min-height:0; }.stat div span { max-width:150px; color:#dedede; font-size:clamp(14px,1.45vw,18px); font-weight:500; line-height:1.15; white-space:normal; }.stat strong { display:none; }
@media (max-width:720px) { .brand-lockup .logo { width:48px; height:48px; }.brand-name { display:none; }.stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding-top:17px; }.stat { min-height:72px; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; }.stat+.stat { border-left:1px solid rgba(255,255,255,.16); }.stat-symbol { min-width:0; font-size:clamp(34px,11vw,48px); line-height:.85; }.stat div span { max-width:100px; font-size:10px; line-height:1.2; }.header { width:100%; } }

/* Persistent navigation and compact final consultation step */
.page { padding-top:96px; }.header { position:fixed; top:18px; left:0; right:0; z-index:20; margin:0 auto; }.contact-section { width:min(860px,100%); justify-self:center; margin-top:36px; padding:clamp(27px,4vw,44px); }.contact-section .consult-form { margin-top:26px; }.contact-section .copy { max-width:560px; }
@media (max-width:720px) { .page { padding-top:80px; }.header { top:12px; left:14px; right:14px; width:auto; }.contact-section { width:100%; margin-top:22px; } }

/* Alignment pass: course CTA, tariff cards and persistent header */
.header { z-index:100; }.trioma-body > div:first-child { display:flex; flex-direction:column; }.trioma-body > div:first-child .outline-action { align-self:center; margin-top:30px; transform:none; border-color:rgba(255,255,255,.7); background:linear-gradient(135deg,rgba(255,255,255,.19),rgba(125,146,190,.16)); box-shadow:0 0 22px rgba(185,207,255,.17),inset 0 1px rgba(255,255,255,.2); }.trioma-body > div:first-child .outline-action:hover { transform:translateY(-2px); }.steps li { grid-template-columns:1fr; padding:22px 24px; }.plans { align-items:stretch; }.plan { display:flex; flex-direction:column; }.plan ul { flex:1; }.plan-title { min-height:60px; }.plan-title strong { font-size:clamp(30px,3.4vw,42px); }.plan .outline-action,.plan .cta { min-height:54px; margin-top:30px; padding:0 22px; line-height:1.1; text-align:center; }.plan .cta { display:inline-flex; align-items:center; justify-content:center; }.contact-section { width:100%; margin-top:52px; }
@media (max-width:760px) { .trioma-body > div:first-child .outline-action { align-self:center; transform:none; }.trioma-body > div:first-child .outline-action:hover { transform:translateY(-2px); }.steps li { padding:20px; }.contact-section { margin-top:30px; } }

/* Navigation must stay legible over every scrolling glass surface. */
.header { z-index:1000; }.tariff-note { max-width:720px; margin:21px 0 0; color:#d2d2d2; font-size:15px; line-height:1.58; }.comparison { margin-top:32px; }.comparison-row { grid-template-columns:minmax(0,1fr) 190px 190px; min-height:64px; font-size:15px; }.comparison-row > * { padding:16px 20px; }.comparison-row > b { display:flex; align-items:center; min-height:64px; }.comparison-row.heading { min-height:58px; font-size:13px; }.plans { gap:18px; margin-top:20px; }.plan { padding:34px; }.plan > p { margin-top:14px; font-size:15px; }.plan li { font-size:13.5px; }.plan-title { padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.16); }.plan-title strong { color:#fff; }.plan.featured .plan-title strong { color:#e7efff; }
@media (max-width:760px) { .tariff-note { font-size:14px; }.comparison-row { min-width:660px; grid-template-columns:minmax(0,1fr) 130px 130px; }.comparison-row > * { padding:13px; }.plan { padding:25px 21px; } }

.plan .plan-lead { display:flex; align-items:flex-start; gap:9px; margin:18px 0 0; color:#e0e0e0; font-size:13.5px; line-height:1.45; }.plan .plan-lead::before { content:"✓"; flex:none; color:#fff; }

/* One consistent vertical rhythm between every primary course section. */
.course { gap:24px; }.contact-section { margin-top:0; }
@media (max-width:760px) { .course { gap:16px; }.contact-section { margin-top:0; } }

.plan:first-child > ul { margin-top:42px; }

.plan-title strong { display:flex; align-items:baseline; gap:7px; }.plan-title strong small { color:#bfc4cf; font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.08em; }.plan-title strong span { color:inherit; font-family:"Matrix Sans Print","Geist Pixel Circle",monospace; font-size:clamp(33px,4.2vw,54px); font-weight:400; line-height:.95; letter-spacing:-.04em; }

/* Local language control: it uses the same quiet pill language as the navigation. */
.lang-switcher { position:relative; flex:0 0 auto; z-index:1002; }.lang-toggle { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:48px; min-width:58px; padding:0 14px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(7,8,10,.56); box-shadow:var(--nav-shadow),inset 0 1px rgba(255,255,255,.1); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; cursor:pointer; font-size:12px; font-weight:600; letter-spacing:.08em; transition:background .2s ease,transform .2s ease; }.lang-toggle:hover,.lang-toggle[aria-expanded="true"] { background:rgba(42,46,56,.82); transform:translateY(-1px); }.lang-chevron { font-size:16px; line-height:1; transition:transform .2s ease; }.lang-toggle[aria-expanded="true"] .lang-chevron { transform:rotate(180deg); }.lang-menu { position:absolute; top:calc(100% + 9px); right:0; width:142px; padding:6px; border:1px solid rgba(255,255,255,.22); border-radius:16px; background:rgba(18,20,25,.92); box-shadow:0 18px 45px rgba(0,0,0,.42); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }.lang-menu button { display:block; width:100%; min-height:38px; padding:0 11px; border:0; border-radius:10px; background:transparent; color:#e9e9e9; cursor:pointer; text-align:left; font-size:13px; }.lang-menu button:hover,.lang-menu button:focus-visible { background:rgba(255,255,255,.12); outline:none; }
@media (max-width:720px) { .header { gap:10px; }.lang-switcher { margin-left:auto; }.lang-toggle { height:44px; min-width:55px; padding:0 12px; }.mobile-menu { z-index:1001; top:76px; }.mobile-overlay { z-index:1000; }.headline span { white-space:normal; }.headline { overflow:visible; }.trust-pill { max-width:calc(100vw - 88px); overflow:hidden; text-overflow:ellipsis; } }
@media (max-width:380px) { .lang-toggle { min-width:50px; padding:0 9px; }.lang-chevron { display:none; }.header { gap:7px; }.headline { font-size:clamp(27px,10.5vw,37px); } }

/* On mobile, language lives in the navigation sheet so the header stays quiet. */
.mobile-languages { display:none; }
@media (max-width:720px) { .header { justify-content:space-between; }.lang-switcher { display:none; }.mobile-menu { gap:4px; }.mobile-languages { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:9px; padding-top:14px; border-top:1px solid rgba(0,0,0,.11); }.mobile-languages button { min-height:39px; border:1px solid rgba(0,0,0,.16); border-radius:999px; background:transparent; color:#5d5d5d; cursor:pointer; font-size:12px; font-weight:700; letter-spacing:.06em; }.mobile-languages button.active { border-color:#202020; background:#202020; color:#fff; }.hero .trust-row { position:relative; top:-18px; }.headline { font-size:clamp(34px,11.4vw,48px); line-height:1.13; -webkit-text-stroke:.85px rgba(0,0,0,.9); paint-order:stroke fill; text-shadow:none; } }
@media (max-width:380px) { .headline { font-size:clamp(31px,11vw,42px); } .hero .trust-row { top:-14px; } }

/* Compact, readable introduction ticker: the window stays fixed; only its copy moves. */
.trust-pill { width:clamp(245px,25vw,330px); min-width:0; overflow:hidden; text-overflow:clip; }.marquee-viewport { display:block; width:100%; overflow:hidden; }.marquee-track { display:flex; width:max-content; animation:agenticMarquee 28s linear infinite; will-change:transform; }.marquee-track > span { flex:0 0 auto; padding-right:46px; }.marquee-track b { color:#fff; font-weight:600; }.trust-pill:hover .marquee-track { animation-play-state:paused; }
@keyframes agenticMarquee { 0%,15% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@media (max-width:720px) { .trust-pill { width:min(278px,calc(100vw - 104px)); }.marquee-track { animation-duration:32s; }.marquee-track > span { padding-right:34px; } }
@media (prefers-reduced-motion:reduce) { .marquee-track { animation:none; } }

/* Five direct section links replace the separate plan button without crowding the language switcher. */
.header { width:min(1060px,100%); }.desktop-nav { max-width:590px; }
.pro-opportunity { margin:22px 0 0 !important; padding:15px 16px; border:1px solid rgba(224,232,255,.27); border-radius:14px; background:rgba(6,8,12,.27); color:#e8edf8 !important; font-size:13.5px !important; line-height:1.52; }
@media (max-width:760px) { .pro-opportunity { margin-top:20px !important; padding:14px; font-size:13px !important; } }

/* The moving explanation is a title-width reading window, not a full-width banner. */
.trust-row { translate:0 -12px; }.trust-pill { width:clamp(360px,48vw,650px); }
@media (max-width:720px) { .header { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; justify-content:initial; gap:0; }.brand-lockup { grid-column:1; }.menu-toggle { grid-column:3; justify-self:end; }.hero .trust-row { top:10px; }.trust-pill { width:min(306px,calc(100vw - 84px)); } }
@media (max-width:380px) { .trust-pill { width:min(286px,calc(100vw - 78px)); } }

/* Fluid course canvas: maintain a one-centimetre-like gutter while every panel grows with the viewport. */
.course { width:calc(100% - clamp(32px,5vw,76px)); max-width:none; gap:clamp(16px,1.45vw,28px); padding-bottom:clamp(56px,6vw,108px); }
.course-section { padding:clamp(28px,3.5vw,76px); }
.course h2 { font-size:clamp(36px,3.7vw,76px); }
.eyebrow { font-size:clamp(11px,.78vw,14px); }
.copy,.tariff-note { max-width:960px; font-size:clamp(15px,1.18vw,20px); }
.track-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:clamp(14px,1.35vw,26px); margin-top:clamp(28px,3vw,48px); }
.track { min-height:clamp(234px,18vw,320px); padding:clamp(24px,2vw,38px); }
.track h3 { font-size:clamp(20px,1.55vw,28px); }.track p { font-size:clamp(14px,1.05vw,17px); }
.trioma-body { grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(32px,5vw,96px); }
.comparison-row { grid-template-columns:minmax(0,1fr) minmax(170px,.25fr) minmax(170px,.25fr); min-height:clamp(64px,5vw,92px); font-size:clamp(14px,1.05vw,18px); }.comparison-row > * { padding:clamp(15px,1.5vw,28px); }
.plans { gap:clamp(16px,1.5vw,28px); }.plan { padding:clamp(26px,2.5vw,48px); }.plan > p { font-size:clamp(15px,1.08vw,18px); }.plan li { font-size:clamp(13.5px,.98vw,16px); }.pro-opportunity { max-width:none; font-size:clamp(13.5px,1vw,17px) !important; }
.consult-form { max-width:1100px; gap:clamp(15px,1.25vw,24px); }.consult-form label { font-size:clamp(12px,.82vw,14px); }.consult-form input:not([type="checkbox"]) { height:clamp(48px,3.5vw,60px); }
@media (max-width:760px) { .course { width:calc(100% - 28px); }.course-section { padding:27px 20px; }.track { min-height:auto; }.comparison-row { min-width:660px; }.trioma-body { grid-template-columns:1fr; } }

/* Program map: make the lesson viewer a wide board, so full tracks are readable at first glance. */
.track-dialog { width:min(1280px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); padding:clamp(30px,3vw,54px); overflow:auto; }
.track-dialog h2 { max-width:1050px; margin-top:18px; font-size:clamp(34px,3.7vw,58px); line-height:1.13; }.dialog-meta { margin-top:17px; font-size:clamp(15px,1.1vw,18px); }
.lesson-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:28px; }.lesson-list p { grid-template-columns:clamp(92px,8vw,124px) 1fr; min-height:clamp(72px,6vw,100px); padding:clamp(16px,1.5vw,24px); font-size:clamp(14px,1.05vw,17px); line-height:1.48; }.lesson-list b { font-size:clamp(11px,.8vw,13px); }
@media (max-width:760px) { .track-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); padding:24px 18px; border-radius:20px; }.track-dialog h2 { margin:14px 42px 0 0; font-size:clamp(28px,8.5vw,40px); }.dialog-meta { margin-top:12px; font-size:14px; }.lesson-list { grid-template-columns:1fr; margin-top:20px; }.lesson-list p { grid-template-columns:90px 1fr; min-height:0; padding:14px; font-size:13.5px; }.dialog-close { top:14px; right:14px; } }

/* Keep the last cell of a two-column syllabus visually continuous. */
.lesson-list-filler { display:block; min-height:clamp(72px,6vw,100px); background:rgba(0,0,0,.33); }

@media (max-width:760px) { .lesson-list-filler { display:none; } }

@media (max-width:720px) {
  .header { top:14px; right:14px; left:14px; width:calc(100vw - 28px); height:48px; }
  .brand-lockup { width:48px; height:48px; justify-self:start; }
  .brand-lockup .logo { width:48px; height:48px; border:1px solid rgba(255,255,255,.62); box-shadow:0 8px 22px rgba(0,0,0,.24); }
  .brand-lockup svg { width:31px; height:31px; }
  .menu-toggle { width:48px; min-width:48px; height:48px; min-height:48px; margin:0; justify-self:end; align-self:center; transform:translateX(0); }
}

/* The opening scene expands with the viewport as one connected composition. */
@media (min-width:721px) {
  .page { padding-top:clamp(112px,9.2vw,164px); }
  .header { width:min(1280px,calc(100% - 48px)); gap:clamp(22px,2.7vw,42px); }
  .brand-lockup .logo { width:clamp(50px,4.2vw,64px); height:clamp(50px,4.2vw,64px); }
  .brand-lockup svg { width:clamp(31px,2.55vw,39px); height:clamp(31px,2.55vw,39px); }
  .brand-name { padding:clamp(8px,.75vw,11px) clamp(10px,1vw,15px); font-size:clamp(10px,.85vw,13px); }
  .desktop-nav { height:clamp(50px,4.2vw,64px); max-width:clamp(620px,51vw,790px); padding:clamp(4px,.45vw,7px) clamp(9px,.8vw,14px); }
  .desktop-nav a { padding:0 clamp(8px,.8vw,14px); font-size:clamp(14px,1.16vw,18px); }
  .lang-toggle { height:clamp(50px,4.2vw,64px); min-width:clamp(62px,5vw,76px); font-size:clamp(12px,.9vw,14px); }
  .hero-content { max-width:1180px; }
  .trust-row { --trust-size:clamp(44px,3.7vw,58px); margin-bottom:clamp(22px,3vh,38px); }
  .trust-pill { width:clamp(440px,54vw,820px); font-size:clamp(14px,1.08vw,17px); }
  .headline { font-size:clamp(48px,6.7vw,108px); line-height:1.2; -webkit-text-stroke:clamp(1px,.1vw,1.5px) rgba(0,0,0,.92); }
  .subhead { width:min(720px,92%); margin-top:clamp(20px,3vh,34px); font-size:clamp(17px,1.42vw,22px); line-height:1.62; }
  .cta { min-height:clamp(50px,4.1vw,64px); margin-top:clamp(22px,3.2vh,36px); padding:0 clamp(28px,3vw,44px); font-size:clamp(15px,1.18vw,18px); }
  .stats { width:min(1280px,100%); padding-top:clamp(16px,1.8vh,28px); }
  .stat { min-height:clamp(94px,8vw,132px); gap:clamp(17px,1.65vw,28px); }
  .stat-symbol { min-width:clamp(78px,7vw,110px); font-size:clamp(58px,6.1vw,96px); }
  .stat div span { max-width:clamp(165px,13vw,230px); font-size:clamp(15px,1.28vw,20px); }
}

@media (max-width:720px) {
  .hero-content { max-width:min(650px,100%); }
  .hero .trust-row { --trust-size:clamp(38px,10.8vw,48px); margin-bottom:clamp(20px,3.5vh,30px); }
  .trust-pill { width:min(330px,calc(100vw - 66px)); font-size:clamp(13px,3.6vw,15px); }
  .headline { font-size:clamp(38px,12.4vw,56px); line-height:1.16; -webkit-text-stroke:1.1px rgba(0,0,0,.92); }
  .subhead { width:min(620px,95%); margin-top:clamp(18px,3vh,26px); font-size:clamp(16px,4.25vw,19px); line-height:1.58; }
  .cta { min-height:clamp(50px,13vw,58px); margin-top:clamp(20px,3.2vh,28px); padding:0 clamp(24px,6.5vw,34px); font-size:clamp(14px,3.8vw,16px); }
  .stats { padding-top:clamp(22px,3.5vh,32px); }
  .stat { min-height:clamp(80px,22vw,100px); gap:clamp(4px,1.2vw,8px); }
  .stat-symbol { font-size:clamp(42px,12vw,58px); }
  .stat div span { max-width:118px; font-size:clamp(11px,3vw,13px); line-height:1.22; }
}

@media (max-width:380px) {
  .trust-pill { width:min(296px,calc(100vw - 58px)); }
  .headline { font-size:clamp(34px,11.5vw,44px); }
}

/* Hero copy and action share the headline's visual column on every viewport. */
.hero .subhead { width:min(1080px,94%); max-width:none; font-size:clamp(17px,1.5vw,23px); line-height:1.62; }
.hero .cta { display:inline-flex; align-items:center; justify-content:center; min-width:clamp(270px,25vw,390px); min-height:clamp(56px,4.5vw,70px); padding:0 clamp(28px,3.2vw,48px); text-align:center; white-space:nowrap; font-size:clamp(16px,1.22vw,19px); line-height:1.15; }
@media (max-width:720px) {
  .hero .subhead { width:min(620px,96%); font-size:clamp(16px,4.25vw,20px); line-height:1.6; }
  .hero .cta { min-width:min(100%,310px); min-height:clamp(54px,14vw,62px); padding:0 clamp(22px,6vw,34px); font-size:clamp(15px,3.85vw,17px); }
}

/* TRIOMA is a practical workspace: plain capability signals replace the old boxed process table. */
.trioma-body { align-items:start; margin-top:clamp(22px,2.2vw,34px); }
.trioma-copy .copy { max-width:760px; margin-top:0; font-size:clamp(17px,1.22vw,21px); line-height:1.7; }
.trioma-copy .outline-action { align-self:flex-start; min-height:clamp(56px,4.1vw,66px); margin-top:clamp(26px,2.3vw,36px); padding:0 clamp(25px,2.4vw,39px); font-size:clamp(15px,1.08vw,18px); }
.trioma-capabilities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(22px,2.5vw,48px); padding:0; margin:0; list-style:none; }
.trioma-capabilities li { min-height:clamp(108px,8vw,138px); padding:clamp(15px,1.4vw,22px) 0; border-top:1px solid rgba(255,255,255,.2); background:transparent; }
.trioma-capabilities strong,.trioma-capabilities span { display:block; }
.trioma-capabilities strong { color:#fff; font-size:clamp(16px,1.22vw,21px); font-weight:600; letter-spacing:-.025em; }
.trioma-capabilities span { margin-top:8px; color:#c7cbd2; font-size:clamp(13px,.94vw,16px); line-height:1.48; }
@media (max-width:760px) {
  .trioma-body { margin-top:25px; }
  .trioma-copy .outline-action { align-self:center; min-height:56px; font-size:16px; }
  .trioma-capabilities { grid-template-columns:1fr; margin-top:8px; }
  .trioma-capabilities li { min-height:0; padding:17px 0; }
}

/* Red ball opening scene — scoped overrides keep the course material below intact. */
:root { --red:#00e5d4; --red-deep:#00bfae; --ink:#080104; --hero-font:"Outfit",sans-serif; --body-font:"Plus Jakarta Sans",sans-serif; }
.red-ball-bg { background:#080104; z-index:0; }
.red-ball-bg::after { display:none; }
.red-ball-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; animation:spherePalette 78s linear infinite; will-change:filter; }
@keyframes spherePalette {
  0% { filter:hue-rotate(0deg) saturate(1.18) brightness(1.12) contrast(.98); }
  12.5% { filter:hue-rotate(-45deg) saturate(1.28) brightness(1.1) contrast(1); }
  25% { filter:hue-rotate(-90deg) saturate(1.16) brightness(1.14) contrast(.98); }
  37.5% { filter:hue-rotate(-135deg) saturate(1.26) brightness(1.08) contrast(1); }
  50% { filter:hue-rotate(-180deg) saturate(1.2) brightness(1.14) contrast(.98); }
  62.5% { filter:hue-rotate(-225deg) saturate(1.28) brightness(1.08) contrast(1); }
  75% { filter:hue-rotate(-270deg) saturate(1.2) brightness(1.12) contrast(.99); }
  87.5% { filter:hue-rotate(-315deg) saturate(1.3) brightness(1.1) contrast(1); }
  100% { filter:hue-rotate(-360deg) saturate(1.18) brightness(1.12) contrast(.98); }
}
.red-ball-vignette { position:absolute; inset:0; overflow:hidden; background:radial-gradient(ellipse 96% 96% at 50% 50%,transparent 18%,rgba(6,8,22,.08) 60%,rgba(6,8,22,.25) 100%); }
.red-ball-vignette::before { content:""; position:absolute; inset:0; pointer-events:none; background:transparent; box-shadow:inset 0 0 clamp(118px,17vw,320px) rgba(0,222,255,.5); mix-blend-mode:screen; opacity:.7; animation:edgeAfterglow 78s linear 14s infinite; will-change:opacity,filter; }
@keyframes edgeAfterglow { 0% { opacity:.68; filter:hue-rotate(0deg) saturate(1.1); } 12.5% { opacity:.68; filter:hue-rotate(-45deg) saturate(1.1); } 25% { opacity:.68; filter:hue-rotate(-90deg) saturate(1.1); } 37.5% { opacity:.68; filter:hue-rotate(-135deg) saturate(1.1); } 50% { opacity:.68; filter:hue-rotate(-180deg) saturate(1.1); } 62.5% { opacity:.68; filter:hue-rotate(-225deg) saturate(1.1); } 75% { opacity:.68; filter:hue-rotate(-270deg) saturate(1.1); } 87.5% { opacity:.68; filter:hue-rotate(-315deg) saturate(1.1); } 100% { opacity:.68; filter:hue-rotate(-360deg) saturate(1.1); } }
.red-ball-vignette::after { content:""; position:absolute; inset:0; pointer-events:none; background:rgba(0,222,255,.36); mix-blend-mode:color; opacity:.32; animation:prismaticHalo 78s linear 7s infinite; will-change:filter; }
@keyframes prismaticHalo { 0% { filter:hue-rotate(0deg) saturate(1.08); } 12.5% { filter:hue-rotate(-45deg) saturate(1.08); } 25% { filter:hue-rotate(-90deg) saturate(1.08); } 37.5% { filter:hue-rotate(-135deg) saturate(1.08); } 50% { filter:hue-rotate(-180deg) saturate(1.08); } 62.5% { filter:hue-rotate(-225deg) saturate(1.08); } 75% { filter:hue-rotate(-270deg) saturate(1.08); } 87.5% { filter:hue-rotate(-315deg) saturate(1.08); } 100% { filter:hue-rotate(-360deg) saturate(1.08); } }
.hero-particles { position:fixed; z-index:1; inset:0; width:100%; height:100%; pointer-events:none; }
.red-ball-page { position:relative; z-index:2; min-height:100svh; padding:0 clamp(24px,4vw,72px); font-family:var(--body-font); }
.red-ball-page .header { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; width:100%; max-width:none; height:104px; padding:0 clamp(24px,4vw,72px); border-bottom:1px solid rgba(255,255,255,.15); animation:slideDown .75s cubic-bezier(.16,1,.3,1) both; }
.red-ball-page .brand-lockup { display:grid; place-items:center; width:44px; height:44px; }
.red-ball-page .brand-lockup .logo { display:grid; place-items:center; width:44px; height:44px; border:2px solid rgba(255,255,255,.9); border-radius:13px; background:rgba(0,0,0,.3); box-shadow:inset 0 1px rgba(255,255,255,.18),0 8px 25px rgba(0,0,0,.2); color:#fff; font-family:var(--hero-font); font-size:27px; font-weight:900; letter-spacing:-.14em; }
.red-ball-page .desktop-nav { position:absolute; left:50%; transform:translateX(-50%); display:flex; flex:0 0 auto; align-items:stretch; justify-content:center; gap:clamp(14px,2.25vw,38px); width:auto; max-width:none; height:auto; padding:0; border-radius:0; background:transparent; box-shadow:none; }
.red-ball-page .desktop-nav a { height:104px; padding:0; color:rgba(255,255,255,.7); font-family:var(--body-font); font-size:10px; font-weight:700; letter-spacing:.16em; opacity:1; }
.red-ball-page .desktop-nav a:hover { color:#fff; }
.red-ball-page .desktop-nav a.active { color:#fff; }
.red-ball-page .desktop-nav a.active::after { bottom:0; width:29px; height:2px; border-radius:3px; background:var(--red); box-shadow:0 0 14px var(--red); }
.nav-talk,.hero-cta { display:inline-flex; align-items:center; justify-content:center; gap:12px; border:1px solid rgba(255,255,255,.5); border-radius:999px; background:rgba(17,2,8,.22); box-shadow:inset 0 1px rgba(255,255,255,.15); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff; font-family:var(--body-font); font-size:11px; font-weight:700; letter-spacing:.13em; transition:.28s ease; }
.nav-talk { min-width:132px; height:43px; }.nav-talk svg,.hero-cta svg { width:14px; }
.nav-talk:hover,.hero-cta:hover { transform:translateY(-3px); border-color:var(--red); background:rgba(0,229,212,.14); box-shadow:0 0 0 4px rgba(0,229,212,.1),0 0 26px rgba(0,229,212,.26); }
.red-ball-page .hero { display:block; min-height:100svh; padding:104px 0 80px; text-align:left; }
.hero-grid { display:grid; grid-template-columns:5fr 3fr 4fr; align-items:center; min-height:calc(100svh - 184px); }
.hero-intro { max-width:590px; }.hero-kicker { display:flex; align-items:center; gap:12px; margin:0 0 23px; color:var(--red-deep); font-size:12px; font-weight:800; letter-spacing:.3em; }.hero-kicker span { width:28px; height:1px; background:currentColor; box-shadow:0 0 10px currentColor; }
.red-ball-page .headline { margin:0; overflow:visible; color:#fff; font-family:var(--hero-font); font-size:clamp(54px,6.2vw,94px); font-weight:900; letter-spacing:-.068em; line-height:.91; text-shadow:none; -webkit-text-stroke:0; }
.red-ball-page .subhead { width:min(410px,100%); margin:29px 0 0; color:rgba(255,255,255,.75); font-family:var(--body-font); font-size:15px; font-weight:400; line-height:1.72; opacity:1; }
.hero-cta { min-width:220px; height:53px; margin-top:34px; padding:0 22px; }
.hero-center { position:relative; align-self:stretch; display:flex; align-items:flex-end; justify-content:center; gap:8px; padding-bottom:42px; }.reel-control,.sound-control { display:grid; place-items:center; width:35px; height:35px; border:1px solid rgba(255,255,255,.23); border-radius:50%; background:rgba(10,0,4,.28); color:#fff; cursor:pointer; opacity:.55; backdrop-filter:blur(8px); transition:.2s ease; }.reel-control:hover,.sound-control:hover { opacity:1; border-color:var(--red); background:rgba(0,229,212,.15); }.reel-control svg,.sound-control svg { width:14px; }
.service-list { align-self:center; padding-left:clamp(20px,4vw,65px); }.service-list article { display:grid; grid-template-columns:44px 1fr; gap:13px; padding:23px 0 25px; border-top:1px solid rgba(255,255,255,.24); }.service-list article:last-child { border-bottom:1px solid rgba(255,255,255,.24); }.service-list article > span { color:var(--red); font-size:11px; font-weight:800; letter-spacing:.1em; }.service-list h2 { margin:0; color:#fff; font-family:var(--hero-font); font-size:15px; font-weight:700; letter-spacing:.03em; }.service-list p { max-width:245px; margin:8px 0 0; color:rgba(255,255,255,.62); font-size:12px; line-height:1.55; }
.red-ball-stats { position:absolute; z-index:3; right:clamp(24px,4vw,72px); bottom:25px; left:clamp(24px,4vw,72px); display:flex; grid-template-columns:none; align-items:center; justify-content:flex-start; gap:11px; width:auto; color:rgba(255,255,255,.53); font-family:var(--body-font); font-size:9px; font-weight:700; letter-spacing:.18em; }.red-ball-stats svg { width:14px; color:var(--red); }.red-ball-stats .hero-index { margin-left:auto; color:#fff; }
.red-ball-page + .course { position:relative; z-index:2; padding-top:80px; }
.mobile-talk { display:none; }
@media (max-width:850px) { .red-ball-page .desktop-nav { display:none; }.nav-talk { margin-left:auto; margin-right:16px; }.red-ball-page .menu-toggle { display:grid; position:relative; z-index:1003; flex:0 0 auto; width:44px; height:44px; border:1px solid rgba(255,255,255,.45); border-radius:12px; background:rgba(0,0,0,.26); color:#fff; }.red-ball-page .menu-toggle span { width:17px; }.red-ball-page .hero { padding-top:104px; }.hero-grid { grid-template-columns:1.2fr .8fr; }.service-list { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0; }.service-list article { grid-template-columns:1fr; padding:18px 0; }.service-list article:last-child { border-bottom:0; } .hero-center { padding-bottom:20px; } }
@media (max-width:620px) { .red-ball-video { object-position:53% center; }.red-ball-page { min-height:100svh; padding:0 22px; }.red-ball-page .header { height:76px; padding:0 22px; }.red-ball-page .brand-lockup,.red-ball-page .brand-lockup .logo { width:42px; height:42px; }.nav-talk { display:none; }.red-ball-page .hero { min-height:100svh; padding:76px 0 74px; }.hero-grid { display:flex; flex-direction:column; align-items:stretch; justify-content:center; min-height:calc(100svh - 150px); }.hero-intro { max-width:430px; }.hero-kicker { margin-bottom:16px; font-size:10px; }.red-ball-page .headline { font-size:clamp(51px,15vw,70px); }.red-ball-page .subhead { width:min(330px,92%); margin-top:22px; font-size:13px; }.hero-cta { height:50px; min-width:208px; margin-top:27px; font-size:10px; }.hero-center { position:absolute; right:0; bottom:75px; padding:0; }.service-list { display:none; }.red-ball-stats { right:22px; bottom:22px; left:22px; }.red-ball-page + .course { padding-top:45px; }.mobile-menu { top:0; right:0; bottom:0; left:0; z-index:1002; align-content:center; gap:4px; padding:100px 32px 32px; border:0; border-radius:0; background:rgba(12,1,6,.93); box-shadow:none; color:#fff; backdrop-filter:blur(24px); }.mobile-menu a { padding:15px 0; color:rgba(255,255,255,.67); font-family:var(--hero-font); font-size:28px; font-weight:800; letter-spacing:-.045em; opacity:1; }.mobile-menu a.active { color:#fff; }.mobile-menu a.active::after { display:none; }.mobile-menu .mobile-talk { display:flex; align-items:center; gap:8px; margin-top:17px; color:var(--red); font-family:var(--body-font); font-size:12px; letter-spacing:.14em; }.mobile-overlay { z-index:1001; background:rgba(8,1,4,.8); }.mobile-languages { display:none!important; } body.menu-open .red-ball-page .menu-toggle { background:transparent; color:#fff; }.red-ball-page .menu-toggle { display:grid!important; } }
@media (prefers-reduced-motion:reduce) { .hero-particles { display:none; }.red-ball-video { display:none; }.red-ball-bg { background:radial-gradient(circle at 55% 43%,#00bfae 0,#004d49 28%,#080104 65%); } }

/* The header logo asset includes its own white circular field and transparent outer pixels. */
.brand-lockup .logo.logo-image { position:relative; background:transparent; border:0; box-shadow:none; overflow:visible; }
.brand-lockup .logo.logo-image img { position:absolute; top:50%; left:50%; display:block; width:128%; height:auto; max-width:none; object-fit:contain; transform:translate(-50%,-50%); }

/* Keep the original compact navigation sheet on the working course site. */
@media (max-width:620px) {
  .page:not(.red-ball-page) ~ .mobile-menu {
    top:76px;
    right:14px;
    bottom:auto;
    left:14px;
    z-index:1001;
    display:grid;
    align-content:initial;
    gap:3px;
    padding:22px 18px 20px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:24px;
    background:rgba(255,255,255,.96);
    box-shadow:0 20px 60px rgba(0,0,0,.45);
    color:#2e2e2e;
    backdrop-filter:blur(18px);
  }
  .page:not(.red-ball-page) ~ .mobile-menu a {
    padding:13px 14px;
    color:#2e2e2e;
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:500;
    letter-spacing:0;
    opacity:.65;
  }
  .page:not(.red-ball-page) ~ .mobile-menu a.active { color:#2e2e2e; opacity:1; }
  .page:not(.red-ball-page) ~ .mobile-menu a.active::after { display:block; bottom:8px; left:28px; width:3px; height:3px; border-radius:50%; background:#000; box-shadow:-5px 0 #000,5px 0 #000; }
  .page:not(.red-ball-page) ~ .mobile-menu .mobile-talk { display:none; }
  .page:not(.red-ball-page) ~ .mobile-overlay { z-index:1000; background:rgba(0,0,0,.62); }
}

/* Centre the scaled sphere on small screens. */
@media (max-width:620px) {
  .red-ball-video { object-position:center center; transform:none; -webkit-mask-image:none; mask-image:none; }
  .red-ball-bg { background:#080104; }
}

/* Hero copy: the practical skill list supports the promise instead of competing with it. */
.headline .headline-detail { max-width:min(870px,92vw); margin:clamp(14px,2.1vh,24px) auto; color:rgba(255,255,255,.93); font-family:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; line-height:inherit; white-space:normal; }
@media (max-width:720px) { .headline .headline-detail { max-width:min(345px,94vw); margin:17px auto; font-size:inherit; line-height:inherit; } }

/* Keep the marquee and primary action anchored to the sphere, independent of headline length. */
.hero .trust-row { position:absolute; z-index:2; top:clamp(10px,2.4vh,28px); left:50%; margin-bottom:0; translate:-50% 0; }
.hero .cta { position:absolute; z-index:2; bottom:clamp(24px,4vh,42px); left:50%; margin-top:0; translate:-50% 0; }
.headline-mobile { display:none; }
@media (min-width:721px) { .headline-desktop { font-size:clamp(50px,5.8vw,92px); line-height:1.08; text-transform:uppercase; } }
@media (max-width:720px) { .headline-desktop { display:none; }.headline-mobile { display:block; font-size:clamp(30px,8.7vw,38px); letter-spacing:.035em; line-height:1.16; text-transform:uppercase; }.headline-mobile span { overflow:visible; white-space:nowrap; } }

/* The language picker belongs at the bottom of the compact mobile navigation sheet. */
@media (max-width:620px) { .page:not(.red-ball-page) ~ .mobile-menu .mobile-languages { display:grid !important; } }

/* The source logo includes transparent padding: scale only its artwork to match the menu control. */
@media (max-width:720px) { .stat:nth-child(1) .stat-symbol { transform:translateY(8px); } }
@media (min-width:721px) { .brand-name { padding:clamp(9px,.85vw,13px) clamp(13px,1.2vw,18px); font-size:clamp(12px,1.02vw,16px); } }

/* Header controls share one rhythm: matching outer heights and equal horizontal spacing. */
@media (min-width:721px) {
  .header { --header-cluster-gap:clamp(22px,2.7vw,42px); gap:var(--header-cluster-gap); }
  .brand-lockup { gap:var(--header-cluster-gap); }
}

/* On mobile, retain the course name as the centred third header control. */
@media (max-width:720px) {
  .brand-name {
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    padding:7px 10px;
    font-size:clamp(8px,2.45vw,10px);
    letter-spacing:.065em;
    line-height:1;
    transform:translate(-50%,-50%);
  }
}