/*
Theme Name: Text to Brand
Theme URI: https://texttobrand.com
Author: Text to Brand
Description: WordPress theme for Text to Brand, the AI platform that turns a text prompt into a complete brand system: name, logo, identity, and assets.
Version: 1.3.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: texttobrand
*/

/* ============================================================
   Design tokens, Text to Brand
   -----------------------------------------------------------
   Single source of truth for the whole palette. To rebrand,
   change the values in this :root block; nothing else in the
   theme hardcodes colors.

   Palette rationale:
   - Deep ink (#0B0D1A) as the primary reading color; feels
     editorial rather than consumer-app.
   - One saturated accent (#2E3FE0, "signal cobalt") used
     sparingly for calls-to-action and active states.
   - Warm-neutral surfaces (#F7F6F2 cream, #F5F6FA cool grey)
     so feature imagery reads as content, not as noise.
   - Restrained pastel tiles that don't compete with brand
     mock-ups shown inside them.
   ============================================================ */
:root {
  /* Core surfaces */
  --background:      #FFFFFF;
  --foreground:      #0B0D1A;         /* deep ink, headings */
  --text:            #2E3145;         /* body */
  --card:            #FFFFFF;
  --card-foreground: #0B0D1A;
  --muted:           #F5F6FA;         /* cool neutral surface */
  --muted-warm:      #F7F6F2;         /* warm neutral surface */
  --muted-foreground:#6B6E82;
  --border:          #E4E6F0;
  --border-strong:   #C9CCDA;

  /* Brand — one signal color, used with restraint */
  --primary:            #2E3FE0;      /* signal cobalt */
  --primary-hover:      #1F2FC4;
  --primary-active:     #1523A6;
  --primary-foreground: #FFFFFF;
  --accent:             #EEF0FF;      /* very pale cobalt tint */
  --accent-foreground:  #2E3FE0;

  /* Secondary — warm counterpoint, used sparingly (accents, illustrations) */
  --secondary:            #C86A3A;    /* muted terracotta */
  --secondary-hover:      #A9552C;
  --secondary-foreground: #FFFFFF;

  /* Pastel tiles for feature cards. Muted, so they don't
     compete with the brand mock-ups they contain. */
  --pastel-blue:     #E7EBFB;
  --pastel-lavender: #ECE7F5;
  --pastel-mint:     #E1EDE4;
  --pastel-peach:    #F1E4D5;
  --pastel-cream:    #F5F1E8;
  --pastel-pink:     #F1E1E3;

  /* Utility, deeper and more sober than default web palette */
  --green:  #15925B;
  --amber:  #C48200;
  --danger: #C93838;

  /* Radius / layout — a touch less rounded than before, feels more considered */
  --radius:     8px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill: 9999px;
  --container: 1200px;

  /* Type */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Playfair Display is the face actually loaded in fonts.css, so it leads
     here; the rest are local fallbacks for the brief moment before the
     webfont lands (and for anyone blocking Google Fonts). */
  --font-serif: 'Playfair Display', 'Tiempos Text', 'Charter', 'Iowan Old Style', 'Palatino Linotype', Georgia, 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(--text);
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -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.1;
  letter-spacing: -0.022em;
  color: var(--foreground);
  font-weight: 700;
}
h1 { letter-spacing: -0.028em; }
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) 55%, transparent); }
.section--muted-soft { background: color-mix(in srgb, var(--muted) 30%, transparent); }
.section--warm { background: var(--muted-warm); }
.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; }

/* Eyebrows: quieter, more editorial. No uppercase shouting; small caps + medium weight. */
.eyebrow, .badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted-foreground);
  background: var(--background);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.badge--solid { background: var(--foreground); color: var(--primary-foreground); border-color: var(--foreground); }
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.section-head { margin-bottom: 3rem; }
.section-head h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  font-weight: 700; margin-block: 0.75rem 1rem; letter-spacing: -0.025em;
}
.section-head p { font-size: 1.075rem; color: var(--muted-foreground); line-height: 1.55; }

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

/* ============================================================
   Buttons — quieter, less bouncy, no coloured drop-shadow.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--radius);
  padding: 0.7rem 1.25rem;
  font-size: 0.925rem; font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn svg { width: 1rem; height: 1rem; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-primary:active { background: var(--primary-active); border-color: var(--primary-active); }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--foreground); }
.btn-outline:hover { background: var(--muted); border-color: var(--foreground); }
.btn-ghost { background: transparent; color: var(--foreground); border-color: transparent; }
.btn-ghost:hover { background: var(--muted); color: var(--foreground); }
.btn-secondary { background: var(--foreground); color: #fff; border-color: var(--foreground); }
.btn-secondary:hover { background: #000; border-color: #000; }
.btn-lg { padding: 0.9rem 1.6rem; font-size: 1rem; }
.btn-sm { padding: 0.6rem 1rem; font-size: 0.875rem; }
.btn-block { width: 100%; }
.btn-on-dark { background: #fff; color: var(--foreground); border: 1.5px solid #fff; }
.btn-on-dark:hover { background: var(--accent); }

/* ============================================================
   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: border-color .2s ease, box-shadow .2s ease; }
.card--hover:hover {
  border-color: var(--border-strong);
  box-shadow: 0 1px 3px rgba(11, 13, 26, 0.04), 0 6px 20px -8px rgba(11, 13, 26, 0.08);
}
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--primary);
}
.icon-tile svg { width: 1.1rem; height: 1.1rem; }
.icon-tile--lg { width: 2.75rem; height: 2.75rem; }

/* 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: sticky; top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--foreground) 4%, transparent);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 4.25rem;
  gap: 1.5rem;
  transition: height .3s ease;
}
.site-header.is-scrolled .nav { height: 3.75rem; }

/* ============================================================
   Reduced-motion overrides — drops transform-heavy transitions
   for users who ask for less motion. Element visibility is
   never CSS-hidden; GSAP handles the hide-then-reveal itself.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  .site-header.is-scrolled .nav { height: 4.25rem; }
}

/* 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.3rem;
  padding: 0.5rem 0.9rem; border-radius: var(--radius-sm);
  font-size: 0.925rem; font-weight: 500;
  color: var(--foreground);
  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: var(--primary);
  background: transparent;
}
.nav__link.is-active { color: var(--primary); }
.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: 20rem;
  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-lg);
  box-shadow:
    0 1px 3px color-mix(in srgb, var(--foreground) 4%, transparent),
    0 20px 60px -20px color-mix(in srgb, var(--foreground) 18%, transparent);
  padding: 0.65rem;
}
.nav__dropdown ul { list-style: none; margin: 0; padding: 0; }
.nav__dropdown li + li { margin-top: 0.1rem; }
.nav__dropdown a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  transition: background .12s ease;
}
.nav__dropdown a:hover { background: var(--muted); }
.nav__dropdown a span { font-size: 0.925rem; font-weight: 600; color: var(--foreground); letter-spacing: -0.005em; }
.nav__dropdown a small { font-size: 0.8rem; color: var(--muted-foreground); line-height: 1.35; }

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

/* Header CTAs on the white bar */
.site-header .nav__cta .btn-ghost { color: var(--foreground); background: transparent; }
.site-header .nav__cta .btn-ghost:hover { background: var(--muted); color: var(--foreground); }
.site-header .nav__cta .btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transition: background .15s ease, border-color .15s ease;
}
.site-header .nav__cta .btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}

.nav__toggle {
  display: inline-flex; background: transparent; border: none; padding: 0.5rem;
  color: var(--foreground); 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;
  color: var(--primary);
}
.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 color-mix(in srgb, var(--primary) 8%, transparent);
  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: 2px solid var(--primary); box-shadow: 0 4px 24px color-mix(in srgb, var(--primary) 12%, transparent); }
.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 2px 8px color-mix(in srgb, var(--primary) 30%, transparent); }
.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: color-mix(in srgb, var(--primary) 6%, #fff); 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, var(--primary) 10%, transparent); color: var(--primary); }
.pill-cat.Marketing, .pill-cat.Tips { background: color-mix(in srgb, var(--amber) 15%, transparent); color: #B45309; }
.pill-cat.Inspiratie { background: color-mix(in srgb, var(--secondary) 12%, transparent); color: var(--secondary-hover); }
.pill-cat.TipsTricks { background: color-mix(in srgb, var(--green) 12%, transparent); color: #0F8A62; }
.pill-cat.Nieuws, .pill-cat.News { background: color-mix(in srgb, var(--danger) 12%, 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: color-mix(in srgb, var(--primary) 3%, transparent); 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-primary: var(--primary);
	--fv2-warm:    var(--secondary);
	--fv2-soft:    var(--accent);
	--fv2-success: var(--green);
	--fv2-ink:     var(--foreground);
	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-primary); top: -16rem; left: -8rem; }
.site-footer::after { width: 20rem; height: 20rem; background: var(--fv2-primary); 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: 16px;
	padding: 2.5rem 2rem;
	margin-bottom: 4rem;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.newsletter::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 3px;
	background: var(--fv2-primary);
}
.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: 10px;
	padding: 0.7rem 1.1rem;
}
.newsletter input:focus, .newsletter-form input:focus { outline: 2px solid var(--fv2-soft); outline-offset: 1px; border-color: var(--fv2-primary); }
.newsletter .btn-primary, .newsletter-form .btn {
	border-radius: 10px;
	background: var(--fv2-primary);
	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 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); }

/* 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: 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-primary); padding-left: 3px; }

/* Brand block */
.footer-brand .brand__mark { background: var(--fv2-primary); 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: var(--fv2-primary); 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.4rem; flex-wrap: wrap; }
.footer-bottom .made svg { width: 0.9rem; height: 0.9rem; color: var(--danger); fill: var(--danger); }
.footer-bottom .made__mark { display: inline-block; width: 1.1rem; height: 1.1rem; margin-right: 0.15rem; opacity: 0.9; }
.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-primary); }

/* 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-lg);
  box-shadow:
    0 1px 3px color-mix(in srgb, var(--foreground) 4%, transparent),
    0 24px 60px -24px color-mix(in srgb, var(--foreground) 20%, transparent);
  padding: 1.75rem;
  display: grid;
  /* Feature groups take 1fr each; promo card takes slightly more */
  grid-template-columns: repeat(var(--mega-groups, 2), 1fr) 1.05fr;
  gap: 2rem;
}
/* Fallback for browsers without CSS var() in grid-template-columns */
.nav__mega-inner[data-mega-cols="3"] { grid-template-columns: 1fr 1fr 1.05fr; }
.nav__mega-inner[data-mega-cols="4"] { grid-template-columns: 1fr 1fr 1fr 1.05fr; }
.nav__mega-inner[data-mega-cols="2"] { grid-template-columns: 1fr 1.05fr; }
.nav__mega-heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 0.75rem;
  padding-inline: 0.75rem;
}
.nav__mega-col ul { list-style: none; margin: 0; padding: 0; }
.nav__mega-col li + li { margin-top: 0.15rem; }
.nav__mega-col a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  transition: background .12s ease;
}
.nav__mega-col a:hover { background: var(--muted); }
.nav__mega-col a span { font-size: 0.9rem; font-weight: 600; color: var(--foreground); letter-spacing: -0.005em; }
.nav__mega-col a small { font-size: 0.775rem; color: var(--muted-foreground); line-height: 1.4; }

/* Third column: promo / CTA card — cleaner, ink surface, less blur bloom */
.nav__mega-promo {
  background: var(--foreground);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.nav__mega-promo::before {
  content: "";
  position: absolute;
  right: -20%;
  top: -30%;
  width: 65%;
  height: 65%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 40%, transparent), transparent 70%);
  filter: blur(24px);
  z-index: -1;
  opacity: 0.9;
}
.nav__mega-promo__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  color: color-mix(in srgb, #fff 65%, transparent);
  text-transform: uppercase;
  letter-spacing: .11em;
}
.nav__mega-promo__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  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.55;
  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: var(--foreground);
  padding: 0.55rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease;
}
.nav__mega-promo__cta:hover {
  background: var(--accent);
  color: var(--foreground);
}
.nav__mega-promo__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: color-mix(in srgb, #fff 75%, transparent);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  padding-block: 0.15rem;
}
.nav__mega-promo__link:hover { color: #fff; }
.nav__mega-promo__cta svg,
.nav__mega-promo__link svg { width: 0.85rem; height: 0.85rem; }

.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 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}


/* Plan card structure */
.plan { position: relative; display: flex; flex-direction: column; gap: .25rem; padding-top: 2.25rem; border-radius: 16px; }
.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: var(--foreground);
  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) 25%, transparent), transparent 68%);
  opacity: .4;
}
.pagehero__glow--coral { display: none; }
.pagehero__stars { display: none; }

/* 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(17, 24, 39, 0.6) 0%, rgba(17, 24, 39, 0.88) 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: 'DM Sans', 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: 'DM Serif Display', 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 {
  color: var(--secondary);
  font-style: italic;
}
.pagehero__sub {
  font-family: 'DM Sans', 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: var(--foreground);
  padding: .85rem 1.5rem;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  transition: transform .18s, box-shadow .22s;
}
.pagehero__cta:hover {
  color: var(--foreground);
  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 +
   "All features" 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;
}
/* 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;
}

/* "All features" 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);
}