/* ===================================================================
   BENTO THEME — Apple-inspired, light glass, premium editorial
   Activated via body.theme-bento
   =================================================================== */

body.theme-bento {
    --bento-cream: #f5f1ea;
    --bento-warm-white: #fbfaf6;
    --bento-ink: #0e0e10;
    --bento-ink-soft: #2a2a30;
    --bento-muted: #6b6b73;
    --bento-line: rgba(14, 14, 16, 0.08);
    --bento-indigo: #4F46E5;
    --bento-pink: #EC4899;
    --bento-violet: #8B5CF6;
    --bento-mint: #C7F0DB;
    --bento-peach: #FCD9C2;
    --bento-lavender: #E5DEFF;
    --bento-butter: #FFEFB8;
    --bento-sky: #D6ECFF;
    --bento-grad: linear-gradient(135deg, #4F46E5 0%, #8B5CF6 50%, #EC4899 100%);

    background: var(--bento-cream);
    color: var(--bento-ink);
    font-family: 'Space Grotesk', sans-serif;
}

body.theme-bento h1,
body.theme-bento h2,
body.theme-bento h3,
body.theme-bento h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bento-ink);
}

/* Decorative aurora blobs (background) */
body.theme-bento::before {
    content: '';
    position: fixed;
    top: -10%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.18), transparent 60%);
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
}

body.theme-bento::after {
    content: '';
    position: fixed;
    bottom: -20%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.15), transparent 60%);
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
}

/* Scrollbar */
body.theme-bento {
    scrollbar-color: var(--bento-indigo) var(--bento-cream);
}
body.theme-bento ::-webkit-scrollbar-track {
    background: var(--bento-cream);
}
body.theme-bento ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--bento-indigo), var(--bento-pink));
}

/* ===== Section titles & buttons ===== */
body.theme-bento .section-title {
    font-size: 3.2rem;
    font-weight: 700;
    background: none;
    -webkit-text-fill-color: var(--bento-ink);
    color: var(--bento-ink);
    letter-spacing: -0.03em;
}

body.theme-bento .section-subtitle {
    color: var(--bento-muted);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
}

body.theme-bento .btn {
    border-radius: 14px;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0;
    padding: 1rem 1.8rem;
    font-weight: 500;
}

body.theme-bento .btn-primary {
    background: var(--bento-ink);
    color: #fff;
    box-shadow: 0 8px 24px rgba(14, 14, 16, 0.18);
}

body.theme-bento .btn-primary:hover {
    transform: translateY(-2px);
    background: var(--bento-indigo);
    box-shadow: 0 14px 36px rgba(79, 70, 229, 0.35);
}

/* ===== Navbar ===== */
body.theme-bento #navbar {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--bento-line);
}

body.theme-bento #navbar.scrolled {
    background: rgba(251, 250, 246, 0.85);
    box-shadow: 0 4px 30px rgba(14, 14, 16, 0.06);
    border-bottom: 1px solid var(--bento-line);
}

body.theme-bento .nav-brand-name {
    background: none;
    -webkit-text-fill-color: var(--bento-ink);
    color: var(--bento-ink);
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    letter-spacing: 1px;
}

body.theme-bento .nav-links a {
    color: var(--bento-ink-soft);
    font-family: 'Space Grotesk', sans-serif;
}

body.theme-bento .nav-links a::after {
    background: var(--bento-grad);
}

body.theme-bento .nav-links a.nav-cta {
    background: var(--bento-ink);
    color: #fff;
    border-radius: 12px;
}

body.theme-bento .nav-links a.nav-cta:hover {
    background: var(--bento-indigo);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3);
}

body.theme-bento .nav-toggle span {
    background: var(--bento-ink);
}

/* ===== Hero ===== */
body.theme-bento #hero {
    background: var(--bento-warm-white);
    position: relative;
}

body.theme-bento .hero-bg {
    background: none;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(79, 70, 229, 0.12), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.10), transparent 40%),
        radial-gradient(circle at 50% 90%, rgba(199, 240, 219, 0.5), transparent 50%);
    opacity: 1;
}

body.theme-bento .hero-content {
    position: relative;
    z-index: 2;
}

body.theme-bento .hero-logo {
    width: 180px;
    margin-bottom: 2rem;
    filter: drop-shadow(0 8px 30px rgba(79, 70, 229, 0.2));
}

body.theme-bento #hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 6rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-bottom: 0.8rem;
    color: var(--bento-ink);
}

body.theme-bento .hero-title-name {
    background: var(--bento-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
}

body.theme-bento .hero-tagline {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--bento-muted);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

body.theme-bento .hero-subtitle {
    color: var(--bento-ink-soft);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.6;
}

/* ===== Diensten — Bento Grid ===== */
body.theme-bento #diensten {
    background: var(--bento-cream);
    padding: 8rem 0;
    position: relative;
    z-index: 1;
}

body.theme-bento .services-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 1.2rem;
}

body.theme-bento .service-card {
    background: var(--bento-warm-white);
    border: 1px solid var(--bento-line);
    border-radius: 28px;
    padding: 2rem;
    text-align: left;
    box-shadow: 0 1px 3px rgba(14, 14, 16, 0.04);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}

body.theme-bento .service-card::before {
    display: none;
}

body.theme-bento .service-card:hover {
    transform: translateY(-6px);
    background: var(--bento-warm-white);
    border-color: var(--bento-line);
    box-shadow: 0 24px 50px rgba(14, 14, 16, 0.10);
}

body.theme-bento .service-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--bento-ink);
    margin-bottom: 0.6rem;
    letter-spacing: -0.02em;
}

body.theme-bento .service-card p {
    color: var(--bento-ink-soft);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.98rem;
    line-height: 1.55;
}

body.theme-bento .service-icon {
    width: 64px;
    height: 64px;
    margin: 0 0 1.4rem 0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--bento-line);
}

/* Swap PNG → SVG icons in Bento */
body.theme-bento .service-icon img,
body.theme-bento .value-icon img {
    display: none;
}

body.theme-bento .service-icon .icon-svg,
body.theme-bento .value-icon .icon-svg {
    display: block;
    width: 32px;
    height: 32px;
    color: var(--bento-ink);
    stroke-width: 1.8;
}

body.theme-bento .value-icon .icon-svg {
    width: 26px;
    height: 26px;
    color: var(--bento-indigo);
}

/* Bento layout: alternating sizes & colors */
body.theme-bento .service-card:nth-child(1) {
    grid-column: span 3;
    grid-row: span 2;
    background: linear-gradient(135deg, #1f1f23 0%, #4F46E5 100%);
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
body.theme-bento .service-card:nth-child(1) h3 {
    color: #fff;
    font-size: 2.8rem;
}
body.theme-bento .service-card:nth-child(1) p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    max-width: 90%;
}
body.theme-bento .service-card:nth-child(1) .service-icon {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.18);
    width: 80px;
    height: 80px;
    border-radius: 22px;
}
body.theme-bento .service-card:nth-child(1) .icon-svg {
    width: 40px;
    height: 40px;
    color: #fff;
}

body.theme-bento .service-card:nth-child(2) {
    grid-column: span 3;
    background: var(--bento-butter);
}

body.theme-bento .service-card:nth-child(3) {
    grid-column: span 3;
    background: var(--bento-mint);
}

body.theme-bento .service-card:nth-child(4) {
    grid-column: span 2;
    background: var(--bento-lavender);
}

body.theme-bento .service-card:nth-child(5) {
    grid-column: span 2;
    background: var(--bento-peach);
}

body.theme-bento .service-card:nth-child(6) {
    grid-column: span 2;
    background: var(--bento-sky);
}

/* "Bekijk voorbeeld" indicator */
body.theme-bento .service-card[data-popup]::after {
    content: '↗';
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    bottom: auto;
    left: auto;
    transform: none;
    font-size: 1.5rem;
    color: var(--bento-ink);
    opacity: 0.4;
    background: none;
    width: auto;
    height: auto;
    text-transform: none;
    letter-spacing: 0;
}

body.theme-bento .service-card:nth-child(1)[data-popup]::after {
    color: rgba(255, 255, 255, 0.7);
}

body.theme-bento .service-card[data-popup]:hover::after {
    opacity: 1;
    transform: translate(4px, -4px);
}

/* ===== Service Popups ===== */
body.theme-bento .service-popup-overlay {
    background: rgba(14, 14, 16, 0.5);
}

body.theme-bento .service-popup {
    background: var(--bento-warm-white);
    border: 1px solid var(--bento-line);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(14, 14, 16, 0.25);
}

body.theme-bento .service-popup-close {
    background: rgba(14, 14, 16, 0.06);
    border-color: var(--bento-line);
    color: var(--bento-ink);
}

body.theme-bento .service-popup-close:hover {
    background: var(--bento-ink);
    color: #fff;
}

body.theme-bento .service-popup-text h3 {
    background: var(--bento-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
}

body.theme-bento .service-popup-text p {
    color: var(--bento-ink-soft);
    font-family: 'Space Grotesk', sans-serif;
}

/* ===== Over Ons ===== */
body.theme-bento #over {
    background: var(--bento-warm-white);
    padding: 8rem 0;
}

body.theme-bento .over-bg {
    background: none;
    background-image:
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.12), transparent 50%),
        radial-gradient(circle at 10% 80%, rgba(236, 72, 153, 0.10), transparent 50%);
    opacity: 1;
}

body.theme-bento #over .section-title {
    font-size: 3.5rem;
}

body.theme-bento .over-intro {
    color: var(--bento-ink);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.4;
}

body.theme-bento .over-text > p {
    color: var(--bento-ink-soft);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
}

body.theme-bento .over-values {
    gap: 1rem;
}

body.theme-bento .value {
    background: var(--bento-cream);
    border: 1px solid var(--bento-line);
    border-radius: 20px;
    padding: 1.4rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.theme-bento .value:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(14, 14, 16, 0.08);
}

body.theme-bento .value-icon {
    background: var(--bento-warm-white);
    border-radius: 14px;
}

body.theme-bento .value strong {
    font-family: 'Playfair Display', serif;
    color: var(--bento-ink);
    font-size: 1.15rem;
}

body.theme-bento .value p {
    color: var(--bento-muted);
}

/* ===== Contact ===== */
body.theme-bento #contact {
    background: var(--bento-cream);
    padding: 8rem 0;
}

body.theme-bento .contact-form {
    background: var(--bento-warm-white);
    border: 1px solid var(--bento-line);
    border-radius: 28px;
    box-shadow: 0 4px 20px rgba(14, 14, 16, 0.04);
}

body.theme-bento .form-group label {
    color: var(--bento-ink);
    font-family: 'Space Grotesk', sans-serif;
}

body.theme-bento .form-group input,
body.theme-bento .form-group textarea {
    background: var(--bento-cream);
    border: 1px solid var(--bento-line);
    border-radius: 14px;
    color: var(--bento-ink);
    font-family: 'Space Grotesk', sans-serif;
}

body.theme-bento .form-group input::placeholder,
body.theme-bento .form-group textarea::placeholder {
    color: rgba(14, 14, 16, 0.35);
}

body.theme-bento .form-group input:focus,
body.theme-bento .form-group textarea:focus {
    border-color: var(--bento-indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

body.theme-bento .contact-info h3 {
    background: var(--bento-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
}

body.theme-bento .contact-icon {
    background: var(--bento-lavender);
    border-radius: 14px;
    color: var(--bento-indigo);
}

body.theme-bento .contact-item strong {
    color: var(--bento-ink);
    font-family: 'Space Grotesk', sans-serif;
}

body.theme-bento .contact-item p,
body.theme-bento .obfuscated-email {
    color: var(--bento-muted);
}

body.theme-bento .obfuscated-email:hover {
    color: var(--bento-indigo);
}

/* ===== Footer ===== */
body.theme-bento footer {
    background: var(--bento-warm-white);
    border-top: 1px solid var(--bento-line);
}

body.theme-bento footer p {
    color: var(--bento-muted);
}

body.theme-bento .footer-right p {
    color: rgba(107, 107, 115, 0.6);
}

/* ===== Theme switcher in light mode ===== */
body.theme-bento .theme-switcher {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--bento-line);
    box-shadow: 0 8px 24px rgba(14, 14, 16, 0.08);
}

body.theme-bento .theme-btn {
    color: var(--bento-muted);
}

body.theme-bento .theme-btn:hover {
    color: var(--bento-ink);
}

body.theme-bento .theme-btn.active {
    background: var(--bento-ink);
    color: #fff;
    box-shadow: 0 2px 8px rgba(14, 14, 16, 0.2);
}

/* ===== Mobile menu ===== */
body.theme-bento .nav-links {
    /* desktop unchanged */
}

@media (max-width: 768px) {
    body.theme-bento .nav-links {
        background: rgba(251, 250, 246, 0.98);
    }
    body.theme-bento .nav-links a {
        color: var(--bento-ink);
    }
}

/* ===== Responsive Bento grid ===== */
@media (max-width: 992px) {
    body.theme-bento .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    body.theme-bento .service-card:nth-child(1) {
        grid-column: span 4;
        grid-row: auto;
    }
    body.theme-bento .service-card:nth-child(2),
    body.theme-bento .service-card:nth-child(3) {
        grid-column: span 2;
    }
    body.theme-bento .service-card:nth-child(4),
    body.theme-bento .service-card:nth-child(5),
    body.theme-bento .service-card:nth-child(6) {
        grid-column: span 4;
    }
    body.theme-bento #hero h1 {
        font-size: 4rem;
    }
    body.theme-bento .section-title {
        font-size: 2.4rem;
    }
}

@media (max-width: 600px) {
    body.theme-bento .services-grid {
        grid-template-columns: 1fr;
    }
    body.theme-bento .service-card,
    body.theme-bento .service-card:nth-child(1),
    body.theme-bento .service-card:nth-child(2),
    body.theme-bento .service-card:nth-child(3),
    body.theme-bento .service-card:nth-child(4),
    body.theme-bento .service-card:nth-child(5),
    body.theme-bento .service-card:nth-child(6) {
        grid-column: span 1;
        grid-row: auto;
    }
    body.theme-bento #hero h1 {
        font-size: 3rem;
    }
}