/* ============================================================
   ONLYLIKES — ontwerpcontract

   THESIS: de bestelmodule is de pagina. Je kiest een staffel en de hele
   eerste viewport rekent mee: prijs, prijs per 1.000, levertijd, de teller
   in de telefoon. Geen rij met drie prijskaartjes.
   OWN-WORLD: elk platform zijn eigen wereld. TikTok nachtzwart met magenta
   en cyaan, YouTube wit met rood, Instagram licht met paars, roze en oranje,
   Facebook lichtgrijs met blauw. Overal Jost in zware gewichten, cijfers als
   hoofdbeeld, pilvormige bediening en een telefoon die dat platform toont.
   STORY: bezoeker wil snel en goedkoper likes, zonder wachtwoord en zonder
   gedoe, ziet in een oogopslag prijs, levertijd en garantie, en bestelt.
   FIRST VIEWPORT: links de kop plus de staffelkiezer met een levend
   prijsgetal en de knop eronder, rechts de telefoon die meetelt.
   FORM: het bestelformulier als hero.
   ============================================================ */

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

/* ---------- TikTok: nachtzwart, en tevens de basis ---------- */
:root {
  --ground: #07080b;
  --ground-image: none;
  --ground-2: #0d0f15;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .22);
  --ink: #f6f7fa;
  --ink-soft: #b9bec9;
  --ink-dim: #868d9b;

  --accent: #fe2c55;          /* knoppen, schuif, chips */
  --accent-ink: #ffffff;      /* tekst op de accentkleur */
  --hl: #fe2c55;              /* gemarkeerd woord in de kop, besparing, plusjes */
  --field: radial-gradient(1100px 620px at 78% -8%, rgba(254, 44, 85, .30), transparent 62%),
           radial-gradient(760px 520px at 6% 8%, rgba(37, 244, 238, .16), transparent 60%);

  --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  --panel-soft: rgba(255, 255, 255, .03);
  --chip-bg: rgba(255, 255, 255, .04);
  --hover: rgba(255, 255, 255, .08);
  --track: rgba(255, 255, 255, .14);
  --hatch: rgba(255, 255, 255, .045);
  --num-bg: #07080b;

  --phone-chassis: linear-gradient(170deg, #14161d, #08090d 60%);
  --phone-ring: rgba(255, 255, 255, .03);
  --screen-bg: transparent;
  --screen-ink: #ffffff;
  --screen-dim: rgba(255, 255, 255, .66);
  --screen-line: rgba(255, 255, 255, .12);
  --screen-accent: #fe2c55;
  --avatar-bg: linear-gradient(140deg, #fe2c55, #25f4ee);
  --media-bg: var(--field), linear-gradient(160deg, #1b1e27, #0a0b10);

  --grain-op: .22;
  --grain-blend: soft-light;

  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .85), 0 2px 8px -2px rgba(0, 0, 0, .6);
  --shadow-lift: 0 34px 70px -26px rgba(0, 0, 0, .9);
  --ease: cubic-bezier(.16, .84, .32, 1);
}

/* ---------- gedeeld voor de drie gedrenkte platforms: witte tekst op kleur ---------- */
[data-platform="youtube"], [data-platform="instagram"], [data-platform="facebook"] {
  --line: rgba(255, 255, 255, .18);
  --line-strong: rgba(255, 255, 255, .34);
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, .86);
  --ink-dim: rgba(255, 255, 255, .70);

  --accent: #ffffff;
  --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
  --panel-soft: rgba(255, 255, 255, .08);
  --chip-bg: rgba(255, 255, 255, .10);
  --hover: rgba(255, 255, 255, .16);
  --track: rgba(255, 255, 255, .28);
  --hatch: rgba(255, 255, 255, .09);
  --num-bg: rgba(0, 0, 0, .22);

  --phone-ring: rgba(255, 255, 255, .10);
  --screen-bg: #ffffff;
  --screen-line: rgba(0, 0, 0, .10);

  --grain-op: .16;
  --grain-blend: soft-light;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .55), 0 2px 8px -2px rgba(0, 0, 0, .3);
  --shadow-lift: 0 34px 70px -26px rgba(0, 0, 0, .6);
}

/* ---------- YouTube: diep rood ---------- */
[data-platform="youtube"] {
  --ground: #b3001f;
  --ground-image: linear-gradient(160deg, #7a0018 0%, #b3001f 55%, #d10a2e 100%);
  --ground-2: rgba(0, 0, 0, .18);
  --accent-ink: #b3001f;
  --hl: #ffc2cc;
  --field: radial-gradient(1000px 620px at 82% -12%, rgba(255, 90, 110, .45), transparent 62%),
           radial-gradient(760px 520px at 2% 4%, rgba(0, 0, 0, .28), transparent 60%);
  --phone-chassis: linear-gradient(170deg, #2b2d31, #17181b 60%);
  --screen-ink: #0f0f0f;
  --screen-dim: #606470;
  --screen-accent: #ff0033;
  --avatar-bg: #ff0033;
  --media-bg: linear-gradient(150deg, #2a2c31, #121317);
}

/* ---------- Instagram: het verloop van paars naar roze naar oranje ---------- */
[data-platform="instagram"] {
  --ground: #a11d4f;
  --ground-image: linear-gradient(150deg, #3f1b80 0%, #8a1d63 38%, #c0234f 66%, #c0521f 100%);
  --ground-2: rgba(0, 0, 0, .18);
  --accent-ink: #b81e5b;
  --hl: #ffd6a3;
  --field: radial-gradient(900px 560px at 84% -10%, rgba(255, 150, 60, .40), transparent 62%),
           radial-gradient(760px 560px at 0% 10%, rgba(90, 40, 200, .45), transparent 60%);
  --phone-chassis: linear-gradient(170deg, #2a2430, #16121a 60%);
  --screen-ink: #1b1220;
  --screen-dim: #6f6072;
  --screen-accent: #e1306c;
  --avatar-bg: linear-gradient(140deg, #f9a03b, #d62976 55%, #7a34c8);
  --media-bg: linear-gradient(140deg, #f9a03b, #d62976 45%, #7a34c8);
}

/* ---------- Facebook: diep blauw ---------- */
[data-platform="facebook"] {
  --ground: #0866ff;
  --ground-image: linear-gradient(160deg, #0a3fa8 0%, #0b5be0 50%, #0866ff 100%);
  --ground-2: rgba(0, 0, 0, .16);
  --accent-ink: #0a54d6;
  --hl: #bfe0ff;
  --field: radial-gradient(1000px 620px at 82% -12%, rgba(130, 190, 255, .42), transparent 62%),
           radial-gradient(740px 520px at 2% 4%, rgba(0, 0, 0, .22), transparent 60%);
  --phone-chassis: linear-gradient(170deg, #2a2d33, #16181c 60%);
  --screen-ink: #1c1e21;
  --screen-dim: #65686c;
  --screen-accent: #0866ff;
  --avatar-bg: #0866ff;
  --media-bg: linear-gradient(150deg, #4a90ff, #0b3f9e);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground-image), var(--ground);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: var(--grain-op);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

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

h1, h2, h3 { line-height: 1.02; letter-spacing: -.035em; margin: 0; text-wrap: balance; font-weight: 800; }
p { margin: 0 0 1em; max-width: 68ch; }

.wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--ink-soft); }
.dim { color: var(--ink-dim); }

/* ---------- navigatie ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--ground) 70%, transparent);
  border-bottom: 1px solid var(--line);
}
.top__in { display: flex; align-items: center; gap: 1.6rem; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.32rem; letter-spacing: -.05em; text-decoration: none; }
.brand__mark { width: 30px; height: 30px; flex: none; color: var(--hl); }
.brand em { font-style: normal; color: var(--hl); }

.nav { display: flex; gap: .35rem; margin-left: auto; align-items: center; }
.nav a {
  text-decoration: none; font-weight: 500; font-size: .97rem; color: var(--ink-soft);
  padding: .5rem .8rem; border-radius: 999px; transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); background: var(--hover); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--hover); }
.nav__cta {
  background: var(--accent) !important; color: var(--accent-ink) !important; font-weight: 700 !important;
  box-shadow: 0 10px 24px -12px var(--accent);
}
.nav__toggle { display: none; }

/* ---------- knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font: inherit; font-weight: 700; letter-spacing: -.01em;
  padding: 1.02rem 1.7rem; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .18s var(--ease);
}
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 16px 34px -16px var(--accent); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -16px var(--accent); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: var(--panel-soft); }
.btn--ghost:hover { background: var(--hover); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn--block { width: 100%; }
:focus-visible { outline: 3px solid var(--hl); outline-offset: 3px; border-radius: 6px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(1.8rem, 3.4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); }
.hero::before { content: ''; position: absolute; inset: -120px 0 0; background: var(--field); pointer-events: none; }
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }

.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .9rem .42rem .62rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--panel-soft);
  font-size: .86rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 1rem;
}
.pill b { color: var(--ink); font-weight: 700; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hl); box-shadow: 0 0 0 0 color-mix(in srgb, var(--hl) 70%, transparent); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 900; }
h1 .hl { color: var(--hl); }
.hero p.lede { margin-top: .9rem; max-width: 54ch; font-size: clamp(1.02rem, 1.3vw, 1.14rem); }

.hero__usp { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.1rem 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: .97rem; }
.hero__usp li { display: flex; align-items: center; gap: .45rem; }
.hero__usp svg { color: var(--hl); flex: none; }

/* ---------- bestelmodule ---------- */
.order {
  margin-top: 1.4rem; padding: 1.5rem 1.5rem 1.6rem; border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong); background: var(--panel-bg);
  box-shadow: var(--shadow-lift); backdrop-filter: blur(10px);
}
.order__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.order__label { font-weight: 600; color: var(--ink-soft); font-size: .95rem; }
.order__amount { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }

.steps { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.steps button {
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  padding: .42rem .85rem; border-radius: 999px; color: var(--ink-soft);
  border: 1px solid var(--line); background: var(--chip-bg);
  transition: all .16s var(--ease);
}
.steps button:hover { color: var(--ink); border-color: var(--line-strong); }
.steps button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.slider { width: 100%; margin: 0 0 1.15rem; -webkit-appearance: none; appearance: none; background: transparent; }
.slider::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--fill, 30%), var(--track) var(--fill, 30%)); }
.slider::-moz-range-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--fill, 30%), var(--track) var(--fill, 30%)); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 5px solid var(--accent); cursor: grab; box-shadow: var(--shadow); transition: transform .15s var(--ease); }
.slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 5px solid var(--accent); cursor: grab; box-shadow: var(--shadow); }
.slider:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }

.price { display: flex; align-items: flex-end; gap: .9rem; flex-wrap: wrap; }
.price__now { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 900; letter-spacing: -.055em; font-variant-numeric: tabular-nums; line-height: 1; }
.price__was { color: var(--ink-dim); text-decoration: line-through; font-size: 1.05rem; font-weight: 500; }
.price__save { color: var(--hl); font-weight: 700; font-size: .98rem; }
.price__meta { margin: .55rem 0 1.15rem; color: var(--ink-dim); font-size: .93rem; }

.order__foot { display: flex; gap: .6rem 1.3rem; flex-wrap: wrap; margin-top: .9rem; color: var(--ink-dim); font-size: .88rem; }
.order__foot span { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------- telefoon ---------- */
.stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; perspective: 1200px; }
.phone {
  position: relative; width: min(300px, 76vw); aspect-ratio: 9 / 17.5;
  border-radius: 42px; border: 1px solid var(--line-strong); overflow: hidden;
  background: var(--phone-chassis);
  box-shadow: var(--shadow-lift), 0 0 0 8px var(--phone-ring);
  transform: rotateY(var(--ry, -8deg)) rotateX(var(--rx, 4deg));
  transition: transform .4s var(--ease);
}
.phone__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 92px; height: 22px; border-radius: 99px; background: #000; z-index: 3; }
.phone__media { position: absolute; inset: 0; background: var(--field), linear-gradient(160deg, #1b1e27, #0a0b10); }
.phone__rail { position: absolute; right: 12px; bottom: 122px; display: grid; gap: 1.05rem; justify-items: center; z-index: 2; }
.rail__btn { display: grid; justify-items: center; gap: .25rem; font-size: .74rem; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.rail__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); }
.rail__icon svg { width: 24px; height: 24px; }
.rail__btn--like .rail__icon { background: color-mix(in srgb, var(--screen-accent) 30%, transparent); color: var(--screen-accent); }
.counter { font-variant-numeric: tabular-nums; }
.phone__caption { position: absolute; left: 16px; right: 76px; bottom: 26px; z-index: 2; font-size: .8rem; line-height: 1.45; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.phone__caption b { display: block; font-size: .95rem; margin-bottom: .2rem; }
.heart { position: absolute; bottom: 150px; right: 26px; color: var(--screen-accent); opacity: 0; z-index: 3; }

/* het scherm in de telefoon, per platform anders gevuld */
.scherm {
  position: absolute; inset: 46px 0 0; z-index: 2;
  display: flex; flex-direction: column;
  background: var(--screen-bg); color: var(--screen-ink);
}
.scherm .dim { color: var(--screen-dim); }
.scherm__top { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; font-size: .86rem; font-weight: 600; }
.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: .9rem; font-weight: 800; color: #fff;
  background: var(--avatar-bg);
}
.scherm__beeld { flex: none; aspect-ratio: 1 / 1; background: var(--media-bg); }
.scherm__video { position: relative; aspect-ratio: 16 / 9; background: var(--media-bg); display: grid; place-items: center; }
.play { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; padding-left: 3px; }
.balk { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.balk::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 34%; background: var(--screen-accent); }
.scherm__acties { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem .2rem; }
.act { width: 22px; height: 22px; display: grid; place-items: center; color: var(--screen-ink); }
.act svg { width: 22px; height: 22px; }
.act--aan { color: var(--screen-accent); }
.scherm__tekst { padding: .5rem 1rem; font-size: .84rem; display: grid; gap: .2rem; line-height: 1.45; }
.scherm__tekst b { font-weight: 700; }
.knopje { font-size: .76rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; background: var(--screen-accent); color: #fff; }
.duim { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--screen-accent); color: #fff; }
.duim svg { width: 11px; height: 11px; }
.scherm__meer { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem 0; opacity: .3; }
.scherm__meer + .scherm__meer { padding-top: .7rem; }
.avatar--klein { width: 26px; height: 26px; font-size: .74rem; }
.blokje { width: 46px; height: 30px; flex: none; border-radius: 6px; background: var(--screen-dim); opacity: .55; }
.lijn { flex: 1; height: 8px; border-radius: 99px; background: var(--screen-dim); opacity: .5; }

/* ---------- secties ---------- */
section { padding: clamp(3.4rem, 7vw, 6rem) 0; }
.sec__head { max-width: 58ch; margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.sec__head p { margin-top: .9rem; }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* stappen */
.flow { display: grid; gap: 1.6rem; grid-template-columns: repeat(3, 1fr); position: relative; }
.flow::before { content: ''; position: absolute; left: 6%; right: 6%; top: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.flow__item { position: relative; padding-top: 4.4rem; }
.flow__num {
  position: absolute; top: 0; left: 0; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.15rem;
  background: var(--num-bg); border: 1px solid var(--hl); color: var(--hl);
}
.flow__item p { margin-top: .5rem; color: var(--ink-soft); font-size: .98rem; }

/* vergelijking */
.compare { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.6rem, 3vw, 3rem); align-items: center; }
table.prices { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.prices th, table.prices td { text-align: right; padding: .72rem .6rem; border-bottom: 1px solid var(--line); font-size: .98rem; }
table.prices th:first-child, table.prices td:first-child { text-align: left; }
table.prices thead th { color: var(--ink-dim); font-weight: 600; font-size: .86rem; }
table.prices td.ours { color: var(--ink); font-weight: 700; }
table.prices td.theirs { color: var(--ink-dim); }
table.prices td.diff { color: var(--ink-soft); font-weight: 600; }
table.prices td.save { color: var(--hl); font-weight: 700; }
.table-scroll { overflow-x: auto; }

/* foto's
   De verhouding staat vast via width en height op de img, zodat de pagina niet
   verspringt terwijl de foto nog laadt. */
.photo {
  position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--panel-soft); line-height: 0;
}
.photo picture { display: block; }
.photo { align-self: start; }
.photo img { display: block; width: 100%; height: auto; }
.photo--staand { max-width: 30rem; }
.photo--staand img { aspect-ratio: 4 / 5; object-fit: cover; }
.photo--liggend img { aspect-ratio: 3 / 2; object-fit: cover; }
/* ruimte alleen waar een foto in de lopende tekst staat, niet in de kolomindeling */
.tekst > .photo { margin-block: 2.4rem; }
.wrap > .photo { margin-bottom: 2.6rem; }

/* faq */
.faq { display: grid; gap: .5rem; max-width: 70ch; }
details {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft);
  padding: .2rem 1.2rem; transition: border-color .2s var(--ease), background .2s var(--ease);
}
details[open] { border-color: var(--line-strong); background: var(--hover); }
summary { cursor: pointer; list-style: none; padding: 1.05rem 0; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 1.5rem; font-weight: 400; color: var(--hl); transition: transform .25s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--ink-soft); margin: 0 0 1.05rem; font-size: .98rem; }

/* platformkiezer */
.platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.platform {
  position: relative; display: block; text-decoration: none; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--line); padding: 1.6rem 1.4rem 1.4rem;
  background: var(--ground-2); transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.platform::after { content: ''; position: absolute; inset: auto -30% -60% -30%; height: 160px; background: radial-gradient(closest-side, var(--pc), transparent); opacity: .28; transition: opacity .3s var(--ease), transform .4s var(--ease); }
.platform:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--pc) 55%, transparent); }
.platform:hover::after { opacity: .5; transform: translateY(-16px); }
.platform h3 { margin-bottom: .3rem; position: relative; }
.platform svg { width: 30px; height: 30px; color: var(--pc); margin-bottom: .9rem; position: relative; }
.platform p { font-size: .93rem; color: var(--ink-soft); margin: 0 0 .9rem; position: relative; }
.platform .from { font-weight: 700; color: var(--ink); position: relative; }

/* productlijst */
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; }
.product {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 1.25rem; border-radius: var(--radius); text-decoration: none;
  border: 1px solid var(--line); background: var(--panel-soft);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.product:hover { border-color: var(--hl); background: var(--hover); transform: translateX(3px); }
.product b { font-weight: 600; }
.product em { font-style: normal; color: var(--ink-dim); font-size: .92rem; }
.product--soon { opacity: .5; cursor: default; }
.product--soon:hover { border-color: var(--line); background: var(--panel-soft); transform: none; }

/* stickybalk */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  padding: .8rem clamp(1rem, 4vw, 2rem); border-top: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter: blur(16px);
  transform: translateY(110%); transition: transform .4s var(--ease);
}
.sticky.show { transform: translateY(0); }
.sticky__txt { font-size: .95rem; color: var(--ink-soft); }
.sticky--home { justify-content: center; gap: 1.4rem; }
.sticky__txt b { color: var(--ink); font-weight: 700; }

/* footer */
footer { border-top: 1px solid var(--line); padding: clamp(2.6rem, 5vw, 4rem) 0 2rem; background: var(--ground-2); }
.foot { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2rem; }
.foot h4 { font-size: .82rem; letter-spacing: .1em; color: var(--ink-dim); margin: 0 0 .9rem; font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot a { color: var(--ink-soft); text-decoration: none; font-size: .94rem; }
.foot a:hover { color: var(--ink); }
.foot__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: .88rem; }

/* animatie bij scrollen */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

@media (max-width: 960px) {
  .hero__in { grid-template-columns: 1fr; }
  .stage { margin-top: 2.2rem; }
  .phone { width: min(250px, 66vw); transform: none; }
  .compare, .flow { grid-template-columns: 1fr; }
  .flow::before { display: none; }
  .platforms { grid-template-columns: repeat(2, 1fr); }
  .foot { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .nav.open { display: flex; position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 1rem; background: var(--ground-2); border-bottom: 1px solid var(--line); }
  .nav__toggle { display: inline-grid; place-items: center; margin-left: auto; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; }
}

@media (max-width: 560px) {
  .platforms { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
  .order { padding: 1.2rem; }
  .sticky__txt { display: none; }
  .sticky .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- homepage: telefoon die van platform wisselt ---------- */
.hero--home::before { display: none; }
.hero__glow {
  position: absolute; inset: -120px 0 0; pointer-events: none; opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero__glow.is-active { opacity: 1; }
.hero__glow[data-glow="tiktok"]    { background: radial-gradient(1100px 620px at 78% -8%, rgba(254, 44, 85, .32), transparent 62%), radial-gradient(760px 520px at 6% 8%, rgba(37, 244, 238, .16), transparent 60%); }
.hero__glow[data-glow="instagram"] { background: radial-gradient(1000px 620px at 78% -8%, rgba(214, 41, 118, .40), transparent 62%), radial-gradient(760px 520px at 60% 30%, rgba(120, 60, 220, .26), transparent 60%), radial-gradient(600px 420px at 96% 40%, rgba(240, 127, 40, .28), transparent 60%); }
.hero__glow[data-glow="youtube"]   { background: radial-gradient(1100px 620px at 78% -8%, rgba(255, 0, 51, .48), transparent 62%), radial-gradient(760px 520px at 6% 8%, rgba(255, 255, 255, .06), transparent 60%); }
.hero__glow[data-glow="facebook"]  { background: radial-gradient(1100px 620px at 78% -8%, rgba(8, 102, 255, .55), transparent 62%), radial-gradient(760px 520px at 6% 8%, rgba(124, 192, 255, .14), transparent 60%); }

.rotator { flex-direction: column; align-items: center; gap: 1.2rem; }
.rotator__stack { display: grid; perspective: 1200px; }
.rotator__item {
  grid-area: 1 / 1; opacity: 0; pointer-events: none;
  transform: translateY(22px) scale(.94);
  transition: opacity .75s var(--ease), transform .85s var(--ease);
}
.rotator__item.is-active { opacity: 1; pointer-events: auto; transform: none; }
.rotator__item.is-leaving { opacity: 0; transform: translateY(-18px) scale(.96); }
.rotator__nav { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.rotator__nav button {
  display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-weight: 600; font-size: .9rem;
  padding: .45rem .9rem .45rem .7rem; border-radius: 999px; cursor: pointer; color: var(--ink-soft);
  border: 1px solid var(--line); background: var(--chip-bg); transition: all .2s var(--ease);
}
.rotator__nav button svg { width: 18px; height: 18px; color: var(--pc); }
.rotator__nav button:hover { color: var(--ink); border-color: var(--line-strong); }
.rotator__nav button[aria-pressed="true"] { background: var(--pc); border-color: var(--pc); color: #fff; }
.rotator__nav button[aria-pressed="true"] svg { color: #fff; }
.rotator__cta { font-weight: 700; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: .1rem; transition: border-color .2s var(--ease); }
.rotator__cta:hover { border-color: var(--ink); }
.rotator .phone { --ry: -6deg; --rx: 3deg; }

@media (max-width: 960px) {
  .rotator__nav button span { display: none; }
  .rotator__nav button { padding: .5rem .6rem; }
  .rotator .phone { transform: none; }
}

/* kruimelpad */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .88rem; color: var(--ink-dim); margin-bottom: 1rem; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; }
p a, details p a, .lede a { color: var(--hl); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p a:hover { text-decoration-thickness: 2px; }


/* ---------- vaste pagina's: contact, over ons, voorwaarden ---------- */
.tekst { max-width: 68ch; }
.tekst--breed { max-width: 92ch; }
.tekst h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 2.6rem 0 .9rem; }
.tekst h3 { margin: 1.8rem 0 .5rem; }
.tekst ul, .tekst ol { color: var(--ink-soft); padding-left: 1.2rem; margin: 0 0 1.2rem; }
.tekst li { margin-bottom: .45rem; }
.tekst p { color: var(--ink-soft); }
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.kaart { padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--panel-soft); }
.kaart h3 { margin-bottom: .4rem; font-size: 1.05rem; }
.kaart p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.kaart a { color: var(--hl); font-weight: 700; text-decoration: none; }
.kaart a:hover { text-decoration: underline; }

form.contact { display: grid; gap: 1rem; max-width: 34rem; }
form.contact label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
form.contact input, form.contact select, form.contact textarea {
  font: inherit; color: var(--ink); padding: .8rem 1rem; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--chip-bg);
}
form.contact input::placeholder, form.contact textarea::placeholder { color: var(--ink-dim); }
form.contact input:focus, form.contact select:focus, form.contact textarea:focus { outline: 2px solid var(--hl); outline-offset: 2px; }
form.contact textarea { min-height: 8rem; resize: vertical; }
form.contact option { color: #111; }
.formnoot { font-size: .86rem; color: var(--ink-dim); max-width: 34rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.foot__nav a { color: var(--ink-soft); text-decoration: none; font-size: .88rem; }
.foot__nav a:hover { color: var(--ink); text-decoration: underline; }

/* ============================================================
   AFREKENEN
   Eigen kolomindeling: links het formulier, rechts een meelopende
   samenvatting. De pagina neemt de kleur van het gekozen platform over,
   want data-platform wordt bij het laden gezet.
   ============================================================ */
.afrekenpagina { padding-top: 1rem; }
.afreken { padding-block: 2rem 4rem; }
.afreken__grid { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 2.5rem; align-items: start; margin-top: 2rem; }
.afreken__form h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .5rem; }
.afreken__form .lede { margin-bottom: 2rem; max-width: 46ch; }
.afreken__form fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.afreken__form legend { font-weight: 800; font-size: 1.05rem; margin-bottom: .9rem; color: var(--ink); }

.stappen-balk { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; padding: 0; margin: 1.4rem 0 0; font-size: .92rem; color: var(--ink-dim); }
.stappen-balk li { display: flex; align-items: center; gap: .5rem; }
.stappen-balk span { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; border: 1px solid var(--line-strong); }
.stappen-balk .is-klaar { color: var(--ink-soft); }
.stappen-balk .is-klaar span { background: var(--panel-soft); }
.stappen-balk .is-nu { color: var(--ink); font-weight: 700; }
.stappen-balk .is-nu span { background: var(--hl); color: var(--accent-ink); border-color: transparent; }
[data-platform="tiktok"] .stappen-balk .is-nu span, :root:not([data-platform]) .stappen-balk .is-nu span { color: #fff; }

.veld { display: block; margin-bottom: 1.4rem; }
.veld__label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .4rem; }
.veld__label small { font-weight: 400; color: var(--ink-dim); }
.veld input, .veld textarea {
  width: 100%; padding: .85rem 1rem; border-radius: 12px; font: inherit;
  background: var(--panel-soft); border: 1px solid var(--line-strong); color: var(--ink);
}
.veld input::placeholder, .veld textarea::placeholder { color: var(--ink-dim); }
.veld input:focus, .veld textarea:focus { outline: 2px solid var(--hl); outline-offset: 2px; }
.veld textarea { resize: vertical; }
.veld__hint { display: block; margin-top: .45rem; font-size: .86rem; color: var(--ink-dim); font-style: normal; }

.betaalkeuze { display: grid; gap: .6rem; }
.betaal { display: block; cursor: pointer; }
.betaal input { position: absolute; opacity: 0; pointer-events: none; }
.betaal__in {
  display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1.1rem;
  border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel-soft);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.betaal__in em { font-style: normal; font-size: .86rem; color: var(--ink-dim); }
.betaal:hover .betaal__in { background: var(--hover); }
.betaal input:checked + .betaal__in { border-color: var(--hl); background: var(--hover); box-shadow: inset 0 0 0 1px var(--hl); }
.betaal input:focus-visible + .betaal__in { outline: 2px solid var(--hl); outline-offset: 2px; }

.akkoord { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1.6rem; font-size: .92rem; color: var(--ink-soft); cursor: pointer; }
.akkoord input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--hl); flex: none; }
.akkoord a { color: var(--hl); }
.btn--groot { font-size: 1.05rem; padding-block: 1rem; }
[data-fout] { color: #ff8497; font-weight: 600; }
[data-platform="youtube"] [data-fout], [data-platform="facebook"] [data-fout], [data-platform="instagram"] [data-fout] { color: #ffe0e6; }

.samenvat { position: sticky; top: 5.5rem; }
.samenvat__in { padding: 1.6rem; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: var(--panel); }
.samenvat h2 { font-size: 1.1rem; margin-bottom: .9rem; }
.samenvat__prod { margin-bottom: 1.2rem; line-height: 1.35; }
.samenvat__prod b { display: block; font-size: 1.2rem; }
.samenvat__prod span { color: var(--ink-dim); font-size: .9rem; }
.samenvat__label { display: block; font-size: .85rem; color: var(--ink-dim); margin-bottom: .5rem; }
.samenvat__staffel { margin-bottom: 1.3rem; }
.samenvat__staffel .steps { gap: .35rem; }
.samenvat__staffel .steps button { padding: .4rem .7rem; font-size: .85rem; }
.samenvat__rij { display: grid; grid-template-columns: auto auto; gap: .5rem 1rem; margin: 0 0 1.2rem; font-size: .92rem; }
.samenvat__rij dt { color: var(--ink-dim); }
.samenvat__rij dd { margin: 0; text-align: right; color: var(--ink-soft); }
.samenvat__rij .doorstreept { text-decoration: line-through; opacity: .6; }
.samenvat__rij .winst { color: var(--hl); font-weight: 700; }
.samenvat__totaal { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; border-top: 1px solid var(--line); }
.samenvat__totaal b { font-size: 1.7rem; font-weight: 900; letter-spacing: -.03em; }
.samenvat__btw { font-size: .82rem; color: var(--ink-dim); margin-top: .3rem; }
.samenvat__usp { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: .45rem; font-size: .88rem; color: var(--ink-soft); }
.samenvat__usp li { display: flex; align-items: center; gap: .5rem; }
.samenvat__usp svg { width: 15px; height: 15px; color: var(--hl); flex: none; }
.samenvat__terug { margin-top: 1.2rem; font-size: .86rem; }
.samenvat__terug a { color: var(--ink-dim); text-decoration: none; }
.samenvat__terug a:hover { color: var(--ink); text-decoration: underline; }

/* bedankpagina */
.bedankt { max-width: 60ch; }
.bedankt__vink { width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--hl); color: var(--accent-ink); margin-bottom: 1.4rem; animation: vinkIn .6s var(--ease) both; }
[data-platform="tiktok"] .bedankt__vink, :root:not([data-platform]) .bedankt__vink { color: #fff; }
.bedankt__vink svg { width: 2.2rem; height: 2.2rem; }
@keyframes vinkIn { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } to { transform: none; opacity: 1; } }
.bedankt__order { margin-top: 1.6rem; font-size: 1.05rem; color: var(--ink-soft); }
.bedankt__order b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.2rem; color: var(--ink); letter-spacing: .06em; }
.bedankt__mail { margin-top: .6rem; color: var(--ink-dim); font-size: .92rem; }

@media (max-width: 940px) {
  .afreken__grid { grid-template-columns: 1fr; gap: 2rem; }
  .samenvat { position: static; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .bedankt__vink { animation: none; }
}

/* meldingen boven een formulier */
.melding { padding: 1rem 1.2rem; border-radius: 12px; margin-bottom: 1.4rem; max-width: 34rem; font-size: .95rem; border: 1px solid var(--line-strong); }
.melding--goed { background: color-mix(in srgb, var(--hl) 14%, transparent); border-color: color-mix(in srgb, var(--hl) 45%, transparent); }
.melding--fout { background: rgba(255, 93, 143, .12); border-color: rgba(255, 93, 143, .45); }

/* twee foto's onder de stappen op de homepage */
.flow__beeld { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
@media (max-width: 700px) { .flow__beeld { grid-template-columns: 1fr; } }

/* winkel nog niet open */
.price__soon { color: var(--hl); font-weight: 600; }
.gesloten { padding: 1.8rem; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: var(--panel-soft); margin-bottom: 1.4rem; }
.gesloten h2 { font-size: 1.25rem; margin-bottom: .6rem; }
.gesloten p { color: var(--ink-soft); max-width: 52ch; }
.gesloten__knoppen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.gesloten__knoppen .btn:not(.btn--primary) { border: 1px solid var(--line-strong); color: var(--ink); }