/* ==========================================================
   wob-theme.css — stijl "half om half" naar wobwebdesign.nl
   Laden NA css/style.css. Verwijder de <link> in header.php
   om terug te gaan naar de oude stijl.
   Donker: navbar, hero, feitenbalk, CTA, footer
   Licht (crème): alle inhoudssecties
   ========================================================== */

:root {
  --ink: #111110;          /* bijna-zwart van wobwebdesign */
  --ink-2: #1B1A18;
  --cream: #F4F1EA;        /* tekstkleur op donker */
  --gold: #B89B5E;         /* goud uit het logo */
  --gold-d: #8F7238;       /* donkerder goud, leesbaar op licht */
  --gold-l: #F0E8D6;
  --line-dark: rgba(244, 241, 234, 0.14);

  /* bestaande variabelen omgezet: paars -> goud, leisteen -> inkt */
  --purple: var(--gold-d);
  --purple-d: #6F5727;
  --purple-l: var(--gold-l);
  --dark: var(--ink);
  --light: #F7F4EC;
  --border: #E6E0D2;
}

/* ---------- Typografie ---------- */
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #2A2926;
  background: #FFFDF9;
}
h1, h2, h3, h4,
.price-name, .price-num, .stat-num, .dash-num {
  font-family: 'Poppins', 'DM Sans', sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1, h2 { font-weight: 700; line-height: 1.08; }
h3, h4 { font-weight: 600; }

/* cursief gouden accentwoord, zoals "hangen." op wobwebdesign */
h1 strong, h2 em, .accent-serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gold);
  font-size: 1.08em;
}

a { color: var(--gold-d); }

/* ---------- Label boven secties ---------- */
.section-label {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--gold-d);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Knoppen ---------- */
.btn {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  border-radius: 999px;
}
.btn-primary,
.btn-white {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}
.btn-primary:hover,
.btn-white:hover {
  background: #C7AB70 !important;
  box-shadow: 0 8px 24px rgba(184, 155, 94, 0.35);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(17, 17, 16, 0.3);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* ---------- Navbar (donker) ---------- */
.navbar {
  background: rgba(17, 17, 16, 0.92);
  border-bottom: 1px solid var(--line-dark);
}
.nav-logo { color: var(--cream); }
.nav-logo-img { height: 38px; width: auto; display: block; }
.nav-links a,
.nav-login { color: var(--cream); font-weight: 500; }
.nav-links a:hover,
.nav-links a.active,
.nav-login:hover { color: var(--gold); }
.hamburger span { background: var(--cream); }
.mobile-menu { background: var(--ink); border-color: var(--line-dark); }
.mobile-menu a { color: var(--cream); border-color: var(--line-dark); }

/* ---------- Hero (donker) ---------- */
.hero {
  background: var(--ink);
  color: var(--cream);
}
.hero::before, .hero::after { display: none; }
.hero h1 { color: var(--cream); }
.hero .hero-sub, .hero p { color: rgba(244, 241, 234, 0.72); }
.hero-badge {
  background: transparent;
  border: 1px solid var(--line-dark);
  color: var(--cream);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.hero-badge span { background: var(--gold); }
.hero .trust-badge { color: rgba(244, 241, 234, 0.8); }
.hero .trust-badge .check { color: var(--gold); }
.hero .btn-secondary {
  color: var(--cream);
  border-color: rgba(244, 241, 234, 0.35);
}
.hero .btn-secondary:hover {
  background: var(--cream);
  color: var(--ink);
}
.dashboard-preview { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }

/* ---------- Kaarten op licht ---------- */
.feature-card, .step-card, .price-card, .faq-item {
  border: 1px solid var(--border);
  box-shadow: none;
}
.feature-card:hover, .price-card:hover {
  box-shadow: 0 14px 40px rgba(17, 17, 16, 0.08);
}
.price-card.popular { border: 2px solid var(--gold); }
.popular-badge { background: var(--ink); color: var(--gold); }
.faq-question { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--ink); }

/* ---------- Feitenbalk (donker) ---------- */
.stats-section { background: var(--ink); color: var(--cream); }
.stat-num {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
}
.stat-label { color: rgba(244, 241, 234, 0.7); }

/* ---------- CTA (donker) ---------- */
.cta-section { background: var(--ink-2); color: var(--cream); }
.cta-section::before, .cta-section::after { display: none; }
.cta-section h2 { color: var(--cream); }
.cta-section p { color: rgba(244, 241, 234, 0.75); }

/* ---------- Footer (donker) ---------- */
footer { background: var(--ink); border-top: 1px solid var(--line-dark); }
footer h4 {
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
footer a { color: rgba(244, 241, 234, 0.7); }
footer a:hover { color: var(--gold); }
.social-link:hover { background: var(--gold); color: var(--ink); }