/* ============================================================
   Stedt — design system (plat CSS, geen build)
   Bron van waarheid: Stedt design system (redesign.zip handoff).
   Techniek overgenomen van loopt.best: hand-geschreven tokens + componenten.
   ============================================================ */

/* ============ TOKENS ============ */
:root {
  /* Stedt design-system tokens (canoniek). LET OP: 'darker' is design-system
     naamgeving — --color-primary-darker is juist de FELLE mint, niet donkerder. */
  --color-primary: #189a7e;
  --color-primary-darker: #0fd2a8;
  --color-secondary: #284958;
  --color-secondary-darker: #182b34;
  --color-lettering: #5f6267;
  --color-lettering-lighter: #b3b5b8;
  --color-lettering-darker: #252525;
  --radius-default: 4px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --card: #0e1f28;

  /* Pagina-niveau kleuren (non-token in het design) */
  --page-dark: #132630;
  --footer-dark: #0c1c24;
  --surface-light: #F2F6F5;

  /* Component-tokens (loopt-namen, hergewaardeerd naar Stedt-palet) */
  --bg: #132630;
  --bg-elevated: #1a2e38;
  --bg-deeper: #0c1c24;
  --text: rgba(255,255,255,.72);
  --text-muted: rgba(255,255,255,.66);
  --text-dim: rgba(255,255,255,.50);
  --text-faint: rgba(255,255,255,.40);
  --border: rgba(255,255,255,.12);
  --accent: #189a7e;
  --accent-hover: #0fd2a8;
  --accent-text: #0fd2a8;
  --on-accent: #08221b;
  --panel-bg: #0e1f28;
  --panel-text: #fff;
  --panel-dim: rgba(255,255,255,.55);
  --panel-accent: #0fd2a8;
  --panel-border: rgba(255,255,255,.12);
  --sans: "Figtree", system-ui, -apple-system, sans-serif;
  --serif: "Figtree", Georgia, serif;
  --mono: "Figtree", ui-monospace, monospace;
  --word: "Figtree", system-ui, sans-serif;
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 36px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 300ms;
}
[data-theme="dark"] {
  /* Stedt is dark-by-default; de toggle laat het palet bewust gelijk (geen
     aparte light-mode in dit design — secties zetten hun eigen bg inline). */
  --bg: #132630;
  --bg-elevated: #1a2e38;
  --bg-deeper: #0c1c24;
  --text: rgba(255,255,255,.72);
  --text-muted: rgba(255,255,255,.66);
  --text-dim: rgba(255,255,255,.50);
  --text-faint: rgba(255,255,255,.40);
  --border: rgba(255,255,255,.12);
  --accent: #189a7e;
  --accent-hover: #0fd2a8;
  --accent-text: #0fd2a8;
  --on-accent: #08221b;
  --panel-bg: #0e1f28;
  --panel-text: #fff;
  --panel-dim: rgba(255,255,255,.55);
  --panel-accent: #0fd2a8;
  --panel-border: rgba(255,255,255,.12);
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.03em; line-height: 1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
ul { list-style: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 3px; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; }

.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .10em; text-transform: uppercase; color: var(--text-dim); }
.word { font-family: var(--word); font-weight: 600; letter-spacing: -.015em; line-height: 1; }

/* ============================================================
   Stedt productpagina-componenten — 1:1 overgenomen uit het
   design <style>-blok (redesign.zip / Stedt-C-Product.dc.html).
   De pagina is niet in een .pc-root gewikkeld, dus de design-regels
   die op .pc-root waren gescopet zijn hier globaal gemaakt:
   --card -> :root, ::selection -> globaal.
   ============================================================ */
::selection { background: rgba(15,210,168,0.28); }

/* Per-merk carousel-overrides (design pc-b-*). Niet in gebruik in de
   Blade (kleuren staan inline per slide), maar 1:1 meegenomen. */
.pc-b-coral { --color-primary:#e8553f; --color-primary-darker:#ff7a5c; --card:#22120f; }
.pc-b-pink  { --color-primary:#d8479a; --color-primary-darker:#ff79c0; --card:#23121d; }
.pc-b-amber { --color-primary:#dd9418; --color-primary-darker:#ffc24d; --card:#211a0c; }
.pc-b-sky   { --color-primary:#1f8fd6; --color-primary-darker:#5cc0ff; --card:#0c1a26; }

@keyframes pcFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

.pc-cta { transition:transform .2s ease, box-shadow .2s ease; }
.pc-cta:hover { transform:translateY(-2px); box-shadow:0 0 0 1px rgba(15,210,168,0.5); }
.pc-card { transition:border-color .25s ease, background .25s ease, transform .25s ease; }
.pc-card:hover { border-color:rgba(15,210,168,0.45); background:rgba(15,210,168,0.05); transform:translateY(-3px); }
.pc-card:hover .pc-ic { background:linear-gradient(135deg,var(--color-primary),var(--color-primary-darker)); color:#08221b; }
.pc-input { transition:border-color .2s ease; }
.pc-input:focus { outline:none; border-color:var(--color-primary); }
.pc-link { transition:color .2s ease; }
.pc-link:hover { color:var(--color-primary-darker); }

/* Hero carousel dots — base colors (dark hero). Mobile recolors these in the
   max-width:880px block so they stay visible on the light slider background. */
.pc-dot-light { background:rgba(255,255,255,0.25); }
.pc-dot-active { background:var(--color-primary-darker); }
/* Bigger invisible tap target so the dots are easy to hit on touch. */
.pc-dot { position:relative; }
.pc-dot::after { content:''; position:absolute; inset:-10px; }

@media (max-width:880px) {
  .pc-hero { display:block !important; padding-top:56px !important; padding-bottom:0 !important; }
  .pc-hero > div:first-child { margin-bottom:30px; }
  .pc-slider { display:block; width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding:44px 28px 30px; background:#F2F6F5; }
  /* Mobiel: één kaart per keer, gecentreerd. Viewport begrensd + auto-gecentreerd,
     kaart vult 'm exact — geen peek, dus ook geen fade-glow nodig. */
  .pc-slider .pc-viewport { max-width:400px; margin:0 auto; }
  .pc-slider .pc-fade { display:none !important; }
  .pc-slider .pc-hint { color:var(--color-lettering) !important; }
  .pc-slider .pc-dot-light { background:rgba(40,73,88,0.22) !important; }
  .pc-slider .pc-dot-active { background:var(--color-primary) !important; }
  .pc-track > div { box-shadow:none !important; width:100% !important; max-width:none !important; }
  .pc-g3 { grid-template-columns:1fr 1fr !important; }
  .pc-gsol { grid-template-columns:1fr !important; }
  .pc-g2, .pc-g2c { grid-template-columns:1fr !important; }
}
@media (max-width:560px) {
  .pc-g3 { grid-template-columns:1fr !important; }
  .pc-stats { flex-wrap:wrap; gap:16px 24px !important; }
  .pc-stats .pc-divider { display:none !important; }
  .pc-slider { padding:38px 16px 14px; }
  /* Krappe nav op telefoon: minder zijmarge, compactere taalknoppen + CTA. */
  .nav > div { padding-left:16px !important; padding-right:16px !important; }
  [data-cy="lang-switch"] > * { padding:4px 9px !important; font-size:0.68rem !important; }
  [data-cy="lang-switch"] { gap:3px !important; }
  [data-cy="nav-cta"] { padding:8px 14px !important; font-size:0.82rem !important; }
}