/* ═══════════════════════════════════════════════════════════
   MALAIKA AI AGENCY — CREAM THEME
   Warm, premium, cream-forward visual identity
   Brand: Porcelain Cream #EEE9E3 · Dark Brown #635840
          Champagne Gold #ECD9B0 · Black #000000
   Loads AFTER styles.css — overrides dark defaults
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────
   1. BASE — Cream body, warm dark text
───────────────────────────────────────────────── */
body {
  background: #EEE9E3;
  color: #2a1f12;
}

h1, h2, h3, h4, h5 { color: #1a0f05; }

p { color: #4a3835; }

a { color: #635840; }
a:hover { color: #D4AF37; }

::-webkit-scrollbar-track { background: #E0D9CF; }


/* ─────────────────────────────────────────────────
   2. NAVIGATION — rich dark chocolate
───────────────────────────────────────────────── */
nav {
  background: rgba(20, 12, 4, 0.97) !important;
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(212,175,55,0.15);
}
.nav-mobile { background: #140c04 !important; }
.nav-logo, .nav-logo-text { color: #F5EEE0; }
nav a:not(.btn) { color: rgba(238,233,227,0.88) !important; }
nav a:not(.btn):hover { color: #D4AF37 !important; }


/* ─────────────────────────────────────────────────
   3. PAGE LOADER — cream
───────────────────────────────────────────────── */
#page-loader { background: #EEE9E3; }


/* ─────────────────────────────────────────────────
   4. HERO & PAGE HERO — keep rich dark chocolate
───────────────────────────────────────────────── */
.hero, .page-hero {
  background: linear-gradient(150deg, #0d0804 0%, #1a0f05 40%, #251508 100%) !important;
  color: #F5EEE0;
}
.hero h1, .hero h2, .hero h3,
.page-hero h1, .page-hero h2, .page-hero h3 { color: #F5EEE0; }
.hero p, .page-hero p { color: rgba(245,238,224,0.85) !important; }
.hero .eyebrow { color: #D4AF37; }


/* ─────────────────────────────────────────────────
   5. SECTIONS WITH var(--navy) inline background
   These stay dark — just restore white text
───────────────────────────────────────────────── */
section[style*="background:var(--navy)"],
section[style*="background: var(--navy)"] {
  color: #F5EEE0;
}
section[style*="background:var(--navy)"] h1,
section[style*="background:var(--navy)"] h2,
section[style*="background:var(--navy)"] h3,
section[style*="background:var(--navy)"] h4,
section[style*="background: var(--navy)"] h1,
section[style*="background: var(--navy)"] h2,
section[style*="background: var(--navy)"] h3,
section[style*="background: var(--navy)"] h4 { color: #F5EEE0; }
section[style*="background:var(--navy)"] p,
section[style*="background: var(--navy)"] p { color: rgba(245,238,224,0.82) !important; }
section[style*="background:var(--navy)"] .eyebrow,
section[style*="background: var(--navy)"] .eyebrow { color: #D4AF37; }
section[style*="background:var(--navy)"] .section-header p,
section[style*="background: var(--navy)"] .section-header p { color: rgba(245,238,224,0.75) !important; }


/* ─────────────────────────────────────────────────
   6. SECTIONS WITH rgba(255,255,255,0.01) — cream
   These were effectively transparent — now cream
───────────────────────────────────────────────── */
section[style*="rgba(255,255,255,0.01)"] {
  background: #F0EAE1 !important;
  color: #2a1f12;
}
section[style*="rgba(255,255,255,0.01)"] h2,
section[style*="rgba(255,255,255,0.01)"] h3 { color: #1a0f05; }
section[style*="rgba(255,255,255,0.01)"] p { color: #4a3835 !important; }
section[style*="rgba(255,255,255,0.01)"] .eyebrow { color: #8a6a20; }
section[style*="rgba(255,255,255,0.01)"] .section-header p { color: #635840 !important; }


/* ─────────────────────────────────────────────────
   7. CTA SECTION & FINAL CTA — rich dark
───────────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, #140c04 0%, #1f1208 50%, #140c04 100%) !important;
  color: #F5EEE0;
}
.cta-section h2 { color: #F5EEE0; }
.cta-section p { color: rgba(245,238,224,0.82) !important; }

.final-cta {
  background: linear-gradient(135deg, #1a0f05 0%, #251508 100%) !important;
  color: #F5EEE0;
}
.final-cta h2 { color: #F5EEE0; }
.final-cta p { color: rgba(245,238,224,0.82) !important; }
.final-cta-inner { background: none; }


/* ─────────────────────────────────────────────────
   8. PROOF STRIP — warm dark band
───────────────────────────────────────────────── */
.proof-strip {
  background: linear-gradient(90deg, #1a0f05 0%, #251a08 50%, #1a0f05 100%) !important;
  border-top: 1px solid rgba(212,175,55,0.2);
  border-bottom: 1px solid rgba(212,175,55,0.2);
}
.stat-number, .stat-number span { color: #D4AF37 !important; }
.stat-label { color: rgba(245,238,224,0.7) !important; }


/* ─────────────────────────────────────────────────
   9. FOOTER — rich dark chocolate
───────────────────────────────────────────────── */
footer {
  background: linear-gradient(180deg, #140c04 0%, #0a0603 100%) !important;
  border-top: 1px solid rgba(212,175,55,0.2);
}
footer h5 { color: #ECD9B0 !important; }
footer p { color: rgba(245,238,224,0.6) !important; }
footer a { color: rgba(245,238,224,0.6); }
footer a:hover { color: #D4AF37; }
.footer-bottom { border-top-color: rgba(212,175,55,0.12) !important; color: rgba(245,238,224,0.4) !important; }
.footer-bottom a { color: rgba(245,238,224,0.5); }


/* ─────────────────────────────────────────────────
   10. SECTION HEADERS on cream backgrounds
───────────────────────────────────────────────── */
.section-header h2 { color: #1a0f05; }
.section-header p { color: #635840 !important; }
.section-divider { background: linear-gradient(90deg, #D4AF37, #ECD9B0, transparent) !important; height: 2px; }
.gold-line { background: linear-gradient(90deg, #D4AF37, #ECD9B0, transparent) !important; }
.eyebrow { color: #8a6a20; letter-spacing: 3px; }
.badge {
  background: rgba(212,175,55,0.12) !important;
  border: 1px solid rgba(212,175,55,0.3) !important;
  color: #7a5c10 !important;
}


/* ─────────────────────────────────────────────────
   11. PROBLEM SECTION — cream with impact
───────────────────────────────────────────────── */
.problem-section {
  background: linear-gradient(160deg, #E8E1D7 0%, #EEE9E3 100%) !important;
}
.problem-section h2 { color: #1a0f05; }
.problem-section .eyebrow { color: #8a6a20; }
.problem-list li { color: #3a2f25; }
.problem-list li strong { color: #1a0f05; }
.problem-list .icon { background: rgba(212,175,55,0.12) !important; border-color: rgba(212,175,55,0.25) !important; }


/* ─────────────────────────────────────────────────
   12. CARDS — white on cream = premium feel
───────────────────────────────────────────────── */
.card,
.service-card,
.value-card,
.blog-card,
.portfolio-card,
.shop-card,
.agent-card,
.care-card {
  background: #ffffff !important;
  border: 1px solid rgba(99,88,64,0.13) !important;
  box-shadow: 0 2px 16px rgba(99,88,64,0.07), 0 0 0 0 transparent !important;
  color: #2a1f12;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease !important;
}
.card:hover,
.service-card:hover,
.value-card:hover,
.blog-card:hover,
.shop-card:hover,
.agent-card:hover {
  box-shadow: 0 12px 48px rgba(99,88,64,0.18), 0 0 0 0 transparent !important;
  border-color: rgba(212,175,55,0.35) !important;
  transform: translateY(-4px);
}
.card h3, .card h4,
.service-card h3, .service-card h4,
.value-card h3,
.blog-card h3,
.portfolio-card h3,
.shop-card h3,
.agent-card h3,
.care-card h3 { color: #1a0f05 !important; }
.card p,
.service-card p,
.value-card p,
.blog-card p,
.portfolio-card p,
.shop-card p,
.agent-card p { color: #635840 !important; }
.card .eyebrow, .service-card .eyebrow { color: #8a6a20; }


/* ─────────────────────────────────────────────────
   13. TESTIMONIALS on cream sections
───────────────────────────────────────────────── */
section[style*="rgba(255,255,255,0.01)"] .testimonial {
  background: #ffffff !important;
  border: 1px solid rgba(99,88,64,0.13) !important;
  box-shadow: 0 4px 24px rgba(99,88,64,0.09) !important;
}
section[style*="rgba(255,255,255,0.01)"] .testimonial-text { color: #3a2f25 !important; }
section[style*="rgba(255,255,255,0.01)"] .testimonial-author { color: #1a0f05 !important; }
section[style*="rgba(255,255,255,0.01)"] .testimonial-role { color: #8a7058 !important; }
section[style*="rgba(255,255,255,0.01)"] .testimonial-stars { color: #D4AF37 !important; }


/* ─────────────────────────────────────────────────
   14. FAQ — cream or dark, both styled
───────────────────────────────────────────────── */
/* FAQ on cream sections */
section[style*="rgba(255,255,255,0.01)"] .faq-item {
  background: #ffffff !important;
  border: 1px solid rgba(99,88,64,0.13) !important;
}
section[style*="rgba(255,255,255,0.01)"] .faq-q,
section[style*="rgba(255,255,255,0.01)"] .faq-item summary { color: #1a0f05 !important; }
section[style*="rgba(255,255,255,0.01)"] .faq-a,
section[style*="rgba(255,255,255,0.01)"] .faq-item p { color: #4a3835 !important; }
section[style*="rgba(255,255,255,0.01)"] .faq-icon { color: #D4AF37 !important; }

/* FAQ inside admin-relief and other dark/cream pages */
.faq-list .faq-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(212,175,55,0.18);
}


/* ─────────────────────────────────────────────────
   15. ROI CALCULATOR BANNER
───────────────────────────────────────────────── */
.roi-banner {
  background: linear-gradient(135deg, #1a0f05 0%, #2a1808 100%) !important;
  color: #F5EEE0;
}
.roi-banner h2, .roi-banner h3 { color: #F5EEE0 !important; }
.roi-banner p { color: rgba(245,238,224,0.82) !important; }


/* ─────────────────────────────────────────────────
   16. BUTTONS on cream
───────────────────────────────────────────────── */
.btn-outline {
  border-color: #635840 !important;
  color: #635840 !important;
}
.btn-outline:hover {
  background: #635840 !important;
  color: #EEE9E3 !important;
}
.check { color: #D4AF37 !important; }


/* ─────────────────────────────────────────────────
   17. FORMS on cream pages
───────────────────────────────────────────────── */
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
textarea,
select {
  background: #ffffff;
  border-color: rgba(99,88,64,0.2);
  color: #2a1f12;
}
input::placeholder, textarea::placeholder { color: rgba(99,88,64,0.45); }
label:not(.aud-radio) { color: #3a2f25; }


/* ─────────────────────────────────────────────────
   18. ABOUT PAGE specific
───────────────────────────────────────────────── */
.about-content h2 { color: #1a0f05; }
.about-content p { color: #4a3835; }
.credential-badge {
  background: #ffffff !important;
  border: 1px solid rgba(99,88,64,0.2) !important;
  color: #2a1f12 !important;
  box-shadow: 0 4px 20px rgba(99,88,64,0.1) !important;
}
.credential-badge strong { color: #1a0f05; }
.credential-badge span { color: #8a7058; }

/* Values grid */
.values-grid { background: #EEE9E3 !important; }
.value-card { background: #ffffff !important; border: 1px solid rgba(99,88,64,0.13) !important; }
.value-card h3 { color: #1a0f05 !important; }
.value-card p { color: #635840 !important; }
.value-icon { color: initial; }


/* ─────────────────────────────────────────────────
   19. SECTION-CREAM stays cream and rich
───────────────────────────────────────────────── */
.section-cream {
  background: linear-gradient(160deg, #F0EAE1 0%, #EEE9E3 50%, #F5F0E8 100%) !important;
}
.section-cream h2, .section-cream h3, .section-cream h4 { color: #1a0f05 !important; }
.section-cream p { color: #4a3835 !important; }
.section-cream .eyebrow { color: #8a6a20 !important; }
.section-cream .section-divider { background: linear-gradient(90deg, #D4AF37, #ECD9B0, transparent) !important; }


/* ─────────────────────────────────────────────────
   20. VISUAL RICHNESS — alternating cream tones
───────────────────────────────────────────────── */
/* Add subtle warm gradient to break monotony on plain sections */
.section-full:not([style*="background:var(--navy)"]):not([style*="background: var(--navy)"]) {
  background: linear-gradient(160deg, #EEE9E3 0%, #F5F0E8 100%);
}

/* The C.A.R.E. words */
.care-letter { color: #D4AF37 !important; }
.care-word { color: #1a0f05 !important; }


/* ─────────────────────────────────────────────────
   21. SHOP PAGE
───────────────────────────────────────────────── */
.shop-hero, .agent-hero { background: linear-gradient(150deg, #0d0804 0%, #1a0f05 60%) !important; }
.price-tag { color: #1a0f05 !important; }
.price-tag span { color: #635840 !important; }


/* ─────────────────────────────────────────────────
   22. BLOG CARDS on cream
───────────────────────────────────────────────── */
.blog-tag { background: rgba(212,175,55,0.12); color: #7a5c10; border-color: rgba(212,175,55,0.25); }
.blog-meta { color: #8a7058; }
.blog-excerpt { color: #635840; }
.read-more { color: #D4AF37; }


/* ─────────────────────────────────────────────────
   23. PORTFOLIO on cream
───────────────────────────────────────────────── */
.portfolio-tag { background: rgba(99,88,64,0.1); color: #635840; }
.portfolio-result { color: #D4AF37; }


/* ─────────────────────────────────────────────────
   24. HERO STAT CARDS — keep gold/dark treatment
───────────────────────────────────────────────── */
.hero .hero-stat { background: rgba(255,255,255,0.07) !important; border-color: rgba(212,175,55,0.2) !important; }
.hero .hero-stat-num { color: #D4AF37 !important; }
.hero .hero-stat-label { color: rgba(245,238,224,0.75) !important; }


/* ─────────────────────────────────────────────────
   25. VOICE AGENTS PAGE specifics
───────────────────────────────────────────────── */
.va-hero { background: linear-gradient(150deg, #0d0804 0%, #1a0f05 60%) !important; }


/* ─────────────────────────────────────────────────
   26. CONTACT PAGE specifics
───────────────────────────────────────────────── */
.contact-card {
  background: #ffffff !important;
  border: 1px solid rgba(99,88,64,0.13) !important;
  box-shadow: 0 4px 24px rgba(99,88,64,0.08) !important;
}
.contact-card h3 { color: #1a0f05 !important; }
.contact-card p { color: #635840 !important; }


/* ─────────────────────────────────────────────────
   27. SOLUTION LIST
───────────────────────────────────────────────── */
.solution-list li { color: #3a2f25; }
.solution-list li::before { color: #D4AF37; }


/* ─────────────────────────────────────────────────
   28. COMMUNITY BANNER — stays dark
───────────────────────────────────────────────── */
section[style*="background:var(--navy)"] .community-banner-inner h2 { color: #F5EEE0 !important; }
section[style*="background:var(--navy)"] .community-banner-inner p { color: rgba(245,238,224,0.75) !important; }


/* ─────────────────────────────────────────────────
   29. PAGE SECTIONS WITH NO EXPLICIT BG
       (inherit body cream — just ensure text is dark)
───────────────────────────────────────────────── */
section:not(.hero):not(.page-hero):not(.cta-section):not(.final-cta):not(.proof-strip):not([style*="background:var(--navy)"]):not([style*="background: var(--navy)"]):not([style*="rgba(255,255,255,0.01)"]):not(.section-warm-mid) .section-header h2 {
  color: #1a0f05;
}
section:not(.hero):not(.page-hero):not(.cta-section):not(.final-cta):not(.proof-strip):not([style*="background:var(--navy)"]):not([style*="background: var(--navy)"]):not([style*="rgba(255,255,255,0.01)"]):not(.section-warm-mid) .section-header p {
  color: #635840;
}


/* ─────────────────────────────────────────────────
   30. GOLD ACCENT LINE / DIVIDER
───────────────────────────────────────────────── */
.gold-divider, .section-rule {
  border-color: rgba(212,175,55,0.25);
}

/* Warm accent strip between dark and cream sections */
.section-cream + .hero,
.section-cream + section[style*="background:var(--navy)"] {
  border-top: 2px solid rgba(212,175,55,0.2);
}

/* ─────────────────────────────────────────────────
   31. STORY GALLERY (About page)
───────────────────────────────────────────────── */
.sg-caption { background: linear-gradient(to top, rgba(20,12,4,0.92) 0%, transparent 100%) !important; }
.sg-role { background: rgba(212,175,55,0.2) !important; color: #D4AF37 !important; }
.sg-dot { background: rgba(99,88,64,0.3) !important; }
.sg-dot.active { background: #D4AF37 !important; }

/* ─────────────────────────────────────────────────
   32. WARM POLISH (site-wide, added 2026-06)
   Flat-black bands -> deep brand brown, + card-text contrast fixes
───────────────────────────────────────────────── */
/* Dark section bands become espresso brown instead of pure black */
section[style*="background:var(--navy)"],
section[style*="background: var(--navy)"] {
  background: linear-gradient(180deg, #1E1409 0%, #241A0D 100%) !important;
}
/* Fix near-invisible body text on the cream cards that sit on dark bands */
section[style*="background:var(--navy)"] .care-card p,
section[style*="background: var(--navy)"] .care-card p { color: #5a4a38 !important; }
section[style*="background:var(--navy)"] .care-card .care-word,
section[style*="background: var(--navy)"] .care-card .care-word { color: #93785a !important; }
/* Card faces warm cream, gold-tinted glow on hover (reads better over brown) */
.care-card { background: #FFFCF6 !important; border-color: rgba(212,175,55,0.22) !important; }
.care-card h3 { color: #1a0f05 !important; }
.care-card:hover { box-shadow: 0 24px 50px -12px rgba(212,175,55,0.40) !important; border-color: #D4AF37 !important; }

/* ─────────────────────────────────────────────────
   33. INNER-PAGE COMPONENT CONTRAST (added 2026-06)
   Bespoke cards on Services / Portfolio / Shop / Contact / Blog
   defined white text in each page's inline <style>; on cream that
   text was invisible. Remap text tags to readable brown.
   Scoped to text tags only so gold accents + buttons are untouched.
   !important beats the page-level inline rules.
───────────────────────────────────────────────── */
.pricing-card :is(p, li, h3, h4, h5, td, small, dd, dt),
.ai-service-card :is(p, li, h3, h4, h5, small),
.training-card :is(p, li, h3, h4, h5, small),
.project-card :is(p, li, h3, h4, h5, small),
.project-card-body :is(p, li, h3, h4, h5, small),
.agent-card :is(p, li, h3, h4, h5, small),
.bundle-card :is(p, li, h3, h4, h5, small),
.step-card :is(p, li, h3, h4, h5, small),
.addon-item :is(p, li, h3, h4, h5, small),
.trust-item :is(p, li, h3, h4, h5, small),
.contact-option :is(p, li, h3, h4, h5, small),
.contact-form-wrap :is(p, li, label, small),
.calendly-card :is(p, li, h3, h4, h5, small),
.blog-card-body :is(p, li, h3, h4, h5, small),
.featured-card-body :is(p, li, h3, h4, h5, small),
.demo-info :is(p, li, h3, h4, h5, small, span),
.featured-project-card :is(p, li, h3, h4, h5, small),
.fp-left :is(p, li, h3, h4, h5, small),
.live-demos :is(p, li, h3, h4, h5),
.live-demos-heading :is(p, li, h2, h3, h4),
.product-card :is(p, li, h3, h4, h5, small),
.price-card :is(p, li, h3, h4, h5, small),
.who-card :is(p, li, h3, h4, h5, small, span),
.result-card :is(p, li, h3, h4, h5, small, span),
.policy-wrap :is(p, li, h3, h4, h5, td, dd, dt, strong, b),
.article-body :is(p, li, h2, h3, h4, h5, td, blockquote, dd, dt, strong, b),
.tool-card :is(p, li, h3, h4, h5, small),
.sidebar-card :is(p, li, h3, h4, h5, small),
.author-bio-card :is(p, li, h3, h4, h5, small), .bio-content :is(p, li, h4, h5),
.related-card :is(p, li, h3, h4, h5, small),
.faq-section :is(p, li), .faq-item :is(p, li), .faq-a, .faq-a p,
.section-intro, .section-heading p {
  color: #4a3835 !important;
}
/* FAQ question headings → deep espresso (covers .faq-q and bare h4 questions) */
.faq-q, .faq-item h4, .faq-section h4 { color: #1a0f05 !important; }
/* Author names in blog cards → deep espresso */
.name, .bio-name, .author-name { color: #1a0f05 !important; }
/* In-article links → readable gold-brown, gold on hover */
.article-body a { color: #9a7b1f !important; text-decoration: underline; }
.article-body a:hover { color: #D4AF37 !important; }
/* Sidebar / table-of-contents links on the new white cards */
.sidebar-card a, .toc-list a, .related-card a { color: #5a4a38 !important; }
.sidebar-card a:hover, .toc-list a:hover, .related-card a:hover { color: #D4AF37 !important; }

/* Catch class-less intro paragraphs / headings sitting directly on cream
   sections. Scoped OUT of every dark band so light-on-dark text is untouched. */
section:not(.hero):not(.page-hero):not(.cta-section):not(.final-cta):not([style*="background:var(--navy)"]):not([style*="background: var(--navy)"]):not([style*="rgba(255,255,255,0.01)"]) :is(p, li, h3, h4, h5):not([class]) {
  color: #4a3835 !important;
}
/* Muted sub-text → lighter warm brown (still readable) */
.pricing-desc, .pricing-delivery, .service-uses, .service-note,
.training-audience, .form-note, .post-meta, .demo-info small,
.price-note, .price-desc, .price-recurring, .va-cta-note,
.tool-tagline, .result-label, .trust-item small { color: #7a6550 !important; }
/* Struck-through "was" price → muted, keep the strikethrough */
.bundle-was { color: #9a8a72 !important; }
/* Add-on list rows: title + price were white on the new white card */
.addon-item strong { color: #1a0f05 !important; }
.addon-item span, .addon-item small { color: #7a6550 !important; }
/* Headings inside these cards → deep espresso */
.pricing-card h3, .ai-service-card h3, .project-card h3, .project-card h4,
.bundle-card h3, .step-card h3, .agent-card h3, .blog-card-body h3,
.featured-card-body h3 { color: #1a0f05 !important; }

/* Faded chips/pills: light-on-light → warm brown on soft gold tint */
.stack-tag, .post-tag, .tech-tag {
  background: rgba(212,175,55,0.10) !important;
  border-color: rgba(212,175,55,0.28) !important;
  color: #6b5a45 !important;
}
/* Breadcrumb sits on cream now */
.breadcrumb, .breadcrumb a { color: #7a6550 !important; }
.breadcrumb a:hover { color: #D4AF37 !important; }

/* Portfolio filter pills: readable brown; active = solid gold */
.filter-btn { color: #4a3835 !important; border-color: rgba(99,88,64,0.2) !important; }
.filter-btn.active, .filter-btn:hover { background: #D4AF37 !important; color: #1a0f05 !important; border-color: #D4AF37 !important; }

/* ─────────────────────────────────────────────────
   34. CARD BACKGROUNDS (added 2026-06)
   Most bespoke cards were transparent (no visible face) on cream.
   Give every card a warm white face + soft brown shadow so it reads
   as a card. !important beats the near-transparent inline rules.
───────────────────────────────────────────────── */
.ai-service-card, .pricing-card, .training-card, .project-card,
.product-card, .price-card, .bundle-card, .step-card, .who-card,
.value-card, .sidebar-card, .tool-card, .related-card, .author-bio-card,
.calendly-card, .contact-option, .trust-item, .addon-item, .agent-card,
.portfolio-card, .shop-card, .demo-card, .feature-card, .blog-card,
.featured-card, .result-card, .who-card {
  background: #FFFCF6 !important;
  border: 1px solid rgba(99,88,64,0.14) !important;
  box-shadow: 0 4px 20px rgba(99,88,64,0.08) !important;
}
/* Lift + warm gold glow on hover for the bespoke cards */
.ai-service-card:hover, .pricing-card:hover, .training-card:hover,
.project-card:hover, .product-card:hover, .price-card:hover,
.bundle-card:hover, .step-card:hover, .agent-card:hover,
.value-card:hover, .tool-card:hover, .related-card:hover,
.contact-option:hover, .trust-item:hover, .addon-item:hover,
.feature-card:hover {
  border-color: rgba(212,175,55,0.45) !important;
  box-shadow: 0 16px 40px rgba(212,175,55,0.18) !important;
  transform: translateY(-4px);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
/* Featured / highlighted cards keep a hint of gold so they still pop */
.pricing-card.featured, .product-card.featured, .ai-service-card.primary-service {
  border-color: rgba(212,175,55,0.4) !important;
  box-shadow: 0 8px 30px rgba(212,175,55,0.14) !important;
}

/* ─────────────────────────────────────────────────
   35. FOOTER + BADGE FIXES (added 2026-06)
   Footer had no background, so its cream text vanished on the cream
   body (every page). Give it the dark chocolate it was designed for.
───────────────────────────────────────────────── */
footer, .footer, .site-footer {
  background: #140C04 !important;
  border-top: 1px solid rgba(212,175,55,0.18) !important;
}
/* Credential badge over the portrait: white box → dark readable text */
.credential-badge :is(strong, p, h4, h5) { color: #1a0f05 !important; }
.credential-badge span { color: #7a6550 !important; }