@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root { --blue:#00dbe7; --cream:#fffefa; --ink:#171717; --silver:#8e8e92; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:Fredoka, ui-rounded, system-ui, sans-serif; font-weight:600; }
main { min-height:100svh; position:relative; overflow:hidden; background:#fff; }
.topbar { position:absolute; top:26px; left:6.1vw; right:6.1vw; display:flex; align-items:center; justify-content:space-between; z-index:2; }
a { color:inherit; text-decoration:none; }
.brand { font-size:clamp(2rem,4.8vw,4.6rem); line-height:.8; letter-spacing:-.08em; font-weight:700; color:var(--ink); text-shadow:0 1px 0 rgba(0,0,0,.07); }
.x-link { font-family:Arial,sans-serif; font-size:clamp(1.2rem,2vw,1.8rem); }
.hero { min-height:calc(100svh - 72px); display:grid; place-items:center; padding:108px 20px 120px; }
.hero-cat { display:block; width:min(42vw,560px); min-width:250px; height:auto; object-fit:contain; filter:drop-shadow(0 13px 0 rgba(0,0,0,.09)); animation:float 4s ease-in-out infinite; }
.pair-float { position:absolute; left:50%; bottom:34%; transform:translate(-50%,50%); display:flex; gap:12px; align-items:center; white-space:nowrap; font-size:clamp(.68rem,1.1vw,1rem); }
.pair-float span, code { background:var(--ink); padding:8px 12px; color:#fff; font:inherit; }
.copy, .launch, .pill { border:0; border-radius:0; color:var(--ink); background:var(--blue); font:600 .82rem Fredoka, sans-serif; padding:8px 13px; cursor:pointer; transition:transform .15s ease, background .15s ease; }
.copy:hover, .launch:hover { transform:translateY(-2px); background:#9df7fa; }
.nav { position:absolute; bottom:25px; left:6.1vw; right:6.1vw; display:flex; justify-content:center; gap:clamp(22px,4vw,54px); font-size:clamp(.8rem,1.25vw,1rem); }
.nav a { transition:opacity .2s; }.nav a:hover,.bottom-nav a:hover { opacity:.65; }
.about { position:relative; min-height:100svh; padding:0 6.1vw 26px; text-align:center; overflow:hidden; background:#fff; }
.peek { width:min(19vw,210px); min-width:115px; display:block; margin:-50px auto -6px; filter:drop-shadow(0 8px 0 rgba(0,0,0,.09)); }
h1 { margin:0 0 11px; font-size:clamp(1.35rem,2.6vw,2.5rem); letter-spacing:-.05em; }
.intro { max-width:640px; margin:0 auto 30px; font-size:clamp(.9rem,1.5vw,1.25rem); line-height:1.45; }
.cards { max-width:820px; margin:auto; display:grid; gap:11px; text-align:left; }
.card { min-height:98px; padding:18px 22px; border:1px solid rgba(23,23,23,.48); background:linear-gradient(135deg,#fff,#f2f2f2); }
h2 { margin:0 0 15px; font-size:clamp(.85rem,1.35vw,1.1rem); letter-spacing:.015em; }
.row { display:flex; gap:10px; align-items:center; }.row code { overflow:auto; white-space:nowrap; }
.launch { display:inline-flex; gap:18px; align-items:center; }.launch span { font-size:1rem; }
.pill { display:inline-block; }.pill strong { color:#007d85; }
.disclaimer { max-width:820px; margin:31px auto 24px; padding:15px 12px; color:#5d5d61; border:1px solid rgba(23,23,23,.18); font-size:clamp(.72rem,1.15vw,.95rem); line-height:1.45; }
.bottom-nav { display:flex; justify-content:center; gap:clamp(22px,4vw,54px); font-size:clamp(.75rem,1.15vw,.95rem); }
@keyframes float { 50% { transform:translateY(-12px) rotate(1deg); } }
@media (max-width:560px) { .hero-cat { width:75vw; } .pair-float { bottom:36%; gap:7px; }.pair-float span,.copy { padding:7px 8px; } .about { padding-left:24px; padding-right:24px; }.peek { margin-top:-25px; }.intro { font-size:.9rem; }.card { padding:15px; }.row { align-items:flex-start; flex-wrap:wrap; } }