/* FEM Software Shared Styles */

:root{
  --blue-50:#A7D3FF; /* accent sky */
  --blue-60:#5CA8FF;
  --blue-70:#2A6FEA; /* primary */
  --blue-90:#0E1E3A; /* deep */
  --ink:#323F4B;     /* typography */
  --paper:#F5F7FA;   /* neutral bg */
  --muted:#7B8794;
  --green:#31B87C;   /* Hour Tracker Pro */
  --mint:#3AB77D;
  --pastel1:#FFD9E3; /* Dapper Control */
  --pastel2:#FFF6D9;
  --steel:#6E8BBF;   /* Car Leasing */
  --white:#FFFFFF;
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 18px 40px rgba(12, 28, 60, 0.12);
  --glass-blur: 18px;
  --mesh-1: rgba(76, 136, 255, 0.25);
  --mesh-2: rgba(140, 115, 255, 0.18);
  --mesh-3: rgba(59, 199, 255, 0.16);
  --glow-blue: 0 0 0 1px rgba(120, 170, 255, 0.25), 0 18px 40px rgba(56, 120, 240, 0.25);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root{
    --blue-50:#1a2942; /* dark sky */
    --blue-60:#4A8CFF;
    --blue-70:#5CA8FF; /* primary lighter for dark */
    --blue-90:#FFFFFF; /* pure white for headings - WCAG AA */
    --ink:#E5E7EB;     /* light typography - WCAG AA (gray-200) */
    --paper:#0F172A;   /* very dark bg - slate-900 */
    --muted:#D1D5DB;   /* WCAG AA compliant secondary text (gray-300) */
    --glass-bg: rgba(15, 23, 42, 0.85);
    --glass-border: rgba(100, 116, 139, 0.35);
    --glass-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    --mesh-1: rgba(66, 131, 255, 0.15);
    --mesh-2: rgba(146, 120, 255, 0.12);
    --mesh-3: rgba(72, 206, 255, 0.1);
    --glow-blue: 0 0 0 1px rgba(120, 170, 255, 0.2), 0 18px 40px rgba(56, 120, 240, 0.35);
  }
}

/* --- CSS RESET (trimmed) --- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:#ffffff}
img,svg{display:block;max-width:100%;height:auto}
button{font:inherit}
a{color:inherit}

body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:radial-gradient(1200px 800px at 80% -10%, var(--blue-50), transparent) , var(--paper);
  line-height:1.6;
}

@media (prefers-color-scheme: dark) {
  html{
    background:#0F172A !important;
  }
  body{
    background: #0F172A !important;
    color: var(--ink); /* Ensure text is light */
  }
}

.container{width:min(1120px, 92vw); margin-inline:auto}

/* --- HEADER --- */
header{
  position:sticky; 
  top:0; 
  z-index:40; 
  backdrop-filter:saturate(180%) blur(16px); 
  background:rgba(255,255,255,.75); 
  border-bottom:1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 32px rgba(12, 28, 60, 0.08);
}

@media (prefers-color-scheme: dark) {
  header{
    background:rgba(15, 23, 42, 0.8);
    border-bottom:1px solid rgba(100, 116, 139, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }
}
.site-nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.site-nav a{font-weight:600; text-decoration:none; padding:8px 14px; border-radius:10px; transition:all .25s var(--ease-spring)}
.site-nav a:hover{background:rgba(255,255,255,0.7); backdrop-filter:blur(8px)}
.site-nav .cta{
  background: linear-gradient(135deg, #2A6FEA 0%, #4A8CFF 52%, #78B7FF 100%);
  color:var(--white);
  box-shadow: 0 8px 18px rgba(42, 111, 234, 0.28);
}
.site-nav .cta:hover{
  background: linear-gradient(135deg, #1f5ad0 0%, #3777e6 52%, #5fa3f5 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(42, 111, 234, 0.36);
}

@media (prefers-color-scheme: dark) {
  .site-nav a:hover{background:rgba(30, 41, 59, 0.6)}
  .site-nav .cta{
    background: linear-gradient(135deg, #4A8CFF 0%, #5CA8FF 52%, #86CAFF 100%);
    box-shadow: 0 8px 18px rgba(74, 140, 255, 0.35);
  }
  .site-nav .cta:hover{
    background: linear-gradient(135deg, #5CA8FF 0%, #78B7FF 52%, #9DD4FF 100%);
    box-shadow: 0 12px 24px rgba(92, 168, 255, 0.45);
  }
}
.links { list-style: none; padding: 0; margin: 0; }
.links li { list-style: none; }

/* Bootstrap dropdown styling override */
.site-nav .dropdown-menu {
  border: 1px solid #e8edf3;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.site-nav .dropdown-item {
  color: #323F4B;
  font-weight: 500;
  padding: 10px 16px;
}
.site-nav .dropdown-item:hover {
  background: #f5f7fa;
  color: #0e1e3a;
}

@media (prefers-color-scheme: dark) {
  .site-nav .dropdown-menu {
    border: 1px solid rgba(100, 116, 139, 0.4);
    background:rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  }
  .site-nav .dropdown-item {
    color: #E5E7EB; /* WCAG AA compliant */
  }
  .site-nav .dropdown-item:hover {
    background: rgba(30, 41, 59, 0.8);
    color: #FFFFFF; /* Pure white on hover */
  }
}

/* --- LOGO (SVG wrapper) --- */
.logo{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo span{font-weight:700; letter-spacing:.2px}
.tag{font-size:.85rem; color:var(--muted)}

/* --- UTIL --- */
.kicker{color:#6b7785; font-size:.95rem}
.sep{height:1px; background:#e6eef7; margin:24px 0}
.row{display:flex; gap:12px; flex-wrap:wrap}
.links{display:flex; gap:12px; flex-wrap:wrap}

/* --- HOUR TRACKER PRO PAGE STYLES --- */
.hero{padding:96px 0 72px 0; text-align:center; background:transparent}
.hero-content{max-width:900px; margin:0 auto}
.app-icon-hero{
  width:270px; 
  height:270px; 
  margin:0 auto 40px auto; 
  display:block; 
  background:transparent;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  border-radius: 56px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.eyebrow{font-size:clamp(1.4rem, 3.5vw, 1.8rem); color:var(--blue-90); font-weight:600; text-transform:none; letter-spacing:.02em; margin:0 0 8px 0}
.app-meta{font-size:.9rem; color:#6b7785; font-weight:400; letter-spacing:.02em; margin:0 0 32px 0; text-transform:uppercase}
h1{font-size:clamp(2.5rem, 6vw, 4rem); line-height:1.1; margin:0 0 24px 0; font-weight:700; color:var(--blue-90)}
.lead{font-size:clamp(1.1rem, 2vw, 1.35rem); color:#475569; margin-bottom:36px; max-width:680px; margin-inline:auto; line-height:1.6}

@media (prefers-color-scheme: dark) {
  .app-meta{color: #D1D5DB} /* WCAG AA compliant */
  .lead{color: #E5E7EB} /* WCAG AA compliant - primary text */
}

.cta-buttons{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:14px; text-decoration:none; font-weight:600; transition:all .25s var(--ease-spring)}
.btn.primary{
  background: linear-gradient(135deg, #2A6FEA 0%, #4A8CFF 52%, #78B7FF 100%);
  color:white;
  box-shadow: 0 18px 35px rgba(42, 111, 234, 0.28);
}
.btn.primary:hover{transform: translateY(-2px) scale(1.01); box-shadow: 0 22px 40px rgba(42, 111, 234, 0.36)}
.btn.secondary,
.btn.ghost{
  border:1px solid rgba(255,255,255,0.75);
  color:#0e1e3a;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
}
.btn.secondary:hover,
.btn.ghost:hover{background: rgba(255,255,255,0.8); transform: translateY(-1px)}

@media (prefers-color-scheme: dark) {
  .btn.primary{
    background: linear-gradient(135deg, #4A8CFF 0%, #5CA8FF 52%, #86CAFF 100%);
    box-shadow: 0 18px 35px rgba(74, 140, 255, 0.35);
  }
  .btn.primary:hover{box-shadow: 0 22px 40px rgba(92, 168, 255, 0.45)}
  .btn.secondary,
  .btn.ghost{
    border:1px solid rgba(100, 116, 139, 0.45);
    color:#FFFFFF !important; /* Pure white for better visibility */
    background: rgba(30, 41, 59, 0.8);
  }
  .btn.secondary:hover,
  .btn.ghost:hover{background: rgba(30, 41, 59, 0.9); color: #FFFFFF !important;}
}

section{padding:72px 0}
.section-title{font-size:clamp(1.75rem, 3.5vw, 2.5rem); text-align:center; margin-bottom:56px; font-weight:700}
.section-sub{color:#6b7785; text-align:center; margin-top:-36px; margin-bottom:36px; font-size:1rem}

@media (prefers-color-scheme: dark) {
  .section-title{color: #FFFFFF !important} /* Pure white for maximum contrast */
  .section-sub{color: #D1D5DB} /* WCAG AA compliant */
  .app-icon-hero{
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  }
}

.feature-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:24px}
.feature-card{
  border:1px solid #e6eef7; 
  border-radius:16px; 
  background:white; 
  padding:28px; 
  display:flex; 
  flex-direction:column; 
  gap:12px; 
  transition:transform .2s ease, box-shadow .2s ease
}
.feature-card:hover{transform:translateY(-4px); box-shadow:0 12px 24px rgba(2,22,64,.08)}
.feature-icon{font-size:40px; margin-bottom:4px}
.feature-card h3{font-size:1.25rem; font-weight:600; color:var(--ink); margin:0}
.feature-card p{color:var(--muted); line-height:1.6; margin:0}

@media (prefers-color-scheme: dark) {
  .feature-card{
    border:1px solid rgba(100, 116, 139, 0.4);
    background:rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(20px);
  }
  .feature-card:hover{box-shadow:0 12px 24px rgba(0,0,0,.5)}
  .feature-card h3{color: #FFFFFF !important} /* Pure white for headings */
  .feature-card p{color: #D1D5DB !important} /* WCAG AA compliant body text */
}

.screenshots{background:linear-gradient(180deg, transparent, rgba(167,211,255,.08)); padding-bottom:100px}
.carousel-section{margin-top:56px; margin-bottom:56px}
.carousel-title{font-size:1.5rem; font-weight:600; color:var(--ink); margin-bottom:32px; text-align:center}

@media (prefers-color-scheme: dark) {
  .screenshots{background:linear-gradient(180deg, transparent, rgba(76, 136, 255, 0.08))}
  .carousel-title{color: #FFFFFF !important} /* Pure white for maximum contrast */
}

/* Carousel: use pure Bootstrap defaults (no overrides) */

/* Watch carousel image sizing */
#watchCarousel .carousel-item img{
  width:clamp(90px, 12vw, 150px);
  height:auto;
  margin:0 auto;
  display:block;
  max-width: 150px;
  object-fit: contain;
}

/* iPhone carousel: 3 equal images */
#iPhoneCarousel {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

#iPhoneCarousel .carousel-item img {
  width: clamp(120px, 18vw, 220px);
  height: auto;
  object-fit: contain;
  border-radius: 24px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

#iPhoneCarousel .carousel-control-prev,
#iPhoneCarousel .carousel-control-next {
  background: transparent;
}

#iPhoneCarousel .carousel-control-prev-icon,
#iPhoneCarousel .carousel-control-next-icon {
  filter: invert(1) grayscale(100) contrast(120%);
}

/* Make the bottom indicators the same dark color as chevrons */
#iPhoneCarousel .carousel-indicators [data-bs-target] {
  background-color: #000;
  opacity: 0.45;
}

#iPhoneCarousel .carousel-indicators .active {
  background-color: #000;
  opacity: 0.95;
}

@media (prefers-color-scheme: dark) {
  #iPhoneCarousel .carousel-item img {
    background: #0b1220;
    border-color: rgba(148, 163, 184, 0.45);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.7);
    filter: brightness(1.04) contrast(1.08) saturate(1.02);
  }

  #iPhoneCarousel .carousel-control-prev-icon,
  #iPhoneCarousel .carousel-control-next-icon {
    filter: none;
  }

  #iPhoneCarousel .carousel-indicators [data-bs-target] {
    background-color: #fff;
    opacity: 0.45;
  }

  #iPhoneCarousel .carousel-indicators .active {
    background-color: #fff;
    opacity: 0.9;
  }
}

/* Social links section */
.social { padding: 56px 0 32px 0; }
.social-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 20px; }
.social-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border: 1px solid #e6eef7;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  font-weight: 600;
  color: #0e1e3a;
  box-shadow: 0 8px 18px rgba(2, 22, 64, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.social-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(2, 22, 64, 0.08);
  border-color: #d5e4fb;
}

@media (prefers-color-scheme: dark) {
  .social-card {
    border: 1px solid rgba(100, 116, 139, 0.4);
    background: rgba(15, 23, 42, 0.85);
    color: #FFFFFF; /* Pure white for readability */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
  }
  .social-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
    border-color: rgba(100, 116, 139, 0.6);
  }
}

/* Social button styling - link-style with brand colors */
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.social-linkedin { color: #0A66C2; }
.social-linkedin:hover { background: rgba(10, 102, 194, 0.08); color: #084399; }

.social-facebook { color: #1877F2; }
.social-facebook:hover { background: rgba(24, 119, 242, 0.08); color: #0a5ccc; }

.social-tiktok { color: #000000; }
.social-tiktok:hover { background: rgba(0, 0, 0, 0.08); color: #333333; }

.social-instagram { color: #E1306C; }
.social-instagram:hover { background: rgba(225, 48, 108, 0.08); color: #c91c52; }

.social-twitter { color: #000000; }
.social-twitter:hover { background: rgba(0, 0, 0, 0.08); color: #333333; }

.social-youtube { color: #FF0000; }
.social-youtube:hover { background: rgba(255, 0, 0, 0.08); color: #cc0000; }

.social-reddit { color: #FF4500; }
.social-reddit:hover { background: rgba(255, 69, 0, 0.08); color: #cc3500; }

.social-pinterest { color: #E60023; }
.social-pinterest:hover { background: rgba(230, 0, 35, 0.08); color: #b3001a; }

.social-discord { color: #5865F2; }
.social-discord:hover { background: rgba(88, 101, 242, 0.08); color: #4752cc; }

/* Contact section styling (shared across pages) */
#contact { background: #f7f9fc; }
#contact .container { max-width: 1180px; }
.contact-card {
  background: #fff;
  border: 1px solid #e6eef7;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-card label { font-weight: 600; color: #1f2933; }
.contact-card input,
.contact-card textarea {
  font: inherit;
  border: 1px solid #dfe7f3;
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
}
.contact-card textarea { resize: vertical; }
.contact-card button { align-self: flex-start; }

@media (prefers-color-scheme: dark) {
  #contact { background: #0f1729; }
  .contact-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(100, 116, 139, 0.4);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
  }
  .contact-card label { color: #FFFFFF; } /* Pure white for labels */
  .contact-card input,
  .contact-card textarea {
    border: 1px solid rgba(100, 116, 139, 0.4);
    background: rgba(30, 41, 59, 0.8);
    color: #E5E7EB; /* WCAG AA compliant input text */
  }
  .contact-card input::placeholder,
  .contact-card textarea::placeholder {
    color: #9CA3AF; /* Sufficient contrast for placeholders */
  }
}

footer{padding:52px 0; background:linear-gradient(180deg, rgba(10,29,59,.02), rgba(10,29,59,.12)), var(--white); border-top:1px solid #e6eef7}
.ft{display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between}
.ft small{color:#6b7785}
.footer-links{display:flex; gap:24px; flex-wrap:wrap}
.footer-links a{text-decoration:none; color:var(--muted); font-weight:500; transition:color .2s}
.footer-links a:hover{color:var(--blue-70)}

@media (prefers-color-scheme: dark) {
  footer{
    background:linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.25)), #0a0f1a;
    border-top:1px solid rgba(100, 116, 139, 0.2);
  }
  .ft small{color:#D1D5DB} /* WCAG AA compliant */
  .footer-links a{color: #D1D5DB} /* WCAG AA compliant */
  .footer-links a:hover{color:#86CAFF} /* Brighter hover color */
}

/* --- GLASS UTILITIES --- */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass{background: rgba(255, 255, 255, 0.92)}
  
  @media (prefers-color-scheme: dark) {
    .glass{background: rgba(15, 23, 42, 0.92)}
  }
}

.glass-card{border-radius: 18px;}
.glass-glow{box-shadow: var(--glow-blue)}

/* --- MOTION --- */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *{animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important}
}

@media (max-width: 768px) {
  .hero{padding:64px 0 48px 0}
  .feature-grid{grid-template-columns:1fr}
}

@media (max-width: 899px) {
  .site-nav{flex-direction:column; gap:12px}
}

/* --- TOAST NOTIFICATIONS --- */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--white);
  color: var(--ink);
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  z-index: 1000;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 400px;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.toast-success {
  border-left: 4px solid var(--green);
}

.toast-success .toast-icon {
  background: var(--green);
  color: var(--white);
}

.toast-error {
  border-left: 4px solid #E53935;
}

.toast-error .toast-icon {
  background: #E53935;
  color: var(--white);
}

@media (max-width: 640px) {
  .toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }
}

@media (prefers-color-scheme: dark) {
  .toast {
    background: rgba(15, 23, 42, 0.95);
    color: #E5E7EB; /* WCAG AA compliant text */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(100, 116, 139, 0.4);
  }

  /* ===== COMPREHENSIVE GENERIC ELEMENT FIXES ===== */
  
  /* All headings - critical for visibility */
  h1, .hero-heading, .hero h1 {
    color: #FFFFFF !important;
    opacity: 1;
  }

  h2, .section-heading {
    color: #F9FAFB !important;
  }

  h3 {
    color: #F3F4F6 !important;
  }

  h4, h5, h6 {
    color: #F3F4F6 !important;
  }

  /* Hero descriptions */
  .hero p, .hero-description, .hero-lead {
    color: #E5E7EB !important;
  }

  /* CRITICAL: All paragraph text - main fix for card body text */
  p {
    color: #D1D5DB !important;
  }

  /* All list items */
  li, ul li, ol li {
    color: #D1D5DB !important;
  }

  /* Generic card components - applies to all card variants */
  .card, [class*="card"]:not(.social-card) {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border-color: rgba(100, 116, 139, 0.4) !important;
  }

  .card h2, .card h3, .card h4, 
  .card-title, .card-header {
    color: #F9FAFB !important;
  }

  /* CRITICAL: Card body text - this fixes the "What it is" card issue */
  .card p, 
  .card-description, 
  .card-text, 
  .card-body,
  .card li {
    color: #D1D5DB !important;
    opacity: 1 !important;
  }

  /* Secondary/muted text */
  .text-secondary, .text-muted, small, .muted {
    color: #9CA3AF !important;
  }

  /* Links - better visibility */
  a {
    color: #60A5FA;
  }

  a:hover {
    color: #93C5FD;
  }

  /* Preserve button link colors */
  .btn a, button a {
    color: inherit;
  }

  /* Generic buttons */
  button, .btn {
    border-color: #334155;
  }

  .btn-secondary, .btn-outline {
    color: #F3F4F6 !important;
    border-color: #475569;
    background: rgba(30, 41, 59, 0.6);
  }

  .btn-secondary:hover, .btn-outline:hover {
    background-color: rgba(51, 65, 85, 0.8);
    color: #FFFFFF !important;
  }

  /* Forms */
  input, textarea, select {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(100, 116, 139, 0.4) !important;
    color: #E5E7EB !important;
  }

  input::placeholder, textarea::placeholder {
    color: #9CA3AF !important;
  }

  label {
    color: #F3F4F6 !important;
  }

  /* Tables */
  table {
    border-color: #334155;
  }

  th {
    background-color: #1E293B;
    color: #F3F4F6 !important;
    border-color: #334155;
  }

  td {
    border-color: #334155;
    color: #D1D5DB !important;
  }

  /* Blockquotes */
  blockquote {
    border-left-color: #60A5FA;
    color: #D1D5DB !important;
  }

  /* Code blocks */
  pre, code {
    background-color: #1E293B;
    color: #E5E7EB;
    border-color: #334155;
  }

  /* Horizontal rules */
  hr {
    border-color: #334155;
  }

  /* Strong/bold text */
  strong, b {
    color: #F3F4F6;
  }

  /* Emphasis */
  em, i {
    color: #E5E7EB;
  }

  /* ============================================
     CRITICAL FIXES FOR BACKGROUNDS AND COMPONENTS
     ============================================ */
  
  /* Ensure all sections have dark backgrounds */
  section,
  .section,
  main {
    background-color: #0F172A !important; /* Very dark slate */
  }
  
  /* Override any light section backgrounds */
  section[style*="background"],
  .section[style*="background"] {
    background-color: #0F172A !important;
  }
  
  /* Footer - dark background */
  footer,
  .footer {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.8), rgba(2, 6, 23, 1)) !important;
    border-top: 1px solid #1E293B !important;
  }
  
  footer p,
  footer a,
  footer li {
    color: #94A3B8 !important; /* slate-400 */
  }
  
  footer h3,
  footer h4 {
    color: #F1F5F9 !important; /* slate-100 */
  }
  
  footer a:hover {
    color: #E2E8F0 !important; /* slate-200 */
  }
  
  /* Badges and pills - dark backgrounds with light text */
  .badge,
  .pill,
  .tag,
  [class*="badge"],
  [class*="pill"] {
    background-color: #334155 !important; /* slate-700 */
    color: #F3F4F6 !important; /* light text */
    border-color: #475569 !important;
  }
  
  /* Fix secondary/outline buttons on dark backgrounds */
  .btn.secondary,
  .btn-secondary,
  .btn.outline,
  .btn-outline,
  button.secondary,
  button[class*="outline"] {
    background-color: transparent !important;
    color: #F9FAFB !important; /* bright text for visibility */
    border: 2px solid #64748B !important; /* visible border */
  }
  
  .btn.secondary:hover,
  .btn-secondary:hover,
  .btn.outline:hover,
  .btn-outline:hover {
    background-color: #1E293B !important; /* dark hover bg */
    border-color: #94A3B8 !important; /* lighter border on hover */
    color: #FFFFFF !important;
  }
  
  /* Ensure hero headings are maximum brightness */
  .hero h1,
  h1.hero-heading,
  .hero-title {
    color: #FFFFFF !important;
    opacity: 1 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .hero p,
  .hero .lead,
  .hero-description {
    color: #D1D5DB !important; /* high contrast */
    opacity: 1 !important;
  }
  
  /* App cards and feature cards - ensure dark backgrounds */
  .app-card,
  .feature-card,
  [class*="app-card"],
  [class*="feature-card"] {
    background-color: #1E293B !important; /* slate-800 */
    border-color: #334155 !important; /* slate-700 */
  }
  
  /* Override any inline light backgrounds */
  section[style*="background"],
  [style*="background: #fff"],
  [style*="background: #FFF"],
  [style*="background: white"],
  [style*="background: #f"],
  [style*="background-color: #fff"],
  [style*="background-color: white"] {
    background: #0F172A !important;
  }
  
  /* Fix any lingering light backgrounds on containers */
  .container[style*="background"],
  div[style*="background: #f"] {
    background-color: transparent !important;
  }
  /* ============================================
     SOCIAL MEDIA LINKS - Dark Mode Fixes
     ============================================ */
  
  /* Fix TikTok and Twitter/X visibility - they use black text which is invisible in dark mode */
  .social-tiktok { 
    color: #F3F4F6 !important; /* bright light gray */
  }
  .social-tiktok:hover { 
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
  }

  .social-twitter { 
    color: #E5E7EB !important; /* light gray */
  }
  .social-twitter:hover { 
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
  }
  
  /* Ensure all social buttons have visible hover states in dark mode */
  .social-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
  }