/*
Theme Name: Website.sarl
Theme URI: https://website.sarl
Author: Website SARL
Author URI: https://website.sarl
Description: Plateforme française de création de marque pilotée par IA — logo, site, réseaux sociaux et supports imprimés en quelques minutes. Pensée pour les entreprises françaises exigeantes. Aesthétique éditoriale sobre, monochromatique, inspirée des interfaces de produit contemporaines.
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: website-sarl
Domain Path: /languages
Tags: business, professional, translation-ready, threaded-comments, custom-menu, featured-images, block-styles
*/

/* ============================================================
   Website.sarl — Design tokens (aesthetic sobre, sérieuse)
   ------------------------------------------------------------
   Palette monochromatique dominante, avec un vert-menthe sobre
   (héritier des interfaces de produit modernes) en accent
   utilitaire (liens actifs, focus rings, CTA). Aucun dégradé
   coloré, aucune ombre chaude, aucun cream/coral.
   Typographies : sans-serif neutre pour l'UI, serif éditorial
   pour les grands titres.
   ============================================================ */
:root {
  --background: #FFFFFF;
  --foreground: #0d0d0d;
  --card: #FFFFFF;
  --card-foreground: #0d0d0d;

  /* Vert accent sobre — utilisé avec parcimonie, uniquement pour CTA
     et éléments actifs. Toute la marque tourne autour du noir/blanc. */
  --primary: #10a37f;
  --primary-foreground: #FFFFFF;
  --primary-hover: #0e8f6d;

  /* Neutres — la véritable "couleur" de l'identité */
  --muted: #f7f7f8;
  --muted-foreground: #6e6e80;
  --subtle: #ececf1;
  --accent: #f7f7f8;
  --accent-foreground: #0d0d0d;
  --border: #e5e5e5;
  --border-strong: #d1d1d6;

  --radius: 0.5rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 9999px;

  --container: 1200px;
  --container-narrow: 960px;
  --container-wide: 1360px;

  --green: #10a37f;
  --amber: #ab6800;
  --red:   #e11d48;

  /* Ombres discrètes — pas de "warmth", uniquement des shadows
     neutres et faibles pour élever subtilement les surfaces */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 40px -8px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.04);

  /* Typographie : Inter pour l'UI (proche des interfaces de produit
     contemporaines), Söhne-like remplacé par Inter tight, et un
     serif éditorial pour les H1. Toutes les fontes sont chargées
     via assets/css/fonts.css avec fallback système sûr. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Söhne Buch', 'Newsreader', 'Charter', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}


/* ============================================================
   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
   v7.4: responsive breakpoints smoothed. Was collapsing straight from
   3 columns to 1 at 1024px, which made cards absurdly wide on tablet.
   Now steps down 4 -> 3 -> 2 -> 1 (grid-4) and 3 -> 2 -> 1 (grid-3). */
.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: 1100px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .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: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.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 (v7.2)
   The site-wide fixes.css turns .site-header into a light glass panel
   AND stamps .btn-ghost { color: --foreground !important }. That made
   the previous "ghost Log in" rule collapse into invisible-on-white or
   read as black.

   New treatment: Log in is a distinct .btn-login pill (dark filled,
   white text) so it stays legible on any header background and reads
   as a real button. Get Started Free stays --primary coral to keep
   the pricing/checkout CTA the visual hero.

   Every color declaration is !important because fixes.css uses
   !important throughout for button colors. */
.site-header .nav__cta .btn-login {
  background: var(--foreground) !important;
  color: #fff !important;
  border: 1px solid var(--foreground) !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.site-header .nav__cta .btn-login:hover,
.site-header .nav__cta .btn-login:focus-visible {
  background: color-mix(in srgb, var(--foreground) 85%, #fff) !important;
  border-color: color-mix(in srgb, var(--foreground) 85%, #fff) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.site-header .nav__cta .btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  transition: background .2s ease, transform .18s ease, box-shadow .22s ease;
}
.site-header .nav__cta .btn-primary:hover,
.site-header .nav__cta .btn-primary:focus-visible {
  background: color-mix(in srgb, var(--primary) 88%, black) !important;
  border-color: color-mix(in srgb, var(--primary) 88%, black) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--primary) 55%, transparent);
}

/* Mobile drawer: Log in as an outlined dark pill, Get Started as
   coral fill, so the drawer echoes the desktop treatment. */
.mobile-nav__foot .btn-outline {
  color: var(--foreground) !important;
  border-color: color-mix(in srgb, var(--foreground) 30%, transparent) !important;
  background: transparent !important;
}
.mobile-nav__foot .btn-outline:hover,
.mobile-nav__foot .btn-outline:focus-visible {
  border-color: var(--foreground) !important;
  background: color-mix(in srgb, var(--foreground) 5%, transparent) !important;
}
.mobile-nav__foot .btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

.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;
  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 rgba(67,83,255,.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: 2px solid var(--primary); box-shadow: 0 4px 24px rgba(67, 83, 255, .12); }
.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 rgba(67, 83, 255, .3); }
.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, #10a37f 10%, transparent); color: #B8694F; }
.pill-cat.Marketing, .pill-cat.Tips { background: color-mix(in srgb, #f59e0b 10%, transparent); color: #b45309; }
.pill-cat.Inspiratie { background: color-mix(in srgb, #9B8579 10%, transparent); color: #6B5B52; }
.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: 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: #10a37f;
	--fv2-soft: #f0fdf4;
	--fv2-success: #10B981;
	--fv2-ink: #0d0d0d;
	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 rgba(67, 83, 255, .3); }

/* 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.35rem; }
.footer-bottom .made svg { width: 0.9rem; height: 0.9rem; color: #EF4444; fill: #EF4444; }
.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-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: var(--foreground);
  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: 'DM Serif Display', 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: var(--foreground);
  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: var(--foreground);
}
.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 2px 8px rgba(67, 83, 255, .3);
}


/* 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: #10a37f;
  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 +
   "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);
}
/* ============================================================
   v7.1 — Homepage graphic accents
   Editorial floating mock card + soft gradient blobs behind the
   hero. Subtle: aims for calm, not "landing page 2019 hero orb".
   ============================================================ */
.v2hero {
  position: relative;
  overflow: hidden;
}
/* Compact variant used on inner pages (e.g. /demo/) where the hero
   doesn't carry a prompt textarea, so it can be tighter. */
.v2hero--compact { padding-block: 3.5rem 3rem; }
@media (min-width: 900px) {
  .v2hero--compact { padding-block: 5rem 4rem; }
}
.v2hero__blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.v2hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}
.v2hero__blob--a {
  width: 32rem;
  height: 32rem;
  left: -8rem;
  top: -6rem;
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}
.v2hero__blob--b {
  width: 28rem;
  height: 28rem;
  right: -6rem;
  top: 6rem;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
}
.v2hero__blob--c {
  width: 22rem;
  height: 22rem;
  left: 40%;
  bottom: -10rem;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  filter: blur(90px);
  opacity: 0.4;
}
.v2hero__inner { position: relative; z-index: 1; }

/* Floating product mock card. Purely decorative, hidden on small
   screens so the prompt stays the hero on mobile. */
.v2hero__mock {
  margin: 3rem auto 0;
  max-width: 44rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow:
    0 30px 60px -30px color-mix(in srgb, var(--primary) 30%, transparent),
    0 12px 32px -12px rgba(15, 20, 25, 0.12);
  overflow: hidden;
  text-align: left;
}
.v2hero__mock-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}
.v2hero__mock-bar span {
  width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in srgb, var(--muted-foreground) 25%, transparent);
}
.v2hero__mock-bar span:first-child { background: #ff5f57; opacity: 0.7; }
.v2hero__mock-bar span:nth-child(2) { background: #febc2e; opacity: 0.7; }
.v2hero__mock-bar span:nth-child(3) { background: #28c840; opacity: 0.7; }
.v2hero__mock-url {
  margin-left: 0.5rem;
  padding: 0.2rem 0.6rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--muted-foreground);
  letter-spacing: 0.01em;
}
.v2hero__mock-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  padding: 1.1rem;
}
.v2hero__mock-tile {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  border: 1px solid var(--border);
}
.v2hero__mock-tile--logo {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 18%, transparent),
    color-mix(in srgb, var(--primary) 4%, transparent));
  border-color: color-mix(in srgb, var(--primary) 15%, transparent);
}
.v2hero__mock-tile--socials {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 60%, transparent),
    color-mix(in srgb, var(--muted) 30%, transparent));
}
.v2hero__mock-swatch {
  width: 2.2rem; height: 2.2rem; border-radius: 8px;
  background: var(--muted, #f7f7f8);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  align-self: flex-start;
  overflow: hidden;
}
.v2hero__mock-swatch img { display: block; }
.v2hero__mock-line {
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--muted-foreground) 25%, transparent);
}
.v2hero__mock-line + .v2hero__mock-line { width: 60%; margin-top: 0.35rem; }

@media (max-width: 720px) {
  .v2hero__mock { display: none; }
  .v2hero__blob { filter: blur(60px); }
}

/* Reveal defaults (used with or without GSAP). Elements fade in
   after their intersection is observed by assets/js/home-v2.js;
   GSAP layers a subtle touch on the hero mock card when the CDN
   loads. Class is .is-in to match the existing home-v2.css convention. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Feature-page illustrations replace the old blank icon mock.
   Contained inside .feat-showcase__art so the aspect ratio stays.
   The illustrations themselves are inline SVG in tmpl-feature.php. */
.feat-showcase__illus {
  position: relative;
  height: 100%;
  border-radius: 20px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary) 14%, #fff),
      color-mix(in srgb, var(--primary) 3%, #fff));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--primary) 28%, transparent);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.feat-showcase__illus svg {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
}
.feat-included__illus {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary) 10%, #fff),
      color-mix(in srgb, var(--accent) 40%, #fff));
  border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
}
.feat-included__illus svg {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
}

/* Demo page hero panel + paywall preview */
.demo-preview {
  margin-top: 3rem;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--background);
  box-shadow: 0 20px 50px -30px rgba(15, 20, 25, 0.15);
}
.demo-preview__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.demo-preview__tile {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--muted) 40%, transparent);
}
.demo-preview__tile--locked {
  position: relative;
  color: var(--muted-foreground);
}
.demo-preview__tile--locked::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent 40%,
    color-mix(in srgb, var(--background) 90%, transparent) 100%);
  pointer-events: none;
  border-radius: 10px;
}
.demo-preview__lock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
@media (max-width: 640px) {
  .demo-preview__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v7.2 - Cross-page consistency fallbacks
   These classes originally lived in home-v2.css (front page only)
   but are used by inner-hero.php and other inner templates through
   .v2eyebrow / .v2trust / .v2h1 / .v2h2. Ported here (using main
   design tokens) so every page renders the same badge, trust list,
   and headline style.
   ============================================================ */
.v2eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted-foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .4rem .9rem;
  margin-bottom: 1.4rem;
  letter-spacing: .01em;
}
.v2eyebrow svg { width: .95rem; height: .95rem; color: var(--primary); }

.v2trust {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.v2trust li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  color: var(--muted-foreground);
}
.v2trust svg { width: .95rem; height: .95rem; color: var(--green); }

/* Ensure v2 heading classes get the serif treatment on every page,
   not only where home-v2.css is loaded. */
.v2h1, .v2h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--foreground);
}

/* Inner-hero: fabric consistency with the main hero (blob + serif +
   eyebrow badge). The blobs are decorative and skipped if a photo
   is passed in via $hero['image']. */
.inner-hero { position: relative; overflow: hidden; }
.inner-hero .v2eyebrow { margin-bottom: 1rem; }

/* ============================================================
   v7.6 - Language switcher (i18n)
   ============================================================
   A minimal, dropdown-style language switcher that lives in the
   header CTA cluster. Uses logical properties throughout so it
   flips cleanly with dir="rtl" on <html>. Also provides an
   inline pill variant used in the mobile drawer.
   ============================================================ */

.lang-switch {
  position: relative;
  display: inline-block;
  font-family: inherit;
}

.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  background: transparent;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lang-switch__toggle:hover,
.lang-switch__toggle:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.32);
  outline: none;
}

.lang-switch__globe,
.lang-switch__caret {
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}
.lang-switch__globe svg,
.lang-switch__caret svg {
  width: 0.95em;
  height: 0.95em;
}
.lang-switch__caret {
  transition: transform 0.2s ease;
}
.lang-switch__toggle[aria-expanded="true"] .lang-switch__caret {
  transform: rotate(180deg);
}

.lang-switch__current {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.lang-switch__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 11rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--card, #fff);
  color: var(--foreground, #0d0d0d);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 2px 6px -2px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.lang-switch__toggle[aria-expanded="true"] + .lang-switch__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-switch__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.2;
}

.lang-switch__item:hover,
.lang-switch__item:focus-visible {
  background: var(--muted, #f5f5f4);
  outline: none;
}

.lang-switch__item.is-current {
  background: var(--muted, #f5f5f4);
  font-weight: 600;
}

.lang-switch__item-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.4rem;
  padding-inline: 0.4rem;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted-foreground, #57534e);
  background: transparent;
}

.lang-switch__item-label {
  flex: 1 1 auto;
}

.lang-switch__item-check {
  display: inline-flex;
  align-items: center;
  color: var(--primary, #10a37f);
}
.lang-switch__item-check svg {
  width: 0.95em;
  height: 0.95em;
}

/* Inline variant (used inside the mobile drawer) --------------- */
.lang-switch--inline {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}
.lang-switch--inline .lang-switch__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 100px;
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  background: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lang-switch--inline .lang-switch__link:hover,
.lang-switch--inline .lang-switch__link:focus-visible {
  background: var(--muted, #f5f5f4);
  border-color: var(--border, rgba(0, 0, 0, 0.2));
  outline: none;
}
.lang-switch--inline .lang-switch__link.is-current {
  background: var(--foreground, #0d0d0d);
  color: var(--background, #fff);
  border-color: var(--foreground, #0d0d0d);
}
.lang-switch--inline .lang-switch__code {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.7rem;
  opacity: 0.85;
}

/* When the switcher lives inside the dark header nav__cta, the menu
   still needs to render on a light card. The rules above already
   colour the menu with var(--card)/var(--foreground) so this Just Works.
*/

/* Small screens: hide the header switcher, it moves to the drawer. */
@media (max-width: 900px) {
  .nav__cta .lang-switch {
    display: none;
  }
}
/* ============================================================
   v7.6.2 - Language switcher legibility on dark header
   ============================================================ */

.lang-switch__toggle {
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lang-switch__toggle:hover,
.lang-switch__toggle:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.lang-switch__globe,
.lang-switch__caret {
  opacity: 0.9;
}
.lang-switch__toggle:hover .lang-switch__globe,
.lang-switch__toggle:hover .lang-switch__caret,
.lang-switch__toggle:focus-visible .lang-switch__globe,
.lang-switch__toggle:focus-visible .lang-switch__caret {
  opacity: 1;
}

.lang-switch__current {
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* Menu popup: make the divider between menu and header a bit crisper. */
.lang-switch__menu {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 14px 36px -8px rgba(0, 0, 0, 0.24), 0 2px 6px -2px rgba(0, 0, 0, 0.12);
}