:root {
            --primary: #10b981; /* Emerald-500 */
            --zinc: #111318;
        }

        body {
            font-family: 'Manrope', sans-serif;
            background: #000;
            margin: 0;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, .font-display { font-family: 'Space Grotesk', sans-serif; }

        .section-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: #000; pointer-events: none; opacity: 0; z-index: 99;
            will-change: opacity; border-radius: inherit;
        }

        .grain::before {
            content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('../images/shared/noisy-texture.svg');
            opacity: 0.02; pointer-events: none; z-index: 9999; transform: translateZ(0); will-change: transform;
        }

        /* STACKING ENGINE */
        .stack-section {
            position: sticky; top: min(0px, 100vh - 100%); width: 100%; min-height: 100vh;
            display: flex; flex-direction: column; justify-content: start; padding-top: 120px;
            background: #fff; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.05);
            will-change: transform; border-top: 1px solid rgba(0, 0, 0, 0.03);
        }

        #hero { z-index: 1; padding-top: 160px; padding-bottom: 80px; }
        @media (max-width: 1024px) { #hero { padding-top: 120px; padding-bottom: 100px; min-height: auto !important; } #hero .grid { min-height: auto !important; } }
        @media (max-width: 640px) { #hero { padding-top: 100px; padding-bottom: 100px; } }
        @media (max-height: 750px) {
            #hero { min-height: auto !important; padding-top: 80px; padding-bottom: 250px; }
            @media (max-width: 1024px) { #hero { padding-bottom: 250px !important; } }
            #hero .grid { min-height: auto !important; align-items: center; }
            #hero-text { padding-bottom: 10px !important; }
            #hero-text h1 { margin-bottom: 16px !important; }
            #hero-text p { margin-bottom: 24px !important; }
            #hero-text .inline-flex { margin-bottom: 20px !important; }
        }

        #trust-banner { z-index: 2; min-height: auto; padding: 60px 0; border-radius: 60px 60px 0 0; background: var(--zinc); }
        #trust-banner::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 150vh; background: var(--zinc); z-index: -1; border-radius: inherit; pointer-events: none; }

        #countries-banner { z-index: 3; background: #fff; min-height: auto; padding: 60px 0; border-radius: 60px 60px 0 0; }
        #countries-banner::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 150vh; background: #fff; z-index: -1; border-radius: inherit; pointer-events: none; }

        #how-it-works { z-index: 4; background: var(--zinc); border-radius: 60px 60px 0 0; }
        #how-it-works::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 150vh; background: var(--zinc); z-index: -1; border-radius: inherit; pointer-events: none; }

        #requirements { z-index: 5; background: #fff; border-radius: 60px 60px 0 0; min-height: auto; padding-bottom: 120px; }
        #requirements::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 150vh; background: #fff; z-index: -1; border-radius: inherit; pointer-events: none; }

        #stats-section { z-index: 6; background: var(--zinc); min-height: auto; padding: 80px 0; border-radius: 60px 60px 0 0; }
        #stats-section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 150vh; background: var(--zinc); z-index: -1; border-radius: inherit; pointer-events: none; }

        #gallery { z-index: 7; background: #fff; border-radius: 60px 60px 0 0; }
        #gallery::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 150vh; background: #fff; z-index: -1; border-radius: inherit; pointer-events: none; }

        #comparison { z-index: 9; background: linear-gradient(to bottom, #111318 0%, #090a0c 100%); color: #fff; border-radius: 60px 60px 0 0; }
        #comparison::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 150vh; background: #090a0c; z-index: -1; border-radius: inherit; pointer-events: none; }

        #pricing { z-index: 10; background: #fff; border-radius: 60px 60px 0 0; height: auto; min-height: 100vh; }
        #pricing::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 150vh; background: #fff; z-index: -1; border-radius: inherit; pointer-events: none; }

        #faq { z-index: 11; background: var(--zinc); border-radius: 60px 60px 0 0; padding-bottom: 100px; }
        #final-cta { z-index: 11; background: #fff; border-radius: 60px 60px 0 0; }
        #final-cta::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 150vh; background: #fff; z-index: -1; border-radius: inherit; pointer-events: none; }

        @media (max-width: 1024px) {
            .stack-section { position: sticky; min-height: auto !important; height: auto !important; border-radius: 0 !important; }
        }

        /* UI ELEMENTS */
        .pricing-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; max-width: 1440px; margin: 0 auto; width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
        .pricing-grid::-webkit-scrollbar { display: none; }
        @media (min-width: 1280px) { .pricing-grid { flex-wrap: wrap; justify-content: center; overflow-x: visible; scroll-snap-type: none; padding: 0 20px; } .price-card { flex: 1; min-width: 200px; max-width: 260px; } }
        @media (max-width: 1279px) and (min-width: 768px) { .pricing-grid { padding: 20px calc(50vw - 160px) 60px calc(50vw - 160px); } .price-card { flex: 0 0 320px; scroll-snap-align: center; scroll-snap-stop: always; } }
        @media (max-width: 767px) { .pricing-grid { padding: 20px 7.5vw 60px 7.5vw; } .price-card { flex: 0 0 85vw; scroll-snap-align: center; scroll-snap-stop: always; } }

        .price-card { background: #fff; padding: 24px 20px; border-radius: 32px; border: 1px solid #f4f4f5; display: flex; flex-direction: column; transition: 0.4s; }
        .price-card:hover { transform: translateY(-10px); border-color: var(--primary); }
        .price-card.popular { background: var(--zinc); color: #fff; border: none; transform: scale(1.05); }
        .price-card.popular:hover { transform: scale(1.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }

        .mobile-nav { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(17, 19, 24, 0.9); backdrop-filter: blur(20px); padding: 12px 32px; border-radius: 99px; z-index: 1000; display: flex; gap: 40px; border: 1px solid rgba(255, 255, 255, 0.1); }
        .mobile-nav a { color: #fff; font-size: 22px; opacity: 0.5; }
        .mobile-nav a.active { opacity: 1; color: var(--primary); }
        .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 4px; background: var(--primary); z-index: 1001; }

        @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }
        .animate-float { animation: float 6s ease-in-out infinite; }

        @keyframes gradient-text { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        .text-gradient-animated {
            background: linear-gradient(270deg, #10b981, #34d399, #059669, #10b981); background-size: 300% 300%;
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; 
            animation: gradient-text 5s ease infinite; padding-right: 0.1em;
        }

        /* PREMIUM HERO REVEAL ANIMATION */
        @keyframes premium-reveal { 0% { opacity: 0; transform: translateY(40px) scale(0.98); filter: blur(10px); } 100% { opacity: 1; transform: none; filter: none; } }
        .hero-title-word { opacity: 0; animation: premium-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes hero-img-reveal { 0% { opacity: 0; transform: scale(0.95) translateY(60px); filter: blur(20px); } 100% { opacity: 1; transform: none; filter: none; } }
        .hero-img-anim { opacity: 0; animation: hero-img-reveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.4s; }

        .hero-glow { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0) 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; pointer-events: none; filter: blur(60px); animation: pulse-glow 8s infinite alternate; }
        @keyframes pulse-glow { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } }

        .glass-nav { background: rgba(255, 255, 255, 0.7) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 99px !important; margin-top: 20px; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08); width: calc(100% - 40px) !important; left: 20px !important; right: 20px !important; padding-top: 12px !important; padding-bottom: 12px !important; }

        .premium-bento { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 30px -10px rgba(0, 0, 0, 0.05); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative; }
        .premium-bento::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; padding: 2px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.5), transparent 40%); -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; transition: opacity 0.5s; }
        .premium-bento:hover { transform: translateY(-5px) scale(1.02); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.2), 0 30px 60px -15px rgba(16, 185, 129, 0.15); }
        .premium-bento:hover::before { opacity: 1; }
        .premium-bento.dark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }

        .btn-magnetic { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
        .btn-magnetic:active { transform: scale(0.95) !important; }
        .glow-btn:hover { box-shadow: 0 0 60px -10px rgba(16, 185, 129, 0.8); }

        .advanced-pricing { transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative; z-index: 1; }
        .advanced-pricing::after { content: ''; position: absolute; inset: -2px; z-index: -1; background: linear-gradient(135deg, #10b981, #34d399, transparent 60%); border-radius: 42px; opacity: 0; transition: opacity 0.5s; }
        .advanced-pricing:hover::after { opacity: 1; filter: blur(10px); }
        .advanced-pricing:hover { transform: translateY(-12px); border-color: transparent !important; background: #fff; }

        @keyframes spring-pop { 0% { opacity: 0; transform: scale(0.5); } 70% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
        .animate-spring-pop { opacity: 0; animation: spring-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

        @keyframes fade-in-right { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } }
        .animate-fade-in-right { opacity: 0; animation: fade-in-right 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

        .faq-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
        .faq-item.active .faq-content { grid-template-rows: 1fr; }
        .faq-item.active .faq-icon { transform: rotate(180deg); color: var(--primary); }

        @keyframes price-update { 0% { opacity: 0; transform: translateY(10px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
        .animate-price-update { animation: price-update 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .reveal-delay-100 { transition-delay: 0.1s; }
        .reveal-delay-200 { transition-delay: 0.2s; }

        /* BEFORE/AFTER SLIDER */
        .comparison-slider {
            --clip: 50%;
            touch-action: pan-y;
        }
        .comparison-slider .slider-before {
            clip-path: polygon(0 0, var(--clip) 0, var(--clip) 100%, 0 100%);
        }
        .comparison-slider .slider-handle {
            left: var(--clip);
        }

        .billing-switcher { position: relative; background: #f4f4f5; padding: 4px; border-radius: 99px; display: inline-flex; width: 240px; height: 50px; border: 1px solid #e4e4e7; }
        .billing-switcher button { flex: 1; position: relative; z-index: 2; font-weight: 700; font-size: 14px; transition: color 0.3s; border-radius: 99px; }
        .billing-switcher button.active { color: #fff; }
        .switch-pill { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: #111318; border-radius: 99px; z-index: 1; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .billing-switcher.yearly .switch-pill { transform: translateX(100%) translateX(4px); }