.elementor-435 .elementor-element.elementor-element-ea14663{--display:flex;}.elementor-435 .elementor-element.elementor-element-ea14663.e-con{--flex-grow:0;--flex-shrink:0;}/* Start custom CSS for html, class: .elementor-element-b9ae354 */:root {
            /* --- Refined Color Palette --- */
            --bg-abyss: #050508;
            --bg-deep: #0a0a0f;
            --bg-card: #0c0c14;
            
            /* Readability */
            --reading-width: 72ch;
            
            /* Royal Gold Gradient */
            --gold-pure: #d4af37;
            --gold-light: #f4d03f;
            --gold-warm: #c9a227;
            --gold-deep: #a67c00;
            --gold-ember: #8b6914;
            
            /* Accent Colors */
            --ruby: #9b2335;
            --ruby-glow: rgba(155, 35, 53, 0.4);
            --emerald: #0d5c46;
            --sapphire: #1a237e;
            
            /* Glass Effects */
            --glass-surface: rgba(12, 12, 20, 0.7);
            --glass-border: rgba(212, 175, 55, 0.15);
            --glass-highlight: rgba(255, 255, 255, 0.08);
            
            /* Text */
            --text-primary: #f8f6f0;
            --text-muted: rgba(248, 246, 240, 0.5);
            --text-subtle: rgba(248, 246, 240, 0.3);
            
            /* Animations */
            --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
            --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
        }

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

        html {
            scroll-behavior: auto; /* تغییر به auto برای بهبود performance */
            overflow-x: clip;
        }

        body {
            background: var(--bg-abyss);
            font-family: 'Vazirmatn', sans-serif;
            color: var(--text-primary);
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
            width: 100%;
            max-width: 100vw;
        }

        main {
            max-width: 100%;
            overflow-x: hidden;
        }

        /* Respect reduced motion preferences (a11y + performance) */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation: none !important;
                transition: none !important;
                scroll-behavior: auto !important;
            }
        }

        /* === CINEMATIC NOISE TEXTURE === */
        .noise-layer {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.025;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            contain: strict;
        }


        /* === GEOMETRIC PATTERN OVERLAY === */
        .pattern-overlay {
            position: fixed;
            inset: 0;
            z-index: 1;
            opacity: 0.03;
            background-image: 
                repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 35px,
                    rgba(212, 175, 55, 0.5) 35px,
                    rgba(212, 175, 55, 0.5) 36px
                );
            pointer-events: none;
            contain: strict;
        }

        /* === FLOATING PARTICLES CANVAS === */
        /* #particles removed for performance */

        /* === MAIN STAGE === */
        .stage {
            position: relative;
            z-index: 10;
            min-height: 100vh;
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px 15px;
            overflow-x: hidden;
            box-sizing: border-box;
        }

        /* Mobile performance: reduce expensive blur + heavy paddings */
        @media (max-width: 600px) {
            .hero-card {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            .comparison-table,
            .sites-comparison-table,
            .feature-card {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            .comparison-table,
            .sites-comparison-table {
                padding: 16px !important;
            }
        }

        /* === DECORATIVE TOP ORNAMENT === */
        .ornament {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 15px;
            opacity: 0.6;
        }

        .ornament-line {
            width: 80px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-pure), transparent);
        }

        .ornament-diamond {
            width: 8px;
            height: 8px;
            background: var(--gold-pure);
            transform: rotate(45deg);
            box-shadow: 0 0 20px var(--gold-pure);
        }

        /* === HERO CARD - THE CROWN JEWEL === */
        .hero-card {
            position: relative;
            width: 100%;
            max-width: 1200px;
            padding: clamp(30px, 8vw, 100px);
            
            /* Premium Glass Effect */
            background: 
                linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(20px) saturate(120%);
            -webkit-backdrop-filter: blur(20px) saturate(120%);
            will-change: transform;
            
            border-radius: clamp(24px, 6vw, 60px);
            border: 1px solid var(--glass-border);
            
            /* Layered Shadows for Depth */
            box-shadow: 
                0 0 0 1px rgba(255, 255, 255, 0.03) inset,
                0 60px 120px -20px rgba(0, 0, 0, 0.9),
                0 0 100px -50px rgba(212, 175, 55, 0.2);
            
            text-align: center;
            
            /* 3D Transform */
            transform-style: preserve-3d;
            perspective: 2000px;
            
            /* Prevent overflow */
            overflow: hidden;
            box-sizing: border-box;
        }

        /* Golden Frame Effect */
        .hero-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: clamp(26px, 6.2vw, 62px);
            padding: 2px;
            background: linear-gradient(
                135deg,
                var(--gold-deep) 0%,
                transparent 30%,
                transparent 70%,
                var(--gold-ember) 100%
            );
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0.5;
            pointer-events: none;
        }


        /* === ROYAL BADGE === */
        .royal-badge {
            position: absolute;
            top: -25px;
            right: 60px;
            
            display: flex;
            align-items: center;
            gap: 10px;
            
            padding: clamp(8px, 2vw, 14px) clamp(16px, 4vw, 28px);
            background: linear-gradient(135deg, var(--bg-card) 0%, #151520 100%);
            border: 1px solid var(--gold-pure);
            border-radius: 100px;
            
            font-size: clamp(0.65rem, 2vw, 0.85rem);
            font-weight: 700;
            color: var(--gold-light);
            letter-spacing: clamp(1px, 0.3vw, 2px);
            text-transform: uppercase;
            white-space: nowrap;
            
            box-shadow: 
                0 10px 40px rgba(0, 0, 0, 0.6),
                0 0 30px rgba(212, 175, 55, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            
            /* animation: badgeFloat 6s ease-in-out infinite; */
            z-index: 100;
            max-width: calc(100% - 40px);
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .royal-badge::before {
            content: '';
            width: 10px;
            height: 10px;
            background: var(--gold-light);
            border-radius: 50%;
            box-shadow: 0 0 15px var(--gold-light), 0 0 30px var(--gold-pure);
            /* animation: pulseGlow 2s ease-in-out infinite; */
        }

        @keyframes badgeFloat {
            0%, 100% { transform: translateY(0) rotate(-2deg); }
            50% { transform: translateY(-12px) rotate(2deg); }
        }

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

        /* === CROWN ICON === */
        .crown-icon {
            width: clamp(100px, 25vw, 200px);
            height: clamp(100px, 25vw, 200px);
            margin: 0 auto 15px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 100%;
        }

        .crown-icon img {
            width: 100%;
            height: 100%;
            max-width: 100%;
            object-fit: contain;
            filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.5));
        }

        @keyframes crownBob {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-8px) scale(1.05); }
        }

        /* === MAIN TITLE === */
        .hero-title {
            font-family: 'Vazirmatn', sans-serif;
            font-weight: 900;
            font-size: clamp(2.5rem, 10vw, 4.5rem);
            line-height: 1.2;
            margin-bottom: 25px;
            letter-spacing: -2px;
            display: block;
            white-space: normal;
            overflow: visible;
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            background: 
                linear-gradient(180deg, 
                    #fff 0%, 
                    #f0e6d3 30%, 
                    var(--gold-light) 60%,
                    var(--gold-deep) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            
            text-shadow: 0 0 80px rgba(212, 175, 55, 0.3);
            
            /* animation: titleReveal 1.5s var(--ease-luxury) forwards; */
            opacity: 1;
            transform: translateY(0);
        }

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

        .hero-title .accent {
            display: block;
            font-size: 0.42em;
            letter-spacing: 0.04em;
            margin-top: 10px;
            font-weight: 600;
            background: linear-gradient(90deg, var(--gold-ember), var(--gold-light), var(--gold-ember));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* === SUBTITLE === */
        .hero-subtitle {
            font-size: clamp(1rem, 2.5vw, 1.3rem);
            font-weight: 300;
            color: var(--text-muted);
            max-width: 650px;
            margin: 0 auto 50px;
            line-height: 2;
            
            /* animation: fadeUp 1.5s var(--ease-luxury) 0.3s forwards; */
            opacity: 1;
            transform: translateY(0);
        }

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

        /* === PREMIUM BUTTONS === */
        .btn-container {
            display: flex;
            gap: 25px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 60px;
            
            /* animation: fadeUp 1.5s var(--ease-luxury) 0.5s forwards; */
            opacity: 1;
            transform: translateY(0);
        }

        .btn {
            position: relative;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 22px 50px;
            border-radius: 100px;
            font-size: 1.1rem;
            font-weight: 700;
            font-family: 'Vazirmatn', sans-serif;
            cursor: pointer;
            text-decoration: none;
            overflow: hidden;
            transition: all 0.5s var(--ease-luxury);
            border: none;
            z-index: 100;
        }

        /* Primary Golden Button */
        .btn-primary {
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-warm) 50%, var(--gold-deep) 100%);
            color: #000000;
            box-shadow: 
                0 15px 50px -10px rgba(212, 175, 55, 0.5),
                inset 0 2px 0 rgba(255, 255, 255, 0.3),
                inset 0 -2px 0 rgba(0, 0, 0, 0.1);
        }

        .btn-primary span,
        .btn-primary i {
            color: #000000;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.5s;
        }

        .btn-primary::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
            transform: skewX(-25deg);
            transition: 0.8s;
        }

        .btn-primary:hover {
            transform: translateY(-5px) scale(1.03);
            box-shadow: 
                0 25px 60px -10px rgba(212, 175, 55, 0.7),
                inset 0 2px 0 rgba(255, 255, 255, 0.3);
        }

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

        /* Secondary Outline Button */
        .btn-secondary {
            background: rgba(255, 255, 255, 0.03);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
        }

        .btn-secondary span,
        .btn-secondary i {
            color: #ffffff;
            transition: color 0.4s;
        }

        .btn-secondary::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, var(--gold-pure) 0%, var(--gold-deep) 100%);
            opacity: 0;
            transition: opacity 0.5s;
            z-index: -1;
        }

        .btn-secondary:hover {
            color: #000000;
            border-color: transparent;
            transform: translateY(-5px);
            box-shadow: 0 15px 40px -10px rgba(212, 175, 55, 0.4);
        }

        .btn-secondary:hover span,
        .btn-secondary:hover i {
            color: #000000;
        }

        .btn-secondary:hover::before { opacity: 1; }

        .btn i {
            font-size: 1.2rem;
            transition: transform 0.3s;
        }

        .btn:hover i {
            transform: scale(1.2);
        }

        /* === LUXURY DIVIDER === */
        .divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
            
            /* animation: fadeUp 1.5s var(--ease-luxury) 0.7s forwards; */
            opacity: 1;
        }

        .divider-line {
            width: 100px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-ember), transparent);
        }

        .divider-icon {
            color: var(--gold-pure);
            font-size: 1.2rem;
            opacity: 0.7;
        }

        /* === STATS GRID === */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            max-width: 700px;
            margin: 0 auto;
            
            /* animation: fadeUp 1.5s var(--ease-luxury) 0.9s forwards; */
            opacity: 1;
        }

        .stat-card {
            position: relative;
            padding: 30px 20px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 24px;
            transition: all 0.5s var(--ease-luxury);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.5s;
        }

        .stat-card:hover {
            transform: translateY(-8px);
            border-color: rgba(212, 175, 55, 0.2);
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
        }

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

        .stat-value {
            font-family: 'Vazirmatn', sans-serif;
            font-size: 2.2rem;
            font-weight: 800;
            background: linear-gradient(180deg, #fff 0%, var(--gold-light) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 8px;
        }

        .stat-label {
            font-size: 0.85rem;
            color: var(--text-subtle);
            letter-spacing: 1px;
        }

        /* === FLOATING DECORATIONS === */
        .floating-card {
            position: absolute;
            width: 70px;
            height: 100px;
            border-radius: 12px;
            background: linear-gradient(145deg, #1e1e32 0%, #12121f 100%);
            border: 1px solid rgba(212, 175, 55, 0.3);
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.7),
                0 0 30px rgba(212, 175, 55, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            animation: cardDrift 8s ease-in-out infinite;
            z-index: 50;
            pointer-events: none;
        }

        .floating-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
        }

        .floating-card.card-1 {
            top: 10%;
            left: -35px;
            animation-delay: 0s;
            transform: rotate(-15deg);
        }

        .floating-card.card-2 {
            bottom: 15%;
            right: -35px;
            animation-delay: -2s;
            transform: rotate(10deg);
        }

        .floating-card.card-3 {
            top: 55%;
            left: -45px;
            animation-delay: -4s;
            transform: rotate(-8deg);
        }

        @keyframes cardDrift {
            0%, 100% { transform: translateY(0) rotate(var(--rotate, -5deg)); }
            50% { transform: translateY(-25px) rotate(calc(var(--rotate, -5deg) + 8deg)); }
        }

        .floating-card.card-1 { --rotate: -15deg; }
        .floating-card.card-2 { --rotate: 10deg; }
        .floating-card.card-3 { --rotate: -8deg; }

        /* === TRUST BADGES === */
        .trust-row {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 50px;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.03);
            
            /* animation: fadeUp 1.5s var(--ease-luxury) 1.1s forwards; */
            opacity: 1;
        }

        .trust-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-subtle);
            font-size: 0.85rem;
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 50px;
            transition: all 0.4s var(--ease-luxury);
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .trust-badge::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s;
        }

        .trust-badge:hover {
            color: var(--gold-light);
            border-color: rgba(212, 175, 55, 0.3);
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -10px rgba(212, 175, 55, 0.3);
        }

        .trust-badge:hover::before {
            opacity: 1;
        }

        .trust-badge i {
            color: var(--gold-ember);
            font-size: 1.1rem;
            transition: all 0.4s;
            position: relative;
            z-index: 1;
        }

        .trust-badge:hover i {
            color: var(--gold-light);
            transform: scale(1.2) rotate(5deg);
            filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
        }

        .trust-badge span {
            position: relative;
            z-index: 1;
            transition: all 0.4s;
        }

        /* Dynamic Widget Animation */
        @keyframes widgetPulse {
            0%, 100% { 
                transform: scale(1);
                opacity: 1;
            }
            50% { 
                transform: scale(1.1);
                opacity: 0.8;
            }
        }

        .trust-badge.dynamic i {
            animation: widgetPulse 2s ease-in-out infinite;
        }

        /* === RESPONSIVE === */
        @media (max-width: 1024px) {
            .stage {
                padding: 30px 20px;
            }

            .hero-card {
                padding: clamp(35px, 8vw, 80px);
                border-radius: 45px;
            }

            .hero-card::before {
                border-radius: 47px;
            }
        }

        @media (max-width: 900px) {
            .hero-card {
                border-radius: 35px;
                margin-top: 50px;
                padding: 40px 30px;
            }

            .hero-card::before {
                border-radius: 37px;
            }

            .royal-badge {
                right: 50%;
                transform: translateX(50%);
                top: -30px;
                font-size: 0.75rem;
                padding: 10px 20px;
            }

            .crown-icon {
                width: 150px;
                height: 150px;
                margin-bottom: 10px;
            }

            .crown-icon img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .hero-title {
                font-size: clamp(2rem, 7vw, 4rem);
                letter-spacing: -1px;
            }

            .hero-subtitle {
                font-size: 1rem;
                margin-bottom: 35px;
                line-height: 1.8;
            }

            .stats-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
            }

            .stat-card {
                padding: 18px 12px;
                border-radius: 18px;
            }

            .stat-value {
                font-size: 1.4rem;
            }

            .stat-label {
                font-size: 0.75rem;
            }

            .floating-card { display: none; }

            .trust-row {
                flex-wrap: wrap;
                gap: 15px;
            }

            .divider-line {
                width: 60px;
            }
        }

        /* Performance tuning for mobile (keep luxury look) */
        @media (max-width: 768px) {
            /* Remove continuous paints/compositing on mobile */
            .noise-layer,
            .pattern-overlay,
            .cursor-glow {
                display: none !important;
            }

            /* Stop always-running animations (CPU/GPU) */
            .floating-card {
                display: none !important;
            }

            .offer-banner::before {
                animation: none !important;
            }

            /* Disable expensive blur (backdrop-filter) on mobile */
            .hero-card,
            .toc-section,
            .ad-card,
            .offer-banner,
            .sites-comparison-table,
            .comparison-table,
            .feature-card,
            .article-section > .section-content-wrapper {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
        }

        @media (max-width: 600px) {
            .stage {
                padding: 25px 12px;
            }

            .hero-card {
                padding: 30px 16px !important;
                border-radius: 24px;
                margin-top: 40px;
                max-width: calc(100vw - 24px);
                width: 100%;
                box-sizing: border-box;
            }

            .hero-card::before {
                border-radius: 26px;
            }

            .royal-badge {
                top: -20px;
                right: 50%;
                transform: translateX(50%);
                font-size: 0.65rem;
                padding: 6px 14px;
                letter-spacing: 0.5px;
                max-width: 90%;
            }

            .royal-badge::before {
                width: 8px;
                height: 8px;
            }

            .crown-icon {
                width: clamp(80px, 20vw, 120px);
                height: clamp(80px, 20vw, 120px);
                margin-bottom: 10px;
                max-width: 100%;
            }

            .crown-icon img {
                width: 100%;
                height: 100%;
                max-width: 100%;
                object-fit: contain;
            }

            .hero-title {
                font-size: clamp(1.5rem, 7vw, 2.5rem);
                letter-spacing: -0.5px;
                margin-bottom: 15px;
                line-height: 1.3;
                white-space: normal;
                word-wrap: break-word;
                overflow-wrap: break-word;
                padding: 0 10px;
            }

            .hero-title .accent {
                font-size: 0.4em;
                letter-spacing: 0.02em;
                margin-top: 8px;
                line-height: 1.4;
                white-space: normal;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }

            .hero-subtitle {
                font-size: 0.9rem;
                margin-bottom: 30px;
                line-height: 1.7;
                padding: 0 5px;
            }

            .btn-container {
                flex-direction: column;
                width: 100%;
                max-width: 100%;
                gap: 12px;
                margin-bottom: 35px;
                padding: 0 5px;
                box-sizing: border-box;
            }

            .btn {
                width: 100%;
                max-width: 100%;
                justify-content: center;
                padding: clamp(14px, 3vw, 18px) clamp(20px, 5vw, 35px);
                font-size: clamp(0.9rem, 2.5vw, 1rem);
                box-sizing: border-box;
            }

            .ornament { display: none; }

            .divider {
                margin-bottom: 25px;
            }

            .divider-line {
                width: 40px;
            }

            .divider-icon {
                font-size: 1rem;
            }

            .stats-grid {
                grid-template-columns: 1fr;
                gap: 10px;
                width: 100%;
                max-width: 100%;
                padding: 0 5px;
            }

            .stat-card {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 14px 18px;
                border-radius: 16px;
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }

            .stat-value {
                margin-bottom: 0;
                font-size: clamp(1.2rem, 4vw, 1.5rem);
                word-wrap: break-word;
            }

            .stat-label {
                font-size: clamp(0.7rem, 2.5vw, 0.8rem);
                word-wrap: break-word;
            }

            .trust-row {
                flex-direction: column;
                gap: 12px;
                align-items: center;
                margin-top: 35px;
                padding-top: 25px;
            }

            .trust-badge {
                font-size: 0.8rem;
            }
        }

        @media (max-width: 380px) {
            .stage {
                padding: 20px 10px;
            }

            .hero-card {
                padding: 30px 16px;
                border-radius: 24px;
            }

            .hero-title {
                font-size: clamp(1.3rem, 6vw, 1.8rem);
                line-height: 1.4;
                padding: 0 8px;
                white-space: normal;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
            
            .hero-title .accent {
                font-size: 0.42em;
                line-height: 1.5;
            }

            .btn {
                padding: 16px 25px;
                font-size: 0.95rem;
            }

            .stat-card {
                padding: 14px 18px;
            }
        }

        /* === CURSOR GLOW EFFECT === */
        .cursor-glow {
            position: fixed;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
            pointer-events: none;
            z-index: 3;
            transform: translate(-50%, -50%);
            transition: opacity 0.3s;
            opacity: 0;
        }

        body:hover .cursor-glow {
            opacity: 1;
        }

        /* === A11Y: Skip link === */
        .skip-link {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 9999;
            padding: 10px 14px;
            border-radius: 12px;
            background: rgba(212, 175, 55, 0.16);
            border: 1px solid rgba(212, 175, 55, 0.35);
            color: #fff;
            text-decoration: none;
            transform: translateY(-150%);
            transition: transform 0.2s ease;
        }
        .skip-link:focus {
            transform: translateY(0);
            outline: 2px solid rgba(212, 175, 55, 0.8);
            outline-offset: 3px;
        }

        /* === PERFORMANCE OPTIMIZATION === */
        /* Progressive enhancement: reduce mobile render work for long pages.
           Fallback-safe: browsers that don't support content-visibility will ignore this. */
        @supports (content-visibility: auto) {
            @media (max-width: 768px) {
                .article-section,
                .sites-section,
                .offer-section,
                .ad-card {
                    content-visibility: auto;
                    contain-intrinsic-size: 1px 1000px;
                }
            }
        }

        /* === ARTICLE SECTION === */
        .article-section {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px 60px;
        }

        /* === PREMIUM SECTION WRAPPER === */
        .article-section > .section-content-wrapper {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.98) 0%, rgba(10, 10, 15, 1) 100%);
            border: 1px solid rgba(212, 175, 55, 0.2);
            border-radius: 32px;
            padding: 55px 45px;
            box-shadow: 
                0 20px 50px -15px rgba(0, 0, 0, 0.7),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            transition: all 0.5s var(--ease-luxury);
            position: relative;
            overflow: hidden;
        }

        .article-section > .section-content-wrapper::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, transparent 60%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s var(--ease-luxury);
        }

        .article-section > .section-content-wrapper:hover {
            border-color: rgba(212, 175, 55, 0.4);
            box-shadow: 
                0 25px 60px -15px rgba(212, 175, 55, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
            transform: translateY(-2px);
        }

        .article-section > .section-content-wrapper:hover::before {
            opacity: 1;
        }

        .article-card {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.85) 0%, rgba(10, 10, 15, 0.9) 100%);
            /* backdrop-filter disabled for performance */
            /* backdrop-filter: blur(15px); */
            /* -webkit-backdrop-filter: blur(15px); */
            border: 1px solid var(--glass-border);
            border-radius: 40px;
            padding: 60px 50px;
            margin-bottom: 30px;
            transition: all 0.5s var(--ease-luxury);
        }

        .article-card:hover {
            border-color: rgba(212, 175, 55, 0.25);
            box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
        }

        .article-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 25px;
        }

        .article-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .article-icon i {
            font-size: 1.4rem;
            color: #0a0a0f;
        }

        .article-card h2 {
            font-family: 'Vazirmatn', sans-serif;
            font-weight: 800;
            font-size: clamp(1.4rem, 3vw, 1.8rem);
            background: linear-gradient(180deg, #fff 0%, var(--gold-light) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin: 0;
        }

        .article-card p {
            font-size: 1.05rem;
            color: var(--text-muted);
            line-height: 2;
            margin: 0;
        }

        .article-card ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .article-card ul li {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 12px 0;
            font-size: 1rem;
            color: var(--text-muted);
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        }

        .article-card ul li:last-child {
            border-bottom: none;
        }

        .article-card ul li i {
            color: var(--gold-pure);
            font-size: 1.1rem;
            width: 24px;
        }

        /* Steps List */
        .steps-list {
            counter-reset: step-counter;
        }

        .steps-list li {
            position: relative;
            padding-right: 50px !important;
        }

        .steps-list li::before {
            counter-increment: step-counter;
            content: counter(step-counter);
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--gold-pure) 0%, var(--gold-deep) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 0.9rem;
            color: #0a0a0f;
        }

        /* FAQ Styles */
        .faq-item {
            padding: 20px 0 !important;
        }

        .faq-question {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
            color: var(--text-primary) !important;
            margin-bottom: 10px;
        }

        .faq-question i {
            color: var(--gold-light);
        }

        .faq-answer {
            padding-right: 36px;
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        /* === ARTICLE ACCORDION === */
        .article-accordion {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.85) 0%, rgba(10, 10, 15, 0.9) 100%);
            /* backdrop-filter disabled for performance */
            /* backdrop-filter: blur(15px); */
            /* -webkit-backdrop-filter: blur(15px); */
            border: 1px solid var(--glass-border);
            border-radius: 30px;
            margin-bottom: 25px;
            overflow: hidden;
            transition: all 0.4s var(--ease-luxury);
        }

        .article-accordion.active {
            border-color: rgba(212, 175, 55, 0.3);
        }

        .article-accordion-header {
            padding: 30px 40px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s;
        }

        .article-accordion-header:hover {
            background: rgba(255, 255, 255, 0.02);
        }

        .article-accordion-header .article-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin: 0;
            flex: 1;
        }

        .article-accordion-header h2 {
            font-family: 'Vazirmatn', sans-serif;
            font-weight: 800;
            font-size: clamp(1.4rem, 3vw, 1.8rem);
            background: linear-gradient(180deg, #fff 0%, var(--gold-light) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin: 0;
        }

        .article-accordion-header i {
            color: var(--gold-light);
            font-size: 1.2rem;
            transition: transform 0.3s var(--ease-luxury);
            flex-shrink: 0;
        }

        .article-accordion.active .article-accordion-header i {
            transform: rotate(180deg);
        }

        .article-accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s var(--ease-luxury);
        }

        .article-accordion.active .article-accordion-content {
            max-height: 5000px;
        }

        .article-accordion-body {
            padding: 0 40px 30px;
        }

        /* === SECTION FEATURED IMAGE === */
        .section-featured-image {
            width: 100%;
            max-width: 100%;
            aspect-ratio: 2 / 1;
            margin: 40px 0 50px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(212, 175, 55, 0.2);
            transition: all 0.4s var(--ease-luxury);
            background: transparent;
        }

        .section-featured-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, transparent 50%, rgba(212, 175, 55, 0.05) 100%);
            z-index: 1;
            pointer-events: none;
            transition: opacity 0.4s var(--ease-luxury);
        }

        .section-featured-image:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 25px 60px -15px rgba(212, 175, 55, 0.4);
            border-color: rgba(212, 175, 55, 0.5);
        }

        .section-featured-image:hover::before {
            opacity: 0.8;
        }

        .section-featured-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.6s var(--ease-luxury);
            position: relative;
            z-index: 0;
        }

        .section-featured-image:hover img {
            transform: scale(1.05);
        }

        /* Decorative corner elements */
        .section-featured-image::after {
            content: '';
            position: absolute;
            top: 15px;
            right: 15px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            border-radius: 12px;
            opacity: 0.2;
            z-index: 2;
            pointer-events: none;
            box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
        }

        /* === PREMIUM CONTENT BLOCK === */
        .article-content-block {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            margin-bottom: 45px;
        }

        .article-content-block:last-child {
            margin-bottom: 0;
        }

        /* === PREMIUM CONTENT HEADER === */
        .article-content-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            margin-bottom: 32px;
            padding-bottom: 0;
            border-bottom: none;
        }

        .article-content-header .article-icon {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.15) 100%);
            border-radius: 14px;
            border: 1px solid rgba(212, 175, 55, 0.35);
            flex-shrink: 0;
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
            transition: all 0.4s var(--ease-luxury);
        }

        .article-content-header:hover .article-icon {
            transform: scale(1.05) rotate(5deg);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
            border-color: rgba(212, 175, 55, 0.5);
        }

        .article-content-header .article-icon i {
            font-size: 1.6rem;
            color: var(--gold-light);
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
        }

        .article-content-header .article-icon svg {
            width: 32px;
            height: 32px;
            display: block;
            filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
        }

        .article-content-header h3 {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
            margin: 0;
            line-height: 1.4;
            letter-spacing: -0.3px;
            background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-align: right;
        }

        .article-content-body {
            padding: 0;
        }

        /* === PREMIUM PARAGRAPHS === */
        .article-content-body p {
            font-size: 1.18rem;
            color: rgba(255, 255, 255, 0.96);
            line-height: 2.25;
            max-width: 100%;
            margin: 0 0 26px 0;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: 0;
            letter-spacing: -0.1px;
            font-weight: 400;
            text-align: center;
        }

        .article-content-body p:last-child {
            margin-bottom: 0;
        }

        .article-content-body p strong {
            color: var(--gold-light);
            font-weight: 700;
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
        }

        /* === PREMIUM LISTS === */
        .article-content-body ul,
        .article-content-body ol {
            margin: 28px 0;
            max-width: 100%;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        /* === PREMIUM CHECKMARK LISTS === */
        .article-content-body ul li {
            padding: 20px 65px 20px 28px;
            position: relative;
            color: rgba(255, 255, 255, 0.96);
            line-height: 1.9;
            font-size: 1.15rem;
            letter-spacing: -0.1px;
            font-weight: 400;
            background: linear-gradient(135deg, rgba(28, 28, 38, 0.85) 0%, rgba(18, 18, 25, 0.95) 100%);
            border: 1px solid rgba(212, 175, 55, 0.15);
            border-radius: 18px;
            transition: all 0.4s var(--ease-luxury);
            cursor: default;
            box-shadow: 
                0 4px 20px -8px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
        }

        .article-content-body ul li:hover {
            background: linear-gradient(135deg, rgba(38, 38, 48, 0.95) 0%, rgba(25, 25, 32, 1) 100%);
            border-color: rgba(212, 175, 55, 0.4);
            transform: translateX(-8px);
            box-shadow: 
                0 10px 40px -10px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(212, 175, 55, 0.15) inset,
                10px 0 30px -15px rgba(212, 175, 55, 0.35);
        }

        .article-content-body ul li i {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            border-radius: 50%;
            color: #0a0a0f;
            font-size: 0.9rem;
            box-shadow: 
                0 4px 18px rgba(212, 175, 55, 0.5),
                0 0 0 2px rgba(212, 175, 55, 0.2);
            transition: all 0.4s var(--ease-luxury);
        }

        .article-content-body ul li:hover i {
            transform: translateY(-50%) scale(1.2);
            box-shadow: 
                0 8px 25px rgba(212, 175, 55, 0.7),
                0 0 25px rgba(212, 175, 55, 0.4),
                0 0 0 2px rgba(212, 175, 55, 0.3);
        }

        .article-content-body ul li span {
            display: block;
            position: relative;
            z-index: 1;
        }

        .article-content-body ul li strong {
            color: var(--gold-light);
            font-weight: 700;
        }

        /* === PREMIUM STEP LISTS === */
        .article-content-body ol {
            counter-reset: article-step;
        }

        .article-content-body ol li {
            position: relative;
            padding: 22px 75px 22px 28px;
            color: rgba(255, 255, 255, 0.96);
            line-height: 1.9;
            font-size: 1.15rem;
            letter-spacing: -0.1px;
            font-weight: 400;
            background: linear-gradient(135deg, rgba(28, 28, 38, 0.85) 0%, rgba(18, 18, 25, 0.95) 100%);
            border: 1px solid rgba(212, 175, 55, 0.15);
            border-radius: 18px;
            transition: all 0.4s var(--ease-luxury);
            box-shadow: 
                0 4px 20px -8px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
        }

        .article-content-body ol li:hover {
            background: linear-gradient(135deg, rgba(38, 38, 48, 0.95) 0%, rgba(25, 25, 32, 1) 100%);
            border-color: rgba(212, 175, 55, 0.4);
            transform: translateX(-8px);
            box-shadow: 
                0 10px 40px -10px rgba(0, 0, 0, 0.6),
                10px 0 30px -15px rgba(212, 175, 55, 0.35);
        }

        .article-content-body ol li::before {
            counter-increment: article-step;
            content: counter(article-step);
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            color: #0a0a0f;
            font-weight: 900;
            font-size: 1.05rem;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 
                0 6px 25px -5px rgba(212, 175, 55, 0.6),
                0 0 0 2px rgba(212, 175, 55, 0.2);
            transition: all 0.4s var(--ease-luxury);
        }

        .article-content-body ol li:hover::before {
            transform: translateY(-50%) scale(1.15) rotate(-8deg);
            box-shadow: 
                0 10px 30px rgba(212, 175, 55, 0.7),
                0 0 20px rgba(212, 175, 55, 0.4),
                0 0 0 2px rgba(212, 175, 55, 0.3);
        }

        /* === IMAGE DESCRIPTION (Below Featured Image) === */
        .section-image-description {
            max-width: 100%;
            margin: 32px 0 40px;
            padding: 24px 28px;
            background: linear-gradient(135deg, rgba(28, 28, 38, 0.7) 0%, rgba(18, 18, 25, 0.8) 100%);
            border: 1px solid rgba(212, 175, 55, 0.15);
            border-radius: 18px;
            position: relative;
            box-shadow: 
                0 4px 20px -8px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
        }

        .section-image-description::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            border-radius: 18px 0 0 18px;
            z-index: 1;
        }

        .section-image-description p {
            font-size: 1.12rem;
            color: rgba(255, 255, 255, 0.94);
            line-height: 2.1;
            margin: 0;
            padding: 0;
            letter-spacing: -0.1px;
            text-align: center;
        }

        .section-image-description p strong {
            color: var(--gold-light);
            font-weight: 700;
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
        }

        /* === MOBILE RESPONSIVE === */
        @media (max-width: 768px) {
            .article-section > .section-content-wrapper {
                padding: 35px 24px;
                border-radius: 24px;
            }

            .section-header-wrapper {
                margin-bottom: 32px;
            }

            .section-header h2 {
                font-size: 1.8rem;
            }

            .section-header-description {
                font-size: 1.05rem;
                line-height: 1.95;
                margin: 18px 0 0;
            }

            .section-featured-image {
                aspect-ratio: 2 / 1;
                margin: 30px 0 40px;
                border-radius: 15px;
            }

            .section-featured-image::after {
                width: 40px;
                height: 40px;
                top: 10px;
                right: 10px;
            }

            .article-content-block {
                margin-bottom: 36px;
            }

            .article-content-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 14px;
                margin-bottom: 26px;
            }

            .article-content-header .article-icon {
                width: 48px;
                height: 48px;
            }

            .article-content-header .article-icon i {
                font-size: 1.4rem;
            }

            .article-content-header h3 {
                font-size: 1.25rem;
            }

            .article-content-body p {
                font-size: 1.08rem;
                line-height: 2.2;
                margin: 0 0 22px 0;
            }

            .article-content-body ul,
            .article-content-body ol {
                margin: 24px 0;
                gap: 14px;
            }

            .article-content-body ul li,
            .article-content-body ol li {
                padding: 18px 60px 18px 22px;
                font-size: 1.05rem;
                border-radius: 16px;
            }

            .article-content-body ul li:hover,
            .article-content-body ol li:hover {
                transform: translateX(-4px);
            }

            .article-content-body ul li i {
                right: 16px;
                width: 28px;
                height: 28px;
                font-size: 0.85rem;
            }

            .article-content-body ol li::before {
                right: 16px;
                width: 36px;
                height: 36px;
                font-size: 0.95rem;
                border-radius: 12px;
            }

            .section-image-description {
                margin: 24px 0 32px;
                padding: 20px 22px;
                border-radius: 16px;
            }

            .section-image-description p {
                font-size: 1.05rem;
                line-height: 2;
            }
        }

        .article-image {
            width: 1000px;
            height: 500px;
            max-width: 100%;
            margin: 0 auto 25px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 15px 40px -15px rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(212, 175, 55, 0.2);
        }

        .article-image img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
        }

        .article-accordion-body p {
            font-size: 1.05rem;
            color: var(--text-muted);
            line-height: 2;
            margin: 0;
        }

        .article-accordion-body ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .article-accordion-body ul li {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 12px 0;
            font-size: 1rem;
            color: var(--text-muted);
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        }

        .article-accordion-body ul li:last-child {
            border-bottom: none;
        }

        .article-accordion-body ul li i {
            color: var(--gold-pure);
            font-size: 1.1rem;
            width: 24px;
        }

        /* Article guide: main icon black, other icons gold (scoped) */
        #article-guide .article-icon i {
            color: #000000 !important;
        }

        #article-guide .article-accordion-header > i {
            color: var(--gold-light) !important;
        }

        #article-guide .article-accordion-body ul li i,
        #article-guide .article-card ul li i,
        #article-guide .faq-question i {
            color: var(--gold-pure) !important;
        }

        /* Article Section Responsive */
        @media (max-width: 900px) {
            .article-section {
                padding: 50px 15px 70px;
            }

            .article-accordion {
                border-radius: 25px;
                margin-bottom: 20px;
            }

            .article-accordion-header {
                padding: 25px 30px;
            }

            .article-accordion-header .article-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .article-accordion-body {
                padding: 0 30px 25px;
            }

            .article-icon {
                width: 45px;
                height: 45px;
            }

            .article-image {
                width: 100%;
                height: auto;
                aspect-ratio: 2 / 1;
                margin-bottom: 20px;
                border-radius: 15px;
            }
            
            .article-image img {
                object-fit: contain;
            }
        }

        @media (max-width: 600px) {
            .article-section {
                padding: 40px 12px 60px;
            }

            .article-accordion {
                border-radius: 20px;
                margin-bottom: 15px;
            }

            .article-accordion-header {
                padding: 20px;
            }

            .article-accordion-header h2 {
                font-size: 1.2rem;
            }

            .article-accordion-body {
                padding: 0 20px 20px;
            }

            .article-accordion-body p,
            .article-accordion-body ul li {
                font-size: 0.9rem;
            }

            .article-image {
                width: 100%;
                height: auto;
                aspect-ratio: 2 / 1;
                margin-bottom: 15px;
                border-radius: 12px;
            }
            
            .article-image img {
                object-fit: contain;
            }

            .steps-list li {
                padding-right: 45px !important;
            }

            .steps-list li::before {
                width: 28px;
                height: 28px;
                font-size: 0.8rem;
            }
        }

        /* === QUICK ACCESS SECTION === */
        .quick-access-section {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .quick-access-container {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.95) 0%, rgba(10, 10, 15, 0.98) 100%);
            border: 1px solid var(--glass-border);
            border-radius: 25px;
            padding: 35px;
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
        }

        .quick-access-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--gold-light);
            text-align: center;
            margin-bottom: 30px;
            letter-spacing: 0.5px;
        }

        .quick-access-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
        }

        .quick-access-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 20px 15px;
            background: linear-gradient(135deg, rgba(30, 30, 40, 0.8) 0%, rgba(20, 20, 30, 0.9) 100%);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            text-decoration: none;
            color: var(--text-primary);
            transition: all 0.3s var(--ease-luxury);
            position: relative;
            overflow: hidden;
        }

        .quick-access-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            opacity: 0;
            transition: opacity 0.3s var(--ease-luxury);
        }

        .quick-access-item:hover {
            transform: translateY(-5px);
            border-color: var(--gold-light);
            box-shadow: 0 10px 25px -10px rgba(212, 175, 55, 0.3);
        }

        .quick-access-item:hover::before {
            opacity: 0.1;
        }

        .quick-access-item i {
            font-size: 1.8rem;
            color: var(--gold-light);
            position: relative;
            z-index: 1;
            transition: transform 0.3s var(--ease-luxury);
        }

        .quick-access-item:hover i {
            transform: scale(1.1);
        }

        .quick-access-item span {
            font-size: 0.9rem;
            font-weight: 600;
            position: relative;
            z-index: 1;
            color: var(--text-primary);
        }

        @media (max-width: 768px) {
            .quick-access-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            .quick-access-item {
                padding: 15px 10px;
            }

            .quick-access-item i {
                font-size: 1.5rem;
            }

            .quick-access-item span {
                font-size: 0.85rem;
            }

            .quick-access-title {
                font-size: 1.3rem;
                margin-bottom: 25px;
            }
        }

        /* === SITES TABLE SECTION === */
        .sites-section {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px 60px;
        }

        /* Sites header uses section-header-wrapper now */
        .sites-section .section-header-wrapper {
            margin-bottom: 40px;
            text-align: center;
        }

        .sites-section .section-header {
            text-align: center;
        }

        .sites-section .section-header-description {
            text-align: center;
        }

        .sites-table {
            display: flex;
            flex-direction: column;
            gap: 25px;
            margin-top: 50px;
        }

        .site-card {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            /* backdrop-filter disabled for performance */
            /* backdrop-filter: blur(15px); */
            /* -webkit-backdrop-filter: blur(15px); */
            border: 1px solid var(--glass-border);
            border-left: 4px solid transparent;
            border-radius: 30px;
            padding: 35px;
            transition: all 0.5s var(--ease-luxury);
            position: relative;
            overflow: visible;
        }

        .site-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            border-radius: 30px 0 0 30px;
            opacity: 0;
            transition: opacity 0.5s var(--ease-luxury);
            pointer-events: none;
        }

        .site-card.active {
            border-color: rgba(212, 175, 55, 0.3);
            box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.7);
            transform: translateY(-5px);
        }

        .site-card.active::before {
            opacity: 1;
        }

        .site-card-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .site-logo {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
        }

        .site-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }


        .site-info {
            flex: 1;
            min-width: 200px;
        }

        .site-name {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--gold-light);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .site-badges {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .site-badge {
            padding: 5px 12px;
            background: rgba(212, 175, 55, 0.15);
            border: 1px solid rgba(212, 175, 55, 0.3);
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--gold-light);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .site-badge i {
            font-size: 0.7rem;
        }

        .site-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 25px;
            margin-bottom: 25px;
        }

        .site-detail-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .site-detail-label {
            font-size: 0.85rem;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .site-detail-label i {
            color: var(--gold-ember);
            font-size: 0.9rem;
        }

        .site-detail-value {
            font-size: 1rem;
            font-weight: 700;
            color: var(--gold-light);
        }

        .site-actions {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .site-btn {
            flex: 1;
            min-width: 150px;
            padding: 14px 28px;
            border-radius: 100px;
            font-size: 0.95rem;
            font-weight: 700;
            font-family: 'Vazirmatn', sans-serif;
            cursor: pointer;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.4s var(--ease-luxury);
            border: none;
            position: relative;
            overflow: hidden;
        }

        .site-btn-primary {
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-warm) 50%, var(--gold-deep) 100%);
            color: #000000;
            box-shadow: 
                0 15px 50px -10px rgba(212, 175, 55, 0.5),
                inset 0 2px 0 rgba(255, 255, 255, 0.3),
                inset 0 -2px 0 rgba(0, 0, 0, 0.1);
        }

        .site-btn-primary::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.5s;
        }

        .site-btn-primary::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
            transform: skewX(-25deg);
            transition: 0.8s;
        }

        .site-btn-primary:hover {
            transform: translateY(-5px) scale(1.03);
            box-shadow: 
                0 25px 60px -10px rgba(212, 175, 55, 0.7),
                inset 0 2px 0 rgba(255, 255, 255, 0.3);
        }

        .site-btn-primary:hover::after { left: 100%; }
        .site-btn-primary:hover::before { opacity: 1; }

        .site-btn-secondary {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #ffffff;
            backdrop-filter: blur(10px);
        }

        .site-btn-secondary span,
        .site-btn-secondary i {
            color: #ffffff;
            transition: color 0.4s;
        }

        .site-btn-secondary::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, var(--gold-pure) 0%, var(--gold-deep) 100%);
            opacity: 0;
            transition: opacity 0.5s;
            z-index: -1;
        }

        .site-btn-secondary:hover {
            color: #000000;
            border-color: transparent;
            transform: translateY(-5px);
            box-shadow: 0 15px 40px -10px rgba(212, 175, 55, 0.4);
        }

        .site-btn-secondary:hover span,
        .site-btn-secondary:hover i {
            color: #000000;
        }

        .site-btn-secondary:hover::before { opacity: 1; }

        .site-btn i,
        .site-btn span {
            position: relative;
            z-index: 1;
        }

        .site-btn-primary span,
        .site-btn-primary i {
            color: #000000;
        }

        /* === SITE SOCIAL LINKS === */
        .site-social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .site-social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--gold-light);
            text-decoration: none;
            transition: all 0.4s var(--ease-luxury);
            font-size: 1.2rem;
        }

        .site-social-link i {
            color: var(--gold-light);
        }

        .site-social-link:hover {
            background: rgba(212, 175, 55, 0.2);
            border-color: rgba(212, 175, 55, 0.4);
            color: var(--gold-light);
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -10px rgba(212, 175, 55, 0.4);
        }

        .site-social-link.instagram:hover {
            background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            border-color: transparent;
            color: #ffffff;
        }

        .site-social-link.instagram:hover i {
            color: #ffffff;
        }

        .site-social-link.telegram:hover {
            background: #0088cc;
            border-color: transparent;
            color: #ffffff;
        }

        .site-social-link.telegram:hover i {
            color: #ffffff;
        }

        /* === PAYMENT METHODS === */
        .site-payment-methods {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .payment-method {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            font-size: 0.8rem;
            color: var(--gold-light);
            transition: all 0.3s var(--ease-luxury);
        }

        .payment-method:hover {
            background: rgba(212, 175, 55, 0.1);
            border-color: rgba(212, 175, 55, 0.3);
            color: var(--gold-light);
            transform: translateY(-2px);
        }

        .payment-method i {
            color: var(--gold-light);
            font-size: 0.9rem;
            transition: color 0.3s;
        }

        .payment-method:hover i {
            color: var(--gold-light);
        }

        .payment-method span {
            font-weight: 600;
        }

        /* Sites Section Responsive */
        @media (max-width: 900px) {
            .sites-section {
                padding: 50px 15px 70px;
            }

            .site-card {
                padding: 25px 20px;
                border-radius: 24px;
            }

            .site-card-header {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                flex-wrap: nowrap;
                gap: 14px;
            }

            .site-logo {
                width: 60px;
                height: 60px;
                flex-shrink: 0;
            }

            .site-info {
                min-width: 0;
                flex: 1;
            }

            .site-name {
                font-size: 1.3rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .site-details {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .site-actions {
                flex-direction: column;
            }

            .site-btn {
                width: 100%;
            }

            .site-detail-image {
                margin-bottom: 25px;
                border-radius: 15px;
            }

            .site-social-links {
                gap: 12px;
            }

            .site-social-link {
                width: 40px;
                height: 40px;
                font-size: 1.1rem;
            }

            .site-payment-methods {
                gap: 10px;
                margin-top: 12px;
            }

            .payment-method {
                padding: 6px 12px;
                font-size: 0.75rem;
            }

            .expert-rating {
                padding: 18px;
            }

            .expert-rating-title {
                font-size: 1.05rem;
            }
        }

        @media (max-width: 600px) {
            .sites-section {
                padding: 40px 12px 60px;
            }


            .site-card {
                padding: 20px 16px;
                border-radius: 20px;
            }

            .site-card-header {
                gap: 12px;
            }

            .site-logo {
                width: 50px;
                height: 50px;
                flex-shrink: 0;
            }

            .site-info {
                min-width: 0;
                flex: 1;
            }

            .site-name {
                font-size: 1.1rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .site-badges {
                gap: 6px;
            }

            .site-badge {
                font-size: 0.7rem;
                padding: 4px 10px;
            }

            .site-detail-value {
                font-size: 0.9rem;
            }

            .site-btn {
                padding: 12px 24px;
                font-size: 0.9rem;
            }

            .site-detail-card {
                padding: 25px 18px;
            }

            .site-detail-content {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .site-detail-image {
                margin-bottom: 20px;
                border-radius: 12px;
            }

            .site-social-links {
                gap: 10px;
                margin-top: 15px;
                padding-top: 15px;
            }

            .site-social-link {
                width: 38px;
                height: 38px;
                font-size: 1rem;
            }

            .site-payment-methods {
                gap: 8px;
                margin-top: 10px;
            }

            .payment-method {
                padding: 6px 10px;
                font-size: 0.7rem;
            }

            .payment-method i {
                font-size: 0.8rem;
            }

            .expert-rating {
                padding: 16px;
                margin-top: 15px;
            }

            .expert-rating-title {
                font-size: 1rem;
                margin-bottom: 12px;
            }

            .expert-rating-item {
                gap: 10px;
            }

            .expert-rating-label {
                font-size: 0.85rem;
                min-width: 80px;
            }

            .expert-rating-stars i {
                font-size: 1rem;
            }

            .site-detail-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .site-detail-title {
                font-size: 1.3rem;
            }

            .site-detail-number {
                width: 45px;
                height: 45px;
                font-size: 1.3rem;
            }
        }

        /* === SITE CARD ACCORDION === */
        .site-card-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 25px;
            padding: 14px 24px;
            background: rgba(212, 175, 55, 0.1);
            border: 1px solid rgba(212, 175, 55, 0.3);
            border-radius: 12px;
            color: var(--gold-light);
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s var(--ease-luxury);
            user-select: none;
        }

        .site-card-toggle:hover {
            background: rgba(212, 175, 55, 0.2);
            border-color: rgba(212, 175, 55, 0.5);
            transform: translateY(-2px);
        }

        .site-card-toggle i {
            transition: transform 0.3s var(--ease-luxury);
            font-size: 0.9rem;
        }

        .site-card.active .site-card-toggle i {
            transform: rotate(180deg);
        }

        .site-card-expandable {
            display: block;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .site-card.active .site-card-expandable {
            max-height: 5000px;
            margin-top: 25px;
        }

        /* === SITE DETAIL IMAGE === */
        .site-detail-image {
            width: 100%;
            margin-bottom: 30px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            aspect-ratio: 2 / 1;
            box-shadow: 0 15px 40px -15px rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(212, 175, 55, 0.2);
        }

        .site-detail-image img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        .site-detail-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
            pointer-events: none;
        }

        .site-card-expandable .site-detail-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .site-card-expandable .expert-rating {
            margin-top: 25px;
        }

        /* === SITE DETAILS SECTION === */
        .site-details-section {
            margin-top: 60px;
        }

        .site-detail-card {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 30px;
            padding: 40px;
            margin-bottom: 30px;
            transition: all 0.5s var(--ease-luxury);
        }

        .site-detail-card:hover {
            border-color: rgba(212, 175, 55, 0.3);
            transform: translateY(-5px);
            box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.7);
        }

        .site-detail-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .site-detail-number {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 900;
            color: #0a0a0f;
            flex-shrink: 0;
        }

        .site-detail-title {
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--text-primary);
            margin: 0;
        }

        .site-detail-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .site-detail-item {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 20px;
        }

        .site-detail-item-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--gold-light);
            margin-bottom: 12px;
        }

        .site-detail-item-title i {
            font-size: 1.2rem;
        }

        .site-detail-item-content {
            color: #ffffff;
            line-height: 1.8;
            font-size: 0.95rem;
        }

        .site-detail-item-content strong {
            color: var(--gold-light);
            font-weight: 700;
        }

        /* === EXPERT RATING === */
        .expert-rating {
            background: rgba(212, 175, 55, 0.08);
            border: 1px solid rgba(212, 175, 55, 0.2);
            border-radius: 15px;
            padding: 20px;
            margin-top: 20px;
        }

        .expert-rating-title {
            color: var(--gold-light);
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .expert-rating-title i {
            color: var(--gold-ember);
            font-size: 1.2rem;
        }

        .expert-rating-items {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .expert-rating-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }

        .expert-rating-label {
            color: var(--text-primary);
            font-size: 0.95rem;
            font-weight: 600;
            min-width: 100px;
        }

        .expert-rating-stars {
            display: flex;
            gap: 5px;
            align-items: center;
        }

        .expert-rating-stars i {
            color: var(--gold-light);
            font-size: 1.1rem;
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
        }

        /* === INTRO SECTION === */
        .intro-section {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px 40px;
        }

        .intro-section .section-header-wrapper {
            text-align: center;
        }

        .intro-title {
            font-family: 'Vazirmatn', sans-serif;
            font-weight: 900;
            font-size: clamp(2rem, 5vw, 3rem);
            background: linear-gradient(180deg, #fff 0%, var(--gold-light) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 20px;
            line-height: 1.3;
        }

        .intro-subtitle {
            font-size: 1.1rem;
            color: #ffffff;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.8;
        }

        /* === TESTIMONIALS SECTION === */
        .testimonials-section {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px 60px;
        }

        /* === SECTION HEADER WITH BACKGROUND === */
        .section-header-wrapper {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            margin-bottom: 45px;
            position: relative;
        }

        .section-header {
            text-align: center;
            margin-bottom: 25px;
            position: relative;
            z-index: 1;
        }

        .section-header h2 {
            font-family: 'Vazirmatn', sans-serif;
            font-weight: 900;
            font-size: clamp(2rem, 5vw, 2.8rem);
            background: linear-gradient(180deg, #fff 0%, var(--gold-light) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 0;
            line-height: 1.25;
            letter-spacing: -0.5px;
            text-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
            text-align: center;
        }

        .section-header-description {
            font-size: 1.15rem;
            color: rgba(255, 255, 255, 0.88);
            max-width: 100%;
            margin: 22px 0 0;
            text-align: center;
            line-height: 2;
            letter-spacing: -0.2px;
            padding: 0;
            position: relative;
            z-index: 1;
        }

        /* === SECTION IMAGES INSIDE WRAPPER === */
        .section-header-image {
            width: 100%;
            max-width: 1000px;
            aspect-ratio: 2 / 1;
            margin: 25px auto 0;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 15px 40px -15px rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(212, 175, 55, 0.2);
            transition: all 0.5s var(--ease-luxury);
        }

        .section-header-image:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 50px -15px rgba(212, 175, 55, 0.3);
            border-color: rgba(212, 175, 55, 0.4);
        }

        .section-header-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            transition: transform 0.6s var(--ease-luxury);
        }

        .section-header-image:hover img {
            transform: scale(1.03);
        }

        .section-header-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
            pointer-events: none;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .testimonial-card {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 30px;
            padding: 35px;
            transition: all 0.5s var(--ease-luxury);
        }

        .testimonial-card:hover {
            border-color: rgba(212, 175, 55, 0.3);
            box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.7);
            transform: translateY(-5px);
        }

        .testimonial-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .testimonial-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 800;
            color: #0a0a0f;
            flex-shrink: 0;
        }

        .testimonial-info h4 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--gold-light);
            margin-bottom: 5px;
        }

        .testimonial-info p {
            font-size: 0.85rem;
            color: #ffffff;
        }

        .testimonial-stars {
            display: flex;
            gap: 5px;
            margin-bottom: 15px;
        }

        .testimonial-stars i {
            color: var(--gold-light);
            font-size: 0.9rem;
        }

        .testimonial-text {
            font-size: 1rem;
            color: #ffffff;
            line-height: 1.8;
            font-style: italic;
        }

        .testimonial-earnings {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            color: var(--gold-light);
            font-weight: 700;
        }

        /* === STATS SECTION === */

        /* === FEATURES SECTION === */
        .features-section {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px 60px;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 50px;
        }

        .feature-card {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 25px;
            padding: 35px;
            transition: all 0.5s var(--ease-luxury);
        }

        .feature-card:hover {
            border-color: rgba(212, 175, 55, 0.3);
            transform: translateY(-5px);
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
        }

        .feature-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .feature-icon i {
            font-size: 2rem;
            color: #0a0a0f;
        }

        .feature-card h3 {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--gold-light);
            margin-bottom: 12px;
        }

        .feature-card p {
            font-size: 1rem;
            color: #ffffff;
            line-height: 1.8;
        }

        /* === COMPARISON TABLE === */
        .comparison-section {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px 60px;
        }

        .comparison-table {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 30px;
            padding: 40px;
            overflow-x: auto;
            margin-top: 50px;
            box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.6);
            transition: all 0.5s var(--ease-luxury);
        }

        .comparison-table:hover {
            border-color: rgba(212, 175, 55, 0.3);
            box-shadow: 0 25px 60px -15px rgba(212, 175, 55, 0.2);
        }

        .comparison-table table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .comparison-table thead {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
        }

        .comparison-table th,
        .comparison-table td {
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
        }

        .comparison-table th {
            font-weight: 800;
            color: var(--gold-light);
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .comparison-table th:first-child {
            border-top-right-radius: 20px;
        }

        .comparison-table th:last-child {
            border-top-left-radius: 20px;
        }

        .comparison-table td {
            color: #ffffff;
            font-size: 0.95rem;
            transition: all 0.3s var(--ease-luxury);
        }

        .comparison-table tbody tr {
            transition: all 0.3s var(--ease-luxury);
        }

        .comparison-table tbody tr:hover {
            background: rgba(212, 175, 55, 0.1);
            transform: scale(1.01);
        }

        .comparison-table tbody tr:last-child td:first-child {
            border-bottom-right-radius: 20px;
        }

        .comparison-table tbody tr:last-child td:last-child {
            border-bottom-left-radius: 20px;
        }

        .check-icon {
            color: var(--gold-light);
            font-size: 1.2rem;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
        }

        .cross-icon {
            color: var(--text-subtle);
            font-size: 1.2rem;
        }

        /* === SITES COMPARISON TABLE === */
        .sites-comparison-table {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 30px;
            padding: 40px;
            overflow-x: auto;
            margin-top: 50px;
            box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.6);
            transition: all 0.5s var(--ease-luxury);
        }

        .sites-comparison-table:hover {
            border-color: rgba(212, 175, 55, 0.3);
            box-shadow: 0 25px 60px -15px rgba(212, 175, 55, 0.2);
        }

        .sites-comparison-table table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .sites-comparison-table thead {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.08) 100%);
        }

        .sites-comparison-table th {
            padding: 20px 15px;
            text-align: center;
            font-weight: 800;
            color: var(--gold-light);
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-bottom: 2px solid rgba(212, 175, 55, 0.3);
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .sites-comparison-table th:first-child {
            border-top-right-radius: 20px;
            text-align: right;
        }

        .sites-comparison-table th:last-child {
            border-top-left-radius: 20px;
        }

        .sites-comparison-table td {
            padding: 20px 15px;
            text-align: center;
            color: #ffffff;
            font-size: 0.95rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s var(--ease-luxury);
        }

        .sites-comparison-table td:first-child {
            text-align: right;
            font-weight: 700;
            color: var(--gold-light);
        }

        .sites-comparison-table tbody tr {
            transition: all 0.3s var(--ease-luxury);
        }

        .sites-comparison-table tbody tr:hover {
            background: rgba(212, 175, 55, 0.1);
            transform: scale(1.01);
        }

        .sites-comparison-table tbody tr:last-child td:first-child {
            border-bottom-right-radius: 20px;
        }

        .sites-comparison-table tbody tr:last-child td:last-child {
            border-bottom-left-radius: 20px;
        }

        .site-table-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            color: #000000;
            border-radius: 100px;
            font-weight: 700;
            font-size: 0.9rem;
            text-decoration: none;
            transition: all 0.4s var(--ease-luxury);
            box-shadow: 0 10px 30px -10px rgba(212, 175, 55, 0.4);
            border: none;
            cursor: pointer;
        }

        .site-table-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 15px 40px -10px rgba(212, 175, 55, 0.6);
        }

        .site-table-btn i {
            font-size: 1rem;
        }

        /* === EXPERT OPINIONS === */
        .experts-section {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px 60px;
        }

        .experts-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
            margin-top: 22px;
        }

        .expert-card {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 30px;
            padding: 40px;
            margin: 0;
            position: relative;
        }

        .expert-card::before {
            content: '"';
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 5rem;
            color: rgba(212, 175, 55, 0.2);
            font-family: serif;
        }

        .expert-quote {
            font-size: 1.2rem;
            color: #ffffff;
            line-height: 2;
            margin-bottom: 25px;
            font-style: italic;
        }

        .expert-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .expert-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            color: #0a0a0f;
        }

        .expert-details h4 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--gold-light);
            margin-bottom: 3px;
        }

        .expert-details p {
            font-size: 0.85rem;
            color: #ffffff;
        }

        /* === BREADCRUMB === */
        .breadcrumb {
            max-width: 1200px;
            margin: 30px auto 40px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .breadcrumb a {
            color: var(--gold-light);
            text-decoration: none;
            transition: color 0.3s var(--ease-luxury);
        }

        .breadcrumb a:hover {
            color: var(--gold-pure);
        }

        .breadcrumb-separator {
            color: var(--text-subtle);
        }

        .breadcrumb span:last-child {
            color: var(--text-primary);
        }

        @media (max-width: 600px) {
            .breadcrumb {
                font-size: 0.85rem;
                margin: 20px auto 30px;
            }
        }

        /* === BACK TO TOP BUTTON === */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            left: 30px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            border: 2px solid rgba(212, 175, 55, 0.3);
            border-radius: 50%;
            color: #000;
            font-size: 1.2rem;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9998;
            transition: all 0.4s var(--ease-luxury);
            box-shadow: 0 10px 25px -10px rgba(212, 175, 55, 0.5);
        }

        .back-to-top:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px -10px rgba(212, 175, 55, 0.7);
        }

        .back-to-top.visible {
            display: flex;
        }

        @media (max-width: 600px) {
            .back-to-top {
                width: 45px;
                height: 45px;
                bottom: 20px;
                left: 20px;
                font-size: 1rem;
            }
        }

        /* === FOOTER === */
        .site-footer {
            position: relative;
            z-index: 10;
            width: 100%;
            background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 15, 0.95) 100%);
            border-top: 1px solid rgba(212, 175, 55, 0.15);
            padding: 30px 20px;
            margin-top: 60px;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .footer-copyright {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin: 0;
            letter-spacing: 0.5px;
        }

        .footer-copyright span {
            color: var(--gold-light);
            font-weight: 700;
        }

        @media (max-width: 600px) {
            .site-footer {
                padding: 25px 15px;
                margin-top: 40px;
            }

            .footer-copyright {
                font-size: 0.85rem;
            }
        }

        /* === SPECIAL OFFER SECTION === */
        .offer-section {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px 60px;
        }

        .offer-banner {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
            border: 2px solid var(--gold-pure);
            border-radius: 40px;
            padding: 50px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .offer-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
            animation: offerRotate 10s linear infinite;
        }

        @keyframes offerRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .offer-content {
            position: relative;
            z-index: 1;
        }

        .offer-badge {
            display: inline-block;
            padding: 10px 25px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            border-radius: 50px;
            color: #000000;
            font-weight: 800;
            font-size: 0.9rem;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .offer-title {
            font-family: 'Vazirmatn', sans-serif;
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            font-weight: 900;
            color: var(--text-primary);
            margin-bottom: 15px;
        }

        .offer-description {
            font-size: 1.1rem;
            color: var(--text-muted);
            margin-bottom: 30px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .offer-cta {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 18px 40px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-warm) 45%, var(--gold-deep) 100%);
            color: #000000;
            border-radius: 100px;
            font-weight: 800;
            font-size: 1.1rem;
            text-decoration: none;
            transition: all 0.4s var(--ease-luxury);
            box-shadow:
                0 18px 45px -20px rgba(212, 175, 55, 0.75),
                0 10px 24px -18px rgba(0, 0, 0, 0.65);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.18);
            will-change: transform, box-shadow, filter;
        }

        .offer-cta,
        .offer-cta span,
        .offer-cta i {
            color: #000000 !important;
        }

        .offer-cta::before {
            content: "";
            position: absolute;
            inset: -2px;
            background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.45), transparent 45%),
                        radial-gradient(circle at 80% 30%, rgba(255,255,255,0.22), transparent 55%);
            opacity: 0.35;
            pointer-events: none;
            transition: opacity 0.35s var(--ease-luxury);
        }

        .offer-cta::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 45%, transparent 70%);
            transform: translateX(-140%) skewX(-18deg);
            opacity: 0.0;
            pointer-events: none;
            transition: transform 0.7s var(--ease-luxury), opacity 0.25s var(--ease-luxury);
        }

        .offer-cta i {
            transition: transform 0.35s var(--ease-luxury);
        }

        .offer-cta:hover {
            transform: translateY(-4px) scale(1.03);
            filter: saturate(1.06) brightness(1.02);
            box-shadow:
                0 22px 55px -22px rgba(212, 175, 55, 0.95),
                0 14px 28px -20px rgba(0, 0, 0, 0.72);
        }

        .offer-cta:hover::before {
            opacity: 0.55;
        }

        .offer-cta:hover::after {
            opacity: 0.35;
            transform: translateX(140%) skewX(-18deg);
        }

        .offer-cta:hover i {
            transform: translateY(-1px);
        }

        .offer-cta:focus-visible {
            outline: 3px solid rgba(244, 208, 63, 0.55);
            outline-offset: 4px;
        }

        /* === ACCORDION FAQ === */
        .faq-accordion {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            margin-bottom: 15px;
            overflow: hidden;
            transition: all 0.4s var(--ease-luxury);
        }

        .faq-accordion:first-of-type {
            margin-top: 50px;
        }

        .faq-accordion.active {
            border-color: rgba(212, 175, 55, 0.3);
        }

        .faq-accordion-header {
            padding: 25px 30px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s;
        }

        .faq-accordion-header:hover {
            background: rgba(255, 255, 255, 0.02);
        }

        .faq-accordion-header h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--gold-light);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .faq-accordion-header i {
            color: var(--gold-light);
            font-size: 1.2rem;
            transition: transform 0.3s;
        }

        .faq-accordion.active .faq-accordion-header i {
            transform: rotate(180deg);
        }

        .faq-accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s var(--ease-luxury);
        }

        .faq-accordion.active .faq-accordion-content {
            max-height: 2000px;
        }

        .faq-accordion-body {
            padding: 0 30px 25px;
            color: #ffffff;
            line-height: 1.8;
        }

        /* === GAME TYPES SECTION === */
        .games-section {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px 60px;
        }

        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 50px;
        }

        .game-card {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 25px;
            padding: 30px;
            transition: all 0.5s var(--ease-luxury);
            position: relative;
            overflow: hidden;
        }

        .game-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--gold-light), var(--gold-deep));
            opacity: 0;
            transition: opacity 0.5s;
        }

        .game-card:hover {
            border-color: rgba(212, 175, 55, 0.3);
            transform: translateY(-8px);
            box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.7);
        }

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

        .game-emoji {
            width: 64px;
            height: 64px;
            border-radius: 20px;
            margin-bottom: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(212, 175, 55, 0.10);
            border: 1px solid rgba(212, 175, 55, 0.18);
            box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.75);
            color: var(--gold-light);
        }

        .game-emoji i {
            font-size: 1.85rem;
            color: currentColor;
            filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.25));
        }

        .game-emoji svg {
            width: 34px;
            height: 34px;
            display: block;
            fill: currentColor;
            filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.18));
        }

        .game-card h3 {
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--gold-light);
            margin-bottom: 12px;
        }

        .game-card p {
            font-size: 0.95rem;
            color: #ffffff;
            line-height: 1.8;
            margin-bottom: 20px;
        }

        .game-profit {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: rgba(212, 175, 55, 0.1);
            border: 1px solid rgba(212, 175, 55, 0.2);
            border-radius: 12px;
            font-size: 0.9rem;
            color: var(--gold-light);
            font-weight: 700;
        }

        .game-profit i {
            font-size: 1.1rem;
        }

        /* === STRATEGIES SECTION === */
        .strategies-section {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px 60px;
        }

        .strategies-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .strategy-card {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 25px;
            padding: 35px;
            transition: all 0.5s var(--ease-luxury);
        }

        .strategy-card:hover {
            border-color: rgba(212, 175, 55, 0.3);
            transform: translateY(-5px);
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
        }

        .strategy-number {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            font-weight: 900;
            color: #0a0a0f;
            margin-bottom: 20px;
        }

        .strategy-card h3 {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--gold-light);
            margin-bottom: 15px;
        }

        .strategy-card p {
            font-size: 1rem;
            color: #ffffff;
            line-height: 1.9;
        }

        /* Responsive Styles */
        @media (max-width: 900px) {
            .testimonials-grid,
            .features-grid,

            .comparison-table {
                padding: 20px;
            }

            .comparison-table th,
            .comparison-table td {
                padding: 12px 8px;
                font-size: 0.85rem;
            }

            .offer-banner {
                padding: 35px 25px;
            }
        }

        @media (max-width: 900px) {
            .section-header-wrapper {
                padding: 30px 25px;
                border-radius: 25px;
            }

            .section-header-image {
                width: 100%;
                height: auto;
                aspect-ratio: 2 / 1;
                margin-top: 20px;
            }
            
            .section-header-image img {
                object-fit: contain;
            }
        }

        @media (max-width: 600px) {
            .intro-section,
            .testimonials-section,
            .features-section,
            .comparison-section,
            .experts-section,
            .offer-section {
                padding: 50px 15px;
            }

            .section-header-wrapper {
                padding: 25px 20px;
                border-radius: 20px;
                margin-bottom: 30px;
            }

            .section-header-image {
                width: 100%;
                height: auto;
                aspect-ratio: 2 / 1;
                margin-top: 15px;
                border-radius: 15px;
            }
            
            .section-header-image img {
                object-fit: contain;
            }
            
            .article-image {
                width: 100%;
                height: auto;
                aspect-ratio: 2 / 1;
            }
            
            .article-image img {
                object-fit: contain;
            }

            .testimonial-card,
            .feature-card {
                padding: 25px 20px;
            }

            .expert-card {
                padding: 30px 20px;
            }

            .faq-accordion-header {
                padding: 20px;
            }

            .faq-accordion-body {
                padding: 0 20px 20px;
            }
        }

        /* === QUICK START SECTION === */
        .quickstart-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 18px;
            margin-top: 28px;
        }

        .quickstart-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 22px;
            padding: 22px 20px;
            transition: all 0.35s var(--ease-luxury);
        }

        .quickstart-card:hover {
            transform: translateY(-4px);
            border-color: rgba(212, 175, 55, 0.25);
            box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65);
        }

        .quickstart-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 900;
            color: var(--gold-light);
            margin-bottom: 14px;
            font-size: 1.05rem;
        }

        .quickstart-title i {
            color: var(--gold-light);
        }

        .quickstart-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .quickstart-list li {
            padding: 10px 0;
            color: #ffffff;
            line-height: 1.9;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 0.95rem;
        }

        .quickstart-list li:last-child {
            border-bottom: none;
        }

        .quickstart-link {
            color: var(--gold-light);
            font-weight: 800;
            text-decoration: none;
        }

        .quickstart-link:hover {
            text-decoration: underline;
        }

        /* Criteria widget (one row) */
        .criteria-widget {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 14px;
            margin-top: 24px;
        }

        .criteria-item {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 22px;
            padding: 16px 14px;
            transition: all 0.35s var(--ease-luxury);
            min-height: 96px;
        }

        .criteria-item:hover {
            transform: translateY(-3px);
            border-color: rgba(212, 175, 55, 0.25);
            box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65);
        }

        .criteria-icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(212, 175, 55, 0.10);
            border: 1px solid rgba(212, 175, 55, 0.18);
            color: var(--gold-light);
            margin-bottom: 10px;
        }

        .criteria-title {
            font-weight: 900;
            color: #ffffff;
            margin: 0 0 6px;
            font-size: 0.98rem;
        }

        .criteria-note {
            margin: 0;
            color: rgba(248, 246, 240, 0.86);
            font-size: 0.88rem;
            line-height: 1.7;
        }

        @media (max-width: 1100px) {
            .criteria-widget {
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            }
        }

        .notice {
            margin-top: 22px;
            padding: 16px 18px;
            border-radius: 18px;
            background: rgba(155, 35, 53, 0.10);
            border: 1px solid rgba(155, 35, 53, 0.22);
            color: rgba(248, 246, 240, 0.92);
            line-height: 1.9;
            font-size: 0.95rem;
        }

        /* === META BAR + TOC (Trust / UX / SEO) === */
        .meta-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 12px;
            justify-content: center;
            align-items: center;
            margin-top: 18px;
            padding-top: 18px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .meta-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: rgba(248, 246, 240, 0.92);
            font-size: 0.85rem;
            line-height: 1;
        }

        .meta-pill i { color: var(--gold-light); }
        .meta-pill strong { color: var(--gold-light); font-weight: 800; }

        .toc-box {
            margin-top: 18px;
            padding: 18px;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .toc-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: var(--gold-light);
            font-weight: 900;
            margin-bottom: 0;
            cursor: pointer;
            user-select: none;
            list-style: none;
        }

        /* Make TOC collapsible (details/summary) */
        .toc-box > summary::-webkit-details-marker { display: none; }
        .toc-box > summary { outline: none; }
        .toc-box[open] .toc-title { margin-bottom: 12px; }
        .toc-title .toc-chevron {
            margin-inline-start: auto;
            transition: transform 0.25s var(--ease-luxury);
            transform: rotate(0deg);
        }
        .toc-box[open] .toc-title .toc-chevron { transform: rotate(180deg); }

        .toc-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 10px 12px;
        }

        .toc-list a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 12px 14px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            text-decoration: none;
            color: rgba(248, 246, 240, 0.92);
            transition: all 0.25s var(--ease-luxury);
        }

        .toc-list a:hover {
            transform: translateY(-2px);
            border-color: rgba(212, 175, 55, 0.25);
            box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
        }

        .toc-list a span { font-weight: 700; }
        .toc-list a i { color: var(--gold-light); }

        /* Disabled actions (replace href="#" links) */
        .is-disabled,
        .is-disabled:hover {
            opacity: 0.55;
            transform: none !important;
            cursor: not-allowed !important;
            box-shadow: none !important;
        }

        /* Footer */
        .footer {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px 70px;
        }

        .footer-card {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.85) 0%, rgba(10, 10, 15, 0.9) 100%);
            border: 1px solid var(--glass-border);
            border-radius: 30px;
            padding: 24px 22px;
            text-align: center;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 18px;
        }

        .footer-title {
            color: var(--gold-light);
            font-weight: 900;
            margin-bottom: 10px;
        }

        .footer-text {
            color: rgba(248, 246, 240, 0.72);
            line-height: 1.9;
            font-size: 0.95rem;
        }

        .footer-text a {
            color: var(--gold-light);
            text-decoration: none;
        }

        .footer-text a:hover { text-decoration: underline; }

        .footer-links {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 10px;
        }

        .footer-links a {
            color: rgba(248, 246, 240, 0.85);
            text-decoration: none;
            font-weight: 700;
        }

        .footer-links a:hover { text-decoration: underline; color: var(--gold-light); }

        .footer-bottom {
            margin-top: 0;
            padding: 14px 16px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: rgba(248, 246, 240, 0.78);
            font-size: 0.95rem;
            line-height: 1.8;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .footer-bottom div {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        #copyrightYear {
            color: var(--gold-light);
            font-weight: 900;
        }

        /* === KEYFRAMES (moved from JS for performance/validation) === */
        @keyframes rippleEffect {
            to {
                transform: translate(-50%, -50%) scale(20);
                opacity: 0;
            }
        }

        /* === ADVERTISEMENT CARDS === */
        .ad-card {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.06) 100%);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(212, 175, 55, 0.3);
            border-radius: 25px;
            padding: 30px;
            margin: 40px auto;
            max-width: 900px;
            text-align: center;
            transition: all 0.5s var(--ease-luxury);
            position: relative;
            overflow: hidden;
        }

        /* GIF ad (kept as link, optimized layout) */
        .ad-gif-card {
            padding: 20px;
        }

        .ad-gif-link {
            display: block;
            line-height: 0;
        }

        .ad-gif-img {
            max-width: 100%;
            height: auto;
            border-radius: 15px;
            display: block;
            margin: 0 auto;
        }

        .ad-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--gold-light), var(--gold-deep));
        }

        .ad-card:hover {
            transform: translateY(-5px);
            border-color: rgba(212, 175, 55, 0.5);
            box-shadow: 0 20px 50px -15px rgba(212, 175, 55, 0.4);
        }

        .ad-card-title {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--gold-light);
            margin-bottom: 15px;
            text-align: center;
        }

        .ad-card-description {
            font-size: 1.05rem;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.9;
            margin-bottom: 25px;
            text-align: center;
        }

        .ad-card-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 32px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            color: #000000 !important;
            border-radius: 50px;
            font-weight: 800;
            font-size: 1rem;
            text-decoration: none;
            transition: all 0.4s var(--ease-luxury);
            box-shadow: 0 8px 25px -10px rgba(212, 175, 55, 0.6);
        }

        .ad-card-link span,
        .ad-card-link i {
            color: #000000 !important;
        }

        .ad-card-link:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 12px 35px -12px rgba(212, 175, 55, 0.8);
        }

        .ad-card-link:hover span,
        .ad-card-link:hover i {
            color: #000000 !important;
        }

        /* === TABLE OF CONTENTS === */
        .toc-section {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.95) 0%, rgba(10, 10, 15, 0.98) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 25px;
            padding: 35px;
            margin: 50px auto;
            max-width: 1000px;
            text-align: center;
        }

        .toc-details {
            list-style: none;
        }

        .toc-details summary {
            list-style: none;
        }

        .toc-details summary::-webkit-details-marker {
            display: none;
        }

        .toc-summary {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            user-select: none;
            padding: 0;
            margin-bottom: 0;
            gap: 15px;
        }

        .toc-first-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            width: 100%;
            max-width: 100%;
        }

        .toc-first-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.9);
            transition: all 0.3s var(--ease-luxury);
            font-weight: 600;
        }

        .toc-first-item:hover {
            transform: translateX(-5px);
            border-color: rgba(212, 175, 55, 0.4);
            background: rgba(212, 175, 55, 0.1);
            color: var(--gold-light);
        }

        .toc-first-item i {
            color: var(--gold-light);
            font-size: 1.1rem;
        }

        .toc-chevron {
            color: var(--gold-light);
            font-size: 1.2rem;
            transition: transform 0.3s var(--ease-luxury);
            margin: 0 auto;
        }

        .toc-details[open] .toc-chevron {
            transform: rotate(180deg);
        }

        .toc-details[open] .toc-summary {
            margin-bottom: 25px;
        }

        .toc-list {
            list-style: none;
            padding: 0;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 15px;
            animation: fadeIn 0.3s ease-in;
            max-width: 100%;
            justify-content: center;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .toc-list li {
            margin: 0;
        }

        .toc-list a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.9);
            transition: all 0.3s var(--ease-luxury);
            font-weight: 600;
        }

        .toc-list a:hover {
            transform: translateX(-5px);
            border-color: rgba(212, 175, 55, 0.4);
            background: rgba(212, 175, 55, 0.1);
            color: var(--gold-light);
        }

        .toc-list a i {
            color: var(--gold-light);
            font-size: 1.1rem;
        }

        /* === PROGRESS BAR === */
        .reading-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 4px;
            background: linear-gradient(90deg, var(--gold-light), var(--gold-deep));
            z-index: 9999;
            transition: width 0.1s ease-out;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
        }

        /* === COMPARISON SECTION === */
        .comparison-section {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px 60px;
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            overflow: hidden;
            margin-top: 30px;
        }

        .comparison-table th {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
            padding: 20px;
            text-align: center;
            color: var(--gold-light);
            font-weight: 800;
            font-size: 1.1rem;
            border-bottom: 2px solid rgba(212, 175, 55, 0.3);
        }

        .comparison-table td {
            padding: 18px 20px;
            text-align: center;
            color: rgba(255, 255, 255, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .comparison-table tr:hover {
            background: rgba(212, 175, 55, 0.05);
        }

        /* === TIPS SECTION === */
        .tips-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 40px;
        }

        .tip-card {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 30px;
            transition: all 0.5s var(--ease-luxury);
        }

        .tip-card:hover {
            transform: translateY(-8px);
            border-color: rgba(212, 175, 55, 0.4);
            box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.7);
        }

        .tip-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 1.8rem;
            color: #000;
        }

        .tip-card h3 {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--gold-light);
            margin-bottom: 15px;
        }

        .tip-card p {
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.9;
            margin: 0;
        }


        /* === REVIEWS SECTION === */
        .reviews-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 25px;
            margin-top: 40px;
        }

        .review-card {
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
            backdrop-filter: blur(30px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 30px;
            transition: all 0.5s var(--ease-luxury);
        }

        .review-card:hover {
            transform: translateY(-5px);
            border-color: rgba(212, 175, 55, 0.4);
            box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.7);
        }

        .review-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .review-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-deep) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #000;
            font-weight: 900;
        }

        .review-name {
            font-weight: 800;
            color: var(--gold-light);
            font-size: 1.1rem;
        }

        .review-stars {
            color: var(--gold-light);
            margin-bottom: 15px;
        }

        .review-text {
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.9;
            margin: 0;
        }

        @media (max-width: 768px) {
            .ad-card {
                padding: 25px 20px;
                margin: 30px auto;
            }

            .toc-section {
                padding: 25px 20px;
            }

            .toc-list {
                grid-template-columns: 1fr;
            }

            .toc-first-row {
                grid-template-columns: 1fr;
            }

            .comparison-table {
                font-size: 0.9rem;
            }

            .comparison-table th,
            .comparison-table td {
                padding: 12px 10px;
            }
        }

        /* ============================================
           MOBILE RESPONSIVE FIXES - CENTER & NO OVERFLOW
           ============================================ */
        @media (max-width: 768px) {
            /* Stage & Hero */
            .stage {
                width: 100%;
                max-width: 100vw;
                padding: 25px 12px !important;
                margin: 0 auto;
                box-sizing: border-box;
            }

            .hero-card {
                width: 100%;
                max-width: calc(100vw - 24px);
                margin: 0 auto;
                padding: 30px 16px !important;
                box-sizing: border-box;
                border-radius: 24px;
                overflow: hidden;
            }
            
            .hero-card::before {
                border-radius: 26px;
            }
            
            .hero-title {
                font-size: clamp(1.4rem, 6.5vw, 2.2rem);
                line-height: 1.3;
                padding: 0 8px;
                white-space: normal;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
            
            .hero-title .accent {
                font-size: 0.4em;
                line-height: 1.4;
                white-space: normal;
            }
            
            .crown-icon {
                width: clamp(90px, 22vw, 140px);
                height: clamp(90px, 22vw, 140px);
                max-width: 100%;
            }
            
            .royal-badge {
                top: -20px;
                right: 50%;
                transform: translateX(50%);
                font-size: clamp(0.6rem, 2.5vw, 0.75rem);
                padding: clamp(6px, 1.5vw, 10px) clamp(12px, 3vw, 20px);
                max-width: 90%;
            }

            /* All sections - center and max-width */
            .article-section,
            .sites-section,
            .offer-section,
            .toc-section {
                width: 100%;
                max-width: 100vw;
                padding-left: 12px !important;
                padding-right: 12px !important;
                margin: 0 auto;
                box-sizing: border-box;
            }

            /* Section content wrapper - reduce padding */
            .section-content-wrapper {
                width: 100%;
                max-width: 100%;
                padding: 30px 16px !important;
                margin: 0 auto;
                box-sizing: border-box;
            }

            /* Site cards */
            .sites-table {
                width: 100%;
                max-width: 100%;
                margin: 0 auto;
            }

            .site-card {
                width: 100%;
                max-width: 100%;
                padding: 20px 14px !important;
                margin: 0 auto;
                box-sizing: border-box;
            }

            /* Article sections */
            .article-content-block {
                width: 100%;
                max-width: 100%;
                margin: 0 auto;
                box-sizing: border-box;
            }

            /* Buttons container - center */
            .btn-container {
                width: 100%;
                max-width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 12px;
                margin: 0 auto;
            }

            .btn {
                width: 100%;
                max-width: 280px;
                margin: 0 auto;
            }

            /* Site actions - center */
            .site-actions {
                width: 100%;
                max-width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 12px;
                margin: 0 auto;
            }

            .site-btn {
                width: 100%;
                max-width: 100%;
                margin: 0 auto;
            }

            /* Images - prevent overflow */
            img {
                max-width: 100% !important;
                height: auto !important;
                display: block;
            }

            .section-featured-image,
            .section-header-image,
            .site-detail-image {
                width: 100%;
                max-width: 100%;
                margin: 0 auto;
                box-sizing: border-box;
            }

            /* Tables - prevent overflow */
            .comparison-table {
                width: 100%;
                max-width: 100%;
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                margin: 0 auto;
            }

            .comparison-table table {
                min-width: 600px;
            }

            /* Ad cards - center */
            .ad-card {
                width: 100%;
                max-width: calc(100vw - 24px);
                margin: 30px auto !important;
                padding: 25px 16px !important;
                box-sizing: border-box;
            }

            /* TOC - center */
            .toc-section {
                width: 100%;
                max-width: calc(100vw - 24px);
                margin: 30px auto !important;
                padding: 25px 16px !important;
                box-sizing: border-box;
            }

            .toc-list,
            .toc-first-row {
                width: 100%;
                max-width: 100%;
                margin: 0 auto;
            }

            /* Offer section - center */
            .offer-banner {
                width: 100%;
                max-width: 100%;
                padding: 35px 20px !important;
                margin: 0 auto;
                box-sizing: border-box;
            }

            /* Breadcrumb - center */
            .breadcrumb {
                width: 100%;
                max-width: calc(100vw - 24px);
                padding: 0 12px !important;
                margin: 20px auto !important;
                box-sizing: border-box;
            }

            /* Footer - center */
            .site-footer {
                width: 100%;
                max-width: 100vw;
                padding: 25px 12px !important;
                margin: 0 auto;
                box-sizing: border-box;
            }

            /* Text alignment - center for mobile */
            .section-header,
            .section-header h2,
            .section-header-description,
            .article-content-header h3,
            .article-content-body p,
            .section-image-description p {
                text-align: center;
                margin-left: auto;
                margin-right: auto;
            }

            /* Prevent any element from exceeding viewport */
            * {
                box-sizing: border-box;
            }

            /* Specific fixes for wide elements */
            .hero-title,
            .offer-title,
            .section-header h2 {
                word-wrap: break-word;
                overflow-wrap: break-word;
                hyphens: auto;
            }
        }

        /* Extra small devices */
        @media (max-width: 380px) {
            .stage {
                padding: 20px 8px !important;
            }

            .hero-card {
                padding: 25px 12px !important;
                border-radius: 20px;
                max-width: calc(100vw - 16px);
            }
            
            .hero-card::before {
                border-radius: 22px;
            }
            
            .royal-badge {
                top: -18px;
                font-size: 0.6rem;
                padding: 5px 12px;
                max-width: 85%;
            }
            
            .crown-icon {
                width: clamp(70px, 18vw, 100px);
                height: clamp(70px, 18vw, 100px);
            }

            .section-content-wrapper {
                padding: 25px 12px !important;
            }

            .site-card {
                padding: 18px 12px !important;
            }

            .btn {
                max-width: 100%;
                padding: 14px 20px !important;
            }

            .ad-card,
            .toc-section {
                padding: 20px 12px !important;
            }
        }/* End custom CSS */