:root{
  --bg:#020817; --nav:#040a16; --panel:#061b38; --panel2:#0a244c;
  --line:rgba(255,255,255,.13); --text:#fff; --muted:#c8d9f2;
  --blue:#087cff; --cyan:#1ac8ff; --green:#57e672; --yellow:#ffc934; --red:#ff4a38;
  --radius:22px; --shadow:0 26px 90px rgba(0,0,0,.42);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#020817;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 71% 18%,rgba(0,130,255,.35),transparent 28%),linear-gradient(180deg,#061a38 0%,#030c1f 52%,#020817 100%)}
body:after{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 85% 28%,rgba(24,197,255,.14),transparent 30%),radial-gradient(circle at 35% 15%,rgba(0,92,255,.16),transparent 30%);pointer-events:none}
a{color:inherit}.page-shell{max-width:1450px;margin:0 auto;min-height:100vh;background:linear-gradient(180deg,rgba(6,18,42,.72),rgba(2,8,23,.64));box-shadow:0 0 0 1px rgba(255,255,255,.06),0 28px 90px rgba(0,0,0,.45)}
.topbar{height:74px;display:flex;align-items:center;gap:28px;padding:0 clamp(18px,3.6vw,58px);background:rgba(2,8,23,.92);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:50;backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:max-content}.brand img{width:52px;height:52px;border-radius:13px;filter:drop-shadow(0 8px 12px rgba(0,91,255,.35))}.brand span{display:grid;line-height:.86}.brand b{font-size:28px;letter-spacing:.5px}.brand em{font-style:normal;font-weight:1000;color:var(--cyan);letter-spacing:3px;font-size:17px}.brand.small img{width:42px;height:42px}.brand.small b{font-size:22px}.brand.small em{font-size:13px}.nav{display:flex;align-items:center;justify-content:center;gap:31px;flex:1;height:100%}.nav a{position:relative;text-decoration:none;font-weight:800;font-size:14px;color:white;padding:29px 0 24px}.nav a.active{color:var(--cyan)}.nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:99px}.download{display:flex;align-items:center;gap:9px;text-decoration:none;background:linear-gradient(180deg,#0d87ff,#0067e7);padding:14px 20px;border-radius:10px;font-weight:900;box-shadow:0 14px 28px rgba(0,119,255,.25)}.menu-btn{display:none;margin-left:auto;background:transparent;color:#fff;border:0;font-size:30px;cursor:pointer}
.hero{position:relative;min-height:496px;padding:76px clamp(24px,4vw,58px) 48px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at 62% 35%,rgba(26,161,255,.26),transparent 28%),linear-gradient(90deg,rgba(2,8,23,.94) 0%,rgba(3,15,35,.88) 31%,rgba(5,25,61,.3) 62%,rgba(2,8,23,.86) 100%)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,8,23,.78) 0%,rgba(2,8,23,.52) 31%,rgba(2,8,23,.06) 60%,rgba(2,8,23,.36) 100%),url('assets/hero-scene-bluebloc.jpeg') center right/auto 100% no-repeat;opacity:.76;filter:saturate(1.15) contrast(1.03)}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:135px;background:linear-gradient(180deg,transparent,rgba(2,8,23,.92))}
.hero-copy{position:relative;z-index:5;width:min(430px,100%)}.hero h1{margin:0 0 18px;font-family:"Baloo 2",Inter,sans-serif;text-transform:uppercase;font-weight:900;font-size:clamp(50px,5.5vw,78px);line-height:.86;letter-spacing:-2px;text-shadow:0 6px 0 rgba(0,0,0,.15),0 18px 40px rgba(0,0,0,.45)}.hero h1 span{display:block;color:#12adff;background:linear-gradient(180deg,#37d9ff,#087cff 70%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy p{margin:0;color:#f1f7ff;font-size:18px;line-height:1.55;max-width:390px;text-shadow:0 2px 14px rgba(0,0,0,.55)}.cta-row{display:flex;gap:16px;margin-top:26px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:165px;border-radius:10px;padding:14px 20px;text-decoration:none;font-weight:900}.btn.primary{background:linear-gradient(180deg,#128aff,#006bea);box-shadow:0 14px 28px rgba(0,119,255,.25)}.btn.ghost{background:rgba(2,8,23,.45);border:1px solid rgba(255,255,255,.45)}
.hero-art{position:absolute;z-index:3;left:34%;right:22px;top:74px;bottom:0;pointer-events:none}.moon{position:absolute;top:34px;right:245px;width:87px;height:87px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#eaffff,#77b7ff 55%,#2d77c6);opacity:.7;filter:blur(.1px);box-shadow:0 0 42px rgba(118,190,255,.5)}.speed-lines{position:absolute;left:90px;top:92px;width:420px;height:220px;background:repeating-linear-gradient(170deg,transparent 0 20px,rgba(83,191,255,.38) 22px 24px,transparent 25px 45px);filter:blur(.2px);opacity:.5;transform:skewX(-8deg)}
.flying-item{position:absolute;filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));animation:float 3.6s ease-in-out infinite}.star{width:76px;height:76px;background:linear-gradient(135deg,#fff19a,#ffb800 65%);clip-path:polygon(50% 0,61% 34%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 34%)}.gem{width:70px;height:70px;background:linear-gradient(135deg,#c6ff9b,#19c746 65%);clip-path:polygon(25% 5%,75% 5%,100% 35%,50% 100%,0 35%)}.star-one{left:405px;top:72px}.gem-one{right:145px;top:92px;animation-delay:.7s}.hero-runner{position:absolute;left:75px;top:50px;width:310px;height:330px;animation:runnerMove 4.2s ease-in-out infinite}.hero-runner img{position:absolute;z-index:4;left:44px;top:30px;width:235px;filter:drop-shadow(0 28px 24px rgba(0,0,0,.42));animation:bodyBob .62s ease-in-out infinite}.arm,.leg{position:absolute;display:block;background:#111722;border-radius:22px;z-index:2;transform-origin:50% 0}.arm{width:24px;height:100px;top:132px}.arm i,.leg i{position:absolute;display:block;background:#fff;border:4px solid #dce6f5;box-shadow:inset -7px -8px 0 rgba(0,0,0,.13)}.arm i{width:55px;height:55px;border-radius:50%;bottom:-34px;left:-15px}.left-arm{left:48px;top:118px;transform:rotate(132deg);animation:wave .95s ease-in-out infinite}.right-arm{right:42px;animation:armRun .62s ease-in-out infinite reverse}.leg{width:25px;height:106px;top:245px}.leg i{width:72px;height:43px;border-radius:50px;bottom:-28px;left:-24px}.left-leg{left:129px;animation:legRun .62s ease-in-out infinite}.right-leg{right:97px;animation:legRun .62s ease-in-out infinite reverse}.dust{position:absolute;bottom:10px;border-radius:50%;background:#e6d2ad;filter:blur(.3px);opacity:.9;animation:dust 1s ease-in-out infinite}.d1{left:70px;width:72px;height:38px}.d2{left:10px;bottom:28px;width:44px;height:28px;animation-delay:.3s}.friend,.enemy{position:absolute;bottom:58px;width:112px;height:112px;filter:drop-shadow(0 16px 16px rgba(0,0,0,.35));animation:panicHop .66s ease-in-out infinite}.friend span,.enemy span{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#b9ff95,#10bd3e);box-shadow:inset -14px -18px 0 rgba(0,0,0,.12),inset 12px 15px 0 rgba(255,255,255,.22)}.friend span:before,.enemy span:before{content:"";position:absolute;left:24px;top:26px;width:22px;height:28px;border-radius:50%;background:#fff;box-shadow:40px 0 0 #fff}.friend span:after,.enemy span:after{content:"";position:absolute;left:36px;top:72px;width:44px;height:23px;border-radius:0 0 40px 40px;background:#161622}.green-friend{left:430px}.yellow-friend{left:555px;animation-delay:.12s}.yellow-friend span{background:linear-gradient(135deg,#fff08a,#ffc21d)}.enemy{left:700px;width:98px;height:135px;animation-delay:.22s}.enemy span{border-radius:22px;background:linear-gradient(135deg,#ff7c70,#e02018)}
.feature-strip{position:relative;z-index:10;margin:-34px clamp(24px,4vw,58px) 0;padding:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:linear-gradient(180deg,rgba(11,37,76,.86),rgba(5,18,43,.9));box-shadow:var(--shadow);backdrop-filter:blur(14px)}.feature-strip article{display:grid;grid-template-columns:68px 1fr;gap:15px;align-items:center;padding:15px 20px}.feature-strip article+article{border-left:1px solid rgba(255,255,255,.09)}.feature-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:linear-gradient(180deg,#0e6bda,#082c65);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.feature-icon.green{background:linear-gradient(180deg,#0d6937,#082f26)}.feature-icon.purple{background:linear-gradient(180deg,#5144d4,#1a2365)}.feature-icon.orange{background:linear-gradient(180deg,#78501b,#312218)}.feature-strip b{font-size:14px}.feature-strip p{margin:5px 0 0;color:#e3efff;font-size:14px;line-height:1.35}
.section{padding:44px clamp(24px,4vw,58px)}.section-title{text-align:center;max-width:780px;margin:0 auto 22px}.section-title p,.kicker{margin:0 0 6px;color:var(--cyan);font-weight:1000;letter-spacing:.05em;text-transform:uppercase}.section-title h2,.about-card h2{margin:0;font-family:"Baloo 2";font-size:clamp(28px,3vw,40px);line-height:.9;text-transform:uppercase}.section-title span{display:block;margin-top:4px;color:#dbeaff}.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.video-card{overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,rgba(12,39,78,.92),rgba(4,16,39,.96));border-radius:14px;box-shadow:0 18px 42px rgba(0,0,0,.3)}.video-wrap{position:relative}.video-card video{display:block;width:100%;aspect-ratio:3.28/1;object-fit:cover;background:#000}.tag{position:absolute;top:10px;left:10px;z-index:2;padding:7px 10px;border-radius:6px;background:#087cff;font-weight:1000;font-size:12px}.tag.danger{background:#ff3b31}.video-card footer{display:flex;justify-content:space-between;gap:15px;padding:12px 14px}.video-card small{color:#d8e7fb}.center-row{display:flex;justify-content:center;margin-top:10px}.small-blue-btn{display:inline-flex;align-items:center;gap:12px;padding:11px 28px;background:linear-gradient(180deg,#0f85ff,#0067e6);border-radius:9px;text-decoration:none;font-weight:900}.about-card,.steps article,.char-card,.contact-card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(13,42,82,.82),rgba(4,17,42,.9));border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.24)}.about-card{padding:28px}.about-card p,.steps p,.char-card p,.contact-card p{color:var(--muted);line-height:1.55}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.steps article{padding:20px}.steps b{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#087cff;font-size:21px}.characters{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.char-card{display:grid;grid-template-columns:95px 1fr;align-items:center;gap:13px;padding:14px}.char-card img{width:95px;animation:wiggle 2.4s ease-in-out infinite}.bubble{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;font-size:54px;animation:wiggle 2.4s ease-in-out infinite}.green-bubble{background:linear-gradient(135deg,#a6ff93,#12bd43);color:#0a7a24}.yellow-bubble{background:linear-gradient(135deg,#fff198,#ffc21e);color:#df9a00}.red-bubble{border-radius:18px;background:linear-gradient(135deg,#ff796f,#d81913);color:#9b0505}.support-row{margin:16px clamp(24px,4vw,58px) 28px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(13,42,82,.86),rgba(4,17,42,.92));box-shadow:0 18px 50px rgba(0,0,0,.24);overflow:hidden}.contact-card{border:0;border-radius:0;box-shadow:none;display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:22px 28px;background:transparent}.contact-card+.contact-card{border-left:1px solid rgba(255,255,255,.09)}.contact-card span{font-size:46px}.contact-card h3{margin:0 0 3px}.contact-card a{display:block;color:var(--cyan);font-weight:800;text-decoration:none;word-break:break-word;font-size:14px}.contact-card p{margin:3px 0 0;font-size:14px}.site-footer{padding:26px clamp(24px,4vw,58px);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted)}.site-footer a{color:white}.reveal{opacity:0;transform:translateY(18px);transition:.7s ease}.reveal.in{opacity:1;transform:none}
@keyframes float{50%{transform:translateY(-16px) rotate(8deg)}}@keyframes runnerMove{0%,100%{transform:translate(0,0) rotate(-5deg)}50%{transform:translate(20px,-12px) rotate(2deg)}}@keyframes bodyBob{50%{transform:translateY(-12px) rotate(2deg)}}@keyframes wave{0%,100%{transform:rotate(130deg)}50%{transform:rotate(168deg) translateY(-8px)}}@keyframes armRun{0%,100%{transform:rotate(-35deg)}50%{transform:rotate(-86deg)}}@keyframes legRun{0%,100%{transform:rotate(25deg)}50%{transform:rotate(-50deg)}}@keyframes dust{50%{transform:translateX(-15px) scale(.8);opacity:.55}}@keyframes panicHop{50%{transform:translateY(-16px) rotate(4deg)}}@keyframes wiggle{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(4deg) translateY(-8px)}}.hero-runner.jump-now{animation:runnerMove 4.2s ease-in-out infinite, quickJump .7s ease-out 1}@keyframes quickJump{45%{margin-top:-45px}}
@media(max-width:1050px){.download,.nav{display:none}.menu-btn{display:block}.topbar.open .nav{display:flex;position:absolute;top:80px;left:16px;right:16px;height:auto;flex-direction:column;align-items:stretch;background:rgba(2,8,23,.98);border:1px solid var(--line);border-radius:18px;padding:18px}.nav a{padding:12px}.nav a.active:after{display:none}.hero{min-height:600px;padding-top:58px}.hero:before{background:linear-gradient(180deg,rgba(2,8,23,.3),rgba(2,8,23,.96)),url('assets/hero-scene-bluebloc.jpeg') center bottom/cover no-repeat}.hero-art{display:none}.hero-copy{width:100%;max-width:460px}.feature-strip,.steps,.characters{grid-template-columns:1fr 1fr}.support-row{grid-template-columns:1fr}.contact-card+.contact-card{border-left:0;border-top:1px solid rgba(255,255,255,.09)}.video-grid{grid-template-columns:1fr}}
@media(max-width:640px){.page-shell{max-width:none}.topbar{height:72px;padding:0 16px}.brand img{width:42px;height:42px}.brand b{font-size:22px}.brand em{font-size:14px}.hero{min-height:570px;padding:42px 18px 30px;background:linear-gradient(180deg,rgba(2,8,23,.3),rgba(2,8,23,.96))}.hero:before{opacity:.88;background:linear-gradient(180deg,rgba(2,8,23,.18),rgba(2,8,23,.78) 56%,rgba(2,8,23,.98)),url('assets/hero-scene-bluebloc.jpeg') 54% bottom/auto 72% no-repeat}.hero-copy{text-align:left}.hero h1{font-size:42px;max-width:330px}.hero-copy p{font-size:14px;max-width:300px}.cta-row{display:grid;gap:8px;margin-top:18px}.btn{width:100%;padding:12px}.feature-strip{grid-template-columns:1fr 1fr;margin:-12px 18px 0;padding:8px}.feature-strip article{display:block;text-align:center;padding:12px 6px;border-left:0!important}.feature-icon{margin:0 auto 8px;width:52px;height:52px}.feature-strip b{font-size:11px}.feature-strip p{font-size:11px}.section{padding:38px 18px}.video-card video{aspect-ratio:16/9}.steps,.characters{grid-template-columns:1fr}.support-row{margin:8px 18px 24px}.contact-card{grid-template-columns:58px 1fr;padding:18px}.site-footer{display:block;text-align:center}.site-footer .brand{justify-content:center;margin-bottom:14px}}


/* V5: cartoon BlueBloc hero animation. Replaces the previous still-image runner with a lively CSS character. */
.hero-runner{display:none!important}
.hero-art{overflow:visible}
.cartoon-stage{position:absolute;left:70px;top:118px;width:520px;height:360px;z-index:7;pointer-events:none;animation:cartoonTravel 7.6s ease-in-out infinite}
.cartoon-path{position:absolute;inset:0;transform-origin:50% 85%;animation:cartoonJump 2.7s ease-in-out infinite}
.cartoon-bluebloc{position:absolute;left:142px;top:44px;width:230px;height:250px;transform-origin:50% 80%;animation:cartoonSquash .82s ease-in-out infinite}
.cartoon-body{position:absolute;left:28px;top:14px;width:176px;height:176px;border-radius:42px;background:linear-gradient(145deg,#31d8ff 0%,#0b8dff 35%,#0359e7 78%,#0137a8 100%);box-shadow:inset 14px 16px 0 rgba(255,255,255,.18),inset -18px -24px 0 rgba(0,26,119,.28),0 26px 42px rgba(0,0,0,.43),0 0 44px rgba(48,208,255,.45);border:5px solid rgba(216,248,255,.95);z-index:4;animation:cartoonBodyTilt 2.1s ease-in-out infinite}
.cartoon-body:before{content:"";position:absolute;inset:18px 24px auto auto;width:48px;height:24px;border-radius:50%;background:rgba(255,255,255,.48);filter:blur(.2px);transform:rotate(-18deg)}
.cartoon-body:after{content:"";position:absolute;left:26px;right:26px;bottom:17px;height:10px;border-radius:50%;background:rgba(255,255,255,.13);filter:blur(6px)}
.eye{position:absolute;top:58px;width:36px;height:42px;border-radius:50%;background:#fff;border:3px solid #0b2d6e;box-shadow:inset 0 -4px 0 #dff7ff;overflow:hidden;animation:cartoonBlink 5.3s infinite}.eye-left{left:50px}.eye-right{right:50px}.eye b{position:absolute;left:12px;top:13px;width:13px;height:18px;border-radius:50%;background:#061331;box-shadow:4px -4px 0 -2px #fff;animation:pupilLook 7.6s ease-in-out infinite}.smile{position:absolute;left:61px;top:113px;width:56px;height:28px;border-bottom:7px solid #071b46;border-radius:0 0 55px 55px}.smile:after{content:"";position:absolute;left:18px;top:17px;width:20px;height:8px;border-radius:50%;background:#ff7cac;opacity:.8}.cheek{position:absolute;top:105px;width:22px;height:12px;border-radius:50%;background:rgba(255,124,172,.62);filter:blur(.2px)}.cheek-left{left:35px}.cheek-right{right:35px}.shine{position:absolute;left:28px;top:23px;width:33px;height:18px;border-radius:50%;background:rgba(255,255,255,.5);transform:rotate(-24deg)}
.cartoon-arm{position:absolute;top:86px;width:30px;height:102px;background:#0b2d6e;border:4px solid #d9f8ff;border-radius:24px;z-index:2;transform-origin:50% 12px;box-shadow:inset -5px -5px 0 rgba(0,0,0,.18)}.cartoon-arm i{position:absolute;bottom:-20px;left:-11px;width:50px;height:50px;border-radius:50%;background:linear-gradient(#fff,#dbefff);border:4px solid #bfeeff;box-shadow:inset -7px -8px 0 rgba(0,0,0,.12)}.arm-left{left:10px;animation:cartoonWave 1.6s ease-in-out infinite}.arm-right{right:10px;animation:cartoonRunArm .82s ease-in-out infinite reverse}
.cartoon-leg{position:absolute;top:175px;width:32px;height:92px;background:#08245e;border:4px solid #d9f8ff;border-radius:22px;z-index:1;transform-origin:50% 10px;box-shadow:inset -4px -6px 0 rgba(0,0,0,.18)}.cartoon-leg i{position:absolute;bottom:-22px;left:-20px;width:72px;height:42px;border-radius:42px;background:linear-gradient(#fff,#dcecff);border:4px solid #bfeeff;box-shadow:inset -8px -8px 0 rgba(0,0,0,.12)}.leg-left{left:72px;animation:cartoonRunLeg .82s ease-in-out infinite}.leg-right{right:72px;animation:cartoonRunLeg .82s ease-in-out infinite reverse}.cartoon-shadow{position:absolute;left:134px;right:128px;bottom:44px;height:32px;border-radius:50%;background:rgba(0,0,0,.42);filter:blur(8px);animation:cartoonShadow 2.7s ease-in-out infinite}.spark{position:absolute;z-index:8;font-weight:900;text-shadow:0 0 14px currentColor;animation:sparkFloat 3.2s ease-in-out infinite}.s1{right:72px;top:32px;color:#fff05b;font-size:34px}.s2{left:72px;top:96px;color:#64f883;font-size:26px;animation-delay:-.7s}.s3{right:32px;top:178px;color:#ff6b5a;font-size:30px;animation-delay:-1.3s}.cartoon-stage .dust{position:absolute;bottom:58px;border-radius:50%;background:rgba(190,238,255,.45);filter:blur(1px);animation:dustPuff 1.2s ease-out infinite}.cartoon-stage .d1{left:126px;width:22px;height:22px}.cartoon-stage .d2{left:92px;width:14px;height:14px;animation-delay:-.55s}
@keyframes cartoonTravel{0%,100%{transform:translateX(-20px) rotate(-2deg)}25%{transform:translateX(28px) rotate(2deg)}52%{transform:translateX(88px) rotate(-1deg)}74%{transform:translateX(34px) rotate(3deg)}}
@keyframes cartoonJump{0%,100%{transform:translateY(0)}18%{transform:translateY(-18px)}34%{transform:translateY(0)}57%{transform:translateY(-64px)}76%{transform:translateY(0)}}
@keyframes cartoonSquash{0%,100%{transform:scale(1)}50%{transform:scale(1.035,.96)}}
@keyframes cartoonBodyTilt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
@keyframes cartoonWave{0%,100%{transform:rotate(128deg)}45%{transform:rotate(184deg) translateY(-8px)}70%{transform:rotate(145deg)}}
@keyframes cartoonRunArm{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(-86deg)}}
@keyframes cartoonRunLeg{0%,100%{transform:rotate(26deg)}50%{transform:rotate(-50deg)}}
@keyframes cartoonShadow{0%,100%{transform:scaleX(1);opacity:.72}57%{transform:scaleX(.58);opacity:.42}}
@keyframes cartoonBlink{0%,93%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes pupilLook{0%,100%{transform:translateX(0)}40%{transform:translateX(4px)}72%{transform:translateX(-4px)}}
@keyframes sparkFloat{0%,100%{transform:translateY(0) rotate(0deg);opacity:.95}50%{transform:translateY(-17px) rotate(13deg);opacity:.62}}
@keyframes dustPuff{0%{transform:translateX(0) scale(.6);opacity:.7}100%{transform:translateX(-58px) scale(1.55);opacity:0}}
@media(max-width:1050px){.hero-art{display:block;left:5%;right:5%;top:222px;height:310px}.hero-art .moon,.hero-art .speed-lines,.hero-art .friend,.hero-art .flying-item{display:none}.cartoon-stage{left:50%;top:8px;width:430px;height:310px;transform:translateX(-50%);animation:cartoonTravelMobile 7.6s ease-in-out infinite}.cartoon-bluebloc{left:108px;top:34px;transform:scale(.86);transform-origin:50% 60%}.cartoon-shadow{left:112px;right:104px;bottom:32px}@keyframes cartoonTravelMobile{0%,100%{transform:translateX(-56%) rotate(-2deg)}50%{transform:translateX(-44%) rotate(2deg)}}}
@media(max-width:640px){.hero-art{top:236px;height:275px}.cartoon-stage{width:350px;height:265px}.cartoon-bluebloc{left:72px;top:22px;transform:scale(.72)}.cartoon-shadow{left:88px;right:82px;bottom:30px}.spark{font-size:22px}.s1{right:55px}.s2{left:50px}.s3{right:16px}}

/* V6 updates: hero overlay animation removed; character cards now use static game faces. */
.hero-art.no-hero-animation{display:none!important}
.hero{min-height:540px}
.characters .char-card{align-items:center}
.face{position:relative;width:118px;height:118px;min-width:118px;display:block;filter:drop-shadow(0 20px 20px rgba(0,0,0,.35));box-shadow:inset 14px 16px 0 rgba(255,255,255,.25), inset -14px -18px 0 rgba(0,0,0,.16), 0 0 0 5px rgba(255,255,255,.16);}
.green-face{border-radius:50%;background:radial-gradient(circle at 35% 30%,#d8ffb8 0 13%,#59f070 34%,#0fc24d 78%,#087a32 100%)}
.sunny-face{border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7a8 0 13%,#ffd944 34%,#ffaf1f 78%,#c96c00 100%)}
.redster-face{height:88px;border-radius:24px;background:linear-gradient(145deg,#ff8a7d 0%,#ff3f35 42%,#c91818 100%);box-shadow:inset 14px 14px 0 rgba(255,255,255,.18), inset -14px -16px 0 rgba(0,0,0,.18), 0 0 0 5px rgba(255,255,255,.16), 0 20px 20px rgba(0,0,0,.34)}
.face-eye{position:absolute;top:36px;width:23px;height:30px;border-radius:50%;background:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.face-eye:after{content:"";position:absolute;left:8px;top:9px;width:8px;height:12px;border-radius:50%;background:#10182b;box-shadow:3px -3px 0 -2px #fff}.face-eye.left{left:31px}.face-eye.right{right:31px}.redster-face .face-eye{top:22px;width:21px;height:25px}.redster-face .face-eye.left{left:28px}.redster-face .face-eye.right{right:28px}.face-mouth{position:absolute;left:50%;transform:translateX(-50%);display:block}.smile-mouth{top:77px;width:42px;height:22px;border-bottom:6px solid #10223d;border-radius:0 0 50px 50px}.happy-mouth{top:75px;width:50px;height:28px;border-radius:0 0 55px 55px;background:#18203a}.happy-mouth:after{content:"";position:absolute;left:15px;bottom:3px;width:20px;height:8px;border-radius:50%;background:#ff7fac}.flat-mouth{top:58px;width:42px;height:6px;border-radius:99px;background:#531010}
@media(max-width:640px){.face{width:96px;height:96px;min-width:96px}.redster-face{height:74px}.face-eye{top:28px}.smile-mouth,.happy-mouth{top:63px}.flat-mouth{top:49px}}

/* V7 updates: clean portrait gameplay demos + video modal. */
.portrait-demos{align-items:stretch;max-width:980px;margin:0 auto}.portrait-demos .video-card{display:flex;flex-direction:column}.portrait-demos .video-wrap{appearance:none;border:0;color:inherit;font:inherit;text-align:left;width:100%;cursor:pointer;background:radial-gradient(circle at 50% 18%,rgba(26,200,255,.2),transparent 34%),linear-gradient(180deg,rgba(8,26,59,.98),rgba(3,12,31,.98));padding:18px 18px 16px;display:grid;place-items:center;min-height:470px}.phone-frame{position:relative;display:block;width:min(100%,258px);aspect-ratio:9/16;border-radius:34px;padding:10px;background:linear-gradient(180deg,#142f64,#04122f);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 26px 60px rgba(0,0,0,.45),0 0 48px rgba(8,124,255,.25);overflow:hidden}.phone-frame:before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:66px;height:7px;border-radius:99px;background:rgba(255,255,255,.26);z-index:2}.phone-frame video{display:block;width:100%;height:100%;aspect-ratio:9/16;object-fit:contain;background:#020817;border-radius:25px}.play-badge{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 15px;border-radius:999px;background:rgba(2,8,23,.78);border:1px solid rgba(255,255,255,.2);box-shadow:0 14px 30px rgba(0,0,0,.35);font-weight:1000;color:#fff}.demo-open:hover .phone-frame,.demo-open:focus-visible .phone-frame{transform:translateY(-4px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 34px 70px rgba(0,0,0,.52),0 0 58px rgba(26,200,255,.35)}.demo-open:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}.video-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:22px}.video-modal.open{display:flex}.video-modal-backdrop{position:absolute;inset:0;background:rgba(1,5,15,.82);backdrop-filter:blur(12px)}.video-modal-panel{position:relative;width:min(94vw,520px);max-height:92vh;padding:18px;border-radius:26px;border:1px solid rgba(255,255,255,.17);background:linear-gradient(180deg,rgba(12,39,78,.98),rgba(3,12,31,.98));box-shadow:0 38px 120px rgba(0,0,0,.62);display:grid;gap:12px}.video-modal-panel h2{margin:0 52px 0 6px;font-family:"Baloo 2";font-size:28px;line-height:1;color:white;text-transform:uppercase}.modal-close{position:absolute;right:14px;top:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:white;font-size:28px;line-height:1;cursor:pointer}.modal-close:hover{background:rgba(255,255,255,.22)}.modal-phone-frame{width:min(100%,390px);max-height:78vh;aspect-ratio:9/16;margin:0 auto;border-radius:34px;padding:10px;background:linear-gradient(180deg,#17356f,#061534);border:1px solid rgba(255,255,255,.22);box-shadow:0 25px 70px rgba(0,0,0,.45);overflow:hidden}.modal-phone-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000;border-radius:25px}.nav a{transition:color .18s ease}.nav a.active{color:var(--cyan)!important}.nav a:hover{color:#b9f2ff}
@media(max-width:1050px){.portrait-demos{max-width:560px}.portrait-demos .video-wrap{min-height:520px}.phone-frame{width:min(100%,286px)}}
@media(max-width:640px){.portrait-demos .video-wrap{min-height:440px;padding:16px 12px}.phone-frame{width:min(100%,226px)}.play-badge{bottom:18px;font-size:13px}.video-modal{padding:12px}.video-modal-panel{width:96vw;padding:14px;border-radius:22px}.modal-phone-frame{max-height:74vh}.video-modal-panel h2{font-size:23px}}

/* V8 updates: no Home menu item, Contact link + static mail form. */
.topbar .nav{justify-content:flex-end;gap:clamp(18px,2.4vw,31px)}
.nav .contact-nav{margin-left:clamp(10px,2vw,34px);color:#fff}
.nav .contact-nav.active{color:var(--cyan)!important}
.contact-section{padding-top:70px}
.contact-card{width:min(1120px,92%);margin:0 auto;display:grid;grid-template-columns:0.95fr 1.05fr;gap:30px;align-items:stretch;background:linear-gradient(135deg,rgba(8,26,59,.96),rgba(4,16,42,.98));border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(22px,4vw,44px);position:relative;overflow:hidden}
.contact-card:before{content:"";position:absolute;inset:-40% -30% auto auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(26,200,255,.22),transparent 65%);pointer-events:none}
.contact-copy h2{font-family:"Baloo 2";font-size:clamp(34px,5vw,62px);line-height:.92;margin:10px 0 14px;text-transform:uppercase}.contact-copy p{color:var(--muted);font-size:17px;line-height:1.75;max-width:520px}.contact-form{position:relative;z-index:1;display:grid;gap:15px}.contact-form label{display:grid;gap:8px;font-weight:900;color:#e7f7ff}.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(2,8,23,.66);color:white;font:inherit;padding:14px 16px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(26,200,255,.85);box-shadow:0 0 0 4px rgba(26,200,255,.16)}.contact-form textarea{resize:vertical;min-height:145px}.contact-submit{border:0;margin-top:6px;cursor:pointer;width:max-content}.contact-note{color:#a9c6e8;line-height:1.5}
@media(max-width:860px){.contact-card{grid-template-columns:1fr}.topbar .nav{justify-content:flex-start}.nav .contact-nav{margin-left:0}.contact-submit{width:100%;justify-content:center}}


/* V9 direct email updates */
.contact-submit:disabled{opacity:.72;cursor:not-allowed;filter:saturate(.75)}
.contact-note{display:block;min-height:22px}
.contact-note.success{color:#7dffab}
.contact-note.error{color:#ff9a9a}
.contact-note.info{color:#a9c6e8}

/* Cloudflare contact form hardening */
.hp-field{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}


/* Static mailto contact section: no backend, no Cloudflare Functions required. */
.mailto-panel{grid-template-columns:0.9fr 1.1fr}
.mailto-options{position:relative;z-index:1;display:grid;gap:14px}
.mailto-option{display:grid;grid-template-columns:56px 1fr;gap:6px 16px;align-items:center;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(2,8,23,.45);padding:16px 18px;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.mailto-option:hover{transform:translateY(-2px);border-color:rgba(26,200,255,.7);background:rgba(9,42,89,.7);box-shadow:0 16px 40px rgba(0,117,255,.22)}
.mailto-option .mail-icon{grid-row:1/4;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:linear-gradient(180deg,#189aff,#006ce8);font-size:28px;box-shadow:0 12px 28px rgba(0,117,255,.3)}
.mailto-option strong{font-family:"Baloo 2";font-size:22px;line-height:1}
.mailto-option em{font-style:normal;color:var(--cyan);font-weight:800;word-break:break-word}
.mailto-option small{color:var(--muted);line-height:1.45}
.mailto-option.primary-mail{background:linear-gradient(135deg,rgba(9,81,164,.82),rgba(3,23,58,.88));border-color:rgba(26,200,255,.4)}
@media(max-width:860px){.mailto-panel{grid-template-columns:1fr}.mailto-option{grid-template-columns:50px 1fr}.mailto-option .mail-icon{width:50px;height:50px}}
@media(max-width:520px){.mailto-option{grid-template-columns:1fr;text-align:center}.mailto-option .mail-icon{grid-row:auto;margin:0 auto}.mailto-option strong{font-size:20px}}