/* ═══ THEME: Fresh Vibrant ═══
 * Speels, kleurrijk, grote rounded corners, gradient buttons, energiek
 * Inspiratie: Stripe, Linear, moderne SaaS
 */

/* Typography — modern, friendly */
h1,h2,h3 { font-weight: 800; }
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: 900; line-height: 1.05; }
.sec h2 { font-weight: 800; }
body { line-height: 1.7; }

/* Hero — gradient overlay, levendig */
.hero { min-height: 520px; overflow: visible; }
.hero-ov { background: linear-gradient(135deg, var(--cd) 0%, color-mix(in srgb, var(--c) 60%, var(--cd)) 50%, var(--c) 100%) !important; opacity: .82 !important; }
.hero-badge { background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); border-radius: 50px; padding: 8px 20px; }
.hero p { font-size: 1.1rem; }

/* Buttons — gradient, rounded, bouncy */
.btn { border-radius: 14px !important; font-weight: 700; padding: 14px 28px; transition: all .3s cubic-bezier(.34,1.56,.64,1); }
.btn-w { background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04); }
.btn-w:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.btn-ol { border-radius: 14px !important; border: 2px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); }
.btn-c, .nav-cta { background: linear-gradient(135deg, var(--c), var(--ca, var(--cd))) !important; border-radius: 14px !important; border: none; }
.btn-phone { border-radius: 14px !important; }
.nav-cta { border-radius: 12px !important; }

/* Cards — groot, rounded, schaduw */
.card { border-radius: 20px; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 4px 16px rgba(0,0,0,.04); background: #fff; overflow: hidden; }
.card::before { height: 4px; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, var(--c), var(--ca, var(--cd))); }
.card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 48px rgba(0,0,0,.1); }
.card-icon { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--cl), color-mix(in srgb, var(--c) 15%, #fff)); font-size: 1.3rem; }

/* Sections — afwisselend, gradient accenten */
.sec { padding: 80px 0; }
.sec-alt { background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); }
.sec-badge { border-radius: 50px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, #fff), color-mix(in srgb, var(--c) 6%, #fff)); color: var(--c); font-weight: 700; padding: 6px 18px; border: 1px solid color-mix(in srgb, var(--c) 15%, #fff); }

/* Stats — kleurrijk */
.stat { background: #fff; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.04); padding: 28px 16px; }
.stat-v { font-size: 2.2rem; font-weight: 900; background: linear-gradient(135deg, var(--c), var(--ca, var(--cd))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* Steps */
.step { border-radius: 20px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.step:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.step h4 { font-weight: 800; }

/* Reviews */
.review { border-radius: 20px; }

/* FAQ */
.faq-item { border-radius: 16px; }

/* Footer — schoon */
footer { background: #0f172a !important; border-radius: 32px 32px 0 0; }

/* Nav */
nav { box-shadow: 0 1px 8px rgba(0,0,0,.04) !important; }

/* CTA — gradient */
.cta { background: linear-gradient(135deg, var(--cd), color-mix(in srgb, var(--c) 40%, var(--cd))) !important; border-radius: 32px; margin: 0 24px 40px; }
.cta .w { padding: 60px 40px; }

/* Trust */
.trust-item { border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.04); }
.trust-item:hover { transform: translateY(-4px) scale(1.02); }

/* Wave */
.wave-divider { margin-top: -2px; }

/* Widgets */
.itw-card { border-radius: 20px; }
.itw-card:hover { transform: translateY(-8px) scale(1.01) !important; }
.itw-btn { border-radius: 14px !important; }
.itw-section { border-radius: 24px; }
.itw-stat { border-radius: 20px; }
.itw-step { border-radius: 20px; }
.itw-review { border-radius: 20px; }
.itw-faq-item { border-radius: 16px; }
.itw-cta { border-radius: 32px; margin: 0 16px; }

/* Mega menu */
.mega-menu { border-radius: 20px; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 20px 60px rgba(0,0,0,.12); }
.mega-item { border-radius: 14px; }
.mega-item i { border-radius: 12px; }