/* Gedeelde basislaag voor alle daanturk.nl-pagina's: design-tokens + reset.
   Bron van waarheid voor deze twee lagen — niet per pagina opnieuw definiëren.
   Zie DESIGN.md in de projectroot voor de volledige tokendocumentatie. */

/* ---------- Fonts: zelf gehost, latin-subset, variabel ----------
   Nooit terug naar fonts.googleapis.com: dat zet twee externe hosts op het
   kritieke pad en stuurt bezoekers-IP's naar Google.

   Bestandsnamen zijn onveranderlijk. Fontbestanden vallen onder de
   `/assets/(.*)`-regel in vercel.json: `immutable, max-age=1 jaar`. Bij een
   fontupdate MOET de bestandsnaam dus mee wijzigen — anders houden
   terugkerende bezoekers een jaar lang de oude versie.

   Let op: dit bestand zélf (style.css) valt daar NIET onder. vercel.json
   heeft er een bewuste uitzondering voor (`max-age=0, must-revalidate`),
   zodat CSS-wijzigingen direct live zijn. Een `?v=`-bump is hier dus niet
   nodig. Zie de cachingregel in Mother Landingpage/CLAUDE.md.

   Alleen de latin-subset is meegeleverd. De pijlen ← en → zitten in geen
   enkele Google-subset en kwamen sowieso al uit het systeemfont.

   De Fallback-families voorkomen layout shift tijdens de swap. De overrides
   zijn gemeten tegen de echte Arial, over de 44.095 tekens zichtbare tekst
   van deze site (Inter op gewicht 400, Sora op 700). Herbereken ze als de
   fonts of de teksten wezenlijk veranderen. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue');
  size-adjust: 106.80%;
  ascent-override: 90.71%;
  descent-override: 22.59%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/sora-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora Fallback';
  src: local('Arial'), local('Helvetica Neue');
  size-adjust: 115.72%;
  ascent-override: 83.82%;
  descent-override: 25.06%;
  line-gap-override: 0%;
}

:root {
  --space: #0F172A;
  --space-deep: #080B17;
  --space-panel: #121A30;
  --indigo: #4F46E5;
  --indigo-bright: #6366F1;
  --cyan: #22D3EE;
  --cyan-soft: #67E8F9;
  --violet: #A78BFA;
  --ink: #EEF2FC;
  --muted: #AAB6CE;
  --muted-dim: #93A0BC;
  --line: rgba(148, 163, 184, 0.16);
  --line-bright: rgba(99, 102, 241, 0.42);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.07);
  --r-sm: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --glow: 0 0 26px rgba(167, 139, 250, 0.16);
  /* Gedocumenteerd in DESIGN.md maar ontbrak hier als variabele — elke gebruiksplek
     hardcodete tot nu toe de hex-waarde zelf. --rood en --rood-tekst worden op alle
     formulieren sitewide gebruikt (validatiefout); --geel blijft bewust page-local
     op go-to-market/index.html (uitsluitend de score-bandgradient, DESIGN.md). */
  --cyan-ink: #04222B;
  --wit: #FFFFFF;
  --rood: #F87171;
  --rood-tekst: #FCA5A5;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Kicker (gedeeld component, basis — margin-bottom is pagina-tuning) ---------- */
.kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan-soft); }
.kicker::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); }

/* ---------- Cookie-banner (gedeeld component, alle pagina's behalve privacy) ---------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); background: rgba(8,11,23,0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line-bright); box-shadow: 0 -12px 40px rgba(0,0,0,0.4); transition: transform 0.3s ease, opacity 0.3s ease; }
.cookie-banner[hidden] { display: none; }
.cookie-banner.verborgen { transform: translateY(110%); opacity: 0; pointer-events: none; }
.cookie-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.cookie-tekst { color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 70em; }
.cookie-tekst a { color: var(--cyan-soft); text-decoration: underline; }
.cookie-knoppen { display: flex; flex-direction: column; gap: 10px; }
.cookie-knoppen .knop { min-height: 48px; }
@media (min-width: 768px) {
  .cookie-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; }
  .cookie-knoppen { flex-direction: row; flex-shrink: 0; }
  .cookie-knoppen .knop { width: auto; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

/* ---------- Navigatie (gedeeld component, alle pagina's behalve privacy) ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(8, 11, 23, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav-binnen { display: flex; align-items: center; justify-content: space-between; min-height: 66px; }
.nav-logo { font-family: 'Sora', 'Sora Fallback', sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 9px; padding: 9px 0; min-height: 44px; }
.nav-logo .mark { width: 26px; height: 26px; }
.nav-cta { display: inline-flex; align-items: center; min-height: 44px; gap: 7px; padding: 9px 20px; border-radius: 9999px; background: var(--glass); border: 1px solid var(--line-bright); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.nav-cta:hover { border-color: var(--violet); background: var(--glass-2); }
.nav-contact-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 22px; border-radius: 9999px; background: linear-gradient(120deg, var(--indigo) 0%, var(--violet) 100%); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: box-shadow 0.2s, transform 0.15s; box-shadow: 0 4px 16px rgba(124,92,240,0.25); }
.nav-contact-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(124,92,240,0.40); }
.dropdown { position: relative; }
.dropdown-toggle { background: none; border: none; cursor: pointer; color: var(--muted); font-family: 'Inter', 'Inter Fallback', -apple-system, sans-serif; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; padding: 0; transition: color 0.2s; }
.dropdown-toggle:hover, .dropdown.open .dropdown-toggle { color: var(--ink); }
.dropdown-chevron { transition: transform 0.2s; flex-shrink: 0; }
.dropdown.open .dropdown-chevron { transform: rotate(180deg); }
.dropdown-menu { display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); min-width: 248px; background: var(--space-panel); border: 1px solid var(--line-bright); border-radius: 12px; padding: 8px; box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.1); z-index: 100; }
.dropdown.open .dropdown-menu { display: block; }
.dropdown-item { display: block; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.dropdown-item:hover { background: var(--glass-2); color: var(--ink); }
.nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile { display: none; flex-direction: column; gap: 4px; background: rgba(8,11,23,0.97); border-top: 1px solid var(--line); padding: 16px 20px 24px; }
.nav-mobile.open { display: flex; }
.nav-mobile > a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 0; border-bottom: 1px solid var(--line); transition: color 0.2s; }
.nav-mobile > a:hover { color: var(--ink); }
.nav-mobile-section { padding: 10px 0; border-bottom: 1px solid var(--line); }
.nav-mobile-label { display: block; font-size: 12px; font-weight: 600; color: var(--cyan-soft); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.nav-mobile-sub { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 8px; transition: background 0.15s, color 0.15s; }
.nav-mobile-sub:hover { background: var(--glass-2); color: var(--ink); }
.nav-mobile-cta { align-self: flex-start; margin-top: 12px; }
@media (min-width: 768px) {
  .nav-burger { display: none; }
  .nav-mobile { display: none !important; }
}

/* ---------- Knoppen (gedeeld component) ---------- */
.knop { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; width: 100%; padding: 16px 30px; border-radius: 9999px; font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 16px; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; border: none; transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.knop-primair { background: linear-gradient(120deg, var(--indigo) 0%, var(--violet) 100%); color: #fff; box-shadow: 0 10px 28px rgba(124, 92, 240, 0.30); }
.knop-primair:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(124, 92, 240, 0.42); }
.knop-cyan { background: var(--cyan); color: #04222B; box-shadow: var(--glow); }
.knop-cyan:hover { transform: translateY(-2px); filter: brightness(1.06); }
.knop-outline { background: var(--glass); color: var(--ink); border: 1px solid var(--line-bright); }
.knop-outline:hover { transform: translateY(-2px); background: var(--glass-2); border-color: var(--violet); }
.knop[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-wit { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--indigo); font-weight: 700; font-size: 15.5px; padding: 15px 28px; border-radius: 9999px; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,0.20); transition: transform 0.15s; }
.btn-wit:hover { transform: translateY(-2px); }
@media (min-width: 768px) {
  .knop { width: auto; display: inline-flex; }
}

/* ---------- Footer (gedeeld basisframe — padding/margin-top blijft per pagina inline) ---------- */
footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
footer .glow { position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% 120%, rgba(124,92,240,0.18), transparent 70%); pointer-events: none; }
footer .container { position: relative; z-index: 1; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; font-size: 14.5px; }
.footer-links a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 9999px; color: var(--ink); text-decoration: none; background: var(--glass); border: 1px solid var(--line); transition: border-color 0.25s, background 0.25s, color 0.25s; }
.footer-links a:hover { border-color: var(--line-bright); background: var(--glass-2); color: #fff; }
.footer-links a svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--cyan-soft); transition: color 0.25s; }
.footer-links a:hover svg { color: var(--cyan); }