/* ==========================================================
   READABILITY FIX -- DARK MODE (Default)
   Strong, clear text on dark bg (#060412)
   All muted text -> bright readable values
========================================================== */

/* -- Root: brighter muted color --------------------------- */
:root {
  --muted:  #c8c2e8;
  --white:  #f0eeff;
}

/* -- Body -------------------------------------------------- */
body { color: #e8e3ff }

/* == NAVBAR ============================================== */
.nav-links a           { color: #d4cff0 !important }
.nav-links a:hover,
.nav-links a.active    { color: #a78bfa !important }

/* == HERO ================================================ */
.hero-title            { color: #f0eeff }
.hero-desc             { color: #d4cff0 !important }
.hero-badge            { color: #c8c2e6 !important }
.hero-checklist li     { color: #d4cff0 !important }

/* == TRUST STRIP ========================================= */
.trust-lbl             { color: #c8c2e8 !important }
.trust-num             { color: #f0eeff }

/* == SECTION TEXT ======================================== */
.section-title         { color: #f0eeff }
.section-sub           { color: #ccc6e8 !important }
section p              { color: #ccc6e8 }
.page-hero p           { color: #ccc6e8 }
h1,h2,h3,h4,h5         { color: #f0eeff }

/* == OLD vs NEW ========================================== */
.oldnew-label          { color: #f0eeff !important }
.oldnew-sublabel       { color: #c8c2e8 !important }
.oldnew-list li        { color: #ccc6e8 !important }
.x-icon                { color: #f87171 !important }
.ck-icon               { color: #a78bfa !important }

/* == SYSTEMS ============================================= */
.system-num            { color: rgba(167,139,250,.6) !important }
.system-title          { color: #f0eeff !important }
.system-desc           { color: #ccc6e8 !important }
.system-features li    { color: #d4cff0 !important }
.system-outcome span   { color: #b8d4f8 !important }

/* == STEPS =============================================== */
.step-num              { color: rgba(167,139,250,.55) !important }
.step-title            { color: #f0eeff !important }
.step-desc             { color: #ccc6e8 !important }

/* == TOOLS =============================================== */
.tool-title            { color: #f0eeff !important }
.tool-desc             { color: #ccc6e8 !important }

/* == HOOK OFFER ========================================== */
.hook-item strong      { color: #f0eeff !important }
.hook-item span        { color: #ccc6e8 !important }
.hook-content p        { color: #ccc6e8 !important }
.hook-price-note       { color: #c8c2e8 !important }
.hook-guarantee        { color: #ccc6e8 !important }
.value-line span:first-child { color: #d4cff0 !important }
.val-price             { color: #b8b2d4 !important }
.hook-badge-top        { color: #a78bfa !important }

/* == ROI CALCULATOR ====================================== */
.calc-heading          { color: #f0eeff !important }
.calc-field label      { color: #d4cff0 !important }
.calc-field label small{ color: #c8c2e8 !important }
.calc-unit             { color: #c8c2e8 !important }
.calc-radio            { color: #ccc6e8 !important }
.crr-label             { color: #ccc6e8 !important }
.crr-label small       { color: #c8c2e8 !important }
.crr-value             { color: #f0eeff !important }
.crr-value.loss        { color: #fca5a5 !important }
.crr-value.gain        { color: #6ee7b7 !important }
.calc-result-divider   { color: #67e8f9 !important }
.calc-disclaimer       { color: #67e8f9 !important }

/* == TESTIMONIALS ======================================== */
.testi-text            { color: #d4cff0 !important }
.testi-name            { color: #f0eeff !important }

/* == FAQ ================================================= */
.faq-q                 { color: #f0eeff !important }
.faq-a                 { color: #ccc6e8 !important }

/* == PRICING ============================================= */
.price-name            { color: #f0eeff !important }
.price-desc            { color: #ccc6e8 !important }
.price-features li     { color: #d4cff0 !important }
.price-card p          { color: #ccc6e8 !important }

/* == PAIN CARDS ========================================== */
.pain-card h3          { color: #f0eeff !important }
.pain-card p           { color: #ccc6e8 !important }
.prob-label            { color: #a78bfa !important }
.prob-text             { color: #ccc6e8 !important }

/* == APP SECTION ========================================= */
.app-features-list li strong { color: #f0eeff !important }
.app-features-list li span   { color: #ccc6e8 !important }
.app-tagline                 { color: #a78bfa !important }

/* == PHONE MOCKUP ======================================== */
.phone-notif-title     { color: #f0eeff !important }
.phone-notif-sub       { color: #c8c2e8 !important }
.phone-stat-lbl        { color: #b8b2d4 !important }
.fp-lbl                { color: #c8c2e8 !important }

/* == INTEGRATIONS ======================================== */
.integ-card-name       { color: #c8c2e8 !important }
.isp-lbl               { color: #c8c2e8 !important }
.hub-sat-lbl           { color: #c8c2e8 !important }
.integ-hub-tag         { color: #a78bfa !important }

/* == STATS BAND ========================================== */
.stat-lbl              { color: rgba(255,255,255,.75) !important }

/* == CTA SECTION ========================================= */
.cta-eyebrow           { color: rgba(167,139,250,.9) !important }
.cta-box p             { color: rgba(255,255,255,.85) !important }
.cta-note              { color: rgba(255,255,255,.65) !important }

/* == FEATURES PAGE ======================================= */
.feat-title            { color: #f0eeff !important }
.feat-desc             { color: #ccc6e8 !important }
.feat-detail-desc      { color: #ccc6e8 !important }
.feat-detail-tag       { color: #a78bfa !important }
.feat-list li          { color: #ccc6e8 !important }

/* == ABOUT PAGE ========================================== */
.team-name             { color: #f0eeff !important }
.team-role             { color: #a78bfa !important }
.team-bio              { color: #ccc6e8 !important }
.value-title           { color: #f0eeff !important }
.value-text            { color: #ccc6e8 !important }

/* == FORM ================================================ */
.form-label            { color: #d4cff0 !important }
.db-title              { color: #f0eeff !important }
.db-text               { color: #ccc6e8 !important }

/* == FOOTER ============================================== */
.footer-brand p        { color: #ccc6e8 !important }
.footer-col h5         { color: #f0eeff !important }
.footer-col ul li a    { color: #c8c2e8 !important }
.footer-col ul li a:hover { color: #a78bfa !important }
.footer-bottom p       { color: #a89fc4 !important }
.footer-links a        { color: #a89fc4 !important }
.footer-links a:hover  { color: #a78bfa !important }

/* == MOBILE DRAWER ======================================= */
.drawer-nav a          { color: #d4cff0 !important }
.drawer-nav a:hover    { color: #a78bfa !important }

/* == TABLE =============================================== */
table td               { color: #ccc6e8 !important }
table th               { color: #f0eeff !important }

/* == INLINE STYLE OVERRIDE ================================ */
[style*="color:var(--muted)"],
[style*="color: var(--muted)"] { color: #c8c2e8 !important }

/* == CHIP ================================================ */
.chip                  { color: #a78bfa !important }

/* == LEAD CARD TEXT ====================================== */
.lead-name             { color: #f0eeff !important }
.lead-time             { color: #c8c2e8 !important }
.check-list li         { color: #d4cff0 !important }
.hero-checklist .ck    { color: #fff !important }


/* == SELECT / DROPDOWN FIX (dark theme) ================== */
select,
.form-input[name="business_type"],
.form-input[name="contact_method"],
.form-input[name="business_type"],
form select {
    background-color: #1a1a2e !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
}
select option,
.form-input option,
form select option {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
    padding: 10px 14px !important;
}
select option:checked,
select option:hover {
    background-color: #7c3aed !important;
    color: #fff !important;
}
/* Light mode override */
[data-theme="light"] select,
[data-theme="light"] .form-input[name="business_type"],
[data-theme="light"] .form-input[name="contact_method"],
[data-theme="light"] form select {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}
[data-theme="light"] select option,
[data-theme="light"] form select option {
    background-color: #fff !important;
    color: #333 !important;
}