@font-face{font-family:"Fredoka";src:url(fonts/fredoka_semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka_bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito_bold.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito_extrabold.woff2) format("woff2");font-weight:800 900;font-display:swap}
:root{--ink:#1f2a44;--muted:#4d5a78;--card:#fffdf7;--cream:#fff7e8;--orange:#ff9a2e;--orange2:#ff7a1a;--orangeD:#d9621a;--blue:#3aa0f0;--blueD:#1f7bc4;--green:#5cc15a;--greenD:#3b9a3a;--line:#e9e2d2;--head:#1f2a44;--lead:#33405e}
*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:light}
body{margin:0;color:var(--ink);font:17px/1.6 "Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#9ad8ff;overflow-x:hidden}
body.night{--head:#fff;--lead:#e3e8ff}
#skybg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;display:block}
a{color:#1b6fc2}.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;border-radius:10px;z-index:30}
h1,h2,h3{font-family:"Fredoka","Nunito",system-ui,sans-serif;font-weight:700;line-height:1.15;margin:0}
section>.wrap>h2,.sec-lead{color:var(--head);transition:color .6s}.sec-lead{color:var(--lead)}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}.brand a{color:var(--ink);text-decoration:none}
.brand img{width:46px;height:46px;border-radius:13px;box-shadow:0 3px 0 rgba(20,60,110,.18),0 6px 14px rgba(20,60,110,.22);transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.brand a:hover img{transform:rotate(-8deg) scale(1.08)}
.brand b{font:700 27px "Fredoka",sans-serif;display:block}.brand small{display:block;font-size:13px;color:var(--muted);margin-top:-2px}
.brand small a{color:#1b6fc2;font-weight:800;text-decoration:underline;text-underline-offset:2px}
.top nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.top nav a{color:var(--ink);text-decoration:none;font-weight:800;font-size:15px;padding:8px 13px;border-radius:999px;transition:background .2s,transform .2s}
.top nav a:hover{background:rgba(255,255,255,.7);transform:translateY(-2px)}.top nav .lang{background:#fff;box-shadow:0 3px 0 #cfe3f3}
.top nav .home{display:inline-flex;align-items:center;gap:6px}.top nav .home svg{width:16px;height:16px;flex:none}
.top-actions{display:flex;align-items:center;gap:8px}
.mobile-menu{display:none;position:relative}.mobile-menu summary{list-style:none;cursor:pointer;background:#fff;padding:8px 15px;border-radius:999px;font-weight:800;box-shadow:0 3px 0 #cfe3f3}
.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu nav{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:18px;padding:8px;box-shadow:0 14px 34px rgba(20,60,110,.25);flex-direction:column;align-items:stretch;min-width:200px;z-index:20}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:18px 0 10px}
.title{font-size:clamp(54px,9vw,98px);color:#fff;letter-spacing:1px;margin:0;-webkit-text-stroke:3px #2b4a7a;paint-order:stroke fill;text-shadow:0 5px 0 #2b4a7a,0 10px 22px rgba(20,50,100,.35);white-space:nowrap}
.title span{display:inline-block;animation:drop .9s cubic-bezier(.25,1.6,.45,1) both;animation-delay:calc(var(--i)*70ms);transform-origin:50% 90%}
.title span:hover{animation:jelly .6s both}
@keyframes drop{0%{transform:translateY(-120%) scale(.6);opacity:0}60%{opacity:1}100%{transform:none}}
@keyframes jelly{0%{transform:none}30%{transform:scale(1.25,.75)}50%{transform:scale(.85,1.2) translateY(-8px)}70%{transform:scale(1.08,.94)}100%{transform:none}}
.tag{font:700 clamp(21px,3vw,28px) "Fredoka",sans-serif;margin:8px 0 12px;color:#24406b}
.lead{font-size:19px;max-width:540px;margin:0 0 22px}
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:22px;font:700 19px "Fredoka",sans-serif;text-decoration:none;color:#fff;border:0;cursor:pointer;text-shadow:0 1px 0 rgba(0,0,0,.2);transition:transform .15s,box-shadow .15s}
.btn:active{transform:translateY(4px)}
.btn.play{background:linear-gradient(180deg,#ffb04a,var(--orange2));box-shadow:0 6px 0 var(--orangeD),0 12px 22px rgba(217,98,26,.32)}
.btn.play:hover{transform:translateY(-2px) rotate(-1deg)}
.btn.soon{background:linear-gradient(180deg,#9fb2c8,#8297b0);box-shadow:0 6px 0 #6a7f98;cursor:default}
.btn.blue{background:linear-gradient(180deg,#5cb8ff,var(--blue));box-shadow:0 6px 0 var(--blueD)}
.btn.green{background:linear-gradient(180deg,#79d873,var(--green));box-shadow:0 6px 0 var(--greenD)}
.btn svg{width:22px;height:22px;flex:none}.note{font-size:15px;color:var(--muted);margin:16px 0 0}

/* sundial toy */
.toy{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25));border:3px solid #fff;border-radius:34px;padding:12px 12px 16px;box-shadow:0 18px 40px rgba(20,60,110,.25);backdrop-filter:blur(6px);position:relative}
.toy canvas{display:block;width:100%;aspect-ratio:1/0.92;border-radius:24px;touch-action:pan-y;cursor:grab}
.toy canvas:active{cursor:grabbing}
.dayrange{width:100%;margin:12px 0 4px;-webkit-appearance:none;appearance:none;height:16px;border-radius:999px;background:linear-gradient(90deg,#2b3a80 0,#ffb46b 12%,#8ed2ff 50%,#ff9fb0 88%,#2b3a80 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.18);outline:none;cursor:pointer}
.dayrange::-webkit-slider-thumb{-webkit-appearance:none;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc53d 55%,#f29a10);border:3px solid #fff;box-shadow:0 3px 10px rgba(200,120,0,.5)}
.dayrange::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc53d 55%,#f29a10);border:3px solid #fff;box-shadow:0 3px 10px rgba(200,120,0,.5)}
.dayrange:focus-visible{outline:3px solid #1b6fc2;outline-offset:4px}
.toy-status{display:flex;align-items:center;justify-content:center;gap:8px;min-height:30px;font-weight:800;text-align:center}
.toy-status b{font:700 19px "Fredoka",sans-serif}.toy-status .hot{color:#d9471a}.toy-status .ok{color:#2f8a3a}
.toy-hint{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-2deg);background:var(--ink);color:#fff;font-weight:800;font-size:14px;padding:6px 14px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 0 rgba(0,0,0,.2);animation:bob 2s ease-in-out infinite;transition:opacity .4s}
.toy-hint.gone{opacity:0;pointer-events:none}
@keyframes bob{50%{transform:translateX(-50%) rotate(2deg) translateY(-3px)}}

/* facts */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0 0}
.facts div{background:var(--card);border-radius:22px;padding:14px 10px;text-align:center;box-shadow:0 5px 0 #e2dccb;transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.facts div:hover{transform:translateY(-6px) rotate(-2deg)}
.facts b{display:block;font:700 32px "Fredoka",sans-serif;color:var(--orange2)}.facts span{font-size:15px;color:var(--muted);font-weight:800}

section{padding-top:84px}section h2{font-size:clamp(30px,4.4vw,42px);margin-bottom:10px}
.sec-lead{font-size:18px;max-width:700px;margin:0 0 26px}

/* how it works */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.phase{background:var(--card);border-radius:28px;overflow:hidden;box-shadow:0 6px 0 #e2dccb,0 16px 30px rgba(20,60,110,.14);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.phase:hover{transform:translateY(-8px) rotate(var(--r,-1.5deg))}.phase:nth-child(2){--r:1.5deg}
.phase img{display:block;width:100%;height:auto}.phase div{padding:14px 18px 18px}.phase h3{font-size:23px}.phase p{margin:4px 0 0}
.phase .pill{display:inline-block;font:700 13px "Fredoka",sans-serif;color:#fff;padding:3px 10px;border-radius:999px;margin-bottom:6px}
.more-note{margin:20px 0 0;color:var(--lead);font-weight:700}

/* demo */
.demo{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.demo-phone{position:relative;width:min(340px,80vw);aspect-ratio:9/16;border-radius:42px;padding:10px;background:#fff;box-shadow:0 26px 60px rgba(20,60,110,.35);justify-self:center}
.demo-phone img,.demo-phone iframe{display:block;width:100%;height:100%;border:0;border-radius:32px;object-fit:cover;background:#9ad8ff}
.demo-start{position:absolute;inset:10px;border-radius:32px;border:0;cursor:pointer;background:rgba(20,40,80,.28);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;font:700 22px "Fredoka",sans-serif;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.demo-start i{width:96px;height:96px;border-radius:50%;background:linear-gradient(180deg,#ffb04a,var(--orange2));box-shadow:0 7px 0 var(--orangeD),0 0 0 0 rgba(255,154,46,.6);display:grid;place-items:center;animation:pulse 1.8s infinite}
.demo-start i svg{width:44px;height:44px;margin-left:6px}
@keyframes pulse{0%{box-shadow:0 7px 0 var(--orangeD),0 0 0 0 rgba(255,154,46,.55)}80%{box-shadow:0 7px 0 var(--orangeD),0 0 0 28px rgba(255,154,46,0)}}
.demo-text ul{padding:0;margin:16px 0 22px;list-style:none}.demo-text li{margin:8px 0;padding-left:34px;position:relative;color:var(--lead);font-weight:700}
.demo-text li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#bfe3ff 60%,#8fcbf5)}
.demo-text h2{color:var(--head)}
dialog.demo-dlg{padding:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;background:#9ad8ff}
dialog.demo-dlg::backdrop{background:rgba(10,20,40,.6)}
dialog.demo-dlg[open]{display:flex;flex-direction:column}
dialog.demo-dlg .frame{flex:1;min-height:0}
dialog.demo-dlg iframe{width:100%;height:100%;border:0;display:block}
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:max(8px,env(safe-area-inset-top)) 12px 8px 16px;background:#fff;box-shadow:0 2px 10px rgba(20,60,110,.15);font:700 18px "Fredoka",sans-serif;color:var(--ink)}
.demo-close{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:999px;border:0;background:#eef6fd;box-shadow:0 3px 0 #cfe3f3;font:700 16px "Fredoka",sans-serif;color:var(--ink);cursor:pointer}

/* worlds */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border-radius:26px;padding:20px 22px;box-shadow:0 6px 0 #e2dccb;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.card:hover{transform:translateY(-6px)}
.world canvas{display:block;width:100%;aspect-ratio:2.4/1;border-radius:18px;margin:-6px 0 12px}
.card h3{font-size:22px;margin:0 0 4px}.card p{margin:0}
.two{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:30px;margin-bottom:8px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}

/* gallery */
.gallery{position:relative}
.shots{display:flex;gap:22px;overflow-x:auto;padding:18px 6px 30px;scroll-snap-type:x mandatory;cursor:grab;scrollbar-width:none;perspective:900px}.shots::-webkit-scrollbar{display:none}
.shot-nav{position:absolute;top:calc(50% - 40px);z-index:2;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#ffb04a,var(--orange2));box-shadow:0 5px 0 var(--orangeD),0 10px 20px rgba(217,98,26,.3);transition:opacity .25s,transform .15s}
.shot-nav:active{transform:translateY(4px)}.shot-nav svg{width:26px;height:26px}.shot-nav.prev{left:-6px}.shot-nav.next{right:-6px}.shot-nav[disabled]{opacity:0;pointer-events:none}
.shots.drag{cursor:grabbing;scroll-snap-type:none}
.shots figure{margin:0;flex:0 0 230px;scroll-snap-align:center;transition:transform .25s}
.shots img{width:100%;height:auto;display:block;border-radius:26px;border:7px solid #fff;box-shadow:0 14px 28px rgba(20,60,110,.25);pointer-events:none;user-select:none}
.shots figcaption{text-align:center;font-weight:800;color:var(--lead);font-size:15px;margin-top:10px}

/* faq, contact */
.faq details{background:var(--card);border-radius:22px;padding:4px 20px;margin:0 0 12px;box-shadow:0 5px 0 #e2dccb}
.faq summary{cursor:pointer;font:700 19px "Fredoka",sans-serif;padding:14px 0;list-style:none}.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--orange2);transition:transform .3s}.faq details[open] summary::after{transform:rotate(45deg)}.faq p{margin:0 0 16px}
.contact{margin:44px 0 0;text-align:center;background:linear-gradient(180deg,#fff,#fff7e8);border-radius:32px;padding:34px 20px;box-shadow:0 7px 0 #ecdcbc}
.contact h2{font-size:28px}.contact p{color:var(--muted);margin:8px 0 20px}

/* footer at night */
.hills{height:110px;margin-top:80px;position:relative;background:radial-gradient(120% 150px at 20% 100%,#4f8f3a 60%,transparent 61%),radial-gradient(110% 160px at 85% 100%,#5f9f45 60%,transparent 61%)}
footer{background:#4f8f3a;color:#fff}footer .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:18px 20px 30px}
footer nav{display:flex;gap:16px;flex-wrap:wrap}footer a{color:#fff;font-weight:800}footer span{opacity:.9;font-size:15px}

/* mascot and snow */
#mascot{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:92px;height:110px;z-index:15;cursor:pointer;border:0;padding:0;background:none}
#mascot canvas{width:100%;height:100%;display:block}
.bubble{position:fixed;right:96px;bottom:84px;z-index:15;max-width:230px;background:#fff;color:var(--ink);font-weight:800;font-size:15px;padding:10px 14px;border-radius:18px 18px 4px 18px;box-shadow:0 8px 24px rgba(20,60,110,.25);opacity:0;transform:translateY(8px) scale(.9);transition:opacity .3s,transform .3s cubic-bezier(.3,1.7,.5,1);pointer-events:none}
.bubble.show{opacity:1;transform:none}
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:14}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s cubic-bezier(.2,1.2,.4,1)}.reveal.in{opacity:1;transform:none}

@media (max-width:900px){.hero{grid-template-columns:1fr;text-align:center}.lead{margin-left:auto;margin-right:auto}.cta{justify-content:center}
.desktop-nav a:not(.lang){display:none}.mobile-menu{display:block}
.facts{grid-template-columns:repeat(2,1fr)}.phases{grid-template-columns:1fr}.phase{display:grid;grid-template-columns:150px 1fr;align-items:center}
.grid{grid-template-columns:repeat(2,1fr);gap:12px}.card{padding:14px 14px 16px}.card h3{font-size:19px}.card p{font-size:15px}
.two{grid-template-columns:1fr}.demo{grid-template-columns:1fr;text-align:center}.demo-text ul{display:inline-block;text-align:left}
.shot-nav{width:46px;height:46px}.shot-nav.prev{left:2px}.shot-nav.next{right:2px}#mascot{width:54px;height:66px}.bubble{right:62px;bottom:52px;max-width:200px;font-size:14px}}
@media (max-width:420px){.brand b{font-size:23px}.brand img{width:40px;height:40px}.phase{grid-template-columns:110px 1fr}.btn{font-size:17px;padding:14px 20px}.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}