/* ============================================================
   IQ Apps  ·  stijl.css
   Zelfde vormtaal als LedenIQ, in de donkere variant.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --donker:  #211E1C;
  --paneel:  #2A2724;
  --paneel2: #322E2A;
  --zand:    #EFECE6;
  --licht:   #FAF9F6;
  --zacht:   #A19A90;
  --rand:    rgba(239,236,230,.12);
  --iq:      #B8B3AA;

  --radius: 16px;
  --kop-letter:   'Fraunces', Georgia, serif;
  --tekst-letter: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--donker);
  color: var(--licht);
  font-family: var(--tekst-letter);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top);
}

h1, h2, h3 { font-family: var(--kop-letter); font-weight: 500; letter-spacing: -.01em; margin: 0; }
a { color: inherit; }

/* ---------- Bovenbalk ---------- */

.balk {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--rand);
}

.merk {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--kop-letter);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--licht);
}

.merk .teken {
  width: 26px;
  height: 19px;
  background: var(--iq);
  -webkit-mask: url('/iq-teken.png') no-repeat center / contain;
          mask: url('/iq-teken.png') no-repeat center / contain;
}

.balk nav { margin-left: auto; display: flex; gap: 18px; }

.balk nav a {
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--licht);
  opacity: .6;
}

.balk nav a:hover { opacity: 1; }

.omhulsel { max-width: 1040px; margin: 0 auto; padding: 54px 24px 80px; }

/* ---------- Hero ---------- */

.hero { margin-bottom: 44px; }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--zacht);
  margin: 0 0 16px;
}

.hero h1 {
  font-size: clamp(36px, 7vw, 60px);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 16px;
}

.hero h1 em { font-style: normal; color: var(--iq); }

.lead {
  color: var(--zacht);
  max-width: 44ch;
  margin: 0 0 28px;
  font-size: 16.5px;
}

/* streepje per app, in zijn eigen kleur */
.spectrum { display: flex; gap: 4px; height: 5px; }
.spectrum span { flex: 1; border-radius: 99px; background: var(--streep); opacity: .85; }

/* ---------- Tegels ---------- */

.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.tegel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 22px;
  text-decoration: none;
  overflow: hidden;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}


.tegel::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tegelkleur, var(--iq));
}


.tegel:hover {
  transform: translateY(-3px);
  background: var(--paneel2);
  border-color: color-mix(in srgb, var(--tegelkleur, var(--iq)) 85%, transparent);
}


.tegel:focus-visible { outline: 2px solid var(--tegelkleur, var(--iq)); outline-offset: 3px; }

.vlak {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 2px solid var(--tegelkleur, var(--iq));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.vlak i {
  display: block;
  width: 26px;
  height: 19px;
  background: var(--tegelkleur, var(--iq));
  -webkit-mask: url('/iq-teken.png') no-repeat center / contain;
          mask: url('/iq-teken.png') no-repeat center / contain;
}

.tegel h2 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.tegel p { margin: 0 0 18px; color: var(--zacht); font-size: 14.5px; }

.voetregel {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zacht);
}

.stip { width: 6px; height: 6px; border-radius: 99px; background: var(--tegelkleur, var(--iq)); }
.uit { margin-left: auto; }

/* ---------- Formulieren ---------- */

.kaart {
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: 18px;
  padding: 30px 28px;
  max-width: 410px;
  margin: 20px auto;
}

.kaart h1 { font-size: 26px; font-weight: 600; margin: 0 0 6px; }
.onderschrift { color: var(--zacht); margin: 0 0 22px; }

label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zacht);
  margin: 16px 0 6px;
}

input[type=text], input[type=email], input[type=password] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: #1A1715;
  color: var(--licht);
  font-family: inherit;
  font-size: 16px;
}

input:focus {
  outline: none;
  border-color: var(--iq);
  box-shadow: 0 0 0 3px rgba(184,179,170,.18);
}

.knop {
  margin-top: 22px;
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--zand);
  color: var(--donker);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
}

.knop:hover { background: var(--licht); }

.melding { padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 15px; }
.fout { background: rgba(168,67,79,.2);  color: #EFB9C0; }
.goed { background: rgba(92,122,84,.2);  color: #BFD8B7; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .tegel:hover { transform: none; }
}