/* Mechs Tape — one-page site. Palette pulled from the game's dusk-amber art. */
:root{
  --bg:#1b1410;          /* deep wasteland night-brown */
  --panel:#241a13;       /* card */
  --amber:#e3a55f;       /* dusk sky / CTA */
  --amber-deep:#d2873f;
  --cream:#f2e4cb;       /* title + body high */
  --muted:#c2ad8d;       /* secondary text */
  --crt:#7fd6a8;         /* CRT-green accent */
  --line:#3a2c20;        /* hairlines */
  --maxw:880px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--cream);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; image-rendering:pixelated}
main{max-width:var(--maxw); margin:0 auto; padding:0 20px 64px}
a{color:var(--amber)}

/* CRT veil */
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.35;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}

/* HERO */
.hero{padding:40px 0 28px; text-align:center}
.hero-art{
  width:100%; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 18px 50px rgba(0,0,0,.55); margin-bottom:28px;
}
.eyebrow{
  font-family:"Press Start 2P",monospace; font-size:10px; letter-spacing:2px;
  color:var(--crt); margin:0 0 14px; text-transform:uppercase;
}
h1{
  font-family:"Press Start 2P",monospace; font-size:clamp(26px,7vw,46px);
  color:var(--cream); margin:0; letter-spacing:1px;
  text-shadow:0 3px 0 var(--amber-deep), 0 4px 14px rgba(0,0,0,.6);
}
.tagline{color:var(--muted); font-size:clamp(15px,2.6vw,19px); margin:14px 0 26px}
.cta{
  display:inline-block; background:var(--amber); color:#241a13; font-weight:800;
  text-decoration:none; padding:15px 30px; border-radius:8px; font-size:18px;
  border:1px solid var(--amber-deep);
  box-shadow:0 6px 0 var(--amber-deep), 0 12px 26px rgba(227,165,95,.25);
  transition:transform .08s ease, box-shadow .08s ease;
}
.cta:hover{transform:translateY(2px); box-shadow:0 4px 0 var(--amber-deep),0 8px 18px rgba(227,165,95,.25)}
.cta-sub{color:var(--muted); font-size:13px; margin:12px 0 0}

/* SHOTS */
.shots{padding:26px 0; border-top:1px solid var(--line); margin-top:8px}
.hook{font-size:clamp(16px,2.6vw,20px); text-align:center; color:var(--cream); max-width:680px; margin:0 auto 24px}
.shot-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.shot-grid img{border:1px solid var(--line); border-radius:6px}
@media(max-width:560px){.shot-grid{grid-template-columns:1fr}}

/* ABOUT */
.about{padding:30px 0; border-top:1px solid var(--line)}
.about h2,.signup h2{font-size:clamp(20px,3.4vw,26px); color:var(--amber); margin:0 0 14px}
.about p{color:var(--muted); max-width:680px}
.about p strong{color:var(--cream)}
.features{list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.features li{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:12px 14px; font-size:15px; color:var(--muted)}
.features li strong{color:var(--cream)}
@media(max-width:560px){.features{grid-template-columns:1fr}}

/* SIGNUP */
.signup{padding:30px 0; border-top:1px solid var(--line); text-align:center}
.signup p{color:var(--muted); margin:0 0 18px}
.signup-form{display:flex; gap:8px; max-width:440px; margin:0 auto}
.signup-form input{
  flex:1; padding:13px 14px; border-radius:6px; border:1px solid var(--line);
  background:var(--panel); color:var(--cream); font-size:15px;
}
.signup-form input::placeholder{color:#7d6b54}
.signup-form button{
  padding:13px 20px; border-radius:6px; border:1px solid var(--amber-deep);
  background:var(--amber); color:#241a13; font-weight:800; font-size:15px; cursor:pointer;
}
@media(max-width:480px){.signup-form{flex-direction:column}}

/* FOOTER */
footer{padding:34px 0 0; border-top:1px solid var(--line); margin-top:30px; text-align:center}
.links{display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-bottom:16px}
.links a{color:var(--cream); text-decoration:none; font-size:15px; border-bottom:1px solid transparent}
.links a:hover{border-bottom-color:var(--amber)}
.fineprint{color:#7d6b54; font-size:12px; margin:0}