/* Reset and Base Styles */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        body { background-color: #f8f9fa; color: #333; line-height: 1.6; overflow-x: hidden; /* Prevent horizontal scroll */ }

        /* Color Variables */
        :root { --primary: #7209B7; --accent: #FF6B81; --highlight: #FFD700; --white: #FFFFFF; --dark: #333333; --background: #F3F4F6; }

        /* Navigation Styles */
        nav {
            background-color: rgba(114, 9, 183, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            padding: 1rem 5%; position: fixed; width: 100%; z-index: 1000; display: flex;
            justify-content: space-between; align-items: center; box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1); height: 70px;
        }
        .logo { color: var(--white); font-size: 1.5rem; font-weight: 700; text-decoration: none; display: flex; align-items: center; }
        .logo span { color: var(--accent); }
        .nav-logo-img { height: 30px; width: auto; vertical-align: middle; margin-right: 8px; }
        .nav-links { display: flex; list-style: none; }
        .nav-links.mobile-nav-active {
             display: flex; flex-direction: column; position: absolute; top: 100%;
             left: 0; width: 100%; background-color: rgba(114, 9, 183, 0.98);
             padding: 1.5rem 0; text-align: center;
             box-shadow: 0 5px 10px rgba(0,0,0,0.2); z-index: 999;
        }
        .nav-links li { margin-left: 2rem; }
        .nav-links.mobile-nav-active li { margin: 0.75rem 0; margin-left: 0; }
        .nav-links a { color: var(--white); text-decoration: none; font-weight: 500; transition: color 0.3s ease, background-color 0.3s ease, padding 0.3s ease; display: inline-block; padding: 0.4rem 0.8rem; border-radius: 6px; }
        .nav-links a:hover { color: var(--highlight); }
        .nav-links.mobile-nav-active li a { /* Base style */ }
        .nav-links.mobile-nav-active li a.mobile-nav-link-active { color: var(--highlight); background-color: rgba(255, 255, 255, 0.15); }
        .nav-links.mobile-nav-active li a:not(.mobile-nav-link-active):hover { color: var(--highlight); background-color: rgba(255, 255, 255, 0.08); }
        .mobile-menu { display: none; font-size: 1.5rem; color: var(--white); cursor: pointer; background: none; border: none; padding: 0.5rem; }

        /* Hero Section Styles */
        .hero {
            background: var(--primary); color: #fff; position: relative; text-align: center;
            overflow: hidden; /* Contain elements like shapes */
            /* REMOVED padding: 0 5%; */
            padding-bottom: 5px; /* Keep vertical space if needed */
            z-index: 3; min-height: 90vh;
            display: flex; flex-direction: column; /* Keep this */
        }
        /* --- New Inner Content Wrapper --- */
        .hero-inner-content {
             width: 100%;
             max-width: 900px; /* Max width for the content */
             margin: 0 auto; /* Center the content */
             padding: 100px 5%; /* Apply horizontal padding here */
             position: relative; /* Keep relative for its own elements */
             z-index: 10; /* Above shapes */
             padding-bottom: 80px; /* Increased space at bottom to make room for absolute banner */
        }
        /* --- End Inner Content Wrapper --- */

        .hero-positioning-container { /* This now mainly handles vertical centering of hero-inner-content */
             position: relative; width: 100%; flex-grow: 1;
             display: flex; flex-direction: column; justify-content: center;
             padding-top: 80px; /* Keep existing top space */
             z-index: 5; /* Above curves/SVGs but potentially below inner content */
        }
        /* REMOVED hero-content class - replaced by hero-inner-content */

        .hero h1 {
            font-size: 70px; margin: 0 0 15px 0; line-height: 1.1;
            text-transform: uppercase; font-weight: bold;
            opacity: 0; transform: translateY(20px);
            animation: fadeInUp 1s ease forwards 0.3s;
        }
        .hero p {
            font-size: 18px; margin: 0 auto 30px auto; max-width: 600px; /* Kept max-width relative to parent */
            opacity: 0; transform: translateY(20px);
            animation: fadeInUp 1s ease forwards 0.5s;
            line-height: 1.7;
        }
        .video-container {
            margin-top: 2rem; margin-bottom: 2.5rem; position: relative;
            z-index: 10; /* Keep above shapes */
            opacity: 0; transform: translateY(20px);
            animation: fadeInUp 1s ease forwards 0.7s;
        }
        .hero-video {
            display: block; width: 100%; max-width: 600px; /* Still relative to parent */
            margin: 0 auto; border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            background-color: rgba(0,0,0,0.2);
        }

        /* Curve Elements */
        .curve, .curve-mask {
            position: absolute; width: 100%; left: 0; z-index: 2; height: 200px;
            pointer-events: none; top: 15%;
        }
         .curve svg, .curve-mask svg { display: block; width: 100%; height: 100%; }

        /* SVG Floating Elements Container */
        .svg-elements { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; pointer-events: none; overflow: hidden; }
        .svg-container { position: absolute; width: auto; height: auto; display: flex; align-items: center; animation: move 10s infinite linear; opacity: 0; }
        .svg-element { width: 25px; height: 25px; display: block; margin-right: 5px; opacity: 0.7; }
        .svg-number { font-size: 10px; font-weight: 700; color: var(--highlight); text-shadow: 0 0 3px rgba(0,0,0,0.5); }
        @keyframes move { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { transform: translateY(-400px); opacity: 0; } }

        /* Button Styles */
        .button-container {
            display: flex; align-items: center; justify-content: center;
            z-index: 10; padding-bottom: 0; margin-top: 0;
            opacity: 0; transform: translateY(20px);
            animation: fadeInUp 1s ease forwards 0.9s;
        }
        .button {
            position: relative; padding: 0.75rem 1.8rem; color: white; font-weight: 600;
            border-radius: 9999px; overflow: hidden; transform: scale(1);
            transition: transform 0.3s ease, box-shadow 0.3s ease; border: none; cursor: pointer;
            display: inline-flex; justify-content: center; align-items: center; text-align: center;
        }
        .button:hover { transform: scale(1.05); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); }
        .gradient-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 9999px; z-index: 1;}
        .button-text { position: relative; z-index: 2; }
        #contact-gradient-bg { z-index: 1; }

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

        /* --- Modified Slogan Banner --- */
        .slogan-banner {
            position: absolute; /* Position relative to .hero */
            bottom: 0; /* Position at the bottom edge */
            left: 0; /* Align to the left edge */
            width: 100%; /* Span the full width */
            background-color: rgba(0, 0, 0, 0.25); /* Slightly darker for contrast */
            color: rgba(255, 255, 255, 0.85); /* Brighter text */
            padding: 0.7rem 0; /* Adjusted vertical padding */
            overflow: hidden; /* Hide overflowing content */
            white-space: nowrap; /* Prevent slogans from wrapping */
            z-index: 11; /* Above hero-inner-content and other elements */
            /* REMOVED margin-top, animation (fadeInUp) */
            /* REMOVED border-radius (doesn't make sense on full width) */
        }
        .slogan-track {
            display: inline-block; /* Allow animation */
            /* REMOVED padding-left: 100% */
            animation: scrollSlogans 25s linear infinite; /* Adjust duration for speed */
            will-change: transform; /* Performance hint */
        }
        .slogan-banner:hover .slogan-track {
            animation-play-state: paused; /* Pause on hover */
        }
        .slogan-item {
            display: inline-block; /* Keep slogans on one line */
            font-size: 0.95rem; /* Slightly larger */
            font-weight: 500;
            margin: 0 2rem; /* Increased space between slogans */
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .slogan-item i {
            margin-right: 0.5rem; /* Slightly more space */
            color: var(--highlight);
            opacity: 0.9;
            vertical-align: middle; /* Align icon better with text */
        }

        @keyframes scrollSlogans {
            0% {
                transform: translateX(0%); /* Start with first set beginning at left edge */
            }
            100% {
                transform: translateX(-50%); /* Scroll exactly one full set width to the left */
            }
        }
        /* --- End Slogan Banner --- */


        /* --- Why Viral Horizon Section --- */
        .why-section { padding: 7rem 5%; background: linear-gradient(to bottom, #7209B7 0%, #ff1493 10%, #ff1493 90%, #7209B7 100%); position: relative; overflow: hidden; }
        .why-section::before, .why-section::after { content: ''; position: absolute; border-radius: 50%; z-index: 0; background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%); }
        .why-section::before { top: -150px; right: -150px; width: 300px; height: 300px; } .why-section::after { bottom: -100px; left: -100px; width: 250px; height: 250px; }
        .section-title { text-align: center; margin-bottom: 4rem; font-size: 3rem; color: var(--white); position: relative; font-weight: 800; z-index: 1; }
        .section-title::after { content: ''; display: block; width: 120px; height: 5px; background: linear-gradient(90deg, var(--primary), var(--accent)); margin: 1.2rem auto 0; border-radius: 5px; box-shadow: 0 3px 10px rgba(255, 107, 129, 0.3); }
        .section-title::before { content: attr(data-text); position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-size: 5rem; color: rgba(255, 255, 255, 0.05); font-weight: 900; white-space: nowrap; z-index: -1; }
        .cards-container { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; z-index: 1; position: relative; }
        .feature-card-wrapper { flex: 1 1 300px; max-width: 400px; width: 100%; }
        .feature-card { background-color: var(--primary); color: var(--white); padding: 2.5rem; border-radius: 15px; position: relative; overflow: hidden; box-shadow: 0 15px 30px rgba(114, 9, 183, 0.3), 0 5px 15px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.1); transform: scale(1); transition: transform 0.3s ease, box-shadow 0.3s ease; will-change: transform; backface-visibility: hidden; z-index: 2; height: 100%; }
        .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%); z-index: -1; }
        .feature-card::after { content: ''; position: absolute; bottom: -50px; right: -50px; width: 100px; height: 100px; background: radial-gradient(circle, var(--accent) 0%, rgba(255, 107, 129, 0) 70%); opacity: 0.3; transition: transform 0.5s ease, opacity 0.5s ease; z-index: -1; }
        .feature-card:hover { transform: scale(1.05) translateY(-10px); box-shadow: 0 20px 40px rgba(114, 9, 183, 0.4), 0 8px 20px rgba(0, 0, 0, 0.25); }
        .feature-card:hover::after { transform: scale(3); opacity: 0.1; }
        .feature-card h3 { font-size: 1.5rem; margin-bottom: 1rem; } .feature-card p { margin-bottom: 1.5rem; line-height: 1.7; } .feature-icon { font-size: 3rem; margin-bottom: 1.5rem; color: var(--accent); }

        /* --- Tech Section --- */
        .tech-section { background: linear-gradient(135deg, var(--primary) 0%, #530786 100%); color: var(--white); padding: 7rem 5% 8rem; text-align: center; position: relative; overflow: hidden; }
        .tech-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 90% 10%, rgba(255, 107, 129, 0.15) 0%, transparent 50%), radial-gradient(circle at 10% 90%, rgba(255, 215, 0, 0.1) 0%, transparent 50%); z-index: 0; }
        .tech-section .container { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }
        .tech-section .section-title { color: var(--white); font-size: 2.8rem; margin-bottom: 1.5rem; } .tech-section .section-title::after { background: linear-gradient(90deg, var(--highlight), var(--accent)); height: 5px; border-radius: 5px; width: 120px; } .tech-section > p { font-size: 1.2rem; max-width: 700px; margin: 0 auto 4rem; opacity: 0.9; }
        .stats-container { position: relative; height: 500px; max-width: 800px; margin: 0 auto; overflow: visible; }
        .stat-item { position: absolute; width: 250px; height: 250px; background: rgba(255, 255, 255, 0.05); padding: 2rem; border-radius: 50%; opacity: 0; transform: translateY(30px) rotateX(10deg); transition: opacity 0.8s ease, transform 0.8s ease; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); will-change: transform, opacity; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
        .stat-item.active { opacity: 1; transform: translateY(0) rotateX(0); animation: float-stats 6s ease-in-out infinite; }
        .stat-item:nth-child(1) { top: 0; left: 20%; animation-delay: 0s; z-index: 4; transform: translateX(-50%) translateY(30px) rotateX(10deg); } .stat-item.active:nth-child(1) { animation-name: float-stats-1; transform: translateX(-50%) translateY(0) rotateX(0); } @keyframes float-stats-1 { 0%, 100% { transform: translateX(-50%) translateY(0) rotateX(0); } 33% { transform: translateX(calc(-50% + 8px)) translateY(-8px) rotateX(0); } 66% { transform: translateX(calc(-50% - 8px)) translateY(8px) rotateX(0); } }
        .stat-item:nth-child(2) { top: 0; right: 20%; animation-delay: 1.5s; z-index: 3; transform: translateX(50%) translateY(30px) rotateX(10deg); } .stat-item.active:nth-child(2) { animation-name: float-stats-2; transform: translateX(50%) translateY(0) rotateX(0); } @keyframes float-stats-2 { 0%, 100% { transform: translateX(50%) translateY(0) rotateX(0); } 33% { transform: translateX(calc(50% + 8px)) translateY(-8px) rotateX(0); } 66% { transform: translateX(calc(50% - 8px)) translateY(8px) rotateX(0); } }
        .stat-item:nth-child(3) { bottom: 0; left: 20%; animation-delay: 3s; z-index: 2; transform: translateX(-50%) translateY(30px) rotateX(10deg); } .stat-item.active:nth-child(3) { animation-name: float-stats-3; transform: translateX(-50%) translateY(0) rotateX(0); } @keyframes float-stats-3 { 0%, 100% { transform: translateX(-50%) translateY(0) rotateX(0); } 33% { transform: translateX(calc(-50% + 8px)) translateY(-8px) rotateX(0); } 66% { transform: translateX(calc(-50% - 8px)) translateY(8px) rotateX(0); } }
        .stat-item:nth-child(4) { bottom: 0; right: 20%; animation-delay: 4.5s; z-index: 1; transform: translateX(50%) translateY(30px) rotateX(10deg); } .stat-item.active:nth-child(4) { animation-name: float-stats-4; transform: translateX(50%) translateY(0) rotateX(0); } @keyframes float-stats-4 { 0%, 100% { transform: translateX(50%) translateY(0) rotateX(0); } 33% { transform: translateX(calc(50% + 8px)) translateY(-8px) rotateX(0); } 66% { transform: translateX(calc(50% - 8px)) translateY(8px) rotateX(0); } }
        .stat-number { font-size: 2.5rem; font-weight: 800; background: linear-gradient(90deg, var(--accent), #FF3D6A); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.2; display: inline-block; } .stat-text { font-size: 1rem; line-height: 1.4; } .stat-source { font-size: 0.8rem; color: var(--highlight); font-style: italic; opacity: 0.8; line-height: 1.4; margin-top: 0.5rem; } .stat-source a { color: var(--highlight); text-decoration: none; } .stat-source a:hover { text-decoration: underline; opacity: 1; } .stat-source sup { font-size: 0.6rem; vertical-align: super; }
        .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .particle { position: absolute; border-radius: 50%; opacity: 0.2; filter: blur(10px); }
        .particle-1 { top: 10%; left: 5%; width: 80px; height: 80px; background: var(--accent); animation: particle-float 25s linear infinite; } .particle-2 { top: 70%; left: 10%; width: 120px; height: 120px; background: var(--highlight); animation: particle-float 30s linear infinite 2s; } .particle-3 { top: 20%; right: 10%; width: 100px; height: 100px; background: #4361EE; animation: particle-float 20s linear infinite 5s; } .particle-4 { bottom: 15%; right: 20%; width: 70px; height: 70px; background: var(--accent); animation: particle-float 22s linear infinite 3s; } .particle-5 { top: 50%; left: 50%; width: 150px; height: 150px; background: #3F37C9; animation: particle-float 35s linear infinite 1s; }
        @keyframes particle-float { 0% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -50px) rotate(120deg); } 66% { transform: translate(-50px, 30px) rotate(240deg); } 100% { transform: translate(0, 0) rotate(360deg); } }

        /* --- FAQ Section --- */
        .faq-section { background: linear-gradient(135deg, var(--primary) 0%, #530786 100%); color: var(--white); padding: 7rem 5%; text-align: center; position: relative; overflow: hidden; }
        .faq-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 90% 10%, rgba(255, 107, 129, 0.15) 0%, transparent 50%), radial-gradient(circle at 10% 90%, rgba(255, 215, 0, 0.1) 0%, transparent 50%); z-index: 0; }
        .faq-container { max-width: 800px; margin: 0 auto; position: relative; z-index: 2; }
        .faq-item { background: rgba(255, 255, 255, 0.05); border-radius: 10px; margin-bottom: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
        .faq-question { padding: 1.75rem 3.5rem 1.75rem 1.75rem; font-size: 1.2rem; font-weight: 600; cursor: default; position: relative; border-radius: 10px 10px 0 0; overflow: hidden; background: rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .faq-question span { display: block; }
        .faq-toggle { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--accent); background: none; border: none; padding: 0.5rem; line-height: 1; cursor: pointer; transition: color 0.3s ease; display: inline-flex; align-items: center; justify-content: center; } .faq-toggle:hover { color: var(--highlight); }
        .faq-answer { padding: 0 1.5rem; font-size: 1rem; line-height: 1.6; display: none; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; border-radius: 0 0 10px 10px; background: rgba(0, 0, 0, 0.1); } .faq-answer[style*="display: block"] { max-height: 300px; padding: 1.5rem; }

        /* --- Contact Us Section --- */
        .contact-section { background: linear-gradient(to bottom, #7209B7 0%, #ff1493 10%, #ff1493 90%, #7209B7 100%); padding: 7rem 5%; text-align: center; color: var(--white); }
        .contact-container { display: flex; gap: 2rem; max-width: 1000px; margin: 0 auto; flex-wrap: wrap; position: relative; z-index: 1; }
        .contact-info { flex: 1 1 300px; padding: 2rem; background: var(--primary); color: var(--white); border-radius: 15px; text-align: left; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .contact-info h3 { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--accent); } .contact-info ul { list-style: none; padding-left: 0; } .contact-info li { margin-bottom: 1rem; display: flex; align-items: center; } .contact-info i { margin-right: 1rem; color: var(--highlight); width: 1.2em; text-align: center; flex-shrink: 0; } .contact-info a { color: var(--white); text-decoration: none; transition: color 0.3s ease; } .contact-info a:hover { color: var(--highlight); text-decoration: none; }
        .contact-form { flex: 1 1 400px; padding: 2rem; background: var(--primary); border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); text-align: left; } .contact-form h3 { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--accent); }
        .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; font-size: 1rem; margin-bottom: 0.5rem; color: var(--white); }
        .form-group input, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; font-size: 1rem; background-color: rgba(255, 255, 255, 0.1); color: var(--white); transition: border-color 0.3s ease, background-color 0.3s ease; } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.6); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--highlight); background-color: rgba(255, 255, 255, 0.15); } .form-group textarea { resize: vertical; min-height: 100px; }
        .contact-form .button { width: 100%; background: none; } .contact-form .button-container { padding-bottom: 0; margin-top: 1rem; /* Add space above button */ }

        /* --- Footer --- */
        footer { background-color: var(--dark); color: var(--white); padding: 3rem 5%; }
        .footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; max-width: 1200px; margin: 0 auto;}
        .footer-logo { flex: 1 1 300px; } .footer-logo h2 { color: var(--white); margin-bottom: 1rem; font-size: 1.8rem; } .footer-logo span { color: var(--accent); } .footer-logo p { margin-bottom: 1.5rem; line-height: 1.7; opacity: 0.8; } .social-icons { display: flex; gap: 1rem; margin-top: 1.5rem; } .social-icons a { color: var(--white); font-size: 1.5rem; transition: color 0.3s ease, transform 0.3s ease; text-decoration: none; display: inline-block; } .social-icons a:hover { color: var(--accent); text-decoration: none; transform: scale(1.1) translateY(-2px); }
        .footer-links { flex: 1 1 180px; } .footer-links h3 { margin-bottom: 1rem; color: var(--accent); font-size: 1.2rem; } .footer-links ul { list-style: none; padding-left: 0; } .footer-links li { margin-bottom: 0.7rem; display: flex; align-items: center; }
        .footer-links a { color: var(--white); text-decoration: none; transition: color 0.3s ease; }
        .footer-links a:hover { color: var(--highlight); text-decoration: none; } .footer-links i { margin-right: 0.8rem; color: var(--highlight); width: 1.2em; text-align: center; flex-shrink: 0; }
        .copyright { text-align: center; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.9rem; opacity: 0.7; }

        /* --- Responsive Styles --- */
        @media (max-width: 768px) {
            nav { height: 60px; padding: 0.5rem 5%;}
            .nav-links { display: none; }
            .mobile-menu { display: inline-flex; }
            .nav-logo-img { height: 25px; }

            .hero { min-height: 70vh; } /* Adjust height if needed */
            /* No padding on .hero itself */
            .hero-inner-content {
                max-width: 100%; /* Allow content to use more width */
                padding: 250px 5%; /* Keep side padding */
                padding-bottom: 60px; /* Less bottom padding */
            }
            .hero-positioning-container { padding-top: 60px; /* Less top padding */ }
            .hero h1 { font-size: 36px; }
            .hero p { font-size: 15px; max-width: 90%; margin-bottom: 25px;}
            .video-container { margin-top: 1.5rem; margin-bottom: 2rem; }
            .hero-video { max-width: 90%; }

            /* --- Slogan Banner Responsive --- */
            .slogan-banner { padding: 0.5rem 0; /* Slightly less padding */ }
            .slogan-item { font-size: 0.8rem; margin: 0 1rem; }
            .slogan-track { animation-duration: 20s; /* Speed up slightly on mobile */ }
             /* --- End Slogan Banner Responsive --- */

            .curve, .curve-mask { top: 10%; height: 150px; }
            .svg-element { width: 18px; height: 18px; } .svg-number { font-size: 8px; }

            .why-section, .tech-section, .faq-section, .contact-section { padding: 4rem 5%; }
            .section-title { font-size: 2rem; } .section-title::before { font-size: 3.5rem; top: -20px;}

            .cards-container { flex-direction: column; align-items: center; gap: 1.5rem;}
            .feature-card-wrapper { width: 95%; max-width: none; flex-basis: auto;}

            .stats-container { display: flex; flex-direction: column; height: auto; align-items: center; position: static; margin-top: 2rem; }
            .stat-item { position: relative; width: 200px; height: 200px; margin: 1rem auto; transform: translateY(30px); opacity: 0; animation: none; }
            .stat-item.active { opacity: 1; transform: translateY(0); animation: float-stats-mobile 6s ease-in-out infinite; }
            @keyframes float-stats-mobile { 0%, 100% { transform: translateY(0); } 33% { transform: translateY(-6px); } 66% { transform: translateY(6px); } }
            .stat-item:nth-child(1), .stat-item:nth-child(2), .stat-item:nth-child(3), .stat-item:nth-child(4) { top: auto; left: auto; right: auto; bottom: auto; transform: translateY(30px); z-index: 1; }
            .stat-number { font-size: 2rem; } .stat-text { font-size: 0.9rem;}

            .faq-container { max-width: 95%; }
            .faq-question { font-size: 1rem; padding: 1.25rem 3rem 1.25rem 1.25rem;}
            .faq-answer { font-size: 0.9rem; }

            .contact-container { flex-direction: column; gap: 1.5rem; }
            .contact-info, .contact-form { width: 100%; flex-basis: auto; padding: 1.5rem; }
            .form-group input, .form-group textarea { padding: 0.6rem; }

            .footer-content { flex-direction: column; text-align: center; gap: 1.5rem; }
            .footer-logo, .footer-links { min-width: 100%; margin-bottom: 1rem; flex-basis: auto; }
            .social-icons { justify-content: center; }
            .footer-links ul { text-align: center; } .footer-links li { justify-content: center; } .footer-links i { margin-right: 0.5rem; }
        }

        /* --- Animation for scroll reveal --- */
        .reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
        .reveal-on-scroll.active { opacity: 1; transform: translateY(0); }
        /* --- Hero Shapes --- */
        .shape { position: absolute; border-radius: 50%; opacity: 0.2; filter: blur(80px); z-index: 1; }
        .shape-1 { top: 75%; left: 10%; width: 150px; height: 150px; background: var(--accent); animation: float 15s ease-in-out infinite; } .shape-2 { bottom: 10%; right: 10%; width: 250px; height: 250px; background: var(--highlight); animation: float 20s ease-in-out infinite reverse; } .shape-3 { top: 50%; left: 50%; width: 120px; height: 120px; background: #3F37C9; animation: float 12s ease-in-out infinite 2s; }
        @keyframes float { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -30px) scale(1.1); } 100% { transform: translate(0, 0) scale(1); } }
        /* --- Chat Banner
        .chat-banner { position: fixed; bottom: 1.5rem; right: 1.5rem; background-color: var(--accent); color: var(--white); padding: 0.8rem 1.2rem; border-radius: 50px; cursor: pointer; box-shadow: 0 5px 15px rgba(255, 107, 129, 0.4); z-index: 999; display: flex; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .chat-banner:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 8px 20px rgba(255, 107, 129, 0.5); }
        .chat-banner span { margin-left: 0.5rem; font-weight: 600; font-size: 0.9rem; }
        .chat-banner i { font-size: 1.1rem; } --- */
         /* Font awesome base */
         .fa, .fas, .fab { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; }