:root{
  --navy:#0e2a40;--navy2:#13364f;--deep:#0a1f30;--cream:#fff3d6;--sky:#43c4f2;--sky2:#9fe3ff;
  --orange:#ffad2a;--orange2:#ff8a1f;--ink:#e9f4fa;--muted:#a9c3d3;--line:#22506f;--grass:#7ccf3d;
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--deep);color:var(--ink);font:17px/1.65 "Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:var(--sky2)}
img,video{max-width:100%;display:block}

/* chunky logo-style lettering */
.chunky,h1,h2{font-family:"Luckiest Guy",system-ui;font-weight:400;letter-spacing:1px;line-height:1.05;color:var(--cream);
  -webkit-text-stroke:2px var(--navy);paint-order:stroke fill;text-shadow:0 4px 0 var(--navy),0 6px 14px rgba(0,0,0,.35)}

/* top bar */
.top{position:absolute;top:0;left:0;right:0;z-index:5}
.page .top{position:relative;background:var(--navy);border-bottom:4px solid var(--deep)}
.bar{max-width:1180px;margin:auto;padding:14px 20px;display:flex;align-items:center;gap:16px}
.bar .mini{height:44px;width:auto;margin-right:auto}
.bar nav{display:flex;gap:6px;flex-wrap:wrap}
.bar nav a{color:var(--cream);text-decoration:none;font-family:"Luckiest Guy",system-ui;font-size:18px;letter-spacing:.5px;padding:8px 12px;border-radius:10px;
  text-shadow:0 2px 0 var(--navy)}
.bar nav a:hover{background:rgba(255,255,255,.12)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Luckiest Guy",system-ui;font-size:22px;letter-spacing:1px;color:var(--navy);
  background:linear-gradient(var(--orange),var(--orange2));padding:16px 30px 13px;border-radius:16px;text-decoration:none;border:3px solid var(--navy);
  box-shadow:0 6px 0 var(--navy);transition:transform .12s,box-shadow .12s;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--navy)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--navy)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn svg{width:26px;height:26px}
.btn.alt{background:linear-gradient(#5fd3ff,#2fa9dc)}

/* hero */
.hero{position:relative;min-height:min(100svh,980px);display:grid;place-items:center;text-align:center;overflow:hidden;padding:110px 20px 140px}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 50% 40%,rgba(10,31,48,0) 30%,rgba(10,31,48,.45) 100%),linear-gradient(rgba(10,31,48,.35),rgba(10,31,48,0) 25%,rgba(10,31,48,0) 60%,rgba(10,31,48,.85))}
.hero .logo{width:min(640px,88vw);height:auto;margin:0 auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));animation:bob 4s ease-in-out infinite}
.hero .tag{font-family:"Luckiest Guy",system-ui;font-size:clamp(22px,3.4vw,34px);color:var(--cream);margin:10px 0 26px;
  -webkit-text-stroke:1.5px var(--navy);paint-order:stroke fill;text-shadow:0 3px 0 var(--navy)}
.hero .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .soon{margin-top:16px;color:var(--cream);font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.scroll{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);width:34px;height:34px;color:var(--cream);opacity:.85;animation:nudge 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes nudge{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* wave edges */
.wave{display:block;width:100%;height:70px;margin-top:-69px;position:relative;z-index:1}
.wave path{fill:var(--deep)}
.wave.top-of-light path{fill:var(--navy)}

/* sections */
.section{position:relative;padding:40px 20px 70px}
.section.light{background:var(--navy)}
.wrap{max-width:1180px;margin:auto}
.intro{text-align:center;max-width:760px;margin:0 auto 30px}
.intro h2{font-size:clamp(34px,5vw,56px);margin:.2em 0 .3em}
.intro p{font-size:19px;color:var(--muted)}

.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center;margin:64px 0}
.feature:nth-child(even){grid-template-columns:1fr 1.25fr}
.feature>*{min-width:0}
.feature:nth-child(even) .clip{order:2}
.feature h2{font-size:clamp(30px,3.8vw,46px);margin:0 0 .35em}
.feature p{margin:0;font-size:18px;color:var(--ink)}
.clip{position:relative;border-radius:22px;overflow:hidden;border:4px solid var(--navy);box-shadow:0 10px 0 var(--navy),0 18px 40px rgba(0,0,0,.45);
  aspect-ratio:16/9;background:#000;transform:rotate(-1.2deg);transition:transform .25s}
.feature:nth-child(even) .clip{transform:rotate(1.2deg)}
.clip:hover{transform:rotate(0) scale(1.02)}
.clip video{width:100%;height:100%;object-fit:cover}
.light .clip{border-color:var(--deep);box-shadow:0 10px 0 var(--deep),0 18px 40px rgba(0,0,0,.45)}

.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:10px 0 0;padding:0;list-style:none}
.chips li{background:var(--navy2);border:2px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:800;color:var(--cream)}
.light .chips li{background:var(--deep)}

.final{text-align:center;padding:90px 20px 100px;background:
  radial-gradient(ellipse at 50% 120%,rgba(67,196,242,.35),transparent 60%),var(--deep)}
.final h2{font-size:clamp(36px,6vw,70px);margin:0 0 24px}

/* plain pages (support, privacy, eula) */
.doc{max-width:820px;margin:auto;padding:36px 20px 70px}
.doc h1{font-size:clamp(36px,6vw,54px);margin:.2em 0 .4em}
.doc h2{font-size:28px;margin:1.6em 0 .4em;-webkit-text-stroke:1.5px var(--navy);text-shadow:0 3px 0 var(--navy)}
.card{background:var(--navy);border:3px solid var(--line);border-radius:18px;padding:22px;margin:18px 0}
label{display:block;font-weight:800;margin:14px 0 6px;color:var(--cream)}
input,select,textarea{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:var(--deep);color:var(--ink);font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sky)}
textarea{min-height:170px;resize:vertical}
.muted{color:var(--muted);font-size:15px}
code{background:var(--deep);padding:2px 6px;border-radius:6px;font-size:.92em}
.hp{position:absolute;left:-9999px}
details{border-bottom:2px solid var(--line);padding:12px 0}summary{font-weight:800;cursor:pointer;color:var(--cream)}
#status{font-weight:800;min-height:1.6em}

footer{background:#071723;color:var(--muted);text-align:center;padding:34px 20px;font-size:15px}
footer .mini{height:54px;width:auto;margin:0 auto 12px;opacity:.95}
footer a{color:var(--muted);margin:0 10px}

@media (max-width:820px){
  .feature,.feature:nth-child(even){grid-template-columns:1fr;gap:22px;margin:44px 0}
  .feature:nth-child(even) .clip{order:0}
  .bar nav a{font-size:16px;padding:6px 8px}
  .bar .mini{height:36px}
  .btn{font-size:19px;padding:14px 22px 11px}
}
@media (prefers-reduced-motion:reduce){.hero .logo,.scroll{animation:none}.clip,.feature:nth-child(even) .clip{transform:none}}