/* Selfrange — selfrange.eu. De site heeft eigen kleuren, lichter en warmer dan de app; dat is bewust.
   Alleen de vijf domeinkleuren komen uit brand/tokens.json (lichte waarden). De site is altijd licht. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #faf6ef;
  --surface: #FFFFFF;
  --surface-sunk: #f1ede4;
  --line: #e9e2d6;
  --ink: #262a33;
  --ink-muted: #6e6a63;
  --accent: #2a9a8f;
  --focus: var(--accent);
  /* tokens.json */
  --domain-e: #C27A12;
  --domain-a: #2E8C80;
  --domain-c: #6E8A2E;
  --domain-n: #CC5A4E;
  --domain-o: #7468C4;
  --display: "Fraunces", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
}

/* ---------- Voorpagina (index.html, prototype v9) ---------- */

.home {
  --bg: var(--paper); --muted: var(--ink-muted);
  --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent);
  --d1: var(--domain-e); --d2: var(--domain-a); --d3: var(--domain-c); --d4: var(--domain-n); --d5: var(--domain-o);
  --serif: var(--display);
}
body.home{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased}
.home a{color:inherit}
.home .wrap{max-width:1040px;margin:0 auto;padding:0 28px}

.home header .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.home .brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.home .brand svg{width:30px;height:30px}
.home .wordmark{font-family:var(--serif);font-weight:600;font-size:25px;letter-spacing:-.01em}
.home nav{display:flex;align-items:center;gap:26px;font-size:15px}
.home nav a{text-decoration:none;color:var(--muted)}
.home nav a:hover,.home nav a:focus-visible{color:var(--ink)}
.home a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

.home .btn{display:inline-block;text-decoration:none;font-weight:600;padding:14px 26px;border-radius:999px;font-size:16px;background:var(--accent);color:#fff}
.home .btn.small{padding:11px 20px;font-size:15px}

.home .hero{padding:72px 0 40px;text-align:center}
.home h1{font-family:var(--serif);font-weight:600;font-size:clamp(46px,7.4vw,92px);line-height:1;letter-spacing:-.02em;margin:0 auto 26px;max-width:15ch}
.home h1 .q{display:block;color:var(--accent)}
.home .hero p{color:var(--muted);max-width:40ch;margin:0 auto 30px;font-size:21px}

/* het grote beeld onder de hero: je range per eigenschap, zoals op Home */
.home .ranges{padding:56px 0 72px}
.home .ranges svg{width:min(720px,100%);height:auto;display:block;margin:0 auto}
.home .ranges .cap{text-align:center;font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,34px);margin:28px 0 0;letter-spacing:-.01em}
.home .ranges .sci{text-align:center;color:var(--muted);max-width:46ch;margin:12px auto 0;font-size:17px}
.home .ranges .bg{fill-opacity:.16}
.home .ranges .mean{fill:var(--ink)}
.home .r1{fill:var(--d1)} .home .r2{fill:var(--d2)} .home .r3{fill:var(--d3)} .home .r4{fill:var(--d4)} .home .r5{fill:var(--d5)}

.home .beat{padding:96px 0}
.home .beat .wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.home .beat.flip .text{order:2}
.home .beat h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.2vw,50px);line-height:1.06;letter-spacing:-.016em;margin:0 0 14px;max-width:14ch}
.home .beat p{margin:0;color:var(--muted);max-width:34ch}
.home .vis svg{width:100%;height:auto;display:block;overflow:visible}
.home .vis text{font-family:var(--sans);font-size:13px;fill:var(--muted)}
.home .track{fill:var(--accent-tint)}
.home .mid{stroke:var(--ink);stroke-opacity:.18;stroke-width:1}
.home .lbl{fill:var(--ink)}
.home .vis .work{fill:var(--accent)}

/* de enige beweging op de pagina: één stip die rustig heen en weer gaat */
.home .dot{fill:var(--accent);animation:move 9s ease-in-out infinite}
@keyframes move{0%{transform:translateX(0)}35%{transform:translateX(-170px)}70%{transform:translateX(110px)}100%{transform:translateX(0)}}

.home .screens{padding:48px 0 32px}
.home .screens .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:start}
.home .screen{margin:0}
.home .frame{position:relative;width:min(300px,100%);margin:0 auto 14px}
.home .frame img{display:block;width:100%;height:auto;aspect-ratio:780/1920;border-radius:28px;border:1px solid var(--line);background:var(--surface-sunk)}
/* chip boven op het kader, niet in de afbeelding */
.home .frame::after{content:"prototype";position:absolute;top:12px;right:12px;font-family:var(--sans);font-size:12px;line-height:1;padding:5px 10px;border-radius:999px;color:var(--muted);background:#f1ede4}
.home .screen figcaption{margin:0;text-align:center;color:var(--muted);font-size:16px}

.home .close{text-align:center;padding:120px 0 128px}
.home .close h2{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.6vw,66px);line-height:1.02;letter-spacing:-.02em;margin:0 0 20px}
.home .close h2 span{color:var(--accent)}
.home .close p{color:var(--muted);max-width:44ch;margin:0 auto 30px}
.home .fine{font-size:14px;color:var(--muted);margin-top:18px}

.home footer{border-top:1px solid var(--line);padding:34px 0 52px;color:var(--muted);font-size:15px}
.home footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.home footer a{color:var(--muted);text-decoration:none;margin-left:20px}

@media (prefers-reduced-motion: reduce){ .home .dot{animation:none} }
@media (max-width:820px){
  .home .hero{padding:48px 0 28px}
  .home .beat{padding:64px 0}
  .home .beat .wrap{grid-template-columns:1fr;gap:32px}
  .home .screens .wrap{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 28px;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .home .screen{flex:0 0 min(72%,280px);scroll-snap-align:start}
  .home .beat.flip .text{order:0}
  .home .beat h2{max-width:none}
  .home nav .btn{display:none}
  .home nav{gap:16px}
}

/* ---------- Tekstpagina's (support, privacy, 404) ---------- */

.page {
  max-width: 40rem;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

/* Woordmerk: het merk links, de naam rechts, twee balkhoogtes ertussen. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  color: var(--ink);
  text-decoration: none;
}
.lockup img { display: block; width: 56px; height: 48px; }
.lockup span {
  font: 600 32px/1 var(--display);
  letter-spacing: -0.01em;
}
.lockup--small img { width: 37px; height: 32px; }
.lockup--small span { font-size: 24px; }

.page header { margin-bottom: 32px; }

.page h1, .page h2 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}
.page h1 { font-size: 34px; margin-bottom: 8px; }
.page h2 { font-size: 22px; margin-bottom: 8px; }
.page h3 { font: 600 18px/1.35 var(--sans); margin: 0 0 4px; }

.page p, .page ul, .page ol { margin: 0 0 12px; }
.page ul, .page ol { padding-left: 1.25em; }
.page li + li { margin-top: 4px; }

.page .lead { font-size: 19px; }
.page .muted { color: var(--ink-muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  margin-bottom: 24px;
}
.card > :last-child { margin-bottom: 0; }

.qa + .qa { margin-top: 20px; }

.page a { color: var(--ink); text-underline-offset: 3px; }
.page a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.page nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page nav li + li { margin-top: 0; }
.page nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--surface-sunk);
  font-weight: 600;
  text-decoration: none;
}

.page footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 14px;
}
.page footer p { margin: 0 0 4px; }
.page footer a { color: var(--ink-muted); }

@media (max-width: 359px) {
  .card { padding: 16px; }
  .page h1 { font-size: 30px; }
}