.ocw-care,.ocw-care * {
    box-sizing:border-box;
}

.ocw-care {
    --d:#224;
    --b:#447;
    --m:#6d6d80;
    --l:#f5f6fb;
    overflow:hidden;
    background:#fff;
    color:#222238;
    font-family:Arial,Helvetica,sans-serif;
}

.ocw-care a {
    text-decoration:none;
    color:inherit;
}

.ocw-care-shell {
    width:min(1180px,calc(100% - 38px));
    margin:auto;
}

.ocw-care-hero {
    position:relative;
    padding:110px 0;
    background:radial-gradient(circle at 83% 20%,rgba(68,68,119,.14),transparent 28%),linear-gradient(145deg,#fff,#f5f6fb);
}

.ocw-care-hero-grid {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
}

.ocw-care-kicker,.ocw-care-heading>span,.compare-card header>span,.cta-card>div>span {
    display:inline-block;
    margin-bottom:16px;
    color:var(--b);
    font-size:12px;
    font-weight:900;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.ocw-care-copy h1 {
    margin:0;
    color:var(--d);
    font-size:clamp(48px,7vw,82px);
    line-height:.98;
    letter-spacing:-4px;
}

.ocw-care-copy h1 strong {
    display:block;
    color:var(--b);
}

.ocw-care-copy>p {
    max-width:650px;
    margin:25px 0 0;
    color:var(--m);
    font-size:19px;
    line-height:1.75;
}

.ocw-care-actions,.ocw-care-trust {
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:32px;
}

.ocw-care-trust {
    gap:20px;
    color:#5f5f73;
    font-size:13px;
    font-weight:800;
}

.ocw-care-btn {
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 25px;
    border:1px solid transparent;
    border-radius:999px;
    font-size:14px;
    font-weight:900;
    transition:.25s;
}

.ocw-care-btn:hover {
    transform:translateY(-3px);
}

.primary {
    background:linear-gradient(135deg,var(--b),var(--d));
    box-shadow:0 16px 34px rgba(34,34,68,.23);
    color:#fff!important;
}

.secondary {
    border-color:rgba(34,34,68,.13);
    background:#fff;
    color:var(--d)!important;
}

.light {
    background:#fff;
    color:var(--d)!important;
}

.outline {
    border-color:rgba(255,255,255,.2);
    color:#fff!important;
}

.ocw-care-visual {
    position:relative;
    min-height:470px;
    display:grid;
    place-items:center;
}

.ocw-care-screen {
    width:min(100%,520px);
    min-height:365px;
    padding:42px;
    border-radius:28px;
    background:radial-gradient(circle at 82% 18%,rgba(120,120,195,.25),transparent 28%),linear-gradient(145deg,#2a2a55,#17172f);
    box-shadow:0 35px 80px rgba(34,34,68,.22);
    color:#fff;
    transform:perspective(1000px) rotateY(-5deg);
}

.ocw-care-screen small {
    color:#c9c9ff;
    font-weight:900;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.ocw-care-screen h2 {
    margin:55px 0 50px;
    font-size:39px;
    line-height:1.08;
}

.status {
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    font-size:11px;
}

.status i {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#55c87e;
    box-shadow:0 0 0 6px rgba(85,200,126,.12);
}

.float {
    position:absolute;
    padding:14px 17px;
    border:1px solid #fff;
    border-radius:16px;
    background:rgba(255,255,255,.9);
    box-shadow:0 18px 45px rgba(34,34,68,.16);
    color:var(--d);
    animation:float 6s ease-in-out infinite;
}

.float.one {
    right:-10px;
    top:40px;
}

.float.two {
    left:-20px;
    bottom:40px;
    animation-delay:.7s;
}

.ocw-care-benefits {
    margin-top:-38px;
    position:relative;
    z-index:3;
}

.benefit-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    overflow:hidden;
    border:1px solid rgba(34,34,68,.1);
    border-radius:25px;
    background:#fff;
    box-shadow:0 22px 60px rgba(34,34,68,.11);
}

.benefit-grid article {
    padding:31px;
}

.benefit-grid article+article {
    border-left:1px solid rgba(34,34,68,.1);
}

.benefit-grid b {
    color:rgba(68,68,119,.25);
}

.benefit-grid h3 {
    margin:14px 0 10px;
    color:var(--d);
}

.benefit-grid p {
    margin:0;
    color:var(--m);
    font-size:13px;
    line-height:1.65;
}

.ocw-care-plans {
    padding:115px 0 105px;
}

.ocw-care-heading {
    max-width:780px;
    margin:0 auto 50px;
    text-align:center;
}

.ocw-care-heading h2,.compare-card h2,.faq-copy h2 {
    margin:0;
    color:var(--d);
    font-size:clamp(37px,5vw,58px);
    line-height:1.06;
    letter-spacing:-2.4px;
}

.ocw-care-heading p {
    color:var(--m);
    line-height:1.7;
}

.plan-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.plan {
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(34,34,68,.1);
    border-radius:28px;
    background:#fff;
    box-shadow:0 18px 50px rgba(34,34,68,.08);
    transition:.35s;
}

.plan:hover {
    transform:translateY(-9px);
    box-shadow:0 30px 70px rgba(34,34,68,.15);
}

.silver {
    transform:translateY(-15px);
    box-shadow:0 28px 70px rgba(34,34,68,.16);
}

.silver>em {
    position:absolute;
    right:-38px;
    top:17px;
    width:155px;
    padding:7px 0;
    transform:rotate(40deg);
    background:#fff;
    color:var(--b);
    font-size:9px;
    font-weight:900;
    text-align:center;
    text-transform:uppercase;
}

.plan-top {
    padding:34px 31px;
    background:linear-gradient(145deg,#fafaff,#f2f3f8);
}

.silver .plan-top {
    background:linear-gradient(145deg,var(--b),var(--d));
    color:#fff;
}

.plan-top>span {
    display:block;
    margin-bottom:17px;
    color:var(--b);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.silver .plan-top>span {
    color:#c9c9ff;
}

.plan-top strong {
    display:block;
    color:var(--d);
    font-size:45px;
    line-height:1;
}

.silver .plan-top strong {
    color:#fff;
}

.plan-top small {
    color:var(--m);
}

.silver .plan-top small {
    color:rgba(255,255,255,.65);
}

.plan-top p {
    min-height:62px;
    color:var(--m);
    font-size:13px;
    line-height:1.6;
}

.silver .plan-top p {
    color:rgba(255,255,255,.7);
}

.plan ul {
    margin:0;
    padding:18px 31px;
    list-style:none;
}

.plan li {
    padding:11px 0 11px 27px;
    border-bottom:1px solid rgba(34,34,68,.07);
    color:#505064;
    font-size:12px;
}

.plan li:before {
    content:"✓";
    margin-left:-27px;
    margin-right:12px;
    color:#2a9753;
}

.plan li.off {
    color:#9b9ba8;
}

.plan li.off:before {
    content:"—";
    color:#9b9ba8;
}

.plan footer {
    margin-top:auto;
    padding:22px 31px 28px;
    border-top:1px solid rgba(34,34,68,.1);
}

.plan footer small {
    display:block;
    margin-bottom:14px;
    color:#8b8b9a;
}

.plan footer a {
    display:flex;
    min-height:49px;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--d);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.ocw-care-compare {
    padding-bottom:105px;
}

.compare-card {
    overflow:hidden;
    padding:45px 28px 32px;
    border-radius:30px;
    background:var(--l);
    box-shadow:0 25px 70px rgba(34,34,68,.1);
}

.compare-card header {
    text-align:center;
    margin-bottom:30px;
}

.table-wrap {
    overflow-x:auto;
}

.table-wrap table {
    width:100%;
    min-width:690px;
    border-collapse:collapse;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
}

.table-wrap th,.table-wrap td {
    padding:15px 18px;
    border-bottom:1px solid rgba(34,34,68,.07);
    text-align:center;
    font-size:12px;
}

.table-wrap th:first-child,.table-wrap td:first-child {
    text-align:left;
}

.table-wrap th {
    background:linear-gradient(145deg,var(--b),var(--d));
    color:#fff;
}

.table-wrap td:not(:first-child) {
    color:#2b9653;
    font-size:16px;
    font-weight:900;
}

.table-wrap .price td {
    background:#f6f7fb;
    color:var(--d)!important;
}

.ocw-care-faq {
    padding:105px 0;
    background:var(--l);
}

.faq-grid {
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:70px;
}

.faq-copy p {
    color:var(--m);
    line-height:1.7;
}

.accordion {
    display:grid;
    gap:12px;
}

.faq {
    overflow:hidden;
    border:1px solid rgba(34,34,68,.1);
    border-radius:18px;
    background:#fff;
}

.faq button {
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:21px 23px;
    border:0;
    background:none;
    color:var(--d);
    font-weight:900;
    cursor:pointer;
}

.faq button i {
    font-size:22px;
    transition:.3s;
}

.faq.is-open button i {
    transform:rotate(45deg);
}

.faq>div {
    display:grid;
    grid-template-rows:0fr;
    transition:.35s;
}

.faq>div p {
    min-height:0;
    overflow:hidden;
    margin:0;
    padding:0 23px;
    color:var(--m);
    font-size:13px;
    line-height:1.65;
}

.faq.is-open>div {
    grid-template-rows:1fr;
}

.faq.is-open>div p {
    padding-bottom:22px;
}

.ocw-care-cta {
    padding:90px 0;
}

.cta-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:45px;
    padding:clamp(45px,6vw,72px);
    border-radius:32px;
    background:linear-gradient(135deg,var(--b),var(--d));
    box-shadow:0 28px 70px rgba(34,34,68,.25);
    color:#fff;
}

.cta-card h2 {
    margin:0;
    font-size:clamp(34px,5vw,55px);
}

.cta-card p {
    color:rgba(255,255,255,.7);
}

.cta-actions {
    display:flex;
    flex-direction:column;
    gap:11px;
}

.ocw-care-reveal {
    opacity:1;
}

.ocw-care-js .ocw-care-reveal {
    opacity:0;
    transform:translateY(38px);
    transition:.75s;
}

.ocw-care-js .ocw-care-reveal.is-visible {
    opacity:1;
    transform:none;
}

.delay-1 {
    transition-delay:.1s!important;
}

.delay-2 {
    transition-delay:.2s!important;
}

@keyframes float {
    50% {
        transform:translateY(-10px);
    }

}

@media(max-width:980px) {
    .ocw-care-hero-grid,.faq-grid {
        grid-template-columns:1fr;
    }

    .ocw-care-copy {
        text-align:center;
    }

    .ocw-care-copy>p {
        margin-inline:auto;
    }

    .ocw-care-actions,.ocw-care-trust {
        justify-content:center;
    }

    .plan-grid {
        grid-template-columns:1fr;
    }

    .silver {
        transform:none;
    }

    .cta-card {
        align-items:flex-start;
        flex-direction:column;
    }

    .cta-actions {
        flex-direction:row;
    }

}

@media(max-width:700px) {
    .ocw-care-shell {
        width:min(100% - 28px,1180px);
    }

    .ocw-care-hero {
        padding:78px 0 100px;
    }

    .benefit-grid {
        grid-template-columns:1fr;
    }

    .benefit-grid article+article {
        border-left:0;
        border-top:1px solid rgba(34,34,68,.1);
    }

    .ocw-care-plans,.ocw-care-faq {
        padding:78px 0;
    }

    .cta-actions {
        width:100%;
        flex-direction:column;
    }

    .cta-actions a {
        width:100%;
    }
}
/* =========================================
   VEELGESTELDE VRAGEN – LUXE DROPDOWNSTIJL
========================================= */

.ocw-care .faq{
    overflow:hidden;
    border:1px solid rgba(34,34,68,.10);
    border-radius:22px;
    background:#fff;
    box-shadow:0 12px 32px rgba(34,34,68,.06);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.ocw-care .faq:hover{
    transform:translateY(-3px);
    border-color:rgba(68,68,119,.20);
    box-shadow:0 20px 46px rgba(34,34,68,.10);
}

.ocw-care .faq.is-open{
    border-color:rgba(68,68,119,.28);
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f6f6fb
        );
    box-shadow:0 22px 52px rgba(34,34,68,.12);
}

/* Vraag */
.ocw-care .faq button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:25px 28px;
    border:0;
    background:transparent;
    color:#224;
    font-size:17px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:-.2px;
    text-align:left;
    cursor:pointer;
}

/* Plusknop */
.ocw-care .faq button i{
    width:38px;
    height:38px;
    display:grid;
    flex:0 0 auto;
    place-items:center;
    border-radius:50%;
    background:rgba(68,68,119,.09);
    color:#447;
    font-size:23px;
    font-style:normal;
    font-weight:400;
    transition:
        transform .35s ease,
        background .3s ease,
        color .3s ease;
}

.ocw-care .faq.is-open button i{
    transform:rotate(45deg);
    background:#447;
    color:#fff;
}

/* Uitklapgebied */
.ocw-care .faq > div{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:
        grid-template-rows .4s cubic-bezier(.2,.8,.2,1),
        opacity .3s ease;
}

.ocw-care .faq.is-open > div{
    grid-template-rows:1fr;
    opacity:1;
}

/* Antwoordtekst */
.ocw-care .faq > div > p{
    min-height:0;
    overflow:hidden;
    margin:0;
    padding:0 28px;
    color:#59596f;
    font-size:16px;
    font-weight:400;
    line-height:1.85;
    letter-spacing:.05px;
    transition:padding .4s cubic-bezier(.2,.8,.2,1);
}

.ocw-care .faq.is-open > div > p{
    padding:0 28px 28px;
}

/* Mobiel */
@media(max-width:650px){

    .ocw-care .faq button{
        padding:21px 20px;
        font-size:15px;
    }

    .ocw-care .faq button i{
        width:34px;
        height:34px;
        font-size:21px;
    }

    .ocw-care .faq > div > p{
        padding-right:20px;
        padding-left:20px;
        font-size:15px;
        line-height:1.75;
    }

    .ocw-care .faq.is-open > div > p{
        padding:0 20px 23px;
    }
}
.ocw-care .faq button,
.ocw-care .faq button:focus,
.ocw-care .faq button:active,
.ocw-care .faq button:focus-visible{
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

.ocw-care .faq button::-moz-focus-inner{
    border: 0;
}