/* ══════════════════════════════════════════════════════════════════
   Noribel.com — site stylesheet, built on the app design tokens (branch ui/janny)
   Bron: recovered-from-hosting/assets/nor-tokens.css, nor-topbar.css,
         nor-race-cards.css, nor-forms.css, nor-loading-overlay.css
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Officieel Noribel-palet */
  --noribel-sky:#8ec7ed;
  --noribel-blue:#42abe0;
  --noribel-marine:#1c6c9e;
  --noribel-night:#0b2233;

  --bg-page:#ffffff;
  --bg-subtle:#f0f5fb;
  --bg-card:#ffffff;
  --bg-card-muted:#f8fafd;

  --border:rgba(11,34,51,.09);
  --border-strong:rgba(11,34,51,.14);
  --border-solid:#e2e8f0;

  --text:#0f1222;
  --text-muted:#5c6178;
  --text-subtle:#85899e;

  --live:#10b981;
  --danger:#e11d48;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;

  --font:"Work Sans",system-ui,-apple-system,sans-serif;
  --font-display:"Archivo","Work Sans",system-ui,sans-serif;

  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --shadow-card:0 1px 2px rgba(11,34,51,.05),0 10px 26px rgba(11,34,51,.05);
  --shadow-card-hover:0 2px 4px rgba(11,34,51,.06),0 16px 36px rgba(28,108,158,.16);

  --brand-gradient:linear-gradient(140deg,#2a86bd 0%,#1c6c9e 50%,#134b70 100%);

  --topbar-h:4rem;
  --max:1200px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);font-size:16px;line-height:1.6;
  color:var(--text);background:var(--bg-page);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;line-height:1.15}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.5rem}
:focus-visible{outline:2px solid var(--noribel-blue);outline-offset:2px}


/* ══ MICRO-LABEL — de app-signatuur (0.63rem / 700 / .08em) ══════ */
.eyebrow{
  display:block;font-size:.63rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-subtle);
}
.eyebrow--marine{color:var(--noribel-marine)}
.eyebrow--onblue{color:rgba(255,255,255,.7)}

/* ══ BUTTONS ═════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.35rem;border:1px solid transparent;border-radius:var(--radius-sm);
  font-family:var(--font);font-size:.9rem;font-weight:600;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,box-shadow .16s;
}
.btn-primary{background:var(--noribel-marine);border-color:var(--noribel-marine);color:#fff}
.btn-primary:hover{background:#155a85;border-color:#155a85}
.btn-outline{background:#fff;border-color:var(--border-solid);color:var(--noribel-marine)}
.btn-outline:hover{background:var(--bg-subtle);border-color:var(--noribel-sky)}
.btn-onblue{background:#fff;border-color:#fff;color:var(--noribel-marine)}
.btn-onblue:hover{background:var(--noribel-sky);border-color:var(--noribel-sky);color:var(--noribel-night)}
/* donkere vulling i.p.v. een lichte: witte tekst haalt zo ruim de leesbaarheidsnorm,
   ook op de marine balk en het mobiele menu */
.btn-ghost-onblue{background:rgba(11,34,51,.24);border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost-onblue:hover{background:rgba(11,34,51,.38);border-color:rgba(255,255,255,.6)}
.btn-lg{padding:.88rem 1.7rem;font-size:.95rem}
.btn-sm{padding:.5rem 1rem;font-size:.82rem}
.btn-full{width:100%}

/* ══ TOPBAR — de marine bar uit nor-topbar.css ═══════════════════ */
.topbar{
  position:sticky;top:0;z-index:60;min-height:var(--topbar-h);
  background:var(--noribel-marine);color:#fff;padding:0 1.1rem 0 1.5rem;
}
.topbar-inner{
  max-width:var(--max);margin:0 auto;height:var(--topbar-h);
  display:flex;align-items:center;gap:1.25rem;flex-wrap:nowrap;
}
.topbar-links a,.topbar-actions .btn,.lang-trigger{white-space:nowrap}
/* Log in, Book a demo en de taalknop: exact even hoog als de hamburger (2.4rem) */
.topbar-actions .btn,.lang-trigger{height:2.4rem;padding-top:0;padding-bottom:0}
.topbar-actions{flex:none}
.topbar-logo img{width:9.25rem;filter:brightness(0) invert(1)}
.topbar-links{display:flex;gap:1.6rem;list-style:none;margin-left:1.4rem}
.topbar-links a{
  font-size:.875rem;font-weight:500;color:rgba(255,255,255,.82);
  padding:.4rem 0;position:relative;transition:color .16s;
}
.topbar-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--noribel-sky);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease-out);
}
.topbar-links a:hover,.topbar-links a.is-active{color:#fff}
.topbar-links a:hover::after,.topbar-links a.is-active::after{transform:scaleX(1)}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:.7rem}

/* taalkiezer: dropdown, hard rechts */
.lang{position:relative;margin-left:.15rem}
.lang-trigger{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.5rem .7rem;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);
  color:#fff;font-family:var(--font);font-size:.78rem;font-weight:700;
  letter-spacing:.04em;cursor:pointer;transition:background .16s,border-color .16s;
}
.lang-trigger:hover{background:rgba(255,255,255,.22)}
.lang-trigger svg{transition:transform .18s var(--ease-out)}
.lang.is-open .lang-trigger svg{transform:rotate(180deg)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:7.5rem;z-index:70;padding:4px;
  background:#fff;border:1px solid var(--border-solid);border-radius:var(--radius-sm);
  box-shadow:0 1px 2px rgba(11,34,51,.06),0 12px 32px rgba(11,34,51,.18);display:none;
}
.lang.is-open .lang-menu{display:block}
.lang-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.5rem .65rem;border-radius:7px;font-size:.84rem;font-weight:600;color:var(--text);
  transition:background .16s,color .16s;
}
.lang-menu a:hover{background:var(--bg-subtle);color:var(--noribel-marine)}
.lang-menu a[aria-current="true"]{color:var(--noribel-marine)}
.lang-menu a span{font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle)}

/* mobiel menu */
.mnav-toggle{position:absolute;opacity:0;pointer-events:none}
.mnav-btn{
  display:none;width:2.4rem;height:2.4rem;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);
  cursor:pointer;place-items:center;gap:4px;align-content:center;
}
.mnav-btn span{display:block;width:16px;height:2px;border-radius:2px;background:#fff}
.mnav-panel{display:none;background:var(--noribel-marine);border-top:1px solid rgba(255,255,255,.14)}
.mnav-panel ul{list-style:none;padding:.5rem 1.5rem 1.25rem;display:grid;gap:.15rem}
/* alleen de menu-links: buiten ul staan de twee knoppen, die houden hun eigen stijl */
.mnav-panel ul a{display:block;padding:.7rem 0;color:rgba(255,255,255,.86);font-size:1rem;font-weight:500;border-bottom:1px solid rgba(255,255,255,.1)}
.mnav-panel ul a:hover{color:#fff}
.mnav-panel .mnav-cta{display:flex;gap:.6rem;padding:1rem 1.5rem 1.4rem;flex-wrap:wrap}
.mnav-panel .mnav-cta .btn{flex:1 1 auto}

/* ── segmented pill toggle — de .view-toggle uit de app ────────── */
.view-toggle{
  display:inline-flex;padding:3px;gap:2px;
  background:var(--bg-subtle);border:1px solid var(--border-solid);border-radius:999px;
}
.view-toggle input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.view-toggle label{
  display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  font-size:.78rem;font-weight:600;color:var(--text-muted);cursor:pointer;user-select:none;
  transition:background .16s,color .16s,box-shadow .16s;
}
.view-toggle label:hover{color:var(--noribel-marine)}
.view-toggle input:checked+label{
  background:#fff;color:var(--noribel-marine);
  box-shadow:0 1px 2px rgba(11,34,51,.06),0 2px 8px rgba(11,34,51,.08);
}

/* ══ HOME-HERO (met film) ════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;color:#fff;isolation:isolate;display:flex;align-items:center;min-height:min(82vh,780px)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-veil{position:absolute;inset:0;z-index:-1;background:var(--brand-gradient);opacity:.9}
.hero-veil::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,34,51,.35) 0%,rgba(11,34,51,0) 38%,rgba(11,34,51,.55) 100%);
}
.hero-body{width:100%;max-width:var(--max);margin:0 auto;padding:4.5rem 1.5rem 3.5rem}
.hero-pill{
  display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(142,199,237,.5);
  font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.hero-pill i{width:6px;height:6px;border-radius:50%;background:var(--noribel-sky);display:block}
.hero h1{margin:1.4rem 0 0;font-size:clamp(2.6rem,6vw,4.6rem);font-weight:800;letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:var(--noribel-sky)}
.hero-sub{margin:1.35rem 0 0;max-width:34rem;font-size:1.05rem;line-height:1.65;color:rgba(255,255,255,.84)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero-strip{display:flex;flex-wrap:wrap;gap:2.2rem;margin-top:3.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18)}
.hero-strip div span{display:block;color:rgba(255,255,255,.62)}
.hero-strip div strong{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:-.01em}

/* ══ PAGINA-HERO (binnenpagina's) ════════════════════════════════ */
.phero{position:relative;background:var(--brand-gradient);color:#fff;overflow:hidden}
.phero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 420px at 82% -20%,rgba(142,199,237,.35),transparent 70%);
}
.phero-inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:4.25rem 1.5rem 4rem}
.phero h1{margin:.8rem 0 0;font-size:clamp(2.2rem,4.6vw,3.5rem);font-weight:800;letter-spacing:-.02em}
.phero h1 em{font-style:normal;color:var(--noribel-sky)}
.phero p{margin:1.1rem 0 0;max-width:38rem;color:rgba(255,255,255,.84);font-size:1.02rem}
.phero .hero-ctas{margin-top:1.8rem}
.phero-stats{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18)}
.phero-stats div strong{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:800;letter-spacing:-.02em}

/* ══ MARQUEE ═════════════════════════════════════════════════════ */
.marquee{background:var(--bg-subtle);border-bottom:1px solid var(--border);overflow:hidden}
.marquee-track{display:flex;gap:2.6rem;padding:.85rem 0;white-space:nowrap;animation:slide 40s linear infinite}
.marquee-track span{
  font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-subtle);display:inline-flex;align-items:center;gap:2.6rem;
}
.marquee-track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--noribel-sky)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ══ SECTIES ═════════════════════════════════════════════════════ */
section.band{padding:5.5rem 0}
.band--subtle{background:var(--bg-subtle)}
.band--night{background:var(--noribel-night);color:#fff}
.band--tight{padding:4rem 0}
.sec-hdr{max-width:44rem;margin:0 0 2.75rem}
.sec-hdr--center{margin-inline:auto;text-align:center}
.sec-hdr h2{margin:.7rem 0 0;font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:700}
.sec-hdr h2 em{font-style:normal;color:var(--noribel-marine)}
.sec-hdr p{margin:.9rem 0 0;color:var(--text-muted);font-size:1rem}
.band--night .sec-hdr h2 em{color:var(--noribel-sky)}
.band--night .sec-hdr p{color:rgba(255,255,255,.7)}

/* ══ CARD GRID — het racekaart-raster uit nor-race-cards.css ═════ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:20px}
.card-grid--wide{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.card{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:var(--bg-card);border:1px solid var(--border-solid);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  transition:transform .16s var(--ease-out),box-shadow .16s,border-color .16s;
}
.card:hover{transform:translateY(-3px);border-color:var(--noribel-sky);box-shadow:var(--shadow-card-hover)}
.card-media{aspect-ratio:16/10;background:var(--bg-card-muted);overflow:hidden;position:relative}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{padding:18px 18px 16px;display:flex;flex-direction:column;flex:1}
.card-body h3{margin:.55rem 0 0;font-size:1.1rem;font-weight:700}
.card-body p{margin:.55rem 0 0;font-size:.9rem;color:var(--text-muted);flex:1}
.card-foot{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:.82rem;font-weight:600;color:var(--noribel-marine);
}
.card-foot svg{transition:transform .16s var(--ease-out)}
.card:hover .card-foot svg{transform:translateX(3px)}
.card-foot--muted{color:var(--text-subtle)}

.badge{
  display:inline-flex;align-items:center;gap:5px;padding:.3rem .6rem;border-radius:999px;
  background:rgba(255,255,255,.94);border:1px solid var(--border-solid);
  font-size:.63rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);
}
.badge--float{position:absolute;top:12px;right:12px;z-index:2}
.badge--live{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3);color:#047857}
.badge--marine{background:var(--noribel-marine);border-color:var(--noribel-marine);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  padding:.28rem .55rem;border-radius:7px;background:var(--bg-subtle);border:1px solid var(--border-solid);
  font-size:.7rem;font-weight:600;color:var(--text-muted);
}

/* ══ SPLIT-SECTIE ════════════════════════════════════════════════ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.split--flip .split-figure{order:-1}
.split h2{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:700;margin-top:.7rem}
.split h2 em{font-style:normal;color:var(--noribel-marine)}
.split > div > p{margin-top:1rem;color:var(--text-muted)}
.split-figure{
  border:1px solid var(--border-solid);border-radius:var(--radius-lg);
  background:var(--bg-card);padding:10px;box-shadow:var(--shadow-card);
}
.split-figure img{border-radius:12px}
.checks{list-style:none;margin:1.6rem 0 0;display:grid;gap:.85rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-size:.94rem;color:var(--text-muted)}
.checks b{color:var(--text);font-weight:600}
.check-dot{
  flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:rgba(142,199,237,.18);color:var(--noribel-marine);margin-top:1px;
}

/* ══ STAPPEN ═════════════════════════════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.step{
  background:var(--bg-card);border:1px solid var(--border-solid);border-radius:var(--radius-md);
  padding:24px 22px;box-shadow:var(--shadow-card);
  transition:transform .16s var(--ease-out),box-shadow .16s,border-color .16s;
}
.step:hover{transform:translateY(-3px);border-color:var(--noribel-sky);box-shadow:var(--shadow-card-hover)}
.step-num{
  width:44px;height:44px;border-radius:var(--radius-sm);display:grid;place-items:center;
  background:rgba(142,199,237,.18);color:var(--noribel-marine);
  font-family:var(--font-display);font-size:1.1rem;font-weight:800;
}
.step h3{margin:1.1rem 0 0;font-size:1.05rem;font-weight:700}
.step p{margin:.5rem 0 0;font-size:.9rem;color:var(--text-muted)}

/* ══ STATS ═══════════════════════════════════════════════════════ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.stat{
  background:var(--bg-card);border:1px solid var(--border-solid);border-radius:var(--radius-md);
  padding:22px;box-shadow:var(--shadow-card);
}
.stat strong{display:block;font-family:var(--font-display);font-size:2.1rem;font-weight:800;letter-spacing:-.02em;color:var(--noribel-marine)}
.stat span{display:block;margin-top:.3rem}
.band--night .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
.band--night .stat strong{color:var(--noribel-sky)}
.band--night .stat span{color:rgba(255,255,255,.6)}

/* ══ QUOTE ═══════════════════════════════════════════════════════ */
.quote{
  background:var(--bg-card);border:1px solid var(--border-solid);border-left:4px solid var(--noribel-sky);
  border-radius:var(--radius-md);padding:28px 30px;box-shadow:var(--shadow-card);max-width:52rem;
}
.quote p{font-family:var(--font-display);font-size:1.25rem;font-weight:600;line-height:1.45;letter-spacing:-.01em}
.quote footer{margin-top:1rem;display:flex;align-items:center;gap:.6rem;color:var(--text-muted);font-size:.88rem}
.quote footer b{color:var(--text)}

/* ══ TIJDLIJN ════════════════════════════════════════════════════ */
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;position:relative}
.tl-item{
  background:var(--bg-card);border:1px solid var(--border-solid);border-radius:var(--radius-md);
  padding:22px 20px;box-shadow:var(--shadow-card);position:relative;
}
.tl-item::before{
  content:"";position:absolute;top:-1px;left:20px;right:20px;height:3px;border-radius:0 0 3px 3px;
  background:var(--noribel-sky);
}
.tl-year{font-family:var(--font-display);font-size:1.35rem;font-weight:800;color:var(--noribel-marine);letter-spacing:-.02em}
.tl-item h3{margin:.55rem 0 0;font-size:1rem;font-weight:700}
.tl-item p{margin:.45rem 0 0;font-size:.88rem;color:var(--text-muted)}

/* ══ VIDEOKAART (tutorials) ══════════════════════════════════════ */
.play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(11,34,51,.05),rgba(11,34,51,.42));
  transition:background .16s;
}
.card:hover .play{background:linear-gradient(180deg,rgba(11,34,51,.1),rgba(28,108,158,.5))}
.play i{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--noribel-marine);
  box-shadow:0 8px 24px rgba(11,34,51,.28);transition:transform .16s var(--ease-out);
}
.card:hover .play i{transform:scale(1.08)}

/* ══ VERGELIJKINGSTABEL ══════════════════════════════════════════ */
.cmp-wrap{overflow-x:auto;border:1px solid var(--border-solid);border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-card)}
table.cmp{width:100%;border-collapse:collapse;min-width:640px}
table.cmp th,table.cmp td{padding:14px 18px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--border)}
table.cmp thead th{
  font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-subtle);background:var(--bg-card-muted);
}
table.cmp thead th:last-child{color:var(--noribel-marine)}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp td:first-child{font-weight:600}
table.cmp td:last-child{color:var(--noribel-marine);font-weight:600}
table.cmp td.muted{color:var(--text-subtle)}

/* ══ PRICING ═════════════════════════════════════════════════════ */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;align-items:stretch}
.price-card{
  position:relative;background:var(--bg-card);border:1px solid var(--border-solid);
  border-radius:var(--radius-md);padding:26px 24px;box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
  transition:transform .16s var(--ease-out),box-shadow .16s,border-color .16s;
}
.price-card:hover{transform:translateY(-3px);border-color:var(--noribel-sky);box-shadow:var(--shadow-card-hover)}
.price-card--featured{border-color:var(--noribel-marine);box-shadow:0 2px 4px rgba(11,34,51,.06),0 18px 40px rgba(28,108,158,.18)}
.price-flag{
  position:absolute;top:-11px;left:24px;padding:.25rem .7rem;border-radius:999px;
  background:var(--noribel-marine);color:#fff;
  font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.price-card h3{font-size:1.15rem;font-weight:700}
.price-card > p{margin:.4rem 0 0;font-size:.88rem;color:var(--text-muted);min-height:2.6rem}
.price-amount{
  margin:1.1rem 0 0;font-family:var(--font-display);font-weight:800;font-size:2.5rem;
  letter-spacing:-.02em;color:var(--text);display:flex;align-items:baseline;gap:.25rem;
}
.price-amount small{font-family:var(--font);font-size:.85rem;font-weight:600;color:var(--text-subtle)}
.price-note{font-size:.78rem;color:var(--text-subtle);margin-top:.25rem;min-height:1.2rem}
.price-list{list-style:none;margin:1.4rem 0 0;padding-top:16px;border-top:1px solid var(--border);display:grid;gap:.6rem;flex:1}
.price-list li{display:flex;gap:.6rem;font-size:.87rem;color:var(--text-muted)}
.price-list li.off{color:var(--text-subtle);opacity:.75}
.price-list svg{flex:none;margin-top:5px;color:var(--noribel-blue)}
.price-list li.off svg{color:var(--text-subtle)}
.price-card .btn{margin-top:1.5rem}

/* ══ DEMO-BAND ═══════════════════════════════════════════════════ */
.demo{background:var(--brand-gradient);color:#fff;padding:5rem 0}
.demo-inner{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.demo h2{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;margin-top:.7rem}
.demo p{margin-top:1rem;color:rgba(255,255,255,.82);font-size:1rem}
.demo-meta{margin-top:2rem;display:flex;gap:2.2rem;flex-wrap:wrap}
.demo-meta strong{font-family:var(--font-display);font-size:1.05rem;font-weight:700}
.demo-form{background:#fff;border-radius:var(--radius-lg);padding:26px;box-shadow:0 24px 60px rgba(11,34,51,.28);color:var(--text)}
.field{margin-bottom:.9rem}
.field label{display:block;font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;padding:.72rem .85rem;font-family:var(--font);font-size:.92rem;color:var(--text);
  background:#f8fafc;border:1px solid var(--border-solid);border-radius:var(--radius-sm);
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.field textarea{min-height:5.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;border-color:var(--noribel-blue);box-shadow:0 0 0 3px rgba(66,171,224,.18);
}

/* ══ CTA-BAND ════════════════════════════════════════════════════ */
.cta{background:var(--bg-subtle);border-top:1px solid var(--border);padding:4.5rem 0}
.cta-inner{
  background:var(--brand-gradient);color:#fff;border-radius:var(--radius-lg);
  padding:3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  box-shadow:0 18px 44px rgba(28,108,158,.24);
}
.cta-inner h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin-top:.6rem}
.cta-inner p{margin-top:.7rem;color:rgba(255,255,255,.82);max-width:34rem}

/* ══ FOOTER ══════════════════════════════════════════════════════ */
.footer{background:var(--noribel-night);color:rgba(255,255,255,.62);padding:4rem 0 2rem;font-size:.88rem}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
.footer img{width:9.5rem;filter:brightness(0) invert(1)}
.footer h4{color:#fff;font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem;font-family:var(--font)}
.footer ul{list-style:none;display:grid;gap:.6rem}
.footer a:hover{color:var(--noribel-sky)}
.footer-bottom{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;
}

/* ══ STYLEGUIDE ══════════════════════════════════════════════════ */
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:1.5rem}
.sg-swatch{border:1px solid var(--border-solid);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.sg-chip{height:74px}
.sg-swatch div:last-child{padding:10px 12px}
.sg-swatch b{display:block;font-size:.82rem;font-weight:600}
.sg-swatch code{font-size:.72rem;color:var(--text-subtle);font-family:ui-monospace,monospace}
.sg-type{display:grid;gap:1rem;margin-top:1.5rem}
.sg-row{display:grid;grid-template-columns:170px 1fr;gap:1.5rem;align-items:baseline;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.sg-row > span:first-child{font-size:.72rem;color:var(--text-subtle);font-family:ui-monospace,monospace}
.sg-bits{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:1.5rem}

/* Topbar: eerst compacter, dan hamburger — voordat er iets kan afbreken */
@media (max-width:1240px){
  .topbar-links{gap:1.1rem;margin-left:.9rem}
  .topbar-links a{font-size:.84rem}
  .topbar-actions{gap:.5rem}
}
@media (max-width:1100px){
  .topbar{padding:0 .9rem 0 1.1rem}
  .topbar-logo img{width:7.5rem}
  .topbar-links{display:none}
  .topbar-actions .btn-ghost-onblue,.topbar-actions .btn-onblue{display:none}
  .mnav-btn{display:grid}
  .mnav-toggle:checked ~ .mnav-panel{display:block}
}
@media (max-width:900px){
  .split,.demo-inner{grid-template-columns:1fr;gap:2.5rem}
  .split--flip .split-figure{order:0}
  .footer-top{grid-template-columns:1fr 1fr}
  .hero-body{padding:4rem 1.5rem 3rem}
  section.band{padding:4rem 0}
  .cta-inner{padding:2rem}
  .sg-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ══ HERO VIDEO POSTER ═══════════════════════════════════════════ */
.hero-media{background:var(--noribel-night) center/cover no-repeat}

/* ══ DEMO FORM (homepage) ════════════════════════════════════════ */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
.req{color:var(--danger)}
.field-check{display:flex;gap:.6rem;align-items:flex-start;margin:.2rem 0 1.1rem;font-size:.82rem;color:var(--text-muted)}
.field-check input{margin-top:.25rem;accent-color:var(--noribel-marine);flex:none}
.field-check a{color:var(--noribel-marine);text-decoration:underline}
.form-success{display:none;text-align:center;padding:1.5rem .5rem}
.form-success .success-icon{
  width:52px;height:52px;border-radius:50%;margin:0 auto 1rem;display:grid;place-items:center;
  background:rgba(16,185,129,.12);color:#047857;
}
.form-success h4{font-size:1.15rem;font-weight:700}
.form-success p{margin-top:.5rem;color:var(--text-muted);font-size:.92rem}
.demo-benefits{list-style:none;margin:1.6rem 0 0;display:grid;gap:.7rem}
.demo-benefits li{display:flex;gap:.7rem;align-items:flex-start;color:rgba(255,255,255,.88);font-size:.95rem}
.demo-benefits .check-dot{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}

/* ══ VIDEO BLOCK (features · in action) ═════════════════════════ */
.video-frame{
  position:relative;border:1px solid var(--border-solid);border-radius:var(--radius-lg);
  background:var(--noribel-night);padding:10px;box-shadow:var(--shadow-card);
}
.video-frame video{width:100%;display:block;border-radius:12px;aspect-ratio:16/9;object-fit:cover;background:#000}
.video-frame .play{inset:10px;border-radius:12px;cursor:pointer}
.video-frame.is-playing .play{display:none}

/* ══ VIDEO MODAL (tutorials) ═════════════════════════════════════ */
.vmodal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:1.5rem}
.vmodal.is-open{display:flex}
.vmodal-backdrop{position:absolute;inset:0;background:rgba(11,34,51,.82);backdrop-filter:blur(6px)}
.vmodal-panel{
  position:relative;width:min(1100px,100%);background:#000;border-radius:var(--radius-md);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.vmodal-panel video{width:100%;display:block;max-height:82vh}
.vmodal-title{
  position:absolute;left:0;right:0;top:0;padding:.9rem 3.5rem .9rem 1.1rem;color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  background:linear-gradient(180deg,rgba(11,34,51,.75),rgba(11,34,51,0));pointer-events:none;
}
.vmodal-close{
  position:absolute;top:.6rem;right:.6rem;width:2.4rem;height:2.4rem;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.35);background:rgba(11,34,51,.6);color:#fff;font-size:1.3rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;
}
.vmodal-close:hover{background:rgba(28,108,158,.9)}
.card--video{cursor:pointer}

/* ══ LEGAL PAGES ═════════════════════════════════════════════════ */
.legal{max-width:52rem}
.legal h2{font-size:1.3rem;font-weight:700;margin:2.4rem 0 .8rem}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--text-muted);font-size:.95rem;margin-bottom:.8rem}
.legal ul{padding-left:1.2rem;margin-bottom:.8rem}
.legal a{color:var(--noribel-marine);text-decoration:underline}
.legal strong{color:var(--text)}
.legal-contact{
  margin-top:2.5rem;padding:1.2rem 1.4rem;background:var(--bg-subtle);border:1px solid var(--border-solid);
  border-radius:var(--radius-md);
}
.legal-contact p{margin:0}

/* ══ 404 ═════════════════════════════════════════════════════════ */
.nf{min-height:calc(100vh - var(--topbar-h));display:grid;place-items:center;padding:4rem 1.5rem;text-align:center}
.nf-code{font-family:var(--font-display);font-size:clamp(5rem,16vw,9rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--noribel-sky)}
.nf h1{margin-top:.4rem;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800}
.nf h1 em{font-style:normal;color:var(--noribel-marine)}
.nf p{margin:1rem auto 0;max-width:30rem;color:var(--text-muted)}

/* ══ FOOTER SOCIALS ══════════════════════════════════════════════ */
.footer-social{display:flex;gap:.6rem;margin-top:1.4rem}
.footer-social a{
  width:2.3rem;height:2.3rem;border-radius:var(--radius-sm);display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);
  transition:background .16s,color .16s,border-color .16s;
}
.footer-social a:hover{background:var(--noribel-marine);border-color:var(--noribel-marine);color:#fff}
.footer-social svg{width:16px;height:16px;fill:currentColor}