/* ==========================================================================
   CASSETTE FM — stylesheet
   Palette sampled from the station logo (deep indigo / electric violet /
   cyan tape-shine / coral→gold sunset wordmark / magenta pop accent).
   Type: Bungee (badge wordmark) + Rajdhani (technical/UI) + Manrope (body)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Rajdhani:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- surfaces ---- */
  --navy-950:#05061c;
  --navy-900:#0a0c30;
  --navy-800:#10164a;
  --navy-700:#1a2266;
  --navy-600:#262f7f;
  --navy-500:#3a4499;

  /* ---- accents (from logo) ---- */
  --violet:#8b5cf6;
  --violet-deep:#6d3fe0;
  --cyan:#4dd8e8;
  --coral:#f2665c;
  --gold:#f7b955;
  --magenta:#ea5c97;

  /* ---- text ---- */
  --paper:#f5f3ff;
  --mist:#b3b4de;
  --mist-dim:#7c7fb0;

  /* ---- gradients ---- */
  --grad-sunset: linear-gradient(90deg, var(--coral) 0%, var(--gold) 100%);
  --grad-tape: linear-gradient(135deg, var(--violet) 0%, var(--cyan) 100%);
  --grad-neon: linear-gradient(90deg, var(--violet), var(--magenta) 35%, var(--coral) 60%, var(--gold) 85%, var(--cyan));

  /* ---- type ---- */
  --font-display:'Bungee', system-ui, sans-serif;
  --font-ui:'Rajdhani', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, sans-serif;

  --radius-lg:26px;
  --radius-md:16px;
  --radius-sm:10px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--navy-900);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* faint scanline / tape-hiss texture across the whole page */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2000;
  background:repeating-linear-gradient(
    0deg, rgba(245,243,255,0.025) 0px, rgba(245,243,255,0.025) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode:overlay;
  opacity:.5;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:400; }
p{ margin:0; }

::selection{ background:var(--magenta); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.section-inner, .unified-inner, .footer-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}

section{ padding:6.5rem 0; position:relative; }

/* ---------- reveal-on-scroll ---------- */
.fade-up{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.fade-up.visible{ opacity:1; transform:translateY(0); }
.reveal{ opacity:0; transform:translateY(18px); animation:none; }
.reveal.visible{ animation:revealIn .6s cubic-bezier(.16,.8,.3,1) forwards; }
.reveal-delay-1.visible{ animation-delay:.08s; }
.reveal-delay-2.visible{ animation-delay:.16s; }
.reveal-delay-3.visible{ animation-delay:.24s; }
@keyframes revealIn{ to{ opacity:1; transform:translateY(0); } }

/* ---------- divider ---------- */
.divider{
  max-width:1280px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem);
  display:flex; align-items:center; justify-content:center;
}
.divider::before, .divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--navy-600), transparent);
}
.divider-dot{
  width:8px; height:8px; margin:0 14px; border-radius:50%;
  background:var(--grad-sunset);
  box-shadow:0 0 12px 2px rgba(242,102,92,.6);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
header{
  position:sticky; top:0; z-index:500;
  background:rgba(10,12,48,.78);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(139,92,246,.18);
}
.header-inner{
  max-width:1280px; margin:0 auto;
  padding:.85rem clamp(1.25rem,4vw,3rem);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}
.logo-wrap{ display:flex; align-items:center; gap:.7rem; }
.logo-img{
  width:46px; height:46px; border-radius:50%;
  box-shadow:0 0 0 2px var(--navy-700), 0 0 18px rgba(139,92,246,.55);
}
.logo-text h1{
  font-family:var(--font-display);
  font-size:1rem; letter-spacing:.04em; line-height:1;
  background:var(--grad-sunset);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.logo-text span{
  display:block; margin-top:.3rem;
  font-family:var(--font-ui); font-weight:600; letter-spacing:.14em;
  font-size:.62rem; text-transform:uppercase; color:var(--mist);
}

nav{ display:flex; align-items:center; gap:1.9rem; }
nav a{
  font-family:var(--font-ui); font-weight:600; font-size:.92rem;
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--mist); position:relative; padding:.3rem 0;
  transition:color .2s ease;
}
nav a:hover{ color:var(--paper); }
nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--grad-sunset); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
nav a:hover::after{ transform:scaleX(1); }
nav a.nav-live{
  color:var(--navy-950);
  background:var(--grad-sunset);
  padding:.45rem 1rem; border-radius:999px;
  box-shadow:0 4px 18px rgba(242,102,92,.35);
}
nav a.nav-live::after{ display:none; }
nav a.nav-live:hover{ filter:brightness(1.08); color:var(--navy-950); }

.hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:600; }
.hamburger span{ width:24px; height:2px; background:var(--paper); border-radius:2px; transition:.25s; }

@media (max-width:880px){
  .hamburger{ display:flex; }
  nav{
    position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(78vw,320px);
    background:var(--navy-950); border-left:1px solid var(--navy-700);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.6rem; padding:2rem; transform:translateX(100%);
    transition:transform .35s cubic-bezier(.16,.8,.3,1);
  }
  nav.open{ transform:translateX(0); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding:5.5rem 0 4.5rem;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(139,92,246,.16), transparent 60%),
    var(--navy-900);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    /* sun glow */
    radial-gradient(closest-side, rgba(247,185,85,.35), rgba(242,102,92,.18) 55%, transparent 72%);
  background-size:640px 640px;
  background-position:calc(100% + 120px) 12%;
  background-repeat:no-repeat;
}
.hero-bg::after{
  /* synthwave grid horizon */
  content:"";
  position:absolute; left:-20%; right:-20%; bottom:-10%; height:60%;
  background-image:repeating-linear-gradient(90deg, rgba(139,92,246,.28) 0 1px, transparent 1px 64px),
                    repeating-linear-gradient(0deg, rgba(77,216,232,.16) 0 1px, transparent 1px 46px);
  transform:perspective(340px) rotateX(62deg);
  transform-origin:bottom;
  mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 92%);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 92%);
  opacity:.8;
}

.hero-waves{
  position:absolute; left:0; right:0; bottom:0; height:120px;
  display:flex; align-items:flex-end; justify-content:center; gap:5px;
  z-index:0; opacity:.35; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.wave-bar{
  width:4px; border-radius:3px 3px 0 0;
  background:var(--grad-tape);
  animation:eq var(--dur,1s) ease-in-out var(--del,0s) infinite alternate;
}
@keyframes eq{ from{ transform:scaleY(.35); opacity:.55; } to{ transform:scaleY(1); opacity:1; } }

.hero-inner{
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem);
  display:grid; grid-template-columns:1.1fr .9fr; gap:3.5rem; align-items:center;
}

.hero-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-ui); font-weight:700; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(247,185,85,.4); background:rgba(247,185,85,.08);
  padding:.4rem .9rem; border-radius:999px; margin-bottom:1.4rem;
}
.hero-tag::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--magenta); box-shadow:0 0 10px 2px var(--magenta);
  animation:pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.72); } }

.hero-title{
  font-size:clamp(2.8rem, 6vw, 4.6rem);
  line-height:1.02; letter-spacing:.01em; margin-bottom:1.1rem;
}
.hl-red{
  background:var(--grad-sunset); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(242,102,92,.35));
}
.hl-gold{
  background:linear-gradient(120deg, var(--paper), var(--cyan) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-subtitle{
  font-family:var(--font-ui); font-weight:600; letter-spacing:.06em;
  font-size:1.15rem; color:var(--cyan); margin-bottom:1rem;
}
.hero-desc{
  color:var(--mist); font-size:1.03rem; max-width:46ch; margin-bottom:2.1rem;
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; }
.btn-primary, .btn-secondary{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-ui); font-weight:700; font-size:.95rem;
  letter-spacing:.03em; text-transform:uppercase;
  padding:.85rem 1.6rem; border-radius:999px;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background:var(--grad-sunset); color:var(--navy-950);
  box-shadow:0 10px 28px -8px rgba(242,102,92,.55);
}
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn-secondary{
  background:rgba(139,92,246,.1); color:var(--paper);
  border:1px solid rgba(139,92,246,.5);
}
.btn-secondary:hover{ background:rgba(139,92,246,.2); transform:translateY(-2px); }

/* ---- cassette player card (signature element) ---- */
.hero-logo-card{
  position:relative; background:linear-gradient(165deg, var(--navy-800), var(--navy-900));
  border:1px solid var(--navy-600); border-radius:var(--radius-lg);
  padding:1.9rem 1.9rem 1.5rem;
  box-shadow:0 30px 60px -25px rgba(5,6,28,.8), 0 0 0 1px rgba(139,92,246,.08) inset;
}
.hero-logo-card::before{
  content:"SIDE A · CASSETTE FM";
  display:block; font-family:var(--font-ui); font-weight:700;
  font-size:.68rem; letter-spacing:.22em; color:var(--mist-dim);
  margin-bottom:1.2rem;
}
.cassette-deck{ width:100%; height:auto; display:block; }
.cassette-reel{ transform-box:fill-box; transform-origin:center; animation:reelspin 5s linear infinite; }
.cassette-reel.reel-right{ animation-duration:5s; }
@keyframes reelspin{ to{ transform:rotate(360deg); } }

.card-foot{
  margin-top:1.5rem; padding-top:1.2rem; border-top:1px dashed var(--navy-600);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.stream-url{ font-family:var(--font-ui); font-size:.85rem; color:var(--mist); }
.stream-url strong{
  display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.2rem; font-weight:700;
}

@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-logo-card{ order:-1; max-width:420px; margin:0 auto; }
}

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker-wrap{
  background:var(--navy-950); border-top:1px solid var(--navy-700); border-bottom:1px solid var(--navy-700);
  overflow:hidden; padding:.85rem 0;
}
.ticker-track{ display:flex; width:max-content; animation:ticker 26s linear infinite; }
.ticker-track span{
  font-family:var(--font-ui); font-weight:700; font-size:.85rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mist);
  padding:0 1.4rem; white-space:nowrap; position:relative;
}
.ticker-track span::after{
  content:"◆"; position:absolute; right:-.35rem; top:50%; transform:translateY(-50%);
  font-size:.55rem; color:var(--gold);
}
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ==========================================================================
   STATS BAR
   ========================================================================== */
.stats-bar{ background:var(--navy-900); border-bottom:1px solid var(--navy-700); }
.stats-inner{
  max-width:1280px; margin:0 auto; padding:3.2rem clamp(1.25rem,4vw,3rem);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center;
}
.stat-item{ display:flex; flex-direction:column; gap:.4rem; position:relative; }
.stat-item:not(:last-child)::after{
  content:""; position:absolute; right:-.75rem; top:10%; bottom:10%; width:1px;
  background:linear-gradient(180deg, transparent, var(--navy-600), transparent);
}
.stat-num{
  font-family:var(--font-display); font-size:clamp(1.7rem,3vw,2.4rem);
  background:var(--grad-tape); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{
  font-family:var(--font-ui); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-size:.74rem; color:var(--mist-dim);
}
@media (max-width:720px){
  .stats-inner{ grid-template-columns:repeat(2,1fr); row-gap:2rem; }
  .stat-item:nth-child(2)::after{ display:none; }
}

/* ==========================================================================
   SECTION HEADER (shared)
   ========================================================================== */
.section-header{ max-width:640px; margin:0 auto 3rem; text-align:center; }
.section-eyebrow{
  font-family:var(--font-ui); font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  font-size:.76rem; color:var(--gold); margin-bottom:.7rem;
}
.section-title{
  font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:.9rem; color:var(--paper);
}
.section-title span{
  background:var(--grad-sunset); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-desc{ color:var(--mist); font-size:1rem; }

/* ==========================================================================
   LIVE PLAYER
   ========================================================================== */
#live-section{ background:var(--navy-900); }
.player-wrapper{
  max-width:900px; margin:0 auto;
  background:linear-gradient(165deg, var(--navy-800), var(--navy-900));
  border:1px solid var(--navy-600); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:0 30px 70px -30px rgba(5,6,28,.85);
}
.player-header{
  display:flex; align-items:center; gap:.7rem;
  padding:1.1rem 1.5rem; border-bottom:1px solid var(--navy-700);
}
.player-header h3{
  font-family:var(--font-ui); font-weight:700; font-size:.95rem;
  letter-spacing:.04em; color:var(--paper); text-transform:uppercase;
}
.live-dot{
  width:10px; height:10px; border-radius:50%; background:var(--magenta);
  box-shadow:0 0 12px 3px rgba(234,92,151,.7); animation:pulseDot 1.4s ease-in-out infinite;
}
.player-wrapper iframe{ width:100%; height:150px; border:0; display:block; }

/* ==========================================================================
   PLATFORM / DOWNLOAD CARDS
   ========================================================================== */
.unified-section{ background:var(--navy-950); }
.unified-section--alt{ background:var(--navy-900); }
.unified-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem;
}
.unified-grid--2col{ grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto; }

.u-card{
  display:flex; align-items:center; gap:.9rem;
  background:var(--navy-800); border:1px solid var(--navy-700); border-radius:var(--radius-md);
  padding:1.1rem 1.2rem; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.u-card:hover{
  transform:translateY(-4px);
  border-color:transparent;
  background:
    linear-gradient(var(--navy-800), var(--navy-800)) padding-box,
    var(--grad-neon) border-box;
  border:1px solid transparent;
  box-shadow:0 18px 40px -20px rgba(139,92,246,.55);
}
.u-card-icon{ width:38px; height:38px; border-radius:9px; object-fit:contain; background:var(--navy-950); padding:6px; flex-shrink:0; }
.u-card-svg-icon{
  width:44px; height:44px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-tape); color:var(--navy-950);
}
.u-card-svg-icon svg{ width:24px; height:24px; }
.u-card-info{ flex:1; min-width:0; }
.u-card-name{ font-family:var(--font-ui); font-weight:700; font-size:.98rem; color:var(--paper); }
.u-card-desc{ font-size:.82rem; color:var(--mist-dim); margin-top:.15rem; }
.u-card-arrow{ width:18px; height:18px; color:var(--mist-dim); flex-shrink:0; transition:color .2s ease, transform .2s ease; }
.u-card:hover .u-card-arrow{ color:var(--gold); transform:translate(2px,-2px); }

.u-card--download{ flex-direction:column; align-items:stretch; gap:1rem; }
.u-dl-header{ display:flex; align-items:center; gap:.9rem; }
.u-dl-links{ display:flex; flex-direction:column; gap:.55rem; }
.u-dl-link{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-ui); font-weight:600; font-size:.86rem; color:var(--mist);
  background:var(--navy-950); border:1px solid var(--navy-700); border-radius:var(--radius-sm);
  padding:.6rem .8rem; transition:.2s;
}
.u-dl-link:hover{ color:var(--paper); border-color:var(--violet); }
.u-dl-link svg{ width:16px; height:16px; flex-shrink:0; }
.u-dl-link-text{ flex:1; }
.u-card-badge{
  font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy-950); background:var(--gold); padding:.15rem .5rem; border-radius:999px;
}

.unified-footer{
  text-align:center; margin-top:2.2rem; font-family:var(--font-ui);
  font-size:.82rem; letter-spacing:.05em; color:var(--mist-dim);
}
.unified-version{
  text-align:center; margin-top:2.5rem; font-family:var(--font-ui); font-weight:700;
  font-size:.85rem; color:var(--mist);
}
.unified-version-tag{
  background:var(--grad-sunset); color:var(--navy-950); padding:.2rem .6rem;
  border-radius:999px; font-size:.75rem; margin-right:.6rem;
}
.unified-features{
  display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem 1rem; margin-top:1rem;
  font-family:var(--font-ui); font-size:.78rem; color:var(--mist-dim); letter-spacing:.04em;
}

@media (max-width:900px){ .unified-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
  .unified-grid, .unified-grid--2col{ grid-template-columns:1fr; }
}

/* ==========================================================================
   IFRAME FRAMES (history / podcasts / schedule)
   ========================================================================== */
.history-frame, .podcasts-frame, .schedule-frame{
  background:linear-gradient(165deg, var(--navy-800), var(--navy-900));
  border:1px solid var(--navy-600); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:0 30px 70px -32px rgba(5,6,28,.85);
}
.history-frame iframe, .podcasts-frame iframe, .schedule-frame iframe{
  width:100%; border:0; display:block;
}
.history-frame iframe{ height:340px; }
.podcasts-frame iframe{ height:520px; }
.schedule-frame iframe{ height:520px; }

#history-section, #schedule-section{ background:var(--navy-900); }
#podcasts-section{ background:var(--navy-950); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
#about-section{ background:var(--navy-900); }
.about-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:start;
}
.about-content p{ color:var(--mist); margin-bottom:1.4rem; }
.about-content h3{
  font-family:var(--font-ui); font-weight:700; font-size:1.05rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1rem;
}
.mission-list{ display:flex; flex-direction:column; gap:.75rem; }
.mission-list li{
  position:relative; padding-left:1.6rem; color:var(--mist); font-size:.98rem;
}
.mission-list li::before{
  content:"◆"; position:absolute; left:0; top:.1rem; font-size:.7rem; color:var(--cyan);
}
@media (max-width:880px){ .about-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   ADVERTISE
   ========================================================================== */
#advertise-section{ background:var(--navy-950); }
.adv-box{
  max-width:960px; margin:0 auto; text-align:center;
  background:linear-gradient(165deg, var(--navy-800), var(--navy-900));
  border:1px solid var(--navy-600); border-radius:var(--radius-lg);
  padding:3rem clamp(1.5rem,4vw,3.5rem);
}
.adv-box h3{
  font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,1.9rem);
  margin-bottom:.9rem; color:var(--paper);
}
.adv-box > p{ color:var(--mist); max-width:56ch; margin:0 auto 1.6rem; }
.contact-hl{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-ui); font-weight:700; font-size:1.05rem;
  color:var(--navy-950); background:var(--grad-sunset);
  padding:.7rem 1.5rem; border-radius:999px; margin-bottom:2.4rem;
  box-shadow:0 10px 26px -10px rgba(242,102,92,.6);
}
.benefits-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; text-align:left;
}
.benefit-card{
  background:var(--navy-950); border:1px solid var(--navy-700); border-radius:var(--radius-md);
  padding:1.4rem 1.2rem;
}
.benefit-icon{ font-size:1.5rem; display:inline-block; margin-bottom:.7rem; }
.benefit-card h4{
  font-family:var(--font-ui); font-weight:700; font-size:.92rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:.4rem;
}
.benefit-card p{ font-size:.85rem; color:var(--mist-dim); }
@media (max-width:820px){ .benefits-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .benefits-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{
  background:var(--navy-950); border-top:1px solid var(--navy-700); padding-top:4.5rem;
  position:relative;
}
footer::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:var(--grad-neon);
}
.footer-inner{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:3rem;
}
.footer-col h4{
  font-family:var(--font-ui); font-weight:700; font-size:.85rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem;
}
.footer-col p{ color:var(--mist-dim); font-size:.9rem; }
.footer-links{ display:flex; flex-direction:column; gap:.65rem; }
.footer-links a{ color:var(--mist); font-size:.9rem; transition:color .2s ease; }
.footer-links a:hover{ color:var(--cyan); }
.social-row{ display:flex; gap:.6rem; margin-top:1.2rem; }
.social-btn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--navy-800); border:1px solid var(--navy-700); font-size:.95rem; color:var(--mist);
  transition:.2s;
}
.social-btn:hover{ background:var(--grad-tape); color:var(--navy-950); border-color:transparent; transform:translateY(-3px); }

.footer-bottom{
  border-top:1px solid var(--navy-800); padding:1.5rem clamp(1.25rem,4vw,3rem);
  display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:space-between;
  font-family:var(--font-ui); font-size:.8rem; color:var(--mist-dim); letter-spacing:.03em;
}
.footer-stream{ color:var(--cyan); }

@media (max-width:900px){
  .footer-inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-inner{ grid-template-columns:1fr; }
}

/* ==========================================================================
   RESPONSIVE — general
   ========================================================================== */
@media (max-width:640px){
  section{ padding:4.5rem 0; }
  .hero{ padding:3.5rem 0 3rem; }
  .btn-primary, .btn-secondary{ font-size:.85rem; padding:.75rem 1.3rem; }
}