/* ===== Homepage hero (extra bovenop je basis CSS) ===== */
.hero-home{position:relative;padding:56px 0 24px}
.hero-grid-home{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
@media (max-width:1100px){.hero-grid-home{grid-template-columns:1fr;gap:28px}}

.hero-left .headline-home{margin:18px 0 12px;font-size:clamp(36px,5.2vw,64px);line-height:1.05;font-weight:800}
.lead-home{font-size:18px;color:var(--muted);max-width:640px}

.cta-row{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.trust-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.trust-row .dot{width:10px;height:10px;border-radius:9999px;background:var(--green);box-shadow:0 0 0 8px rgba(0,184,148,.15)}

.pill{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:800}
.pill--green{background:rgba(0,184,148,.18);color:var(--green)}
.pill--purple{background:rgba(108,92,231,.18);color:var(--purple)}

.hero-right .snapshot{padding:16px;border-radius:18px}
.snapshot-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.snap-tile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 12px}
.snap-label{font-size:12px;color:var(--muted)}
.snap-value{font-weight:800;font-size:18px}

.usage{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px}
.usage-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mini-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}

/* zachte neon auras achter de hero */
.hero-aura{position:absolute;filter:blur(80px);pointer-events:none;opacity:.35}
.hero-aura--left{left:-18rem;top:-10rem;width:46rem;height:46rem;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,212,255,.55), transparent 60%)}
.hero-aura--right{right:-10rem;top:-8rem;width:42rem;height:42rem;
  background:radial-gradient(50% 50% at 50% 50%, rgba(108,92,231,.50), transparent 60%)}