/*
 * stijl.css — LeisureIQ
 * ---------------------------------------------------------------------
 *  Eén stijlbestand voor de hele website. Dezelfde kleuren en hetzelfde
 *  lettertype als de schermen van GateIQ, zodat iemand die van de site
 *  naar zijn dashboard gaat niet het gevoel heeft in een ander product
 *  te belanden.
 *
 *  Het woordmerk is het logo: de naam met de laatste twee letters in een
 *  verloop. Dat geldt voor alle producten -- GateIQ, MetronIQ, AccessIQ.
 *  Geen plaatjes dus, alleen letters. Dat schaalt overal mee en blijft
 *  scherp op elk scherm.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&display=swap');

:root {
  --groen:#05D996; --cyaan:#00A0D8; --blauw:#0678FC;
  --bg:#071624; --vlak:#0E2537; --vlak2:#143047; --vlak3:#1A3A52;
  --rand:#1E3D55; --rand2:#2C536F;
  --tekst:#E6EDF3; --zacht:#8CA3B8; --uit:#5A7086;
  --ok:#05D996; --let:#F5B841; --nee:#F0524D;
  --r:10px; --r2:14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 400 16px/1.65 Archivo, system-ui, -apple-system, sans-serif;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

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

/* ── Het woordmerk ───────────────────────────────────────────────────
   De naam met de laatste twee letters in een verloop. Dit is het logo:
   voor LeisureIQ en voor elk product hetzelfde principe. */
.merk { font-weight: 600; letter-spacing: -.03em; }
.merk i {
  font-style: normal;
  background: linear-gradient(150deg, var(--groen), var(--cyaan) 55%, var(--blauw));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Kop ─────────────────────────────────────────────────────────── */
header.kop {
  position: sticky; top: 0; z-index: 10;
  background: rgba(7,22,36,.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rand);
}
header.kop .binnen {
  max-width: 1080px; margin: 0 auto; padding: 15px 22px;
  display: flex; align-items: center; gap: 22px;
}
header.kop .merk { font-size: 21px; }
header.kop nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
header.kop nav a { color: var(--zacht); font-size: 15px; }
header.kop nav a:hover { color: var(--tekst); text-decoration: none; }
header.kop nav a.aan { color: var(--tekst); }

/* ── Inhoud ──────────────────────────────────────────────────────── */
main { max-width: 1080px; margin: 0 auto; padding: 0 22px 90px; }

.held { padding: 84px 0 64px; }
.held h1 { font-size: 46px; line-height: 1.15; margin: 0 0 16px; font-weight: 600;
           letter-spacing: -.03em; max-width: 18ch; }
.held p { font-size: 19px; color: var(--zacht); max-width: 58ch; margin: 0; }

h2 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 52px 0 6px; }
h3 { font-size: 18px; font-weight: 500; margin: 30px 0 4px; }
p { margin: 0 0 14px; }
.zacht { color: var(--zacht); }

/* ── Productkaarten ──────────────────────────────────────────────── */
.kaarten { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.kaart {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--r2); padding: 26px;
  display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
a.kaart:hover { border-color: var(--rand2); transform: translateY(-2px); text-decoration: none; }
.kaart .naam { font-size: 26px; margin-bottom: 8px; }
.kaart p { color: var(--zacht); font-size: 15px; flex: 1; }
.kaart .meer { color: var(--cyaan); font-size: 15px; margin-top: 10px; }

/* ── Merkjes ─────────────────────────────────────────────────────── */
.merkje {
  display: inline-block; padding: 3px 11px; border-radius: 20px;
  font-size: 13px; background: var(--vlak2); color: var(--zacht);
}
.merkje.ok  { background: rgba(5,217,150,.14); color: var(--ok); }
.merkje.let { background: rgba(245,184,65,.14); color: var(--let); }

/* ── Knoppen ─────────────────────────────────────────────────────── */
.knop {
  display: inline-block; padding: 14px 26px; border-radius: var(--r);
  font-size: 16px; font-weight: 500; cursor: pointer; border: none;
  background: var(--blauw); color: #fff;
}
.knop:hover { text-decoration: none; filter: brightness(1.1); }
.knop.stil { background: var(--vlak2); color: var(--tekst); border: 1px solid var(--rand); }

.knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ── Lijst met eigenschappen ─────────────────────────────────────── */
.punten { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          margin-top: 22px; }
.punt { background: var(--vlak); border: 1px solid var(--rand);
        border-radius: var(--r); padding: 20px; }
.punt b { display: block; font-weight: 500; margin-bottom: 5px; }
.punt span { color: var(--zacht); font-size: 15px; }

/* ── Aanmelden ───────────────────────────────────────────────────── */
.aanmeld {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--r2); padding: 26px; margin-top: 36px;
}
.aanmeld input {
  font: inherit; font-size: 16px; padding: 13px 15px; border-radius: var(--r);
  background: var(--vlak2); border: 1px solid var(--rand); color: var(--tekst);
  max-width: 260px;
}
.aanmeld input::placeholder { color: var(--uit); }

/* ── Voet ────────────────────────────────────────────────────────── */
footer.voet {
  border-top: 1px solid var(--rand); margin-top: 60px;
  padding: 26px 22px; color: var(--uit); font-size: 14px;
}
footer.voet .binnen { max-width: 1080px; margin: 0 auto;
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer.voet a { color: var(--zacht); }

/* ── Watermerk ───────────────────────────────────────────────────── */
.water {
  position: fixed; inset: 0; z-index: -1; display: grid; place-content: center;
  pointer-events: none; opacity: .05; user-select: none;
}
.water span { font-size: clamp(90px, 20vw, 260px); font-weight: 600;
              letter-spacing: -.04em; white-space: nowrap; }

@media (max-width: 640px) {
  .held { padding: 54px 0 40px; }
  .held h1 { font-size: 34px; }
  .held p { font-size: 17px; }
  header.kop .binnen { padding: 13px 16px; gap: 14px; }
  main { padding: 0 16px 60px; }
}