/* =========================================================
   ai-d3signer.studio
   Alle kleuren staan in :root. Wil je een ander palet?
   Pas --brand-1/2/3 aan; het logo (SVG) kleurt automatisch mee.
   ========================================================= */

:root {
  /* Merkkleuren — palet van de referentiesite (HackerRank / Ramotion) */
  --brand-1: #BFCDCF;   /* licht mineraalgrijs */
  --brand-2: #5CAB91;   /* zacht groen        */
  --brand-3: #15D857;   /* signaalgroen       */

  --accent:     var(--brand-3);   /* knoppen, vinkjes, accenten */
  --accent-ink: #011008;          /* tekst óp het signaalgroen  */

  /* Vorige palet (uit het logo) — plak terug om om te schakelen:
     --brand-1: #22D3EE; --brand-2: #7C5CFF; --brand-3: #F046C6;
     --accent: var(--brand-2); --accent-ink: #FFFFFF;              */

  /* Basis */
  --bg:        #010303;
  --bg-alt:    #050B09;
  --surface:   #0A1210;
  --surface-2: #0F1A16;
  --line:      rgba(191, 205, 207, .11);
  --line-soft: rgba(191, 205, 207, .07);

  --text:  #E9F1EE;
  --muted: #93A9A3;

  --grad: linear-gradient(115deg, var(--brand-1), var(--brand-2) 48%, var(--brand-3));
  --radius:    18px;
  --radius-lg: 26px;
  --shell:     1180px;

  /* Fraunces draagt de koppen: variabel, met cursief en twee eigenzinnige
     assen. SOFT 0 houdt de punten scherp, WONK 1 zet de scheve vormen aan
     die de letter zijn handgemaakte karakter geven — dat is precies waarom
     hij hier staat en niet de zoveelste grotesk.
     Inter doet de lopende tekst en alle kleine functionele tekst: knoppen,
     tags, stapnummers, marquee. Daar wordt een schreefletter papperig. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

img, svg { max-width: 100%; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.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;
}

.skip-link {
  position: absolute; left: 50%; top: -60px;
  transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--line);
  padding: .7rem 1.2rem; border-radius: 0 0 12px 12px;
  z-index: 200; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}
.shell-narrow { max-width: 820px; }

.section { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.section-alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--line-soft);
}

.section-head { max-width: 700px; margin-bottom: clamp(48px, 6vw, 76px); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  background: var(--accent);
  color: var(--accent-ink);
  padding: .25em .7em;
  border-radius: 999px;
  letter-spacing: .06em;
}

.section-title { font-size: clamp(2rem, 4.2vw, 3.15rem); font-weight: 700; }

.section-sub {
  color: var(--muted);
  font-size: 1.075rem;
  margin-top: 20px;
  max-width: 60ch;
}
.section-sub strong { color: var(--text); font-weight: 600; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn-sm { padding: .62rem 1.2rem; font-size: .9rem; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 30px -12px rgba(21, 216, 87, .75);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: #2BEB6C;
  box-shadow: 0 18px 44px -14px rgba(21, 216, 87, .9);
}

.btn-ghost {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(6, 7, 12, .82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 78px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 46px; height: 31px; flex: none; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -.03em;
}
.brand-tld { color: var(--muted); font-weight: 500; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav > a:not(.btn) {
  font-size: .96rem;
  color: var(--muted);
  position: relative;
  transition: color .2s;
}
.nav > a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  height: 2px; width: 0;
  background: var(--grad);
  border-radius: 2px;
  transition: width .28s var(--ease);
}
.nav > a:not(.btn):hover,
.nav > a.is-active { color: var(--text); }
.nav > a:not(.btn):hover::after,
.nav > a.is-active::after { width: 100%; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  margin: 3px auto;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(104px, 10.5vw, 136px);
  /* Ruimte onder de tekst waar de dirigent staat.

     Moet meeschalen met de vensterbreedte: de foto vult de breedte, dus
     alles erin wordt groter naarmate het venster breder wordt, en zijn
     hoofd komt verder van de onderrand te staan. In de foto zit zijn kruin
     op 37,7% van de beeldhoogte vanaf onderen; bij een breedtevullende
     foto is dat 37,7vw. Plus wat lucht eronder: 42vw.

     Bewust géén bovengrens: elke vaste grens gaat op een breed genoeg
     scherm knellen, want de foto blijft groeien terwijl de grens dat niet
     doet. Precies daarop liep het eerder stuk boven ~1350px breed. */
  padding-bottom: max(265px, 42vw);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  top: -220px; left: 50%;
  width: min(1100px, 130vw); height: 620px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 30% 50%, rgba(92, 171, 145, .26), transparent 60%),
    radial-gradient(circle at 55% 40%, rgba(21, 216, 87, .24), transparent 62%),
    radial-gradient(circle at 75% 55%, rgba(191, 205, 207, .12), transparent 60%);
  filter: blur(30px);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; text-align: center; }
.hero-inner .eyebrow { justify-content: center; }

.hero-title {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  font-weight: 500;
  max-width: 32ch;
  margin-inline: auto;
}
/* De cursief breekt de kop open en haalt hem uit het generieke. Iets
   lichter dan de rest, want de schuine vormen dragen al genoeg gewicht. */
.hero-title em {
  font-style: italic;
  font-weight: 400;
}

.hero-sub {
  color: var(--muted);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  max-width: 72ch;
  margin: 20px auto 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

/* ---------- De dirigent ---------- */
.stage {
  --stage-photo: url('../img/hero-dirigent.webp');

  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  /* Onder 55,8vw blijft het schalen breedte-gedreven en dus voorspelbaar;
     52vw houdt daar marge op. De ondergrens is voor smalle schermen, waar
     de foto juist op hoogte schaalt en de zijkanten wegvallen. */
  height: max(340px, 52vw);
  /* De vervaging mag zijn hoofd niet raken — daarom kort gehouden */
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 100%);
}
.stage-svg {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

/* Fotolaag — pas zichtbaar zodra .stage class "has-photo" krijgt */
.stage-photo { display: none; }

.stage.has-photo .stage-photo {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--stage-photo);
  background-size: cover;
  background-position: center bottom;
}
/* Kleurzweem zodat elke foto in het palet valt en de tekst leesbaar blijft */
.stage.has-photo .stage-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 70% at 50% 60%, transparent, rgba(1, 3, 3, .82) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 26%, transparent 68%, var(--bg) 100%),
    linear-gradient(to bottom, rgba(21, 216, 87, .10), rgba(92, 171, 145, .06));
}
/* Met foto is de hele getekende scène overbodig; bogen, sporen en deeltjes
   blijven staan en liggen over de foto heen */
.stage.has-photo .drawn { display: none; }

.orchestra { fill: #000402; opacity: .92; }
.orchestra .bow,
.orchestra .stand path {
  stroke: #000402;
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
}
.orchestra .stand rect { fill: #000402; }

.conductor { fill: #000301; }
.conductor .arm {
  stroke: #000301;
  stroke-width: 27;
  stroke-linecap: round;
  fill: none;
}
.conductor .collar {
  stroke: var(--brand-1);
  stroke-width: 3;
  stroke-opacity: .30;
  fill: none;
}
.conductor .rim {
  stroke: var(--brand-2);
  stroke-width: 2.5;
  stroke-opacity: .38;
  fill: none;
}
.conductor .baton {
  stroke: var(--brand-1);
  stroke-width: 3;
  stroke-opacity: .55;
  stroke-linecap: round;
  fill: none;
}

.beam {
  fill: none;
  stroke: url(#beam);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 42 100;
  stroke-dashoffset: 100;
  animation: sweep 7.5s var(--ease) infinite;
  animation-delay: var(--delay, 0s);
}
.beam-thin { stroke-width: 3; opacity: .7; }

@keyframes sweep {
  0%        { stroke-dashoffset: 100; opacity: 0; }
  12%       { opacity: 1; }
  62%       { opacity: 1; }
  100%      { stroke-dashoffset: -46; opacity: 0; }
}

.particles circle {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 3.6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.particles circle:nth-child(3n) { fill: var(--brand-1); }
.particles circle:nth-child(5n) { fill: var(--brand-2); }

@keyframes twinkle {
  0%, 100% { opacity: 0;          transform: scale(.3) translateY(4px); }
  50%      { opacity: var(--o, 1); transform: scale(1)  translateY(-4px); }
}

/* ---------- Cijferband ---------- */
.factband {
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(34px, 5vw, 52px) 0;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 6vw, 72px);
}
.hero-stats li { text-align: center; }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label { color: var(--muted); font-size: .92rem; }

/* ---------- Marquee ---------- */
.marquee {
  padding: 22px 0;
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 46px;
  width: max-content;
  animation: scroll-x 42s linear infinite;
}
.marquee-track span {
  font-family: var(--font-body);
  font-size: .92rem;
  letter-spacing: .04em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 46px;
  white-space: nowrap;
}
.marquee-track span::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .6;
}
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---------- Kaarten ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px 36px;
  transition: transform .35s var(--ease), border-color .35s, background-color .35s;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--grad);
  opacity: 0;
  transition: opacity .35s;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, .16);
  background: var(--surface-2);
}
.card:hover::before { opacity: 1; }

.card-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: linear-gradient(150deg, rgba(21, 216, 87, .16), rgba(191, 205, 207, .08));
  border: 1px solid var(--line);
  color: var(--accent);
  margin-bottom: 22px;
}
.card-icon svg { width: 26px; height: 26px; }

.card h3 { font-size: 1.45rem; font-weight: 600; margin-bottom: 12px; }
.card > p { color: var(--muted); font-size: .99rem; }

.ticks { margin-top: 22px; display: grid; gap: 11px; }
.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: .95rem;
  color: var(--muted);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: .52em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  border-radius: 1px;
}

/* ---------- AI-briefing ---------- */
.briefing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.signup {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  max-width: 460px;
}
.signup input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .95rem 1.3rem;
  color: var(--text);
  font: inherit;
  font-size: .98rem;
  min-width: 0;
  transition: border-color .25s, background-color .25s;
}
.signup input::placeholder { color: #5E6785; }
.signup input:focus { border-color: var(--accent); background: var(--surface-2); }
.signup input.is-invalid { border-color: #FF5C7A; }

.signup-note {
  grid-column: 1 / -1;
  font-size: .84rem;
  color: var(--muted);
  padding-left: 4px;
}
.signup-note.is-success { color: var(--accent); }
.signup-note.is-error { color: #FF8095; }

.briefing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.edition {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px 26px;
  transition: transform .3s var(--ease), border-color .3s;
}
.edition:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .16); }

.edition-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.tag {
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(21, 216, 87, .35);
  border-radius: 999px;
  padding: .2em .7em;
}
.edition-day { font-size: .8rem; color: var(--muted); }
.edition h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: 9px; }
.edition p { font-size: .92rem; color: var(--muted); }

/* ---------- Stappen ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.step {
  background: var(--bg);
  padding: 34px 28px 40px;
  transition: background-color .3s;
}
.step:hover { background: var(--surface); }
.step-num {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step h3 { font-size: 1.22rem; font-weight: 600; margin: 14px 0 10px; }
.step p { color: var(--muted); font-size: .95rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 24px;
  transition: border-color .25s;
}
.faq details[open] { border-color: rgba(255, 255, 255, .18); }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 20px 34px 20px 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: 4px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--brand-1);
  border-bottom: 2px solid var(--brand-1);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq details p { color: var(--muted); font-size: .98rem; padding-bottom: 22px; max-width: 68ch; }

/* ---------- CTA ---------- */
.cta {
  position: relative;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 7vw, 84px) clamp(24px, 5vw, 70px);
  overflow: hidden;
}
.cta-glow {
  position: absolute;
  top: -180px; left: 50%;
  width: 720px; height: 400px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 35% 60%, rgba(21, 216, 87, .24), transparent 62%),
    radial-gradient(circle at 65% 45%, rgba(92, 171, 145, .22), transparent 62%);
  filter: blur(40px);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta-mark { width: 76px; height: 51px; margin-bottom: 24px; }
.cta h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); font-weight: 700; }
.cta > p { color: var(--muted); max-width: 56ch; margin: 20px auto 0; }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line-soft);
  padding-top: 66px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 54px;
}
.footer-brand p {
  color: var(--muted);
  font-size: .93rem;
  margin-top: 18px;
  max-width: 34ch;
}
.footer-col h4 {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: .94rem; color: var(--text); opacity: .8; transition: opacity .2s, color .2s; }
.footer-col a:hover { opacity: 1; color: var(--accent); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-block: 24px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: .85rem;
}

/* ---------- Scroll-animatie ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .briefing-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

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

  .nav {
    position: fixed;
    inset: 78px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 28px;
    background: rgba(6, 7, 12, .97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav > a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--line-soft); }
  .nav > a:not(.btn)::after { display: none; }
  .nav-cta { margin-top: 18px; align-self: flex-start; }

  .hero-stats { gap: 30px 40px; }
  .signup { grid-template-columns: 1fr; }
  .signup .btn { width: 100%; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .card { padding: 28px 24px 30px; }
}

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

  /* Bogen blijven staan in plaats van steeds opnieuw te tekenen */
  .beam { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .8; }
  .particles circle { opacity: .7; }
}