/**
 * ==========================================================================
 * SEO LANDING PAGE STYLES
 * ==========================================================================
 *
 * Dit bestand bevat ALLE styling voor de SEO landing pages.
 * Je kunt dit bestand vrij aanpassen zonder de HTML te wijzigen.
 *
 * STRUCTUUR:
 * 1. CSS Variables (kleuren, fonts, spacing)
 * 2. Hero Section
 * 3. Trust Bar
 * 4. Features Section
 * 5. Domain Checker
 * 6. Pricing Cards
 * 7. FAQ Accordion
 * 8. Content Section
 * 9. CTA Section
 * 10. Breadcrumbs
 * 11. Responsive / Mobile
 *
 * TIP: Zoek op de sectienaam om snel te navigeren (bijv. "HERO SECTION")
 * ==========================================================================
 */


/* ==========================================================================
   1. CSS VARIABLES - PAS HIER DE KLEUREN AAN
   ========================================================================== */

:root {
    /*
     * PRIMAIRE KLEUREN
     * Verander deze om het hele kleurschema aan te passen
     */
    --lp-primary: var(--t7red, #E53935);           /* Hoofdkleur (buttons, accenten) */
    --lp-primary-dark: var(--t7red-dark, #C62828); /* Hover state */
    --lp-primary-light: var(--t7red-lightest, #FFEBEE); /* Subtiele achtergrond */

    --lp-success: var(--t7green, #43A047);         /* Checkmarks, positieve elementen */
    --lp-warning: #f59e0b;                          /* Sterren, waarschuwingen */

    /*
     * ACHTERGRONDKLEUREN
     */
    --lp-bg-white: white;
    --lp-bg-light: var(--gray-lightest, #F8F9FA);
    --lp-bg-gradient: linear-gradient(135deg, var(--gray-lightest, #F8F9FA) 0%, white 100%);

    /*
     * TEKSTKLEUREN
     */
    --lp-text-heading: var(--paragraph-clr, #333);
    --lp-text-body: var(--paragraph-clr, #555);
    --lp-text-muted: var(--gray-dark, #666);
    --lp-text-light: rgba(255, 255, 255, 0.9);

    /*
     * BORDERS & SHADOWS
     */
    --lp-border: 1px solid var(--gray-medium, #E0E0E0);
    --lp-border-color: var(--gray-medium, #E0E0E0);
    --lp-radius-sm: 0.5rem;
    --lp-radius-md: 0.75rem;
    --lp-radius-lg: 1rem;
    --lp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --lp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --lp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /*
     * SPACING
     */
    --lp-section-padding: 4rem;
    --lp-section-padding-mobile: 3rem;
    --lp-container-width: 1100px;
    --lp-container-padding: 2rem;
}


/* ==========================================================================
   2. HERO SECTION - De bovenste sectie met H1 en CTA
   ========================================================================== */

.landing-hero {
    background: var(--lp-bg-gradient);
    padding: var(--lp-section-padding) 0 3rem;
    border-bottom: var(--lp-border);
}

.landing-hero-container {
    width: min(100% - var(--lp-container-padding) * 2, var(--lp-container-width));
    margin-inline: auto;
}

/* Hoofdtitel */
.landing-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--lp-text-heading);
}

/* Subtitel onder H1 */
.landing-hero-subtitle {
    font-size: var(--big-text, 1.125rem);
    color: var(--lp-text-body);
    margin-bottom: 1.5rem;
    max-width: 600px;
}

/* USP Lijst (checkmarks) */
.landing-usps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.landing-usp {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--text-p, 1rem);
    color: var(--lp-text-body);
}

.landing-usp i {
    color: var(--lp-success);
    font-size: 1.1rem;
}

/* CTA Buttons Groep */
.landing-cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Primaire CTA Button (rood) */
.landing-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--lp-primary);
    color: white;
    padding: 1rem 2rem;
    font-size: var(--big-text, 1.125rem);
    font-weight: 600;
    border-radius: var(--lp-radius-sm);
    transition: all 0.2s ease;
    box-shadow: var(--lp-shadow-md);
    text-decoration: none;
}

.landing-cta-primary:hover {
    background-color: var(--lp-primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--lp-shadow-xl);
}

/* Secundaire CTA Link */
.landing-cta-secondary {
    color: var(--lp-text-body);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.landing-cta-secondary:hover {
    color: var(--lp-primary);
}

/* Trust Badge (sterren) */
.landing-trust {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--small-text, 0.875rem);
    color: var(--lp-text-muted);
}

.landing-trust i {
    color: var(--lp-warning);
}


/* ==========================================================================
   3. TRUST BAR - Horizontale balk met vertrouwenspunten
   ========================================================================== */

.trust-bar {
    background: var(--lp-bg-white);
    border-bottom: var(--lp-border);
    padding: 1.5rem 0;
}

.trust-bar-inner {
    width: min(100% - var(--lp-container-padding) * 2, 1300px);
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--small-text, 0.875rem);
    color: var(--lp-text-body);
}

.trust-item i {
    color: var(--lp-success);
}


/* ==========================================================================
   4. FEATURES SECTION - 3 feature cards
   ========================================================================== */

.features-section {
    padding: var(--lp-section-padding) 0;
    background: var(--lp-bg-white);
}

.features-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--lp-text-heading);
}

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

/* Individuele Feature Card */
.feature-card {
    background: var(--lp-bg-light);
    border-radius: var(--lp-radius-lg);
    padding: 2rem;
    text-align: center;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.feature-card:hover {
    border-color: var(--lp-primary-light);
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow-lg);
}

/* Feature Icon Container */
.feature-icon {
    width: 60px;
    height: 60px;
    background: var(--lp-primary-light);
    border-radius: var(--lp-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.feature-icon i {
    font-size: 1.5rem;
    color: var(--lp-primary);
}

.feature-card h3 {
    font-size: var(--text-h5, 1.125rem);
    margin-bottom: 0.75rem;
    color: var(--lp-text-heading);
}

.feature-card p {
    font-size: var(--small-text, 0.875rem);
    color: var(--lp-text-muted);
}


/* ==========================================================================
   5. DOMAIN CHECKER - Rode sectie met zoekformulier
   ========================================================================== */

.domain-checker-section {
    padding: var(--lp-section-padding) 0;
    background: linear-gradient(135deg, var(--lp-primary) 0%, var(--lp-primary-dark) 100%);
}

.domain-checker-box {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.domain-checker-box h2 {
    color: white;
    margin-bottom: 0.5rem;
}

.domain-checker-box > p {
    color: var(--lp-text-light);
    margin-bottom: 1.5rem;
}

.domain-checker-form {
    margin-bottom: 1rem;
}

/* Input + Button Wrapper */
.domain-input-wrapper {
    display: flex;
    background: white;
    border-radius: var(--lp-radius-sm);
    overflow: hidden;
    box-shadow: var(--lp-shadow-lg);
}

.domain-input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    font-size: var(--big-text, 1.125rem);
    outline: none;
}

.domain-input::placeholder {
    color: var(--lp-text-muted);
}

.domain-submit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: var(--lp-primary);
    color: white;
    border: none;
    font-size: var(--text-p, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.domain-submit:hover {
    background: var(--lp-primary-dark);
}

/* Domain Extensions Lijst */
.domain-extensions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.domain-extensions span {
    color: var(--lp-text-light);
    font-size: var(--small-text, 0.875rem);
    font-weight: 500;
}


/* ==========================================================================
   6. PRICING CARDS - Prijstabellen
   ========================================================================== */

.pricing-section {
    padding: var(--lp-section-padding) 0;
    background: var(--lp-bg-light);
}

.pricing-section h2 {
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--lp-text-heading);
}

.pricing-subtitle {
    text-align: center;
    color: var(--lp-text-muted);
    margin-bottom: 2.5rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* Individuele Pricing Card */
.pricing-card {
    background: var(--lp-bg-white);
    border-radius: var(--lp-radius-lg);
    padding: 2rem;
    border: 2px solid var(--lp-border-color);
    position: relative;
    transition: all 0.2s ease;
}

.pricing-card:hover {
    border-color: var(--lp-primary-light);
    box-shadow: var(--lp-shadow-lg);
}

/* Populair Badge */
.pricing-card.popular {
    border-color: var(--lp-primary);
}

.pricing-card.popular::before {
    content: 'Populair';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lp-primary);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 2rem;
    font-size: var(--tiny-text, 0.75rem);
    font-weight: 600;
}

.pricing-name {
    font-size: var(--text-h5, 1.125rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--lp-text-heading);
}

/* Prijs Display */
.pricing-price {
    font-size: var(--text-h2, 2rem);
    font-weight: 700;
    color: var(--lp-primary);
    margin-bottom: 1.5rem;
}

.pricing-price span {
    font-size: var(--small-text, 0.875rem);
    font-weight: 400;
    color: var(--lp-text-muted);
}

/* Feature Lijst */
.pricing-features {
    list-style: none;
    margin-bottom: 1.5rem;
    padding: 0;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: var(--small-text, 0.875rem);
    color: var(--lp-text-body);
}

.pricing-features li i {
    color: var(--lp-success);
}

/* Pricing CTA Button */
.pricing-cta {
    display: block;
    text-align: center;
    padding: 0.875rem 1.5rem;
    background: var(--lp-bg-light);
    color: var(--lp-text-body);
    font-weight: 600;
    border-radius: var(--lp-radius-sm);
    transition: all 0.2s ease;
    text-decoration: none;
}

.pricing-cta:hover {
    background: var(--lp-primary-light);
    color: var(--lp-primary-dark);
}

/* Populair Pakket CTA */
.pricing-card.popular .pricing-cta {
    background: var(--lp-primary);
    color: white;
}

.pricing-card.popular .pricing-cta:hover {
    background: var(--lp-primary-dark);
    color: white;
}


/* ==========================================================================
   7. FAQ ACCORDION - Veelgestelde vragen
   ========================================================================== */

.faq-section {
    padding: var(--lp-section-padding) 0;
    background: var(--lp-bg-white);
}

.faq-section h2 {
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--lp-text-heading);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Individueel FAQ Item */
.faq-item {
    border: 2px solid var(--lp-border-color);
    border-radius: var(--lp-radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-item:hover {
    border-color: var(--lp-primary-light);
}

/* Vraag Button */
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--lp-bg-white);
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-question span {
    font-weight: 600;
    font-size: var(--text-p, 1rem);
    color: var(--lp-text-body);
}

.faq-question i {
    color: var(--lp-primary);
    transition: transform 0.2s ease;
}

/* Open State */
.faq-item.open .faq-question i {
    transform: rotate(180deg);
}

/* Antwoord */
.faq-answer {
    padding: 0 1.5rem 1.25rem;
    display: none;
}

.faq-item.open .faq-answer {
    display: block;
}

.faq-answer p {
    font-size: var(--small-text, 0.875rem);
    color: var(--lp-text-muted);
    line-height: 1.7;
}


/* ==========================================================================
   8. CONTENT SECTION - SEO tekst content
   ========================================================================== */

.content-section {
    padding: var(--lp-section-padding) 0;
    background: var(--lp-bg-light);
}

.content-container {
    max-width: 800px;
    margin: 0 auto;
}

.content-container h2 {
    margin-bottom: 1.5rem;
    color: var(--lp-text-heading);
}

.content-container h3 {
    font-size: var(--text-h4, 1.25rem);
    margin: 2rem 0 1rem;
    color: var(--lp-text-heading);
}

.content-container p {
    margin-bottom: 1rem;
    color: var(--lp-text-body);
    line-height: 1.7;
}

.content-container ul,
.content-container ol {
    margin: 1rem 0 1.5rem 1.5rem;
}

.content-container li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    color: var(--lp-text-body);
}

.content-container strong {

.content-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.content-container table th,
.content-container table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.content-container table th {
    background: #f9fafb;
    font-weight: 600;
    color: var(--lp-text-heading);
}

.content-container table tr:last-child td {
    border-bottom: none;
}

.content-container table td:last-child,
.content-container table th:last-child {
    text-align: right;
}

    color: var(--lp-text-heading);

.content-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.content-container table th,
.content-container table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.content-container table th {
    background: #f9fafb;
    font-weight: 600;
    color: var(--lp-text-heading);
}

.content-container table tr:last-child td {
    border-bottom: none;
}

.content-container table td:last-child,
.content-container table th:last-child {
    text-align: right;
}

}

.content-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.content-container table th,
.content-container table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.content-container table th {
    background: #f9fafb;
    font-weight: 600;
    color: var(--lp-text-heading);
}

.content-container table tr:last-child td {
    border-bottom: none;
}

.content-container table td:last-child,
.content-container table th:last-child {
    text-align: right;
}



/* ==========================================================================
   9. CTA SECTION - Rode afsluitende sectie
   ========================================================================== */

.cta-section {
    padding: var(--lp-section-padding) 0;
    background: var(--lp-primary);
    text-align: center;
}

.cta-section h2 {
    color: white;
    margin-bottom: 1rem;
}

.cta-section p {
    color: var(--lp-text-light);
    margin-bottom: 2rem;
    font-size: var(--big-text, 1.125rem);
}

/* Witte CTA Button */
.cta-section .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    color: var(--lp-primary);
    font-size: var(--big-text, 1.125rem);
    font-weight: 600;
    padding: 1rem 2.5rem;
    border-radius: var(--lp-radius-sm);
    text-decoration: none;
    transition: all 0.2s ease;
}

.cta-section .button:hover {
    background: var(--lp-bg-light);
    color: var(--lp-primary-dark);
}


/* ==========================================================================
   10. BREADCRUMBS - Navigatie pad
   ========================================================================== */

.breadcrumbs {
    background: var(--lp-bg-white);
    border-bottom: var(--lp-border);
    padding: 1rem 0;
}

.breadcrumbs-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--small-text, 0.875rem);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.breadcrumbs-list a {
    color: var(--lp-text-muted);
    font-weight: 500;
    text-decoration: none;
}

.breadcrumbs-list a:hover {
    color: var(--lp-primary);
}

.breadcrumbs-list .separator {
    color: var(--lp-text-muted);
}

.breadcrumbs-list .current {
    color: var(--lp-text-body);
    font-weight: 600;
}


/* ==========================================================================
   11. RESPONSIVE / MOBILE - Aanpassingen voor kleinere schermen
   ========================================================================== */

/* Tablet en kleiner */
@media (max-width: 768px) {
    .landing-hero {
        padding: 2.5rem 0 2rem;
    }

    .trust-bar-inner {
        gap: 1rem;
    }

    .features-section,
    .pricing-section,
    .faq-section,
    .content-section,
    .cta-section {
        padding: var(--lp-section-padding-mobile) 0;
    }
}

/* Mobile - Domain Checker */
@media (max-width: 600px) {
    .domain-input-wrapper {
        flex-direction: column;
    }

    .domain-submit {
        justify-content: center;
    }
}

/* Mobile Navigation (hamburger menu) */
@media (max-width: 900px) {
    .nav-container {
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background: white;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        padding: 2rem;
    }

    .nav-container[data-visible="true"] {
        transform: translateX(0);
    }

    .nav-container .logo {
        display: none;
    }

    .nav-menus {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-menu-left,
    .nav-menu-right {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .hover-menu-parent {
        width: 100%;
    }

    .hover-menu-accordion {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--lp-border-color);
    }

    .dropdown-toggle {
        display: flex !important;
        padding: 0.5rem;
    }

    .hover-menu {
        position: static !important;
        box-shadow: none !important;
        width: 100% !important;
        display: none;
        padding: 0 0 0 1rem;
    }

    .hover-menu[data-visible="true"] {
        display: block;
    }

    .mobile-nav-toggle {
        display: flex;
        z-index: 1001;
    }
}

/* Desktop - Reset mobile nav styles */
@media (min-width: 901px) {
    .nav-container[data-visible] {
        transform: none !important;
    }

    .dropdown-toggle {
        display: none;
    }
}


/* ==========================================================================
   12. CUSTOM BLOCKS - Dynamisch toegevoegde blokken
   ========================================================================== */

.custom-block-section {
    padding: var(--lp-section-padding) 0;
}

/* Text Block */
.custom-block-text {
    background: var(--lp-bg-white);
}

.custom-block-text .custom-block-content {
    max-width: 800px;
    margin: 0 auto;
}

.custom-block-text h2 {
    margin-bottom: 1.5rem;
    color: var(--lp-text-heading);
}

.custom-block-text .prose {
    color: var(--lp-text-body);
    line-height: 1.7;
}

.custom-block-text .prose p {
    margin-bottom: 1rem;
}

.custom-block-text .prose h2,
.custom-block-text .prose h3 {
    margin: 2rem 0 1rem;
    color: var(--lp-text-heading);
}

.custom-block-text .prose ul,
.custom-block-text .prose ol {
    margin: 1rem 0 1.5rem 1.5rem;
}

.custom-block-text .prose li {
    margin-bottom: 0.5rem;
}

/* HTML Block */
.custom-block-html {
    padding: 2rem 0;
    background: var(--lp-bg-light);
}

/* Image Block */
.custom-block-image {
    text-align: center;
    background: var(--lp-bg-white);
}

.custom-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--lp-radius-md);
    box-shadow: var(--lp-shadow-lg);
}

.custom-block-image figcaption {
    margin-top: 1rem;
    color: var(--lp-text-muted);
    font-size: var(--small-text, 0.875rem);
}

/* Video Block */
.custom-block-video {
    text-align: center;
    background: var(--lp-bg-light);
}

.custom-block-video h2 {
    margin-bottom: 1.5rem;
    color: var(--lp-text-heading);
}

.custom-block-video .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--lp-radius-md);
    overflow: hidden;
    box-shadow: var(--lp-shadow-lg);
}

.custom-block-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Testimonial Block */
.custom-block-testimonial {
    background: var(--lp-bg-white);
}

.custom-block-testimonial > .container > div {
    background: var(--lp-bg-light);
    padding: 3rem;
    border-radius: var(--lp-radius-lg);
    max-width: 800px;
    margin: 0 auto;
    border-left: 4px solid var(--lp-primary);
}

.custom-block-testimonial blockquote {
    font-size: var(--text-h4, 1.25rem);
    font-style: italic;
    color: var(--lp-text-body);
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

.custom-block-testimonial blockquote::before {
    content: '"';
    font-size: 3rem;
    color: var(--lp-primary-light);
    line-height: 0;
    vertical-align: -1rem;
    margin-right: 0.25rem;
}

.custom-block-testimonial .testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.custom-block-testimonial .testimonial-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--lp-bg-white);
    box-shadow: var(--lp-shadow-md);
}

.custom-block-testimonial .testimonial-name {
    font-weight: 600;
    color: var(--lp-text-heading);
    font-size: var(--text-p, 1rem);
}

.custom-block-testimonial .testimonial-company {
    color: var(--lp-text-muted);
    font-size: var(--small-text, 0.875rem);
}

/* CTA Banner Block */
.custom-block-cta-banner {
    background: var(--lp-bg-white);
}

.custom-block-cta-banner > .container > div {
    padding: 4rem 2rem;
    border-radius: var(--lp-radius-lg);
    text-align: center;
    color: white;
    background: var(--lp-primary); /* Default, can be overridden inline */
}

.custom-block-cta-banner h2 {
    color: white !important;
    margin-bottom: 0.5rem;
}

.custom-block-cta-banner p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    font-size: var(--big-text, 1.125rem);
}

.custom-block-cta-banner .cta-button {
    display: inline-block;
    background: white;
    color: var(--lp-text-heading);
    padding: 1rem 2.5rem;
    border-radius: var(--lp-radius-sm);
    font-weight: 600;
    font-size: var(--big-text, 1.125rem);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: var(--lp-shadow-md);
}

.custom-block-cta-banner .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--lp-shadow-lg);
}

/* Heading Block */
.custom-block-heading {
    text-align: center;
    color: var(--lp-text-heading);
}

/* Divider Block */
.custom-block-divider hr {
    border: 0;
    border-top: 1px solid var(--lp-border);
}

/* Stats Block */
.custom-block-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
    text-align: center;
}

.custom-block-stats .stat-item {
    min-width: 120px;
}

.custom-block-stats .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--lp-primary);
    line-height: 1.2;
}

.custom-block-stats .stat-label {
    font-size: var(--small-text, 0.875rem);
    color: var(--lp-text-muted);
    margin-top: 0.5rem;
}

/* Icon Box Block */
.custom-block-icon-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.custom-block-icon-boxes .icon-box-item {
    text-align: center;
    padding: 2rem;
    background: var(--lp-bg-light);
    border-radius: var(--lp-radius-md);
    transition: all 0.2s ease;
}

.custom-block-icon-boxes .icon-box-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow-md);
}

.custom-block-icon-boxes .icon-box-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: var(--lp-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-block-icon-boxes .icon-box-icon i {
    font-size: 1.5rem;
    color: var(--lp-primary);
}

.custom-block-icon-boxes h3 {
    margin: 0 0 0.75rem;
    color: var(--lp-text-heading);
}

.custom-block-icon-boxes p {
    margin: 0;
    color: var(--lp-text-muted);
    font-size: var(--small-text, 0.875rem);
}

/* Social Proof Block */
.custom-block-social-proof {
    text-align: center;
    padding: 2rem;
    background: var(--lp-bg-light);
    border-radius: var(--lp-radius-md);
    max-width: 400px;
    margin: 0 auto;
}

.custom-block-social-proof .social-proof-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.custom-block-social-proof .social-proof-rating i {
    font-size: 1.25rem;
}

.custom-block-social-proof .social-proof-rating .text-yellow-400 {
    color: #facc15;
}

.custom-block-social-proof .social-proof-rating .text-gray-300 {
    color: #d1d5db;
}

.custom-block-social-proof .rating-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lp-text-heading);
    margin-left: 0.5rem;
}

.custom-block-social-proof .social-proof-meta {
    color: var(--lp-text-muted);
    font-size: var(--small-text, 0.875rem);
}

/* Accordion Block */
.custom-block-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.custom-block-accordion .accordion-item {
    background: var(--lp-bg-white);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.custom-block-accordion .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--text-p, 1rem);
    font-weight: 600;
    color: var(--lp-text-heading);
    text-align: left;
    transition: all 0.2s ease;
}

.custom-block-accordion .accordion-header:hover {
    background: var(--lp-bg-light);
}

.custom-block-accordion .accordion-header i {
    transition: transform 0.2s ease;
    color: var(--lp-text-muted);
}

.custom-block-accordion .accordion-header i.rotate-180 {
    transform: rotate(180deg);
}

.custom-block-accordion .accordion-content {
    padding: 0 1.25rem 1.25rem;
    color: var(--lp-text-body);
    line-height: 1.6;
}

/* Gallery Block */
.custom-block-gallery {
    gap: 1rem;
}

.custom-block-gallery .gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--lp-radius-sm);
    transition: all 0.2s ease;
}

.custom-block-gallery .gallery-item:hover img {
    transform: scale(1.02);
}

/* Logo Grid Block */
.custom-block-logo-grid img {
    max-height: 60px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.2s ease;
}

.custom-block-logo-grid .logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Map Block */
.custom-block-map {
    border-radius: var(--lp-radius-md);
    overflow: hidden;
    box-shadow: var(--lp-shadow-md);
}

/* Timeline Block */
.custom-block-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 2rem;
}

.custom-block-timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--lp-border);
}

.custom-block-timeline .timeline-item {
    position: relative;
    padding-bottom: 2rem;
}

.custom-block-timeline .timeline-item:last-child {
    padding-bottom: 0;
}

.custom-block-timeline .timeline-marker {
    position: absolute;
    left: -1.75rem;
    top: 0.25rem;
    width: 12px;
    height: 12px;
    background: var(--lp-primary);
    border-radius: 50%;
    border: 3px solid var(--lp-bg-white);
    box-shadow: var(--lp-shadow-sm);
}

.custom-block-timeline .timeline-date {
    font-size: var(--small-text, 0.875rem);
    color: var(--lp-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.custom-block-timeline h4 {
    margin: 0 0 0.5rem;
    color: var(--lp-text-heading);
}

.custom-block-timeline p {
    margin: 0;
    color: var(--lp-text-muted);
}

/* Columns Block */
.custom-block-columns .column-content {
    padding: 1.5rem;
    background: var(--lp-bg-light);
    border-radius: var(--lp-radius-md);
    min-height: 100px;
}

/* Placeholder Block */
.custom-block-placeholder {
    background: var(--lp-bg-light);
    border: 2px dashed var(--lp-border);
    border-radius: var(--lp-radius-md);
    padding: 3rem;
    text-align: center;
    color: var(--lp-text-muted);
}


/* ==========================================================================
   12. BLOCK VARIANTS - Meerdere visuele stijlen per blok
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO VARIANTS
   -------------------------------------------------------------------------- */

/* Hero Split (50/50) */
.landing-hero--split {
    background: white;
    padding: var(--lp-section-padding) 0;
}

.landing-hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    width: min(100% - var(--lp-container-padding) * 2, var(--lp-container-width));
    margin-inline: auto;
}

.landing-hero-split-content {
    text-align: left;
}

.landing-hero-split-content h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
}

.landing-usps--vertical {
    gap: 0.5rem;
}

.landing-cta-group--left {
    justify-content: flex-start;
}

.landing-trust--left {
    justify-content: flex-start;
}

.landing-hero-split-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-hero-visual-placeholder {
    background: linear-gradient(135deg, var(--lp-primary-light) 0%, #e0e7ff 100%);
    border-radius: var(--lp-radius-lg);
    padding: 3rem;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-hero-visual-icons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.visual-icon {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: var(--lp-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: var(--lp-shadow-md);
}

.visual-icon--server { color: #3b82f6; }
.visual-icon--shield { color: #22c55e; }
.visual-icon--bolt { color: #f59e0b; }
.visual-icon--cloud { color: #8b5cf6; }

.landing-hero-image {
    width: 100%;
    height: auto;
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-xl);
}

/* Hero Minimal */
.landing-hero--minimal {
    background: white;
    padding: 5rem 0;
    text-align: center;
}

.landing-hero-minimal {
    width: min(100% - var(--lp-container-padding) * 2, 800px);
    margin-inline: auto;
}

.landing-hero-minimal-content h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.landing-hero-subtitle--large {
    font-size: 1.25rem;
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: 2rem;
}

.landing-cta-group--centered {
    justify-content: center;
    margin-bottom: 2rem;
}

.landing-cta-primary--large {
    padding: 1.25rem 2.5rem;
    font-size: 1.25rem;
}

.landing-usps-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.landing-usp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--lp-bg-light);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    color: var(--lp-text-body);
}

.landing-usp-badge i {
    color: var(--lp-success);
}

/* Hero Image Background */
.landing-hero--image {
    background: transparent;
    padding: 0;
}

.landing-hero-image-bg {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    padding: var(--lp-section-padding) 0;
}

.landing-hero-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--hero-overlay-opacity, 0.6));
}

.landing-hero-image-content {
    position: relative;
    z-index: 1;
    text-align: center;
    width: min(100% - var(--lp-container-padding) * 2, 800px);
    margin-inline: auto;
}

.landing-hero-image-content h1,
.landing-hero-image-content .landing-hero-subtitle,
.landing-hero-image-content .landing-usp,
.landing-hero-image-content .landing-trust {
    color: white;
}

.landing-hero-image-content .landing-usps {
    align-items: center;
}

.landing-hero-image-content .landing-usp i {
    color: #4ade80;
}

.landing-hero-image-content .landing-cta-secondary--light {
    color: rgba(255, 255, 255, 0.9);
}

.landing-hero-image-content .landing-cta-secondary--light:hover {
    color: white;
}

/* Hero Gradient (enhanced default) */
.landing-hero--gradient {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8a 100%);
}

.landing-hero--gradient .landing-hero-container {
    text-align: center;
}

.landing-hero--gradient h1,
.landing-hero--gradient .landing-hero-subtitle,
.landing-hero--gradient .landing-usp,
.landing-hero--gradient .landing-trust {
    color: white;
}

.landing-hero--gradient .landing-usps {
    align-items: center;
}

.landing-hero--gradient .landing-cta-group {
    justify-content: center;
}

.landing-hero--gradient .landing-trust {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   FEATURES VARIANTS
   -------------------------------------------------------------------------- */

/* Features Alternating */
.features-section--alternating .features-alternating {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.features-section--alternating .feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.features-section--alternating .feature-row--reversed {
    direction: rtl;
}

.features-section--alternating .feature-row--reversed > * {
    direction: ltr;
}

.features-section--alternating .feature-row-content {
    text-align: left;
}

.features-section--alternating .feature-icon--large {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.features-section--alternating .feature-row-content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.features-section--alternating .feature-row-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--lp-text-body);
}

.features-section--alternating .feature-row-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.features-section--alternating .feature-visual-icon {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, var(--lp-primary-light) 0%, #e0e7ff 100%);
    border-radius: var(--lp-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--lp-primary);
}

/* Features Icons Only */
.features-section--icons .features-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
}

.features-section--icons .feature-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.features-section--icons .feature-icon--round {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--lp-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--lp-primary);
}

.features-section--icons .feature-icon-label {
    font-weight: 600;
    text-align: center;
    max-width: 120px;
}

/* Features Compact */
.features-section--compact {
    padding: 2rem 0;
}

.features-section--compact h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.features-section--compact .features-compact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.features-section--compact .feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 1px solid var(--lp-border-color);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.features-section--compact .feature-badge i {
    color: var(--lp-success);
}

/* --------------------------------------------------------------------------
   PRICING VARIANTS
   -------------------------------------------------------------------------- */

/* Pricing Table */
.pricing-section--table .pricing-table-wrapper {
    overflow-x: auto;
    margin-top: 2rem;
}

.pricing-section--table .pricing-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--lp-radius-lg);
    overflow: hidden;
    box-shadow: var(--lp-shadow-lg);
}

.pricing-section--table .pricing-table th,
.pricing-section--table .pricing-table td {
    padding: 1rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--lp-border-color);
}

.pricing-section--table .pricing-table th {
    background: var(--lp-bg-light);
    font-weight: 600;
    position: relative;
}

.pricing-section--table .pricing-table th.popular {
    background: var(--lp-primary-light);
}

.pricing-section--table .pricing-table td.popular {
    background: rgba(229, 57, 53, 0.03);
}

.pricing-section--table .popular-badge {
    display: block;
    background: var(--lp-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 2rem;
    font-size: 0.625rem;
    margin-bottom: 0.5rem;
}

.pricing-section--table .pricing-table-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lp-primary);
    margin-top: 0.5rem;
}

.pricing-section--table .pricing-table tbody td:first-child {
    text-align: left;
    font-weight: 500;
}

.pricing-section--table .pricing-table tfoot td {
    padding: 1.5rem;
    border-bottom: none;
}

/* Pricing Toggle */
.pricing-section--toggle .pricing-toggle-container {
    margin-top: 1.5rem;
}

.pricing-section--toggle .pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    font-weight: 500;
}

.pricing-section--toggle .pricing-toggle span.active {
    color: var(--lp-primary);
}

.pricing-section--toggle .pricing-toggle-switch {
    width: 50px;
    height: 28px;
    background: #d1d5db;
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.pricing-section--toggle .pricing-toggle-switch.active {
    background: var(--lp-primary);
}

.pricing-section--toggle .pricing-toggle-knob {
    position: absolute;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: var(--lp-shadow-md);
}

.pricing-section--toggle .pricing-toggle-switch.active .pricing-toggle-knob {
    transform: translateX(22px);
}

.pricing-section--toggle .pricing-discount {
    background: var(--lp-success);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.pricing-section--toggle .pricing-billed {
    font-size: 0.75rem;
    color: var(--lp-text-muted);
    margin-top: 0.25rem;
}

.pricing-section--toggle .pricing-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lp-primary);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.pricing-section--toggle .pricing-card {
    position: relative;
}

/* Pricing Minimal */
.pricing-section--minimal .pricing-minimal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 800px;
    margin: 2rem auto 0;
}

.pricing-section--minimal .pricing-minimal-item {
    display: flex;
    align-items: center;
    background: white;
    padding: 1.5rem;
    border-radius: var(--lp-radius-md);
    border: 1px solid var(--lp-border-color);
    gap: 1rem;
}

.pricing-section--minimal .pricing-minimal-item.popular {
    border-color: var(--lp-primary);
    box-shadow: 0 0 0 1px var(--lp-primary);
}

.pricing-section--minimal .pricing-minimal-info {
    flex: 1;
}

.pricing-section--minimal .pricing-minimal-name {
    font-weight: 600;
    font-size: 1.125rem;
}

.pricing-section--minimal .pricing-minimal-badge {
    background: var(--lp-primary);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 2rem;
    font-size: 0.625rem;
    margin-left: 0.5rem;
}

.pricing-section--minimal .pricing-minimal-features {
    display: block;
    font-size: 0.875rem;
    color: var(--lp-text-muted);
    margin-top: 0.25rem;
}

.pricing-section--minimal .pricing-minimal-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lp-text-heading);
}

.pricing-section--minimal .pricing-minimal-price span {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--lp-text-muted);
}

.pricing-section--minimal .pricing-minimal-cta {
    background: var(--lp-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--lp-radius-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.pricing-section--minimal .pricing-minimal-cta:hover {
    background: var(--lp-primary-dark);
}

/* --------------------------------------------------------------------------
   FAQ VARIANTS
   -------------------------------------------------------------------------- */

/* FAQ Two Column */
.faq-section--two-column .faq-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.faq-section--two-column .faq-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* FAQ Cards */
.faq-section--cards .faq-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.faq-section--cards .faq-card {
    background: white;
    border: 1px solid var(--lp-border-color);
    border-radius: var(--lp-radius-md);
    padding: 1.5rem;
    transition: box-shadow 0.2s;
}

.faq-section--cards .faq-card:hover {
    box-shadow: var(--lp-shadow-lg);
}

.faq-section--cards .faq-card-question {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--lp-text-heading);
}

.faq-section--cards .faq-card-question i {
    color: var(--lp-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.faq-section--cards .faq-card-answer {
    color: var(--lp-text-body);
    line-height: 1.7;
}

/* FAQ Search */
.faq-section--search .faq-search-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.faq-section--search .faq-search-bar {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid var(--lp-border-color);
    border-radius: var(--lp-radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 2rem;
    transition: border-color 0.2s;
}

.faq-section--search .faq-search-bar:focus-within {
    border-color: var(--lp-primary);
}

.faq-section--search .faq-search-bar i {
    color: var(--lp-text-muted);
    margin-right: 0.75rem;
}

.faq-section--search .faq-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
}

.faq-section--search .faq-search-clear {
    background: none;
    border: none;
    color: var(--lp-text-muted);
    cursor: pointer;
    padding: 0.25rem;
}

.faq-section--search .faq-no-results {
    text-align: center;
    padding: 3rem;
    color: var(--lp-text-muted);
}

.faq-section--search .faq-no-results i {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

/* --------------------------------------------------------------------------
   CTA VARIANTS
   -------------------------------------------------------------------------- */

/* CTA Split */
.cta-section--split {
    background: var(--lp-bg-light);
    padding: var(--lp-section-padding) 0;
}

.cta-section--split .cta-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.cta-section--split .cta-split-content h2 {
    text-align: left;
    font-size: 2rem;
}

.cta-section--split .cta-split-content p {
    text-align: left;
    margin-bottom: 1.5rem;
}

.cta-section--split .cta-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cta-section--split .cta-benefits li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.cta-section--split .cta-benefits i {
    color: var(--lp-success);
}

.cta-section--split .cta-action-box {
    background: white;
    padding: 2.5rem;
    border-radius: var(--lp-radius-lg);
    text-align: center;
    box-shadow: var(--lp-shadow-xl);
}

.cta-section--split .cta-action-box h3 {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

.cta-section--split .button--large {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
    width: 100%;
    justify-content: center;
}

.cta-section--split .cta-action-note {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--lp-text-muted);
}

/* CTA Minimal */
.cta-section--minimal {
    background: white;
    border-top: 1px solid var(--lp-border-color);
    padding: 2rem 0;
}

.cta-section--minimal .cta-minimal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.cta-section--minimal .cta-minimal-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lp-text-heading);
}

/* CTA Card */
.cta-section--card {
    background: var(--lp-bg-light);
    padding: var(--lp-section-padding) 0;
}

.cta-section--card .cta-card {
    max-width: 600px;
    margin: 0 auto;
}

.cta-section--card .cta-card-inner {
    background: white;
    padding: 3rem;
    border-radius: var(--lp-radius-lg);
    text-align: center;
    box-shadow: var(--lp-shadow-xl);
    border: 1px solid var(--lp-border-color);
}

.cta-section--card .cta-card-icon {
    width: 80px;
    height: 80px;
    background: var(--lp-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: var(--lp-primary);
}

.cta-section--card h2 {
    text-align: center;
}

.cta-section--card p {
    text-align: center;
}

/* --------------------------------------------------------------------------
   TRUST BAR VARIANTS
   -------------------------------------------------------------------------- */

/* Trust Bar Logos */
.trust-bar--logos .trust-bar-logos {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 0.5rem 0;
}

.trust-bar--logos .trust-logo {
    width: 50px;
    height: 50px;
    background: var(--lp-bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--lp-text-muted);
}

/* Trust Bar Badges */
.trust-bar--badges {
    background: var(--lp-primary);
    color: white;
}

.trust-bar--badges .trust-bar-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: min(100% - var(--lp-container-padding) * 2, var(--lp-container-width));
    margin-inline: auto;
}

.trust-bar--badges .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
}

.trust-bar--badges .trust-badge i {
    color: white;
}

/* --------------------------------------------------------------------------
   CONTENT VARIANTS
   -------------------------------------------------------------------------- */

/* Content with Sidebar */
.content-section--sidebar .content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 3rem;
}

.content-section--sidebar .content-main {
    min-width: 0;
}

.content-section--sidebar .content-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.content-section--sidebar .sidebar-box {
    background: var(--lp-bg-light);
    border: 1px solid var(--lp-border-color);
    border-radius: var(--lp-radius-md);
    padding: 1.5rem;
}

.content-section--sidebar .sidebar-box h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--lp-text-heading);
}

.content-section--sidebar .sidebar-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content-section--sidebar .sidebar-box li {
    margin-bottom: 0.5rem;
}

.content-section--sidebar .sidebar-box a {
    color: var(--lp-text-body);
    text-decoration: none;
}

.content-section--sidebar .sidebar-box a:hover {
    color: var(--lp-primary);
}

.content-section--sidebar .sidebar-cta {
    background: var(--lp-primary-light);
    border-radius: var(--lp-radius-md);
    padding: 1.5rem;
    text-align: center;
}

.content-section--sidebar .sidebar-cta h4 {
    margin-bottom: 1rem;
}

.content-section--sidebar .button--small {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
}

/* Content Wide */
.content-section--wide {
    padding: var(--lp-section-padding) 0;
}

.content-section--wide .content-wide {
    width: 100%;
}

.content-section--wide .content-container--wide {
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 var(--lp-container-padding);
}

/* --------------------------------------------------------------------------
   RESPONSIVE - Variant overrides for mobile
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* Hero Split → Stack */
    .landing-hero-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .landing-hero-split-visual {
        order: -1;
    }

    .landing-hero-visual-placeholder {
        padding: 2rem;
    }

    .visual-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    /* Features Alternating → Stack */
    .features-section--alternating .feature-row {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .features-section--alternating .feature-row--reversed {
        direction: ltr;
    }

    .features-section--alternating .feature-visual-icon {
        width: 120px;
        height: 120px;
        font-size: 2.5rem;
    }

    /* Features Icons → Wrap */
    .features-section--icons .features-icons {
        gap: 1.5rem;
    }

    .features-section--icons .feature-icon--round {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    /* Pricing Table → Scroll */
    .pricing-section--table .pricing-table th,
    .pricing-section--table .pricing-table td {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    /* Pricing Minimal → Stack */
    .pricing-section--minimal .pricing-minimal-item {
        flex-wrap: wrap;
    }

    .pricing-section--minimal .pricing-minimal-info {
        flex: 1 1 100%;
        margin-bottom: 1rem;
    }

    /* FAQ Two Column → Stack */
    .faq-section--two-column .faq-two-column {
        grid-template-columns: 1fr;
    }

    /* FAQ Cards → Single Column */
    .faq-section--cards .faq-cards-grid {
        grid-template-columns: 1fr;
    }

    /* CTA Split → Stack */
    .cta-section--split .cta-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Content Sidebar → Stack */
    .content-section--sidebar .content-with-sidebar {
        grid-template-columns: 1fr;
    }

    .content-section--sidebar .content-sidebar {
        order: -1;
        flex-direction: row;
        overflow-x: auto;
        gap: 1rem;
    }

    .content-section--sidebar .sidebar-box,
    .content-section--sidebar .sidebar-cta {
        min-width: 200px;
        flex-shrink: 0;
    }
}


/* ==========================================================================
   CUSTOM OVERRIDES - Voeg hier je eigen aanpassingen toe
   ==========================================================================

   Tip: Plaats je eigen styles ONDER deze lijn zodat ze de standaard
   styles overschrijven. Gebruik specifieke selectors voor targeted changes.

   Voorbeeld:

   .pricing-card.popular::before {
       content: 'Beste Keuze';
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   }

*/