/* ===== Design tokens ===== */
:root{
  color-scheme:dark;

  /* palet (afgeleid van ui-preview) */
  --bg:#0d0d10;
  --surface:#18181E;
  --surface-2:#1f1f27;
  --accent:#FF6B00;
  --accent-soft:rgba(255,107,0,.18);
  --text:#f5f0e8;
  --muted:#7A7060;

  /* typografie */
  --font:system-ui,-apple-system,"Segoe UI",sans-serif;
  --h1:clamp(2rem,7vw,3.25rem);
  --h2:clamp(1.5rem,4.5vw,2rem);

  /* ruimte & vorm */
  --gap:16px;
  --pad:24px;
  --radius:16px;
  --maxw:1040px;
  --section-y:clamp(56px,10vw,96px);

  /* keuze-variabelen — gezet door de quiz, straks gebruikt door de live preview */
  --u-accent:#FF6B00;
  --u-bg:#141419;
  --u-fg:#f5f0e8;
  --u-surface:#20202a;
  --u-font:system-ui,-apple-system,"Segoe UI",sans-serif;
  --u-radius:22px;
}

/* ===== Reset / basis ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}

/* ===== Layout ===== */
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--section-y) var(--pad);
}
.section__head{max-width:38rem;margin:0 auto var(--section-y) auto;text-align:center;margin-bottom:clamp(28px,5vw,48px)}
.section__title{font-size:var(--h2);font-weight:700;letter-spacing:-.01em}
.section__lead{color:var(--muted);margin-top:10px}

/* responsieve grid — mobile-first: 1 kolom, breder scherm meer */
.grid{display:grid;gap:var(--gap)}
.grid--cards{grid-template-columns:1fr}
.grid--steps{grid-template-columns:1fr}
@media(min-width:640px){
  .grid--cards{grid-template-columns:repeat(2,1fr)}
  .grid--steps{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:960px){
  .grid--cards{grid-template-columns:repeat(4,1fr)}
}

/* ===== Hero + prijs ===== */
.hero{text-align:center}
.hero__inner{max-width:44rem;margin:0 auto;display:grid;gap:18px;justify-items:center}
.hero__eyebrow{color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.hero__title{font-size:var(--h1);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.hero__sub{color:var(--muted);max-width:34rem}

.price{
  position:relative;
  display:grid;justify-items:center;gap:6px;
  background:
    radial-gradient(120% 90% at 50% 0%,var(--accent-soft),transparent 70%),
    var(--surface);
  border:1px solid var(--accent);
  border-radius:calc(var(--radius) + 4px);
  padding:clamp(24px,5vw,34px) clamp(32px,7vw,56px);
  margin:12px 0;
  box-shadow:0 0 0 6px var(--accent-soft),0 18px 40px -20px rgba(255,107,0,.5);
}
.price__from{color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.75rem}
.price__amount{
  color:var(--accent);
  font-size:clamp(3.4rem,14vw,5rem);
  font-weight:800;line-height:1;letter-spacing:-.02em;
  text-shadow:0 6px 30px rgba(255,107,0,.35);
}
.price__note{color:var(--muted);font-size:.85rem}

/* ===== Knoppen ===== */
.btn{
  display:inline-block;
  padding:14px 28px;
  border:0;
  border-radius:999px;
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease,background .15s ease;
}
.btn--primary{background:var(--accent);color:#0d0d10;box-shadow:0 10px 30px -12px rgba(255,107,0,.7)}
.btn--primary:hover{transform:translateY(-2px)}
.btn--primary:active{transform:translateY(0) scale(.98)}

/* ===== Quiz (kaart-pickers) ===== */
.quiz__dimensions{
  display:grid;gap:clamp(20px,4vw,32px);
  grid-template-columns:1fr;
}
@media(min-width:720px){
  .quiz__dimensions{grid-template-columns:repeat(2,1fr)}
}

.dimension{display:grid;gap:12px;align-content:start}
.dimension__label{
  color:var(--muted);
  font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
}

.options{display:flex;flex-wrap:wrap;gap:10px}
.option{
  flex:1 1 96px;min-width:88px;
  display:grid;gap:6px;place-items:center;
  padding:14px 12px;
  background:var(--surface);
  border:1.5px solid var(--accent-soft);
  border-radius:12px;
  color:var(--text);
  font:inherit;text-align:center;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.option:hover{transform:translateY(-3px);border-color:var(--accent)}
.option:active{transform:translateY(-1px) scale(.97)}
.option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.option[aria-checked="true"]{
  border-color:var(--accent);
  background:var(--accent-soft);
  box-shadow:0 8px 22px -14px rgba(255,107,0,.7);
  animation:option-pop .32s ease;
}
@keyframes option-pop{
  0%{transform:scale(1)}
  45%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
.option__swatch{
  width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(255,255,255,.15);
  transition:box-shadow .18s ease,transform .18s ease;
}
.option[aria-checked="true"] .option__swatch{
  transform:scale(1.08);
  box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent);
}
.option__name{font-weight:600;font-size:.95rem;line-height:1.2}
.option__desc{color:var(--muted);font-size:.75rem;line-height:1.3}

/* ===== Quiz + live preview layout ===== */
.quiz__layout{
  display:grid;gap:clamp(28px,5vw,48px);
  grid-template-columns:1fr;
}
.quiz__preview{display:grid;gap:12px;justify-items:center}
@media(min-width:960px){
  .quiz__layout{grid-template-columns:1fr auto;align-items:start}
  .quiz__preview{position:sticky;top:24px}
}

/* ===== Preview / telefoon-frame ===== */
.phone{
  width:min(280px,80vw);
  aspect-ratio:9/19;
  background:var(--surface);
  border:2px solid var(--accent-soft);
  border-radius:36px;
  padding:12px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.03) inset;
}
.phone__screen{
  width:100%;height:100%;
  overflow:hidden;
  border-radius:26px;
  background:var(--u-bg);
}
.phone__caption{color:var(--muted);font-size:.8rem;text-align:center}

/* ===== Live mini-site (mock) — stuurt op de --u-* keuze-variabelen ===== */
.mock{
  width:100%;height:100%;
  display:flex;flex-direction:column;gap:12px;
  padding:14px;
  background:var(--u-bg);
  color:var(--u-fg);
  font-family:var(--u-font);
  font-size:11px;line-height:1.4;
  transition:background .3s ease,color .3s ease;
}
.mock__bar{display:flex;align-items:center;justify-content:space-between}
.mock__logo{
  font-weight:800;font-size:12px;color:var(--u-accent);
  transition:color .3s ease;
}
.mock__menu{display:grid;gap:3px}
.mock__menu i{
  display:block;width:16px;height:2px;border-radius:2px;
  background:var(--u-fg);opacity:.6;
}
.mock__hero{display:flex;flex-direction:column;gap:6px}
.mock__eyebrow{
  color:var(--u-accent);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:8px;
  transition:color .3s ease;
}
.mock__title{font-weight:800;font-size:16px;line-height:1.15}
.mock__text{opacity:.7;font-size:10px}
.mock__btn{
  align-self:flex-start;margin-top:2px;
  padding:7px 14px;
  background:var(--u-accent);color:var(--u-bg);
  border-radius:var(--u-radius);
  font-weight:700;font-size:10px;
  transition:background .3s ease,color .3s ease,border-radius .3s ease;
}
.mock__cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.mock__card{
  display:flex;flex-direction:column;gap:5px;
  padding:8px;
  background:var(--u-surface);
  border-radius:var(--u-radius);
  transition:background .3s ease,border-radius .3s ease;
}
.mock__thumb{
  height:34px;
  border-radius:calc(var(--u-radius) * .6);
  background:var(--u-accent);opacity:.35;
  transition:border-radius .3s ease;
}
.mock__line{height:5px;border-radius:3px;background:var(--u-fg);opacity:.18}
.mock__line--short{width:60%}

/* ===== Kaarten (wat je krijgt / voorbeelden) ===== */
.card{
  background:var(--surface);
  border:1px solid var(--accent-soft);
  border-radius:var(--radius);
  padding:var(--pad);
}
.card__title{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.card__text{color:var(--muted);font-size:.95rem}
.card--example{text-align:center}
.card__thumb{
  aspect-ratio:4/3;
  background:var(--surface-2);
  border-radius:10px;
  margin-bottom:12px;
}

/* ===== Hoe het werkt ===== */
.step{
  background:var(--surface);
  border:1px solid var(--accent-soft);
  border-radius:var(--radius);
  padding:var(--pad);
}
.step__num{
  display:inline-grid;place-items:center;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--accent);color:#0d0d10;
  font-weight:800;
  margin-bottom:12px;
}
.step__title{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.step__text{color:var(--muted);font-size:.95rem}

/* ===== Contact + intake-formulier (CTA) ===== */
.contact{text-align:center}
.intake{
  max-width:34rem;
  margin:0 auto;
  display:grid;
  gap:clamp(16px,3vw,20px);
  text-align:left;
}
.field{display:grid;gap:6px}
.field__label{font-size:.85rem;font-weight:600;color:var(--text)}
.field__input{
  width:100%;
  padding:12px 14px;
  background:var(--surface);
  border:1.5px solid var(--accent-soft);
  border-radius:12px;
  color:var(--text);
  font:inherit;
  transition:border-color .18s ease;
}
.field__input::placeholder{color:var(--muted)}
.field__input:focus{outline:none;border-color:var(--accent)}
textarea.field__input{resize:vertical;min-height:84px}
select.field__input{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7060' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.intake .btn{justify-self:center;margin-top:4px}
.contact__note{color:var(--muted);margin-top:16px;font-size:.9rem}
.contact__note a{color:var(--accent);text-decoration:none}

/* ===== Footer ===== */
.footer{
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
  padding:32px var(--pad);
  border-top:1px solid var(--accent-soft);
}

/* ===== Mobiele finale-check ===== */
@media(max-width:520px){
  /* Vollere, makkelijk te raken knoppen op smalle schermen */
  .hero .btn,.intake .btn{width:100%;text-align:center}
  /* Twee opties per rij i.p.v. geknelde vier */
  .options{gap:8px}
  .option{flex-basis:calc(50% - 4px);min-width:0}
}

/* ===== Respecteer bewegingsvoorkeur ===== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}