/* ============================================================
   MECHS TAPE — cassette-futurism squeeze page
   Palette pulled from the game's dusk-amber pixel art.
   ============================================================ */
:root{
  --bg:#160f0b;            /* deep wasteland night */
  --bg-2:#1f1510;
  --panel:#241a13;         /* card / deck body */
  --panel-2:#2c2017;
  --amber:#e3a55f;         /* dusk sky / CTA */
  --amber-hi:#f4c07e;
  --amber-deep:#c47c34;
  --cream:#f4e7cf;         /* title + body high */
  --muted:#c2ad8d;         /* secondary text */
  --muted-dim:#8c7a60;
  --crt:#7fd6a8;           /* CRT-green accent */
  --crt-dim:#4f9a73;
  --line:#3a2c20;          /* hairlines */
  --line-hi:#54402e;
  --red:#e0654a;           /* REC dot */
  --shadow:0 22px 60px rgba(0,0,0,.6);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:var(--cream);
  font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;image-rendering:pixelated}
.mono{font-family:"Space Mono",ui-monospace,monospace}
.pixel{font-family:"Press Start 2P",monospace;line-height:1.1}

/* ============================================================
   AMBIENT BACKGROUND — dusk gradient + sun glow + parallax
   ============================================================ */
.scene{position:fixed;inset:0;z-index:-3;overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(244,192,126,.22), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, #0d0907 0%, transparent 60%),
    linear-gradient(180deg,#2a1d13 0%, #1d140e 42%, #140d09 100%);
}
.sun{position:absolute;top:8%;left:74%;width:46vmin;height:46vmin;border-radius:50%;
  background:radial-gradient(circle, rgba(255,236,200,.9) 0%, rgba(244,192,126,.45) 30%, transparent 68%);
  filter:blur(2px);will-change:transform;transition:transform .4s var(--ease);}
.ridge{position:absolute;left:-5%;right:-5%;bottom:0;height:38vh;
  background:linear-gradient(180deg, transparent, rgba(13,9,7,.0) 30%, #120c08 100%);
  will-change:transform;}
.ridge::before,.ridge::after{content:"";position:absolute;left:-5%;right:-5%;bottom:0;
  background-repeat:repeat-x;background-position:bottom;opacity:.5;}
.ridge::before{height:30vh;
  background:radial-gradient(60% 120% at 20% 100%, #1c130d 60%, transparent 62%),
             radial-gradient(70% 130% at 60% 100%, #1a110c 60%, transparent 62%),
             radial-gradient(50% 120% at 92% 100%, #1c130d 60%, transparent 62%);}

/* CRT veil + vignette + grain (all pointer-transparent, on top) */
.crt-veil,.vignette,.grain{position:fixed;inset:0;pointer-events:none;z-index:60;}
.crt-veil{opacity:.5;mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  animation:scan 8s linear infinite;}
@keyframes scan{to{background-position:0 240px}}
.vignette{box-shadow:inset 0 0 18vmin 6vmin rgba(0,0,0,.55);}
.grain{opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,40px);}

/* TOP BAR */
.topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:20px 0 8px;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:1.5px;
  color:var(--muted);text-transform:uppercase;}
.brand .knob{width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--amber-hi), var(--amber-deep) 70%);
  box-shadow:0 0 0 2px #1a120c, 0 0 12px rgba(227,165,95,.5);}
.status{display:flex;align-items:center;gap:18px;font-size:11px;letter-spacing:1.5px;color:var(--muted-dim);}
.status .seg{display:flex;align-items:center;gap:8px;}
.rec{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red);
  box-shadow:0 0 10px var(--red);animation:blink 1.4s steps(1) infinite;}
@keyframes blink{50%{opacity:.2}}
.counter{color:var(--crt);text-shadow:0 0 8px rgba(127,214,168,.5);}

/* ============================================================
   DECK — main two-column hero
   ============================================================ */
.deck{position:relative;z-index:5;display:grid;
  grid-template-columns:1.05fr 1.25fr;gap:clamp(28px,4vw,64px);align-items:center;
  min-height:calc(100svh - 150px);padding:18px 0 30px;}

/* ---- LEFT: pitch ---- */
.pitch{max-width:540px;}
.eyebrow{font-size:10px;letter-spacing:3px;color:var(--crt);text-transform:uppercase;
  margin:0 0 18px;display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--crt-dim);}
.logo{font-size:clamp(34px,6.4vw,68px);color:var(--cream);margin:0;letter-spacing:1px;
  text-shadow:0 3px 0 var(--amber-deep), 0 5px 0 rgba(150,86,30,.5), 0 10px 26px rgba(0,0,0,.7);
  animation:flick 9s linear infinite;}
@keyframes flick{0%,96%,100%{opacity:1}97%{opacity:.78}98%{opacity:1}98.5%{opacity:.86}}
.tagline{font-size:clamp(17px,2.1vw,22px);color:var(--amber-hi);margin:22px 0 14px;font-weight:600;}
.hook{font-size:clamp(14px,1.5vw,16px);color:var(--muted);margin:0 0 30px;max-width:460px;}
.hook b{color:var(--cream);font-weight:600;}

/* CTA */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;}
.cta{position:relative;display:inline-flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,var(--amber-hi),var(--amber) 55%,var(--amber-deep));
  color:#2a1809;font-weight:700;text-decoration:none;
  padding:17px 30px 18px;border-radius:12px;font-size:18px;letter-spacing:.2px;
  border:1px solid #f6cd92;
  box-shadow:0 7px 0 var(--amber-deep), 0 16px 34px rgba(227,165,95,.34), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .1s var(--ease), box-shadow .1s var(--ease);}
.cta:hover{transform:translateY(2px);
  box-shadow:0 5px 0 var(--amber-deep), 0 12px 26px rgba(227,165,95,.4), inset 0 1px 0 rgba(255,255,255,.5);}
.cta:active{transform:translateY(7px);
  box-shadow:0 0 0 var(--amber-deep), 0 6px 14px rgba(227,165,95,.3), inset 0 1px 0 rgba(255,255,255,.4);}
.cta .tri{font-size:15px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35));}
.cta::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(244,192,126,.6);animation:halo 3.4s var(--ease) infinite;}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(244,192,126,.45)}70%,100%{box-shadow:0 0 0 16px rgba(244,192,126,0)}}
.cta-sub{font-size:12px;color:var(--muted-dim);letter-spacing:.4px;margin:0;}
.cta-sub b{color:var(--muted);font-weight:600;}

/* feature chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;padding:0;list-style:none;}
.chips li{font-size:11px;letter-spacing:.6px;color:var(--muted);white-space:nowrap;flex:0 0 auto;
  background:rgba(44,32,23,.6);border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;display:flex;align-items:center;gap:7px;backdrop-filter:blur(2px);}
.chips li i{width:6px;height:6px;border-radius:50%;background:var(--crt);box-shadow:0 0 8px var(--crt-dim);font-style:normal;}

/* ---- RIGHT: stage (CRT screen + cassette deck) ---- */
.stage{position:relative;perspective:1400px;}
.tv{position:relative;border-radius:18px;padding:16px 16px 14px;
  background:linear-gradient(160deg,#33261b,#211711);
  border:1px solid var(--line-hi);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  transform:rotateY(-4deg) rotateX(2deg);transition:transform .5s var(--ease);will-change:transform;}
.screen{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:#0c0906;border:1px solid #0a0705;
  box-shadow:inset 0 0 40px rgba(0,0,0,.7), inset 0 0 0 2px rgba(0,0,0,.5);}
.screen .frame{position:absolute;inset:0;}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease), transform 6s linear;}
.screen img.on{opacity:1;transform:scale(1.0);}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
             radial-gradient(120% 100% at 50% 0%, transparent 60%, rgba(0,0,0,.45));
  border-radius:10px;}
.screen .glass{position:absolute;inset:0;z-index:5;border-radius:10px;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.1), transparent 28%);}
/* channel static flash */
.static{position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");}
.screen.switching .static{animation:zap .42s steps(2) 1;}
@keyframes zap{0%{opacity:.0}20%{opacity:.85}60%{opacity:.5}100%{opacity:0}}

/* on-screen OSD */
.osd{position:absolute;left:14px;top:12px;z-index:7;display:flex;align-items:center;gap:9px;
  font-size:9px;letter-spacing:1.5px;color:var(--crt);text-shadow:0 0 8px rgba(127,214,168,.6);}
.osd .dot{width:7px;height:7px;border-radius:50%;background:var(--crt);box-shadow:0 0 8px var(--crt);}
.osd-label{position:absolute;right:14px;bottom:12px;z-index:7;font-size:9px;letter-spacing:1.5px;
  color:var(--cream);text-shadow:0 1px 4px #000;opacity:.92;}

/* channel selector */
.channels{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px;}
.chan-btns{display:flex;gap:8px;}
.chan{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:1px;color:var(--muted-dim);
  background:#1b130d;border:1px solid var(--line);border-radius:7px;padding:8px 11px;cursor:pointer;
  transition:all .18s var(--ease);}
.chan:hover{color:var(--cream);border-color:var(--line-hi);}
.chan.active{color:#1b130d;background:var(--crt);border-color:var(--crt);
  box-shadow:0 0 16px rgba(127,214,168,.4);font-weight:700;}
.autoplay{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1px;color:var(--muted-dim);}
.autoplay .bar{width:60px;height:3px;border-radius:2px;background:var(--line);overflow:hidden;}
.autoplay .bar i{display:block;height:100%;width:0;background:var(--crt);box-shadow:0 0 8px var(--crt-dim);}

/* ---- CASSETTE DECK bar ---- */
.cassette{margin-top:16px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  background:linear-gradient(180deg,#2c2017,#201610);border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.4);}
.reel{position:relative;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #1a120c 0 30%, #36281c 31% 46%, #1a120c 47%);
  border:2px solid #4a3624;box-shadow:inset 0 0 8px rgba(0,0,0,.7);animation:spin 2.4s linear infinite;}
.reel.paused{animation-play-state:paused;}
.reel::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(3px 3px at 50% 16%, #5a4430 60%, transparent 62%),
    radial-gradient(3px 3px at 79% 64%, #5a4430 60%, transparent 62%),
    radial-gradient(3px 3px at 21% 64%, #5a4430 60%, transparent 62%);}
.reel::after{content:"";position:absolute;inset:38%;border-radius:50%;background:var(--amber-deep);
  box-shadow:0 0 0 3px #2a1d12;}
@keyframes spin{to{transform:rotate(360deg)}}
.tape-meta{text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;}
.tape-title{font-size:11px;letter-spacing:2px;color:var(--cream);text-transform:uppercase;}
.tape-side{font-size:9px;letter-spacing:2px;color:var(--amber);}
/* VU meter */
.vu{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:22px;}
.vu i{width:4px;background:linear-gradient(180deg,var(--crt),var(--crt-dim));border-radius:1px;
  height:30%;animation:vu 1.1s ease-in-out infinite;transform-origin:bottom;}
.vu i:nth-child(2){animation-delay:.15s}.vu i:nth-child(3){animation-delay:.32s}
.vu i:nth-child(4){animation-delay:.08s}.vu i:nth-child(5){animation-delay:.24s}
.vu i:nth-child(6){animation-delay:.4s}.vu i:nth-child(7){animation-delay:.18s}
@keyframes vu{0%,100%{height:22%}50%{height:95%}}

/* ============================================================
   SIGNAL — email capture (Kit), folded back into the redesign
   ============================================================ */
.signal{position:relative;z-index:5;display:grid;grid-template-columns:1fr 1.1fr;
  gap:clamp(20px,4vw,48px);align-items:center;
  background:linear-gradient(180deg,#221913,#1a120c);border:1px solid var(--line);
  border-radius:16px;padding:clamp(22px,3.4vw,38px);margin:8px 0 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 16px 40px rgba(0,0,0,.4);}
.signal-copy h2{font-size:clamp(20px,2.6vw,28px);color:var(--cream);margin:6px 0 10px;letter-spacing:.3px;}
.signal-sub{font-size:14px;color:var(--muted);margin:0;max-width:420px;}
.kit-form{min-width:0;}
/* Nudge the Kit embed toward the theme; final styling lives in the Kit dashboard. */
.kit-form input[type="email"],.kit-form input[type="text"]{
  background:#160f0b !important;color:var(--cream) !important;border:1px solid var(--line-hi) !important;border-radius:9px !important;}
.kit-form .formkit-input::placeholder{color:var(--muted-dim) !important;}
.kit-form button,.kit-form .formkit-submit{
  background:linear-gradient(180deg,var(--amber-hi),var(--amber-deep)) !important;color:#2a1809 !important;
  border:1px solid #f6cd92 !important;border-radius:9px !important;font-weight:700 !important;}
@media(max-width:780px){.signal{grid-template-columns:1fr;}}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:14px;padding:14px 0 26px;border-top:1px solid var(--line);
  margin-top:6px;}
.foot nav{display:flex;flex-wrap:wrap;gap:20px;}
.foot a{color:var(--muted);text-decoration:none;font-size:13px;letter-spacing:.3px;
  border-bottom:1px solid transparent;transition:color .15s, border-color .15s;}
.foot a:hover{color:var(--cream);border-bottom-color:var(--amber);}
.fineprint{font-size:11px;color:var(--muted-dim);margin:0;max-width:520px;}

/* ============================================================
   STICKY PLAY BUTTON
   ============================================================ */
.sticky{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,var(--amber-hi),var(--amber-deep));color:#2a1809;
  font-weight:700;font-size:14px;text-decoration:none;padding:13px 20px;border-radius:999px;
  border:1px solid #f6cd92;box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 0 0 rgba(244,192,126,.5);
  transform:translateY(140%);opacity:0;transition:transform .45s var(--ease), opacity .45s var(--ease);}
.sticky.show{transform:translateY(0);opacity:1;}
.sticky:hover{box-shadow:0 12px 30px rgba(0,0,0,.55), 0 0 0 6px rgba(244,192,126,.16);}
.sticky .tri{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:#2a1809;color:var(--amber-hi);font-size:11px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .deck{grid-template-columns:1fr;gap:30px;min-height:0;padding:8px 0 24px;}
  .pitch{max-width:none;order:2;}
  .stage{order:1;}
  .tv{transform:none;}
  .logo{text-shadow:0 3px 0 var(--amber-deep), 0 8px 20px rgba(0,0,0,.7);}
}
@media(max-width:520px){
  .status .seg.hide-sm{display:none;}
  .cassette{grid-template-columns:auto 1fr auto;padding:12px 14px;gap:12px;}
  .reel{width:38px;height:38px;}
  .vu{height:24px;}
  .sticky{right:14px;bottom:14px;padding:12px 16px;font-size:13px;}
  .channels{flex-direction:column;align-items:stretch;gap:10px;}
  .chan-btns{justify-content:space-between;}
}
@media(prefers-reduced-motion:reduce){
  .crt-veil,.reel,.cta::after,.vu i,.logo{animation:none !important;}
  *{transition-duration:.01ms !important;}
}