:root{
  --blue:#2f5d83;
  --blue-dark:#1f4159;
  --blue-darker:#162d3e;
  --yellow:#f5d76e;
  --yellow-bright:#ffe57a;
  --cream:#fff8e1;
  --ink:#0e1d2a;
  --shadow: 6px 6px 0 var(--blue-darker);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'VT323', ui-monospace, monospace;
  font-size:22px;
  line-height:1.4;
  color:var(--cream);
  background:
    radial-gradient(ellipse at top, #3a6e98 0%, var(--blue) 40%, var(--blue-dark) 100%) fixed;
  min-height:100vh;
  image-rendering:pixelated;
  overflow-x:hidden;
}
.press-start, .nav .brand span, h1, h2, button, .nav-cta{
  font-family:'Press Start 2P', monospace;
  letter-spacing:.5px;
}

/* CRT scanlines */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.12) 0 2px,
    transparent 2px 4px
  );
  mix-blend-mode:multiply;
}

.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  border-bottom:3px solid var(--blue-darker);
}
.brand{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none}
.brand img{image-rendering:pixelated}
.brand span{font-size:12px;color:#fff}
.nav-cta{
  font-size:10px;color:var(--ink);background:var(--yellow);
  padding:10px 14px;text-decoration:none;
  border:3px solid var(--blue-darker);
  box-shadow:4px 4px 0 var(--blue-darker);
  transition:transform .08s, box-shadow .08s;
}
.nav-cta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--blue-darker)}

main{max-width:1080px;margin:0 auto;padding:60px 28px 40px;position:relative}

.hero{position:relative;text-align:center;padding:40px 0 80px}
.tag{
  display:inline-block;font-size:10px;color:var(--blue-darker);
  background:var(--yellow);padding:8px 12px;
  border:3px solid var(--blue-darker);
  box-shadow:var(--shadow);
  margin-bottom:32px;
  animation:blink 1.6s steps(2) infinite;
}
@keyframes blink{50%{opacity:.55}}

h1{
  font-size:clamp(22px, 4.2vw, 44px);
  line-height:1.35;
  margin:0 0 24px;
  color:#fff;
  text-shadow:4px 4px 0 var(--blue-darker);
}
.hl{color:var(--yellow-bright)}

.lead{
  max-width:620px;margin:0 auto 36px;
  font-size:24px;color:#e9f2fa;
}

.cta-form{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  max-width:560px;margin:0 auto;
}
.cta-form input{
  flex:1 1 240px;
  font-family:'VT323',monospace;
  font-size:22px;
  padding:14px 16px;
  background:var(--cream);color:var(--ink);
  border:3px solid var(--blue-darker);
  box-shadow:var(--shadow);
  outline:none;
}
.cta-form input:focus{box-shadow:3px 3px 0 var(--yellow)}
.cta-form button{
  font-size:12px;color:var(--ink);
  background:var(--yellow);
  padding:14px 22px;cursor:pointer;
  border:3px solid var(--blue-darker);
  box-shadow:var(--shadow);
  transition:transform .08s, box-shadow .08s;
}
.cta-form button:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--blue-darker)}
.micro{font-size:18px;opacity:.75;margin-top:14px}

.hero-art{
  position:absolute;inset:auto 0 -10px 0;
  display:flex;justify-content:center;pointer-events:none;
  opacity:.18;
}
.hero-art img{width:280px;height:auto;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:720px;margin:20px auto 80px;
  border-top:3px dashed rgba(255,255,255,.25);
  border-bottom:3px dashed rgba(255,255,255,.25);
  padding:24px 0;
}
.stats div{text-align:center}
.stats b{
  display:block;font-family:'Press Start 2P',monospace;
  font-size:20px;color:var(--yellow);margin-bottom:8px;
}
.stats span{font-size:18px;opacity:.8;text-transform:uppercase;letter-spacing:1px}

.contact{
  text-align:center;
  background:var(--blue-darker);
  border:3px solid #000;
  box-shadow:8px 8px 0 rgba(0,0,0,.35);
  padding:48px 24px;
  margin-bottom:60px;
}
.contact h2{font-size:18px;color:var(--yellow);margin:0 0 12px;animation:blink 1.4s steps(2) infinite}
.contact p{margin:0 0 24px;font-size:22px}
.links{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.links a{
  display:inline-block;color:var(--cream);text-decoration:none;
  background:transparent;border:3px solid var(--cream);
  padding:10px 16px;font-size:18px;
  transition:all .1s;
}
.links a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

footer{
  text-align:center;padding:24px;font-size:18px;
  color:rgba(255,255,255,.6);
  border-top:3px solid var(--blue-darker);
}

@media (max-width:520px){
  .nav{padding:14px 18px}
  .brand span{font-size:10px}
  .nav-cta{font-size:8px;padding:8px 10px}
  main{padding:40px 18px}
  .stats{grid-template-columns:1fr;gap:8px}
}