@font-face{font-family:"Lilita One";src:url(fonts/lilita-one-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin.woff2) format("woff2");font-weight:200 1000;font-display:swap}
:root{--sky:#3fb1ff;--sky2:#8fd8ff;--navy:#13203f;--ink:#1d2a4a;--sun:#ffc928;--sun2:#ffb000;--red:#e8414b;--blue:#2f6bff;--cream:#fff8ea;--white:#fff;--r:22px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:600;color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,.display{font-family:"Lilita One",Nunito,system-ui,sans-serif;font-weight:400;letter-spacing:.5px;line-height:1.05;margin:0}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px;border-radius:8px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(19,32,63,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand-mark{width:38px;height:38px;border-radius:10px;border:2px solid #fff;flex:none}
.brand-wordmark{height:28px;width:auto;max-width:min(150px,42vw)}
.nav ul{display:none;list-style:none;margin:0;padding:0;gap:26px}
.nav ul a{color:#dfe8ff;text-decoration:none;font-weight:800;font-size:15px}
.nav ul a:hover{color:var(--sun)}
@media(min-width:820px){.nav ul{display:flex}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:900;font-size:17px;text-decoration:none;border:3px solid var(--navy);box-shadow:0 5px 0 var(--navy);transition:transform .12s ease,box-shadow .12s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--navy)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--navy)}
.btn svg{width:22px;height:22px;flex:none}
.btn-steam{background:var(--sun);color:var(--navy)}
.btn-discord{background:#5865f2;color:#fff}
.btn-soon{cursor:default;user-select:none}.btn-soon:hover,.btn-soon:active{transform:none;box-shadow:0 5px 0 var(--navy)}
.btn-sm{padding:9px 16px;font-size:15px;border-width:2px;box-shadow:0 3px 0 #0b1328}
.btn-sm:hover{box-shadow:0 5px 0 #0b1328}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 70%,#c9efff 100%);color:var(--navy);padding:22px 0 0}
@media(max-width:520px){.ctas .btn{flex:1 1 100%}.eyebrow li{font-size:12px;padding:5px 10px}}
.cloud{position:absolute;background:#fff;border-radius:999px;opacity:.9;filter:blur(.3px)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud.c1{width:180px;height:50px;top:12%;left:-40px;animation:drift 38s linear infinite}
.cloud.c1::before{width:80px;height:80px;top:-40px;left:30px}.cloud.c1::after{width:60px;height:60px;top:-26px;left:95px}
.cloud.c2{width:140px;height:40px;top:58%;right:-30px;animation:drift 46s linear infinite reverse}
.cloud.c2::before{width:64px;height:64px;top:-32px;left:22px}.cloud.c2::after{width:48px;height:48px;top:-20px;left:72px}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(60px)}}
.hero-grid{position:relative;display:grid;gap:22px;align-items:center;padding-bottom:70px}
.hero-art{position:relative;justify-self:center;width:min(280px,72vw)}
.hero-art img{width:100%;height:auto;border-radius:32px;border:5px solid var(--navy);box-shadow:0 14px 0 rgba(19,32,63,.9),0 30px 60px rgba(19,32,63,.35);transform:rotate(-2.5deg);animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(-2.5deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-10px)}}
.eyebrow{display:inline-flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:0;list-style:none}
.eyebrow li{background:var(--navy);color:#fff;font-weight:900;font-size:13px;letter-spacing:.6px;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.hero h1{margin:0 0 2px;line-height:0}
.hero h1 picture,.hero h1 img{display:block;width:min(440px,100%);height:auto;filter:drop-shadow(0 6px 0 rgba(19,32,63,.28))}
@media(min-width:900px){.hero h1 picture,.hero h1 img{width:min(480px,100%)}}
.tagline{font-family:"Lilita One",sans-serif;font-size:clamp(24px,5.5vw,36px);margin:14px 0 10px;color:var(--navy)}
.tagline span{background:var(--sun);padding:0 10px;border-radius:10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero p.lead{font-size:18px;max-width:34ch;margin:0 0 24px;color:#1b2b52}
.ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cta-note{font-size:14px;color:#24345e;margin:12px 0 0}
.wave{display:block;width:100%;height:60px;margin-top:-1px}
@media(min-width:900px){
 .hero{padding-top:60px}
 .hero-grid{grid-template-columns:1.05fr .95fr;gap:40px;padding-bottom:90px}
 .hero-art{order:2;width:min(500px,100%)}
}

/* sections */
section{padding:72px 0}
.kicker{font-weight:900;color:var(--red);text-transform:uppercase;letter-spacing:1.5px;font-size:14px;margin:0 0 8px}
h2{font-size:clamp(34px,6vw,54px);color:var(--navy)}
.pitch{text-align:center}
.pitch p{font-size:clamp(18px,2.4vw,22px);max-width:720px;margin:18px auto 0}
.vs{display:flex;justify-content:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.chip{font-family:"Lilita One",sans-serif;font-size:20px;color:#fff;padding:8px 18px;border-radius:14px;border:3px solid var(--navy);box-shadow:0 4px 0 var(--navy)}
.chip.p1{background:var(--blue)}.chip.p2{background:var(--red)}

.features{background:var(--navy);color:#e6edff}
.features h2{color:#fff}
.feat-grid{display:grid;gap:18px;margin-top:34px}
.feat{background:#1c2c55;border:3px solid #2c3f73;border-radius:var(--r);padding:24px;position:relative;overflow:hidden}
.feat .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:28px;margin-bottom:14px;border:3px solid #0b1328}
.feat:nth-child(1) .ic{background:var(--sun)}.feat:nth-child(2) .ic{background:var(--red)}.feat:nth-child(3) .ic{background:#33c27a}.feat:nth-child(4) .ic{background:var(--blue)}
.feat h3{font-size:26px;color:#fff;margin-bottom:6px}
.feat p{margin:0;color:#c9d5f5}
@media(min-width:640px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.feat-grid{grid-template-columns:repeat(4,1fr)}}

.howto{background:linear-gradient(180deg,#fff3d1,var(--cream))}
.howto figure{margin:30px auto 0;max-width:920px}
.howto img{width:100%;height:auto;border-radius:var(--r)}
.howto figcaption{text-align:center;margin-top:12px;color:#5a6688;font-size:15px}

.gallery{display:grid;gap:14px;margin-top:30px;grid-template-columns:1fr 1fr}
.gallery a,.gallery .clip{display:block;border-radius:18px;overflow:hidden;border:3px solid var(--navy);box-shadow:0 5px 0 var(--navy);background:#0b1328;aspect-ratio:4/3}
.gallery img,.gallery video{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gallery a:hover img{transform:scale(1.04)}
.gallery .clip{grid-column:1 / -1}
@media(min-width:900px){.gallery{grid-template-columns:repeat(4,1fr)}.gallery .clip{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}
.wip{font-size:14px;color:#5a6688;margin-top:14px}

.trailer .frame{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:4px solid var(--navy);margin-top:28px}
.trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.join{background:var(--sun);text-align:center}
.join h2{color:var(--navy)}
.join p{max-width:620px;margin:16px auto 26px;font-size:19px;color:#2a2410}
.join .ctas{justify-content:center}
.steam-soon{display:inline-block;margin-top:22px;font-weight:800;background:rgba(255,255,255,.55);border:2px dashed var(--navy);padding:8px 16px;border-radius:12px;font-size:15px}

footer{background:#0b1328;color:#aab6d6;padding:48px 0 36px;font-size:15px}
.foot{display:grid;gap:26px}
.foot h3{color:#fff;font-size:20px;margin-bottom:10px}
.socials{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.socials a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#fff;background:#18244a;border:2px solid #2a3a6c;padding:8px 14px;border-radius:999px;font-weight:800}
.socials a:hover{border-color:var(--sun);color:var(--sun)}
.socials svg{width:18px;height:18px}
.credit a{color:var(--sun);font-weight:900;text-decoration:none}
.legal{margin-top:30px;padding-top:18px;border-top:1px solid #1e2a50;font-size:13px;color:#7783a6}
@media(min-width:800px){.foot{grid-template-columns:1.2fr 1fr 1fr}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}