/* =====================================================
MATCHD DETACHERING — ingesloten CSS
Alle klassen beginnen met .mdet- om conflicten
met het bestaande matchd.nl thema te voorkomen
===================================================== */

.mdet-wrap {
font-family: cocogoose-pro-text, sans-serif;
color: #004469;
max-width: 100%;
overflow-x: hidden;
}

/* HERO */
.mdet-hero {
background: #004469;
border-radius: 20px;
padding: 56px 48px 0;
overflow: hidden;
position: relative;
margin-bottom: 0;
}
.mdet-hero-circle {
position: absolute;
border-radius: 50%;
background: #148C66;
}
.mdet-hero-circle.c1 { width: 420px; height: 420px; top: -100px; right: -60px; opacity: 0.14; }
.mdet-hero-circle.c2 { width: 160px; height: 160px; bottom: 40px; left: 8%; opacity: 0.08; }
.mdet-hero-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 360px;
gap: 48px;
align-items: end;
}
.mdet-hero-content { padding-bottom: 56px; }
.mdet-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(20,140,102,0.2);
border: 1px solid rgba(77,217,168,0.3);
color: #4DD9A8;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 20px;
margin-bottom: 24px;
}
.mdet-badge-dot {
width: 6px; height: 6px;
background: #4DD9A8;
border-radius: 50%;
}
.mdet-hero h1 {
font-family: cocogoose-pro-text, sans-serif !important;
font-size: clamp(28px, 4vw, 48px) !important;
font-weight: 700 !important;
color: #ffffff !important;
line-height: 1.1 !important;
margin-bottom: 20px !important;
letter-spacing: -0.01em !important;
}
.mdet-hero h1 em {
font-style: normal !important;
color: #4DD9A8 !important;
}
.mdet-hero-sub {
font-size: 16px;
color: rgba(255,255,255,0.75);
line-height: 1.75;
max-width: 480px;
margin-bottom: 36px;
font-weight: 400;
}
.mdet-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.mdet-btn-primary {
background: #148C66;
color: #fff !important;
border: none;
padding: 13px 26px;
border-radius: 6px;
font-family: cocogoose-pro-text, sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none !important;
display: inline-block;
transition: background 0.2s;
}
.mdet-btn-primary:hover { background: #1aab7e; }
.mdet-btn-outline {
background: rgba(255,255,255,0.1);
color: #fff !important;
border: 1px solid rgba(255,255,255,0.3);
padding: 13px 26px;
border-radius: 6px;
font-family: cocogoose-pro-text, sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none !important;
display: inline-block;
}
.mdet-stats {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px 16px 0 0;
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 20px;
align-self: end;
}
.mdet-stat-num {
font-family: cocogoose-pro-text, sans-serif;
font-size: 30px;
font-weight: 700;
color: #fff;
line-height: 1;
margin-bottom: 4px;
}
.mdet-stat-num span { color: #4DD9A8; }
.mdet-stat-label { font-size: 12px; color: rgba(255,255,255,0.55); }
.mdet-stat-divider { height: 1px; background: rgba(255,255,255,0.12); }

/* SECTIONS */
.mdet-section { padding: 72px 48px; max-width: 1196px; margin: 0 auto; }
.mdet-section-dark { background: #004469; }
.mdet-section-light { background: #f5f8f7; }

.mdet-tag {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #148C66;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.mdet-tag::before {
content: ”;
display: block;
width: 18px; height: 2px;
background: #148C66;
border-radius: 1px;
}
.mdet-section-dark .mdet-tag { color: #4DD9A8; }
.mdet-section-dark .mdet-tag::before { background: #4DD9A8; }

.mdet-h2 {
font-family: cocogoose-pro-text, sans-serif !important;
font-size: clamp(22px, 3vw, 32px) !important;
font-weight: 700 !important;
color: #004469 !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
margin-bottom: 14px !important;
}
.mdet-section-dark .mdet-h2 { color: #fff !important; }
.mdet-lead {
font-size: 16px;
color: #5a7a72;
line-height: 1.8;
max-width: 600px;
margin-bottom: 0;
}
.mdet-section-dark .mdet-lead { color: rgba(255,255,255,0.65); }

/* WAT DOEN WE */
.mdet-what-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: end;
margin-bottom: 40px;
}
.mdet-what-intro { font-size: 15px; color: #5a7a72; line-height: 1.8; }
.mdet-what-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
background: #d6e4e0;
border-radius: 16px;
overflow: hidden;
}
.mdet-what-card { background: #fff; padding: 28px 22px; }
.mdet-what-card:first-child { border-radius: 16px 0 0 16px; }
.mdet-what-card:last-child { border-radius: 0 16px 16px 0; }
.mdet-what-icon {
width: 44px; height: 44px;
background: #e0f2eb;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.mdet-what-card h3 {
font-family: cocogoose-pro-text, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #004469 !important;
margin-bottom: 8px !important;
line-height: 1.3 !important;
}
.mdet-what-card p {
font-size: 13px !important;
color: #5a7a72 !important;
line-height: 1.7 !important;
margin: 0 !important;
}

/* WAAROM */
.mdet-why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 40px;
}
.mdet-why-card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 14px;
padding: 28px 24px;
}
.mdet-why-num {
font-size: 11px;
font-weight: 700;
color: #4DD9A8;
letter-spacing: 0.08em;
margin-bottom: 14px;
opacity: 0.7;
}
.mdet-why-card h4 {
font-family: cocogoose-pro-text, sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #fff !important;
margin-bottom: 8px !important;
line-height: 1.3 !important;
}
.mdet-why-card p {
font-size: 13px !important;
color: rgba(255,255,255,0.58) !important;
line-height: 1.75 !important;
margin: 0 !important;
}

/* WAAR */
.mdet-where-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin-top: 40px;
}
.mdet-sector-label {
font-family: cocogoose-pro-text, sans-serif;
font-size: 12px;
font-weight: 600;
color: #004469;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 2px solid #148C66;
display: inline-block;
}
.mdet-org-row {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid #d6e4e0;
border-radius: 10px;
padding: 11px 16px;
font-size: 14px;
color: #004469;
margin-bottom: 8px;
}
.mdet-org-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #148C66;
min-width: 7px;
}
.mdet-domain-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 16px;
}
.mdet-domain-pill {
background: #fff;
border: 1px solid #d6e4e0;
border-radius: 10px;
padding: 11px 14px;
font-size: 13px;
color: #004469;
display: flex;
align-items: center;
gap: 8px;
}
.mdet-domain-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #148C66;
min-width: 6px;
}

/* CTA */
.mdet-cta-wrap { padding: 72px 48px 80px; }
.mdet-cta-inner {
max-width: 1100px;
margin: 0 auto;
background: linear-gradient(135deg, #004469 0%, #003050 100%);
border-radius: 24px;
padding: 56px;
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: center;
position: relative;
overflow: hidden;
}
.mdet-cta-circle {
position: absolute;
border-radius: 50%;
background: #148C66;
opacity: 0.1;
}
.mdet-cta-circle.b1 { width: 280px; height: 280px; right: -50px; top: -80px; }
.mdet-cta-circle.b2 { width: 120px; height: 120px; left: 35%; bottom: -40px; opacity: 0.06; }
.mdet-cta-text { position: relative; }
.mdet-cta-text h2 {
font-family: cocogoose-pro-text, sans-serif !important;
font-size: 28px !important;
font-weight: 700 !important;
color: #fff !important;
margin-bottom: 12px !important;
line-height: 1.2 !important;
}
.mdet-cta-text h2 span { color: #4DD9A8 !important; }
.mdet-cta-text p {
font-size: 15px !important;
color: rgba(255,255,255,0.65) !important;
line-height: 1.7 !important;
max-width: 460px !important;
margin: 0 !important;
}
.mdet-contact {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
min-width: 180px;
}
.mdet-avatar {
width: 68px; height: 68px;
border-radius: 50%;
background: #148C66;
display: flex;
align-items: center;
justify-content: center;
font-family: cocogoose-pro-text, sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
border: 3px solid rgba(77,217,168,0.35);
}
.mdet-contact-name { font-size: 14px; font-weight: 600; color: #fff; }
.mdet-contact-role { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: -4px; }
.mdet-contact-links { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.mdet-contact-link {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: rgba(255,255,255,0.75) !important;
text-decoration: none !important;
padding: 8px 12px;
background: rgba(255,255,255,0.07);
border-radius: 7px;
border: 1px solid rgba(255,255,255,0.1);
}
.mdet-contact-link:hover { background: rgba(255,255,255,0.12); color: #fff !important; }

/* RESPONSIVE */
@media (max-width: 960px) {
.mdet-hero { padding: 40px 24px 0; }
.mdet-hero-inner { grid-template-columns: 1fr; }
.mdet-stats { flex-direction: row; border-radius: 16px; flex-wrap: wrap; }
.mdet-section { padding: 48px 24px; }
.mdet-what-header { grid-template-columns: 1fr; gap: 16px; }
.mdet-what-grid { grid-template-columns: 1fr 1fr; }
.mdet-what-card:first-child { border-radius: 16px 0 0 0; }
.mdet-what-card:last-child { border-radius: 0 0 16px 16px; }
.mdet-why-grid { grid-template-columns: 1fr 1fr; }
.mdet-where-grid { grid-template-columns: 1fr; }
.mdet-domain-grid { grid-template-columns: 1fr 1fr; }
.mdet-cta-inner { grid-template-columns: 1fr; padding: 36px 24px; }
.mdet-cta-wrap { padding: 48px 24px 60px; }
}
@media (max-width: 600px) {
.mdet-what-grid { grid-template-columns: 1fr; }
.mdet-why-grid { grid-template-columns: 1fr; }
.mdet-domain-grid { grid-template-columns: 1fr 1fr; }
}