:root{--ink:#09090b;--muted:#69696f;--pink:#006cff;--hot:#00c2ff;--soft:#edf7ff;--line:#ececf0;--shadow:0 25px 70px rgba(15,44,82,.13);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#f4f4f6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.page{width:min(1240px,calc(100% - 32px));margin:auto;padding:52px 0 80px}.intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:26px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.16em;color:var(--pink);margin:0 0 11px;text-transform:uppercase}.intro h1{font-size:clamp(34px,5vw,64px);letter-spacing:-.06em;line-height:.93;margin:0}.intro h1 span{color:#94949a}.hint{color:var(--muted);font-size:13px;font-weight:700;margin:0 0 5px}.player-shell{padding:12px;background:#111;border-radius:26px;box-shadow:0 28px 80px rgba(0,0,0,.22)}.stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,#fff 58%,#eef8ff);border-radius:16px;isolation:isolate}.scene{position:absolute;inset:0;display:flex;align-items:center;padding:8% 7%;opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .42s ease,transform .65s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}.scene.active{opacity:1;visibility:visible;transform:none;transition-delay:0s}.ambient{position:absolute;border-radius:50%;filter:blur(12px);opacity:.75;z-index:-1}.ambient-a{width:34%;aspect-ratio:1;background:rgba(0,108,255,.09);right:-12%;top:-20%}.ambient-b{width:25%;aspect-ratio:1;background:rgba(0,194,255,.10);left:-8%;bottom:-19%}.brand-bug{position:absolute;left:4.2%;top:5%;z-index:20;display:flex;align-items:center;gap:8px;font-size:clamp(8px,1vw,16px);font-weight:650;letter-spacing:-.03em}.brand-mark,.logo-box{display:grid;place-items:center;background:var(--ink);color:white;font-weight:950;border-radius:5px;padding:.3em;line-height:1}.brand-bug b,.final-mark strong{color:var(--pink)}.copy{width:58%;position:relative;z-index:2}.pill,.kicker{display:inline-block;background:linear-gradient(100deg,var(--pink),var(--hot));color:white;border-radius:999px;padding:.58em 1.05em;font-size:clamp(9px,1.4vw,23px);font-weight:950;font-style:italic;letter-spacing:.015em;box-shadow:0 12px 30px rgba(0,108,255,.22)}.pill.small{font-size:clamp(9px,1.1vw,19px)}.copy h2,.scene-5 h2{font-size:clamp(40px,7.3vw,116px);line-height:.82;letter-spacing:-.075em;margin:.18em 0 .2em;font-weight:950}.copy h2 em,.scene-5 h2 em{color:var(--pink);font-style:normal}.copy p{font-size:clamp(11px,1.5vw,25px);font-weight:650;color:var(--muted);margin:0}.nas-wrap{position:absolute;right:8%;width:30%;aspect-ratio:1}.nas{position:absolute;width:42%;height:58%;left:29%;top:18%;background:linear-gradient(145deg,#2d2d31,#111);border-radius:7% 7% 5% 5%;box-shadow:18px 30px 50px rgba(0,0,0,.26);padding:16% 7% 8%;z-index:3}.nas-top{position:absolute;top:6%;left:9%;width:82%;height:3%;background:#4c4c52;border-radius:2px}.bay{height:34%;margin-bottom:7%;border-radius:5px;background:linear-gradient(90deg,#19191c,#29292d);position:relative;border:1px solid #39393e}.bay i:first-child{position:absolute;left:8%;top:12%;width:4%;height:76%;background:#444;border-radius:2px}.bay i:last-child{position:absolute;right:7%;top:15%;width:5px;height:5px;background:#55e88c;border-radius:50%;box-shadow:0 10px #55e88c}.led{position:absolute;bottom:5%;right:8%;width:5px;height:5px;background:var(--pink);border-radius:50%}.orbit{position:absolute;border:1px solid rgba(0,108,255,.20);border-radius:50%;inset:0;animation:orbit 8s linear infinite}.o2{inset:11%;animation-direction:reverse;animation-duration:5s}.mini-card{position:absolute;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:8% 9%;font-size:clamp(18px,3vw,50px);z-index:4;color:var(--pink)}.mini-card small{display:block;color:var(--ink);font-size:clamp(6px,.8vw,13px);font-weight:800;margin-top:4px}.cloud{right:-2%;top:5%}.shield{left:-5%;bottom:4%}.scene.active .nas{animation:rise .8s .15s both}.scene.active .mini-card{animation:pop .6s .65s both}.scene.active .shield{animation-delay:.85s}.compact{width:45%}.kicker{background:none;box-shadow:none;color:var(--pink);padding:0;border-radius:0;font-style:normal}.dashboard{width:45%;margin-left:auto;background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:4%;transform:rotate(2deg)}.dash-bar{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);padding-bottom:8%}.dash-bar span{width:36%;height:8px;background:#ededf0;border-radius:9px;margin-right:auto}.dash-bar i{width:7px;height:7px;border-radius:50%;background:#ddd}.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:8%}.dash-tile{min-height:85px;border-radius:11px;background:#f5f5f7;padding:14%;display:flex;flex-direction:column;justify-content:end}.dash-tile b{font-size:clamp(18px,3vw,46px);letter-spacing:-.06em}.dash-tile small{font-size:clamp(7px,.8vw,12px);font-weight:700;color:#777}.dash-tile.pink{background:linear-gradient(135deg,var(--pink),var(--hot));color:white}.dash-tile.pink small{color:white}.dash-tile.wide{grid-column:1/3;min-height:120px;position:relative;overflow:hidden}.line{position:absolute;height:3px;background:#ddd;transform-origin:left;transform:rotate(-10deg)}.l1{width:42%;left:10%;top:58%}.l2{width:35%;left:43%;top:44%;transform:rotate(18deg);background:var(--pink)}.l3{width:27%;left:69%;top:55%}.pulse{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--pink);left:70%;top:39%;box-shadow:0 0 0 8px rgba(0,108,255,.14)}.cursor{position:absolute;font-size:30px;right:7%;bottom:4%;transform:rotate(-35deg)}.scene.active .dashboard{animation:slideLeft .75s .12s both}.scene.active .cursor{animation:click 1.2s 1s both}
.scene-3{justify-content:space-between}.number-block{width:40%;display:flex;flex-direction:column;line-height:.77}.number-block span{font-size:clamp(11px,1.5vw,24px);font-weight:950;letter-spacing:.18em;color:var(--pink)}.number-block strong{font-size:clamp(110px,20vw,320px);letter-spacing:-.09em}.number-block em{font-style:normal;font-size:clamp(20px,3.5vw,56px);font-weight:950;letter-spacing:-.05em}.course-deck{width:45%;height:66%;position:relative}.course-card{position:absolute;width:68%;height:82%;right:12%;top:8%;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:10%;display:flex;flex-direction:column;transform-origin:bottom right}.course-card i{font-style:normal;font-weight:950;color:var(--pink)}.course-card b{font-size:clamp(20px,3.6vw,56px);line-height:.92;letter-spacing:-.06em;margin:auto 0}.course-card span{font-size:clamp(7px,1vw,15px);font-weight:800;color:#777}.c2{transform:rotate(-9deg) translate(-15%,2%);background:#f3f3f5}.c3{transform:rotate(-17deg) translate(-29%,8%);background:#dff4ff}.scene.active .c1{animation:deal1 .8s .4s both}.scene.active .c2{animation:deal2 .8s .25s both}.scene.active .c3{animation:deal3 .8s .1s both}.tempo-ui{width:40%;height:65%;position:relative}.play-disc{position:absolute;right:7%;top:0;width:52%;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--hot));display:grid;place-items:center;box-shadow:0 18px 45px rgba(0,108,255,.28)}.play-disc:before,.play-disc:after{content:"";position:absolute;border:1px solid rgba(0,108,255,.22);border-radius:50%;inset:-18%}.play-disc:after{inset:-36%;opacity:.55}.play-disc span{color:white;font-size:clamp(24px,5vw,80px);transform:translateX(7%)}.lesson-card{position:absolute;left:0;bottom:0;width:78%;padding:8%;background:white;border-radius:16px;box-shadow:var(--shadow)}.lesson-card small{font-weight:900;letter-spacing:.12em;color:#8b8b90}.lesson-card b{display:block;font-size:clamp(26px,5vw,80px);letter-spacing:-.07em}.lesson-card p{font-size:clamp(7px,.9vw,14px);font-weight:700;margin:8% 0 0}.meter{height:7px;background:#eee;border-radius:10px;overflow:hidden}.meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--pink),var(--hot));border-radius:10px}.time-chip{position:absolute;right:-1%;bottom:7%;background:#111;color:white;padding:3% 5%;border-radius:999px;font-size:clamp(8px,1vw,15px);font-weight:800}.scene.active .play-disc{animation:pop .65s .15s both,pulseGlow 1.8s 1s infinite}.scene.active .lesson-card{animation:rise .7s .45s both}.scene.active .meter i{animation:fill 1.4s .9s both}.scene-5{flex-direction:column;align-items:center;justify-content:center;text-align:center}.final-mark{display:flex;align-items:center;gap:12px;font-size:clamp(16px,2.4vw,38px);font-weight:750;letter-spacing:-.05em}.logo-box{font-size:.65em;border-radius:8px}.scene-5 h2{font-size:clamp(42px,7.1vw,114px);margin:.18em 0}.cta{display:flex;gap:24px;align-items:center;background:linear-gradient(100deg,var(--pink),var(--hot));color:white;border-radius:999px;padding:.65em 1.2em;font-size:clamp(12px,1.7vw,27px);font-weight:900;box-shadow:0 14px 35px rgba(0,108,255,.28)}.cta span{font-size:1.4em}.url{font-size:clamp(8px,1vw,16px);font-weight:800;letter-spacing:.13em}.final-ring{position:absolute;border:1px solid rgba(0,108,255,.16);border-radius:50%;aspect-ratio:1;z-index:-1}.r1{width:65%}.r2{width:82%}.scene.active .final-mark{animation:rise .6s .1s both}.scene.active h2{animation:rise .65s .28s both}.scene.active .cta{animation:pop .6s .7s both}.stage-progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(0,0,0,.08);z-index:30}.stage-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--hot))}.controls{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:19px 8px 0}.controls button{border:0;border-radius:999px;background:#111;color:#fff;padding:13px 22px;font-weight:850;font-size:15px;cursor:pointer;min-width:128px;transition:transform .2s,background .2s}.controls button:hover{background:var(--pink);transform:translateY(-2px)}.controls button:focus-visible{outline:3px solid rgba(0,108,255,.32);outline-offset:3px}.time{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;font-variant-numeric:tabular-nums;font-size:12px;font-weight:800;color:#666}.time i{height:1px;background:#ccc}.scene-dots{display:flex;gap:6px}.scene-dots span{width:7px;height:7px;border-radius:10px;background:#c8c8cd;transition:width .3s,background .3s}.scene-dots span.active{width:20px;background:var(--pink)}.guide{margin-top:70px;background:#fff;border-radius:24px;padding:clamp(28px,5vw,64px);box-shadow:0 20px 70px rgba(0,0,0,.06);display:grid;grid-template-columns:.8fr 1.2fr;gap:8%}.guide h3{font-size:clamp(30px,4vw,56px);letter-spacing:-.06em;line-height:.95;margin:0}.guide ol{margin:0;padding:0;list-style:none;counter-reset:steps;display:grid;gap:22px}.guide li{counter-increment:steps;display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:center}.guide li:before{content:counter(steps);grid-row:1/3;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--soft);color:var(--pink);font-weight:950}.guide li b{font-size:16px}.guide li span{color:var(--muted);font-size:14px;line-height:1.45;margin-top:3px}@keyframes rise{from{opacity:0;transform:translateY(25px)}}@keyframes pop{0%{opacity:0;transform:scale(.7)}70%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes slideLeft{from{opacity:0;transform:translateX(70px) rotate(7deg)}to{opacity:1;transform:rotate(2deg)}}@keyframes click{0%{transform:translate(40px,30px) rotate(-35deg);opacity:0}55%{transform:translate(0) rotate(-35deg);opacity:1}70%{transform:translate(0) rotate(-35deg) scale(.8)}100%{transform:translate(0) rotate(-35deg)}}@keyframes deal1{from{opacity:0;transform:translateX(80px) rotate(10deg)}}@keyframes deal2{from{opacity:0;transform:translateX(80px) rotate(5deg)}to{transform:rotate(-9deg) translate(-15%,2%)}}@keyframes deal3{from{opacity:0;transform:translateX(80px)}to{transform:rotate(-17deg) translate(-29%,8%)}}@keyframes fill{to{width:72%}}@keyframes pulseGlow{50%{box-shadow:0 18px 70px rgba(0,194,255,.46)}}
@media(max-width:760px){.page{width:min(100% - 18px,1240px);padding-top:24px}.intro{align-items:start}.hint{display:none}.brand-bug{top:4%}.controls{grid-template-columns:auto 1fr}.scene-dots{display:none}.guide{grid-template-columns:1fr;gap:35px}.guide li span{font-size:13px}.player-shell{padding:6px;border-radius:17px}.stage{border-radius:11px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Brand refinement: compact original logo and safer course-count spacing. */
.brand-bug{left:3.6%;top:3.8%;width:clamp(90px,12vw,190px);opacity:.82}
.brand-bug img{display:block;width:100%;height:auto;object-fit:contain}
.number-block strong{font-size:clamp(88px,16.5vw,264px);line-height:.78}
.number-block em{margin-top:.18em}

/* Two restrained CTA pulses during the final second and a half. */
.scene.active .cta{animation:pop .6s .55s both,ctaPulse .65s 1.45s ease-in-out 2}
@keyframes ctaPulse{
  0%,100%{transform:scale(1);box-shadow:0 14px 35px rgba(0,108,255,.28)}
  50%{transform:scale(1.055);box-shadow:0 18px 52px rgba(0,194,255,.55)}
}

/* Elementor/iframe mode: only the responsive 16:9 animation remains visible. */
body.embed-mode{background:#fff;overflow:hidden}
.embed-mode .page{width:100%;margin:0;padding:0}
.embed-mode .intro,.embed-mode .controls,.embed-mode .guide{display:none}
.embed-mode .player-shell{padding:0;background:transparent;border-radius:0;box-shadow:none}
.embed-mode .stage{width:100%;border-radius:18px;cursor:pointer}

/* Added brand-claim scene between the course count and learning pace. */
.scene-claim{justify-content:space-between;background:linear-gradient(145deg,#fff 52%,#eaf7ff)}
.claim-lockup{width:68%;position:relative;z-index:2}
.claim-kicker{display:inline-block;color:var(--pink);font-size:clamp(11px,1.55vw,25px);font-weight:950;letter-spacing:.16em}
.claim-lockup h2{font-size:clamp(48px,8.5vw,136px);line-height:.84;letter-spacing:-.075em;margin:.18em 0 .2em;font-weight:950}
.claim-lockup h2 em{color:var(--pink);font-style:normal}
.claim-rule{display:flex;align-items:center;gap:15px;color:var(--muted);font-size:clamp(8px,1.1vw,17px);font-weight:750}
.claim-rule i{display:block;width:0;height:4px;border-radius:5px;background:linear-gradient(90deg,var(--pink),var(--hot))}
.claim-symbol{position:relative;width:27%;aspect-ratio:1}
.question,.check{position:absolute;display:grid;place-items:center;width:46%;aspect-ratio:1;border-radius:50%;font-size:clamp(28px,6vw,92px);font-weight:950}
.question{left:0;top:12%;background:#f1f1f4;color:#aaa}
.check{right:0;bottom:12%;background:linear-gradient(135deg,var(--pink),var(--hot));color:#fff;box-shadow:0 20px 55px rgba(0,108,255,.28)}
.path{position:absolute;left:31%;top:47%;width:48%;height:4px;background:linear-gradient(90deg,#bbb,var(--pink));transform:rotate(28deg);transform-origin:left;border-radius:4px}
.scene-claim.active .claim-kicker{animation:rise .55s .05s both}
.scene-claim.active h2{animation:rise .65s .22s both}
.scene-claim.active .claim-rule{animation:rise .55s .55s both}
.scene-claim.active .claim-rule i{animation:claimLine .8s .72s both}
.scene-claim.active .question{animation:claimQuestion .65s .2s both}
.scene-claim.active .path{animation:claimPath .65s .72s both}
.scene-claim.active .check{animation:pop .6s 1.05s both}
@keyframes claimLine{to{width:clamp(42px,7vw,110px)}}
@keyframes claimQuestion{from{opacity:0;transform:translate(-30px,-20px) rotate(-15deg)}to{opacity:1;transform:none}}
@keyframes claimPath{from{opacity:0;transform:rotate(28deg) scaleX(0)}to{opacity:1;transform:rotate(28deg) scaleX(1)}}

/* More breathing room for multi-line headlines and their supporting copy. */
.copy h2,.scene-5 h2{line-height:.9;margin-bottom:.3em}
.claim-lockup h2{line-height:.9;margin-bottom:.3em}