/* ═══════════════════════════════════════════════════════════════════
   SV CAPITAL — Home Page CI Override  (home-ci.css)
   Official Corporate Identity: White/light body · Orange #FF8215 primary
   Teal #2F8C9B secondary · DM Serif Display headings
   ═══════════════════════════════════════════════════════════════════ */

/* ── CI Tokens ─────────────────────────────────────────────────── */
:root {
  --ci-orange:        #FF8215;
  --ci-orange-dark:   #E56200;
  --ci-orange-light:  #FF9B0C;
  --ci-orange-pale:   rgba(255,130,21,0.08);
  --ci-orange-border: rgba(255,130,21,0.28);
  --ci-orange-glow:   rgba(255,130,21,0.18);
  --ci-teal:          #2F8C9B;
  --ci-teal-dark:     #1E6E7A;
  --ci-teal-pale:     rgba(47,140,155,0.09);
  --ci-green:         #22C55E;
  --ci-section-bg:    #F7F8FA;
  --ci-section-bg2:   #FFFFFF;
  --ci-text:          #1a1a1a;
  --ci-text-body:     #303030;
  --ci-text-muted:    #6b7280;
  --ci-border:        rgba(0,0,0,0.08);
  --ci-border-md:     rgba(0,0,0,0.13);

  /* Remap dark-luxury gold → CI orange so shared components update */
  --gold:        var(--ci-orange);
  --gold-light:  var(--ci-orange-light);
  --gold-dark:   var(--ci-orange-dark);
  --gold-glow:   var(--ci-orange-pale);
  --border-gold: var(--ci-orange-border);
}

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: rgba(255,130,21,0.30); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--ci-orange); }

/* ═══════════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════════ */
/* Transparent on page-top (hero is dark — logo remains readable) */
.navbar {
  /* stays transparent on hero so logo works on dark BG */
}

.navbar.scrolled {
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.07) !important;
}

/* Logo */
.nav-logo { gap: 10px; }
.nav-logo-img { display:block; width:36px; height:36px; border-radius:8px; }
.logo-sv { color: var(--ci-orange) !important; font-weight: 900; }
.logo-capital { color: var(--ci-text) !important; }
.navbar:not(.scrolled) .logo-capital { color: #fff !important; }
.logo-badge {
  background: var(--ci-orange-pale) !important;
  border-color: var(--ci-orange-border) !important;
  color: var(--ci-orange-dark) !important;
}
.navbar:not(.scrolled) .logo-badge {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.9) !important;
}

/* Nav links */
.navbar.scrolled .nav-link { color: #6b7280 !important; }
.navbar.scrolled .nav-link:hover {
  color: var(--ci-orange) !important;
  background: var(--ci-orange-pale) !important;
}
.navbar.scrolled .nav-btn--ghost {
  color: #303030 !important;
  border-color: rgba(0,0,0,0.15) !important;
}
.navbar.scrolled .nav-btn--ghost:hover {
  border-color: var(--ci-orange) !important;
  color: var(--ci-orange) !important;
}

/* Primary nav CTA */
.nav-btn--primary {
  background: linear-gradient(135deg, #FF9B0C, #FF5229) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(255,130,21,0.28) !important;
}
.nav-btn--primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(255,130,21,0.40) !important;
  opacity: 0.95 !important;
}

/* Mobile toggle (scrolled) */
.navbar.scrolled .nav-mobile-toggle span { background: #1a1a1a !important; }

/* ═══════════════════════════════════════════════════════════════
   HERO — keep dark (brand moment)
   ═══════════════════════════════════════════════════════════════ */
.hero-eyebrow .eyebrow-dot { background: var(--ci-orange) !important; }
.hero-headline em { color: var(--ci-orange-light) !important; }
.hero-sub strong { color: #fff !important; }

/* Hero CTAs */
.btn--gold {
  background: linear-gradient(135deg, #FF9B0C 0%, #FF5229 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 24px rgba(255,130,21,0.32) !important;
}
.btn--gold:hover {
  box-shadow: 0 10px 36px rgba(255,130,21,0.48) !important;
  background: linear-gradient(135deg, #FFAA20 0%, #FF6321 100%) !important;
}

/* Trust bar */
.trust-item i { color: var(--ci-orange) !important; }

/* Portfolio card in hero (keep dark card) */
.portfolio-card__return.positive { color: var(--ci-green) !important; }
.portfolio-card__badge--live {
  background: rgba(34,197,94,0.12) !important;
  color: var(--ci-green) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED IN — light strip
   ═══════════════════════════════════════════════════════════════ */
.featured-in {
  background: var(--ci-section-bg) !important;
  border-color: var(--ci-border) !important;
}
.featured-label { color: var(--ci-text-muted) !important; }
.featured-logo-item { color: #9ca3af !important; }
.featured-logo-item:hover { color: var(--ci-orange) !important; }

/* ═══════════════════════════════════════════════════════════════
   SHARED SECTION PARTS
   ═══════════════════════════════════════════════════════════════ */
.section-eyebrow {
  background: var(--ci-orange-pale) !important;
  border-color: var(--ci-orange-border) !important;
  color: var(--ci-orange-dark) !important;
}
.section-eyebrow--light {
  background: rgba(255,130,21,0.12) !important;
  border-color: rgba(255,130,21,0.25) !important;
  color: var(--ci-orange-light) !important;
}
.section-title { color: var(--ci-text) !important; }
.section-title em { color: var(--ci-orange) !important; }
.section-title--light { color: #fff !important; }
.section-sub { color: var(--ci-text-muted) !important; }
.section-sub--light { color: rgba(255,255,255,0.72) !important; }

/* ═══════════════════════════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════════════════════════ */
.stats-bar {
  background: #fff !important;
  border-color: var(--ci-border) !important;
  border-top: 1px solid var(--ci-border) !important;
  border-bottom: 1px solid var(--ci-border) !important;
}
.stat-bar-value { color: var(--ci-orange) !important; }
.stat-bar-label { color: var(--ci-text-muted) !important; }
.stat-bar-divider { background: var(--ci-border) !important; }

/* ═══════════════════════════════════════════════════════════════
   PRODUCTS — white background
   ═══════════════════════════════════════════════════════════════ */
.products {
  background: #fff !important;
  color: var(--ci-text-body) !important;
}

.product-card {
  background: #fff !important;
  border: 1.5px solid var(--ci-border) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
  color: var(--ci-text-body) !important;
}
.product-card:hover {
  border-color: var(--ci-orange-border) !important;
  box-shadow: 0 8px 32px rgba(255,130,21,0.12) !important;
}
.product-card__title { color: var(--ci-text) !important; }
.product-card__desc  { color: var(--ci-text-muted) !important; }
.product-card__featured-ribbon {
  background: linear-gradient(135deg, #FF9B0C, #FF5229) !important;
  color: #fff !important;
}

/* Stats inside product card */
.stat__label { color: var(--ci-text-muted) !important; }
.stat__value { color: var(--ci-text) !important; }
.stat__value--gold { color: var(--ci-orange) !important; }
.stat__unit { color: var(--ci-text-muted) !important; }
.detail-row { color: var(--ci-text-muted) !important; }
.detail-row i { color: var(--ci-orange) !important; }

/* Risk / popular badges */
.risk-badge--moderate {
  background: rgba(245,158,11,0.10) !important;
  color: #b45309 !important;
  border: 1px solid rgba(245,158,11,0.25) !important;
}
.risk-badge--low {
  background: rgba(34,197,94,0.09) !important;
  color: #166534 !important;
  border: 1px solid rgba(34,197,94,0.20) !important;
}
.risk-badge--aggressive {
  background: rgba(239,68,68,0.08) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(239,68,68,0.20) !important;
}
.popular-badge { background: rgba(255,130,21,0.10) !important; color: var(--ci-orange-dark) !important; }

/* Solar tier pills */
.tier { background: var(--ci-section-bg) !important; border-color: var(--ci-border) !important; }
.tier__label { color: var(--ci-text-muted) !important; }
.tier__return { color: var(--ci-text) !important; }
.tier--best { background: var(--ci-orange-pale) !important; border-color: var(--ci-orange-border) !important; }
.tier--best .tier__return { color: var(--ci-orange) !important; font-weight: 800; }
.tier--active { border-color: var(--ci-teal) !important; background: var(--ci-teal-pale) !important; }
.tier--active .tier__return { color: var(--ci-teal-dark) !important; }

/* Product card ghost button */
.product-card .btn--ghost {
  background: var(--ci-section-bg) !important;
  color: var(--ci-text-muted) !important;
  border-color: var(--ci-border-md) !important;
}
.product-card .btn--ghost:hover {
  color: var(--ci-orange) !important;
  border-color: var(--ci-orange-border) !important;
  background: var(--ci-orange-pale) !important;
}

/* Light tinted product card backgrounds */
.product-card--cattle .product-card__bg {
  background: radial-gradient(circle at top right, rgba(255,130,21,0.05), transparent) !important;
}
.product-card--solar .product-card__bg {
  background: radial-gradient(circle at top right, rgba(34,197,94,0.05), transparent) !important;
}
.product-card--short .product-card__bg {
  background: radial-gradient(circle at top right, rgba(47,140,155,0.05), transparent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOW IT WORKS — light grey background
   ═══════════════════════════════════════════════════════════════ */
.how-it-works {
  background: var(--ci-section-bg) !important;
  color: var(--ci-text-body) !important;
}
.step-card {
  background: #fff !important;
  border: 1px solid var(--ci-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
}
.step-card:hover {
  border-color: var(--ci-orange-border) !important;
  box-shadow: 0 6px 24px rgba(255,130,21,0.10) !important;
}
.step-number {
  background: linear-gradient(135deg, #FF9B0C, #FF5229) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.step-title { color: var(--ci-text) !important; }
.step-desc  { color: var(--ci-text-muted) !important; }
.step-connector { background: var(--ci-orange-pale) !important; }

/* ═══════════════════════════════════════════════════════════════
   IMPACT / SDG — stays dark (full-width brand section)
   ═══════════════════════════════════════════════════════════════ */
.impact-section .sdg-badge {
  border-color: var(--ci-orange-border) !important;
}
.impact-number { color: var(--ci-orange-light) !important; }
.impact-label  { color: rgba(255,255,255,0.6) !important; }
.impact-icon   { color: var(--ci-orange-light) !important; }

/* ═══════════════════════════════════════════════════════════════
   COMPARISON TABLE — white background
   ═══════════════════════════════════════════════════════════════ */
.comparison-section {
  background: #fff !important;
  color: var(--ci-text-body) !important;
}
.comparison-table {
  background: #fff !important;
  border: 1.5px solid var(--ci-border) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07) !important;
}
.comparison-table thead th {
  background: var(--ci-section-bg) !important;
  color: var(--ci-text-muted) !important;
  border-bottom: 2px solid var(--ci-border-md) !important;
}
.comparison-table td {
  color: var(--ci-text-body) !important;
  border-bottom: 1px solid var(--ci-border) !important;
}
.comparison-table .td-highlight { color: var(--ci-orange) !important; font-weight: 800 !important; }
.comparison-table .td-check i   { color: var(--ci-orange) !important; }
.comparison-table .td-cross i   { color: #ef4444 !important; }
.comparison-table .highlight-col { background: var(--ci-orange-pale) !important; }
.comparison-table tr:hover td   { background: var(--ci-section-bg) !important; }

/* ═══════════════════════════════════════════════════════════════
   CALCULATOR — light grey background
   ═══════════════════════════════════════════════════════════════ */
.calculator-section {
  background: var(--ci-section-bg) !important;
  color: var(--ci-text-body) !important;
}
.calc-card {
  background: #fff !important;
  border: 1.5px solid var(--ci-border) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
}
.calc-label { color: var(--ci-text-muted) !important; }
.calc-value { color: var(--ci-text) !important; }
.calc-product-tab {
  background: var(--ci-section-bg) !important;
  color: var(--ci-text-muted) !important;
  border: 1px solid var(--ci-border) !important;
}
.calc-product-tab:hover { color: var(--ci-orange) !important; border-color: var(--ci-orange-border) !important; }
.calc-product-tab.active {
  background: var(--ci-orange-pale) !important;
  color: var(--ci-orange-dark) !important;
  border-color: var(--ci-orange-border) !important;
  font-weight: 700 !important;
}
input[type="range"] { accent-color: var(--ci-orange) !important; }
.calc-total { color: var(--ci-orange) !important; }
.calc-result-label { color: var(--ci-text-muted) !important; }
.calc-result-value { color: var(--ci-text) !important; }
.calc-result-value--gold { color: var(--ci-orange) !important; font-weight: 900 !important; }

/* ═══════════════════════════════════════════════════════════════
   TEAM / ABOUT — white background
   ═══════════════════════════════════════════════════════════════ */
.team-section {
  background: #fff !important;
  color: var(--ci-text-body) !important;
}
.team-card {
  background: #fff !important;
  border: 1px solid var(--ci-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
}
.team-card:hover { border-color: var(--ci-orange-border) !important; }
.team-avatar-placeholder {
  background: linear-gradient(135deg, #FF9B0C, #FF5229) !important;
  color: #fff !important;
}
.team-card__content h3 { color: var(--ci-text) !important; }
.team-card__role { color: var(--ci-orange) !important; }
.team-card__content p { color: var(--ci-text-muted) !important; }
.team-card a[href*="linkedin"] { color: #0077b5 !important; }

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS — light grey background
   ═══════════════════════════════════════════════════════════════ */
.testimonials-section {
  background: var(--ci-section-bg) !important;
  color: var(--ci-text-body) !important;
}
.testimonial-card {
  background: #fff !important;
  border: 1px solid var(--ci-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
}
.testimonial-card:hover { border-color: var(--ci-orange-border) !important; }
.testimonial-card--featured {
  background: linear-gradient(135deg, rgba(255,130,21,0.03), rgba(255,130,21,0.01)) !important;
  border-color: var(--ci-orange-border) !important;
}
.testimonial-stars   { color: var(--ci-orange) !important; }
.testimonial-text    { color: var(--ci-text-muted) !important; }
.testimonial-author-name { color: var(--ci-text) !important; }
.testimonial-product { color: var(--ci-orange) !important; }
.testimonial-return  { color: var(--ci-green) !important; }

/* ═══════════════════════════════════════════════════════════════
   FAQ — white background
   ═══════════════════════════════════════════════════════════════ */
.faq-section {
  background: #fff !important;
  color: var(--ci-text-body) !important;
}
.faq-cat { color: var(--ci-text-muted) !important; }
.faq-cat:hover { color: var(--ci-orange) !important; background: var(--ci-orange-pale) !important; }
.faq-cat.active {
  background: var(--ci-orange-pale) !important;
  color: var(--ci-orange-dark) !important;
  border-color: var(--ci-orange-border) !important;
  font-weight: 700;
}
.faq-item {
  background: #fff !important;
  border: 1px solid var(--ci-border) !important;
}
.faq-item.open { border-color: var(--ci-orange-border) !important; }
.faq-question { color: var(--ci-text) !important; }
.faq-question:hover { color: var(--ci-orange) !important; }
.faq-question i { color: var(--ci-orange) !important; }
.faq-answer {
  color: var(--ci-text-muted) !important;
  background: var(--ci-section-bg) !important;
}
.faq-answer a { color: var(--ci-orange) !important; }

/* ═══════════════════════════════════════════════════════════════
   FINAL CTA — dark (hero-style brand moment)
   ═══════════════════════════════════════════════════════════════ */
.final-cta {
  background: linear-gradient(135deg, #1a3a4a 0%, #0d2535 100%) !important;
}
.final-cta-orb { background: radial-gradient(circle, rgba(255,130,21,0.10) 0%, transparent 70%) !important; }
.final-cta__badge {
  background: rgba(255,130,21,0.12) !important;
  border-color: rgba(255,130,21,0.28) !important;
  color: var(--ci-orange-light) !important;
}
.final-cta h2 em { color: var(--ci-orange-light) !important; }
.final-cta-trust i { color: var(--ci-orange-light) !important; }
.final-cta-trust span { color: rgba(255,255,255,0.65) !important; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER — dark with CI orange accents
   ═══════════════════════════════════════════════════════════════ */
.footer { background: #0a0e15 !important; }
.footer-logo .logo-sv { color: var(--ci-orange) !important; }
.footer-logo .logo-capital { color: #fff !important; }
.footer-desc { color: rgba(255,255,255,0.50) !important; }
.footer-heading { color: rgba(255,255,255,0.75) !important; }
.footer-link { color: rgba(255,255,255,0.45) !important; }
.footer-link:hover { color: var(--ci-orange) !important; }
.footer-social a {
  color: rgba(255,255,255,0.50) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.footer-social a:hover {
  background: var(--ci-orange-pale) !important;
  color: var(--ci-orange) !important;
  border-color: var(--ci-orange-border) !important;
}
.footer-copy { color: rgba(255,255,255,0.30) !important; }
.footer-fsca { border-color: var(--ci-orange-border) !important; }
.footer-fsca i { color: var(--ci-orange) !important; }
.footer-divider { border-color: rgba(255,255,255,0.07) !important; }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT MODALS — light style
   ═══════════════════════════════════════════════════════════════ */
.modal-backdrop { background: rgba(0,0,0,0.55) !important; backdrop-filter: blur(4px); }
.modal-card {
  background: #fff !important;
  border: 1px solid var(--ci-border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.20) !important;
}
.modal-header {
  border-bottom: 1px solid var(--ci-border) !important;
  background: var(--ci-section-bg) !important;
}
.modal-title { color: var(--ci-text) !important; }
.modal-close { color: var(--ci-text-muted) !important; }
.modal-close:hover { color: var(--ci-orange) !important; }
.modal-stat-label { color: var(--ci-text-muted) !important; }
.modal-stat-value { color: var(--ci-text) !important; }
.modal-stat-value--gold { color: var(--ci-orange) !important; }
.modal-detail-row i { color: var(--ci-orange) !important; }
.modal-detail-row { color: var(--ci-text-muted) !important; }
.modal-body { color: var(--ci-text-body) !important; }

/* ═══════════════════════════════════════════════════════════════
   AUTHOR / BLOG
   ═══════════════════════════════════════════════════════════════ */
.author-avatar {
  background: linear-gradient(135deg, #FF9B0C, #FF5229) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   MISC FIXES — ensure text readability on light BG
   ═══════════════════════════════════════════════════════════════ */

/* Any generic card/box that may have dark background */
.card-dark, .info-card {
  background: var(--ci-section-bg) !important;
  border: 1px solid var(--ci-border) !important;
  color: var(--ci-text-body) !important;
}

/* Section titles inside light sections should be dark */
.products .section-title,
.how-it-works .section-title,
.comparison-section .section-title,
.calculator-section .section-title,
.team-section .section-title,
.testimonials-section .section-title,
.faq-section .section-title {
  color: var(--ci-text) !important;
}

/* Section subs in light sections */
.products .section-sub,
.how-it-works .section-sub,
.comparison-section .section-sub,
.calculator-section .section-sub,
.team-section .section-sub,
.testimonials-section .section-sub,
.faq-section .section-sub {
  color: var(--ci-text-muted) !important;
}