/* Ekkie-achtige UI: Inter, witte kaarten, paarse gloed, ronde hoeken */
:root {
    --font-serif: 'Inter', system-ui, -apple-system, sans-serif;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --bg: #F4F2FA;
    --surface: #FFFFFF;
    --border: #E7E3F0;
    --ink: #1A1625;
    --ink-soft: #5B5568;
    --ink-faint: #8B8496;
    --accent: #6D56E8;
    --accent-hover: #5844D4;
    --accent-lt: #F0ECFF;
    --accent-border: #D6CEF5;
    --accent-bright: #8B7AF0;
    --green: #16A34A;
    --green-lt: #ECFDF3;
    --green-border: #BBF7D0;
    --surface-2: #F3F0FA;
    --blue: #4F46E5;
    --blue-lt: #EEF2FF;
    --blue-border: #C7D2FE;
}

html { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: #F4F2FA;
    background-image: radial-gradient(ellipse 90% 55% at 50% -8%, rgba(109, 86, 232, 0.18), transparent 62%);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}

.hero h1,
h1,
h2,
.topbar-brand,
.intro-screen h2,
.question-text,
.section-title,
.article-card h3,
.tool-card h3,
.preview-header h2,
.results-header h2,
.paywall h2,
.cta-block h2,
.cta h2,
.footer-brand-name,
.page-header h1,
.content h2 {
    font-family: 'Inter', system-ui, sans-serif;
    font-style: normal;
    font-weight: 650;
    letter-spacing: -0.03em;
}

.hero h1 em,
h1 em { font-style: italic; font-weight: 650; }

.hero-eyebrow,
.eyebrow,
.progress-category,
.preview-eyebrow,
.results-eyebrow,
.paywall-eyebrow,
.section-label,
.tool-badge,
.compare-item-label,
.footer-col h4,
.related h3,
.preview-trait-label,
.trait-label,
.preview-career-teaser-label,
.preview-sneak-kicker {
    font-family: 'Inter', system-ui, sans-serif;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.hero-stat-number,
.stat-number,
.preview-trait-score,
.trait-score,
.paywall-price,
.preview-cta-price,
.career-chip-pct,
.how-number {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.topbar {
    background: rgba(244, 242, 250, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.topbar-brand { font-weight: 700; letter-spacing: -0.04em; }
.topbar-brand::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 3px;
    background: linear-gradient(135deg, #6D56E8, #A78BFA);
    vertical-align: 1px;
}
.topbar-nav a {
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none;
}
.topbar-nav a:hover {
    background: #EDE9F6;
    color: var(--ink);
    text-decoration: none;
}

.container,
.content,
.paywall-content,
.cta,
.cta-block,
.preview-cta,
.career-suggestions,
.tool-card,
.how-card,
.compare-item,
.preview-career-teaser,
.preview-sneak {
    border-radius: 16px;
}

.container,
.content,
.paywall-content {
    background: #fff;
    box-shadow: 0 1px 2px rgba(26, 22, 37, 0.04), 0 12px 32px rgba(80, 60, 160, 0.07);
    border: 1px solid var(--border);
}

.option,
.btn,
.btn-dark,
.cookie-btn,
.hero-btn,
.cta-btn,
.career-pill,
.career-pill-pay,
.preview-badge,
.preview-locked-badge,
.milestone-inner,
.trait-tip,
.paywall-note {
    border-radius: 10px;
}

.option-number,
.paywall-eyebrow::before {
    border-radius: 999px;
}

.progress-bar-fill,
.preview-bar,
.preview-bar-fill,
.trait-bar,
.trait-bar-fill,
.career-chip-bar,
.career-chip-bar-fill {
    border-radius: 999px;
}

.hero-btn--primary,
.btn-dark,
.cookie-btn-accept,
.cta-btn--career,
.career-pill-pay {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.hero-btn--primary:hover,
.btn-dark:hover,
.career-pill-pay:hover { background: var(--accent-hover); color: #fff; }

.hero-btn--secondary {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink);
    border-radius: 10px;
}
.hero-btn--secondary:hover { background: var(--accent-lt); color: var(--ink); }

.preview-cta,
.cta,
.cta-block,
.career-suggestions {
    background: var(--accent);
    color: #fff;
}
.preview-cta h3,
.cta h2,
.cta-block h2,
.career-suggestions-title { color: #EDE9FF; }

.preview-cta .btn-dark {
    background: #fff;
    color: var(--accent);
}
.preview-cta .btn-dark:hover { background: #F0ECFF; color: var(--accent-hover); }

.cta-btn,
a.cta-btn {
    border-radius: 10px;
}
.cta .cta-btn,
.cta-btn--career {
    background: #fff;
    color: var(--accent);
}

.paywall-blur-bg {
    background: rgba(244, 242, 250, 0.82);
}
.preview-locked-overlay {
    background: rgba(255, 255, 255, 0.62);
}
.preview-fade {
    background: linear-gradient(to bottom, transparent 0%, transparent 20%, #fff 80%);
}

.option.selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.option:hover {
    border-color: var(--accent);
    background: var(--accent-lt);
}

.cookie-banner {
    background: #fff;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(80, 60, 160, 0.08);
}

.article-card h3:hover,
.tool-card:hover h3 { text-decoration: none; }
.tool-card,
.article-card {
    border-radius: 16px;
}
.tools-grid {
    gap: 16px;
    border-top: none;
}
.tool-card,
.tool-card:last-child {
    background: #fff;
    border: 1px solid var(--border);
    padding: 24px;
    box-shadow: 0 1px 2px rgba(26, 22, 37, 0.04), 0 8px 24px rgba(80, 60, 160, 0.06);
}

.page .content {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(26, 22, 37, 0.04), 0 12px 32px rgba(80, 60, 160, 0.07);
}
.related a {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 8px;
}
.related a:hover {
    background: var(--accent-lt);
    color: var(--accent);
    text-decoration: none;
}

@media (max-width: 640px) {
    .container { border-radius: 0; box-shadow: none; }
    .page .content { border-radius: 0; }
}