*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#09090B;color:#F0F0FF}
/* ── ERA PROGRESSION VARIABLES ── */
/* ERA 0(hero) + ERA 1: retro newspaper/film noir */
/* ERA 2: transitional — monochrome modernizing */
/* ERA 3: mid-modern — cleaner, bolder */
/* ERA 4: near-modern — minimal, app-like */
/* ERA 5: ultra-modern — pure BU brand */
:root{
--bu:#1B4FD8;--cy:#00C8E0;--bk:#09090B;--wh:#F0F0FF;--ye:#FFD600;--gr:#39FF14;
--e1-bg:#0C0B0A;--e1-text:#D4C9A8;--e1-accent:#8B7355;--e1-border:#3D3020;
--e2-bg:#0A0C14;--e2-text:#C8D4E8;--e2-accent:#4A6FA5;--e2-border:#1E2840;
--e3-bg:#070A14;--e3-text:#D0DCF0;--e3-accent:#2B5CE6;--e3-border:#1A2440;
--e4-bg:#04060F;--e4-text:#E0E8F8;--e4-accent:#1B4FD8;--e4-border:#1B4FD8;
--e5-bg:#01030A;--e5-text:#F0F0FF;--e5-accent:#00C8E0;--e5-border:#00C8E0;
}
body{font-family:'Wix Madefor Display',sans-serif}
/* TICKER */
#tk{position:fixed;top:0;left:0;width:100%;height:26px;background:var(--bu);z-index:600;overflow:hidden;display:flex;align-items:center}
.tki{display:flex;white-space:nowrap;animation:ta 32s linear infinite;font-size:11px;font-weight:600;letter-spacing:1.5px;color:#fff}
.tki span{margin:0 24px}
@keyframes moneyFly1{0%{transform:translate(0,0) rotate(0deg);opacity:0}20%{opacity:1}100%{transform:translate(-80px,-120px) rotate(-45deg);opacity:0}}
@keyframes moneyFly2{0%{transform:translate(0,0) rotate(0deg);opacity:0}20%{opacity:1}100%{transform:translate(60px,-100px) rotate(30deg);opacity:0}}
@keyframes moneyFly3{0%{transform:translate(0,0) rotate(0deg);opacity:0}20%{opacity:1}100%{transform:translate(-40px,-140px) rotate(15deg);opacity:0}}
@keyframes moneyFly4{0%{transform:translate(0,0) rotate(0deg);opacity:0}20%{opacity:1}100%{transform:translate(90px,-90px) rotate(-20deg);opacity:0}}
@keyframes moneyFly5{0%{transform:translate(0,0) rotate(0deg);opacity:0}20%{opacity:1}100%{transform:translate(-100px,-80px) rotate(50deg);opacity:0}}
@keyframes ytPulse{0%,100%{box-shadow:0 0 0 rgba(255,0,0,0)}50%{box-shadow:0 0 16px rgba(255,0,0,.15)}}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
@keyframes ytProgress{0%{width:0%}100%{width:100%}}
@keyframes pu{0%,100%{opacity:1}50%{opacity:.3}}
/* ── NEW ANIMATIONS ── */
@keyframes teslaRide{0%{left:-240px;opacity:0}5%{opacity:1}85%{opacity:1}100%{left:calc(100% + 240px);opacity:0}}
@keyframes flyMoney1{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(-80px,-120px) rotate(45deg);opacity:0}}
@keyframes flyMoney2{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(80px,-100px) rotate(-30deg);opacity:0}}
@keyframes flyMoney3{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(-60px,-140px) rotate(60deg);opacity:0}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes tickerGlow{0%,100%{box-shadow:0 0 0 rgba(27,79,216,0)}50%{box-shadow:0 0 18px rgba(27,79,216,.4)}}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes cardHover{from{transform:translateY(0);box-shadow:0 8px 24px rgba(0,0,0,.3)}to{transform:translateY(-4px);box-shadow:0 16px 44px rgba(27,79,216,.35)}}
@keyframes spkReveal{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes paperUnfold{from{transform:rotate(-12deg) scale(0.8) translateY(20px);opacity:0}to{transform:rotate(0) scale(1) translateY(0);opacity:1}}
@keyframes ta{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* TIMELINE */
#tl{position:fixed;bottom:0;left:0;width:100%;height:36px;background:rgba(9,9,11,.97);border-top:1px solid rgba(27,79,216,.3);z-index:600;display:flex;align-items:center;padding:0 24px;gap:12px}
#tlbar{flex:1;height:3px;background:rgba(255,255,255,.1);border-radius:3px;position:relative}
#tlfill{height:100%;background:linear-gradient(to right,var(--bu),var(--cy));border-radius:3px;width:0%;box-shadow:0 0 8px var(--cy);transition:width .1s}
.tldots{position:absolute;top:50%;width:100%;display:flex;justify-content:space-between}
.d{width:10px;height:10px;border-radius:50%;background:var(--bu);border:2px solid var(--cy);transform:translateY(-50%);cursor:pointer;transition:all .2s;position:relative;flex-shrink:0}
.d.on{background:var(--cy);transform:translateY(-50%) scale(1.5)}
.dlbl{position:absolute;top:13px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--cy);white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.d:hover .dlbl,.d.on .dlbl{opacity:1}
#tlhint{font-size:10px;font-weight:700;letter-spacing:2px;color:rgba(255,255,255,.3);text-transform:uppercase;white-space:nowrap}
/* CILLIAN */
#cil{position:fixed;bottom:46px;right:16px;width:56px;height:56px;border-radius:50%;overflow:hidden;border:2px solid var(--bu);box-shadow:0 0 14px rgba(27,79,216,.5);z-index:599;cursor:pointer;transition:transform .2s;animation:floatY 3s ease-in-out infinite}
/* MOBILE VERTICAL RAIL — hidden on desktop, shown via media query */
#mrail{display:none}
#cil:hover{transform:scale(1.12) rotate(5deg)}
#cil video{width:100%;height:100%;object-fit:cover}
/* ROOT */
#root{position:fixed;top:26px;left:0;right:0;bottom:36px;overflow:hidden}
#track{display:flex;height:100%;will-change:transform}
/* ── PANEL BASE ── */
.p{flex-shrink:0;height:100%;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.scrollp{overflow-y:auto;overflow-x:hidden;justify-content:flex-start}
.scrollp::-webkit-scrollbar{display:none}
/* ══════════════════════════════════════════
ERA 1 — RETRO: sepia, Courier, film grain
══════════════════════════════════════════ */
.e1{background:var(--e1-bg)}
.e1::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity:.07}
.e1-text{color:var(--e1-text)}
.e1-h{color:var(--e1-text);font-weight:700}
.e1-accent{color:var(--e1-accent)}
/* Faded vignette edges for era1 */
.e1-vignette::after{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.6) 100%);z-index:1}
/* ══════════════════════════════════════════
ERA 2 — TRANSITION: late 90s web / Bloomberg terminal feel
══════════════════════════════════════════ */
.e2{background:var(--e2-bg)}
.e2::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background:repeating-linear-gradient(0deg,rgba(27,79,216,.015) 0,rgba(27,79,216,.015) 1px,transparent 1px,transparent 3px);
opacity:.6}
/* ══════════════════════════════════════════
ERA 3 — MID-MODERN: clean, tech startup
══════════════════════════════════════════ */
.e3{background:var(--e3-bg)}
/* ══════════════════════════════════════════
ERA 4 — NEAR-MODERN: app-like, minimal
══════════════════════════════════════════ */
.e4{background:var(--e4-bg)}
/* ══════════════════════════════════════════
ERA 5 — ULTRA-MODERN: full BU brand
══════════════════════════════════════════ */
.e5{background:var(--e5-bg)}
/* ── HERO ── */
.hero-p{width:100vw;flex-direction:row;align-items:center;justify-content:flex-start;gap:0;padding:0;
background:radial-gradient(ellipse at 25% 55%,rgba(27,79,216,.18),transparent 55%),radial-gradient(ellipse at 80% 20%,rgba(0,200,224,.07),transparent 50%),#09090B}
.hero-left{flex:0 0 55%;display:flex;flex-direction:column;justify-content:center;padding:40px 52px 40px 72px}
.hero-right{flex:0 0 45%;overflow:hidden;display:flex;align-items:center;padding-right:60px}
/* Retro badge */
.retro-badge{display:inline-flex;align-items:center;gap:8px;
border:2px solid var(--e1-accent);border-radius:0;
padding:5px 14px;
font-size:10px;font-weight:700;letter-spacing:3px;
color:var(--e1-accent);text-transform:uppercase;margin-bottom:20px;
background:rgba(139,115,85,.1)}
.hero-h1{font-size:clamp(22px,2.6vw,36px);
font-weight:700;line-height:1.12;letter-spacing:-.01em;
color:var(--wh);margin-bottom:18px}
.hero-h1 .hl{color:var(--cy)}
.hero-p-text{font-size:13.5px;line-height:1.78;
color:rgba(240,240,255,.68);margin-bottom:16px}
.retro-btn{display:inline-flex;align-items:center;gap:10px;
background:transparent;color:var(--e1-text);
border:2px solid var(--e1-accent);border-radius:0;
padding:11px 24px;
font-size:13px;font-weight:700;cursor:pointer;letter-spacing:1px;
transition:all .2s}
.retro-btn:hover{background:var(--e1-accent);color:var(--e1-bg)}
/* ── ERA STOP ── */
.era-p{width:100vw;align-items:center;justify-content:center;text-align:center}
.era-yr{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);
font-weight:800;line-height:.85;color:transparent;
pointer-events:none;letter-spacing:-8px;white-space:nowrap;user-select:none}
.era-glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(27,79,216,.2),transparent 65%);animation:floatY 8s ease-in-out infinite}
.era-box{position:relative;z-index:2;max-width:620px;padding:0 32px}
.era-chip{display:inline-block;background:var(--bu);color:#fff;
font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
padding:6px 16px;border-radius:100px;margin-bottom:20px}
.era-title{font-size:clamp(28px,4.5vw,54px);font-weight:800;line-height:1.05;margin-bottom:14px}
.era-sub{font-size:15px;color:rgba(240,240,255,.62);line-height:1.65;margin-bottom:44px}
.era-arr{font-size:28px;display:inline-block;animation:bou 1.4s ease-in-out infinite;background:transparent;border:none;padding:0;margin-top:8px}
@keyframes bou{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
/* ── TEXT PANELS ── */
.tp{width:700px;padding:28px 52px}
.tp-wide{width:820px}
/* Era-specific text styling */
.e1 .sec-tag{font-size:10px;font-weight:700;
letter-spacing:3px;text-transform:uppercase;color:var(--e1-accent);margin-bottom:10px;
border-bottom:1px solid var(--e1-border);padding-bottom:6px}
.e1 .sec-h2{font-size:clamp(17px,2vw,26px);
font-weight:700;line-height:1.2;margin-bottom:13px;color:var(--e1-text)}
.e1 .sec-body{font-size:13px;line-height:1.82;
color:rgba(212,201,168,.78);margin-bottom:11px}
.e1 .sec-body strong{color:var(--e1-text)}
.e1 .sec-hbox{background:rgba(139,115,85,.08);border:1px solid var(--e1-border);
border-left:3px solid var(--e1-accent);padding:16px 20px;margin:14px 0;
font-size:13px;line-height:1.75;color:rgba(212,201,168,.88)}
.e1 .bullet-line{display:flex;gap:12px;align-items:flex-start;margin-bottom:11px;
font-size:13px;line-height:1.78;color:rgba(212,201,168,.78)}
.e1 .bullet-line::before{content:'—';color:var(--e1-accent);flex-shrink:0;font-weight:700}
.e1 .bullet-line strong{color:var(--e1-text)}
/* ERA 2 text style — transitional */
.e2 .sec-tag{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
color:#4A6FA5;margin-bottom:10px;
border-left:2px solid #4A6FA5;padding-left:10px}
.e2 .sec-h2{font-size:clamp(18px,2.2vw,28px);font-weight:800;line-height:1.15;
margin-bottom:13px;color:#C8D4E8}
.e2 .sec-body{font-size:14px;line-height:1.78;color:rgba(200,212,232,.72);margin-bottom:11px}
.e2 .sec-body strong{color:#C8D4E8}
.e2 .sec-hbox{background:rgba(74,111,165,.1);border:1px solid rgba(74,111,165,.3);
border-left:3px solid #4A6FA5;border-radius:6px;padding:16px 20px;margin:14px 0;
font-size:14px;line-height:1.72;color:rgba(200,212,232,.9)}
.e2 .bullet-line{display:flex;gap:12px;align-items:flex-start;margin-bottom:11px;
font-size:14px;line-height:1.78;color:rgba(200,212,232,.72)}
.e2 .bullet-line::before{content:'▸';color:#4A6FA5;flex-shrink:0;font-size:16px}
.e2 .bullet-line strong{color:#C8D4E8}
/* ERA 3 text — mid-modern */
.e3 .sec-tag{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
color:var(--cy);margin-bottom:10px}
.e3 .sec-h2{font-size:clamp(18px,2.2vw,28px);font-weight:800;line-height:1.15;
margin-bottom:13px;color:var(--wh)}
.e3 .sec-body{font-size:14px;line-height:1.78;color:rgba(240,240,255,.72);margin-bottom:11px}
.e3 .sec-body strong{color:var(--wh)}
.e3 .sec-hbox{background:linear-gradient(135deg,rgba(27,79,216,.1),rgba(0,200,224,.05));
border:1px solid rgba(27,79,216,.25);border-left:4px solid var(--cy);
border-radius:10px;padding:16px 20px;margin:14px 0;font-size:14px;line-height:1.72;color:rgba(240,240,255,.88)}
.e3 .bullet-line{display:flex;gap:12px;align-items:flex-start;margin-bottom:11px;
font-size:14px;line-height:1.78;color:rgba(240,240,255,.72)}
.e3 .bullet-line::before{content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;
background:var(--cy);box-shadow:0 0 5px var(--cy);margin-top:8px;display:inline-block}
.e3 .bullet-line strong{color:var(--wh)}
/* ERA 4 text — near-modern */
.e4 .sec-tag{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
color:var(--cy);margin-bottom:10px}
.e4 .sec-h2{font-size:clamp(18px,2.2vw,28px);font-weight:800;line-height:1.15;
margin-bottom:13px;color:var(--wh)}
.e4 .sec-body{font-size:14px;line-height:1.78;color:rgba(240,240,255,.72);margin-bottom:11px}
.e4 .sec-body strong{color:var(--wh)}
.e4 .sec-hbox{background:linear-gradient(135deg,rgba(27,79,216,.12),rgba(0,200,224,.06));
border:1px solid rgba(27,79,216,.3);border-left:4px solid var(--cy);
border-radius:11px;padding:17px 21px;margin:14px 0;font-size:14px;line-height:1.72;color:rgba(240,240,255,.9)}
.e4 .bullet-line{display:flex;gap:12px;align-items:flex-start;margin-bottom:11px;
font-size:14px;line-height:1.78;color:rgba(240,240,255,.72)}
.e4 .bullet-line::before{content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;
background:var(--cy);box-shadow:0 0 6px var(--cy);margin-top:8px;display:inline-block}
.e4 .bullet-line strong{color:var(--wh)}
/* ERA 5 text — ultra-modern */
.e5 .sec-tag{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
color:var(--cy);margin-bottom:10px}
.e5 .sec-h2{font-size:clamp(18px,2.2vw,28px);font-weight:800;line-height:1.15;
margin-bottom:13px;color:var(--wh)}
.e5 .sec-body{font-size:14px;line-height:1.78;color:rgba(240,240,255,.72);margin-bottom:11px}
.e5 .sec-body strong{color:var(--wh)}
.e5 .sec-hbox{background:linear-gradient(135deg,rgba(0,200,224,.1),rgba(27,79,216,.06));
border:1px solid rgba(0,200,224,.25);border-left:4px solid var(--cy);
border-radius:12px;padding:17px 21px;margin:14px 0;font-size:14px;line-height:1.72;color:rgba(240,240,255,.92)}
.e5 .bullet-line{display:flex;gap:12px;align-items:flex-start;margin-bottom:11px;
font-size:14px;line-height:1.78;color:rgba(240,240,255,.72)}
.e5 .bullet-line::before{content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;
background:var(--cy);box-shadow:0 0 8px var(--cy);margin-top:8px;display:inline-block}
.e5 .bullet-line strong{color:var(--wh)}
/* ── MEME PANEL ── */
.mp{width:460px;align-items:center;justify-content:center}
.mf{border-radius:12px;overflow:hidden;border:2px solid var(--e1-border);
box-shadow:0 20px 70px rgba(0,0,0,.7);position:relative;animation:floatY 5s ease-in-out infinite}
.mf.mf-sm{width:90%;max-width:410px}
.mf.modern{border-radius:13px}
.mf img,.mf video{width:100%;display:block}
.mcap{position:absolute;bottom:0;left:0;right:0;background:rgba(9,9,11,.9);
padding:10px 14px;font-size:13px;font-weight:700;
text-align:center;line-height:1.4;transition:opacity .3s}
.e1 .mcap{color:var(--e1-accent)}
.e2 .mcap{color:#4A6FA5}
.e3 .mcap,.e4 .mcap,.e5 .mcap{color:var(--ye)}
.mtag{position:absolute;top:10px;left:10px;background:rgba(9,9,11,.85);
font-size:9px;font-weight:700;letter-spacing:2px;padding:3px 8px;border-radius:0}
.e1 .mtag{border:1px solid var(--e1-accent);color:var(--e1-accent);}
.e2 .mtag{border:1px solid #4A6FA5;color:#4A6FA5}
.e3 .mtag,.e4 .mtag,.e5 .mtag{border:1px solid var(--bu);color:var(--cy);border-radius:4px}
/* ── SPEAKER PANEL ── */
.sp{width:300px;align-items:center;justify-content:center}
.spk{overflow:hidden;border-shadow:0 20px 60px rgba(0,0,0,.6)}
.e1 .spk{border:2px solid var(--e1-border);border-radius:0;width:240px;
filter:sepia(40%) contrast(1.1);animation:spkReveal .6s ease-out}
.e2 .spk{border:2px solid var(--e2-border);border-radius:4px;width:240px;filter:saturate(0.8);animation:spkReveal .6s ease-out}
.e3 .spk{border:2px solid rgba(27,79,216,.4);border-radius:10px;width:240px;animation:spkReveal .6s ease-out}
.e4 .spk{border:2px solid rgba(27,79,216,.4);border-radius:12px;width:240px;animation:spkReveal .6s ease-out}
.e5 .spk{border:2px solid var(--cy);border-radius:14px;width:240px;
box-shadow:0 0 20px rgba(0,200,224,.2);animation:spkReveal .6s ease-out}
.spk img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block}
.spk-p{padding:12px 14px}
.e1 .spk-p{background:var(--e1-border)}
.e2 .spk-p{background:#1A2840}
.e3 .spk-p,.e4 .spk-p{background:var(--bu)}
.e5 .spk-p{background:var(--cy)}
.spk-n{font-size:13px;font-weight:800;margin-bottom:3px}
.e1 .spk-n{color:var(--e1-text)}
.e2 .spk-n{color:#C8D4E8}
.e3 .spk-n,.e4 .spk-n{color:#fff}
.e5 .spk-n{color:#000}
.spk-r{font-size:13px;line-height:1.4}
.e1 .spk-r{color:rgba(212,201,168,.7)}
.e2 .spk-r{color:rgba(200,212,232,.7)}
.e3 .spk-r,.e4 .spk-r{color:rgba(255,255,255,.72)}
.e5 .spk-r{color:rgba(0,0,0,.65)}
/* ── CARDS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:11px 0}
.card{border-radius:0;padding:16px 14px;transition:border-color .2s,transform .2s}
.e1 .card{background:rgba(139,115,85,.08);border:1px solid var(--e1-border);border-radius:0}
.e1 .card:hover{border-color:var(--e1-accent);transform:translateY(-2px)}
.e2 .card{background:rgba(74,111,165,.08);border:1px solid rgba(74,111,165,.2);border-radius:4px}
.e2 .card:hover{border-color:#4A6FA5;transform:translateY(-2px)}
.e3 .card{background:rgba(27,79,216,.08);border:1px solid rgba(27,79,216,.2);border-radius:10px}
.e3 .card:hover{border-color:var(--cy);transform:translateY(-3px)}
.e4 .card,.e5 .card{background:rgba(27,79,216,.08);border:1px solid rgba(27,79,216,.2);border-radius:12px}
.e4 .card:hover,.e5 .card:hover{border-color:var(--cy);transform:translateY(-3px)}
.ci{font-size:20px;margin-bottom:7px}
.ct{font-size:13px;font-weight:800;margin-bottom:5px}
.e1 .ct{color:var(--e1-accent)}
.e2 .ct{color:#4A6FA5}
.e3 .ct,.e4 .ct,.e5 .ct{color:var(--cy)}
.cd{font-size:13px;line-height:1.5}
.e1 .cd{color:rgba(212,201,168,.6)}
.e2 .cd{color:rgba(200,212,232,.6)}
.e3 .cd,.e4 .cd,.e5 .cd{color:rgba(240,240,255,.6)}
/* ── COURSE CARD ── */
.crsp{width:480px;align-items:center;justify-content:center}
.crs{padding:28px 24px;position:relative;overflow:hidden;cursor:pointer;transition:all .2s;width:380px}
.e1 .crs{background:rgba(139,115,85,.15);border:2px solid var(--e1-accent);border-radius:0}
.e2 .crs{background:#162240;border:1px solid #4A6FA5;border-radius:6px;box-shadow:0 4px 24px rgba(74,111,165,.2)}
.e3 .crs{background:var(--bu);border-radius:14px;box-shadow:0 8px 44px rgba(27,79,216,.4)}
.e4 .crs{background:var(--bu);border-radius:15px;box-shadow:0 8px 44px rgba(27,79,216,.4)}
.e5 .crs{background:linear-gradient(135deg,#0A1A40,#0D2060);border-radius:16px;
box-shadow:0 8px 44px rgba(27,79,216,.4);border:1px solid rgba(0,200,224,.2)}
.crs:hover{transform:translateY(-4px)}
.e3 .crs:hover,.e4 .crs:hover,.e5 .crs:hover{box-shadow:0 16px 60px rgba(27,79,216,.6)}
.clbl{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:7px}
.e1 .clbl{color:rgba(212,201,168,.55)}
.e2 .clbl{color:rgba(200,212,232,.55)}
.e3 .clbl,.e4 .clbl,.e5 .clbl{color:rgba(255,255,255,.55)}
.cico{font-size:28px;display:block;margin-bottom:9px}
.cttl{font-size:15px;font-weight:800;margin-bottom:8px;line-height:1.2}
.e1 .cttl{color:var(--e1-text)}
.e2 .cttl{color:#C8D4E8}
.e3 .cttl,.e4 .cttl,.e5 .cttl{color:#fff}
.ctxt{font-size:12.5px;line-height:1.6}
.e1 .ctxt{color:rgba(212,201,168,.72)}
.e2 .ctxt{color:rgba(200,212,232,.72)}
.e3 .ctxt,.e4 .ctxt,.e5 .ctxt{color:rgba(255,255,255,.78)}
.cbtn{display:inline-flex;align-items:center;gap:6px;margin-top:13px;
font-size:13px;font-weight:700;transition:all .2s}
.e1 .cbtn{color:var(--e1-accent)}
.e2 .cbtn{color:#4A6FA5}
.e3 .cbtn,.e4 .cbtn{color:rgba(255,255,255,.6)}
.e5 .cbtn{color:var(--cy)}
.crs:hover .cbtn{gap:10px;color:#fff}
.e5 .crs:hover .cbtn{color:var(--cy)}
/* ── NOTE: "paper unfold" course highlight block ── */
.course-note{border-radius:0;padding:20px 24px;margin:0;cursor:pointer;transition:all .2s;width:100%}
.e1 .course-note{background:rgba(212,201,168,.07);border:2px solid var(--e1-accent);
}
.e2 .course-note{background:rgba(74,111,165,.1);border:1px solid #4A6FA5;border-radius:6px}
.e3 .course-note{background:rgba(27,79,216,.12);border:1px solid rgba(27,79,216,.35);border-radius:12px}
.e4 .course-note{background:rgba(27,79,216,.12);border:1px solid rgba(27,79,216,.35);border-radius:12px}
.e5 .course-note{background:rgba(0,200,224,.08);border:1px solid rgba(0,200,224,.3);border-radius:14px}
.course-note-tag{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px}
.e1 .course-note-tag{color:var(--e1-accent);}
.e2 .course-note-tag{color:#4A6FA5}
.e3 .course-note-tag,.e4 .course-note-tag{color:var(--cy)}
.e5 .course-note-tag{color:var(--cy)}
.course-note-ico{font-size:28px;display:block;margin-bottom:8px}
.course-note-h{font-size:16px;font-weight:800;margin-bottom:8px;line-height:1.3}
.e1 .course-note-h{color:var(--e1-text)}
.e2 .course-note-h{color:#C8D4E8}
.e3 .course-note-h,.e4 .course-note-h,.e5 .course-note-h{color:var(--wh)}
.course-note-body{font-size:13px;line-height:1.65}
.e1 .course-note-body{color:rgba(212,201,168,.75)}
.e2 .course-note-body{color:rgba(200,212,232,.75)}
.e3 .course-note-body,.e4 .course-note-body,.e5 .course-note-body{color:rgba(255,255,255,.75)}
.course-note-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
font-size:12px;font-weight:700;text-decoration:none;transition:gap .2s}
.e1 .course-note-link{color:var(--e1-accent);}
.e2 .course-note-link{color:#4A6FA5}
.e3 .course-note-link,.e4 .course-note-link{color:rgba(255,255,255,.7)}
.e5 .course-note-link{color:var(--cy)}
.course-note:hover .course-note-link{gap:10px}
/* ── STOCKS / TECH ELEMENTS ── */
.stk{overflow:hidden;padding:10px 0;margin:13px 0}
.e1 .stk{border-top:1px solid var(--e1-border);border-bottom:1px solid var(--e1-border);
background:rgba(139,115,85,.05)}
.e2 .stk{border-top:1px solid rgba(74,111,165,.2);border-bottom:1px solid rgba(74,111,165,.2);
background:rgba(74,111,165,.04)}
.e3 .stk,.e4 .stk,.e5 .stk{
border-top:1px solid rgba(0,200,224,.15);border-bottom:1px solid rgba(0,200,224,.15);
background:rgba(0,200,224,.03)}
.stki{display:flex;white-space:nowrap;animation:ta 16s linear infinite}
.si{display:inline-flex;align-items:center;gap:7px;margin:0 28px;font-size:12px;font-weight:700;letter-spacing:1px}
.e1 .si{color:var(--e1-text)}
.e2 .si{color:#C8D4E8}
.e3 .si,.e4 .si,.e5 .si{color:var(--wh)}
.sup{color:#39FF14}.sdn{color:#FF4466}
/* ── CAR STRIP ── */
.car-s{overflow:hidden;height:46px;position:relative;border-radius:8px;margin:12px 0;
background:rgba(0,200,224,.03)}
.car{position:absolute;top:50%;transform:translateY(-50%);font-size:28px;
white-space:nowrap;animation:cg 5s linear infinite}
@keyframes cg{from{left:-120px}to{left:calc(100% + 120px)}}
@keyframes teslaDrive{0%{left:-340px;opacity:0}5%{opacity:1}90%{opacity:1}100%{left:calc(100% + 40px);opacity:0}}
5%{opacity:1}85%{opacity:1}100%{left:calc(100% + 200px);opacity:0}}
5%{opacity:1}80%{opacity:1}100%{left:calc(100% + 200px);opacity:0}}
/* ── AI WINDOW ── */
.aiw{background:#111;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;margin-top:13px}
.aib{background:#1A1A1A;padding:8px 13px;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(255,255,255,.06)}
.aid{display:flex;gap:5px}.aid span{width:10px;height:10px;border-radius:50%}
.d1{background:#FF5F57}.d2{background:#FFBD2E}.d3{background:#28CA41}
.ain{font-size:11px;color:rgba(255,255,255,.3);margin-left:7px}
.aibody{padding:13px}
.aiq{background:rgba(27,79,216,.18);border:1px solid rgba(27,79,216,.3);
border-radius:10px 10px 10px 3px;padding:9px 11px;font-size:12px;max-width:82%;margin-bottom:9px}
.cur{display:inline-block;width:2px;height:12px;background:var(--cy);
animation:bl .7s step-end infinite;vertical-align:middle;margin-left:2px}
@keyframes bl{0%,100%{opacity:1}50%{opacity:0}}
.aia{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
border-radius:10px 10px 3px 10px;padding:9px 11px;font-size:12px;
color:rgba(255,255,255,.6);margin-left:auto;max-width:85%}
.typing{display:flex;gap:4px;padding:2px 0}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--cy);opacity:.4;
animation:tyd 1.2s ease-in-out infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes tyd{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
/* ── DIVIDER ── */
.divp{width:100px;align-items:center;justify-content:center;flex-direction:column;gap:10px}
.dvl{width:2px;height:90px;background:linear-gradient(to bottom,transparent,var(--bu),transparent)}
.dvd{width:13px;height:13px;border-radius:50%;background:var(--bu);
box-shadow:0 0 14px var(--bu);animation:gl 2s ease-in-out infinite alternate,pu 1.5s ease-in-out infinite}
@keyframes gl{from{box-shadow:0 0 7px var(--bu)}to{box-shadow:0 0 20px var(--cy)}}
/* ── FINAL PANEL ── */
.finalp{width:100vw;align-items:center;justify-content:center;text-align:left;
background:radial-gradient(ellipse at center,rgba(27,79,216,.2),transparent 65%)}
.fin{max-width:580px;padding:0 28px}
.finl{font-size:10px;font-weight:700;letter-spacing:4px;text-transform:uppercase;
color:var(--cy);margin-bottom:13px}
.finh{font-size:clamp(24px,4vw,46px);font-weight:800;line-height:1.08;margin-bottom:13px}
.finp{font-size:15px;color:rgba(240,240,255,.6);line-height:1.7;margin-bottom:24px}
.fimg{width:260px;border-radius:12px;border:2px solid rgba(27,79,216,.4);
box-shadow:0 16px 56px rgba(0,0,0,.5);margin:0 auto 24px;display:block}
.btnbig{display:inline-flex;align-items:center;gap:11px;background:var(--bu);color:#fff;
border:none;border-radius:12px;padding:16px 42px;
font-family:'Wix Madefor Display',sans-serif;font-size:15px;font-weight:800;
cursor:pointer;box-shadow:0 0 44px rgba(27,79,216,.5);transition:all .25s}
.btnbig:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 68px rgba(27,79,216,.7)}
.hand{animation:hr 1.5s ease-in-out infinite;display:inline-block}
@keyframes hr{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(4px) rotate(-8deg)}}
/* VIDEO PANEL */
.vp{width:580px;align-items:center;justify-content:center}
.vf{overflow:hidden;position:relative;width:92%}
.e1 .vf{border:2px solid var(--e1-border);border-radius:0}
.e2 .vf{border:2px solid var(--e2-border);border-radius:4px}
.e3 .vf,.e4 .vf,.e5 .vf{border:2px solid rgba(27,79,216,.35);border-radius:13px;
box-shadow:0 20px 70px rgba(0,0,0,.65)}
.vf video,.vf img{width:100%;display:block;max-height:360px;object-fit:cover}
.vcap{position:absolute;bottom:0;left:0;right:0;background:rgba(9,9,11,.9);
padding:10px 13px;font-size:13px;font-weight:700;text-align:center}
.e1 .vcap{color:var(--e1-accent)}
.e2 .vcap{color:#4A6FA5}
.e3 .vcap,.e4 .vcap,.e5 .vcap{color:var(--ye)}
/* ══════════════════════════════════════════
MOBILE ADAPTATION (≤768px)
Switches the whole experience from horizontal swipe
to a normal vertical scroll: every panel becomes a
full-width block stacked top-to-bottom, every row/grid
layout collapses into a single column. Min font size 13px.
══════════════════════════════════════════ */
@media (max-width:768px){
html,body{overflow-x:hidden !important;overflow-y:visible !important;height:auto !important;width:100% !important;max-width:100% !important;position:relative !important}
#tk{position:static !important;width:100% !important}
#tl{display:none !important}
#root{position:static !important;top:0;bottom:0;overflow:visible !important}
#track{display:block !important;height:auto !important;transform:none !important;width:100% !important}
/* left vertical progress rail */
#mrail{display:block;position:fixed;top:0;left:0;bottom:0;width:4px;background:rgba(255,255,255,.08);z-index:601}
#mrail-fill{position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(to bottom,var(--bu),var(--cy));box-shadow:0 0 8px var(--cy)}
/* (rail no longer pads body — avoids width overflow; rail floats on top) */
/* every panel: full width, natural height, stack vertically */
.p{width:100% !important;max-width:100vw !important;height:auto !important;min-height:auto !important;
flex-direction:column !important;padding:48px 20px !important;
justify-content:flex-start !important;overflow:visible !important;box-sizing:border-box !important}
.scrollp{overflow-y:visible !important}
/* any row/grid composite layout collapses to single column */
.p[style*="flex-direction:row"]{flex-direction:column !important}
.p > div[style*="display:grid"],div[style*="grid-template-columns"]{
display:flex !important;flex-direction:column !important;gap:14px !important}
/* era divider screens ("2000", "2010"...) — 60-70% of viewport height */
.era-p{min-height:50vh !important;height:50vh !important;justify-content:center !important;padding-top:8px !important}
.era-chip{margin-bottom:12px !important}
/* remove fixed desktop widths so content fills the screen */
.p[style*="width:"]{width:100% !important;max-width:100% !important}
/* hero */
.hero-p{flex-direction:column !important}
.hero-left,.hero-right{width:100% !important;flex:none !important;padding:0 !important}
.hero-left{padding-bottom:32px !important}
.hero-h1{font-size:24px !important;line-height:1.3 !important}
.hero-p-text{font-size:16px !important;line-height:1.35 !important}
.hero-right{padding-top:8px !important}
.hero-right .mf{height:auto !important}
.hero-right img{max-height:340px !important}
#hero-logos{margin-top:8px !important}
/* speaker card */
.spk{width:130px !important;margin:8px auto 28px}
.spk img{aspect-ratio:1/1 !important;object-position:center center !important}
/* split helper classes from the old swipe version now just stack */
.msplit-a,.msplit-b{width:100% !important;flex:none !important}
.mobile-scroll{max-height:none !important;overflow-y:visible !important}
/* section text sizing — body text bumped to 15-16px, tighter line-height */
.sec-tag{font-size:14px !important;letter-spacing:1.5px !important}
.sec-h2{font-size:21px !important;line-height:1.2 !important}
.sec-body{font-size:16px !important;line-height:1.35 !important}
.sec-hbox{font-size:16px !important;line-height:1.3 !important}
.bullet-line{font-size:16px !important;line-height:1.3 !important}
.ct{font-size:16px !important}
.cd{font-size:16px !important;line-height:1.3 !important}
/* meme/photo panels */
.mp{padding:40px 20px !important}
.mf.mf-sm{width:100% !important;max-width:400px !important;margin:0 auto}
.vp{padding:40px 20px !important}
.vf{width:100% !important}
.vf video,.vf img{max-height:360px !important;height:360px !important}
.mcap,.vcap{font-size:16px !important;line-height:1.25 !important}
.mtag{font-size:11px !important;padding:3px 8px !important}
/* era stop year text sizing */
.era-yr{font-size:clamp(70px,24vw,120px) !important}
.era-title{font-size:22px !important}
.era-sub{font-size:16px !important}
.era-chip{font-size:16px !important}
/* final CTA */
#p-final{flex-direction:column-reverse !important}
.fin-text,.fin-img{flex:none !important;width:100% !important;padding:0 !important}
.fin-img{padding-top:36px !important;padding-right:0 !important}
.fin-img > div{max-height:340px !important}
.fin-img img{max-height:340px !important}
.fin-text{padding-top:32px !important;padding-bottom:48px !important}
.finh{font-size:21px !important;line-height:1.25 !important}
.finp{font-size:16px !important;line-height:1.3 !important}
/* divider/spacer panels between eras collapse to thin strips */
/* era-divider strips (vertical line + dot before each "РОЗДІЛ" stop) —
rebuilt with consistent sizing so the line/dot/line never overflow
the strip height, and the gradient color-shift isn't visible as a seam */
.divp{min-height:auto !important;height:48px !important;padding:0 !important;
display:flex !important;flex-direction:column !important;
align-items:center !important;justify-content:center !important;gap:5px !important}
.p.divp.e1.e2{background:var(--e2-bg) !important}
.p.divp.e2.e3{background:var(--e3-bg) !important}
.p.divp.e3.e4{background:var(--e4-bg) !important}
.p.divp.e4.e5{background:var(--e5-bg) !important}
.dvl{height:14px !important;width:2px !important}
.dvd{width:9px !important;height:9px !important;flex-shrink:0 !important}
/* Tesla horizontal-drive animation strip — keep it riding full-width */
#tesla-strip{width:100% !important;overflow:hidden !important;position:relative !important;height:100px !important;margin:28px 0 16px !important}
#tesla-car{animation:teslaDrive 6s linear infinite !important}
/* stock ticker — horizontal scroll inside is fine, text stays readable */
.stk{overflow-x:auto !important}
.si{font-size:16px !important}
/* AI chat widget */
.aiw{max-width:100% !important;margin-top:20px !important}
/* more breathing room around the youtube mockup widget */
#yt-win{margin-bottom:32px !important}
.ain,.aiq{font-size:16px !important;line-height:1.3 !important}
/* course CTA cards */
a{font-size:16px !important}
/* copyright footer — flows under the final CTA block instead of
overlaying it as a fixed white bar */
#copyright-bar{display:none !important}
#cp-footer{display:block !important;position:static !important;
border-top:1px solid #e5e5e5 !important;padding:18px 20px !important}
#cp-footer p{font-size:13px !important;line-height:1.45 !important}
/* ── GLOBAL OVERRIDE: many body-text lines use inline font-size
instead of a shared class. On mobile bump all of them to a
readable 15px and tighten the line-height. ── */
[style*="font-size:13.5px"],
[style*="font-size:13px"]{font-size:16px !important;line-height:1.35 !important}
/* small uppercase eyebrow/kicker labels (10px/9px tracked-out caps)
— bump to readable size and cut the excessive letter-spacing */
[style*="font-size:10px"],
[style*="font-size:9px"]{font-size:14px !important;letter-spacing:1px !important}
/* card grids (alternatives, course cards, etc.) need breathing room
on the sides instead of touching the screen edge */
.p > div[style*="display:grid"] > div,
div[style*="grid-template-columns"] > div{
margin:0 4px !important}
/* course cards (fixed 380px in desktop) — go fluid with side gutters */
div[style*="width:380px"],
div[style*="width:420px"]{width:100% !important;max-width:340px !important;margin:0 auto !important}
}