/* Vocito Landing Pages — "nieuw jasje" SEO landing system.
   Self-contained, on-brand (Inter + indigo→purple). Used by behind-the-scenes
   SEO pages that rank on Google but stay out of the main site nav. */
:root{
  --ink:#0b0d16; --ink2:#0f172a; --indigo:#6366f1; --indigo2:#4f46e5; --violet:#8b5cf6;
  --blue:#3b82f6; --slate:#64748b; --slate2:#475569; --line:#e2e8f0; --bg-soft:#f8fafc;
  --ok:#15803d; --okbg:#dcfce7; --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink2);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:var(--indigo2);text-decoration:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a5b4fc;background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.3);padding:6px 14px;border-radius:999px}
.dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 140% at 18% 0%,#1e1b4b 0%,#0f172a 48%,#0b0d16 100%);color:#fff;padding:104px 0 76px;text-align:center}
.hero::after{content:"";position:absolute;right:-160px;top:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.22),transparent 62%);pointer-events:none}
.hero .eyebrow{color:#c7d2fe}
.hero h1{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:20px auto 16px;max-width:780px}
.grad{background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:1.12rem;color:#c7d2fe;max-width:620px;margin:0 auto 30px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;padding:15px 30px;border-radius:13px;transition:.2s;font-size:1rem}
.btn-primary{background:linear-gradient(90deg,var(--indigo),var(--violet));color:#fff;box-shadow:0 10px 30px rgba(99,102,241,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(99,102,241,.5)}
.btn-ghost{border:1.5px solid rgba(165,180,252,.5);color:#c7d2fe}
.btn-ghost:hover{border-color:#a5b4fc;color:#fff}
.stats{display:flex;gap:48px;justify-content:center;flex-wrap:wrap;margin-top:42px}
.stat .v{display:block;font-size:1.9rem;font-weight:800;background:linear-gradient(90deg,#7aa2ff,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{font-size:.72rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* sections */
section{padding:68px 0;border-bottom:1px solid #f1f5f9}
h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--ink);letter-spacing:-.01em;text-align:center;margin-bottom:10px}
.lead{text-align:center;color:var(--slate);max-width:620px;margin:0 auto 40px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.2s}
.card:hover{border-color:#c7d2fe;box-shadow:0 12px 30px rgba(15,23,42,.06);transform:translateY(-2px)}
.card .ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(139,92,246,.14));color:var(--indigo2);font-size:1.15rem;margin-bottom:14px}
.card h3{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:7px}
.card p{font-size:.93rem;color:var(--slate2)}
.result{display:inline-block;background:var(--okbg);color:var(--ok);font-weight:700;font-size:.8rem;padding:4px 12px;border-radius:8px;margin-top:12px}

/* comparison table */
.cmp{max-width:840px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cmp table{width:100%;border-collapse:collapse;font-size:.93rem}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--ink2);color:#fff;font-weight:700}
.cmp thead th:last-child{background:linear-gradient(135deg,var(--indigo),var(--violet))}
.cmp tbody tr:nth-child(even){background:var(--bg-soft)}
.cmp td:first-child{font-weight:600;color:var(--ink)}
.cmp .yes{color:var(--ok);font-weight:700}
.cmp .no{color:#cbd5e1}
.cmp td:last-child{font-weight:600}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:12px;padding:0;margin-bottom:12px;background:#fff;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--indigo);font-size:1.4rem;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:16px 22px;color:var(--slate2);font-size:.93rem}

/* CTA band + footer */
.band{background:radial-gradient(120% 160% at 80% 0%,#1e1b4b,#0f172a);color:#fff;text-align:center;border:0}
.band h2{color:#fff}
.band p{color:#c7d2fe;max-width:560px;margin:0 auto 26px}
.lpfoot{padding:34px 0;text-align:center;color:#94a3b8;font-size:.85rem;background:#0b0d16}
.lpfoot a{color:#a5b4fc}
.lpfoot .links{margin-bottom:10px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){section{padding:50px 0}.stats{gap:28px}.hero{padding:84px 0 60px}}