/* CSS Reset & Stripe Design Tokens */
        :root {
            /* Colors */
            --primary: #533afd;
            --primary-deep: #4434d4;
            --primary-press: #2e2b8c;
            --brand-dark-900: #1c1e54;
            --ink: #0d253d;
            --ink-secondary: #273951;
            --ink-mute: #64748d;
            --canvas: #ffffff;
            --canvas-soft: #f6f9fc;
            --canvas-cream: #f5e9d4;
            --hairline: #e3e8ee;
            --hairline-input: #a8c3de;
            
            /* Geometry */
            --rounded-xs: 4px;
            --rounded-sm: 6px;
            --rounded-md: 8px;
            --rounded-lg: 12px;
            --rounded-pill: 9999px;

            /* Spacing */
            --space-sm: 8px;
            --space-md: 12px;
            --space-lg: 16px;
            --space-xl: 24px;
            --space-xxl: 32px;
            --space-huge: 64px;

            /* Shadows */
            --shadow-level-1: rgba(0,55,112,0.08) 0 1px 3px;
            --shadow-level-2: rgba(0,55,112,0.08) 0 8px 24px, rgba(0,55,112,0.04) 0 2px 6px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body { 
            font-family: 'Inter', "SF Pro Display", system-ui, -apple-system, sans-serif; 
            font-weight: 300; /* Thin weight is the brand */
            color: var(--ink); 
            line-height: 1.6; 
            background-color: var(--canvas); 
            font-feature-settings: "ss01"; /* Global substitution */
            -webkit-font-smoothing: antialiased;
        }
        
        .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
        section { padding: 96px 0; }
        
        /* Backgrounds */
        .bg-soft { background-color: var(--canvas-soft); }
        .bg-cream { background-color: var(--canvas-cream); }
        .bg-dark { background-color: var(--brand-dark-900); color: var(--canvas); }
        
        /* Typography Scale */
        h1, h2, h3, h4 { color: var(--ink); font-weight: 300; margin-bottom: 24px; }
        .bg-dark h1, .bg-dark h2, .bg-dark h3 { color: var(--canvas); }
        
        h1 { font-size: 56px; line-height: 1.03; letter-spacing: -1.4px; }
        h2 { font-size: 48px; line-height: 1.15; letter-spacing: -0.96px; text-align: center; margin-bottom: 48px; }
        h3 { font-size: 26px; line-height: 1.12; letter-spacing: -0.26px; }
        
        p { color: var(--ink-secondary); margin-bottom: 16px; font-size: 16px; line-height: 1.5; }
        .text-mute { color: var(--ink-mute); font-size: 15px; }
        
        /* Tabular data for money/numerics */
        .tabular-num { font-feature-settings: "tnum"; letter-spacing: -0.42px; }

        /* Buttons */
        .btn { 
            display: inline-flex; 
            align-items: center;
            justify-content: center;
            background-color: var(--primary); 
            color: var(--canvas); 
            padding: 10px 20px; 
            border-radius: var(--rounded-pill); 
            text-decoration: none; 
            font-weight: 400; 
            font-size: 16px;
            transition: background 0.2s ease, transform 0.1s ease; 
            border: none; 
            cursor: pointer; 
            line-height: 1;
        }
        .btn:hover { background-color: var(--primary-press); }
        .btn:active { transform: scale(0.98); }
        
        .btn-outline {
            background-color: transparent;
            color: var(--primary);
            border: 1px solid var(--primary);
        }
        .btn-outline:hover { background-color: var(--canvas-soft); }

        /* Uniqueness Block Placeholder */
        .u-block { display: none; }
        
        /* Hero Section with Background Photo */
        .hero { 
            position: relative; 
            padding: 120px 0 100px; 
            background: url('../img/hero-bg.png') center/cover no-repeat;
            overflow: hidden;
        }
        
        /* Dark Overlay so text is 100% readable */
        .hero-mesh {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, rgba(13, 37, 61, 0.95) 0%, rgba(13, 37, 61, 0.7) 100%);
            z-index: 1;
            pointer-events: none;
        }

        .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
        
        /* Make text white over the dark overlay */
        .hero-content h1, .hero-content p { color: var(--canvas); }
        
        .hero-benefits { list-style: none; margin: 32px 0; }
        .hero-benefits li { 
            position: relative; 
            padding-left: 28px; 
            margin-bottom: 16px; 
            font-size: 16px;
            color: rgba(255, 255, 255, 0.9);
        }
        .hero-benefits li::before { 
            content: '✓'; 
            position: absolute; 
            left: 0; 
            color: var(--primary); 
            font-weight: 600;
        }
        
        /* Form Card */
        .lead-form { 
            background: var(--canvas); 
            padding: var(--space-xxl); 
            border-radius: var(--rounded-lg); 
            box-shadow: var(--shadow-level-2); 
            border: 1px solid var(--hairline);
            position: relative;
            z-index: 3;
        }
        .lead-form h3 { font-size: 22px; letter-spacing: -0.22px; text-align: center; margin-bottom: 24px; }
        .form-group { margin-bottom: 16px; }
        .form-control { 
            width: 100%; 
            padding: 12px 16px; 
            border: 1px solid var(--hairline-input); 
            border-radius: var(--rounded-sm); 
            font-family: 'Inter', sans-serif; 
            font-size: 15px; 
            font-weight: 300;
            color: var(--ink);
            transition: border-color 0.2s ease;
        }
        .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
        .lead-form .btn { width: 100%; margin-top: 8px; padding: 14px; }
        
        /* Grid Layouts */
        .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
        .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
        
        /* Cards */
        .card { 
            background: var(--canvas); 
            padding: var(--space-xxl); 
            border-radius: var(--rounded-lg); 
            box-shadow: var(--shadow-level-1); 
            border: 1px solid var(--hairline);
            transition: transform 0.2s ease, box-shadow 0.2s ease; 
        }
        .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-level-2); }
        .card-icon { font-size: 32px; margin-bottom: 24px; display: inline-block; }
        .card h3 { font-size: 22px; letter-spacing: -0.22px; margin-bottom: 12px; }
        
        /* Quote */
        .quote-block { 
            border-left: 3px solid var(--primary); 
            padding: 24px 32px; 
            background: var(--canvas-soft); 
            margin: 40px 0; 
            font-size: 18px; 
            line-height: 1.5;
            border-radius: 0 var(--rounded-lg) var(--rounded-lg) 0;
            color: var(--ink-secondary);
        }
        
        /* Steps */
        .step-item { 
            display: flex; 
            align-items: flex-start; 
            margin-bottom: 24px; 
            background: var(--canvas); 
            padding: var(--space-xl); 
            border-radius: var(--rounded-lg); 
            border: 1px solid var(--hairline);
            box-shadow: var(--shadow-level-1); 
        }
        .step-num { 
            flex-shrink: 0; 
            width: 40px; height: 40px; 
            background: var(--canvas-soft); 
            color: var(--primary); 
            border-radius: var(--rounded-pill); 
            display: flex; justify-content: center; align-items: center; 
            font-size: 16px; font-weight: 600; 
            margin-right: 24px;
            border: 1px solid var(--hairline);
            font-feature-settings: "tnum";
        }
        .step-content h3 { font-size: 20px; letter-spacing: -0.2px; margin-bottom: 8px; }
        
        /* Table */
        .table-container {
            background: var(--canvas);
            border-radius: var(--rounded-lg);
            border: 1px solid var(--hairline);
            box-shadow: var(--shadow-level-1);
            overflow: hidden;
            margin-top: 40px;
        }
        .comparison-table { width: 100%; border-collapse: collapse; text-align: left; }
        .comparison-table th, .comparison-table td { padding: 20px 24px; border-bottom: 1px solid var(--hairline); }
        .comparison-table th { background: var(--canvas-soft); color: var(--ink); font-weight: 400; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
        .comparison-table tr:last-child td { border-bottom: none; }
        .check-yes { color: #008a00; font-weight: 400; display: flex; align-items: center; gap: 8px;}
        .check-no { color: #d92a2a; font-weight: 400; display: flex; align-items: center; gap: 8px;}
        
        /* FAQ Accordion */
        .faq-item { 
            background: var(--canvas); 
            margin-bottom: 16px; 
            border-radius: var(--rounded-md); 
            border: 1px solid var(--hairline);
            overflow: hidden; 
        }
        .faq-question { 
            padding: 24px; 
            cursor: pointer; 
            font-weight: 400; 
            font-size: 18px;
            display: flex; justify-content: space-between; align-items: center; 
            color: var(--ink); 
        }
        .faq-question::after { content: '+'; font-size: 24px; color: var(--ink-mute); font-weight: 300; }
        .faq-answer { padding: 0 24px 24px; display: none; color: var(--ink-secondary); }
        
        /* Reviews */
        .review-card { display: flex; flex-direction: column; }
        .review-header { display: flex; align-items: center; margin-bottom: 16px; }
        .avatar { width: 48px; height: 48px; background-color: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--rounded-pill); margin-right: 16px; }
        .review-name { font-weight: 600; color: var(--ink); font-size: 15px; }
        .review-role { font-size: 13px; color: var(--ink-mute); }
        
        /* Footer */
        .site-footer { background: var(--canvas); color: var(--ink-mute); padding: 64px 0 32px; border-top: 1px solid var(--hairline); }
        .site-footer p { color: var(--ink-mute); font-size: 13px; margin-bottom: 8px;}
        
        /* Floating Widget */
        .whatsapp-widget { position: fixed; bottom: 32px; right: 32px; width: 56px; height: 56px; background: var(--canvas); color: #25D366; border-radius: var(--rounded-pill); display: flex; justify-content: center; align-items: center; font-size: 28px; box-shadow: var(--shadow-level-2); border: 1px solid var(--hairline); z-index: 100; cursor: pointer; transition: transform 0.2s ease; }
        .whatsapp-widget:hover { transform: translateY(-4px); }

        
        /* Header Sticky */
        .site-header {
            position: fixed;
            top: 0; left: 0; right: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(8px);
            z-index: 100;
            border-bottom: 1px solid var(--hairline);
        }
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
        }
        .nav-logo { font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -0.5px; }
        .nav-links { display: flex; align-items: center; }
        .nav-links a { color: var(--ink-secondary); text-decoration: none; margin: 0 16px; font-size: 15px; font-weight: 400; transition: color 0.2s; }
        .nav-links a:hover { color: var(--primary); }
        .navbar .btn-sm { padding: 8px 16px; font-size: 14px; }
        
        .mobile-only { display: none !important; }
        .burger { cursor: pointer; display: flex; align-items: center; }

        /* Accordion FAQ */
        .faq-details {
            background: var(--canvas);
            border: 1px solid var(--hairline);
            border-radius: var(--rounded-lg);
            margin-bottom: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .faq-details:hover {
            border-color: var(--primary);
        }
        .faq-details summary {
            padding: 24px;
            font-size: 18px;
            font-weight: 600;
            color: var(--ink);
            cursor: pointer;
            list-style: none;
            position: relative;
            outline: none;
        }
        .faq-details summary::-webkit-details-marker { display: none; }
        .faq-details summary::after {
            content: '+';
            position: absolute;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: var(--primary);
            transition: transform 0.3s;
        }
        .faq-details[open] summary::after {
            content: '−';
            transform: translateY(-50%) rotate(180deg);
        }
        .faq-details .faq-answer-content {
            padding: 0 24px 24px;
            color: var(--ink-secondary);
            line-height: 1.6;
        }

        /* Breadcrumbs */
        .breadcrumbs {
            margin-bottom: 24px;
            font-size: 14px;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        .breadcrumbs a {
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            transition: color 0.2s;
        }
        .breadcrumbs a:hover { color: var(--canvas); }
        .breadcrumbs .separator {
            color: rgba(255, 255, 255, 0.3);
            margin: 0 8px;
        }
        .breadcrumbs .current-page {
            color: rgba(255, 255, 255, 0.9);
            font-weight: 400;
        }

        /* Form Tabs */
        .form-tabs {
            display: flex;
            background: var(--canvas-soft);
            padding: 4px;
            border-radius: var(--rounded-md);
            margin-bottom: 16px;
        }
        .form-tabs .tab {
            flex: 1;
            text-align: center;
            padding: 8px;
            font-size: 14px;
            color: var(--ink-mute);
            cursor: pointer;
            border-radius: var(--rounded-sm);
            transition: all 0.2s;
        }
        .form-tabs .tab.active {
            background: var(--canvas);
            color: var(--ink);
            box-shadow: var(--shadow-level-1);
            font-weight: 400;
        }

        /* Modal Overlay */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(13, 37, 61, 0.6);
            backdrop-filter: blur(4px);
            z-index: 999;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            width: 100%;
            max-width: 400px;
            margin: 0 24px;
            position: relative;
            background: var(--canvas);
            animation: modalFadeIn 0.3s ease;
        }
        .modal-close {
            position: absolute;
            top: 16px; right: 24px;
            font-size: 28px;
            color: var(--ink-mute);
            cursor: pointer;
            line-height: 1;
            z-index: 10;
        }
        .modal-close:hover { color: var(--ink); }
        @keyframes modalFadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Mobile Menu */
        .mobile-menu-content {
            background: var(--canvas);
            height: 100%;
            width: 80%;
            max-width: 320px;
            margin: 0;
            position: absolute;
            right: 0;
            border-radius: 0;
            padding: 64px 32px;
            animation: slideLeft 0.3s ease;
        }
        @keyframes slideLeft {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }
        .mobile-nav-links { display: flex; flex-direction: column; gap: 24px; font-size: 18px; }
        .mobile-nav-links a { color: var(--ink); text-decoration: none; font-weight: 400; border-bottom: 1px solid var(--hairline); padding-bottom: 12px; }

        /* Responsive */

        @media (max-width: 992px) {
            .desktop-only { display: none !important; }
            .mobile-only { display: flex !important; }
            .hero-grid { grid-template-columns: 1fr; gap: 48px; }
 { grid-template-columns: 1fr; gap: 48px; }
            .hero { padding: 80px 0; }
            .grid-3 { grid-template-columns: repeat(2, 1fr); }
            .grid-4 { grid-template-columns: repeat(2, 1fr); }
            h1 { font-size: 48px; }
        }
        @media (max-width: 768px) {
            h1 { font-size: 36px; letter-spacing: -0.64px; }
            h2 { font-size: 32px; letter-spacing: -0.64px; margin-bottom: 32px; }
            .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
            .comparison-table { display: block; overflow-x: auto; white-space: nowrap; }
            section { padding: 64px 0; }
        }
/* Floating Action Button */
.floating-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background-color: var(--primary);
    color: var(--canvas);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-level-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease, box-shadow 0.2s ease;
}

.floating-btn:hover {
    background-color: var(--primary-deep);
    transform: scale(1.1) translateY(-4px);
    box-shadow: 0 12px 28px rgba(83,58,253,0.25), 0 4px 10px rgba(83,58,253,0.1);
}

.floating-btn:active {
    transform: scale(0.95);
    background-color: var(--primary-press);
}

@keyframes pulse-primary {
    0% { box-shadow: 0 0 0 0 rgba(83, 58, 253, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(83, 58, 253, 0); }
    100% { box-shadow: 0 0 0 0 rgba(83, 58, 253, 0); }
}

.floating-btn {
    animation: pulse-primary 3s infinite;
}

.floating-btn:hover {
    animation: none;
}

@media (max-width: 768px) {
    .floating-btn {
        bottom: 16px;
        right: 16px;
        width: 54px;
        height: 54px;
    }
}