/* ---------- 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}
/* PHONES. The white-label player is a fixed-width desktop layout, so a
   narrow frame clips it instead of reflowing it. JavaScript measures the
   box and sets these three values; the frame is then drawn at its full
   design width and shrunk to fit, like zooming out. The box is already
   locked to 16:9 so the scaled frame lands exactly inside it. */
.embedbox.scaled iframe{width:var(--ew);height:var(--eh);
  transform:scale(var(--es));transform-origin:0 0}
/* If the visitor taps fullscreen inside the player, drop the shrink -
   the frame owns the whole screen at that point and must not be scaled. */
.embedbox.scaled iframe:fullscreen{width:100%;height:100%;transform:none}
.embedbox.scaled iframe:-webkit-full-screen{width:100%;height:100%;transform:none}
.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;flex-direction:column;gap:4px;min-width:0;flex:1}
.nptop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.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}
/* age · country · HD · head-count */
.npchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.npchip{background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);
  font-size:11.5px;font-weight:700;line-height:1;padding:4px 8px;border-radius:999px;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.npchip.npflag{letter-spacing:.02em}
.npchip.nphd{background:var(--pink-wash);border-color:var(--pink);color:var(--pink-deep)}
.npchip.npviewers{background:var(--pink);border-color:var(--pink);color:#fff}
.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){
  .nowplaying{gap:10px}
  .nplink{width:100%;text-align:center}
  .npchip{font-size:11px;padding:4px 7px}
  .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}

/* ---------- the sixty-second sign-up gate ----------
   Added 6 Sep 2026. Deliberately a full-viewport panel rather than an
   overlay inside the video box: on a phone that box is only about 200
   pixels tall, and a heading plus two buttons cannot live inside it.
   Fixed positioning also means the shrink-to-fit transform used on the
   player on phones cannot squash or clip this. */
.vgate{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;
  justify-content:center;padding:20px;
  background:rgba(10,2,7,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:vgIn .28s ease-out}
.vgate[hidden]{display:none}
@keyframes vgIn{from{opacity:0}to{opacity:1}}
.vgatecard{width:100%;max-width:430px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;
  padding:26px 22px 20px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.5);
  animation:vgCard .3s cubic-bezier(.2,.8,.3,1)}
@keyframes vgCard{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .vgate,.vgatecard{animation:none}}
.vgeyebrow{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--pink)}
.vgeyebrow[hidden]{display:none}
.vgatecard h3{margin:0;font-size:clamp(20px,4.6vw,26px);line-height:1.18;font-weight:800;
  color:var(--text)}
.vgsub{margin:0;font-size:clamp(13.5px,3vw,15px);line-height:1.5;color:var(--muted,var(--text));
  opacity:.85;max-width:34ch}
.vgacts{display:flex;flex-direction:column;gap:9px;width:100%;margin-top:5px}
.vgacts .btn{width:100%;box-sizing:border-box;text-align:center}
.vgsec{display:block;width:100%;box-sizing:border-box;padding:11px 14px;border-radius:999px;
  font-weight:700;font-size:14.5px;text-decoration:none;
  color:var(--text);border:1px solid var(--line);background:transparent}
.vgsec:hover{border-color:var(--pink);color:var(--pink)}
.vgsnooze{background:none;border:0;padding:7px 6px;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--text);opacity:.55;text-decoration:underline}
.vgsnooze:hover{opacity:.85}
.vgsnooze[hidden]{display:none}
.vgfoot{margin:2px 0 0;font-size:11.5px;line-height:1.4;color:var(--text);opacity:.55}
@media (max-height:520px){
  .vgatecard{padding:18px 18px 14px;gap:8px}
  .vgsub{display:none}}