/* ==========================================================================
   AIMAN KHAN OFFICIAL — single file build
   All data was pulled live from the YouTube Data API v3 on 28 Sep 2026.
   No follower/view number was invented — anything that could not be verified
   renders as "—".
   ========================================================================== */

:root{
  --bg:#0d0d0f;
  --bg-2:#16161a;
  --bg-3:#1e1e23;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --txt:#f4f4f6;
  --txt-2:#a1a1ac;
  --txt-3:#6e6e7a;
  --red:#ff0000;
  --red-2:#ff3b3b;
  --red-soft:rgba(255,59,59,.14);
  --grad:linear-gradient(135deg,#ff0000 0%,#ff3b3b 55%,#ff6b6b 100%);
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.075);
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --sh:0 18px 50px -18px rgba(0,0,0,.9);
  --sh-red:0 16px 44px -16px rgba(255,0,0,.6);
  --hdr:72px;
  --max:1280px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* ---- tokens that used to force header/hero onto dark surfaces ----
     These were previously literals like rgba(13,13,15,...) / #101218,
     which is why the header and hero stayed fully dark in the light theme.
     Now they are variables, so both themes can use different values.    */
  --hdr-bg:rgba(13,13,15,.62);      /* at the top (not scrolled)       */
  --hdr-bg-s:rgba(13,13,15,.92);    /* after scrolling                 */
  --hdr-sh:0 10px 34px -22px #000;
  --hero-top:#101218;               /* hero gradient's first color     */
  --hero-bot:#0B0C10;               /* hero gradient's last color      */
  --hero-veil:rgba(13,13,15,.55);   /* hero::after darkness veil       */
  --on-hero:#d9d9e0;                /* light body text on the hero     */
  --on-hero-2:#fff;                 /* strong text on the hero         */
  --card-dark:0 34px 70px -30px rgba(0,0,0,.9); /* dashboard shadow    */
  --hero-glow:rgba(255,0,0,.24); /* the big glow above the hero     */
  --hero-veil-sh:0 1px 10px rgba(0,0,0,.6); /* hero text shadow          */
  /* The hero's 3D dashboard card — this was also always dark           */
  --card-bg:linear-gradient(160deg,rgba(38,38,46,.94) 0%,rgba(22,22,26,.96) 46%,rgba(17,17,21,.98) 100%);
  --card-sheen:rgba(255,255,255,.11);  /* faint light falling from top */
  --menu-bg:rgba(22,22,26,.97);         /* mobile navigation panel     */
}

/* ---------------------------------------------------- LIGHT THEME
   Only the surface/text tokens change. The glass overlays and
   text-shadows on buttons (rgba whites/blacks) read correctly in both
   themes, so they never needed changing.                              */
:root[data-theme="light"]{
  --bg:#f7f7f9;
  --bg-2:#ffffff;
  --bg-3:#eeeef2;
  --line:rgba(0,0,0,.10);
  --line-2:rgba(0,0,0,.18);
  --txt:#141417;
  --txt-2:#55555f;
  --txt-3:#85858f;
  --red-soft:rgba(255,59,59,.10);
  /* In light mode pure #ff0000 gives 4.0:1 on white — just below
     WCAG AA (4.5:1). We darken it slightly so that red text (links, badges)
     and red buttons both stay readable. In the dark theme --red is left
     alone, where bright red reads better on white text. */
  --red:#d40000;
  --red-2:#e11d1d;
  --grad:linear-gradient(135deg,#d40000 0%,#e11d1d 55%,#ef4444 100%);
  --glass:rgba(0,0,0,.035);
  --glass-2:rgba(0,0,0,.06);
  --sh:0 18px 50px -20px rgba(0,0,0,.28);
  --sh-red:0 16px 44px -18px rgba(255,0,0,.45);

  /* The header becomes a light white glass — the text stays dark */
  --hdr-bg:rgba(255,255,255,.72);
  --hdr-bg-s:rgba(255,255,255,.92);
  --hdr-sh:0 10px 34px -22px rgba(0,0,0,.28);

  /* The hero becomes a light gradient — paragraph text must be dark,
     otherwise #fff disappears against white. */
  --hero-top:#ffffff;
  --hero-bot:#f0f0f4;
  --hero-veil:rgba(255,255,255,.55);
  --on-hero:#4a4a55;
  --on-hero-2:#141417;
  /* Lighten the card shadow — a dark shadow looks very "dark"
     on a light background */
  --card-dark:0 24px 54px -30px rgba(0,0,0,.34);
  --hero-glow:rgba(255,0,0,.12);
  --hero-veil-sh:none; /* text-shadow looks murky on white */
  --card-bg:linear-gradient(160deg,#ffffff 0%,#fbfbfd 46%,#f4f4f7 100%);
  --card-sheen:rgba(255,255,255,.9);
  --menu-bg:rgba(255,255,255,.97);
}
/* When switching themes, hold the colours still for one frame,
   otherwise the whole chain from --bg to --txt repaints at once
   and the eye gets a harsh flash */
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{
  transition:background-color .28s var(--ease),border-color .28s var(--ease),
             color .28s var(--ease),box-shadow .28s var(--ease)!important;
}

*,*::before,*::after{box-sizing:border-box}
/* `scroll-behavior:smooth` is deliberately not set — anchor clicks run
   JS's custom eased tween instead (js/aiman.js → initSmoothScroll).
   If native + tween both run at once you get a double scroll.
   scroll-padding is still set so that for reduced-motion users the jump
   does not hide under the header. */
html{scroll-padding-top:calc(var(--hdr) + 20px);-webkit-text-size-adjust:100%;
  /* blocks native bounce/refresh alongside virtual scroll,
     otherwise on mobile the rubber-band effect jumps the scroll again */
  /* touch-action: pan-y is disabled so that native panning on mobile
     does not steal from our engine; pinch-zoom and double-tap zoom
     are kept for accessibility */
  overscroll-behavior-y:none;touch-action:pan-x pinch-zoom}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  font-size:15.5px;line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif;line-height:1.14;margin:0;letter-spacing:-.02em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------- ambient backdrop
   Two slowly drifting red glow blobs — behind the entire site.
   Fixed + z-index:-1, so no section's layout shifts at all.        */
body::before{
  content:"";position:fixed;inset:-25vh -10vw;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 16% 8%,  rgba(255,0,0,.20), transparent 62%),
    radial-gradient(32vw 32vw at 88% 30%, rgba(255,59,59,.14), transparent 64%),
    radial-gradient(42vw 42vw at 55% 96%, rgba(255,0,0,.13), transparent 66%);
  animation:drift 26s ease-in-out infinite alternate;
}
/* Light theme: the glows are toned down, otherwise the page looks pink
   on a white page. The grid lines are also softened (below).           */
:root[data-theme="light"] body::before{opacity:.5}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(72% 62% at 50% 32%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(72% 62% at 50% 32%, #000 0%, transparent 78%);
}
/* the grid lines are white — they would vanish on a light background,
   so we make them black instead */
:root[data-theme="light"] body::after{
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.2vw,-1.8vh,0) scale(1.06)}
  100%{transform:translate3d(-1.6vw,2.4vh,0) scale(1.02)}
}
:focus-visible{outline:2px solid var(--red-2);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:22px}
.pad{padding-block:clamp(64px,8vw,110px)}

/* ---------------------------------------------------------- backgrounds */
.bg-fx{position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(1100px 620px at 12% -8%, rgba(255,0,0,.16), transparent 62%),
  radial-gradient(900px 560px at 92% 8%, rgba(255,59,59,.10), transparent 60%),
  radial-gradient(760px 620px at 50% 108%, rgba(255,0,0,.07), transparent 62%),
  var(--bg);
}
.bg-fx::after{content:'';position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:900;min-height:var(--hdr);display:flex;align-items:center;
  background:var(--hdr-bg);backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);border-bottom:1px solid var(--line);
  transition:background .3s,border-color .3s}
.hdr.scrolled{background:var(--hdr-bg-s);border-bottom-color:var(--line-2);box-shadow:var(--hdr-sh)}
.hdr__in{display:flex;align-items:center;gap:12px;width:100%}

/* ------------------------------------------------------------ brand logo
   A red tile + a white "A" whose crossbar becomes a play triangle.
   A sheen runs top to bottom, a lift + sweep on hover, and a soft glow behind. */
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo__mark{position:relative;width:42px;height:42px;border-radius:13px;flex-shrink:0;
  display:grid;place-items:center;isolation:isolate;
  background:linear-gradient(145deg,#ff5252 0%,#ff0000 46%,#c40000 100%);
  box-shadow:0 6px 18px -6px rgba(255,0,0,.7),inset 0 1px 0 rgba(255,255,255,.32),
             inset 0 -1px 0 rgba(0,0,0,.22);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-radius .45s var(--ease);
  overflow:hidden}
/* the faint light at the top — gives the tile glassy depth */
.logo__mark::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 46%,transparent 62%)}
/* a diagonal shine on hover — runs once, then stops */
.logo__mark::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.55) 50%,transparent 66%);
  transform:translateX(-130%);transition:transform .85s var(--ease)}
.logo:hover .logo__mark{transform:translateY(-2px) scale(1.06);border-radius:15px;
  box-shadow:0 14px 30px -8px rgba(255,0,0,.85),inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -1px 0 rgba(0,0,0,.22)}
.logo:hover .logo__mark::after{transform:translateX(130%)}
.logo__mark svg{width:100%;height:100%;display:block;position:relative;z-index:1}
/* the "A" slash — a nod to YouTube */
.logo__mark .lg-tri{transform-origin:19px 19px;transition:transform .45s var(--ease)}
.logo:hover .logo__mark .lg-tri{transform:rotate(90deg)}
/* a soft long pulse behind — very subtle, not harsh on the eyes */
.logo__mark::before, .logo__mark::after{pointer-events:none}
.logo__pulse{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,0,0,.55);animation:logoPulse 3.4s var(--ease) infinite}
@keyframes logoPulse{
  0%{box-shadow:0 0 0 0 rgba(255,0,0,.5)}
  55%{box-shadow:0 0 0 9px rgba(255,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,0,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .logo__pulse{animation:none}
  .logo:hover .logo__mark::after{display:none}
}
.logo__txt{display:flex;flex-direction:column;line-height:1.15}
.logo__txt b{font-family:'Montserrat',sans-serif;font-size:14.5px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(92deg,#fff 30%,#ffb3b3 100%);-webkit-background-clip:text;background-clip:text;
  color:transparent;transition:filter .3s}
.logo:hover .logo__txt b{filter:drop-shadow(0 0 12px rgba(255,60,60,.55))}
.logo__txt small{font-size:10.5px;color:var(--txt-3);letter-spacing:.12em;text-transform:uppercase;margin-top:1px}

/* Let the search box shrink more — when the header gets tight the space
   should come from here, not from the nav links. This is the real
   "flexible" part of the header. */
.search{position:relative;flex:1 1 220px;max-width:220px;min-width:88px;margin-left:6px}
.search input{width:100%;height:40px;padding:0 38px 0 40px;border-radius:999px;background:var(--glass);
  border:1px solid var(--line);font-size:13.5px;transition:.28s}
.search input::placeholder{color:var(--txt-3)}
.search input:focus{outline:0;background:var(--glass-2);border-color:var(--line-2);width:100%}
.search svg{position:absolute;left:14px;top:11px;width:17px;height:17px;color:var(--txt-3);pointer-events:none}

/* The nav must never clip — so three things:
   1. `overflow:visible` (it used to be hidden): no link ever gets cut
   2. `flex-wrap:wrap` + `justify-content:flex-end`: when space runs out
      the links move to the next line instead of disappearing
   3. links `flex-shrink:0` + `white-space:nowrap`: the text itself never
      wraps — all of it or nothing
   The burger appears down to 1080px, so the wrap zone only exists
   below that. */
.nav{display:flex;align-items:center;gap:1px;margin-left:auto;min-width:0;flex-shrink:1;
  flex-wrap:wrap;justify-content:flex-end;overflow:visible;row-gap:2px}
/* So that 13 links fit on one line, padding 8px→7px and font→12px.
   The "More" dropdown was removed; all links now sit directly in the nav. */
.nav a{padding:7px 7px;border-radius:9px;font-size:12px;color:var(--txt-2);transition:.24s;position:relative;white-space:nowrap;flex-shrink:0}
.nav a:hover{color:var(--txt);background:var(--glass)}
.nav a.on{color:var(--txt);background:var(--glass)}
.nav a.on::after{content:'';position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;background:var(--grad)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;
  border-radius:999px;border:1px solid transparent;font-size:13.5px;font-weight:500;cursor:pointer;
  transition:transform .28s var(--ease),box-shadow .28s,background .28s,border-color .28s;white-space:nowrap}
.btn svg{width:17px;height:17px;flex-shrink:0}
.hero .btn{text-shadow:var(--hero-veil-sh)}
.btn--red{position:relative;isolation:isolate;overflow:hidden;background:var(--grad);color:#fff;box-shadow:var(--sh-red)}
/* a faint sheen falling from top to bottom — makes the button look "3D" */
.btn--red::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 42%,transparent 60%)}
.btn--red::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);
  transform:translateX(-120%);transition:transform .7s var(--ease),opacity .2s}
.btn--red:hover{transform:translateY(-2px);box-shadow:0 22px 52px -14px rgba(255,0,0,.8),0 0 0 1px rgba(255,255,255,.18) inset}
.btn--red:hover::after{opacity:1;transform:translateX(120%)}
.btn--red:active{transform:translateY(0) scale(.975);box-shadow:0 8px 22px -10px rgba(255,0,0,.7)}
/* The subscribe bell — two light "rings" on hover, silent under reduced-motion */
.btn__bell{width:17px;height:17px;flex-shrink:0;transform-origin:50% 12%}
.btn:hover .btn__bell{animation:bellRing 1.1s var(--ease) 2}
.btn__bell + *{margin-left:2px}
@keyframes bellRing{
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(13deg)}
  30%{transform:rotate(-11deg)}
  45%{transform:rotate(7deg)}
  60%{transform:rotate(-4deg)}
  75%{transform:rotate(2deg)}
}
.btn--ghost{position:relative;isolation:isolate;overflow:hidden;background:var(--glass);border-color:var(--line-2);color:var(--txt)}
.btn--ghost::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.16) 50%,transparent 68%);
  transform:translateX(-120%);transition:transform .7s var(--ease),opacity .2s}
.btn--ghost:hover{background:var(--glass-2);transform:translateY(-2px);border-color:rgba(255,255,255,.3);color:#fff}
.btn--ghost:hover::after{opacity:1;transform:translateX(120%)}
.btn--ghost:active{transform:translateY(0) scale(.975)}
/* every button gets its own subtle lift — the icon rises with the button */
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg:not(.btn__bell){transform:scale(1.12)}
.btn--lg{height:50px;padding:0 26px;font-size:15px}
.btn--sm{height:34px;padding:0 14px;font-size:12.5px}
.btn--block{width:100%}

.burger{display:none;width:40px;height:40px;border-radius:11px;background:var(--glass);border:1px solid var(--line);
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{width:17px;height:2px;background:var(--txt);border-radius:2px;transition:.3s var(--ease)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mnav{position:fixed;inset:var(--hdr) 0 auto 0;z-index:890;background:var(--menu-bg);
  backdrop-filter:blur(22px);border-bottom:1px solid var(--line);padding:14px 22px 22px;
  display:none;flex-direction:column;gap:2px;max-height:calc(100dvh - var(--hdr));overflow:auto}
.mnav.open{display:flex}
.mnav a{padding:13px 12px;border-radius:12px;color:var(--txt-2);font-size:15px;transition:.2s}
.mnav a:hover{background:var(--glass);color:var(--txt)}
.mnav .btn{margin-top:10px}

/* ----------------------------------------------------------------- hero */
.hero{position:relative;padding-block:clamp(56px,8vw,104px) clamp(56px,8vw,92px);overflow:hidden;isolation:isolate}
/* hero background — clean gradient + red glow (no photo) */
.hero__bg{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(90% 70% at 78% 8%,rgba(255,0,0,.14) 0%,rgba(255,0,0,0) 60%),
    linear-gradient(160deg,var(--hero-top) 0%,var(--bg) 58%,var(--hero-bot) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 22% 50%,var(--hero-veil) 0%,transparent 62%)}
.hero__glow{position:absolute;width:min(760px,90vw);aspect-ratio:1;left:50%;top:-34%;z-index:-1;
  transform:translateX(-50%);background:radial-gradient(circle,var(--hero-glow),transparent 68%);
  filter:blur(50px);pointer-events:none}
.hero__in{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4vw,46px);align-items:center;position:relative}

/* ==================================================== 3D CHANNEL DASHBOARD */
/* This card comes AFTER .hero__in (below it) — so it is safe from clipping,
   and it stands above .hero's negative-z pseudo-elements via its own z-index. */
.dash{margin-top:clamp(28px,4.5vw,52px);perspective:1500px;perspective-origin:50% 40%}
/* perspective parent: the tilt transform is applied inside it */
.dash__tilt{position:relative;transform-style:preserve-3d;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);will-change:transform}
.dash__tilt.is-tilting{transition:transform .12s linear,box-shadow .5s var(--ease)}

.dash__card{position:relative;transform-style:preserve-3d;border-radius:var(--r-xl);
  border:1px solid var(--line-2);background:var(--card-bg);
  box-shadow:var(--card-dark),0 8px 26px -12px rgba(255,0,0,.28),
    inset 0 1px 0 var(--card-sheen);
  padding:clamp(18px,2.4vw,26px);overflow:hidden}
/* light falling from top to bottom — a sense of depth */
.dash__card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 34%),
    radial-gradient(90% 120% at 88% -10%,rgba(255,0,0,.22) 0%,rgba(255,0,0,0) 58%)}
.dash__card > *{position:relative;z-index:1}

/* --- card header --- */
.dash__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.dash__logo{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(145deg,#ff5252,#ff0000 52%,#c40000);color:#fff;
  font-family:Montserrat,sans-serif;font-weight:800;font-size:15px;
  box-shadow:0 5px 14px -5px rgba(255,0,0,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.dash__ttl{font-family:Montserrat,sans-serif;font-size:14.5px;font-weight:700;line-height:1.25}
.dash__sub{font-size:11.5px;color:var(--txt-3);letter-spacing:.05em}
.dash__stamp{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;color:var(--txt-2);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;background:var(--glass);white-space:nowrap}
.dash__dot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex:0 0 7px;
  box-shadow:0 0 0 3px rgba(34,197,94,.18);animation:dotPulse 2.4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* --- KPI tiles --- */
.dash__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,14px)}
.kpi{transform:translateZ(26px);border-radius:var(--r);padding:clamp(11px,1.4vw,15px);
  background:var(--glass);border:1px solid var(--line);
  box-shadow:0 8px 18px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .3s var(--ease),border-color .3s,background .3s}
.kpi:hover{background:var(--glass-2);border-color:var(--line-2)}
.kpi__l{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--txt-3);
  letter-spacing:.07em;text-transform:uppercase;margin-bottom:7px}
.kpi__l svg{width:13px;height:13px;flex:0 0 13px;color:var(--red-2)}
.kpi__n{font-family:Montserrat,sans-serif;font-weight:700;
  font-size:clamp(17px,2.2vw,25px);line-height:1.1;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff,#ffc9c9);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.kpi__m{font-size:11px;color:var(--txt-3);margin-top:4px}

/* --- main row: sparkline + top video --- */
.dash__row{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(8px,1.2vw,14px);margin-top:clamp(8px,1.2vw,14px)}
.panel{transform:translateZ(16px);border-radius:var(--r);padding:clamp(12px,1.6vw,16px);
  background:var(--glass);border:1px solid var(--line);min-width:0}
.panel__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.panel__t{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2)}
.panel__v{font-family:Montserrat,sans-serif;font-size:13.5px;font-weight:700;color:var(--red-2)}
.panel__note{color:var(--txt-3);text-transform:none;letter-spacing:0;font-size:10.5px;
  border:1px solid var(--line);border-radius:999px;padding:2px 7px;margin-left:6px}

.spark{display:block;width:100%;height:clamp(74px,9vw,110px);overflow:visible}
.spark__line{fill:none;stroke:url(#dgStroke);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.5s var(--ease) .15s}
.in .spark__line{stroke-dashoffset:0}
.spark__area{fill:url(#dgFill);opacity:0;transition:opacity .9s ease .6s}
.in .spark__area{opacity:1}
.spark__dot{fill:#fff;stroke:var(--red);stroke-width:2.5;
  opacity:0;transition:opacity .4s ease 1.1s}
.in .spark__dot{opacity:1}
.spark__axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--txt-3);margin-top:7px}

/* top video tile */
.topv{display:flex;gap:11px;align-items:center;min-width:0}
.topv__th{position:relative;width:74px;flex:0 0 74px;aspect-ratio:9/16;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-3)}
.topv__th img{width:100%;height:100%;object-fit:cover;display:block}
.topv__badge{position:absolute;left:5px;bottom:5px;font-size:9px;font-weight:600;letter-spacing:.05em;
  padding:2px 6px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;backdrop-filter:blur(4px)}
.topv__meta{min-width:0}
.topv__t{font-size:12.5px;line-height:1.35;color:var(--txt);font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.topv__v{font-family:Montserrat,sans-serif;font-size:15px;font-weight:700;color:var(--red-2);margin-top:5px}
.topv__d{font-size:11px;color:var(--txt-3);margin-top:2px}

/* --- footer strip: 3 real facts, no estimates --- */
.dash__foot{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.2vw,14px);
  margin-top:clamp(8px,1.2vw,14px)}
.fact{transform:translateZ(10px);border-radius:12px;padding:11px 13px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);min-width:0}
.fact__k{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3)}
.fact__v{font-size:13.5px;color:var(--txt);margin-top:4px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- responsive: goes flat on small screens --- */
@media (max-width:860px){
  .dash__kpis{grid-template-columns:repeat(2,1fr)}
  .dash__row{grid-template-columns:1fr}
  .dash__foot{grid-template-columns:1fr}
}
@media (max-width:560px){
  .dash__top{padding-bottom:12px;margin-bottom:13px}
  .dash__stamp{margin-left:0;order:3}
  .kpi__n{font-size:19px}
}
@media (hover:none){.dash__tilt{transform:none!important}}
@media (prefers-reduced-motion:reduce){
  .dash__tilt{transform:none!important;transition:none}
  .dash__dot{animation:none}
  .spark__line{transition:none;stroke-dashoffset:0}
  .spark__area,.spark__dot{transition:none;opacity:1}
  .kpi:hover{transform:none}
}

/* ================================================ ORIGINAL CHANNEL POSTER
   A graphic (SVG) made in-house — NOT a stock image, and it contains no
   number that is not already on the dashboard. Everything comes from
   VIDEOS/PLAYLISTS, and the file was made as of 28 Sep 2026.
   Its PNG is what serves as the og:image (share preview). */
.poster{display:grid;place-items:center;margin-top:clamp(14px,2vw,22px)}
.poster__btn{position:relative;display:block;width:100%;max-width:640px;padding:0;border-radius:18px;
  overflow:hidden;border:1px solid var(--line-2);background:var(--bg-2);cursor:pointer;
  box-shadow:0 26px 54px -30px rgba(0,0,0,.92),0 6px 20px -12px rgba(255,0,0,.3);
  transition:transform .45s var(--ease),border-color .35s,box-shadow .45s var(--ease)}
.poster__btn:hover{transform:translateY(-3px);border-color:rgba(255,59,59,.45);
  box-shadow:0 34px 64px -30px rgba(0,0,0,.95),0 10px 28px -10px rgba(255,0,0,.42)}
.poster__btn:active{transform:translateY(-1px)}
.poster__btn:focus-visible{outline:2px solid var(--red-2);outline-offset:3px}
.poster__art{display:block;width:100%;height:auto}
.poster__glow{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 30%)}
.poster__tip{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;color:var(--txt-2);background:rgba(10,10,12,.72);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;backdrop-filter:blur(6px);white-space:nowrap;
  transition:opacity .3s,transform .3s var(--ease)}
.poster__btn:hover .poster__tip{opacity:0;transform:translateY(4px)}
.poster__tip svg{width:12px;height:12px}
.poster__note{font-size:11px;color:var(--txt-3);text-align:center;margin-top:9px}
@media (max-width:700px){
  /* on small screens the button becomes so small that the tip chip was
     covering the footer — so no chip there, just the note text. */
  .poster__tip{display:none}
  /* keeps the "back to top" button below away from the end of the note */
  .poster__note{padding-inline:56px}
}
@media (hover:none){.poster__btn:hover{transform:none}}

/* ------------------------------------------------- real channel banner
   The old 3D dashboard card used to be here. In its place is now the
   channel's REAL banner (assets/hero/aiman-channel-banner.jpg) — the very
   image shown at the top of the YouTube channel page. No mockup. */
.bnrg{position:relative;margin:clamp(28px,4.5vw,52px) 0 0;border-radius:var(--r-lg);
  overflow:hidden;background:var(--bg-2);border:1px solid var(--line);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9)}
.bnrg__img{display:block;width:100%;height:clamp(190px,26vw,300px);
  object-fit:cover;object-position:center 42%}
/* The dashboard picture is already 638x336 — do not crop it, show it whole,
   otherwise the bars and numbers get cut off. */
.bnrg__img--dash{height:auto;aspect-ratio:638/336;object-fit:contain;object-position:center}
.bnrg__bar{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:26px clamp(18px,3vw,30px) clamp(14px,2.2vw,20px);
  background:linear-gradient(to top,rgba(8,8,10,.94) 12%,rgba(8,8,10,.72) 52%,rgba(8,8,10,0))}
.bnrg__t{font-family:Montserrat,sans-serif;font-weight:700;font-size:clamp(15px,2vw,19px);
  line-height:1.2;letter-spacing:-.01em}
.bnrg__s{font-size:12px;color:var(--txt-2);margin-top:3px}
.bnrg__cap{position:absolute;top:12px;left:14px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt-2);background:rgba(8,8,10,.62);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;
  backdrop-filter:blur(6px)}
@media (max-width:560px){
  .bnrg__img{height:clamp(165px,44vw,220px)}
  .bnrg__img--dash{height:auto}
  .bnrg__bar{padding:24px 16px 14px}
  .bnrg__cap{display:none}
}
@media (prefers-reduced-motion:reduce){.bnrg{transition:none}}
@media (prefers-reduced-motion:reduce){
  .poster__btn,.poster__btn:hover{transform:none;transition:none}
  .poster__btn:hover .poster__tip{opacity:1;transform:none}
  .poster__tip{transition:none}
}

/* ---------------------------------------------------------- hero slider */
.slider{position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--bg-2);box-shadow:var(--sh)}
/* Split layout for vertical Shorts — the thumbnail is never cut */
.slider__vp{position:relative;aspect-ratio:16/8.2;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;background:var(--bg-2);
  display:grid;grid-template-columns:minmax(0,42%) 1fr;
  transition:opacity .75s var(--ease),visibility .75s var(--ease)}
.slide.on{opacity:1;visibility:visible}
.slide__ph{position:relative;overflow:hidden;background:var(--bg-3)}
.slide__ph img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:100%;width:auto;max-width:none;object-fit:cover;display:block}
/* fills the empty space beside a vertical image with a soft gradient */
.slide__ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(13,13,15,0) 62%,rgba(22,22,26,.55) 88%,rgba(22,22,26,.9) 100%)}
.slide__b{position:relative;z-index:2;padding:clamp(18px,3.2vw,34px);
  display:flex;flex-direction:column;gap:9px;align-items:flex-start;justify-content:center;min-width:0}
.slide__t{font-family:"Montserrat",sans-serif;font-size:clamp(15px,1.9vw,20px);font-weight:700;
  line-height:1.32;margin:0;color:var(--txt);max-width:30ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.slide__m{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--txt-2)}
.slide__m span{display:inline-flex;align-items:center;gap:5px}
.slide__m svg{width:14px;height:14px;opacity:.85}
.slide__m b{color:var(--txt);font-weight:600}
.slide__go{margin-top:4px;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:999px;
  background:var(--grad);color:#fff;font-size:13px;font-weight:600;box-shadow:var(--sh-red);
  transition:.24s var(--ease)}
.slide__go:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(255,0,0,.7)}
.slide__go svg{width:13px;height:13px}

.slider__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(13,13,15,.6);border:1px solid var(--line-2);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.24s;opacity:0}
.slider:hover .slider__nav,.slider__nav:focus-visible{opacity:1}
.slider__nav:hover{background:var(--red);border-color:var(--red);transform:translateY(-50%) scale(1.08)}
.slider__nav--prev{left:14px}.slider__nav--next{right:14px}
.slider__nav svg{width:19px;height:19px;pointer-events:none}
.slider__nav:disabled{opacity:0!important;cursor:default}

.slider__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;
  border-top:1px solid var(--line);background:var(--bg-2)}
.dots{display:flex;gap:7px;flex:1;min-width:0}
.dot{flex:1;max-width:62px;height:4px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:var(--line-2);overflow:hidden;position:relative;transition:.24s}
.dot:hover{background:var(--txt-3)}
.dot__fill{position:absolute;inset:0;width:0;background:var(--grad);border-radius:99px}
.dot.on .dot__fill{width:100%}
.dot.run .dot__fill{animation:dotFill 6s linear forwards}
@keyframes dotFill{from{width:0}to{width:100%}}
.slider__ct{font-size:12px;color:var(--txt-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.slider__pause{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--glass);
  color:var(--txt-2);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:.22s}
.slider__pause:hover{background:var(--red-soft);border-color:var(--red);color:var(--txt)}
.slider__pause svg{width:13px;height:13px}
.slider__pause .i-play{display:none}
.slider__pause.paused .i-play{display:block}
.slider__pause.paused .i-pause{display:none}
.av{position:relative;width:clamp(138px,18vw,208px);aspect-ratio:1;border-radius:50%;padding:3px;
  background:var(--grad);box-shadow:0 0 0 6px rgba(255,0,0,.07),0 22px 54px -26px rgba(255,0,0,.55);
  flex-shrink:0;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.av:hover{transform:scale(1.035);box-shadow:0 0 0 6px rgba(255,0,0,.12),0 26px 64px -22px rgba(255,0,0,.7)}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--bg-3)}
.av__live{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  background:var(--grad);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;box-shadow:var(--sh-red);white-space:nowrap}
.hero h1{font-size:clamp(30px,5.4vw,60px);font-weight:800;letter-spacing:-.035em;margin-bottom:16px;
  line-height:1.08;text-shadow:0 2px 20px rgba(0,0,0,.62),0 1px 3px rgba(0,0,0,.5);color:#fff}
/* line 2 hierarchy — lighter, gradient, slightly smaller */
.hero h1 .grad{display:inline-block;margin-top:6px;font-size:.62em;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(120deg,#ff5a5a 0%,#ff3b3b 45%,#ff8f8f 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tag{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line);font-size:12.5px;color:var(--on-hero-2);
  text-shadow:0 1px 8px rgba(0,0,0,.55)}
.tag svg{width:13px;height:13px;color:var(--red-2)}
.tag--live{border-color:rgba(255,0,0,.42);background:rgba(255,0,0,.1);color:#ffc4c4}
.hero p.bio{max-width:60ch;color:var(--on-hero);font-size:15.5px;line-height:1.62;margin:0 0 24px;
  text-shadow:var(--hero-veil-sh)}
.hero p.bio b{color:var(--on-hero-2);font-weight:600}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.linkrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.linkrow a{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line);font-size:12.5px;font-weight:500;color:#e2e2e8;
  text-shadow:0 1px 8px rgba(0,0,0,.5);transition:.26s var(--ease)}
.linkrow a:hover{transform:translateY(-2px);color:var(--txt);border-color:var(--line-2);background:var(--glass-2)}
.linkrow svg{width:15px;height:15px}
/* The footer's linkrow sits on the page background (not the hero image),
   so it needs no light text-shadow — in the light theme that
   made white text invisible on a white background. */
.ftr .linkrow a{color:var(--txt-2);text-shadow:none}
/* The "Install app" button looks exactly like the linkrow buttons,
   but it is a <button> and not an <a>, so it had to be styled separately */
.installBtn{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  background:var(--red-soft);border:1px solid var(--line-2);font-size:12.5px;font-weight:600;
  color:var(--txt);cursor:pointer;text-align:left;transition:.26s var(--ease)}
.installBtn:hover{transform:translateY(-2px);background:var(--red);color:#fff;border-color:transparent;
  box-shadow:var(--sh-red)}
.installBtn[hidden]{display:none}
.installBtn svg{width:15px;height:15px;flex-shrink:0}

/* ---- iOS "Add to Home Screen" tip -----------------------------------
   Slides up from below; no animation under reduced-motion.      */
.iosTip{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:70;
  display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 32px));
  padding:13px 15px;border-radius:16px;border:1px solid var(--line-2);
  background:var(--bg-2);box-shadow:var(--sh);font-size:13.5px;color:var(--txt-2);
  transition:transform .42s var(--ease)}
.iosTip[hidden]{display:none}
.iosTip:not([hidden]){transform:translate(-50%,0)}
.iosTip svg{width:19px;height:19px;flex-shrink:0;color:var(--red)}
.iosTip b{color:var(--txt)}
.iosTip button{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:0;
  background:var(--glass);color:var(--txt-2);font-size:17px;line-height:1;cursor:pointer}
.iosTip button:hover{background:var(--red);color:#fff}

/* --------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(34px,5vw,56px)}
.stat{position:relative;overflow:hidden;padding:24px 22px;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .38s var(--ease),border-color .38s,box-shadow .38s}
.stat::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .38s;
  background:radial-gradient(420px 190px at 50% 0%,rgba(255,0,0,.16),transparent 70%)}
.stat:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--sh)}
.stat:hover::before{opacity:1}
.stat__ic{width:42px;height:42px;border-radius:13px;background:var(--red-soft);
  display:grid;place-items:center;margin-bottom:15px;border:1px solid rgba(255,0,0,.24)}
.stat__ic svg{width:20px;height:20px;color:var(--red-2)}
.stat__n{font-family:'Montserrat',sans-serif;font-size:clamp(25px,3.1vw,36px);font-weight:800;
  letter-spacing:-.03em;line-height:1}
.stat__l{margin-top:7px;font-size:12.5px;color:var(--txt-3);letter-spacing:.07em;text-transform:uppercase}

/* ------------------------------------------------------------- heading */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:34px}
.shead .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red-2);margin-bottom:11px}
.shead .eyebrow::before{content:'';width:26px;height:2px;background:var(--grad);border-radius:2px}
.shead h2{font-size:clamp(25px,3.9vw,42px);font-weight:800}
.shead p{max-width:52ch;color:var(--txt-2);font-size:14.5px;margin-top:11px}
/* "6 min read" badge — JS (initReadTime) fills it in by counting the
   section's words. It is content-driven, so a hand-written number can
   never be wrong. */
.rdtime{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;
  border-radius:999px;background:var(--glass);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--txt-2);white-space:nowrap;letter-spacing:.01em}
.rdtime:empty{display:none}
.rdtime::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0}

/* ---------------------------------------------------------------- tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.tab{padding:9px 17px;border-radius:999px;background:var(--glass);border:1px solid var(--line);
  color:var(--txt-2);font-size:13.5px;cursor:pointer;transition:.28s var(--ease)}
.tab:hover{color:var(--txt);background:var(--glass-2);transform:translateY(-2px)}
.tab.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--sh-red)}

/* -------------------------------------------------------------- videos */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:20px;align-items:start}
.vcard{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);cursor:pointer;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;
  display:flex;flex-direction:column}
.vcard:hover{transform:translateY(-8px);border-color:rgba(255,0,0,.4);box-shadow:var(--sh-red)}
.vcard__th{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3)}
/* Shorts are vertical, so show them at 9/16 so they are not cropped */
.vcard--short{grid-column:span 1}
.vcard--short .vcard__th{aspect-ratio:9/16}
.vcard__th img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.vcard:hover .vcard__th img{transform:scale(1.09)}
.vcard__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.86),transparent 58%);
  opacity:.75;transition:opacity .4s}
.vcard:hover .vcard__shade{opacity:.95}
.play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;
  background:rgba(255,0,0,.9);display:grid;place-items:center;box-shadow:0 12px 34px -8px rgba(255,0,0,.85);
  transition:transform .4s var(--ease),background .3s}
.vcard:hover .play{transform:scale(1.18);background:var(--red)}
.play svg{width:20px;height:20px;color:#fff;margin-left:3px}

/* "Watch on YouTube" strip under the play button. Only shown while the
   card is hovered or keyboard-focused — on touch screens there is no
   hover at all, so it would otherwise never appear. `.vhov` is toggled
   by JS for touch users, who get it on tap instead. */
.vcard__go{
  position:absolute;left:50%;top:calc(50% + 42px);transform:translate(-50%,6px);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:5px 11px;border-radius:999px;
  background:rgba(8,8,10,.9);border:1px solid var(--line-2);
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:#fff;
  opacity:0;pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease)
}
.vcard:hover .vcard__go,
.vcard:focus-visible .vcard__go,
.vcard.vhov .vcard__go{opacity:1;transform:translate(-50%,0)}
.vcard__go svg{width:12px;height:12px}
.dur{position:absolute;right:9px;bottom:9px;padding:3px 8px;border-radius:6px;background:rgba(8,8,10,.88);
  font-size:11.5px;font-weight:500;letter-spacing:.03em;border:1px solid var(--line)}
.badge{position:absolute;left:9px;top:9px;padding:4px 10px;border-radius:7px;background:var(--grad);
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;box-shadow:var(--sh-red)}
.vcard__b{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column}
/* on hovering a card a shine (gloss) sweeps from top to bottom */
.vcard::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.13) 48%,transparent 66%);
  transform:translateX(-62%)}
.vcard:hover::after{animation:sweep .95s var(--ease) forwards}
@keyframes sweep{
  0%{opacity:1;transform:translateX(-62%)}
  100%{opacity:0;transform:translateX(62%)}
}
.vcard__t{font-family:'Montserrat',sans-serif;font-size:14.5px;font-weight:600;line-height:1.42;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px}
.meta{display:flex;align-items:center;gap:13px;margin-top:auto;font-size:12.2px;color:var(--txt-3)}
.meta span{display:inline-flex;align-items:center;gap:5px}
.meta svg{width:13.5px;height:13.5px;flex-shrink:0}

/* ---------------------------------------------------------- playlists */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px;margin-top:26px}
.pcard{border-radius:var(--r);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);
  transition:transform .38s var(--ease),border-color .38s,box-shadow .38s;display:block}
.pcard:hover{transform:translateY(-7px);border-color:var(--line-2);box-shadow:var(--sh)}
.pcard__th{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3)}
.pcard__th img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pcard:hover .pcard__th img{transform:scale(1.08)}
.pcard__n{position:absolute;right:8px;bottom:8px;padding:3px 8px;border-radius:6px;background:rgba(8,8,10,.9);
  font-size:11.5px;border:1px solid var(--line)}
.pcard__b{padding:14px 15px 16px}
.pcard__t{font-family:'Montserrat',sans-serif;font-size:14.5px;font-weight:600;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__m{font-size:12.2px;color:var(--txt-3)}

/* ------------------------------------------------------------ gallery */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  grid-auto-rows:clamp(86px,9vw,128px);grid-auto-flow:row dense;gap:11px}
.gitem{position:relative;grid-row:span 2;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg-3);cursor:zoom-in;border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.gitem:nth-child(6n+1){grid-row:span 4}
.gitem:hover{transform:scale(1.035);z-index:2;border-color:rgba(255,0,0,.45);box-shadow:var(--sh-red)}
/* every tile drifts up and down slightly — it makes the gallery feel alive.
   `translate` is a separate property, so the hover `transform:scale()` and
   this can run together without one killing the other. */
.gitem{animation:bob 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.85s)}
@keyframes bob{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}
.gitem:hover{animation-play-state:paused}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.gitem:hover img{transform:scale(1.1)}
.gitem__o{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.9),rgba(8,8,10,.05) 55%);
  opacity:0;display:flex;align-items:flex-end;padding:12px;transition:opacity .35s}
.gitem:hover .gitem__o{opacity:1}
.gitem__o p{font-size:12.2px;line-height:1.45;color:#e9e9ee;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.gitem__tag{position:absolute;left:9px;top:9px;padding:3px 9px;border-radius:6px;background:rgba(8,8,10,.8);
  border:1px solid var(--line);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(6px)}

/* -------------------------------------------------------------- tiktok */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.rail::-webkit-scrollbar-track{background:transparent}

/* arrows around the rail + a scroll progress line below.
   The arrows only show when there is something ahead/behind (JS toggles them),
   so on small screens the buttons never cover the content. */
.railwrap{position:relative}
.rail.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.railnav{position:absolute;top:calc(50% - 22px);translate:0 -50%;z-index:6;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(13,13,15,.86);border:1px solid var(--line-2);color:var(--txt);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.9);cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s,transform .3s var(--ease)}
.railnav svg{width:19px;height:19px}
.railnav--prev{left:-8px;transform:translateX(6px)}
.railnav--next{right:-8px;transform:translateX(-6px)}
.railnav.show{opacity:1;visibility:visible;transform:translateX(0)}
.railnav:hover{background:var(--red);border-color:var(--red);box-shadow:var(--sh-red)}
.railnav:disabled{opacity:0;visibility:hidden}
.railbar{height:3px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:12px}
.railbar span{display:block;height:100%;width:30%;border-radius:99px;background:var(--grad);
  transform-origin:0 50%;transition:transform .18s linear,width .3s var(--ease)}
.tt{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);scroll-snap-align:start;
  transition:transform .38s var(--ease),border-color .38s,box-shadow .38s}
.tt:hover{transform:translateY(-7px);border-color:var(--line-2);box-shadow:var(--sh)}
.tt__fr{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--bg-3);cursor:pointer}
.tt__fr img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tt:hover .tt__fr img{transform:scale(1.07)}
.tt__fr .play{width:46px;height:46px}
.tt__fr .play svg{width:17px;height:17px}
.tt__v{position:absolute;left:9px;top:9px;display:flex;align-items:center;gap:5px;padding:4px 9px;
  border-radius:7px;background:rgba(8,8,10,.82);font-size:11.5px;backdrop-filter:blur(6px);
  border:1px solid var(--line)}
.tt__v svg{width:12px;height:12px;color:var(--red-2)}
.tt__b{padding:12px 13px 14px;display:flex;flex-direction:column;gap:9px;flex:1}
.tt__c{font-size:12.8px;line-height:1.5;color:var(--txt-2);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}

/* ------------------------------------------------------- channel pulse */
.pulse{position:relative;overflow:hidden}
.pulse__row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:34px}
.pcard2{position:relative;overflow:hidden;padding:22px;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .38s var(--ease),border-color .38s,box-shadow .38s}
.pcard2:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--sh)}
.pcard2__i{width:40px;height:40px;border-radius:12px;background:var(--red-soft);display:grid;
  place-items:center;margin-bottom:14px;border:1px solid rgba(255,0,0,.24)}
.pcard2__i svg{width:19px;height:19px;color:var(--red-2)}
.pcard2__n{font-family:'Montserrat',sans-serif;font-size:clamp(22px,2.6vw,31px);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:#fff}
.pcard2__l{margin-top:7px;font-size:12px;color:var(--txt-3);letter-spacing:.07em;text-transform:uppercase}
.pcard2__s{margin-top:9px;font-size:12.5px;color:var(--txt-2);line-height:1.5}

.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.mcard{display:block;position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--bg-2);text-decoration:none;
  transition:transform .38s var(--ease),border-color .38s,box-shadow .38s}
.mcard:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--sh)}
.mcard__bar{height:4px;background:var(--grad)}
.mcard__in{padding:22px}
.mcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.mcard__t{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:700;color:#fff}
.mcard__n{font-size:11.5px;color:var(--txt-3);letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--line);white-space:nowrap}
.mcard__v{display:flex;align-items:baseline;gap:7px;margin-bottom:6px}
.mcard__v b{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em;color:#fff}
.mcard__v span{font-size:12.5px;color:var(--txt-3)}
.mtrack{height:6px;border-radius:6px;background:var(--glass-2);overflow:hidden;margin-top:14px}
.mtrack i{display:block;height:100%;border-radius:6px;background:var(--grad)}
.mcard__go{display:flex;align-items:center;gap:6px;margin-top:16px;font-size:12.5px;
  color:var(--red-2);font-weight:500;transition:gap .28s var(--ease)}
.mcard:hover .mcard__go{gap:11px}
.mcard__go svg{width:14px;height:14px}
.pnote{margin-top:22px;font-size:12.5px;color:var(--txt-3);line-height:1.6}
.pnote a{color:var(--txt-2)}

/* --------------------------------------------------------------- about */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,60px);align-items:center}
.about__media{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh);aspect-ratio:4/5;background:var(--bg-3)}
.about__media img{width:100%;height:100%;object-fit:cover}
.about__media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,13,15,.9),transparent 48%)}
.about__cap{position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:2}
.about__cap b{font-family:'Montserrat',sans-serif;font-size:19px;display:block}
.about__cap small{color:var(--txt-2);font-size:12.5px}
.about__txt h2{font-size:clamp(25px,3.7vw,40px);font-weight:800;margin-bottom:18px}
.about__txt p{color:var(--txt-2);margin:0 0 16px}
.about__txt p b{color:var(--txt);font-weight:500}
.facts{margin:26px 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.fact{display:flex;align-items:center;gap:13px;padding:14px 17px;background:var(--bg-2)}
.fact__i{width:34px;height:34px;border-radius:10px;background:var(--red-soft);display:grid;
  place-items:center;flex-shrink:0;border:1px solid rgba(255,0,0,.2)}
.fact__i svg{width:16px;height:16px;color:var(--red-2)}
.fact b{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3);font-weight:500}
.fact span{font-size:14px}
a.fact{transition:.24s}
a.fact:hover{background:var(--glass)}
a.fact:hover .fact__i{background:var(--red)}
a.fact:hover .fact__i svg{color:#fff}
a.fact:hover b{color:var(--txt-2)}

/* -------------------------------------------------------------- footer */
.ftr{border-top:1px solid var(--line);background:var(--bg-2);margin-top:clamp(40px,6vw,80px)}
/* Last ad on the page: sits flush against the copyright bar above it and
   the footer's bottom padding below, so it reads as part of the footer
   rather than as a stray banner under the site. */
.ftr__adlast{padding-bottom:clamp(28px,4vw,48px)}
.ftr__in{display:grid;grid-template-columns:1.25fr .85fr 1.5fr;gap:clamp(28px,4vw,52px);
  padding-block:clamp(44px,6vw,72px);align-items:start}
.ftr h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin-bottom:18px;font-weight:600}
.ftr p{color:var(--txt-2);font-size:14px;line-height:1.65;margin:0 0 18px;max-width:46ch}
.ftr__brand p{margin-bottom:22px}
/* The brand column is the narrowest of the three footer columns, so its ad
   is capped and centred rather than allowed to stretch or overflow. */
.ftr__brand .adslot{max-width:468px;margin-inline:auto}

/* footer: real channel facts, derived from the same data shown above */
.fmeta{display:grid;gap:10px;margin:0 0 24px;padding:18px;border-radius:16px;
  border:1px solid var(--line);background:var(--glass)}
.fmeta div{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13.5px}
.fmeta dt,.fmeta .k{color:var(--txt-3)}
.fmeta .v{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}

/* footer: labelled social pills */
.ftr .linkrow{gap:9px}
.ftr .linkrow a{padding:9px 16px 9px 13px;font-size:13px;color:var(--txt-2)}
.ftr .linkrow a svg{width:15px;height:15px;opacity:.85}

.flist{display:grid;gap:4px}
.flist a{display:inline-flex;align-items:center;gap:11px;color:var(--txt-2);font-size:14.5px;
  padding:7px 12px;border-radius:10px;transition:.24s;width:fit-content}
.flist a:hover{color:var(--txt);background:var(--glass);transform:translateX(4px)}
.flist svg{width:17px;height:17px;flex-shrink:0;opacity:.7;transition:.24s}
.flist a:hover svg{opacity:1}

.ftr__b{border-top:1px solid var(--line);padding-block:24px;display:flex;justify-content:space-between;
  align-items:center;gap:12px 26px;flex-wrap:wrap;color:var(--txt-2);font-size:13px}
.ftr__b a:hover{color:var(--txt-2)}
.ftr__b p{margin:0}
.ftr__c{font-weight:600;white-space:nowrap;flex:0 0 auto}
.ftr__l{flex:1 1 auto;display:flex;align-items:center;gap:18px;min-width:0;
  color:var(--txt-3);font-size:12.5px}
.ftr__l a{color:var(--txt-2);text-decoration:underline;text-decoration-color:var(--line-2);
  text-underline-offset:3px;transition:.22s}
.ftr__l a:hover{color:var(--txt);text-decoration-color:var(--txt-3)}
.ftr__top{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--glass);color:var(--txt-2);
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  transition:.24s;white-space:nowrap}
.ftr__top svg{width:14px;height:14px}
.ftr__top:hover{background:var(--red-soft);border-color:var(--red);color:var(--txt)}

.field{margin-bottom:12px}
.field label{display:block;font-size:11.5px;color:var(--txt-3);margin-bottom:6px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600}
.field input,.field textarea{width:100%;padding:11px 14px;border-radius:11px;background:var(--glass);
  border:1px solid var(--line);font-size:14px;resize:vertical;transition:.26s;color:var(--txt)}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-3)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--line-2);background:var(--glass-2)}
.note{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--txt-3);display:flex;align-items:flex-start;gap:7px}
.note.ok{color:#4ade80}
.note svg{width:15px;height:15px;flex-shrink:0}

/* ------------------------------------------------------------- overlays */
.ov{position:fixed;inset:0;z-index:1000;background:rgba(5,5,7,.93);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);display:grid;place-items:center;padding:22px;
  opacity:0;visibility:hidden;transition:opacity .34s,visibility .34s}
.ov.open{opacity:1;visibility:visible}
.ov__box{width:100%;max-width:1000px;transform:scale(.94) translateY(14px);transition:transform .38s var(--ease)}
.ov.open .ov__box{transform:none}
.ov__close{position:fixed;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  background:var(--glass-2);border:1px solid var(--line-2);cursor:pointer;display:grid;place-items:center;
  transition:.26s;z-index:5}
.ov__close:hover{background:var(--red);transform:rotate(90deg);border-color:transparent}
.ov__close svg{width:18px;height:18px}
.fr{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:#000;border:1px solid var(--line);box-shadow:var(--sh)}
.fr iframe{width:100%;height:100%;border:0;display:block}
.ov__cap{margin-top:18px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ov__cap h3{font-size:17px;max-width:66ch;line-height:1.4}
.ov__cap .meta{margin-top:8px}
#lb .ov__box{max-width:min(1080px,92vw)}
#lb img{max-height:78vh;width:auto;margin-inline:auto;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--sh)}
#lbNav{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(20,20,24,.85);border:1px solid var(--line-2);cursor:pointer;display:grid;
  place-items:center;transition:.26s;z-index:5;backdrop-filter:blur(10px)}
#lbNav:hover{background:var(--red);border-color:transparent}
#lbPrev{left:16px}#lbNext{right:16px}
#lbNav svg{width:19px;height:19px}

/* ------------------------------------------------------------- reveals */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* =====================================================================
   NAYE FEATURES
   ===================================================================== */

/* --- (1) BACK-TO-TOP ------------------------------------------------- */
#toTop{position:fixed;right:26px;bottom:26px;width:48px;height:48px;border-radius:50%;z-index:880;
  background:rgba(22,22,26,.82);border:1px solid var(--line-2);color:var(--txt);cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 34px -12px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.85);
  transition:opacity .34s var(--ease),visibility .34s,transform .34s var(--ease),
             background .26s,border-color .26s,color .26s}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover{background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 18px 44px -12px rgba(255,0,0,.8)}
#toTop:active{transform:scale(.9)}
#toTop svg{width:19px;height:19px;transition:transform .34s var(--ease)}
#toTop:hover svg{transform:translateY(-2px)}
/* progress ring — it rotates, and fills completely on click */
#toTop .ring{position:absolute;inset:0;width:48px;height:48px;transform:rotate(-90deg);pointer-events:none}
#toTop .ring circle{fill:none;stroke-width:2.5;stroke-linecap:round}
#toTop .ring .bg{stroke:var(--line-2)}
#toTop .ring .fg{stroke:var(--red);transition:stroke-dashoffset .12s linear}
#toTop:hover .ring .fg{stroke:#fff}

/* --- (2) COPY-LINK SHARE BUTTON ------------------------------------- */
.copier{position:absolute;top:11px;right:11px;width:32px;height:32px;border-radius:9px;z-index:4;
  background:rgba(13,13,15,.72);border:1px solid var(--line-2);color:var(--txt);cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(8px);opacity:0;transform:scale(.7);
  transition:opacity .26s,transform .26s var(--ease),background .22s,color .22s,border-color .22s}
.vcard:hover .copier,.gitem:hover .copier,.copier:focus-visible{opacity:1;transform:none}
.copier:hover{background:var(--grad);border-color:transparent;color:#fff}
.copier.done{background:#16a34a;border-color:transparent;color:#fff}
.copier svg{width:15px;height:15px;pointer-events:none}
.copier .ic-done{display:none}
.copier.done .ic-done{display:block}
.copier.done .ic-copy{display:none}

/* --- (3) BACK TO TOP PROGRESS + SECTION DOTS (scroll spy rail) ------- */
.sidenav{position:fixed;left:22px;top:50%;translate:0 -50%;z-index:870;display:flex;flex-direction:column;
  gap:4px;opacity:0;visibility:hidden;transform:translateX(-10px);
  transition:opacity .34s,visibility .34s,transform .34s var(--ease)}
.sidenav.show{opacity:1;visibility:visible;transform:none}
.sidenav a{display:flex;align-items:center;gap:10px;text-decoration:none;padding:4px 2px;cursor:pointer}
.sidenav .dot{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex-shrink:0;
  transition:background .3s,transform .3s var(--ease),box-shadow .3s}
.sidenav .lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3);
  opacity:0;transform:translateX(-6px);white-space:nowrap;pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease),color .3s}
.sidenav a:hover .dot{background:var(--red-2);transform:scale(1.35)}
.sidenav a:hover .lbl{opacity:1;transform:none;color:var(--txt-2)}
.sidenav a.on .dot{background:var(--red);transform:scale(1.5);
  box-shadow:0 0 0 4px rgba(255,0,0,.16),0 0 14px rgba(255,0,0,.7)}
.sidenav a.on .lbl{opacity:1;transform:none;color:var(--txt)}

/* --- (4) KEYBOARD HINT / SHORTCUTS ----------------------------------- */
.kbdhint{position:fixed;left:26px;bottom:26px;z-index:880;display:flex;gap:8px;align-items:center;
  padding:9px 14px;border-radius:999px;background:rgba(22,22,26,.8);border:1px solid var(--line);
  backdrop-filter:blur(12px);font-size:11.5px;color:var(--txt-3);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .34s,visibility .34s,transform .34s var(--ease)}
.kbdhint.show{opacity:1;visibility:visible;transform:none}
.kbdhint kbd{font-family:inherit;font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:6px;
  background:var(--glass-2);border:1px solid var(--line-2);color:var(--txt-2);line-height:1}
.kbdhint.hide{opacity:0 !important;visibility:hidden !important;transform:translateY(12px) !important}

/* --- (5) SECTION COUNTER / READING PROGRESS TEXT -------------------- */
.readbar{position:fixed;left:50%;translate:-50% 0;top:calc(var(--hdr) + 10px);z-index:869;
  padding:5px 13px;border-radius:999px;background:rgba(22,22,26,.76);border:1px solid var(--line);
  backdrop-filter:blur(10px);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3);font-variant-numeric:tabular-nums;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .34s,visibility .34s,transform .34s var(--ease)}
.readbar.show{opacity:1;visibility:visible;transform:none}
.readbar b{color:var(--txt);font-weight:600}
.readbar em{font-style:normal;color:var(--red-2)}

/* --- (6) SCROLL-TOP HINT ON FIRST VISIT ------------------------------ */
.scrollhint{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:866;display:flex;
  flex-direction:column;align-items:center;gap:7px;pointer-events:none;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);
  opacity:0;transition:opacity .5s}
.scrollhint.show{opacity:1}
.scrollhint .mouse{width:21px;height:33px;border-radius:11px;border:1.5px solid var(--line-2);
  position:relative;overflow:hidden}
.scrollhint .mouse::after{content:'';position:absolute;left:50%;top:7px;width:3.5px;height:7px;
  border-radius:2px;background:var(--red-2);translate:-50% 0;animation:wheel 1.9s var(--ease) infinite}
@keyframes wheel{
  0%{transform:translateY(0);opacity:0}
  25%{opacity:1}
  70%{transform:translateY(13px);opacity:0}
  100%{transform:translateY(0);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .scrollhint .mouse::after{animation:none;opacity:1}
}

/* --- responsive: all of this disappears on small screens ------------------- */
@media(max-width:1080px){
  .sidenav,.kbdhint,.readbar{display:none !important}
}
@media(max-width:640px){
  #toTop{right:16px;bottom:16px;width:44px;height:44px}
  #toTop .ring{width:44px;height:44px}
  .scrollhint{display:none}
  .bmcard{width:min(100%,190px)}
  .upg,.cad{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .mile{grid-template-columns:repeat(2,1fr)}
  .faq__q{font-size:14px;padding:15px 16px}
  .faq__a p{padding-inline:16px;font-size:14px}
  .aCtrl button{width:28px;height:28px;font-size:12px}
  .ticker__track{height:42px}
}
.rv.in{opacity:1;transform:none}
.rv:nth-child(2){transition-delay:.07s}.rv:nth-child(3){transition-delay:.14s}
.rv:nth-child(4){transition-delay:.21s}.rv:nth-child(5){transition-delay:.28s}
.rv:nth-child(6){transition-delay:.35s}.rv:nth-child(7){transition-delay:.42s}
.rv:nth-child(8){transition-delay:.49s}.rv:nth-child(9){transition-delay:.56s}

.empty{text-align:center;padding:60px 20px;color:var(--txt-3);font-size:14.5px;
  border:1px dashed var(--line-2);border-radius:var(--r-lg)}

/* ---- "Load more" under the video grid -------------------------------- */
.vmore{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:30px 0 4px;margin-top:6px
}
.vmore[hidden]{display:none}
.vmore__c{margin:0;font-size:12.5px;color:var(--txt-3);letter-spacing:.04em}
.vmore .btn{min-width:190px;justify-content:center}

/* ==================================================================== */
/*  NEW FEATURES (28 Sep 2026) — all based on your REAL channel data.   */
/*  No number was invented or estimated.                               */
/* ==================================================================== */

/* --- (N1) WATCH-LATER / BOOKMARK — remembered in localStorage --- */
.bm{position:absolute;top:10px;left:10px;z-index:3;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(13,13,15,.72);
  backdrop-filter:blur(8px);color:#fff;cursor:pointer;opacity:0;transition:opacity .22s var(--ease),background .2s,transform .2s}
.vcard:hover .bm,.bm.on{opacity:1}
.bm:hover{transform:scale(1.12);background:rgba(255,0,0,.85);border-color:transparent}
.bm.on{background:var(--grad);border-color:transparent}
.bm svg{width:16px;height:16px}
.bm.on svg{fill:currentColor}
#bmBar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 18px;margin-bottom:24px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line)}
#bmBar.hide{display:none}
#bmBar p{margin:0;color:var(--txt-2);font-size:14.5px}
.bmrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:0}
.bmcard{position:relative;width:210px;cursor:pointer}
.bmcard img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px 12px 0 0;display:block}
.bmcard h4{margin:8px 0 2px;font-size:13.5px;line-height:1.35;font-weight:600;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bmcard span{color:var(--txt-3);font-size:12px}
.bmcard .bm{opacity:1;top:8px;left:8px}

/* --- (N2) "UPCOMING" — new uploads from 18 years back, real dates --- */
.upg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.upg__c{padding:20px;border-radius:var(--r);background:var(--bg-3);border:1px solid var(--line);
  transition:transform .3s var(--ease),border-color .3s}
.upg__c:hover{transform:translateY(-4px);border-color:var(--line-2)}
.upg__d{font-size:12px;color:var(--red);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.upg__t{margin:8px 0 10px;font-size:15px;font-weight:600;line-height:1.4;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.upg__bar{height:5px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-bottom:8px}
.upg__bar i{display:block;height:100%;border-radius:99px;background:var(--grad)}
.upg__m{display:flex;justify-content:space-between;color:var(--txt-3);font-size:12px}

/* --- (N3) UPLOAD CADENCE — computed from the real 15 upload dates -- */
.cad{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.cad__c{padding:22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);text-align:center}
.cad__n{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.cad__l{margin-top:8px;color:var(--txt-3);font-size:12.5px;line-height:1.4}
.cad__n small{font-size:15px;font-weight:600;color:var(--txt-2)}

/* --- (N4) MILESTONE STRIP — the real past stops below 76M (math only, no data) --- */
.mile{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px}
.mile__c{position:relative;padding:16px 14px;border-radius:14px;background:var(--bg-3);
  border:1px solid var(--line);text-align:center}
.mile__c.hit{border-color:rgba(255,0,0,.5);background:rgba(255,0,0,.07)}
.mile__n{font-size:19px;font-weight:800;letter-spacing:-.01em}
.mile__l{margin-top:5px;color:var(--txt-3);font-size:11.5px;line-height:1.35}
.mile__c.hit .mile__l{color:var(--txt-2)}

/* --- (N5) FAQ ACCORDION — only the things written on the site --- */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:10px}
.faq__i{border:1px solid var(--line);border-radius:14px;background:var(--glass);overflow:hidden}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 20px;background:none;border:0;color:var(--txt);font:inherit;font-size:15px;
  font-weight:600;text-align:left;cursor:pointer}
.faq__q i{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass-2);transition:transform .32s var(--ease),background .2s}
.faq__q i::before{content:"";width:9px;height:1.6px;background:currentColor;border-radius:2px}
.faq__q i::after{content:"";position:absolute;width:1.6px;height:9px;background:currentColor;border-radius:2px;
  transition:transform .32s var(--ease)}
.faq__q:hover i{background:var(--red);color:#fff}
.faq__i.open .faq__q i{transform:rotate(180deg)}
.faq__i.open .faq__q i::after{transform:scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .38s var(--ease)}
.faq__a p{margin:0;padding:0 20px 19px;color:var(--txt-2);font-size:14.5px;line-height:1.68}

/* --- (N6) TEXT SIZE CONTROL (A- / A / A+) — remembered in localStorage --- */
.aCtrl{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line)}
.aCtrl button{width:29px;height:29px;border-radius:50%;border:0;background:none;color:var(--txt-2);
  font-size:12.5px;font-weight:700;cursor:pointer;transition:background .18s,color .18s}
.aCtrl button:hover:not(:disabled){background:var(--red);color:#fff}
.aCtrl button:disabled{opacity:.3;cursor:not-allowed}
.aCtrl span{font-size:12px;color:var(--txt-3);padding-inline:5px;letter-spacing:.06em}

/* ---- theme toggle (dark <-> light) ---------------------------------- */
.themeBtn{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--glass);color:var(--txt-2);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.themeBtn:hover{background:var(--red);color:#fff;border-color:transparent}
.themeBtn__i{grid-area:1/1;width:17px;height:17px;transition:opacity .22s var(--ease),transform .32s var(--ease)}
/* dark = show the moon (hinting at switching to light), light = show the sun */
.themeBtn__i--moon{opacity:1;transform:rotate(0) scale(1)}
.themeBtn__i--sun {opacity:0;transform:rotate(-70deg) scale(.5)}
:root[data-theme="light"] .themeBtn__i--moon{opacity:0;transform:rotate(70deg) scale(.5)}
:root[data-theme="light"] .themeBtn__i--sun {opacity:1;transform:rotate(0) scale(1)}
/* The half-filled circle means "following the system". It is keyed off
   data-theme-PREF, not data-theme — in auto mode the resolved theme is
   whatever the OS says, so the resolved value cannot identify the state. */
.themeBtn__i--auto{opacity:0;transform:rotate(-70deg) scale(.5)}
:root[data-theme-pref="auto"] .themeBtn__i--moon,
:root[data-theme-pref="auto"] .themeBtn__i--sun {opacity:0;transform:rotate(0) scale(.5)}
:root[data-theme-pref="auto"] .themeBtn__i--auto{opacity:1;transform:rotate(0) scale(1)}
html.fs-115{font-size:112.5%}
html.fs-130{font-size:125%}

/* ==================================================================== */
/*  POLISH ROUND (28 Sep 2026) — ticker, subscribe button, shuffle.     */
/*  Every ticker item is built from real video data, no fake news.     */
/* ==================================================================== */

/* --- (P1) SUBSCRIBE BUTTON — the header one. It pulses, it wiggles,
       and below it carries a small label with the real subscriber count. --------- */
.hdr__cta{position:relative;flex-shrink:0}
.hdr__cta::before{content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;
  background:var(--grad);opacity:.55;filter:blur(11px);
  animation:ctaPulse 2.9s var(--ease) infinite;pointer-events:none}
@keyframes ctaPulse{
  0%,100%{opacity:.32;transform:scale(1)}
  50%{opacity:.72;transform:scale(1.055)}
}
/* a small shine that passes across the top */
.hdr__cta .btn__shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.hdr__cta .btn__shine::after{content:"";position:absolute;top:0;bottom:0;width:42%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:ctaShine 4.6s var(--ease) infinite}
@keyframes ctaShine{0%,62%{left:-60%}100%{left:118%}}
.hdr__cta .btn__lab{position:relative;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
/* the subscriber count used to be here (the dark pill reading 182,000+) —
   it has been removed. Just the bell + "Subscribe". The number now lives
   in the hero stats and the ticker. */
.hdr__cta .btn__txt{font-size:14px;font-weight:600;letter-spacing:-.01em}
/* the bell is now the button's main visual weight — slightly larger */
.hdr__cta .btn__bell{width:19px;height:19px}

/* --- (P2) NEWS TICKER — "Latest on the channel", news-strip style. -- */
.ticker{position:relative;display:flex;align-items:stretch;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;background:var(--bg-2);
  box-shadow:var(--sh);margin-bottom:22px}
.ticker__badge{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:0 15px;
  background:var(--grad);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;z-index:2;position:relative;
  box-shadow:14px 0 20px -12px rgba(0,0,0,.9)}
.ticker__badge i{width:7px;height:7px;border-radius:50%;background:#fff;animation:liveBlink 1.5s ease-in-out infinite}
@keyframes liveBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.28;transform:scale(.7)}}
/* the notched light between the badge and the content — like an old TV ticker */
.ticker__badge::after{content:"";position:absolute;right:-11px;top:0;bottom:0;width:12px;z-index:-1;
  background:var(--grad);clip-path:polygon(0 0,100% 50%,0 100%)}
.ticker__vp{position:relative;flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 34px),transparent 100%)}
.ticker__vp::after{content:"";position:absolute;top:0;bottom:0;left:0;width:26px;pointer-events:none;
  background:linear-gradient(90deg,var(--bg-2),transparent)}
.ticker__vp::before{content:"";position:absolute;top:0;bottom:0;right:0;width:34px;z-index:2;pointer-events:none;
  background:linear-gradient(270deg,var(--bg-2),transparent)}
.ticker__track{display:flex;align-items:center;height:46px;width:max-content;
  will-change:transform;animation:tickRun 62s linear infinite}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
@keyframes tickRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker.paused .ticker__track{animation-play-state:paused}
.tk{display:inline-flex;align-items:center;gap:9px;padding:0 26px;color:var(--txt-2);
  font-size:13px;white-space:nowrap;cursor:pointer;transition:color .2s}
.tk:hover{color:var(--txt)}
.tk b{color:var(--txt);font-weight:600;max-width:44ch;overflow:hidden;text-overflow:ellipsis}
.tk .tk__v{color:var(--red);font-weight:700;font-variant-numeric:tabular-nums}
.tk .tk__d{color:var(--txt-3);font-variant-numeric:tabular-nums}
.tk__sep{width:4px;height:4px;border-radius:50%;background:var(--line-2);flex:0 0 auto}
.ticker__btn{flex:0 0 auto;width:38px;border:0;border-left:1px solid var(--line);
  background:var(--bg-3);color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.22s}
.ticker__btn:hover{background:var(--red);color:#fff}
.ticker__btn svg{width:14px;height:14px}
@media(max-width:640px){
  .tk{font-size:12px;padding:0 18px}
  .tk b{max-width:26ch}
  .ticker__badge{font-size:10px;padding:0 11px;letter-spacing:.08em}
}

/* --- (P3) SHUFFLE — "pick any one" in the video grid ---------------- */
.shuf{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line-2);color:var(--txt-2);cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;transition:.24s var(--ease)}
.shuf:hover{background:var(--red-soft);border-color:var(--red);color:var(--txt);transform:translateY(-2px)}
.shuf:active{transform:translateY(0) scale(.97)}
.shuf svg{width:14px;height:14px;transition:transform .5s var(--ease)}
.shuf:hover svg{transform:rotate(180deg)}
.shuf:disabled{opacity:.4;cursor:not-allowed;transform:none}
.shufBox{display:flex;gap:9px;flex-wrap:wrap}

/* --------------------------------------------------------- responsive

   The 13 nav links only fit on one line when the viewport is ~1340px or
   more. So the breakpoint is 1340, not 1080: below it the nav moves into
   the burger menu instead of wrapping onto 2 lines.
   This wasn't strictly necessary (flex-wrap handled the breaking fine),
   but a 2-line header looks odd.                            */
@media(max-width:1340px){
  /* Header only: the nav goes into the burger, search and A-/A+ are hidden */
  .nav,.search,.aCtrl{display:none}
  .burger{display:flex;margin-left:auto}
  .hdr__cta{display:none}
}
/* The remaining layout rules stay at their original width — stretching them
   to 1340 is wrong (e.g. the footer becomes 2-column at 1200px when it
   should not) */
@media(max-width:1080px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .about__media{max-width:440px;margin-inline:auto;width:100%}
  .ftr__in{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1/-1}
  .pulse__row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  :root{--hdr:64px}
  .hero__in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .slider{width:100%}
  .slider__vp{aspect-ratio:4/5}
  .slide{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .slide__ph::after{background:linear-gradient(180deg,rgba(13,13,15,0) 68%,rgba(22,22,26,.85) 100%)}
  .slide__b{align-items:center;text-align:center;padding:14px 16px 18px;justify-content:flex-start}
  .slide__t{max-width:100%;font-size:15px;-webkit-line-clamp:2}
  .slider__nav{opacity:1;width:34px;height:34px}
  .slider__nav--prev{left:8px}.slider__nav--next{right:8px}
  .hero p.bio{margin-inline:auto}
  .cta,.linkrow{justify-content:center}
  .hero .tagrow{justify-content:center}
  .stats{grid-template-columns:repeat(2,1fr);gap:11px}
  .stat{padding:19px 16px}
  .ggrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:106px;gap:9px}
  .gitem{grid-row:span 2}
  .gitem:nth-child(6n+1){grid-row:span 3}
  .rail{grid-auto-columns:minmax(160px,64%)}
  .railnav{width:36px;height:36px;top:calc(50% - 18px)}
  .railnav svg{width:16px;height:16px}
  .railnav--prev{left:-6px}.railnav--next{right:-6px}
  .vgrid{grid-template-columns:1fr}
  .ftr__in{grid-template-columns:1fr;gap:32px}
  .fr{aspect-ratio:16/9}
  #lbPrev{left:8px}#lbNext{right:8px}
  .ov{padding:14px}
  .pulse__row{grid-template-columns:1fr;gap:11px}
  .mgrid{grid-template-columns:1fr}
}
@media(max-width:380px){
  .ggrid{grid-template-columns:1fr;grid-auto-rows:120px}
  .stats{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  /* "none" is needed, not ".01ms" — otherwise infinite loops run thousands
     of times and suddenly feel "slow" */
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ==================================================================== */
/*  ADSENSE (28 Sep 2026)                                                */
/*  The ad slot layout is already reserved (min-height), so that when   */
/*  the ad loads the page does not shift — CLS = 0, which is required   */
/*  for approval. Until AS_PUB is set, these show empty "house ads"    */
/*  and no Google script is loaded on the page at all.                 */
/* ==================================================================== */
.adbox{margin:26px 0;min-height:0}
/* Until then the ad box must not be shown at all — not even empty space */
body:not(.ads-on) .adbox{display:none}
/* Height is only reserved once a publisher ID has been added */
body.ads-on .adbox{display:flex;justify-content:center;align-items:flex-start;min-height:90px}
body.ads-on .ad-lead{min-height:250px}
body.ads-on .ad-foot{min-height:90px}
.adbox > div{max-width:100%}
/* No real AdSense slot ID in this box → it is out of the layout, gap and
   "Advertisement" label included, until an ID is added in AS_SLOTS. */
.adbox--off{display:none !important}
.ins{
  display:block;text-align:center;font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-3);margin-bottom:7px;user-select:none
}
.adbox::after{
  content:"Advertisement";display:block;text-align:center;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3);margin-top:7px
}
/* an ad inside the content — must not wrap around the text */
.ad-in{margin:20px 0}
@media(max-width:640px){
  body.ads-on .ad-lead{min-height:200px}
  body.ads-on .adbox{min-height:100px}
}

/* ---- Direct (non-AdSense) ad slots ----------------------------------
   .adbox above is gated behind body.ads-on, because those boxes are
   reserved for AdSense and must stay invisible until a publisher ID
   is added. The networks used here (HighRevenueFormat / ProfitableRate)
   inject their own script, so these slots must always be visible and
   must look identical to the AdSense ones: same spacing, same
   "Advertisement" label, same centred block.                           */
.adslot{
  margin:34px auto;padding:2px 0;
  display:flex;flex-direction:column;align-items:center;
  /* keeps the label off the ad itself so a click near the top edge
     cannot accidentally land on the creative */
  text-align:center
}
.adslot::before{
  content:"Advertisement";display:block;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3);
  margin-bottom:8px;user-select:none
}
.adslot--lead{margin-top:0}
/* A slot with no key yet shows nothing at all — no label, no margin, no
   empty box. `js/ads.js` only fills a slot whose key is a real 32-char
   hex string, so an unfilled position costs the visitor nothing. */
.adslot:empty{display:none}
.adslot > div{max-width:100%;overflow:hidden}
.adslot iframe{border:0;display:block;max-width:100%}
/* On phones a 728px banner has to shrink or it forces a sideways
   scrollbar, so the frame is allowed to scale down. */
@media(max-width:760px){
  .adslot{margin:26px auto}
}

/* ---- Smartlink CTA row ------------------------------------------------
   A smartlink is not a display ad — it has no creative of its own, it is
   just a link. So it is dressed as an ordinary call-to-action button
   rather than an ad box: it reads as part of the page, and the visitor
   knows they are leaving.                                        */
.cta-row{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin:30px 0 6px
}
.cta{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:999px;
  font-size:14.5px;font-weight:600;line-height:1;
  color:var(--txt);text-decoration:none;
  border:1px solid var(--line-2);background:var(--glass);
  transition:transform .18s var(--ease),background .18s,border-color .18s,color .18s
}
.cta:hover{transform:translateY(-2px);background:var(--red);border-color:transparent;color:#fff}
.cta--solid{background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:var(--sh-red)}
.cta--solid:hover{background:var(--red)}
.cta svg{width:16px;height:16px;flex-shrink:0}
@media(max-width:560px){
  .cta-row{gap:10px}
  .cta{padding:12px 18px;font-size:13.5px}
}

/* ---- Skyscraper / half-page rail (160x300 and 160x600) ----------------
   Tall units have no place inside the 1280px content column — putting a
   160x600 there just opens a hole next to the text. They are pinned to
   the right edge instead, and only on screens wide enough to have the
   spare room next to .wrap. Below 1200px the rail is removed entirely
   and those units are not shown at all.                                */
.adrail{
  position:fixed;right:14px;top:96px;z-index:900;
  display:flex;flex-direction:column;gap:26px;
  width:160px;
  /* the label has to be inside the rail's own flow, and the units
     themselves must never be selectable or draggable */
  user-select:none
}
.adrail__u{
  display:flex;flex-direction:column;align-items:center
}
.adrail__u::before{
  content:"Advertisement";display:block;font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);
  margin-bottom:6px;text-align:center
}
.adrail__u > div{max-width:160px;overflow:hidden}
.adrail__u iframe{border:0;display:block;width:160px}
.adrail__u > a{display:block;line-height:0;border-radius:4px;overflow:hidden;
  border:1px solid var(--line);transition:.24s}
.adrail__u > a:hover{opacity:.85;border-color:var(--red)}
.adrail__u > a img{display:block;width:120px;height:150px;object-fit:cover}
@media(max-width:1200px){
  .adrail{display:none}
}
/* --- Cookie consent banner (mandatory for AdSense) ----------------- */
.cc{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:15px 18px;border-radius:var(--r);border:1px solid var(--line-2);
  background:rgba(22,22,26,.97);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);box-shadow:0 26px 70px -20px #000;
  animation:ccIn .4s var(--ease);max-width:900px;margin:0 auto}
.cc[hidden]{display:none}
@keyframes ccIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.cc__t{font-size:14.5px;font-weight:700;color:var(--txt);flex:1 1 220px;min-width:0}
.cc__d{font-size:13px;color:var(--txt-2);flex:2 1 320px;margin:0;line-height:1.6}
.cc__d a{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
.cc__b{display:flex;gap:9px;flex:0 0 auto;margin-left:auto}
@media(max-width:640px){
  .cc{left:10px;right:10px;bottom:10px;padding:14px;gap:12px}
  .cc__b{width:100%;margin-left:0}
  .cc__b .btn{flex:1;justify-content:center}
}

/* --- "About the data" — for AdSense transparency ------------------ */
.data__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:6px}
.data__i{padding:18px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line)}
.data__i b{display:block;font-size:14.5px;color:var(--txt);margin-bottom:6px}
.data__i p{margin:0;font-size:13.5px;color:var(--txt-2);line-height:1.65}

/* --- Skip link ------------------------------------------------------ */
/* It is off-screen to begin with; as soon as Tab is pressed on the keyboard
   it appears on screen. This saves keyboard users from having to walk
   through 10+ nav links. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;
  padding:13px 22px;border-radius:0 0 12px 0;background:var(--red,#ff0000);
  color:#fff;font:700 14px/1 'Montserrat',sans-serif;text-decoration:none;
  transition:left .2s}
.skip-link:focus{left:0}

/* a light touch for keyboard focus — visible only to tab users */
:focus-visible{outline:2px solid #ff5a5a;outline-offset:3px;border-radius:4px}

/* --- Text selection — with the brand colour ------------------------ */
::selection{background:rgba(255,0,0,.28);color:#fff}

/* --------------------------------------------------------------- story */
/* Editorial content — not just numbers and transparency text, but genuinely
   written content. This part is required for AdSense's low-value-content rule. */
.story{column-gap:clamp(30px,4vw,64px);margin-top:6px}
.story__i{margin-bottom:clamp(34px,4.5vw,52px);break-inside:avoid}
.story__i:last-child{margin-bottom:0}
.story__n{font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.22em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.story__i h3{font-family:'Montserrat',sans-serif;font-size:clamp(18px,2.2vw,23px);font-weight:700;
  margin:10px 0 12px;line-height:1.32;letter-spacing:-.01em}
.story__i p{font-size:15px;line-height:1.78;color:var(--txt-2);margin:0 0 13px;max-width:74ch}
.story__i p:last-child{margin-bottom:0}
.story__i b{color:var(--txt);font-weight:600}
.story__i a{color:var(--red-2);text-decoration:underline;text-underline-offset:3px}
.story__i a:hover{color:var(--txt)}
@media(min-width:980px){
  .story{columns:2;column-rule:1px solid var(--line)}
  .story__i{column-span:none}
}
@media(max-width:640px){
  .story__i p{font-size:14.5px;line-height:1.75}
}

/* ------------------------------------------------- karachi / local SEO */
/* Local SEO block — Karachi + Pakistan. Search engines read this block as a
   topical signal for city-level queries. */
.kgrid{columns:1;column-gap:clamp(30px,4vw,56px)}
.kgrid__i{margin-bottom:clamp(28px,3.5vw,40px);break-inside:avoid}
.kgrid__i:last-child{margin-bottom:0}
.kgrid__i h3{font-family:'Montserrat',sans-serif;font-size:clamp(17px,1.9vw,20px);font-weight:700;
  margin:0 0 12px;line-height:1.35;position:relative;padding-left:15px}
.kgrid__i h3::before{content:'';position:absolute;left:0;top:.34em;width:4px;height:.82em;
  border-radius:2px;background:var(--grad)}
.kgrid__i p{font-size:14.5px;line-height:1.75;color:var(--txt-2);margin:0 0 12px;max-width:62ch}
.kgrid__i p:last-child{margin-bottom:0}
.kgrid__i b{color:var(--txt);font-weight:600}
@media(min-width:900px){
  .kgrid{columns:3}
}

/* --- (4) SHORTS FULLSCREEN PLAYER ------------------------------------- */
.ov--shorts{padding:0;place-items:stretch}
.sf__stage{position:relative;height:100%;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;overflow:hidden;outline:none}
.sf__slot{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;
  transition:transform .42s var(--ease),opacity .42s var(--ease)}
.sf__slot--on{position:relative;opacity:1;pointer-events:auto}
/* Neighbours sit just off-stage so the transition reads as a continuous feed */
.sf__slot[style*="--o:-1"]{transform:translateY(-14%) scale(.86)}
.sf__slot[style*="--o:1"]{transform:translateY(14%) scale(.86)}
.sf__phone{position:relative;width:min(430px,92vw);aspect-ratio:9/16;max-height:78vh;border-radius:var(--r-lg);
  overflow:hidden;background:#000;border:1px solid var(--line-2);box-shadow:0 30px 80px -30px rgba(0,0,0,.95)}
.sf__phone iframe{width:100%;height:100%;border:0;display:block}
.sf__meta{width:min(430px,92vw);margin-top:16px;padding:0 4px;text-align:center}
.sf__meta h3{font-size:16px;line-height:1.4}
.sf__meta p{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0 14px;
  font-size:13.5px;color:var(--txt-2)}
.sf__meta p span{display:inline-flex;align-items:center;gap:6px}
.sf__meta p svg{width:15px;height:15px}
.sf__peek{width:min(430px,92vw);aspect-ratio:9/16;max-height:78vh;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);opacity:.5}
.sf__peek img{width:100%;height:100%;object-fit:cover;display:block}
.sf__nav{position:fixed;left:50%;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(20,20,24,.8);border:1px solid var(--line-2);color:var(--txt);cursor:pointer;
  display:grid;place-items:center;transition:.26s;z-index:5;backdrop-filter:blur(10px)}
.sf__nav:hover{background:var(--red);border-color:transparent}
.sf__nav svg{width:19px;height:19px}
.sf__nav--up{top:20px}
.sf__nav--dn{bottom:26px}
@media(max-width:600px){
  .sf__phone,.sf__peek,.sf__meta{width:100vw;max-height:none;border-radius:0;border-inline:0}
  .sf__phone{height:100dvh;width:100vw;aspect-ratio:auto}
  .sf__meta{position:absolute;left:0;right:0;bottom:78px;margin:0;
    background:linear-gradient(transparent,rgba(0,0,0,.82));padding:26px 18px 14px}
  .sf__meta h3{color:#fff}
  .sf__meta p{color:rgba(255,255,255,.8)}
}

/* --- (N6) SORT SELECTOR ----------------------------------------------- */
.sortsel{margin-left:auto;display:flex;align-items:center;gap:8px}
.sortsel select{appearance:none;-webkit-appearance:none;height:38px;padding:0 34px 0 14px;
  border-radius:999px;border:1px solid var(--line-2);background:var(--glass-2);color:var(--txt);
  font:inherit;font-size:13px;cursor:pointer;transition:.24s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px}
.sortsel select:hover{border-color:var(--red)}
.sortsel select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media(max-width:640px){
  .tabs{flex-wrap:wrap}
  .sortsel{margin-left:0;width:100%}
  .sortsel select{width:100%}
}

/* --- (N7) CONTINUE WATCHING ------------------------------------------- */
.cw__h{margin:22px 0 14px;font-size:15px}
.cw__h span{color:var(--txt-2);font-weight:400}
.cwrow{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.cw{flex:0 0 208px;scroll-snap-align:start;cursor:pointer}
.cw__th{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:#000;transition:.3s}
.cw:hover .cw__th,.cw:focus-visible .cw__th{transform:translateY(-3px);border-color:var(--red);box-shadow:var(--sh)}
.cw__th img{width:100%;height:100%;object-fit:cover;display:block}
.cw__th .play{position:absolute;inset:0;margin:auto;width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.55);display:grid;place-items:center;color:#fff;
  backdrop-filter:blur(4px);transition:.3s}
.cw__th .play svg{width:17px;height:17px;margin-left:2px}
.cw:hover .play{background:var(--red)}
.cw__t{margin:9px 0 0;font-size:13.5px;line-height:1.45;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cw__x{margin-left:2px;flex:0 0 auto;align-self:center;height:34px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--glass-2);color:var(--txt-2);cursor:pointer;
  font-size:12.5px;white-space:nowrap;transition:.24s}
.cw__x:hover{background:var(--red);color:#fff;border-color:transparent}

/* --- (N8) SHARE BUTTON ON CARDS --------------------------------------- */
.sharer{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer;
  display:grid;place-items:center;opacity:0;transform:translateY(-5px);transition:.26s;z-index:3;
  backdrop-filter:blur(6px)}
.sharer svg{width:15px;height:15px}
.vcard:hover .sharer,.vcard:focus-visible .sharer{opacity:1;transform:none}
.sharer:hover{background:var(--red);border-color:transparent}
@media(hover:none){.sharer{opacity:1;transform:none}}

/* --- (N9) UP NEXT INSIDE THE PLAYER ----------------------------------- */
.mrel{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.mrel__t{margin:0 0 14px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.mrel__r{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mrel__c{position:relative;padding:0;border:0;background:none;cursor:pointer;text-align:left;
  border-radius:var(--r);overflow:hidden;transition:.26s}
.mrel__c img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:var(--r);
  border:1px solid var(--line);transition:.26s}
.mrel__c:hover img,.mrel__c:focus-visible img{border-color:var(--red);transform:translateY(-3px)}
.mrel__c:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:var(--r)}
.mrel__d{position:absolute;right:6px;top:6px;font-size:11px;padding:2px 6px;
  border-radius:4px;background:rgba(0,0,0,.8);color:#fff}
.mrel__n{display:block;margin-top:8px;font-size:13px;line-height:1.4;font-weight:500}

/* --- TOAST ------------------------------------------------------------ */
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);z-index:1200;
  padding:13px 22px;border-radius:999px;background:var(--glass-2);border:1px solid var(--line-2);
  color:var(--txt);font-size:13.5px;box-shadow:0 14px 40px -14px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transition:.3s var(--ease);pointer-events:none}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* --- RATE + COMMENTS ------------------------------------------------- */
.ratebox{display:grid;gap:28px;grid-template-columns:1fr 1fr;align-items:start;
  background:var(--glass-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.stars{display:flex;gap:6px}
.star{width:40px;height:40px;border:0;background:none;padding:0;cursor:pointer;color:var(--txt-3);
  transition:.2s}
.star svg{width:100%;height:100%}
.star:hover,.star:focus-visible{color:#f5a524;transform:scale(1.14);outline:none}
.star.on{color:#f5a524;fill:#f5a524}
.ratebox__sum{margin:14px 0 0;font-size:15px;color:var(--txt-2)}
.ratehist{margin-top:16px;display:grid;gap:7px}
.ratehist__r{display:grid;grid-template-columns:30px 1fr 30px;align-items:center;gap:10px;
  font-size:12.5px;color:var(--txt-3)}
.ratehist__r i{height:7px;border-radius:99px;background:var(--glass-2);overflow:hidden;display:block}
.ratehist__r b{display:block;height:100%;border-radius:99px;background:#f5a524}
.ratehist__r em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.ratebox__right label{display:block;margin-bottom:9px;font-size:13.5px;font-weight:500}
.ratebox__right .opt{color:var(--txt-3);font-weight:400}
.ratebox__right textarea,.cform textarea{width:100%;padding:13px 15px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--glass-2);color:var(--txt);font:inherit;
  font-size:14px;resize:vertical;transition:.24s}
.ratebox__right textarea:focus,.cform textarea:focus,.cform input:focus{
  outline:none;border-color:var(--red)}
/* Submit buttons fill their form. `.btn` is inline-flex by default, so
   without this they shrink to the width of their own label. */
.ratebox__right button,.cform button{margin-top:12px;width:100%;height:48px;font-size:14.5px;border-radius:var(--r)}
.ratebox__right button:disabled,.cform button:disabled{opacity:.6;cursor:not-allowed}
.ratebox__msg,.cform__msg{margin:11px 0 0;font-size:13px;min-height:1.2em;color:var(--txt-2)}
.cbox{margin-top:30px;background:var(--glass-1);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px}
.cbox__t{margin:0 0 18px;font-size:19px}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.cform input{width:100%;height:46px;padding:0 15px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--glass-2);color:var(--txt);font:inherit;font-size:14px}
.clist{margin-top:26px;display:grid;gap:14px}
.citem{padding:17px 19px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass-2)}
.citem__h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:9px}
.citem__a{font-weight:600;font-size:14.5px}
.citem__h time{font-size:12.5px;color:var(--txt-3)}
.citem p{margin:0;font-size:14.5px;line-height:1.7;color:var(--txt-2);white-space:pre-wrap;word-break:break-word}
.clist__e{margin:0;font-size:14px;color:var(--txt-3);text-align:center;padding:18px 0}
@media(max-width:820px){
  .ratebox,.cform__row{grid-template-columns:1fr}
  .star{width:34px;height:34px}
}