:root{--blue:#89CFF0;--bg:#1E2228;--bg2:#262B33;--card:#2C323B;--accent:#FF7A45;--text:#F5F3EE;--muted:#AEB6C0}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
h1,h2,.wordmark,.eyebrow,.steps span{font-family:"Press Start 2P",monospace}
.wordmark{color:var(--blue);font-size:1.1rem}.wordmark b{color:var(--accent)}
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:1rem 5%;background:rgba(30,34,40,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--blue)}
.brand img{height:40px}
nav{display:flex;gap:1.6rem;align-items:center}nav a:hover{color:var(--blue)}
.menu-btn{display:none;background:none;border:0;color:var(--blue);font-size:1.6rem;cursor:pointer}
.btn{display:inline-block;background:var(--accent);color:#1E2228;font-weight:800;padding:.85rem 1.5rem;border-radius:6px;box-shadow:4px 4px 0 var(--blue);transition:.15s;border:0;cursor:pointer;font-size:1rem}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--blue)}
.btn.small{padding:.5rem 1rem}.btn.ghost{background:transparent;color:var(--blue);border:2px solid var(--blue);box-shadow:none}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;padding:6rem 5%;background:radial-gradient(circle at 80% 40%,rgba(137,207,240,.18),transparent 55%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.02) 3px 4px)}
.eyebrow{color:var(--accent);font-size:.8rem;margin-bottom:1rem;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.3}}
h1{font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.35}h1 span{color:var(--blue);display:block;margin-top:.5rem}
.lead{color:var(--muted);font-size:1.15rem;margin:1.5rem 0 2rem;max-width:34rem}
.ctas{display:flex;gap:1rem;flex-wrap:wrap}
.hero-art{display:flex;justify-content:center}
.pad{width:300px;height:170px;background:var(--blue);border-radius:80px;position:relative;box-shadow:10px 10px 0 var(--accent)}
.dpad{position:absolute;left:55px;top:55px;width:60px;height:60px;background:linear-gradient(var(--bg),var(--bg)) center/20px 60px no-repeat,linear-gradient(var(--bg),var(--bg)) center/60px 20px no-repeat}
.ab{position:absolute;right:50px;top:60px;display:flex;gap:14px}.ab i{width:32px;height:32px;border-radius:50%;background:var(--accent)}.ab i+i{margin-top:-22px}
.section{padding:5rem 5%}.section.alt{background:var(--bg2)}
h2{font-size:clamp(1.2rem,2.5vw,1.7rem);color:var(--blue);margin-bottom:2rem}h2::after{content:"";display:block;width:60px;height:4px;background:var(--accent);margin-top:1rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}
.card{background:var(--card);padding:2rem;border-radius:10px;border-top:4px solid var(--blue);transition:.2s}.card:hover{transform:translateY(-4px);border-top-color:var(--accent)}
.card .icon{font-size:2rem}.card h3{margin:.6rem 0}.card p,.steps p,.sub,.about p,.contact p{color:var(--muted)}
.note{margin-top:1.5rem;color:var(--muted);font-style:italic}
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
.steps span{display:inline-grid;place-items:center;width:48px;height:48px;background:var(--accent);color:var(--bg);border-radius:6px;margin-bottom:1rem}
.sub{margin:-1rem 0 1.5rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ph{aspect-ratio:4/3;border:2px dashed var(--blue);border-radius:10px;display:grid;place-items:center;color:var(--blue);background:rgba(137,207,240,.06)}
.about{max-width:48rem}.about p+p{margin-top:1rem}
.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:3rem}
.info{list-style:none;margin-top:1.5rem}.info li{margin:.6rem 0}
form{display:grid;gap:1rem;background:var(--card);padding:2rem;border-radius:10px}
label{display:grid;gap:.4rem;font-weight:600;font-size:.9rem}
input,select,textarea{background:var(--bg);color:var(--text);border:2px solid #3a414c;border-radius:6px;padding:.7rem;font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
footer{text-align:center;padding:2rem;color:var(--muted);border-top:2px solid var(--blue);font-size:.9rem}footer .wordmark{font-size:.8rem}
@media(max-width:800px){
 .menu-btn{display:block}
 nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);padding:1.5rem;border-bottom:2px solid var(--blue)}
 body.open nav{display:flex}
 .hero,.contact{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.hero{padding:4rem 5%}.pad{transform:scale(.8)}
}
.brand{display:flex;align-items:center}.brand img.nav-logo{height:40px;width:auto;display:block}
.hero-logo{display:block;width:min(100%,520px);height:auto;margin-bottom:2rem;filter:drop-shadow(5px 5px 0 rgba(255,122,69,.85))}
.foot-logo{height:20px;vertical-align:middle;opacity:.85;margin-right:.3rem}
.info a{color:var(--blue)}
.socials{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.socials a{border:2px solid var(--blue);color:var(--blue);padding:.3rem .75rem;border-radius:999px;font-size:.85rem;font-weight:600;transition:.15s}
.socials a:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.socials.foot{justify-content:center;margin-top:1rem}
.card p.live{margin-top:.8rem;color:var(--text);font-weight:600}.live a{color:var(--accent);text-decoration:underline}
.about p.mission{color:var(--blue);font-weight:600;font-size:1.1rem}
.note a{color:var(--accent);text-decoration:underline}