:root{
            --blue: #0066FF;
            --bg: #ffffff;
            --muted: #666666;
            --placeholder: #eeeeee;
            --radius: 16px;
            --max-width: 1200px;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        html,body{height:100%;overflow-x:hidden}
        body{
            font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            color:#222;line-height:1.5;background:var(--bg);
            -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;height:auto;display:block}
        
        /* NAV - mobile optimized */
        nav{
            position:sticky;top:0;background:#fff;z-index:1200;
            box-shadow:0 1px 3px rgba(0,0,0,0.08);
            display:flex;align-items:center;justify-content:space-between;
            padding:14px 16px;
        }
        .logo{display:flex;align-items:center;cursor:pointer}
        .logo img{max-height:100px;width:auto}
        .nav-links{
            display:none;gap:20px;list-style:none;align-items:center;
            flex-direction:column;position:absolute;top:100%;left:0;right:0;
            background:#fff;padding:20px;box-shadow:0 4px 12px rgba(0,0,0,0.1);
        }
        .nav-links.active{display:flex}
        .nav-links a{font-size:15px;color:#333;font-weight:600;padding:8px 0;display:block;width:100%;text-align:center;transition:color 0.3s}
        .nav-links a.active,.nav-links a:hover{color:var(--blue)}
        .nav-buttons{display:flex;gap:8px;align-items:center}
        .btn-login{background:transparent;border:0;padding:6px 12px;font-weight:600;cursor:pointer;font-size:14px;white-space:nowrap}
        .btn-signup{
            background:var(--blue);color:#fff;border:0;
            padding:8px 16px;border-radius:8px;font-weight:700;
            cursor:pointer;font-size:14px;white-space:nowrap;
        }
        .nav-toggle{display:block;border:0;background:transparent;font-size:24px;cursor:pointer;padding:4px}
        
        /* HERO - mobile optimized */
        .hero{
            display:flex;flex-direction:column;text-align:center;
            padding:32px 16px 24px;min-height:auto;
            background:linear-gradient(135deg,#f8f9ff 0%,#ffffff 100%);
        }
        .hero-diagram{
            display:flex;align-items:center;justify-content:center;
            position:relative;margin-top:0;overflow:hidden;
            width:100%;max-width:100%;
        }
        .diagram{
            width:100%;max-width:350px;height:auto;
            position:relative;margin:0 auto;
        }
        .diagram img{
            width:100%;height:auto;max-width:100%;
            object-fit:contain;
        }
        .hero-content{margin-bottom:24px}
        .hero-content h1{
            font-size:28px;line-height:1.2;margin-bottom:16px;
            font-weight:800;word-wrap:break-word;
        }
        .hero-content h1 .blue{color:var(--blue)}
        .hero-content p{
            font-size:15px;color:var(--muted);margin-bottom:24px;
            line-height:1.6;
        }
        .hero-buttons{display:flex;gap:12px;flex-direction:column;max-width:100%}
        .btn-primary{
            background:var(--blue);color:#fff;padding:14px 24px;
            border-radius:10px;border:0;font-weight:700;cursor:pointer;
            display:inline-flex;align-items:center;gap:8px;
            width:100%;justify-content:center;font-size:15px;
            transition:transform 0.2s,box-shadow 0.2s;
        }
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,102,255,0.3)}
        .btn-secondary{
            background:#fff;border:2px solid #e6e6e6;
            padding:12px 24px;border-radius:10px;font-weight:700;
            cursor:pointer;width:100%;font-size:15px;
            transition:border-color 0.2s;
        }
        .btn-secondary:hover{border-color:var(--blue)}
        
        
        /* Brands */
        .brands-section{padding:32px 16px;background:#fff;overflow-x:hidden}
        .brands-carousel{
            display:flex;gap:16px;align-items:center;
            overflow-x:auto;padding:16px 0;
            scroll-snap-type:x mandatory;
            -webkit-overflow-scrolling:touch;
        }
        .brand-placeholder{
            flex-shrink:0;width:160px;height:auto;
            background:var(--placeholder);border-radius:6px;
            scroll-snap-align:center;
        }
        
        /* Stats */
        .stats-section{
            padding:40px 16px;text-align:center;
            /* background:linear-gradient(135deg,#f0f4ff 0%,#ffffff 100%); */
            background: linear-gradient(rgba(240, 244, 255, 0.0), rgba(255, 255, 255, 0.0)), url('./Assets/india_map.png') no-repeat center center;
            background-size: contain;
            min-height: 400px; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
        }
        .stats-section h2{
            font-size:24px;margin-bottom:32px;font-weight:800;
            line-height:1.3;
        }
        .stats-grid{
            display:grid;grid-template-columns:1fr;
            gap:28px;max-width:980px;margin:0 auto;
        }
        .stat-item{text-align:center}
        .stat-number{
            font-size:36px;color:var(--blue);font-weight:800;
            margin-bottom:8px;
        }
        .stat-label{font-weight:700;color:#333;font-size:14px}
        
        /* Feature sections - mobile */
        .feature-section{
            display:flex;flex-direction:column;gap:16px;
            align-items:center;padding:32px 12px;
            position:relative;overflow:hidden;
        }
        .feature-section:nth-child(even){background:#fafbfc}
        .feature-content{flex:1;text-align:center;width:100%;max-width:100%}
        .feature-image{
            display:fill;justify-content:center;
            margin-top:2px;width:100%;max-width:100vw;
            padding: 0;
        }
        .feature-image img {
            width: 100%;
            height: auto;
            max-width: 100vw; /* 🔥 fills most of the screen */
            /* max-width: 100%; */
            transform: scale(1.8);
            object-fit: fill;
            border-radius: 12px;
            }
        @media (max-width: 768px){
            .feature-image img:not(.report-img){
                transform: scale(1.08); /* subtle visual boost */
            }
        }
        /* .feature-image img{
            max-width:100%;height:auto;
            border-radius:12px;
        } */
        .feature-label{
            color:var(--blue);font-weight:700;
            text-transform:uppercase;letter-spacing:1px;
            margin-bottom:12px;font-size:24px;
        }
        .feature-content h2{
            font-size:22px;margin-bottom:16px;font-weight:800;
            line-height:1.3;
        }
        .feature-list{list-style:none;padding-left:0;text-align:left;margin-bottom:20px}
        .feature-list li{
            display:flex;gap:10px;margin-bottom:14px;
            color:var(--muted);align-items:flex-start;
            font-size:14px;line-height:1.6;
        }
        .check-icon{color:#10B981;font-weight:700;flex-shrink:0}
        
        /* Report image - mobile fix */
        .report-img{
            width:100%;max-width:100vw;
            position:relative;
            transform:scale(1.12); /* make report readable on phones */
            /* transform:none; */
            border-radius:12px;
            filter:drop-shadow(0px 10px 20px rgba(0,0,0,0.15));
            pointer-events: none;
        }
        
        
        /* Benefits */
        .benefits-section{padding:40px 16px;text-align:center;background:#fff}
        .benefits-header h2{font-size:24px;margin:12px 0 16px;font-weight:800}
        .benefits-header p{font-size:14px;line-height:1.6;padding:0 8px}
        .benefits-grid{
            display:grid;grid-template-columns:1fr;
            gap:16px;max-width:1200px;margin:24px auto 0;
        }
        .benefit-card{
            background:#f8f9fc;padding:24px 20px;
            border-radius:12px;text-align:center;
            transition:transform 0.3s ease;
        }
        .benefit-card:hover{transform:translateY(-6px)}
        .benefit-card h3{
            color:var(--blue);font-weight:800;
            margin:12px 0 8px;font-size:17px;
        }
        .benefit-card p{color:var(--muted);font-size:14px;line-height:1.5}
        
        /* Integrations */
        .integrations-section{
            padding:40px 16px;
            background:linear-gradient(135deg,#f0f4ff 0%,#ffffff 100%);
            text-align:center;
        }
        .integrations-section h2{font-size:24px;margin-bottom:12px;font-weight:800}
        .integrations-section p{font-size:14px;margin-bottom:24px;color:var(--muted);padding:0 8px}
        .integrations-grid{
            display:grid;grid-template-columns:repeat(2,1fr);
            gap:12px;max-width:1000px;margin:0 auto;
        }
        .integration-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .integration-logo {
            width: 48px;
            height: 48px;
            object-fit: contain;
        }
        /* .integration-card{
            background:#fff;padding:20px 16px;
            border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.06);
        } */
        .integration-card>div:first-child{
            height:40px;width:40px;background:var(--placeholder);
            border-radius:8px;margin:0 auto 10px;
        }
        .integration-name{font-size:13px;font-weight:600}

        /* Security Section */
        .security-section {
            padding: 40px 16px;
            background: #fff;
            text-align: center;
        }

        .security-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .security-badges {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .security-badges img {
            max-width: 100%;
            height: auto;
        }

        /* Show mobile image by default, hide desktop */
        .security-mobile {
            display: block;
            max-width: 500px;
            margin: 0 auto;
        }

        .security-desktop {
            display: none;
        }

        /* Tablet and up */
        @media (min-width: 769px) {
            .security-section {
                padding: 56px 32px;
            }
            
            /* Switch to desktop image */
            .security-mobile {
                display: none;
            }
            
            .security-desktop {
                display: block;
                max-width: 700px;
                margin: 0 auto;
            }
        }

        /* Desktop */
        @media (min-width: 1025px) {
            .security-section {
                padding: 80px 64px;
            }
            
            .security-desktop {
                max-width: 900px;
            }
        }
        
        /* Pricing Section */
.pricing-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem; /* mobile side spacing */
    background: #ffffff;
    color: #1a202c;
}

        .section-header {
            text-align: center;
            margin-bottom: 4rem;
            padding: 0 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .section-title {
            font-size: 2.5rem;
            color: #1a202c;
            margin-bottom: 1rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.02em;
        }

        .section-subtitle {
            font-size: 1.1rem;
            color: #4a5568;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
            margin-bottom: 2.5rem;
        }

        /* Tabs */
        .pricing-tabs {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 2.5rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        .tab-btn {
            padding: 0.875rem 2rem;
            background: rgba(102, 126, 234, 0.1);
            border: 2px solid rgba(102, 126, 234, 0.2);
            color: #667eea;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 140px;
        }

        .tab-btn:hover {
            background: rgba(102, 126, 234, 0.15);
            border-color: rgba(102, 126, 234, 0.3);
        }

        .tab-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        /* Tab Content */
        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 0 auto 2rem auto;
    justify-content: center;
    max-width: 1100px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

        .pricing-card {
            background: white;
            border-radius: 20px;
            padding: 2.5rem;
            position: relative;
            border: 1px solid rgba(102, 126, 234, 0.08);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .pricing-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(102, 126, 234, 0.08);
            border-color: rgba(102, 126, 234, 0.15);
        }

        .pricing-card.featured {
            border: 2px solid #667eea;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
            box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
        }

        .pricing-card.featured:hover {
            box-shadow: 0 24px 48px rgba(102, 126, 234, 0.2), 0 12px 24px rgba(0, 0, 0, 0.12);
            border-color: #667eea;
        }

        .card-badge {
            display: inline-block;
            padding: 0.4rem 0.875rem;
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            margin-bottom: 1rem;
        }

        .card-badge.popular {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .card-title {
            font-size: 1.75rem;
            color: #1a202c;
            margin-bottom: 0.75rem;
            font-weight: 700;
        }

        .card-price {
            margin-bottom: 1.25rem;
        }

        .price-amount {
            font-size: 2.75rem;
            color: #1a202c;
            font-weight: 700;
        }

        .price-currency {
            font-size: 1.25rem;
            color: #4a5568;
        }

        .price-period {
            font-size: 0.95rem;
            color: #718096;
        }

        .card-features {
            list-style: none;
            margin-bottom: 1.75rem;
        }

        .card-features li {
            padding: 0.625rem 0;
            color: #4a5568;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .card-features li::before {
            content: "✓";
            color: #48bb78;
            font-weight: bold;
            margin-right: 0.5rem;
        }

        .card-cta {
            display: block;
            width: 100%;
            padding: 1rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 10px;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .card-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

        .card-cta.secondary {
            background: white;
            color: #667eea;
            border: 2px solid #667eea;
        }

        .card-cta.secondary:hover {
            background: #667eea;
            color: white;
        }

        /* Expand Button */
        .expand-section {
            text-align: center;
            margin: 2rem 0;
        }

        .expand-btn {
            background: rgba(102, 126, 234, 0.1);
            border: 2px solid rgba(102, 126, 234, 0.2);
            color: #667eea;
            padding: 0.875rem 1.75rem;
            border-radius: 10px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .expand-btn:hover {
            background: rgba(102, 126, 234, 0.15);
            border-color: rgba(102, 126, 234, 0.3);
        }

        /* Advanced Plans (Hidden by default) */
        .advanced-plans {
            display: none;
            margin-top: 2rem;
        }

        .advanced-plans.expanded {
            display: block;
            animation: slideDown 0.4s ease;
        }

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

        /* Custom Plan Card */
        .custom-card {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        .custom-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.25rem;
            margin: 2rem 0;
        }

        .custom-feature {
            padding: 1.25rem;
            background: rgba(102, 126, 234, 0.05);
            border-radius: 12px;
        }

        .custom-feature-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .custom-feature-text {
            color: #4a5568;
            font-weight: 600;
            font-size: 0.95rem;
        }

        /* Footer */
        .pricing-footer {
            text-align: center;
            margin-top: 3rem;
            color: #4a5568;
        }

        .pricing-footer p {
            margin: 0.5rem 0;
            font-size: 0.95rem;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .section-title {
                font-size: 2rem;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .tab-btn {
                flex: 1;
                min-width: 100px;
                padding: 0.75rem 1rem;
                font-size: 0.9rem;
            }

            .pricing-card {
                padding: 1.5rem;
            }

            .custom-features {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .pricing-tabs {
                gap: 0.375rem;
            }

            .tab-btn {
                padding: 0.625rem 0.75rem;
                font-size: 0.85rem;
                min-width: 90px;
            }
        }

        
        
        /* About Section */
        .about-section{
            padding:40px 16px;background:#fff;
        }
        .about-content{max-width:900px;margin:0 auto}
        .about-content h2{
            font-size:24px;margin-bottom:20px;font-weight:800;
            text-align:center;
        }
        .about-content p{
            font-size:15px;line-height:1.8;color:var(--muted);
            margin-bottom:16px;text-align:center;
        }
        .about-values{
            display:grid;grid-template-columns:1fr;
            gap:20px;margin-top:32px;
        }
        .value-card{
            background:#f8f9fc;padding:24px;
            border-radius:12px;text-align:center;
        }
        .value-card h3{
            font-size:18px;margin:12px 0 8px;
            color:var(--blue);font-weight:700;
        }
        .value-card p{font-size:14px;line-height:1.6}
        
        /* Contact Section */
        .contact-section{
            padding:40px 16px;text-align:center;
            background:linear-gradient(135deg,#f0f4ff 0%,#ffffff 100%);
        }
        .contact-section h2{font-size:24px;margin-bottom:16px;font-weight:800}
        .contact-section p{font-size:14px;color:var(--muted);margin-bottom:28px}
        .contact-info{
            max-width:600px;margin:0 auto;
            display:grid;gap:16px;
        }
        .contact-item{
            background:#fff;padding:20px;
            border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.05);
        }
        .contact-item h4{font-size:16px;margin-bottom:8px;color:var(--blue);font-weight:700}
        .contact-item a{color:var(--muted);font-size:14px}
        .contact-form {
            background: #fff;
            padding: 32px;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.08);
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 6px;
        }

        .form-group input,
        .form-group textarea {
            padding: 14px 16px;
            font-size: 15px;
            border-radius: 10px;
            border: 1px solid #ddd;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
        }

        .contact-btn {
            margin-top: 12px;
            padding: 14px;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            background: #6366f1;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
        }

        .contact-btn:hover {
            background: #4f46e5;
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(99,102,241,0.3);
        }

        @media (max-width: 480px) {
            .contact-header h2 {
                font-size: 28px;
            }

            .contact-form {
                padding: 24px;
            }
        }
        
        /* FAQ */
        .faq-section{
            display:flex;flex-direction:column;gap:24px;
            padding:40px 16px;background:#fff;
        }
        .faq-sidebar{text-align:center;margin-bottom:8px}
        .faq-sidebar h2{font-size:24px;margin:12px 0 20px;font-weight:800}
        .faq-sidebar button{
            padding:10px 20px;border-radius:8px;
            border:2px solid #e6e6e6;background:#fff;
            font-weight:700;cursor:pointer;font-size:14px;
        }
        .faq-content{}
        .faq-item{
            border-bottom:1px solid #eee;padding:16px 0;
            transition:all 0.3s ease;
        }
        .faq-question{
            display:flex;justify-content:space-between;
            cursor:pointer;font-weight:700;font-size:15px;
            align-items:flex-start;gap:12px;
        }
        .faq-answer{
            margin-top:12px;color:var(--muted);
            max-height:0;overflow:hidden;
            transition:max-height 0.3s ease;
            font-size:14px;line-height:1.6;
        }
        .faq-item.open .faq-answer{max-height:400px;padding-right:8px}
        .faq-toggle{
            transition:transform 0.3s ease;font-size:20px;
            flex-shrink:0;
        }
        .faq-item.open .faq-toggle{transform:rotate(180deg)}
        
        /* Footer */
        footer{
            padding:32px 16px;background:#0f1724;
            color:#fff;margin-top:0;text-align:center;
        }
        .footer-grid{
            display:flex;flex-direction:column;gap:24px;
            max-width:1200px;margin:0 auto;
        }
        .footer-col{flex:1}
        .footer-logo{font-weight:800;font-size:18px;margin-bottom:12px;}
        .footer-col p{font-size:14px;line-height:1.6;margin-top:8px;color:#cbd5e1}
        .footer-links{text-align:center}
        .footer-links a{
            display:block;color:#cbd5e1;margin-bottom:10px;
            font-size:14px;transition:color 0.3s;
        }
        .footer-links a:hover{color:#fff}
        .footer-col>div:last-child{
            background:var(--placeholder);height:40px;
            width:140px;border-radius:8px;margin:0 auto;
        }

        /* Tablet and up */
        @media (min-width: 769px) {
            nav{padding:16px 32px}
            .logo img{max-height:90px}
            .nav-links{
                display:flex;flex-direction:row;position:static;
                background:none;padding:0;box-shadow:none;
                margin-left: auto;
                margin-right: 30px;
            }
            .nav-links.active{display:flex}
            .nav-toggle{display:none}
            .btn-login{font-size:15px;padding:8px 16px}
            .btn-signup{font-size:15px;padding:10px 20px}
            
            .hero{
                display:flex;flex-direction:row;text-align:left;
                padding:56px 32px;min-height:70vh;
            }
            .hero-content{flex:1;max-width:600px;margin-bottom:0}
            .hero-content h1{font-size:40px}
            .hero-content p{font-size:17px}
            .hero-buttons{flex-direction:row;width:auto}
            .btn-primary,.btn-secondary{width:auto}
            .hero-diagram{margin-top:0;flex:1}
            .diagram{width:450px;height:450px;max-width:none}
            
            .brands-section{padding:40px 32px}
            .brands-carousel{overflow-x:visible;gap:32px;justify-content:center}
            .brand-placeholder{width:180px;height:auto}
            
            .stats-section{padding:64px 32px; min-height: 600px;}
            .stats-section h2{font-size:36px;margin-bottom:40px}
            .stats-grid{grid-template-columns:repeat(3,1fr);gap:40px}
            .stat-number{font-size:44px}
            .stat-label{font-size:15px}
            
            .feature-section{
                display:flex;flex-direction:row;gap:40px;
                padding:56px 32px;
            }
            .feature-section:nth-child(even){flex-direction:row-reverse}
            .feature-content{text-align:left;max-width:none}
            .feature-content h2{font-size:30px}
            .feature-list{margin-bottom:28px}
            .feature-list li{font-size:15px}
            .feature-image{margin-top:0;flex:1}
            
            .report-img{
                width:800px;max-width:none;
                position:absolute;right:-80px;top:-60px;
                transform:rotate(-4deg);
                animation:phoneFloat 4s ease-in-out infinite;
            }
            
            .benefits-section{padding:64px 32px}
            .benefits-header h2{font-size:32px}
            .benefits-header p{font-size:16px}
            .benefits-grid{grid-template-columns:repeat(2,1fr);gap:24px;margin-top:32px}
            .benefit-card{padding:28px 24px}
            .benefit-card h3{font-size:19px}
            .benefit-card p{font-size:15px}
            
            .integrations-section{padding:64px 32px}
            .integrations-section h2{font-size:32px}
            .integrations-section p{font-size:16px}
            .integrations-grid{grid-template-columns:repeat(4,1fr);gap:20px}
            .integration-card{padding:24px 20px}
            
            .pricing-section{padding:64px 32px}
            .section-title{font-size:32px}
            .section-subtitle{font-size:16px}
            .pricing-grid {
                grid-template-columns: repeat(2, minmax(300px, 1fr));
                justify-content: center;
            }
            
            .about-section{padding:64px 32px}
            .about-content h2{font-size:32px}
            .about-content p{font-size:16px;text-align:left}
            .about-values{grid-template-columns:repeat(2,1fr);gap:24px}
            
            .contact-section{padding:64px 32px}
            .contact-section h2{font-size:32px}
            .contact-section p{font-size:16px}
            
            .faq-section{
                display:flex;flex-direction:row;gap:48px;
                padding:64px 32px;
            }
            .faq-sidebar{flex:0 0 340px;text-align:left;margin-bottom:0}
            .faq-sidebar h2{font-size:32px;text-align:left}
            .faq-question{font-size:16px}
            .faq-answer{font-size:15px}
            
            footer{padding:48px 32px;text-align:left}
            .footer-grid{flex-direction:row;gap:40px}
            .footer-links{text-align:left}
            .footer-links a{font-size:15px}
            .footer-col>div:last-child{margin:0}
        }

        /* Desktop */
        @media (min-width: 1025px) {
            nav{padding:18px 64px}
            .hero{padding:80px 64px;min-height:75vh}
            .hero-content{max-width:640px}
            .hero-content h1{font-size:48px}
            .hero-content p{font-size:18px}
            .diagram{width:540px;height:640px}
            
            .report-img{
                width:100px;right:250px;top:-150px;
                filter:drop-shadow(0px 22px 40px rgba(0,0,0,0.20));
            }
            
            .brands-section{padding:56px 64px}
            .brands-carousel{gap:48px}
            .brand-placeholder{width:300px;height:auto}
            
            .stats-section{padding:80px 64px; min-height: 800px;}
            .stats-section h2{font-size:40px}
            
            .feature-section{gap:56px;padding:100px 84px}
            .feature-content h2{font-size:32px}
            .feature-image img {transform: scale(1);}
            
            .benefits-section{padding:80px 64px}
            .benefits-grid{grid-template-columns:repeat(4,1fr);gap:28px}
            .benefit-card{padding:32px}
            
            .integrations-section{padding:80px 64px}
            
            .pricing-section{
                padding:80px 64px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .pricing-grid {
                display: grid;
                grid-template-columns: repeat(3, 260px);
                gap: 2.4rem;
                justify-content: center;
                place-content: center;
                width: 100%;
                margin: 0 auto;
            }
             .pricing-grid:has(.pricing-card:only-child) {
                grid-template-columns: 260px;
                justify-content: center;
            }
            
            .about-section{padding:80px 64px}
            .about-values{grid-template-columns:repeat(3,1fr)}
            
            .contact-section{padding:80px 64px}
            
            .faq-section{padding:80px 64px}
            .faq-sidebar{flex:0 0 360px}
            
            footer{padding:56px 64px}
        }

        /* Animations */
        @keyframes fadeInUp {
            from{opacity:0;transform:translateY(30px)}
            to{opacity:1;transform:translateY(0)}
        }
        @keyframes phoneFloat {
            0%,100%{transform:rotate(-4deg) translateY(0)}
            50%{transform:rotate(-4deg) translateY(-10px)}
        }
        .fade-in{opacity:0;animation:fadeInUp 0.8s ease forwards}