/* ==========================================================================
   main.css — DNAGids.nl
   Consolidated site stylesheet
   Last updated: 2026-02-23
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS & FONTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');

:root {
    /* Brand palette */
    --dna-brand:          #4C6FFF;
    --dna-brand-light:    #E8EDFF;
    --dna-brand-dark:     #3451CC;
    --dna-secondary:      #00C48C;
    --dna-secondary-light:#E0FFF5;
    --dna-accent:         #FF6B6B;
    --dna-warm:           #FFB347;
    --dna-purple:         #7C3AED;
    --dna-purple-light:   #EDE9FE;

    /* Neutrals */
    --dna-text:           #141414;
    --dna-text-secondary: #334155;
    --dna-muted:          #6B7280;
    --dna-light:          #94A3B8;
    --dna-bg:             #FAFBFF;
    --dna-border:         #E5E7EB;

    /* Radii */
    --dna-radius:         16px;
    --dna-radius-sm:      10px;
    --dna-radius-xs:      6px;

    /* Legacy blue (FAQ, links) */
    --site-blue:          #0066cc;
    --site-blue-light:    #e6f0ff;
    --site-blue-hover:    #f0f7ff;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}


/* ==========================================================================
   3. PROSE TYPOGRAPHY (article.html, tekstpagina.html)
   ========================================================================== */

.prose h1 {
    font-weight: 900;
    font-size: 1.75rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #0f172a;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .prose h1 { font-size: 2rem; }
}
.prose h2 {
    font-weight: 900;
    font-size: 1.375rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #0f172a;
}
.prose h3 {
    font-weight: 800;
    font-size: 1.125rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: #1e293b;
}
.prose p {
    margin-bottom: 1.25rem;
    line-height: 1.75;
    color: #334155;
    font-size: 0.9375rem;
}
.prose ul,
.prose ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
    color: #334155;
    font-size: 0.9375rem;
    line-height: 1.75;
}
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: #2563eb; text-decoration: underline; }
.prose a:hover { color: #1d4ed8; }
.prose blockquote {
    border-left: 4px solid #2563eb;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #475569;
}
.prose table { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.prose th,
.prose td { border: 1px solid #e2e8f0; padding: 0.75rem 1rem; text-align: left; }
.prose th { background: #f8fafc; font-weight: 700; }


/* ==========================================================================
   4. PAGE-SPECIFIC: Homepage
   ========================================================================== */

.hero-gradient {
    background: radial-gradient(circle at top right, #eff6ff 0%, #ffffff 100%);
}
.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   5. PAGE-SPECIFIC: Provider
   ========================================================================== */

.hero-bg {
    background: radial-gradient(circle at top right, #eff6ff 0%, #ffffff 100%);
}
.sticky-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
@media (min-width: 1024px) {
    .sticky-mobile-cta { display: none; }
}


/* ==========================================================================
   6. PAGE-SPECIFIC: Vergelijken
   ========================================================================== */

.filter-chip {
    cursor: pointer;
    background: white;
    color: #334155;
    transition: all 0.2s;
}
.filter-chip:hover { border-color: #2563eb; color: #2563eb; }
.filter-chip.active { background: #0f172a; color: white; border-color: #0f172a; }
.product-card { transition: all 0.3s; }
.product-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}


/* ==========================================================================
   7. PAGE-SPECIFIC: Tekstpagina
   ========================================================================== */

.sticky-toc { top: 2rem; }


/* ==========================================================================
   8. FAQ — Shared Elements
   ========================================================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.faq-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--site-blue);
    background: var(--site-blue-light);
    padding: 0.35rem 1rem;
    border-radius: 100px;
    margin-bottom: 1.5rem;
}

/* Breadcrumbs */
.faq-breadcrumbs {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.75rem 0;
}
.faq-breadcrumbs ol {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
}
.faq-breadcrumbs ol li a { color: #94a3b8; text-decoration: none; }
.faq-breadcrumbs ol li a:hover { color: var(--site-blue); }
.faq-breadcrumbs ol li.current { color: var(--site-blue); }
.faq-breadcrumbs ol li + li::before {
    content: '\203A';
    margin-right: 0.5rem;
    color: #cbd5e1;
}

/* Stats bar */
.faq-stats-bar {
    padding: 2rem 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
}
.faq-stats-grid {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}
.faq-stat { text-align: center; }
.faq-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--site-blue);
}
.faq-stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* CTA banner */
.faq-cta-section { padding: 3rem 0; }
.faq-cta-banner {
    background: var(--site-blue);
    color: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.faq-cta-banner h2 { font-size: 1.5rem; font-weight: 900; color: #fff; margin-bottom: 0.5rem; }
.faq-cta-banner p { color: rgba(255,255,255,0.8); margin: 0; }
.faq-cta-banner .btn-primary { background: #fff; color: var(--site-blue); white-space: nowrap; }
.faq-cta-banner .btn-primary:hover { background: var(--site-blue-hover); }


/* ==========================================================================
   9. FAQ — Index Page
   ========================================================================== */

.faq-index-hero {
    background: radial-gradient(circle at top right, #eff6ff 0%, #ffffff 100%);
    padding: 4rem 0;
    border-bottom: 1px solid #e0e0e0;
}
.faq-index-hero-content { max-width: 700px; }
.faq-index-hero h1 {
    font-size: 2rem;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 1rem;
    line-height: 1.15;
}
.faq-index-subtitle {
    font-size: 1.125rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.6;
}

/* Category grid */
.faq-categories-section { padding: 3rem 0; }
.faq-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
.faq-category-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 2rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-decoration: none;
    display: block;
}
.faq-category-card:hover {
    border-color: var(--site-blue);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    text-decoration: none;
}
.faq-category-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.faq-category-card h3 { font-size: 1.25rem; font-weight: 900; color: #0f172a; margin-bottom: 0.5rem; }
.faq-category-card p { color: #64748b; font-size: 0.875rem; line-height: 1.6; margin-bottom: 1rem; }
.faq-category-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
}
.faq-category-card-link { color: var(--site-blue); font-weight: 700; font-size: 0.875rem; }

/* Category colors */
.faq-category-color-green .faq-category-card-icon,
.faq-category-card.faq-cat-green .faq-category-card-icon { background: #ecfdf5; color: #059669; }
.faq-category-color-blue .faq-category-card-icon,
.faq-category-card.faq-cat-blue .faq-category-card-icon { background: var(--site-blue-light); color: var(--site-blue); }
.faq-category-color-rose .faq-category-card-icon,
.faq-category-card.faq-cat-rose .faq-category-card-icon { background: #fff1f2; color: #e11d48; }

/* Section title */
.faq-section-title {
    font-size: 0.75rem;
    font-weight: 900;
    color: #94a3b8;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* All questions listing */
.faq-all-questions {
    padding: 3rem 0;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
}
.faq-all-questions-category { margin-bottom: 2rem; }
.faq-all-questions-category h3 {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--site-blue);
    margin-bottom: 0.75rem;
}
.faq-all-questions-category h3.faq-cat-heading-green { border-color: #059669; color: #059669; }
.faq-all-questions-category h3.faq-cat-heading-blue  { border-color: var(--site-blue); color: var(--site-blue); }
.faq-all-questions-category h3.faq-cat-heading-rose  { border-color: #e11d48; color: #e11d48; }

.faq-all-questions-list { list-style: none; padding: 0; margin: 0; }
.faq-all-questions-list li { margin-bottom: 0.5rem; }
.faq-all-questions-list li a {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #334155;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.faq-all-questions-list li a:hover {
    border-color: var(--site-blue);
    background: var(--site-blue-hover);
    text-decoration: none;
}
.faq-all-questions-list li a::after {
    content: '\203A';
    margin-left: auto;
    color: #94a3b8;
    font-size: 1.25rem;
}


/* ==========================================================================
   10. FAQ — Category Page
   ========================================================================== */

.faq-category-hero {
    padding: 4rem 0;
    border-bottom: 1px solid #e0e0e0;
}
/* All category heroes use the same gradient now */
.faq-category-hero.faq-category-color-green,
.faq-category-hero.faq-category-color-blue,
.faq-category-hero.faq-category-color-rose {
    background: radial-gradient(circle at top right, #eff6ff 0%, #ffffff 100%);
}

.faq-category-hero-content { max-width: 700px; }
.faq-category-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    color: #fff;
}
.faq-category-color-green .faq-category-icon { background: #059669; }
.faq-category-color-blue  .faq-category-icon { background: var(--site-blue); }
.faq-category-color-rose  .faq-category-icon { background: #e11d48; }

.faq-category-hero h1 {
    font-size: 2rem;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 1rem;
    line-height: 1.15;
}
.faq-category-intro {
    font-size: 1.125rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.6;
}
.faq-category-questions { padding: 3rem 0; }
.faq-category-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 1024px) {
    .faq-category-layout { grid-template-columns: 2fr 1fr; }
}

/* Accordion */
.faq-accordion-list { display: flex; flex-direction: column; gap: 1rem; }
.faq-accordion-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.faq-accordion-item:hover { border-color: var(--site-blue); }
.faq-accordion-btn {
    width: 100%;
    padding: 1.25rem 1.5rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.faq-accordion-btn span {
    font-weight: 700;
    font-size: 1rem;
    color: #0f172a;
    padding-right: 1rem;
}
.faq-accordion-chevron {
    width: 2rem;
    height: 2rem;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s;
    font-size: 0.875rem;
    color: #64748b;
}
.accordion-open .faq-accordion-chevron { transform: rotate(180deg); color: var(--site-blue); }
.faq-accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
    padding: 0 1.5rem;
}
.accordion-open .faq-accordion-content {
    max-height: 600px;
    opacity: 1;
    padding-bottom: 1.5rem;
}
.faq-accordion-content p { color: #475569; line-height: 1.7; }
.faq-accordion-readmore {
    display: inline-flex;
    align-items: center;
    color: var(--site-blue);
    font-weight: 700;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}
.faq-accordion-readmore:hover { text-decoration: underline; }

/* Sidebar */
.faq-sidebar-card {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.faq-sidebar-card h3 {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 1rem;
}
.faq-sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 8px;
    color: #334155;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s;
    margin-bottom: 0.25rem;
}
.faq-sidebar-link:hover { background: var(--site-blue-light); text-decoration: none; }
.faq-sidebar-link-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    font-size: 1rem;
    flex-shrink: 0;
}
.faq-sidebar-link-icon.faq-icon-green { background: #ecfdf5; color: #059669; }
.faq-sidebar-link-icon.faq-icon-blue  { background: var(--site-blue-light); color: var(--site-blue); }
.faq-sidebar-link-icon.faq-icon-rose  { background: #fff1f2; color: #e11d48; }


/* ==========================================================================
   11. FAQ — Detail Page
   ========================================================================== */

.faq-detail-article {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 0;
}
.faq-detail-header { margin-bottom: 2rem; }
.faq-category-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.35rem 1rem;
    border-radius: 100px;
    margin-bottom: 1rem;
    text-decoration: none;
}
.faq-category-badge:hover { text-decoration: none; opacity: 0.8; }
.faq-category-badge.faq-category-color-green { background: #ecfdf5; color: #059669; }
.faq-category-badge.faq-category-color-blue  { background: var(--site-blue-light); color: var(--site-blue); }
.faq-category-badge.faq-category-color-rose  { background: #fff1f2; color: #e11d48; }

.faq-detail-header h1 {
    font-size: 1.75rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
}
.faq-direct-answer {
    border-left: 6px solid var(--site-blue);
    background: var(--site-blue-hover);
    padding: 2rem;
    border-radius: 0 12px 12px 0;
    margin-bottom: 2.5rem;
}
.faq-direct-answer h3 {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--site-blue);
    margin-bottom: 0.75rem;
}
.faq-direct-answer p {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.5;
    margin: 0;
}
.faq-answer-icon { margin-right: 0.5rem; }

.faq-full-answer { line-height: 1.8; margin-bottom: 3rem; }
.faq-full-answer h2 { font-size: 1.25rem; font-weight: 900; color: #0f172a; margin-top: 2rem; margin-bottom: 1rem; }
.faq-full-answer p { color: #334155; margin-bottom: 1.25rem; }
.faq-full-answer ul,
.faq-full-answer ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.faq-full-answer li { margin-bottom: 0.5rem; color: #334155; }
.faq-full-answer strong { color: #0f172a; }

/* Related questions */
.faq-related-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e0e0e0; }
.faq-related-section h3 {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 1.5rem;
}
.faq-related-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) {
    .faq-related-grid { grid-template-columns: 1fr 1fr; }
}
.faq-related-link {
    display: block;
    padding: 1.25rem;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    color: #0f172a;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.faq-related-link:hover {
    border-color: var(--site-blue);
    background: var(--site-blue-hover);
    text-decoration: none;
}
.faq-detail-cta { margin-top: 3rem; }
.faq-back-link { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e0e0e0; }
.faq-back-link a { color: var(--site-blue); font-weight: 600; }

/* Old faq.html single-page styles */
.faq-hero-gradient { background: radial-gradient(circle at top right, #eff6ff 0%, #ffffff 100%); }
.faq-styled .faq-category { margin-bottom: 3rem; }
.faq-styled .faq-category h2 {
    font-weight: 900;
    font-size: 1.5rem;
    color: #0f172a;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
}
.faq-styled .faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-styled .faq-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
}
.faq-styled .faq-item:hover { border-color: #3b82f6; }
.faq-styled .faq-item[open] {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}
.faq-styled .faq-item summary {
    font-weight: 700;
    color: #0f172a;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-styled .faq-item summary::-webkit-details-marker { display: none; }
.faq-styled .faq-item summary::after {
    content: '+';
    font-size: 1.25rem;
    color: #2563eb;
    font-weight: 900;
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 1rem;
}
.faq-styled .faq-item[open] summary::after { transform: rotate(45deg); }
.faq-styled .faq-answer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.8;
}
.faq-styled .faq-answer p { margin-bottom: 0.75rem; }
.faq-styled .faq-answer ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 0.75rem; }
.faq-styled .faq-answer a { color: #2563eb; text-decoration: underline; }


/* ==========================================================================
   12. INFOGRAPHIC BLOCKS (dna-*)
   Use these classes inside .prose or article content.
   Copy-paste patterns from BCM > Design System > Infographic Blocks.
   ========================================================================== */

/* --- Block wrapper & label --- */
.dna-block { position: relative; margin: 2rem 0; }

.dna-block-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 5px;
    margin-bottom: 6px;
    background: var(--dna-brand);
    color: #fff;
}
.dna-block-label--light { background: rgba(255,255,255,0.15); color: #fff; }

.dna-block-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--dna-text);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.dna-block-title--light { color: #fff; }


/* --- Process Steps --- */
.dna-process-steps {
    background: linear-gradient(135deg, var(--dna-bg) 0%, #F0F4FF 100%);
    border-radius: var(--dna-radius);
    padding: 24px 20px;
    border: 1px solid var(--dna-border);
}
.dna-steps { display: flex; position: relative; }
.dna-steps__connector {
    position: absolute; top: 20px; left: 32px; right: 32px; height: 2px;
    background: linear-gradient(90deg, var(--dna-brand), var(--dna-secondary));
}
.dna-step { flex: 1; text-align: center; position: relative; z-index: 1; }
.dna-step__icon {
    width: 44px; height: 44px; border-radius: 11px; background: #fff;
    border: 2px solid var(--step-color, var(--dna-brand));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 6px; position: relative;
}
.dna-step__num {
    position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--step-color, var(--dna-brand)); color: #fff;
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.dna-step strong { display: block; font-size: 12px; color: var(--dna-text); }
.dna-step p { font-size: 11px; color: var(--dna-muted); margin: 2px 8px 0; line-height: 1.4; }


/* --- Stat Callouts --- */
.dna-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.dna-stat {
    flex: 1; min-width: 140px;
    background: #fff; border-radius: var(--dna-radius-sm); padding: 16px 14px;
    border: 1px solid var(--dna-border); position: relative; overflow: hidden;
}
.dna-stat::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--stat-color, var(--dna-brand));
}
.dna-stat__icon { font-size: 22px; margin-bottom: 6px; }
.dna-stat__value {
    font-size: 28px; font-weight: 800;
    color: var(--stat-color, var(--dna-brand));
    line-height: 1; letter-spacing: -0.02em;
}
.dna-stat__label { font-size: 12px; font-weight: 700; color: var(--dna-text); margin-top: 4px; }
.dna-stat__sub { font-size: 11px; color: var(--dna-muted); }


/* --- Comparison Table --- */
.dna-comparison {
    background: #fff; border-radius: var(--dna-radius);
    border: 1px solid var(--dna-border); overflow: hidden;
}
.dna-comparison__header {
    background: linear-gradient(135deg, var(--dna-brand), var(--dna-brand-dark));
    padding: 16px 20px; color: #fff;
}
.dna-comparison__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dna-comparison__table thead { background: #F8F9FC; }
.dna-comparison__table th,
.dna-comparison__table td { padding: 10px 16px; border-bottom: 1px solid var(--dna-border); }
.dna-comparison__table tfoot td {
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--dna-bg), #F0F4FF);
    border-top: 2px solid var(--dna-border);
}
.dna-badge { padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.dna-badge--primary   { background: var(--dna-brand-light); color: var(--dna-brand); }
.dna-badge--secondary { background: var(--dna-secondary-light); color: #059669; }
.dna-check { text-align: center; font-size: 16px; }
.dna-check--yes { color: var(--dna-brand); }
.dna-check--no  { color: #D1D5DB; }
.dna-price {
    text-align: center; font-size: 16px; font-weight: 800;
    color: var(--price-color, var(--dna-brand));
}


/* --- Pros & Cons --- */
.dna-proscons {
    background: #fff; border-radius: var(--dna-radius);
    border: 1px solid var(--dna-border); overflow: hidden;
}
.dna-proscons__header { padding: 14px 20px; border-bottom: 1px solid var(--dna-border); }
.dna-proscons__grid { display: grid; grid-template-columns: 1fr 1fr; }
.dna-proscons__col { padding: 16px 18px; }
.dna-proscons__col--pro { border-right: 1px solid var(--dna-border); }

.dna-proscons__label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.dna-proscons__col--pro .dna-proscons__label { color: var(--dna-secondary); }
.dna-proscons__col--con .dna-proscons__label { color: var(--dna-accent); }

.dna-proscons__icon {
    width: 24px; height: 24px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.dna-proscons__icon--pro { background: var(--dna-secondary-light); color: var(--dna-secondary); }
.dna-proscons__icon--con { background: #FEE2E2; color: var(--dna-accent); }

.dna-proscons ul { list-style: none; padding: 0; margin: 0; }
.dna-proscons li {
    font-size: 13px; color: var(--dna-text); margin-bottom: 6px;
    padding-left: 18px; position: relative; line-height: 1.5;
}
.dna-proscons__col--pro li::before { content: '+'; position: absolute; left: 0; font-weight: 800; color: var(--dna-secondary); }
.dna-proscons__col--con li::before { content: '-'; position: absolute; left: 0; font-weight: 800; color: var(--dna-accent); }


/* --- Timeline --- */
.dna-timeline {
    background: #fff; border-radius: var(--dna-radius);
    padding: 20px; border: 1px solid var(--dna-border);
}
.dna-timeline__track { padding-left: 24px; position: relative; }
.dna-timeline__line {
    position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px;
    background: linear-gradient(180deg, var(--dna-brand), var(--dna-secondary), var(--dna-accent));
}
.dna-timeline__item { margin-bottom: 16px; position: relative; }
.dna-timeline__item:last-child { margin-bottom: 0; }
.dna-timeline__dot {
    position: absolute; left: -24px; top: 3px; width: 13px; height: 13px;
    border-radius: 50%; background: var(--dot-color, var(--dna-brand));
    border: 2px solid #fff;
}
.dna-timeline__day {
    font-size: 10px; font-weight: 700;
    color: var(--dot-color, var(--dna-brand));
    text-transform: uppercase; letter-spacing: 0.04em;
}
.dna-timeline__item strong { display: block; font-size: 13px; color: var(--dna-text); }
.dna-timeline__item p { font-size: 11px; color: var(--dna-muted); margin: 2px 0 0; }


/* --- Rating Card --- */
.dna-rating {
    background: #fff; border-radius: var(--dna-radius);
    border: 1px solid var(--dna-border); overflow: hidden;
    display: flex;
}
.dna-rating__overall {
    background: linear-gradient(180deg, var(--dna-brand), var(--dna-brand-dark));
    padding: 20px 28px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 120px;
}
.dna-rating__score { font-size: 40px; font-weight: 800; color: #fff; line-height: 1; }
.dna-rating__stars { color: #FFD700; font-size: 12px; margin-top: 6px; }
.dna-rating__label {
    font-size: 10px; color: rgba(255,255,255,0.6);
    text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; margin-top: 4px;
}
.dna-rating__breakdown { flex: 1; padding: 16px 20px; }
.dna-rating__row {
    margin-bottom: 10px;
    display: grid; grid-template-columns: 1fr 120px 40px;
    align-items: center; gap: 8px; font-size: 12px;
}
.dna-bar {
    height: 8px; border-radius: 4px; background: #F1F3F9;
    position: relative; overflow: hidden;
}
.dna-bar::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--bar-pct, 0%);
    background: var(--bar-color, var(--dna-brand));
    border-radius: 4px;
}


/* --- Pricing Table --- */
.dna-pricing {
    background: #fff; border-radius: var(--dna-radius);
    padding: 20px; border: 1px solid var(--dna-border);
}
.dna-pricing__grid { display: flex; gap: 12px; flex-wrap: wrap; }
.dna-pricing__plan {
    flex: 1; min-width: 180px;
    border-radius: var(--dna-radius-sm); padding: 18px 14px;
    border: 1px solid var(--dna-border); text-align: center;
    position: relative; overflow: hidden;
}
.dna-pricing__plan--featured {
    border: 2px solid var(--dna-secondary);
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(0,196,140,0.12);
}
.dna-pricing__badge {
    background: var(--dna-secondary); color: #fff;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; padding: 3px;
    position: absolute; top: 0; left: 0; right: 0;
}
.dna-pricing__provider { font-size: 10px; color: var(--dna-muted); font-weight: 600; }
.dna-pricing__name { font-size: 16px; font-weight: 800; color: var(--dna-text); margin: 4px 0 8px; }
.dna-pricing__price {
    font-size: 30px; font-weight: 800;
    color: var(--plan-color, var(--dna-brand));
    line-height: 1; margin-bottom: 12px;
}
.dna-pricing__price small {
    font-size: 11px; color: var(--dna-muted); font-weight: 500;
    display: block; margin-top: 2px;
}
.dna-pricing ul { list-style: none; padding: 0; margin: 0 0 14px; text-align: left; }
.dna-pricing li {
    font-size: 11px; color: var(--dna-text); margin-bottom: 4px;
    padding-left: 16px; position: relative;
}
.dna-pricing li::before {
    content: '+'; position: absolute; left: 0;
    color: var(--plan-color, var(--dna-brand)); font-weight: 700;
}

.dna-btn {
    display: inline-block; padding: 8px 16px; border-radius: 8px;
    font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.dna-btn--solid  { background: var(--dna-secondary); color: #fff; border: none; }
.dna-btn--outline { background: #fff; color: var(--dna-text); border: 1.5px solid var(--dna-border); }
.dna-btn:hover { opacity: 0.9; text-decoration: none; }


/* --- Disclaimers & Notices --- */
.dna-disclaimer { margin-bottom: 8px; }
.dna-disclaimer > div {
    border-radius: var(--dna-radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
}
.dna-disclaimer--info      { background: var(--dna-brand-light); color: var(--dna-brand-dark); }
.dna-disclaimer--warn      { background: #FFF7ED; color: #92400E; border-left: 3px solid var(--dna-warm); }
.dna-disclaimer--affiliate { background: #F0F4FF; color: #374151; border-left: 3px solid var(--dna-brand); }


/* --- Infographic responsive --- */
@media (max-width: 640px) {
    .dna-steps { flex-direction: column; gap: 12px; }
    .dna-steps__connector { display: none; }
    .dna-stats { flex-direction: column; }
    .dna-proscons__grid { grid-template-columns: 1fr; }
    .dna-proscons__col--pro { border-right: none; border-bottom: 1px solid var(--dna-border); }
    .dna-rating { flex-direction: column; }
    .dna-rating__overall { padding: 16px; flex-direction: row; gap: 12px; min-width: auto; }
    .dna-pricing__grid { flex-direction: column; }
    .dna-pricing__plan--featured { transform: none; }
    .dna-rating__row { grid-template-columns: 1fr 80px 32px; }
}


/* ==========================================================================
   13. RESPONSIVE — Global
   ========================================================================== */

@media (max-width: 768px) {
    .faq-index-hero h1,
    .faq-category-hero h1 { font-size: 1.5rem; }
    .faq-detail-header h1 { font-size: 1.375rem; }
    .faq-cta-banner { flex-direction: column; text-align: center; }
    .faq-stats-grid { gap: 2rem; }
    .faq-categories-grid { grid-template-columns: 1fr; }
}