*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d1117;--bg-dark:#0a0f1a;--surface:#161b22;--border:#30363d;
  --amber:#F59E0B;--magenta:#e879f9;--cyan:#06b6d4;
  --text:#fff;--muted:#9CA3AF;
  --radius:12px;
  --font-body:'Inter',system-ui,sans-serif;
  --font-head:'Space Grotesk','Inter',sans-serif;
}
html{scroll-behavior:smooth}
body{background:linear-gradient(160deg,#0a0514 0%,#020d1a 30%,#0d1117 55%,#080d1f 75%,#120a1a 100%) fixed;background-attachment:fixed;color:var(--text);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
h2{font-family:var(--font-head);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;text-align:center;margin-bottom:.5rem}
.section-sub{text-align:center;color:var(--muted);margin-bottom:2.5rem;font-size:.95rem}

/* ═══════════════════════════════════════════════════════
   [16] SCANLINE OVERLAY — full body CRT texture
   ═══════════════════════════════════════════════════════ */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(transparent 0px,transparent 3px,rgba(0,0,0,0.03) 3px,rgba(0,0,0,0.03) 4px);
}

/* ═══════════════════════════════════════════════════════
   CANVAS — holographic grid + particles
   ═══════════════════════════════════════════════════════ */
#holo-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ═══════════════════════════════════════════════════════
   [3] DATA STREAM COLUMNS
   ═══════════════════════════════════════════════════════ */
.data-stream{
  position:fixed;top:0;width:28px;height:100vh;z-index:10;
  pointer-events:none;overflow:hidden;
  font-family:'Courier New',monospace;font-size:10px;line-height:14px;
}
.data-stream-left{left:0;color:var(--amber)}
.data-stream-right{right:0;color:var(--magenta)}
.data-stream span{
  display:block;width:28px;text-align:center;
  opacity:0;animation:stream-fade 2s ease-in-out infinite;
}
@keyframes stream-fade{0%,100%{opacity:.1}50%{opacity:.6}}

/* ═══════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,15,26,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06);transition:background .3s}
.nav-inner{max-width:1100px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;justify-content:space-between}
.logo{text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:1.6rem;letter-spacing:1px;position:relative;display:inline-block}
.logo-dave{color:var(--amber)}.logo-amp{color:#ffffff;margin:0 4px;text-shadow:0 0 12px rgba(255,255,255,0.8),0 0 30px rgba(255,255,255,0.4)}.logo-nyx{color:var(--magenta)}.logo-tld{color:rgba(255,255,255,0.4);font-size:0.65em;font-weight:500;letter-spacing:0.05em;vertical-align:baseline;margin-left:1px}
.nav-links{display:flex;gap:1.5rem;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{background:var(--amber)!important;color:#000!important;padding:6px 16px;border-radius:8px;font-weight:600!important}
.nav-cta:hover{opacity:.9}

/* [11] Feed status / live clock */
.feed-status{
  font-family:'Courier New',monospace;font-size:11px;color:var(--amber);
  opacity:.7;letter-spacing:.08em;white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════
   [8] GLITCH LOGO — enhanced 3-frame glitch
   ═══════════════════════════════════════════════════════ */
.glitch-text{position:relative;display:inline-block}
.glitch-text::before,.glitch-text::after{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;
  font-family:inherit;font-weight:inherit;font-size:inherit;letter-spacing:inherit;
  pointer-events:none;opacity:0;
}
.glitch-text::before{color:var(--amber);animation:glitch-before 7s infinite}
.glitch-text::after{color:var(--magenta);animation:glitch-after 7s infinite}
@keyframes glitch-before{
  0%,96%,100%{opacity:0;transform:none;clip-path:none}
  96.3%{opacity:.9;transform:translateX(3px);clip-path:inset(0 0 66% 0);color:#ff0040}
  96.6%{opacity:.8;transform:translateX(-2px);clip-path:inset(33% 0 33% 0);color:#00ffff}
  96.9%{opacity:.8;transform:skewX(2deg);clip-path:inset(66% 0 0 0)}
  97.2%{opacity:0;transform:none;clip-path:none}
}
@keyframes glitch-after{
  0%,96%,100%{opacity:0;transform:none;clip-path:none}
  96.3%{opacity:.9;transform:translateX(-3px);clip-path:inset(66% 0 0 0);color:#00ffff}
  96.6%{opacity:.8;transform:translateX(2px);clip-path:inset(0 0 66% 0);color:#ff0040}
  96.9%{opacity:.8;transform:skewX(-2deg);clip-path:inset(33% 0 33% 0)}
  97.2%{opacity:0;transform:none;clip-path:none}
}
/* Permanent scanline texture on logo */
.logo{
  background-image:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(255,255,255,.03) 2px,rgba(255,255,255,.03) 3px);
}

/* [7] Chromatic aberration class */
.chroma-active{filter:url(#chroma);transition:filter 0s}
.chroma-reset{filter:none;transition:filter .2s}

/* ═══════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 20px 60px;overflow:hidden}
.hero-glows{position:absolute;inset:0;pointer-events:none}
.glow{position:absolute;width:350px;height:350px;border-radius:50%;filter:blur(140px);opacity:.06}
.glow-amber{background:var(--amber);top:25%;left:15%}
.glow-magenta{background:var(--magenta);top:25%;right:15%}
.hero-content{text-align:center;position:relative;z-index:1;will-change:transform}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.08);background:rgba(10,15,26,.8);margin-bottom:1.5rem;font-size:.75rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
h1{font-family:var(--font-head);font-size:clamp(3.5rem,9vw,7rem);font-weight:800;line-height:1.05;margin-bottom:3rem;letter-spacing:-1px}
.gradient-text{background:linear-gradient(90deg,var(--amber),var(--magenta));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hosts-row{display:flex;gap:3rem;justify-content:center;flex-wrap:wrap}
.host-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem}
.host-portrait{width:200px;height:200px;border-radius:50%;overflow:hidden;background:var(--surface);position:relative}
.host-portrait img{width:100%;height:100%;object-fit:cover;object-position:top;position:relative;z-index:1}

/* [14] NEON GLOW BLOOM */
.amber{color:var(--amber);text-shadow:0 0 10px rgba(245,158,11,.6),0 0 30px rgba(245,158,11,.3),0 0 60px rgba(245,158,11,.1)}
.magenta{color:var(--magenta);text-shadow:0 0 10px rgba(232,121,249,.6),0 0 30px rgba(232,121,249,.3),0 0 60px rgba(232,121,249,.1)}
.gradient-text{text-shadow:0 0 20px rgba(245,158,11,.3),0 0 40px rgba(232,121,249,.2)}

.host-name{font-family:var(--font-head);font-weight:700;font-size:1.5rem;margin-top:.5rem}
.host-role{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);font-weight:500}
.host-bio{font-size:.85rem;color:var(--muted);max-width:240px;line-height:1.5}

/* [15] HERO BROADCAST LINES */
.broadcast-line{
  position:absolute;height:1px;z-index:1;pointer-events:none;opacity:.3;
  background-size:200% 100%;
}
.broadcast-line-amber{
  top:25%;left:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  animation:shimmer-right 3s linear infinite;
}
.broadcast-line-magenta{
  top:55%;right:0;left:auto;width:60%;
  background:linear-gradient(90deg,transparent,var(--magenta),transparent);
  animation:shimmer-left 3s linear infinite;
}
.broadcast-line-cyan{
  top:75%;left:50%;transform:translateX(-50%);width:20%;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:shimmer-right 2s linear infinite;
}
@keyframes shimmer-right{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes shimmer-left{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ═══════════════════════════════════════════════════════
   [17] HOST PORTRAIT RINGS — rotating conic gradient
   ═══════════════════════════════════════════════════════ */
.host-portrait,.sidebar-avatar{position:relative;overflow:visible}
.ring-amber{box-shadow:0 0 40px rgba(245,158,11,.15)}
.ring-magenta{box-shadow:0 0 40px rgba(232,121,249,.15)}

.host-portrait.ring-amber::before,.host-portrait.ring-magenta::before,
.sidebar-avatar.ring-amber::before,.sidebar-avatar.ring-magenta::before{
  content:'';position:absolute;inset:-5px;border-radius:50%;z-index:0;
  animation:ring-rotate-transform 6s linear infinite;
}
.host-portrait.ring-amber::before,.sidebar-avatar.ring-amber::before{
  background:conic-gradient(from 0deg,transparent 0%,var(--amber) 20%,transparent 40%,transparent 100%);
}
.host-portrait.ring-magenta::before,.sidebar-avatar.ring-magenta::before{
  background:conic-gradient(from 0deg,transparent 0%,var(--magenta) 20%,transparent 40%,transparent 100%);
  animation-direction:reverse;
}
@keyframes ring-rotate-transform{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════
   [6] HOLOGRAPHIC CARD EFFECT
   ═══════════════════════════════════════════════════════ */
.holo-card{
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  position:relative;overflow:hidden;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.holo-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,255,255,.06),transparent 60%);
  opacity:0;transition:opacity .3s;z-index:2;
}
.holo-card:hover::before{opacity:1}
.holo-card:hover{
  border-color:rgba(245,158,11,.4);
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(245,158,11,.15);
  transform:translateY(-4px);
}
.holo-card:nth-child(even):hover{
  border-color:rgba(232,121,249,.4);
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(232,121,249,.15);
}

/* [9] HOLOGRAM ASSEMBLE — scroll reveal */
.holo-reveal{
  opacity:0;filter:blur(8px) brightness(2);transform:scale(.95);
  transition:none;
}
.holo-reveal.holo-visible{
  animation:holo-assemble .6s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes holo-assemble{
  0%{opacity:0;filter:blur(8px) brightness(2);transform:scale(.95)}
  10%{opacity:.3}
  20%{opacity:.8}
  30%{opacity:.4}
  40%{opacity:1;filter:blur(2px) brightness(1.2);transform:scale(.98)}
  100%{opacity:1;filter:none;transform:scale(1)}
}

/* [12] VARIABLE FONT WEIGHT ON SCROLL */
h2{
  --fw:200;
  font-weight:var(--fw);
  transition:font-weight .8s ease;
}
h2.fw-active{--fw:700;font-weight:700}

/* [13] TERMINAL CHARACTER REVEAL — cursor */
.reveal-cursor{
  display:inline;
}
.reveal-cursor::after{
  content:'|';animation:blink-cursor .5s step-end 6;
  color:var(--amber);margin-left:2px;
}
@keyframes blink-cursor{0%,100%{opacity:1}50%{opacity:0}}

/* ═══════════════════════════════════════════════════════
   EPISODES SECTION — 3-column layout
   ═══════════════════════════════════════════════════════ */
.episodes-section{padding:80px 0}
.ep-layout{
  display:grid;grid-template-columns:280px 1fr 280px;gap:2rem;
  max-width:1200px;margin:0 auto;padding:0 20px;align-items:start;
}
.ep-sidebar{position:sticky;top:72px}
.sidebar-title{font-family:var(--font-head);font-size:.75rem;font-weight:700;margin-bottom:1rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-left:-4px}

/* Left sidebar: episode list */
.ep-sidebar-list{display:flex;flex-direction:column;gap:.75rem}
.sidebar-ep-card{
  display:flex;gap:.75rem;align-items:center;
  padding:.75rem;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;
}
.sidebar-ep-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,255,255,.06),transparent 60%);
  opacity:0;transition:opacity .3s;
}
.sidebar-ep-card:hover::before{opacity:1}
.sidebar-ep-card:hover{
  border-color:rgba(245,158,11,.4);
  box-shadow:0 0 20px rgba(245,158,11,.15);
  transform:perspective(800px) rotateY(2deg) scale(1.02);
}
.sidebar-ep-card.active{border-color:var(--amber)}
.sidebar-ep-thumb{
  width:56px;height:56px;border-radius:8px;flex-shrink:0;
  background:var(--border);background-size:cover;background-position:center;
}
.sidebar-ep-info{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.sidebar-ep-date{font-size:.65rem;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.05em;opacity:.6}
.sidebar-ep-title{font-family:var(--font-head);font-size:.8rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Right sidebar */
.sidebar-host{display:flex;gap:.75rem;align-items:center;margin-bottom:1rem}
.sidebar-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0}
.sidebar-host-name{font-family:var(--font-head);font-weight:700;font-size:.85rem}
.sidebar-host-bio{font-size:.75rem;color:var(--muted);line-height:1.4}
.sidebar-schedule-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:99px;
  border:1px solid rgba(255,255,255,.06);background:rgba(10,15,26,.8);
  font-size:.7rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  margin:1rem 0;
}
.sidebar-subscribe{margin-top:.75rem}
.sidebar-subscribe-label{font-size:.75rem;color:var(--muted);margin-bottom:.5rem;font-weight:500}
.sidebar-subscribe-form{display:flex;gap:.35rem}
.sidebar-subscribe-form input{
  flex:1;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.08);
  background:var(--bg-dark);color:var(--text);font-size:.8rem;outline:none;min-width:0;
}
.sidebar-subscribe-form input:focus{border-color:var(--amber)}
.sidebar-subscribe-form button{
  padding:8px 14px;border-radius:8px;border:none;background:var(--amber);
  color:#000;font-weight:600;font-size:.8rem;cursor:pointer;white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════
   FEATURED EPISODE (center column)
   ═══════════════════════════════════════════════════════ */
.ep-featured{max-width:640px;margin:0 auto}
.featured-video-section{margin-bottom:1.5rem}
.video-badge{
  display:inline-block;padding:5px 14px;border-radius:99px;
  font-size:.7rem;font-weight:600;letter-spacing:.05em;margin-bottom:.75rem;
}
.badge-amber{background:var(--amber);color:#000}
.badge-magenta{background:var(--magenta);color:#000}

/* [10] HUD VIDEO PLAYER */
.hud-frame{position:relative;display:inline-block;width:100%;max-width:400px;margin:0 auto;display:block}
.hud-frame .bracket{position:absolute;width:20px;height:20px;pointer-events:none;z-index:3}
.hud-frame .bracket-tl{top:-4px;left:-4px;border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
.hud-frame .bracket-tr{top:-4px;right:-4px;border-top:2px solid var(--amber);border-right:2px solid var(--amber)}
.hud-frame .bracket-bl{bottom:-4px;left:-4px;border-bottom:2px solid var(--magenta);border-left:2px solid var(--magenta)}
.hud-frame .bracket-br{bottom:-4px;right:-4px;border-bottom:2px solid var(--magenta);border-right:2px solid var(--magenta)}
.hud-frame .bracket{transition:all .3s}
.hud-frame.playing .bracket{transform:scale(1.1)}
.hud-coords{
  font-family:'Courier New',monospace;font-size:10px;color:var(--muted);
  opacity:.4;letter-spacing:.1em;margin-top:6px;text-align:center;
  text-transform:uppercase;
}
.hud-coords.playing::after{content:'|';animation:blink-cursor .5s step-end infinite}

.featured-video-wrap{
  width:100%;border-radius:var(--radius);overflow:hidden;
  background:#000;border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 20px rgba(0,0,0,.5),0 0 30px rgba(245,158,11,.08);
}
.featured-video-wrap video{
  width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
}

/* Social cut teaser — half width, centered */
.featured-video-wrap--teaser {
  width: 50%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .featured-video-wrap--teaser { width: 75%; }
}

.full-ep-placeholder{
  border:1px dashed rgba(255,255,255,.1);border-radius:var(--radius);
  padding:2rem;text-align:center;color:var(--muted);font-size:.85rem;
  margin-bottom:1.5rem;background:rgba(10,15,26,.5);
}
.full-ep-placeholder .video-badge{margin-bottom:.75rem}
.full-ep-placeholder p{line-height:1.6}

/* Episode meta */
.featured-meta{margin-bottom:1.5rem}
.featured-date{font-size:.8rem;color:var(--muted);margin-bottom:.25rem;font-variant-numeric:tabular-nums;letter-spacing:.05em;opacity:.6}
.featured-title{
  font-family:var(--font-head);font-size:clamp(1.4rem,3vw,2rem);
  font-weight:600;line-height:1.2;text-align:left;margin-bottom:0;
}

/* Stories */
.featured-stories{margin-bottom:1.5rem}
.featured-stories-title{
  font-family:var(--font-head);font-size:.85rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:1rem;
}
.story-card{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1rem;margin-bottom:.75rem;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;
}
.story-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,255,255,.06),transparent 60%);
  opacity:0;transition:opacity .3s;
}
.story-card:hover::before{opacity:1}
.story-card.border-amber{border-left:3px solid var(--amber)}
.story-card.border-magenta{border-left:3px solid var(--magenta)}
.story-card:hover{
  transform:perspective(800px) rotateY(2deg) scale(1.02);
  box-shadow:0 0 20px rgba(232,121,249,.15);
}
.story-num{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.06);color:var(--text);
  font-family:var(--font-head);font-weight:700;font-size:.8rem;
}
.story-body{flex:1}
.story-headline{font-weight:600;font-size:.95rem;margin-bottom:.35rem;line-height:1.4}
.story-summary{font-size:.85rem;color:var(--muted);line-height:1.6;margin-bottom:.35rem}
.story-source{font-size:.75rem;color:#6b7280}
.story-source a{color:#6b7280;text-decoration:none;transition:color .2s}
.story-source a:hover{color:var(--text);text-decoration:underline}

/* Social pills */
.featured-socials{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.social-pill{
  font-size:.75rem;padding:6px 14px;border-radius:99px;
  background:rgba(255,255,255,.06);color:var(--muted);
  text-decoration:none;font-weight:500;transition:all .2s;
}
.social-pill:hover{background:var(--amber);color:#000}

/* [11] ON AIR BADGE */
.on-air-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(220,38,38,.25);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.1em;
  padding:3px 10px;border-radius:99px;margin-left:8px;
  vertical-align:middle;border:1px solid rgba(220,38,38,.4);
}
.on-air-badge::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#ef4444;animation:on-air-pulse 1.5s infinite;
}
@keyframes on-air-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* ═══════════════════════════════════════════════════════
   MOBILE EPISODE STRIP
   ═══════════════════════════════════════════════════════ */
.ep-mobile-strip-wrap{display:none;padding:2rem 20px 0;max-width:1200px;margin:0 auto}
.ep-mobile-strip{
  display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.mobile-ep-card{
  flex:0 0 180px;cursor:pointer;
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);overflow:hidden;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.mobile-ep-card:hover{border-color:rgba(245,158,11,.4);transform:scale(1.02)}
.mobile-ep-thumb{
  width:100%;height:100px;
  background:var(--border);background-size:cover;background-position:center;
}
.mobile-ep-date{display:block;font-size:.65rem;color:var(--muted);padding:.5rem .75rem 0;font-variant-numeric:tabular-nums;letter-spacing:.05em;opacity:.6}
.mobile-ep-title{
  display:block;font-family:var(--font-head);font-size:.75rem;font-weight:600;
  padding:2px .75rem .75rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ═══════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════ */
.about{padding:80px 0}
.about-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:800px;margin:0 auto}
.about-card{
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:2rem;text-align:center;
  position:relative;overflow:hidden;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.about-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,255,255,.06),transparent 60%);
  opacity:0;transition:opacity .3s;
}
.about-card:hover::before{opacity:1}
.about-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(245,158,11,.1);
}
.border-amber{border-top:3px solid var(--amber)}
.border-magenta{border-top:3px solid var(--magenta)}
.about-avatar{width:100px;height:100px;border-radius:50%;object-fit:cover;object-position:top;margin-bottom:1rem}
.about-card h3{font-family:var(--font-head);font-size:1.3rem;margin-bottom:.25rem}
.about-role{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin-bottom:1rem;font-weight:500}
.about-card p:last-child{color:var(--muted);font-size:.9rem;line-height:1.6}

/* ═══════════════════════════════════════════════════════
   SUBSCRIBE
   ═══════════════════════════════════════════════════════ */
.subscribe{padding:80px 0}
.subscribe-form{display:flex;gap:.5rem;max-width:420px;margin:0 auto}
.subscribe-form input{flex:1;padding:12px 16px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);background:var(--bg-dark);color:var(--text);font-size:.9rem;outline:none;transition:border-color .2s}
.subscribe-form input:focus{border-color:var(--amber)}
.subscribe-form button{padding:12px 24px;border-radius:var(--radius);border:none;background:var(--amber);color:#000;font-weight:600;font-size:.9rem;cursor:pointer;transition:opacity .2s;white-space:nowrap}
.subscribe-form button:hover{opacity:.9}
.sub-success{text-align:center;color:var(--amber);margin-top:1rem;font-weight:500}

/* ═══════════════════════════════════════════════════════
   PLATFORMS
   ═══════════════════════════════════════════════════════ */
.platforms{padding:80px 0;text-align:center}
.platform-buttons{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0}
.platform-btn{
  padding:10px 20px;border-radius:99px;
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);color:var(--text);text-decoration:none;
  font-size:.85rem;font-weight:500;transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.platform-btn:hover{border-color:var(--amber);color:var(--amber);box-shadow:0 0 20px rgba(245,158,11,.15);transform:translateY(-2px)}
.platform-note{color:var(--muted);font-size:.8rem;margin-top:1rem}

/* ═══════════════════════════════════════════════════════
   [18] FOOTER BROADCAST SIGN-OFF
   ═══════════════════════════════════════════════════════ */
.footer{padding:3rem 0;text-align:center;position:relative}
.footer-shimmer{
  height:1px;width:100%;margin-bottom:2rem;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  background-size:200% 100%;
  animation:shimmer-right 4s linear infinite;
}
.footer-logo{font-family:var(--font-head);font-weight:700;font-size:1rem;margin-bottom:.75rem}
.footer-tagline{
  font-family:'Courier New',monospace;font-size:.7rem;color:var(--muted);
  margin-bottom:.75rem;letter-spacing:.15em;text-transform:uppercase;
}
.footer-dots{margin-bottom:.75rem;font-size:1rem;letter-spacing:.5em}
.dot{display:inline-block;transition:opacity .3s}
.dot-1{color:var(--amber);animation:dot-cycle-1 1.5s step-end infinite}
.dot-2{color:var(--magenta);animation:dot-cycle-2 1.5s step-end infinite}
.dot-3{color:var(--cyan);animation:dot-cycle-3 1.5s step-end infinite}
@keyframes dot-cycle-1{0%{opacity:1}33.3%{opacity:.15}66.6%{opacity:.15}}
@keyframes dot-cycle-2{0%{opacity:.15}33.3%{opacity:1}66.6%{opacity:.15}}
@keyframes dot-cycle-3{0%{opacity:.15}33.3%{opacity:.15}66.6%{opacity:1}}
.footer-copy{
  font-family:'Courier New',monospace;font-size:.65rem;color:var(--muted);
  opacity:.4;letter-spacing:.15em;text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════════
   [4] RADAR SWEEP
   ═══════════════════════════════════════════════════════ */
.radar-sweep{
  position:fixed;left:0;width:100%;height:60px;z-index:9998;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,182,212,.04),transparent);
  opacity:0;
}
.radar-afterglow{
  position:fixed;left:0;width:100%;height:1px;z-index:9997;pointer-events:none;
  background:rgba(6,182,212,.08);opacity:0;
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* Keep canvas visible but static — just hide animated overlays */
  .radar-sweep,.radar-afterglow{display:none!important}
  .holo-reveal{opacity:1;filter:none;transform:none}
  body::after{display:none}
  h2{font-weight:700}
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media(max-width:960px){
  .ep-layout{grid-template-columns:1fr;max-width:640px}
  .ep-sidebar-left{display:none}
  .ep-sidebar-right{display:none}
  .ep-mobile-strip-wrap{display:block}
}

@media(max-width:768px){
  /* [RULE 4] Mobile: disable parallax, data streams, perspective grid */
  .data-stream{display:none!important}
  .hosts-row{gap:2rem}
  .host-portrait{width:160px;height:160px}
  .subscribe-form{flex-direction:column}
  .nav-links a:not(.nav-cta){display:none}
  .featured-video-wrap{max-width:100%}
  .feed-status{display:none}
  .hud-frame .bracket{display:none}
}
/* ═══════════════════════════════════════════════════════
   THE WIRE — AI Intelligence Feed Sidebar
   ═══════════════════════════════════════════════════════ */
#news-feed-sidebar{
  position:sticky;top:72px;max-height:80vh;overflow-y:auto;
  background:var(--bg-dark);border-left:1px solid rgba(255,255,255,.08);
  padding:0;
  scrollbar-width:thin;scrollbar-color:var(--amber) rgba(255,255,255,.04);
}
#news-feed-sidebar::-webkit-scrollbar{width:4px}
#news-feed-sidebar::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
#news-feed-sidebar::-webkit-scrollbar-thumb{background:var(--amber);border-radius:2px}

.wire-header{padding:12px 12px 8px}
.wire-title{
  font-family:'Courier New',monospace;font-size:11px;font-weight:700;
  letter-spacing:.2em;color:var(--cyan);text-transform:uppercase;
  margin-bottom:2px;display:flex;align-items:center;gap:6px;
}
.wire-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#22c55e;animation:wire-pulse 1s ease-in-out infinite;
}
@keyframes wire-pulse{0%,100%{opacity:1;box-shadow:0 0 4px #22c55e}50%{opacity:.4;box-shadow:none}}
.wire-subtitle{
  font-size:10px;color:var(--muted);opacity:.5;letter-spacing:.05em;
}

.wire-filters{
  display:flex;flex-wrap:wrap;gap:3px;padding:6px 12px 8px;
}
.wire-filter{
  font-family:'Courier New',monospace;font-size:8px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 6px;border-radius:99px;border:1px solid rgba(255,255,255,.1);
  background:transparent;color:var(--muted);cursor:pointer;
  transition:all .15s;
}
.wire-filter:hover{border-color:rgba(255,255,255,.2);color:var(--text)}
.wire-filter.active{border-color:var(--cyan);color:var(--cyan);background:rgba(6,182,212,.08)}

.news-feed-list{min-height:100px}

.wire-item{
  display:block;padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .15s;text-decoration:none;color:inherit;
}
.wire-item:hover{background:rgba(255,255,255,.03)}

.wire-item-badge{
  display:inline-block;font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border-radius:99px;margin-bottom:4px;
  line-height:1;
}
.wire-badge-anthropic{background:#F59E0B;color:#000}
.wire-badge-openai{background:#e879f9;color:#000}
.wire-badge-google{background:#e879f9;color:#000}
.wire-badge-github{background:var(--cyan);color:#000}
.wire-badge-tools{background:var(--cyan);color:#000}
.wire-badge-research{background:#a78bfa;color:#fff}
.wire-badge-general{background:#6b7280;color:#fff}

.wire-item-headline{
  font-size:13px;font-weight:500;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:3px;color:var(--text);
}
.wire-item-headline:hover{text-decoration:underline}

.wire-item-meta{
  font-size:11px;opacity:.5;display:flex;align-items:center;gap:6px;
  font-variant-numeric:tabular-nums;
}
.wire-item-hn{
  font-size:10px;font-weight:700;color:#ff6600;text-decoration:none;
  border:1px solid rgba(255,102,0,.3);padding:1px 4px;border-radius:3px;
}
.wire-item-hn:hover{background:rgba(255,102,0,.1)}

.wire-episode-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:600;letter-spacing:.05em;
  color:var(--amber);border:1px solid rgba(245,158,11,.3);
  padding:2px 8px;border-radius:99px;margin-bottom:4px;
}

.wire-footer{
  padding:10px 12px;font-family:'Courier New',monospace;
  font-size:9px;color:var(--muted);opacity:.3;letter-spacing:.05em;
  text-align:center;border-top:1px solid rgba(255,255,255,.05);
}

.wire-offline{
  padding:20px 12px;text-align:center;color:var(--muted);
  font-size:12px;line-height:1.5;
}

/* Mobile: THE WIRE below main content */
@media(max-width:960px){
  #news-feed-sidebar{
    position:static;max-height:none;border-left:none;
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:2rem;
  }
}
/* ═══════════════════════════════════════════════════════
   CONTACT / SPONSOR
   ═══════════════════════════════════════════════════════ */
.contact-section {
  padding: 80px 0;
  background: linear-gradient(180deg, transparent 0%, rgba(245,158,11,0.03) 50%, transparent 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.text-amber { color: var(--amber); }
.text-magenta { color: var(--magenta); }
.text-cyan { color: var(--cyan); }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 2.5rem auto 2rem;
  max-width: 900px;
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  padding: 32px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative;
  overflow: hidden;
}
.contact-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.contact-card:nth-child(1)::after { box-shadow: inset 0 0 30px rgba(245,158,11,0.15), 0 0 30px rgba(245,158,11,0.1); }
.contact-card:nth-child(2)::after { box-shadow: inset 0 0 30px rgba(232,121,249,0.15), 0 0 30px rgba(232,121,249,0.1); }
.contact-card:nth-child(3)::after { box-shadow: inset 0 0 30px rgba(6,182,212,0.15), 0 0 30px rgba(6,182,212,0.1); }
.contact-card:hover { transform: translateY(-4px); }
.contact-card:hover::after { opacity: 1; }
.contact-card:nth-child(1):hover { border-color: rgba(245,158,11,0.4); }
.contact-card:nth-child(2):hover { border-color: rgba(232,121,249,0.4); }
.contact-card:nth-child(3):hover { border-color: rgba(6,182,212,0.4); }
.contact-icon { font-size: 2.4rem; margin-bottom: 12px; }
.contact-label { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; margin-bottom: 6px; }
.contact-email { color: var(--muted); font-size: 0.85rem; word-break: break-all; }
.contact-card:nth-child(1) .contact-label { color: var(--amber); }
.contact-card:nth-child(2) .contact-label { color: var(--magenta); }
.contact-card:nth-child(3) .contact-label { color: var(--cyan); }
.contact-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
}
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════
   FROM THE NETWORK — site promotion section
   ═══════════════════════════════════════════════════════ */
.network-section {
  padding: 80px 0;
  background: linear-gradient(180deg, transparent 0%, rgba(6,182,212,0.03) 50%, transparent 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.network-header {
  text-align: center;
  margin-bottom: 48px;
}

.network-label {
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #06b6d4;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}

.network-sub {
  color: rgba(255,255,255,0.5);
  font-size: 15px;
  margin: 0;
}

.network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.network-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.network-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity 0.3s;
}

.network-card--amber::before { background: linear-gradient(90deg, transparent, #f59e0b, transparent); }
.network-card--magenta::before { background: linear-gradient(90deg, transparent, #e879f9, transparent); }
.network-card--cyan::before { background: linear-gradient(90deg, transparent, #06b6d4, transparent); }

.network-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
}

.network-card--amber:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 30px rgba(245,158,11,0.12); }
.network-card--magenta:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 30px rgba(232,121,249,0.12); }
.network-card--cyan:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 30px rgba(6,182,212,0.12); }

.network-card:hover::before { opacity: 1; }

.network-card-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.network-card-body { flex: 1; }

.network-card-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
}

.network-card-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin: 0 0 12px;
}

.network-card-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.network-card--amber .network-card-cta { color: #f59e0b; }
.network-card--magenta .network-card-cta { color: #e879f9; }
.network-card--cyan .network-card-cta { color: #06b6d4; }

@media (max-width: 768px) {
  .network-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .network-card { padding: 16px; }
  .network-card-icon { font-size: 22px; }
  .network-card-tagline { display: none; }
}

@media (max-width: 480px) {
  .network-grid { grid-template-columns: 1fr; }
  .network-card-tagline { display: block; }
}

/* ═══════════════════════════════════════════════════════
   ADSENSE AD UNITS
   ═══════════════════════════════════════════════════════ */
.ad-unit {
  margin: 24px 0;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.ad-unit--mid {
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 12px 0;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
}

.ad-unit--sidebar {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ad-unit ins { min-width: 250px; }

/* cache bust 1780096931 */
/* cache bust 1780098539 */

/* ═══════════════════════════════════════════════════════
   HERO WORDMARK — Big stretched logo filling hero top
   ═══════════════════════════════════════════════════════ */
.hero-wordmark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 1.5rem;
  font-family: var(--font-head);
  font-weight: 900;
  line-height: 1;
  font-size: clamp(3rem, 13vw, 11rem);
  letter-spacing: -0.02em;
  gap: 0.05em;
  position: relative;
}

.hw-dave {
  color: var(--amber);
  text-shadow:
    0 0 30px rgba(245,158,11,0.8),
    0 0 60px rgba(245,158,11,0.4),
    0 0 120px rgba(245,158,11,0.2);
  /* Stretch DAVE to fill proportionally */
  flex: 2.5;
  text-align: right;
}

.hw-amp {
  color: #ffffff;
  text-shadow:
    0 0 20px rgba(255,255,255,0.9),
    0 0 50px rgba(255,255,255,0.5);
  flex: 0.6;
  text-align: center;
  font-size: 0.7em; /* slightly smaller so & feels intentional */
}

.hw-nyx {
  color: var(--magenta);
  text-shadow:
    0 0 30px rgba(232,121,249,0.8),
    0 0 60px rgba(232,121,249,0.4),
    0 0 120px rgba(232,121,249,0.2);
  flex: 1.5;
  text-align: left;
}

/* Scale down on mobile but still fill width */
.hw-domain {
  width: 100%;
  text-align: center;
  font-family: 'Space Grotesk', monospace;
  font-size: clamp(0.7rem, 2vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.45);
  margin-top: 0.4em;
  text-shadow: none;
}

@media (max-width: 768px) {
  .hero-wordmark {
    font-size: clamp(2.5rem, 16vw, 6rem);
    letter-spacing: -0.03em;
  }
}

/* ═══════════════════════════════════════════════════════
   MATRIX CANVAS — behind everything, subtle hacker rain
   ═══════════════════════════════════════════════════════ */
#matrix-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.32;
}

/* ═══════════════════════════════════════════════════════
   WIRE SHARE BUTTONS
   ═══════════════════════════════════════════════════════ */
.wire-share-btn {
  display: inline-block;
  font-size: 10px;
  font-family: monospace;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 99px;
  margin: 4px 12px 6px;
  text-decoration: none;
  transition: all 0.2s;
}
.wire-share-btn:hover {
  color: #f59e0b;
  border-color: rgba(245,158,11,0.4);
  background: rgba(245,158,11,0.06);
}

/* ═══════════════════════════════════════════════════════
   EPISODE SHARE BUTTON
   ═══════════════════════════════════════════════════════ */
.ep-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 99px;
  text-decoration: none;
  background: rgba(245,158,11,0.06);
  transition: all 0.25s;
}
.ep-share-btn:hover {
  background: rgba(245,158,11,0.14);
  border-color: rgba(245,158,11,0.7);
  box-shadow: 0 0 20px rgba(245,158,11,0.15);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════
   EPISODE TRANSCRIPT
   ═══════════════════════════════════════════════════════ */
.transcript-block {
  margin: 20px 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
}
.transcript-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 11px;
  font-family: monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.transcript-toggle::-webkit-details-marker { display: none; }
.transcript-block[open] .transcript-toggle { color: #06b6d4; border-bottom: 1px solid rgba(255,255,255,0.06); }
.transcript-body {
  padding: 12px 16px;
  max-height: 320px;
  overflow-y: auto;
}
.transcript-line {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.transcript-speaker {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-width: 36px;
  padding-top: 2px;
  flex-shrink: 0;
}
.transcript-dave .transcript-speaker { color: #f59e0b; }
.transcript-nyx .transcript-speaker { color: #e879f9; }
.transcript-text { color: rgba(255,255,255,0.7); }

/* ═══════════════════════════════════════════════════════
   INTRO VIDEO CARD (between Dave and Nyx)
   Rectangular card: video fills top, text + unmute pinned to bottom
   ═══════════════════════════════════════════════════════ */

/* Override host-card flex layout for the video card */
.host-card-video {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(6,182,212,0.25);
  border-radius: 14px;
  width: 200px;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(6,182,212,0.08);
  gap: 0;
  position: relative;
}

/* Video fills the ENTIRE card */
.host-video-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  overflow: hidden;
  min-height: 260px;
}
.host-intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

/* HUD badge overlaid top-left */
.host-video-hud {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(6,182,212,0.5);
  border-radius: 99px;
  backdrop-filter: blur(4px);
  font-family: monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #06b6d4;
  text-transform: uppercase;
  pointer-events: none;
}
.host-video-hud .hud-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 6px #06b6d4;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* Info overlay — pinned to bottom of the video, gradient fade behind text */
.host-video-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 28px 12px 12px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.82));
}
.host-card-video .host-name {
  font-size: .7rem;
  letter-spacing: .1em;
  margin: 0;
}
.host-card-video .host-role {
  font-size: .65rem;
  margin: 0;
  opacity: .6;
}

/* Unmute button */
.unmute-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(6,182,212,0.12);
  border: 1px solid rgba(6,182,212,0.4);
  border-radius: 99px;
  color: #06b6d4;
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
  align-self: flex-start;
}
.unmute-btn:hover {
  background: rgba(6,182,212,0.22);
  box-shadow: 0 0 12px rgba(6,182,212,0.3);
}
.unmute-btn.is-muted .unmute-icon::after { content: "🔇"; }
.unmute-btn.is-unmuted .unmute-icon::after { content: "🔊"; }
.unmute-icon { font-size: 12px; }

/* Cyan accents */
.ring-cyan { box-shadow: 0 0 40px rgba(6,182,212,.15); }
.host-name.cyan { color: #06b6d4; text-shadow: 0 0 12px rgba(6,182,212,0.5); }

/* Mobile */
@media (max-width: 768px) {
  .host-card-video { width: 160px; }
}