/* =====================================================
   ZEKEROPWEG — DESIGN TOKENS
   Kleur · Typografie · Editorial accenten
   Wordt gebruikt door components & luxury
===================================================== */

:root{

  /* ===============================
     KLEUR — BASIS
  =============================== */

  --color-ink-main:        rgba(20,20,20,.72);
  --color-ink-soft:        rgba(20,20,20,.60);
  --color-ink-muted:       rgba(20,20,20,.45);

  --color-navy-deep:       #0f172a;
  --color-navy-dark:       #050912;


  /* ===============================
     KLEUR — ACCENT (PREMIUM)
     Niet altijd zichtbaar, wel beschikbaar
  =============================== */

  --color-gold-soft:       rgba(215,181,109,.55);
  --color-gold-medium:     rgba(215,181,109,.75);


  /* ===============================
     SURFACES
  =============================== */

  --surface-soft:          #f6f3ee;   /* decision block / zachte vlakken */
  --surface-neutral:       #ffffff;


  /* ===============================
     TYPOGRAFIE — SCHAAL
  =============================== */

  --font-size-body:        1.02rem;
  --font-size-body-large:  1.05rem;
  --font-size-small:       .95rem;
  --font-size-eyebrow:     .72rem;

  --line-height-body:      1.7;
  --line-height-tight:     1.6;


  /* ===============================
     LETTERSPACING
  =============================== */

  --track-eyebrow:         .32em;
  --track-kicker:          .12em;


  /* ===============================
     EDITORIAL ACCENT
     (verticale lijn, subtiel)
  =============================== */

  --editorial-accent: linear-gradient(
    to bottom,
    rgba(215,181,109,0),
    rgba(215,181,109,.7),
    rgba(215,181,109,0)
  );
}


/* =====================================================
   ZEKEROPWEG — LUXURY LAYER
   Doel: sfeer, materiaal, licht en emotie
   GEEN layout · GEEN gedrag · GEEN component-logica
===================================================== */


/* =====================================================
   1. KLEUR & SURFACE TOKENS
===================================================== */

:root{
  --surface-soft: #f6f3ee;

  --lux-text-light: rgba(255,255,255,.96);
  --lux-text-muted: rgba(255,255,255,.88);

  --lux-shadow-soft:
    0 18px 40px rgba(0,0,0,0.06),
    0 2px 8px rgba(0,0,0,0.03);

  --lux-shadow-strong:
    0 30px 70px rgba(0,0,0,0.10);

  --editorial-accent: linear-gradient(
    to bottom,
    rgba(215,181,109,0),
    rgba(215,181,109,.7),
    rgba(215,181,109,0)
  );
}


/* =====================================================
   2. HERO — LICHT & OVERGANG
===================================================== */

.hero{
  box-shadow: inset 0 -110px 120px -80px rgba(7,18,30,.65);
}

.hero h1{
  color: var(--lux-text-light);
}

.hero p{
  color: var(--lux-text-muted);
}


/* =====================================================
   3. CARDS — MATERIAAL & DIEPTE
===================================================== */

.package-card,
.service-card,
.premium-card,
.usp-item,
.ev-addon-card{
  box-shadow: var(--lux-shadow-soft);
}

.package-card:hover,
.service-card:hover,
.premium-card:hover{
  box-shadow: var(--lux-shadow-strong);
}


/* =====================================================
   4. EDITORIAL ACCENT (VERTICALE LIJN)
===================================================== */

.zow-editorial__inner::before{
  background: var(--editorial-accent);
  opacity: .85;
}


/* =====================================================
   5. ACCENTEN & MICRO-DETAIL
===================================================== */

.accentline{
  margin: 1.2em 0 1.6em;
  opacity: .85;
}

.context-accent{
  margin-bottom: 1em;
  opacity: .8;
}


/* =====================================================
   6. CTA — VISUELE ZWAARTE (GEEN STRUCTUUR)
===================================================== */

.btn-primary,
.pricing-cta{
  margin-top: 22px;
}

.hero-actions{
  margin-top: 28px;
}

.zow-eyebrow{
  font-size: .72rem;
  font-weight: 400;        /* lichter, rustiger */
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(20,20,20,.48);
}


/* =====================================
   LUXURY — EYEBROW POLISH (AANKOOPADVIES)
===================================== */

body.page-aankoopadvies .zow-eyebrow{
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .28em;
  color: rgba(20,20,20,.55);
}

.pricing-card {
  padding: 3.6rem 3.8rem;
}

.pricing-card h3 {
  margin-top: 1.6rem;
  margin-bottom: 1.2rem;
}

.decision-badge {
  margin-bottom: 1.8rem;
}

.price-block {
  margin: 2.2rem 0 1.6rem;
}

.price-block strong {
  font-size: 2.1rem;
}

.price-block span {
  display: block;
  margin-top: .4rem;
  opacity: .65;
  font-size: .9rem;
}

.pricing-card p {
  margin-bottom: 1.8rem;
  max-width: 48ch;
}

.pricing-card .lux-list li {
  margin-bottom: .65rem;
}

.pricing-cta {
  margin-top: 2.4rem;
}