/*
 * Fusha, de website
 *
 * De tokens hieronder zijn LETTERLIJK die uit de app: dezelfde :root als in
 * `.scratch/mobiel.html` en dezelfde waarden als `src/theme/tokens.ts`. Wijk
 * hier niet van af zonder daar ook te wijzigen. Het enige wat deze site moet
 * doen is aanvoelen als de app.
 */

:root {
  --bg: #FCFCFA;
  --surface: #FFFFFF;
  --sunk: #F6F6F2;
  --txt: #16181A;
  --mut: #6B7280;
  --line: #E8E8E4;
  --sk: #EDEDE8;

  --acc: #0F7A6B;
  --accSoft: #E6F2F0;

  --rad: 12px;
  --pill: 999px;

  --ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;

  /* Maximale leesbreedte. Lopende tekst wordt smaller gehouden dan secties. */
  --wide: 1080px;
  --read: 680px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E0F11;
    --surface: #17191C;
    --sunk: #121417;
    --txt: #EDEDEA;
    --mut: #8D939B;
    --line: #24272B;
    --sk: #1F2226;
    --accSoft: #123029;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Zichtbare focus, ook voor wie met het toetsenbord navigeert. */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- layout - */

/*
  De zijmarge zit in één variabele, zodat de schuivende schermenrij hem kan
  overnemen en onder de kop begint in plaats van er links van uit te steken.

  Op een telefoon is hij ruimer dan op een desktop. Dat lijkt achterstevoren,
  maar op een breed scherm zorgt de maximale breedte al voor lucht, terwijl de
  tekst op een telefoon anders tegen de schermrand plakt.
*/
:root { --gutter: 28px; }

@media (min-width: 700px) {
  :root { --gutter: 24px; }
}

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.read { max-width: var(--read); }

/* Wel voorgelezen, niet getoond. Voor labels die visueel overbodig zijn maar
   die een schermlezer nodig heeft. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 16px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rad);
}

/* ---------------------------------------------------------------- header - */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Drie menu-items naast het woordmerk passen niet op elke telefoon. Laten
     afbreken is netter dan ze laten krimpen tot ze niet meer te raken zijn. */
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 22px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--acc);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }

.site-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14.5px; }
.site-nav a { color: var(--mut); }
.site-nav a:hover { color: var(--txt); text-decoration: none; }

/* ------------------------------------------------------------------ hero - */

/*
  Tekst links, video rechts. De tekstkolom krijgt iets meer ruimte dan de
  video: die kolom draagt de kop, de uitleg én het formulier, en dat is waar de
  bezoeker iets moet doen.

  Onder de 900px stapelt het, met de video ná het formulier. Op een telefoon
  telt hoe snel je bij het invoerveld bent zwaarder dan de volgorde op papier.
*/
.hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 32px 0 72px;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding-bottom: 56px; }
  .hero-video { order: 2; }
}

h1 {
  margin: 0 0 16px;
  /* Schaalt mee met het scherm zonder media query; ondergrens is de maat uit
     de app (27px), bovengrens wat op een desktop niet schreeuwt. */
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 15ch;
}

.lead {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: clamp(15.5px, 2vw, 17px);
  line-height: 1.65;
  color: var(--mut);
  text-wrap: pretty;
}

/*
  De achtergrondkleur staat er zodat er nooit een wit gat valt tussen het
  moment dat de plek gereserveerd is en het eerste beeld binnen is. De
  verhouding staat vast op 16:9, dus er verspringt niets.
*/
.hero-video {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--rad);
  overflow: hidden;
  background: var(--sunk);
}

.hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* De 'binnenkort'-pillen. Bewust GEEN officiële App Store- of Play-badges:
   Apple en Google staan die alleen toe voor apps die daadwerkelijk in de
   store staan. Zodra Fusha live is mogen de echte badges hier komen. */
.soon { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }

.soon span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--mut);
}
.soon svg { flex: none; }

/* ------------------------------------------------------------------ form - */

.signup { max-width: 460px; }

.field {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.field input[type='email'] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--rad);
  background: var(--surface);
  color: var(--txt);
  font-family: inherit;
  font-size: 15.5px;
}
.field input[type='email']::placeholder { color: var(--mut); }

.btn {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 22px;
  border: none;
  border-radius: var(--rad);
  background: var(--acc);
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn[disabled] { background: var(--sk); color: var(--mut); cursor: default; filter: none; }

/*
  Onder deze breedte passen het veld en de knop niet meer naast elkaar; onder
  elkaar is duidelijker en een brede knop is op een telefoon beter te raken.

  Dit blok stond eerst vóór de basisregel van het veld en verloor daardoor de
  cascade: dezelfde specificiteit, dus de latere regel won — en in kolomrichting
  is de flex-basis van 220px ineens de HOOGTE. Vandaar het metershoge
  e-mailveld op telefoons. Volgorde is hier de fix; flex uit, gewoon
  contenthoogte.
*/
@media (max-width: 520px) {
  .field { flex-direction: column; }
  .field input[type='email'] { flex: 0 0 auto; }
  .btn { width: 100%; }
}

.form-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mut);
}

.form-msg {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  min-height: 1.6em;
}
.form-msg[data-state='ok'] { color: var(--acc); }
.form-msg[data-state='err'] { color: var(--txt); }

/* De honeypot. Verborgen voor mensen, ingevuld door de meeste bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----------------------------------------------------------------- value - */

.value { padding: 8px 0 64px; }

/*
  Vast op twee kolommen. Met `auto-fit, minmax(300px, 1fr)` paste er in de
  tekstkolom van 1080px drie naast elkaar, en dan werd het 3 + 1 met een gat
  rechtsonder in plaats van het bedoelde vierkant.
*/
.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 22px;
}

@media (max-width: 640px) {
  .value-grid { grid-template-columns: 1fr; }
}

.banner {
  /* Wazige voorvertoning uit banners/lqip.css; zie de toelichting bij `.shot`. */
  background-size: cover;
  background-position: center;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--line);
  border-radius: var(--rad);
  overflow: hidden;
}

.banner img { width: 100%; height: auto; }

.value-card h3 {
  margin: 16px 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.value-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--mut);
  text-wrap: pretty;
}

/* --------------------------------------------------------------- screens - */

.screens { padding: 8px 0 64px; }

.caps {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mut);
}

/*
  Eén rij die horizontaal schuift op smalle schermen. Een raster van 3+2 laat
  altijd een gat vallen, en schuiven is wat mensen van de App Store gewend zijn.

  De rij loopt gelijk met de tekstkolom, zodat hij onder de kop begint in plaats
  van er links van uit te steken. Daar is de telefoonbreedte op gerekend:
  5 × 193 + 4 × 16 + 2 × 24 padding = 1077, net binnen de 1080 van `--wide`.
  Op een desktop passen alle vijf er dus in zonder te schuiven.

  `safe center` en niet gewoon `center`: zodra de rij niet meer past duwt
  centreren de inhoud aan bééde kanten naar buiten, en dan is het eerste stuk
  niet meer te bereiken met scrollen. `safe` valt in dat geval terug op links
  uitlijnen. Kent een browser `safe` niet, dan negeert hij de hele regel en
  krijg je diezelfde terugval.
*/
.shots {
  display: flex;
  justify-content: safe center;
  gap: 16px;
  max-width: var(--wide);
  margin-inline: auto;
  padding: 6px var(--gutter) 16px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.shot-item {
  /* Vaste breedte: de hoekstraal hieronder is daarop afgestemd. */
  flex: 0 0 193px;
  scroll-snap-align: center;
}

.shot {
  /*
    De wazige voorvertoning uit screens/lqip.css staat hier als achtergrond.
    Twintig pixels breed, uitgerekt tot de volle breedte, dus vanzelf wazig.
    Daar is geen filter voor nodig. Hij zit ín de CSS als data-URI, dus hij is
    er al zodra de pagina er is en zie je nooit een leeg vak.
  */
  background-size: cover;
  background-position: center;

  /* De ruimte staat vast voordat er iets geladen is, dus niets verspringt. */
  aspect-ratio: 640 / 1394;

  /* 63/640 van de bron, op 193px breed. Volgt de hoeken die al in de
     afbeelding zelf zijn uitgesneden. Pas dit mee aan als `.shot-item`
     van breedte verandert, anders lopen de twee rondingen uiteen. */
  border-radius: 19px;
  overflow: hidden;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 14px 36px rgba(0, 0, 0, 0.07);
}

.shot img { width: 100%; height: auto; }

.shot-item h3 {
  margin: 20px 0 5px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.shot-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mut);
  text-wrap: pretty;
}

/* Op een donkere achtergrond doet een slagschaduw niets; een haarlijn wel. */
@media (prefers-color-scheme: dark) {
  .shot { box-shadow: 0 0 0 1px var(--line), 0 14px 36px rgba(0, 0, 0, 0.5); }
}

/* --------------------------------------------------------------- prose --- */

.prose { padding: 8px 0 64px; }
.prose h1 { margin-bottom: 8px; max-width: none; font-size: clamp(28px, 5vw, 36px); }
.prose .updated { margin: 0 0 40px; font-size: 13px; color: var(--mut); }
.prose h2 {
  margin: 40px 0 12px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.prose h3 { margin: 26px 0 8px; font-size: 15.5px; font-weight: 600; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.7; text-wrap: pretty; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--mut); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 14.5px;
}
.prose th, .prose td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prose th { font-weight: 600; }
.prose td { color: var(--mut); }
.prose td:first-child { color: var(--txt); }

/* Brede tabellen mogen zelf schuiven; de pagina nooit. */
.scroll-x { overflow-x: auto; }

.note {
  margin: 20px 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--rad);
  background: var(--sunk);
}
.note p { margin: 0; font-size: 14.5px; }
.note p + p { margin-top: 10px; }

/* --------------------------------------------------------------- footer - */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 28px 0 44px;
  font-size: 13.5px;
  color: var(--mut);
}
.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-foot a { color: var(--mut); }
.site-foot a:hover { color: var(--txt); text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}