:root{
  --bg:#070b1a;--bg2:#0b1024;--panel:#10162d;--panel2:#141b36;--text:#f7f8ff;--muted:#aeb6d3;
  --cyan:#22d3ee;--blue:#3b82f6;--violet:#8b5cf6;--pink:#ec4899;--red:#ff315d;--orange:#ff9f1c;
  --green:#22c55e;--line:rgba(255,255,255,.09);--shadow:0 18px 60px rgba(0,0,0,.42);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:
radial-gradient(circle at 20% 0%,rgba(59,130,246,.16),transparent 28%),
radial-gradient(circle at 80% 5%,rgba(236,72,153,.12),transparent 24%),
linear-gradient(180deg,#090e20 0,#060916 100%);color:var(--text);min-height:100vh}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.container{width:min(1480px,calc(100% - 36px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,11,26,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:12px;min-width:255px}
.brand-mark{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--cyan),var(--violet) 50%,var(--pink));display:grid;place-items:center;font-weight:1000;font-size:22px;box-shadow:0 0 30px rgba(34,211,238,.25)}
.brand-name{font-weight:1000;line-height:.92;font-size:22px;text-transform:uppercase;letter-spacing:-.8px}
.brand-name span{display:block;color:#ffc928;font-style:italic}
.menu{display:flex;gap:6px;align-items:center;flex:1;justify-content:center}
.menu a{padding:12px 13px;border-radius:12px;color:#e8ebf7;font-weight:750;font-size:14px}
.menu a:hover,.menu a.active{background:rgba(255,255,255,.065);color:#54d6ff}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn,.btn{border:1px solid var(--line);background:rgba(255,255,255,.045);color:white;border-radius:14px;padding:11px 15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.icon-btn{width:44px;height:44px;padding:0;border-radius:50%}
.btn-red{background:linear-gradient(135deg,#ff315d,#ff4f77);border-color:transparent;box-shadow:0 10px 30px rgba(255,49,93,.3)}
.btn-dark:hover,.icon-btn:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08)}
.mobile-toggle{display:none}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;background:
linear-gradient(90deg,rgba(4,8,22,.94) 0%,rgba(4,8,22,.68) 40%,rgba(4,8,22,.18) 68%,rgba(4,8,22,.78) 100%),
radial-gradient(circle at 70% 40%,rgba(255,49,93,.22),transparent 22%),
radial-gradient(circle at 55% 30%,rgba(34,211,238,.22),transparent 24%),
linear-gradient(135deg,#111a3f,#091126 55%,#210c2e)}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,black,transparent)}
.hero-inner{position:relative;z-index:2;min-height:510px;display:grid;grid-template-columns:1.05fr .9fr;align-items:center;gap:36px;padding:66px 0 90px}
.kicker{font-size:13px;text-transform:uppercase;letter-spacing:2.6px;color:#64dcff;font-weight:900}
.hero h1{font-size:clamp(54px,7vw,104px);line-height:.88;margin:10px 0 18px;letter-spacing:-5px;text-transform:uppercase;text-shadow:0 10px 30px rgba(0,0,0,.36)}
.hero h1 .accent{display:block;color:#ffc52a;font-style:italic;transform:skew(-7deg);text-shadow:0 4px 0 #6e3c00,0 12px 30px rgba(255,197,42,.16)}
.hero p{max-width:650px;color:#d5daec;font-size:18px;line-height:1.62}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.tag{font-weight:850;font-size:13px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-visual{position:relative;min-height:390px}
.creator{position:absolute;left:9%;top:3%;width:63%;aspect-ratio:1/1;border-radius:42% 58% 44% 56% / 48% 40% 60% 52%;background:
radial-gradient(circle at 50% 30%,#f6b58f 0 10%,transparent 10.5%),
radial-gradient(circle at 40% 34%,#2a1513 0 4%,transparent 4.5%),
linear-gradient(145deg,#53211d 0 25%,#11182e 25% 62%,#0b0e16 62%);
box-shadow:0 0 0 10px rgba(34,211,238,.06),0 0 80px rgba(34,211,238,.15);transform:rotate(-4deg)}
.creator::before{content:"DAVID";position:absolute;right:-30%;top:20%;font-weight:1000;font-size:88px;color:rgba(255,255,255,.06);transform:rotate(4deg)}
.creator::after{content:"⚡";position:absolute;right:-3%;bottom:3%;width:92px;height:92px;border-radius:28px;background:linear-gradient(135deg,var(--pink),var(--violet));display:grid;place-items:center;font-size:48px;box-shadow:0 0 40px rgba(236,72,153,.32)}
.neon-play{position:absolute;right:1%;top:5%;width:160px;height:112px;border:10px solid #ff3b69;border-radius:32px;display:grid;place-items:center;font-size:48px;color:#ff3b69;box-shadow:inset 0 0 30px rgba(255,59,105,.35),0 0 30px rgba(255,59,105,.38);transform:rotate(4deg)}
.side-note{position:absolute;right:0;bottom:25px;text-align:right;font-family:cursive;font-size:22px;line-height:1.35;color:white;transform:rotate(-4deg)}
.side-note strong{color:#ffc928}
.universe-strip{position:relative;z-index:4;margin-top:-48px}
.universes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.universe-card{min-height:104px;border-radius:18px;padding:20px;display:flex;gap:16px;align-items:center;border:1px solid;box-shadow:var(--shadow);background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));backdrop-filter:blur(12px)}
.universe-card .uicon{width:58px;height:58px;border-radius:15px;display:grid;place-items:center;font-size:30px;font-weight:900}
.universe-card h3{margin:0 0 5px;font-size:18px}.universe-card p{margin:0;color:#c6cce0;font-size:13px;line-height:1.35}
.u-red{border-color:#ff315d}.u-red .uicon{background:linear-gradient(135deg,#ff315d,#ff0a4f);box-shadow:0 0 28px rgba(255,49,93,.3)}
.u-violet{border-color:#a855f7}.u-violet .uicon{background:linear-gradient(135deg,#8b5cf6,#d946ef);box-shadow:0 0 28px rgba(168,85,247,.28)}
.u-blue{border-color:#22a6ff}.u-blue .uicon{background:linear-gradient(135deg,#2487ff,#35c2ff);box-shadow:0 0 28px rgba(34,166,255,.28)}
.u-orange{border-color:#ff9f1c}.u-orange .uicon{background:linear-gradient(135deg,#ff7a18,#ffbd2e);box-shadow:0 0 28px rgba(255,159,28,.28)}
.section{padding:34px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.section-title{display:flex;align-items:center;gap:14px;font-size:30px;margin:0;font-weight:950}
.section-title::before{content:"";width:34px;height:7px;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--violet))}
.card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.video-card{min-width:0}
.thumb{aspect-ratio:16/9;border-radius:14px;overflow:hidden;position:relative;background:
radial-gradient(circle at 75% 25%,rgba(255,196,37,.85),transparent 16%),
radial-gradient(circle at 25% 30%,rgba(34,211,238,.8),transparent 20%),
linear-gradient(135deg,#30215a,#0e63a8 45%,#e63a61);border:1px solid rgba(255,255,255,.1)}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.38))}
.thumb .bigword{position:absolute;left:12px;top:10px;font-size:clamp(18px,2vw,31px);font-weight:1000;line-height:.9;text-transform:uppercase;text-shadow:2px 3px 0 #000;transform:rotate(-3deg);z-index:2}
.duration{position:absolute;right:8px;bottom:8px;padding:4px 6px;background:#060606d9;border-radius:6px;font-size:12px;font-weight:800;z-index:3}
.video-title{font-weight:800;line-height:1.35;margin:10px 2px 4px;font-size:15px}.meta{color:var(--muted);font-size:12px}
.playlist-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.playlist-card{padding:16px;border:1px solid;border-radius:15px;display:flex;align-items:center;gap:12px;min-height:80px;background:rgba(255,255,255,.035)}
.playlist-card .picon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px}
.playlist-card strong{font-size:14px;display:block}.playlist-card small{color:#c5cbe0}
.red{border-color:#e52d52}.red .picon{background:#ff174f}.blue{border-color:#1596db}.blue .picon{background:#178ce7}.violet{border-color:#9a43e8}.violet .picon{background:#8b5cf6}.green{border-color:#22a75a}.green .picon{background:#22c55e}.orange{border-color:#d67c18}.orange .picon{background:#ff9914}.pink{border-color:#d23d8d}.pink .picon{background:#ec4899}
.page-hero{padding:72px 0 34px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(22,31,70,.58),transparent)}
.page-hero h1{font-size:54px;margin:0 0 10px;letter-spacing:-2.5px}.page-hero p{color:var(--muted);max-width:760px;font-size:17px}
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.filter{padding:10px 14px;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:999px;font-weight:750;color:#dce2f4}.filter.active{border-color:#43d6ff;color:#59dcff;background:rgba(34,211,238,.09)}
.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.panel{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.feature-list{display:grid;gap:14px}.feature-item{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.feature-item .mini{border-radius:12px;background:linear-gradient(135deg,#293883,#7c2f8d);min-height:90px}
.footer{margin-top:60px;border-top:1px solid var(--line);padding:36px 0 50px;color:#aeb6d3}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.footer h4{color:white;margin:0 0 12px}.footer a{display:block;margin:7px 0}
.search-overlay{display:none;position:fixed;inset:0;z-index:100;background:rgba(4,7,17,.86);backdrop-filter:blur(20px);padding:90px 20px}.search-overlay.open{display:block}.searchbox{width:min(780px,100%);margin:auto}.searchbox input{width:100%;font-size:28px;padding:22px 24px;border-radius:18px;border:1px solid rgba(255,255,255,.16);background:#10162d;color:#fff;outline:none}
@media(max-width:1200px){.menu{display:none}.mobile-toggle{display:inline-flex}.card-grid{grid-template-columns:repeat(3,1fr)}.playlist-grid{grid-template-columns:repeat(3,1fr)}.universes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.container{width:min(100% - 22px,1480px)}.brand{min-width:auto}.brand-name{font-size:18px}.nav-actions .social,.nav-actions .subscribe{display:none}.hero-inner{grid-template-columns:1fr;padding:46px 0 80px}.hero-visual{min-height:290px}.creator{left:18%;width:58%}.hero h1{letter-spacing:-3px}.universes{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(2,1fr)}.playlist-grid{grid-template-columns:1fr 1fr}.content-grid{grid-template-columns:1fr}.page-hero h1{font-size:40px}}
@media(max-width:520px){.card-grid{grid-template-columns:1fr}.playlist-grid{grid-template-columns:1fr}.hero h1{font-size:48px}.hero p{font-size:16px}.side-note{font-size:17px}.feature-item{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}


.collection-bridge{
  padding:34px;
  display:grid;
  grid-template-columns:1.6fr auto;
  gap:26px;
  align-items:center;
  border-color:rgba(139,92,246,.42);
  background:
    radial-gradient(circle at 85% 20%,rgba(34,211,238,.14),transparent 32%),
    radial-gradient(circle at 15% 100%,rgba(236,72,153,.14),transparent 34%),
    rgba(255,255,255,.04);
}
@media(max-width:800px){
  .collection-bridge{grid-template-columns:1fr}
}