/* Landingspagina van Drafter (index.html): saliegroen, mintwit en olijfgoud, met doorscroll-uitleg, kleine animaties en een lichte analoge laag. */
@font-face { font-family: 'Archivo'; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('/fonts/archivo-latin-wdth-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sentient'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/Sentient-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Sentient'; font-weight: 400; font-style: italic; font-display: swap; src: url('/fonts/Sentient-Italic.woff2') format('woff2'); }

:root { --bg: #fffafa; --ink: #5E2A00; --ink-2: #7C502E; --ink-3: #9a7a62; --lijn: #eddfda; --goud: #946500; --goud-licht: #f6ead0; --roze: #f6e4e4; --wit: #fff;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --serif: 'Sentient', Georgia, serif;
  --schaduw: 0 1px 2px rgba(94,42,0,.05), 0 8px 24px -16px rgba(94,42,0,.18); --schaduw-op: 0 2px 4px rgba(94,42,0,.06), 0 16px 32px -16px rgba(94,42,0,.28); }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body { color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* De achtergrond: zachte kleurvlekken die heel langzaam drijven. */
body::before { content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none; filter: blur(24px);
  background:
    radial-gradient(28% 28% at 14% 18%, rgba(244,198,198,.55), transparent 70%),
    radial-gradient(26% 26% at 86% 28%, rgba(246,222,168,.5), transparent 70%),
    radial-gradient(34% 28% at 62% 88%, rgba(238,190,206,.42), transparent 70%),
    radial-gradient(24% 24% at 6% 80%, rgba(246,226,176,.4), transparent 70%);
  animation: drijf 30s ease-in-out infinite alternate; }
@keyframes drijf { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3%,-4%,0) scale(1.08); } 100% { transform: translate3d(-3%,3%,0) scale(1.02); } }

.balk { background: var(--roze); font-size: 13px; text-align: center; padding: 8px 16px; }
.balk a { color: var(--goud); }
.nav { position: sticky; top: 0; z-index: 10; background: rgba(255,250,250,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--lijn); }
.nav-in { display: flex; align-items: center; gap: 36px; height: 92px; }
.brand { margin-right: auto; display: flex; align-items: center; text-decoration: none; }
.brand-logo { display: block; height: 54px; width: auto; }
.links { display: flex; gap: 34px; font-size: 15.5px; }
.links a { text-decoration: none; color: var(--ink-2); transition: color .2s; }
.links a:hover { color: var(--ink); }

.knop { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; font: 600 14.5px var(--sans); text-decoration: none; border-radius: 10px; border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s, background .2s; }
.knop:hover { transform: translateY(-2px); box-shadow: var(--schaduw-op); }
.knop-donker { background: var(--ink); color: #fff6f1; box-shadow: 0 1px 2px rgba(94,42,0,.3); }
.knop-licht { background: rgba(255,255,255,.9); border-color: var(--lijn); color: var(--ink); }
.knop-licht-op-donker { background: #fff3ee; color: var(--ink); }
.knop-rand { border-color: rgba(255,243,238,.4); color: #fff3ee; }

/* Hero: een banner met zachte wolken in de kleuren van het logo, zoals de lucht van stijl 2, maar in beweging. */
.hero-wrap { padding-top: 0; }
/* Logo: de golven bewegen één keer bij hover of focus (zie logo.js, zelfde als in de app). */
.logo-golf { mix-blend-mode: multiply; color: var(--goud); }
.logo-svg .l { stroke: currentColor; stroke-width: 32.3077; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.logo-svg.speelt .l { animation: golf 5.5s both; animation-delay: calc(var(--d) - 1.4s); }
.logo-svg .a { --d: 0s; } .logo-svg .b { --d: .12s; } .logo-svg .c { --d: .24s; }
@keyframes golf { 0%, 29.09% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.9, 0, .4, 1); } 46.36% { stroke-dashoffset: -1; animation-timing-function: step-end; } 54.55% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.5, 0, .1, 1); } 74.55%, 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .logo-svg .l { animation: none !important; } }
.hero { position: relative; overflow: hidden; padding: 104px 0 96px; text-align: center;
  background: radial-gradient(60% 55% at 12% 20%, rgba(250,208,150,.85), transparent 70%), radial-gradient(55% 60% at 88% 10%, rgba(236,170,190,.8), transparent 70%), radial-gradient(70% 50% at 50% 100%, rgba(255,255,255,.95), transparent 70%), linear-gradient(180deg, #f1cfcf 0%, #f8e4e0 55%, #fffafa 100%); }
.hero > * { position: relative; z-index: 1; }
.hero-in { position: relative; z-index: 1; }
.wolk { position: absolute !important; z-index: 0 !important; border-radius: 50%; background: rgba(255,255,255,.75); filter: blur(30px); pointer-events: none; animation: wolk 24s ease-in-out infinite alternate; }
.wolk.w1 { width: 520px; height: 190px; left: -80px; top: 40px; }
.wolk.w2 { width: 600px; height: 210px; right: -120px; top: 150px; animation-duration: 30s; animation-delay: -8s; }
.wolk.w3 { width: 480px; height: 150px; left: 32%; bottom: -20px; animation-duration: 27s; animation-delay: -15s; }
@keyframes wolk { from { transform: translateX(-40px); } to { transform: translateX(60px); } }
.hero h1 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 650; max-width: 22ch; margin: 0 auto 20px; }
h1 em, h2 em { font-style: normal; color: var(--goud); }
.lead { font-size: clamp(16px, 2vw, 19px); color: #5b3a22; max-width: 54ch; margin: 0 auto 28px; }
.acties { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero .knop { padding: 12px 22px; font-size: 15px; }
.klein { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; }
.stap-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 760px; margin: 44px auto 0; text-align: left; }
.stap-mini { background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.95); border-radius: 12px; padding: 14px 16px; display: grid; gap: 2px; box-shadow: var(--schaduw); animation: zweef 6s ease-in-out infinite alternate; transition: transform .25s, box-shadow .25s; }
.stap-mini:nth-child(2) { animation-delay: -2s; } .stap-mini:nth-child(3) { animation-delay: -4s; }
.stap-mini b { font-size: 14.5px; } .stap-mini small { color: var(--ink-3); font-size: 13px; }
.stap-mini .icoon { margin-bottom: 8px; }
@keyframes zweef { from { translate: 0 0; } to { translate: 0 -8px; } }
.icoon { display: inline-block; width: 28px; height: 28px; border-radius: 8px; }
.i-roze { background: linear-gradient(135deg, #f4a8b8, #d6607d); }
.i-goud { background: linear-gradient(135deg, #f0c968, #b98a1f); }
.i-bruin { background: linear-gradient(135deg, #9a6a3a, #5E2A00); }

.blok { padding-top: 130px; }
h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 650; margin-bottom: 36px; }
h3 { font-size: 17px; font-weight: 650; margin: 12px 0 4px; letter-spacing: -0.01em; }
.bijzaak { color: var(--ink-3); font-size: 15.5px; max-width: 62ch; margin-top: 14px; }

/* Kaarten: wit, dunne rand, kleine hoeken. Bij aanwijzen tilt elke kaart een tikje op en wordt iets groter. */
.papier, .kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 22px; box-shadow: var(--schaduw); transition: transform .25s ease, box-shadow .25s ease; }
.papier p { color: var(--ink-2); font-size: 15px; }
.papier:hover, .stap-mini:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--schaduw-op); animation-play-state: paused; }

/* Hoe het werkt: de zijbalk uit de app loopt mee, rechts staat per stap de uitleg met een voorbeeld. */
.scroll-uitleg { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; margin-top: 8px; }
.zij { position: sticky; top: 120px; padding: 16px 10px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; box-shadow: var(--schaduw); }
.zij-kop { font: 650 15px var(--sans); color: var(--ink); margin: 2px 10px 12px; letter-spacing: -0.01em; }
.zij ol { list-style: none; padding: 0; display: grid; gap: 0; }
.zij a { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font: 500 14.5px var(--sans); transition: background .25s, color .25s; }
.zij a span { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--roze); color: var(--ink); font: 700 13px var(--sans); transition: background .25s, color .25s, transform .25s; }
.zij .actief a { background: var(--goud-licht); color: var(--ink); font-weight: 650; }
.zij .actief a span { background: var(--ink); color: #fff6f1; transform: scale(1.08); }
.paneel { padding-bottom: 72px; scroll-margin-top: 90px; }
.paneel:last-child { padding-bottom: 0; min-height: 0; }
.paneel > h3 { display: flex; align-items: center; gap: 14px; font-size: clamp(24px, 3vw, 32px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 16px; }
.paneel > h3 .nr { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: #fff6f1; font: 700 17px var(--sans); }
.paneel > p { font-size: 17.5px; color: var(--ink-2); max-width: 58ch; margin-bottom: 12px; }
.paneel > .chips { margin: 8px 0 0; }
.paneel .demo { margin-top: 28px; }

/* Voorbeelden uit de app: opnameknop (stap 1), boek dat leest (stap 3), boek met pen (stap 4). */
.demo { display: grid; gap: 16px; }
.demo .tag { display: inline-block; font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--goud); margin-bottom: 12px; }
.demo .met-beeld { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; }
.demo .met-beeld > :not(.mini):not(.rec) { min-width: 0; }
.demo .spraak, .demo .veld { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.demo .spraak i { opacity: .55; }
.demo .spraak mark { background: rgba(246,200,120,.55); color: var(--ink); padding: 0 .12em; border-radius: 3px; }
.demo .veld { color: var(--ink); }
.demo .veld .haak { color: var(--ink-3); font-style: italic; }
.demo .gevonden { display: flex; flex-wrap: wrap; gap: 8px; }
.demo .gevonden span { border: 1px solid var(--lijn); background: var(--roze); padding: 5px 13px; font-size: 13.5px; border-radius: 999px; transition: transform .25s; }
.demo .gevonden span:hover, .chips span:hover { transform: translateY(-2px); }
.demo .drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.demo .drie .papier { padding: 18px; }
.demo .drie h3 { font-size: 16px; margin: 6px 0 6px; }
.demo .drie .letter { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff6f1; font: 700 13px var(--sans); }
.demo .opzet { display: grid; gap: 14px; }
.demo .opzet .kant { font-size: 14.5px; color: var(--ink-2); border-left: 3px solid var(--goud); padding-left: 14px; }
.demo .opzet q { font-style: italic; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips span { background: var(--wit); border: 1px solid var(--lijn); border-radius: 999px; padding: 7px 14px; font-size: 14px; transition: transform .25s, background .25s; }
.chips span:hover { background: var(--goud-licht); }

.rec { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.record { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--goud); color: #fff8f2; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 26px -14px rgba(94,42,0,.5); }
.record svg { width: 30px; height: 30px; fill: currentColor; }
.record::before, .record::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--goud); opacity: .5; animation: adem-ring 1.6s ease-in-out infinite; }
.record::after { inset: -30px; opacity: .25; animation-delay: .5s; }
@keyframes adem-ring { 0%, 100% { transform: scale(.96); opacity: .18; } 50% { transform: scale(1.06); opacity: .55; } }
.rec .tijd { font: 700 20px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.mini { width: 150px; height: 96px; }
.mini .boek { transform: scale(.47) rotate(-1.2deg); transform-origin: top left; }
.boek { position: relative; width: 320px; height: 200px; perspective: 1000px; filter: drop-shadow(0 12px 16px rgba(94,42,0,.18)); }
.boek::before { content: ''; position: absolute; inset: 6px -8px -8px; background: var(--ink); border-radius: 6px 14px 10px 8px / 8px 10px 14px 6px; z-index: -1; }
.boek-links, .boek-rechts, .blad { position: absolute; top: 0; width: 160px; height: 200px; background: #fffdfc; border: 1.5px solid #e4d4cf; }
.boek-links { left: 0; padding: 16px 12px 12px 18px; border-radius: 10px 2px 2px 12px / 12px 2px 2px 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.boek-links span { display: block; font-family: var(--serif); font-size: 12.5px; line-height: 1.5; color: var(--ink); white-space: nowrap; overflow: hidden; }
.boek-rechts, .blad { left: 160px; border-radius: 2px 12px 10px 2px / 2px 10px 12px 2px; background: repeating-linear-gradient(#fffdfc 0 17px, #e4d4cf 17px 18px); }
.blad { transform-origin: left center; backface-visibility: hidden; filter: brightness(calc(1 - (2 - var(--i)) * 0.07)); }
.boek:not(.schrijft) .blad:last-child { animation: blad 3.6s ease-in-out infinite; }
@keyframes blad { 0%, 15% { transform: rotateY(0deg); } 45% { transform: rotateY(-32deg); } 75%, 100% { transform: rotateY(0deg); } }
.schrijf-papier { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.schrijf-regel { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.schrijf-regel.r1 { animation: draw1 10s linear infinite; } .schrijf-regel.r2 { animation: draw2 10s linear infinite; }
.schrijf-regel.r3 { animation: draw3 10s linear infinite; } .schrijf-regel.r4 { animation: draw4 10s linear infinite; }
@keyframes draw1 { 0% { stroke-dashoffset: 1; opacity: 1; } 18%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes draw2 { 0%, 22% { stroke-dashoffset: 1; opacity: 1; } 36%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes draw3 { 0%, 40% { stroke-dashoffset: 1; opacity: 1; } 56%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes draw4 { 0%, 60% { stroke-dashoffset: 1; opacity: 1; } 70%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.schrijf-pen { position: absolute; left: 0; top: 0; color: var(--ink); animation: pen 10s linear infinite; pointer-events: none; }
@keyframes pen { 0% { transform: translate(11px, 10px); opacity: 1; } 18% { transform: translate(122px, 10px); } 22% { transform: translate(11px, 46px); } 36% { transform: translate(108px, 46px); } 40% { transform: translate(11px, 82px); } 56% { transform: translate(122px, 82px); } 60% { transform: translate(11px, 118px); } 70% { transform: translate(66px, 118px); } 90% { transform: translate(66px, 118px); opacity: 1; } 97%, 100% { transform: translate(11px, 10px); opacity: 0; } }

/* Vergelijking en 80-20-balk: de balken groeien als ze in beeld komen. */
.snelheid { display: grid; gap: 14px; max-width: 780px; }
.balkrij { display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: center; }
.verdeling { }
.balkrij b { font-weight: 600; font-size: 15px; }
.staaf { height: 52px; border-radius: 12px; background: #f1bfcc; border: 1px solid var(--lijn); display: flex; align-items: center; padding: 0 16px; font: 600 14.5px var(--sans); color: var(--ink); transform-origin: left; box-shadow: var(--schaduw); }
.staaf.kort { background: #e8d6cf; }
.beweeg .staaf { transform: scaleX(.05); transition: transform 1.5s cubic-bezier(.2,.7,.2,1) .2s; }
.beweeg .in .staaf { transform: none; }
.drieplus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.verdeling { margin-top: 32px; max-width: 780px; }
.verdeling .rij { display: flex; height: 52px; border-radius: 12px; overflow: hidden; font: 600 14.5px var(--sans); border: 1px solid var(--lijn); box-shadow: var(--schaduw); }
.verdeling .rij span { display: flex; align-items: center; padding: 0 16px; }
.verdeling .jij { flex: 80; background: #f1bfcc; color: var(--ink); }
.verdeling .wij { flex: 20; background: #e8d6cf; color: var(--ink); justify-content: center; }
.verdeling p { margin-top: 12px; color: var(--ink-2); font-size: 15px; }
.beweeg .verdeling .jij { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.2,.7,.2,1) .3s; }
.beweeg .in .verdeling .jij { clip-path: inset(0 0 0 0); }

.vragen { border-top: 1px solid var(--lijn); }
.vragen details { border-bottom: 1px solid var(--lijn); }
.vragen summary { cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; transition: color .2s; }
.vragen summary:hover { color: var(--goud); }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: '+'; color: var(--goud); font-size: 24px; line-height: 1; transition: transform .25s; }
.vragen details[open] summary::after { content: '\2212'; }
.vragen .antwoord { padding: 0 0 20px; color: var(--ink-2); max-width: 70ch; font-size: 15.5px; }
.vragen .antwoord p + p { margin-top: 10px; }
.vragen .antwoord a { text-decoration: underline; text-decoration-color: var(--goud); }

/* Afsluiter: donker, met gloed die langzaam beweegt. */
.afsluiter { position: relative; overflow: hidden; margin-top: 130px; padding: 84px 32px; text-align: center; color: #fff3ee; border-radius: 24px; background: linear-gradient(180deg, #5E2A00, #3a1900); }
.afsluiter::before, .afsluiter::after { content: ''; position: absolute; width: 60%; height: 120%; border-radius: 50%; filter: blur(50px); pointer-events: none; animation: gloed 16s ease-in-out infinite alternate; }
.afsluiter::before { left: -15%; top: -40%; background: rgba(176,122,18,.6); }
.afsluiter::after { right: -15%; bottom: -50%; background: rgba(214,96,125,.4); animation-delay: -7s; }
@keyframes gloed { from { transform: translate(-6%, -4%) scale(1); } to { transform: translate(8%, 6%) scale(1.15); } }
.afsluiter > * { position: relative; z-index: 1; }
.afsluiter h2 { margin: 0 auto 16px; color: #fff6f1; }
.afsluiter p { font-size: 18px; max-width: 52ch; margin: 0 auto 28px; color: #f0d8cc; }
.afsluiter .acties { justify-content: center; }

.voet { margin-top: 110px; border-top: 1px solid var(--lijn); padding: 24px 0 36px; font-size: 13.5px; color: var(--ink-3); }
.voet-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Zacht in beeld komen: omhoog en vervagen. Gebruikt 'translate' en een animatie, zodat 'transform' vrij blijft voor de hover. */
.beweeg .vervaag { opacity: 0; }
.beweeg .vervaag.in { animation: opin .9s cubic-bezier(.2,.7,.2,1) both; }
.beweeg .drieplus .vervaag:nth-child(2).in, .beweeg .demo .drie .vervaag:nth-child(2).in { animation-delay: .12s; }
.beweeg .drieplus .vervaag:nth-child(3).in, .beweeg .demo .drie .vervaag:nth-child(3).in { animation-delay: .24s; }
@keyframes opin { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 900px) {
  .scroll-uitleg { grid-template-columns: 1fr; gap: 0; } .zij { display: none; } .paneel { min-height: 0; padding-bottom: 64px; }
  .demo .drie, .drieplus, .stap-minis { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav-in { height: 76px; } .brand-logo { height: 44px; }
  .links { display: none; } .blok { padding-top: 84px; } .hero { padding: 64px 0 56px; } .afsluiter { padding: 56px 22px; border-radius: 18px; }
  .balkrij { grid-template-columns: 1fr; gap: 6px; } .demo .met-beeld { grid-template-columns: 1fr; justify-items: center; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, .wolk, .stap-mini, .afsluiter::before, .afsluiter::after, .record::before, .record::after, .blad, .schrijf-regel, .schrijf-pen { animation: none !important; }
  .schrijf-regel { stroke-dashoffset: 0; } .schrijf-pen { transform: translate(66px, 118px); }
  .papier:hover, .stap-mini:hover, .knop:hover, .chips span:hover, .demo .gevonden span:hover { transform: none; }
}


/* ======== Stijl 6: kleuren uit de referentie. Saliegroen als achtergrond met een verloop, alles waar je mee werkt in mintwit. ======== */
:root { --bg: #bfccc4; --ink: #473d1f; --ink-2: #54492a; --ink-3: #655d3c; --lijn: #dbe6df; --lijn-bg: #a9b9af; --goud: #796635; --goud-tekst: #6a5827; --goud-licht: #e4ece6; --roze: #d5e0d9; --wit: #f6fffa;
  --schaduw: 0 1px 2px rgba(54,41,9,.06), 0 8px 24px -16px rgba(54,41,9,.28); --schaduw-op: 0 2px 4px rgba(54,41,9,.08), 0 18px 34px -16px rgba(54,41,9,.38); }
html { background: #bfccc4; }
body::before { filter: blur(30px); background:
    radial-gradient(30% 30% at 12% 16%, rgba(236,246,240,.75), transparent 70%),
    radial-gradient(28% 28% at 88% 26%, rgba(160,182,170,.7), transparent 70%),
    radial-gradient(34% 28% at 60% 86%, rgba(222,226,190,.5), transparent 70%),
    radial-gradient(26% 26% at 4% 78%, rgba(150,175,164,.6), transparent 70%); }
.balk { background: var(--roze); }
.balk a, h1 em, h2 em { color: var(--goud-tekst); }
.nav { background: rgba(191,204,196,.8); border-bottom-color: var(--lijn-bg); }
.links a { color: var(--ink-2); } .links a:hover { color: var(--ink); }
.knop-donker { color: #f6fffa; box-shadow: 0 1px 2px rgba(54,41,9,.35); }
.knop-licht { background: var(--wit); border-color: var(--lijn); }
.knop-licht-op-donker { background: #f6fffa; } .knop-rand { border-color: rgba(246,255,250,.45); color: #f6fffa; }
.hero { background: radial-gradient(60% 55% at 12% 20%, rgba(240,248,243,.9), transparent 70%), radial-gradient(55% 60% at 88% 12%, rgba(150,176,163,.85), transparent 70%), radial-gradient(60% 50% at 70% 90%, rgba(226,228,190,.6), transparent 70%), linear-gradient(180deg, #a9bdb2 0%, #bccbc2 60%, rgba(191,204,196,0) 100%); }
.wolk { background: rgba(246,255,250,.6); }
.lead { color: var(--ink-2); } .klein { color: var(--ink-3); } .bijzaak { color: var(--ink-2); }
.papier, .kaart, .zij, .chips span { background: var(--wit); border-color: var(--lijn); }
.zij .actief a { background: var(--goud-licht); } .zij a span { background: var(--roze); }
.zij .actief a span, .paneel > h3 .nr, .demo .drie .letter { color: #f6fffa; }
.paneel > p { color: var(--ink-2); }
.demo .tag { color: var(--goud-tekst); }
.demo .spraak mark { background: rgba(190,178,110,.45); }
.demo .gevonden span { background: var(--roze); border-color: var(--lijn); }
.demo .opzet .kant { border-left-color: var(--goud); }
.chips span:hover { background: var(--goud-licht); }
.record { color: #f6fffa; box-shadow: 0 14px 26px -14px rgba(54,41,9,.55); }
.boek { filter: drop-shadow(0 12px 16px rgba(54,41,9,.22)); }
.boek-links, .boek-rechts, .blad { background: #fbfffd; border-color: #cddbd2; }
.boek-rechts, .blad { background: repeating-linear-gradient(#fbfffd 0 17px, #cddbd2 17px 18px); }
.logo-svg path[fill] { fill: var(--ink); }
/* Alles waar je mee werkt staat op wit: de grafieken en de vragen krijgen een eigen kaart. */
.snelheid, .verdeling .rij { background: var(--wit); }
.snelheid { padding: 22px; border: 1px solid var(--lijn); border-radius: 16px; box-shadow: var(--schaduw); }
.verdeling { background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; padding: 22px; box-shadow: var(--schaduw); }
.verdeling .rij { box-shadow: none; }
.staaf { background: #d9d3b2; color: var(--ink); box-shadow: none; } .staaf.kort { background: #d5e0d9; }
.verdeling .jij { background: #d9d3b2; color: var(--ink); } .verdeling .wij { background: #d5e0d9; color: var(--ink); }
.verdeling p { color: var(--ink-2); }
.vragen { background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; padding: 4px 28px; box-shadow: var(--schaduw); }
.vragen details:last-child { border-bottom: 0; }
.vragen summary:hover { color: var(--goud-tekst); } .vragen .antwoord { color: var(--ink-2); }
.afsluiter { background: linear-gradient(180deg, #473d1f, #2f2712); }
.afsluiter::before { background: rgba(121,102,53,.6); } .afsluiter::after { background: rgba(150,180,165,.35); }
.afsluiter h2 { color: #f6fffa; } .afsluiter p { color: #d5e0d9; }
.voet { border-top-color: var(--lijn-bg); color: var(--ink-3); }

/* Achtergrond en hero staan stil: de kleurverlopen blijven, de beweging is eruit. */
body::before, .wolk, .stap-mini, .afsluiter::before, .afsluiter::after { animation: none !important; }

/* Duidelijk onderscheid: de hero is een eigen, dieper groen vlak met een rand onderaan. Daaronder staat elke sectie op een eigen band,
   afwisselend lichter en middelgroen. De kaarten waar je mee werkt blijven mintwit. */
:root { --band-licht: #d8e3dc; --band-midden: #c4d1c9; }
.hero { border-radius: 0 0 48px 48px; padding-bottom: 104px;
  background: radial-gradient(60% 70% at 14% 12%, rgba(232,244,237,.5), transparent 70%), radial-gradient(60% 70% at 92% 18%, rgba(104,136,120,.5), transparent 70%), linear-gradient(180deg, #9db4a8 0%, #adc0b5 100%);
  box-shadow: 0 22px 32px -24px rgba(54,41,9,.5); }
.wolk { background: rgba(246,255,250,.32); }
.blok { padding-bottom: 120px; clip-path: inset(0 -100vmax); }
#werkt { background: var(--band-licht); box-shadow: 0 0 0 100vmax var(--band-licht); margin-top: 0; }
#snelheid { background: var(--band-midden); box-shadow: 0 0 0 100vmax var(--band-midden); }
#kern { background: var(--band-licht); box-shadow: 0 0 0 100vmax var(--band-licht); }
#vragen { background: var(--band-midden); box-shadow: 0 0 0 100vmax var(--band-midden); }
.hero-wrap { margin-bottom: 0; }
.afsluiter { margin-top: 110px; }
.voet { margin-top: 110px; }

/* ======== Variabelen voor de stijlkiezer (zie stijl-tool.js). Wat hieronder staat, volgt de gekozen kleuren, lettertypes en hoeken. ======== */
:root { --kop: var(--sans); --kop-w: 650; --kop-ls: -0.025em; --r: 12px; --hero-top: #9db4a8; --hero-bot: #adc0b5; --hero-a: rgba(232,244,237,.5); --hero-b: rgba(104,136,120,.5);
  --afs-a: #473d1f; --afs-b: #2f2712; --afs-g1: rgba(121,102,53,.6); --afs-g2: rgba(150,180,165,.35); --staaf: #d9d3b2; }
html { background: var(--bg); }
.nav { background: color-mix(in srgb, var(--bg) 82%, transparent); }
.knop-donker, .zij .actief a span, .paneel > h3 .nr, .record { color: var(--wit); }
.knop-licht-op-donker { background: var(--wit); } .knop-rand { color: var(--wit); border-color: color-mix(in srgb, var(--wit) 45%, transparent); }
.hero { border-radius: 0 0 calc(var(--r) * 4) calc(var(--r) * 4);
  background: radial-gradient(60% 70% at 14% 12%, var(--hero-a), transparent 70%), radial-gradient(60% 70% at 92% 18%, var(--hero-b), transparent 70%), linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bot) 100%); }
.demo .spraak mark { background: color-mix(in srgb, var(--goud) 26%, transparent); }
.staaf, .verdeling .jij { background: var(--staaf); } .staaf.kort, .verdeling .wij { background: var(--roze); }
.afsluiter { background: linear-gradient(180deg, var(--afs-a), var(--afs-b)); border-radius: calc(var(--r) * 2); }
.afsluiter::before { background: var(--afs-g1); } .afsluiter::after { background: var(--afs-g2); }
.afsluiter h2 { color: var(--wit); } .afsluiter p { color: color-mix(in srgb, var(--wit) 80%, transparent); }
h1, h2, h3, .paneel > h3 { font-family: var(--kop); font-weight: var(--kop-w); }
h1, h2, .paneel > h3 { letter-spacing: var(--kop-ls); }
.demo .drie h3 { font-weight: 600; }
.papier, .kaart, .stap-mini, .demo .tegel { border-radius: var(--r); }
.zij, .vragen, .snelheid, .verdeling { border-radius: calc(var(--r) * 1.3); }
.knop, .zij a, .zij a span, .paneel > h3 .nr, .demo .drie .letter { border-radius: calc(var(--r) * .8); }
.staaf, .verdeling .rij { border-radius: var(--r); }

/* Demo-blokken: links een tegel met het beeld uit de app, rechts de inhoud. */
.demo .met-beeld { grid-template-columns: 200px 1fr; gap: 28px; align-items: stretch; }
.demo .tegel { background: var(--roze); display: grid; place-items: center; padding: 20px 16px; }
.demo .rec { padding: 34px 0 6px; gap: 16px; }
.demo .met-beeld > p, .demo .met-beeld > .gevonden, .demo .met-beeld > .opzet { align-self: center; }
.demo .mini { width: 150px; height: 96px; }
/* A, B en C: teruggedrukt en rustiger. */
.demo .drie .papier { background: color-mix(in srgb, var(--wit) 55%, transparent); border-color: transparent; box-shadow: none; }
.demo .drie .papier:hover { background: color-mix(in srgb, var(--wit) 85%, transparent); box-shadow: var(--schaduw); }
.demo .drie h3 { font-size: 15.5px; } .demo .drie .papier p { font-size: 14px; color: var(--ink-3); }
.demo .drie .letter { background: var(--roze); color: var(--ink-2); }
@media (max-width: 640px) { .demo .met-beeld { grid-template-columns: 1fr; } }

@font-face { font-family: 'Sentient'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/Sentient-Bold.woff2') format('woff2'); }

/* Een heel lichte analoge laag: vlekjes, smuts en kleine haartjes. Stilstaand, over de pagina heen maar nauwelijks zichtbaar.
   De sterkte volgt --analoog (uit / licht / meer) uit de stijlkiezer. */
:root { --analoog: .55; }

/* Sentient, de complete set uit de projectmap (variabel, gewicht 200 tot 700). Dit is hetzelfde lettertype als het logo. */
@font-face { font-family: 'SentientV'; font-weight: 200 700; font-style: normal; font-display: swap; src: url('/fonts/sentient/Sentient-Variable.woff2') format('woff2'); }
@font-face { font-family: 'SentientV'; font-weight: 200 700; font-style: italic; font-display: swap; src: url('/fonts/sentient/Sentient-VariableItalic.woff2') format('woff2'); }
:root { --serif: 'SentientV', 'Sentient', Georgia, serif; --kop: 'SentientV', 'Sentient', Georgia, serif; --kop-w: 500; --kop-ls: -0.02em; }

  background: rgba(36,32,20,.93); color: #f2f2ec; border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,.32); font: 13px/1.3 system-ui, sans-serif; }

/* De analoge laag zit in de achtergrond van de hero en de secties, onder alles wat wit is (kaarten, zijbalk, grafieken, vragen). */
.hero::before, .blok::before, #meedoen::before, .voet::before { content: ''; position: absolute; top: 0; bottom: 0; left: -100vmax; right: -100vmax; z-index: 0; pointer-events: none; mix-blend-mode: multiply; opacity: var(--analoog);
  background-image: url('/analoog-1.svg'), url('/analoog-2.svg'); background-size: 900px 1400px, 1300px 1900px; background-position: 0 0, 380px 620px; }
.hero::before { left: 0; right: 0; }
.blok, #meedoen, .voet { position: relative; }
.blok > *, #meedoen > *, .voet > * { position: relative; z-index: 1; }


/* Kopbalk: lichter, met een blur zodat hij eruit springt en de pagina eronder doorschemert bij scrollen. */
.nav { background: color-mix(in srgb, var(--wit) 68%, transparent); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); }

/* Hoofdknoppen in de hero: de tweede knop heeft een duidelijke rand en donkere tekst, ook op het saliegroen (zoals fix/hero-knop). */
.hero .knop { font-size: 16.5px; padding: 15px 28px; }
.hero .knop-licht { border: 2px solid var(--ink-2); background: color-mix(in srgb, var(--wit) 60%, transparent); color: var(--ink); }
.hero .knop-licht:hover { background: var(--wit); border-color: var(--ink); }
.hero .klein { color: var(--ink); }

/* Accountmenu voor wie is ingelogd (zie kop-site.js en account-menu.js). */
.account { display: flex; align-items: center; gap: 12px; }
.account-menu-wrap { position: relative; }
.account-knop { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--wit); border: 1.5px solid var(--ink-3); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.account-knop:hover, .account-knop[aria-expanded="true"] { border-color: var(--ink); background: var(--roze); }
.account-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px; max-width: calc(100vw - 32px); background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; box-shadow: var(--schaduw-op); padding: 6px; }
.account-menu[hidden] { display: none; }
.account-mail { font-size: 12.5px; color: var(--ink-3); padding: 8px 12px 10px; border-bottom: 1px solid var(--lijn); margin-bottom: 4px; overflow-wrap: anywhere; }
.account-item { display: block; width: 100%; text-align: left; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 9px 12px; cursor: pointer; text-decoration: none; }
.account-item:hover, .account-item:focus-visible { background: var(--roze); }
@media (max-width: 640px) { .nav-in { gap: 14px; } }