:root{
  --bg:#020609;
  --panel:#071216;
  --cyan:#20d8ff;
  --cyan-soft:#ccf8ff;
  --line:rgba(32,216,255,.28);
  --text:#e7f7fb;
  --muted:#a7b7bd;
  --orange:#ff7a35;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"IBM Plex Mono",monospace;letter-spacing:.03em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:50;background:linear-gradient(rgba(255,255,255,.035) 50%,rgba(0,0,0,.045) 50%);background-size:100% 4px;opacity:.24;mix-blend-mode:screen}
.page-noise{position:fixed;inset:0;pointer-events:none;z-index:49;opacity:.08;background-image:radial-gradient(#fff 0 1px,transparent 1px);background-size:58px 58px}
.site-header{position:fixed;top:0;left:0;right:0;height:72px;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:0 46px;background:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,.12));border-bottom:1px solid rgba(255,255,255,.04)}
.brand{font-family:"Space Grotesk";font-weight:700;letter-spacing:.32em;text-shadow:0 0 17px rgba(204,248,255,.75)}
nav{display:flex;gap:32px;text-transform:uppercase;font-size:12px}
nav a{color:#e9fbff}
.signal-login{font-size:12px;color:var(--cyan);text-transform:uppercase}
.hero{min-height:760px;position:relative;display:flex;align-items:center;padding:125px 8vw 70px;background:linear-gradient(90deg,rgba(2,6,9,.96),rgba(2,6,9,.84) 30%,rgba(2,6,9,.28) 68%,rgba(2,6,9,.1)),linear-gradient(0deg,#020609,rgba(2,6,9,0) 30%),url('assets/hero-bg.jpg') center top/cover no-repeat}
.vertical-code{position:absolute;left:26px;top:92px;bottom:118px;writing-mode:vertical-rl;display:flex;justify-content:space-between;color:var(--cyan);opacity:.75;font-size:12px}
.hero-copy{max-width:560px;position:relative;z-index:2}
.kicker{text-transform:uppercase;color:var(--cyan);font-size:13px;margin:0 0 18px}
h1,h2,h3{font-family:"Space Grotesk";text-transform:uppercase;margin:0}
.hero h1{font-size:clamp(64px,8vw,128px);line-height:.88;letter-spacing:.23em;text-shadow:0 0 22px rgba(204,248,255,.8);animation:glitch 5s infinite}
.hero h2{color:var(--cyan);font-size:clamp(26px,3vw,42px);line-height:1.15;letter-spacing:.15em;margin:28px 0 24px}
.hero p{max-width:455px;color:#e1edf0;line-height:1.62;font-size:14px}
.button-row{display:flex;gap:22px;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:245px;border:1px solid var(--cyan);padding:15px 22px;color:var(--cyan);text-transform:uppercase;background:rgba(4,18,25,.5);box-shadow:0 0 19px rgba(32,216,255,.08) inset;font-weight:500}
.btn:hover{background:rgba(32,216,255,.12)}
.btn-outline{color:#dffaff;border-color:rgba(204,248,255,.5)}
.btn-small{min-width:160px;padding:12px 18px}
.signal-strength{position:absolute;right:44px;bottom:72px;text-align:right;text-transform:uppercase;font-size:12px}
.signal-strength strong{display:block;margin:4px 0 8px}
.bars{display:flex;gap:3px;justify-content:flex-end;align-items:flex-end}.bars i{display:block;width:4px;background:#dffaff}.bars i:nth-child(1){height:6px}.bars i:nth-child(2){height:9px}.bars i:nth-child(3){height:13px}.bars i:nth-child(4){height:17px}.bars i:nth-child(5){height:22px}.bars i:nth-child(6){height:28px}
.featured,.section{max-width:1180px;margin:auto;padding:34px 28px}
.featured{display:grid;grid-template-columns:1.22fr .76fr 220px;gap:36px;align-items:stretch;border-top:1px solid rgba(204,248,255,.12)}
.video-panel{position:relative;border:1px solid rgba(204,248,255,.18);background:#000;min-height:310px}.video-panel iframe{width:100%;height:100%;min-height:310px;border:0}.video-caption{position:absolute;left:22px;bottom:18px;text-transform:uppercase}.video-caption strong{display:block;font:700 30px "Space Grotesk";letter-spacing:.14em}.video-caption span{font-size:13px}
.feature-copy h2{font-size:42px;letter-spacing:.22em;margin-bottom:20px}.feature-copy p{color:#cbd6da;line-height:1.6;font-size:14px}
.terminal{border-left:1px solid rgba(204,248,255,.13);padding:28px;color:var(--cyan);background:rgba(3,12,16,.28)}.terminal span{text-transform:uppercase;font-size:13px}.terminal strong{display:block;font-size:28px;margin:8px 0 26px}.terminal p{font-size:12px;color:#82cfe2}
.section-title{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(204,248,255,.12);padding-top:20px;margin-bottom:20px}.section-title h2{color:var(--cyan);font-size:26px;letter-spacing:.12em}.section-title a,.archive-grid a{color:var(--cyan);font-size:12px;text-transform:uppercase}
.platforms{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.platforms a{border:1px solid rgba(32,216,255,.32);padding:18px;text-align:center;text-transform:uppercase;background:rgba(4,21,29,.48);color:#dffaff}
.archive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.archive-grid article{background:rgba(5,17,22,.48)}.archive-grid img{height:130px;width:100%;object-fit:cover;border:1px solid rgba(204,248,255,.18)}.archive-grid h3{font-size:18px;margin:13px 0 6px}.archive-grid p{color:#bbc8cc;font-size:13px;line-height:1.5;margin:0 0 10px}
.transmission-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.transmission{position:relative}.transmission img{height:110px;width:100%;object-fit:cover;border:1px solid rgba(204,248,255,.18)}.transmission span{display:block;margin-top:10px;font-size:13px;text-transform:uppercase}.transmission em{position:absolute;right:8px;bottom:34px;font-style:normal;background:rgba(0,0,0,.55);font-size:12px}
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding-top:34px;border-top:1px solid rgba(204,248,255,.45)}.timeline div{position:relative;color:#bdcbd0;font-size:13px}.timeline div:before{content:"";position:absolute;top:-41px;left:0;width:14px;height:14px;border-radius:99px;background:#cfd9dc;box-shadow:0 0 0 4px rgba(255,255,255,.08)}.timeline .active:before{background:var(--cyan);box-shadow:0 0 18px var(--cyan)}.timeline b{display:block;color:#dffaff;margin-bottom:5px}
.news-merch{display:grid;grid-template-columns:1fr 1fr;gap:26px}.news-merch article{border:1px solid rgba(204,248,255,.18);padding:24px;background:rgba(4,18,24,.45)}.news-merch h2{color:var(--cyan);letter-spacing:.12em;margin-bottom:18px}.news-merch span{color:var(--orange);text-transform:uppercase;font-size:12px}.news-merch h3{font-size:23px;margin:12px 0}.news-merch p{color:#c7d1d5;line-height:1.6}
.join{max-width:1180px;margin:20px auto 0;padding:34px 28px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;background:linear-gradient(90deg,rgba(4,18,24,.85),rgba(4,18,24,.35)),url('assets/join-bg.jpg') center/cover;border-top:1px solid rgba(204,248,255,.16)}.join h2{font-size:31px;letter-spacing:.15em}.join p{color:#cbd5d9}form{display:flex}input,button{height:54px;background:rgba(0,0,0,.45);border:1px solid rgba(204,248,255,.35);color:#eafaff;padding:0 18px;font-family:"IBM Plex Mono";text-transform:uppercase}input{flex:1}button{min-width:150px;color:var(--cyan);cursor:pointer}
footer{max-width:1180px;margin:auto;padding:40px 28px 60px;display:grid;grid-template-columns:90px 1fr 1fr 220px;gap:28px;border-top:1px solid rgba(204,248,255,.12);color:#b7c7cc}.wm-logo{width:64px;height:64px;border:1px solid rgba(204,248,255,.28);display:grid;place-items:center;color:#dffaff;font:700 20px "Space Grotesk";text-shadow:0 0 16px rgba(204,248,255,.8)}footer strong{display:block;color:#eafaff;letter-spacing:.18em}footer small{display:block;margin-top:28px}.footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:13px}.status-box{border:1px solid rgba(32,216,255,.35);padding:18px;color:var(--cyan);text-transform:uppercase;font-size:12px}
@keyframes glitch{0%,96%,100%{text-shadow:0 0 24px rgba(204,248,255,.75)}97%{text-shadow:4px 0 var(--cyan),-4px 0 var(--orange)}98%{text-shadow:-4px 0 var(--cyan),4px 0 var(--orange)}}
@media(max-width:900px){.site-header{padding:0 20px}.site-header nav,.signal-login,.vertical-code,.signal-strength{display:none}.hero{padding:110px 28px 60px;min-height:720px;background-position:center}.featured,.archive-grid,.transmission-row,.platforms,.news-merch,.join,footer{grid-template-columns:1fr}.terminal{border-left:0;border-top:1px solid rgba(204,248,255,.12)}}

/* RESPONSIVE DESIGN UPDATE */
html, body { max-width: 100%; overflow-x: hidden; }
.site-header { gap: 20px; }
.site-header nav { flex-wrap: wrap; justify-content: center; }
.hero { width: 100%; background-size: cover; }
.hero-copy { width: min(560px, 100%); }
.featured, .section, .join, footer { width: min(1180px, 100%); }
.video-panel iframe { aspect-ratio: 16 / 9; min-height: auto; }
.video-panel { min-height: auto; }
.archive-grid img, .transmission img { object-position: center; }

@media (max-width: 1100px) {
  .site-header { padding: 0 28px; }
  .brand { letter-spacing: .2em; font-size: 15px; }
  .site-header nav { gap: 18px; font-size: 11px; }
  .featured { grid-template-columns: 1.15fr .85fr; }
  .terminal { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(204,248,255,.13); }
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
  .transmission-row { grid-template-columns: repeat(3, 1fr); }
  .platforms { grid-template-columns: repeat(3, 1fr); }
  footer { grid-template-columns: 80px 1fr 1fr; }
  .status-box { grid-column: 2 / -1; }
}

@media (max-width: 820px) {
  .site-header {
    position: sticky;
    min-height: 70px;
    height: auto;
    padding: 16px 22px;
    align-items: flex-start;
    background: rgba(0,0,0,.9);
  }
  .brand { font-size: 14px; line-height: 1.3; }
  .hero {
    min-height: auto;
    padding: 120px 24px 58px;
    background:
      linear-gradient(180deg, rgba(2,6,9,.65), rgba(2,6,9,.95) 70%, #020609 100%),
      url('assets/hero-bg.jpg') center top / cover no-repeat;
  }
  .hero h1 { font-size: clamp(48px, 14vw, 82px); letter-spacing: .14em; }
  .hero h2 { font-size: clamp(22px, 6vw, 34px); letter-spacing: .08em; }
  .hero p { font-size: 14px; max-width: 100%; }
  .button-row { gap: 14px; }
  .btn { min-width: 0; width: 100%; }
  .featured { grid-template-columns: 1fr; padding: 26px 20px; }
  .feature-copy h2 { font-size: clamp(30px, 9vw, 42px); letter-spacing: .16em; }
  .section { padding: 26px 20px; }
  .section-title { align-items: flex-start; gap: 10px; flex-direction: column; }
  .section-title h2 { font-size: 23px; }
  .archive-grid { grid-template-columns: 1fr 1fr; }
  .archive-grid img { height: 150px; }
  .transmission-row { grid-template-columns: 1fr 1fr; }
  .transmission img { height: 150px; }
  .platforms { grid-template-columns: 1fr 1fr; }
  .timeline { display: block; border-top: 0; padding-top: 0; }
  .timeline div { border-left: 1px solid rgba(204,248,255,.38); padding: 0 0 24px 24px; margin-left: 7px; }
  .timeline div:before { top: 2px; left: -8px; }
  .join { grid-template-columns: 1fr; margin-top: 0; padding: 30px 20px; }
  form { flex-direction: column; gap: 12px; }
  input, button { width: 100%; }
  footer { grid-template-columns: 1fr; padding: 34px 20px 50px; }
  .status-box { grid-column: auto; }
  .footer-links { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .site-header { justify-content: center; text-align: center; }
  .brand { font-size: 13px; letter-spacing: .16em; }
  .hero { padding: 82px 18px 45px; background-position: 60% top; }
  .hero h1 { font-size: clamp(38px, 15vw, 60px); letter-spacing: .1em; }
  .hero h2 { font-size: 21px; line-height: 1.25; }
  .hero p { font-size: 13px; line-height: 1.65; }
  .kicker { font-size: 11px; }
  .featured, .section { padding-left: 16px; padding-right: 16px; }
  .video-caption strong { font-size: 23px; }
  .archive-grid, .transmission-row, .platforms, .news-merch { grid-template-columns: 1fr; }
  .archive-grid img, .transmission img { height: 190px; }
  .section-title h2, .join h2 { font-size: 22px; letter-spacing: .08em; }
  .feature-copy h2 { font-size: 30px; }
  .terminal { padding: 20px; }
  .join { padding-left: 16px; padding-right: 16px; }
  .footer-links { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 34px; letter-spacing: .08em; }
  .hero h2 { font-size: 18px; }
  .btn { font-size: 12px; padding: 13px 14px; }
}


/* HERO ROTATING TRANSMISSION BACKGROUND */
.hero {
  overflow: hidden;
  background: #020609 !important;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,rgba(2,6,9,.96),rgba(2,6,9,.84) 30%,rgba(2,6,9,.28) 68%,rgba(2,6,9,.1)),
    linear-gradient(0deg,#020609,rgba(2,6,9,0) 30%);
  pointer-events: none;
}

.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center top;
  transform: scale(1.04);
  transition: opacity 2.2s ease, transform 12s ease;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

.hero-glitch-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(32,216,255,.18), transparent),
    repeating-linear-gradient(0deg, rgba(255,255,255,.2) 0 1px, transparent 1px 6px);
  mix-blend-mode: screen;
}

.hero-glitch-flash.flash {
  animation: transmissionFlash .45s steps(2, end);
}

#heroTransmission {
  color: #ccf8ff;
  opacity: .72;
  margin-left: 10px;
}

@keyframes transmissionFlash {
  0% { opacity: 0; transform: translateX(0); }
  20% { opacity: .55; transform: translateX(-8px); }
  40% { opacity: .18; transform: translateX(8px); }
  65% { opacity: .42; transform: translateX(-3px); }
  100% { opacity: 0; transform: translateX(0); }
}

.hero-copy,
.vertical-code,
.signal-strength {
  position: relative;
  z-index: 4;
}

@media (max-width: 820px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(2,6,9,.65), rgba(2,6,9,.95) 70%, #020609 100%);
  }
  .hero-slide {
    background-position: 60% top;
  }
}


/* LISTEN ONLINE BUTTON GLOW + TRANSMISSION SWEEP */
.platforms a{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(32,216,255,.45);
  transition: all .35s ease;
  box-shadow:
    0 0 0 rgba(32,216,255,0),
    inset 0 0 12px rgba(32,216,255,.08);
}

.platforms a:hover{
  color: #ffffff;
  border-color: #20d8ff;
  transform: translateY(-2px);
  box-shadow:
    0 0 8px rgba(32,216,255,.45),
    0 0 18px rgba(32,216,255,.35),
    0 0 35px rgba(32,216,255,.25),
    inset 0 0 15px rgba(32,216,255,.18);
}

.platforms a::after{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(32,216,255,.25), transparent);
  transition: left .6s ease;
}

.platforms a:hover::after{
  left: 100%;
}

/* MULTI-PAGE STRUCTURE + MOBILE NAV */
.mobile-menu-toggle{
  display:none;
  background:transparent;
  border:1px solid rgba(32,216,255,.35);
  color:#20d8ff;
  font-size:22px;
  width:44px;
  height:40px;
  cursor:pointer;
}

.subpage{
  padding-top:72px;
}

.page-hero{
  position:relative;
  min-height:430px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:120px 8vw 58px;
  background:
    linear-gradient(90deg,rgba(2,6,9,.94),rgba(2,6,9,.75),rgba(2,6,9,.2)),
    linear-gradient(0deg,#020609,rgba(2,6,9,0) 45%),
    url('assets/hero-bg.jpg') center top/cover no-repeat;
}

.page-hero h1{
  font-size:clamp(52px,8vw,110px);
  letter-spacing:.18em;
  text-shadow:0 0 22px rgba(204,248,255,.8);
}

.page-hero p{
  max-width:720px;
  color:#d8e8ec;
  line-height:1.65;
}

.archive-large{
  grid-template-columns:repeat(3,1fr);
}

.archive-large img{
  height:190px;
}

.sub-feature{
  margin-top:20px;
}

.transmission-page-grid{
  grid-template-columns:repeat(4,1fr);
}

.timeline-page{
  grid-template-columns:repeat(5,1fr);
}

.timeline-page p{
  color:#9fb0b7;
  line-height:1.5;
}

.news-list{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

.news-list article,
.prose,
.merch-grid article{
  border:1px solid rgba(204,248,255,.18);
  background:rgba(4,18,24,.45);
  padding:26px;
}

.news-list span{
  color:#ff7a35;
  text-transform:uppercase;
  font-size:12px;
}

.news-list h2,
.prose h2{
  color:#20d8ff;
  letter-spacing:.1em;
}

.prose p{
  max-width:850px;
  color:#c7d1d5;
  line-height:1.8;
}

.merch-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.merch-grid img{
  width:100%;
  height:220px;
  object-fit:cover;
  border:1px solid rgba(204,248,255,.18);
}

.merch-grid h3{
  margin-top:18px;
}

.contact-form{
  margin-top:20px;
}

@media(max-width:900px){
  .mobile-menu-toggle{
    display:block;
  }

  .site-header{
    align-items:center;
  }

  .site-nav{
    display:none !important;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    padding:18px 22px;
    background:rgba(0,0,0,.96);
    border-bottom:1px solid rgba(32,216,255,.25);
    flex-direction:column;
    text-align:center;
  }

  .site-nav.open{
    display:flex !important;
  }

  .subpage{
    padding-top:0;
  }

  .page-hero{
    min-height:360px;
    padding:95px 24px 45px;
    background:
      linear-gradient(180deg,rgba(2,6,9,.62),rgba(2,6,9,.95) 75%,#020609),
      url('assets/hero-bg.jpg') 58% top/cover no-repeat;
  }

  .archive-large,
  .transmission-page-grid,
  .timeline-page,
  .merch-grid{
    grid-template-columns:1fr;
  }

  .archive-large img,
  .merch-grid img{
    height:220px;
  }
}