/* Ballpad — huisstijl.
   Vormtaal van een premium technologiemerk: veel wit, strakke typografische trap,
   niets dat om aandacht schreeuwt. De inhoud is absurd, de vorm is bloedserieus. */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;700;800;900&family=Instrument+Sans:wght@400;500;600&display=swap');

:root {
  --ink: #0b0b0c;
  --ink-zacht: #4a4a50;
  --ink-flets: #86868b;
  --grond: #ffffff;
  --grond-warm: #f6f5f3;
  --wit: #ffffff;
  --lijn: #e2e0dc;
  --tan: #c2855c;
  --tan-diep: #9a6540;
  --zwart: #08080a;

  --display: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
  --tekst: 'Instrument Sans', 'Helvetica Neue', Helvetica, sans-serif;

  --breed: 1240px;
  --nav-h: 48px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--ink);
  font-family: var(--tekst);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- navigatie ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.nav-binnen {
  max-width: var(--breed);
  margin: 0 auto;
  height: 100%;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.merk {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.035em;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* het merkteken: twee bollen met een naad. Zelf getekend, geen logo van een ander. */
.teken { width: 19px; height: 15px; flex: none; }

.nav a.link {
  font-size: 12px;
  color: var(--ink-zacht);
  letter-spacing: .01em;
  transition: color .2s;
  white-space: nowrap;
}
.nav a.link:hover { color: var(--ink); }
.nav-links { display: flex; gap: 22px; align-items: center; }

@media (max-width: 900px) {
  .nav-links { gap: 14px; overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
}

/* ---------- mededelingenbalk ---------- */

.balk {
  background: var(--ink);
  color: #fff;
  text-align: center;
  font-size: 13px;
  padding: 9px 20px;
  letter-spacing: -.005em;
}
.balk a { color: var(--tan); font-weight: 600; }
.balk a:hover { text-decoration: underline; }

/* ---------- typografische trap ---------- */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.04;
  margin: 0;
}

.t-reus { font-size: clamp(52px, 9vw, 108px); font-weight: 900; letter-spacing: -.05em; }
.t-groot { font-size: clamp(38px, 5.6vw, 68px); }
.t-mid { font-size: clamp(27px, 3.4vw, 42px); }

.onderschrift {
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.28;
  color: var(--ink);
  margin: 14px 0 0;
  font-family: var(--display);
}

.fluister {
  font-size: 12px;
  color: var(--ink-flets);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- knoppen ---------- */

.knoppen { display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 26px; }

.knop {
  display: inline-block;
  background: var(--tan-diep);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 980px;
  transition: transform .18s ease, background .18s ease;
}
.knop:hover { background: var(--tan); transform: translateY(-1px); }

.tekstlink {
  color: var(--tan-diep);
  font-size: 16px;
  font-weight: 500;
}
.tekstlink::after { content: ' ›'; }
.tekstlink:hover { text-decoration: underline; }

/* ---------- secties ---------- */

.sectie { padding: 76px 22px; text-align: center; }
.sectie-binnen { max-width: var(--breed); margin: 0 auto; }
.smal { max-width: 720px; margin-left: auto; margin-right: auto; }

.donker { background: var(--zwart); color: #f4f4f6; }
.donker .onderschrift { color: #c9c9ce; }
.donker .fluister { color: #8b8b92; }
.donker .tekstlink { color: #e3a878; }

/* De renders hebben geen zuiver wit fond (gemeten: 249-254). In plaats van dat
   verschil weg te poetsen maken we het kader opzettelijk: een afgeronde kaart.
   Zo leest de rand als ontwerp en niet als fout. */
.hero-beeld {
  margin: 40px auto 0;
  max-width: 920px;
  background: #fdfdfd;
  border-radius: 24px;
  padding: 26px;
  border: 1px solid var(--lijn);
}
.hero-beeld img { margin: 0 auto; border-radius: 6px; }
.donker .hero-beeld { background: #030303; border-color: #1a1a1e; }

/* ---------- productraster ---------- */

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 22px 76px;
}

.tegel {
  background: #fdfdfd;
  border-radius: 20px;
  padding: 44px 30px 0;
  text-align: center;
  overflow: hidden;
  border: 1px solid var(--lijn);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s;
  display: flex;
  flex-direction: column;
}
.tegel:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 0, 0, .09); }
.tegel.zwart { background: var(--zwart); color: #f4f4f6; border-color: #1c1c20; }

.tegel h3 { font-size: 30px; letter-spacing: -.035em; }
.tegel .tag {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--ink-zacht);
  margin: 9px 0 0;
}
.tegel.zwart .tag { color: #a8a8b0; }
.tegel .prijs { font-size: 13px; color: var(--ink-flets); margin: 14px 0 0; }
.tegel .tegel-beeld { margin-top: auto; padding-top: 30px; }
.tegel.zwart .tegel-beeld img { border-radius: 6px; }

.tegel.breed { grid-column: 1 / -1; }

/* ---------- specstrook ---------- */

.strook {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  overflow: hidden;
  max-width: var(--breed);
  margin: 0 auto;
}
.strook > div { background: var(--grond-warm); padding: 30px 20px; text-align: center; }
.strook .getal {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.045em;
  display: block;
}
.strook .wat { font-size: 13px; color: var(--ink-flets); margin-top: 5px; }

/* ---------- spectabel ---------- */

.specs { max-width: 860px; margin: 0 auto; text-align: left; }
.specs dl { margin: 0; }
.specs .rij {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 26px;
  padding: 19px 0;
  border-top: 1px solid var(--lijn);
  align-items: baseline;
}
.specs .rij:last-child { border-bottom: 1px solid var(--lijn); }
.specs dt { font-size: 14px; color: var(--ink-flets); font-weight: 500; }
.specs dd { margin: 0; font-size: 16px; }
@media (max-width: 620px) {
  .specs .rij { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- kleurkiezer ---------- */

.kleuren { display: flex; gap: 12px; justify-content: center; margin-top: 22px; }
.kleuren span {
  width: 21px; height: 21px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .14);
  display: inline-block;
}

/* ---------- voettekst ---------- */

.voet {
  background: var(--grond-warm);
  border-top: 1px solid var(--lijn);
  padding: 44px 22px;
  font-size: 12px;
  color: var(--ink-flets);
  line-height: 1.7;
}
.voet-binnen { max-width: var(--breed); margin: 0 auto; }
.voet-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--lijn);
}
.voet h4 { font-family: var(--display); font-size: 12px; color: var(--ink); margin: 0 0 9px; letter-spacing: -.01em; }
.voet li { list-style: none; }
.voet ul { margin: 0; padding: 0; }
.voet a:hover { color: var(--ink); text-decoration: underline; }
.klein { padding-top: 22px; }
.klein p { margin: 0 0 9px; max-width: 900px; }

/* ---------- binnenkomst ---------- */

@keyframes op {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.op { animation: op .8s cubic-bezier(.2, .7, .3, 1) both; }
.op-2 { animation-delay: .09s; }
.op-3 { animation-delay: .18s; }
.op-4 { animation-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  .op { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- contractadres ----------
   Het blok staat er ook vóór de lancering, met een plaatshouder. Zo hoeft er
   later niets aan de indeling te veranderen, alleen de waarde in bouw.py. */

.ca {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 26px auto 0;
  padding: 13px 15px 13px 19px;
  background: var(--grond-warm);
  border: 1px solid var(--lijn);
  border-radius: 14px;
  font: inherit;
  cursor: pointer;
  max-width: 100%;
  transition: border-color .2s, background .2s;
}
.ca:hover { border-color: var(--tan); background: #fff; }

.ca code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-align: left;
}

.ca-kopie {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tan-diep);
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: 980px;
  padding: 6px 13px;
}

.ca-leeg { cursor: default; }
.ca-leeg code { color: var(--ink-flets); }
.ca-leeg:hover { border-color: var(--lijn); background: var(--grond-warm); }

.ca-regel {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-flets);
}

/* ---------- subnavigatie op productpagina's ----------
   Apple heeft per product een eigen balk onder de hoofdnavigatie. Die maakt
   het geheel geloofwaardig: het voelt als een winkel, niet als een grap. */

.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--lijn);
}
.subnav-binnen {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 22px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.subnav-naam {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.subnav-links { display: flex; align-items: center; gap: 20px; }
.subnav-links a { font-size: 12px; color: var(--ink-zacht); white-space: nowrap; }
.subnav-links a:hover { color: var(--ink); }
.subnav-knop {
  background: var(--tan-diep);
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 980px;
  font-weight: 600;
}
.subnav-knop:hover { background: var(--tan); }
@media (max-width: 720px) {
  .subnav-naam { font-size: 15px; }
  .subnav-links { gap: 13px; }
}

/* ---------- vergelijken ---------- */

.vergelijk-rol { overflow-x: auto; max-width: var(--breed); margin: 0 auto; padding: 0 22px; }
.vergelijk {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
  text-align: left;
  font-size: 14px;
}
.vergelijk th, .vergelijk td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}
.vergelijk thead th { border-bottom: 1px solid var(--ink); padding-bottom: 20px; }
.vergelijk thead img { width: 116px; margin: 0 auto 12px; }
.vergelijk thead .naam {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.03em;
  display: block;
}
.vergelijk thead .vanaf { font-size: 12px; color: var(--ink-flets); margin-top: 4px; display: block; }
.vergelijk tbody th {
  font-size: 12px;
  color: var(--ink-flets);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  width: 150px;
}
.vergelijk tbody tr:hover td, .vergelijk tbody tr:hover th { background: var(--grond-warm); }

/* ---------- accessoires ---------- */

.acc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 22px;
}
.acc-kaart {
  background: #fdfdfd;
  border: 1px solid var(--lijn);
  border-radius: 18px;
  padding: 26px 22px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s;
}
.acc-kaart:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .07); }
.acc-kaart h3 { font-size: 19px; letter-spacing: -.025em; }
.acc-kaart p { font-size: 14px; color: var(--ink-zacht); margin: 7px 0 0; }
.acc-kaart .vanaf { font-size: 12px; color: var(--ink-flets); margin-top: 11px; }
.acc-kaart img { margin-top: auto; padding-top: 18px; }

/* ---------- inruil ---------- */

.inruil {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 44px;
  max-width: var(--breed);
  margin: 0 auto;
  text-align: left;
}
.inruil img { border-radius: 16px; border: 1px solid var(--lijn); }
@media (max-width: 820px) {
  .inruil { grid-template-columns: 1fr; text-align: center; gap: 26px; }
}

/* ---------- zoeken ---------- */

.zoekknop {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--ink-zacht);
  display: flex;
  align-items: center;
}
.zoekknop:hover { color: var(--ink); }

.zoeklaag {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  padding: 90px 22px 40px;
  overflow-y: auto;
  animation: op .3s ease both;
}
.zoeklaag[hidden] { display: none !important; }
.zoek-binnen { max-width: 760px; margin: 0 auto; }
.zoek-veld {
  width: 100%;
  font-family: var(--display);
  font-size: clamp(26px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: -.04em;
  border: 0;
  border-bottom: 2px solid var(--lijn);
  padding: 0 0 16px;
  background: none;
  color: var(--ink);
  outline: none;
}
.zoek-veld::placeholder { color: #c9c7c2; }
.zoek-veld:focus { border-bottom-color: var(--tan); }
.zoek-uitleg { font-size: 13px; color: var(--ink-flets); margin: 18px 0 0; }
.zoek-lijst { margin: 26px 0 0; padding: 0; list-style: none; }
.zoek-lijst li { border-bottom: 1px solid var(--lijn); }
.zoek-lijst a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 4px;
  font-size: 16px;
}
.zoek-lijst a:hover { background: var(--grond-warm); }
.zoek-lijst img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.zoek-lijst .zoek-tag { color: var(--ink-flets); font-size: 13px; margin-left: auto; text-align: right; }
.zoek-sluit {
  position: absolute;
  top: 22px;
  right: 22px;
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-zacht);
}

/* ---------- verschijnen bij scrollen ---------- */

.onthul { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.onthul.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .onthul { opacity: 1; transform: none; transition: none; }
}

/* ---------- 404 ---------- */

.leeg-pagina { padding: 120px 22px 140px; text-align: center; }

/* ---------- mascotte ----------
   Spaarzaam gebruiken. De site werkt omdat hij zichzelf serieus neemt; een
   figuurtje op elke pagina haalt dat onderuit. Daarom alleen op plekken waar
   een echt bedrijf er ook een zet: de 404, de voettekst, en één keer per
   verhalende pagina. */

.masc-groot { width: 260px; margin: 0 auto 26px; }
.masc-mid { width: 190px; margin: 0 auto 22px; }

.voet-masc {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 22px;
}
.voet-masc img { width: 54px; flex: none; }
.voet-masc span { font-size: 12px; color: var(--ink-flets); }

.sectie-masc { display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap; }
.sectie-masc img { width: 170px; flex: none; }
.sectie-masc .woord { max-width: 440px; text-align: left; }
@media (max-width: 620px) {
  .sectie-masc .woord { text-align: center; }
}

/* De mascotterenders hebben net als de productfoto's geen zuiver wit fond.
   Randen wegmaskeren zodat er geen kader omheen staat. */
.masc-groot img, .masc-groot,
.masc-mid, .voet-masc img, .sectie-masc img {
  -webkit-mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, #000 62%, transparent 96%);
  mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, #000 62%, transparent 96%);
}