.radioHub{
  --radio-hub-accent:#d97c2b;
  --radio-hub-accent-soft:#f2c89b;
  --radio-hub-text:#f7f2ea;
  --radio-hub-soft:rgba(245,240,232,.76);
  --radio-hub-line:rgba(255,255,255,.09);
  --radio-hub-line-strong:rgba(255,255,255,.16);
  --radio-hub-surface:rgba(16,18,22,.86);
  --radio-hub-surface-strong:rgba(14,16,20,.94);
  --radio-hub-shadow:0 30px 90px rgba(0,0,0,.38);
  --radio-beat-strength:0;
  --radio-audio-energy:.08;
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  padding:clamp(24px, 3.4vw, 40px);
  color:var(--radio-hub-text);
  background:
    radial-gradient(circle at 14% 8%, rgba(217,124,43,.14), transparent 24rem),
    radial-gradient(circle at 86% 12%, rgba(110,146,174,.12), transparent 24rem),
    linear-gradient(180deg, rgba(7,10,14,.24), rgba(7,10,14,.52) 42%, rgba(7,10,14,.78));
  overflow:hidden;
  scroll-padding-top:28px;
}

.radioHub__scene{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:layout paint style;
}

.radioHub__scene::before,
.radioHub__scene::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.radioHub__scene::before{
  background:
    radial-gradient(circle at 14% 18%, rgba(217,124,43,.16), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(112,148,174,.12), transparent 24%),
    radial-gradient(circle at 50% 74%, rgba(217,124,43,.08), transparent 28%),
    linear-gradient(180deg, rgba(6,8,12,.08), rgba(7,10,14,.22) 44%, rgba(4,6,10,.58));
  opacity:calc(.82 + (var(--radio-audio-energy) * .24));
  transform:scale(calc(1 + (var(--radio-beat-strength) * .06)));
  transform-origin:center center;
}

.radioHub__scene::after{
  background:
    linear-gradient(90deg, rgba(6,8,12,.56), transparent 18%, transparent 82%, rgba(6,8,12,.56)),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 18%, transparent 78%, rgba(4,6,10,.62)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 72px);
  opacity:calc(.84 + (var(--radio-audio-energy) * .08));
}

.radioHub__sceneCanvas{
  display:block;
  width:100vw;
  height:100vh;
  opacity:.96;
  transform:translateZ(0);
  will-change:transform, opacity;
}

.radioHub__backdrop{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 70px),
    linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 38px),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.08), transparent 18rem);
  opacity:calc(.08 + (var(--radio-audio-energy) * .08));
  mix-blend-mode:screen;
}

.radioHub__shell{
  position:relative;
  z-index:2;
  width:min(1360px, calc(100vw - 28px));
  margin:0 auto;
  display:grid;
  gap:clamp(18px, 2.8vw, 28px);
}

.radioHub__masthead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px 24px;
  flex-wrap:wrap;
}

.radioHub__brand{
  display:grid;
  gap:10px;
  min-width:0;
  max-width:760px;
}

.radioHub__homeLink{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-width:0;
  text-decoration:none;
  color:#fff4e9;
}

.radioHub__brandMark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:84px;
  height:44px;
  padding:0 16px;
  clip-path:var(--bite);
  border:1px solid rgba(217,124,43,.52);
  background:linear-gradient(180deg, rgba(217,124,43,.3), rgba(84,33,14,.34));
  font-family:"Russo One", sans-serif;
  font-size:1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

.radioHub__brandText{
  font-family:"Russo One", sans-serif;
  font-size:clamp(1.6rem, 2.9vw, 3.2rem);
  line-height:.96;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.radioHub__intro{
  margin:0;
  max-width:60ch;
  color:var(--radio-hub-soft);
  font-size:.98rem;
  line-height:1.62;
}

.radioHub__mastActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.radioHub__hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.06fr) minmax(320px, .94fr);
  gap:clamp(20px, 2.8vw, 34px);
  align-items:start;
  padding:clamp(22px, 3vw, 34px);
  border:1px solid var(--radio-hub-line);
  border-radius:30px;
  background:
    linear-gradient(135deg, rgba(217,124,43,.12), rgba(15,17,20,.92) 46%, rgba(26,32,39,.92) 100%),
    var(--radio-hub-surface-strong);
  box-shadow:var(--radio-hub-shadow);
  overflow:hidden;
}

.radioHub__hero::before,
.radioHub__hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:.82;
}

.radioHub__hero::before{
  inset:-2rem auto auto -6rem;
  width:18rem;
  height:18rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(217,124,43,.22), transparent 65%);
  filter:blur(8px);
}

.radioHub__hero::after{
  right:-5rem;
  bottom:-7rem;
  width:20rem;
  height:20rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(79,120,132,.22), transparent 68%);
  filter:blur(10px);
}

.radioHub__heroCopy,
.radioHub__rail{
  position:relative;
  z-index:1;
  min-width:0;
}

.radioHub__heroCopy{
  display:grid;
  gap:14px;
}

.radioHub__eyebrowRow{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.radioHub__eyebrow,
.radioHub__signalLabel,
.radioHub__metric span{
  font-family:Oswald, sans-serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.radioHub__eyebrow{
  color:rgba(255,220,190,.76);
}

.radioHub__heroBadge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--radio-hub-text);
  font-family:Oswald, sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.radioHub__title{
  margin:0;
  max-width:none;
  color:#fff8ef;
  font-family:"Russo One", sans-serif;
  font-size:clamp(1.8rem, 3.4vw, 3.45rem);
  line-height:.98;
  text-wrap:balance;
  text-transform:uppercase;
}

.radioHub__lead{
  margin:0;
  max-width:52ch;
  color:rgba(240,234,225,.84);
  font-size:.96rem;
  line-height:1.64;
}

.radioHub__tracks{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.radioHub__track,
.radioHub__visualTag{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:rgba(245,238,229,.82);
  font-size:.82rem;
  letter-spacing:.04em;
}

.radioHub__signal{
  position:relative;
  display:grid;
  gap:14px;
  padding:18px;
  border:1px solid var(--radio-hub-line);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)),
    rgba(7,9,12,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}

.radioHub__signal::after{
  content:"";
  position:absolute;
  inset:auto -14% -48% auto;
  width:16rem;
  height:16rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(217,124,43,.16), transparent 66%);
  filter:blur(8px);
  pointer-events:none;
}

.radioHub__signalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.radioHub__signalStatus{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff4de;
  font-family:Oswald, sans-serif;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.radioHub__signalBars{
  display:grid;
  grid-template-columns:repeat(14, minmax(0, 1fr));
  align-items:end;
  gap:5px;
  height:96px;
}

.radioHub__signalBars span{
  --bar-level:.18;
  border-radius:999px 999px 6px 6px;
  background:linear-gradient(180deg, rgba(242,200,155,.94), rgba(217,124,43,.34));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 0 calc(10px + (var(--radio-audio-energy) * 18px)) rgba(217,124,43,.16);
  transform-origin:center bottom;
  transform:scaleY(calc(.44 + var(--bar-level) + (var(--radio-beat-strength) * .54)));
  opacity:calc(.4 + (var(--radio-audio-energy) * .44));
  animation:radioHubSignal 1.24s cubic-bezier(.42,0,.18,1) infinite;
  will-change:transform,opacity,box-shadow;
}

.radioHub__signalBars span:nth-child(1){height:22%; --bar-level:.08;}
.radioHub__signalBars span:nth-child(2){height:44%; --bar-level:.18; animation-delay:.08s;}
.radioHub__signalBars span:nth-child(3){height:62%; --bar-level:.28; animation-delay:.16s;}
.radioHub__signalBars span:nth-child(4){height:34%; --bar-level:.12; animation-delay:.24s;}
.radioHub__signalBars span:nth-child(5){height:76%; --bar-level:.34; animation-delay:.32s;}
.radioHub__signalBars span:nth-child(6){height:48%; --bar-level:.2; animation-delay:.4s;}
.radioHub__signalBars span:nth-child(7){height:88%; --bar-level:.4; animation-delay:.48s;}
.radioHub__signalBars span:nth-child(8){height:36%; --bar-level:.14; animation-delay:.56s;}
.radioHub__signalBars span:nth-child(9){height:68%; --bar-level:.3; animation-delay:.64s;}
.radioHub__signalBars span:nth-child(10){height:28%; --bar-level:.1; animation-delay:.72s;}
.radioHub__signalBars span:nth-child(11){height:82%; --bar-level:.36; animation-delay:.8s;}
.radioHub__signalBars span:nth-child(12){height:42%; --bar-level:.16; animation-delay:.88s;}
.radioHub__signalBars span:nth-child(13){height:58%; --bar-level:.24; animation-delay:.96s;}
.radioHub__signalBars span:nth-child(14){height:30%; --bar-level:.12; animation-delay:1.04s;}

.radioHub__visualTags{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.radioHub__rail{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.radioHub__metric{
  display:grid;
  gap:6px;
  min-height:86px;
  align-content:start;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(7,9,12,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.radioHub__metric span{
  color:rgba(236,229,219,.6);
  font-size:.76rem;
}

.radioHub__metric strong{
  color:#fff8ee;
  font-family:"Russo One", sans-serif;
  font-size:.98rem;
  line-height:1.22;
  text-transform:uppercase;
}

.radioHub__board{
  min-height:0;
}

.radioHub--embed{
  min-height:auto;
  min-height:100%;
  padding:18px 0 0;
}

.radioHub--embed .radioHub__scene{
  position:absolute;
  inset:0;
}

.radioHub--embed .radioHub__sceneCanvas{
  width:100%;
  height:100%;
  min-height:100%;
}

.radioHub--embed .radioHub__shell{
  width:min(1280px, calc(100vw - 16px));
}

@keyframes radioHubSignal{
  0%, 100%{
    transform:scaleY(calc(.34 + var(--bar-level) + (var(--radio-beat-strength) * .4)));
    opacity:calc(.34 + (var(--radio-audio-energy) * .34));
  }
  50%{
    transform:scaleY(calc(.64 + var(--bar-level) + (var(--radio-beat-strength) * .72)));
    opacity:calc(.64 + (var(--radio-audio-energy) * .24));
  }
}

@media (max-width: 1100px){
  .radioHub__hero{
    grid-template-columns:1fr;
  }

  .radioHub__title{
    max-width:none;
  }
}

@media (max-width: 860px){
  .radioHub{
    padding:18px 14px 24px;
  }

  .radioHub__shell{
    width:min(100%, calc(100vw - 14px));
    gap:18px;
  }

  .radioHub__brandText{
    font-size:clamp(1.4rem, 6vw, 2.35rem);
  }

  .radioHub__intro,
  .radioHub__lead{
    font-size:.95rem;
  }
}

@media (max-width: 640px){
  .radioHub__mastActions{
    width:100%;
    justify-content:stretch;
  }

  .radioHub__mastActions > .btn{
    flex:1 1 180px;
  }

  .radioHub__hero{
    padding:18px;
    border-radius:24px;
  }

  .radioHub__title{
    font-size:clamp(1.65rem, 8vw, 2.5rem);
  }

  .radioHub__rail{
    grid-template-columns:1fr;
  }

  .radioHub__signal{
    padding:16px;
  }
}