/* =========================================
   HOMEPAGE.CSS
   Bold & Confident — B2C homepage overrides
   Laadt als pageCSS na style.css
   ========================================= */



/* ── 1. Hero — anthracite command center ── */
.hero {
  background-color: var(--color-theme-dark);
}

.hero-content {
  z-index: 5;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.hero-content::before {
  display: none;
}

.hero-content h1 {
  color: var(--white);
}

.hero-content p {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: none;
}

.hero-usps li {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
}

.hero-highlight {
  color: var(--color-accent);
}

.hero-content p.hero-urgency {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.hero-btns .btn-primary {
  animation: none !important;
}

@media (max-width: 1024px) {
  .hero-content {
    background: var(--color-theme-dark) !important;
  }

  .hero-content h1,
  .hero-content p {
    color: var(--white);
  }

  .hero-usps li {
    color: rgba(255, 255, 255, 0.9);
  }
}


/* ── 2. Bento USPs — creme + anthracite pijn-check card ── */
.bento-section-modern {
  background-color: var(--color-surface-alt);
}

.bento-pijncheck {
  background: var(--color-theme-dark) !important;
}

.bento-pijncheck .bento-title-large {
  color: var(--white);
}

.bento-pijncheck p {
  color: rgba(255, 255, 255, 0.85);
}

.bento-wave-bottom .shape-fill {
  fill: var(--color-surface-alt);
}


/* ── 3. About — creme ── */
.about-section {
  background-color: var(--color-bg-creme);
}

.about-wave-bottom .shape-fill {
  fill: var(--color-bg-creme);
}

.about-content h2 {
  color: var(--color-anthracite);
}


/* ── 4. Journey — creme ── */
.journey-section {
  background-color: var(--color-surface-deep);
  background-image: none;
}


/* ── 5. Method wave top — fill = journey/about (creme) ── */
.method-wave-top .shape-fill {
  fill: var(--color-surface-deep);
}


/* ── 6. Pijn-Check — anthracite command center ── */
.section-pijncheck {
  background-color: var(--color-theme-dark);
}

.free-screening-banner.split-layout .section-head h2 {
  color: var(--white) !important;
}

.free-screening-banner.split-layout .section-head .sub-title {
  color: var(--color-accent);
}

.free-screening-banner.split-layout p {
  color: rgba(255, 255, 255, 0.82);
}

.free-screening-banner.split-layout .fs-meta {
  background: rgba(255, 255, 255, 0.07);
  border-left: 4px solid var(--color-accent);
}

.free-screening-banner.split-layout .fs-item span {
  color: rgba(255, 255, 255, 0.9);
}

.free-screening-banner.split-layout .fs-item i {
  color: var(--color-accent);
}

.free-screening-banner.split-layout .fs-action .lead-btn {
  background: var(--color-accent);
  color: var(--color-anthracite);
  border: 2px solid var(--color-border-dark);
  border-radius: 9999px;
  box-shadow: 4px 4px 0 var(--color-border-dark);
}

.free-screening-banner.split-layout .fs-action .lead-btn:hover {
  background: var(--color-accent-hover);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-border-dark);
}

.free-screening-banner.split-layout .small-print {
  color: rgba(255, 255, 255, 0.55);
}


/* ── 7. Testimonials — indigo wash ── */
.testimonials-section {
  background-color: var(--color-surface-alt);
}

.testimonials-wave-top .shape-fill {
  fill: var(--color-surface-alt);
}

.testimonials-wave-bottom .shape-fill {
  fill: var(--color-surface-alt);
}

.avatar-arch {
  background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.15) 0%, var(--gray-bg) 100%);
}


/* ── 8. Blog — creme + stamped cards ── */
.blog-section-new {
  background-color: var(--color-bg-creme);
}

.blog-card-new {
  border: 2px solid var(--color-border-dark);
  box-shadow: 4px 4px 0 var(--color-border-dark);
  border-radius: var(--radius-card);
}

.blog-card-new:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--color-border-dark);
}

.blog-wave-bottom .shape-fill {
  fill: var(--color-bg-creme);
}

.blog-view-all {
  border-color: var(--color-border-dark);
  border-radius: 9999px;
}

.blog-view-all:hover {
  background: var(--color-theme-dark);
  color: #fff;
  border-color: var(--color-border-dark);
  transform: none;
}


/* ── 9. Segmentatie — deep indigo ── */
.segmentation-section {
  background-color: var(--color-surface-deep);
  background-image: none;
}

.segment-card {
  border: 2px solid var(--color-border-dark);
  box-shadow: 6px 6px 0 var(--color-border-dark);
  border-radius: var(--radius-card);
}

.segment-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--color-border-dark);
}

.hr-icon {
  background: rgba(var(--color-accent-rgb), 0.12);
  color: rgba(0, 0, 0, 0.6);
}

.sc-icon {
  background: rgba(var(--color-accent-rgb), 0.12);
  color: rgba(0, 0, 0, 0.6);
}

.hr-label,
.sc-label {
  color: var(--color-accent);
}

.hr-footer,
.sc-footer {
  color: var(--color-accent);
}

.segmentation-wave-bottom .shape-fill {
  fill: var(--color-surface-deep);
}


/* ── 10. FAQ — wit + creme items ── */
.faq-section {
  background-color: var(--white);
}

.faq-item {
  background-color: var(--color-bg-creme);
  border-left: 4px solid transparent;
}

.faq-item.active {
  border-left-color: var(--color-accent);
}


/* ── 11. Pricing — indigo wash ── */
.pricing-section {
  background-color: var(--color-surface-alt);
}

.pricing-wave-top .shape-fill {
  fill: var(--color-surface-alt);
}

.pricing-wave-bottom .shape-fill {
  fill: var(--color-surface-alt);
}

.modern-card {
  background: var(--white);
  border: 2px solid var(--color-border-dark);
  box-shadow: 6px 6px 0 var(--color-border-dark);
  border-radius: var(--radius-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modern-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--color-border-dark);
}

/* Featured card: anthracite receipt */
.featured-card.gradient-mesh-bg {
  transform: none !important;
  background: var(--color-theme-dark);
  border: 2px solid var(--color-border-dark);
  box-shadow: 6px 6px 0 var(--color-border-dark);
}

.featured-card.gradient-mesh-bg:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 8px 8px 0 var(--color-border-dark);
}

.featured-card.gradient-mesh-bg .card-header h3 {
  color: var(--white);
}

.featured-card.gradient-mesh-bg .card-header p {
  color: rgba(255, 255, 255, 0.7);
}

.featured-card.gradient-mesh-bg .currency,
.featured-card.gradient-mesh-bg .amount {
  color: var(--white);
}

.featured-card.gradient-mesh-bg .per,
.featured-card.gradient-mesh-bg .members-only {
  color: rgba(255, 255, 255, 0.6);
}

.featured-card.gradient-mesh-bg .feature-list li {
  color: rgba(255, 255, 255, 0.88);
}

.featured-card.gradient-mesh-bg .feature-list.custom-icons li i {
  color: var(--color-accent);
}

.featured-card.gradient-mesh-bg .divider-line {
  background: rgba(255, 255, 255, 0.1);
}

.mesh-blur {
  display: none;
}

/* Pricing knoppen */
.btn-dark-solid {
  background: var(--color-accent);
  color: var(--color-anthracite);
  border: 2px solid var(--color-border-dark);
  border-radius: 9999px;
  box-shadow: 4px 4px 0 var(--color-border-dark);
}

.btn-dark-solid:hover {
  background: var(--color-accent-hover);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-border-dark);
}

.btn-light {
  background: var(--color-bg-creme);
  color: var(--color-anthracite);
  border: 2px solid var(--color-border-dark);
  border-radius: 9999px;
  box-shadow: 4px 4px 0 var(--color-border-dark);
}

.btn-light:hover {
  background: var(--color-accent);
  border-color: var(--color-border-dark);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-border-dark);
}

/* Vergoedings-info box */
.reimbursement-info {
  background: rgba(var(--color-accent-rgb), 0.08);
  border-left: 5px solid var(--color-accent);
  box-shadow: none;
}

/* Golden ticket — zelfde B&C-animatie als bento-pijncheck */
.premium-free-banner {
  background-color: var(--color-theme-dark);
  border: 2px solid rgba(var(--color-accent-rgb), 0.5);
  box-shadow: 4px 4px 0 rgba(var(--color-accent-rgb), 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.premium-free-banner:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--color-accent);
  border-color: var(--color-accent);
}

.pfb-bg,
.pfb-bg2,
.pfb-bg3 {
  display: none;
}

.pfb-icon-wrapper {
  background: rgba(var(--color-accent-rgb), 0.15);
  color: var(--color-accent);
  border-color: rgba(var(--color-accent-rgb), 0.3);
}

.pfb-meta span {
  color: rgba(255, 255, 255, 0.7);
}

.pfb-meta span i {
  color: var(--color-accent);
}

.pfb-microcopy {
  color: rgba(255, 255, 255, 0.55);
}


/* ── 12. Footer wave container — naadloos verlengde van tarieven ── */
.footer-wave-container {
  background-color: var(--color-surface-alt);
}