/* ==========================================================================
   Pakketten — premium presentatie (gescoped op .page-pakketten)
   Hergebruikt bestaande tokens: --v3-gold #d8ae57, --pp-gold #e8c878,
   --text #f7f1e7, --muted #b6bdc9, --max 1180px. Geen externe libraries.
   ========================================================================== */

.page-pakketten {
  --pk-gold: var(--v3-gold, #d8ae57);
  --pk-gold-soft: rgba(216, 174, 87, .38);
  --pk-line: rgba(255, 255, 255, .10);
  --pk-surface: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
  --pk-radius: 16px;
}

.page-pakketten main { overflow-x: clip; }
/* Eyebrows mogen op smalle schermen afbreken i.p.v. overlopen (pp-eyebrow is
   standaard inline-flex). Op deze pagina bevatten ze geen icoon. */
.page-pakketten .pp-eyebrow { display: block; max-width: 100%; }

/* ---- Reveal / stagger (respecteert reduced-motion via de JS) ------------- */
.page-pakketten .pk-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.page-pakketten .pk-reveal.is-in { opacity: 1; transform: none; }
.page-pakketten .pk-reveal-group > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.page-pakketten .pk-reveal-group.is-in > * { opacity: 1; transform: none; }
.page-pakketten .pk-reveal-group.is-in > *:nth-child(2) { transition-delay: .09s; }
.page-pakketten .pk-reveal-group.is-in > *:nth-child(3) { transition-delay: .18s; }

/* ---- Hero ---------------------------------------------------------------- */
.pk-hero { padding: clamp(72px, 12vh, 132px) 0 24px; }
.pk-hero__inner { max-width: 860px; text-align: center; margin-inline: auto; }
.pk-hero__kicker { justify-content: center; color: var(--pp-gold, #e8c878); margin-bottom: 22px; }
.pk-hero__title { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 1; font-size: clamp(38px, 5.4vw, 68px); color: var(--text, #f7f1e7); }
.pk-hero__intro { margin: 22px auto 30px; max-width: 640px; color: var(--muted, #b6bdc9); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; }
.pk-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---- Keuze-intro band ---------------------------------------------------- */
.pk-intro { padding: 6px 0 8px; }
.pk-intro__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.pk-intro__inner p { margin: 0; color: var(--muted, #b6bdc9); font-size: 15px; line-height: 1.7; }
.pk-intro__inner strong { color: var(--text, #f7f1e7); font-weight: 700; }
.pk-intro__inner em { color: var(--pp-gold, #e8c878); font-style: normal; }

/* ---- Secties ------------------------------------------------------------- */
.pk-section { padding: clamp(56px, 8vw, 96px) 0; }
.pk-section--tight { padding: clamp(30px, 5vw, 56px) 0; }
.pk-head { max-width: 760px; margin: 0 auto clamp(34px, 4vw, 52px); text-align: center; }
.pk-head .pp-eyebrow { justify-content: center; color: var(--pp-gold, #e8c878); }
.pk-head .section-title { margin: 14px auto 0; font-size: clamp(30px, 3.6vw, 46px); }
.pk-head__intro { margin: 16px auto 0; max-width: 620px; color: var(--muted, #b6bdc9); font-size: 16px; line-height: 1.6; }

/* ---- Pakketgrid + kaarten ------------------------------------------------ */
.pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); align-items: stretch; }

.pk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius);
  background: var(--pk-surface);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pk-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .2); box-shadow: 0 28px 70px rgba(0, 0, 0, .38); }

.pk-card--featured {
  border-color: var(--pk-gold-soft);
  background:
    radial-gradient(120% 90% at 50% 0, rgba(216, 174, 87, .12), transparent 60%),
    var(--pk-surface);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(216, 174, 87, .12);
}
.pk-card--featured:hover { border-color: rgba(216, 174, 87, .6); }

.pk-card__label {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 5px 15px; border-radius: 999px;
  background: linear-gradient(135deg, var(--pk-gold), #f0d69d); color: #14110a;
  font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(216, 174, 87, .3);
}

.pk-card__head { min-height: 118px; }
.pk-card__name { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 27px; line-height: 1.05; color: var(--text, #f7f1e7); }
.pk-card__audience { margin: 10px 0 0; color: var(--muted, #b6bdc9); font-size: 13.5px; line-height: 1.55; }

.pk-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--pk-line); }
.pk-price__from { color: var(--muted, #b6bdc9); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pk-price__amount { color: var(--text, #f7f1e7); font-size: clamp(26px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.01em; }
.pk-price__unit { color: var(--muted, #b6bdc9); font-size: 13px; font-weight: 600; }
.pk-price__setup { margin: 8px 0 0; color: var(--pp-gold, #e8c878); font-size: 13px; font-weight: 700; }
.pk-vat { margin: 6px 0 0; color: rgba(182, 189, 201, .75); font-size: 11.5px; letter-spacing: .02em; }

.pk-feat__base { margin: 20px 0 4px; color: var(--text, #f7f1e7); font-size: 13px; font-weight: 700; }
.pk-feat { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.pk-feat li { position: relative; padding-left: 24px; color: #dfe3ea; font-size: 14px; line-height: 1.45; }
.pk-feat li::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 6px; height: 10px;
  border: solid var(--pk-gold); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: .92;
}

.pk-card__foot { margin-top: auto; padding-top: 24px; }
.pk-card__cta { width: 100%; }
.pk-card__note { margin: 12px 0 0; color: rgba(182, 189, 201, .8); font-size: 12px; line-height: 1.5; text-align: center; }

/* ---- Hosting (compacte vergelijking onder websites) ---------------------- */
.pk-hosting { margin-top: clamp(34px, 4vw, 54px); padding: clamp(24px, 3vw, 40px); border: 1px solid var(--pk-line); border-radius: var(--pk-radius); background: rgba(255, 255, 255, .015); }
.pk-hosting__head { text-align: center; max-width: 640px; margin: 0 auto clamp(22px, 3vw, 32px); }
.pk-hosting__head .pp-eyebrow { justify-content: center; color: var(--pp-gold, #e8c878); }
.pk-hosting__title { margin: 12px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); color: var(--text, #f7f1e7); }
.pk-hosting__lead { margin: 12px 0 0; color: var(--muted, #b6bdc9); font-size: 14.5px; line-height: 1.6; }
.pk-hosting__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.pk-tier { padding: 22px; border: 1px solid var(--pk-line); border-radius: 12px; background: rgba(255, 255, 255, .022); }
.pk-tier__name { margin: 0; font-size: 16px; font-weight: 800; color: var(--text, #f7f1e7); }
.pk-tier__price { margin: 6px 0 16px; color: var(--pp-gold, #e8c878); font-size: 18px; font-weight: 800; }
.pk-tier__price span { color: var(--muted, #b6bdc9); font-size: 12px; font-weight: 600; }
.pk-tier__feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pk-tier__feat li { position: relative; padding-left: 20px; color: #d3d8e0; font-size: 13px; line-height: 1.4; }
.pk-tier__feat li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 8px; height: 1px; background: var(--pk-gold); opacity: .8; }

/* ---- Maatwerk (brede premium sectie) ------------------------------------- */
.pk-custom {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: center;
  padding: clamp(34px, 4.5vw, 64px);
  border: 1px solid var(--pk-gold-soft); border-radius: 20px;
  background:
    radial-gradient(90% 120% at 100% 0, rgba(216, 174, 87, .12), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .4);
}
.pk-custom__copy .pp-eyebrow { color: var(--pp-gold, #e8c878); }
.pk-custom__copy .section-title { margin: 14px 0 0; font-size: clamp(30px, 3.4vw, 46px); }
.pk-custom__lead { margin: 18px 0 22px; color: var(--muted, #b6bdc9); font-size: 16px; line-height: 1.65; max-width: 520px; }
.pk-custom__price { margin: 0 0 22px; }
.pk-custom__price .pk-price__amount { font-size: clamp(22px, 2.4vw, 28px); }
.pk-custom__useslabel { margin: 0 0 14px; color: var(--text, #f7f1e7); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pk-custom__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.pk-custom__list li { position: relative; padding-left: 20px; color: #dfe3ea; font-size: 14px; line-height: 1.4; }
.pk-custom__list li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 6px; height: 9px; border: solid var(--pk-gold); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .9; }

/* ---- Accordion (uitbreidingen) ------------------------------------------- */
.pk-acc { max-width: 880px; margin: 0 auto; border: 1px solid var(--pk-line); border-radius: var(--pk-radius); background: rgba(255, 255, 255, .015); overflow: hidden; }
.pk-acc__item + .pk-acc__item { border-top: 1px solid var(--pk-line); }
.pk-acc__heading { margin: 0; }
.pk-acc__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 30px);
  border: 0; background: transparent; cursor: pointer;
  color: var(--text, #f7f1e7); font: 800 clamp(16px, 1.7vw, 19px)/1.3 "Inter", sans-serif; text-align: left;
  transition: background .25s ease, color .25s ease;
}
.pk-acc__trigger:hover { background: rgba(255, 255, 255, .03); color: var(--pp-gold, #e8c878); }
.pk-acc__trigger:focus-visible { outline: 2px solid var(--pp-gold, #e8c878); outline-offset: -3px; }
.pk-acc__trigger[aria-expanded="true"] { color: var(--pp-gold, #e8c878); }
.pk-acc__icon { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.pk-acc__icon::before, .pk-acc__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; transition: transform .3s ease, opacity .3s ease; }
.pk-acc__icon::before { width: 14px; height: 1.6px; transform: translate(-50%, -50%); }
.pk-acc__icon::after { width: 1.6px; height: 14px; transform: translate(-50%, -50%); }
.pk-acc__trigger[aria-expanded="true"] .pk-acc__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

.pk-acc__panel { overflow: hidden; padding: 0 clamp(20px, 2.4vw, 30px); }
.pk-acc__panel[hidden] { display: none; }
.pk-ext { list-style: none; margin: 0; padding: 4px 0 clamp(20px, 2.4vw, 26px); display: grid; gap: 2px; }
.pk-ext li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); color: #dfe3ea; font-size: 14.5px; line-height: 1.4; }
.pk-ext li:last-child { border-bottom: 0; }
.pk-ext__price { flex: 0 0 auto; color: var(--pp-gold, #e8c878); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pk-ext__note { margin: 6px 0 clamp(20px, 2.4vw, 26px); color: rgba(182, 189, 201, .8); font-size: 12.5px; line-height: 1.5; }

/* ---- Afsluitende CTA ----------------------------------------------------- */
.pk-cta { max-width: 820px; margin: 0 auto; }
.pk-cta .pp-eyebrow { justify-content: center; color: var(--pp-gold, #e8c878); }
.pk-cta .section-title { margin: 14px auto 0; font-size: clamp(28px, 3.4vw, 44px); }
.pk-cta p { margin: 16px auto 26px; max-width: 560px; color: var(--muted, #b6bdc9); font-size: 16px; line-height: 1.6; }
.pk-cta .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 992px) {
  .pk-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .pk-card__head { min-height: 0; }
  .pk-card__label { top: -11px; }
  .pk-hosting__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .pk-custom { grid-template-columns: 1fr; }
  .pk-reveal-group.is-in > *:nth-child(2),
  .pk-reveal-group.is-in > *:nth-child(3) { transition-delay: .06s; }
}
@media (max-width: 480px) {
  .pk-custom__list { grid-template-columns: 1fr; }
  .pk-ext li { gap: 12px; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .page-pakketten .pk-reveal,
  .page-pakketten .pk-reveal-group > * { opacity: 1; transform: none; transition: none; }
  .pk-card, .pk-acc__trigger, .pk-acc__icon::before, .pk-acc__icon::after { transition: none; }
}

/* --- Prijs in overleg (2026-07-28) --------------------------------------
   De concrete bedragen zijn op verzoek van de eigenaar van de pagina gehaald.
   Het prijsblok blijft visueel op zijn plek staan, zodat de kaarten dezelfde
   hoogte en ritme houden, maar met rustiger typografie: een leeg ogend vak of
   een weggevallen regel zou de kaarten ongelijk maken. */
.pk-price--quote { display: block; }
.pk-price--quote .pk-price__amount {
  display: block;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--pp-gold, #e8c878);
}
.pk-price--quote .pk-price__unit {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted, #b6bdc9);
}
.pk-price__note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, #b6bdc9);
}

.pk-tier__price--quote {
  color: var(--pp-gold, #e8c878);
  font-size: 16px;
  font-weight: 700;
}

/* Toelichting onder de intro van de uitbreidingen: iets ingetogener dan de
   zin erboven, zodat het als aanvulling leest en niet als tweede kop. */
.pk-head__intro--quiet {
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted, #b6bdc9);
}

/* De uitbreidingenlijst had een tweede kolom voor het bedrag. Die li is een
   flexcontainer met space-between; met nog maar één kind lijnt de omschrijving
   vanzelf links uit. Er is dus geen extra regel nodig. */