:root { --sky:#48bff7; --ink:#173a5e; --green:#67e53e; --purple:#852de6; --red:#ff4d5f; --yellow:#ffcf36; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font:500 16px/1.6 ui-rounded,"Arial Rounded MT Bold",Nunito,system-ui,sans-serif; background:#f7fcff; overflow-x:hidden; }
a { color:inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.skip-link { position:fixed; top:8px; left:8px; z-index:99; transform:translateY(-150%); background:#fff; padding:8px 14px; border-radius:8px; }
.skip-link:focus { transform:none; }
.site-header { min-height:78px; padding:12px clamp(20px,5vw,76px); display:flex; align-items:center; justify-content:space-between; gap:30px; background:#fff; position:relative; z-index:20; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:900; text-decoration:none; letter-spacing:-.04em; }
.brand-ball { width:42px; height:42px; display:grid; place-items:center; color:#fff; border-radius:50%; background:linear-gradient(145deg,#a941ff,#6e18c5); box-shadow:inset 0 -5px rgba(0,0,0,.16); }
.site-nav { display:flex; align-items:center; gap:28px; }
.site-nav a { font-weight:800; text-decoration:none; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 26px; color:#153c19; background:linear-gradient(#8dfb58,#4fd529); border:3px solid #fff; border-radius:16px; text-decoration:none; font-weight:900; box-shadow:0 6px 0 #269d1b,0 8px 18px rgba(26,85,24,.22); }
.button-small { min-height:44px; padding:0 20px; }
.menu-toggle { display:none; }
main section { padding:110px clamp(20px,7vw,110px); }
h1,h2,h3 { margin-top:0; line-height:1.02; letter-spacing:-.055em; }
h2 { font-size:clamp(2.7rem,5vw,5rem); margin-bottom:24px; }
h3 { font-size:1.5rem; }
em { color:var(--purple); font-style:normal; }
.kicker,.eyebrow { color:#6d28d9; text-transform:uppercase; font-weight:900; letter-spacing:.12em; font-size:.82rem; }
.kicker span { color:#64df40; margin-right:8px; }
.hero { min-height:calc(100vh - 78px); display:grid; grid-template-columns:minmax(320px,.9fr) minmax(480px,1.1fr); align-items:center; gap:40px; position:relative; isolation:isolate; background:linear-gradient(180deg,#e7faff 0%,#f9fdff 75%); overflow:hidden; }
.hero::after { content:""; position:absolute; z-index:-2; left:0; right:0; bottom:-1px; height:120px; background:linear-gradient(165deg,transparent 38%,#dff7df 39%); }
.hero-copy { position:relative; z-index:2; max-width:650px; }
.hero h1 { font-size:clamp(4rem,7.3vw,7.7rem); margin:18px 0 26px; }
.hero h1 em { color:var(--purple); text-shadow:0 6px 0 #dbc0ff; }
.hero-lead { max-width:610px; font-size:clamp(1.05rem,1.5vw,1.3rem); color:#456780; }
.hero-actions { display:flex; align-items:center; gap:26px; margin:36px 0; }
.text-link { color:#244e6c; font-weight:900; text-decoration:none; }
.hero-proof { display:flex; gap:28px; color:#5e7c91; font-size:.9rem; }
.hero-proof span { display:flex; align-items:center; gap:8px; }
.hero-proof b { font-size:1.35rem; color:var(--ink); }
.hero-art { position:relative; z-index:1; max-width:700px; margin:auto; animation:float 5s ease-in-out infinite; }
.hero-art img { display:block; width:100%; filter:drop-shadow(0 35px 35px rgba(38,96,117,.18)); }
.score-pop { position:absolute; padding:7px 13px; color:#fff; border:3px solid #fff; border-radius:13px; font-weight:900; box-shadow:0 6px 16px rgba(23,58,94,.2); }
.score-one { top:24%; right:4%; background:var(--yellow); transform:rotate(7deg); color:#765100; }
.score-two { bottom:19%; left:4%; background:var(--red); transform:rotate(-8deg); }
.cloud { position:absolute; z-index:-1; width:130px; height:38px; border-radius:40px; background:#fff; opacity:.85; filter:blur(.3px); }
.cloud::before,.cloud::after { content:""; position:absolute; background:inherit; border-radius:50%; }
.cloud::before { width:58px; height:58px; bottom:0; left:20px; }.cloud::after { width:72px; height:72px; bottom:0; right:13px; }
.cloud-a { top:14%; left:-25px; }.cloud-b { bottom:18%; right:-35px; transform:scale(1.3); }
.section-heading { max-width:760px; margin:0 auto 58px; text-align:center; }
.section-heading>p:last-child { max-width:610px; margin:0 auto; color:#5b768a; font-size:1.1rem; }
.play-section { background:#fff; }
.steps { max-width:1240px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step-card { position:relative; overflow:hidden; border-radius:30px; background:#fff; box-shadow:0 18px 60px rgba(32,76,104,.12); border:1px solid #eaf4f8; }
.step-card img { display:block; width:100%; }
.step-card>div { padding:26px 30px 34px; }
.step-card h3 { margin-bottom:8px; }.step-card p { margin:0; color:#61798b; }
.step-number { position:absolute; top:18px; left:18px; z-index:2; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#fff; font-weight:900; box-shadow:0 5px 14px rgba(23,58,94,.15); }
.step-purple h3{color:var(--purple)}.step-blue h3{color:#188ed0}.step-red h3{color:var(--red)}
.features-section { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:center; color:#fff; background:radial-gradient(circle at 8% 20%,#a54afb,transparent 28%),linear-gradient(135deg,#7927dc,#5317a7); }
.feature-intro { max-width:490px; }.feature-intro h2 { font-size:clamp(3.1rem,5.7vw,6rem); }.feature-intro h2 em { color:#b8ff64; }.feature-intro>p:last-of-type { color:#e4d4ff; font-size:1.1rem; }
.eyebrow-light { color:#cfff96; }
.mini-balls { display:flex; gap:14px; margin-top:35px; }.mini-balls i { display:block; width:28px; height:28px; border-radius:50%; background:var(--green); box-shadow:inset 0 -5px rgba(0,0,0,.14); }.mini-balls i:nth-child(2){background:var(--yellow);transform:translateY(12px)}.mini-balls i:nth-child(3){background:var(--red)}
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.feature-card { padding:30px; color:var(--ink); background:#fff; border-radius:26px; box-shadow:0 13px 0 rgba(44,7,91,.22); transition:transform .2s; }.feature-card:hover { transform:translateY(-6px); }.feature-card p{margin-bottom:0;color:#60788b}.feature-icon { display:grid; place-items:center; width:55px; height:55px; margin-bottom:24px; color:#fff; border-radius:17px; font-size:1.8rem; font-weight:900; box-shadow:inset 0 -6px rgba(0,0,0,.12); }.icon-purple{background:var(--purple)}.icon-yellow{background:var(--yellow);color:#765100}.icon-red{background:var(--red)}.icon-green{background:var(--green);color:#176523}
.preview-section { background:linear-gradient(180deg,#ecfbff,#fff); overflow:hidden; }
.preview-stage { min-height:590px; display:flex; justify-content:center; align-items:flex-end; gap:26px; position:relative; }
.preview-stage::before { content:""; position:absolute; left:-10%; right:-10%; bottom:-150px; height:350px; background:#b3eb9a; border-radius:50% 50% 0 0; }
.phone { position:relative; z-index:1; width:min(27vw,280px); aspect-ratio:9/18; padding:10px; border-radius:38px; background:#173a5e; box-shadow:0 28px 45px rgba(23,58,94,.25); }.phone::before { content:""; position:absolute; z-index:3; top:17px; left:50%; transform:translateX(-50%); width:34%; height:18px; border-radius:20px; background:#173a5e; }.phone-left{transform:rotate(-8deg) translateY(36px)}.phone-right{transform:rotate(8deg) translateY(36px)}.phone-center{z-index:2;width:min(30vw,320px)}
.phone-screen { height:100%; position:relative; overflow:hidden; border-radius:30px; background:linear-gradient(#68cef9 0 55%,#78d565 56% 100%); }.scene-sunset{background:linear-gradient(#ffc78f,#fa88a6 56%,#935bc9 57%)}.scene-sky{background:linear-gradient(#77dcff 0 60%,#66cd5d 61%)}.phone-screen::after { content:""; position:absolute; left:-15%; right:-15%; bottom:-10%; height:45%; border-radius:50% 50% 0 0; background:rgba(234,255,218,.7); }
.level-label { position:absolute; z-index:2; top:50px; left:50%; transform:translateX(-50%); padding:5px 12px; border-radius:10px; background:#fff; font-size:.72rem; font-weight:900; }
.game-block { position:absolute; z-index:2; width:68px;height:68px;display:grid;place-items:center;border-radius:17px;color:#fff;font-weight:900;font-size:1.3rem;border:5px solid #fff;box-shadow:0 7px 0 rgba(0,0,0,.15)}.purple-block{background:var(--purple);top:38%;right:13%}.green-block{background:var(--green);top:48%;left:12%}.red-block{background:var(--red);top:24%;right:13%}.yellow-block{background:var(--yellow);color:#785500;top:31%;right:15%}
.game-ball { position:absolute; z-index:3; width:48px;height:48px;border-radius:50%;border:5px solid #fff;box-shadow:inset 0 -7px rgba(0,0,0,.14),0 7px 12px rgba(0,0,0,.15)}.purple-ball{background:var(--purple);top:25%;left:17%}.blue-ball{background:#23a9ed;top:35%;left:44%}.red-ball{background:var(--red);top:58%;left:20%}.trail{position:absolute;top:30%;left:29%;width:100px;border-top:6px dotted #fff;transform:rotate(27deg)}.spark{position:absolute;z-index:3;top:47%;left:44%;color:#fff763;font-size:3rem}
.download-section { background:#fff; }.download-card { max-width:1230px; min-height:520px; margin:auto; padding:70px 7%; display:grid; grid-template-columns:1fr 1fr; align-items:center; color:#fff; border-radius:46px; background:radial-gradient(circle at 80% 30%,#a74dff,transparent 30%),linear-gradient(130deg,#7628dc,#5415a8); overflow:hidden; box-shadow:0 25px 60px rgba(91,26,170,.25); }.download-card h2{font-size:clamp(3.7rem,7vw,7rem);margin:0 0 20px}.download-card h2 em{color:#baff61}.button-white{margin-top:20px;background:#fff;color:#5f1ec1;box-shadow:0 7px 0 #d8c3ef}.download-card small{display:block;margin:18px 0 0 14px;color:#d9c5f7}.download-art{height:390px;position:relative}.big-ball{position:absolute;top:55px;left:24%;width:190px;height:190px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:6rem;font-weight:900;background:var(--red);border:13px solid #fff;box-shadow:inset 0 -22px rgba(0,0,0,.15),0 22px 25px rgba(49,8,94,.3);transform:rotate(-10deg)}.target{position:absolute;width:95px;height:95px;display:grid;place-items:center;border-radius:22px;border:8px solid #fff;font-size:1.6rem;font-weight:900;box-shadow:0 10px 0 rgba(0,0,0,.18)}.target-a{right:4%;top:20px;background:var(--green);transform:rotate(9deg)}.target-b{left:10%;bottom:15px;background:var(--yellow);color:#725200;transform:rotate(-9deg)}.burst{position:absolute;right:12%;bottom:36px;color:#e8ff69;font-size:5rem}
[data-reveal] { transition:opacity .65s ease,transform .65s ease; }.js [data-reveal] { opacity:0; transform:translateY(26px); }.js [data-reveal].is-visible { opacity:1;transform:none; }
@keyframes float { 50%{transform:translateY(-14px) rotate(.5deg)} }
.site-footer { display:grid; grid-template-columns:1fr 2fr auto; gap:48px; padding:55px clamp(20px,6vw,90px); color:#dfefff; background:#173a5e; }
.site-footer address { font-style:normal; }
.brand-footer { color:#fff; }
.footer-links { display:flex; flex-direction:column; gap:8px; }
.legal-page { background:linear-gradient(180deg,#e8faff 0, #fff 340px); }
.legal-main { padding:90px 20px 120px; }
.legal-main article { max-width:820px; margin:auto; }
.legal-main h1 { font-size:clamp(2.8rem,7vw,5rem); }
.legal-main h2 { margin-top:60px; padding-top:24px; font-size:clamp(1.7rem,3vw,2.35rem); border-top:2px solid #e6f0f4; }
.legal-main h3 { margin-top:28px; font-size:1.2rem; letter-spacing:-.02em; }
.legal-main p,.legal-main li { color:#4e687c; }.legal-main li+li { margin-top:9px; }.legal-main address { padding:24px; font-style:normal; border-radius:18px; background:#edfaff; }.legal-main address a { color:#6726c9; font-weight:900; }
.legal-hero { margin-bottom:45px; }.legal-hero>p:last-child { font-size:1.12rem; }.legal-updated { display:inline-block; padding:7px 13px; border-radius:10px; background:#fff; box-shadow:0 5px 18px rgba(23,58,94,.1); font-size:.9rem!important; font-weight:900; }.legal-note { margin:38px 0 15px; padding:24px 28px; border-left:6px solid var(--green); border-radius:0 18px 18px 0; background:#efffe9; }.legal-note p { margin-bottom:0; }
.eyebrow { color:#6d28d9; text-transform:uppercase; font-weight:900; letter-spacing:.12em; }
@media (max-width:980px) { .hero { grid-template-columns:1fr; text-align:center; padding-top:75px; }.hero-copy{margin:auto}.hero-actions,.hero-proof{justify-content:center}.hero-art{max-width:620px}.features-section{grid-template-columns:1fr}.feature-intro{max-width:720px}.preview-stage{min-height:500px}.site-footer{grid-template-columns:1fr 2fr}.footer-links{grid-column:1/-1;flex-direction:row}.download-card{grid-template-columns:1fr}.download-art{height:310px}.big-ball{left:40%} }
@media (max-width:760px) { .menu-toggle { display:grid; gap:4px; border:0; background:transparent; padding:12px; } .menu-toggle span:not(.sr-only) { display:block; width:25px; height:3px; background:var(--ink); border-radius:3px; } .site-nav { display:none; position:absolute; top:100%; left:16px; right:16px; padding:20px; flex-direction:column; background:#fff; border-radius:20px; box-shadow:0 16px 50px rgba(20,58,94,.18); } .site-nav.is-open { display:flex; } main section{padding:80px 20px}.site-footer { grid-template-columns:1fr; gap:25px; }.footer-links{grid-column:auto}.hero{padding-top:60px}.hero h1{font-size:clamp(3.5rem,17vw,5.2rem)}.hero-actions{flex-direction:column}.hero-proof{gap:15px;flex-direction:column}.hero-art{width:118%;margin-left:-9%}.steps,.feature-grid{grid-template-columns:1fr}.features-section{gap:40px}.preview-stage{min-height:390px;gap:8px}.phone{width:32vw;border-radius:21px;padding:6px}.phone-screen{border-radius:16px}.phone::before{top:10px;height:9px}.game-block{width:43px;height:43px;border-width:3px;border-radius:11px;font-size:.8rem}.game-ball{width:31px;height:31px;border-width:3px}.level-label{top:30px;font-size:.48rem}.download-card{padding:54px 26px;border-radius:30px}.download-art{height:260px}.big-ball{width:135px;height:135px;left:31%;font-size:4rem}.target{width:70px;height:70px;font-size:1rem}.site-header{padding-inline:18px} }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }