/* ═══════════════════════════════════
   MAATWERK DIGITAAL — CITY PAGES CSS
   Gedeelde styling voor alle webdesign-[stad].html pagina's
   ═══════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --blue:#1B3A6B;--blue-light:#2A4F8F;--blue-pale:#E8EEF6;
  --orange:#F59E0B;--orange-hover:#D97706;
  --white:#FFFFFF;--gray-50:#F8FAFC;--gray-100:#F1F5F9;
  --gray-200:#E2E8F0;--gray-400:#94A3B8;--gray-500:#64748B;
  --gray-600:#475569;--gray-700:#334155;--gray-800:#1E293B;--gray-900:#0F172A;
  --green:#16A34A;--radius:12px;--radius-lg:24px;--transition:0.3s ease;
}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:400;color:var(--gray-700);background:var(--white);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:1080px;margin:0 auto;padding:0 24px}

/* NAV */
.cnav{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:6px 0;background:rgba(255,255,255,0.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 12px rgba(0,0,0,0.04)}
.cnav .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cnav-logo img{height:64px;width:auto}
.cnav-links{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cnav-links a{font-size:0.88rem;font-weight:600;color:var(--gray-600);transition:color var(--transition)}
.cnav-links a:hover{color:var(--blue)}
.cnav-cta{padding:10px 22px;border-radius:50px;background:var(--orange);color:var(--gray-900) !important;font-weight:700;font-size:0.85rem}
.cnav-cta:hover{background:var(--orange-hover);transform:translateY(-1px)}
@media(max-width:680px){.cnav-links a:not(.cnav-cta){display:none}.cnav-logo img{height:52px}}

/* BREADCRUMB */
.crumbs{padding:96px 0 8px;font-size:0.86rem;color:var(--gray-500)}
.crumbs a{color:var(--blue);font-weight:600}
.crumbs a:hover{text-decoration:underline}

/* HERO */
.chero{padding:24px 0 64px;background:var(--white)}
.chero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--blue-pale);color:var(--blue);padding:6px 14px;border-radius:50px;font-size:0.82rem;font-weight:700;margin-bottom:18px}
.chero h1{font-size:clamp(1.9rem,4.6vw,3rem);font-weight:800;color:var(--gray-900);line-height:1.15;margin-bottom:18px;letter-spacing:-0.02em}
.chero h1 span{color:var(--blue)}
.chero .lead{font-size:clamp(1rem,1.6vw,1.18rem);color:var(--gray-600);max-width:760px;margin-bottom:26px;line-height:1.6}
.chero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:50px;font-weight:700;font-size:0.92rem;cursor:pointer;transition:all var(--transition);border:2px solid transparent;font-family:inherit}
.btn-orange{background:var(--orange);color:var(--gray-900);border-color:var(--orange)}
.btn-orange:hover{background:var(--orange-hover);border-color:var(--orange-hover);transform:translateY(-2px);box-shadow:0 6px 24px rgba(245,158,11,0.3)}
.btn-outline{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:var(--white);transform:translateY(-2px)}
.chero-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;font-size:0.88rem;color:var(--gray-500)}
.chero-meta span{display:inline-flex;align-items:center;gap:6px}

/* SECTIONS */
section.cblock{padding:64px 0;border-top:1px solid var(--gray-100)}
section.cblock.alt{background:var(--gray-50)}
.cblock h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;color:var(--gray-900);margin-bottom:14px;letter-spacing:-0.01em}
.cblock h3{font-size:1.15rem;font-weight:700;color:var(--gray-900);margin:18px 0 8px}
.cblock p{margin-bottom:14px;color:var(--gray-700)}
.cblock ul.checks{margin:18px 0 22px;display:grid;gap:10px}
.cblock ul.checks li{padding-left:28px;position:relative;color:var(--gray-700)}
.cblock ul.checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:800}

/* PRICING CARDS */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:24px}
.price-card{padding:24px;border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--white);transition:all var(--transition)}
.price-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 10px 30px rgba(27,58,107,0.08)}
.price-card .emoji{font-size:1.6rem;margin-bottom:8px;display:block}
.price-card .price{font-size:1.4rem;font-weight:800;color:var(--orange);margin:8px 0 12px}
.price-card p{font-size:0.92rem;color:var(--gray-600);margin-bottom:0}

/* TRUST BAR */
.trustbar{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;padding:22px;background:var(--blue-pale);border-radius:var(--radius);margin:32px 0;font-size:0.92rem;color:var(--blue);font-weight:600}

/* FAQ */
.cfaq-item{border-bottom:1px solid var(--gray-200);padding:18px 0}
.cfaq-item h3{margin:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:1.02rem}
.cfaq-item h3::after{content:"+";color:var(--orange);font-size:1.5rem;font-weight:300;transition:transform var(--transition)}
.cfaq-item.open h3::after{transform:rotate(45deg)}
.cfaq-item .a{max-height:0;overflow:hidden;transition:max-height 0.35s ease}
.cfaq-item.open .a{max-height:600px;padding-top:10px}

/* CTA */
.ccta{padding:56px 0;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-light) 100%);color:var(--white);text-align:center}
.ccta h2{color:var(--white);font-size:clamp(1.4rem,3vw,2rem);font-weight:800;margin-bottom:12px}
.ccta p{color:rgba(255,255,255,0.85);max-width:580px;margin:0 auto 22px}

/* FOOTER */
.cfooter{padding:36px 0;background:var(--gray-900);color:rgba(255,255,255,0.6);font-size:0.88rem}
.cfooter .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.cfooter a{color:rgba(255,255,255,0.7)}
.cfooter a:hover{color:var(--white)}
.cfooter-links{display:flex;gap:18px;flex-wrap:wrap}

/* WHATSAPP FLOAT */
.wa-float{position:fixed;bottom:24px;right:24px;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:999;box-shadow:0 4px 20px rgba(37,211,102,0.4);transition:transform var(--transition)}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:30px;height:30px;fill:white}