:root{--bg:#26066b;--deep:#1b054c;--text:#fffaff;--muted:#cdb9ee;--orange:#ff8a00;--border:#8d39dd;--radius:26px;--ease:cubic-bezier(.22,.7,.25,1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.45;overflow-x:clip}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button,input{font:inherit}button,a{color:inherit}button{cursor:pointer}a{text-decoration:none}button{border:0}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #ffd084;outline-offset:6px}button:active,.button:active{transform:scale(.98)}button:disabled{cursor:default}button{background:none}svg{width:24px;height:24px;flex-shrink:0}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.container{width:min(1320px,calc(100% - 96px));margin-inline:auto}.section{padding:92px 0}.scene{position:relative;isolation:isolate}.header{height:110px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:15px;font-weight:800;font-size:22px;line-height:1.06;letter-spacing:-.5px}.brand-mark{display:grid;grid-template-columns:repeat(2,25px);gap:4px}.brand-mark i{font-style:normal;font-weight:900;font-size:23px;display:grid;place-items:center;border-radius:5px;background:var(--orange);color:#35067d;height:25px}.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){background:#fff}.desktop-nav{display:flex;align-items:center;padding:5px;border:1px solid #8e3bdd;border-radius:99px;background:linear-gradient(130deg,#6c21c65e,#7130ba25);box-shadow:inset 0 2px 8px #ffffff08}.desktop-nav a,.desktop-nav button{font-size:14px;font-weight:600;padding:13px 23px;border-radius:99px;transition:background .2s}.desktop-nav .active{background:linear-gradient(#8e32f6,#6d16d8);box-shadow:0 3px 12px #1b044844}.desktop-nav a:hover,.desktop-nav button:hover{background:#883be25e}.login{display:flex;align-items:center;gap:10px;background:#fff;color:#20073f;border-radius:99px;font-size:17px;font-weight:700;padding:11px 24px}.login svg{width:21px;height:21px}.menu-toggle{display:none}.mobile-nav[hidden]{display:none}.skip-link{position:fixed;top:12px;left:12px;background:white;color:#270267;padding:14px;z-index:100;transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}
.hero{min-height:730px;margin-top:-110px;padding-top:110px;background:radial-gradient(ellipse at 69% 78%,#8026edaa,transparent 46%),radial-gradient(ellipse at 70% 0%,#500abb,transparent 64%),linear-gradient(145deg,#300579,#200653 70%,#390888);overflow:hidden}.hero-inner{min-height:680px;position:relative}.hero-word{position:absolute;top:114px;left:50%;transform:translateX(-50%);font-size:clamp(120px,17.3vw,255px);font-weight:1000;letter-spacing:-.045em;line-height:1.05;background:linear-gradient(#e7c4ff 5%,#bc80f5 45%,#6924bd);color:transparent;background-clip:text;white-space:nowrap;opacity:.91;z-index:-1}.hero-copy{padding-top:206px;position:relative;z-index:2;width:60%;pointer-events:none}.hero-copy>*{pointer-events:auto}.eyebrow{display:inline-flex;align-items:center;gap:12px;padding:9px 19px;border:1px solid #a453ef;border-radius:99px;background:linear-gradient(130deg,#7418c854,#4a129d5c);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:14px;box-shadow:inset 0 1px #d195f32e}.eyebrow svg{height:27px;width:33px}.eyebrow>span{color:#ffa71c;font-size:25px;line-height:1}h1,h2,h3,p{margin:0}h1,h2{font-weight:950;letter-spacing:-.035em;line-height:1.06}h1{font-size:clamp(42px,5.15vw,76px);text-transform:uppercase;margin:20px 0 12px}em{font-style:normal;color:var(--orange)}h1 em,h2 em{background:linear-gradient(180deg,#ffab07,#ff7900);background-clip:text;color:transparent}.hero-copy>p{font-size:26px;line-height:1.38;color:var(--muted)}.hero-actions{display:flex;gap:16px;margin-top:29px;align-items:center;white-space:nowrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:61px;padding:15px 24px;border-radius:99px;font-size:17px;font-weight:700;transition:box-shadow .22s,background .22s,transform .22s}.primary{background:linear-gradient(155deg,#ff9900,#ff7100 80%);box-shadow:inset 0 1px 2px #fff494,0 0 0 1px #ffb91b,0 7px 26px #ff6b002e;color:white;text-shadow:0 1px 2px #9d330080}.primary>span{font-size:29px;line-height:1;font-weight:400}.primary:hover{box-shadow:inset 0 1px 2px #fff494,0 0 0 1px #ffd765,0 5px 35px #ff8d0059}.secondary{border:1px solid #9f4ce7;background:#2e096962;gap:12px;font-weight:500;font-size:15px;padding:9px 20px}.secondary:hover{background:#7a26c65c}.play{width:36px;height:36px;border:1px solid #9c41e0;border-radius:50%;display:grid;place-items:center;font-size:15px;padding-left:2px}.hero-visual{position:absolute;right:-40px;top:2px;width:58%;height:660px;pointer-events:none}.mascot{position:absolute;height:680px;width:auto;max-width:none;object-fit:contain;left:1%;top:0;z-index:2;filter:drop-shadow(0 14px 12px #10033060);animation:mascot-in .75s var(--ease) both}.ground{position:absolute;width:530px;height:60px;bottom:0;left:0;background:radial-gradient(ellipse,#bc6bff99,transparent 68%);filter:blur(8px)}.formula{position:absolute;color:#ad65ed;opacity:.65;font-family:Georgia,serif;font-size:32px;font-style:italic;z-index:-1}.f1{left:3%;top:170px;transform:rotate(-12deg)}.f2{right:3%;top:166px;font-size:47px;transform:rotate(8deg)}.f3{left:8%;bottom:25px;transform:rotate(-8deg)}.f4{right:4%;bottom:26px}.orbit{position:absolute;border:1px solid #bd69ff88;border-radius:50%;transform:rotate(-25deg);box-shadow:0 -1px 2px #9b3afa40;pointer-events:none}.orbit:before,.orbit:after{content:"";position:absolute;width:10px;height:10px;background:#f6d4ff;border-radius:50%;box-shadow:0 0 15px 4px #c553ff}.orbit:before{left:10%;top:17%}.orbit:after{right:7%;bottom:22%}.hero-orbit{width:760px;height:285px;top:380px;left:47%;transform:rotate(-22deg);z-index:-1}.sphere{position:absolute;right:3%;top:150px;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 28% 23%,#fff 1%,#d8a1ff 5%,#aa54fa 15%,#6b15c6 42%,#44008c 64%,#c567ff 88%,#f9b6cb);box-shadow:inset 0 0 5px #f1cbff,0 12px 28px #16003777}.cube{position:absolute;width:64px;height:64px;left:3%;bottom:114px;transform:rotate(-20deg) skew(8deg);border:2px solid #da9aff;border-radius:4px;background:linear-gradient(135deg,#d487ff,#9a40ed 50%,#5907b1 51%);box-shadow:inset 3px 4px 15px #efbcff88,0 0 25px #912df774}.pyramid{position:absolute;width:74px;height:86px;right:0;bottom:72px;background:conic-gradient(from 155deg at 50% 0,#400085,#b160ff,#f0c2ff,#7423c6);clip-path:polygon(50% 0,100% 90%,70% 100%,0 77%);transform:rotate(15deg);filter:drop-shadow(0 0 4px #dfa1ff)}.float{animation:float 7s ease-in-out infinite alternate}.cube.float{animation-delay:-3s}.pyramid.float{animation-delay:-5s}.calculator{pointer-events:auto;position:absolute;right:4%;top:275px;width:164px;padding:15px;border:2px solid #dba4ff;border-radius:23px;background:linear-gradient(135deg,#bb73ff,#6523c4 55%,#3b087f);box-shadow:inset 3px 3px 6px #e6b0ff,9px 10px 0 #450982,11px 11px 2px #f18a27,0 15px 40px #16002b88;transform:rotate(19deg);z-index:3;animation:calc-in .8s var(--ease) both}.calc-screen{display:block;background:linear-gradient(125deg,#210448,#4b188d);border-radius:10px;border:2px solid #41156e;box-shadow:inset 2px 3px 8px #150027;color:#f8eaff;font-family:monospace;font-size:32px;text-align:right;padding:2px 10px;margin-bottom:13px}.calc-keys{display:grid;grid-template-columns:1fr 1fr;gap:9px}.calc-keys i{font-style:normal;font-size:37px;font-weight:bold;border-radius:10px;background:linear-gradient(#c086ff,#8c42e9);box-shadow:inset 1px 2px 2px #efceff,0 4px 2px #33005a;line-height:1.3}.calc-keys .equals{background:linear-gradient(#ffba37,#ff7500);box-shadow:inset 1px 2px 2px #ffe49d,0 4px 2px #63225b;transition:transform .18s,box-shadow .18s}.calculator:is(:hover,:focus-visible,.pressed) .equals{transform:translateY(3px);box-shadow:inset 1px 2px 2px #ffe49d,0 1px 2px #63225b}.scroll-hint{display:flex;align-items:center;gap:9px;width:max-content;margin:0 auto;padding-bottom:20px;color:#c4a5e8;font-size:11px;letter-spacing:1px}.scroll-hint span{width:13px;height:22px;border:1px solid #b581de;border-radius:8px;position:relative}.scroll-hint span:after{content:"";position:absolute;width:2px;height:5px;background:#d7b7f9;top:4px;left:4px}
.about{background:radial-gradient(ellipse at 75% 18%,#580cc377,transparent 57%),linear-gradient(#26066b,#270568)}h2{font-size:clamp(34px,3.8vw,56px)}.about-top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;min-height:350px}.about-top h2{margin-top:20px;text-transform:uppercase}.section-copy{font-size:23px;color:var(--muted);line-height:1.45;margin-top:18px;max-width:490px}.draw-underline{position:relative}.draw-underline:after{content:"";position:absolute;bottom:-5px;left:0;width:100%;height:3px;border-radius:50%;background:var(--orange);transform-origin:left;transform:scaleX(0)}.seen .draw-underline:after{animation:underline .9s 1.1s var(--ease) both}.book-scene{height:360px;position:relative;perspective:1000px}.book-scene>.orbit{inset:20px -5px 35px;transform:rotate(-13deg)}.book{position:absolute;width:440px;height:292px;top:36px;left:6%;display:flex;transform:rotate(9deg) rotateX(12deg);filter:drop-shadow(10px 22px 9px #13002d66);perspective:900px}.book-left,.book-right{position:relative;width:50%;height:100%;padding:20px 22px;background:linear-gradient(100deg,#fff5ff,#e9cdf5 75%,#b995d6);border-radius:14px 10px 5px 15px;box-shadow:0 5px #c79ce8,0 10px #a575d3,0 16px 0 6px #5713a0,0 20px 0 7px #8839cf;color:#5a228f}.book-right{background:linear-gradient(100deg,#b78bcd,#f3dbfc 17%,#e6c5f4);border-radius:10px 16px 15px 5px}.book-left b{font-size:24px;font-style:italic;letter-spacing:-1px}.book-left>span{display:block;font-size:17px;font-style:italic;font-weight:600;line-height:1.1}.book-lines{height:35px;margin-top:17px;background:repeating-linear-gradient(transparent 0 9px,#be90df 9px 13px,transparent 13px 17px);border-radius:40%}.book-left strong{display:block;font-size:82px;line-height:1;color:#8b39e4;text-shadow:2px 3px #c895fd}.book-left i{font:22px Georgia;color:#a567d6;display:block;text-align:right}.book-right svg{width:100%;height:155px}.book-right i{font:34px Georgia;display:block;text-align:right;color:#a45ce6}.bookmark{position:absolute;left:48%;top:100%;height:47px;width:26px;background:linear-gradient(90deg,#ff6600,#ffb124);clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);z-index:-1}.turning-page{position:absolute;top:0;left:50%;height:98%;width:49%;border-radius:4px 15px 30px 5px;background:linear-gradient(100deg,#d5b4e8,#fff4ff);transform-origin:left;opacity:0}.seen .turning-page{animation:page-turn 1.15s var(--ease) both}.graph-curve{stroke-dasharray:230;stroke-dashoffset:230}.seen .graph-curve{animation:draw .9s 1.1s ease both}.marker{position:absolute;width:145px;height:28px;right:-18px;top:70px;transform:rotate(-39deg);background:linear-gradient(#ffce62,#ff8a00 45%,#ed5c00);border:1px solid #ffb350;border-radius:5px 10px 10px 5px;box-shadow:inset 0 3px #ffd67b99,0 7px 12px #25034755}.marker:before{content:"";position:absolute;right:100%;top:0;width:35px;height:27px;background:#421c56;clip-path:polygon(100% 0,100% 100%,0 60%,0 40%)}.marker:after{content:"";position:absolute;right:calc(100% + 28px);top:10px;width:20px;height:8px;background:#ffb024;box-shadow:0 0 12px #ffb900}.seen .marker{animation:marker-draw .9s 1.1s ease both}.small.sphere{left:0;right:auto;top:0;width:58px;height:58px}.roles-title{font-size:clamp(30px,3.4vw,48px);text-transform:uppercase;margin:45px 0 25px}.roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.glass{border:1px solid var(--border);border-radius:var(--radius);background:radial-gradient(ellipse at 50% 0,#7a28d44a,transparent 70%),linear-gradient(135deg,#51129844,#36058266);box-shadow:inset 0 1px 1px #daa4ff0e,0 14px 35px #1700411a}.role-card{padding:25px 29px 27px;transition:transform .2s,box-shadow .2s,border-color .2s}.role-card:hover,.role-card:focus-visible{transform:translateY(-4px);box-shadow:0 16px 28px #10002655;border-color:#c27aff}.role-icon{display:block;width:157px;height:129px;margin:0 auto 15px;filter:drop-shadow(0 10px 8px #19003955);transition:transform .2s}.role-card:hover .role-icon{transform:rotate(3deg)}h3{font-size:27px;font-weight:800;letter-spacing:-.6px;line-height:1.2}.role-card p{font-size:20px;color:var(--muted);margin-top:10px;line-height:1.45;max-width:320px}.card-foot{display:block;margin-top:22px;padding-top:15px;border-top:1px solid #aa5bef30;font-size:12px;color:#bd99e4}
.start{background:radial-gradient(ellipse at 75% 10%,#500cab88,transparent 60%),#250563}.section-heading{position:relative;min-height:210px}.kicker{display:block;text-transform:uppercase;letter-spacing:3px;font-weight:700;font-size:14px;color:#c19ce9;margin-bottom:15px}.section-heading h2{text-transform:uppercase}.section-heading>.formula{top:30px;right:30%;transform:rotate(-15deg)}.mini-calculator{position:absolute;right:10%;top:-20px;width:144px;background:linear-gradient(135deg,#bb76ff,#641fc1);border:2px solid #dca1ff;padding:13px;border-radius:22px;transform:rotate(18deg);box-shadow:6px 8px #5c13a0,8px 9px #c176da,0 20px 40px #11002577}.mini-calculator>.mini-screen{display:block;text-align:right;padding:0 15px;background:#300973;border-radius:9px;font-size:34px}.mini-calculator>.mini-keys{display:grid;grid-template-columns:1fr 1fr;font-size:36px;text-align:center;line-height:1.35;font-weight:700}.mini-calculator i{font-style:normal}.mini-calculator i:last-child{background:var(--orange);border-radius:7px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;margin-top:30px}.route{position:absolute;top:-55px;left:0;width:100%;height:70px;overflow:visible;z-index:-1}.route path{fill:none;stroke:#bc62fc;stroke-width:1.5;stroke-dasharray:1400;stroke-dashoffset:1400}.seen .route path{animation:draw 1s ease forwards}.step{position:relative;display:flex;align-items:center;gap:15px;padding:34px 18px 25px;min-height:145px}.step>svg{width:54px;height:64px}.step h3{font-size:18px;letter-spacing:-.3px}.step p{font-size:15px;line-height:1.4;color:var(--muted);margin-top:8px}.step-number{display:grid;place-items:center;position:absolute;top:-30px;left:34px;width:54px;height:54px;border-radius:50%;background:linear-gradient(140deg,#b360ff,#660dc4);border:1px solid #c67bff;box-shadow:inset 0 2px 5px #e5aaff88,0 0 17px #8c1bfa77;font-size:25px;font-weight:800}.step:nth-of-type(odd) .step-number{background:linear-gradient(#ffad00,#ff7200);border-color:#ffcd50;box-shadow:inset 0 2px 5px #ffe68f,0 0 20px #ff8f0055}.seen .step-number{animation:step-in .35s var(--ease) both}.step:nth-of-type(2) .step-number{animation-delay:.2s}.step:nth-of-type(3) .step-number{animation-delay:.4s}.step:nth-of-type(4) .step-number{animation-delay:.6s}.benefits-title{font-size:clamp(32px,3.55vw,50px);text-align:center;margin:70px 0 28px}.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.benefit{text-align:center;padding:22px 13px 29px}.benefit-icon{width:120px;height:122px;filter:drop-shadow(0 9px 8px #18002a77);margin-bottom:14px}.benefit h3{font-size:21px}.benefit p{margin-top:11px;color:var(--muted);font-size:18px}.benefit.seen .chart-icon{animation:chart-grow .55s var(--ease) both;transform-origin:bottom}.benefit.seen .phone-icon{animation:phone-turn .55s ease both}.benefit.seen .lock-icon{animation:lock-close .5s ease both}
.faq{background:radial-gradient(ellipse at 80% 50%,#510ba55e,transparent 60%),#250563;padding-top:75px}.faq h2{margin:19px 0 26px;font-size:clamp(32px,3.55vw,52px)}.faq-layout{display:grid;grid-template-columns:1.65fr 1fr;gap:35px}.faq-list{position:relative;z-index:2}.faq-item{border:1px solid #994ee2;background:linear-gradient(110deg,#6a21ae55,#5622974a);border-radius:17px;margin-bottom:11px;overflow:hidden}.faq-item h3{font-size:20px;letter-spacing:-.3px}.faq-item button{display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;width:100%;padding:17px 20px;font-weight:700;line-height:1.3}.faq-item button:focus-visible{outline-offset:-5px;border-radius:17px}.faq-toggle{width:33px;height:33px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#ffb300,#ff7a00);box-shadow:inset 0 1px 1px #ffe8ab;position:relative}.faq-toggle:before,.faq-toggle:after{content:"";position:absolute;top:15px;left:9px;width:15px;height:2px;background:white;transition:transform .22s}.faq-toggle:after{transform:rotate(90deg)}[aria-expanded=true] .faq-toggle:after{transform:rotate(0)}.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease,visibility .24s;visibility:hidden}.faq-answer.open{grid-template-rows:1fr;visibility:visible}.faq-answer>div{overflow:hidden}.faq-answer p{padding:0 65px 19px 20px;font-size:18px;line-height:1.4;color:var(--muted)}.faq-art{position:relative;height:340px}.faq-art>.orbit{inset:60px -15px 40px;transform:rotate(-35deg)}.question-3d{position:absolute;left:0;top:-90px;font-family:Arial,sans-serif;font-size:300px;font-weight:900;line-height:1.2;transform:rotate(9deg);color:#a94bf7;-webkit-text-stroke:2px #ce8cff;text-shadow:3px 3px #bf6cff,7px 7px #8b2be0,11px 11px #6615a3,14px 14px #521183,0 0 40px #9a2bf955}.chat-bubble{position:absolute;right:3%;top:45px;width:133px;height:95px;border-radius:25px;background:linear-gradient(145deg,#ffc645,#ff7d00);border:2px solid #ffce66;box-shadow:inset 3px 3px 8px #ffe587,5px 6px #dd5b00,0 12px 30px #1b003966;display:flex;align-items:center;justify-content:center;gap:12px;transform:rotate(-9deg)}.chat-bubble:after{content:"";position:absolute;left:18px;top:90%;border-top:30px solid #ff9c16;border-right:27px solid transparent}.chat-bubble i{width:16px;height:16px;border-radius:50%;background:#fff4ff;box-shadow:0 3px 1px #c1551e}.faq-art>.sphere{width:67px;height:67px;left:15px;top:240px}.faq-art>.cube{width:45px;height:45px;top:145px;left:2px}.little-book{position:absolute;top:210px;right:20px;width:140px;height:150px;background:linear-gradient(110deg,#caaaec,#fff0f2);border-radius:12px 8px 8px 12px;transform:rotate(20deg);border-left:8px solid #b28ece;box-shadow:0 4px #a789ba,0 8px #e3b9d9,0 12px #a282b2;color:#5b2989;font-size:12px;font-weight:800;padding:18px 8px}.little-book strong{font-size:75px;font-weight:400;display:block;text-align:center;line-height:1.1}
.finale{overflow:hidden;border-top:1px solid #9737e8;background:radial-gradient(ellipse at 72% 60%,#8729f0,transparent 65%),linear-gradient(110deg,#300878,#460d9c);box-shadow:0 -8px 35px #8c29f91c}.finale-inner{position:relative;min-height:350px;display:flex;align-items:center}.finale-copy{position:relative;z-index:2;padding:45px 0;width:70%}.finale h2{font-size:clamp(36px,4.5vw,65px)}.finale p{font-size:21px;color:var(--muted);margin:16px 0 25px;max-width:600px}.finale-art{position:absolute;right:0;bottom:0;width:36%;height:100%;pointer-events:none}.finale-art img{position:absolute;width:380px;height:auto;top:-4px;right:-25px;transform:rotate(-6deg);filter:drop-shadow(0 10px 15px #24014c99)}.finale-art>.orbit{width:450px;height:150px;top:130px;left:-90px;transform:rotate(-35deg)}.finale-note{position:absolute;right:0;top:40px;background:#fff2ff;color:#6418b0;border-radius:13px 13px 13px 0;padding:10px 14px;font-size:13px;font-weight:800;transform:rotate(8deg);box-shadow:0 7px 20px #27074a66}.finale.seen .finale-art img{animation:gesture .7s ease both}.finale.seen .primary{animation:button-glow .7s ease both}.footer{min-height:125px;display:flex;gap:32px;align-items:center;color:#ceb6e8}.footer .brand{font-size:17px;color:white}.footer .brand-mark{grid-template-columns:repeat(2,20px);gap:3px}.footer .brand-mark i{height:20px;font-size:18px}.footer-tagline{font-size:12px;margin-right:auto}.footer>button{font-size:14px;min-height:44px}.footer>button span{margin-left:15px;color:#c181fc}.copyright{font-size:12px}dialog{width:min(480px,calc(100% - 36px));border:1px solid #a65af1;border-radius:26px;background:radial-gradient(ellipse at top right,#7024b8,#2a0965 70%);color:white;padding:36px;box-shadow:0 25px 100px #100024aa}dialog::backdrop{background:#130028b8;backdrop-filter:blur(7px)}.dialog-close{position:absolute;top:10px;right:13px;width:44px;height:44px;font-size:30px;color:#d4b6ee}.dialog-mark{font-size:40px;color:var(--orange);font-weight:bold}.dialog-mark+h2{font-size:30px;margin:12px 0}.dialog-mark~p{color:var(--muted);font-size:17px;line-height:1.6}.dialog-done{margin-top:24px;width:100%}body.modal-open{overflow:hidden}
@keyframes mascot-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes calc-in{from{opacity:0;transform:rotate(10deg) translateY(12px)}to{opacity:1;transform:rotate(19deg) translateY(0)}}@keyframes float{to{translate:0 -9px}}@keyframes page-turn{0%{opacity:1;transform:rotateY(0)}90%{opacity:1}100%{opacity:0;transform:rotateY(-170deg)}}@keyframes underline{to{transform:scaleX(1)}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes marker-draw{0%{transform:translate(-10px,30px) rotate(-39deg)}100%{transform:translate(0,0) rotate(-39deg)}}@keyframes step-in{from{transform:scale(.8)}to{transform:scale(1)}}@keyframes chart-grow{from{transform:scaleY(.45)}to{transform:scaleY(1)}}@keyframes phone-turn{from{transform:rotate(-9deg)}to{transform:rotate(0)}}@keyframes lock-close{0%{transform:translateY(-6px)}65%{transform:translateY(2px)}100%{transform:translateY(0)}}@keyframes gesture{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-9deg) translateX(-7px)}}@keyframes button-glow{50%{box-shadow:0 0 40px #ffa00077,inset 0 1px 3px #fff9c1}}.scene.offscreen .float{animation-play-state:paused}
@media(min-width:1600px){.hero-word{font-size:255px}.hero{min-height:850px}.hero-inner{min-height:720px}.hero-copy{padding-top:230px}.hero-visual{top:20px}.mascot{height:710px}}
@media(max-width:1150px){.container{width:calc(100% - 64px)}.desktop-nav a,.desktop-nav button{padding:12px 16px;font-size:13px}.brand{font-size:18px}.hero-copy{padding-top:175px}.hero-inner{min-height:630px}.hero-visual{right:-20px;width:54%;top:25px}.mascot{height:610px;left:-14%}.hero-actions{gap:10px;flex-wrap:wrap;max-width:410px}.hero-copy>p{font-size:22px}.hero .primary{font-size:16px}.hero .secondary{min-height:48px}.calculator{width:135px;right:-5%;top:260px;padding:12px}.calc-keys i{font-size:30px}.calc-screen{font-size:26px}.hero-visual>.sphere{right:-5%}.book{width:360px;height:260px;left:0}.book-left,.book-right{padding:15px}.book-left b{font-size:21px}.book-left strong{font-size:66px}.book-right svg{height:135px}.marker{right:-10px}.about-top{gap:30px}.section-copy{font-size:20px}.step{gap:8px;padding:32px 13px 23px}.step>svg{width:42px}.step h3{font-size:16px}.step p{font-size:13px}.benefit h3{font-size:19px}.role-card p{font-size:18px}.faq-layout{grid-template-columns:1.8fr 1fr}.faq-item h3{font-size:18px}.faq-art{transform:scale(.9);transform-origin:center}.finale-copy{width:72%}.finale p{max-width:460px}.finale-art img{right:-50px}.footer-tagline{display:none}.footer .brand{margin-right:auto}}
@media(max-width:850px){.header{height:90px}.desktop-nav{display:none}.login{margin-left:auto;font-size:15px;padding:10px 18px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;gap:6px;border:1px solid #9b4cea;border-radius:50%}.menu-toggle span{display:block;width:18px;height:2px;background:white;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.mobile-nav{position:absolute;top:80px;right:32px;left:32px;z-index:10;display:grid;padding:12px;border:1px solid var(--border);border-radius:20px;background:#350978;box-shadow:0 18px 40px #13002d77}.mobile-nav a,.mobile-nav button{padding:14px;text-align:left;border-radius:10px}.mobile-nav a:hover,.mobile-nav button:hover{background:#7131b8}.hero{margin-top:-90px;padding-top:90px;min-height:690px}.hero-word{top:115px;font-size:17vw}.hero-copy{padding-top:160px;width:65%}h1{font-size:clamp(36px,5.9vw,50px)}.hero-copy>p{font-size:20px}.hero-visual{top:95px;right:-70px;width:57%;height:480px}.mascot{height:490px;left:-24%}.calculator{right:7%;top:230px;width:110px;border-radius:16px;padding:9px}.calc-screen{font-size:23px;padding:0 5px;margin-bottom:8px}.calc-keys{gap:7px}.calc-keys i{font-size:24px;border-radius:6px}.sphere{width:50px;height:50px}.hero-visual>.sphere{right:15%;top:100px}.hero-visual>.cube{width:43px;height:43px;bottom:60px;left:-5%}.pyramid{width:48px;height:60px;right:12%;bottom:40px}.hero-inner{min-height:590px}.hero-actions{max-width:340px;gap:12px}.hero .primary{padding:14px 18px;gap:12px;font-size:15px;min-height:56px}.f1{top:160px;font-size:23px}.f2{top:174px;font-size:28px}.f3,.f4{font-size:24px;bottom:30px}.section{padding:65px 0}.about-top{grid-template-columns:1fr 1fr;gap:12px}.about-top h2{font-size:32px}.section-copy{font-size:18px}.book-scene{transform:scale(.78);transform-origin:center;height:290px}.book{left:-25px}.marker{right:-50px}.roles-title{font-size:32px}.roles-grid{gap:14px}.role-card{padding:20px}.role-icon{width:120px;height:100px}.role-card h3{font-size:23px}.role-card p{font-size:16px}.card-foot{font-size:11px}.steps{grid-template-columns:repeat(2,1fr);gap:45px 18px}.step{padding:33px 22px 25px}.step>svg{width:60px;margin-right:10px}.step h3{font-size:20px}.step p{font-size:16px}.route{display:none}.benefits-grid{grid-template-columns:repeat(2,1fr)}.mini-calculator{right:7%}.section-heading>.formula{display:none}.section-heading{min-height:190px}.benefits-title{margin-top:50px}.faq-layout{grid-template-columns:1fr}.faq-art{display:none}.faq h2{font-size:35px}.finale-copy{width:76%}.finale h2{font-size:42px}.finale p{font-size:18px;max-width:370px}.finale-art img{width:300px;top:45px;right:-90px}.finale-note{display:none}.finale .button{font-size:15px;padding:15px 20px}.finale-art>.orbit{width:320px;left:-140px}.finale-inner{min-height:345px}}
@media(max-width:560px){.container{width:calc(100% - 40px)}.header{gap:10px;height:84px}.brand{font-size:15px;gap:9px;letter-spacing:-.2px}.brand-mark{grid-template-columns:repeat(2,20px);gap:3px}.brand-mark i{height:20px;font-size:19px;border-radius:4px}.login{font-size:13px;padding:10px 13px;gap:7px}.login svg{height:17px;width:17px}.menu-toggle{width:38px;height:38px}.hero{padding-top:84px;margin-top:-84px;min-height:0}.hero-word{top:101px;font-size:17.8vw;letter-spacing:-.04em}.hero-inner{min-height:890px}.hero-copy{padding-top:109px;width:100%}.eyebrow{font-size:11px;gap:8px;padding:7px 13px;letter-spacing:.8px}.eyebrow svg{width:28px;height:23px}h1{font-size:clamp(36px,9.3vw,51px);margin-top:16px;letter-spacing:-.04em}.hero-copy>p{font-size:19px;max-width:335px}.hero-actions{margin-top:22px;max-width:none;gap:12px}.hero .primary{min-height:54px;font-size:14px;gap:14px;padding:14px 18px}.hero .secondary{min-height:46px;font-size:13px;padding:6px 14px}.play{height:30px;width:30px;font-size:12px}.hero-visual{top:430px;right:0;width:100%;height:443px}.mascot{height:452px;left:0;top:0}.calculator{width:107px;right:2%;top:140px}.hero-visual>.sphere{right:7%;top:60px;width:48px;height:48px}.hero-visual>.cube{left:7%;bottom:95px;width:39px;height:39px}.hero-visual>.pyramid{right:4%;bottom:40px}.ground{width:100%;left:0;bottom:0}.f1{top:155px;right:12px;left:auto;font-size:16px}.f2{display:none}.f3{font-size:20px;bottom:64px;left:3%}.f4{font-size:20px;right:2%;bottom:31px}.hero-orbit{width:510px;height:230px;left:-100px;top:610px}.scroll-hint{font-size:10px;padding-top:7px}.section{padding:53px 0}.about-top{grid-template-columns:1fr;gap:0}.about-top h2{font-size:36px;margin-top:17px}.section-copy{font-size:19px;margin-top:19px}.book-scene{height:305px;width:100%;transform:scale(.84);transform-origin:center}.book{left:calc(50% - 180px);top:27px}.marker{right:-22px;top:50px;width:116px}.book-scene>.orbit{inset:20px -25px 10px}.book-scene>.sphere{left:-13px}.roles-title{font-size:32px;margin-top:18px;max-width:350px;line-height:1.13}.roles-grid{grid-template-columns:1fr;gap:15px}.role-card{display:grid;grid-template-columns:83px 1fr;column-gap:18px;padding:23px 20px;border-radius:22px}.role-icon{grid-row:1/4;width:85px;height:100px;align-self:center;margin:0}.role-card h3{font-size:25px}.role-card p{font-size:17px;margin-top:7px}.card-foot{grid-column:2;font-size:11px;margin-top:14px;padding-top:10px}.section-heading{min-height:220px;padding-top:0}.kicker{font-size:11px;letter-spacing:2px;margin-bottom:14px}.section-heading h2{font-size:35px;position:relative;z-index:2}.mini-calculator{top:111px;right:10px;width:77px;padding:7px;border-radius:13px;transform:rotate(19deg)}.mini-calculator>.mini-screen{font-size:20px;padding:0 8px;border-radius:4px}.mini-calculator>.mini-keys{font-size:20px}.steps{grid-template-columns:1fr;gap:28px;margin:15px 0 0;padding-left:15px}.step{padding:20px 18px 20px 35px;gap:15px;min-height:111px;border-radius:22px}.step-number{width:41px;height:41px;font-size:19px;left:-18px;top:34px;z-index:1}.step>svg{width:55px;height:60px;margin:0}.step h3{font-size:20px}.step p{font-size:16px;margin-top:5px}.step p br{display:none}.steps:before{content:"";position:absolute;left:16px;top:50px;bottom:50px;width:1px;background:#a44dea;z-index:-1}.benefits-title{font-size:34px;text-align:left;margin:45px 0 24px;line-height:1.13}.benefits-grid{gap:12px}.benefit{padding:20px 8px;border-radius:22px}.benefit-icon{width:87px;height:90px;margin-bottom:9px}.benefit h3{font-size:17px;letter-spacing:-.5px}.benefit p{font-size:15px;margin-top:9px}.faq h2{font-size:36px;max-width:350px;line-height:1.1;margin-bottom:25px}.faq h2 em{display:block}.faq-item{border-radius:16px}.faq-item button{padding:15px 14px;gap:12px;font-size:17px;line-height:1.35}.faq-toggle{width:29px;height:29px}.faq-toggle:before,.faq-toggle:after{left:8px;top:14px;width:13px}.faq-answer p{font-size:16px;padding:0 18px 18px 14px}.finale-inner{min-height:625px;align-items:flex-start}.finale-copy{width:100%;padding-top:39px}.finale h2{font-size:37px;line-height:1.1}.finale p{font-size:18px;max-width:310px;margin:14px 0 23px}.finale .button{font-size:14px;min-height:55px;padding:13px 17px;gap:12px}.finale-art{height:330px;bottom:0;width:100%;overflow:hidden}.finale-art img{top:0;width:325px;right:0}.finale-art>.orbit{left:0;top:125px;width:340px}.finale-note{display:block;top:60px;left:0;right:auto;font-size:12px;transform:rotate(-7deg)}.footer{flex-wrap:wrap;gap:20px;padding-top:30px;padding-bottom:25px;min-height:130px}.footer .brand{font-size:15px}.footer>button{font-size:13px}.copyright{width:100%;text-align:center;font-size:11px;color:#b499d1}.mobile-nav{left:20px;right:20px;top:75px}dialog{padding:30px 24px}.dialog-mark+h2{font-size:28px}.dialog-mark~p{font-size:16px}}
@media(max-width:370px){.brand{font-size:13px}.login{padding:10px}.login svg{display:none}.hero-inner{min-height:905px}.hero-visual{top:447px}.hero .primary{font-size:13px}.about-top h2{font-size:32px}.book-scene{transform:scale(.75)}.benefit h3{font-size:15px}.benefit p{font-size:14px}.finale h2{font-size:33px}.hero-copy>p{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.graph-curve,.route path{stroke-dashoffset:0}.draw-underline:after{transform:scaleX(1)}.turning-page{display:none}}
/* Heavy display type follows the supplied poster-like references. */
h1,h2,h3{font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900}h1{font-size:clamp(42px,4.8vw,71px);letter-spacing:-.045em}.step,.step>div{min-width:0}.step h3{font-family:Arial,Helvetica,sans-serif;font-weight:800}.benefit-icon{--bar-animation:bar-rise .55s var(--ease) both;--lock-animation:shackle-close .5s ease both}.benefit:not(.seen) .benefit-icon{--bar-animation:none;--lock-animation:none}#chart rect{transform-box:fill-box;transform-origin:bottom;animation:var(--bar-animation,none)}#chart rect:nth-of-type(2){animation-delay:.1s}#chart rect:nth-of-type(3){animation-delay:.2s}.shackle{animation:var(--lock-animation,none)}@keyframes bar-rise{from{transform:scaleY(.25)}to{transform:scaleY(1)}}@keyframes shackle-close{from{transform:translateY(-10px)}to{transform:translateY(0)}}
@media(max-width:850px){h1{font-size:clamp(34px,5.3vw,47px)}.about-top h2{font-size:29px}.roles-title{font-size:29px}.benefit h3{font-size:18px}}
@media(max-width:560px){h1{font-size:clamp(31px,8.3vw,46px)}.about-top h2{font-size:32px}.roles-title{font-size:29px}.section-heading h2{font-size:31px}.benefits-title{font-size:30px}.benefit h3{font-size:15px}.finale h2{font-size:32px}.role-card h3{font-size:23px}.faq h2{font-size:32px}.step{gap:12px}.step>svg{flex-shrink:0}.step p{overflow-wrap:break-word}}
@media(max-width:370px){.about-top h2{font-size:28px}.roles-title{font-size:26px}.section-heading h2{font-size:27px}.benefits-title{font-size:27px}.finale h2{font-size:28px}.benefit h3{font-size:13px}.step h3{font-size:18px}}
.steps{isolation:isolate}.route{z-index:0}.step{z-index:1}

/* Continuous stage: each light pool fades to the same base at its edges. */
:root{--stage:#26066b;--reveal-ease:cubic-bezier(.16,1,.3,1)}
html{scroll-padding-top:0}
body{background:var(--stage)}
.hero,.about,.start,.faq,.finale{background:transparent}
.hero,.about,.start,.closing-screen{position:relative;isolation:isolate}
.hero::before,.about::before,.start::before,.closing-screen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 72% 45%,#7020dd6e 0%,#4b0d9e38 38%,transparent 71%)}
.hero::before{background:radial-gradient(ellipse at 72% 46%,#842efab8, #4f0c9d54 40%,transparent 72%)}
.about::before{background:radial-gradient(ellipse at 73% 39%,#6415c875,transparent 69%)}
.start::before{background:radial-gradient(ellipse at 60% 49%,#6515c864,transparent 70%)}
.closing-screen::before{background:radial-gradient(ellipse at 77% 66%,#7c23ea88,transparent 72%)}
/* Fade the whole light field before each boundary, including the horizontal edges. */
.hero::before,.about::before,.start::before,.closing-screen::before{mask-image:linear-gradient(transparent,#000 16%,#000 79%,transparent)}
.finale{border:0;box-shadow:none}
.finale::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 72% 55%,#922fff52,transparent 66%);mask-image:linear-gradient(transparent,#000 35%,#000 75%,transparent)}
.footer{background:transparent}

/* The floor has a wide light pool, a visible shallow surface and contact shadows. */
.hero-visual{isolation:isolate}
.hero-visual::before{content:"";position:absolute;inset:0 4% 0 -17%;z-index:-1;background:radial-gradient(ellipse at 44% 51%,#b465ff5e,transparent 59%);pointer-events:none}
.mascot{filter:brightness(1.13) saturate(1.08) drop-shadow(0 0 3px #ffd8a644) drop-shadow(-8px 0 20px #bc6aff75) drop-shadow(12px 5px 25px #7b2dff80);transition:filter .45s,scale .55s var(--reveal-ease);transform-origin:50% 96%;pointer-events:auto}
.ground{width:150%;height:29%;left:-39%;bottom:-7%;filter:none;border-radius:50%;background:radial-gradient(ellipse at 48% 40%,#e5beff70 0%,#ac57ff9c 18%,#7d20e85c 38%,transparent 68%);transform:rotate(-3deg);pointer-events:none;z-index:0}
.ground::before{content:"";position:absolute;inset:12% -10% 5%;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#d68eff66, #742be94d 30%,transparent 65%);box-shadow:inset 0 1px 2px #dca6ff17;transform:perspective(500px) rotateX(48deg);filter:blur(3px)}
.ground::after{content:"";position:absolute;left:31%;top:34%;width:40%;height:22%;background:radial-gradient(ellipse at 28% 42%,#160329b0 0%,transparent 42%),radial-gradient(ellipse at 71% 50%,#150126bd 0%,transparent 40%);filter:blur(4px);transform:rotate(3deg)}
.finale-art img{filter:brightness(1.12) saturate(1.07) drop-shadow(-8px 2px 18px #b367ff75);transition:filter .4s}

/* Reveal uses individual translate, leaving each object's own transform intact. */
.reveal{opacity:1;translate:0 0;transition:opacity .8s var(--reveal-ease),translate .9s var(--reveal-ease),box-shadow .25s,border-color .25s,transform .3s;transition-delay:0s}
.reveal.reveal-pending{opacity:0;translate:0 28px}
.reveal.reveal-visible{transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms,0ms}
.reveal:focus-within{opacity:1;translate:0 0;transition-delay:0s}

/* Viewport composition: the four reference scenes each occupy a desktop screen. */
@media(min-width:1024px){
 .header{height:100px}
 .hero{height:100svh;min-height:640px;margin-top:-100px;padding-top:100px}
 .hero-inner{height:calc(100% - 48px);min-height:0}
 .hero-word{top:clamp(104px,15svh,156px);font-size:min(17.3vw,26svh,255px)}
 .hero-copy{padding-top:clamp(140px,25svh,260px);width:61%}
 .hero h1{font-size:clamp(45px,min(4.8vw,8svh),76px)}
 .hero-copy>p{font-size:clamp(20px,2.9svh,27px)}
 .hero-actions{margin-top:clamp(20px,3.5svh,35px)}
 .hero-visual{height:100%;width:55%;top:0;right:-15px}
 .mascot{height:100%;left:0;top:0}
 .calculator{top:38%;right:1%;width:clamp(130px,18svh,175px)}
 .hero-visual>.sphere{top:20%;right:4%}
 .hero-visual>.cube{left:0;bottom:20%}
 .hero-visual>.pyramid{right:1%;bottom:12%}
 .hero-orbit{top:44%;left:46%;width:55%;height:33%}
 .scroll-hint{height:48px;padding:8px 0 18px}
 .f3,.f4{bottom:35px}
 .about,.start{min-height:100svh;display:flex;align-items:center;padding:clamp(28px,4.5svh,64px) 0}
 .about-top{min-height:0;height:clamp(220px,33svh,355px);gap:35px}
 .about h2,.start h2{font-size:clamp(30px,min(3.6vw,5.25svh),53px)}
 .about-top h2{margin-top:clamp(12px,2svh,20px)}
 .section-copy{font-size:clamp(17px,2.4svh,23px);margin-top:clamp(12px,2svh,18px)}
 .book-scene{height:100%;max-height:355px}
 .book{top:7%;height:clamp(215px,29svh,292px)}
 .book-left strong{font-size:clamp(54px,8svh,82px)}
 .book-right svg{height:clamp(100px,16svh,155px)}
 .roles-title{margin:clamp(20px,3.5svh,40px) 0 clamp(18px,2.8svh,27px)}
 .role-card{padding:clamp(16px,2.8svh,28px)}
 .role-icon{height:clamp(75px,12svh,124px);width:clamp(110px,15svh,155px);margin-bottom:clamp(8px,1.5svh,15px)}
 .role-card h3{font-size:clamp(22px,3svh,28px)}
 .role-card p{font-size:clamp(16px,2.3svh,20px)}
 .card-foot{margin-top:clamp(10px,2svh,20px);padding-top:clamp(8px,1.5svh,15px)}
 .section-heading{min-height:0;height:clamp(140px,22svh,225px)}
 .mini-calculator{top:0;width:clamp(100px,16svh,154px)}
 .mini-calculator>.mini-keys{font-size:clamp(27px,4svh,36px)}
 .mini-calculator>.mini-screen{font-size:clamp(26px,3.8svh,34px)}
 .steps{margin-top:clamp(24px,4svh,40px)}
 .step{min-height:clamp(112px,16svh,158px);padding:clamp(25px,4svh,34px) 18px 20px;gap:12px}
 .step>svg{width:clamp(40px,6svh,60px)}
 .step h3{font-size:clamp(16px,2.2svh,20px)}
 .step p{font-size:clamp(14px,1.9svh,17px)}
 .step-number{width:clamp(44px,6svh,58px);height:clamp(44px,6svh,58px);top:-28px;font-size:clamp(22px,3svh,27px)}
 .benefits-title{margin:clamp(28px,5svh,57px) 0 clamp(20px,3svh,30px)}
 .benefit{padding:clamp(15px,2.5svh,25px) 12px clamp(17px,2.8svh,28px)}
 .benefit-icon{width:clamp(80px,12svh,128px);height:clamp(80px,12svh,128px);margin-bottom:clamp(7px,1.5svh,15px)}
 .benefit h3{font-size:clamp(17px,2.4svh,22px)}
 .benefit p{font-size:clamp(16px,2svh,19px);margin-top:9px}
 .closing-screen{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(28px,4svh,48px)}
 .faq{padding:0 0 clamp(20px,3svh,34px)}
 .faq h2{font-size:clamp(30px,4.8svh,49px);margin:15px 0 22px}
 .faq-layout{gap:35px;align-items:center}
 .faq-item{margin-bottom:9px}
 .faq-item button{padding:clamp(11px,1.6svh,17px) 20px;font-size:clamp(17px,2.2svh,21px)}
 .faq-answer p{font-size:clamp(16px,2svh,19px);padding-bottom:16px}
 .faq-art{height:clamp(250px,32svh,330px)}
 .question-3d{font-size:clamp(230px,33svh,310px);top:-55px}
 .little-book{top:58%}
 .faq-art>.sphere{top:70%}
 .finale-inner{min-height:clamp(255px,36svh,385px)}
 .finale-copy{padding:24px 0 34px}
 .finale h2{font-size:clamp(35px,5.7svh,62px)}
 .finale p{font-size:clamp(18px,2.4svh,23px);margin:14px 0 22px}
 .finale-art img{width:clamp(270px,40svh,410px);top:0}
}
/* Short desktop viewports keep readable content rather than clipping or zooming it. */
@media(min-width:1024px) and (max-height:740px){
 .about .card-foot{display:none}
 .about-top{height:218px}
 .book-scene{transform:scale(.8);transform-origin:center}
 .about .book{height:260px;top:-12px}
 .book-left strong{font-size:66px}.book-right svg{height:135px}
 .hero-copy{padding-top:150px}.hero-actions{flex-wrap:nowrap;gap:12px}
 .hero .button{min-height:52px;font-size:14px;padding:10px 19px}
 .hero .secondary{font-size:13px;padding:8px 15px}
 .hero h1{margin-top:15px}
 .faq .eyebrow{font-size:12px;padding:6px 14px}
 .faq h2{margin:12px 0 16px}
 .faq-item button{padding:10px 17px}
 .faq-toggle{width:29px;height:29px}.faq-toggle:before,.faq-toggle:after{top:14px;left:7px}
 .finale-inner{min-height:235px}.finale-copy{padding:20px 0 25px}.finale p{margin:10px 0 17px}
 .finale .button{min-height:52px;padding:10px 22px}
}
@media(min-width:851px) and (max-width:1023px){
 .desktop-nav{gap:0}.desktop-nav a,.desktop-nav button{padding:12px}
 .about,.start{padding:58px 0}
 .roles-grid{gap:16px}.role-card{padding:20px}.role-card h3{font-size:23px}
}
@media(max-width:1023px){
 .hero::before,.about::before,.start::before,.closing-screen::before{mask-image:linear-gradient(transparent,#000 13%,#000 84%,transparent)}
 .ground{left:-48%;width:165%;height:29%;bottom:-6%}
 .about,.start,.faq{padding-top:56px;padding-bottom:56px}
 .closing-screen{padding:0}
}
@media(max-width:560px){
 .ground{left:-29%;width:145%;height:25%;bottom:-3%}
 .hero-visual::before{inset:0 -3% 0 -12%}
 .hero-inner{min-height:850px}.hero-visual{top:408px;height:427px}.mascot{height:436px}
 .hero .scroll-hint{padding-bottom:20px}
 .about,.start,.faq{padding:46px 0}
 .reveal.reveal-pending{translate:0 18px}
}
@media(max-width:370px){.hero-inner{min-height:875px}.hero-visual{top:430px}}

/* Objects react locally; text and nearby layout stay still. */
.book,.mini-calculator,.sphere,.cube,.pyramid,.question-3d,.chat-bubble,.little-book,.marker,.role-icon,.benefit-icon,.step>svg{transition:scale .5s var(--reveal-ease),filter .45s,rotate .5s var(--reveal-ease)}
.glass{transition:transform .35s var(--reveal-ease),box-shadow .35s,border-color .35s;position:relative}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(ellipse at var(--pointer-x,50%) var(--pointer-y,25%),#d394ff20,transparent 65%);transition:opacity .35s}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero-visual>.sphere,.hero-visual>.cube,.hero-visual>.pyramid{pointer-events:auto}
 .mascot:hover{filter:brightness(1.2) saturate(1.1) drop-shadow(-8px 0 25px #d697ff99) drop-shadow(10px 0 28px #9850ff88);scale:1.018}
 .calculator{transition:scale .35s var(--reveal-ease),filter .35s}
 .calculator:hover,.calculator:focus-visible{scale:1.055;filter:brightness(1.12)}
 .sphere:hover,.cube:hover,.pyramid:hover{scale:1.15;rotate:7deg;filter:brightness(1.2)}
 .book-scene:hover .book{scale:1.04;rotate:-3deg;filter:drop-shadow(12px 28px 14px #13002d80) brightness(1.07)}
 .book-scene:hover .marker{rotate:-7deg;scale:1.05}
 .mini-calculator:hover{scale:1.07;rotate:-7deg;filter:brightness(1.15)}
 .glass:hover,.glass:focus-visible{transform:translateY(-6px);border-color:#c17aff;box-shadow:0 20px 38px #13022d60,inset 0 1px 1px #edcaff20}
 .glass:hover::after,.glass:focus-within::after{opacity:1}
 .glass:hover .role-icon,.glass:focus-visible .role-icon,.glass:hover .benefit-icon,.glass:hover>svg{rotate:var(--icon-tilt,4deg);scale:1.08;filter:drop-shadow(0 12px 10px #16012f88) brightness(1.13)}
 .question-3d:hover{rotate:-7deg;scale:1.06;filter:brightness(1.15)}
 .chat-bubble:hover{rotate:7deg;scale:1.08}
 .little-book:hover{rotate:-7deg;scale:1.06;filter:brightness(1.1)}
 .faq-item{transition:border-color .25s,box-shadow .25s}
 .faq-item:hover{border-color:#c07bf7;box-shadow:0 8px 22px #12032e30}
}
@media(prefers-reduced-motion:reduce){
 .reveal,.reveal.reveal-pending{opacity:1;translate:none;transition:none}
 .mascot,.glass,.book,.mini-calculator,.calculator,.sphere,.cube,.pyramid{scale:1;rotate:none}
}
.glass.reveal{transition:opacity .8s var(--reveal-ease),translate .9s var(--reveal-ease),transform .35s var(--reveal-ease),box-shadow .35s,border-color .35s;transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms,0ms}
@media print{.reveal.reveal-pending{opacity:1;translate:none}}
/* Keep the contact shadows directly beneath the shoe soles, with no hard ellipse edge. */
.ground::before{box-shadow:none;mask-image:radial-gradient(ellipse,#000 20%,transparent 70%)}
.ground::after{left:34%;top:58%;width:32%;height:14%;background:radial-gradient(ellipse at 25% 42%,#160329b8 0%,transparent 40%),radial-gradient(ellipse at 72% 50%,#150126c4 0%,transparent 38%)}
@media(min-width:1024px){
 .closing-screen{padding-top:clamp(24px,3.5svh,42px)}
 .closing-screen .faq{padding-bottom:clamp(14px,2svh,24px)}
 .faq h2{font-size:clamp(30px,4.3svh,46px);margin:12px 0 16px}
 .faq-item button{padding:clamp(10px,1.35svh,15px) 20px}
 .finale-inner{min-height:clamp(235px,33svh,360px)}
}
@media(max-width:560px){
 .hero{height:100svh;min-height:780px}
 .hero-inner{height:calc(100% - 42px);min-height:0}
 .hero-copy{padding-top:94px}
 .hero-visual{top:390px;bottom:0;height:auto}
 .mascot{height:100%;left:3%}
 .hero .scroll-hint{height:42px;padding:8px 0 15px}
 .hero-visual>.calculator{top:26%;width:95px;right:5%}
 .hero-visual>.sphere{top:6%;width:42px;height:42px}
 .hero-visual>.cube{bottom:22%}
 .hero-visual>.pyramid{bottom:12%}
 .ground{left:-35%;bottom:-7%}
 .hero .f3,.hero .f4{bottom:35px;font-size:17px}
 .hero-orbit{top:auto;bottom:80px;height:190px}
}
@media(max-width:370px){.hero{min-height:780px}.hero-visual{top:387px}.hero-copy{padding-top:100px}}
/* Gentle alignment at section boundaries, without intercepting wheel or touch events. */
@media(min-width:1024px) and (min-height:680px) and (prefers-reduced-motion:no-preference){
 html{scroll-snap-type:y proximity}
 #home,#about,#start,.closing-screen{scroll-snap-align:start;scroll-snap-stop:normal}
 .footer{scroll-snap-align:end}
}
.ground{mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 48%,transparent 100%)}
@media(min-width:1024px){.closing-screen{padding-top:clamp(20px,3svh,38px)}}
@media(min-width:1024px){.finale-note{right:auto;left:-30px;top:30%;transform:rotate(-7deg)}}
@media(max-width:560px){.hero-visual{top:425px}}

/* A shared perspective floor is anchored to the mascot, not to the viewport. */
.mascot-stage{position:absolute;left:0;top:0;height:100%;aspect-ratio:2/3;isolation:isolate;pointer-events:none}
.mascot-stage>.stage-floor{position:absolute;max-width:none;width:300%;height:24%;left:-100%;top:auto;right:auto;bottom:-5.5%;transform:none;filter:none;z-index:-1;object-fit:fill;pointer-events:none}
.mascot-stage>.mascot{width:100%;height:100%;left:0;top:0}
.finale{overflow:visible}
.finale-art{overflow:visible;isolation:isolate}
.finale-art>.mascot-stage{left:auto;right:25px;top:0;bottom:0;height:100%;width:auto;max-width:none}
.finale-art .finale-mascot{position:relative;display:block;width:100%;height:100%;object-fit:contain;inset:auto;transform:none;animation:none!important;filter:brightness(1.1) saturate(1.05) drop-shadow(-4px 0 12px #b367ff66)}
.finale-art>.orbit{mask-image:radial-gradient(ellipse,#000 45%,transparent 73%);opacity:.65}
.finale-art .mascot-stage{transform-origin:50% 96%}
.finale.seen .mascot-stage{animation:welcome-settle .7s var(--reveal-ease) both}
@keyframes welcome-settle{from{translate:0 10px;opacity:.6}to{translate:0 0;opacity:1}}
.finale::before{inset:-40px 0 -55px;mask-image:linear-gradient(transparent,#000 35%,#000 60%,transparent)}
.footer{position:relative;z-index:1;margin-top:0}
@media(min-width:1024px){
 .role-card h3{font-size:clamp(19px,2.55svh,25px)}
 .finale-art{height:100%;width:36%;bottom:0}
 .finale-art>.mascot-stage{height:calc(100% - 12px);top:0;right:70px}
 .finale-note{left:0;right:auto;top:24%;font-size:12px}
 .finale-inner{padding-bottom:12px}
}
@media(min-width:561px) and (max-width:1023px){
 .hero-visual>.mascot-stage{left:-24%;height:100%}
 .finale-art>.mascot-stage{height:calc(100% - 22px);top:8px;right:0}
 .finale-art{width:33%}
 .role-card h3{font-size:21px}
}
@media(max-width:560px){
 .hero-visual>.mascot-stage{left:3%}
 .finale-inner{min-height:660px}
 .finale-art{height:325px;bottom:18px;width:100%;overflow:visible}
 .finale-art>.mascot-stage{height:100%;right:15px;top:0}
 .finale-note{top:80px;left:0;right:auto}
 .role-card h3{font-size:21px}
 .finale-art>.orbit{left:0;top:90px}
}
@media(prefers-reduced-motion:reduce){.finale.seen .mascot-stage{animation:none}}
.stage-floor{animation:none!important}
.mascot-stage>.stage-floor{bottom:-2%}
.closing-screen{overflow-x:clip}
@media(min-width:1024px){.finale-inner{padding-bottom:0}}

/* A broad, rounded stage extends beyond both viewport edges; shadows stay at the shoes. */
.hero-platform{position:absolute;left:-20%;right:-20%;bottom:0;height:clamp(135px,24svh,250px);border-radius:50% 50% 0 0 / 58% 58% 0 0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 64% 31%,#d195ff8c 0%,#9a4af575 24%,#6f29bd68 47%,#42138445 72%),linear-gradient(180deg,#7939c370,#4c198971 58%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 61%,transparent 100%)}
.hero-platform::before{content:"";position:absolute;inset:14% 0 0;border-radius:50% 50% 0 0 / 55% 55% 0 0;background:radial-gradient(ellipse at 63% 10%,#ead1ff59,transparent 54%);filter:blur(7px)}
.hero-visual .stage-floor{display:none}
.hero-visual .mascot-stage::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:8%;z-index:-1;background:radial-gradient(ellipse 15% 9% at 38% 46%,#170326de,transparent 100%),radial-gradient(ellipse 12% 10% at 74% 73%,#170326e8,transparent 100%),radial-gradient(ellipse 40% 25% at 54% 72%,#23053880,transparent 100%);filter:blur(2px)}
.hero-copy h1{margin-top:0}
.text-link{color:#ffbd70;text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.hero-platform{height:155px;left:-35%;right:-35%;background-position:center}.hero-visual{top:390px}.hero-copy{padding-top:105px}}

/* The stage rises in a single curved arc beneath the mascot, following the drawn contour. */
.hero-platform{left:0;right:0;height:clamp(155px,26svh,265px);border-radius:0;clip-path:ellipse(45% 100% at 65% 100%);background:radial-gradient(ellipse at 64% 26%,#c389ff99,#8847c97d 40%,#4b19867d 72%),linear-gradient(#6c32ac,#3c1077);mask-image:linear-gradient(#000 0%,#000 60%,transparent 100%)}
.hero-platform::before{inset:0;border-radius:0;background:radial-gradient(ellipse at 63% 5%,#e5baff66,transparent 57%);filter:blur(6px)}
.header-space{height:100px}
.header{position:fixed;left:50%;top:12px;transform:translateX(-50%);height:72px;z-index:50;border:1px solid transparent;border-radius:23px;transition:background .25s,border-color .25s,box-shadow .25s;padding-inline:12px}
.header.is-scrolled{background:#290865e8;border-color:#ac6ce44d;backdrop-filter:blur(18px);box-shadow:0 8px 30px #17033250}
html{scroll-padding-top:96px}
.hero{scroll-margin-top:-96px}
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:45;display:grid;place-items:center;width:49px;height:49px;border:1px solid #c284ff;border-radius:50%;background:linear-gradient(145deg,#8e42df,#52139c);box-shadow:0 8px 25px #1a063b66,inset 0 1px #dfb8ff66;transition:scale .2s,box-shadow .2s}
.back-to-top[hidden]{display:none}.back-to-top:hover{scale:1.08;box-shadow:0 6px 28px #a54eff77}.back-to-top svg{width:23px;height:23px}
@media(min-width:1024px){
 .about,.start,.closing-screen{min-height:calc(100svh - 96px)}
 .about,.start{padding-block:clamp(24px,3svh,45px)}
 .about-top{height:clamp(205px,29svh,320px)}
 .role-icon{height:clamp(70px,10svh,110px)}
 .section-heading{height:clamp(130px,18svh,195px)}
 .benefit-icon{height:clamp(76px,10svh,112px);width:clamp(76px,10svh,112px)}
 .benefits-title{margin-top:clamp(25px,4svh,45px)}
 .closing-screen .faq-item button{padding-block:10px}
 .closing-screen{padding-top:16px}.closing-screen .finale-inner{min-height:230px}
}
@media(max-width:1023px){.header-space{height:110px}.header{padding-inline:9px}.header .brand{font-size:17px}.header .desktop-nav a,.header .desktop-nav button{padding-inline:10px}}
@media(max-width:850px){.header-space{height:90px}.header{top:8px;height:68px}.mobile-nav{position:fixed;top:84px;z-index:51}}
@media(max-width:560px){.header-space{height:84px}.header{width:calc(100% - 20px);height:64px;gap:8px;top:7px;border-radius:18px}.header .brand{font-size:14px}.header .login{padding:10px 12px}.hero-platform{height:145px;left:0;right:0;clip-path:ellipse(72% 100% at 56% 100%)}.back-to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:46px;height:46px}html{scroll-padding-top:85px}.hero{scroll-margin-top:-85px}}
@media(max-width:370px){.header .brand{font-size:12px}.header .login{padding:10px}.header .login svg{display:none}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero-visual{pointer-events:auto}
 .hero-visual>.sphere,.hero-visual>.cube,.hero-visual>.pyramid,.hero-visual>.calculator,.book-scene>.book,.book-scene>.marker,.faq-art>.question-3d,.faq-art>.chat-bubble,.auth-illustration>.sphere,.auth-illustration>.auth-formula{translate:calc(var(--cursor-x,0) * 9px) calc(var(--cursor-y,0) * 7px);transition:translate .3s ease-out,scale .4s,filter .4s,rotate .4s}
 .hero-visual>.cube,.book-scene>.marker,.faq-art>.chat-bubble{translate:calc(var(--cursor-x,0) * -12px) calc(var(--cursor-y,0) * -9px)}
 .pointer-active .float{animation-play-state:paused}
 .auth-card{transition:box-shadow .3s,border-color .3s}.auth-card:hover{border-color:#ca8ef5;box-shadow:0 22px 70px #24074066,inset 0 1px #e6bfff40}
 .auth-illustration:hover .auth-mascot{filter:brightness(1.17) drop-shadow(-5px 0 20px #bc79ff88)}
}
.cursor-aura{display:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.cursor-aura{display:block;position:fixed;inset:0;z-index:20;pointer-events:none;overflow:clip;opacity:0;transition:opacity .3s;mix-blend-mode:screen}.cursor-aura.visible{opacity:1}.cursor-aura::before{content:"";position:absolute;left:-100px;top:-100px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,#c88bff16,transparent 70%);transform:translate3d(var(--aura-x,0),var(--aura-y,0),0)}}
/* The reference shows a continuous floor, not a raised platform with an edge. */
.hero-platform{left:-12%;right:-12%;height:clamp(140px,23svh,225px);bottom:0;clip-path:none;border-radius:0;background:radial-gradient(ellipse at 65% 50%,#a054f77d 0%,#7729d564 35%,#52159135 62%,transparent 85%);mask-image:linear-gradient(transparent,#000 24%,#000 67%,transparent)}
.hero-platform::before{inset:0;background:radial-gradient(ellipse at 66% 42%,#e5b5ff9c 0%,#bc72ff66 18%,transparent 55%);filter:blur(11px);transform:perspective(500px) rotateX(38deg)}
.hero-platform::after{content:"";position:absolute;inset:35% 5% 3%;background:radial-gradient(ellipse at 66% 65%,#3a086b70,transparent 51%);filter:blur(8px)}
@media(max-width:560px){.hero-platform{left:-30%;right:-30%;height:145px;background:radial-gradient(ellipse at 48% 50%,#a054f78c,#6923c264 38%,transparent 80%)}.hero-platform::before{background:radial-gradient(ellipse at 48% 42%,#ddb3ff9c,#a961f966 20%,transparent 58%)}}
.calculator{cursor:pointer}.calculator:focus-visible{outline-offset:10px}.calculator:hover .calc-screen{color:#fff;box-shadow:inset 2px 3px 8px #150027,0 0 12px #c784ff35}
.calculator-dialog{width:min(374px,calc(100% - 28px));padding:23px;border-radius:27px;background:linear-gradient(145deg,#6020aa,#2b095e);border:1px solid #c28af6;box-shadow:inset 0 1px #e3bcff55,0 30px 100px #140327a6;max-height:calc(100dvh - 24px);overflow:auto}
.calculator-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.calculator-heading span{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:#caa5ec}.calculator-heading h2{font-size:24px;margin-top:5px;letter-spacing:-.6px}.calculator-close{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:#ffffff0b;font-size:28px;color:#e1c3f5}.calculator-close:hover{background:#ffffff18}
.calculator-display{background:linear-gradient(145deg,#200541,#330b65);border:1px solid #794399;border-radius:15px;min-height:107px;padding:14px 17px;box-shadow:inset 0 3px 10px #15042599;margin-bottom:17px;text-align:right}.calculator-expression{font:13px monospace;color:#bda1d1;min-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#calculator-result{display:block;font:34px/1.4 monospace;color:#fff4ff;overflow-wrap:anywhere;min-height:48px}#calculator-result.calc-error{font:16px/1.5 Arial,sans-serif;display:flex;justify-content:flex-end;align-items:center;color:#ffcaac}#calculator-result.long-number{font-size:26px}
.calculator-keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.calculator-keypad button{min-height:51px;border-radius:12px;font-size:23px;font-weight:700;background:linear-gradient(#a369e1,#7738be);box-shadow:inset 0 1px 2px #e9c7ff66,0 3px 0 #200639;color:white;transition:filter .15s,transform .1s,box-shadow .1s}.calculator-keypad button:hover{filter:brightness(1.15)}.calculator-keypad button:active,.calculator-keypad button.pressed{transform:translateY(2px);box-shadow:inset 0 1px #ffffff44,0 1px #200639}.calculator-keypad .key-operation{background:linear-gradient(#bd7af1,#8c3ccd)}.calculator-keypad .key-utility{background:linear-gradient(#653293,#482075);font-size:18px}.calculator-keypad .key-equals{background:linear-gradient(#ffa916,#ff7900);box-shadow:inset 0 1px 2px #fff2b9,0 3px #7a3500}.calculator-tip{font-size:11px;color:#c9a9e0;line-height:1.6;text-align:center;margin-top:18px}
@media(max-width:370px){.calculator-dialog{padding:18px}.calculator-keypad{gap:8px}.calculator-keypad button{min-height:48px}.calculator-heading h2{font-size:22px}}
/* Explanatory benefits do not need separate framed panels. */
.benefit{border-color:transparent;background:transparent;box-shadow:none}.role-card .card-foot{border-top:0;padding-top:0}.benefit:hover{box-shadow:none}