/* ============================================================
   PORTFOLIO — Surabhi Dashputra
   Dark Luxury Theme  ·  Gold + Rose Accents
   ============================================================ */

/* ── Reset & Variables ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --bg:         #08080f;
    --bg2:        #111118;
    --card:       rgba(255,255,255,.04);
    --card-bd:    rgba(255,255,255,.08);
    --gold:       #d4a227;
    --gold-lt:    #e8c347;
    --rose:       #e94560;
    --purple:     #9b6dff;
    --txt:        #ffffff;
    --txt2:       rgba(255,255,255,.58);
    --txt3:       rgba(255,255,255,.32);
    --head:       'Playfair Display', Georgia, serif;
    --body:       'Poppins', 'Segoe UI', sans-serif;
    --max:        1180px;
    --sec-pad:    100px 24px;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--body);
    background: var(--bg);
    color: var(--txt);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width:100%; display:block; }

/* ── Gradient Text Helper ── */
.highlight {
    background: linear-gradient(135deg, var(--gold), var(--rose));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   AMBIENT BACKGROUND  (slow-drifting gradient orbs)
   ============================================================ */
.ambient-bg {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.orb {
    position: absolute; border-radius: 50%;
    filter: blur(110px); opacity: .14;
    animation: drift 22s ease-in-out infinite;
}
.orb-1 { width:600px; height:600px; background:var(--purple); top:-220px; left:-120px; animation-delay:0s; }
.orb-2 { width:520px; height:520px; background:var(--rose);   bottom:-180px; right:-130px; animation-delay:-8s; }
.orb-3 { width:380px; height:380px; background:var(--gold);   top:55%; left:45%; opacity:.07; animation-delay:-15s; }

@keyframes drift {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(35px,-45px) scale(1.06); }
    66%     { transform: translate(-25px,30px) scale(.95); }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
nav {
    position: fixed; top:0; left:0; right:0; z-index:1000;
    padding: 22px 0;
    transition: padding .35s, background .35s, border-color .35s;
}
nav.scrolled {
    padding: 12px 0;
    background: rgba(8,8,15,.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--card-bd);
}

.nav-container {
    max-width: var(--max); margin: 0 auto; padding: 0 30px;
    display: flex; align-items: center; justify-content: space-between;
}

/* Logo */
.logo { display:flex; align-items:center; gap:9px; font-family:var(--head); font-size:1.5rem; font-weight:700; }
.logo-img { height:40px; width:auto; object-fit:contain; }
.logo-sym { color:var(--gold); }

/* Links */
.nav-links { display:flex; list-style:none; gap:34px; align-items:center; }
.nav-links a {
    font-size:.82rem; font-weight:500; color:var(--txt2);
    text-transform:uppercase; letter-spacing:.8px;
    position:relative; padding:5px 0;
    transition: color .3s;
}
.nav-links a::after {
    content:''; position:absolute; bottom:-2px; left:0;
    width:0; height:2px; background:var(--gold);
    transition: width .3s;
}
.nav-links a:hover,
.nav-links a.active { color:var(--gold); }
.nav-links a:hover::after,
.nav-links a.active::after { width:100%; }

/* Hamburger */
.menu-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.menu-toggle span { display:block; width:24px; height:2px; background:var(--txt); border-radius:2px; transition: .3s; }

/* Mobile overlay */
.nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999; }
.nav-overlay.active { display:block; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 26px; border-radius:50px;
    font-size:.92rem; font-weight:500; font-family:var(--body);
    border:none; cursor:pointer; transition: .3s;
}
.btn-spotify { background:#1db954; color:#000; }
.btn-spotify:hover { background:#1ed760; transform:translateY(-2px); box-shadow:0 8px 24px rgba(29,185,84,.3); }

.btn-yt { background:#ff0000; color:#fff; }
.btn-yt:hover { background:#ff2929; transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,0,0,.28); }

.btn-outline {
    background:transparent; border:1px solid var(--card-bd); color:var(--txt);
    padding:11px 22px; font-size:.88rem; margin-top:22px;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative; z-index:1;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 100px 24px 70px;
    overflow:hidden;
}

.hero-notes {
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:1;
}

.hero-wrap {
    position:relative;
    z-index:2;
    max-width: var(--max); margin: 0 auto; width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:60px;
}

/* Left content */
.hero-content { flex:1; max-width:580px; }

.badge {
    display:inline-block; padding:8px 18px;
    background:rgba(212,162,39,.1); border:1px solid rgba(212,162,39,.28);
    border-radius:30px; color:var(--gold);
    font-size:.84rem; font-weight:500; letter-spacing:.9px;
    margin-bottom:22px;
}

.hero-content h1 {
    font-family: var(--head);
    font-size: clamp(3rem, 7.5vw, 5.8rem);
    line-height: 1.08; margin-bottom: 18px;
}
.name-first { display:block; font-weight:400; }
.name-last  { display:block; font-weight:700; }

/* Waveform */
.waveform { display:flex; align-items:center; gap:4px; height:34px; margin-bottom:22px; }
.wb {
    width:3px; border-radius:3px;
    background: linear-gradient(to top, var(--gold), var(--rose));
    animation: wave 1.3s ease-in-out infinite;
}
.wb:nth-child(1){height:55%; animation-delay:.00s}
.wb:nth-child(2){height:78%; animation-delay:.10s}
.wb:nth-child(3){height:100%;animation-delay:.22s}
.wb:nth-child(4){height:68%; animation-delay:.18s}
.wb:nth-child(5){height:90%; animation-delay:.12s}
.wb:nth-child(6){height:50%; animation-delay:.28s}
.wb:nth-child(7){height:72%; animation-delay:.35s}

@keyframes wave {
    0%,100% { transform:scaleY(.45); opacity:.55; }
    50%     { transform:scaleY(1);    opacity:1; }
}

.hero-sub { font-size:1.05rem; color:var(--txt2); margin-bottom:32px; }
.gold-text { color:var(--gold); font-weight:600; }

.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }

/* Hero social icons */
.hero-socials { display:flex; gap:16px; }
.hero-socials a {
    width:42px; height:42px; border-radius:50%;
    border:1px solid var(--card-bd);
    display:flex; align-items:center; justify-content:center;
    color:var(--txt2); font-size:.95rem;
    transition: .3s;
}
.hero-socials a:hover {
    border-color:var(--gold); color:var(--gold);
    background:rgba(212,162,39,.1); transform:translateY(-3px);
}

/* Right visual — spinning ring + image */
.hero-visual { position:relative; flex:0 0 400px; height:400px; display:flex; align-items:center; justify-content:center; }

.hero-ring {
    position:relative; width:300px; height:300px;
}
.hero-ring::before {
    content:''; position:absolute; inset:-4px; border-radius:50%;
    background: linear-gradient(135deg, var(--gold), var(--rose), var(--purple));
    animation: spin 9s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.hero-img-wrap {
    position:absolute; inset:5px; border-radius:50%;
    overflow:hidden; background:var(--bg);
}
.hero-placeholder {
    width:100%; height:100%;
    background:linear-gradient(145deg,#1a1a2e,#16213e,#0f3460);
    display:flex; align-items:center; justify-content:center;
}
.hero-placeholder i { font-size:72px; color:rgba(255,255,255,.12); }

/* Floating notes */
.float-note {
    position:absolute;
    color:var(--gold);
    opacity:0;
    font-size:1.8rem;
    pointer-events:none;
    animation: riseNote 16s linear infinite;
    filter: drop-shadow(0 10px 26px rgba(212,162,39,.18));
}
.n1{left:12%;  bottom:-16%; animation-delay:-2s;  animation-duration:18s; font-size:1.6rem}
.n2{right:14%; bottom:-22%; animation-delay:-7s;  animation-duration:20s; font-size:2.1rem}
.n3{left:14%;  bottom:-18%; animation-delay:-12s; animation-duration:17s; font-size:1.4rem}
.n4{right:10%; bottom:-14%; animation-delay:-4s;  animation-duration:19s; font-size:1.9rem}
.n5{left:28%;  bottom:-26%; animation-delay:-9s;  animation-duration:22s; font-size:1.3rem}
.n6{left:42%;  bottom:-18%; animation-delay:-15s; animation-duration:18.5s; font-size:1.7rem}
.n7{left:58%;  bottom:-24%; animation-delay:-5s;  animation-duration:21s; font-size:1.25rem}
.n8{right:28%; bottom:-20%; animation-delay:-13s; animation-duration:19.5s; font-size:2.2rem}
.n9{left:6%;   bottom:-28%; animation-delay:-18s; animation-duration:23s; font-size:1.2rem}
.n10{right:4%; bottom:-30%; animation-delay:-10s; animation-duration:24s; font-size:1.35rem}
.n11{left:72%; bottom:-16%; animation-delay:-16s; animation-duration:20.5s; font-size:1.55rem}
.n12{left:86%; bottom:-22%; animation-delay:-6s;  animation-duration:18.8s; font-size:1.4rem}
.n13{right:42%;bottom:-26%; animation-delay:-20s; animation-duration:25s; font-size:1.15rem}
.n14{left:20%; bottom:-14%; animation-delay:-1s;  animation-duration:17.8s; font-size:2.05rem}
.n15{right:20%;bottom:-18%; animation-delay:-11s; animation-duration:21.8s; font-size:1.6rem}
.n16{left:50%; bottom:-32%; animation-delay:-22s; animation-duration:26s; font-size:1.85rem}

/* Doubled music bubbles (n17–n32) */
.n17{left:8%;   bottom:-20%; animation-delay:-3s;  animation-duration:19s; font-size:1.5rem}
.n18{right:22%; bottom:-16%; animation-delay:-8s;  animation-duration:21s; font-size:2.0rem}
.n19{left:32%;  bottom:-24%; animation-delay:-14s; animation-duration:18s; font-size:1.3rem}
.n20{right:6%;  bottom:-18%; animation-delay:-6s;  animation-duration:20s; font-size:1.75rem}
.n21{left:18%;  bottom:-22%; animation-delay:-11s; animation-duration:23s; font-size:1.45rem}
.n22{left:55%;  bottom:-26%; animation-delay:-17s; animation-duration:19.5s; font-size:1.65rem}
.n23{left:68%;  bottom:-14%; animation-delay:-3.5s; animation-duration:22s; font-size:1.2rem}
.n24{right:32%; bottom:-28%; animation-delay:-14.5s; animation-duration:20.5s; font-size:2.15rem}
.n25{left:3%;   bottom:-20%; animation-delay:-19s; animation-duration:24s; font-size:1.35rem}
.n26{right:2%;  bottom:-24%; animation-delay:-9.5s; animation-duration:25s; font-size:1.5rem}
.n27{left:78%;  bottom:-18%; animation-delay:-16.5s; animation-duration:21.5s; font-size:1.4rem}
.n28{left:90%;  bottom:-26%; animation-delay:-7.5s; animation-duration:19.2s; font-size:1.55rem}
.n29{right:48%; bottom:-30%; animation-delay:-21s; animation-duration:26s; font-size:1.1rem}
.n30{left:25%;  bottom:-16%; animation-delay:-2.5s; animation-duration:18.5s; font-size:1.95rem}
.n31{right:16%; bottom:-22%; animation-delay:-12.5s; animation-duration:22.5s; font-size:1.7rem}
.n32{left:45%;  bottom:-28%; animation-delay:-23.5s; animation-duration:27s; font-size:1.9rem}

@keyframes riseNote {
    0%   { transform: translate3d(0, 10vh, 0) rotate(-10deg); opacity:0; }
    12%  { opacity:.6; }
    55%  { opacity:.9; }
    100% { transform: translate3d(10px, -120vh, 0) rotate(12deg); opacity:0; }
}

@media (prefers-reduced-motion: reduce) {
    .float-note { animation: none; opacity:.3; }
}

/* Scroll hint */
.scroll-hint {
    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
    z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    color:var(--txt3); font-size:.72rem; letter-spacing:2px; text-transform:uppercase;
}
.scroll-hint i { animation:bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* ============================================================
   SECTION COMMONS
   ============================================================ */
.section { position:relative; z-index:1; padding:var(--sec-pad); }
.container { max-width:var(--max); margin:0 auto; padding:0 30px; }

.sec-head { text-align:center; margin-bottom:60px; }
.sec-tag {
    display:inline-block; padding:6px 16px;
    background:rgba(212,162,39,.1); border:1px solid rgba(212,162,39,.22);
    border-radius:20px; color:var(--gold);
    font-size:.76rem; font-weight:600; letter-spacing:2px; text-transform:uppercase;
    margin-bottom:16px;
}
.sec-head h2 { font-family:var(--head); font-size:clamp(1.9rem,4.5vw,2.8rem); font-weight:600; margin-bottom:14px; }
.divider { width:55px; height:3px; background:linear-gradient(90deg,var(--gold),var(--rose)); margin:0 auto; border-radius:2px; }

/* ── Scroll reveal ── */
.reveal { opacity:0; transform:translateY(38px); transition: opacity .8s, transform .8s; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal:nth-child(2){transition-delay:.1s}
.reveal:nth-child(3){transition-delay:.2s}
.reveal:nth-child(4){transition-delay:.3s}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:65px; align-items:center; }

/* Image column */
.about-img-col { position:relative; }
.about-img-box { position:relative; max-width:380px; margin:0 auto; }
.about-placeholder {
    width:100%; aspect-ratio:1; border-radius:24px;
    background:linear-gradient(145deg,#1a1a2e,#16213e,#0f3460);
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--card-bd); overflow:hidden; position:relative;
}
.about-placeholder i { font-size:78px; color:rgba(255,255,255,.1); position:relative; z-index:1; }
.about-placeholder::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 50%,rgba(8,8,15,.75));
}

.float-badge {
    position:absolute; bottom:-16px; right:-6px;
    background:rgba(8,8,15,.92); backdrop-filter:blur(10px);
    border:1px solid var(--card-bd); padding:10px 18px; border-radius:30px;
    font-size:.84rem; font-weight:600; color:#1db954;
    display:flex; align-items:center; gap:8px; white-space:nowrap;
    box-shadow:0 10px 35px rgba(0,0,0,.3);
}

/* Text column */
.about-text p { color:var(--txt2); margin-bottom:16px; font-size:.97rem; }
.about-lead { font-size:1.08rem !important; color:var(--txt) !important; font-weight:500; }

.tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.tag {
    padding:7px 15px; background:var(--card); border:1px solid var(--card-bd);
    border-radius:20px; font-size:.83rem; color:var(--txt2); transition:.3s;
}
.tag:hover { border-color:var(--gold); color:var(--gold); background:rgba(212,162,39,.06); }

/* ============================================================
   STATS BAND
   ============================================================ */
.stats-band {
    position:relative; z-index:1; padding:65px 24px;
    background:linear-gradient(180deg,transparent,rgba(212,162,39,.025),transparent);
    border-top:1px solid var(--card-bd); border-bottom:1px solid var(--card-bd);
}
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

.stat { text-align:center; padding:28px 16px; }
.stat i { font-size:1.7rem; color:var(--gold); margin-bottom:14px; display:block; }
.sn {
    display:block; font-family:var(--head); font-size:2.7rem; font-weight:700;
    background:linear-gradient(135deg,var(--gold),var(--rose));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    margin-bottom:6px;
}
.sl { display:block; color:var(--txt3); font-size:.8rem; text-transform:uppercase; letter-spacing:1.6px; }

/* ============================================================
   MUSIC
   ============================================================ */
.music-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:55px; align-items:start; overflow:hidden; }
.music-grid > * { min-width:0; }

.spotify-wrap {
    padding:18px;
    border-radius:22px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border:1px solid var(--card-bd);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    max-width:100%;
    overflow:hidden;
}
.spotify-wrap iframe { width:100%; border-radius:18px; box-shadow:0 18px 55px rgba(0,0,0,.32); }

.np-head {
    display:flex; align-items:center; gap:10px;
    margin-bottom:14px;
    text-transform:uppercase;
    letter-spacing:2.2px;
    font-size:.8rem;
    color:rgba(212,162,39,.85);
    font-weight:600;
}
.np-ico {
    width:34px; height:34px;
    display:grid; place-items:center;
    border-radius:10px;
    background:rgba(212,162,39,.12);
    border:1px solid rgba(212,162,39,.25);
}

/* Playlist (Right) */
.tracks {
    padding:22px 22px 18px;
    border-radius:22px;
    background:rgba(0,0,0,.22);
    border:1px solid var(--card-bd);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    max-width:100%;
    overflow:hidden;
}

.pl-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.tracks h3 { font-family:var(--head); font-size:1.45rem; margin:0; }

.pl-tabs {
    display:flex; gap:10px; flex-wrap:wrap;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    padding:6px;
    border-radius:999px;
}
.pl-tab {
    padding:8px 14px;
    border-radius:999px;
    border:1px solid transparent;
    background:transparent;
    color:var(--txt2);
    font-size:.78rem;
    letter-spacing:.7px;
    text-transform:uppercase;
    cursor:pointer;
    transition:.25s;
}
.pl-tab:hover { color:var(--txt); border-color:rgba(255,255,255,.12); }
.pl-tab.active {
    background:rgba(212,162,39,.18);
    border-color:rgba(212,162,39,.28);
    color:var(--gold);
}

.pl-list {
    max-height:380px;
    overflow-y:auto;
    padding-right:8px;
    margin-bottom:20px;
}
.pl-list::-webkit-scrollbar { width:6px; }
.pl-list::-webkit-scrollbar-track { background:var(--card); border-radius:3px; }
.pl-list::-webkit-scrollbar-thumb { background:var(--gold); border-radius:3px; }
.pl-list::-webkit-scrollbar-thumb:hover { background:var(--rose); }

.pl-item {
    display:flex; align-items:center; gap:14px;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    cursor:pointer;
    transition: background .25s, transform .25s;
    outline:none;
}
.pl-item:hover { background:rgba(255,255,255,.03); }
.pl-item:active { transform: translateY(1px); }
.pl-item.pl-active { background:rgba(212,162,39,.08); border-bottom-color:transparent; margin:0 -12px; padding:14px 12px; border-radius:12px; }

.pl-num { font-family:var(--head); font-size:1.05rem; font-weight:700; color:rgba(255,255,255,.25); min-width:30px; }
.pl-main { flex:1; min-width:0; }
.pl-title { display:block; font-weight:600; font-size:.96rem; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-sub { display:block; font-size:.78rem; color:var(--txt3); margin-top:2px; }
.pl-badge {
    font-size:.72rem;
    letter-spacing:1.1px;
    text-transform:uppercase;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    color:var(--txt2);
    background:rgba(0,0,0,.22);
    white-space:nowrap;
}
.pl-badge.films { border-color:rgba(233,69,96,.25); color:rgba(233,69,96,.9); background:rgba(233,69,96,.08); }
.pl-badge.independent { border-color:rgba(212,162,39,.25); color:rgba(212,162,39,.95); background:rgba(212,162,39,.10); }
.pl-item.is-missing { cursor:not-allowed; opacity:.6; }
.pl-item.is-missing:hover { background:transparent; }

/* ============================================================
   YOUTUBE - Horizontal Scroll Videos
   ============================================================ */
.youtube-sec {
    position:relative;
    background:linear-gradient(180deg,transparent,rgba(255,0,0,.025),transparent);
    overflow:hidden;
}

/* Floating YouTube Icons */
.yt-bg-decor { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.yt-float-ico {
    position:absolute;
    color:rgba(255,0,0,.06);
    animation:floatNote 10s ease-in-out infinite;
}
.yt-float-ico.y1 { font-size:3rem; top:15%; left:8%; animation-delay:0s; }
.yt-float-ico.y2 { font-size:2rem; top:60%; right:10%; animation-delay:3s; }
.yt-float-ico.y3 { font-size:2.5rem; bottom:20%; left:15%; animation-delay:6s; }

/* Scroll Container */
.yt-scroll-wrap {
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:40px;
}
.yt-scroll {
    display:flex;
    gap:24px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:20px 10px;
    flex:1;
}
.yt-scroll::-webkit-scrollbar { display:none; }

/* Navigation Buttons */
.yt-nav {
    flex-shrink:0;
    width:48px; height:48px;
    background:rgba(255,0,0,.15);
    border:1px solid rgba(255,0,0,.35);
    border-radius:50%;
    color:#ff0000;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:.3s;
    z-index:10;
    position:relative;
    pointer-events:auto;
}
.yt-nav:hover {
    background:rgba(255,0,0,.3);
    border-color:rgba(255,0,0,.6);
    transform:scale(1.1);
}
.yt-nav:active {
    transform:scale(0.95);
    background:rgba(255,0,0,.4);
}

/* Video Card */
.yt-video-card {
    flex:0 0 380px;
    scroll-snap-align:start;
    background:var(--card);
    border:1px solid var(--card-bd);
    border-radius:20px;
    overflow:hidden;
    transition:.4s;
}
.yt-video-card:hover {
    border-color:rgba(255,0,0,.4);
    transform:translateY(-8px);
    box-shadow:0 20px 50px rgba(255,0,0,.15);
}

/* Video Embed Wrapper */
.yt-video-wrap {
    position:relative;
    width:100%;
    padding-top:56.25%; /* 16:9 aspect ratio */
    background:#000;
}
.yt-video-wrap iframe {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    border:none;
}

/* Video Info */
.yt-video-info {
    padding:16px 20px;
    background:linear-gradient(180deg,rgba(255,0,0,.05),transparent);
}
.yt-video-title {
    font-size:.95rem;
    font-weight:500;
    color:var(--txt);
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Footer — single row: channel info | stats | subscribe */
.yt-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
    padding:24px 0;
    border-top:1px solid var(--card-bd);
}

/* Channel info with tagline */
.yt-channel-info {
    display:flex;
    align-items:center;
    gap:12px;
}
.yt-channel-info > i {
    font-size:2rem;
    color:#ff0000;
}
.yt-channel-details {
    display:flex;
    flex-direction:column;
}
.yt-channel-name {
    font-size:1.05rem;
    font-weight:600;
    color:var(--txt);
}
.yt-channel-tagline {
    font-size:.78rem;
    color:var(--gold);
    font-weight:500;
    font-style:italic;
}

/* YouTube Stats — inline */
.yt-stats {
    display:flex;
    gap:24px;
    flex-wrap:wrap;
}
.yt-stat {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.85rem;
    color:var(--txt2);
}
.yt-stat i {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,0,0,.12);
    border-radius:8px;
    color:#ff0000;
    font-size:.85rem;
}
.yt-stat span {
    font-weight:600;
    color:var(--txt);
    margin-right:3px;
}

/* YouTube Responsive */
@media(max-width:900px) {
    .yt-video-card { flex:0 0 320px; }
    .yt-nav { width:40px; height:40px; }
    .yt-scroll { padding:10px 20px 20px; }
    .yt-footer { justify-content:center; text-align:center; }
    .yt-stats { justify-content:center; gap:16px; }
}
@media(max-width:600px) {
    .yt-nav { display:none; }
    .yt-stats { gap:16px; }
    .yt-stat { font-size:.8rem; }
}
@media(max-width:500px) {
    .yt-video-card { flex:0 0 280px; }
}

/* ============================================================
   INSTAGRAM REELS - Creator/Musician Vibes
   ============================================================ */
.reels-sec {
    position:relative;
    background:linear-gradient(180deg,transparent,rgba(225,48,108,.03),rgba(131,58,180,.03),transparent);
    overflow:hidden;
}

/* Floating Music Notes Background */
.reels-bg-decor { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.reels-bg-decor .note {
    position:absolute;
    font-size:2rem;
    color:rgba(225,48,108,.08);
    animation:floatNote 8s ease-in-out infinite;
}
.reels-bg-decor .n1 { top:10%; left:5%; animation-delay:0s; }
.reels-bg-decor .n2 { top:30%; right:8%; animation-delay:1.5s; font-size:2.5rem; }
.reels-bg-decor .n3 { top:60%; left:10%; animation-delay:3s; }
.reels-bg-decor .n4 { top:80%; right:15%; animation-delay:4.5s; font-size:1.8rem; }
.reels-bg-decor .n5 { top:45%; left:85%; animation-delay:6s; }

@keyframes floatNote {
    0%,100% { transform:translateY(0) rotate(0deg); opacity:.08; }
    50% { transform:translateY(-20px) rotate(15deg); opacity:.15; }
}

.sec-sub {
    text-align:center;
    color:var(--txt3);
    font-size:.95rem;
    margin-top:-10px;
    margin-bottom:8px;
}

/* Horizontal Scroll Container */
.reels-scroll-wrap {
    position:relative;
    margin:0 -20px;
    padding:20px 0;
}

.reels-scroll {
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:10px 50px 20px;
    -webkit-overflow-scrolling:touch;
}
.reels-scroll::-webkit-scrollbar { height:6px; }
.reels-scroll::-webkit-scrollbar-track { background:var(--card); border-radius:3px; margin:0 50px; }
.reels-scroll::-webkit-scrollbar-thumb { background:linear-gradient(90deg,#e1306c,#833ab4); border-radius:3px; }

/* Navigation Arrows */
.reels-nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    background:rgba(0,0,0,.7);
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    color:#fff;
    cursor:pointer;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
    backdrop-filter:blur(10px);
}
.reels-nav:hover {
    background:linear-gradient(135deg,#e1306c,#833ab4);
    transform:translateY(-50%) scale(1.1);
    border-color:transparent;
}
.reels-prev { left:5px; }
.reels-next { right:5px; }

/* Phone-like Reel Cards */
.reel-phone-card {
    flex:0 0 240px;
    scroll-snap-align:center;
    cursor:pointer;
    transition:.4s cubic-bezier(.25,.46,.45,.94);
}
.reel-phone-card:hover { transform:translateY(-8px) scale(1.03); }

.reel-phone-frame {
    position:relative;
    aspect-ratio:9/19.5;
    background:#000;
    border-radius:32px;
    overflow:hidden;
    border:3px solid #2a2a2a;
    box-shadow: 0 0 0 2px #1a1a1a, 0 20px 50px rgba(0,0,0,.5), inset 0 0 20px rgba(0,0,0,.3);
}

.reel-phone-notch {
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    width:70px;
    height:22px;
    background:#1a1a1a;
    border-radius:12px;
    z-index:20;
}
.reel-phone-notch::before {
    content:'';
    position:absolute;
    top:50%;
    left:10px;
    transform:translateY(-50%);
    width:7px;
    height:7px;
    background:#333;
    border-radius:50%;
}

.reel-phone-frame .reel-video {
    width:100%;
    height:100%;
    object-fit:cover;
}

.reel-phone-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 15%, transparent 55%, rgba(0,0,0,.75) 100%);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:18px 12px;
    opacity:0;
    transition:.3s;
}
.reel-phone-card:hover .reel-phone-overlay { opacity:1; }

.reel-phone-actions {
    position:absolute;
    right:8px;
    bottom:90px;
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:center;
}

.reel-action {
    background:none;
    border:none;
    color:#fff;
    font-size:1.3rem;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    transition:.3s;
    text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.reel-action:hover { transform:scale(1.2); }
.reel-action span { font-size:.65rem; font-weight:500; }
.reel-action .fa-heart:hover { color:#e1306c; }

.reel-phone-info { display:flex; flex-direction:column; gap:5px; }
.reel-phone-user {
    font-size:.75rem;
    font-weight:600;
    color:#fff;
    display:flex;
    align-items:center;
    gap:5px;
}
.reel-phone-user i { color:#e1306c; }
.reel-phone-title { font-size:.7rem; color:rgba(255,255,255,.8); }

.reel-phone-loader {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(135deg,#405de6,#5851db,#833ab4,#c13584,#e1306c);
    color:rgba(255,255,255,.7);
    font-size:1.4rem;
    transition:.4s;
    z-index:5;
}
.reel-phone-loader span { font-size:.7rem; text-align:center; }

/* Instagram Embed Cards (fallback) */
.reel-embed-card {
    flex:0 0 280px;
    scroll-snap-align:center;
    position:relative;
    border-radius:20px;
    overflow:hidden;
    aspect-ratio:9/16;
    background:linear-gradient(135deg,#1a1a2e,#16213e);
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.reel-embed-card:hover {
    transform:translateY(-10px) scale(1.02);
    box-shadow:0 25px 50px rgba(225,48,108,.25);
}
.reel-embed-card iframe {
    width:100%;
    height:100%;
    border:none;
    border-radius:18px;
}

/* Reels channel info with tagline */
.reels-channel-info {
    display:flex;
    align-items:center;
    gap:12px;
}
.reels-channel-info > i {
    font-size:2rem;
    color:#e1306c;
}
.reels-channel-details {
    display:flex;
    flex-direction:column;
}
.reels-channel-name {
    font-size:1.05rem;
    font-weight:600;
    color:var(--txt);
}
.reels-channel-tagline {
    font-size:.78rem;
    color:var(--gold);
    font-weight:500;
    font-style:italic;
}

/* Reels Footer — single row: channel info | stats | follow */
.reels-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
    margin-top:30px;
    padding-top:30px;
    border-top:1px solid var(--card-bd);
}

.reels-stats {
    display:flex;
    gap:24px;
    flex-wrap:wrap;
}
.rstat {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.85rem;
    color:var(--txt2);
}
.rstat i {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,rgba(225,48,108,.15),rgba(131,58,180,.15));
    border-radius:8px;
    color:#e1306c;
    font-size:.85rem;
}
.rstat span {
    font-weight:600;
    color:var(--txt);
    margin-right:3px;
}

.reel-card {
    position:relative;
    border-radius:16px;
    overflow:hidden;
    aspect-ratio:9/16;
    background:var(--card);
    border:1px solid var(--card-bd);
    cursor:pointer;
    transition:.4s;
}
.reel-card:hover {
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 20px 40px rgba(225,48,108,.2);
    border-color:rgba(225,48,108,.4);
}

.reel-thumb,
.reel-video {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}
.reel-card:hover .reel-thumb,
.reel-card:hover .reel-video { transform:scale(1.05); }

.reel-volume {
    position:absolute;
    bottom:70px;
    right:12px;
    width:38px;
    height:38px;
    background:rgba(0,0,0,.65);
    border:none;
    border-radius:50%;
    color:#fff;
    cursor:pointer;
    opacity:0;
    transition:.3s;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.95rem;
}
.reel-volume.visible,
.reel-card:hover .reel-volume { opacity:1; }
.reel-volume:hover { background:rgba(225,48,108,.9); transform:scale(1.1); }

.reel-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.8));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:16px;
    opacity:0;
    transition:.3s;
}
.reel-card:hover .reel-overlay { opacity:1; }

.reel-title {
    font-size:.85rem;
    font-weight:500;
    color:#fff;
    margin-bottom:6px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.reel-views {
    font-size:.75rem;
    color:rgba(255,255,255,.7);
}
.reel-views i { margin-right:4px; }

.reel-loader {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);
    z-index:5;
}
.reel-loader i { font-size:2rem; color:rgba(255,255,255,.6); }

.reel-play {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:50px;
    height:50px;
    background:rgba(225,48,108,.9);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:.3s;
}
.reel-card:hover .reel-play { opacity:1; }
.reel-play i { font-size:1.2rem; color:#fff; margin-left:3px; }

.reel-placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);
}
.reel-placeholder i { font-size:2.5rem; color:rgba(255,255,255,.4); }

.reels-cta { text-align:center; }

.btn-insta {
    background:linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);
    color:#fff;
    padding:14px 32px;
    border-radius:30px;
    font-weight:500;
    transition:.3s;
    position:relative;
    overflow:hidden;
}
.btn-insta::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(45deg,#fd1d1d,#e1306c,#c13584,#833ab4,#5851db,#405de6);
    opacity:0;
    transition:.4s;
}
.btn-insta:hover::before { opacity:1; }
.btn-insta:hover {
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(225,48,108,.35);
}
.btn-insta i,
.btn-insta span { position:relative; z-index:1; }
.btn-insta i { margin-right:8px; }

/* Reels Responsive */
@media(max-width:900px) {
    .reels-footer { justify-content:center; text-align:center; }
    .reels-stats { justify-content:center; gap:16px; }
    .reel-embed-card { flex:0 0 240px; }
    .reels-nav { display:none; }
    .reels-scroll { padding:10px 20px 20px; }
}
@media(max-width:500px) {
    .reel-embed-card { flex:0 0 200px; }
    .reels-stats { gap:12px; }
    .rstat { font-size:.78rem; }
}

/* ============================================================
   ACADEMY
   ============================================================ */
.academy-sec {
    background:linear-gradient(180deg,transparent,rgba(212,162,39,.03),transparent);
}
.academy-card {
    display:flex;
    align-items:center;
    gap:48px;
    background:var(--card);
    border:1px solid var(--card-bd);
    border-radius:24px;
    overflow:hidden;
    transition:.4s;
}
.academy-card:hover {
    border-color:rgba(212,162,39,.3);
    box-shadow:0 20px 50px rgba(212,162,39,.1);
}
.academy-visual {
    flex:0 0 320px;
    height:280px;
    background:linear-gradient(135deg,#d4a227,#e94560);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}
.academy-bg-ico {
    position:absolute;
    font-size:12rem;
    color:rgba(255,255,255,.08);
    transform:rotate(-15deg);
}
.academy-icon-wrap {
    width:100px;
    height:100px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid rgba(255,255,255,.25);
    z-index:1;
}
.academy-icon-wrap i {
    font-size:2.8rem;
    color:#fff;
}
.academy-info {
    flex:1;
    padding:40px 40px 40px 0;
}
.academy-info h3 {
    font-family:var(--head);
    font-size:1.8rem;
    margin-bottom:14px;
    background:linear-gradient(135deg,var(--gold),var(--rose));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.academy-info p {
    color:var(--txt2);
    font-size:.98rem;
    line-height:1.75;
    margin-bottom:20px;
}
.academy-features {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:24px;
}
.academy-features span {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    background:rgba(212,162,39,.08);
    border:1px solid rgba(212,162,39,.2);
    border-radius:20px;
    font-size:.85rem;
    color:var(--gold);
    font-weight:500;
}
.academy-features span i {
    font-size:.9rem;
}
.btn-academy {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 28px;
    background:linear-gradient(135deg,var(--gold),#e8c347);
    color:#000;
    font-weight:600;
    font-size:.95rem;
    border-radius:50px;
    transition:.3s;
}
.btn-academy:hover {
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(212,162,39,.4);
}

/* Academy Responsive */
@media(max-width:900px) {
    .academy-card { flex-direction:column; }
    .academy-visual { flex:none; width:100%; height:200px; }
    .academy-info { padding:30px; }
}
@media(max-width:500px) {
    .academy-info h3 { font-size:1.5rem; }
    .academy-features { gap:10px; }
    .academy-features span { padding:6px 12px; font-size:.8rem; }
}

/* ============================================================
   GALLERY — Premium Masonry with Auto-Settle
   ============================================================ */
.gallery-sec {
    position:relative;
    background:linear-gradient(180deg,transparent,rgba(155,109,255,.025),rgba(212,162,39,.015),transparent);
    overflow:hidden;
    padding-bottom:80px;
}

/* Ambient glow background */
.gallery-bg-decor { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.gallery-float {
    position:absolute;
    color:rgba(155,109,255,.06);
    font-size:2.5rem;
    animation:floatNote 14s ease-in-out infinite;
}
.gallery-float.g1 { top:8%; right:6%; animation-delay:0s; }
.gallery-float.g2 { top:45%; left:4%; animation-delay:5s; font-size:2rem; }
.gallery-float.g3 { bottom:12%; right:10%; animation-delay:9s; font-size:3rem; }

/* Filter Tabs — pill style with glow */
.gallery-filters {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-bottom:44px;
    flex-wrap:wrap;
}
.gf-btn {
    padding:11px 26px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:50px;
    color:var(--txt3);
    font-family:var(--body);
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.3px;
    cursor:pointer;
    transition:all .35s cubic-bezier(.4,0,.2,1);
    position:relative;
    overflow:hidden;
}
.gf-btn::before {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(135deg,var(--purple),var(--rose));
    opacity:0;
    transition:opacity .35s;
    border-radius:50px;
    z-index:-1;
}
.gf-btn:hover {
    border-color:var(--purple);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(155,109,255,.15);
}
.gf-btn.active {
    color:#fff;
    border-color:transparent;
    box-shadow:0 8px 28px rgba(155,109,255,.3);
}
.gf-btn.active::before { opacity:1; }

/* Masonry — CSS Columns for true auto-settle */
.gallery-grid {
    column-count:4;
    column-gap:16px;
}

/* Gallery Card */
.gallery-item {
    position:relative;
    border-radius:16px;
    overflow:hidden;
    cursor:pointer;
    break-inside:avoid;
    margin-bottom:16px;
    transform:translateY(30px);
    opacity:0;
    transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1), box-shadow .4s;
    perspective:800px;
}
.gallery-item.gi-visible {
    opacity:1;
    transform:translateY(0);
}

/* Image — auto height, no cropping */
.gallery-item img {
    width:100%;
    height:auto;
    display:block;
    border-radius:16px;
    transition:transform .5s cubic-bezier(.4,0,.2,1), filter .4s;
    will-change:transform;
}
.gallery-item:hover img {
    transform:scale(1.04);
    filter:brightness(1.05);
}

/* Glowing border ring on hover */
.gallery-item::before {
    content:'';
    position:absolute; inset:-2px;
    border-radius:18px;
    background:linear-gradient(135deg,var(--purple),var(--gold),var(--rose),var(--purple));
    background-size:300% 300%;
    animation:borderGlow 4s linear infinite paused;
    opacity:0;
    transition:opacity .4s;
    z-index:-1;
}
.gallery-item:hover::before {
    opacity:1;
    animation-play-state:running;
}
@keyframes borderGlow {
    0%   { background-position:0% 50%; }
    50%  { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}

/* Glow shadow on hover */
.gallery-item:hover {
    box-shadow:
        0 20px 50px rgba(155,109,255,.15),
        0 0 30px rgba(155,109,255,.08);
}

/* Glassmorphism Overlay */
.gi-overlay {
    position:absolute;
    left:12px; right:12px; bottom:12px;
    background:rgba(8,8,15,.5);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transform:translateY(10px);
    opacity:0;
    transition:all .35s cubic-bezier(.4,0,.2,1);
    z-index:3;
}
.gallery-item:hover .gi-overlay {
    opacity:1;
    transform:translateY(0);
}

.gi-tag {
    font-size:.8rem;
    color:#fff;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:7px;
    letter-spacing:.2px;
}
.gi-tag i {
    color:var(--gold);
    font-size:.72rem;
    filter:drop-shadow(0 0 4px rgba(212,162,39,.4));
}

.gi-expand {
    width:34px; height:34px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-size:.8rem;
    transition:all .3s;
    flex-shrink:0;
}
.gi-expand:hover {
    background:var(--gold);
    color:#000;
    border-color:var(--gold);
    transform:rotate(90deg) scale(1.1);
    box-shadow:0 0 16px rgba(212,162,39,.4);
}

/* Image number badge */
.gi-num {
    position:absolute;
    top:12px; right:12px;
    width:30px; height:30px;
    background:rgba(8,8,15,.55);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:.7rem;
    font-weight:700;
    color:var(--gold);
    opacity:0;
    transform:scale(.8);
    transition:all .3s;
    z-index:3;
}
.gallery-item:hover .gi-num {
    opacity:1;
    transform:scale(1);
}

/* Category color accent stripe */
.gi-accent {
    position:absolute;
    top:0; left:0;
    width:4px; height:40px;
    border-radius:0 4px 4px 0;
    opacity:0;
    transition:all .35s;
    z-index:3;
}
.gallery-item:hover .gi-accent { opacity:1; height:60px; }
.gallery-item[data-category="stage"] .gi-accent      { background:var(--rose); }
.gallery-item[data-category="studio"] .gi-accent     { background:var(--purple); }
.gallery-item[data-category="bts"] .gi-accent        { background:var(--gold); }
.gallery-item[data-category="live"] .gi-accent       { background:var(--rose); }
.gallery-item[data-category="recordings"] .gi-accent { background:var(--purple); }

/* Enhanced Lightbox */
.gallery-lightbox {
    position:fixed; inset:0;
    background:rgba(4,4,10,.92);
    backdrop-filter:blur(30px) saturate(120%);
    -webkit-backdrop-filter:blur(30px) saturate(120%);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}
.gallery-lightbox.active {
    display:flex;
    animation:lbFadeIn .3s ease-out;
}
@keyframes lbFadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}

.lb-content {
    max-width:88vw;
    max-height:82vh;
    position:relative;
}
.lb-content img {
    max-width:100%;
    max-height:82vh;
    border-radius:14px;
    box-shadow:
        0 30px 80px rgba(0,0,0,.6),
        0 0 60px rgba(155,109,255,.1);
    transition:transform .3s;
}

.lb-close, .lb-prev, .lb-next {
    position:absolute;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    width:50px; height:50px;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.7);
    font-size:1.1rem;
    cursor:pointer;
    transition:all .3s;
    z-index:10;
    backdrop-filter:blur(10px);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover {
    background:var(--gold);
    color:#000;
    border-color:var(--gold);
    box-shadow:0 0 20px rgba(212,162,39,.3);
    transform:scale(1.1);
}
.lb-close { top:72px; right:24px; }
.lb-prev  { left:24px; top:50%; transform:translateY(-50%); }
.lb-next  { right:24px; top:50%; transform:translateY(-50%); }
.lb-prev:hover { transform:translateY(-50%) scale(1.1); }
.lb-next:hover { transform:translateY(-50%) scale(1.1); }

.lb-counter {
    position:absolute;
    bottom:28px; left:50%;
    transform:translateX(-50%);
    background:rgba(8,8,15,.5);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.08);
    padding:8px 20px;
    border-radius:30px;
    color:var(--txt2);
    font-size:.85rem;
    font-weight:600;
    letter-spacing:1px;
}

/* Gallery Footer */
.gallery-footer {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-top:44px;
    flex-direction:column;
}
.gallery-count {
    font-size:.85rem;
    color:var(--txt3);
    font-weight:500;
    letter-spacing:.3px;
}
.btn-gallery-more {
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.1);
    color:var(--txt);
    padding:14px 32px;
    border-radius:50px;
    font-family:var(--body);
    font-size:.9rem;
    font-weight:600;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:all .35s;
    position:relative;
    overflow:hidden;
}
.btn-gallery-more::before {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(135deg,var(--purple),var(--rose));
    opacity:0;
    transition:opacity .35s;
    border-radius:50px;
    z-index:-1;
}
.btn-gallery-more:hover {
    color:#fff;
    border-color:transparent;
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(155,109,255,.25);
}
.btn-gallery-more:hover::before { opacity:1; }
.btn-gallery-more.hidden { display:none; }

/* Gallery Responsive */
@media(max-width:1100px) {
    .gallery-grid { column-count:3; }
}
@media(max-width:768px) {
    .gallery-grid { column-count:2; column-gap:12px; }
    .gallery-item { margin-bottom:12px; }
    .gi-overlay { left:8px; right:8px; bottom:8px; padding:10px 12px; }
    .gf-btn { padding:9px 18px; font-size:.8rem; }
}
@media(max-width:480px) {
    .gallery-grid { column-count:2; column-gap:8px; }
    .gallery-item { margin-bottom:8px; border-radius:12px; }
    .gallery-item img { border-radius:12px; }
    .gi-overlay { opacity:1; transform:translateY(0); left:6px; right:6px; bottom:6px; padding:8px 10px; border-radius:8px; }
    .gi-num { display:none; }
    .gi-accent { display:none; }
    .gi-tag { font-size:.72rem; }
    .gi-expand { width:28px; height:28px; font-size:.7rem; }
    .lb-prev, .lb-next { width:40px; height:40px; }
    .lb-close { top:64px; right:16px; width:40px; height:40px; }
}

/* ============================================================
   FILMS
   ============================================================ */
.films-grid-wrap {
    position:relative;
}

.films-grid {
    display:flex;
    gap:24px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    -ms-overflow-style:none;
    scrollbar-width:none;
    padding:4px 0 12px;
}
.films-grid::-webkit-scrollbar { display:none; }

/* Scroll nav arrows */
.films-scroll-btn {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px; height:44px;
    background:rgba(8,8,15,.7);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-size:1rem;
    cursor:pointer;
    transition:all .3s;
    z-index:5;
    opacity:0;
    pointer-events:none;
}
.films-scroll-btn.visible {
    opacity:1;
    pointer-events:auto;
}
.films-scroll-btn:hover {
    background:var(--gold);
    color:#000;
    border-color:var(--gold);
    box-shadow:0 0 20px rgba(212,162,39,.3);
    transform:translateY(-50%) scale(1.1);
}
.films-scroll-prev { left:-22px; }
.films-scroll-next { right:-22px; }

/* Fade edges when scrollable */
.films-grid-wrap::before,
.films-grid-wrap::after {
    content:'';
    position:absolute;
    top:0; bottom:0;
    width:40px;
    z-index:3;
    pointer-events:none;
    opacity:0;
    transition:opacity .3s;
}
.films-grid-wrap::before {
    left:0;
    background:linear-gradient(90deg,var(--bg),transparent);
}
.films-grid-wrap::after {
    right:0;
    background:linear-gradient(-90deg,var(--bg),transparent);
}
.films-grid-wrap.can-scroll-left::before { opacity:1; }
.films-grid-wrap.can-scroll-right::after { opacity:1; }

.film-card {
    background:var(--card); border:1px solid var(--card-bd);
    border-radius:20px; overflow:hidden; transition:.4s;
    min-width:320px; max-width:380px; flex-shrink:0;
    scroll-snap-align:start;
}
.film-card:hover { transform:translateY(-7px); box-shadow:0 24px 48px rgba(0,0,0,.3); border-color:rgba(255,255,255,.14); }

.film-top {
    height:220px; position:relative; overflow:hidden;
}
.film-top img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}
.film-card:hover .film-top img {
    transform:scale(1.08);
}
.film-top i { font-size:3.2rem; color:rgba(255,255,255,.22); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.film-top::after {
    content:'';
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.5) 100%);
    pointer-events:none;
}
.film-yr {
    position:absolute; top:16px; right:16px; z-index:2;
    background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
    padding:5px 14px; border-radius:16px;
    font-size:.78rem; font-weight:600; color:#fff; letter-spacing:.5px;
}

.film-body { padding:24px; }
.film-body h3 { font-family:var(--head); font-size:1.18rem; margin-bottom:9px; }
.film-body p { color:var(--txt2); font-size:.87rem; line-height:1.6; margin-bottom:14px; }
.film-genre {
    display:inline-block; padding:4px 12px;
    background:rgba(212,162,39,.1); border:1px solid rgba(212,162,39,.22);
    border-radius:14px; font-size:.74rem; color:var(--gold); font-weight:500;
}

/* Films background decoration */
.films-bg-decor { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.films-float-ico {
    position:absolute;
    color:rgba(212,162,39,.06);
    animation:floatNote 14s ease-in-out infinite;
}
.films-float-ico.f1 { font-size:3rem; top:12%; left:6%; animation-delay:0s; }
.films-float-ico.f2 { font-size:2.2rem; top:55%; right:8%; animation-delay:4s; }
.films-float-ico.f3 { font-size:2.5rem; bottom:15%; left:12%; animation-delay:8s; }

/* Films Tabs */
.films-tabs {
    display:flex;
    justify-content:center;
    gap:16px;
    margin-bottom:40px;
}
.ft-btn {
    padding:12px 28px;
    background:var(--card);
    border:1px solid var(--card-bd);
    border-radius:30px;
    color:var(--txt2);
    font-family:var(--body);
    font-size:.9rem;
    font-weight:500;
    cursor:pointer;
    transition:.3s;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.ft-btn:hover { border-color:var(--gold); color:var(--gold); }
.ft-btn.active {
    background:linear-gradient(135deg,var(--gold),var(--rose));
    color:#fff;
    border-color:transparent;
}
.ft-btn i { font-size:.85rem; }

/* Film type badge */
.film-type-badge {
    position:absolute;
    top:16px;
    left:16px;
    z-index:2;
    width:36px;
    height:36px;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(8px);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.8rem;
    color:#fff;
}
.tv-badge { background:rgba(161,140,209,.55); }

/* Film placeholder for TV cards */
.film-placeholder-top {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
}
.film-placeholder-top i {
    font-size:3.5rem;
    color:rgba(255,255,255,.3);
}

/* Films Responsive */
@media(max-width:768px) {
    .film-card { min-width:280px; max-width:320px; }
    .films-scroll-btn { width:38px; height:38px; font-size:.85rem; }
    .films-scroll-prev { left:-12px; }
    .films-scroll-next { right:-12px; }
}
@media(max-width:480px) {
    .film-card { min-width:260px; max-width:290px; }
    .film-top { height:180px; }
    .films-scroll-btn { display:none; }
}

/* ============================================================
   ADS & JINGLES
   ============================================================ */
.jingles-sec {
    position:relative;
    background:linear-gradient(180deg,transparent,rgba(233,69,96,.03),rgba(212,162,39,.03),transparent);
    overflow:hidden;
}

/* Background decoration */
.jingles-bg-decor { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.jingle-note {
    position:absolute;
    font-size:3rem;
    color:rgba(233,69,96,.06);
    animation:floatNote 10s ease-in-out infinite;
}
.jingle-note.j1 { top:15%; right:10%; animation-delay:0s; }
.jingle-note.j2 { top:50%; left:6%; animation-delay:3s; font-size:2.5rem; }
.jingle-note.j3 { bottom:20%; right:15%; animation-delay:6s; font-size:2rem; }

/* Jingles Carousel Wrapper */
.jingles-carousel-wrap {
    position:relative;
    margin-bottom:48px;
}

/* Scroll arrows */
.jingles-scroll-btn {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px; height:44px;
    background:rgba(8,8,15,.75);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-size:1rem;
    cursor:pointer;
    transition:all .3s;
    z-index:5;
    opacity:0;
    pointer-events:none;
}
.jingles-scroll-btn.visible {
    opacity:1;
    pointer-events:auto;
}
.jingles-scroll-btn:hover {
    background:var(--gold);
    color:#000;
    border-color:var(--gold);
    box-shadow:0 0 20px rgba(212,162,39,.3);
    transform:translateY(-50%) scale(1.1);
}
.jingles-scroll-prev { left:-22px; }
.jingles-scroll-next { right:-22px; }

/* Fade edges */
.jingles-carousel-wrap::before,
.jingles-carousel-wrap::after {
    content:'';
    position:absolute;
    top:0; bottom:0;
    width:40px;
    z-index:3;
    pointer-events:none;
    opacity:0;
    transition:opacity .3s;
}
.jingles-carousel-wrap::before {
    left:0;
    background:linear-gradient(90deg,var(--bg),transparent);
}
.jingles-carousel-wrap::after {
    right:0;
    background:linear-gradient(-90deg,var(--bg),transparent);
}
.jingles-carousel-wrap.can-scroll-left::before { opacity:1; }
.jingles-carousel-wrap.can-scroll-right::after { opacity:1; }

/* 2-row horizontal scrolling grid */
.jingles-grid {
    display:grid;
    grid-template-rows:repeat(2, 1fr);
    grid-auto-flow:column;
    grid-auto-columns:minmax(520px, 420px);
    gap:16px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    -ms-overflow-style:none;
    scrollbar-width:none;
    padding:4px 0 8px;
}
.jingles-grid::-webkit-scrollbar { display:none; }

/* Jingle Card — thumbnail left, info right */
.jingle-card {
    display:flex;
    gap:0;
    background:var(--card);
    border:1px solid var(--card-bd);
    border-radius:18px;
    overflow:hidden;
    transition:.4s;
    cursor:pointer;
    position:relative;
    scroll-snap-align:start;
}
.jingle-card:hover {
    border-color:rgba(212,162,39,.3);
    transform:translateY(-4px);
    box-shadow:0 16px 40px rgba(212,162,39,.12);
}

/* Video Thumbnail */
.jingle-thumb {
    width:200px;
    min-height:140px;
    flex-shrink:0;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.jingle-thumb::after {
    content:'';
    position:absolute; inset:0;
    background:rgba(8,8,15,.35);
    transition:.3s;
}
.jingle-card:hover .jingle-thumb::after {
    background:rgba(8,8,15,.5);
}

/* Play button */
.jingle-play {
    width:48px; height:48px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    border:2px solid rgba(255,255,255,.25);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    transition:all .35s cubic-bezier(.4,0,.2,1);
}
.jingle-play i {
    color:#fff;
    font-size:1rem;
    margin-left:3px;
    transition:.3s;
}
.jingle-card:hover .jingle-play {
    background:var(--gold);
    border-color:var(--gold);
    transform:scale(1.15);
    box-shadow:0 0 24px rgba(212,162,39,.4);
}
.jingle-card:hover .jingle-play i { color:#000; }

/* Jingle info */
.jingle-info {
    flex:1;
    padding:18px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.jingle-brand {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.72rem;
    font-weight:700;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.8px;
    margin-bottom:6px;
}
.jingle-brand i { font-size:.65rem; }
.jingle-info h3 {
    font-family:var(--head);
    font-size:1.05rem;
    margin-bottom:6px;
    line-height:1.35;
}
.jingle-info p {
    color:var(--txt2);
    font-size:.82rem;
    line-height:1.55;
    margin-bottom:10px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.jingle-tags {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}
.jingle-tags span {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 10px;
    background:rgba(212,162,39,.08);
    border:1px solid rgba(212,162,39,.18);
    border-radius:12px;
    font-size:.7rem;
    color:var(--gold);
    font-weight:500;
}
.jingle-tags span i { font-size:.62rem; }

/* YouTube Popup Modal */
.jingle-popup {
    position:fixed; inset:0;
    z-index:10000;
    display:none;
    align-items:center;
    justify-content:center;
}
.jingle-popup.active { display:flex; }

.jingle-popup-backdrop {
    position:absolute; inset:0;
    background:rgba(4,4,10,.92);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    animation:lbFadeIn .3s ease-out;
}

.jingle-popup-content {
    position:relative;
    width:90vw;
    max-width:900px;
    aspect-ratio:16/9;
    z-index:2;
    border-radius:16px;
    overflow:visible;
    box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 60px rgba(212,162,39,.1);
    animation:popupSlideIn .35s cubic-bezier(.4,0,.2,1);
}
@keyframes popupSlideIn {
    from { opacity:0; transform:scale(.92) translateY(20px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
}

.jingle-popup-player {
    width:100%; height:100%;
    border-radius:16px;
    overflow:hidden;
}
.jingle-popup-player iframe {
    width:100%; height:100%;
    border:none;
}

.jingle-popup-close {
    position:absolute;
    top:12px; right:12px;
    width:40px; height:40px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-size:1rem;
    cursor:pointer;
    transition:all .3s;
    z-index:3;
}
.jingle-popup-close:hover {
    background:var(--gold);
    color:#000;
    border-color:var(--gold);
    transform:scale(1.1);
}

/* Jingles CTA */
.jingles-cta { text-align:center; }
.jingles-cta-card {
    display:inline-flex;
    align-items:center;
    gap:32px;
    background:var(--card);
    border:1px solid var(--card-bd);
    border-radius:20px;
    padding:28px 40px;
    transition:.3s;
}
.jingles-cta-card:hover {
    border-color:rgba(212,162,39,.3);
    box-shadow:0 16px 40px rgba(212,162,39,.1);
}
.jingles-cta-text { text-align:left; }
.jingles-cta-text h3 {
    font-family:var(--head);
    font-size:1.2rem;
    margin-bottom:6px;
}
.jingles-cta-text p {
    color:var(--txt2);
    font-size:.88rem;
}
.btn-jingle {
    background:linear-gradient(135deg,var(--gold),var(--rose));
    color:#fff;
    padding:14px 28px;
    border-radius:50px;
    font-weight:600;
    white-space:nowrap;
    transition:.3s;
}
.btn-jingle:hover {
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(212,162,39,.35);
}

/* Jingles Responsive */
@media(max-width:900px) {
    .jingles-grid { grid-auto-columns:minmax(320px, 360px); gap:12px; }
    .jingle-thumb { width:170px; }
    .jingles-scroll-btn { width:38px; height:38px; font-size:.85rem; }
    .jingles-scroll-prev { left:-12px; }
    .jingles-scroll-next { right:-12px; }
}
@media(max-width:600px) {
    .jingles-grid { grid-template-rows:1fr; grid-auto-columns:minmax(300px, 340px); }
    .jingle-card { flex-direction:column; }
    .jingle-thumb { width:100%; min-height:180px; }
    .jingle-info { padding:16px; }
    .jingles-cta-card { flex-direction:column; text-align:center; padding:24px; }
    .jingles-cta-text { text-align:center; }
    .jingle-popup-content { width:95vw; border-radius:10px; }
    .jingle-popup-close { top:8px; right:8px; }
    .jingles-scroll-btn { display:none; }
}

/* ============================================================
   NEWS
   ============================================================ */
.news-sec {
    position:relative;
    background:linear-gradient(180deg,transparent,rgba(212,162,39,.02),transparent);
    overflow:hidden;
}

/* Background decoration */
.news-bg-decor { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.news-float-ico {
    position:absolute;
    color:rgba(212,162,39,.05);
    animation:floatNote 16s ease-in-out infinite;
}
.news-float-ico.nf1 { font-size:3rem; top:10%; right:10%; animation-delay:0s; }
.news-float-ico.nf2 { font-size:2rem; bottom:20%; left:8%; animation-delay:6s; }

/* Timeline Layout */
.news-timeline {
    max-width:800px;
    margin:0 auto;
}

.news-item {
    display:flex;
    gap:28px;
    margin-bottom:0;
}
.news-item:last-child .news-line { display:none; }

/* Date column */
.news-date-col {
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.news-date-badge {
    width:70px;
    padding:12px 8px;
    background:var(--card);
    border:1px solid var(--card-bd);
    border-radius:14px;
    text-align:center;
    transition:.3s;
}
.news-item:hover .news-date-badge {
    border-color:var(--gold);
    background:rgba(212,162,39,.08);
}
.nd-month {
    display:block;
    font-size:.78rem;
    font-weight:600;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:1px;
}
.nd-year {
    display:block;
    font-size:.7rem;
    color:var(--txt3);
    margin-top:2px;
}

.news-line {
    flex:1;
    width:2px;
    background:linear-gradient(180deg,var(--gold),transparent);
    margin:8px 0;
    min-height:20px;
}

/* News content */
.news-content {
    flex:1;
    padding-bottom:32px;
}
.news-card {
    background:var(--card);
    border:1px solid var(--card-bd);
    border-radius:18px;
    padding:28px;
    transition:.4s;
}
.news-card:hover {
    border-color:rgba(212,162,39,.25);
    transform:translateX(6px);
    box-shadow:0 16px 40px rgba(0,0,0,.2);
}

.news-label {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 14px;
    background:rgba(29,185,84,.1);
    border:1px solid rgba(29,185,84,.2);
    border-radius:14px;
    font-size:.74rem;
    font-weight:600;
    color:#1db954;
    margin-bottom:12px;
}
.news-label.milestone {
    background:rgba(212,162,39,.1);
    border-color:rgba(212,162,39,.2);
    color:var(--gold);
}
.news-label i { font-size:.7rem; }

.news-card h3 {
    font-family:var(--head);
    font-size:1.18rem;
    margin-bottom:10px;
    line-height:1.4;
}
.news-card p {
    color:var(--txt2);
    font-size:.9rem;
    line-height:1.7;
    margin-bottom:14px;
}

.news-meta {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}
.news-meta span {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.8rem;
    color:var(--txt3);
    font-weight:500;
}
.news-meta span i { color:var(--gold); font-size:.75rem; }

/* Read link */
.news-actions { margin-top:16px; }
.news-read {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(212,162,39,.12);
    border:1px solid rgba(212,162,39,.22);
    color:var(--gold);
    font-size:.84rem;
    font-weight:600;
    transition:.25s;
}
.news-read i { font-size:.78rem; }
.news-read:hover {
    background:rgba(212,162,39,.18);
    border-color:rgba(212,162,39,.35);
    transform:translateY(-1px);
}

/* News Footer */
.news-footer {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-top:36px;
    flex-direction:column;
}
.news-count {
    font-size:.88rem;
    color:var(--txt3);
    font-weight:500;
}
.btn-news-more {
    background:var(--card);
    border:1px solid var(--card-bd);
    color:var(--txt);
    padding:13px 28px;
    border-radius:50px;
    font-family:var(--body);
    font-size:.9rem;
    font-weight:500;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:.3s;
}
.btn-news-more:hover {
    border-color:var(--gold);
    color:var(--gold);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(212,162,39,.2);
}
.btn-news-more.hidden { display:none; }

/* News label additional types */
.news-label.press {
    background:rgba(155,109,255,.1);
    border-color:rgba(155,109,255,.2);
    color:var(--purple);
}
.news-label.collab {
    background:rgba(233,69,96,.1);
    border-color:rgba(233,69,96,.2);
    color:var(--rose);
}

/* News Responsive */
@media(max-width:768px) {
    .news-item { gap:16px; }
    .news-date-badge { width:58px; padding:10px 6px; }
    .nd-month { font-size:.7rem; }
    .news-card { padding:20px; }
    .news-card h3 { font-size:1.05rem; }
}
@media(max-width:500px) {
    .news-date-col { display:none; }
    .news-content { padding-bottom:20px; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background:linear-gradient(180deg,transparent,rgba(155,109,255,.025),transparent); }
.contact-sub { text-align:center; color:var(--txt2); font-size:1.02rem; max-width:580px; margin:0 auto 44px; }

.social-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:830px; margin:0 auto; }
.social-card {
    background:var(--card); border:1px solid var(--card-bd);
    border-radius:20px; padding:38px 22px;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    transition:.4s; text-decoration:none;
}
.social-card i { font-size:2.1rem; transition:color .3s; }
.s-name { font-weight:600; font-size:.96rem; }
.s-handle { font-size:.8rem; color:var(--txt3); }

/* Per-platform colours */
.s-insta i { color:#c154c1; }
.s-insta:hover { border-color:rgba(193,84,193,.4); background:rgba(193,84,193,.06); transform:translateY(-5px); box-shadow:0 14px 38px rgba(193,84,193,.15); }

.s-yt i { color:#ff0000; }
.s-yt:hover { border-color:rgba(255,0,0,.4); background:rgba(255,0,0,.06); transform:translateY(-5px); box-shadow:0 14px 38px rgba(255,0,0,.15); }

.s-spot i { color:#1db954; }
.s-spot:hover { border-color:rgba(29,185,84,.4); background:rgba(29,185,84,.06); transform:translateY(-5px); box-shadow:0 14px 38px rgba(29,185,84,.15); }

/* ── Contact Form ── */
.contact-form-wrap {
    max-width:680px;
    margin:60px auto 0;
    background:var(--card);
    border:1px solid var(--card-bd);
    border-radius:24px;
    padding:40px;
}
.contact-form-wrap h3 {
    font-family:var(--head);
    font-size:1.6rem;
    margin-bottom:8px;
    text-align:center;
}
.contact-form-wrap h3 i {
    color:var(--gold);
    margin-right:10px;
}
.form-sub {
    text-align:center;
    color:var(--txt2);
    font-size:.92rem;
    margin-bottom:32px;
}
.contact-form { display:flex; flex-direction:column; gap:20px; }
.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group label {
    font-size:.88rem;
    font-weight:500;
    color:var(--txt2);
}
.form-group label i {
    color:var(--gold);
    margin-right:6px;
    font-size:.8rem;
}
.form-group input,
.form-group select,
.form-group textarea {
    background:rgba(255,255,255,.04);
    border:1px solid var(--card-bd);
    border-radius:12px;
    padding:14px 18px;
    font-family:var(--body);
    font-size:.95rem;
    color:var(--txt);
    transition:border-color .3s, box-shadow .3s;
    outline:none;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color:var(--txt3);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(212,162,39,.15);
}
.form-group select {
    cursor:pointer;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23d4a227' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
}
.form-group select option {
    background:var(--bg2);
    color:var(--txt);
}
.form-group textarea {
    resize:vertical;
    min-height:120px;
}
.btn-submit {
    background:linear-gradient(135deg,var(--gold),var(--rose));
    color:#fff;
    font-weight:600;
    font-size:1rem;
    padding:16px 32px;
    border:none;
    border-radius:50px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:transform .3s, box-shadow .3s;
    align-self:center;
    margin-top:10px;
}
.btn-submit:hover {
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(212,162,39,.35);
}
.btn-submit:active {
    transform:translateY(0);
}
.form-success {
    display:none;
    text-align:center;
    padding:40px 20px;
}
.form-success.show {
    display:block;
}
.form-success i {
    font-size:3.5rem;
    color:#1db954;
    margin-bottom:16px;
}
.form-success p {
    font-size:1.1rem;
    color:var(--txt);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer { position:relative; z-index:1; padding:48px 24px; border-top:1px solid var(--card-bd); text-align:center; }
.footer-logo { font-family:var(--head); font-size:1.55rem; font-weight:700; margin-bottom:10px; display:flex; justify-content:center; }
.footer-logo-img { height:50px; width:auto; object-fit:contain; }
.footer-desc { color:var(--txt3); font-size:.87rem; margin-bottom:18px; }
.footer-links { display:flex; justify-content:center; gap:24px; margin-bottom:20px; flex-wrap:wrap; }
.footer-links a { color:var(--txt3); font-size:.83rem; transition:color .3s; }
.footer-links a:hover { color:var(--gold); }
.footer-copy { color:var(--txt3); font-size:.76rem; }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-top {
    position:fixed; bottom:38px; right:38px;
    width:48px; height:48px; border-radius:50%;
    background:rgba(8,8,15,.85); backdrop-filter:blur(10px);
    border:1px solid var(--card-bd);
    display:flex; align-items:center; justify-content:center;
    color:var(--txt2); z-index:100;
    opacity:0; visibility:hidden; transform:translateY(18px);
    transition:.3s;
}
.back-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-top:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }

/* ============================================================
   RESPONSIVE  —  ≤ 1024 px
   ============================================================ */
@media(max-width:1024px){
    .hero-visual { flex:0 0 340px; height:340px; }
    .hero-ring   { width:250px; height:250px; }
    .music-grid  { grid-template-columns:1fr; }
    .about-grid  { gap:40px; }
}

/* ── ≤ 768 px (tablets / large phones) ── */
@media(max-width:768px){
    :root { --sec-pad: 72px 20px; }

    /* Nav → slide-out drawer */
    .nav-links {
        position:fixed; top:0; right:-100%; width:270px; height:100vh;
        background:rgba(8,8,15,.96); backdrop-filter:blur(18px);
        flex-direction:column; align-items:flex-start; gap:0;
        padding:80px 28px 28px;
        transition:right .38s; border-left:1px solid var(--card-bd);
    }
    .nav-links.active { right:0; }
    .nav-links li { width:100%; border-bottom:1px solid var(--card-bd); }
    .nav-links a { display:block; padding:14px 0; font-size:.95rem; }

    .menu-toggle { display:flex; z-index:1001; }
    .menu-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .menu-toggle.active span:nth-child(2){ opacity:0; }
    .menu-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    /* Hero stack */
    .hero { padding:100px 20px 80px; }
    .hero-wrap { flex-direction:column; text-align:center; gap:38px; }
    .hero-content { max-width:100%; order:2; }
    .hero-visual  { flex:none; width:290px; height:290px; order:1; }
    .hero-ring    { width:210px; height:210px; }
    .hero-btns    { justify-content:center; }
    .hero-socials { justify-content:center; }
    .waveform     { justify-content:center; }

    /* About stack */
    .about-grid { grid-template-columns:1fr; gap:38px; }
    .about-img-box { max-width:290px; }

    /* Stats 2×2 */
    .stats-row { grid-template-columns:repeat(2,1fr); }

    /* YouTube card stack */
    .yt-card { flex-direction:column; }
    .yt-visual { flex:none; width:100%; height:200px; }

    /* Films single col */
    .films-grid { grid-template-columns:1fr; max-width:440px; margin:0 auto; }

    /* Social single col */
    .social-grid { grid-template-columns:1fr; max-width:380px; margin:0 auto; }

    /* Contact form responsive */
    .contact-form-wrap { padding:28px 20px; margin-top:40px; }
    .form-row { grid-template-columns:1fr; }
    .contact-form-wrap h3 { font-size:1.35rem; }

    /* Footer links */
    .footer-links { gap:14px; }

    /* Playlist header stack on mobile */
    .pl-head { flex-direction:column; align-items:flex-start; gap:12px; }
    .pl-tabs { border-radius:16px; }
    .pl-tab { font-size:.72rem; padding:7px 12px; }

    /* Back top */
    .back-top { bottom:24px; right:24px; width:44px; height:44px; }
}

/* ── ≤ 480 px ── */
@media(max-width:480px){
    .hero-content h1 { font-size:2.6rem; }
    .sn { font-size:2.2rem; }
    .btn { padding:11px 20px; font-size:.85rem; }
    .hero-visual { width:240px; height:240px; }
    .hero-ring   { width:175px; height:175px; }
    .float-note  { display:none; } /* declutter small screens */
}