/* ═══════════════════════════════════════════════════════
               SHAKTHI FM — EDITORIAL DESIGN SYSTEM
               Blood Red × Bone White × Deep Black
            ═══════════════════════════════════════════════════════ */
            :root {
                /* Brand palette */
                --red:         #cc0000;
                --red-dark:    #990000;
                --red-deep:    #660000;
                --red-light:   #ff3333;
                --red-glow:    rgba(204, 0, 0, 0.30);
                --red-soft:    rgba(204, 0, 0, 0.06);
                --red-border:  rgba(204, 0, 0, 0.20);

                /* Core neutrals */
                --black:       #0a0a0a;
                --black-2:     #111111;
                --black-3:     #1a1a1a;
                --white:       #f5f0eb;      /* bone white — warmer, more editorial */
                --white-pure:  #ffffff;

                /* Light surfaces */
                --bg:          #f5f0eb;
                --bg-2:        #ede8e3;
                --bg-3:        #e5dfd9;
                --surface:     #ffffff;
                --surface-2:   #faf8f5;

                /* Dark surfaces */
                --dark-bg:     #0a0a0a;
                --dark-2:      #141414;
                --dark-3:      #1e1e1e;
                --dark-4:      #252525;

                /* Text */
                --text:        #0a0a0a;
                --text-mid:    #3a3a3a;
                --text-muted:  #787878;
                --text-light:  rgba(255,255,255,0.85);
                --text-dim:    rgba(255,255,255,0.45);

                /* Borders */
                --border:      rgba(0,0,0,0.08);
                --border-2:    rgba(0,0,0,0.14);
                --border-dark: rgba(255,255,255,0.08);
                --border-dark2:rgba(255,255,255,0.14);

                /* Typography */
                --font-display: 'Barlow Condensed', sans-serif;
                --font-body:    'DM Sans', sans-serif;

                /* Shadows */
                --shadow-sm:   0 2px 12px rgba(0,0,0,0.08);
                --shadow-md:   0 8px 32px rgba(0,0,0,0.12);
                --shadow-lg:   0 20px 60px rgba(0,0,0,0.18);
                --shadow-red:  0 8px 32px rgba(204,0,0,0.30);

                /* Radius */
                --r-sm:  8px;
                --r-md:  14px;
                --r-lg:  20px;
                --r-xl:  28px;

                /* Transitions */
                --ease:        cubic-bezier(0.4, 0, 0.2, 1);
                --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

            html {
                scroll-behavior: smooth;
                -webkit-text-size-adjust: 100%;
                /* Scrollbar */
                scrollbar-width: thin;
                scrollbar-color: var(--red) var(--bg-2);
            }
            ::-webkit-scrollbar { width: 4px; }
            ::-webkit-scrollbar-track { background: var(--bg-2); }
            ::-webkit-scrollbar-thumb { background: var(--red); border-radius: 4px; }

            body {
                font-family: var(--font-body);
                font-size: 15px;
                font-weight: 400;
                line-height: 1.6;
                background: var(--bg);
                color: var(--text);
                min-height: 100vh;
                overflow-x: hidden;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            /* ── Selection ── */
            ::selection { background: var(--red); color: #fff; }

            /* ── Typography overrides ── */
            h1,h2,h3,h4,h5 {
                font-family: var(--font-display);
                font-weight: 800;
                line-height: 1.05;
                letter-spacing: -0.02em;
            }

            /* ── Image performance ── */
            img {
                max-width: 100%;
                height: auto;
                display: block;
                /* Prevent layout shift */
                content-visibility: auto;
            }
            img[loading="lazy"] { decoding: async; }

            /* ── Scroll reveal ── */
            .reveal {
                opacity: 0;
                transform: translateY(32px);
                transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
            }
            .reveal.visible { opacity: 1; transform: none; }
            .reveal-delay-1 { transition-delay: 0.1s; }
            .reveal-delay-2 { transition-delay: 0.2s; }
            .reveal-delay-3 { transition-delay: 0.3s; }
            .reveal-delay-4 { transition-delay: 0.4s; }

            /* ── Focus rings (accessibility) ── */
            :focus-visible {
                outline: 2px solid var(--red);
                outline-offset: 3px;
                border-radius: 4px;
            }
            ::-webkit-scrollbar-thumb {
                background: var(--red);
                border-radius: 10px;
            }

            /* ══════════════════════════════════════════
               GLOBAL EDITORIAL DESIGN SYSTEM
            ══════════════════════════════════════════ */
            /* Compat aliases */
            :root {
                --bg2: var(--bg-2);
                --surface2: var(--surface-2);
                --border2: var(--border-2);
                --border-2: rgba(0,0,0,0.14);
                --surface-2: #faf8f5;
                --bg-2: #ede8e3;
                --red-dark: #990000;
                --red-light: #ff3333;
                --red-glow: rgba(204,0,0,0.30);
                --red-soft: rgba(204,0,0,0.06);
                --red-border: rgba(204,0,0,0.20);
                --text-mid: #3a3a3a;
                --text-muted: #787878;
            }

            section { transition: background 0.3s; }

            /* ── Section headers ── */
            .section-header { text-align: center; margin-bottom: 60px; position: relative; }
            .section-badge {
                display: inline-flex; align-items: center; gap: 7px;
                font-family: var(--font-display);
                font-size: 11px; font-weight: 700;
                letter-spacing: 3px; text-transform: uppercase;
                padding: 5px 16px; border-radius: 3px;
                margin-bottom: 18px;
                background: var(--badge-bg, var(--red-soft));
                border: 1px solid var(--badge-border, var(--red-border));
                color: var(--badge-color, var(--red));
            }
            .section-title {
                font-family: var(--font-display);
                font-size: clamp(2rem, 5vw, 3.2rem);
                font-weight: 900; letter-spacing: -1px;
                color: var(--text); margin-bottom: 0; line-height: 1.0;
                position: relative; display: inline-block;
            }
            .section-title span { color: var(--red); }
            .section-title::after {
                content: ''; display: block;
                width: 48px; height: 3px;
                background: var(--red);
                margin: 14px auto 0; border-radius: 2px;
            }
            .section-sub {
                font-size: 15px; color: var(--text-muted);
                max-width: 480px; margin: 18px auto 16px; line-height: 1.7;
            }
            .section-link {
                display: inline-flex; align-items: center; gap: 6px;
                font-family: var(--font-display); font-size: 12px; font-weight: 700;
                letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
                color: var(--link-color); transition: gap 0.2s;
            }
            .section-link:hover { gap: 10px; }

            /* ── Separators ── */
            .sec-sep { position: relative; width: 100%; overflow: hidden; line-height: 0; z-index: 5; pointer-events: none; }
            .sec-sep svg { display: block; width: 100%; }
            .sep-rule { display: flex; align-items: center; gap: 20px; padding: 0 5%; margin: 0; position: relative; z-index: 5; }
            .sep-rule::before, .sep-rule::after { content: ''; flex: 1; height: 1px; }
            .sep-rule-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
            .sep-bg-to-white::before, .sep-bg-to-white::after { background: var(--border-2); }
            .sep-bg-to-white .sep-rule-icon { background: var(--surface); border: 1.5px solid var(--border-2); color: var(--red); }
            .sep-white-to-bg::before, .sep-white-to-bg::after { background: var(--border-2); }
            .sep-white-to-bg .sep-rule-icon { background: var(--bg); border: 1.5px solid var(--border-2); color: var(--red); }
            .sep-dark::before, .sep-dark::after { background: rgba(255,255,255,0.1); }
            .sep-dark .sep-rule-icon { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.5); }
            .sep-red::before { background: linear-gradient(90deg, transparent, var(--red)); }
            .sep-red::after  { background: linear-gradient(90deg, var(--red), transparent); }
            .sep-red .sep-rule-icon { background: var(--red); color: #fff; box-shadow: 0 4px 16px rgba(204,0,0,0.35); }

            /* ── Back to top ── */
            .back-to-top-btn {
                position: fixed; bottom: 28px; right: 28px; z-index: 9998;
                width: 46px; height: 46px; border-radius: var(--r-sm, 8px);
                background: var(--red); border: none; color: #fff; font-size: 18px;
                display: flex; align-items: center; justify-content: center;
                cursor: pointer; box-shadow: 0 6px 24px rgba(204,0,0,0.4);
                opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none;
                transition: opacity 0.3s, transform 0.3s, background 0.2s;
            }
            .back-to-top-btn.visible { opacity: 1; transform: none; pointer-events: auto; }
            .back-to-top-btn:hover { background: var(--red-dark); transform: translateY(-3px) scale(1.05); }

            /* ── Toast ── */
            .err-toast {
                position: fixed; bottom: 24px; left: 50%;
                transform: translateX(-50%) translateY(80px);
                background: #1a1a1a; border: 1px solid rgba(204,0,0,0.3);
                color: #fff; padding: 12px 24px; border-radius: 8px;
                font-size: 13px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
                transition: transform 0.4s; z-index: 9999; white-space: nowrap;
            }
            .err-toast.show { transform: translateX(-50%) translateY(0); }

            /* ── CTA buttons ── */
            .section-cta-btn {
                display: inline-flex; align-items: center;
                font-family: var(--font-display);
                font-size: 13px; font-weight: 700;
                letter-spacing: 1.5px; text-transform: uppercase;
                padding: 12px 26px; border-radius: 8px; text-decoration: none;
                background: var(--btn-color, var(--red)); color: #fff; margin-top: 20px;
                transition: opacity 0.2s, transform 0.2s;
            }
            .section-cta-btn:hover { opacity: 0.9; transform: translateY(-2px); color: #fff; }

            /* ── Mobile global ── */
            @media (max-width: 575.98px) {
                .section-header { margin-bottom: 40px; }
                .section-title { letter-spacing: -0.5px; }
                .section-title::after { margin: 10px auto 0; }
            }

            /* ══════════════════════════
               NAVBAR — Dark Editorial
            ══════════════════════════ */
            .navbar {
                background: rgba(10,10,10,0.96);
                backdrop-filter: blur(20px) saturate(1.4);
                -webkit-backdrop-filter: blur(20px) saturate(1.4);
                border-bottom: 1px solid rgba(204,0,0,0.20);
                padding: 0;
                position: fixed;
                top: 0; left: 0; right: 0;
                z-index: 1000;
                transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
            }
            .navbar.scrolled {
                background: rgba(10,10,10,0.99);
                box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(204,0,0,0.25);
            }

            /* Left accent bar */
            .navbar::before {
                content: '';
                position: absolute;
                top: 0; left: 0; right: 0;
                height: 2px;
                background: linear-gradient(90deg, transparent, var(--red) 30%, var(--red-light) 70%, transparent);
            }

            .navbar-brand {
                padding: 12px 0;
                display: flex;
                align-items: center;
                gap: 12px;
            }
            .navbar-brand img {
                height: 40px;
                object-fit: contain;
                filter: brightness(1.1) drop-shadow(0 2px 8px var(--red-glow));
                transition: filter 0.3s;
            }
            .navbar-brand:hover img {
                filter: brightness(1.2) drop-shadow(0 2px 16px rgba(204,0,0,0.5));
            }

            .nav-live-badge {
                display: flex; align-items: center; gap: 6px;
                background: var(--red);
                color: #fff;
                font-family: var(--font-display);
                font-size: 11px; font-weight: 700;
                letter-spacing: 2px; padding: 3px 10px;
                border-radius: 3px; text-transform: uppercase;
                position: relative; overflow: hidden;
            }
            .nav-live-badge::before {
                content: '';
                position: absolute; inset: 0;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
                animation: shimmer 2s infinite;
            }
            @keyframes shimmer {
                from { transform: translateX(-100%); }
                to   { transform: translateX(100%); }
            }

            .pulse-dot {
                width: 7px; height: 7px;
                background: #fff; border-radius: 50%;
                animation: pulseAnim 1.4s ease-in-out infinite;
                flex-shrink: 0;
            }
            @keyframes pulseAnim {
                0%,100% { opacity:1; transform:scale(1); }
                50%      { opacity:0.4; transform:scale(0.65); }
            }

            .navbar-nav .nav-link {
                color: rgba(255,255,255,0.65) !important;
                font-family: var(--font-display);
                font-size: 13px; font-weight: 700;
                letter-spacing: 1.5px;
                padding: 10px 14px !important;
                position: relative;
                transition: color 0.2s;
                text-transform: uppercase;
            }
            .navbar-nav .nav-link::after {
                content: '';
                position: absolute;
                bottom: 6px; left: 14px; right: 14px;
                height: 2px;
                background: var(--red);
                transform: scaleX(0);
                transform-origin: center;
                transition: transform 0.25s var(--ease-spring);
                border-radius: 2px;
            }
            .navbar-nav .nav-link:hover {
                color: #fff !important;
            }
            .navbar-nav .nav-link:hover::after,
            .navbar-nav .nav-link.active::after { transform: scaleX(1); }
            .navbar-nav .nav-link.active { color: #fff !important; }

            .nav-social a {
                color: rgba(255,255,255,0.45);
                font-size: 16px; padding: 6px 7px;
                transition: color 0.2s, transform 0.2s;
                display: inline-block;
            }
            .nav-social a:hover { color: var(--red); transform: translateY(-2px); }

            .navbar-toggler {
                border: 1px solid rgba(204,0,0,0.35);
                padding: 5px 9px; border-radius: 4px;
                background: transparent;
            }
            .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(204,0,0,0.25); }
            .navbar-toggler-icon {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23cc0000' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
            }

            @media (max-width: 991.98px) {
                .navbar-collapse {
                    background: rgba(10,10,10,0.98);
                    padding: 12px 16px 20px;
                    border-top: 1px solid rgba(204,0,0,0.2);
                }
                .navbar-nav .nav-link::after { bottom: 2px; }
                .nav-social { margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; }
                .nav-live-badge { display: none; }
            }

            /* ── HERO ── */
            .hero {
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 120px 20px 70px;
                position: relative;
                overflow: hidden;
                background: #0a0a0a;
            }

            .hero::before {
                content: "";
                position: absolute;
                inset: 0;
                background:
                    conic-gradient(from 200deg at 50% 110%, transparent 0deg, rgba(204, 0, 0, 0.06) 20deg, transparent 40deg,
                        rgba(204, 0, 0, 0.04) 55deg, transparent 75deg),
                    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(204, 0, 0, 0.10) 0%, transparent 60%),
                    radial-gradient(ellipse 40% 40% at 15% 80%, rgba(204, 0, 0, 0.05) 0%, transparent 50%),
                    radial-gradient(ellipse 40% 40% at 85% 80%, rgba(204, 0, 0, 0.05) 0%, transparent 50%),
                    #0a0a0a;
                animation: blobDrift 10s ease-in-out infinite alternate;
            }
            @keyframes blobDrift {
                from {
                    transform: scale(1);
                }
                to {
                    transform: scale(1.04) translateY(-8px);
                }
            }

            .hero::after {
                content: "";
                position: absolute;
                inset: 0;
                background-image: radial-gradient(
                    circle,
                    rgba(204, 0, 0, 0.09) 1px,
                    transparent 1px
                );
                background-size: 30px 30px;
                pointer-events: none;
                opacity: 0.5;
            }

            .ring {
                position: absolute;
                border-radius: 50%;
                border: 1px solid rgba(204, 0, 0, 0.18);
                animation: ringExpand 7s ease-out infinite;
                pointer-events: none;
            }
            .ring:nth-child(1) {
                width: 340px;
                height: 340px;
                top: 5%;
                left: -8%;
                animation-delay: 0s;
            }
            .ring:nth-child(2) {
                width: 520px;
                height: 520px;
                bottom: -12%;
                right: -10%;
                animation-delay: 2.5s;
            }
            .ring:nth-child(3) {
                width: 220px;
                height: 220px;
                top: 55%;
                left: 68%;
                animation-delay: 5s;
            }
            @keyframes ringExpand {
                0% {
                    transform: scale(0.85);
                    opacity: 0;
                }
                40% {
                    opacity: 1;
                }
                100% {
                    transform: scale(1.25);
                    opacity: 0;
                }
            }

            .hero-inner {
                position: relative;
                z-index: 2;
                width: 100%;
                max-width: 780px;
                margin: 0 auto;
            }

            /* Brand intro */
            .brand-intro {
                text-align: center;
                margin-bottom: 44px;
            }
            .brand-intro .freq-tag {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(204,0,0,0.12);
                border: 1px solid rgba(204,0,0,0.35);
                color: #ff6060;
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 2.5px;
                text-transform: uppercase;
                padding: 6px 18px;
                border-radius: 100px;
                margin-bottom: 18px;
                animation: fadeDown 0.7s ease both;
            }
            .brand-intro h1 {
                font-size: clamp(2.4rem, 7vw, 4.6rem);
                font-weight: 900;
                line-height: 1.05;
                letter-spacing: -1px;
                color: #ffffff;
                animation: fadeDown 0.7s 0.1s ease both;
            }
            .brand-intro h1 span {
                color: var(--red);
            }
            .brand-intro p {
                color: rgba(255,255,255,0.5);
                font-size: 15px;
                font-weight: 400;
                margin-top: 12px;
                animation: fadeDown 0.7s 0.2s ease both;
            }
            @keyframes fadeDown {
                from {
                    opacity: 0;
                    transform: translateY(-16px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* ── PLAYER CARD ── */
            .player-card {
                background: linear-gradient(145deg, #141414 0%, #1a0a0a 50%, #141414 100%);
                border: 1px solid rgba(204,0,0,0.25);
                border-radius: 28px;
                padding: 36px 36px 32px;
                box-shadow:
                    0 0 0 1px rgba(255,255,255,0.05) inset,
                    0 40px 100px rgba(0,0,0,0.6),
                    0 0 60px rgba(204,0,0,0.08);
                position: relative;
                overflow: hidden;
                animation: fadeUp 0.8s 0.3s ease both;
                color: #fff;
            }
            @keyframes fadeUp {
                from { opacity: 0; transform: translateY(28px); }
                to   { opacity: 1; transform: translateY(0); }
            }
            /* Top glow bar */
            .player-card::before {
                content: "";
                position: absolute; top: 0; left: 0; right: 0; height: 2px;
                background: linear-gradient(90deg, transparent 0%, #cc0000 30%, #ff3333 50%, #cc0000 70%, transparent 100%);
                border-radius: 28px 28px 0 0;
            }
            /* Subtle radial glow background */
            .player-card::after {
                content: '';
                position: absolute; inset: 0; pointer-events: none;
                background:
                    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(204,0,0,0.10) 0%, transparent 60%),
                    radial-gradient(ellipse 40% 30% at 15% 0%, rgba(204,0,0,0.06) 0%, transparent 50%);
            }

            /* Now playing row */
            .now-playing-row {
                display: flex;
                align-items: center;
                gap: 20px;
                margin-bottom: 24px;
            }

            /* Vinyl */
            .vinyl-wrap {
                flex-shrink: 0;
                position: relative;
                width: 92px;
                height: 92px;
            }
            .vinyl {
                width: 92px;
                height: 92px;
                border-radius: 50%;
                background: radial-gradient(
                    circle at 50% 50%,
                    #2a2a2a 18%, #1a1a1a 19%,
                    #222 40%, #141414 41%,
                    #1e1e1e 55%, #111 56%,
                    #1a1a1a 70%, #0e0e0e 71%
                );
                border: 2px solid rgba(204,0,0,0.15);
                box-shadow:
                    0 4px 20px rgba(0,0,0,0.5),
                    0 0 0 5px rgba(204,0,0,0.06);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: box-shadow 0.4s;
            }
            .vinyl.spinning {
                animation: spin 3s linear infinite;
                box-shadow:
                    0 6px 32px rgba(204,0,0,0.3),
                    0 0 0 5px rgba(204,0,0,0.15),
                    0 0 30px rgba(204,0,0,0.08);
            }
            @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
            .vinyl-center {
                width: 24px; height: 24px; border-radius: 50%;
                background: radial-gradient(circle, #cc0000 40%, #880000 100%);
                box-shadow: 0 0 14px rgba(204,0,0,0.5), 0 0 4px rgba(204,0,0,0.8);
                z-index: 1;
            }
            .vinyl-arm {
                position: absolute; top: -4px; right: -4px;
                width: 2px; height: 40px;
                background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0.25));
                border-radius: 2px;
                transform-origin: top center;
                transform: rotate(20deg);
                transition: transform 0.6s ease;
            }
            .vinyl-arm.playing { transform: rotate(35deg); }

            /* Now playing info */
            .now-playing-info { flex: 1; min-width: 0; }
            .np-label {
                font-size: 10px; font-weight: 700;
                letter-spacing: 3px; text-transform: uppercase;
                color: var(--red); margin-bottom: 6px;
            }
            .np-title {
                font-size: 20px; font-weight: 700;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                margin-bottom: 4px; color: #ffffff;
            }
            .np-sub { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 400; }

            /* Live pill */
            .live-pill { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
            .live-pill-inner {
                background: var(--red); color: #fff;
                font-size: 11px; font-weight: 800; letter-spacing: 2px;
                padding: 5px 13px; border-radius: 3px; position: relative; overflow: hidden;
            }
            .live-pill-inner::after {
                content: "";
                position: absolute; inset: 0;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
                animation: shimmer 2s infinite;
            }
            .live-pill span { font-size: 10px; color: rgba(255,255,255,0.35); letter-spacing: 1px; }

            /* ══════════════════════════════════
               VISUALIZER — redesigned
               Bright neon bars on dark channel
            ══════════════════════════════════ */
            .visualizer-wrap {
                margin-bottom: 20px;
                height: 64px;
                display: flex;
                align-items: flex-end;
                gap: 3px;
                padding: 8px 10px 0;
                background:
                    linear-gradient(to bottom,
                        rgba(0,0,0,0) 0%,
                        rgba(204,0,0,0.06) 70%,
                        rgba(204,0,0,0.14) 100%);
                border: 1px solid rgba(204,0,0,0.15);
                border-radius: 12px;
                position: relative;
                overflow: hidden;
            }
            /* Horizontal scan-line glow beneath bars */
            .visualizer-wrap::before {
                content: '';
                position: absolute;
                bottom: 0; left: 0; right: 0;
                height: 2px;
                background: linear-gradient(90deg, transparent, rgba(204,0,0,0.6) 20%, #cc0000 50%, rgba(204,0,0,0.6) 80%, transparent);
                box-shadow: 0 0 8px rgba(204,0,0,0.8);
            }
            /* Centre reflection shimmer */
            .visualizer-wrap::after {
                content: '';
                position: absolute; inset: 0;
                background: linear-gradient(135deg, rgba(255,255,255,0.015) 0%, transparent 60%);
                pointer-events: none;
            }
            .viz-bar {
                flex: 1;
                border-radius: 3px 3px 0 0;
                min-height: 3px;
                position: relative;
                /* Neon gradient: bright white tip → vivid red mid → deep crimson base */
                background: linear-gradient(
                    to top,
                    #880000 0%,
                    #cc0000 35%,
                    #ff2222 70%,
                    #ff6666 88%,
                    #ffffff 100%
                );
                box-shadow:
                    0 0 4px rgba(255,40,40,0.5),
                    0 0 8px rgba(204,0,0,0.3);
                transition: height 0.05s linear;
            }
            /* Idle state — barely visible cool grey */
            .visualizer-wrap:not(.active) .viz-bar {
                height: 3px !important;
                background: rgba(255,255,255,0.12) !important;
                box-shadow: none !important;
            }
            /* Active — JS drives heights directly, no CSS animation needed */
            .visualizer-wrap.active .viz-bar {
                /* heights set by JS renderViz() */
            }

            /* Progress / time */
            .time-row {
                display: flex; justify-content: space-between;
                font-size: 11px; color: rgba(255,255,255,0.3);
                margin-bottom: 7px; font-weight: 600; letter-spacing: 0.5px;
            }
            .progress-bar-wrap {
                height: 3px; background: rgba(255,255,255,0.08);
                border-radius: 4px; margin-bottom: 28px; overflow: hidden;
            }
            .progress-bar-fill.live-stream {
                width: 100%; height: 100%; border-radius: 4px;
                background: linear-gradient(90deg, #880000, #cc0000, #ff3333, #cc0000, #880000);
                background-size: 300% 100%;
                animation: liveBar 2.5s linear infinite;
                box-shadow: 0 0 6px rgba(204,0,0,0.5);
            }
            @keyframes liveBar {
                from { background-position: 100% 0; }
                to   { background-position: -100% 0; }
            }

            /* Controls row */
            .controls-row { display: flex; align-items: center; gap: 14px; }

            /* Play button — large glowing red circle */
            .btn-play-main {
                width: 72px; height: 72px; border-radius: 50%;
                background: radial-gradient(circle at 40% 35%, #ff3333, #cc0000 60%, #880000);
                border: none;
                display: flex; align-items: center; justify-content: center;
                cursor: pointer; position: relative; flex-shrink: 0;
                transition: transform 0.2s, box-shadow 0.3s;
                box-shadow:
                    0 0 0 3px rgba(204,0,0,0.2),
                    0 8px 30px rgba(204,0,0,0.5);
            }
            .btn-play-main:hover {
                transform: scale(1.08);
                box-shadow:
                    0 0 0 6px rgba(204,0,0,0.15),
                    0 12px 40px rgba(204,0,0,0.6);
            }
            .btn-play-main:active { transform: scale(0.95); }
            .btn-play-main.is-playing {
                animation: playPulse 2.5s ease-in-out infinite;
            }
            @keyframes playPulse {
                0%,100% { box-shadow: 0 0 0 3px rgba(204,0,0,0.2), 0 8px 30px rgba(204,0,0,0.45); }
                50%      { box-shadow: 0 0 0 10px rgba(204,0,0,0.08), 0 8px 40px rgba(204,0,0,0.65), 0 0 30px rgba(204,0,0,0.15); }
            }
            .btn-play-main i { font-size: 26px; color: #fff; margin-left: 3px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }
            .btn-play-main.is-playing i { margin-left: 0; }

            /* Control buttons — dark glass */
            .btn-ctrl {
                width: 46px; height: 46px; border-radius: 50%;
                background: rgba(255,255,255,0.07);
                border: 1.5px solid rgba(255,255,255,0.12);
                color: rgba(255,255,255,0.55);
                display: flex; align-items: center; justify-content: center;
                cursor: pointer; font-size: 18px; transition: all 0.2s; flex-shrink: 0;
                backdrop-filter: blur(4px);
            }
            .btn-ctrl:hover {
                background: rgba(204,0,0,0.18);
                border-color: rgba(204,0,0,0.4);
                color: #ff6666;
                transform: scale(1.1);
                box-shadow: 0 0 12px rgba(204,0,0,0.25);
            }
            .btn-ctrl.active-ctrl {
                background: rgba(204,0,0,0.2);
                border-color: rgba(204,0,0,0.4);
                color: #ff4444;
            }

            /* Volume */
            .volume-wrap { display: flex; align-items: center; gap: 10px; flex: 1; }
            .volume-wrap i { font-size: 17px; color: rgba(255,255,255,0.35); cursor: pointer; transition: color 0.2s; flex-shrink: 0; }
            .volume-wrap i:hover { color: #cc0000; }
            input[type="range"].vol-slider {
                -webkit-appearance: none; flex: 1; height: 4px; border-radius: 4px;
                background: rgba(255,255,255,0.12); outline: none; cursor: pointer;
            }
            input[type="range"].vol-slider::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: 14px; height: 14px; border-radius: 50%;
                background: #cc0000;
                box-shadow: 0 0 6px rgba(204,0,0,0.7);
                cursor: pointer; transition: transform 0.15s;
            }
            input[type="range"].vol-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }
            input[type="range"].vol-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #cc0000; border: none; }

            /* Frequency badges — dark glass pills */
            .freq-badge-row {
                display: flex; gap: 10px; margin-top: 24px; padding-top: 20px;
                border-top: 1px solid rgba(255,255,255,0.07); flex-wrap: wrap;
            }
            .freq-badge {
                flex: 1; min-width: 110px;
                background: rgba(255,255,255,0.05);
                border: 1px solid rgba(255,255,255,0.1);
                border-radius: 12px; padding: 12px 14px;
                display: flex; align-items: center; gap: 10px;
                transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
            }
            .freq-badge:hover {
                border-color: rgba(204,0,0,0.35);
                background: rgba(204,0,0,0.1);
                box-shadow: 0 0 16px rgba(204,0,0,0.12);
            }
            .freq-badge i { font-size: 18px; color: var(--red); }
            .freq-badge-text { font-size: 10px; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 1.2px; }
            .freq-badge-val { font-size: 15px; font-weight: 800; color: #ffffff; line-height: 1; font-family: var(--font-display); letter-spacing: 0.5px; }

            /* Loading ring */
            .loading-ring {
                position: absolute; inset: -4px; border-radius: 50%;
                border: 2px solid rgba(255,255,255,0.2);
                border-top-color: #fff;
                animation: spin 0.8s linear infinite; display: none;
            }
            .loading .loading-ring { display: block; }
            .loading .btn-play-main i { opacity: 0.4; }

            /* Social row */
            .social-row {
                display: flex; align-items: center; justify-content: center;
                gap: 10px; margin-top: 28px;
                animation: fadeUp 0.8s 0.5s ease both;
            }
            .social-row span {
                font-size: 11px; color: rgba(255,255,255,0.25);
                letter-spacing: 2px; text-transform: uppercase; margin-right: 4px;
                font-family: var(--font-display); font-weight: 700;
            }
            .social-btn {
                width: 40px; height: 40px; border-radius: 50%;
                background: rgba(255,255,255,0.07);
                border: 1.5px solid rgba(255,255,255,0.12);
                color: rgba(255,255,255,0.45);
                display: flex; align-items: center; justify-content: center;
                font-size: 16px; text-decoration: none;
                transition: all 0.25s; box-shadow: none;
            }
            .social-btn:hover {
                background: var(--red); border-color: var(--red); color: #fff;
                transform: translateY(-3px);
                box-shadow: 0 6px 20px rgba(204,0,0,0.4);
            }

            /* Mobile */
            @media (max-width: 575.98px) {
                .player-card { padding: 24px 18px 20px; border-radius: 20px; }
                .btn-play-main { width: 60px; height: 60px; }
                .btn-play-main i { font-size: 22px; }
                .vinyl, .vinyl-wrap { width: 76px; height: 76px; }
                .np-title { font-size: 17px; }
                .live-pill { display: none; }
                .controls-row { gap: 10px; }
                .btn-ctrl { width: 40px; height: 40px; font-size: 16px; }
                .now-playing-row { gap: 14px; }
                .visualizer-wrap { height: 52px; }
                .freq-badge { min-width: 90px; padding: 10px 12px; }
                .freq-badge-val { font-size: 13px; }
            }

            /* Now playing */
            .now-playing-row {
                display: flex;
                align-items: center;
                gap: 20px;
                margin-bottom: 28px;
            }

            .vinyl-wrap {
                flex-shrink: 0;
                position: relative;
                width: 88px;
                height: 88px;
            }
            .vinyl {
                width: 88px;
                height: 88px;
                border-radius: 50%;
                background: radial-gradient(
                    circle at 50% 50%,
                    #ddd 18%,
                    #c4c4c4 19%,
                    #d2d2d2 40%,
                    #bfbfbf 41%,
                    #ccc 55%,
                    #b8b8b8 56%,
                    #cbcbcb 70%,
                    #b4b4b4 71%
                );
                border: 2px solid rgba(0, 0, 0, 0.07);
                box-shadow:
                    0 4px 18px rgba(0, 0, 0, 0.13),
                    0 0 0 5px rgba(204, 0, 0, 0.07);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: box-shadow 0.4s;
            }
            .vinyl.spinning {
                animation: spin 3s linear infinite;
                box-shadow:
                    0 6px 28px rgba(204, 0, 0, 0.22),
                    0 0 0 5px rgba(204, 0, 0, 0.12);
            }
            @keyframes spin {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }
            .vinyl-center {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: radial-gradient(
                    circle,
                    var(--red) 40%,
                    var(--red-dark) 100%
                );
                box-shadow: 0 0 10px rgba(204, 0, 0, 0.35);
                z-index: 1;
            }
            .vinyl-arm {
                position: absolute;
                top: -4px;
                right: -4px;
                width: 2px;
                height: 40px;
                background: linear-gradient(to bottom, #aaa, #ccc);
                border-radius: 2px;
                transform-origin: top center;
                transform: rotate(20deg);
                transition: transform 0.6s ease;
            }
            .vinyl-arm.playing {
                transform: rotate(35deg);
            }

            .now-playing-info {
                flex: 1;
                min-width: 0;
            }
            .np-label {
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 3px;
                text-transform: uppercase;
                color: var(--red);
                margin-bottom: 6px;
            }
            .np-title {
                font-size: 20px;
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 3px;
                color: var(--text);
            }
            .np-sub {
                font-size: 13px;
                color: var(--text-muted);
                font-weight: 400;
            }

            .live-pill {
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px;
            }
            .live-pill-inner {
                background: var(--red);
                color: #fff;
                font-size: 11px;
                font-weight: 800;
                letter-spacing: 2px;
                padding: 5px 13px;
                border-radius: 3px;
                position: relative;
                overflow: hidden;
            }
            .live-pill-inner::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.2),
                    transparent
                );
                animation: shimmer 2s infinite;
            }
            .live-pill span {
                font-size: 10px;
                color: var(--text-muted);
                letter-spacing: 1px;
            }

            /* Visualizer */
            .visualizer-wrap {
                margin-bottom: 22px;
                height: 52px;
                display: flex;
                align-items: flex-end;
                gap: 3px;
                padding: 0 2px;
                background: linear-gradient(
                    to top,
                    rgba(204, 0, 0, 0.04),
                    transparent
                );
                border-radius: 8px;
            }
            .viz-bar {
                flex: 1;
                border-radius: 2px 2px 0 0;
                background: linear-gradient(
                    to top,
                    var(--red),
                    rgba(204, 0, 0, 0.3)
                );
                min-height: 4px;
            }
            .visualizer-wrap.active .viz-bar {
                animation: barBounce var(--dur) ease-in-out infinite alternate;
            }
            @keyframes barBounce {
                from {
                    height: var(--min-h);
                    opacity: 0.5;
                }
                to {
                    height: var(--max-h);
                    opacity: 1;
                }
            }
            .visualizer-wrap:not(.active) .viz-bar {
                height: 4px;
                opacity: 0.18;
            }

            /* Progress */
            .time-row {
                display: flex;
                justify-content: space-between;
                font-size: 11px;
                color: var(--text-muted);
                margin-bottom: 7px;
                font-weight: 500;
                letter-spacing: 0.5px;
            }
            .progress-bar-wrap {
                height: 4px;
                background: var(--bg2);
                border-radius: 4px;
                margin-bottom: 28px;
                overflow: hidden;
            }
            .progress-bar-fill.live-stream {
                width: 100%;
                height: 100%;
                border-radius: 4px;
                background: linear-gradient(
                    90deg,
                    var(--red-dark),
                    var(--red),
                    var(--red-light),
                    var(--red),
                    var(--red-dark)
                );
                background-size: 300% 100%;
                animation: liveBar 2.5s linear infinite;
            }
            @keyframes liveBar {
                from {
                    background-position: 100% 0;
                }
                to {
                    background-position: -100% 0;
                }
            }

            /* Controls */
            .controls-row {
                display: flex;
                align-items: center;
                gap: 14px;
            }

            .btn-play-main {
                width: 68px;
                height: 68px;
                border-radius: 50%;
                background: var(--red);
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                position: relative;
                flex-shrink: 0;
                transition:
                    transform 0.2s,
                    box-shadow 0.3s;
                box-shadow: 0 6px 24px rgba(204, 0, 0, 0.35);
            }
            .btn-play-main:hover {
                transform: scale(1.07);
                box-shadow: 0 10px 36px rgba(204, 0, 0, 0.45);
            }
            .btn-play-main:active {
                transform: scale(0.95);
            }
            .btn-play-main.is-playing {
                animation: playPulse 2.5s ease-in-out infinite;
            }
            @keyframes playPulse {
                0%,
                100% {
                    box-shadow: 0 6px 24px rgba(204, 0, 0, 0.35);
                }
                50% {
                    box-shadow:
                        0 6px 40px rgba(204, 0, 0, 0.55),
                        0 0 0 12px rgba(204, 0, 0, 0.07);
                }
            }
            .btn-play-main i {
                font-size: 26px;
                color: #fff;
                margin-left: 3px;
            }
            .btn-play-main.is-playing i {
                margin-left: 0;
            }

            .btn-ctrl {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: var(--surface2);
                border: 1.5px solid var(--border2);
                color: var(--text-muted);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                font-size: 18px;
                transition: all 0.2s;
                flex-shrink: 0;
            }
            .btn-ctrl:hover {
                background: var(--red-soft);
                border-color: var(--red-border);
                color: var(--red);
                transform: scale(1.08);
            }
            .btn-ctrl.active-ctrl {
                background: var(--red-soft);
                border-color: var(--red-border);
                color: var(--red);
            }

            .volume-wrap {
                display: flex;
                align-items: center;
                gap: 10px;
                flex: 1;
            }
            .volume-wrap i {
                font-size: 17px;
                color: var(--text-muted);
                cursor: pointer;
                transition: color 0.2s;
                flex-shrink: 0;
            }
            .volume-wrap i:hover {
                color: var(--red);
            }
            input[type="range"].vol-slider {
                -webkit-appearance: none;
                flex: 1;
                height: 4px;
                border-radius: 4px;
                background: var(--bg2);
                outline: none;
                cursor: pointer;
            }
            input[type="range"].vol-slider::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background: var(--red);
                box-shadow: 0 2px 8px rgba(204, 0, 0, 0.35);
                cursor: pointer;
                transition: transform 0.15s;
            }
            input[type="range"].vol-slider::-webkit-slider-thumb:hover {
                transform: scale(1.3);
            }
            input[type="range"].vol-slider::-moz-range-thumb {
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background: var(--red);
                border: none;
            }

            /* Freq badges */
            .freq-badge-row {
                display: flex;
                gap: 10px;
                margin-top: 26px;
                padding-top: 20px;
                border-top: 1px solid var(--border);
                flex-wrap: wrap;
            }
            .freq-badge {
                flex: 1;
                min-width: 120px;
                background: var(--bg);
                border: 1.5px solid var(--border2);
                border-radius: 12px;
                padding: 12px 16px;
                display: flex;
                align-items: center;
                gap: 10px;
                transition:
                    border-color 0.25s,
                    background 0.25s,
                    box-shadow 0.25s;
            }
            .freq-badge:hover {
                border-color: var(--red-border);
                background: #fff;
                box-shadow: 0 4px 16px rgba(204, 0, 0, 0.08);
            }
            .freq-badge i {
                font-size: 18px;
                color: var(--red);
            }
            .freq-badge-text {
                font-size: 10px;
                color: var(--text-muted);
                text-transform: uppercase;
                letter-spacing: 1px;
            }
            .freq-badge-val {
                font-size: 16px;
                font-weight: 700;
                color: var(--text);
                line-height: 1;
            }

            /* Loading ring */
            .loading-ring {
                position: absolute;
                inset: -4px;
                border-radius: 50%;
                border: 2px solid rgba(255, 255, 255, 0.3);
                border-top-color: #fff;
                animation: spin 0.8s linear infinite;
                display: none;
            }
            .loading .loading-ring {
                display: block;
            }
            .loading .btn-play-main i {
                opacity: 0.4;
            }

            /* Social */
            .social-row {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin-top: 28px;
                animation: fadeUp 0.8s 0.5s ease both;
            }
            .social-row span {
                font-size: 12px;
                color: var(--text-muted);
                letter-spacing: 1px;
                text-transform: uppercase;
                margin-right: 4px;
            }
            .social-btn {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: rgba(255,255,255,0.07);
                border: 1.5px solid rgba(255,255,255,0.12);
                color: rgba(255,255,255,0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                text-decoration: none;
                transition: all 0.25s;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            }
            .social-btn:hover {
                background: var(--red);
                border-color: var(--red);
                color: #fff;
                transform: translateY(-3px);
                box-shadow: 0 8px 20px rgba(204, 0, 0, 0.28);
            }

            /* Toast */
            .err-toast {
                position: fixed;
                bottom: 24px;
                left: 50%;
                transform: translateX(-50%) translateY(80px);
                background: var(--surface);
                border: 1px solid var(--red-border);
                color: var(--text);
                padding: 12px 24px;
                border-radius: 10px;
                font-size: 13px;
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
                transition: transform 0.4s;
                z-index: 9999;
                white-space: nowrap;
            }
            .err-toast.show {
                transform: translateX(-50%) translateY(0);
            }

            @media (max-width: 575.98px) {
                .player-card {
                    padding: 24px 18px 20px;
                    border-radius: 18px;
                }
                .btn-play-main { width: 58px; height: 58px; }
                .btn-play-main i { font-size: 22px; }
                .vinyl, .vinyl-wrap { width: 72px; height: 72px; }
                .np-title { font-size: 16px; }
                .live-pill { display: none; }
                .controls-row { gap: 10px; }
                .btn-ctrl { width: 38px; height: 38px; font-size: 15px; }
                .now-playing-row { gap: 14px; }
            }

            /* ═══════════════════════════════════════════════════
               EDITORIAL OVERRIDES — all handled in main CSS now
            ═══════════════════════════════════════════════════ */

            /* Hero brand text dark card fix */
            .player-card #brandText span:first-child { color: #fff !important; }

            /* ── Brand intro on light bg ── */
            .brand-intro h1 { font-family: var(--font-display); font-size: clamp(2.6rem, 8vw, 5rem); font-weight: 900; letter-spacing: -2px; }
            .brand-intro .freq-tag { font-family: var(--font-display); letter-spacing: 3px; font-weight: 700; }

            /* ── Footer dark editorial ── */
            .site-footer { background: var(--black, #0a0a0a) !important; border-top: 2px solid var(--red); }
            .footer-heading { font-family: var(--font-display); letter-spacing: 2.5px; }
            .footer-links a { font-family: var(--font-body); }
            .footer-bottom { border-top-color: rgba(255,255,255,0.06) !important; }

            /* ── Radio Guide cards — bone bg ── */
            .radio-guide-section { background: var(--bg) !important; }
            .rg-card { background: var(--surface) !important; border-color: var(--border-2) !important; }
            .rg-show-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.3px; }

            /* ── RJ cards — white bg ── */
            .rj-section { background: var(--surface) !important; }
            .rj-card { background: var(--surface) !important; }
            .rj-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; }

            /* ── Tamil Top 10 ── */
            .tt10-section { background: var(--bg) !important; }
            .tt10-song-title { font-family: var(--font-display); }
            .tt10-card { background: var(--surface) !important; }

            /* ── Events ── */
            .ev-section { background: var(--surface) !important; }
            .ev-card { background: var(--surface) !important; }
            .ev-feat-title { font-family: var(--font-display); }
            .ev-card-title { font-family: var(--font-display); font-weight: 800; }

            /* ── Cinema Corner ── */
            .cc-title { font-family: var(--font-display) !important; }

            /* ── About section ── */
            .about-section { background: var(--bg) !important; }

            /* ── Contact section ── */
            .contact-section { background: var(--surface) !important; }

            /* ── YouTube / Social sections ── */
            .social-section { background: var(--bg) !important; }
            .social-section.alt-bg { background: var(--surface) !important; }
            .yt-video-meta h6 { font-family: var(--font-display); font-weight: 700; }

            /* ── App section ── */
            .app-heading { font-family: var(--font-display) !important; }

            /* ── Hero slider ── */
            .hs-title { font-family: var(--font-display) !important; }
            .hs-eyebrow { font-family: var(--font-display) !important; }
            .hs-btn-play, .hs-btn-ghost { font-family: var(--font-display) !important; }

            /* ── Scroll reveal ── */
            .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1); }
            .reveal.visible { opacity: 1; transform: none; }
            .reveal-delay-1 { transition-delay: 0.1s; }
            .reveal-delay-2 { transition-delay: 0.2s; }
            .reveal-delay-3 { transition-delay: 0.3s; }

            /* ── Focus accessibility ── */
            :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
            ::selection { background: var(--red); color: #fff; }

            /* ── Mobile fine-tuning ── */
            @media (max-width: 767.98px) {
                .section-title { font-size: clamp(1.8rem, 6vw, 2.6rem); }
                .section-header { margin-bottom: 40px; }
                .brand-intro h1 { letter-spacing: -1px; }
            }
            @media (max-width: 575.98px) {
                .brand-intro h1 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
                .player-card { border-radius: 16px; }
                /* Tighter container padding on mobile */
                .container { padding-left: 16px; padding-right: 16px; }
                /* Stack freq badges */
                .freq-badge-row { gap: 8px; }
                .freq-badge { min-width: 100px; padding: 10px 12px; }
            }
        

/* ══════════════════════════════════════ */


            /* ══════════════════════════════════════════
               HERO IMAGE SLIDER
            ══════════════════════════════════════════ */
            .hs-wrap {
                position: relative; width: 100%; height: 100vh;
                min-height: 580px; max-height: 900px;
                overflow: hidden; background: #0c0c1a;
                margin-top: 0; /* sits under fixed navbar */
            }
            .hs-track {
                display: flex; height: 100%;
                transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1);
                will-change: transform;
            }
            .hs-slide {
                min-width: 100%; height: 100%;
                position: relative; overflow: hidden;
                flex-shrink: 0;
            }
            .hs-slide-bg {
                position: absolute; inset: -4%;
                background-size: cover; background-position: center;
                transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1);
                will-change: transform;
                filter: brightness(0.55) saturate(1.1);
            }
            /* Ken Burns per active slide */
            .hs-slide.hs-active .hs-slide-bg {
                animation: hsBurn 7s ease-out forwards;
            }
            @keyframes hsBurn {
                from { transform: scale(1.08) translateX(0px); }
                to   { transform: scale(1) translateX(-8px); }
            }

            /* Grain texture */
            .hs-grain {
                position: absolute; inset: 0; pointer-events: none; z-index: 1;
                opacity: 0.045;
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
                background-size: 160px;
            }

            /* Multi-layer overlay: bottom-heavy gradient */
            .hs-overlay {
                position: absolute; inset: 0; z-index: 2; pointer-events: none;
                background:
                    linear-gradient(0deg,  rgba(8,8,20,0.92) 0%,  rgba(8,8,20,0.55) 38%, transparent 70%),
                    linear-gradient(90deg, rgba(8,8,20,0.55) 0%,  transparent 55%);
            }

            /* Content */
            .hs-content {
                position: absolute; z-index: 3;
                bottom: 100px; left: 0; right: 0;
                max-width: 760px;
                padding: 0 80px;
            }
            .hs-eyebrow {
                display: inline-flex; align-items: center; gap: 8px;
                background: rgba(204,0,0,0.18);
                border: 1px solid rgba(204,0,0,0.35);
                color: #ff8080; font-size: 11px; font-weight: 700;
                letter-spacing: 2px; text-transform: uppercase;
                padding: 5px 14px; border-radius: 100px;
                margin-bottom: 20px;
                backdrop-filter: blur(6px);
                opacity: 0; transform: translateY(20px);
                animation: hsFadeUp 0.6s 0.1s ease forwards;
            }
            .hs-live-dot {
                width: 7px; height: 7px; border-radius: 50%;
                background: var(--red);
                animation: pulseAnim 1.4s ease-in-out infinite;
                flex-shrink: 0;
            }
            .hs-title {
                font-size: clamp(2.2rem, 5.5vw, 4.2rem);
                font-weight: 900; line-height: 1.08;
                letter-spacing: -1.5px; color: #fff;
                margin-bottom: 18px;
                opacity: 0; transform: translateY(28px);
                animation: hsFadeUp 0.7s 0.25s ease forwards;
            }
            .hs-title em {
                font-style: normal; color: var(--red);
                display: block;
            }
            .hs-sub {
                font-size: 16px; color: rgba(255,255,255,0.68);
                line-height: 1.7; max-width: 500px;
                margin-bottom: 32px;
                opacity: 0; transform: translateY(28px);
                animation: hsFadeUp 0.7s 0.4s ease forwards;
            }
            .hs-actions {
                display: flex; gap: 14px; flex-wrap: wrap;
                opacity: 0; transform: translateY(28px);
                animation: hsFadeUp 0.7s 0.55s ease forwards;
            }
            @keyframes hsFadeUp {
                to { opacity: 1; transform: translateY(0); }
            }

            /* Stop animations when not active slide */
            .hs-slide:not(.hs-active) .hs-eyebrow,
            .hs-slide:not(.hs-active) .hs-title,
            .hs-slide:not(.hs-active) .hs-sub,
            .hs-slide:not(.hs-active) .hs-actions {
                animation: none; opacity: 0; transform: translateY(20px);
            }

            .hs-btn-play {
                display: inline-flex; align-items: center; gap: 9px;
                background: var(--red); color: #fff;
                font-size: 14px; font-weight: 700;
                padding: 14px 28px; border-radius: 12px;
                text-decoration: none; letter-spacing: 0.3px;
                box-shadow: 0 8px 30px rgba(204,0,0,0.45);
                transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
            }
            .hs-btn-play:hover {
                background: var(--red-dark); color: #fff;
                transform: translateY(-3px); box-shadow: 0 14px 40px rgba(204,0,0,0.55);
            }
            .hs-btn-ghost {
                display: inline-flex; align-items: center; gap: 8px;
                background: rgba(255,255,255,0.1);
                border: 1.5px solid rgba(255,255,255,0.25);
                color: #fff; font-size: 14px; font-weight: 600;
                padding: 13px 24px; border-radius: 12px;
                text-decoration: none; letter-spacing: 0.2px;
                backdrop-filter: blur(8px);
                transition: background 0.2s, border-color 0.2s, transform 0.2s;
            }
            .hs-btn-ghost:hover {
                background: rgba(255,255,255,0.18);
                border-color: rgba(255,255,255,0.5); color: #fff;
                transform: translateY(-3px);
            }
            .hs-btn-ghost i { transition: transform 0.2s; }
            .hs-btn-ghost:hover i { transform: translateX(4px); }

            /* Slide number */
            .hs-slide-num {
                position: absolute; right: 60px; bottom: 110px; z-index: 3;
                font-size: 5rem; font-weight: 900;
                color: rgba(255,255,255,0.06);
                letter-spacing: -3px; line-height: 1;
                pointer-events: none; user-select: none;
            }

            /* Nav arrows */
            .hs-nav {
                position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
                width: 56px; height: 56px; border-radius: 50%;
                background: rgba(255,255,255,0.1);
                border: 1.5px solid rgba(255,255,255,0.2);
                backdrop-filter: blur(12px);
                color: #fff; font-size: 22px;
                display: flex; align-items: center; justify-content: center;
                cursor: pointer;
                transition: background 0.2s, transform 0.2s, border-color 0.2s;
            }
            .hs-nav:hover { background: var(--red); border-color: var(--red); transform: translateY(-50%) scale(1.1); }
            .hs-prev { left: 32px; }
            .hs-next { right: 32px; }

            /* Dots */
            .hs-dots {
                position: absolute; bottom: 36px; left: 80px; z-index: 10;
                display: flex; gap: 10px; align-items: center;
            }
            .hs-dot {
                width: 8px; height: 8px; border-radius: 100px;
                background: rgba(255,255,255,0.3);
                border: none; cursor: pointer; padding: 0;
                transition: background 0.3s, width 0.3s;
            }
            .hs-dot.active { background: var(--red); width: 32px; }

            /* Progress bar */
            .hs-progress {
                position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
                background: rgba(255,255,255,0.07); z-index: 10;
            }
            .hs-progress-fill {
                height: 100%; background: var(--red);
                transition: width 0.12s linear; width: 0%;
            }

            /* Scroll cue */
            .hs-scroll-cue {
                position: absolute; right: 60px; bottom: 40px; z-index: 10;
                display: flex; flex-direction: column; align-items: center; gap: 8px;
            }
            .hs-scroll-line {
                width: 1px; height: 48px;
                background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%);
                animation: scrollCueDrop 1.8s ease-in-out infinite;
            }
            .hs-scroll-cue span {
                font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
                color: rgba(255,255,255,0.4); text-transform: uppercase;
                writing-mode: vertical-rl;
            }
            @keyframes scrollCueDrop {
                0%, 100% { transform: translateY(0); opacity: 0.5; }
                50%       { transform: translateY(8px); opacity: 1; }
            }

            /* Responsive */
            @media (max-width: 991.98px) {
                .hs-wrap { height: 75vh; max-height: 680px; }
                .hs-content { padding: 0 48px; bottom: 80px; }
                .hs-slide-num { right: 32px; bottom: 90px; font-size: 3.5rem; }
                .hs-dots { left: 48px; }
                .hs-scroll-cue { right: 28px; }
            }
            @media (max-width: 767.98px) {
                .hs-wrap { height: 70vh; min-height: 480px; }
                .hs-content { padding: 0 24px; bottom: 72px; }
                .hs-title { font-size: clamp(1.7rem, 7vw, 2.8rem); }
                .hs-sub { font-size: 14px; }
                .hs-slide-num { display: none; }
                .hs-nav { width: 44px; height: 44px; font-size: 18px; }
                .hs-prev { left: 16px; }
                .hs-next { right: 16px; }
                .hs-dots { left: 24px; bottom: 26px; }
                .hs-scroll-cue { display: none; }
            }
            @media (max-width: 575.98px) {
                .hs-wrap { height: 65vh; min-height: 420px; }
                .hs-content { padding: 0 18px; bottom: 60px; max-width: 100%; }
                .hs-actions { flex-direction: column; gap: 10px; }
                .hs-btn-play, .hs-btn-ghost { width: 100%; justify-content: center; }
            }
        

/* ══════════════════════════════════════ */


            /* ── tt10-desc ── */
            .tt10-desc { font-size: 0.78rem; color: var(--text-muted); margin: 4px 0 0; line-height: 1.4; }

            /* ══════════════════════════════════════════
               TAMIL TOP 10
            ══════════════════════════════════════════ */
            .tt10-section {
                padding: 90px 0;
                background: var(--bg);
                position: relative;
                overflow: hidden;
            }
            .tt10-bg-glow {
                position: absolute; border-radius: 50%; pointer-events: none;
                filter: blur(80px); opacity: 0.5;
            }
            .tt10-glow-1 {
                width: 600px; height: 600px;
                background: radial-gradient(circle, rgba(204,0,0,0.07) 0%, transparent 70%);
                top: -150px; right: -100px;
            }
            .tt10-glow-2 {
                width: 500px; height: 500px;
                background: radial-gradient(circle, rgba(226,183,20,0.05) 0%, transparent 70%);
                bottom: -100px; left: -80px;
            }

            /* ── Card base ── */
            .tt10-card {
                position: relative;
                background: var(--surface);
                border-radius: 20px;
                overflow: hidden;
                border: 1.5px solid var(--border2);
                box-shadow: 0 4px 24px rgba(0,0,0,0.06);
                transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
                height: 100%;
                display: flex;
                flex-direction: column;
            }
            .tt10-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 56px rgba(204,0,0,0.13);
                border-color: var(--red-border);
            }

            /* ── Rank badge (top-left corner) ── */
            .tt10-rank-badge {
                position: absolute;
                top: 0; left: 0; z-index: 10;
                display: flex; align-items: center; gap: 4px;
                padding: 8px 14px 8px 12px;
                border-radius: 0 0 16px 0;
                background: var(--red);
                color: #fff;
                box-shadow: 0 4px 16px rgba(204,0,0,0.4);
            }
            .tt10-rank--silver { background: linear-gradient(135deg, #8c8c8c, #c0c0c0); box-shadow: 0 4px 16px rgba(192,192,192,0.4); }
            .tt10-rank--bronze { background: linear-gradient(135deg, #a05a2c, #cd7f32); box-shadow: 0 4px 16px rgba(205,127,50,0.4); }
            .tt10-rank--std    { background: #111111; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
            .tt10-rank-num     { font-size: 18px; font-weight: 900; line-height: 1; }
            .tt10-rank-icon    { font-size: 14px; }

            /* ── Thumbnail ── */
            .tt10-thumb-wrap {
                position: relative;
                width: 100%;
                aspect-ratio: 16 / 9;
                overflow: hidden;
                background: #0c0c1a;
                flex-shrink: 0;
            }
            .tt10-thumb {
                width: 100%; height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 0.5s ease;
            }
            .tt10-card:hover .tt10-thumb { transform: scale(1.07); }

            /* Hover overlay with YouTube play button */
            .tt10-thumb-overlay {
                position: absolute; inset: 0;
                background: rgba(0,0,0,0.45);
                display: flex; align-items: center; justify-content: center;
                opacity: 0;
                transition: opacity 0.3s;
            }
            .tt10-card:hover .tt10-thumb-overlay { opacity: 1; }
            .tt10-yt-btn {
                width: 60px; height: 60px; border-radius: 50%;
                background: rgba(255,0,0,0.92);
                display: flex; align-items: center; justify-content: center;
                color: #fff; font-size: 26px;
                text-decoration: none;
                transform: scale(0.8);
                transition: transform 0.25s, background 0.2s;
                box-shadow: 0 4px 24px rgba(255,0,0,0.6);
            }
            .tt10-card:hover .tt10-yt-btn { transform: scale(1); }
            .tt10-yt-btn:hover { background: #cc0000; color: #fff; }

            /* Trending / trend badges */
            .tt10-trending-badge {
                position: absolute; bottom: 10px; right: 10px;
                background: rgba(255,80,0,0.88);
                color: #fff; font-size: 10px; font-weight: 700;
                letter-spacing: 0.5px; padding: 3px 10px; border-radius: 100px;
                display: flex; align-items: center; gap: 4px;
                backdrop-filter: blur(4px);
            }
            .tt10-trend-up {
                position: absolute; bottom: 10px; right: 10px;
                background: rgba(34,197,94,0.88);
                color: #fff; font-size: 10px; font-weight: 700;
                padding: 3px 10px; border-radius: 100px;
                display: flex; align-items: center; gap: 3px;
            }
            .tt10-trend-down {
                position: absolute; bottom: 10px; right: 10px;
                background: rgba(239,68,68,0.88);
                color: #fff; font-size: 10px; font-weight: 700;
                padding: 3px 10px; border-radius: 100px;
                display: flex; align-items: center; gap: 3px;
            }

            /* Gold/silver/bronze shimmer top border */
            .tt10-card--gold   { border-top: 3px solid #e2b714; }
            .tt10-card--silver { border-top: 3px solid #c0c0c0; }
            .tt10-card--bronze { border-top: 3px solid #cd7f32; }
            .tt10-card--std    { border-top: 3px solid var(--red); }

            /* ── Info panel ── */
            .tt10-info {
                padding: 18px 18px 16px;
                display: flex; flex-direction: column; gap: 12px;
                flex: 1;
            }
            .tt10-info--compact { gap: 10px; padding: 14px 16px 14px; }

            .tt10-song-header {
                display: flex; align-items: flex-start;
                justify-content: space-between; gap: 10px;
            }
            .tt10-song-title {
                font-size: 1.05rem; font-weight: 800;
                color: var(--text); letter-spacing: -0.2px; margin: 0;
                line-height: 1.25; flex: 1;
            }
            .tt10-info--compact .tt10-song-title { font-size: 0.95rem; }

            /* Week movement badge */
            .tt10-week-badge {
                flex-shrink: 0; font-size: 10px; font-weight: 700;
                padding: 2px 8px; border-radius: 100px;
                display: inline-flex; align-items: center; gap: 1px;
                white-space: nowrap;
            }
            .new-badge { background: rgba(204,0,0,0.1); color: var(--red); border: 1px solid var(--red-border); }
            .up-badge  { background: rgba(34,197,94,0.1); color: #16a34a; border: 1px solid rgba(34,197,94,0.25); }
            .down-badge{ background: rgba(239,68,68,0.1); color: #dc2626; border: 1px solid rgba(239,68,68,0.2); }

            /* Meta rows */
            .tt10-meta-rows {
                display: flex; flex-direction: column; gap: 7px;
            }
            .tt10-meta-item {
                display: flex; align-items: baseline; gap: 7px;
                font-size: 12px;
            }
            .tt10-meta-item i {
                color: var(--red); font-size: 12px; flex-shrink: 0; margin-top: 1px;
            }
            .tt10-meta-item span {
                color: var(--text-muted); min-width: 60px; font-size: 11px;
            }
            .tt10-meta-item strong {
                color: var(--text-mid); font-weight: 600;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            }

            /* YouTube link button */
            .tt10-yt-link {
                display: inline-flex; align-items: center; gap: 7px;
                background: rgba(255,0,0,0.07);
                border: 1px solid rgba(255,0,0,0.18);
                color: #cc0000; font-size: 12px; font-weight: 700;
                padding: 8px 14px; border-radius: 8px;
                text-decoration: none; width: 100%; justify-content: center;
                transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
                margin-top: auto;
            }
            .tt10-yt-link:hover {
                background: #ff0000; color: #fff;
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(255,0,0,0.3);
            }
            .tt10-yt-link i { font-size: 15px; }

            /* Sound-bar animation (top-3 cards only) */
            .tt10-actions {
                display: flex; align-items: center;
                justify-content: space-between; gap: 12px; margin-top: auto;
            }
            .tt10-actions .tt10-yt-link { flex: 1; margin-top: 0; }
            .tt10-bars {
                display: flex; align-items: flex-end; gap: 3px;
                height: 24px; flex-shrink: 0;
            }
            .tt10-bars span {
                display: block; width: 4px; border-radius: 2px;
                background: var(--red);
                animation: tt10BarAnim 0.8s ease-in-out infinite alternate;
            }
            .tt10-bars span:nth-child(1){ height: 8px;  animation-delay: 0s; }
            .tt10-bars span:nth-child(2){ height: 18px; animation-delay: 0.15s; }
            .tt10-bars span:nth-child(3){ height: 12px; animation-delay: 0.3s; }
            .tt10-bars span:nth-child(4){ height: 22px; animation-delay: 0.45s; }
            .tt10-bars span:nth-child(5){ height: 10px; animation-delay: 0.6s; }
            @keyframes tt10BarAnim {
                from { transform: scaleY(1);   opacity: 0.7; }
                to   { transform: scaleY(0.3); opacity: 1; }
            }

            /* Responsive */
            @media (max-width: 575.98px) {
                .tt10-section { padding: 70px 0; }
                .tt10-song-title { font-size: 0.9rem; }
            }
        

/* ══════════════════════════════════════ */


            /* ═══════════════════════════════════════════
               CINEMA CORNER
            ═══════════════════════════════════════════ */
            .cc-section {
                padding: 100px 0 80px;
                background: #0c0c1a;
                position: relative;
                overflow: hidden;
            }
            .cc-bg-gradient {
                position: absolute; inset: 0; pointer-events: none;
                background:
                    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(204,0,0,0.08) 0%, transparent 60%),
                    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(226,183,20,0.06) 0%, transparent 55%);
            }
            .cc-bg-grain {
                position: absolute; inset: 0; pointer-events: none; opacity: 0.03;
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
                background-size: 180px;
            }

            /* Section header overrides for dark bg */
            .cc-section .section-title { color: #fff; }
            .cc-section .section-sub   { color: rgba(255,255,255,0.45); }

            /* ── Carousel outer ── */
            .cc-carousel-outer {
                position: relative;
                overflow: hidden;
                border-radius: 24px;
                box-shadow: 0 40px 100px rgba(0,0,0,0.6);
                background: #111;
            }

            /* ── Track & slides ── */
            .cc-track {
                display: flex;
                transition: transform 0.65s cubic-bezier(0.77, 0, 0.175, 1);
                will-change: transform;
            }
            .cc-slide {
                min-width: 100%;
                flex-shrink: 0;
                position: relative;
            }

            /* Full-bleed 16:9 slide — image fills the whole slide */
            .cc-slide-inner {
                position: relative;
                width: 100%;
                aspect-ratio: 16/9;          /* matches 1280×720 exactly */
                overflow: hidden;
                background: #0c0c1a;
            }

            /* Full image — no cropping */
            .cc-poster-col {
                position: absolute;
                inset: 0;
                z-index: 1;
            }
            .cc-poster-wrap {
                width: 100%;
                height: 100%;
            }
            .cc-poster-img {
                width: 100%;
                height: 100%;
                object-fit: contain;         /* show complete image, no cropping */
                object-position: center center;
                display: block;
                transition: transform 0.8s ease;
            }
            .cc-slide:hover .cc-poster-img { transform: scale(1.02); }

            /* Gradient overlay — bottom to top, for text readability */
            .cc-poster-shine {
                position: absolute; inset: 0; pointer-events: none; z-index: 2;
                background:
                    linear-gradient(0deg,
                        rgba(10,10,22,0.97) 0%,
                        rgba(10,10,22,0.82) 30%,
                        rgba(10,10,22,0.35) 60%,
                        rgba(10,10,22,0.08) 85%,
                        transparent 100%);
            }

            /* Category badge — top left, above overlay */
            .cc-category-badge {
                position: absolute; top: 16px; left: 16px; z-index: 4;
                display: inline-flex; align-items: center; gap: 6px;
                font-size: 10px; font-weight: 700;
                letter-spacing: 1.5px; text-transform: uppercase;
                padding: 5px 12px; border-radius: 100px;
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                background: rgba(204,0,0,0.85);
                color: #fff;
            }
            .cc-badge--war     { background: rgba(26,115,232,0.85); }
            .cc-badge--fantasy { background: rgba(139,92,246,0.85); }
            .cc-badge--crime   { background: rgba(17,24,39,0.9); border: 1px solid rgba(255,255,255,0.18); }

            /* Hidden — no longer needed in full-bleed layout */
            .cc-poster-reflection { display: none !important; }

            /* ── Info overlay — sits at the bottom of the image ── */
            .cc-info-col {
                position: absolute;
                bottom: 0; left: 0; right: 0;
                z-index: 3;
                pointer-events: none;         /* let pointer pass through empty area */
            }
            .cc-info-col::before { display: none; }
            .cc-info-inner {
                padding: 28px 40px 64px;
                pointer-events: auto;
                display: flex;
                align-items: flex-end;
                gap: 40px;
            }

            /* Meta top row */
            .cc-meta-top {
                display: flex; align-items: center; gap: 10px;
                flex-wrap: wrap; margin-bottom: 10px;
            }
            .cc-year-tag {
                font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
                color: rgba(255,255,255,0.55);
                background: rgba(255,255,255,0.1);
                padding: 3px 10px; border-radius: 100px;
            }
            .cc-rating-tag {
                display: inline-flex; align-items: center; gap: 5px;
                font-size: 11px; font-weight: 700;
                color: #e2b714;
                background: rgba(226,183,20,0.15);
                border: 1px solid rgba(226,183,20,0.3);
                padding: 3px 10px; border-radius: 100px;
            }
            .cc-rating-tag i { font-size: 10px; }
            .cc-lang-tag {
                display: inline-flex; align-items: center; gap: 5px;
                font-size: 11px; font-weight: 600;
                color: rgba(255,255,255,0.45);
                background: rgba(255,255,255,0.08);
                padding: 3px 10px; border-radius: 100px;
            }

            /* Title */
            .cc-title {
                font-size: clamp(1.5rem, 3vw, 2.4rem);
                font-weight: 900;
                color: #fff;
                letter-spacing: -0.5px;
                line-height: 1.05;
                margin-bottom: 10px;
                text-shadow: 0 2px 12px rgba(0,0,0,0.5);
            }

            /* Genres */
            .cc-genres {
                display: flex; gap: 8px; flex-wrap: wrap;
                margin-bottom: 12px;
            }
            .cc-genres span {
                font-size: 10px; font-weight: 600;
                color: rgba(255,255,255,0.6);
                border: 1px solid rgba(255,255,255,0.15);
                border-radius: 100px;
                padding: 2px 10px;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                background: rgba(255,255,255,0.06);
                backdrop-filter: blur(4px);
            }

            /* Synopsis */
            .cc-synopsis {
                font-size: 13px;
                color: rgba(255,255,255,0.65);
                line-height: 1.7;
                margin-bottom: 0;
                max-width: 480px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-shadow: 0 1px 6px rgba(0,0,0,0.4);
            }

            /* Details grid */
            .cc-details-grid {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-bottom: 20px;
                padding: 16px;
                background: rgba(0,0,0,0.35);
                border: 1px solid rgba(255,255,255,0.1);
                border-radius: 14px;
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                min-width: 240px;
            }
            .cc-detail-item {
                display: flex; align-items: flex-start; gap: 10px;
            }
            .cc-detail-item i {
                color: var(--red); font-size: 14px;
                flex-shrink: 0; margin-top: 2px;
            }
            .cc-detail-item span {
                display: block; font-size: 9px; font-weight: 600;
                color: rgba(255,255,255,0.35);
                text-transform: uppercase; letter-spacing: 1px;
                margin-bottom: 2px;
            }
            .cc-detail-item strong {
                display: block; font-size: 12px; font-weight: 700;
                color: rgba(255,255,255,0.9); line-height: 1.4;
            }

            /* Actions */
            .cc-actions { display: flex; align-items: center; gap: 10px; }
            .cc-btn-primary {
                display: inline-flex; align-items: center;
                background: var(--red);
                color: #fff; font-size: 13px; font-weight: 700;
                padding: 11px 22px; border-radius: 10px;
                text-decoration: none; letter-spacing: 0.3px;
                transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
                box-shadow: 0 6px 24px rgba(204,0,0,0.45);
                white-space: nowrap;
            }
            .cc-btn-primary:hover {
                background: var(--red-dark); color: #fff;
                transform: translateY(-3px);
                box-shadow: 0 12px 36px rgba(204,0,0,0.55);
            }
            .cc-btn-ghost {
                display: inline-flex; align-items: center; justify-content: center;
                width: 42px; height: 42px; border-radius: 10px;
                background: rgba(255,255,255,0.1);
                border: 1px solid rgba(255,255,255,0.15);
                color: rgba(255,255,255,0.7);
                font-size: 15px; text-decoration: none;
                transition: background 0.2s, color 0.2s, transform 0.2s;
                backdrop-filter: blur(6px);
            }
            .cc-btn-ghost:hover {
                background: rgba(204,0,0,0.2);
                border-color: rgba(204,0,0,0.4);
                color: var(--red);
                transform: translateY(-3px);
            }

            /* ── Nav buttons ── */
            .cc-nav-btn {
                position: absolute; top: 50%; transform: translateY(-50%);
                width: 52px; height: 52px; border-radius: 50%;
                background: rgba(255,255,255,0.1);
                border: 1.5px solid rgba(255,255,255,0.18);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                color: #fff; font-size: 20px;
                display: flex; align-items: center; justify-content: center;
                cursor: pointer; z-index: 10;
                transition: background 0.2s, transform 0.2s, border-color 0.2s;
            }
            .cc-nav-btn:hover {
                background: var(--red);
                border-color: var(--red);
                transform: translateY(-50%) scale(1.08);
            }
            .cc-nav-prev { left: 20px; }
            .cc-nav-next { right: 20px; }
            .cc-nav-btn:disabled { opacity: 0.3; pointer-events: none; }

            /* ── Dots ── */
            .cc-dots {
                position: absolute; bottom: 22px; left: 50%;
                transform: translateX(-50%);
                display: flex; align-items: center; gap: 8px; z-index: 10;
            }
            .cc-dot {
                width: 8px; height: 8px; border-radius: 100px;
                background: rgba(255,255,255,0.25);
                border: none; cursor: pointer; padding: 0;
                transition: background 0.3s, width 0.3s;
            }
            .cc-dot.active {
                background: var(--red);
                width: 28px;
            }

            /* ── Counter ── */
            .cc-counter {
                position: absolute; bottom: 18px; right: 24px;
                display: flex; align-items: center; gap: 8px; z-index: 10;
                font-size: 12px; font-weight: 700;
                color: rgba(255,255,255,0.4);
            }
            #ccCurrent { color: #fff; font-size: 18px; }
            .cc-counter-sep {
                width: 28px; height: 1px;
                background: rgba(255,255,255,0.2);
                display: block;
            }

            /* ── Progress bar ── */
            .cc-progress-bar {
                position: absolute; bottom: 0; left: 0; right: 0;
                height: 3px; background: rgba(255,255,255,0.07); z-index: 10;
            }
            .cc-progress-fill {
                height: 100%;
                background: linear-gradient(90deg, var(--red), #ff3333);
                transition: width 0.1s linear;
                width: 0%;
            }

            /* Two-column overlay info layout */
            .cc-info-inner {
                padding: 28px 40px 64px;
                pointer-events: auto;
                display: flex;
                align-items: flex-end;
                gap: 32px;
                width: 100%;
            }
            .cc-info-left  { flex: 1; min-width: 0; }
            .cc-info-right { flex-shrink: 0; width: 260px; }

            /* ── Responsive ── */
            @media (max-width: 1199.98px) {
                .cc-info-right { width: 220px; }
            }
            @media (max-width: 991.98px) {
                .cc-info-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 28px 60px; }
                .cc-info-right { width: 100%; }
                .cc-details-grid { flex-direction: row; }
            }
            @media (max-width: 767.98px) {
                .cc-info-inner { padding: 18px 20px 58px; gap: 12px; }
                .cc-title { font-size: 1.4rem; }
                .cc-synopsis { -webkit-line-clamp: 2; }
                .cc-nav-prev { left: 10px; }
                .cc-nav-next { right: 10px; }
                .cc-details-grid { flex-direction: column; }
            }
            @media (max-width: 575.98px) {
                .cc-section { padding: 70px 0 60px; }
                .cc-info-inner { padding: 14px 14px 56px; gap: 10px; }
                .cc-title { font-size: 1.2rem; }
                .cc-synopsis { display: none; }
                .cc-info-right { display: none; }
                .cc-nav-btn { width: 38px; height: 38px; font-size: 15px; }
                .cc-counter { display: none; }
                .cc-meta-top { gap: 6px; }
            }
        

/* ══════════════════════════════════════ */


            /* ══════════════════════════════════════════
               EVENTS SECTION
            ══════════════════════════════════════════ */
            .ev-section {
                padding: 90px 0;
                background: #ffffff;
                position: relative;
                overflow: hidden;
            }
            .ev-bg-shape {
                position: absolute; border-radius: 50%; pointer-events: none;
            }
            .ev-shape-1 {
                width: 700px; height: 700px;
                background: radial-gradient(circle, rgba(204,0,0,0.04) 0%, transparent 65%);
                top: -200px; left: -150px;
            }
            .ev-shape-2 {
                width: 600px; height: 600px;
                background: radial-gradient(circle, rgba(24,24,46,0.03) 0%, transparent 65%);
                bottom: -150px; right: -100px;
            }

            /* ── Filter row ── */
            .ev-filter-row {
                display: flex; align-items: center; gap: 10px;
                flex-wrap: wrap; justify-content: center;
                margin-bottom: 40px;
            }
            .ev-filter-btn {
                padding: 8px 22px; border-radius: 100px;
                border: 1.5px solid var(--border2);
                background: var(--surface2);
                color: var(--text-mid); font-size: 13px; font-weight: 600;
                cursor: pointer; transition: all 0.22s; letter-spacing: 0.3px;
            }
            .ev-filter-btn:hover { border-color: var(--red-border); color: var(--red); background: var(--red-soft); }
            .ev-filter-btn.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 4px 16px rgba(204,0,0,0.3); }

            /* ── FEATURED card ── */
            .ev-featured {
                display: flex; border-radius: 24px; overflow: hidden;
                background: var(--surface);
                border: 1.5px solid var(--border2);
                box-shadow: 0 8px 48px rgba(0,0,0,0.08);
                margin-bottom: 32px;
                transition: box-shadow 0.3s, border-color 0.3s;
            }
            .ev-featured:hover { box-shadow: 0 20px 60px rgba(204,0,0,0.12); border-color: var(--red-border); }

            .ev-featured-thumb {
                flex: 0 0 480px; position: relative; overflow: hidden;
                background: #0c0c1a; min-height: 360px;
            }
            .ev-featured-thumb img {
                width: 100%; height: 100%;
                object-fit: cover; display: block;
                transition: transform 0.6s ease;
            }
            .ev-featured:hover .ev-featured-thumb img { transform: scale(1.05); }
            .ev-featured-overlay {
                position: absolute; inset: 0;
                background: linear-gradient(90deg, transparent 60%, rgba(255,255,255,0.04) 100%);
                pointer-events: none;
            }

            .ev-featured-type-badge {
                position: absolute; top: 18px; left: 18px;
                display: inline-flex; align-items: center; gap: 6px;
                background: rgba(204,0,0,0.88); color: #fff;
                font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
                text-transform: uppercase; padding: 5px 14px; border-radius: 100px;
                backdrop-filter: blur(6px); z-index: 2;
            }

            /* Date ribbon on thumbnail */
            .ev-featured-date-ribbon {
                position: absolute; bottom: 0; left: 0;
                background: var(--red);
                color: #fff; text-align: center;
                padding: 14px 20px; z-index: 2;
                border-radius: 0 16px 0 0;
            }
            .ev-ribbon-day   { display: block; font-size: 2.2rem; font-weight: 900; line-height: 1; }
            .ev-ribbon-month { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: 0.85; }
            .ev-ribbon-year  { display: block; font-size: 10px; opacity: 0.65; margin-top: 2px; letter-spacing: 1px; }

            /* Featured info panel */
            .ev-featured-info {
                flex: 1; padding: 40px 44px;
                display: flex; flex-direction: column; justify-content: center; gap: 18px;
            }
            .ev-feat-meta { display: flex; flex-wrap: wrap; gap: 10px; }
            .ev-meta-chip {
                display: inline-flex; align-items: center; gap: 6px;
                background: var(--bg); border: 1px solid var(--border2);
                color: var(--text-mid); font-size: 12px; font-weight: 600;
                padding: 5px 12px; border-radius: 100px;
            }
            .ev-meta-chip i { color: var(--red); font-size: 12px; }
            .ev-meta-chip--loc { background: var(--red-soft); border-color: var(--red-border); color: var(--red); }

            .ev-feat-title {
                font-size: clamp(1.5rem, 2.5vw, 2.2rem);
                font-weight: 900; color: var(--text); letter-spacing: -0.3px;
                line-height: 1.15; margin: 0;
            }
            .ev-feat-desc {
                font-size: 14px; color: var(--text-muted);
                line-height: 1.75; margin: 0; max-width: 540px;
            }

            /* Highlights row */
            .ev-feat-highlights {
                display: flex; gap: 20px; flex-wrap: wrap;
                padding: 16px 20px;
                background: var(--bg); border-radius: 14px;
                border: 1px solid var(--border2);
            }
            .ev-highlight-item {
                display: flex; align-items: center; gap: 8px;
                font-size: 12px; font-weight: 600; color: var(--text-mid);
            }
            .ev-highlight-item i { color: var(--red); font-size: 14px; }

            /* Featured actions */
            .ev-feat-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
            .ev-btn-primary {
                display: inline-flex; align-items: center;
                background: var(--red); color: #fff;
                font-size: 14px; font-weight: 700;
                padding: 13px 28px; border-radius: 12px;
                text-decoration: none; letter-spacing: 0.3px;
                transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
                box-shadow: 0 6px 24px rgba(204,0,0,0.35);
            }
            .ev-btn-primary:hover {
                background: var(--red-dark); color: #fff;
                transform: translateY(-3px); box-shadow: 0 12px 36px rgba(204,0,0,0.45);
            }
            .ev-btn-ghost {
                display: inline-flex; align-items: center; gap: 6px;
                background: var(--surface2); border: 1.5px solid var(--border2);
                color: var(--text-mid); font-size: 13px; font-weight: 600;
                padding: 11px 18px; border-radius: 12px;
                text-decoration: none;
                transition: all 0.22s;
            }
            .ev-btn-ghost:hover { border-color: var(--red-border); color: var(--red); background: var(--red-soft); }

            /* ── Event grid cards ── */
            .ev-card {
                background: var(--surface);
                border: 1.5px solid var(--border2);
                border-radius: 20px; overflow: hidden;
                box-shadow: 0 4px 20px rgba(0,0,0,0.05);
                transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
                height: 100%; display: flex; flex-direction: column;
            }
            .ev-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 56px rgba(204,0,0,0.12);
                border-color: var(--red-border);
            }

            /* Card thumbnail */
            .ev-card-thumb {
                position: relative; width: 100%;
                aspect-ratio: 16/9; overflow: hidden;
                background: #0c0c1a; flex-shrink: 0;
            }
            .ev-card-thumb img {
                width: 100%; height: 100%;
                object-fit: cover; display: block;
                transition: transform 0.5s ease;
            }
            .ev-card:hover .ev-card-thumb img { transform: scale(1.07); }
            .ev-card-overlay {
                position: absolute; inset: 0; pointer-events: none;
                background: linear-gradient(0deg, rgba(0,0,0,0.35) 0%, transparent 55%);
            }

            /* Type badge */
            .ev-card-type {
                position: absolute; top: 12px; left: 12px;
                display: inline-flex; align-items: center; gap: 5px;
                background: rgba(204,0,0,0.85);
                color: #fff; font-size: 9px; font-weight: 700;
                letter-spacing: 1.5px; text-transform: uppercase;
                padding: 4px 10px; border-radius: 100px;
                backdrop-filter: blur(6px); z-index: 2;
            }
            .ev-type--concert { background: rgba(139,92,246,0.88); }
            .ev-type--promo   { background: rgba(234,179,8,0.9); color: #1a1000; }

            /* Date badge on thumb */
            .ev-card-date-badge {
                position: absolute; bottom: 12px; right: 12px; z-index: 2;
                background: var(--red); color: #fff;
                text-align: center; padding: 6px 12px; border-radius: 10px;
                line-height: 1.2;
            }
            .ev-card-date-badge strong { display: block; font-size: 1.3rem; font-weight: 900; }
            .ev-card-date-badge span   { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.85; }

            /* Card body */
            .ev-card-body {
                padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1;
            }
            .ev-card-meta {
                display: flex; flex-direction: column; gap: 4px;
            }
            .ev-card-meta span {
                display: flex; align-items: center; gap: 6px;
                font-size: 11px; font-weight: 600; color: var(--text-muted);
            }
            .ev-card-meta i { color: var(--red); font-size: 11px; flex-shrink: 0; }

            .ev-card-title {
                font-size: 1.05rem; font-weight: 800; color: var(--text);
                letter-spacing: -0.2px; line-height: 1.25; margin: 0;
            }
            .ev-card-desc {
                font-size: 13px; color: var(--text-muted);
                line-height: 1.65; margin: 0;
                display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
                flex: 1;
            }

            /* Card footer */
            .ev-card-footer {
                display: flex; align-items: center;
                justify-content: space-between; gap: 10px;
                margin-top: auto; padding-top: 12px;
                border-top: 1px solid var(--border);
            }
            .ev-free-badge {
                display: inline-flex; align-items: center; gap: 5px;
                background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25);
                color: #16a34a; font-size: 11px; font-weight: 700;
                padding: 3px 10px; border-radius: 100px;
            }
            .ev-ticket-badge {
                display: inline-flex; align-items: center; gap: 5px;
                background: rgba(204,0,0,0.08); border: 1px solid var(--red-border);
                color: var(--red); font-size: 11px; font-weight: 700;
                padding: 3px 10px; border-radius: 100px;
            }

            /* Check Now button */
            .ev-check-btn {
                display: inline-flex; align-items: center; gap: 6px;
                background: var(--red); color: #fff;
                font-size: 12px; font-weight: 700;
                padding: 8px 16px; border-radius: 8px;
                text-decoration: none; white-space: nowrap;
                transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
                box-shadow: 0 4px 12px rgba(204,0,0,0.25);
            }
            .ev-check-btn:hover {
                background: var(--red-dark); color: #fff;
                transform: translateY(-2px); box-shadow: 0 8px 20px rgba(204,0,0,0.35);
            }
            .ev-check-btn i { font-size: 13px; transition: transform 0.2s; }
            .ev-check-btn:hover i { transform: translateX(3px); }

            /* Filter hidden state */
            .ev-item.ev-hidden { display: none; }
            .ev-featured.ev-hidden { display: none; }

            /* ── Responsive ── */
            @media (max-width: 1199.98px) {
                .ev-featured-thumb { flex: 0 0 400px; }
                .ev-featured-info  { padding: 32px 36px; }
            }
            @media (max-width: 991.98px) {
                .ev-featured { flex-direction: column; }
                .ev-featured-thumb { flex: none; min-height: 0; aspect-ratio: 16/9; width: 100%; }
                .ev-featured-info  { padding: 28px 28px 32px; gap: 14px; }
                .ev-feat-highlights { gap: 14px; }
            }
            @media (max-width: 767.98px) {
                .ev-featured-info { padding: 22px 20px 26px; }
                .ev-feat-title { font-size: 1.4rem; }
            }
            @media (max-width: 575.98px) {
                .ev-section { padding: 70px 0; }
                .ev-feat-highlights { display: none; }
                .ev-feat-desc { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
            }
        

/* ══════════════════════════════════════ */


            /* ══════════════════════════════════════
               MOBILE APP SECTION
            ══════════════════════════════════════ */
            .app-section {
                padding: 100px 0;
                background: linear-gradient(135deg, #111111 0%, #1e0a0a 55%, #111111 100%);
                position: relative;
                overflow: hidden;
            }

            /* Decorative blobs */
            .app-blob {
                position: absolute;
                border-radius: 50%;
                pointer-events: none;
                filter: blur(60px);
            }
            .app-blob-1 {
                width: 500px; height: 500px;
                background: rgba(204,0,0,0.18);
                top: -100px; left: -100px;
                animation: blobFloat 8s ease-in-out infinite alternate;
            }
            .app-blob-2 {
                width: 400px; height: 400px;
                background: rgba(204,0,0,0.12);
                bottom: -80px; right: -80px;
                animation: blobFloat 10s ease-in-out infinite alternate-reverse;
            }
            .app-blob-3 {
                width: 300px; height: 300px;
                background: rgba(255,255,255,0.03);
                top: 50%; left: 50%;
                transform: translate(-50%,-50%);
                animation: blobFloat 12s ease-in-out infinite alternate;
            }
            @keyframes blobFloat {
                from { transform: translate(0,0) scale(1); }
                to   { transform: translate(20px, 20px) scale(1.08); }
            }

            /* ── Content ── */
            .app-content { color: #fff; }
            .app-heading {
                font-size: clamp(1.9rem, 4vw, 3rem);
                font-weight: 900;
                line-height: 1.1;
                letter-spacing: -0.5px;
                color: #fff;
                margin-bottom: 16px;
            }
            .app-heading span { color: var(--red); }
            .app-subtext {
                font-size: 15px;
                color: rgba(255,255,255,0.65);
                line-height: 1.75;
                margin-bottom: 32px;
                max-width: 480px;
            }

            /* Feature items */
            .app-features {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
                margin-bottom: 36px;
            }
            .app-feature-item {
                display: flex;
                align-items: flex-start;
                gap: 12px;
                background: rgba(255,255,255,0.05);
                border: 1px solid rgba(255,255,255,0.09);
                border-radius: 14px;
                padding: 14px;
                transition: background 0.25s, border-color 0.25s, transform 0.25s;
            }
            .app-feature-item:hover {
                background: rgba(204,0,0,0.12);
                border-color: rgba(204,0,0,0.3);
                transform: translateY(-3px);
            }
            .app-feature-icon {
                width: 36px; height: 36px;
                border-radius: 10px;
                background: rgba(204,0,0,0.2);
                border: 1px solid rgba(204,0,0,0.3);
                display: flex; align-items: center; justify-content: center;
                color: var(--red);
                font-size: 16px;
                flex-shrink: 0;
            }
            .app-feature-item strong {
                display: block;
                font-size: 13px;
                font-weight: 700;
                color: #fff;
                margin-bottom: 3px;
            }
            .app-feature-item span {
                font-size: 11px;
                color: rgba(255,255,255,0.5);
                line-height: 1.5;
            }

            /* Download buttons */
            .app-download-row {
                display: flex;
                gap: 14px;
                flex-wrap: wrap;
                margin-bottom: 24px;
            }
            .app-store-btn {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 13px 22px;
                border-radius: 14px;
                text-decoration: none;
                transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
                flex: 1;
                min-width: 170px;
            }
            .app-store-btn--google {
                background: #fff;
                color: #111111;
                border: none;
                box-shadow: 0 6px 24px rgba(0,0,0,0.2);
            }
            .app-store-btn--google:hover {
                background: #f0f0f0;
                transform: translateY(-4px);
                box-shadow: 0 14px 40px rgba(0,0,0,0.3);
                color: #111111;
            }
            .app-store-btn--apple {
                background: rgba(255,255,255,0.1);
                color: #fff;
                border: 1.5px solid rgba(255,255,255,0.2);
                backdrop-filter: blur(8px);
            }
            .app-store-btn--apple:hover {
                background: rgba(255,255,255,0.18);
                border-color: rgba(255,255,255,0.4);
                transform: translateY(-4px);
                box-shadow: 0 14px 40px rgba(0,0,0,0.25);
                color: #fff;
            }
            .app-store-btn-icon {
                font-size: 26px;
                line-height: 1;
                flex-shrink: 0;
            }
            .app-store-btn--google .app-store-btn-icon { color: #111111; }
            .app-store-btn--apple .app-store-btn-icon { color: #fff; }
            .app-store-btn-text span {
                display: block;
                font-size: 10px;
                font-weight: 400;
                opacity: 0.7;
                letter-spacing: 0.5px;
                text-transform: uppercase;
            }
            .app-store-btn-text strong {
                display: block;
                font-size: 16px;
                font-weight: 800;
                letter-spacing: -0.3px;
                line-height: 1.2;
            }

            /* Ratings */
            .app-rating-row {
                display: flex;
                align-items: center;
                gap: 16px;
                flex-wrap: wrap;
            }
            .app-rating-item {
                display: flex;
                align-items: center;
                gap: 7px;
                font-size: 12px;
                color: rgba(255,255,255,0.55);
            }
            .app-stars { display: flex; gap: 2px; }
            .app-stars i { color: #fbbf24; font-size: 12px; }
            .app-rating-divider {
                width: 1px; height: 16px;
                background: rgba(255,255,255,0.15);
            }

            /* ── Phone Mockup ── */
            .app-mockup-wrap {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 40px 20px;
            }
            .app-mockup-glow {
                position: absolute;
                width: 340px; height: 340px;
                background: radial-gradient(circle, rgba(204,0,0,0.35) 0%, transparent 70%);
                border-radius: 50%;
                pointer-events: none;
                animation: glowPulse 3s ease-in-out infinite alternate;
            }
            @keyframes glowPulse {
                from { transform: scale(0.9); opacity: 0.7; }
                to   { transform: scale(1.1); opacity: 1; }
            }

            .app-phone-frame {
                width: 270px;
                background: #0e0e1a;
                border-radius: 44px;
                padding: 14px 12px 10px;
                box-shadow:
                    0 0 0 2px rgba(255,255,255,0.08),
                    0 0 0 8px rgba(255,255,255,0.03),
                    0 40px 80px rgba(0,0,0,0.6),
                    inset 0 0 0 1px rgba(255,255,255,0.05);
                position: relative;
                z-index: 2;
                animation: phoneFloat 4s ease-in-out infinite alternate;
            }
            @keyframes phoneFloat {
                from { transform: translateY(0px); }
                to   { transform: translateY(-12px); }
            }
            .app-phone-notch {
                width: 90px; height: 26px;
                background: #0e0e1a;
                border-radius: 0 0 18px 18px;
                margin: 0 auto 10px;
                position: relative;
                z-index: 3;
            }
            .app-phone-screen {
                background: linear-gradient(160deg, #111111 0%, #0f0f1e 100%);
                border-radius: 32px;
                overflow: hidden;
                min-height: 480px;
                display: flex;
                flex-direction: column;
            }
            .app-phone-home-bar {
                width: 100px; height: 4px;
                background: rgba(255,255,255,0.2);
                border-radius: 4px;
                margin: 8px auto 0;
            }

            /* Screen contents */
            .app-screen-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 16px 18px 10px;
            }
            .app-screen-logo {
                display: flex; align-items: center; gap: 7px;
                font-size: 13px; font-weight: 700; color: #fff;
            }
            .app-screen-logo strong { color: var(--red); }
            .app-screen-logo-dot {
                width: 8px; height: 8px;
                background: var(--red);
                border-radius: 50%;
                animation: pulseAnim 1.4s ease-in-out infinite;
            }
            .app-screen-live-pill {
                display: flex; align-items: center; gap: 5px;
                background: rgba(204,0,0,0.18);
                border: 1px solid rgba(204,0,0,0.35);
                color: #ff6060;
                font-size: 9px; font-weight: 700;
                letter-spacing: 1.5px;
                padding: 3px 9px; border-radius: 100px;
            }
            .app-screen-pulse {
                width: 6px; height: 6px;
                background: var(--red);
                border-radius: 50%;
                display: inline-block;
                animation: pulseAnim 1.2s ease-in-out infinite;
            }

            .app-screen-player {
                padding: 10px 18px 16px;
                display: flex; flex-direction: column; align-items: center; gap: 10px;
                border-bottom: 1px solid rgba(255,255,255,0.06);
            }
            .app-screen-vinyl {
                width: 90px; height: 90px;
                border-radius: 50%;
                background: radial-gradient(circle at 50% 50%, #3a3a3a 18%, #2a2a2a 19%, #333 40%, #222 41%, #2e2e2e 55%, #1e1e1e 56%);
                box-shadow: 0 0 0 4px rgba(204,0,0,0.2), 0 8px 30px rgba(0,0,0,0.5);
                display: flex; align-items: center; justify-content: center;
                animation: aboutSpin 8s linear infinite;
            }
            .app-screen-vinyl-inner {
                width: 28px; height: 28px;
                border-radius: 50%;
                background: var(--red);
                box-shadow: 0 0 0 3px rgba(204,0,0,0.3);
            }
            .app-screen-np { text-align: center; }
            .app-screen-np-label {
                font-size: 8px; font-weight: 700; letter-spacing: 2px;
                color: var(--red); text-transform: uppercase; margin-bottom: 2px;
            }
            .app-screen-np-title {
                font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 2px;
            }
            .app-screen-np-sub {
                font-size: 10px; color: rgba(255,255,255,0.45);
            }
            .app-screen-controls {
                display: flex; align-items: center; gap: 16px;
            }
            .app-screen-ctrl-main {
                width: 44px; height: 44px; border-radius: 50%;
                background: var(--red);
                border: none; color: #fff; font-size: 18px;
                display: flex; align-items: center; justify-content: center;
                box-shadow: 0 4px 16px rgba(204,0,0,0.45);
                cursor: pointer;
            }
            .app-screen-ctrl-sm {
                width: 32px; height: 32px; border-radius: 50%;
                background: rgba(255,255,255,0.08);
                border: none; color: rgba(255,255,255,0.6); font-size: 14px;
                display: flex; align-items: center; justify-content: center;
                cursor: pointer;
            }
            .app-screen-vol {
                width: 100%; display: flex; align-items: center; gap: 8px;
                padding: 0 4px;
            }
            .app-screen-vol i { font-size: 11px; color: rgba(255,255,255,0.35); }
            .app-screen-vol-bar {
                flex: 1; height: 3px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden;
            }
            .app-screen-vol-fill {
                width: 70%; height: 100%; background: var(--red); border-radius: 3px;
            }

            .app-screen-shows {
                padding: 14px 18px;
                flex: 1;
            }
            .app-screen-shows-label {
                font-size: 8px; font-weight: 700; letter-spacing: 2px;
                color: rgba(255,255,255,0.35); text-transform: uppercase; margin-bottom: 10px;
            }
            .app-screen-show-item {
                display: flex; align-items: center; gap: 10px;
                padding: 8px 0;
                border-bottom: 1px solid rgba(255,255,255,0.05);
            }
            .app-screen-show-item:last-child { border: none; }
            .app-screen-show-item strong {
                display: block; font-size: 11px; font-weight: 700; color: #fff; margin-bottom: 1px;
            }
            .app-screen-show-item span {
                font-size: 9px; color: rgba(255,255,255,0.4);
            }
            .app-screen-show-dot {
                width: 8px; height: 8px; border-radius: 50%;
                background: var(--red); flex-shrink: 0;
            }
            .app-screen-show-dot--dim { background: rgba(255,255,255,0.15); }

            .app-screen-nav {
                display: flex;
                border-top: 1px solid rgba(255,255,255,0.06);
                padding: 10px 0 6px;
            }
            .app-screen-nav-item {
                flex: 1; display: flex; flex-direction: column;
                align-items: center; gap: 3px;
                font-size: 7px; color: rgba(255,255,255,0.3);
                cursor: pointer; transition: color 0.2s;
            }
            .app-screen-nav-item i { font-size: 14px; }
            .app-screen-nav-item.active { color: var(--red); }

            /* Floating badges */
            .app-float-badge {
                position: absolute;
                display: flex; align-items: center; gap: 10px;
                background: rgba(255,255,255,0.1);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                border: 1px solid rgba(255,255,255,0.15);
                border-radius: 14px;
                padding: 10px 16px;
                color: #fff;
                box-shadow: 0 8px 32px rgba(0,0,0,0.3);
                z-index: 3;
                white-space: nowrap;
            }
            .app-float-badge i { font-size: 20px; color: var(--red); }
            .app-float-badge strong {
                display: block; font-size: 12px; font-weight: 700; color: #fff;
            }
            .app-float-badge span { font-size: 10px; color: rgba(255,255,255,0.55); }
            .app-float-badge--top {
                top: 20px; right: 0;
                animation: badgeFloat 3.5s ease-in-out infinite alternate;
            }
            .app-float-badge--bottom {
                bottom: 30px; left: 0;
                animation: badgeFloat 4.5s ease-in-out infinite alternate-reverse;
            }
            @keyframes badgeFloat {
                from { transform: translateY(0px); }
                to   { transform: translateY(-8px); }
            }

            /* Responsive */
            @media (max-width: 991.98px) {
                .app-mockup-wrap { padding: 20px 20px 40px; }
                .app-phone-frame { width: 240px; }
                .app-float-badge--top { right: 10px; }
                .app-float-badge--bottom { left: 10px; }
                .app-features { grid-template-columns: 1fr 1fr; }
            }
            @media (max-width: 575.98px) {
                .app-section { padding: 70px 0; }
                .app-features { grid-template-columns: 1fr; }
                .app-download-row { flex-direction: column; }
                .app-store-btn { flex: none; width: 100%; }
                .app-phone-frame { width: 220px; }
                .app-float-badge { display: none; }
                .app-rating-row { flex-direction: column; align-items: flex-start; gap: 8px; }
                .app-rating-divider { display: none; }
            }
        

/* ══════════════════════════════════════ */


            /* ══════════════════════════
       ABOUT SECTION
    ══════════════════════════ */
            .about-section {
                padding: 90px 0;
                background: #ffffff;
                position: relative;
                overflow: hidden;
            }
            .about-bg-shape {
                position: absolute;
                border-radius: 50%;
                pointer-events: none;
            }
            .shape-1 {
                width: 600px;
                height: 600px;
                background: radial-gradient(
                    circle,
                    rgba(204, 0, 0, 0.05) 0%,
                    transparent 70%
                );
                top: -150px;
                left: -150px;
            }
            .shape-2 {
                width: 500px;
                height: 500px;
                background: radial-gradient(
                    circle,
                    rgba(204, 0, 0, 0.04) 0%,
                    transparent 70%
                );
                bottom: -120px;
                right: -100px;
            }

            .about-visual {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 32px;
            }

            .about-record-wrap {
                position: relative;
                width: 260px;
                height: 260px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .about-record {
                width: 220px;
                height: 220px;
                border-radius: 50%;
                background: radial-gradient(
                    circle at 50% 50%,
                    #ddd 20%,
                    #bbb 21%,
                    #ccc 38%,
                    #b4b4b4 39%,
                    #c8c8c8 52%,
                    #aaa 53%,
                    #c0c0c0 68%,
                    #a0a0a0 69%
                );
                box-shadow:
                    0 0 0 6px rgba(204, 0, 0, 0.1),
                    0 12px 40px rgba(0, 0, 0, 0.15);
                display: flex;
                align-items: center;
                justify-content: center;
                animation: aboutSpin 18s linear infinite;
                position: relative;
                z-index: 2;
            }
            @keyframes aboutSpin {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }

            .about-record-inner {
                width: 90px;
                height: 90px;
                border-radius: 50%;
                background: #fff;
                box-shadow:
                    0 0 0 3px rgba(204, 0, 0, 0.15),
                    0 4px 16px rgba(0, 0, 0, 0.1);
                display: flex;
                align-items: center;
                justify-content: center;
                animation: aboutSpinReverse 18s linear infinite;
            }
            @keyframes aboutSpinReverse {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(-360deg);
                }
            }

            .about-record-logo img {
                width: 72px;
                height: 72px;
                object-fit: contain;
                border-radius: 50%;
            }
            .about-logo-fallback {
                font-size: 13px;
                font-weight: 900;
                color: var(--text);
                flex-direction: column;
                align-items: center;
                line-height: 1;
            }
            .about-logo-fallback span {
                color: var(--red);
            }

            .orbit-ring {
                position: absolute;
                border-radius: 50%;
                border: 1.5px solid rgba(204, 0, 0, 0.12);
                animation: orbitPulse 3s ease-in-out infinite;
            }
            .ring-a {
                width: 240px;
                height: 240px;
                animation-delay: 0s;
            }
            .ring-b {
                width: 280px;
                height: 280px;
                animation-delay: 0.8s;
            }
            .ring-c {
                width: 320px;
                height: 320px;
                animation-delay: 1.6s;
            }
            @keyframes orbitPulse {
                0%,
                100% {
                    opacity: 0.4;
                    transform: scale(1);
                }
                50% {
                    opacity: 1;
                    transform: scale(1.03);
                }
            }

            .about-stats-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                width: 100%;
                max-width: 340px;
            }
            .about-stat-card {
                background: var(--bg);
                border: 1.5px solid var(--border2);
                border-radius: 14px;
                padding: 16px 14px;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 5px;
                transition:
                    border-color 0.25s,
                    box-shadow 0.25s,
                    transform 0.25s;
            }
            .about-stat-card:hover {
                border-color: var(--red-border);
                box-shadow: 0 6px 20px rgba(204, 0, 0, 0.08);
                transform: translateY(-3px);
            }
            .about-stat-card i {
                font-size: 20px;
                color: var(--red);
            }
            .about-stat-card strong {
                font-size: 15px;
                font-weight: 800;
                color: var(--text);
                line-height: 1;
            }
            .about-stat-card span {
                font-size: 11px;
                color: var(--text-muted);
                letter-spacing: 0.5px;
                text-transform: uppercase;
            }

            .about-content {
                padding-left: 0;
            }

            .about-year-badge {
                display: inline-flex;
                align-items: baseline;
                gap: 6px;
                background: var(--red-soft);
                border: 1px solid var(--red-border);
                border-radius: 8px;
                padding: 6px 16px;
                margin-bottom: 22px;
                font-size: 22px;
                font-weight: 900;
                color: var(--red);
                line-height: 1;
            }
            .about-year-badge span {
                font-size: 11px;
                font-weight: 600;
                letter-spacing: 2px;
                text-transform: uppercase;
                color: var(--text-muted);
            }

            .about-lead {
                font-size: 16px;
                font-weight: 400;
                color: var(--text);
                line-height: 1.75;
                margin-bottom: 18px;
            }
            .about-body {
                font-size: 14.5px;
                color: var(--text-mid);
                line-height: 1.8;
                margin-bottom: 16px;
            }

            .about-pillars {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                margin: 28px 0;
            }
            .about-pillar {
                display: flex;
                align-items: center;
                gap: 12px;
                background: var(--surface2);
                border: 1.5px solid var(--border2);
                border-radius: 12px;
                padding: 14px 16px;
                transition:
                    border-color 0.25s,
                    background 0.25s;
            }
            .about-pillar:hover {
                border-color: var(--red-border);
                background: #fff;
            }
            .pillar-icon {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                background: var(--red-soft);
                border: 1px solid var(--red-border);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }
            .pillar-icon i {
                font-size: 17px;
                color: var(--red);
            }
            .about-pillar strong {
                display: block;
                font-size: 13px;
                font-weight: 700;
                color: var(--text);
            }
            .about-pillar span {
                font-size: 12px;
                color: var(--text-muted);
            }

            .about-cta-row {
                display: flex;
                align-items: center;
                gap: 14px;
                flex-wrap: wrap;
                margin-top: 8px;
            }
            .about-cta-primary {
                display: inline-flex;
                align-items: center;
                background: var(--red);
                color: #fff;
                font-size: 14px;
                font-weight: 600;
                padding: 12px 26px;
                border-radius: 8px;
                text-decoration: none;
                box-shadow: 0 6px 20px rgba(204, 0, 0, 0.3);
                transition:
                    transform 0.2s,
                    box-shadow 0.2s;
            }
            .about-cta-primary:hover {
                color: #fff;
                transform: translateY(-2px);
                box-shadow: 0 10px 28px rgba(204, 0, 0, 0.4);
            }
            .about-cta-ghost {
                display: inline-flex;
                align-items: center;
                border: 1.5px solid var(--border2);
                background: transparent;
                color: var(--text-mid);
                font-size: 14px;
                font-weight: 600;
                padding: 11px 22px;
                border-radius: 8px;
                text-decoration: none;
                transition:
                    border-color 0.2s,
                    color 0.2s;
            }
            .about-cta-ghost:hover {
                border-color: var(--red);
                color: var(--red);
            }

            @media (max-width: 991.98px) {
                .about-visual {
                    margin-bottom: 12px;
                }
            }
            @media (max-width: 575.98px) {
                .about-pillars {
                    grid-template-columns: 1fr;
                }
                .about-stats-grid {
                    grid-template-columns: 1fr 1fr;
                }
                .about-record-wrap {
                    width: 220px;
                    height: 220px;
                }
                .about-record {
                    width: 180px;
                    height: 180px;
                }
                .ring-a {
                    width: 196px;
                    height: 196px;
                }
                .ring-b {
                    width: 232px;
                    height: 232px;
                }
                .ring-c {
                    width: 268px;
                    height: 268px;
                }
            }
        

/* ══════════════════════════════════════ */


            /* ══════════════════════════
       CONTACT SECTION
    ══════════════════════════ */
            .contact-section {
                padding: 90px 0;
                background: var(--bg);
                position: relative;
            }

            /* Info panel wrapper */
            .contact-info-panel {
                display: flex;
                flex-direction: column;
                gap: 14px;
                height: 100%;
            }

            /* Base contact card */
            .contact-card {
                background: var(--surface);
                border: 1.5px solid var(--border2);
                border-radius: 16px;
                padding: 18px 20px;
                display: flex;
                align-items: flex-start;
                gap: 16px;
                transition:
                    border-color 0.25s,
                    box-shadow 0.25s,
                    transform 0.22s;
            }
            .contact-card:hover {
                border-color: var(--red-border);
                box-shadow: 0 6px 24px rgba(204, 0, 0, 0.07);
                transform: translateY(-2px);
            }
            /* Inline variant (side by side phones) */
            .contact-card--inline {
                height: 100%;
                border-radius: 14px;
                padding: 16px 16px;
            }

            /* Icon bubble */
            .contact-icon-wrap {
                width: 44px;
                height: 44px;
                flex-shrink: 0;
                border-radius: 12px;
                background: var(--ci-bg);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .contact-icon-wrap i {
                font-size: 18px;
                color: var(--ci-color);
            }

            /* Card text */
            .contact-card-body h6 {
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                color: var(--text-muted);
                margin-bottom: 4px;
            }
            .contact-card-body p {
                font-size: 14px;
                color: var(--text-mid);
                line-height: 1.5;
                margin: 0;
            }
            .contact-card-body a {
                font-size: 14px;
                font-weight: 600;
                color: var(--text);
                text-decoration: none;
                transition: color 0.2s;
            }
            .contact-card-body a:hover {
                color: var(--red);
            }

            /* SMS card extras */
            .contact-sms-card {
                position: relative;
                overflow: hidden;
            }
            .contact-sms-card .contact-icon-wrap {
                align-self: center;
            }
            .sms-number {
                font-size: 28px !important;
                font-weight: 900 !important;
                color: var(--text) !important;
                letter-spacing: 3px;
                line-height: 1 !important;
                margin-bottom: 4px !important;
            }
            .sms-hint {
                font-size: 12px !important;
                color: var(--text-muted) !important;
            }
            .sms-pulse {
                position: absolute;
                top: 14px;
                right: 16px;
                display: flex;
                align-items: center;
                gap: 5px;
                background: rgba(204, 0, 0, 0.08);
                border: 1px solid var(--red-border);
                color: var(--red);
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                padding: 3px 10px;
                border-radius: 100px;
            }

            /* Social quick row */
            .contact-social-row {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-top: 4px;
                flex-wrap: wrap;
            }
            .contact-social-row span {
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 2px;
                text-transform: uppercase;
                color: var(--text-muted);
            }
            .csocial-btn {
                width: 38px;
                height: 38px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                text-decoration: none;
                color: #fff;
                transition:
                    transform 0.2s,
                    box-shadow 0.2s;
            }
            .csocial-btn:hover {
                transform: translateY(-3px);
                box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
                color: #fff;
            }
            .csocial-btn.fb {
                background: #1877f2;
            }
            .csocial-btn.ig {
                background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
            }
            .csocial-btn.yt {
                background: #ff0000;
            }
            .csocial-btn.tt {
                background: #010101;
            }

            /* Map wrapper */
            .contact-map-wrap {
                background: var(--surface);
                border: 1.5px solid var(--border2);
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
                display: flex;
                flex-direction: column;
                height: 100%;
                min-height: 480px;
            }

            /* Map top label bar */
            .map-label {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 14px 20px;
                border-bottom: 1px solid var(--border);
                font-size: 13px;
                font-weight: 600;
                color: var(--text-mid);
                background: var(--surface2);
            }
            .map-label i {
                color: var(--red);
                font-size: 16px;
            }

            /* iframe container */
            .map-embed-container {
                flex: 1;
                min-height: 380px;
                position: relative;
            }
            .map-embed-container iframe {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                border: none;
                display: block;
            }

            /* Directions button */
            .map-directions-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 14px 20px;
                background: var(--red);
                color: #fff;
                font-size: 14px;
                font-weight: 600;
                text-decoration: none;
                border-top: 1px solid rgba(204, 0, 0, 0.2);
                transition:
                    background 0.2s,
                    letter-spacing 0.2s;
            }
            .map-directions-btn:hover {
                background: var(--red-dark);
                color: #fff;
                letter-spacing: 0.5px;
            }

            /* Responsive */
            @media (max-width: 991.98px) {
                .contact-map-wrap {
                    min-height: 400px;
                }
            }
            @media (max-width: 575.98px) {
                .contact-map-wrap {
                    min-height: 340px;
                }
                .map-embed-container {
                    min-height: 260px;
                }
            }
        

/* ══════════════════════════════════════ */


            /* ══════════════════════════════════════
               BACK TO TOP BUTTON
            ══════════════════════════════════════ */
            .back-to-top-btn {
                position: fixed;
                bottom: 32px;
                right: 32px;
                z-index: 9998;
                width: 52px;
                height: 52px;
                border-radius: 14px;
                background: linear-gradient(135deg, var(--red) 0%, #990000 100%);
                border: none;
                color: #fff;
                font-size: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                box-shadow: 0 6px 24px rgba(204, 0, 0, 0.4), 0 2px 8px rgba(0,0,0,0.15);
                opacity: 0;
                transform: translateY(20px) scale(0.9);
                pointer-events: none;
                transition: opacity 0.35s, transform 0.35s, box-shadow 0.25s, background 0.25s;
            }
            .back-to-top-btn.visible {
                opacity: 1;
                transform: translateY(0) scale(1);
                pointer-events: auto;
            }
            .back-to-top-btn:hover {
                background: linear-gradient(135deg, #111111 0%, #2d2d50 100%);
                box-shadow: 0 10px 36px rgba(24, 24, 46, 0.45), 0 2px 8px rgba(0,0,0,0.2);
                transform: translateY(-3px) scale(1.05);
            }
            .back-to-top-btn:active {
                transform: translateY(0) scale(0.96);
            }
            .back-to-top-btn i {
                transition: transform 0.2s;
            }
            .back-to-top-btn:hover i {
                transform: translateY(-2px);
            }
            @media (max-width: 575.98px) {
                .back-to-top-btn {
                    bottom: 20px;
                    right: 20px;
                    width: 46px;
                    height: 46px;
                    font-size: 18px;
                    border-radius: 12px;
                }
            }

            /* ══════════════════════════════════════
               RADIO GUIDE SECTION
            ══════════════════════════════════════ */
            .radio-guide-section {
                padding: 90px 0;
                background: var(--bg);
                position: relative;
                overflow: hidden;
            }
            .rg-bg-shape {
                position: absolute;
                border-radius: 50%;
                pointer-events: none;
            }
            .rg-shape-1 {
                width: 700px; height: 700px;
                background: radial-gradient(circle, rgba(204,0,0,0.04) 0%, transparent 65%);
                top: -200px; right: -150px;
            }
            .rg-shape-2 {
                width: 500px; height: 500px;
                background: radial-gradient(circle, rgba(24,24,46,0.04) 0%, transparent 65%);
                bottom: -100px; left: -100px;
            }

            /* Filter tabs */
            .rg-filter-row {
                display: flex;
                align-items: center;
                gap: 10px;
                flex-wrap: wrap;
                justify-content: center;
                margin-bottom: 40px;
            }
            .rg-filter-btn {
                padding: 8px 22px;
                border-radius: 100px;
                border: 1.5px solid var(--border2);
                background: var(--surface);
                color: var(--text-mid);
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.22s;
                letter-spacing: 0.3px;
            }
            .rg-filter-btn:hover {
                border-color: var(--red-border);
                color: var(--red);
                background: var(--red-soft);
            }
            .rg-filter-btn.active {
                background: var(--red);
                border-color: var(--red);
                color: #fff;
                box-shadow: 0 4px 16px rgba(204,0,0,0.3);
            }

            /* Card */
            .rg-card {
                background: var(--surface);
                border: 1.5px solid var(--border2);
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 4px 24px rgba(0,0,0,0.06);
                transition: transform 0.28s, box-shadow 0.28s, border-color 0.28s;
                height: 100%;
                display: flex;
                flex-direction: column;
            }
            .rg-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 16px 48px rgba(204,0,0,0.12);
                border-color: var(--red-border);
            }

            .rg-card-thumb {
                position: relative;
                width: 100%;
                aspect-ratio: 16/9;
                overflow: hidden;
                background: var(--text);
            }
            .rg-card-thumb img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 0.5s ease;
            }
            .rg-card:hover .rg-card-thumb img {
                transform: scale(1.06);
            }

            .rg-schedule-badge {
                position: absolute;
                top: 12px;
                left: 12px;
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 1.2px;
                text-transform: uppercase;
                padding: 4px 10px;
                border-radius: 100px;
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
            }
            .weekday-badge {
                background: rgba(204,0,0,0.85);
                color: #fff;
            }
            .weekend-badge {
                background: rgba(24,24,46,0.85);
                color: #fff;
            }
            .daily-badge {
                background: rgba(0,0,0,0.7);
                color: #fff;
            }

            .rg-time-overlay {
                position: absolute;
                bottom: 0; left: 0; right: 0;
                background: linear-gradient(0deg, rgba(24,24,46,0.92) 0%, transparent 100%);
                color: #fff;
                font-size: 12px;
                font-weight: 600;
                padding: 18px 14px 10px;
                display: flex;
                align-items: center;
                gap: 6px;
                letter-spacing: 0.3px;
            }
            .rg-time-overlay i { color: var(--red); font-size: 13px; }

            .rg-card-body {
                padding: 20px;
                display: flex;
                flex-direction: column;
                flex: 1;
            }
            .rg-show-title {
                font-size: 1.1rem;
                font-weight: 800;
                color: var(--text);
                margin-bottom: 8px;
                letter-spacing: -0.2px;
            }
            .rg-show-desc {
                font-size: 13px;
                color: var(--text-muted);
                line-height: 1.65;
                margin-bottom: 16px;
                flex: 1;
            }
            .rg-show-meta {
                display: flex;
                gap: 12px;
                flex-wrap: wrap;
                margin-bottom: 16px;
                padding-bottom: 16px;
                border-bottom: 1px solid var(--border);
            }
            .rg-meta-item {
                display: flex;
                align-items: center;
                gap: 5px;
                font-size: 12px;
                font-weight: 600;
                color: var(--text-mid);
            }
            .rg-meta-item i { color: var(--red); font-size: 13px; }

            /* Host avatars row */
            .rg-hosts {
                display: flex;
                align-items: center;
                gap: 10px;
                flex-wrap: wrap;
            }
            .rg-hosts-label {
                font-size: 11px;
                font-weight: 600;
                color: var(--text-muted);
                text-transform: uppercase;
                letter-spacing: 1px;
                flex-shrink: 0;
            }
            .rg-host-avatars {
                display: flex;
            }
            .rg-host-avatars img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 2px solid var(--surface);
                object-fit: cover;
                margin-left: -8px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                transition: transform 0.2s;
            }
            .rg-host-avatars img:first-child { margin-left: 0; }
            .rg-host-avatars img:hover { transform: scale(1.15); z-index: 1; }
            .rg-host-names {
                font-size: 12px;
                font-weight: 600;
                color: var(--text-mid);
            }

            /* hidden items */
            .rg-item.rg-hidden {
                display: none;
            }

            /* ══════════════════════════════════════
               RJs SECTION
            ══════════════════════════════════════ */
            .rj-section {
                padding: 90px 0;
                background: #ffffff;
                position: relative;
                overflow: hidden;
            }
            .rj-section::before {
                content: '';
                position: absolute;
                inset: 0;
                background-image: radial-gradient(circle, rgba(204,0,0,0.05) 1px, transparent 1px);
                background-size: 28px 28px;
                pointer-events: none;
                opacity: 0.6;
            }

            .rj-slide { padding: 0 12px; }

            .rj-card {
                background: var(--surface);
                border: 1.5px solid var(--border2);
                border-radius: 22px;
                overflow: hidden;
                box-shadow: 0 4px 24px rgba(0,0,0,0.07);
                transition: transform 0.28s, box-shadow 0.28s, border-color 0.28s;
                display: flex;
                flex-direction: column;
            }
            .rj-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 60px rgba(204,0,0,0.13);
                border-color: var(--red-border);
            }

            /* Top name row */
            .rj-card-top {
                display: flex;
                align-items: center;
                gap: 14px;
                padding: 18px 20px 0;
            }
            .rj-avatar-wrap {
                position: relative;
                flex-shrink: 0;
            }
            .rj-avatar-wrap img {
                width: 56px;
                height: 56px;
                border-radius: 50%;
                object-fit: cover;
                border: 3px solid var(--red);
                box-shadow: 0 4px 16px rgba(204,0,0,0.22);
            }
            .rj-on-air-dot {
                position: absolute;
                bottom: 2px;
                right: 2px;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: #22c55e;
                border: 2px solid #fff;
                animation: pulseAnim 1.6s ease-in-out infinite;
            }
            .rj-name {
                font-size: 1.05rem;
                font-weight: 800;
                color: var(--text);
                margin-bottom: 3px;
                letter-spacing: -0.2px;
            }
            .rj-tag {
                font-size: 11px;
                font-weight: 600;
                color: var(--red);
                text-transform: uppercase;
                letter-spacing: 1.2px;
                background: var(--red-soft);
                border: 1px solid var(--red-border);
                padding: 2px 8px;
                border-radius: 100px;
            }

            /* RP thumbnail */
            .rj-rp-thumb {
                position: relative;
                width: 100%;
                aspect-ratio: 5/4;
                overflow: hidden;
                background: var(--text);
                margin-top: 16px;
            }
            .rj-rp-thumb img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 0.5s ease;
            }
            .rj-card:hover .rj-rp-thumb img {
                transform: scale(1.06);
            }
            .rj-thumb-overlay {
                position: absolute;
                inset: 0;
                background: linear-gradient(0deg, rgba(24,24,46,0.7) 0%, transparent 55%);
            }

            /* Body */
            .rj-card-body {
                padding: 18px 20px 20px;
                display: flex;
                flex-direction: column;
                gap: 14px;
            }
            .rj-bio {
                font-size: 13px;
                color: var(--text-muted);
                line-height: 1.7;
                margin: 0;
            }
            .rj-shows {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            .rj-show-item {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                background: var(--red-soft);
                border: 1px solid var(--red-border);
                border-radius: 10px;
                padding: 10px 12px;
            }
            .rj-show-item i {
                color: var(--red);
                font-size: 15px;
                flex-shrink: 0;
                margin-top: 1px;
            }
            .rj-show-item strong {
                display: block;
                font-size: 13px;
                font-weight: 700;
                color: var(--text);
                margin-bottom: 1px;
            }
            .rj-show-item span {
                font-size: 11px;
                color: var(--text-muted);
                letter-spacing: 0.3px;
            }

            /* Owl theming for RJ carousel */
            .rj-carousel .owl-dots {
                margin-top: 32px !important;
            }
            .rj-carousel .owl-nav button {
                top: 0;
            }
        

/* ══════════════════════════════════════ */


        /* ═══════════════════════════════════════════════════════════════
           ENT-SEP — Beautiful Entertainment Section Separators
           Inspired by: stage curtains, spotlight beams, film strips,
           sound waves, broadcast arcs, neon cuts
        ═══════════════════════════════════════════════════════════════ */

        .ent-sep {
            position: relative;
            width: 100%;
            line-height: 0;
            z-index: 10;
            overflow: visible;
        }
        .ent-sep svg { display: block; width: 100%; }

        /* Shared badge */
        .ent-sep-badge {
            position: absolute;
            bottom: calc(50% - 18px);
            left: 50%;
            transform: translateX(-50%);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 3px;
            text-transform: uppercase;
            padding: 6px 18px;
            border-radius: 3px;
            z-index: 5;
            white-space: nowrap;
            box-shadow: 0 4px 20px rgba(0,0,0,0.25);
        }
        .ent-sep-badge i { font-size: 14px; }
        .ent-sep-badge--dark  { background: #0a0a0a; color: #cc0000; border: 1px solid rgba(204,0,0,0.4); }
        .ent-sep-badge--light { background: #cc0000; color: #fff; }
        .ent-sep-badge--white { background: #fff; color: #cc0000; border: 1px solid rgba(204,0,0,0.2); }

        /* ── Spotlight separator (hero → top10) ── */
        .ent-sep--spotlight {
            background: #0a0a0a;
            padding-bottom: 0;
        }
        .ent-sep--spotlight svg { filter: drop-shadow(0 -4px 20px rgba(204,0,0,0.2)); }
        .ent-sep--spotlight .ent-sep-badge { bottom: -14px; }

        /* ── Film strip separator ── */
        .ent-sep--film {
            background: #f5f0eb;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
        .ent-sep-filmstrip {
            display: flex;
            background: #0a0a0a;
            height: 18px;
            padding: 3px 0;
            gap: 0;
            overflow: hidden;
            flex-shrink: 0;
        }
        .ent-sep-filmstrip span {
            flex: 1;
            margin: 0 3px;
            background: #f5f0eb;
            border-radius: 2px;
            min-width: 18px;
            max-width: 28px;
        }
        .ent-sep-filmstrip--btm { order: 3; }
        .ent-sep--film svg { order: 2; }
        .ent-sep--film .ent-sep-badge { bottom: -14px; }

        /* ── Sound wave separator ── */
        .ent-sep--soundwave {
            background: #0c0c1a;
            position: relative;
            padding-bottom: 12px;
        }
        .ent-sep-soundbars {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: flex-end;
            gap: 5px;
            height: 60px;
            padding-bottom: 4px;
        }
        .ent-sep-soundbars span {
            width: 4px;
            border-radius: 2px 2px 0 0;
            background: linear-gradient(to top, #cc0000, rgba(204,0,0,0.3));
            height: var(--h, 30px);
            animation: sepBarBounce 0.8s var(--d, 0s) ease-in-out infinite alternate;
        }
        @keyframes sepBarBounce {
            from { transform: scaleY(0.3); opacity: 0.5; }
            to   { transform: scaleY(1);   opacity: 1; }
        }
        .ent-sep--soundwave .ent-sep-badge { bottom: 4px; }

        /* ── Curtain drape ── */
        .ent-sep--curtain {
            background: #f5f0eb;
            filter: drop-shadow(0 -6px 16px rgba(0,0,0,0.12));
        }
        .ent-sep--curtain .ent-sep-badge { bottom: -14px; }

        /* ── Diagonal slash ── */
        .ent-sep--slash { background: #f5f0eb; }
        .ent-sep--slash .ent-sep-badge { bottom: -14px; }

        /* ── Dark wedge ── */
        .ent-sep--wedge { background: #ffffff; }
        .ent-sep--wedge .ent-sep-badge { bottom: -14px; }

        /* ── Broadcast arcs ── */
        .ent-sep--broadcast {
            background: linear-gradient(135deg, #111111 0%, #1a0000 50%, #111111 100%);
            overflow: hidden;
        }
        .ent-sep--broadcast .ent-sep-badge { bottom: -14px; }

        /* ── Double wave ── */
        .ent-sep--wave2 { background: #f5f0eb; }
        .ent-sep--wave2 .ent-sep-badge { bottom: -14px; }

        /* ── Stage arch ── */
        .ent-sep--stage { background: #ffffff; }
        .ent-sep--stage .ent-sep-badge { bottom: -14px; }

        /* ── V-notch (pentagon cut) ── */
        .ent-sep--notch { background: #f5f0eb; }
        .ent-sep--notch .ent-sep-badge { bottom: -14px; }

        /* ── Footer ── */
        .ent-sep--footer { background: #0a0a0a; margin-top: 0; }


        /* ═══════════════════════════════════════════════════════════════
           ENT-BG — Section Background Art
           Each section gets a unique atmospheric art layer
        ═══════════════════════════════════════════════════════════════ */

        .ent-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        /* Make sure section content sits above bg */
        .ent-dark-section  > .container,
        .ent-light-section > .container,
        .ent-white-section > .container,
        .ent-cinema-section > .container,
        .ent-app-section > .container { position: relative; z-index: 2; }

        /* ── Hero: spotlight rays on deep black ── */
        .hero .ent-bg-hero::before {
            content: '';
            position: absolute; inset: 0;
            background:
                conic-gradient(from 200deg at 50% 120%, transparent 0deg, rgba(204,0,0,0.07) 20deg, transparent 40deg,
                    rgba(204,0,0,0.05) 60deg, transparent 80deg),
                radial-gradient(ellipse 80% 60% at 50% 100%, rgba(204,0,0,0.12) 0%, transparent 60%),
                radial-gradient(ellipse 40% 40% at 20% 80%, rgba(204,0,0,0.06) 0%, transparent 50%),
                radial-gradient(ellipse 40% 40% at 80% 80%, rgba(204,0,0,0.06) 0%, transparent 50%);
        }
        /* dot grid */
        .hero .ent-bg-hero::after {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(circle, rgba(204,0,0,0.12) 1px, transparent 1px);
            background-size: 32px 32px;
            opacity: 0.4;
        }

        /* ── Tamil Top 10: dark stage + floating music note shapes ── */
        .ent-dark-section { background: #0a0a0a !important; }
        .ent-bg-top10::before {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse 60% 50% at 10% 50%, rgba(204,0,0,0.10) 0%, transparent 55%),
                radial-gradient(ellipse 50% 60% at 90% 50%, rgba(204,0,0,0.07) 0%, transparent 55%),
                radial-gradient(ellipse 40% 30% at 50% 0%, rgba(204,0,0,0.06) 0%, transparent 50%);
        }
        .ent-bg-top10::after {
            content: '';
            position: absolute; inset: 0;
            background-image:
                radial-gradient(circle, rgba(204,0,0,0.18) 1.5px, transparent 1.5px);
            background-size: 48px 48px;
            opacity: 0.3;
            mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
        }

        /* ── Cinema Corner: film-noir dark with red vignette + grain ── */
        .ent-cinema-section { background: #080810 !important; }
        .ent-bg-cinema::before {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse 100% 50% at 50% 0%, rgba(204,0,0,0.08) 0%, transparent 50%),
                radial-gradient(ellipse 70% 70% at 0% 100%, rgba(204,0,0,0.06) 0%, transparent 50%),
                radial-gradient(ellipse 70% 70% at 100% 100%, rgba(204,0,0,0.06) 0%, transparent 50%);
        }
        /* film grain */
        .ent-bg-cinema::after {
            content: '';
            position: absolute; inset: 0;
            opacity: 0.04;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 200px;
        }

        /* ── Radio Guide: warm parchment with broadcast ring art ── */
        .ent-light-section { background: #f5f0eb !important; }
        .ent-bg-radio::before {
            content: '';
            position: absolute;
            top: -120px; left: 50%; transform: translateX(-50%);
            width: 600px; height: 600px;
            border-radius: 50%;
            background: transparent;
            box-shadow:
                0 0 0 1px rgba(204,0,0,0.08),
                0 0 0 60px rgba(204,0,0,0.03),
                0 0 0 120px rgba(204,0,0,0.025),
                0 0 0 180px rgba(204,0,0,0.018),
                0 0 0 240px rgba(204,0,0,0.01);
        }
        .ent-bg-radio::after {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse 60% 40% at 100% 100%, rgba(204,0,0,0.04) 0%, transparent 55%),
                radial-gradient(ellipse 60% 40% at 0% 0%, rgba(204,0,0,0.03) 0%, transparent 55%);
        }

        /* ── RJs: clean white with dramatic diagonal light bar ── */
        .ent-white-section { background: #ffffff !important; }
        .ent-bg-rjs::before {
            content: '';
            position: absolute;
            top: 0; right: -10%; bottom: 0;
            width: 55%;
            background: linear-gradient(
                135deg,
                rgba(204,0,0,0.04) 0%,
                rgba(204,0,0,0.02) 40%,
                transparent 70%
            );
            border-left: 1px solid rgba(204,0,0,0.06);
            transform: skewX(-8deg);
            transform-origin: top right;
        }
        .ent-bg-rjs::after {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
            background-size: 28px 28px;
            opacity: 0.6;
        }

        /* ── Events: light with confetti-style scattered circles ── */
        .ent-bg-events::before {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(circle 4px at 15% 20%, rgba(204,0,0,0.15) 100%, transparent 100%),
                radial-gradient(circle 3px at 30% 60%, rgba(204,0,0,0.10) 100%, transparent 100%),
                radial-gradient(circle 5px at 65% 15%, rgba(204,0,0,0.12) 100%, transparent 100%),
                radial-gradient(circle 3px at 80% 70%, rgba(204,0,0,0.08) 100%, transparent 100%),
                radial-gradient(circle 4px at 50% 85%, rgba(204,0,0,0.10) 100%, transparent 100%),
                radial-gradient(circle 2px at 90% 30%, rgba(204,0,0,0.12) 100%, transparent 100%),
                radial-gradient(ellipse 80% 60% at 50% 0%, rgba(204,0,0,0.04) 0%, transparent 50%);
        }

        /* ── Mobile App: deep dark with waveform art ── */
        .ent-app-section {
            background: linear-gradient(135deg, #0a0a0a 0%, #1a0000 50%, #0a0a0a 100%) !important;
        }
        .ent-bg-app::before {
            content: '';
            position: absolute; left: 0; right: 0;
            top: 50%; transform: translateY(-50%);
            height: 120px;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,60 C60,60 60,20 120,20 C180,20 180,100 240,100 C300,100 300,40 360,40 C420,40 420,80 480,80 C540,80 540,30 600,30 C660,30 660,90 720,90 C780,90 780,50 840,50 C900,50 900,70 960,70 C1020,70 1020,25 1080,25 C1140,25 1140,95 1200,95 C1260,95 1260,45 1320,45 C1380,45 1380,65 1440,65' stroke='rgba(204,0,0,0.25)' stroke-width='2' fill='none'/%3E%3Cpath d='M0,60 C60,60 60,30 120,30 C180,30 180,90 240,90 C300,90 300,50 360,50 C420,50 420,70 480,70 C540,70 540,40 600,40 C660,40 660,80 720,80 C780,80 780,55 840,55 C900,55 900,75 960,75 C1020,75 1020,35 1080,35 C1140,35 1140,85 1200,85 C1260,85 1260,50 1320,50 C1380,50 1380,70 1440,70' stroke='rgba(204,0,0,0.12)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center;
            background-size: 100% 100%;
        }
        .ent-bg-app::after {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse 50% 50% at 20% 50%, rgba(204,0,0,0.10) 0%, transparent 60%),
                radial-gradient(ellipse 50% 50% at 80% 50%, rgba(204,0,0,0.08) 0%, transparent 60%);
        }

        /* ── About Us: parchment with diagonal stripes ── */
        .ent-bg-about::before {
            content: '';
            position: absolute; inset: 0;
            background-image: repeating-linear-gradient(
                -55deg,
                transparent,
                transparent 40px,
                rgba(204,0,0,0.025) 40px,
                rgba(204,0,0,0.025) 41px
            );
        }
        .ent-bg-about::after {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse 60% 50% at 0% 50%, rgba(204,0,0,0.05) 0%, transparent 55%),
                radial-gradient(ellipse 60% 50% at 100% 50%, rgba(204,0,0,0.04) 0%, transparent 55%);
        }

        /* ── Contact: white with technical grid ── */
        .ent-bg-contact::before {
            content: '';
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(204,0,0,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(204,0,0,0.04) 1px, transparent 1px);
            background-size: 40px 40px;
        }
        .ent-bg-contact::after {
            content: '';
            position: absolute; inset: 0;
            background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, rgba(204,0,0,0.03) 100%);
        }

        /* ── YouTube/Social sections: tinted parchment ── */
        #youtube-section { background: #f5f0eb !important; position: relative; }
        #youtube-section::before {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(circle, rgba(255,0,0,0.06) 1px, transparent 1px);
            background-size: 36px 36px;
            pointer-events: none;
            z-index: 0;
        }
        #facebook-section  { background: #ffffff !important; }
        #instagram-section { background: #f5f0eb !important; }
        #tiktok-section    { background: #ffffff !important; }


        /* ═══════════════════════════════════════════════════════════════
           Section text overrides for dark sections
        ═══════════════════════════════════════════════════════════════ */

        /* Top 10 dark section — light text */
        .ent-dark-section .section-title,
        .ent-dark-section .tt10-song-title { color: #fff !important; }
        .ent-dark-section .section-sub     { color: rgba(255,255,255,0.5) !important; }
        .ent-dark-section .section-title::after { background: #cc0000; }
        .ent-dark-section .section-badge   { background: rgba(204,0,0,0.12) !important; border-color: rgba(204,0,0,0.3) !important; color: #ff6060 !important; }
        .ent-dark-section .tt10-card       { background: #141414 !important; border-color: rgba(255,255,255,0.07) !important; }
        .ent-dark-section .tt10-card:hover { border-color: rgba(204,0,0,0.35) !important; box-shadow: 0 20px 56px rgba(204,0,0,0.2) !important; }
        .ent-dark-section .tt10-meta-item strong { color: rgba(255,255,255,0.75) !important; }
        .ent-dark-section .tt10-meta-item span   { color: rgba(255,255,255,0.35) !important; }
        .ent-dark-section .rg-filter-btn   { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.6) !important; }
        .ent-dark-section .rg-filter-btn:hover, .ent-dark-section .rg-filter-btn.active { background: #cc0000 !important; border-color: #cc0000 !important; color: #fff !important; }

        /* Owl Carousel theme for dark sections */
        .ent-dark-section .owl-dot span { background: rgba(255,255,255,0.2) !important; }
        .ent-dark-section .owl-dot.active span { background: #cc0000 !important; }
        .ent-dark-section .owl-nav button { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.7) !important; }

        /* ═══════════════════════════════════════════════════════════════
           Mobile separator adjustments
        ═══════════════════════════════════════════════════════════════ */
        @media (max-width: 767.98px) {
            .ent-sep-badge { font-size: 9px; letter-spacing: 2px; padding: 5px 12px; }
            .ent-sep-soundbars { display: none; }
            .ent-sep-filmstrip span { min-width: 12px; }
        }
        @media (max-width: 575.98px) {
            .ent-sep-badge { display: none; }
            .ent-sep--film .ent-sep-filmstrip { height: 12px; }
        }
        

/* ══════════════════════════════════════ */


            /* ══════════════════════════
       SHARED SECTION STYLES
    ══════════════════════════ */
            .social-section {
                padding: 80px 0;
                position: relative;
            }
            .alt-bg {
                background: #ede8e3;
            }

            .section-header {
                text-align: center;
                margin-bottom: 48px;
            }
            .section-badge {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                background: var(--badge-bg);
                border: 1px solid var(--badge-border);
                color: var(--badge-color);
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 2px;
                text-transform: uppercase;
                padding: 5px 16px;
                border-radius: 100px;
                margin-bottom: 14px;
            }
            .section-title {
                font-size: clamp(1.7rem, 4vw, 2.6rem);
                font-weight: 900;
                color: var(--text);
                letter-spacing: -0.5px;
                margin-bottom: 10px;
            }
            .section-title span {
                color: var(--red);
            }
            .section-sub {
                font-size: 15px;
                color: var(--text-muted);
                max-width: 500px;
                margin: 0 auto 16px;
            }
            .section-link {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                color: var(--link-color);
                font-size: 14px;
                font-weight: 600;
                text-decoration: none;
                transition: gap 0.2s;
            }
            .section-link:hover {
                gap: 10px;
            }

            .section-cta-btn {
                display: inline-flex;
                align-items: center;
                background: var(--btn-color, var(--red));
                color: #fff;
                font-size: 14px;
                font-weight: 600;
                padding: 11px 24px;
                border-radius: 8px;
                text-decoration: none;
                transition:
                    opacity 0.2s,
                    transform 0.2s;
                margin-top: 20px;
            }
            .section-cta-btn:hover {
                opacity: 0.9;
                transform: translateY(-2px);
                color: #fff;
            }

            /* ══════════════════════════
       YOUTUBE
    ══════════════════════════ */
            .yt-skeleton-inner {
                background: var(--surface);
                border-radius: 14px;
                overflow: hidden;
                border: 1px solid var(--border2);
            }
            .yt-skeleton-inner::before {
                content: "";
                display: block;
                padding-top: 56.25%;
                background: linear-gradient(
                    90deg,
                    #eee 25%,
                    #f5f5f5 50%,
                    #eee 75%
                );
                background-size: 200% 100%;
                animation: skeletonShimmer 1.4s infinite;
            }
            @keyframes skeletonShimmer {
                from {
                    background-position: 200% 0;
                }
                to {
                    background-position: -200% 0;
                }
            }

            .yt-video-card {
                background: var(--surface);
                border-radius: 14px;
                overflow: hidden;
                border: 1px solid var(--border2);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
                transition:
                    transform 0.25s,
                    box-shadow 0.25s;
                height: 100%;
            }
            .yt-video-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 36px rgba(255, 0, 0, 0.12);
            }
            .yt-video-card iframe {
                width: 100%;
                height: 200px;
                display: block;
                border: none;
            }
            .yt-video-meta {
                padding: 14px 16px;
            }
            .yt-video-meta .yt-badge {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                background: rgba(255, 0, 0, 0.08);
                color: #ff0000;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 1.5px;
                padding: 2px 8px;
                border-radius: 3px;
                text-transform: uppercase;
                margin-bottom: 6px;
            }
            .yt-video-meta h6 {
                font-size: 13px;
                font-weight: 600;
                color: var(--text);
                line-height: 1.4;
                margin: 0;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            /* ══════════════════════════
       FACEBOOK
    ══════════════════════════ */
            .fb-embed-wrap {
                background: var(--surface);
                border-radius: 16px;
                overflow: hidden;
                border: 1px solid var(--border2);
                box-shadow: 0 8px 32px rgba(24, 119, 242, 0.1);
                max-width: 520px;
                width: 100%;
            }

            .fb-stats-row {
                display: flex;
                gap: 16px;
                margin-top: 28px;
                flex-wrap: wrap;
            }
            .fb-stat {
                display: flex;
                align-items: center;
                gap: 10px;
                background: var(--surface);
                border: 1px solid var(--border2);
                border-radius: 10px;
                padding: 10px 14px;
                flex: 1;
                min-width: 90px;
                transition: border-color 0.2s;
            }
            .fb-stat:hover {
                border-color: rgba(24, 119, 242, 0.3);
            }
            .fb-stat i {
                font-size: 18px;
                color: #1877f2;
                flex-shrink: 0;
            }
            .fb-stat strong {
                display: block;
                font-size: 14px;
                font-weight: 700;
                color: var(--text);
                line-height: 1;
            }
            .fb-stat span {
                font-size: 11px;
                color: var(--text-muted);
            }

            /* ══════════════════════════
       INSTAGRAM
    ══════════════════════════ */
            .ig-embed-wrap {
                padding: 8px;
                background: var(--surface);
                border-radius: 20px;
                border: 1px solid var(--border2);
                box-shadow: 0 8px 32px rgba(225, 48, 108, 0.09);
                overflow: hidden;
            }

            .ig-info-panel {
                padding: 32px 40px;
            }
            .ig-info-panel h3 {
                font-size: 1.5rem;
                font-weight: 800;
                color: var(--text);
                margin-bottom: 12px;
            }
            .ig-info-panel p {
                font-size: 14px;
                color: var(--text-muted);
                line-height: 1.7;
                margin-bottom: 20px;
            }
            .ig-feature-list {
                list-style: none;
                padding: 0;
                margin-bottom: 20px;
            }
            .ig-feature-list li {
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 14px;
                color: var(--text-mid);
                padding: 7px 0;
                border-bottom: 1px solid var(--border);
            }
            .ig-feature-list li:last-child {
                border: none;
            }
            .ig-feature-list li i {
                color: #e1306c;
                font-size: 16px;
            }

            .ig-btn {
                --btn-color: linear-gradient(
                    135deg,
                    #f58529,
                    #dd2a7b,
                    #8134af,
                    #515bd4
                );
                background: linear-gradient(
                    135deg,
                    #f58529,
                    #dd2a7b,
                    #8134af,
                    #515bd4
                );
            }

            @media (max-width: 991.98px) {
                .ig-info-panel {
                    padding: 24px 8px;
                }
            }

            /* ══════════════════════════
       TIKTOK / OWL CAROUSEL
    ══════════════════════════ */
            .tiktok-carousel {
                padding-bottom: 16px;
            }

            .tiktok-card {
                padding: 0 10px;
            }
            .tiktok-card-inner {
                background: var(--surface);
                border-radius: 18px;
                border: 1px solid var(--border2);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
                overflow: hidden;
                min-height: 460px;
            }

            .tiktok-profile-embed {
                width: 100%;
                min-height: 460px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .tiktok-loading {
                text-align: center;
                color: var(--text-muted);
            }
            .tiktok-loading i {
                font-size: 48px;
                margin-bottom: 12px;
                display: block;
            }
            .tiktok-loading p {
                font-size: 14px;
            }

            .tiktok-info-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 40px 28px;
                gap: 12px;
            }
            .tiktok-big-icon {
                font-size: 56px;
                color: var(--text);
            }
            .tiktok-info-card h4 {
                font-size: 1.2rem;
                font-weight: 800;
                color: var(--text);
            }
            .tiktok-info-card p {
                font-size: 13px;
                color: var(--text-muted);
                line-height: 1.6;
            }
            .tiktok-btn {
                --btn-color: #010101;
                background: #010101;
            }

            .tiktok-stats {
                display: flex;
                gap: 20px;
                margin-top: 16px;
            }
            .tiktok-stats div {
                text-align: center;
            }
            .tiktok-stats strong {
                display: block;
                font-size: 15px;
                font-weight: 800;
                color: var(--text);
            }
            .tiktok-stats span {
                font-size: 11px;
                color: var(--text-muted);
            }

            .tiktok-promo-card {
                background: linear-gradient(145deg, #111111 0%, #1a0000 100%);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 40px 28px;
                text-align: center;
            }
            .tiktok-promo-tag {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                background: rgba(255, 255, 255, 0.12);
                color: #fff;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 2px;
                padding: 4px 12px;
                border-radius: 100px;
                text-transform: uppercase;
                margin-bottom: 16px;
            }
            .tiktok-promo-content h4 {
                font-size: 1.3rem;
                font-weight: 800;
                margin-bottom: 10px;
            }
            .tiktok-promo-content p {
                font-size: 13px;
                opacity: 0.75;
                line-height: 1.6;
                margin-bottom: 20px;
            }
            .tiktok-platform-links {
                display: flex;
                justify-content: center;
                gap: 12px;
                flex-wrap: wrap;
            }
            .tiktok-platform-links a {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.12);
                border: 1px solid rgba(255, 255, 255, 0.2);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 16px;
                text-decoration: none;
                transition: background 0.2s;
            }
            .tiktok-platform-links a:hover {
                background: var(--red);
            }

            /* Owl Carousel dots */
            .owl-dots {
                margin-top: 24px !important;
            }
            .owl-dot span {
                background: var(--bg2) !important;
                width: 8px !important;
                height: 8px !important;
                transition:
                    background 0.3s,
                    width 0.3s !important;
            }
            .owl-dot.active span {
                background: var(--red) !important;
                width: 24px !important;
            }

            /* Owl nav arrows */
            .owl-nav button {
                width: 42px !important;
                height: 42px !important;
                border-radius: 50% !important;
                background: var(--surface) !important;
                border: 1.5px solid var(--border2) !important;
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
                color: var(--text-mid) !important;
                font-size: 20px !important;
                transition: all 0.2s !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            .owl-nav button:hover {
                background: var(--red) !important;
                color: #fff !important;
                border-color: var(--red) !important;
            }
            .owl-nav button span {
                font-size: 24px;
                line-height: 1;
                margin-top: -2px;
            }

            /* ══════════════════════════
       FOOTER
    ══════════════════════════ */
            .site-footer {
                background: var(--text);
                color: rgba(255, 255, 255, 0.85);
                padding: 60px 0 0;
            }
            .footer-heading {
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 2px;
                text-transform: uppercase;
                color: rgba(255, 255, 255, 0.4);
                margin-bottom: 16px;
            }
            .footer-links {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .footer-links li {
                margin-bottom: 10px;
            }
            .footer-links a {
                color: rgba(255, 255, 255, 0.65);
                font-size: 14px;
                text-decoration: none;
                transition: color 0.2s;
            }
            .footer-links a:hover {
                color: var(--red);
            }

            .footer-social {
                display: flex;
                gap: 10px;
                margin-top: 16px;
            }
            .footer-social a {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.08);
                border: 1px solid rgba(255, 255, 255, 0.12);
                display: flex;
                align-items: center;
                justify-content: center;
                color: rgba(255, 255, 255, 0.7);
                font-size: 15px;
                text-decoration: none;
                transition: all 0.2s;
            }
            .footer-social a:hover {
                background: var(--red);
                border-color: var(--red);
                color: #fff;
            }

            .footer-freq {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-bottom: 16px;
            }
            .footer-freq-item {
                display: flex;
                align-items: center;
                gap: 10px;
                background: rgba(255, 255, 255, 0.06);
                border-radius: 8px;
                padding: 10px 14px;
            }
            .footer-freq-item i {
                color: var(--red);
                font-size: 18px;
            }
            .footer-freq-item strong {
                display: block;
                font-size: 15px;
                font-weight: 700;
                color: #fff;
            }
            .footer-freq-item span {
                font-size: 11px;
                color: rgba(255, 255, 255, 0.45);
            }

            .footer-live-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(204, 0, 0, 0.12);
                border: 1px solid rgba(204, 0, 0, 0.25);
                color: #ff6060;
                font-size: 12px;
                font-weight: 600;
                padding: 6px 14px;
                border-radius: 100px;
            }

            .footer-bottom {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 8px;
                border-top: 1px solid rgba(255, 255, 255, 0.07);
                margin-top: 40px;
                padding: 20px 0;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.35);
            }
        

/* ══════════════════════════════════════
   RJ CAROUSEL — CUSTOM NAV ARROWS (BOTTOM)
══════════════════════════════════════ */
.rj-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
}

.rj-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid rgba(204, 0, 0, 0.20);
    color: #cc0000;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(204, 0, 0, 0.10);
    transition: background 0.22s, color 0.22s, border-color 0.22s,
                transform 0.22s, box-shadow 0.22s;
    user-select: none;
    flex-shrink: 0;
}

.rj-nav-btn:hover {
    background: #cc0000;
    color: #ffffff;
    border-color: #cc0000;
    box-shadow: 0 8px 28px rgba(204, 0, 0, 0.32);
    transform: scale(1.10);
}

.rj-nav-btn:active {
    transform: scale(0.95);
}

.rj-nav-btn.swiper-button-disabled {
    opacity: 0.30;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .rj-nav-row { margin-top: 24px; gap: 12px; }
    .rj-nav-btn { width: 42px; height: 42px; font-size: 16px; }
}