:root{--bg:#f2f2f2;--surface:#fff;--ink:#2f2f31;--muted:#6f747a;--dark:#1f232b;--accent:#f59f19;--accent-dark:#df8600;--cyan:#0ea4ca;--cyan-dark:#0c87a5;--line:#e5e8ed;--radius-lg:20px;--radius-md:14px;--shadow:0 14px 40px rgba(15,28,44,.08);--maxw:1120px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 90% 10%,#f8fbff,transparent 34%),radial-gradient(circle at 0 35%,#f8f9ff,transparent 30%),var(--bg);color:var(--ink);font-family:"Manrope",sans-serif;line-height:1.55;min-width:320px}body.modal-open{overflow:hidden}.container{width:min(var(--maxw),calc(100% - 48px));margin:0 auto}section{padding:72px 0}.eyebrow{color:var(--cyan);text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;font-weight:800;margin-bottom:14px;display:inline-block}h1,h2,h3{font-family:"Sora",sans-serif;font-weight:700;line-height:1.12;letter-spacing:-.02em}h1{font-size:clamp(2rem,4.9vw,3.7rem);margin-bottom:24px;max-width:16ch}h2{font-size:clamp(1.7rem,3.5vw,2.55rem);margin-bottom:18px;max-width:18ch}h2{font-size:clamp(1.7rem,3.5vw,2.55rem);margin-bottom:18px;max-width:18ch}h3{font-size:1.15rem;margin-bottom:8px}p{color:var(--muted)}.btn-row{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}.btn{border:0;border-radius:999px;padding:11px 18px;font-size:.92rem;font-family:"Sora",sans-serif;font-weight:600;text-decoration:none;transition:transform 180ms ease,box-shadow 180ms ease,background 180ms ease;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(95deg,var(--accent),#ffb43b);color:#fff;box-shadow:0 10px 20px rgba(245,159,25,.34)}.btn.primary:hover{background:linear-gradient(95deg,var(--accent-dark),#ffa61a)}.btn.ghost{background:#fff;color:var(--ink);border:1px solid #d4d8dd}.site-header{position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);background:rgba(242,242,242,.86);border-bottom:1px solid rgba(209,214,222,.55)}.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);min-height:34px}.logo img{height:34px;width:auto;display:block}.logo-fallback{display:none;font-family:"Sora",sans-serif;font-weight:800;font-size:1.04rem}.logo-footer{color:#f4f7fb}.logo-footer img{height:30px;width:auto;filter:brightness(1.05)}.top-nav{display:flex;gap:22px;align-items:center}.top-nav a{text-decoration:none;color:#4f545a;font-size:.9rem;font-family:"Sora",sans-serif;font-weight:500}.top-nav a:hover{color:#22272e}.header-actions{display:flex;gap:10px}.hero{padding-top:80px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:center}.hero-card{background:var(--surface);border-radius:20px;height:360px;overflow:hidden;box-shadow:var(--shadow);position:relative;isolation:isolate}.hero-card picture>img,.photo-card picture>img{width:100%;height:100%;display:block;object-fit:cover}.hero-card::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#f8f2e8 12%,#eceef5 43%,#daf6ff 86%);z-index:-2}.hero-badge,.card-badge{position:absolute;left:16px;bottom:16px;width:116px;height:auto;z-index:2}.note{margin-top:18px;background:#fff;border-left:4px solid var(--cyan);border-radius:10px;padding:18px;color:#41454b;font-weight:600;box-shadow:var(--shadow)}.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}.photo-card{border-radius:var(--radius-lg);height:300px;position:relative;overflow:hidden}.photo-card::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.22),transparent 50%)}.dark-section{background:radial-gradient(circle at 15% 0%,#2a2f39,#1f232b 38%);color:#f6f8fb}.dark-section p{color:#b8c2cf}.dark-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:start;margin-bottom:30px}.diagram{background:#2a3038;border-radius:var(--radius-lg);border:1px solid #39414d;min-height:250px;padding:26px 20px;display:grid;place-items:center;text-align:center}.diagram-core{padding:15px 18px;border-radius:10px;background:linear-gradient(135deg,#f59f19,#ffb94f);color:#fff;font-family:"Sora",sans-serif;font-weight:700;margin-bottom:14px}.diagram-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.pill{padding:8px 12px;border-radius:999px;border:1px solid #4f5969;color:#dbe3ef;font-size:.8rem}.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.benefit{background:#2a3038;border:1px solid #39414d;border-radius:var(--radius-md);padding:18px}.num{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;background:#12a9ce;color:#fff;font:700 .76rem/1 "Sora",sans-serif;margin-bottom:14px}.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:18px}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;font-size:.88rem;color:#4f5359}.highlight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}.highlight{border:2px solid #f6b13f;background:#fff;border-radius:12px;padding:16px;color:#4b5056}.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.panel{border-radius:var(--radius-md);border:1px solid var(--line);padding:22px;background:#f8f9fb}.panel.good{border-color:transparent;background:linear-gradient(145deg,#0ea4ca,#0b89ad);color:#e9fcff;box-shadow:var(--shadow)}.panel ul{list-style:none;display:grid;gap:10px}.panel li::before{margin-right:8px;color:inherit;opacity:.9}.bad li::before{content:"x"}.good li::before{content:"✓"}.quote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.quote{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}.quote strong{display:block;margin-bottom:8px;font-family:"Sora",sans-serif;color:#2f343a}.closing{text-align:left}.closing-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:34px;align-items:center}.closing-content p{max-width:54ch}.closing h2{max-width:none}.closing .photo-card{max-width:none;margin:0 0 26px;height:280px;background:linear-gradient(130deg,#169cc0,#4a596f 54%,#c9d0dd)}.support-section{padding-top:12px}.support-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:28px;align-items:center}.support-embed{border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);min-height:220px;display:grid;place-items:center;padding:20px;text-align:center}.support-embed p{max-width:36ch}.site-footer{background:#1f232b;color:#cfd6e0;padding:26px 0}.footer-inner{display:grid;grid-template-columns:auto 1fr auto;gap:18px;justify-content:space-between;align-items:center}.footer-nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.footer-nav a{color:#cfd6e0;text-decoration:none;font-size:.85rem}.footer-support-links{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:14px 18px;flex-wrap:wrap;justify-content:center}.footer-support-links a,.footer-support-links span{color:#dbe3ef;text-decoration:none;font-size:.86rem}.footer-support-links a:hover{color:#fff}

.combined-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
}

.combined-modal[aria-hidden="false"] {
    display: block;
}

.modal-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--line);
    padding-bottom: 0;
}

.modal-tab {
    border: 0;
    background: none;
    padding: 8px 14px;
    font-family: "Sora", sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: color 140ms ease, border-color 140ms ease;
}

.modal-tab:hover {
    color: var(--ink);
}

.modal-tab.active {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
}

.combined-dialog {
    overflow: visible;
}

.modal-panel {
    display: block;
}

.modal-panel[hidden] {
    display: none;
}

.quickscan-modal[aria-hidden="false"] {
    display: block;
}

.quickscan-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 22, 30, 0.62);
}

.quickscan-dialog {
    position: relative;
    width: min(980px, calc(100% - 30px));
    margin: 42px auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 52px rgba(8, 16, 30, 0.35);
    padding: 22px;
}

.quickscan-dialog h3 {
    margin-bottom: 8px;
}

.quickscan-dialog p {
    margin-bottom: 14px;
}

.quickscan-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: #eaf0f5;
    color: #233041;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.quickscan-frame-wrap {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #ffffff;
}

.quickscan-frame-wrap iframe {
    width: 100%;
    height: min(70vh, 640px);
    border: 0;
    display: block;
}

.contact-panel {
    padding: 4px 0;
}

.contact-form {
    display: grid;
    gap: 14px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.contact-form-field {
    display: grid;
    gap: 5px;
}

.contact-form-field label {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ink);
    font-family: "Sora", sans-serif;
}

.contact-form-field input,
.contact-form-field textarea {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: "Manrope", sans-serif;
    font-size: 0.9rem;
    color: var(--ink);
    background: #fff;
    width: 100%;
    transition: border-color 150ms ease;
}

.contact-form-field input:focus,
.contact-form-field textarea:focus {
    outline: none;
    border-color: var(--cyan);
}

.contact-form-field textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.contact-form-footer small {
    color: var(--muted);
    font-size: 0.8rem;
}

@media (max-width: 560px) {
    .contact-form-row {
        grid-template-columns: 1fr;
    }
}

.contact-success {
    text-align: center;
    padding: 26px 20px;
    animation: fadeIn 400ms ease forwards;
}

.success-icon {
    display: inline-block;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #0ea4ca, #128db0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
}

/* Instap-keuzeblok (3 routes naar afspraak) */
.instap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 28px;
}

.instap-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.instap-item .btn {
    margin-top: auto;
    align-self: flex-start;
}

.instap-label {
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.45;
    font-weight: 500;
}

@media (max-width: 860px) {
    .instap-grid {
        grid-template-columns: 1fr;
    }
}

/* Booking panel (vervangt iframe dat Microsoft blokkeert) */
.booking-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 32px;
    max-width: 560px;
    margin: 0 auto;
}

.booking-panel-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.booking-panel h3 {
    font-size: 1.6rem;
    margin: 12px 0 8px;
}

.booking-panel > p {
    color: var(--muted);
    margin-bottom: 0;
}

/* Second Opinion Product Card */
.second-opinion-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 28px;
    margin-top: 24px;
    box-shadow: var(--shadow);
}

.text-badge {
    display: inline-block;
    background: #b9f1ff;
    color: #0ea4ca;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.second-opinion-card h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
    line-height: 1.3;
}

.second-opinion-card > p {
    color: var(--muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.features {
    display: grid;
    gap: 12px;
    margin: 20px 0;
    background: #f8f9fb;
    padding: 18px;
    border-radius: 12px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--ink);
}

.feature-item .checkmark {
    color: #0ea4ca;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.price-section {
    margin: 20px 0;
    text-align: center;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.price {
    font-family: "Sora", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.price-note {
    font-size: 0.8rem;
    color: var(--muted);
}

.second-opinion-card .btn-row {
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 1080px) {
    .second-opinion-card {
        padding: 24px;
    }
}

@media (max-width: 860px) {
    .second-opinion-card {
        padding: 20px;
    }

    .second-opinion-card h3 {
        font-size: 1.2rem;
    }

    .features {
        padding: 14px;
    }

    .feature-item {
        font-size: 0.9rem;
    }

    .price {
        font-size: 1.5rem;
    }
}
    margin-bottom: 14px;
    animation: scaleIn 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.contact-success h3 {
    margin-bottom: 8px;
    color: var(--ink);
}

.contact-success p {
    margin-bottom: 8px;
    color: var(--muted);
}

.contact-success small {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

    opacity: 0;
    transform: translateY(26px);
    animation: revealUp 650ms ease forwards;
}

.delay-1 { animation-delay: 70ms; }
.delay-2 { animation-delay: 140ms; }
.delay-3 { animation-delay: 210ms; }

@keyframes revealUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1080px) {
    .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-grid,
    .dark-grid,
    .split-grid {
        grid-template-columns: 1fr;
    }

    .hero-card {
        height: 320px;
    }
}

@media (max-width: 860px) {
    .top-nav {
        display: none;
    }

    .benefits,
    .highlight-grid,
    .compare,
    .quote-grid,
    .steps {
        grid-template-columns: 1fr;
    }

    .header-actions .btn.ghost {
        display: none;
    }

    .container {
        width: min(var(--maxw), calc(100% - 28px));
    }

    section {
        padding: 58px 0;
    }

    .cta-box {
        padding: 26px;
    }

    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-grid {
        grid-template-columns: 1fr;
    }

    .closing-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .support-embed,
    .support-embed {
        min-height: 180px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 12px;
    }

    .quickscan-dialog {
        margin: 16px auto;
        padding: 16px;
    }

    .quickscan-frame-wrap iframe {
        height: 70vh;
    }
}

@media (max-width: 520px) {
    .cards {
        grid-template-columns: 1fr;
    }

    .btn-row {
        width: 100%;
    }

    .btn {
        width: 100%;
    }

    .header-inner {
        min-height: 76px;
    }
}

@media (max-width: 860px) {
    .problem-photo-mobile-hide {
        display: none !important;
    }
}
