/* desilon.nl
   Follows Evade's design system (Project Evade/docs/DESIGN_SYSTEM.md): a flat cartoon on a very dark sea,
   one navy outline colour, matte pressed plates with notched corners, hard drop shadows (no blur),
   one rounded font, yellow = the primary action, cyan = information. No gloss, glow or gradients on UI.
   Colours are Evade's PALETTE; tokens keep their names. Site-only additions are marked "site". */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* PALETTE: surfaces and text */
  --water: #04111e;
  --abyss: #020810;
  --edge: #061525;
  --edge-rgb: 6, 21, 37;
  --panel: #0f2c49;
  --panel-2: #143a5e;
  --rim: #1d4a74;
  --well: #0a1f35;
  --ink: #ffffff;
  --ink-rgb: 255, 255, 255;
  --soft: #a9c8e6;
  /* PALETTE: accents */
  --yellow: #ebbf45;
  --yellow-deep: #b08421;
  --yellow-deep-rgb: 176, 132, 33;
  --cyan: #5fd3ff;
  --red: #ff4d4d;
  /* PALETTE: world (the menu's shallow sea) */
  --sea-top-shallow: #0a2f48;
  --sea-bottom-shallow: #03121c;

  /* Type */
  --font: "Fredoka", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --fw-regular: 500;
  --fw-medium: 600;
  --fw-bold: 700;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 34px;
  --fs-title: clamp(30px, 5vw, 40px);
  --fs-logo: clamp(76px, 15vw, 128px);          /* site: the game's clamp(64–96), larger for a page */
  --track-caps: .08em;
  --track-wide: .22em;
  --track-bold: .04em;
  --track-logo: .02em;
  --ts-md: 6px;
  --ts-lg: 10px;
  --drop-md: 0 4px 0 var(--edge);
  --drop-lg: 0 7px 0 var(--edge);

  /* Space: the 4 px grid, plus site-only section spacing */
  --sp-0: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 32px;                                  /* site */
  --sp-7: 56px;                                  /* site */
  --sp-8: 96px;                                  /* site */
  --gutter: 16px;
  --page-w: 1080px;                              /* site */

  /* Shape */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-round: 50%;
  --cut: 16px;
  --cut-sm: 10px;
  --cut-go: 20px;
  --cut-min: 3px;
  --bw-1: 2px;
  --bw-2: 3px;
  --bw-3: 4px;

  /* Depth: hard shadows, matte bevel */
  --shadow-1: 0 2px 0 var(--edge);
  --shadow-2: 0 3px 0 var(--edge);
  --shadow-3: 0 4px 0 var(--edge);
  --shadow-phone: 0 8px 0 var(--edge);           /* site: the screenshot plates */
  --press: 2px;
  --press-sm: 1px;
  --lip: 4px;
  --lip-press: 2px;
  --bevel-lit: .035;
  --bevel-shade: .15;
  --bevel-lit-yellow: .09;
  --bevel-shade-yellow: .28;
  --bevel-in: .18;
  --bevel: inset 0 var(--sp-0) 0 rgba(var(--ink-rgb), var(--bevel-lit)), inset 0 calc(var(--bw-2) * -1) 0 rgba(var(--edge-rgb), var(--bevel-shade));
  --bevel-yellow: inset 0 var(--sp-0) 0 rgba(var(--ink-rgb), var(--bevel-lit-yellow)), inset 0 calc(var(--bw-2) * -1) 0 rgba(var(--yellow-deep-rgb), var(--bevel-shade-yellow));
  --bevel-sunk: inset 0 var(--bw-2) 0 rgba(var(--edge-rgb), var(--bevel-in));

  /* States and motion */
  --dim: .5;
  --hover: brightness(1.08);
  --focus-gap: 3px;
  --t-press: .08s;
}

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

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

body {
  margin: 0;
  background: var(--water);
  color: var(--ink);
  font: var(--fw-regular) var(--fs-md)/1.5 var(--font);
  font-kerning: none;                            /* Fredoka kerns I-V and 1-4 into each other */
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; line-height: 1.1; }

:focus-visible { outline: var(--focus-gap) solid var(--yellow); outline-offset: var(--focus-gap); }

[hidden] { display: none !important; }   /* hidden wins over a component's display */

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* ---------- text styles ---------- */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--soft);
}
.logo {
  display: inline-block;
  font-size: var(--fs-logo);
  font-weight: var(--fw-bold);
  line-height: .9;
  color: var(--yellow);
  paint-order: stroke fill;
  -webkit-text-stroke: var(--ts-lg) var(--edge);
  text-shadow: var(--drop-lg);
  transform: rotate(-3deg);
  font-kerning: normal;
  letter-spacing: var(--track-logo);
}
.screentitle {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--ink);
  paint-order: stroke fill;
  -webkit-text-stroke: var(--ts-md) var(--edge);
  text-shadow: var(--drop-md);
  letter-spacing: var(--track-bold);
}
.lead { font-size: var(--fs-lg); line-height: 1.45; color: var(--soft); }
.lead strong { color: var(--ink); font-weight: var(--fw-medium); }

/* ---------- plates: the UI is the sub's hardware ---------- */
.card {
  background: var(--panel);
  border: var(--bw-2) solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: var(--bevel), var(--shadow-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border: var(--bw-2) solid var(--edge);
  border-radius: var(--r-lg);
  font: var(--fw-bold) var(--fs-lg)/1.2 var(--font);
  letter-spacing: var(--track-bold);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--bevel), var(--shadow-3);
  transition: transform var(--t-press), box-shadow var(--t-press);
}
.btn:active { transform: translateY(var(--press)); box-shadow: var(--bevel), var(--shadow-1); }
.btn--primary {
  --bevel: var(--bevel-yellow);
  background: var(--yellow);
  color: var(--edge);
  box-shadow: var(--bevel), 0 var(--lip) 0 var(--yellow-deep), 0 var(--lip) 0 var(--bw-2) var(--edge);
}
.btn--primary:active { box-shadow: var(--bevel), 0 var(--lip-press) 0 var(--yellow-deep), 0 var(--lip-press) 0 var(--bw-2) var(--edge); }
.btn--ghost { background: var(--panel-2); color: var(--ink); }
.btn:disabled { opacity: var(--dim); cursor: default; transform: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: var(--bw-1) solid var(--rim);
  border-radius: var(--r-md);
  background: rgba(var(--edge-rgb), .75);
  box-shadow: var(--bevel);
  color: var(--ink);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-bold);
  text-decoration: none;
  transition: transform var(--t-press);
}
.chip:active { transform: translateY(var(--press-sm)); filter: var(--hover); }
.chip__handle { color: var(--soft); font-weight: var(--fw-regular); }

/* ---------- header ---------- */
.site-head { padding: var(--sp-4) 0; }
.site-head--over { position: absolute; top: 0; left: 0; right: 0; z-index: 1; }   /* home: the header floats on the hero's water */
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: var(--r-round); }
.brand span { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--track-bold); }

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--sea-top-shallow) 0%, var(--sea-bottom-shallow) 100%); /* the game's menu water */
  padding: calc(var(--sp-5) + 68px) 0 var(--sp-6);   /* 68px: room for the floating header */
  overflow: hidden;
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.hero-text { display: grid; gap: var(--sp-5); justify-items: start; }
.hero-title { display: grid; gap: var(--sp-4); justify-items: start; }
.hero-title .logo { margin-left: calc(var(--sp-1) * -1); }
.subtitle {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--soft);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--r-round);
  background: var(--cyan);                       /* cyan = information */
  box-shadow: 0 0 0 var(--bw-1) var(--edge);
}
.signup--hero { width: 100%; max-width: 520px; gap: var(--sp-3); }
.signup-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }        /* one row when there's room, else the button goes full width below */
.signup-row .input { flex: 999 1 220px; min-width: 0; }   /* the field takes the room; the button keeps its size, or the full line once it wraps */
.signup-row .btn { flex: 1 0 auto; }
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); color: var(--soft); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.ticks li { display: flex; align-items: center; gap: var(--sp-2); }
.ticks li::before { content: ""; width: 10px; height: 5px; margin-top: -3px; border: solid var(--yellow); border-width: 0 0 var(--bw-2) var(--bw-2); transform: rotate(-45deg); }   /* a flat check, drawn: Fredoka has no ✓ */
.textlink { color: var(--soft); font-weight: var(--fw-medium); text-decoration: none; }
.textlink:hover { color: var(--ink); }

.phones { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: var(--sp-4); width: 100%; } /* each phone hugs its screen */
.phone {
  width: min(46%, 240px);
  margin: 0;
  border: var(--bw-3) solid var(--edge);
  border-radius: var(--r-xl);
  background: var(--abyss);
  box-shadow: var(--shadow-phone);
  overflow: hidden;
}
.phone img { width: 100%; aspect-ratio: 780 / 1600; object-fit: cover; }

/* ---------- sections ---------- */
.section { padding: var(--sp-7) 0 0; }
.section-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); max-width: 640px; }
.section-head--flush { margin-bottom: 0; }

.features { display: grid; gap: var(--sp-5); }
.feature { overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--bw-2) solid var(--edge); }
.feature-body { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.feature h3 { font-size: var(--fs-xl); letter-spacing: var(--track-bold); }
.feature p { color: var(--soft); }

/* ---------- sign-up ---------- */
.signup { display: grid; gap: var(--sp-4); align-content: start; }
.input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw-2) solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--well);
  box-shadow: var(--bevel-sunk);
  color: var(--ink);
  font: var(--fw-medium) var(--fs-lg)/1.3 var(--font);  /* at least 16 px: iOS zooms into smaller fields */
  appearance: none;
}
.input::placeholder { color: var(--soft); opacity: .6; }
.input:focus { outline: none; border-color: var(--yellow); }
.fineprint { font-size: var(--fs-sm); color: var(--soft); }
.fineprint a { color: var(--ink); }
.notice {
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw-1) solid var(--rim);
  border-radius: var(--r-md);
  background: var(--well);
  color: var(--ink);
}

/* ---------- studio ---------- */
.studio { display: grid; gap: var(--sp-5); align-items: center; }
.studio-mark { width: 88px; height: 88px; border-radius: var(--r-round); }
.studio p { color: var(--soft); max-width: 620px; }
.follow { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- footer ---------- */
.site-foot { margin-top: var(--sp-8); padding: var(--sp-6) 0 var(--sp-7); border-top: var(--bw-1) solid var(--panel); }
.site-foot .wrap { display: grid; gap: var(--sp-3); color: var(--soft); font-size: var(--fs-sm); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.site-foot a { color: var(--ink); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }

/* ---------- text pages (privacy, thanks) ---------- */
.page { padding: var(--sp-6) 0 0; }
.page .wrap { max-width: 760px; }
.page-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.prose { display: grid; gap: var(--sp-4); color: var(--soft); }
.prose h2 { margin-top: var(--sp-5); font-size: var(--fs-xl); color: var(--ink); letter-spacing: var(--track-bold); }
.prose ul { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.prose strong { color: var(--ink); font-weight: var(--fw-medium); }
.prose a { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom: var(--bw-1) solid var(--panel); }
.prose th { color: var(--ink); font-weight: var(--fw-medium); }
.message { display: grid; gap: var(--sp-4); justify-items: start; padding: var(--sp-6) var(--sp-5); }
.message .icon { width: 72px; height: 72px; }

/* ---------- phones: a lighter first screen, so the gameplay shows above the fold ---------- */
@media (max-width: 759px) {
  .lead-more { display: none; }                 /* the cards below tell the rest */
  .ticks li + li { display: none; }             /* keep "Plays in your browser, no install" */
}

/* ---------- wider screens ---------- */
@media (min-width: 760px) {
  :root { --gutter: 24px; }
  .hero { padding: calc(var(--sp-6) + 68px) 0 var(--sp-6); }
  .section { padding-top: var(--sp-8); }
  .hero + .section { padding-top: var(--sp-7); }   /* the hero's own bottom padding already adds to this gap */
  .feature img { aspect-ratio: 1; }
  .phone { width: min(48%, 260px); }
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .features { grid-template-columns: repeat(3, 1fr); }
  .feature { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }   /* image, title, text line up across the cards */
  .feature-body { display: contents; }
  .feature h3 { padding: var(--sp-4) var(--sp-5) var(--sp-2); }
  .feature p { padding: 0 var(--sp-5) var(--sp-5); }
  .studio { grid-template-columns: auto 1fr; }
  .site-foot .wrap { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- notched plates (corner-shape:bevel), as in the game ---------- */
@supports (corner-shape: bevel) {
  .card, .btn, .input, .chip, .notice { corner-shape: bevel; }
  .card, .btn, .input { border-radius: var(--cut) var(--cut-min); }
  .chip, .notice { border-radius: var(--cut-sm) var(--cut-min); }
  .phone { corner-shape: bevel; border-radius: var(--cut-go) var(--cut-min); }
}

/* ---------- states ---------- */
@media (hover: hover) {
  .btn:hover, .chip:hover { filter: var(--hover); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .chip { transition: none; }
  .btn:active, .chip:active { transform: none; }
}