/* ============================================================
   stefanverleysen.com — hand-rolled, no framework, no CDN JS
   ============================================================ */

:root{
  --ink:#0f172a; --ink-2:#1e293b;
  --body:#475569; --muted:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line-2:#cbd5e1;
  --bg:#ffffff; --surface:#f8fafc; --surface-2:#f1f5f9;
  --brand:#1d4ed8; --brand-2:#3b82f6; --brand-3:#60a5fa;
  --brand-ink:#1e3a8a;
  --accent:#7c3aed;
  --ok:#059669;
  --wrap:74rem;
  --r:16px; --r-lg:22px;
  --sh-1:0 1px 2px rgba(15,23,42,.05), 0 0 0 1px rgba(15,23,42,.05);
  --sh-2:0 4px 16px -4px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.06);
  --sh-3:0 24px 48px -16px rgba(29,78,216,.22), 0 0 0 1px rgba(59,130,246,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.7; letter-spacing:-.011em;
  color:var(--body); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
h1,h2,h3,h4{color:var(--ink); letter-spacing:-.03em; line-height:1.12; margin:0; text-wrap:balance}
p{margin:0}
a{color:var(--brand); text-decoration:none; font-weight:600}
a:hover{text-decoration:underline}
ul{margin:0; padding:0; list-style:none}

/* --- a11y --- */
:focus-visible{outline:3px solid var(--brand-2); outline-offset:3px; border-radius:6px}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:#fff; padding:.75rem 1.25rem;
  border-radius:0 0 10px 0; font-weight:700;
}
.skip:focus{left:0; text-decoration:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- layout --- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 1.5rem}
section{padding:5.5rem 0}
.sec-head{max-width:44rem; margin:0 auto 3.25rem; text-align:center}
.eyebrow{
  display:inline-block; font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand);
  margin-bottom:1rem;
}
h2{font-size:clamp(1.9rem,3.6vw,2.6rem); margin-bottom:1rem}
.sec-head p{font-size:1.1rem; color:var(--muted)}
.lede{font-size:1.15rem}

/* --- buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:1rem; letter-spacing:-.01em;
  padding:.95rem 1.9rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 8px 20px -6px rgba(29,78,216,.5)}
.btn-primary:hover{background:#1e40af; box-shadow:0 14px 28px -8px rgba(29,78,216,.6)}
.btn-light{background:#fff; color:var(--brand-ink); box-shadow:0 8px 20px -6px rgba(2,6,23,.35)}
.btn-light:hover{background:#eff6ff}
.btn-ghost{background:transparent; color:#dbeafe; border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.1); color:#fff}
.btn-sm{padding:.6rem 1.15rem; font-size:.9rem}

/* --- header --- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;
}
.site-header.stuck{border-bottom-color:var(--line); box-shadow:0 2px 12px rgba(15,23,42,.05)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:72px; gap:1rem}
.brand{display:flex; align-items:center; gap:.65rem; font-weight:800; color:var(--ink);
  letter-spacing:-.03em; font-size:1.05rem}
.brand:hover{text-decoration:none}
.brand svg{width:34px; height:34px; flex-shrink:0}
.nav{display:flex; align-items:center; gap:2rem}
.nav a{color:var(--body); font-size:.95rem; font-weight:600}
.nav a:hover{color:var(--brand); text-decoration:none}
.nav a.btn-primary{color:#fff}
.nav a.btn-primary:hover{color:#fff}
@media (max-width:860px){
  .nav{gap:0}
  .nav a:not(.btn){display:none}
}

/* --- hero --- */
.hero{
  position:relative; overflow:hidden; padding:6.5rem 0 6rem;
  background:linear-gradient(135deg,#0b1220 0%,#132a63 42%,#1e3a8a 70%,#312e81 100%);
  color:#fff;
}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(closest-side at 76% 22%, rgba(59,130,246,.42), transparent 70%),
    radial-gradient(closest-side at 10% 86%, rgba(124,58,237,.30), transparent 70%);
}
.hero .wrap{position:relative; z-index:1;
  display:grid; grid-template-columns:1.35fr .65fr; gap:4rem; align-items:center}
.hero h1{
  color:#fff; font-size:clamp(2.25rem,5vw,3.6rem); font-weight:800;
  line-height:1.06; margin-bottom:1.5rem;
}
.hero .lede{color:#c7d7f5; margin-bottom:2rem; max-width:36rem}
.hero-tag{
  display:inline-flex; align-items:center; gap:.55rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#dbeafe; font-size:.82rem; font-weight:600; letter-spacing:.03em;
  padding:.45rem 1rem; border-radius:999px; margin-bottom:1.75rem;
}
.hero-tag .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem}
.hero-note{margin-top:1.25rem; font-size:.9rem; color:#93b4e8}
.portrait{
  width:min(300px,100%); aspect-ratio:1; border-radius:50%; overflow:hidden;
  margin-left:auto; border:5px solid rgba(255,255,255,.9);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}
.portrait img{width:100%; height:100%; object-fit:cover}
@media (max-width:900px){
  .hero{padding:4.5rem 0 4rem}
  .hero .wrap{grid-template-columns:1fr; gap:2.5rem; text-align:center}
  .hero .lede{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .portrait{margin:0 auto; width:min(220px,60%)}
}

/* --- proof strip --- */
.proof{padding:3.25rem 0; background:var(--surface); border-bottom:1px solid var(--line)}
.proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem 1.5rem}
.stat{text-align:center}
.stat .n{
  font-size:clamp(2.1rem,4.4vw,3rem); font-weight:800; line-height:1;
  letter-spacing:-.04em; color:var(--brand-ink);
  background:linear-gradient(135deg,#1e3a8a,#2563eb); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;
}
.stat .l{
  margin-top:.6rem; font-size:.72rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); line-height:1.4;
}
@media (max-width:700px){ .proof-grid{grid-template-columns:repeat(2,1fr)} }

/* --- generic card --- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem}
@media (max-width:940px){ .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:2.25rem; box-shadow:var(--sh-1);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display:flex; flex-direction:column;
}
.card h3{font-size:1.35rem; margin-bottom:.75rem}
.card p{color:var(--body)}
.card .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; margin-bottom:1.15rem;
  background:linear-gradient(135deg,#dbeafe,#eff6ff); color:var(--brand);
  font-weight:800; font-size:.9rem; border:1px solid #bfdbfe;
}
.card-hover:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:#bfdbfe}

/* --- ways (numbered) --- */
.ways .card{background:#fff}
.ways-note{
  margin-top:2.5rem; text-align:center; font-size:.95rem; color:var(--muted);
}

/* --- product cards --- */
.product{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:2rem 2rem 1.6rem; box-shadow:var(--sh-1);
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  font-weight:400;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product:hover{
  text-decoration:none; transform:translateY(-6px);
  box-shadow:var(--sh-3); border-color:transparent;
}
.product-logo{
  height:74px; display:flex; align-items:center; justify-content:flex-start;
  margin-bottom:1.4rem;
}
.product-logo img{
  max-height:100%; width:auto; object-fit:contain;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.product:hover .product-logo img{transform:scale(1.07)}
.product h3{font-size:1.3rem; margin-bottom:.2rem}
.product .kicker{
  font-size:.73rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1rem; display:block;
}
.product p{color:var(--body); font-size:.98rem; flex:1}
.product .metric{
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.product .metric b{
  font-size:1.25rem; font-weight:800; letter-spacing:-.03em; color:var(--brand-ink);
}
.product .metric span{font-size:.85rem; color:var(--muted); font-weight:500}
.product .go{
  margin-top:1.1rem; font-size:.9rem; font-weight:700; color:var(--brand);
  display:inline-flex; align-items:center; gap:.4rem;
}
.product .go svg{transition:transform .2s ease}
.product:hover .go svg{transform:translateX(4px)}

/* --- district-ready trust strip --- */
.trust{
  margin-top:2.5rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:2rem 2.25rem; box-shadow:var(--sh-1);
}
.trust h3{font-size:1.15rem; margin-bottom:.5rem}
.trust > p{color:var(--muted); font-size:.97rem; margin-bottom:1.35rem}
.trust-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  gap:.7rem 1.75rem;
}
.trust-list li{
  position:relative; padding-left:1.6rem; font-size:.94rem;
  color:var(--ink-2); font-weight:500;
}
.trust-list li::before{
  content:''; position:absolute; left:0; top:.52em;
  width:.7rem; height:.4rem; border-left:2.5px solid var(--ok);
  border-bottom:2.5px solid var(--ok); transform:rotate(-45deg);
}

/* --- reseller band --- */
.band{
  background:linear-gradient(135deg,var(--surface),#eff6ff);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.band-inner{
  display:grid; grid-template-columns:auto 1fr auto; gap:2.5rem; align-items:center;
}
.band-logo{
  display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem 1.75rem; box-shadow:var(--sh-1); flex-shrink:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
.band-logo:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.band-cta{display:flex; flex-direction:column; align-items:center; gap:.75rem}
.band-link{font-size:.88rem; font-weight:600; color:var(--brand); white-space:nowrap}
.band-logo img{height:44px; width:auto}
.band h2{font-size:clamp(1.5rem,2.6vw,1.95rem); margin-bottom:.6rem}
.band p{color:var(--body)}
.badge{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#dcfce7; color:#166534; border:1px solid #bbf7d0;
  font-size:.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:.35rem .85rem; border-radius:999px; margin-bottom:.9rem;
}
@media (max-width:940px){
  .band-inner{grid-template-columns:1fr; gap:1.5rem; text-align:center; justify-items:center}
}

/* --- CTA --- */
.cta{
  background:linear-gradient(135deg,#0b1220,#1e3a8a 60%,#312e81);
  color:#fff; text-align:center; position:relative; overflow:hidden;
}
.cta::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(closest-side at 50% 0%, rgba(59,130,246,.35), transparent 70%);
}
.cta .wrap{position:relative; z-index:1; max-width:44rem}
.cta h2{color:#fff; margin-bottom:1rem}
.cta p{color:#c7d7f5; font-size:1.1rem; margin-bottom:2rem}
.cta-row{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap}
.cta .fine{margin-top:1.5rem; font-size:.9rem; color:#93b4e8}

.tinted{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* --- footer --- */
.site-footer{background:#0b1220; color:#94a3b8; padding:4rem 0 2rem; font-size:.94rem}
.foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(148,163,184,.18);
}
.foot-brand .brand{color:#fff; margin-bottom:1rem}
.foot-brand p{color:#94a3b8; max-width:22rem; font-size:.92rem}
.foot-col h3{
  color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; margin-bottom:1.1rem;
}
.foot-col li{margin-bottom:.65rem}
.foot-col a{color:#94a3b8; font-weight:500}
.foot-col a:hover{color:#fff; text-decoration:none}
.foot-bottom{
  padding-top:1.75rem; display:flex; justify-content:space-between;
  align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.foot-bottom p{font-size:.87rem; color:#94a3b8}
.foot-legal{display:flex; gap:1.5rem; flex-wrap:wrap}
.foot-legal a{color:#94a3b8; font-weight:500; font-size:.87rem}
.foot-legal a:hover{color:#fff; text-decoration:none}
.socials{display:flex; gap:.75rem}
.socials a{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:rgba(148,163,184,.12); color:#cbd5e1;
  transition:background-color .2s, color .2s, transform .2s;
}
.socials a:hover{background:var(--brand); color:#fff; transform:translateY(-2px)}
.socials svg{width:19px; height:19px}
@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr; gap:2rem}
  .foot-brand{grid-column:1 / -1}
  .foot-bottom{flex-direction:column; align-items:flex-start}
}

/* --- modal --- */
.modal{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  padding:1.5rem; background:rgba(8,15,31,.72);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.modal.open{opacity:1; visibility:visible}
.modal-box{
  background:#fff; border-radius:var(--r-lg); width:min(34rem,100%);
  max-height:calc(100vh - 3rem); overflow-y:auto; padding:2.25rem;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.5);
  transform:translateY(14px) scale(.97); transition:transform .25s ease;
}
.modal.open .modal-box{transform:none}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:.4rem}
.modal-head h2{font-size:1.5rem}
.modal-sub{color:var(--muted); font-size:.95rem; margin-bottom:1.75rem}
.x{
  background:none; border:0; cursor:pointer; color:var(--faint); padding:.25rem;
  line-height:0; border-radius:8px; flex-shrink:0; transition:color .2s, background-color .2s;
}
.x:hover{color:var(--ink); background:var(--surface-2)}
.x svg{width:22px;height:22px}
.field{margin-bottom:1.15rem}
.field label{
  display:block; font-size:.82rem; font-weight:700; color:var(--ink-2);
  margin-bottom:.45rem; letter-spacing:-.005em;
}
.field label .opt{color:var(--faint); font-weight:500; text-transform:none; letter-spacing:0}
.field input,.field textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--ink);
  padding:.75rem .9rem; border:1px solid var(--line-2); border-radius:11px;
  background:#fff; transition:border-color .18s, box-shadow .18s;
}
.field textarea{resize:vertical; min-height:118px}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(59,130,246,.18);
}
.field input::placeholder,.field textarea::placeholder{color:#a8b4c4}
.modal .btn{width:100%; margin-top:.35rem}
.form-msg{margin-top:1rem; font-size:.92rem; text-align:center; font-weight:600}
.form-msg.ok{color:var(--ok)}
.form-msg.err{color:#dc2626}
.form-fine{
  margin-top:1.15rem; font-size:.8rem; color:var(--muted); text-align:center; line-height:1.55;
}
.form-fine a{font-size:inherit}
body.locked{overflow:hidden}

/* --- reveal on scroll --- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .reveal{opacity:1; transform:none}
}