:root {
  color-scheme: dark;
  --bg: #0d0909;
  --bg2: #160f0f;
  --surface: #1c1414;
  --surface2: #271a1b;
  --line: #382a2b;
  --text: #faf8f8;
  --muted: #d67d84;
  --subtle: #857173;
  --purple: #f37982;
  --purple-light: #e7d3d5;
  --purple-deep: #c33944;
  --green: #65fc94;
  --max: 1220px;
  --header: 79px;
}
*, *::before, *::after {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:90px}
body {margin:0; min-width:320px; font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; overflow-x:hidden}
body.modal-open {overflow:hidden}
::selection {background:#f18089; color:#160f0f}
a {color:inherit; text-decoration:none}
button {font:inherit}
button, a {-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible {outline:2px solid #e0c8c9; outline-offset:4px}
img {max-width:100%}
.container {width:min(calc(100% - 80px),var(--max)); margin-inline:auto}
.skip-link {position:fixed; z-index:101; top:-70px; left:20px; padding:12px 16px; background:white; color:black; border-radius:8px}
.skip-link:focus {top:12px}
.page-noise {position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.14; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
.ambient {position:absolute; z-index:-1; pointer-events:none; border-radius:100%}
.ambient--top {height:1100px; width:1100px; right:-480px; top:-450px; background:radial-gradient(circle,#77252b2b 0%,#30191b24 41%,transparent 70%); filter:blur(4px)}
.scroll-progress {position:fixed; z-index:102; height:2px; width:100%; background:linear-gradient(90deg,#d0434e,#dec3c5); left:0; top:0; transform-origin:left; transform:scaleX(0); pointer-events:none}

/* Nav */
.site-header {height:var(--header); position:sticky; top:0; z-index:90; background:#110a0bc9; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid #ffffff0c; transition:box-shadow .2s,background .2s}
.site-header.is-scrolled {background:#140b0cf2; box-shadow:0 10px 40px #0004}
.nav-inner {height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand {display:inline-flex; align-items:center; gap:11px; font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; letter-spacing:-1px; white-space:nowrap}
.brand-mark {width:36px; height:36px; background:linear-gradient(140deg,#e3767f,#67242a); color:white; display:grid; place-items:center; border:1px solid #d9babc59; border-radius:10px; box-shadow:0 0 30px #c339442d; font-size:24px; font-weight:700}
.brand-accent {color:#d7b5b8}
.brand-dot {color:#e6d2d3}
.desktop-nav {display:flex; align-items:center; gap:clamp(10px,1.5vw,25px); margin:auto}
.nav-link {font-size:11.9px; color:#d3727a; font-weight:700; white-space:nowrap; transition:color .2s; position:relative; padding-block:32px}
.nav-link:hover,.nav-link.is-active {color:#f8f1f2}
.nav-link.is-active::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--purple); box-shadow:0 0 13px #e96b75}
.nav-actions {display:flex; align-items:center; gap:12px}
.header-kick {padding:10px 12px; display:flex; align-items:center; gap:8px; border:1px solid #5b3b3d; font-size:11.5px; font-weight:800; white-space:nowrap; border-radius:7px; transition:background .2s, border-color .2s}
.header-kick:hover {background:#312324; border-color:#cc5f67}
.tiny-circle {background:#ef828b; width:7px; height:7px; border-radius:50%; box-shadow:0 0 12px #ef828b5a}
.header-kick .tiny-circle {background:#ef828b}
.menu-toggle {display:none; width:41px; height:41px; border:1px solid #493436; border-radius:8px; background:#1c1414; color:white; padding:11px; cursor:pointer}
.menu-toggle span {display:block; height:2px; background:white; border-radius:2px; margin:4px 0; transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded=true] span:nth-child(1) {transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2) {opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3) {transform:translateY(-6px) rotate(-45deg)}
.mobile-nav {display:none}

/* Global type & buttons */
.section {position:relative; padding:120px 0; border-top:1px solid #ffffff08}
.section-heading {display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:42px}
.section-kicker {font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; letter-spacing:3px; color:#9d8688; margin-bottom:19px}
.section-kicker span {color:var(--purple)}
h1,h2,h3,p {margin-top:0}
h1,h2,h3 {font-family:'Space Grotesk',sans-serif}
h2 {font-size:clamp(39px,5.4vw,72px); line-height:1.08; font-weight:700; letter-spacing:-3.5px; margin:0 0 18px}
h2 em {font-style:normal; color:var(--purple); background:linear-gradient(100deg,#fb7f89,#e3ccce); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.section-heading p {max-width:580px; color:var(--muted); line-height:1.7; margin:0; font-size:15px}
.text-link {font:700 11px 'Space Grotesk',sans-serif; letter-spacing:1.1px; border-bottom:1px solid #735557; padding:0 0 10px; transition:border-color .2s,color .2s; flex:none}
.text-link:hover {color:var(--purple-light); border-color:var(--purple)}
.text-link span {font-size:15px; padding-left:16px; font-weight:400}
.btn {border:1px solid transparent; border-radius:9px; min-height:51px; padding:0 19px; display:inline-flex; justify-content:center; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.2px; cursor:pointer; transition:transform .25s, box-shadow .25s, background .25s, border-color .25s; white-space:nowrap}
.btn:hover {transform:translateY(-2px)}
.btn svg {width:19px; height:19px}
.btn-primary {background:linear-gradient(110deg,#e66f78,#f18f97); color:#1c1011; box-shadow:0 7px 28px #d1434e3b}
.btn-primary:hover {box-shadow:0 13px 40px #d8434f72}
.btn-outline {background:#281c1d82; border-color:#583b3d; color:#f7f1f1}
.btn-outline:hover {background:#372426; border-color:#f17e87}
.btn-arrow {font-size:16px; font-weight:500; margin-left:8px}
.reveal {opacity:0; transform:translateY(24px); transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1); transition-delay:var(--delay,0ms)}
.reveal.is-visible {opacity:1; transform:translateY(0)}

/* Hero */
.hero {min-height:730px; position:relative; isolation:isolate; display:flex; flex-direction:column; overflow:hidden; background:radial-gradient(ellipse 900px 540px at 82% 42%,#4e2b2d22,transparent 75%)}
.hero::after {content:""; position:absolute; z-index:-1; inset:auto 0 0; height:110px; background:linear-gradient(transparent,var(--bg))}
.hero-grid {display:grid; grid-template-columns:1.15fr 1fr; align-items:center; min-height:650px; gap:10px}
.hero-copy {position:relative; z-index:2; padding-top:55px}
.eyebrow {display:flex; align-items:center; gap:11px; color:#d6b7ba; font-family:'Space Grotesk',sans-serif; font-size:10px; font-weight:700; letter-spacing:2.3px; white-space:nowrap}
.eyebrow-line {height:1px; width:25px; background:#ef7d86}
.eyebrow-sep {color:#6e5153}
.hero-word-art {display:none}
h1 {font-size:clamp(70px,8.8vw,132px); line-height:.97; letter-spacing:-8px; font-weight:700; margin:28px 0; white-space:nowrap}
.gradient-word {background:linear-gradient(110deg,#fff 0%,#e2cacc 37%,#d4646c 95%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none}
.hero-lead {color:#db8b92; max-width:410px; font-size:16px; line-height:1.78; margin-bottom:30px}
.hero-lead span {color:#ee8f96}
.hero-buttons {display:flex; gap:12px; flex-wrap:wrap}
.hero-meta {display:flex; align-items:center; gap:14px; font:700 10px 'Space Grotesk',sans-serif; letter-spacing:1.9px; color:#988183; margin-top:58px}
.meta-pulse {width:8px; height:8px; background:#eb858d; box-shadow:0 0 0 5px #e8868e18; border-radius:50%}
.meta-divider {width:3px; height:3px; background:#79585a; border-radius:50%}
.hero-visual {height:600px; position:relative; display:flex; align-items:center; justify-content:center; padding:35px 0 30px; isolation:isolate}
.hero-orbit {position:absolute; border:1px solid #d05f6838; border-radius:50%; transform:rotate(-20deg); pointer-events:none}
.hero-orbit--1 {width:570px; height:490px}
.hero-orbit--2 {width:470px; height:555px; transform:rotate(22deg); border-color:#d86a7320}
.hero-light {position:absolute; width:470px; height:470px; border-radius:50%; background:#bf464f; filter:blur(150px); opacity:.36; z-index:-1; top:12%}
.photo-frame {position:relative; width:min(79%,403px); height:490px; border-radius:190px 190px 115px 115px; border:1px solid #d8848a88; overflow:hidden; background:radial-gradient(circle at 45% 33%,#542b2e,#251617 70%); box-shadow:inset 0 0 100px #4a282a79,0 30px 90px #0009,0 0 70px #b85d6420; isolation:isolate}
.photo-glow {position:absolute; inset:12px; border:1px solid #e6d1d331; border-radius:inherit; z-index:4; pointer-events:none}
.portrait {width:100%; height:100%; object-fit:cover; object-position:center 38%; filter:contrast(1.06) brightness(.9) saturate(.88); transform:scale(1.15); transition:transform 1s; position:absolute; inset:0}
.photo-frame:hover .portrait {transform:scale(1.22)}
.portrait.img-failed {display:none}
.portrait-fallback {position:absolute; display:none; width:100%; height:100%; place-items:center; font:700 310px 'Space Grotesk',sans-serif; color:#dd8087; background:linear-gradient(155deg,#361c1e,#0e0809)}
.photo-fallback .portrait-fallback {display:grid}
.photo-scrim {position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,#150b0ccc 0%,transparent 45%,#2a151730 100%)}
.portrait-watermark {position:absolute; bottom:39px; left:50%; transform:translateX(-50%); font:700 30px 'Space Grotesk',sans-serif; letter-spacing:6px; text-shadow:0 4px 25px #000c; color:#f8f1f2d9}
.float-label {position:absolute; z-index:5; display:flex; align-items:center; gap:12px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); color:#f7f0f1; box-shadow:0 18px 50px #0007}
.float-label--top {top:90px; left:-5px; background:#2b1c1ddc; border:1px solid #7e484c; padding:14px 18px; border-radius:10px; font:700 10px 'Space Grotesk',sans-serif; letter-spacing:2px; transform:rotate(-7deg)}
.glow-star {font-size:24px; color:#e2c9cb; animation:spin-slow 18s linear infinite}
.float-label--bottom {bottom:90px; right:-20px; background:#1b1313ec; border:1px solid #885458; border-radius:11px; padding:13px 16px; min-width:226px; transform:rotate(5deg)}
.kick-mark {width:39px; height:39px; border-radius:8px; background:#55e76c; color:#081409; display:grid; place-items:center; font:900 23px 'Space Grotesk',sans-serif}
.float-label--bottom strong,.float-label--bottom small {display:block}
.float-label--bottom strong {font-size:13px; font-family:'Space Grotesk',sans-serif}
.float-label--bottom small {font-size:10px; color:#d57b82; padding-top:2px}
.float-arrow {font-size:17px; color:var(--purple); margin-left:auto}
.orbit-spark {position:absolute; color:#f16e78; pointer-events:none}
.orbit-spark--1 {top:90px; right:40px; font-size:28px}
.orbit-spark--2 {bottom:54px; left:25px; font-size:30px}
.hero-bottom {height:70px; display:flex; align-items:center; gap:18px; font:700 10px 'Space Grotesk',sans-serif; letter-spacing:2px; color:#846e70}
.scroll-rule {height:1px; width:44px; background:#765356}
.hero-bottom a {font-size:20px; color:var(--purple)}
.hero-index {margin-left:auto; color:#d57c83}

/* Stream */
.stream-section {background:linear-gradient(180deg,#140c0d,#0f0a0a 72%)}
.stream-layout {display:grid; grid-template-columns:minmax(0,1.8fr) minmax(250px,.9fr); gap:20px}
.stream-player {min-height:420px; position:relative; background:#251819; border:1px solid #4f3638; border-radius:14px; overflow:hidden; aspect-ratio:16/9; box-shadow:0 20px 70px #0006}
.stream-player iframe {display:block; border:0; width:100%; height:100%; min-height:350px; background:#000}
.stream-preview {position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(ellipse at 50% 55%,#942e3633,transparent 54%),linear-gradient(135deg,#2c1b1d,#130d0e 78%)}
.stream-preview::before {content:""; position:absolute; width:450px; height:450px; border:1px solid #ce646c2e; border-radius:50%}
.stream-preview::after {content:""; position:absolute; width:310px; height:310px; border:1px solid #ce646c26; border-radius:50%}
.stream-preview-grid {position:absolute; inset:0; opacity:.13; background-image:linear-gradient(#dabcbe22 1px,transparent 1px),linear-gradient(90deg,#dabcbe22 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(transparent,#000 30%,#000 60%,transparent)}
.stream-preview-center {position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px}
.stream-play-icon {height:65px; width:65px; display:grid; place-items:center; border-radius:18px; background:#f6878f; color:#251415; box-shadow:0 0 58px #d5596380; margin-bottom:25px}
.stream-play-icon svg {width:31px; height:31px}
.stream-preview h3 {font-size:clamp(22px,3vw,35px); letter-spacing:-1.2px; margin:0 0 8px}
.stream-preview p {color:#d8838a; font-size:13px; margin-bottom:22px}
.corner-label {position:absolute; left:20px; bottom:18px; font:700 10px 'Space Grotesk',sans-serif; letter-spacing:1.5px; color:#906c6f}
.stream-aside {display:grid; grid-template-rows:1fr 1fr; gap:20px}
.aside-card {min-height:200px; border-radius:13px; border:1px solid var(--line); padding:24px; background:#1d1415; display:flex; flex-direction:column; align-items:flex-start}
.card-overline {font:700 10px 'Space Grotesk',sans-serif; letter-spacing:2.3px; color:#a08082}
.status-badge {font-size:14px; font-weight:700; margin:23px 0 9px; display:flex; align-items:center; gap:10px}
.status-neutral {width:9px; height:9px; background:#d9878d; border-radius:50%; box-shadow:0 0 0 4px #9b6d711a}
.aside-card p {color:#9d8586; font-size:12px; line-height:1.7; margin-bottom:18px}
.aside-link {margin-top:auto; font:700 11px 'Space Grotesk',sans-serif; letter-spacing:1px; display:flex; align-items:center; justify-content:space-between; width:100%; color:#f0e3e4; padding-top:16px; border-top:1px solid #49393b}
.aside-link span {font-size:18px}
.community-card {background:linear-gradient(135deg,#301b1d,#1b1313 80%); position:relative; overflow:hidden}
.community-card::after {content:""; background:#99474d; filter:blur(65px); height:180px; width:180px; border-radius:50%; position:absolute; right:-70px; top:-50px; opacity:.35}
.community-icon {font-size:28px; color:#d8b8bb; position:absolute; right:25px; top:18px}
.community-card h3 {font-size:23px; line-height:1.2; letter-spacing:-.8px; margin:27px 0 16px; position:relative}

/* Clips */
.clips-section {background:#0f090a}
.clip-filters {display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 25px}
.filter-chip {padding:11px 17px; border:1px solid #51383a; border-radius:7px; background:#1a1213; color:#d06a72; font:700 12px 'DM Sans',sans-serif; cursor:pointer; transition:all .2s}
.filter-chip:hover {color:white; border-color:#b65d64}
.filter-chip.is-selected {color:#1e1213; border-color:#eb8d94; background:#ed8f96}
.filter-chip span {font-size:10px; opacity:.6; padding-left:6px}
.clip-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.clip-card {min-width:0; border-radius:12px; overflow:hidden; background:#1a1213; border:1px solid #3a292b; display:flex; flex-direction:column; transition:transform .3s,border-color .3s, box-shadow .3s; animation:clip-in .45s both}
.clip-card:hover {transform:translateY(-6px); border-color:#ba6d73; box-shadow:0 20px 44px #0007}
.clip-cover {height:0; padding-top:56.25%; position:relative; display:block; overflow:hidden; background:radial-gradient(ellipse at 40% 30%,#67292e,#221516)}
.clip-cover img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s,filter .45s; filter:saturate(.9) brightness(.89)}
.clip-card:hover .clip-cover img {transform:scale(1.06); filter:saturate(1.08) brightness(1)}
.clip-cover::after {content:""; inset:0; position:absolute; background:linear-gradient(0deg,#0f090a65,transparent 60%); pointer-events:none}
.clip-cover-fallback {position:absolute; inset:0; display:none; place-items:center; font:700 110px 'Space Grotesk',sans-serif; color:#e07f875c}
.clip-image-fallback .clip-cover-fallback {display:grid}
.clip-duration {position:absolute; bottom:13px; right:13px; background:#0f090adc; padding:6px 8px; border-radius:5px; font:700 11px 'Space Grotesk',sans-serif; z-index:3}
.clip-play {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8); width:52px; height:52px; border:1px solid #ffffff7d; border-radius:50%; background:#ec7f87d9; color:#231213; font-size:24px; display:grid; place-items:center; opacity:0; transition:opacity .25s,transform .25s; z-index:3}
.clip-card:hover .clip-play {opacity:1; transform:translate(-50%,-50%) scale(1)}
.clip-info {padding:18px 19px 16px; display:flex; flex-direction:column; min-height:136px}
.clip-type {color:#e18189; text-transform:uppercase; letter-spacing:1px; font:700 10px 'Space Grotesk',sans-serif; margin-bottom:9px}
.clip-info strong {font-family:'Space Grotesk',sans-serif; font-size:16px; line-height:1.35; letter-spacing:-.4px; min-height:43px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.clip-meta {display:flex; align-items:center; gap:7px; border-top:1px solid #3d2f30; color:#917b7d; font:700 9px 'Space Grotesk',sans-serif; letter-spacing:1.4px; margin-top:15px; padding-top:12px}
.clip-meta>span:last-child {margin-left:auto; font-size:15px; color:#dd9298}
.kick-mini-mark {width:14px; height:14px; background:#53e46c; color:#071b0b; font:900 11px 'Space Grotesk',sans-serif; display:grid; place-items:center; border-radius:2px}
.center-cta {margin-top:34px; text-align:center}

/* YouTube */
.youtube-section {background:linear-gradient(180deg,#150e0e,#120b0c)}
.video-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.video-card {text-align:left; padding:0; border:1px solid #392a2b; background:#1d1415; display:flex; flex-direction:column; border-radius:12px; overflow:hidden; color:var(--text); cursor:pointer; transition:transform .3s,border-color .3s,box-shadow .3s}
.video-card:hover {transform:translateY(-6px); border-color:#b65d64; box-shadow:0 20px 45px #0007}
.video-cover {position:relative; overflow:hidden; display:block; aspect-ratio:16/9; background:radial-gradient(circle,#6f292f,#1b1213); width:100%}
.video-cover img {width:100%; height:100%; object-fit:cover; transition:transform .35s,filter .35s; filter:saturate(.85) brightness(.85)}
.video-card:hover img {transform:scale(1.05); filter:saturate(1) brightness(.95)}
.video-play {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:49px; width:59px; display:grid; place-items:center; background:#e13947eb; border-radius:13px; color:white; font-size:20px; box-shadow:0 10px 28px #0006; transition:transform .25s}
.video-card:hover .video-play {transform:translate(-50%,-50%) scale(1.12)}
.video-info {display:flex; flex-direction:column; gap:9px; padding:20px; min-height:134px}
.video-type {font:700 10px 'Space Grotesk',sans-serif; color:#d3737b; letter-spacing:1.1px}
.video-info strong {font:700 15px/1.4 'Space Grotesk',sans-serif; min-height:41px}
.video-info small {font:700 10px 'Space Grotesk',sans-serif; letter-spacing:1px; color:#917d7f; display:flex; align-items:center; justify-content:space-between; margin-top:auto}
.video-info small span {font-size:17px; color:#d5b4b6}
.youtube-bottom {margin-top:30px; border:1px solid #403334; border-radius:10px; padding:21px 25px; display:flex; align-items:center; justify-content:space-between; background:#1c1515; gap:15px}
.youtube-bottom>div {display:flex; align-items:center; gap:17px; font-size:13px; line-height:1.4; color:#d27078}
.youtube-bottom strong {color:white}
.yt-round {display:grid; place-items:center; width:49px; height:49px; border-radius:50%; background:#bf313c; color:white; font-size:14px}
.youtube-bottom>a {font:700 11px 'Space Grotesk',sans-serif; letter-spacing:1.2px}
.youtube-bottom>a span {font-size:16px; margin-left:9px}

/* Social */
.social-section {background:#0f090a}
.social-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.social-card {border-radius:14px; border:1px solid #433335; height:245px; padding:23px; background:#1a1314; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; transition:transform .3s,border-color .3s,box-shadow .3s}
.social-card::after {content:""; position:absolute; width:165px; height:165px; background:var(--social-glow,#aa4d54); filter:blur(65px); border-radius:50%; opacity:.13; top:0; right:-40px; transition:opacity .3s}
.social-card:hover {transform:translateY(-7px); border-color:#a66d72; box-shadow:0 22px 50px #0009}
.social-card:hover::after {opacity:.34}
.social-top {display:flex; justify-content:space-between; align-items:start; position:relative; z-index:2}
.social-ico {width:55px; height:55px; border-radius:14px; display:grid; place-items:center; background:#4c3738; color:#f4eaeb}
.social-ico svg {width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.social-ico--kick {background:#23482c; color:#67f886; font:900 30px 'Space Grotesk',sans-serif}
.social-insta {--social-glow:#e44d59}
.social-insta .social-ico {background:#4d2b2e; color:#d6b4b7}
.social-youtube {--social-glow:#f04e5b}
.social-youtube .social-ico {background:#452629; color:#fb7c86}
.social-discord {--social-glow:#fb8c94}
.social-discord .social-ico {background:#632f33; color:#e1c8ca}
.social-arrow {font-size:23px; color:#d27178; transition:transform .2s}
.social-card:hover .social-arrow {transform:translate(3px,-3px); color:white}
.social-bottom {display:flex; flex-direction:column; position:relative; z-index:2}
.social-bottom strong {font:700 27px 'Space Grotesk',sans-serif; letter-spacing:-1.2px}
.social-bottom small {font-size:13px; color:#cd5f68; margin-top:5px}

/* About */
.about-section {background:radial-gradient(ellipse at 15% 70%,#482a2d22,transparent 50%),#140c0d}
.about-grid {display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(40px,8vw,140px); align-items:center}
.about-art {height:520px; display:grid; place-items:center; position:relative}
.about-art-frame {height:430px; width:87%; max-width:430px; background:radial-gradient(circle at 50% 30%,#94494e,#341e20 65%,#1d1314); border-radius:160px 160px 12px 12px; border:1px solid #874e53; overflow:hidden; display:flex; justify-content:center; align-items:center; position:relative; box-shadow:0 30px 80px #0005}
.about-art-frame::before {content:""; position:absolute; inset:15px; border:1px solid #d9868d2c; border-radius:inherit}
.about-art-frame::after {content:""; position:absolute; width:250px; height:250px; border:1px solid #e1a1a63d; border-radius:50%; top:80px}
.about-big-letter {font:700 340px 'Space Grotesk',sans-serif; color:#ddc1c3; text-shadow:0 0 70px #f15a66; transform:rotate(-10deg); line-height:1}
.about-mini-star {position:absolute; right:34px; top:70px; font-size:35px; color:#e5d0d2}
.about-art-foot {position:absolute; bottom:24px; left:24px; font:700 10px/1.5 'Space Grotesk',sans-serif; letter-spacing:3px; color:#cebdbe}
.about-art-badge {position:absolute; right:-5px; bottom:32px; border:1px solid #865155; background:#2b1b1ce0; border-radius:9px; padding:16px 19px; color:#dbbdc0; letter-spacing:2px; line-height:1.5; font:700 10px/1.5 'Space Grotesk',sans-serif; transform:rotate(7deg); box-shadow:0 18px 30px #0007}
.about-copy h2 {margin-bottom:26px}
.about-copy p {color:#d57c83; line-height:1.9; font-size:15px; margin-bottom:20px}
.about-copy .about-large {font-size:20px; color:#e3d8d9; line-height:1.7; margin-bottom:18px}
.about-large strong {color:var(--purple-light)}
.about-tags {display:flex; gap:9px; flex-wrap:wrap; margin:24px 0 36px}
.about-tags span {border:1px solid #5c3a3c; padding:9px 12px; border-radius:5px; font:700 10px 'Space Grotesk',sans-serif; letter-spacing:1.3px; color:#e1a0a5}

/* Contact */
.contact-section {background:#0d0909; padding-bottom:130px}
.contact-panel {min-height:470px; border:1px solid #784145; border-radius:19px; background:radial-gradient(circle at 50% 25%,#77292f39,transparent 46%),linear-gradient(145deg,#2b1a1c,#191111); position:relative; isolation:isolate; overflow:hidden; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:70px 30px}
.contact-panel::before {content:""; position:absolute; inset:0; background-image:linear-gradient(#db8c9208 1px,transparent 1px),linear-gradient(90deg,#db8c9208 1px,transparent 1px); background-size:43px 43px; mask-image:radial-gradient(circle at center,#000,transparent 70%); pointer-events:none; z-index:-1}
.contact-light {position:absolute; width:420px; height:240px; background:#ee7780; filter:blur(160px); opacity:.12; top:-100px; left:calc(50% - 200px); z-index:-1}
.contact-spark {font-size:40px; color:#f08890; position:absolute; top:40px; right:70px; animation:spin-slow 20s linear infinite}
.contact-panel h2 {font-size:clamp(39px,5vw,68px); line-height:1.1; margin-bottom:18px}
.contact-panel p {font-size:15px; color:#d88289; line-height:1.6; max-width:480px; margin-bottom:25px}
.contact-buttons {display:flex; gap:12px; flex-wrap:wrap; justify-content:center; position:relative; z-index:3}
.contact-mail {font:500 12px 'Space Grotesk',sans-serif; color:#d9868d; margin-top:18px; text-decoration:underline; text-underline-offset:5px}
.contact-outline {position:absolute; font:700 170px 'Space Grotesk',sans-serif; letter-spacing:-12px; color:#e09ea30b; white-space:nowrap; bottom:-86px; pointer-events:none; user-select:none}

/* Footer */
.site-footer {border-top:1px solid #2a1e1f; background:#0f0a0a}
.footer-inner {display:flex; justify-content:space-between; align-items:center; min-height:110px; gap:25px}
.footer-brand {font-size:17px}
.footer-brand .brand-mark {width:31px; height:31px; font-size:19px}
.footer-inner>span {font:700 9px 'Space Grotesk',sans-serif; letter-spacing:1.3px; color:#806c6e; text-align:center}
.footer-links {display:flex; gap:18px}
.footer-links a {font:700 10px 'Space Grotesk',sans-serif; letter-spacing:1px; color:#d4757d; transition:color .2s}
.footer-links a:hover {color:#e2cbcd}

/* Modal + toast */
.video-modal {position:fixed; z-index:110; inset:0; display:none; align-items:center; justify-content:center; padding:20px}
.video-modal[aria-hidden="false"] {display:flex}
.modal-scrim {position:absolute; inset:0; background:#080505ed; backdrop-filter:blur(12px)}
.modal-content {position:relative; width:min(100%,900px); background:#181010; border:1px solid #7e494d; border-radius:13px; padding:18px; box-shadow:0 30px 120px #000c}
.modal-head {display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px}
.modal-head h3 {font-size:14px; margin:0; line-height:1.3}
.modal-close {height:36px; width:36px; border:1px solid #57383a; border-radius:7px; background:#291c1d; color:white; cursor:pointer; font-size:24px}
.modal-iframe {position:relative; aspect-ratio:16/9; background:#000; border-radius:6px; overflow:hidden}
.modal-iframe iframe {width:100%; height:100%; border:0; position:absolute; inset:0}
.modal-external {display:inline-block; font-size:12px; color:#d5b4b6; margin-top:13px}
.toast {position:fixed; z-index:120; bottom:25px; left:50%; transform:translate(-50%,20px); background:#3b2527; border:1px solid #b56a6f; color:white; box-shadow:0 10px 50px #0009; border-radius:9px; padding:14px 20px; font:700 13px 'DM Sans',sans-serif; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s}
.toast.show {opacity:1; transform:translate(-50%,0)}
@keyframes spin-slow {to {rotate:360deg}}
@keyframes clip-in {from {opacity:0;transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}

/* Responsive */
@media (max-width:1230px) {
  .desktop-nav {gap:13px}
  .nav-link {font-size:10.5px}
  .container {width:min(calc(100% - 56px),var(--max))}
  .hero-grid {grid-template-columns:1.03fr 1fr}
  h1 {font-size:clamp(64px,8.6vw,106px)}
  .photo-frame {height:450px}
  .float-label--bottom {right:-2px}
}
@media (max-width:1050px) {
  .desktop-nav {display:none}
  .menu-toggle {display:block}
  .site-header {height:72px; --header:72px}
  .mobile-nav {display:flex; flex-direction:column; position:absolute; top:72px; left:0; right:0; padding:10px 28px 22px; background:#170e0ff8; border-bottom:1px solid #543537; box-shadow:0 25px 45px #0009; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .2s,transform .2s,visibility .2s}
  .mobile-nav.is-open {opacity:1; visibility:visible; transform:translateY(0)}
  .mobile-nav a {padding:13px 8px; color:#e2d8d9; border-bottom:1px solid #ffffff11; font:700 14px 'Space Grotesk',sans-serif}
  .mobile-nav a span {font-size:10px; letter-spacing:2px; margin-right:15px; color:#d96b74}
  .hero-grid {grid-template-columns:1.1fr 1fr}
  h1 {font-size:clamp(59px,9vw,96px); letter-spacing:-5px}
  .hero-visual {height:560px}
  .photo-frame {height:420px}
  .float-label--top {left:-14px}
  .hero-orbit--1 {width:450px;height:450px}
  .hero-orbit--2 {width:390px;height:480px}
  .social-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .social-card {height:215px}
  .stream-layout {grid-template-columns:1fr}
  .stream-aside {grid-template-columns:1fr 1fr; grid-template-rows:auto}
  .stream-player {min-height:350px}
}
@media (max-width:760px) {
  .container {width:calc(100% - 36px)}
  .section {padding:78px 0}
  .section-heading {align-items:flex-start; gap:18px; flex-direction:column; margin-bottom:30px}
  .section-heading .text-link {margin-top:2px}
  .section-kicker {font-size:10px; margin-bottom:15px}
  h2 {font-size:clamp(38px,8vw,57px); letter-spacing:-2.7px}
  .hero {min-height:auto}
  .hero-grid {min-height:0; grid-template-columns:1fr; gap:0}
  .hero-copy {padding-top:73px}
  .eyebrow {font-size:9px; gap:8px; letter-spacing:1.2px}
  h1 {font-size:clamp(64px,12.7vw,96px); letter-spacing:-5px; margin:22px 0}
  .hero-lead {font-size:15px; max-width:500px; margin-bottom:24px}
  .hero-meta {margin-top:34px}
  .hero-visual {height:510px; margin-top:5px}
  .photo-frame {height:420px; width:min(70%,360px)}
  .hero-orbit--1 {width:460px;height:420px}
  .hero-orbit--2 {width:370px;height:450px}
  .float-label--top {left:8%; top:75px}
  .float-label--bottom {right:8%; bottom:60px}
  .orbit-spark--1 {right:12%}
  .hero-bottom {height:64px}
  .clip-grid,.video-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .clip-info {padding:15px; min-height:130px}
  .about-grid {grid-template-columns:1fr; gap:25px}
  .about-art {height:400px; max-width:480px; width:100%; margin:auto}
  .about-art-frame {height:370px; width:75%}
  .about-big-letter {font-size:285px}
  .about-art-badge {right:9%; bottom:12px}
  .footer-inner {padding-block:25px; flex-direction:column; gap:18px}
  .contact-panel {min-height:420px; padding:60px 20px}
  .contact-outline {font-size:120px; bottom:-60px; letter-spacing:-9px}
}
@media (max-width:530px) {
  .container {width:calc(100% - 32px)}
  .header-kick {padding:10px 11px; font-size:10px}
  .brand {gap:7px; font-size:17px}
  .brand-mark {height:32px; width:32px}
  .hero-copy {padding-top:58px}
  .eyebrow {letter-spacing:.8px; font-size:8px; gap:6px}
  .eyebrow-line {width:17px}
  h1 {font-size:clamp(56px,14.1vw,78px); letter-spacing:-4px}
  .hero-buttons .btn {font-size:11px; padding:0 14px; min-height:49px}
  .hero-buttons .btn-arrow {margin-left:0}
  .hero-meta {font-size:9px; gap:11px}
  .hero-visual {height:430px; margin-top:12px}
  .photo-frame {height:350px; width:min(72%,293px); border-radius:150px 150px 85px 85px}
  .portrait-watermark {font-size:22px; letter-spacing:4px; bottom:27px}
  .hero-orbit--1 {width:350px;height:345px}
  .hero-orbit--2 {width:290px;height:400px}
  .float-label--top {top:58px; left:-4px; padding:10px 12px; font-size:8px}
  .glow-star {font-size:18px}
  .float-label--bottom {bottom:36px; right:-4px; padding:9px 11px; min-width:180px; gap:9px}
  .kick-mark {height:32px; width:32px; font-size:20px}
  .float-label--bottom strong {font-size:11px}
  .float-label--bottom small {font-size:9px}
  .orbit-spark--1 {top:35px;right:2%}
  .orbit-spark--2 {bottom:27px;left:3%}
  .stream-player {min-height:0; aspect-ratio:16/10}
  .stream-player iframe {min-height:0}
  .stream-preview h3 {font-size:20px}
  .stream-preview p {font-size:12px}
  .stream-play-icon {width:50px; height:50px; margin-bottom:15px}
  .stream-preview-center .btn {min-height:43px; padding:0 12px; font-size:11px}
  .corner-label {font-size:8px; left:13px;bottom:10px}
  .stream-aside {grid-template-columns:1fr; gap:12px}
  .aside-card {min-height:187px}
  .clip-grid,.video-grid {grid-template-columns:1fr; gap:15px}
  .clip-cover {padding-top:52%}
  .clip-info {min-height:118px}
  .clip-info strong {min-height:0; font-size:17px}
  .clip-meta {margin-top:16px}
  .video-info {min-height:0}
  .video-info strong {min-height:0}
  .social-grid {gap:11px}
  .social-card {height:175px; padding:16px}
  .social-ico {height:43px; width:43px; border-radius:11px}
  .social-ico--kick {font-size:24px}
  .social-ico svg {height:23px;width:23px}
  .social-bottom strong {font-size:21px}
  .social-bottom small {font-size:11px}
  .social-arrow {font-size:17px}
  .about-art {height:350px}
  .about-art-frame {height:315px}
  .about-big-letter {font-size:240px}
  .about-art-badge {font-size:8px;right:4%}
  .about-copy .about-large {font-size:18px}
  .contact-panel h2 {font-size:clamp(30px,8vw,42px); letter-spacing:-2px}
  .contact-panel p {font-size:13px}
  .contact-buttons {flex-direction:column; width:100%; align-items:center}
  .contact-buttons .btn {width:min(100%,270px)}
  .contact-outline {font-size:80px; bottom:-37px; letter-spacing:-6px}
  .contact-spark {right:23px;top:23px;font-size:26px}
  .youtube-bottom {padding:15px; gap:12px}
  .youtube-bottom>a {font-size:9px}
  .youtube-bottom>div {font-size:11px}
  .yt-round {width:39px;height:39px; flex:none}
  .footer-links {gap:15px}
  .footer-links a {font-size:9px}
  .modal-content {padding:11px}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .reveal {opacity:1;transform:none}
}
/* Keep the decorative off-canvas glow from widening the mobile document. */
.ambient--top {position:fixed}


/* ZEHRAGN v2 · editorial details, real broadcast state */
[hidden] {display:none!important}
body.live-announcement-open {overflow:hidden}
.live-topline {position:sticky;top:var(--header);z-index:88;background:#9e1923;border-bottom:1px solid #f56873;color:#fff;box-shadow:0 10px 32px #1d080965}
.live-topline-inner {display:flex;align-items:center;gap:14px;min-height:48px;font-size:12px;letter-spacing:.1px}
.live-topline-inner strong {white-space:nowrap;font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.7px}
.live-topline-inner #liveToplineTitle {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85;flex:1}
.live-topline-inner a {padding:8px 12px;border:1px solid #f1e5e675;border-radius:7px;font-weight:800;font-size:10px;white-space:nowrap}
.broadcast-dot {display:inline-block;flex:0 0 10px;width:10px;height:10px;background:#fff;border-radius:50%;box-shadow:0 0 0 4px #ffffff2c;animation:pulse-live 1.45s infinite}
@keyframes pulse-live {50%{box-shadow:0 0 0 9px #ffffff00}}
.hero-live-pill {display:inline-flex;gap:12px;align-items:center;border:1px solid #fa5360b0;background:#8c19227a;padding:10px 13px;font-size:11px;font-weight:800;letter-spacing:1.2px;border-radius:7px;margin:0 0 18px}
.hero-live-pill span:last-child {margin-left:6px}
.status-badge {line-height:1.25}
.stream-status-card[data-stream-status=live] {background:linear-gradient(140deg,#30181a,#201516 86%);border-color:#a3363f}
.stream-status-card[data-stream-status=live] .status-badge {color:#fb7a84;font-size:16px}
.stream-status-card[data-stream-status=live] .status-neutral {background:#f93d4c;box-shadow:0 0 0 5px #f93d4c30,0 0 24px #f93d4c}
.stream-status-card[data-stream-status=offline] .status-neutral {background:#cd6169;box-shadow:none}
.stream-live-details {margin:0 0 16px;padding:13px;border-radius:7px;background:#2f1f21;display:flex;flex-direction:column;gap:6px}
.stream-live-details strong {font-size:12px;line-height:1.35}
.stream-live-details small {font-size:11px;color:#e2c9cb}
.feature-label {display:flex;align-items:center;gap:15px;margin-bottom:20px}
.label-bar {height:38px;width:3px;background:#f28790;border-radius:4px}
.feature-label>div {display:flex;flex-direction:column;gap:4px}
.feature-label strong {font:700 13px 'Space Grotesk',sans-serif;letter-spacing:1.3px}
.feature-label small {font-size:12px;color:#a08486}
.feature-label>a {margin-left:auto;color:#de959b;font-size:11px;border-bottom:1px solid #7c5356;padding:6px 0}
.featured-clips {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:55px}
.clip-featured {border-color:#884349;box-shadow:0 5px 24px #cd4e581a}
.featured-corner {position:absolute;z-index:3;top:11px;left:11px;border:1px solid #ead9da65;background:#3b1f21e6;color:#eddddf;line-height:1;font:800 9px 'Space Grotesk',sans-serif;letter-spacing:1px;padding:7px 9px;border-radius:4px}
.library-head {border-top:1px solid #443435;padding-top:29px;display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:17px}
.library-head h3,.all-links h3 {font:700 19px 'Space Grotesk',sans-serif;margin:0;letter-spacing:-.5px}
.library-head>span {color:#9e8688;font-size:12px}
.shorts-band {display:flex;gap:18px;align-items:center;min-height:100px;padding:19px 23px;margin-top:33px;border-radius:11px;border:1px solid #493839;background:linear-gradient(90deg,#291e1e,#1c1314)}
.shorts-band .shorts-icon {width:47px;height:47px;border-radius:12px;flex:none;background:#5f2e32;color:#e8d6d7;display:grid;place-items:center;font-size:22px}
.shorts-band>div:nth-child(2) {display:flex;flex-direction:column;gap:5px}
.shorts-band strong {font-size:15px}
.shorts-band span {font-size:12px;color:#d67c83}
.shorts-band>a {margin-left:auto;flex:none;font:800 10px 'Space Grotesk',sans-serif;letter-spacing:1px;border-bottom:1px solid #7c6466;padding-bottom:7px}
.all-links {margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:28px;border-radius:14px;border:1px solid #39292b;padding:25px 28px;background:#1a1313}
.all-links p {color:#cd6069;font-size:12px;margin:7px 0 0}
.link-pills {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px}
.link-pills a {font-size:12px;font-weight:700;padding:10px 13px;border-radius:7px;background:#322324;border:1px solid #6b4649;white-space:nowrap}
.link-pills a:hover {border-color:#dbbec0;background:#3e282a}
.channel-bio {padding:20px;border:1px solid #5a3639;background:#26191a;border-radius:10px;margin:23px 0;max-width:550px}
.channel-bio>span {display:block;font:700 10px 'Space Grotesk',sans-serif;letter-spacing:1.5px;color:#dc9197;margin-bottom:12px}
.channel-bio p {font-size:13px!important;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;color:#e7dbdc!important;margin:0 0 14px!important}
.channel-bio a {font-size:11px;color:#d9b9bc;font-weight:700}
.live-overlay {position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:16px}
.live-overlay-scrim {position:absolute;inset:0;background:#040202ec;backdrop-filter:blur(17px)}
.live-overlay-box {position:relative;width:min(100%,700px);min-height:480px;padding:clamp(28px,5vw,60px);border-radius:17px;border:1px solid #ee596470;background:radial-gradient(circle at 92% 5%,#751c23 0%,transparent 48%),linear-gradient(135deg,#1a1313,#150e0f);box-shadow:0 30px 140px #000c;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.live-overlay-box::after {content:"";position:absolute;right:-80px;bottom:-180px;width:350px;height:350px;border:1px solid #e8586342;border-radius:50%;box-shadow:0 0 0 50px #e4424f0b,0 0 0 100px #e4424f05;pointer-events:none}
.live-overlay-close {position:absolute;top:18px;right:21px;color:#fff;background:#271c1d;border:1px solid #6e3f43;border-radius:8px;width:37px;height:37px;font-size:23px;cursor:pointer;z-index:3}
.live-overlay-eyebrow {display:flex;gap:12px;align-items:center;color:#d7b6b9;font:800 12px 'Space Grotesk',sans-serif;letter-spacing:2px}
.live-overlay-eyebrow .broadcast-dot {background:#f93d4c;box-shadow:0 0 0 4px #f93d4c33}
.live-overlay-mark {position:absolute;right:30px;top:40px;color:#f38a920c;font:900 230px 'Space Grotesk',sans-serif;line-height:1;pointer-events:none}
.live-overlay-box h2 {font-size:clamp(58px,9vw,109px);line-height:.96;letter-spacing:-6px;margin:28px 0 17px;position:relative;z-index:2}
.live-overlay-box h2 em {background:linear-gradient(110deg,#ddc1c3,#ec4855);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.live-overlay-box p {color:#dacecf;line-height:1.5;font-size:15px;max-width:500px}
.live-overlay-actions {display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 34px;z-index:2}
.btn-live {background:#f93e4d;color:#fff;box-shadow:0 10px 35px #f93e4d4a}
.btn-live:hover {background:#fa5764}
.live-overlay-bottom {font:800 10px 'Space Grotesk',sans-serif;letter-spacing:2px;color:#8d787a;display:flex;align-items:center;gap:16px}
.live-overlay-bottom .broadcast-dot {background:#f93e4d;width:7px;height:7px}
@media(max-width:760px) {
  .featured-clips {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .all-links {flex-direction:column;align-items:flex-start}
  .link-pills {justify-content:flex-start}
  .live-topline-inner {gap:8px;font-size:11px;min-height:43px}
  .live-topline-inner strong {font-size:11px}
  .live-topline-inner a {font-size:9px}
}
@media(max-width:530px) {
  .featured-clips {grid-template-columns:1fr;gap:15px}
  .feature-label>a {display:none}
  .library-head {align-items:flex-start;flex-direction:column}
  .shorts-band {flex-wrap:wrap;padding:16px}
  .shorts-band>a {margin-left:65px}
  .live-topline-inner #liveToplineTitle {display:none}
  .live-topline-inner a {margin-left:auto}
  .live-overlay-box {min-height:430px}
  .live-overlay-box h2 {font-size:clamp(53px,12vw,72px);letter-spacing:-4px}
  .live-overlay-actions {flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){.broadcast-dot {animation:none}}


/* === ZEHRAGN / RED & BLACK EDITION === */
:root {
  color-scheme: dark;
  --bg:#08090a; --bg2:#0d0d0f; --surface:#161113; --surface2:#201416;
  --line:#3b2326; --text:#f7f5f5; --muted:#b1a5a6; --subtle:#817478;
  --purple:#f03c48; --purple-light:#ff9b9e; --purple-deep:#a81d27;
}
html {scrollbar-color:#5b292e #0b0b0d}
body {background:#09090b}
::selection {background:#b91e2e;color:#fff}
button:focus-visible,a:focus-visible {outline-color:#ff6c75}
.site-header {background:#09090be8;border-bottom:1px solid #45232970}
.site-header.is-scrolled {background:#09090bf6}
.brand-mark {background:linear-gradient(140deg,#ef3c4b,#8d1421);border-color:#ff81845d;box-shadow:0 0 24px #b31a3347}
.brand-accent,.brand-dot {color:#ff6169}
.nav-link.is-active::after {background:#f13a45;box-shadow:0 0 18px #f13a4580}
.tiny-circle,.header-kick .tiny-circle {background:#f43f4c;box-shadow:0 0 11px #e53747a3}
.btn-primary {color:#fff;background:linear-gradient(110deg,#e82737,#f94c56);box-shadow:0 10px 32px #c315304f}
.btn-primary:hover {box-shadow:0 15px 44px #f12643a1}
.btn-outline {background:#22151988;border-color:#664044;color:#fff}
.btn-outline:hover {background:#331b20;border-color:#f14955}
h2 em {background:linear-gradient(105deg,#ff878b,#f13542);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero {background:radial-gradient(ellipse 850px 570px at 84% 43%,#8515272a,transparent 74%),#0a090b}
.ambient--top {background:radial-gradient(circle,#9e182b25 0%,#3c111825 42%,transparent 70%)}
.gradient-word {background:linear-gradient(100deg,#fff 0%,#ffaaaa 37%,#f12e42 98%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-light {background:#bb1d30;opacity:.29}
.hero-orbit {border-color:#f1495342}
.hero-orbit--2 {border-color:#f1495328}
.photo-frame {border-color:#f55b6599;background:radial-gradient(circle at 45% 25%,#621925,#160f12 72%);box-shadow:inset 0 0 100px #761c2d55,0 30px 90px #000a,0 0 75px #e12e4025}
.photo-glow {border-color:#ff99943a}
.portrait-fallback {color:#ed4d58;background:linear-gradient(150deg,#42141e,#100c0f)}
.photo-scrim {background:linear-gradient(0deg,#14090cd9 0%,transparent 45%,#210b1540 100%)}
.scroll-progress {background:linear-gradient(90deg,#981725,#ff5059)}
.social-card:hover,.clip-card:hover,.video-card:hover {border-color:#ec4356}
.video-play {background:#ea2639}
.live-topline {background:#a81724}
.live-overlay-box {background:radial-gradient(circle at 92% 5%,#74111d 0%,transparent 47%),linear-gradient(135deg,#1b1013,#100c0e)}
.live-overlay-box h2 em {background:linear-gradient(100deg,#ff9296,#f12c3e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.btn-live {background:#ee2e40;color:white}
.btn-live:hover {background:#ff4c5b}
/* UI details carry a single accent family; only platform logos keep brand colors. */
.stream-preview,.stream-player,.social-card,.video-card,.clip-card,.aside-card {box-shadow:0 14px 35px #0002}
@media (prefers-reduced-motion:reduce) {.reveal{opacity:1;transform:none}}


/* BOTRIX · COMMUNITY TOP 10 (keeps 7 original navigation tabs) */
.leaderboard-hero-link {margin-top:20px}
.leaderboard-hero-link a {display:inline-flex;align-items:center;gap:10px;font:700 11px 'Space Grotesk',sans-serif;letter-spacing:1.25px;color:#eca6ad;transition:color .2s}
.leaderboard-hero-link a:hover {color:#fff}
.leaderboard-hero-link span:first-child {color:#ff747e;font-size:18px}
.viewer-leaderboard-section {overflow:hidden; background:radial-gradient(ellipse 520px 420px at 91% 24%,#631d2633,transparent),linear-gradient(165deg,#110c0d 0%,#0d0809 70%)}
.viewer-leaderboard-section::before {content:'COMMUNITY';position:absolute;right:-1%;top:50px;font:800 clamp(90px,13vw,210px)/1 'Space Grotesk',sans-serif;letter-spacing:-12px;color:#ffffff04;pointer-events:none}
.leaderboard-shell {position:relative;border:1px solid #63373b;background:linear-gradient(145deg,#221416,#110b0d 57%,#191011);border-radius:20px;box-shadow:0 30px 100px #0006,0 0 64px #d5283810;overflow:hidden}
.leaderboard-shell::before {content:'';height:3px;position:absolute;left:0;top:0;right:0;background:linear-gradient(90deg,#ff5967,#9c2831 45%,#150f10)}
.leaderboard-shell-head {padding:23px 30px;display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid #ffffff12}
.leaderboard-brand {display:flex;align-items:center;gap:14px;font:800 13px 'Space Grotesk',sans-serif;letter-spacing:1.3px}
.leaderboard-brand small {display:block;font-size:10px;letter-spacing:1.7px;color:#987b80;font-weight:600;margin-top:4px}
.leaderboard-emblem {display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#ff919a;font-size:26px;background:linear-gradient(145deg,#6d2933,#321c1f);border:1px solid #a84a55}
.leaderboard-tools {display:flex;gap:20px;align-items:center}
.leaderboard-source {display:inline-flex;gap:7px;align-items:center;color:#dbb4b8;font:700 10px 'Space Grotesk',sans-serif;letter-spacing:1.15px}
.leaderboard-source i {height:7px;width:7px;background:#d5636d;border-radius:50%;box-shadow:0 0 0 4px #ce4b561d}
.leaderboard-refresh {border:1px solid #71434a;border-radius:8px;padding:10px 13px;background:#291b1e;color:#f6dfe1;font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.9px;cursor:pointer;transition:background .2s,border-color .2s}
.leaderboard-refresh:hover {background:#49252b;border-color:#fa7e8c}
.leaderboard-refresh[disabled] {opacity:.5;cursor:wait}
.leaderboard-refresh span {font-size:16px;margin-right:5px;vertical-align:-1px}
.leaderboard-content {min-height:320px;padding:30px}
.leaderboard-state {min-height:270px;display:flex;flex-direction:column;gap:13px;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 40%,#a8293218,transparent 45%)}
.leaderboard-state-icon {width:65px;height:65px;border:1px solid #a34c55;background:#5c28302b;border-radius:17px;color:#f28791;display:grid;place-items:center;font-size:30px}
.leaderboard-state strong {font:700 clamp(19px,2.4vw,26px) 'Space Grotesk',sans-serif;color:#f8e7e9}
.leaderboard-state p {color:#bf9da2;font-size:14px;line-height:1.65;max-width:450px;margin:0}
.leaderboard-state a {margin-top:8px;display:inline-flex;align-items:center;gap:8px;padding:13px 17px;border:1px solid #bf616d;background:#6b2731;color:#fff;border-radius:9px;font-size:12px;font-weight:700;transition:background .2s}
.leaderboard-state a:hover {background:#a93a47}
.lb-loader {height:45px;width:45px;border:3px solid #6d3138;border-top-color:#ff7b87;border-radius:50%;animation:lbspin 1s linear infinite}
@keyframes lbspin {to{transform:rotate(360deg)}}
.lb-podium {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;margin:3px 0 28px}
.lb-podium-card {position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:24px 13px 21px;gap:8px;border:1px solid #643c42;border-radius:15px;background:linear-gradient(145deg,#382023,#1a1113);min-height:202px;overflow:hidden}
.lb-podium-card::before {content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#eb707a,transparent);opacity:.6}
.lb-podium-card--1 {order:2;min-height:235px;border-color:#bb5963;background:radial-gradient(ellipse at 50% 0%,#822f3b77,transparent 64%),linear-gradient(145deg,#422126,#1d1214);box-shadow:0 12px 50px #bb24301a}
.lb-podium-card--2 {order:1}
.lb-podium-card--3 {order:3}
.lb-podium-crown {font-size:27px;line-height:1;color:#ff8993}
.lb-podium-rank {font:800 23px 'Space Grotesk',sans-serif;color:#f7a0a8;letter-spacing:-1px}
.lb-podium-card--1 .lb-podium-rank {color:#ffe0b1}
.lb-podium-avatar {display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#5b2932;color:#ffe5e8;font:700 18px 'Space Grotesk',sans-serif;box-shadow:inset 0 0 0 1px #d1768159}
.lb-podium-name {font:700 clamp(12px,1.4vw,17px) 'Space Grotesk',sans-serif;color:#fff;overflow-wrap:anywhere}
.lb-podium-points {font:800 13px 'Space Grotesk',sans-serif;color:#ed8b94}
.lb-podium-watch {font-size:11px;color:#baa4a6}
.lb-row-head {display:grid;grid-template-columns:65px minmax(0,1fr) minmax(75px,130px) minmax(95px,165px);gap:16px;padding:14px 23px;font:700 10px 'Space Grotesk',sans-serif;letter-spacing:1.25px;color:#947b7f;border:1px solid #443034;border-radius:11px 11px 0 0;background:#190f11}
.lb-row {display:grid;grid-template-columns:65px minmax(0,1fr) minmax(75px,130px) minmax(95px,165px);gap:16px;align-items:center;padding:16px 23px;border-bottom:1px solid #ffffff0c;border-inline:1px solid #443034;background:#1a1214;transition:background .2s}
.lb-row:last-child {border-radius:0 0 11px 11px;border-bottom:1px solid #443034}
.lb-row:hover {background:#2a181c}
.lb-row-rank {font:800 18px 'Space Grotesk',sans-serif;color:#d97e88}
.lb-row-name {display:flex;align-items:center;gap:11px;min-width:0;font-size:14px;font-weight:700;color:#f5e9ea;overflow-wrap:anywhere}
.lb-row-avatar {width:33px;height:33px;flex:none;display:grid;place-items:center;border:1px solid #643942;background:#402128;color:#e7b6bd;border-radius:9px;font:800 13px 'Space Grotesk',sans-serif}
.lb-row-points {font:700 13px 'Space Grotesk',sans-serif;color:#ffc4c8}
.lb-row-watch {font-size:12px;color:#bca0a5}
.leaderboard-shell-foot {padding:18px 30px;display:flex;justify-content:space-between;gap:16px;color:#9a7f84;font-size:11px;border-top:1px solid #ffffff0e}
.leaderboard-credit {font:700 10px 'Space Grotesk',sans-serif;letter-spacing:1.5px;white-space:nowrap;color:#c7777e}
.leaderboard-credit span {margin-left:8px;color:#e3727c}
.leaderboard-note {margin-top:18px;display:flex;align-items:start;gap:11px;color:#988186;font-size:12px;line-height:1.6}
.leaderboard-note-icon {flex:none;display:grid;place-items:center;height:18px;width:18px;border:1px solid #8b4e57;border-radius:50%;color:#e5a5ae;font-weight:700;font-size:11px}
@media (max-width:800px) {
  .viewer-leaderboard-section::before {font-size:84px;letter-spacing:-5px;top:60px}
  .leaderboard-shell-head {padding:17px 18px}
  .leaderboard-tools {gap:10px}
  .leaderboard-source {display:none}
  .leaderboard-content {padding:17px}
  .lb-podium {gap:8px}
  .lb-podium-card {min-height:197px;padding:18px 8px}
  .lb-podium-card--1 {min-height:222px}
  .lb-row-head,.lb-row {grid-template-columns:42px minmax(0,1fr) 85px;gap:10px;padding:13px}
  .lb-row-head span:last-child,.lb-row-watch {display:none}
  .leaderboard-shell-foot {padding:16px 18px}
}
@media (max-width:520px) {
  .leaderboard-shell {border-radius:13px}
  .leaderboard-brand {font-size:10px;gap:9px;letter-spacing:.7px}
  .leaderboard-emblem {width:37px;height:37px;font-size:22px;border-radius:9px}
  .leaderboard-brand small {font-size:8px}
  .leaderboard-refresh {padding:8px;font-size:10px}
  .leaderboard-content {padding:10px}
  .lb-podium {gap:5px}
  .lb-podium-card {gap:6px;padding:15px 5px 13px;min-height:192px;border-radius:9px}
  .lb-podium-card--1 {min-height:211px}
  .lb-podium-crown {font-size:23px}
  .lb-podium-rank {font-size:19px}
  .lb-podium-avatar {width:37px;height:37px}
  .lb-podium-name {font-size:11px}
  .lb-podium-points {font-size:11px}
  .lb-podium-watch {font-size:10px}
  .lb-row {font-size:11px}
  .lb-row-name {gap:6px;font-size:12px}
  .lb-row-avatar {width:27px;height:27px}
  .lb-row-points {font-size:11px}
  .leaderboard-shell-foot {flex-wrap:wrap;gap:7px;font-size:10px}
  .leaderboard-credit {font-size:9px}
  .leaderboard-state {min-height:270px}
}
@media (prefers-reduced-motion: reduce) {.lb-loader {animation:none}}