/* Stemwet — landingspagina.
   ------------------------------------------------------------------------
   Het ontwerp komt uit het logo: vijf figuren die samen een kroon vormen, van
   cyaan via blauw naar violet, met een woordmerk in bijna-zwart blauw. Drie
   dingen volgen daaruit en verklaren de rest van dit bestand.

   1. Het logo leeft op wit. De pagina dus ook. Een donkere achtergrond vecht
      met een verzadigd verloop; op wit mag het verloop het werk doen.
   2. De vormen in het logo zijn rond — cirkels en capsules, geen hoeken. Alle
      kaarten hebben daarom een grote radius en alle knoppen en labels zijn
      pillen.
   3. De grijzen trekken naar lila in plaats van naar blauwgrijs, zodat ze bij
      het violet horen en er niet naast liggen.

   Contrast is doorgerekend, niet op gevoel gekozen. Het verloop in letters
   (--verloop-tekst) mist bewust het echte cyaan van het logo: dat haalt op wit
   maar 2,4 en is zelfs voor een kop te licht. De donkerste stap daar is
   #0095E8 (3,3), en dat is het minimum voor grote tekst. Voor vlakken mag het
   volle verloop wel, want daar staat witte tekst op of niets.
   ------------------------------------------------------------------------ */
:root {
  /* De vijf tinten van de kroon, links naar rechts. Dezelfde reeks als
     tabTinten in constants/colors.ts, waarmee de app zijn tabbalk kleurt. */
  --k1: #00b0fe;
  --k2: #1582f7;
  --k3: #587bf3;
  --k4: #7e70f1;
  --k5: #a25ff8;

  --verloop: linear-gradient(100deg, var(--k1) 0%, var(--k2) 28%, var(--k3) 52%, var(--k4) 76%, var(--k5) 100%);
  --verloop-tekst: linear-gradient(100deg, #0095e8 0%, #2b6bee 45%, #7734f4 100%);
  --verloop-zacht: linear-gradient(120deg, #e6f6ff 0%, #eaf0ff 45%, #f3ebff 100%);

  /* Inkt uit het woordmerk (#041329), een tikje opgelicht zodat lange stukken
     tekst niet hard worden. */
  --inkt: #0a1024;
  --inkt-2: #4a5578;
  --violet: #7734f4;
  --violet-diep: #6423d6;

  --wit: #ffffff;
  --grond: #f6f7fc;
  --lijn: #e7e9f5;
  --lijn-2: #eef0fa;

  --r-s: 14px;
  --r: 22px;
  --r-l: 30px;
  --schaduw: 0 1px 2px rgba(10,16,36,.04), 0 12px 32px -18px rgba(76,52,180,.28);
  --schaduw-op: 0 2px 6px rgba(10,16,36,.05), 0 28px 60px -26px rgba(76,52,180,.42);

  --max: 1140px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  color: var(--inkt-2);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--violet-diep); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--inkt); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -0.025em; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--max), calc(100% - 2.5rem)); margin-inline: auto; }
.muted { color: var(--inkt-2); }

/* De bovenregel van een sectie, in het verloop van het logo. */
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: .9rem;
  background: var(--verloop-tekst); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Een zinsdeel in de kleuren van de kroon. Alleen voor koppen: op tekstformaat
   zou het verloop onleesbaar worden. */
.verloop {
  background: var(--verloop-tekst); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------- knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: .98rem;
  font-family: inherit; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--verloop); background-size: 160% 100%; color: #fff;
  box-shadow: 0 10px 24px -10px rgba(96,60,230,.65); }
.btn-primary:hover { background-position: 100% 0; box-shadow: 0 14px 30px -10px rgba(96,60,230,.75); }
.btn-secondary { background: var(--wit); color: var(--inkt); border-color: var(--lijn); box-shadow: var(--schaduw); }
.btn-secondary:hover { border-color: #d6dbf0; }
.btn-wit { background: #fff; color: var(--violet-diep); box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); }
.btn-wit:hover { background: #f6f2ff; }

/* ------------------------------------------------------------- navigatie */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--lijn-2); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .55rem; color: var(--inkt); font-weight: 800;
  font-size: 1.2rem; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
/* De kroon hangt optisch laag doordat de boog onderaan het zwaartepunt legt;
   een pixel omhoog zet hem gelijk met het woordmerk. Dezelfde correctie als in
   HeaderKroon.tsx in de app. */
.brand img { width: 36px; height: 23px; object-fit: contain; transform: translateY(-1px); }
.nav-links { display: flex; align-items: center; gap: 1.7rem; font-size: .96rem; font-weight: 600; }
.nav-links a:not(.btn) { color: var(--inkt-2); }
.nav-links a:not(.btn):hover { color: var(--inkt); text-decoration: none; }
.nav .btn { padding: .62rem 1.2rem; font-size: .92rem; }
@media (max-width: 820px) { .nav-links a:not(.btn) { display: none; } .nav .wrap { height: 64px; } }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; padding: 4.5rem 0 5.5rem; }
/* Twee zachte vlekken in de kleuren van de kroon; het verloop van het logo,
   uitgesmeerd, in plaats van een donker vlak. */
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.hero::before { width: 620px; height: 620px; top: -300px; left: -180px; background: rgba(0,176,254,.22); }
.hero::after  { width: 680px; height: 680px; top: -260px; right: -220px; background: rgba(162,95,248,.24); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 3.5rem; align-items: center; }
.hero h1 { margin-bottom: .55rem; }
.hero .lead { font-size: 1.16rem; max-width: 32rem; margin-bottom: 2rem; }
.hero .acties { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2rem; }
.trust { display: flex; flex-wrap: wrap; gap: .55rem 1.15rem; font-size: .88rem; font-weight: 600; color: var(--inkt-2); }
.trust span { display: inline-flex; align-items: center; gap: .4rem; }
.trust span::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--verloop); flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
@media (max-width: 940px) {
  .hero { padding: 3rem 0 4rem; }
  .hero .wrap { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Het beeld naast de kop: geen telefoonmaquette, maar de kaarten waar de app
   echt uit bestaat — een wetsvoorstel, de uitslag en je overeenkomst. */
.toon { position: relative; display: grid; gap: .9rem; }
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: 1.15rem 1.25rem;
  box-shadow: var(--schaduw); }
.kaart--op { box-shadow: var(--schaduw-op); }
.kaart .kop { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.pil { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700;
  padding: .28rem .7rem; border-radius: 999px; background: var(--grond); color: var(--inkt-2); border: 1px solid var(--lijn); }
.pil--merk { background: #f0edff; color: var(--violet-diep); border-color: #e0d8ff; }
.pil--live { background: #ffeef0; color: #c0243c; border-color: #ffd9de; }
.pil--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e11d48; }
.kaart .titel { font-weight: 800; color: var(--inkt); font-size: 1.02rem; line-height: 1.32; letter-spacing: -0.015em; margin-bottom: .3rem; }
.kaart .meta { font-size: .82rem; color: var(--inkt-2); margin-bottom: .85rem; }
.balken { display: grid; gap: .5rem; }
.balk { display: grid; grid-template-columns: 3.4rem 1fr 2.6rem; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 600; }
.balk .spoor { height: 10px; border-radius: 999px; background: var(--lijn-2); overflow: hidden; }
.balk .vul { height: 100%; border-radius: 999px; background: var(--verloop); background-size: 260% 100%; }
.balk .vul--tegen { background: #cfd5ea; }
.balk .n { text-align: right; color: var(--inkt); }
.fracties { display: flex; flex-wrap: wrap; gap: .35rem; }
/* De kaarten trappen naar rechts af langs één rechterlijn: dat leest als een
   stapel die naar voren komt, terwijl twee kanten laten inspringen alleen maar
   scheef staat. */
@media (min-width: 941px) {
  .toon .kaart:nth-child(2) { margin-left: 2.6rem; }
  .toon .kaart:nth-child(3) { margin-left: 5.2rem; }
}
/* De route van een wetsvoorstel: label en balk, geen getal. */
.balken.route .balk { grid-template-columns: 6.2rem 1fr; }

/* --------------------------------------------------------------- secties */
section { padding: 5.5rem 0; }
section.grond { background: var(--grond); }
.kop-blok { max-width: 42rem; margin-bottom: 3rem; }
.kop-blok.midden { margin-inline: auto; text-align: center; }
.kop-blok p { font-size: 1.08rem; margin: 0; }

/* Cijferstrook: geen kader, alleen ruimte en het verloop in de getallen. */
.cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.cijfer b { display: block; font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  background: var(--verloop-tekst); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cijfer span { display: block; margin-top: .3rem; font-size: .95rem; }
@media (max-width: 760px) { .cijfers { grid-template-columns: 1fr; gap: 1.6rem; text-align: center; } }

/* Functies als bento: één brede kaart bovenaan, daarna twee rijen van drie.
   Negen gelijke tegels lezen als een muur; dit geeft de lijst een ritme. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.bento .vak { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r);
  padding: 1.6rem; transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease; }
.bento .vak:hover { transform: translateY(-3px); box-shadow: var(--schaduw-op); border-color: #dcdff0; }
.bento .vak h3 { margin-bottom: .35rem; }
.bento .vak p { margin: 0; font-size: .95rem; }
.bento .breed { grid-column: span 2; display: grid; grid-template-columns: 1fr .85fr; gap: 1.6rem; align-items: center; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .breed { grid-column: span 2; grid-template-columns: 1fr; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bento .breed { grid-column: span 1; } }

/* Het icoon staat in een capsule met het verloop van de kroon; elk vak pakt
   een andere plek in dat verloop, zodat de reeks van links naar rechts
   dezelfde overgang maakt als het logo. */
.ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1rem;
  color: #fff; background: var(--verloop); background-size: 900% 100%; }
.ico svg { width: 21px; height: 21px; }

/* ---------------------------------------------------------------- stappen */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; counter-reset: stap; }
@media (max-width: 820px) { .stappen { grid-template-columns: 1fr; } }
.stap { position: relative; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: 1.7rem 1.5rem; }
.stap::before {
  counter-increment: stap; content: counter(stap);
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; margin-bottom: 1rem;
  font-size: 1.05rem; font-weight: 800; color: #fff; background: var(--verloop); background-size: 300% 100%;
}
.stap:nth-child(2)::before { background-position: 50% 0; }
.stap:nth-child(3)::before { background-position: 100% 0; }
.stap p { margin: 0; font-size: .96rem; }

/* ---------------------------------------------------------------- bronnen */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 2.5rem; } }
.lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.lijst li { display: grid; grid-template-columns: 30px 1fr; gap: .9rem; align-items: start; }
.lijst .bol { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-top: .1rem;
  font-size: .82rem; font-weight: 800; color: #fff; background: var(--verloop); background-size: 300% 100%; }
.lijst li:nth-child(2) .bol { background-position: 50% 0; }
.lijst li:nth-child(3) .bol { background-position: 100% 0; }
.lijst strong { color: var(--inkt); }
.notitie { background: var(--verloop-zacht); border: 1px solid #e4e7fb; border-radius: var(--r); padding: 1.6rem 1.7rem; }
.notitie p:last-child { margin: 0; }
.notitie strong { color: var(--inkt); }

/* -------------------------------------------------------------- slotband */
.slot { padding: 0 0 5.5rem; }
.slot .paneel { position: relative; overflow: hidden; border-radius: var(--r-l); text-align: center;
  padding: 4rem 1.5rem; background: var(--verloop); color: #fff; }
.slot .kroon { position: absolute; left: 50%; top: 52%; width: 620px; max-width: 130%;
  transform: translate(-50%, -50%); opacity: .16; pointer-events: none; user-select: none;
  filter: brightness(0) invert(1); }
.slot .binnen { position: relative; }
.slot h2 { color: #fff; }
.slot p { color: rgba(255,255,255,.9); max-width: 34rem; margin: 0 auto 1.8rem; }

/* ---------------------------------------------------------------- footer */
footer { background: var(--inkt); color: rgba(255,255,255,.66); padding: 3.5rem 0 2rem; font-size: .95rem; }
footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 780px) { footer .wrap { grid-template-columns: 1fr; gap: 1.8rem; } }
footer h4 { color: #fff; margin: 0 0 .8rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
footer a { color: rgba(255,255,255,.72); display: block; margin-bottom: .5rem; }
footer a:hover { color: #fff; text-decoration: none; }
/* Het woordmerk in de voettekst staat in letters en niet als plaatje: het
   logobestand schrijft "StemWet" met een hoofdletter W, en de naam is Stemwet.
   Twee spellingen onder elkaar in dezelfde voettekst leest als een fout. Het
   kroontje ernaast is wel het echte merk. */
footer .merk { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .9rem;
  color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em; }
footer .merk:hover { text-decoration: none; }
footer .merk img { width: 46px; height: 30px; object-fit: contain; transform: translateY(-2px); }
footer .over { max-width: 24rem; }
footer .onder { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.13); padding-top: 1.4rem; margin-top: .6rem;
  font-size: .84rem; color: rgba(255,255,255,.5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }

/* ------------------------------------------- juridische pagina's en hulp */
.doc { padding: 3.5rem 0 5rem; background: var(--grond); }
.doc .wrap { display: grid; grid-template-columns: 250px 1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .doc .wrap { grid-template-columns: 1fr; gap: 1.5rem; } }
.toc { position: sticky; top: 92px; font-size: .93rem; }
.toc a { display: block; color: var(--inkt-2); padding: .32rem 0; font-weight: 600; }
.toc a:hover { color: var(--violet-diep); text-decoration: none; }
.toc h4 { margin: 0 0 .6rem; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-2); font-weight: 800; }
article { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-l);
  padding: 2.8rem clamp(1.3rem, 4vw, 3.2rem); box-shadow: var(--schaduw); }
article h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
article h2 { font-size: 1.35rem; margin-top: 2.6rem; scroll-margin-top: 96px; }
article .updated { font-size: .92rem; margin-bottom: 1.2rem; }
article .intro { font-size: 1.1rem; }
article :is(ul, ol) { margin: 0 0 1em; padding-left: 1.35rem; }
article ol li { padding-left: .2rem; }
article ol li::marker { font-weight: 800; color: var(--violet-diep); }
article li { margin-bottom: .4rem; }
.concept { background: #fff7ed; border: 1px solid #fed7aa; color: #b45309; border-radius: var(--r-s);
  padding: .8rem 1.1rem; font-size: .92rem; margin-bottom: 1.5rem; }

.support-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  background: var(--verloop-zacht); border: 1px solid #e4e7fb; border-radius: var(--r); padding: 1.2rem 1.4rem; margin: 1.8rem 0 2.4rem; }
.support-cta strong { color: var(--inkt); }
.support-cta p { margin: .2rem 0 0; font-size: .93rem; }
.faq { border-top: 1px solid var(--lijn); }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary { cursor: pointer; list-style: none; padding: 1.05rem 2.2rem 1.05rem 0; position: relative;
  font-weight: 700; color: var(--inkt); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .4rem; top: 1.45rem; width: .5rem; height: .5rem;
  border-right: 2.2px solid var(--violet); border-bottom: 2.2px solid var(--violet); transform: rotate(45deg);
  transition: transform .16s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--violet-diep); }
.faq details p { margin: 0 0 .85rem; }
.faq details p:last-child { margin-bottom: 1.25rem; }