:root {--primary-color: #007bff; --secondary-color: #6c757d; --success-color: #28a745; --light-bg: #f8f9fa; --card-bg: #ffffff;}
        body {background-color: var(--light-bg); margin: 0;}
        .wizard-container {padding: 30px 15px; display: flex; justify-content: center; align-items: flex-start;}
        .wizard-card {background: var(--card-bg); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 30px; max-width: 750px; width: 100%;}
        .step-indicator {display: flex; justify-content: space-between; margin-bottom: 30px; position: relative; padding: 0 10%;}
        .step-indicator::before {content: ''; position: absolute; top: 50%; left: 10%; right: 10%; border-top: 2px solid #ddd; transform: translateY(-50%); z-index: 1;}
        .step-bubble {width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background-color: #ddd; color: #fff; font-weight: 600; z-index: 2; transition: background-color 0.3s, transform 0.3s; cursor: pointer;}
        .step-bubble.active {background-color: var(--primary-color); transform: scale(1.1);}
        .step-label {position: absolute; top: 100%; width: max-content; font-size: 0.8rem; font-weight: 500; color: var(--secondary-color);}
        .step-1-label { left: 0%; } .step-2-label { left: 45%; } .step-3-label { right: 0%; }
        .form-label { font-weight: 500; color: #343a40; }
        .step { display: none; }
        .step-active { display: block; }
        .btn-primary, .btn-success { border-radius: 8px; font-weight: 600; }
        .btn-secondary { border-radius: 8px; }

    /* New Variables for Modern Design */
    :root {
        --YOUR-BRAND-COLOR: #007bff; /* Primary Blue */
        --COMPLEMENTARY-COLOR: #008080; /* Deep Emerald Green */
        --HOVER-SHADOW: 0 10px 25px rgba(0, 0, 0, 0.15); 
        --CARD-RADIUS: 16px;
    }
    
    /* Global Styles */
    .mb-6 { margin-bottom: 5rem !important; }

    /* 1. Asymmetrical Feature Grid Styles */
    .feature-card-new {
        position: relative;
        border-radius: var(--CARD-RADIUS);
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        border: 1px solid #f0f0f0;
    }
    .feature-card-new:hover {
        transform: translateY(-8px);
        box-shadow: var(--HOVER-SHADOW);
        border-color: var(--COMPLEMENTARY-COLOR);
    }
    .feature-icon-float {
        font-size: 40px;
        position: absolute;
        top: -20px; /* Float above the card */
        left: -10px; /* Position off-center */
        background-color: white;
        padding: 8px;
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* 2. Branded Step Flow Styles */
    .step-badge {
        width: 80px;
        height: 80px;
        line-height: 80px;
        border-radius: 50%;
        margin: 0 auto 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    /* 3. Clean Stacked Bullet Points */
    .clean-check-list {
        list-style: none;
        padding-left: 0;
        margin-top: 20px;
    }
    .clean-check-list li {
        position: relative;
        padding-left: 40px; 
        margin-bottom: 15px;
        font-size: 1.1rem;
        font-weight: 500;
        line-height: 1.3;
    }
    .clean-check-list li:before {
        content: "\e5ca"; /* check_small icon */
        font-family: 'Material Symbols Rounded'; 
        font-size: 32px;
        position: absolute;
        left: 0;
        top: -4px;
        color: var(--check-color, #28a745); 
    }

    /* 5. Modern FAQ Accordion */
    .faq-item-modern {
        background-color: #f7f9fc;
        transition: all 0.3s;
        border-left: 5px solid transparent !important;
    }
    .faq-item-modern:hover {
        border-left: 5px solid var(--YOUR-BRAND-COLOR) !important;
    }
    .faq-button-modern {
        color: #343a40;
        font-weight: 700;
        font-size: 1rem;
        transition: color 0.3s;
    }
    .faq-button-modern:hover, .faq-button-modern:not(.collapsed) {
        color: var(--YOUR-BRAND-COLOR);
    }
    /* Style for the active/open card */
    .faq-item-modern .collapse.show {
        border-top: 1px solid #dee2e6;
        background-color: #ffffff;
    }
    .seo-pillar {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: var(--CARD-RADIUS);
    }
    .seo-pillar:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    .seo-list {
        margin-top: 20px;
    }
    .seo-list li a {
        display: block;
        padding: 6px 0;
        font-size: 0.95rem;
        color: #495057;
        text-decoration: none;
        transition: color 0.2s;
    }
    .seo-list li a:hover {
        color: var(--YOUR-BRAND-COLOR);
        text-decoration: underline;
    }