/* Opmaak van bankyapp.nl (homepage + 404). Kleuren = tokens uit src/constants/theme.ts, licht + donker. */
/* Kleurtokens: zelfde waarden als de app (light + dark). Geen losse kleuren verderop. */
:root {
  --bg: #FFFFFF; --surface: #EEF4EE; --border: #DDE8DE; --text: #14211B; --muted: #5A6B5E;
  --primary: #2E7D32; --on-primary: #FFFFFF;
  /* De groene kopbalk blijft in beide standen bosgroen met witte tekst, net als de winkelafbeelding. */
  --hero-from: #2E7D32; --hero-to: #245F27; --on-hero: #FFFFFF; --path: #E8E2C8;
  --radius: 16px; --ease: 0.2s ease;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0F0C; --surface: #1B241E; --border: #28332B; --text: #F2F6F3; --muted: #A8B4AB;
    --primary: #5CC177; --on-primary: #0B0F0C;
  }
}

/* Basis: systeemlettertype (zoals de app), 16px tekst, ruime regelafstand */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text);
       font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
a { color: var(--primary); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--bg); padding: 8px 12px; }

/* Kopbalk: groen vlak met titel, korte uitleg, knop en de pixelart-scène onderaan */
.hero { background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 100%); color: var(--on-hero); }
.hero .wrap { display: grid; gap: 24px; padding-top: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--on-hero);
         text-decoration: none; width: fit-content; }
.brand svg { flex: none; }
.hero h1 { margin: 16px 0 0; font-size: clamp(36px, 8vw, 52px); line-height: 1.05; letter-spacing: -1px;
           font-weight: 800; text-wrap: balance; }
.hero p.lead { margin: 16px 0 0; font-size: 18px; max-width: 34em; opacity: .95; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.soon { font-size: 14px; opacity: .9; }

/* Knoppen: minimaal 48px hoog, subtiele overgang bij hover en indrukken */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
       padding: 0 22px; border-radius: 999px; font-weight: 700; text-decoration: none; cursor: pointer;
       transition: transform var(--ease), opacity var(--ease), background-color var(--ease); }
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.97); }
.btn--light { background: #FFFFFF; color: #2E7D32; }
.btn--primary { background: var(--primary); color: var(--on-primary); }

/* Pixelart-scène: hond en wandelaar lopen naar het bankje onder de boom, zoals op de winkelafbeelding.
   Alles schaalt mee met de breedte (posities in %), harde pixelranden blijven scherp. */
.scene { position: relative; width: 100%; max-width: 560px; aspect-ratio: 560 / 290; justify-self: center; }
.scene img { position: absolute; bottom: 11%; height: auto; image-rendering: pixelated; }
.scene .path { position: absolute; left: -100vw; right: -100vw; bottom: 0; height: 11%; background: var(--path); }
.scene .tree { right: 0; width: 39.5%; }
.scene .walker { left: 19%; width: 28%; }
.scene .dog { left: 1%; width: 19.3%; }
.scene .bench { position: absolute; left: 48%; bottom: 11%; width: 23%; aspect-ratio: 130 / 56; }
.scene .bench i { position: absolute; background: #FFFFFF; }
.scene .bench .plank { left: 0; right: 0; top: 0; height: 25%; border-radius: 3px; }
.scene .bench .leg { top: 25%; bottom: 0; width: 9%; }
.hero { overflow: hidden; }

/* Kenmerken: 1 kolom op de telefoon, 2 op een tablet, 4 op een groot scherm */
section { padding: 56px 0; }
h2 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
.intro { color: var(--muted); margin: 0 0 32px; max-width: 36em; }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .features { grid-template-columns: repeat(4, 1fr); } }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.feature h3 { font-size: 18px; margin: 12px 0 4px; }
.feature p { margin: 0; color: var(--muted); }
.icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
        background: var(--primary); color: var(--on-primary); }

/* Blok "Plan een wandeling": verwijst naar de wandelen-site */
.plan { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.plan .wrap { display: grid; gap: 16px; }
.plan p { margin: 0; color: var(--muted); max-width: 36em; }

/* Voettekst: links naar de verplichte pagina's en contact */
footer { padding: 32px 0 48px; color: var(--muted); font-size: 14px; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 12px; }
footer nav a { display: inline-block; padding: 6px 0; }
footer p { margin: 0 0 4px; }

@media (min-width: 768px) {
  .hero .wrap { grid-template-columns: 1fr 1fr; align-items: end; padding-top: 32px; }
  .hero .text { padding-bottom: 64px; align-self: center; }
  .brand { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }