/*
Theme Name: promptsite.nl
Theme URI: https://promptsite.nl
Author: promptsite.nl
Description: Hardcoded classic PHP theme for promptsite.nl — AI-powered merkidentiteit voor Nederlandse ondernemers.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: promptsite
*/

/* ============================================================
   Design tokens — ported 1:1 from globals.css (light theme)
   ============================================================ */
:root {
  --background: #ffffff;
  --foreground: #0f1419;
  --card: #f7f8f8;
  --card-foreground: #0f1419;
  --primary: #1e9df1;
  --primary-foreground: #ffffff;
  --muted: #e5e5e6;
  --muted-foreground: #5b6570;
  --accent: #e3ecf6;
  --accent-foreground: #1e9df1;
  --border: #e1eaef;
  --radius: 1.3rem;
  --radius-sm: calc(var(--radius) - 8px);
  --radius-md: calc(var(--radius) - 4px);
  --radius-lg: var(--radius);
  --radius-pill: 9999px;
  --container: 1200px;
  --green: #16a34a;
  --amber: #f59e0b;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   Layout helpers
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px)  { .container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container { padding-inline: 2rem; } }

.section { padding-block: 6rem; }
.section--tight { padding-block: 3rem; }
.section--muted { background: color-mix(in srgb, var(--muted) 30%, transparent); }
.section--muted-soft { background: color-mix(in srgb, var(--muted) 20%, transparent); }
.section--dark { background: var(--foreground); color: var(--background); }
@media (max-width: 640px) { .section { padding-block: 4rem; } }

.text-center { text-align: center; }
.measure { max-width: 42rem; margin-inline: auto; }
.measure-sm { max-width: 36rem; margin-inline: auto; }
.measure-lg { max-width: 56rem; margin-inline: auto; }

.eyebrow, .badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem; font-weight: 500;
  color: var(--muted-foreground);
  background: var(--background);
}
.badge--solid { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.badge--dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

.section-head { margin-bottom: 4rem; }
.section-head h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800; margin-block: 0.75rem 1rem;
}
.section-head p { font-size: 1.15rem; color: var(--muted-foreground); }

.text-primary { color: var(--primary); }
.text-muted { color: var(--muted-foreground); }
.underline-hover:hover { text-decoration: underline; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--radius-md);
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem; font-weight: 600;
  border: 1px solid transparent;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
  white-space: nowrap;
}
.btn svg { width: 1rem; height: 1rem; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 88%, black); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn-outline:hover { border-color: color-mix(in srgb, var(--foreground) 40%, transparent); }
.btn-ghost { background: transparent; color: var(--muted-foreground); }
.btn-ghost:hover { background: var(--accent); color: var(--foreground); }
.btn-secondary { background: var(--background); color: var(--foreground); }
.btn-secondary:hover { background: color-mix(in srgb, var(--background) 90%, black); }
.btn-lg { padding: 0.85rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 0.85rem; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn-on-dark { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; border: 1px solid color-mix(in srgb, #fff 30%, transparent); }
.btn-on-dark:hover { background: color-mix(in srgb, #fff 20%, transparent); }

/* ============================================================
   Cards / generic surfaces
   ============================================================ */
.card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.card--plain { background: var(--background); }
.card--hover { transition: box-shadow .2s, border-color .2s, transform .2s; }
.card--hover:hover { box-shadow: 0 10px 30px -12px rgba(15,20,25,.15); }
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}
.icon-tile svg { width: 1.25rem; height: 1.25rem; }
.icon-tile--lg { width: 3rem; height: 3rem; }

/* Grids */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .grid-2, .grid-4 { grid-template-columns: 1fr; } }

.check { color: var(--primary); flex: none; width: 1rem; height: 1rem; margin-top: .15rem; }
.feature-list li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; margin-bottom: 0.6rem; }

/* ============================================================
   Header / navbar
   Not sticky. Dark background matching the hero so the header
   reads as an extension of the hero, not chrome sitting on it.
   Scrolls away with the page like any other content.
   ============================================================ */
.site-header {
  position: relative;
  z-index: 100;
  background: #060814;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 4rem;
}

/* Brand: cyan pill on dark */
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--radius-sm);
  background: var(--primary); color: #fff;
  font-weight: 900; font-size: 0.85rem; letter-spacing: -.05em;
  transition: transform .2s;
}
.brand:hover .brand__mark { transform: scale(1.05); }
.brand__tld {
  font-size: 1.1rem;
  color: #fff;
}

/* Nav links: white with 78% opacity, full white on hover */
.nav__links { display: none; align-items: center; }
@media (min-width: 1024px) { .nav__links { display: flex; } }
.nav__list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.5rem 0.9rem; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  font-family: inherit; line-height: 1.4;
  transition: color .2s ease, background .2s ease;
}
.nav__trigger { background: transparent; border: none; cursor: pointer; }
.nav__link:hover, .nav__trigger:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.nav__link.is-active { color: #fff; }
.nav__link svg { width: 0.9rem; height: 0.9rem; transition: transform .2s; }
.nav__item:hover .nav__link svg,
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 0.5rem; width: 18rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 110;
}
.nav__item:hover .nav__dropdown,
.nav__item.is-open .nav__dropdown,
.nav__item:focus-within .nav__dropdown,
.nav__dropdown:hover {
  opacity: 1;
  pointer-events: auto;
}
.nav__dropdown-inner {
  border: 1px solid var(--border); background: var(--background);
  border-radius: var(--radius-md); box-shadow: 0 12px 40px -12px rgba(15,20,25,.2);
  padding: 0.5rem;
}
.nav__dropdown ul { list-style: none; margin: 0; padding: 0; }
.nav__dropdown a { display: flex; flex-direction: column; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); }
.nav__dropdown a:hover { background: var(--accent); }
.nav__dropdown a span { font-size: 0.9rem; font-weight: 500; }
.nav__dropdown a small { font-size: 0.78rem; color: var(--muted-foreground); }

.nav__cta { display: none; align-items: center; gap: 0.5rem; }
@media (min-width: 1024px) { .nav__cta { display: flex; } }

/* Header CTAs: inverted on the dark strip */
.site-header .nav__cta .btn-ghost { color: #fff; background: transparent; }
.site-header .nav__cta .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.site-header .nav__cta .btn-primary {
  background: #fff;
  color: var(--foreground);
  border-color: #fff;
  transition: background .2s ease, transform .18s ease, box-shadow .22s ease;
}
.site-header .nav__cta .btn-primary:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.4);
}

.nav__toggle {
  display: inline-flex; background: transparent; border: none; padding: 0.5rem;
  color: #fff; cursor: pointer;
}
@media (min-width: 1024px) { .nav__toggle { display: none; } }
.nav__toggle svg { width: 1.4rem; height: 1.4rem; }

/* Mobile drawer */
.mobile-nav[hidden] { display: none; }
.mobile-nav { display: block; }
.mobile-nav__backdrop { position: fixed; inset: 0; background: rgba(15,20,25,.4); z-index: 60; opacity: 0; transition: opacity .25s ease; }
.mobile-nav.open .mobile-nav__backdrop { opacity: 1; }
.mobile-nav__panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(380px, 100%); background: var(--background);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px -20px rgba(15,20,25,.3);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.mobile-nav.open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; border-bottom: 1px solid var(--border); }
.mobile-nav__body { flex: 1; overflow-y: auto; padding: 1rem; }
.mobile-nav__body a, .mobile-nav__group > button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 500; color: var(--foreground);
  background: transparent; border: none; text-align: left;
}
.mobile-nav__body a:hover, .mobile-nav__group > button:hover { background: var(--accent); }
.mobile-nav__sub { padding-left: 1rem; display: none; }
.mobile-nav__group.open .mobile-nav__sub { display: block; }
.mobile-nav__group > button svg { width: 1rem; height: 1rem; transition: transform .2s; }
.mobile-nav__group.open > button svg { transform: rotate(180deg); }
.mobile-nav__sub a { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.mobile-nav__sub a small { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 400; }
.mobile-nav__foot { border-top: 1px solid var(--border); padding: 1.25rem; display: grid; gap: 0.75rem; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; overflow: hidden; padding-block: 5rem 7rem; }
@media (min-width: 640px) { .hero { padding-block: 7rem 9rem; } }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__dots {
  position: absolute; inset: 0; opacity: .4;
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}
.hero__glow {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  filter: blur(80px);
}
.hero__inner { position: relative; }
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 800; line-height: 1.05; margin-bottom: 1.5rem;
}
.hero h1 .accent {
  position: relative; display: inline-block; margin-inline: .5rem;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, transparent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 .accent svg { position: absolute; left: 0; bottom: -0.5rem; width: 100%; color: color-mix(in srgb, var(--primary) 40%, transparent); }
.hero__sub { font-size: 1.2rem; color: var(--muted-foreground); margin-bottom: 3rem; }
.hero__sub strong { color: var(--foreground); }

.prompt-box {
  border: 2px solid var(--border); background: color-mix(in srgb, var(--background) 80%, transparent);
  border-radius: var(--radius-lg); box-shadow: 0 25px 50px -12px rgba(30,157,241,.08);
  text-align: left; margin-inline: auto; max-width: 42rem;
}
.prompt-box:focus-within { border-color: var(--primary); }
.prompt-box__row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; }
.prompt-box textarea {
  flex: 1; resize: none; border: none; background: transparent;
  font: inherit; font-size: 0.9rem; line-height: 1.6; color: var(--foreground);
}
.prompt-box textarea:focus { outline: none; }
.prompt-box textarea::placeholder { color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); }
.prompt-box__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0 1rem 1rem; }
.prompt-box .icon-tile { width: 2rem; height: 2rem; margin-top: 0.15rem; }
.prompt-box .icon-tile svg { width: 1rem; height: 1rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.75rem; }
.chip {
  border: 1px solid var(--border); background: color-mix(in srgb, var(--background) 60%, transparent);
  border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; font-size: 0.78rem; color: var(--muted-foreground);
}
.chip:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 40%, transparent); }

.trust { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-top: 2rem; font-size: 0.9rem; color: var(--muted-foreground); }
.trust > div { display: flex; align-items: center; gap: 0.4rem; }
.trust svg { width: 0.9rem; height: 0.9rem; }
.trust .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

/* Hero showcase */
.showcase { margin-top: 5rem; max-width: 56rem; margin-inline: auto; position: relative; }
.showcase__glow { position: absolute; top: -1.5rem; left: 50%; transform: translateX(-50%); width: 75%; height: 6rem; background: color-mix(in srgb, var(--primary) 20%, transparent); filter: blur(60px); border-radius: 50%; }
.showcase__frame { position: relative; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 60%, transparent); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(15,20,25,.25); }
.showcase__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.showcase__cell { padding: 1.5rem; }
.showcase__cell + .showcase__cell { border-left: 1px solid var(--border); }
.showcase__label { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); margin-bottom: 0.75rem; }
.showcase__foot { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 30%, transparent); padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--muted-foreground); }
.sq { aspect-ratio: 1; border-radius: var(--radius-md); }
@media (max-width: 640px) { .showcase__grid { grid-template-columns: 1fr; } .showcase__cell + .showcase__cell { border-left: none; border-top: 1px solid var(--border); } }

/* ============================================================
   Social proof bar + marquee
   ============================================================ */
.proofbar { border-block: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 30%, transparent); padding-block: 1.25rem; }
.proofbar__inner { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; }
@media (min-width: 640px) { .proofbar__inner { flex-direction: row; } }
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 1rem; height: 1rem; fill: var(--amber); color: var(--amber); }
.marquee { position: relative; overflow: hidden; flex: 1; max-width: 36rem; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2rem; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--muted) 30%, var(--background)), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, color-mix(in srgb, var(--muted) 30%, var(--background)), transparent); }
.marquee__track { display: flex; gap: 0.75rem; width: max-content; animation: marquee 40s linear infinite; }
.marquee__track span { flex: none; border: 1px solid var(--border); background: var(--background); border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; font-size: 0.78rem; color: var(--muted-foreground); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

.logo-row { padding-block: 1rem 3rem; }
.logo-row p { text-align: center; font-size: 0.9rem; font-weight: 500; color: var(--muted-foreground); margin-bottom: 2rem; }
.logo-row .marquee { max-width: none; }
.logo-row .marquee::before { background: linear-gradient(90deg, var(--background), transparent); width: 4rem; }
.logo-row .marquee::after { background: linear-gradient(-90deg, var(--background), transparent); width: 4rem; }
.logo-row .marquee__track span { height: 2.5rem; display: inline-flex; align-items: center; padding-inline: 1.5rem; background: var(--card); font-weight: 500; font-size: 0.9rem; }

/* ============================================================
   Numbered / step markers
   ============================================================ */
.step-num { font-size: 2.5rem; font-weight: 900; line-height: 1; color: color-mix(in srgb, var(--primary) 15%, transparent); }

/* ============================================================
   Dream / before-after
   ============================================================ */
.ba { border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-lg); overflow: hidden; }
.ba__before { padding: 1rem 1.25rem; background: color-mix(in srgb, var(--muted) 30%, transparent); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted-foreground); }
.ba__before .txt { text-decoration: line-through; }
.ba__after { padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 500; }
.ba__after .mark { color: var(--primary); }

.story .who { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex: none; }
.story blockquote { font-size: 0.9rem; color: var(--muted-foreground); margin: 0 0 1rem; line-height: 1.6; }
.story__result { border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent); background: color-mix(in srgb, var(--primary) 5%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-size: 0.78rem; font-weight: 600; color: var(--primary); }

/* ============================================================
   Testimonials (masonry-ish)
   ============================================================ */
.masonry { columns: 3; column-gap: 1.5rem; }
@media (max-width: 1024px) { .masonry { columns: 2; } }
@media (max-width: 640px)  { .masonry { columns: 1; } }
.masonry .card { break-inside: avoid; margin-bottom: 1.25rem; background: var(--background); }
.t-head { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
.t-head .name { font-size: 0.9rem; font-weight: 600; }
.t-head .role { font-size: 0.78rem; color: var(--muted-foreground); }

/* ============================================================
   Pricing
   ============================================================ */
.plan { position: relative; display: flex; flex-direction: column; }
.plan--popular { border-color: color-mix(in srgb, var(--primary) 50%, transparent); box-shadow: 0 25px 50px -12px rgba(30,157,241,.15); }
.plan__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(30,157,241,.5); }
.plan__badge svg { width: .9rem; height: .9rem; }
.plan__price { display: flex; align-items: baseline; gap: 0.25rem; }
.plan__price .amt { font-size: 2rem; font-weight: 800; }
.plan__meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.5rem; }
.plan__meta svg { width: 0.85rem; height: 0.85rem; }
.plan ul.feature-list { flex: 1; }
.plan ul.feature-list li.plus { color: var(--primary); font-weight: 600; }

.toggle { display: inline-flex; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.25rem; }
.toggle button { border: none; background: transparent; padding: 0.4rem 1.25rem; border-radius: var(--radius-pill); font-size: 0.85rem; color: var(--muted-foreground); }
.toggle button.active { background: var(--foreground); color: var(--background); }

.pack { border: 1px solid var(--border); background: var(--background); border-radius: var(--radius-md); padding: 1rem; transition: box-shadow .2s, border-color .2s; }
.pack:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); box-shadow: 0 6px 20px -10px rgba(15,20,25,.15); }
.pack .n { font-size: 1.5rem; font-weight: 800; }

/* ============================================================
   FAQ (native details/summary)
   ============================================================ */
.faq { display: grid; gap: 0.75rem; max-width: 48rem; margin-inline: auto; }
.faq details { border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-md); overflow: hidden; }
.faq summary { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; font-weight: 500; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: color-mix(in srgb, var(--muted) 30%, transparent); }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq__q-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); flex: none; }
.faq__q-icon svg { width: 1rem; height: 1rem; }
.faq__answer { padding: 0.9rem 1.25rem 1.1rem; color: var(--muted-foreground); font-size: 0.9rem; padding-left: 3.75rem; }

/* ============================================================
   Contact / forms
   ============================================================ */
.field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.4rem; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 0.9rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--background); color: var(--foreground);
  padding: 0.6rem 0.8rem;
}
.field input:focus, .field textarea:focus { outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 1px; border-color: var(--primary); }
.field textarea { resize: vertical; min-height: 8rem; }
.field + .field { margin-top: 1rem; }
.form-grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ============================================================
   CTA (dark) sections
   ============================================================ */
.cta-dark { position: relative; overflow: hidden; }
.cta-dark__glow { position: absolute; inset: 0; opacity: .05; pointer-events: none; }
.cta-dark__glow span { position: absolute; border-radius: 50%; background: var(--primary); filter: blur(80px); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { border: 2px solid var(--foreground); margin-left: -0.5rem; background: color-mix(in srgb, #fff 20%, transparent); color: color-mix(in srgb, #fff 80%, transparent); font-size: 0.65rem; width: 2.25rem; height: 2.25rem; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.cta-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: center; font-size: 0.85rem; color: color-mix(in srgb, #fff 40%, transparent); }
.cta-facts span { display: inline-flex; align-items: center; gap: 0.4rem; }
.cta-facts .dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, #fff 20%, transparent); }
.cta-facts .dot--green { background: var(--green); }

/* ============================================================
   Article / legal prose pages
   ============================================================ */
.prose { max-width: 46rem; margin-inline: auto; }
.prose h2 { font-size: 1.25rem; font-weight: 700; margin-top: 2.25rem; margin-bottom: 0.75rem; }
.prose h3 { font-size: 1.05rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose p { color: var(--muted-foreground); margin-bottom: 1rem; line-height: 1.75; }
.prose ul { margin-bottom: 1rem; }
.prose ul li { color: var(--muted-foreground); margin-bottom: 0.4rem; line-height: 1.7; }
.prose a { color: var(--primary); }
.prose a:hover { text-decoration: underline; }

/* Blog cards */
.post-card { overflow: hidden; padding: 0; background: var(--background); }
.post-card__thumb { aspect-ratio: 16/9; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent); font-size: 3rem; font-weight: 900; color: color-mix(in srgb, var(--primary) 20%, transparent); }
.post-card__body { padding: 1.5rem; }
.post-card__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.pill-cat { font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); }
.pill-cat.Branding { background: color-mix(in srgb, #3b82f6 10%, transparent); color: #1d4ed8; }
.pill-cat.Marketing, .pill-cat.Tips { background: color-mix(in srgb, #f59e0b 10%, transparent); color: #b45309; }
.pill-cat.Inspiratie { background: color-mix(in srgb, #8b5cf6 10%, transparent); color: #6d28d9; }
.pill-cat.TipsTricks { background: color-mix(in srgb, #16a34a 10%, transparent); color: #15803d; }
.pill-cat.Nieuws { background: color-mix(in srgb, #ef4444 10%, transparent); color: #b91c1c; }
.cat-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cat-filter button { border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); border-radius: var(--radius-pill); padding: 0.4rem 1rem; font-size: 0.85rem; font-weight: 500; }
.cat-filter button.active { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.cat-filter button:hover:not(.active) { color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 40%, transparent); }

/* Page hero (sub-pages) */
.page-hero { position: relative; overflow: hidden; padding-block: 5rem; }
.page-hero__bg { position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent 60%); pointer-events: none; }
.page-hero h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.1; margin-block: 1.5rem; }
.page-hero__lead { font-size: 1.2rem; color: var(--muted-foreground); line-height: 1.7; }

/* ============================================================
   Breadcrumb bar (RankMath, bottom of page above footer)
   ============================================================ */
.site-breadcrumb {
	border-top: 1px solid var(--border);
	background: color-mix(in srgb, var(--muted) 12%, #fff);
	font-size: 0.85rem;
	color: var(--muted-foreground);
}
.site-breadcrumb .container { padding-block: 0.9rem; }
.site-breadcrumb .rank-math-breadcrumb p,
.site-breadcrumb .rank-math-breadcrumb {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	color: var(--muted-foreground);
}
.site-breadcrumb a { color: var(--muted-foreground); transition: color .15s; }
.site-breadcrumb a:hover { color: var(--primary); }
.site-breadcrumb .separator { color: var(--border); margin: 0 0.15rem; }
.site-breadcrumb .last,
.site-breadcrumb [aria-current="page"] { color: var(--foreground); font-weight: 600; }

/* ============================================================
   Footer (v2 — light, playful, on-brand)
   ============================================================ */
.site-footer {
	--fv2-cyan: var(--primary);
	--fv2-coral: #ff6b5d;
	--fv2-sun: #ffc23d;
	--fv2-mint: #3fb27f;
	--fv2-ink: #0f1419;
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--border);
	background: color-mix(in srgb, var(--muted) 22%, #fff);
	color: var(--fv2-ink);
}
/* Ambient orbs (very subtle on light) */
.site-footer::before,
.site-footer::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .1;
	pointer-events: none;
}
.site-footer::before { width: 30rem; height: 30rem; background: var(--fv2-cyan); top: -16rem; left: -8rem; }
.site-footer::after { width: 20rem; height: 20rem; background: var(--fv2-coral); bottom: -12rem; right: -6rem; }
.footer-inner { position: relative; z-index: 1; padding-block: 4.5rem; }

/* Newsletter card */
.newsletter {
	border: 1px solid var(--border);
	background: #fff;
	border-radius: 1.6rem;
	padding: 2.5rem 2rem;
	margin-bottom: 4rem;
	position: relative;
	overflow: hidden;
	box-shadow: 0 24px 50px -32px rgba(15,20,25,.25);
}
.newsletter::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 3px;
	background: linear-gradient(90deg, var(--fv2-cyan), var(--fv2-coral) 55%, var(--fv2-sun));
}
.newsletter form, .newsletter-form { display: flex; gap: 0.5rem; max-width: 26rem; margin-inline: auto; }
.newsletter input, .newsletter-form input {
	flex: 1;
	background: #fff;
	border: 1px solid var(--border);
	color: var(--fv2-ink);
	border-radius: 999px;
	padding: 0.7rem 1.1rem;
}
.newsletter input:focus, .newsletter-form input:focus { outline: 2px solid color-mix(in srgb, var(--fv2-cyan) 45%, transparent); outline-offset: 1px; border-color: var(--fv2-cyan); }
.newsletter .btn-primary, .newsletter-form .btn {
	border-radius: 999px;
	background: linear-gradient(135deg, var(--fv2-cyan), var(--fv2-coral));
	border-color: transparent; color: #fff;
	transition: transform .18s, box-shadow .18s;
}
.newsletter .btn-primary:hover, .newsletter-form .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(30,157,241,.45); }

/* Link columns */
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 2.5rem 2rem; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid > div:first-child { grid-column: 1 / -1; } }
.footer-col h2, .footer-col h4 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: color-mix(in srgb, var(--fv2-coral) 85%, var(--fv2-ink)); margin-bottom: 1.1rem; }
.footer-col ul li { margin-bottom: 0.8rem; }
.footer-col a { font-size: 0.92rem; color: var(--muted-foreground); transition: color .15s, padding-left .15s; }
.footer-col a:hover { color: var(--fv2-cyan); padding-left: 3px; }

/* Brand block */
.footer-brand .brand__mark { background: linear-gradient(135deg, var(--fv2-cyan), var(--fv2-coral)); color: #fff; }
.footer-brand p { font-size: 0.92rem; color: var(--muted-foreground); max-width: 22rem; margin-block: 1.1rem 1.4rem; line-height: 1.65; }
.social-row { display: flex; gap: 0.6rem; }
.social-row a { width: 2.4rem; height: 2.4rem; border: 1px solid var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fv2-ink); background: #fff; transition: transform .18s, background .18s, border-color .18s, color .18s; }
.social-row a:hover { transform: translateY(-2px); background: linear-gradient(135deg, var(--fv2-cyan), var(--fv2-coral)); border-color: transparent; color: #fff; }
.social-row svg { width: 1rem; height: 1rem; }

/* Bottom bar */
.footer-sep { border: none; border-top: 1px solid var(--border); margin-block: 2.5rem; }
.footer-bottom { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; font-size: 0.85rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }
.footer-bottom .made { display: inline-flex; align-items: center; gap: 0.35rem; }
.footer-bottom .made svg { width: 0.9rem; height: 0.9rem; color: var(--fv2-coral); fill: var(--fv2-coral); }
.footer-bottom .links { display: inline-flex; gap: 1.25rem; }
.footer-bottom .links a { color: var(--muted-foreground); transition: color .15s; }
.footer-bottom .links a:hover { color: var(--fv2-cyan); }

/* Utility spacing */
.mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }
.mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.stack-sm > * + * { margin-top: 0.75rem; }
.flex-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.items-stretch { align-items: stretch; }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: inline; } }

/* Skip link (a11y) */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--foreground); color: var(--background); padding: 0.75rem 1rem; border-radius: var(--radius-sm); z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* ============================================================
   v1.1 additions — mega menu, breadcrumbs, feature cards, blog
   ============================================================ */

/* Screen-reader-only utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Mega menu (Functies) */
.nav__item--mega { position: static; }
.nav__mega {
  position: absolute; left: 0; right: 0; top: 100%;
  padding-top: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 110;
}
.nav__item--mega:hover .nav__mega,
.nav__item--mega.is-open .nav__mega,
.nav__item--mega:focus-within .nav__mega,
.nav__mega:hover {
  opacity: 1;
  pointer-events: auto;
}
.nav__mega-inner {
  max-width: var(--container); margin-inline: auto;
  background: var(--background); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: 0 20px 50px -15px rgba(15,20,25,.22);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 1.5rem;
}
.nav__mega-heading { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted-foreground); margin: 0.75rem 0 0.5rem; }
.nav__mega-heading:first-child { margin-top: 0; }
.nav__mega-col ul { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.nav__mega-col a { display: flex; flex-direction: column; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); }
.nav__mega-col a:hover { background: var(--accent); }
.nav__mega-col a span { font-size: 0.9rem; font-weight: 500; }
.nav__mega-col a small { font-size: 0.78rem; color: var(--muted-foreground); }

/* Third column: promo / CTA card */
.nav__mega-promo {
  background: linear-gradient(135deg, #0f1419, #1e2a3a);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.nav__mega-promo::before {
  content: "";
  position: absolute;
  right: -30%;
  bottom: -30%;
  width: 80%;
  height: 100%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 55%, transparent), transparent 70%);
  filter: blur(30px);
  z-index: -1;
}
.nav__mega-promo__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  color: color-mix(in srgb, #fff 60%, transparent);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.nav__mega-promo__title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}
.nav__mega-promo__text {
  font-size: 0.85rem;
  color: color-mix(in srgb, #fff 70%, transparent);
  line-height: 1.5;
  margin: 0;
}
.nav__mega-promo__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  background: #fff;
  color: #0f1419;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s, box-shadow .22s;
}
.nav__mega-promo__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.4);
  color: #0f1419;
}
.nav__mega-promo__cta svg { width: 0.9rem; height: 0.9rem; }

.nav__mega-foot { max-width: var(--container); margin: 0.5rem auto 0; }
.nav__mega-foot a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 500; color: var(--primary); padding: 0.5rem 0.75rem; }
.nav__mega-foot a svg { width: 0.9rem; height: 0.9rem; }

/* Mobile sub headings inside drawer */
.mobile-nav__subheading { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted-foreground); padding: 0.75rem 1rem 0.25rem; }

/* Breadcrumbs */
.breadcrumbs { margin-bottom: 1.25rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.82rem; color: var(--muted-foreground); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 0.4rem; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--border); margin-left: 0.4rem; }
.breadcrumbs a { color: var(--muted-foreground); }
.breadcrumbs a:hover { color: var(--foreground); }
.breadcrumbs li[aria-current="page"] { color: var(--foreground); font-weight: 500; }

/* Feature cards (overview + related) */
.feature-group { margin-bottom: 3.5rem; }
.feature-group:last-child { margin-bottom: 0; }
.feature-group__title { font-size: 1.35rem; font-weight: 800; margin-bottom: 1.25rem; }
.feature-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.feature-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
.feature-card p { font-size: 0.88rem; line-height: 1.6; flex: 1; }
.feature-card__more { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 500; margin-top: 1rem; }
.feature-card__more svg { width: 0.9rem; height: 0.9rem; transition: transform .2s; }
.feature-card:hover .feature-card__more svg { transform: translateX(3px); }

/* Newsletter form (footer) */
.newsletter-form { display: flex; gap: 0.5rem; max-width: 24rem; margin-inline: auto; }
.newsletter-form input { flex: 1; font: inherit; font-size: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background); color: var(--foreground); padding: 0.6rem 0.8rem; }
.newsletter-form input:focus { outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 1px; border-color: var(--primary); }

/* Blog thumbnails (real images) */
.post-card__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; border-bottom: 1px solid var(--border); }
.post-card__thumb-link { display: block; }
.post-content img { border-radius: var(--radius-md); height: auto; }
.post-content h2 { margin-top: 2rem; }
.post-content h3 { margin-top: 1.5rem; }
.post-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Pagination */
.pagination .nav-links { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--foreground); }
.pagination .page-numbers.current { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.pagination .page-numbers:hover:not(.current) { border-color: color-mix(in srgb, var(--foreground) 40%, transparent); }

/* Reduced motion: disable card/hover transforms and marquee */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   v1.2 — pricing page redesign
   ============================================================ */
.pricing__head { margin-bottom: 2.5rem; }
.pricing__head h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; margin-block: .75rem 1rem; }
.pricing__head > p { font-size: 1.1rem; }

.pricing__toggle { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.pricing__save { border-color: color-mix(in srgb, var(--green) 40%, transparent); color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); }

.pricing__grid { max-width: 60rem; margin-inline: auto; padding-top: 1rem; overflow: visible; }

/* High-specificity badge anchor — wins over generic .badge / older .plan__badge */
.pricing .plan.plan--popular { padding-top: 2.25rem; }
.pricing .plan .plan__badge,
.pricing .plan__badge.badge {
	position: absolute;
	top: 0;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	white-space: nowrap;
	box-shadow: 0 6px 16px -6px rgba(30,157,241,.5);
}


/* Plan card structure */
.plan { position: relative; display: flex; flex-direction: column; gap: .25rem; padding-top: 2.25rem; }
.plan__head { margin-bottom: 1rem; }
.plan__head h3 { font-size: 1.25rem; font-weight: 800; }
.plan__tagline { font-size: .82rem; color: var(--muted-foreground); line-height: 1.45; margin-top: .35rem; }
.plan__price { display: flex; align-items: baseline; gap: .25rem; min-height: 2.75rem; }
.plan__amt { font-size: 2.25rem; font-weight: 800; letter-spacing: -.02em; }
.plan__per { font-size: .85rem; color: var(--muted-foreground); }
.plan__billing { font-size: .75rem; color: var(--muted-foreground); margin-bottom: 1rem; }
.plan__meta { display: flex; flex-direction: column; gap: .4rem; padding: .9rem 0; margin-bottom: 1rem; border-block: 1px solid var(--border); }
.plan__meta span { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted-foreground); }
.plan__meta span strong { color: var(--foreground); font-weight: 700; }
.plan__meta svg { width: 1rem; height: 1rem; color: var(--primary); flex: none; }
.plan__features { margin-top: 1.25rem; }
.plan__features li { font-size: .85rem; }
.plan .btn-block { margin-top: .25rem; }

/* Agency reveal */
.pricing__agency-cta { text-align: center; margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.pricing__agency-cta p { font-size: .95rem; }
#show-agency svg:last-child { transition: transform .2s; }
#show-agency[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.pricing__agency { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px dashed var(--border); }

/* Credits explainer */
.pricing__credits { margin-top: 3.5rem; }
.pricing__credits-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.pricing__credits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: 1.25rem; }
@media (max-width: 640px) { .pricing__credits-grid { grid-template-columns: 1fr; } }
.pricing__credit-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .82rem; background: color-mix(in srgb, var(--muted) 30%, transparent); border-radius: var(--radius-sm); padding: .55rem .8rem; }

.pricing__foot { margin-top: 2.5rem; }
/* ============================================================
   Inner page hero (template-parts/inner-hero.php)
   Dark background matching the homepage cosmic hero. Two modes:
     .pagehero (default)    → generated atmosphere (glows + stars)
     .pagehero--image       → full-width photo with dark scrim overlay
   ============================================================ */
.pagehero {
  position: relative;
  overflow: hidden;
  background: #060814;
  color: #fff;
  padding: clamp(3rem, 6vw, 5rem) 0;
  isolation: isolate;
  min-height: 26rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Desktop: lock every hero to 2:1 aspect ratio.
   - Matches the 2400×1200 image dimensions exactly so background-size: cover
     displays the full image without cropping at any viewport width
   - Gives every hero (image or atmosphere) the same size for visual consistency
   - min-height guarantees enough room for text on narrower desktops
   - padding removed so flex-centering handles vertical alignment */
@media (min-width: 900px) {
  .pagehero {
    aspect-ratio: 2 / 1;
    min-height: 32rem;
    padding-block: 0;
  }
}
.pagehero--center { text-align: center; }
.pagehero--center .pagehero__sub { margin-left: auto; margin-right: auto; }

/* Atmosphere (glows + stars). Sits above the photo scrim so glows
   remain visible on image-mode heroes. mix-blend-mode: screen makes
   the glows brighten the underlying photo colors rather than sit
   as flat gradients on top. */
.pagehero__atmosphere {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  mix-blend-mode: screen;
}
.pagehero__glow {
  position: absolute;
  filter: blur(70px);
  border-radius: 50%;
}
.pagehero__glow--cyan {
  top: -20vh; right: -10vw;
  width: 55vw; height: 55vh;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 55%, transparent), transparent 68%);
  opacity: .7;
}
.pagehero__glow--coral {
  bottom: -25vh; left: -8vw;
  width: 45vw; height: 50vh;
  background: radial-gradient(closest-side, rgba(255, 107, 93, 0.5), transparent 72%);
  opacity: .55;
}
.pagehero__stars {
  position: absolute; inset: 0; pointer-events: none;
  background-repeat: repeat;
  background-size: 400px 400px;
  background-image:
    radial-gradient(1px 1px at 40px 60px,   rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 120px 180px, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.4px 1.4px at 200px 90px, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 280px 220px, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 60px 300px,  rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 340px 340px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 160px 380px, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 240px 40px,  rgba(255,255,255,.5), transparent 60%);
  opacity: .6;
}

/* Photo mode: full-width image + dark scrim for text legibility */
.pagehero__photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pagehero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 8, 20, 0.55) 0%, rgba(6, 8, 20, 0.85) 100%),
    linear-gradient(90deg,  rgba(6, 8, 20, 0.7)  0%, rgba(6, 8, 20, 0.35) 100%);
}

/* Content sits above atmosphere/scrim */
.pagehero__inner {
  position: relative;
  z-index: 3;
  max-width: 48rem;
}
.pagehero--center .pagehero__inner { margin-inline: auto; }

.pagehero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: color-mix(in srgb, #fff 78%, transparent);
  background: color-mix(in srgb, #fff 6%, transparent);
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  border-radius: 999px;
  padding: .4rem .9rem;
  margin-bottom: 1.6rem;
  letter-spacing: .01em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pagehero__title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 1.2rem;
}
.pagehero__accent {
  background: linear-gradient(100deg, #6cc5ff 0%, #ff6b5d 60%, #ffc23d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.pagehero__sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: color-mix(in srgb, #fff 74%, transparent);
  line-height: 1.55;
  margin: 0 0 1.8rem;
  max-width: 36rem;
}
.pagehero__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  color: #0f1419;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  transition: transform .18s, box-shadow .22s;
}
.pagehero__cta:hover {
  color: #0f1419;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5);
}
.pagehero__cta svg { width: 1rem; height: 1rem; }
/* ============================================================
   v2.7.3 — SVG logo + hover-with-delay + click-close lock +
   "Alle functies" as secondary link in promo card
   ============================================================ */

/* Logo image (header + mobile drawer + footer) */
.brand__logo {
  display: block;
  height: 2rem;
  width: auto;
  max-width: 140px;
}
.footer-brand .brand__logo {
  height: 2.5rem;
  max-width: 160px;
  /* SVG ships with white text; footer bg is light. brightness(0) forces
     every fill to black. Swap to a dark-text SVG variant if you want to
     keep any coloured mark coloured in the footer. */
  filter: brightness(0);
}
/* Neutralize the old text-pill styling in case the classes linger anywhere */
.footer-brand .brand__mark { display: none; }

/* Hover-with-delay: JS toggles .is-hover on <li> with a 220ms close delay
   so the panel stays open while the cursor crosses the gap between
   trigger and panel. Adds to the existing :hover / .is-open selectors. */
.nav__item--mega.is-hover .nav__mega,
.nav__item.is-hover .nav__dropdown {
  opacity: 1;
  pointer-events: auto;
}
.nav__item--mega.is-hover .nav__link svg,
.nav__item.is-hover .nav__link svg {
  transform: rotate(180deg);
}

/* Click-to-close lock: when user clicks trigger to close, panel closes
   even if their cursor is still hovering. Lock clears on mouseleave.
   Must come AFTER the opening rules so it wins the cascade at equal
   specificity. */
.nav__item.is-locked-closed .nav__mega,
.nav__item.is-locked-closed .nav__dropdown {
  opacity: 0;
  pointer-events: none;
}
.nav__item.is-locked-closed .nav__link svg {
  transform: none;
}

/* "Alle functies" as a subtle secondary link inside the dark promo card,
   sitting under the primary "Probeer de demo" button. */
.nav__mega-promo__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.2rem 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: color-mix(in srgb, #fff 65%, transparent);
  text-decoration: none;
  transition: color .15s ease, gap .15s ease;
}
.nav__mega-promo__link:hover {
  color: #fff;
  gap: 0.55rem;
}
.nav__mega-promo__link svg {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform .15s ease;
}
.nav__mega-promo__link:hover svg {
  transform: translateX(2px);
}