/* ---------- hero ---------- */
.videosection{padding:24px 0 0}
.hero{padding:30px 0 0;text-align:center;max-width:1000px;margin:0 auto}
.hero h1{font-size:clamp(25px,3.3vw,40px);line-height:1.16;margin:0 0 14px;
  letter-spacing:-.028em;font-weight:800;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--pink)}
.welcome{color:var(--text-2);font-size:16px;line-height:1.7;margin:0 auto 24px;max-width:70ch}

.herocard{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  background:var(--surface-2);aspect-ratio:16/9;border:1px solid var(--line);
  box-shadow:var(--shadow);text-align:left;max-width:900px;margin:0 auto}
.herocard img{width:100%;height:100%;object-fit:cover}
.heroover{position:absolute;inset:auto 0 0 0;padding:20px;
  background:linear-gradient(to top,rgba(20,4,10,.9),rgba(20,4,10,0))}
.heroname{font-size:20px;font-weight:800;color:#fff;margin-bottom:3px}
.herosub{color:#F2DCE4;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.herotag{position:absolute;top:14px;left:14px;background:var(--pink);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.08em;padding:5px 11px;border-radius:999px;
  display:flex;align-items:center;gap:6px}
/* --- top video: fills its box and keeps shape on phones --- */
.videowrap{max-width:900px;margin:0 auto}
.embedbox{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line);background:#000}
.embedbox iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block;
  opacity:0;transition:opacity .35s ease-out}
/* The player fades in once it has actually loaded. Until then the
   visitor sees the model's still picture instead of a blank white
   rectangle - the white-label player takes a few seconds to connect. */
.embedbox iframe.ready{opacity:1}
.embedbox .posterhint{position:absolute;inset:auto 0 0 0;padding:14px 16px;color:#fff;
  font-size:13px;font-weight:600;background:linear-gradient(to top,rgba(20,4,10,.85),rgba(20,4,10,0))}
.embedbox[hidden]{display:none}
.herocard[hidden]{display:none}
/* --- sign-up bar UNDER the video. Covers nothing, stops nothing. --- */
.nowplaying{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:10px;padding:11px 15px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line)}
.npleft{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.npdot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none;
  box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.npname{font-weight:800;font-size:15px;flex:none}
.npsub{color:var(--text-2);font-size:13px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.nplink{color:#fff;background:var(--pink);font-weight:700;font-size:13px;
  text-decoration:none;flex:none;padding:8px 14px;border-radius:999px;
  transition:transform .12s ease,filter .12s ease}
.nplink:hover{filter:brightness(1.08);transform:translateY(-1px)}
.card.playing{outline:3px solid var(--pink);outline-offset:2px}
.card.playing .badge{background:var(--pink)}
.videocta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding:15px 20px;border-radius:12px;
  background:linear-gradient(135deg,var(--pink-wash),var(--surface));
  border:2px solid var(--pink);box-shadow:var(--shadow);
  animation:ctaIn .45s ease-out}
.videocta[hidden]{display:none}
.vctatext{font-weight:700;font-size:15.5px;color:var(--text);max-width:46ch;text-align:left}
@keyframes ctaIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.videocta{animation:none}}
@media (max-width:600px){.videocta{flex-direction:column;text-align:center;gap:11px}
  .videocta .vctatext{text-align:center}
  .videocta .btn{width:100%}}

/* ---------- cta band ---------- */
.cta{margin:30px auto 8px;padding:32px 26px;border-radius:var(--radius);text-align:center;
  background:linear-gradient(135deg,var(--pink-wash),var(--surface));
  border:1px solid var(--line);max-width:900px}
.cta-main{margin-top:26px;padding:38px 26px 34px;border-width:2px;border-color:var(--pink)}
.btn-xl{font-size:20px;padding:20px 56px;font-weight:800;letter-spacing:-.01em}
@media (max-width:600px){ .btn-xl{font-size:17px;padding:17px 30px;width:100%} }
.ctafoot{margin:16px 0 0!important;font-size:13px;color:var(--text-3);font-weight:600}
.cta h2{margin:0 0 8px;font-size:clamp(21px,2.6vw,28px);font-weight:800;letter-spacing:-.02em}
.cta p{margin:0 0 20px;color:var(--text-2);font-size:15.5px;font-weight:600}

/* ---------- categories ---------- */
.catbar{position:sticky;top:66px;z-index:30;background:var(--bg);
  padding:16px 0 12px;border-bottom:1px solid var(--line-soft);margin-top:34px}
@media (max-width:700px){ .catbar{top:58px} }
.cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cats a{text-decoration:none;
  flex:0 0 auto;background:var(--surface);border:1px solid var(--line);
  color:var(--text-2);font-size:13.5px;font-weight:700;padding:9px 17px;
  border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .14s,color .14s,border-color .14s}
.cats a:hover{border-color:var(--pink);color:var(--pink)}
.cats a.on{background:var(--pink);border-color:var(--pink);color:#fff}
.cats a:focus-visible{outline:2px solid var(--pink-deep);outline-offset:2px}

.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:22px 0 14px;flex-wrap:wrap}
.sechead h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.015em}
.count{color:var(--text-3);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- grid ---------- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
@media (min-width:900px){ .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px} }
@media (min-width:1500px){ .grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))} }
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
.card:hover,.card:focus-visible{border-color:var(--pink);transform:translateY(-3px);box-shadow:var(--shadow)}
.card:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.card[hidden]{display:none}
.thumb{position:relative;aspect-ratio:4/3;background:var(--surface-2)}
.thumb img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:8px;left:8px;background:rgba(24,5,12,.78);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.07em;padding:4px 8px;border-radius:6px;
  display:flex;align-items:center;gap:5px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 2px rgba(34,160,91,.3)}
.viewers{position:absolute;top:8px;right:8px;background:rgba(24,5,12,.78);color:#fff;
  font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.cardbody{padding:10px 11px 12px}
.cardname{font-size:14px;font-weight:800;margin-bottom:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cardsub{font-size:12px;color:var(--text-3);line-height:1.4;height:2.8em;overflow:hidden}
.nores{display:none;padding:40px 20px;text-align:center;color:var(--text-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 24px;text-align:center;color:var(--text-2)}
.faq{margin-top:52px}
.faq h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.faq .sub{color:var(--text-2);font-size:15.5px;margin:0 0 20px}
.faqlist{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:900px){ .faqlist{grid-template-columns:1fr 1fr;gap:14px} }
.faqitem{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:0;overflow:hidden}
.faqitem summary{cursor:pointer;list-style:none;padding:17px 20px;font-weight:700;
  font-size:15.5px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::after{content:"+";color:var(--pink);font-size:20px;font-weight:700;
  flex:0 0 auto;line-height:1}
.faqitem[open] summary::after{content:"\2212"}
.faqitem summary:hover{color:var(--pink)}
.faqitem .ans{padding:0 20px 18px;color:var(--text-2);font-size:15px;line-height:1.65;margin:0}
.empty strong{color:var(--text);display:block;margin-bottom:6px;font-size:17px}

/* ---------- category pages ---------- */
.crumbs{font-size:13px;color:var(--text-3);padding:18px 0 0;font-weight:600}
.crumbs a{color:var(--pink);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 7px;opacity:.6}
.crumbs strong{color:var(--text-2)}
.cathead{padding:26px 0 0;max-width:820px}
.cathead h1{font-size:clamp(23px,3vw,34px);line-height:1.18;margin:0 0 12px;
  letter-spacing:-.026em;font-weight:800;text-wrap:balance}
.catintro{color:var(--text-2);font-size:15.5px;line-height:1.72;margin:0}
.empty{padding:34px 0;color:var(--text-2);font-size:15px}
.empty a{color:var(--pink);font-weight:700}