/* ============================================================
   LUCY'S WEB — CORE
   Het DNA. Dit bestand is op ELKE pagina hetzelfde.
   Elke pagina heeft daarnaast een eigen skin (css/<pagina>.css)
   die layout, typografie en sfeer compleet mag omgooien.

   Wat hier staat, verandert nooit:
   - de kleuren        (roze / geel / ink)
   - het logo          <LUCY'S WEB/>
   - de navigatie
   - de bel-knop
   - de footer
   - toegankelijkheid  (focus, contrast, reduced motion)
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Merkkleuren — vastgelegd in de huisstijl, niet aan te raken */
  --roze:       #ff4f8b;
  --roze-diep:  #e0356f;
  --roze-zacht: #fdeff4;
  --geel:       #ffd23f;
  --geel-diep:  #b9860b;
  --ink:        #16161a;
  --ink-2:      #26262d;
  --ink-3:      #33333d;
  --paper:      #ffffff;
  --backdrop:   #ececef;
  --muted:      #8b8b95;
  --label:      #6c6c76;
  --lijn:       #e7e7ec;

  /* Typografie — mono is de constante, display wisselt per pagina */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono",
          "Roboto Mono", Menlo, Consolas, monospace;
  --display: var(--mono); /* elke skin overschrijft dit */

  /* Pagina-variabelen: elke skin zet deze naar zijn eigen sfeer.
     Nav en footer lezen ze uit, zodat ze overal kloppen. */
  --pg-bg:   var(--paper);
  --pg-fg:   var(--ink);
  --pg-mut:  var(--muted);
  --pg-lijn: var(--lijn);

  /* Typografie: één schaal voor de hele site.
     Zes stappen in plaats van negenendertig losse formules. */
  --t-display: clamp(2.4rem, 6.4vw, 5.4rem);   /* paginatitels */
  --t-xl:      clamp(2rem, 4.6vw, 3.6rem);     /* sectiekoppen */
  --t-l:       clamp(1.6rem, 3.2vw, 2.4rem);   /* subkoppen */
  --t-m:       clamp(1.15rem, 1.9vw, 1.5rem);  /* kaartkoppen */
  --t-lead:    clamp(.95rem, 1.35vw, 1.06rem); /* inleidende alinea */
  --t-body:    .88rem;                          /* lopende tekst */
  --t-klein:   .8rem;                           /* bijschriften */
  --t-label:   .68rem;                          /* labels en tags */

  /* Vormtaal: verspringende omlijning */
  --ronding:  3px;      /* één randje voor alles, cirkels uitgezonderd */
  --vspr:     9px;      /* hoe ver de lijn verspringt */
  --lijn-dik: 2px;      /* dikte van die lijn */

  /* Schaduw: drie niveaus in plaats van elf losse recepten.
     De kleur wisselt per pagina, zodat het op licht én donker klopt. */
  --sk: rgba(0, 0, 0, .42);
  --schaduw-1: 0 2px 8px var(--sk);
  --schaduw-2: 0 10px 24px var(--sk);
  --schaduw-3: 0 22px 50px var(--sk);

  /* Ritme */
  --nav-h: 72px;
  --pad-x: clamp(20px, 5vw, 64px);
  --max:   1280px;
  --radius: 14px;

  /* Beweging */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --snel: .18s var(--ease);
  --traag: .55s var(--ease);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--mono);
  background: var(--pg-bg);
  color: var(--pg-fg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* ruimte voor de vaste bel-balk op mobiel */
  padding-bottom: env(safe-area-inset-bottom);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

/* ---------- 3. TOEGANKELIJKHEID ---------- */
:focus-visible {
  outline: 3px solid var(--geel);
  outline-offset: 3px;
  border-radius: var(--ronding);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

/* ---------- 4. HET LOGO ---------- */
/* Opgebouwd uit tekst, geen afbeelding: scherp op elk scherm,
   schaalt mee, en laadt zonder extra request. */
.lw-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  line-height: 1;
  flex-shrink: 0;
}

.lw-badge {
  background: var(--ink);
  border-radius: var(--ronding);
  padding: 8px 12px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: transform var(--snel);
}
.lw-badge .b1, .lw-badge .b3 { color: var(--roze); }
.lw-badge .b2 { color: var(--geel); }
.lw-logo:hover .lw-badge { transform: rotate(-4deg) scale(1.05); }

.lw-woord {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .13em;
  white-space: nowrap;
  color: var(--pg-fg);
}
.lw-woord .h { color: var(--roze); }
.lw-woord .s { color: var(--geel); }

.lw-payoff {
  display: block;
  margin-top: 5px;
  font-size: .53rem;
  letter-spacing: .17em;
  color: var(--pg-mut);
  font-weight: 700;
}
.lw-payoff i { color: var(--roze); font-style: normal; }

/* ---------- 5. NAVIGATIE ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--pad-x);
  background: color-mix(in srgb, var(--pg-bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--snel), background var(--snel);
}
.nav[data-scrolled="true"] { border-bottom-color: var(--pg-lijn); }

/* Creatief detail in plaats van drukte: een dunne balk onderaan de
   kopbalk die meeloopt met hoe ver je op de pagina bent. Roze loopt
   vol, geel is het stukje dat nog komt. */
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--voortgang, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--roze), var(--geel));
  transition: transform .08s linear;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 36px);
}
.nav-links a {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pg-mut);
  position: relative;
  padding: 6px 0;
  transition: color var(--snel);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--roze);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--snel);
}
.nav-links a:hover { color: var(--pg-fg); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* de pagina waar je nu bent krijgt geen streep maar een roze //,
   in dezelfde taal als het logo en de commentaarregels in de code */
.nav-links a[aria-current="page"] {
  color: var(--pg-fg);
  padding-left: 22px;
}
.nav-links a[aria-current="page"]::after { transform: scaleX(0); }
.nav-links a[aria-current="page"]::before {
  content: "//";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--roze);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ---------- 6. KNOPPEN ----------
   Eén middel door de hele site: een dicht blok met daaroverheen een
   lege rechthoek in de andere kleur, net verschoven. Wijs je 'm aan,
   dan schuift die lijn op z'n plek.

   Drie smaken, met een duidelijke rangorde:
     .btn-bel    roze blok, gele lijn      → de belangrijkste actie
     .btn-app    geel blok, roze lijn      → de tweede actie
     .btn-ghost  geen vulling, twee lijnen → alles wat minder telt
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--ronding);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--snel), filter var(--snel),
              background var(--snel), color var(--snel), box-shadow var(--snel);
}

/* de verspringende lijn is een los laagje boven de knop */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--lijn-dik) solid transparent;
  transform: translate(var(--vspr), var(--vspr));
  transition: transform var(--snel);
}
.btn:hover::after { transform: translate(0, 0); }
.btn:active { transform: translateY(1px); }

.btn-bel { background: var(--roze); color: #fff; box-shadow: var(--schaduw-1); }
.btn-bel::after { border-color: var(--geel); }
.btn-bel:hover { filter: brightness(1.06); box-shadow: var(--schaduw-2); }

/* WhatsApp krijgt bewust géén WhatsApp-groen: dat vloekt met roze/geel. */
.btn-app { background: var(--geel); color: var(--ink); box-shadow: var(--schaduw-1); }
.btn-app::after { border-color: var(--roze); }
.btn-app:hover { filter: brightness(1.04); box-shadow: var(--schaduw-2); }

.btn-ink { background: var(--ink); color: #fff; box-shadow: var(--schaduw-1); }
.btn-ink::after { border-color: var(--geel); }
.btn-ink:hover { box-shadow: var(--schaduw-2); }

.btn-ghost {
  background: transparent;
  color: var(--pg-fg);
  border: var(--lijn-dik) solid var(--roze);
}
.btn-ghost::after { border-color: var(--geel); }
.btn-ghost:hover { background: var(--roze); color: #fff; }

.btn-wit { background: #fff; color: var(--ink); box-shadow: var(--schaduw-1); }
.btn-wit::after { border-color: var(--ink); }

.btn-sm { padding: 11px 20px; font-size: .7rem; }

/* knoppen naast elkaar hebben extra lucht nodig, anders loopt de
   verspringende lijn over de buurman heen */
.hero-cta,
.gebaar-knoppen,
.cta-acties,
.vierde-acties,
.slot-btns,
.ovc-acties,
.kan-cta { gap: calc(var(--vspr) + 14px) !important; }

/* ---------- DE KNOP IN DE KOPBALK ---------- */
.nav-bel {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--roze);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--ronding);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: var(--schaduw-1);
  transition: filter var(--snel), box-shadow var(--snel);
}
.nav-bel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--lijn-dik) solid var(--geel);
  transform: translate(6px, 6px);
  transition: transform var(--snel);
}
.nav-bel:hover { filter: brightness(1.06); box-shadow: var(--schaduw-2); }
.nav-bel:hover::after { transform: translate(0, 0); }
/* ---------- 7. ACCENTBALK ---------- */
/* Het roze/gele streepje uit de e-mailhuisstijl. Terugkerend motief. */
.accent {
  display: flex;
  gap: 8px;
  align-items: center;
}
.accent span { height: 6px; border-radius: var(--ronding); display: block; }
.accent .p { width: 74px; background: var(--roze); }
.accent .y { width: 40px; background: var(--geel); }

/* ---------- 8. LABEL (het mono-kopje) ---------- */
.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  /* via de token, zodat hij op een telefoon meegroeit */
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pg-mut);
}
.label::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--roze);
  flex-shrink: 0;
}
.label.geel::before { background: var(--geel); }

/* ---------- 9. FOOTER ---------- */
.ft {
  background: var(--ink);
  color: #fff;
  padding: clamp(48px, 7vw, 80px) var(--pad-x) 32px;
  font-family: var(--mono);
}
.ft-in {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
}
.ft .lw-woord { color: #fff; }
.ft .lw-payoff { color: #8b8b96; margin-top: 8px; }
.ft h3 {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--geel);
  margin-bottom: 16px;
  font-weight: 700;
}
.ft-col p, .ft-col a {
  font-size: .84rem;
  color: #b6b6c0;
  line-height: 1.9;
  display: block;
  transition: color var(--snel);
}
.ft-col a:hover { color: var(--roze); }
.ft-col a.sterk { color: #fff; font-weight: 700; }
.ft-bot {
  max-width: var(--max);
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .7rem;
  letter-spacing: .1em;
  color: #6e6e79;
}
.ft-bot .streep { color: var(--roze); font-weight: 700; }

/* ============================================================
   DOPAMINE — de kleine extraatjes
   Confetti, glitters en een stuiterend logo. Staat allemaal
   bovenop de pagina en vangt nooit een klik af.
   ============================================================ */
.dop-laag {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

/* Een snipper bestaat uit twee lagen: de buitenste vliegt een boog
   door de lucht, de binnenste fladdert om zijn as. Dat samen geeft
   echt papier-in-de-wind in plaats van een blokje dat wegschiet. */
.dop-snipper {
  position: absolute;
  will-change: transform, opacity;
  animation: dop-boog 1.5s cubic-bezier(.16, .62, .3, 1) forwards;
}
.dop-snipper i {
  display: block;
  border-radius: var(--ronding);
  will-change: transform;
  animation: dop-fladder .55s linear infinite;
}

/* omhoog, boog maken, dan vallen */
@keyframes dop-boog {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }
  45% {
    transform: translate(calc(-50% + var(--dx) * .72), calc(-50% + var(--dy)))
               rotate(calc(var(--draai) * .5));
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + var(--val)))
               rotate(var(--draai));
    opacity: 0;
  }
}

/* het fladderen zelf: het snippertje draait om zijn lengteas */
@keyframes dop-fladder {
  0%, 100% { transform: rotateY(0deg)   rotateX(12deg); }
  50%      { transform: rotateY(180deg) rotateX(-12deg); }
}

/* rustig van boven naar beneden dwarrelen */
.dop-val { animation: dop-dwarrel 3s linear forwards; }
@keyframes dop-dwarrel {
  0% {
    transform: translate(-50%, 0) rotate(0deg);
    opacity: 0;
  }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx)), var(--val)) rotate(var(--draai));
    opacity: 0;
  }
}

.dop-glitter {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation: dop-fonkel .68s ease-out forwards;
}
@keyframes dop-fonkel {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: .85; }
  100% { transform: translate(-50%, calc(-50% + 16px)) scale(0); opacity: 0; }
}

.dop-stuiter { animation: dop-hop .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes dop-hop {
  0%, 100% { transform: translateY(0) rotate(0); }
  30%      { transform: translateY(-9px) rotate(-5deg); }
  60%      { transform: translateY(2px) rotate(3deg); }
}

/* ---------- HET BERICHTJE ----------
   Zwevende pil met een gekleurde rand die met de huisstijl meekleurt,
   een emoji in een eigen rondje, en een veerkrachtige opkomst. */
.dop-bordje {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 24px 11px 11px;
  border-radius: var(--ronding);

  /* Gradientrand met donkere vulling. Twee achtergronden over elkaar:
     de donkere tot aan de rand, de kleurverloop tót en met de rand.
     (Een gekleurd laagje met z-index:-1 werkt hier niet: de transform
     hieronder maakt een eigen stapelcontext, waardoor zo'n laagje juist
     over de donkere vulling heen valt.) */
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(18, 18, 23, .97), rgba(18, 18, 23, .97)) padding-box,
    linear-gradient(115deg, var(--roze), var(--geel)) border-box;

  box-shadow:
    0 18px 44px rgba(0, 0, 0, .42),
    0 2px 10px rgba(0, 0, 0, .22);

  animation: dop-veer .58s cubic-bezier(.22, 1.35, .38, 1);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}

.db-icoon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--roze), var(--geel));
  animation: dop-tik 2.4s ease-in-out infinite;
}
@keyframes dop-tik {
  0%, 100% { transform: scale(1) rotate(0deg); }
  15%      { transform: scale(1.16) rotate(-9deg); }
  30%      { transform: scale(1) rotate(0deg); }
}

.db-tekst {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  white-space: nowrap;
}

.dop-bordje.weg {
  opacity: 0;
  transform: translateX(-50%) translateY(16px) scale(.94);
}
@keyframes dop-veer {
  from { opacity: 0; transform: translateX(-50%) translateY(26px) scale(.86); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (max-width: 480px) {
  .dop-bordje { left: 12px; right: 12px; transform: none; justify-content: center; }
  .dop-bordje.weg { transform: translateY(16px) scale(.94); }
  .db-tekst { white-space: normal; }
  @keyframes dop-veer {
    from { opacity: 0; transform: translateY(26px) scale(.86); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* ---------- DE TIKBARE STREEPJES ---------- */
/* De roze/gele accentbalkjes zijn stiekem een knop. Ze zien er
   hetzelfde uit, maar reageren wel op je vinger. */
.dop-tikbaar {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--snel);
}
.dop-tikbaar:hover span { transform: scaleY(1.6); }
.dop-tikbaar span { transition: transform var(--snel); transform-origin: center; }
.dop-tikbaar:active { transform: scale(.94); }
.dop-tikbaar:focus-visible { outline: 3px solid var(--geel); outline-offset: 6px; border-radius: var(--ronding); }

/* ---------- FEESTMODUS ----------
   De merkkleuren zelf gaan door de regenboog. Omdat ze via
   variabelen door de hele site lopen, kleurt werkelijk alles mee:
   knoppen, koppen, randjes, alles. */
@property --roze { syntax: "<color>"; inherits: true; initial-value: #ff4f8b; }
@property --geel { syntax: "<color>"; inherits: true; initial-value: #ffd23f; }

html.feestmodus {
  animation: dop-kleurdraai 2.4s linear infinite;
}
@keyframes dop-kleurdraai {
  0%   { --roze: #ff4f8b; --geel: #ffd23f; }
  20%  { --roze: #ff8a3d; --geel: #5ed17a; }
  40%  { --roze: #5ed17a; --geel: #4fc3f7; }
  60%  { --roze: #4fc3f7; --geel: #9b7bff; }
  80%  { --roze: #9b7bff; --geel: #ff8a3d; }
  100% { --roze: #ff4f8b; --geel: #ffd23f; }
}

/* alles wiebelt een beetje mee */
html.feestmodus .lw-badge,
html.feestmodus .btn,
html.feestmodus .accent {
  animation: dop-wiebel .9s ease-in-out infinite;
}
@keyframes dop-wiebel {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2.5deg); }
  75%      { transform: rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dop-laag { display: none; }
  html.feestmodus { animation: none; }
  html.feestmodus .lw-badge,
  html.feestmodus .btn,
  html.feestmodus .accent { animation: none; }
}

/* ---------- 10. HULPKLASSEN ---------- */
.wrap { max-width: var(--max); margin: 0 auto; }
.roze { color: var(--roze); }
.geel { color: var(--geel); }

/* Verschijnt-bij-scrollen. main.js zet .in erop. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--traag), transform var(--traag);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 900px) {
  .ft-in { grid-template-columns: 1fr 1fr; }
  .ft-col.breed { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  /* de mono-labels stonden op 10,6px: op een telefoon net te klein om
     prettig te lezen, zeker in hoofdletters met veel letterafstand */
  :root { --nav-h: 62px; --t-label: .74rem; --t-klein: .84rem; }
  .lw-payoff { display: none; }
  .nav-bel { padding: 9px 16px; font-size: .7rem; }
}

/* Op smalle telefoons pasten logo én knop net niet naast elkaar:
   de knop liep 10px buiten beeld. Alles hier een maatje kleiner. */
@media (max-width: 430px) {
  .nav { padding: 0 15px; gap: 8px; }
  .lw-logo { gap: 9px; }
  .lw-badge { font-size: .9rem; padding: 7px 9px; border-radius: var(--ronding); }
  .lw-woord { font-size: .8rem; letter-spacing: .09em; }
  .nav-bel { padding: 9px 13px; font-size: .66rem; letter-spacing: .03em; }
}

@media (max-width: 520px) {
  .ft-in { grid-template-columns: 1fr; }
  .ft-bot { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   DE MEGA ROZE CURSOR
   Een roze blok dat je muis volgt. Door mix-blend-mode difference
   kleurt alles waar hij overheen gaat om: op donker wordt het roze,
   op licht wordt het groen. Boven iets klikbaars groeit hij, boven
   een invulveld wordt hij een gele streep zodat je ziet waar je typt.
   Alleen op apparaten met een echte muis.
   ══════════════════════════════════════════════════════════════ */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {

  body.cursor-aan,
  body.cursor-aan a,
  body.cursor-aan button,
  body.cursor-aan label,
  body.cursor-aan summary,
  body.cursor-aan input,
  body.cursor-aan select,
  body.cursor-aan textarea { cursor: none; }

  .rozecursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    background: var(--roze);
    border-radius: var(--ronding);
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transform: translate3d(-200px, -200px, 0);
    will-change: transform;
    transition:
      width   .2s var(--ease),
      height  .2s var(--ease),
      margin  .2s var(--ease),
      opacity .2s,
      background .16s;
  }

  /* boven een link of knop: mega */
  .rozecursor.groot {
    width: 108px;
    height: 108px;
    margin: -54px 0 0 -54px;
  }

  /* boven een invulveld: een gele typestreep */
  .rozecursor.tekst {
    width: 3px;
    height: 30px;
    margin: -15px 0 0 -1px;
    background: var(--geel);
    border-radius: 0;
  }

  /* even indrukken */
  .rozecursor.tik { background: var(--geel); }

  .rozecursor.weg { opacity: 0; }
}

/* Op de lichte pagina's zou difference groen opleveren, en groen hoort
   niet bij Lucy's Web. Daar tint de cursor dus roze in plaats van te
   inverteren. Op donker en op het roze van contact blijft difference. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body[data-skin="galerie"] .rozecursor,
  body[data-skin="warm"] .rozecursor { mix-blend-mode: multiply; }
}

/* ══════════════════════════════════════════════════════════════
   HET FEESTPANEEL
   Verschijnt als iemand de verstopte feestknop vindt. Groot, roze en
   niet te missen. De donkere kop bovenin draait hetzelfde pixellogo
   als de opening van de homepage, met een gescheurde onderrand zoals
   in het lab. De appknop is bewust roze noch groen: WhatsApp-groen
   hoort niet bij deze huisstijl.
   ══════════════════════════════════════════════════════════════ */
.feestpaneel {
  /* eigen kleuren, niet de tokens: tijdens de feestmodus lopen die door
     de regenboog en dan zou dit paneel groen worden */
  --fp-roze: #ff4f8b;
  --fp-geel: #ffd23f;
  --fp-ink:  #16161a;
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-x);
  background: rgba(8, 8, 11, .72);
  backdrop-filter: blur(6px);
  /* het scherm scrollt, niet de kaart zelf: anders zou de gele rand
     die buiten de kaart valt er een scrollbalk in duwen */
  overflow-y: auto;
  scrollbar-width: none;
  opacity: 0;
  transition: opacity .24s var(--ease);
}
.feestpaneel::-webkit-scrollbar { width: 0; display: none; }
.feestpaneel.open { opacity: 1; }

.fp-in {
  position: relative;
  width: min(430px, 100%);
  flex: 0 0 auto;
  background: var(--fp-roze);
  color: #fff;
  border-radius: var(--ronding);
  box-shadow: var(--schaduw-3);
  transform: translateY(16px) scale(.97);
  transition: transform .3s var(--ease);
}
.feestpaneel.open .fp-in { transform: translateY(0) scale(1); }

/* het gele blok dat net verspringt, zoals overal op de site */
.fp-in::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--lijn-dik) solid var(--fp-geel);
  border-radius: var(--ronding);
  transform: translate(var(--vspr), var(--vspr));
}

.fp-dicht {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: .75;
  transition: opacity var(--snel);
}
.fp-dicht:hover { opacity: 1; }

/* de donkere kop met het levende pixellogo, gescheurd afgesneden */
.fp-vlak {
  position: relative;
  background: #0d0d10;
  height: clamp(130px, 22vh, 170px);
  clip-path: polygon(
    0 0, 100% 0, 100% 86%,
    93% 97%, 86% 88%, 79% 98%, 72% 89%, 65% 97%, 58% 88%,
    51% 98%, 44% 89%, 37% 97%, 30% 88%, 23% 98%, 16% 89%,
    9% 97%, 4% 88%, 0 96%
  );
}
.fp-doek { display: block; width: 100%; height: 100%; }

.fp-body { padding: clamp(20px, 3vw, 30px) clamp(24px, 3.4vw, 34px) clamp(24px, 3.4vw, 34px); }

.fp-kop {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: .95;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.fp-uitleg {
  font-size: var(--t-body);
  line-height: 1.75;
  margin-bottom: 22px;
}
.fp-uitleg s { opacity: .62; }
.fp-uitleg strong {
  background: var(--fp-geel);
  color: var(--fp-ink);
  padding: 1px 7px;
  border-radius: var(--ronding);
}

.fp-label {
  display: block;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.fp-veld {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: var(--t-body);
  color: var(--fp-ink);
  background: #fff;
  border: var(--lijn-dik) solid var(--fp-ink);
  border-radius: var(--ronding);
  margin-bottom: 16px;
}
.fp-veld:focus-visible { outline: 3px solid var(--fp-geel); outline-offset: 2px; }

/* de appknop: donker met een gele rand, niet WhatsApp-groen */
.fp-app {
  display: block;
  text-align: center;
  padding: 15px 18px;
  font-size: var(--t-klein);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fp-geel);
  background: var(--fp-ink);
  border-radius: var(--ronding);
  box-shadow: var(--schaduw-2);
  transition: transform var(--snel), background var(--snel);
}
.fp-app:hover { transform: translateY(-2px); background: #000; }

.fp-fijn {
  font-size: var(--t-klein);
  line-height: 1.7;
  margin-top: 16px;
  opacity: .88;
}
.fp-fijn a { text-decoration: underline; color: #fff; }

@supports not (backdrop-filter: blur(6px)) {
  .feestpaneel { background: rgba(8, 8, 11, .9); }
}

/* ══════════════════════════════════════════════════════════════
   HET TEKEN OP DE NAAD
   Eén groot </> dat half in de laatste sectie en half in de footer
   hangt. Het zijn twee kopieën met exact dezelfde afmetingen: de
   bovenste toont alleen zijn bovenhelft, de onderste alleen zijn
   onderhelft. Omdat beide dozen met hun midden precies op de naad
   staan, sluiten de helften naadloos aan. Het verloop loopt over de
   volle hoogte, dus de kleur verandert dwars door de overgang heen.
   ══════════════════════════════════════════════════════════════ */
.naad-vak {
  position: relative;
  overflow: hidden;
}
.naad-vak > .wrap,
.naad-vak > .cta-in { position: relative; z-index: 2; }

.naad-teken {
  position: absolute;
  right: clamp(-40px, -2.5vw, 0px);
  z-index: 1;
  font-family: var(--display);
  font-size: clamp(200px, 31vw, 460px);
  line-height: .82;
  letter-spacing: -.05em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;

  /* fel boven de naad, en daaronder meteen wegzakkend in het zwart van
     de footer, zodat het geen gekleurd vlak wordt maar een teken dat
     in het donker verdwijnt */
  background: linear-gradient(180deg,
    var(--geel) 0%,
    var(--roze) 38%,
    #35353d 56%,
    #1c1c21 78%,
    var(--ink) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.naad-boven {
  bottom: 0;
  transform: translateY(50%);
  clip-path: inset(0 0 50% 0);
}
.naad-onder {
  top: 0;
  transform: translateY(-50%);
  clip-path: inset(50% 0 0 0);
}

.ft {
  position: relative;
  overflow: hidden;
}

/* De footer begon op elke pagina als een hard zwart vlak. Deze laag
   pakt de achtergrondkleur van de pagina waar je op staat en laat die
   naar beneden toe wegvallen in het zwart. Daardoor loopt roze, licht
   of donker allemaal netjes over in de footer, zonder rand. */
.ft::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(70px, 11vw, 150px);
  background: linear-gradient(180deg, var(--pg-bg), transparent);
  pointer-events: none;
  z-index: 0;
}

.ft-in,
.ft-bot { position: relative; z-index: 2; }

/* op smalle schermen zou het teken over de tekst heen vallen */
@media (max-width: 760px) {
  .naad-teken { opacity: .34; font-size: 46vw; }
}

/* ══════════════════════════════════════════════════════════════
   HET MENU OP MOBIEL
   De knop is jouw drie schuine strepen: /// Tik erop en het menu
   schuift over de pagina, met de pagina's als grote regels onder
   elkaar. Bij openen kantelen de strepen naar een kruis.
   ══════════════════════════════════════════════════════════════ */
.menu-knop {
  display: none;
  position: relative;
  z-index: 120;
  width: 46px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.menu-knop span {
  display: block;
  width: 4px;
  height: 22px;
  background: var(--pg-fg);
  border-radius: 1px;
  /* de schuinte maakt er drie slashes van in plaats van strepen */
  transform: skewX(-22deg);
  transition: transform var(--snel), opacity var(--snel), background var(--snel);
}
/* Alle drie dezelfde kleur: met drie verschillende kleuren leek het
   te veel op een ander logo, en zo past het bij de // in het menu. */
.menu-knop span { background: var(--roze); }

/* open: de buitenste twee kruisen elkaar, de middelste verdwijnt */
body.menu-open .menu-knop span:nth-child(1) { transform: translateX(9px) rotate(45deg); }
body.menu-open .menu-knop span:nth-child(2) { opacity: 0; transform: scaleY(0); }
body.menu-open .menu-knop span:nth-child(3) { transform: translateX(-9px) rotate(-45deg); }

@media (max-width: 780px) {
  .menu-knop { display: flex; }

  /* De kopbalk heeft normaal een blur-effect, en zo'n effect maakt hem
     het referentiekader voor alles wat erin vastgezet wordt. Het menu
     bleef daardoor binnen de balk hangen in plaats van het scherm te
     vullen. Zolang het menu open staat zetten we die blur dus uit. */
  body.menu-open .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--pg-bg);
  }

  /* het logo blijft boven het menu staan, zodat je altijd ziet waar je bent */
  body.menu-open .lw-logo { position: relative; z-index: 120; }
  /* de belknop zou onder het menu verdwijnen; die hoort er niet bij */
  body.menu-open .nav-bel { opacity: 0; pointer-events: none; }

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 110;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: calc(var(--nav-h) + 24px) clamp(24px, 8vw, 60px) 40px;
    background: var(--pg-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* dicht: weggeschoven en niet aanklikbaar */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .34s var(--ease), visibility .34s;
  }
  body.menu-open .nav-links {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-links a {
    width: 100%;
    padding: clamp(14px, 3.4vw, 22px) 0;
    font-size: clamp(1.5rem, 7vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: var(--pg-fg);
    border-bottom: 2px solid var(--pg-lijn);
  }
  .nav-links a:first-child { border-top: 2px solid var(--pg-lijn); }
  .nav-links a::after { display: none; }

  /* de pagina waar je bent houdt zijn roze // */
  .nav-links a[aria-current="page"] { padding-left: 42px; }
  .nav-links a[aria-current="page"]::before { font-size: inherit; }

  /* zolang het menu open is scrollt de pagina eronder niet mee */
  body.menu-open { overflow: hidden; }
}

/* De belknop uit de kopbalk verhuist op mobiel naar het menu zelf:
   in de balk pasten logo, knop en menuknop niet naast elkaar. */
.menu-bel { display: none; }

@media (max-width: 780px) {
  .nav-bel { display: none; }

  .nav-links .menu-bel {
    display: block;
    margin-top: clamp(20px, 5vw, 34px);
    padding: clamp(15px, 3.4vw, 20px) 22px;
    background: var(--roze);
    color: #fff;
    text-align: center;
    border: none;
    border-radius: var(--ronding);
    font-size: clamp(.86rem, 3.6vw, 1.05rem);
    letter-spacing: .04em;
    box-shadow: var(--schaduw-2);
  }
  .nav-links .menu-bel:first-child { border-top: none; }
}