@font-face{font-family:"Lilita One";src:url(/fonts/lilita-one.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}

:root{
  --teal-900:#04363c;
  --teal-700:#07535b;
  --teal-500:#13888c;
  --glow:#2fd3c8;
  --lime:#b4f02a;
  --lime-soft:#d9f98c;
  --leaf:#1e5a1f;
  --paper:#eff7e2;
  --ink:#12302a;
  --ink-soft:#3d5a52;
  --bandage:#efc9a0;
  --yellow:#ffd640;
  --cyan:#46dcf0;
  --pink:#ff6ebe;
  --display:"Lilita One","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.6 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:.005em;margin:0 0 .5em}
h2{font-size:clamp(2rem,4.6vw,3.1rem);text-wrap:balance}
p{margin:0 0 1em;max-width:62ch}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}
.wrap{width:min(1120px,100% - 2*var(--gutter));margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:var(--ink);padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{left:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7em 1.3em;border-radius:999px;font:700 1rem/1.1 var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.btn:active{transform:translateY(2px)}
.btn-lime{background:var(--lime);color:var(--teal-900);box-shadow:0 4px 0 var(--leaf)}
.btn-lime:hover{background:var(--lime-soft)}
.btn-ghost{background:transparent;color:#e7fbf4;border-color:rgba(231,251,244,.4)}
.btn-ghost:hover{border-color:#e7fbf4}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1f4a40}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4em}

/* header */
.top{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--gutter)}
.brand img{width:clamp(150px,22vw,220px)}
.top nav{display:flex;gap:clamp(14px,2.4vw,28px)}
.top nav a{color:#dff7ef;text-decoration:none;font-weight:700;font-size:1rem;padding:6px 0;border-bottom:2px solid transparent}
.top nav a:hover{border-color:var(--lime)}
@media (max-width:560px){.wide-only{display:none}}

/* hero */
.hero{position:relative;overflow:hidden;color:#e7fbf4;
  background:radial-gradient(ellipse 70% 60% at 68% 52%,#17a3a0 0%,var(--teal-700) 55%,var(--teal-900) 100%);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;
  min-height:min(100svh,860px);padding:120px var(--gutter) 72px}
.hero-copy{max-width:540px;justify-self:end;position:relative;z-index:3}
.hero h1{text-wrap:balance;font-size:clamp(2.7rem,6.4vw,5rem);color:var(--lime);text-shadow:0 4px 0 var(--leaf);margin-bottom:.35em}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);color:#cdeee6}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:96px;text-align:center}
  .hero-copy{justify-self:center;order:2}
  .hero .actions{justify-content:center}
  .lede{margin-inline:auto}
}

/* the stage: phone + apple */
.stage{position:relative;justify-self:center;width:min(440px,92vw);aspect-ratio:440/540}
.phone{position:absolute;left:38%;top:3%;width:54%;aspect-ratio:9/19;transform:translateX(-50%) rotate(-4deg);
  background:#0d2326;border-radius:13% / 6.2%;padding:3.2%;
  box-shadow:0 0 0 2px #2b4c50 inset,0 24px 50px rgba(0,20,24,.55)}
.screen{position:relative;width:100%;height:100%;border-radius:10.5% / 5%;overflow:hidden;
  background:linear-gradient(160deg,#10292d 0%,#050f11 60%,#0b1d20 100%)}
.screen::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.1) 0 18%,transparent 18% 100%);pointer-events:none}
.notch{position:absolute;top:4.6%;left:50%;width:30%;height:2.6%;transform:translateX(-50%);background:#0d2326;border-radius:99px}
.ghost{position:absolute;left:50%;top:22%;width:92%;transform:translateX(-50%);filter:brightness(.28) saturate(.7) blur(1px);opacity:.9}
.cracks{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cracks path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px rgba(180,255,250,.9))}
.hole{opacity:0;fill:#010405;stroke:#e9fffb;stroke-width:1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(180,255,250,.8))}
.stage.play .hole{animation:appear .05s 1.3s forwards}
@keyframes appear{to{opacity:1}}
.stage.done .hole,.stage:not(.ready) .hole{opacity:1}
.flash{position:absolute;inset:0;background:radial-gradient(circle at 52% 43%,#fff 0 12%,rgba(200,255,250,.6) 30%,transparent 65%);opacity:0}

.apple{position:absolute;left:61%;top:21%;width:66%;padding:0;border:0;background:none;cursor:pointer;transform:translateX(-50%);z-index:2;-webkit-tap-highlight-color:transparent}
.apple img{width:100%;filter:drop-shadow(0 18px 22px rgba(0,25,28,.45))}
.apple:focus-visible{outline-offset:-10px}
.debris{position:absolute;inset:0;pointer-events:none;z-index:3}
.debris i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);opacity:0}
.debris .px{background:var(--c);border-radius:2px;box-shadow:0 0 8px var(--c)}
.debris .gl{background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(160,240,245,.25) 60%,rgba(255,255,255,.6));clip-path:var(--clip);height:calc(var(--s) * 1.4)}
.bubble{position:absolute;right:2%;top:2%;z-index:4;margin:0;max-width:13em;background:#fff;color:var(--ink);font:700 1rem/1.25 var(--body);padding:.6em .9em;border-radius:16px 16px 16px 4px;box-shadow:0 6px 0 rgba(0,0,0,.15);opacity:0;transform:scale(.6);transform-origin:0 100%;transition:opacity .15s,transform .2s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.bubble.show{opacity:1;transform:scale(1)}

/* sequence (class .play on .stage) */
.stage.ready .apple{opacity:0}
.stage.ready .cracks path{stroke-dasharray:1;stroke-dashoffset:1}
.stage.play .phone{animation:tap .32s .35s, tap .32s .85s, thud .5s 1.3s}
.stage.play .c1 path{animation:draw .22s .42s forwards}
.stage.play .c2 path{animation:draw .3s .92s forwards}
.stage.play .flash{animation:flash .5s 1.3s}
.stage.play .ghost{animation:ghostgo .1s 1.32s forwards}
.stage.play .apple{animation:burst .85s 1.3s cubic-bezier(.2,1.5,.45,1) forwards}
.stage.play .debris i{animation:fly var(--d) calc(1.3s + var(--delay)) cubic-bezier(.1,.7,.3,1) forwards}
.stage.done .apple{opacity:1}
.stage.done .ghost{opacity:0}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes tap{0%,100%{translate:0 0}25%{translate:-5px 2px}50%{translate:4px -2px}75%{translate:-2px 1px}}
@keyframes thud{0%{translate:0 0}20%{translate:-9px 6px}45%{translate:8px -4px}70%{translate:-4px 2px}100%{translate:0 0}}
@keyframes flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes ghostgo{to{opacity:0}}
@keyframes burst{
  0%{opacity:1;transform:translateX(-82%) translateY(-6%) scale(.42);filter:brightness(.6)}
  45%{opacity:1;transform:translateX(-46%) translateY(-4%) scale(1.12);filter:brightness(1.1)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);filter:none}}
@keyframes fly{
  0%{opacity:1;transform:translate(0,0) rotate(0) scale(.6)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--r)) scale(1)}}
.apple img{transform-origin:50% 95%}
.apple.poke img{animation:poke .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes poke{0%{transform:scale(1)}30%{transform:scale(1.06,.92) rotate(-3deg)}60%{transform:scale(.97,1.04) rotate(2deg)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .stage.play *{animation:none!important}
  .stage .apple{opacity:1!important}
  .stage .ghost{opacity:0}
  .stage .hole{opacity:1}
  .stage .cracks path{stroke-dashoffset:0!important}
  .apple.poke img{animation:none}
}

/* games */
.games{padding:clamp(64px,9vw,120px) 0}
.games h2{margin-bottom:.8em}
.game{display:grid;grid-template-columns:1.1fr .9fr;border-radius:28px;overflow:hidden;margin-bottom:28px}
.game-info{padding:clamp(24px,4vw,48px)}
.game-icon{width:96px;height:96px;border-radius:22%;box-shadow:0 8px 20px rgba(0,0,0,.18);margin-bottom:20px}
.game-logo{width:auto;max-width:min(320px,100%);margin-bottom:16px}
.game-pitch{font-size:1.15rem}
.game-meta{font-size:.95rem;font-weight:600;opacity:.75}
.game-art img{width:100%;height:100%;object-fit:cover}
.game-rdr{background:#8fc07f;color:#14301c}
.game-rdr .game-logo{max-height:150px}
.game-foldumi{background:#fff;color:#111;border:2px solid #111}
.game-foldumi .game-logo{max-height:56px}
.game-foldumi .btn-dark{background:#111}
.fold-art{display:grid;place-items:center;background:#f3f3f3;padding:24px}
.fold-lines{width:min(280px,80%)}
.fold-lines path{fill:none;stroke:#111;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.fold-lines .hinge{fill:#fff;stroke:#111;stroke-width:4}
.fold-lines .dot{fill:#111}
@media (max-width:760px){
  .game{grid-template-columns:1fr}
  .game-art{max-height:300px}
}

/* studio */
.studio{background:var(--teal-700);color:#e7fbf4;padding:clamp(64px,9vw,110px) 0;overflow:hidden}
.studio h2{color:var(--lime)}
.studio-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,64px);align-items:center}
.studio-mascot{width:min(360px,100%);justify-self:center;filter:drop-shadow(0 18px 24px rgba(0,25,28,.45))}
@media (max-width:760px){.studio-grid{grid-template-columns:1fr}.studio-mascot{width:min(240px,70%)}}

/* follow */
.follow{padding:clamp(56px,8vw,100px) 0 0}
.follow-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:end}
.follow-mascot{width:min(260px,100%);justify-self:center}
.socials{list-style:none;padding:0;margin:1.2em 0 2.5em;display:flex;flex-wrap:wrap;gap:10px}
.socials a{display:inline-flex;min-height:44px;align-items:center;padding:.5em 1.1em;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--ink);text-decoration:none;font-weight:700}
.socials a:hover{background:var(--lime)}
@media (max-width:760px){.follow-grid{grid-template-columns:1fr}.follow-mascot{width:180px}}

/* contact */
.contact{background:var(--lime);padding:clamp(48px,7vw,80px) 0;color:var(--teal-900)}
.contact a{font-weight:700}
.contact p{font-size:1.2rem}
.contact .small{font-size:1rem}

/* footer */
.foot{background:var(--teal-900);color:#bfe3da;padding:40px 0 48px;font-size:.95rem}
.foot-grid{display:grid;gap:16px}
.foot-grid img{width:180px}
.foot nav{display:flex;flex-wrap:wrap;gap:20px}
.foot nav a{color:#e7fbf4;font-weight:700;text-decoration:none}
.foot nav a:hover{text-decoration:underline}
.legal{font-size:.85rem;color:#8fbab0;max-width:80ch}

/* inner pages */
.page-head{background:radial-gradient(ellipse 80% 90% at 70% 30%,#17a3a0 0%,var(--teal-700) 55%,var(--teal-900) 100%);color:#e7fbf4;padding:120px 0 56px}
.page-head h1{font-size:clamp(2.4rem,5.5vw,4rem);color:var(--lime);text-shadow:0 4px 0 var(--leaf)}
.page{padding:56px 0 80px}
.page h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-top:1.4em}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 24px;margin:0}
.facts dt{font-weight:800}
.facts dd{margin:0}
.downloads{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;list-style:none;padding:0}
.downloads li{background:#fff;border-radius:18px;padding:14px;box-shadow:inset 0 0 0 2px #d4e6c4}
.downloads .thumb{aspect-ratio:1;display:grid;place-items:center;border-radius:12px;background:var(--teal-700);margin-bottom:10px;padding:12px}
.downloads .thumb.light{background:#fff;box-shadow:inset 0 0 0 1px #e1ead8}
.downloads .thumb{position:relative;overflow:hidden}
.downloads .thumb img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}
.downloads a{font-weight:700}
.swatches{display:flex;flex-wrap:wrap;gap:14px;list-style:none;padding:0}
.swatches li{width:150px}
.swatches span{display:block;height:84px;border-radius:14px;margin-bottom:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.swatches code{font-size:.9rem}
.notfound{min-height:100svh;display:grid;place-items:center;text-align:center;padding:96px var(--gutter) 48px;background:radial-gradient(ellipse 70% 60% at 50% 45%,#17a3a0 0%,var(--teal-700) 55%,var(--teal-900) 100%);color:#e7fbf4}
.notfound img{width:min(300px,70vw);margin:0 auto 8px}
.notfound h1{font-size:clamp(2.4rem,7vw,4rem);color:var(--lime);text-shadow:0 4px 0 var(--leaf)}
.notfound .actions{justify-content:center}