/* ============================================================
   RIAV — Home page styles
   Extracted verbatim from site/v1/index.html inline <style>.
   Only asset URL paths have been adjusted (none were present in
   the original inline block — all backgrounds use CSS gradients
   or data URIs that need no path rewriting).
   ============================================================ */

/* ============================================================
   HERO — animated, audio-industry energy without startup feel
   ============================================================ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #081633; color: white;
  padding-block: 88px 180px;
  /* Pull the hero up under the transparent sticky header */
  margin-top: -72px;
  padding-top: 160px;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 500px at 85% 25%, rgba(201,162,75,0.22), transparent 55%),
    radial-gradient(700px 400px at 15% 80%, rgba(37,56,111,0.7), transparent 55%),
    linear-gradient(180deg, #061230 0%, #0B1B3B 60%, #14245A 100%);
}
/* Subtle moving grain layer */
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: drift 60s linear infinite;
}
@keyframes drift {
  from { transform: translate(0,0); }
  to   { transform: translate(32px, 32px); }
}
/* Big watermark sound wave */
.hero__bg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'><path d='M0 100 Q 100 20 200 100 T 400 100 T 600 100 T 800 100 T 1000 100 T 1200 100' fill='none' stroke='rgba(201,162,75,0.15)' stroke-width='1.5'/><path d='M0 120 Q 100 60 200 120 T 400 120 T 600 120 T 800 120 T 1000 120 T 1200 120' fill='none' stroke='rgba(201,162,75,0.08)' stroke-width='1.5'/></svg>") repeat-x center / 1200px 100%;
  opacity: 0.7;
}

.hero__grid {
  display: grid; gap: 56px; align-items: center;
}
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.1fr 1fr; gap: 72px; } }

.hero h1 {
  color: white; font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: 1.05; letter-spacing: -0.025em;
  margin-top: 18px;
}
.hero h1 .accent {
  color: var(--brand-accent);
  background: linear-gradient(90deg, #C9A24B 0%, #E8C77B 50%, #C9A24B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: shineText 6s ease-in-out infinite;
}
@keyframes shineText {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero p.lead {
  margin-top: 22px; font-size: var(--fs-body-lg);
  color: rgba(255,255,255,0.82); max-width: 560px; line-height: 1.6;
}
.hero__ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__ctas .btn--secondary { border-color: rgba(255,255,255,0.4); color: white; }
.hero__ctas .btn--secondary:hover { background: white; color: var(--brand-primary); border-color: white; }
.hero__ctas .btn--primary svg { transition: transform var(--t); }
.hero__ctas .btn--primary:hover svg { transform: translateX(4px); }

/* "On air" badge */
.onair {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 12px; border-radius: var(--radius-full);
  background: rgba(201,162,75,0.12); border: 1px solid rgba(201,162,75,0.3);
  color: var(--brand-accent);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--font-mono);
}
.onair .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-accent);
  box-shadow: 0 0 0 0 rgba(201,162,75,0.6);
  animation: pulseDot 1.8s ease-out infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(201,162,75,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(201,162,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,162,75,0); }
}

/* Hero trust strip */
.hero__trust {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-wrap: wrap; gap: 28px 44px; align-items: center;
  color: rgba(255,255,255,0.65); font-size: 13px;
}
.hero__trust strong { color: var(--brand-accent); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; margin-right: 4px; }

/* ---------- Hero visual: vinyl + equalizer panel ---------- */
.hero__visual {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg); overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px),
    linear-gradient(160deg, #1E3168 0%, #0B1B3B 55%, #2E467F 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  display: grid; grid-template-rows: 1fr auto;
  padding: 28px;
  /* Interactive turntable: no accidental text/image selection while dragging */
  user-select: none; -webkit-user-select: none;
}
/* Top-left small status */
.hv-status {
  position: absolute; top: 20px; left: 20px;
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.7); font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.08em;
}
.hv-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #1F8B4C; box-shadow: 0 0 8px #1F8B4C; }

.hv-corner {
  position: absolute; top: 20px; right: 20px;
  color: var(--brand-accent); font-size: 11px;
  font-family: var(--font-mono); letter-spacing: 0.1em;
}

/* Vinyl record */
.vinyl {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: 64%; aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #C9A24B 0 8%,
      #5A3F12 8% 9%,
      #0a0a0a 9% 14%,
      #1a1a1a 14% 15%,
      #0a0a0a 15% 30%,
      #1a1a1a 30% 31%,
      #0a0a0a 31% 50%,
      #1a1a1a 50% 51%,
      #0a0a0a 51% 99%,
      rgba(0,0,0,0.5) 100%);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(201,162,75,0.18);
  animation: spin 14s linear infinite;
  /* Lets the centre label size itself against the record, not the viewport */
  container-type: inline-size;
}
.vinyl__label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #0B1B3B; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap;
  /* Proportional to the record so the label always fits the gold centre at any width */
  font-size: 9px;      /* fallback for browsers without container query units */
  font-size: 4cqw;
}
@keyframes spin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }
/* Pause the platter when the user stops playback */
.hero__visual.is-paused .vinyl { animation-play-state: paused; }

/* ---- Tonearm ----------------------------------------------------------
   An arm that pivots from a mount near the top-right corner: it swings down so
   the headshell + stylus rest on the record while playing, and lifts to a
   parked angle when paused. Rotation is around the arm's right end, and the
   pivot mount is nested at that exact point so the joint never gaps. Users can
   drag the arm to play/pause; JS writes an inline transform during the drag. */
.tonearm {
  position: absolute;
  top: 13%; right: 16%;
  width: 46%; height: 7px;
  transform-origin: 100% 50%;
  transform: rotate(-26deg);      /* needle resting on the record (playing) */
  transition: transform 1000ms cubic-bezier(.45,.05,.2,1);
  z-index: 3;
  cursor: grab; touch-action: none;
}
.tonearm__arm {
  position: absolute; left: 6%; right: -6px; top: 0; height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, #F0D592 0%, #C9A24B 55%, #9B7A2E 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.55);
}
.tonearm__head {
  position: absolute; left: -3px; top: -5px;
  width: 17px; height: 16px; border-radius: 3px 3px 3px 5px;
  background: linear-gradient(180deg, #F0D592, #8B6B1F);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
}
.tonearm__head::after {            /* stylus tip reaching down to the groove */
  content: ""; position: absolute; left: 4px; bottom: -6px;
  width: 2px; height: 7px; border-radius: 0 0 1px 1px;
  background: linear-gradient(180deg, #F0D592, #C9A24B);
}
/* Pivot mount — centred on the arm's right-end pivot, painted over the tube end */
.tonearm__base {
  position: absolute; right: 0; top: 50%;
  width: 30px; height: 30px; border-radius: 50%;
  transform: translate(50%, -50%);
  background: radial-gradient(circle at 35% 30%, #F0D592, #B98F38 65%, #6E5117);
  box-shadow: 0 4px 10px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.45);
  z-index: 2;
}
.tonearm__base::after {
  content: ""; position: absolute; inset: 34%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff7e2, #8B6B1F);
}
/* Paused: lift the arm clear of the record */
.hero__visual.is-paused .tonearm { transform: rotate(7deg); }
/* While the user is dragging the arm, kill the snap transition (JS drives it) */
.hero__visual.is-grabbing .tonearm { transition: none; cursor: grabbing; }
.hero__visual.is-grabbing,
.hero__visual.is-grabbing .hv-toggle { cursor: grabbing; }

/* ---- Play / pause control --------------------------------------------
   Transparent circular button over the record. Cursor + a glyph on
   hover/focus signal it is interactive; the glyph is pause while playing
   and a play triangle once paused. */
.hv-toggle {
  position: absolute; left: 50%; top: 38%;
  width: 64%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; z-index: 5;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
.hv-toggle:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 4px; }
.hv-toggle__icon {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,27,59,0.72);
  border: 1px solid rgba(240,213,146,0.5);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  opacity: 0; transform: scale(0.82);
  transition: opacity 220ms ease, transform 220ms ease;
}
.hv-toggle:hover .hv-toggle__icon,
.hv-toggle:focus-visible .hv-toggle__icon { opacity: 1; transform: scale(1); }
/* pause glyph (two bars) — default playing state */
.hv-toggle__icon::before,
.hv-toggle__icon::after {
  content: ""; grid-area: 1 / 1;
  width: 5px; height: 18px; border-radius: 2px;
  background: var(--brand-accent);
}
.hv-toggle__icon::before { transform: translateX(-5px); }
.hv-toggle__icon::after  { transform: translateX(5px); }
/* paused → morph the glyph into a play triangle */
.hero__visual.is-paused .hv-toggle__icon::after { opacity: 0; }
.hero__visual.is-paused .hv-toggle__icon::before {
  width: 0; height: 0; background: transparent; border-radius: 1px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid var(--brand-accent);
  transform: translateX(2px);
}
/* Amber status + flat equalizer line while paused */
.hero__visual.is-paused .hv-status .dot { background: #C9A24B; box-shadow: 0 0 8px #C9A24B; }

/* Equalizer bars at bottom */
.equalizer {
  grid-row: 2;
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px;
  align-items: end;
  height: 64px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius);
  border: 1px solid rgba(201,162,75,0.18);
}
.equalizer .bar {
  background: linear-gradient(180deg, #C9A24B 0%, #8B6B1F 100%);
  border-radius: 2px;
  height: 20%;
  animation: eqBounce 1.2s ease-in-out infinite;
  transform-origin: bottom;
}
.equalizer .bar:nth-child(1)  { animation-delay: -0.04s; animation-duration: 1.0s; }
.equalizer .bar:nth-child(2)  { animation-delay: -0.10s; animation-duration: 0.8s; }
.equalizer .bar:nth-child(3)  { animation-delay: -0.22s; animation-duration: 1.4s; }
.equalizer .bar:nth-child(4)  { animation-delay: -0.35s; animation-duration: 0.9s; }
.equalizer .bar:nth-child(5)  { animation-delay: -0.18s; animation-duration: 1.1s; }
.equalizer .bar:nth-child(6)  { animation-delay: -0.50s; animation-duration: 1.3s; }
.equalizer .bar:nth-child(7)  { animation-delay: -0.28s; animation-duration: 0.7s; }
.equalizer .bar:nth-child(8)  { animation-delay: -0.42s; animation-duration: 1.5s; }
.equalizer .bar:nth-child(9)  { animation-delay: -0.16s; animation-duration: 1.0s; }
.equalizer .bar:nth-child(10) { animation-delay: -0.34s; animation-duration: 0.85s; }
.equalizer .bar:nth-child(11) { animation-delay: -0.48s; animation-duration: 1.2s; }
.equalizer .bar:nth-child(12) { animation-delay: -0.08s; animation-duration: 1.4s; }
.equalizer .bar:nth-child(13) { animation-delay: -0.30s; animation-duration: 0.9s; }
.equalizer .bar:nth-child(14) { animation-delay: -0.45s; animation-duration: 1.0s; }
.equalizer .bar:nth-child(15) { animation-delay: -0.20s; animation-duration: 1.3s; }
.equalizer .bar:nth-child(16) { animation-delay: -0.38s; animation-duration: 0.75s; }
.equalizer .bar:nth-child(17) { animation-delay: -0.14s; animation-duration: 1.1s; }
.equalizer .bar:nth-child(18) { animation-delay: -0.52s; animation-duration: 0.95s; }
.equalizer .bar:nth-child(19) { animation-delay: -0.06s; animation-duration: 1.5s; }
.equalizer .bar:nth-child(20) { animation-delay: -0.40s; animation-duration: 0.8s; }
.equalizer .bar:nth-child(21) { animation-delay: -0.24s; animation-duration: 1.2s; }
.equalizer .bar:nth-child(22) { animation-delay: -0.46s; animation-duration: 1.0s; }
.equalizer .bar:nth-child(23) { animation-delay: -0.12s; animation-duration: 1.3s; }
.equalizer .bar:nth-child(24) { animation-delay: -0.32s; animation-duration: 0.9s; }
@keyframes eqBounce {
  0%, 100% { height: 18%; }
  20%      { height: 70%; }
  40%      { height: 35%; }
  60%      { height: 90%; }
  80%      { height: 50%; }
}
/* Paused: settle the bars to a calm flat line */
.hero__visual.is-paused .equalizer .bar { animation: none; height: 16%; }

/* Track ticker */
.ticker {
  position: absolute; left: 28px; right: 28px; top: calc(38% + 6px);
  transform: translateY(140%);
  background: rgba(0,0,0,0.45); backdrop-filter: blur(8px);
  border: 1px solid rgba(201,162,75,0.2);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  z-index: 2;
}
.ticker__label { color: var(--brand-accent); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-mono); }
.ticker__body { flex: 1; min-width: 0; overflow: hidden; }
.ticker__title { color: white; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ticker__sub { color: rgba(255,255,255,0.55); font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.04em; margin-top: 2px; }

/* ============================================================
   MARQUEE — auto-scrolling members band
   ============================================================ */
.marquee {
  overflow: hidden; padding-block: 24px;
  background: white;
  border-top: 1px solid var(--neutral-100);
  border-bottom: 1px solid var(--neutral-100);
  position: relative;
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, white, transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, white, transparent); }
.marquee__track {
  display: flex; gap: 56px; width: max-content;
  animation: marqueeScroll 38s linear infinite;
  align-items: center;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee__item {
  color: var(--neutral-500); font-weight: 600; font-size: 16px; letter-spacing: 0.01em;
  white-space: nowrap;
  display: flex; align-items: center; gap: 16px;
  transition: color var(--t);
}
.marquee__item:hover { color: var(--brand-primary); }
.marquee__item::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-accent);
}
.marquee__item:last-child::after { display: none; }

/* ============================================================
   STATS — counter-up + overlap design
   ============================================================ */
.stats-wrap { margin-top: -100px; margin-bottom: 56px; position: relative; z-index: 5; }
.stats {
  background: white; border: 1px solid var(--neutral-100);
  box-shadow: 0 20px 60px rgba(11,27,59,0.18);
  border-radius: var(--radius-lg);
  display: grid; grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
  position: relative;
}
.stats::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-accent) 40%, var(--brand-accent) 60%, transparent);
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: 32px 24px; position: relative;
  border-right: 1px solid var(--neutral-100); border-bottom: 1px solid var(--neutral-100);
  transition: background var(--t);
}
.stat:hover { background: var(--brand-accent-softer); }
@media (min-width: 768px) { .stat { border-bottom: none; } }
.stat:nth-child(2n) { border-right: none; }
@media (min-width: 768px) { .stat { border-right: 1px solid var(--neutral-100); } .stat:last-child { border-right: none; } }
.stat__value {
  font-size: clamp(2.25rem, 4.5vw, 3rem); font-weight: 700;
  color: var(--brand-primary); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
}
.stat__value sup { color: var(--brand-accent); font-size: 50%; font-weight: 700; }
.stat__value .suffix { color: var(--brand-accent); font-size: 70%; font-weight: 700; }
.stat__label { font-size: 13px; color: var(--neutral-500); margin-top: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.stat__icon { position: absolute; top: 24px; right: 24px; color: var(--neutral-200); transition: color var(--t); }
.stat:hover .stat__icon { color: var(--brand-accent); }

/* ============================================================
   INTRO 2-col
   ============================================================ */
.intro-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .intro-grid { grid-template-columns: 1.05fr 1fr; gap: 72px; } }
.intro-grid p { margin-top: 16px; }
.intro-visual {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg); overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(11,27,59,0.05) 0 1px, transparent 1px 14px),
    var(--neutral-100);
  border: 1px solid var(--neutral-200);
}
.intro-visual::before {
  content: ""; position: absolute; inset: 18px;
  border: 1px dashed var(--neutral-300); border-radius: var(--radius);
}
.intro-visual__label {
  position: absolute; left: 0; right: 0; bottom: 24px;
  text-align: center;
  color: var(--neutral-500); font-family: var(--font-mono); font-size: 12px;
}
.intro-visual__deco {
  position: absolute; top: 24px; left: 24px;
  display: flex; align-items: center; gap: 8px;
  color: var(--brand-accent-700); font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.1em;
}
/* Floating gold accent shape */
.intro-visual__shape {
  position: absolute; right: -40px; bottom: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  border: 1.5px solid var(--brand-accent);
  opacity: 0.4;
  animation: floatY 8s ease-in-out infinite;
}
.intro-visual__shape::before {
  content: ""; position: absolute; inset: 28px; border-radius: 50%;
  border: 1px solid var(--brand-accent); opacity: 0.6;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-16px) rotate(60deg); }
}

/* ============================================================
   ACTIVITIES — alive hover, gold sweep
   ============================================================ */
.activities { display: grid; gap: 20px; }
@media (min-width: 768px) { .activities { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.activity {
  background: white; border-radius: var(--radius);
  border: 1px solid var(--neutral-100);
  padding: 32px; transition: all var(--t);
  position: relative; overflow: hidden;
}
.activity::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--brand-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow);
}
.activity:hover { border-color: var(--brand-accent); box-shadow: 0 12px 32px rgba(11,27,59,0.1); transform: translateY(-4px); }
.activity:hover::before { transform: scaleX(1); }
.activity__num {
  position: absolute; top: 28px; right: 28px;
  font-family: var(--font-mono); font-size: 11px; color: var(--neutral-300); letter-spacing: 0.1em;
}
.activity .ico-circle {
  transition: transform var(--t-slow), background var(--t);
}
.activity:hover .ico-circle { transform: rotate(-6deg) scale(1.05); background: var(--brand-accent); color: var(--brand-primary); }
.activity h3 { margin-top: 20px; }
.activity p { color: var(--neutral-500); margin-top: 12px; font-size: 15px; }
.activity ul { margin-top: 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--neutral-700); }
.activity ul li { display: flex; gap: 8px; align-items: flex-start; }
.activity ul li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--brand-accent); margin-top: 9px; flex: 0 0 auto; }

/* ============================================================
   NEWS cards with animated mini-waveform thumbnails
   ============================================================ */
.news-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card {
  background: white; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--neutral-100); display: flex; flex-direction: column;
  transition: box-shadow var(--t), transform var(--t);
}
.news-card:hover { box-shadow: 0 12px 32px rgba(11,27,59,0.1); transform: translateY(-3px); }
.news-thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, #1B2D5E 0%, #0B1B3B 60%, #25386F 100%);
  color: white;
}
.news-thumb::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(201,162,75,0.15) 1px, transparent 1px);
  background-size: 16px 16px;
}
.news-thumb__wave {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  display: flex; align-items: end; gap: 3px;
  padding: 0 16px;
}
.news-thumb__wave i {
  flex: 1; background: linear-gradient(180deg, var(--brand-accent), rgba(201,162,75,0.3));
  border-radius: 2px 2px 0 0;
  animation: eqBounce 1.6s ease-in-out infinite;
}
.news-thumb__wave i:nth-child(odd)  { animation-duration: 1.3s; }
.news-thumb__wave i:nth-child(3n)   { animation-duration: 1.8s; }
.news-thumb__wave i:nth-child(5n)   { animation-duration: 1.1s; }
.news-thumb__category {
  position: absolute; top: 14px; left: 14px;
  background: rgba(11,27,59,0.7); border: 1px solid rgba(201,162,75,0.3);
  color: var(--brand-accent); padding: 4px 12px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.news-thumb__date {
  position: absolute; top: 14px; right: 14px;
  color: rgba(255,255,255,0.7); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
}
.news-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.news-card h3 { font-size: 18px; line-height: 1.35; }
.news-card h3 a { color: var(--neutral-900); transition: color var(--t); }
.news-card h3 a:hover { color: var(--brand-primary); }
.news-card p { font-size: 14px; color: var(--neutral-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card__more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--brand-accent-700); display: inline-flex; align-items: center; gap: 6px; transition: gap var(--t); }
.news-card__more:hover { gap: 12px; color: var(--brand-primary); }

/* ============================================================
   PARTNERS strip — animated
   ============================================================ */
.partners {
  background: white; border-radius: var(--radius-lg);
  padding: 36px; border: 1px solid var(--neutral-100);
  display: grid; gap: 24px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .partners { grid-template-columns: 1fr 3fr; align-items: center; gap: 40px; } }
.partners__strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px) { .partners__strip { grid-template-columns: repeat(4, 1fr); } }
.partners__strip .logo-tile { height: 80px; font-size: 16px; transition: all var(--t); }
.partners__strip .logo-tile:hover { transform: translateY(-2px); }

/* ============================================================
   FINAL CTA with shimmer
   ============================================================ */
.final-cta {
  background: linear-gradient(135deg, #0B1B3B 0%, #16285A 60%, #25386F 100%);
  color: white; border-radius: var(--radius-lg);
  padding: 56px 40px; position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
@media (min-width: 768px) { .final-cta { padding: 72px 64px; } }
.final-cta::before {
  content: ""; position: absolute; inset: -2px;
  background: linear-gradient(90deg, transparent, rgba(201,162,75,0.4), transparent);
  background-size: 200% 100%;
  mix-blend-mode: overlay;
  animation: shineBand 8s ease-in-out infinite;
}
@keyframes shineBand {
  0%, 100% { background-position: -100% 0; }
  50% { background-position: 200% 0; }
}
.final-cta__inner { position: relative; z-index: 1; display: grid; gap: 24px; align-items: center; }
@media (min-width: 768px) { .final-cta__inner { grid-template-columns: 2fr 1fr; gap: 48px; } }
.final-cta h2 { color: white; font-size: clamp(1.5rem, 3vw, 2.25rem); max-width: 600px; }
.final-cta p { color: rgba(255,255,255,0.78); margin-top: 14px; max-width: 540px; }
.final-cta__deco {
  position: absolute; right: -100px; bottom: -100px; width: 380px; height: 380px;
  border-radius: 50%; background: radial-gradient(circle at center, rgba(201,162,75,0.18), transparent 60%);
  pointer-events: none;
}
.final-cta__waves {
  position: absolute; right: 5%; bottom: 15%; pointer-events: none; opacity: 0.4;
}
.final-cta__waves .ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1.5px solid var(--brand-accent); border-radius: 50%;
  animation: pingRing 3s ease-out infinite;
}
.final-cta__waves .ring:nth-child(1) { width: 80px; height: 80px; animation-delay: 0s; }
.final-cta__waves .ring:nth-child(2) { width: 80px; height: 80px; animation-delay: 1s; }
.final-cta__waves .ring:nth-child(3) { width: 80px; height: 80px; animation-delay: 2s; }
@keyframes pingRing {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* ============================================================
   SCROLL REVEAL — gentle fade-up
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(.2,.6,.2,1), transform 700ms cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }

/* Reduced motion — kill all decorative animation */
@media (prefers-reduced-motion: reduce) {
  .vinyl, .equalizer .bar, .marquee__track, .news-thumb__wave i,
  .final-cta::before, .final-cta__waves .ring, .intro-visual__shape,
  .hero__bg::before, .hero h1 .accent, .onair .dot {
    animation: none !important;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* No arm swing for users who opt out of motion */
  .tonearm { transition: none; }
}

/* Mobile spacing — tighten the hero and the stats overlap on narrow widths */
@media (max-width: 767px) {
  .hero { padding-block: 32px 96px; padding-top: 104px; }
  .hero__grid { gap: 32px; }
  .hero__ctas { gap: 12px; }
  .hero__ctas .btn { width: 100%; }
  /* Full-bleed to the column edges so it lines up with the CTA + stats above */
  .hero__visual { width: 100%; }
  .stat { padding: 20px 16px; }
  .marquee { padding-block: 18px; }
}