:root {
                --orange: #2b6cb0;
                --orange-bright: #63b3ed;
                --orange-glow: #cbd5e0;
                --dark: #0a0a0c;
                --dark2: #111114;
                --dark3: #18181d;
                --steel: #1e1e26;
                --text: #e8e8f0;
                --muted: #666680;
                --white: #ffffff;
            }

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

            html {
                scroll-behavior: smooth;
            }

            section {
                scroll-margin-top: 110px;
            }

            body {
                background: var(--dark);
                color: var(--text);
                font-family: 'Cairo', sans-serif;
                overflow-x: hidden;
                cursor: auto;
            }

            /* CUSTOM CURSOR REMOVED — using default system cursor for performance */
            /* ANIMATED BACKGROUND */
            .bg-canvas {
                position: fixed;
                inset: 0;
                z-index: 0;
                background: var(--dark);
                overflow: hidden;
            }

            .bg-canvas::before {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59,130,246,0.20) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 90% 80%, rgba(255,69,0,0.1) 0%, transparent 60%), radial-gradient(ellipse 30% 50% at 10% 60%, rgba(59,130,246,0.07) 0%, transparent 60%);
                animation: bgPulse 8s ease-in-out infinite alternate;
            }

            @keyframes bgPulse {
                0% {
                    opacity: 0.7;
                }

                100% {
                    opacity: 1;
                }
            }

            /* GRID OVERLAY */
            .grid-overlay {
                position: fixed;
                inset: 0;
                z-index: 1;
                background-image: linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px);
                background-size: 60px 60px;
                mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
                animation: gridMove 20s linear infinite;
            }

            @keyframes gridMove {
                0% {
                    background-position: 0 0;
                }

                100% {
                    background-position: 60px 60px;
                }
            }

            /* PARTICLES */
            .particles {
                position: fixed;
                inset: 0;
                z-index: 2;
                pointer-events: none;
            }

            .particle {
                position: absolute;
                width: 2px;
                height: 2px;
                background: var(--orange);
                border-radius: 50%;
                animation: floatUp linear infinite;
                opacity: 0;
            }

            @keyframes floatUp {
                0% {
                    transform: translateY(100vh) translateX(0);
                    opacity: 0;
                }

                10% {
                    opacity: 0.8;
                }

                90% {
                    opacity: 0.3;
                }

                100% {
                    transform: translateY(-10vh) translateX(30px);
                    opacity: 0;
                }
            }

            /* NAVBAR */
            nav {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 100;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 18px 48px;
                background: linear-gradient(180deg, rgba(10,10,12,0.95) 0%, transparent 100%);
                backdrop-filter: blur(10px);
                border-bottom: 1px solid rgba(59,130,246,0.08);
                animation: slideDown 0.8s ease-out;
            }

            @keyframes slideDown {
                from {
                    transform: translateY(-100%);
                    opacity: 0;
                }

                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            .nav-logo-wrap {
                display: flex;
                align-items: center;
                gap: 14px;
            }

            .nav-logo {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                border: 2px solid var(--orange);
                box-shadow: 0 0 16px rgba(59,130,246,0.5);
                animation: logoPulse 3s ease-in-out infinite;
            }

            @keyframes logoPulse {
                0%, 100% {
                    box-shadow: 0 0 16px rgba(59,130,246,0.5);
                }

                50% {
                    box-shadow: 0 0 32px rgba(59,130,246,0.9), 0 0 60px rgba(255,69,0,0.4);
                }
            }

            .nav-name {
                font-family: 'Orbitron', sans-serif;
                font-size: 1.1rem;
                color: var(--white);
                letter-spacing: 2px;
            }

            .nav-name span {
                color: var(--orange);
            }

            .nav-links {
                display: flex;
                gap: 8px;
                list-style: none;
            }

            .nav-links a {
                font-family: 'Cairo', sans-serif;
                font-weight: 600;
                font-size: 0.85rem;
                color: var(--muted);
                text-decoration: none;
                padding: 6px 14px;
                border-radius: 4px;
                letter-spacing: 1px;
                transition: all 0.3s;
                position: relative;
                overflow: hidden;
            }

            .nav-links a::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 1px;
                background: var(--orange);
                transform: scaleX(0);
                transform-origin: right;
                transition: transform 0.3s;
            }

            .nav-links a:hover {
                color: var(--orange);
            }

            .nav-links a:hover::before {
                transform: scaleX(1);
                transform-origin: left;
            }

            a:focus-visible, button:focus-visible {
                outline: 2px solid var(--orange-bright);
                outline-offset: 3px;
            }

            /* HERO */
            .hero {
                position: relative;
                z-index: 10;
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                text-align: center;
                padding: 120px 24px 60px;
                overflow: hidden;
            }

            /* ANIMATED LOGO */
            .logo-container {
                position: relative;
                width: 180px;
                height: 180px;
                margin: 0 auto 40px;
                animation: heroEntry 1s ease-out 0.3s both;
            }

            @keyframes heroEntry {
                from {
                    opacity: 0;
                    transform: scale(0.5) rotate(-20deg);
                }

                to {
                    opacity: 1;
                    transform: scale(1) rotate(0deg);
                }
            }

            /* PULSING RINGS */
            .pulse-ring {
                position: absolute;
                border-radius: 50%;
                border: 2px solid var(--orange);
                animation: pulseRing 2.4s ease-out infinite;
                pointer-events: none;
            }

            .pulse-ring:nth-child(1) {
                inset: -10px;
                animation-delay: 0s;
            }

            .pulse-ring:nth-child(2) {
                inset: -10px;
                animation-delay: 0.8s;
            }

            .pulse-ring:nth-child(3) {
                inset: -10px;
                animation-delay: 1.6s;
            }

            @keyframes pulseRing {
                0% {
                    transform: scale(1);
                    opacity: 0.9;
                    border-color: var(--orange);
                }

                60% {
                    transform: scale(1.35);
                    opacity: 0.3;
                    border-color: var(--orange-glow);
                }

                100% {
                    transform: scale(1.55);
                    opacity: 0;
                    border-color: var(--orange-glow);
                }
            }

            /* SPINNING ACCENT RING */
            .logo-spin-ring {
                position: absolute;
                inset: -6px;
                border-radius: 50%;
                border: 2px solid transparent;
                border-top-color: var(--orange);
                border-right-color: var(--orange-bright);
                animation: spinRing 3s linear infinite;
            }

            .logo-spin-ring2 {
                position: absolute;
                inset: -14px;
                border-radius: 50%;
                border: 1.5px solid transparent;
                border-bottom-color: rgba(59,130,246,0.5);
                border-left-color: rgba(99,179,237,0.3);
                animation: spinRing 6s linear infinite reverse;
            }

            @keyframes spinRing {
                from {
                    transform: rotate(0deg);
                }

                to {
                    transform: rotate(360deg);
                }
            }

            /* GLOW */
            .logo-glow {
                position: absolute;
                inset: -28px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(59,130,246,0.22) 0%, transparent 70%);
                animation: glowBreath 3s ease-in-out infinite;
            }

            @keyframes glowBreath {
                0%, 100% {
                    transform: scale(1);
                    opacity: 0.7;
                }

                50% {
                    transform: scale(1.15);
                    opacity: 1;
                }
            }

            /* LOGO IMAGE — zoom in & out */
            .logo-img-wrap {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                position: relative;
                z-index: 2;
                overflow: hidden;
                border: 2.5px solid rgba(59,130,246,0.6);
                box-shadow: 0 0 0 4px rgba(59,130,246,0.08), 0 0 30px rgba(59,130,246,0.45), inset 0 0 20px rgba(59,130,246,0.08);
            }

            .logo-img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                object-fit: cover;
                display: block;
                animation: logoZoom 3.5s ease-in-out infinite;
                transform-origin: center center;
            }

            @keyframes logoZoom {
                0% {
                    transform: scale(1);
                    filter: brightness(1) drop-shadow(0 0 10px rgba(59,130,246,0.5));
                }

                40% {
                    transform: scale(1.14);
                    filter: brightness(1.12) drop-shadow(0 0 28px rgba(59,130,246,1));
                }

                70% {
                    transform: scale(1.07);
                    filter: brightness(1.06) drop-shadow(0 0 18px rgba(59,130,246,0.7));
                }

                100% {
                    transform: scale(1);
                    filter: brightness(1) drop-shadow(0 0 10px rgba(59,130,246,0.5));
                }
            }

            /* GLITCH TEXT */
            .glitch-wrap {
                animation: heroEntry 1s ease-out 0.5s both;
                margin-bottom: 10px;
            }

            .glitch {
                font-family: 'Orbitron', sans-serif;
                font-size: clamp(3rem, 8vw, 6rem);
                font-weight: 900;
                color: var(--white);
                letter-spacing: 6px;
                position: relative;
                text-shadow: 0 0 40px rgba(59,130,246,0.5);
            }

            .glitch::before, .glitch::after {
                content: attr(data-text);
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                overflow: hidden;
            }

            .glitch::before {
                color: var(--orange);
                animation: glitch1 3s infinite;
                clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
                transform: translate(-3px);
            }

            .glitch::after {
                color: #00d4ff;
                animation: glitch2 3s infinite;
                clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
                transform: translate(3px);
            }

            @keyframes glitch1 {
                0%, 90%, 100% {
                    transform: translate(0);
                    opacity: 0;
                }

                92% {
                    transform: translate(-4px, 1px);
                    opacity: 0.8;
                }

                94% {
                    transform: translate(4px, -1px);
                    opacity: 0.8;
                }

                96% {
                    transform: translate(-2px, 2px);
                    opacity: 0.6;
                }
            }

            @keyframes glitch2 {
                0%, 88%, 100% {
                    transform: translate(0);
                    opacity: 0;
                }

                90% {
                    transform: translate(4px, -2px);
                    opacity: 0.8;
                }

                93% {
                    transform: translate(-4px, 2px);
                    opacity: 0.7;
                }

                95% {
                    transform: translate(2px);
                    opacity: 0.5;
                }
            }

            .hero-subtitle {
                font-size: clamp(0.9rem, 2vw, 1.1rem);
                color: var(--orange);
                font-weight: 600;
                letter-spacing: 6px;
                text-transform: uppercase;
                margin-bottom: 20px;
                animation: heroEntry 1s ease-out 0.7s both;
            }

            .hero-bio {
                font-size: clamp(1rem, 2vw, 1.15rem);
                color: rgba(232,232,240,0.75);
                max-width: 560px;
                line-height: 1.9;
                margin: 0 auto 40px;
                animation: heroEntry 1s ease-out 0.9s both;
                direction: rtl;
            }

            /* STATS */
            .stats-row {
                display: flex;
                gap: 40px;
                justify-content: center;
                flex-wrap: wrap;
                margin-bottom: 48px;
                animation: heroEntry 1s ease-out 1.1s both;
            }

            .stat {
                text-align: center;
                position: relative;
            }

            .stat::after {
                content: '';
                position: absolute;
                right: -20px;
                top: 20%;
                height: 60%;
                width: 1px;
                background: rgba(59,130,246,0.2);
            }

            .stat:last-child::after {
                display: none;
            }

            /* ANIMATED COUNTERS */
            .stat-num {
                font-family: 'Orbitron', sans-serif;
                font-size: 1.8rem;
                font-weight: 700;
                color: var(--orange);
                line-height: 1;
                display: flex;
                align-items: baseline;
                gap: 1px;
            }

            .counter {
                display: inline-block;
                transition: transform 0.1s;
            }

            .counter.pop {
                animation: counterPop 0.15s ease-out;
            }

            @keyframes counterPop {
                0% {
                    transform: scale(1);
                }

                50% {
                    transform: scale(1.18);
                    color: #fff;
                }

                100% {
                    transform: scale(1);
                }
            }

            .stat-label {
                font-size: 0.72rem;
                color: var(--muted);
                letter-spacing: 1px;
                margin-top: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
            }

            /* CTA BUTTONS */
            .cta-group {
                display: flex;
                gap: 16px;
                flex-wrap: wrap;
                justify-content: center;
                animation: heroEntry 1s ease-out 1.3s both;
            }

            .btn-primary {
                font-family: 'Cairo', sans-serif;
                font-weight: 700;
                font-size: 0.95rem;
                letter-spacing: 2px;
                padding: 14px 36px;
                background: linear-gradient(135deg, var(--orange) 0%, var(--orange-glow) 100%);
                color: var(--white);
                border: none;
                border-radius: 4px;
                text-decoration: none;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                transition: transform 0.2s, box-shadow 0.2s;
                box-shadow: 0 0 30px rgba(59,130,246,0.4);
            }

            .btn-primary::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
                transition: left 0.5s;
            }

            .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 0 50px rgba(59,130,246,0.7);
            }

            .btn-primary:hover::before {
                left: 100%;
            }

            .btn-outline {
                font-family: 'Cairo', sans-serif;
                font-weight: 700;
                font-size: 0.95rem;
                letter-spacing: 2px;
                padding: 13px 36px;
                background: transparent;
                color: var(--orange);
                border: 1.5px solid var(--orange);
                border-radius: 4px;
                text-decoration: none;
                cursor: pointer;
                transition: all 0.3s;
            }

            .btn-outline:hover {
                background: rgba(59,130,246,0.1);
                box-shadow: 0 0 20px rgba(59,130,246,0.3);
                transform: translateY(-2px);
            }

            /* SCROLL INDICATOR */
            .scroll-indicator {
                position: absolute;
                bottom: 40px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                animation: heroEntry 1s ease-out 1.8s both;
                opacity: 0.5;
            }

            .scroll-indicator span {
                font-size: 0.65rem;
                letter-spacing: 3px;
                color: var(--muted);
            }

            .scroll-line {
                width: 1px;
                height: 50px;
                background: linear-gradient(to bottom, var(--orange), transparent);
                animation: scrollLine 1.5s ease-in-out infinite;
            }

            @keyframes scrollLine {
                0% {
                    transform: scaleY(0);
                    transform-origin: top;
                    opacity: 1;
                }

                50% {
                    transform: scaleY(1);
                    transform-origin: top;
                    opacity: 1;
                }

                51% {
                    transform: scaleY(1);
                    transform-origin: bottom;
                }

                100% {
                    transform: scaleY(0);
                    transform-origin: bottom;
                    opacity: 0;
                }
            }

            /* SECTION COMMON */
            section {
                position: relative;
                z-index: 10;
                padding: 100px 48px;
            }

            .section-label {
                font-family: 'Orbitron', sans-serif;
                font-size: 0.7rem;
                letter-spacing: 5px;
                color: var(--orange);
                margin-bottom: 12px;
                display: block;
                text-align: center;
            }

            .section-title {
                font-family: 'Orbitron', sans-serif;
                font-size: clamp(1.6rem, 3vw, 2.2rem);
                font-weight: 700;
                color: var(--white);
                text-align: center;
                margin-bottom: 60px;
                position: relative;
            }

            .section-title::after {
                content: '';
                display: block;
                width: 60px;
                height: 2px;
                background: linear-gradient(to right, var(--orange), transparent);
                margin: 16px auto 0;
            }

            .section-intro {
                max-width: 760px;
                margin: -28px auto 40px;
                text-align: center;
                color: rgba(232,232,240,0.72);
                line-height: 1.9;
                font-size: 0.96rem;
            }

            /* SOCIAL GRID */
            .social-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 20px;
                max-width: 1000px;
                margin: 0 auto;
            }

            .social-card {
                background: var(--steel);
                border: 1px solid rgba(59,130,246,0.1);
                border-radius: 12px;
                padding: 32px 24px;
                text-align: center;
                text-decoration: none;
                display: block;
                position: relative;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                cursor: pointer;
            }

            .social-card::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, transparent 60%);
                opacity: 0;
                transition: opacity 0.3s;
            }

            .social-card::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 2px;
                background: linear-gradient(to right, transparent, var(--orange), transparent);
                transform: scaleX(0);
                transition: transform 0.4s;
            }

            .social-card:hover {
                transform: translateY(-8px);
                border-color: rgba(59,130,246,0.5);
                box-shadow: 0 20px 60px rgba(59,130,246,0.15);
            }

            .social-card:hover::before {
                opacity: 1;
            }

            .social-card:hover::after {
                transform: scaleX(1);
            }

            .social-icon {
                width: 56px;
                height: 56px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 16px;
                font-size: 1.4rem;
                font-weight: 700;
                position: relative;
            }

            .social-icon svg {
                width: 28px;
                height: 28px;
            }

            .social-name {
                font-family: 'Orbitron', sans-serif;
                font-size: 0.85rem;
                font-weight: 700;
                color: var(--white);
                letter-spacing: 2px;
                margin-bottom: 6px;
            }

            .social-desc {
                font-size: 0.78rem;
                color: var(--muted);
                line-height: 1.5;
            }

            /* Kick */
            .card-kick .social-icon {
                background: rgba(83, 252, 38, 0.1);
            }

            .card-kick .social-icon svg {
                fill: #53fc26;
            }

            .card-kick:hover {
                border-color: rgba(83,252,38,0.4);
            }

            .card-kick:hover .social-icon {
                box-shadow: 0 0 20px rgba(83,252,38,0.3);
            }

            /* YouTube */
            .card-youtube .social-icon {
                background: rgba(255, 0, 0, 0.1);
            }

            .card-youtube .social-icon svg {
                fill: #ff0000;
            }

            .card-youtube:hover {
                border-color: rgba(255,0,0,0.4);
            }

            .card-youtube:hover .social-icon {
                box-shadow: 0 0 20px rgba(255,0,0,0.3);
            }

            /* X/Twitter */
            .card-x .social-icon {
                background: rgba(255,255,255,0.08);
            }

            .card-x .social-icon svg {
                fill: var(--white);
            }

            .card-x:hover {
                border-color: rgba(255,255,255,0.3);
            }

            /* Tip Streamlabs */
            .card-streamlabs .social-icon {
                background: rgba(128, 255, 200, 0.1);
            }

            .card-streamlabs .social-icon svg {
                fill: #80ffc8;
            }

            .card-streamlabs:hover {
                border-color: rgba(128,255,200,0.4);
            }

            /* Dokan */
            .card-dokan .social-icon {
                background: rgba(255,170,0,0.1);
            }

            .card-dokan .social-icon svg {
                fill: #ffaa00;
            }

            .card-dokan:hover {
                border-color: rgba(255,170,0,0.4);
            }

            .card-dokan:hover .social-icon {
                box-shadow: 0 0 20px rgba(255,170,0,0.3);
            }

            /* Trust */
            .card-trust .social-icon {
                background: rgba(100,180,255,0.1);
            }

            .card-trust .social-icon svg {
                fill: #64b4ff;
            }

            .card-trust:hover {
                border-color: rgba(100,180,255,0.4);
            }

            /* Instagram */
            .card-instagram .social-icon {
                background: rgba(225,48,108,0.12);
            }

            .card-instagram .social-icon svg {
                fill: url(#igGrad);
            }

            .card-instagram:hover {
                border-color: rgba(225,48,108,0.5);
            }

            .card-instagram:hover .social-icon {
                box-shadow: 0 0 20px rgba(225,48,108,0.4);
            }

            .card-support .social-icon {
                background: rgba(246,196,83,0.12);
            }

            .card-support .social-icon svg {
                fill: #f6c453;
            }

            .card-support:hover {
                border-color: rgba(246,196,83,0.45);
            }

            .card-support:hover .social-icon {
                box-shadow: 0 0 20px rgba(246,196,83,0.28);
            }

            /* SUPPORT SECTION */
            .support-section {
                background: linear-gradient(135deg, var(--dark2) 0%, var(--dark3) 100%);
                border-top: 1px solid rgba(59,130,246,0.1);
                border-bottom: 1px solid rgba(59,130,246,0.1);
            }

            .support-cards {
                display: flex;
                gap: 20px;
                justify-content: center;
                flex-wrap: wrap;
                max-width: 800px;
                margin: 0 auto;
            }

            .support-card {
                background: var(--steel);
                border: 1px solid rgba(59,130,246,0.15);
                border-radius: 12px;
                padding: 28px 32px;
                text-align: center;
                text-decoration: none;
                flex: 1;
                min-width: 180px;
                max-width: 220px;
                transition: all 0.3s;
                position: relative;
                overflow: hidden;
            }

            .support-card::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, rgba(59,130,246,0.1), transparent);
                opacity: 0;
                transition: opacity 0.3s;
            }

            .support-card:hover {
                transform: translateY(-4px);
                border-color: var(--orange);
                box-shadow: 0 15px 40px rgba(59,130,246,0.2);
            }

            .support-card:hover::before {
                opacity: 1;
            }

            .support-amount {
                font-family: 'Orbitron', sans-serif;
                font-size: 1.8rem;
                font-weight: 700;
                color: var(--orange);
                margin-bottom: 8px;
            }

            .support-label {
                font-size: 0.8rem;
                color: var(--muted);
                letter-spacing: 1px;
            }

            /* LIVE BADGE */
            .live-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(255, 60, 60, 0.15);
                border: 1px solid rgba(255,60,60,0.4);
                border-radius: 20px;
                padding: 6px 16px;
                font-size: 0.75rem;
                font-weight: 700;
                letter-spacing: 2px;
                color: #ff4444;
                margin-bottom: 24px;
                animation: heroEntry 1s ease-out 0.2s both;
            }

            .live-dot {
                width: 8px;
                height: 8px;
                background: #ff4444;
                border-radius: 50%;
                animation: livePulse 1.2s ease-in-out infinite;
            }

            @keyframes livePulse {
                0%, 100% {
                    opacity: 1;
                    transform: scale(1);
                }

                50% {
                    opacity: 0.4;
                    transform: scale(0.7);
                }
            }

            /* FOOTER */
            footer {
                position: relative;
                z-index: 10;
                padding: 40px 48px;
                text-align: center;
                border-top: 1px solid rgba(59,130,246,0.08);
                background: rgba(0,0,0,0.4);
            }

            footer p {
                font-size: 0.78rem;
                color: var(--muted);
                letter-spacing: 1px;
            }

            footer span {
                color: var(--orange);
            }

            /* VISIT COUNTER */
            .visit-counter {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                margin-top: 14px;
                padding: 5px 14px;
                border: 1px solid rgba(59,130,246,0.2);
                border-radius: 20px;
                font-size: 0.72rem;
                color: var(--muted);
                letter-spacing: 1px;
                background: rgba(59,130,246,0.05);
            }

            .visit-icon {
                font-size: 0.85rem;
            }

            .visit-num {
                font-family: 'Orbitron', sans-serif;
                font-size: 0.78rem;
                color: var(--orange);
                font-weight: 700;
                min-width: 40px;
            }

            /* DIAGONAL DIVIDER */
            .divider {
                position: relative;
                z-index: 10;
                height: 80px;
                overflow: hidden;
            }

            .divider svg {
                width: 100%;
                height: 100%;
            }

            /* ABOUT SECTION */
            .about-inner {
                max-width: 800px;
                margin: 0 auto;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 48px;
                align-items: center;
            }

            @media (max-width: 600px) {
                .about-inner {
                    grid-template-columns: 1fr;
                }

                .section-intro {
                    margin: -18px auto 32px;
                    font-size: 0.9rem;
                }
            }

            .about-visual {
                position: relative;
            }

            .about-logo-wrap {
                width: 200px;
                height: 200px;
                margin: 0 auto;
                position: relative;
            }

            .about-logo-bg {
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(59,130,246,0.2) 0%, transparent 70%);
                animation: glowPulse 3s ease-in-out infinite;
            }

            .about-logo-img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                object-fit: cover;
                border: 3px solid rgba(59,130,246,0.5);
                position: relative;
                z-index: 1;
            }

            .about-text h3 {
                font-family: 'Orbitron', sans-serif;
                font-size: 1.1rem;
                color: var(--white);
                margin-bottom: 16px;
            }

            .about-text p {
                color: rgba(232,232,240,0.7);
                line-height: 1.9;
                font-size: 0.95rem;
                margin-bottom: 12px;
                direction: rtl;
            }

            .about-tag {
                display: inline-block;
                padding: 4px 12px;
                background: rgba(59,130,246,0.12);
                border: 1px solid rgba(59,130,246,0.25);
                border-radius: 20px;
                font-size: 0.75rem;
                color: var(--orange);
                margin: 4px;
                letter-spacing: 1px;
            }

            /* NOISE TEXTURE OVERLAY */
            .noise {
                position: fixed;
                inset: 0;
                z-index: 3;
                pointer-events: none;
                opacity: 0.02;
                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");
            }

            /* SCANLINE EFFECT */
            .scanlines {
                position: fixed;
                inset: 0;
                z-index: 4;
                pointer-events: none;
                background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px );
            }

            /* RESPONSIVE */
            @media (max-width: 768px) {
                nav {
                    padding: 16px 24px;
                }

                .nav-links {
                    display: none;
                }

                section {
                    padding: 70px 24px;
                }

                .stats-row {
                    gap: 24px;
                }

                footer {
                    padding: 32px 24px;
                }
            }

            /* ANIMATE ON SCROLL */
            .fade-in {
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.8s ease, transform 0.8s ease;
            }

            .fade-in.visible {
                opacity: 1;
                transform: translateY(0);
            }

            /* ── YOUTUBE CLICK CARDS ───────────────────────── */
            .yt-thumb-wrap {
                position: relative;
                height: 220px;
                overflow: hidden;
                flex-shrink: 0;
            }

            .yt-thumb-small {
                height: 160px;
            }

            .yt-thumb-bg {
                width: 100%;
                height: 100%;
                background: radial-gradient(ellipse at 50% 30%, rgba(255,0,0,0.18) 0%, transparent 65%), linear-gradient(135deg, #0f0f14 0%, #1a0a0a 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                overflow: hidden;
                transition: background 0.3s;
            }

            .yt-click-card:hover .yt-thumb-bg {
                background: radial-gradient(ellipse at 50% 30%, rgba(255,0,0,0.32) 0%, transparent 65%), linear-gradient(135deg, #120808 0%, #1f0a0a 100%);
            }

            /* animated scan line on hover */
            .yt-thumb-bg::before {
                content: '';
                position: absolute;
                top: -100%;
                left: 0;
                right: 0;
                height: 60%;
                background: linear-gradient(to bottom, transparent, rgba(255,0,0,0.06), transparent);
                animation: ytScan 3s linear infinite;
            }

            @keyframes ytScan {
                from {
                    top: -60%;
                }

                to {
                    top: 160%;
                }
            }

            .yt-play-btn {
                width: 72px;
                height: 72px;
                background: rgba(255,0,0,0.9);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                z-index: 2;
                box-shadow: 0 0 0 8px rgba(255,0,0,0.15), 0 0 30px rgba(255,0,0,0.5);
                animation: ytPlayPulse 2s ease-in-out infinite;
                transition: transform 0.2s;
            }

            .yt-click-card:hover .yt-play-btn {
                transform: scale(1.12);
            }

            .yt-play-small {
                width: 52px;
                height: 52px;
            }

            .yt-play-btn svg {
                width: 32px;
                height: 32px;
                fill: #fff;
                margin-left: 4px;
            }

            .yt-play-small svg {
                width: 24px;
                height: 24px;
            }

            @keyframes ytPlayPulse {
                0%,100% {
                    box-shadow: 0 0 0 8px rgba(255,0,0,0.15), 0 0 30px rgba(255,0,0,0.4);
                }

                50% {
                    box-shadow: 0 0 0 14px rgba(255,0,0,0.08), 0 0 50px rgba(255,0,0,0.7);
                }
            }

            .yt-channel-info {
                position: absolute;
                bottom: 12px;
                left: 14px;
                display: flex;
                align-items: center;
                gap: 10px;
                z-index: 2;
            }

            .yt-avatar {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                border: 2px solid rgba(255,255,255,0.3);
                overflow: hidden;
                background: var(--steel);
            }

            .yt-avatar img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .yt-channel-name {
                font-family: 'Orbitron', sans-serif;
                font-size: 0.72rem;
                font-weight: 700;
                color: #fff;
                letter-spacing: 1px;
            }

            .yt-channel-sub {
                font-size: 0.65rem;
                color: rgba(255,255,255,0.5);
                margin-top: 2px;
            }

            .yt-watch-flash {
                position: absolute;
                top: 12px;
                right: 12px;
                z-index: 3;
                background: rgba(255,0,0,0.85);
                color: #fff;
                font-family: 'Orbitron', sans-serif;
                font-size: 0.6rem;
                font-weight: 700;
                letter-spacing: 1px;
                padding: 5px 12px;
                border-radius: 20px;
                animation: watchFlash 1.6s ease-in-out infinite;
            }

            @keyframes watchFlash {
                0%,100% {
                    opacity: 1;
                    transform: scale(1);
                }

                50% {
                    opacity: 0.5;
                    transform: scale(0.96);
                }
            }

            /* KICK flashing Watch Now button */
            .kick-flash-btn {
                animation: kickBtnFlash 1.4s ease-in-out infinite;
                font-size: 0.75rem !important;
                padding: 9px 20px !important;
            }

            @keyframes kickBtnFlash {
                0%,100% {
                    background: rgba(83,252,38,0.15);
                    box-shadow: 0 0 10px rgba(83,252,38,0.3);
                }

                50% {
                    background: rgba(83,252,38,0.35);
                    box-shadow: 0 0 24px rgba(83,252,38,0.7), 0 0 40px rgba(83,252,38,0.3);
                }
            }

            .mixed-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: auto;
                gap: 18px;
                max-width: 1140px;
                margin: 0 auto;
            }

            /* featured video: spans 2 cols */
            .mix-featured {
                grid-column: span 2;
            }

            /* tall kick card: spans 1 col but 2 rows */
            .mix-tall {
                grid-row: span 2;
            }

            /* second yt: 1 col */
            .mix-yt2 {
                grid-column: span 1;
            }

            @media (max-width: 900px) {
                .mixed-grid {
                    grid-template-columns: 1fr 1fr;
                }

                .mix-featured {
                    grid-column: span 2;
                }

                .mix-tall {
                    grid-row: span 1;
                }
            }

            @media (max-width: 560px) {
                .mixed-grid {
                    grid-template-columns: 1fr;
                }

                .mix-featured, .mix-tall {
                    grid-column: span 1;
                    grid-row: span 1;
                }
            }

            .mix-card {
                background: var(--steel);
                border: 1px solid rgba(59,130,246,0.1);
                border-radius: 14px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                transition: transform 0.35s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow 0.35s, border-color 0.35s;
            }

            .mix-card:hover {
                transform: translateY(-7px);
                border-color: rgba(59,130,246,0.45);
                box-shadow: 0 24px 60px rgba(59,130,246,0.13);
            }

            /* video embed */
            .video-wrap {
                position: relative;
                padding-bottom: 56.25%;
                height: 0;
                overflow: hidden;
                background: #07070a;
                flex-shrink: 0;
            }

            .video-wrap iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: none;
            }

            .mix-overlay {
                padding: 14px 16px;
                background: rgba(10,10,14,0.7);
            }

            .mix-overlay p {
                font-size: 0.8rem;
                color: var(--muted);
                margin: 4px 0 6px;
            }

            .mix-link {
                font-family: 'Orbitron',sans-serif;
                font-size: 0.65rem;
                font-weight: 700;
                letter-spacing: 1px;
                color: var(--orange);
                text-decoration: none;
                transition: opacity 0.2s;
            }

            .mix-link:hover {
                opacity: 0.7;
            }

            /* visual panels */
            .mix-visual {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 180px;
                position: relative;
                overflow: hidden;
            }

            .mix-body {
                padding: 16px 18px 20px;
            }

            .mix-body h4 {
                font-family: 'Orbitron',sans-serif;
                font-size: 0.85rem;
                font-weight: 700;
                color: var(--white);
                margin: 6px 0 4px;
                letter-spacing: 1px;
            }

            .mix-body p {
                font-size: 0.8rem;
                color: var(--muted);
                margin: 0 0 12px;
                line-height: 1.5;
            }

            /* tags */
            .mix-tag {
                font-family: 'Orbitron',sans-serif;
                font-size: 0.6rem;
                font-weight: 700;
                letter-spacing: 2px;
                padding: 3px 10px;
                border-radius: 20px;
                display: inline-block;
            }

            .yt-tag {
                background: rgba(255,0,0,0.15);
                color: #ff4444;
                border: 1px solid rgba(255,0,0,0.25);
            }

            .kick-tag {
                background: rgba(83,252,38,0.12);
                color: #53fc26;
                border: 1px solid rgba(83,252,38,0.2);
            }

            .ig-tag {
                background: rgba(188,24,136,0.12);
                color: #e1306c;
                border: 1px solid rgba(188,24,136,0.2);
            }

            .x-tag {
                background: rgba(255,255,255,0.07);
                color: #fff;
                border: 1px solid rgba(255,255,255,0.12);
            }

            .dokan-tag {
                background: rgba(255,170,0,0.12);
                color: #ffaa00;
                border: 1px solid rgba(255,170,0,0.2);
            }

            /* buttons */
            .mix-btn {
                display: inline-block;
                font-family: 'Orbitron',sans-serif;
                font-size: 0.68rem;
                font-weight: 700;
                letter-spacing: 1px;
                padding: 7px 18px;
                border-radius: 5px;
                text-decoration: none;
                transition: all 0.3s;
                cursor: pointer;
            }

            .kick-btn {
                background: rgba(83,252,38,0.12);
                color: #53fc26;
                border: 1px solid rgba(83,252,38,0.4);
            }

            .kick-btn:hover {
                background: rgba(83,252,38,0.25);
                box-shadow: 0 0 16px rgba(83,252,38,0.3);
            }

            .ig-btn {
                background: rgba(188,24,136,0.12);
                color: #e1306c;
                border: 1px solid rgba(188,24,136,0.3);
            }

            .ig-btn:hover {
                background: rgba(188,24,136,0.25);
                box-shadow: 0 0 16px rgba(188,24,136,0.3);
            }

            .x-btn {
                background: rgba(255,255,255,0.06);
                color: #fff;
                border: 1px solid rgba(255,255,255,0.2);
            }

            .x-btn:hover {
                background: rgba(255,255,255,0.12);
            }

            .dokan-btn {
                background: rgba(255,170,0,0.12);
                color: #ffaa00;
                border: 1px solid rgba(255,170,0,0.3);
            }

            .dokan-btn:hover {
                background: rgba(255,170,0,0.25);
                box-shadow: 0 0 16px rgba(255,170,0,0.3);
            }

            /* KICK visual */
            .kick-vis {
                background: radial-gradient(ellipse at 50% 30%, rgba(83,252,38,0.12) 0%, #07070a 70%);
                flex-direction: column;
                gap: 0;
            }

            .kick-rings {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .k-ring {
                position: absolute;
                border-radius: 50%;
                border: 1px solid rgba(83,252,38,0.25);
                animation: kRingPulse 2.5s ease-out infinite;
            }

            .k-ring1 {
                width: 80px;
                height: 80px;
                animation-delay: 0s;
            }

            .k-ring2 {
                width: 120px;
                height: 120px;
                animation-delay: 0.6s;
            }

            .k-ring3 {
                width: 160px;
                height: 160px;
                animation-delay: 1.2s;
            }

            @keyframes kRingPulse {
                0% {
                    opacity: 0.8;
                    transform: scale(1);
                }

                100% {
                    opacity: 0;
                    transform: scale(1.4);
                }
            }

            .kick-big-icon {
                width: 56px;
                height: 56px;
                position: relative;
                z-index: 2;
                fill: #53fc26;
                filter: drop-shadow(0 0 16px rgba(83,252,38,0.7));
                animation: kickPulse 2s ease-in-out infinite;
            }

            @keyframes kickPulse {
                0%,100% {
                    filter: drop-shadow(0 0 10px rgba(83,252,38,0.5));
                    transform: scale(1);
                }

                50% {
                    filter: drop-shadow(0 0 26px rgba(83,252,38,1));
                    transform: scale(1.1);
                }
            }

            .live-pill {
                position: absolute;
                top: 12px;
                right: 12px;
                z-index: 3;
                background: rgba(255,50,50,0.9);
                color: #fff;
                font-family: 'Orbitron',sans-serif;
                font-size: 0.55rem;
                font-weight: 700;
                letter-spacing: 2px;
                padding: 4px 10px;
                border-radius: 20px;
                animation: livePillBlink 1.4s ease-in-out infinite;
            }

            @keyframes livePillBlink {
                0%,100% {
                    opacity: 1;
                }

                50% {
                    opacity: 0.5;
                }
            }

            /* INSTAGRAM visual */
            .ig-vis {
                background: linear-gradient(135deg, rgba(240,148,51,0.1) 0%, rgba(188,24,136,0.1) 100%);
                padding: 16px;
            }

            .ig-mosaic {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto auto;
                gap: 6px;
                width: 100%;
            }

            .ig-tile {
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.4rem;
                min-height: 54px;
                animation: igTileGlow 3s ease-in-out infinite;
                transition: transform 0.3s;
            }

            .ig-tile:hover {
                transform: scale(1.05);
            }

            .ig-tile:nth-child(2) {
                animation-delay: 0.4s;
            }

            .ig-tile:nth-child(3) {
                animation-delay: 0.8s;
            }

            .ig-tile:nth-child(4) {
                animation-delay: 1.2s;
            }

            .ig-tile-wide {
                grid-column: span 2;
                font-size: 0.75rem;
                font-weight: 700;
                letter-spacing: 1px;
                color: rgba(255,255,255,0.9);
                min-height: 38px;
            }

            @keyframes igTileGlow {
                0%,100% {
                    opacity: 0.7;
                }

                50% {
                    opacity: 1;
                }
            }

            /* X visual */
            .x-vis {
                background: rgba(255,255,255,0.02);
                flex-direction: column;
                gap: 12px;
            }

            .x-big-icon {
                width: 52px;
                height: 52px;
                fill: rgba(255,255,255,0.8);
                position: relative;
                z-index: 2;
            }

            .x-lines {
                display: flex;
                flex-direction: column;
                gap: 6px;
                width: 100px;
            }

            .x-line {
                height: 2px;
                border-radius: 2px;
                background: linear-gradient(to right, rgba(255,255,255,0.2), transparent);
                animation: xLineScan 2s ease-in-out infinite;
            }

            .x-line:nth-child(2) {
                animation-delay: 0.3s;
                width: 70%;
            }

            .x-line:nth-child(3) {
                animation-delay: 0.6s;
                width: 50%;
            }

            @keyframes xLineScan {
                0%,100% {
                    opacity: 0.3;
                    transform: scaleX(1);
                }

                50% {
                    opacity: 0.8;
                    transform: scaleX(1.1);
                }
            }

            /* DOKAN visual */
            .dokan-vis {
                background: radial-gradient(ellipse at 50% 40%, rgba(255,170,0,0.12) 0%, #07070a 70%);
            }

            .dokan-star-wrap {
                position: relative;
                width: 80px;
                height: 80px;
            }

            .dokan-star {
                position: absolute;
                width: 60px;
                height: 60px;
                fill: #ffaa00;
                filter: drop-shadow(0 0 12px rgba(255,170,0,0.7));
                top: 10px;
                left: 10px;
                animation: starSpin 6s linear infinite;
            }

            .dokan-star2 {
                width: 36px;
                height: 36px;
                fill: rgba(255,200,0,0.5);
                top: 22px;
                left: 22px;
                animation-direction: reverse;
                animation-duration: 4s;
            }

            @keyframes starSpin {
                from {
                    transform: rotate(0deg);
                }

                to {
                    transform: rotate(360deg);
                }
            }

            /* ══ KICK LIVE / OFFLINE ══════════════════════════ */
            .kick-live-wrap {
                max-width: 860px;
                margin: 0 auto 64px;
            }

            .kick-live-header {
                display: flex;
                align-items: center;
                gap: 10px;
                background: rgba(83,252,38,0.08);
                border: 1px solid rgba(83,252,38,0.3);
                border-radius: 10px 10px 0 0;
                padding: 12px 20px;
                font-family: 'Orbitron',sans-serif;
                font-size: 0.78rem;
                font-weight: 700;
                letter-spacing: 2px;
                color: #53fc26;
            }

            .kick-red-dot {
                width: 10px;
                height: 10px;
                background: #ff3333;
                border-radius: 50%;
                flex-shrink: 0;
                box-shadow: 0 0 8px rgba(255,50,50,0.8);
                animation: livePulse 1s ease-in-out infinite;
            }

            .kick-viewer-pill {
                margin-left: auto;
                font-size: 0.7rem;
                background: rgba(83,252,38,0.15);
                padding: 3px 10px;
                border-radius: 20px;
                border: 1px solid rgba(83,252,38,0.3);
            }

            .kick-iframe-wrap {
                position: relative;
                padding-bottom: 56.25%;
                height: 0;
                overflow: hidden;
                background: #07070a;
                border: 1px solid rgba(83,252,38,0.2);
                border-top: none;
            }

            .kick-iframe-wrap iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: none;
            }

            .kick-live-btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-family: 'Orbitron',sans-serif;
                font-size: 0.78rem;
                font-weight: 700;
                letter-spacing: 2px;
                padding: 12px 32px;
                border-radius: 6px;
                background: rgba(83,252,38,0.15);
                color: #53fc26;
                border: 1.5px solid rgba(83,252,38,0.5);
                text-decoration: none;
                animation: kickBtnFlash 1.4s ease-in-out infinite;
                transition: transform 0.2s;
            }

            .kick-live-btn:hover {
                transform: scale(1.04);
            }

            @keyframes kickBtnFlash {
                0%,100% {
                    background: rgba(83,252,38,0.12);
                    box-shadow: 0 0 12px rgba(83,252,38,0.3);
                }

                50% {
                    background: rgba(83,252,38,0.28);
                    box-shadow: 0 0 28px rgba(83,252,38,0.6);
                }
            }

            .kick-offline-wrap {
                background: var(--steel);
                border: 1px solid rgba(59,130,246,0.1);
                border-radius: 14px;
                overflow: hidden;
            }

            .kick-offline-inner {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 52px 32px;
                gap: 16px;
                position: relative;
                background: radial-gradient(ellipse at 50% 30%, rgba(83,252,38,0.06) 0%, transparent 65%);
            }

            .kick-off-rings {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                pointer-events: none;
            }

            .kick-off-icon {
                width: 52px;
                height: 52px;
                fill: rgba(83,252,38,0.5);
                position: relative;
                z-index: 2;
            }

            .kick-off-badge {
                font-family: 'Orbitron',sans-serif;
                font-size: 0.7rem;
                font-weight: 700;
                letter-spacing: 3px;
                color: rgba(255,255,255,0.35);
                background: rgba(255,255,255,0.05);
                padding: 5px 16px;
                border-radius: 20px;
                border: 1px solid rgba(255,255,255,0.08);
                z-index: 2;
            }

            .kick-off-msg {
                font-size: 0.85rem;
                color: var(--muted);
                text-align: center;
                max-width: 400px;
                z-index: 2;
            }

            .kick-follow-btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                z-index: 2;
                font-family: 'Orbitron',sans-serif;
                font-size: 0.72rem;
                font-weight: 700;
                letter-spacing: 1px;
                padding: 10px 24px;
                border-radius: 6px;
                background: rgba(83,252,38,0.1);
                color: #53fc26;
                border: 1px solid rgba(83,252,38,0.35);
                text-decoration: none;
                transition: all 0.3s;
            }

            .kick-follow-btn:hover {
                background: rgba(83,252,38,0.22);
                box-shadow: 0 0 18px rgba(83,252,38,0.35);
            }

            /* ══ CLIPS PLAYER ══════════════════════════════════ */
            .clips-section,.ig-feed-section {
                max-width: 1000px;
                margin: 0 auto 64px;
            }

            .clips-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                flex-wrap: wrap;
                gap: 12px;
            }

            .clips-title {
                font-family: 'Orbitron',sans-serif;
                font-size: 1rem;
                font-weight: 700;
                color: var(--white);
                letter-spacing: 2px;
            }

            .clips-shuffle-btn {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                font-family: 'Orbitron',sans-serif;
                font-size: 0.68rem;
                font-weight: 700;
                letter-spacing: 1px;
                padding: 8px 18px;
                border-radius: 5px;
                background: rgba(59,130,246,0.1);
                color: var(--orange);
                border: 1px solid rgba(59,130,246,0.35);
                cursor: pointer;
                text-decoration: none;
                transition: all 0.3s;
            }

            .clips-shuffle-btn:hover {
                background: rgba(59,130,246,0.22);
                box-shadow: 0 0 14px rgba(59,130,246,0.3);
            }

            .clips-layout {
                display: grid;
                grid-template-columns: 1fr 200px;
                gap: 16px;
            }

            @media(max-width: 700px) {
                .clips-layout {
                    grid-template-columns:1fr;
                }
            }

            .clip-iframe-wrap {
                position: relative;
                padding-bottom: 56.25%;
                height: 0;
                overflow: hidden;
                background: #07070a;
                border-radius: 10px;
                border: 1px solid rgba(59,130,246,0.15);
            }

            .clip-iframe-wrap iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: none;
                border-radius: 10px;
            }

            .clip-meta-bar {
                display: flex;
                align-items: center;
                gap: 10px;
                flex-wrap: wrap;
                padding: 10px 4px;
            }

            .clip-src-tag {
                font-family: 'Orbitron',sans-serif;
                font-size: 0.6rem;
                font-weight: 700;
                letter-spacing: 2px;
                padding: 3px 10px;
                border-radius: 20px;
                background: rgba(255,0,0,0.15);
                color: #ff4444;
                border: 1px solid rgba(255,0,0,0.2);
                flex-shrink: 0;
            }

            .clip-title {
                color: var(--muted);
                flex: 1;
                font-size: 0.8rem;
            }

            .clip-open-link {
                font-family: 'Orbitron',sans-serif;
                font-size: 0.65rem;
                color: var(--orange);
                text-decoration: none;
                flex-shrink: 0;
                transition: opacity 0.2s;
            }

            .clip-open-link:hover {
                opacity: 0.7;
            }

            .clips-thumbs {
                display: flex;
                flex-direction: column;
                gap: 10px;
                overflow-y: auto;
                max-height: 320px;
            }

            .clip-thumb {
                border-radius: 8px;
                overflow: hidden;
                cursor: pointer;
                border: 2px solid transparent;
                background: var(--steel);
                transition: border-color 0.2s, transform 0.2s;
                aspect-ratio: 16/9;
                position: relative;
            }

            .clip-thumb:hover,.clip-thumb.active {
                border-color: var(--orange);
                transform: scale(1.03);
            }

            .clip-thumb-bg {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, #0a0a0c 80%);
                font-size: 1.4rem;
            }

            .clip-thumb-label {
                position: absolute;
                bottom: 4px;
                left: 6px;
                right: 6px;
                font-size: 0.58rem;
                color: rgba(255,255,255,0.6);
                font-family: 'Cairo',sans-serif;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* ══ INSTAGRAM FALLBACK GRID ═══════════════════════ */
            .ig-widget-wrap {
                border-radius: 12px;
                overflow: hidden;
                border: 1px solid rgba(225,48,108,0.15);
                min-height: 160px;
            }

            .ig-fallback-grid {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 10px;
            }

            @media(max-width: 560px) {
                .ig-fallback-grid {
                    grid-template-columns:repeat(2,1fr);
                }
            }

            .ig-fallback-card {
                border-radius: 10px;
                overflow: hidden;
                display: block;
                aspect-ratio: 1;
                position: relative;
            }

            .ig-fallback-card-wide {
                grid-column: span 3;
                aspect-ratio: auto;
                height: 60px;
            }

            @media(max-width: 560px) {
                .ig-fallback-card-wide {
                    grid-column:span 2;
                }
            }

            .ig-fallback-inner {
                width: 100%;
                height: 100%;
                overflow: hidden;
                transition: transform 0.3s;
            }

            .ig-fallback-inner img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .ig-fallback-card:hover .ig-fallback-inner {
                transform: scale(1.06);
            }

            .ig-fallback-overlay {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(0,0,0,0.35);
                font-size: 1.8rem;
                opacity: 0;
                transition: opacity 0.3s;
            }

            .ig-fallback-card:hover .ig-fallback-overlay {
                opacity: 1;
            }

            .ig-f1 {
                background: linear-gradient(135deg,#1e1e26,#2a1a2a);
            }

            .ig-f2 {
                background: linear-gradient(135deg,#2b6cb015,#cbd5e025);
            }

            .ig-f3 {
                background: linear-gradient(135deg,#1a2a1a,#0a1a0a);
            }

            .ig-f4 {
                background: linear-gradient(135deg,#1a1a2a,#0a0a1a);
            }

            .ig-f5 {
                background: linear-gradient(135deg,#2a1a0a,#1a0a0a);
            }

            .ig-f6 {
                background: linear-gradient(135deg,rgba(188,24,136,0.15),rgba(131,58,180,0.15));
            }

            /* TikTok */
            .card-tiktok .social-icon {
                background: rgba(105,201,208,0.1);
            }

            .card-tiktok .social-icon svg {
                fill: #69C9D0;
            }

            .card-tiktok:hover {
                border-color: rgba(105,201,208,0.4);
            }

            .card-tiktok:hover .social-icon {
                box-shadow: 0 0 20px rgba(105,201,208,0.3);
            }

            /* WhatsApp */
            .card-whatsapp .social-icon {
                background: rgba(37,211,102,0.1);
            }

            .card-whatsapp .social-icon svg {
                fill: #25D366;
            }

            .card-whatsapp:hover {
                border-color: rgba(37,211,102,0.4);
            }

            .card-whatsapp:hover .social-icon {
                box-shadow: 0 0 20px rgba(37,211,102,0.3);
            }

            /* Discord */
            .card-discord .social-icon {
                background: rgba(88,101,242,0.12);
            }

            .card-discord .social-icon svg {
                fill: #5865F2;
            }

            .card-discord:hover {
                border-color: rgba(88,101,242,0.5);
            }

            .card-discord:hover .social-icon {
                box-shadow: 0 0 20px rgba(88,101,242,0.35);
            }

            /* ══ NEW MEDIA LAYOUT ═══════════════════════════════ */
            .media-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 24px;
                max-width: 1100px;
                margin: 0 auto 40px;
            }

            @media(max-width: 768px) {
                .media-row {
                    grid-template-columns:1fr;
                }
            }

            .media-row-2 {
                grid-template-columns: 1fr 1fr;
            }

            @media(max-width: 768px) {
                .media-row-2 {
                    grid-template-columns:1fr;
                }
            }

            .media-block {
                background: var(--steel);
                border: 1px solid rgba(59,130,246,0.1);
                border-radius: 14px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }

            .media-block-label {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 10px 16px;
                font-family: 'Orbitron', sans-serif;
                font-size: 0.65rem;
                font-weight: 700;
                letter-spacing: 2px;
                border-bottom: 1px solid rgba(255,255,255,0.05);
            }

            .kick-label {
                background: rgba(83,252,38,0.06);
                color: #53fc26;
            }

            .yt-label {
                background: rgba(255,68,68,0.06);
                color: #ff4444;
            }

            .ig-label {
                background: rgba(188,24,136,0.06);
                color: #e1306c;
            }

            .x-label {
                background: rgba(255,255,255,0.03);
                color: rgba(255,255,255,0.6);
            }

            .status-badge {
                margin-left: auto;
                font-size: 0.58rem;
                letter-spacing: 1px;
                padding: 2px 8px;
                border-radius: 20px;
                font-family: 'Orbitron', sans-serif;
                font-weight: 700;
            }

            .live-badge-on {
                background: rgba(255,50,50,0.2);
                color: #ff4444;
                border: 1px solid rgba(255,50,50,0.4);
                animation: livePulse 1s infinite;
            }

            .offline-badge {
                background: rgba(255,255,255,0.05);
                color: rgba(255,255,255,0.3);
                border: 1px solid rgba(255,255,255,0.08);
            }

            /* YouTube embed */
            .yt-embed-wrap {
                position: relative;
                padding-bottom: 56.25%;
                height: 0;
                overflow: hidden;
                background: #07070a;
            }

            .yt-embed-wrap iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: none;
            }

            .yt-more-strip {
                padding: 10px 14px;
            }

            .yt-more-btn {
                font-family: 'Orbitron',sans-serif;
                font-size: 0.65rem;
                font-weight: 700;
                letter-spacing: 1px;
                color: #ff4444;
                text-decoration: none;
                background: rgba(255,68,68,0.08);
                padding: 6px 14px;
                border-radius: 4px;
                border: 1px solid rgba(255,68,68,0.2);
                transition: all 0.3s;
            }

            .yt-more-btn:hover {
                background: rgba(255,68,68,0.18);
            }

            /* Instagram widget */
            .ig-widget-container {
                padding: 10px;
                flex: 1;
            }

            .ig-fallback-grid {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 6px;
            }

            .ig-tile-card {
                border-radius: 8px;
                aspect-ratio: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.6rem;
                text-decoration: none;
                position: relative;
                overflow: hidden;
                transition: transform 0.3s;
            }

            .ig-tile-card:hover {
                transform: scale(1.06);
            }

            .ig-tile-hover {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(0,0,0,0.5);
                font-family: 'Orbitron',sans-serif;
                font-size: 0.6rem;
                color: #fff;
                letter-spacing: 1px;
                opacity: 0;
                transition: opacity 0.3s;
            }

            .ig-tile-card:hover .ig-tile-hover {
                opacity: 1;
            }

            .ig-f1 {
                background: linear-gradient(135deg,#f09433,#e6683c);
            }

            .ig-f2 {
                background: linear-gradient(135deg,#e6683c,#dc2743);
            }

            .ig-f3 {
                background: linear-gradient(135deg,#dc2743,#cc2366);
            }

            .ig-f4 {
                background: linear-gradient(135deg,#cc2366,#bc1888);
            }

            .ig-f5 {
                background: linear-gradient(135deg,#bc1888,#833ab4);
            }

            .ig-f6 {
                background: linear-gradient(135deg,#833ab4,#405de6);
            }

            .platform-follow-btn {
                display: block;
                text-align: center;
                margin: 0;
                padding: 10px 14px;
                font-family: 'Orbitron',sans-serif;
                font-size: 0.65rem;
                font-weight: 700;
                letter-spacing: 1px;
                text-decoration: none;
                border-top: 1px solid rgba(255,255,255,0.05);
                transition: all 0.3s;
            }

            .ig-follow-btn {
                color: #e1306c;
                background: rgba(188,24,136,0.06);
            }

            .ig-follow-btn:hover {
                background: rgba(188,24,136,0.15);
            }

            .x-follow-btn {
                color: rgba(255,255,255,0.6);
                background: rgba(255,255,255,0.03);
            }

            .x-follow-btn:hover {
                background: rgba(255,255,255,0.08);
            }

            .tiktok-follow-btn {
                color: #69C9D0;
                background: rgba(105,201,208,0.08);
            }

            .tiktok-follow-btn:hover {
                background: rgba(105,201,208,0.18);
            }

            /* X timeline */
            .x-timeline-wrap {
                flex: 1;
                padding: 10px;
                overflow: auto;
                max-height: 420px;
            }

            .x-loading-placeholder {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 200px;
            }

            /* TikTok card */
            .media-row-tiktok {
                grid-template-columns: 1fr;
            }

            .tiktok-card {
                background: var(--steel);
                border: 1px solid rgba(105,201,208,0.15);
                border-radius: 14px;
                overflow: hidden;
                display: flex;
                align-items: center;
                gap: 0;
                max-width: 1100px;
                margin: 0 auto 40px;
            }

            @media(max-width: 600px) {
                .tiktok-card {
                    flex-direction:column;
                }
            }

            .tiktok-visual {
                width: 220px;
                flex-shrink: 0;
                min-height: 160px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: radial-gradient(ellipse at 50% 40%, rgba(105,201,208,0.1) 0%, #07070a 70%);
                position: relative;
                overflow: hidden;
            }

            @media(max-width: 600px) {
                .tiktok-visual {
                    width:100%;
                }
            }

            .tiktok-icon {
                width: 56px;
                height: 56px;
                position: relative;
                z-index: 2;
                filter: drop-shadow(0 0 16px rgba(105,201,208,0.5));
                animation: kickPulse 2.5s ease-in-out infinite;
            }

            .tiktok-note-wrap {
                position: absolute;
                inset: 0;
            }

            .tiktok-note {
                position: absolute;
                font-size: 1.2rem;
                animation: noteFloat 3s ease-in-out infinite;
                opacity: 0.4;
            }

            .n1 {
                top: 15%;
                left: 10%;
                animation-delay: 0s;
            }

            .n2 {
                top: 50%;
                right: 10%;
                animation-delay: 1s;
            }

            .n3 {
                bottom: 15%;
                left: 30%;
                animation-delay: 2s;
            }

            @keyframes noteFloat {
                0%,100% {
                    transform: translateY(0) rotate(-10deg);
                    opacity: 0.3;
                }

                50% {
                    transform: translateY(-12px) rotate(10deg);
                    opacity: 0.7;
                }
            }

            .tiktok-body {
                padding: 24px 28px;
                flex: 1;
            }

            .tiktok-tag {
                font-family: 'Orbitron',sans-serif;
                font-size: 0.6rem;
                font-weight: 700;
                letter-spacing: 2px;
                padding: 3px 10px;
                border-radius: 20px;
                background: rgba(105,201,208,0.12);
                color: #69C9D0;
                border: 1px solid rgba(105,201,208,0.25);
                display: inline-block;
                margin-bottom: 10px;
            }

            .tiktok-body h4 {
                font-family: 'Orbitron',sans-serif;
                font-size: 0.9rem;
                color: #fff;
                margin-bottom: 6px;
            }

            .tiktok-body p {
                font-size: 0.82rem;
                color: var(--muted);
                margin-bottom: 14px;
                line-height: 1.5;
            }

            /* ══ END NEW MEDIA CSS ══ */
            .lang-btn {
                font-family: 'Orbitron', sans-serif;
                font-size: 0.72rem;
                font-weight: 700;
                letter-spacing: 2px;
                padding: 7px 16px;
                background: transparent;
                color: var(--orange);
                border: 1.5px solid var(--orange);
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.3s;
                margin-left: 16px;
                white-space: nowrap;
            }

            .lang-btn:hover {
                background: rgba(59,130,246,0.12);
                box-shadow: 0 0 16px rgba(59,130,246,0.3);
            }

            /* Each bilingual span: show one, hide the other */
            [data-ar], [data-en] {
                display: inline;
            }

            /* In RTL (Arabic) mode: show AR spans, hide EN spans */
            html[dir="rtl"] .txt-en {
                display: none;
            }

            html[dir="rtl"] .txt-ar {
                display: inline;
            }

            /* In LTR (English) mode: show EN spans, hide AR spans */
            html[dir="ltr"] .txt-ar {
                display: none;
            }

            html[dir="ltr"] .txt-en {
                display: inline;
            }

            /* Block-level bilingual */
            html[dir="rtl"] .blk-en {
                display: none;
            }

            html[dir="rtl"] .blk-ar {
                display: block;
            }

            html[dir="ltr"] .blk-ar {
                display: none;
            }

            html[dir="ltr"] .blk-en {
                display: block;
            }

            /* Direction-aware text alignment */
            html[dir="ltr"] .hero-bio, html[dir="ltr"] .about-text p {
                direction: ltr;
                text-align: left;
            }

            html[dir="ltr"] .section-intro {
                direction: ltr;
            }

            html[dir="ltr"] nav {
                direction: ltr;
            }

            html[dir="ltr"] .stats-row, html[dir="ltr"] .cta-group {
                direction: ltr;
            }

            html[dir="ltr"] .support-section p, html[dir="ltr"] footer p {
                direction: ltr;
            }

            html[dir="ltr"] .about-inner {
                direction: ltr;
            }

            html[dir="ltr"] .social-card {
                direction: ltr;
            }
        

/* Added for updated links and clearer stat numbers */
.stat-num { letter-spacing: 0.02em; }
.support-card .support-amount { min-width: 52px; }

/* Static hero stats */
.stat-static {
    display: inline-block;
    min-width: 1ch;
    font-variant-numeric: tabular-nums;
}

/* YouTube channel preview fallback */
.yt-channel-preview {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    padding: 32px;
    background:
        radial-gradient(circle at top right, rgba(255, 70, 70, 0.14), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
        #15161b;
    border: 1px solid rgba(255, 70, 70, 0.22);
    border-radius: 18px;
}

.yt-channel-preview h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    color: #fff;
    letter-spacing: 0.08em;
}

.yt-channel-preview p {
    color: var(--text);
    max-width: 520px;
    line-height: 1.9;
}

.yt-preview-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 68, 68, 0.14);
    border: 1px solid rgba(255, 68, 68, 0.35);
    color: #ff6b6b;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.yt-direct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 240px;
    padding: 14px 20px;
    border-radius: 14px;
    border: 1px solid rgba(255, 68, 68, 0.35);
    background: linear-gradient(135deg, rgba(255,68,68,0.18), rgba(255,68,68,0.08));
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.yt-direct-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 68, 68, 0.18);
    border-color: rgba(255, 68, 68, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


            .tiktok-embed-shell {
                width: 100%;
                min-height: 360px;
                background: rgba(0,0,0,0.18);
                border: 1px solid rgba(255,255,255,0.06);
                border-radius: 14px;
                padding: 10px;
                margin: 12px 0 16px;
            }

            .tiktok-embed-shell blockquote {
                margin: 0 auto !important;
            }

            .tiktok-fallback {
                min-height: 240px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 12px;
                text-align: center;
                color: rgba(255,255,255,0.75);
            }