/* ════════════════════════════════════════════════════════════════════
   FlashUpload.cloud — NUCLEAR FIXED v7.2
   Every rule surgically crafted to override app.css conflicts
   v7.2: Fixed white-on-white feature card text + section title gradient
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  --fu-red:        #d56062;
  --fu-red-dark:   #b83d3f;
  --fu-blue:       #105B81;
  --fu-blue-dark:  #0d4d6e;
  --fu-ink:        #0a1628;
  --fu-ink-mid:    #3d5a72;
  --fu-surface:    #f4f8fc;
}

/* ══════ GLOBAL ══════ */
body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  background-color: var(--fu-surface) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #e8f2fa; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--fu-blue), var(--fu-red));
  border-radius: 99px;
}

/* ══════ NAVBAR — Glassmorphism Premium ══════ */
.nav-bar {
  background: rgba(255,255,255,0.82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  border-bottom: 1px solid rgba(16,91,129,0.06) !important;
  transition: background 0.35s ease, box-shadow 0.35s ease !important;
}
.nav-bar.scrolling {
  background: rgba(255,255,255,0.95) !important;
  -webkit-box-shadow: 0 4px 30px rgba(16,91,129,0.10) !important;
  box-shadow: 0 4px 30px rgba(16,91,129,0.10) !important;
}
.nav-bar .link .link-title span {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  color: var(--fu-ink) !important;
  transition: color 0.25s ease !important;
}
.nav-bar .link:hover .link-title span {
  color: var(--fu-red) !important;
}
.nav-bar .drop-down .drop-down-btn span {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
}

/* ══════════════════════════════════════
   HERO — Light Mode (default) with gradient
══════════════════════════════════════ */
.header {
  background: linear-gradient(140deg, #0e3a5c 0%, #105B81 45%, #1a7ab5 100%) !important;
  background-color: #105B81 !important;
}

/* Dim the original wave background image */
.header .wrapper .header-bg {
  opacity: 0.08 !important;
}

/* Animated orb — top right */
.header .wrapper::before {
  content: '';
  position: absolute;
  top: -30%; right: 5%;
  width: 600px; height: 600px;
  background: radial-gradient(circle,
    rgba(213,96,98,0.16) 0%,
    rgba(16,91,129,0.12) 40%,
    transparent 70%);
  border-radius: 50%;
  animation: orbPulse 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes orbPulse {
  0%,100% { transform: scale(1); opacity: 0.7; }
  50%     { transform: scale(1.2) translateY(-20px); opacity: 1; }
}

/* Animated orb — bottom left */
.header .wrapper::after {
  content: '';
  position: absolute;
  bottom: -15%; left: -8%;
  width: 400px; height: 400px;
  background: radial-gradient(circle,
    rgba(16,91,129,0.22) 0%,
    transparent 70%);
  border-radius: 50%;
  animation: orbPulse 11s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}

.header .wrapper .wrapper-content { position: relative; z-index: 2; }

/* ── FIX BUG #2: header-title uses background-clip:text ── */
.header .header-title {
  font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em !important;
  /* Kill the gradient-text from app.css */
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 2px 30px rgba(213,96,98,0.22);
}

.header .header-text {
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.72) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.72) !important;
  line-height: 1.75 !important;
}

/* Hero floating image with double glow */
.header .header-img img {
  animation: heroFloat 6s ease-in-out infinite;
  filter:
    drop-shadow(0 20px 50px rgba(213,96,98,0.28))
    drop-shadow(0 6px 16px rgba(16,91,129,0.35)) !important;
}
@keyframes heroFloat {
  0%,100% { transform: translateY(0px) rotate(-0.5deg); }
  50%     { transform: translateY(-20px) rotate(0.5deg); }
}

/* ══════════════════════════════════════
   BUTTONS (fixes BUG #1: box-shadow:none!important)
   Using .btn.btn-X for higher specificity
══════════════════════════════════════ */
.btn {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  border-radius: 12px !important;
  border: none !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.32s cubic-bezier(.17,.67,.35,1.3),
              box-shadow 0.32s ease !important;
}

/* Shimmer sweep on hover */
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn:hover::after {
  left: 160%;
  transition: left 0.55s ease;
}

/* FIX BUG #1: .btn.btn-primary beats .btn specificity */
.btn.btn-primary {
  background: linear-gradient(135deg, #e07375 0%, var(--fu-red) 55%, var(--fu-red-dark) 100%) !important;
  background-color: var(--fu-red) !important;
  -webkit-box-shadow: 0 6px 22px rgba(213,96,98,0.40) !important;
  box-shadow: 0 6px 22px rgba(213,96,98,0.40) !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  transform: translateY(-3px) scale(1.03) !important;
  -webkit-box-shadow: 0 14px 38px rgba(213,96,98,0.55) !important;
  box-shadow: 0 14px 38px rgba(213,96,98,0.55) !important;
  opacity: 1 !important;
}

.btn.btn-secondary {
  background: linear-gradient(135deg, #1c82b8 0%, var(--fu-blue) 55%, var(--fu-blue-dark) 100%) !important;
  background-color: var(--fu-blue) !important;
  color: #fff !important;
  -webkit-box-shadow: 0 6px 22px rgba(16,91,129,0.35) !important;
  box-shadow: 0 6px 22px rgba(16,91,129,0.35) !important;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
  transform: translateY(-3px) scale(1.03) !important;
  -webkit-box-shadow: 0 14px 38px rgba(16,91,129,0.50) !important;
  box-shadow: 0 14px 38px rgba(16,91,129,0.50) !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════
   FEATURE CARDS SECTION — Light mode (soft gradient)
   (fixes BUG #3 + #6 + #7)
══════════════════════════════════════ */
.section.section-start {
  background: linear-gradient(165deg, #e8f4fc 0%, #f0f7fd 60%, #e4f0fa 100%) !important;
}

/* Section title — gradient text on light bg */
.section.section-start .section-title {
  background: linear-gradient(to right, var(--fu-blue) 0%, var(--fu-red) 50%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.section.section-start .section-title::after {
  background-image: linear-gradient(90deg, var(--fu-blue), var(--fu-red)) !important;
  background-color: var(--fu-blue) !important;
}

/* Section text */
.section.section-start > .container .section-text.text-muted,
.section.section-start > .container > .section-inner > .row > .col-12 > .section-header .text-muted {
  color: #4a6b80 !important;
  -webkit-text-fill-color: #4a6b80 !important;
}
.section.section-start .section-header .section-text {
  color: #3d5a72 !important;
  -webkit-text-fill-color: #3d5a72 !important;
}
.section.section-start .section-header .lead {
  color: #4a6b80 !important;
  -webkit-text-fill-color: #4a6b80 !important;
}

/* Feature cards on dark bg */
.feature {
  background-color: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  -webkit-box-shadow: 0 2px 8px rgba(10,22,40,0.08), 0 10px 36px rgba(16,91,129,0.12) !important;
  box-shadow: 0 2px 8px rgba(10,22,40,0.08), 0 10px 36px rgba(16,91,129,0.12) !important;
  padding: 30px 25px !important;
  transition: transform 0.35s cubic-bezier(.17,.67,.35,1.3),
              box-shadow 0.35s ease !important;
}

/* FIX BUG #6: Use border-top instead of ::before to avoid conflict with feature-icon::before */
.feature {
  border-top: 4px solid var(--fu-blue) !important;
}
.feature.feature-secondary {
  border-top: 4px solid var(--fu-red) !important;
}

.feature:hover {
  transform: translateY(-14px) scale(1.02) !important;
  -webkit-box-shadow: 0 10px 24px rgba(10,22,40,0.12), 0 30px 64px rgba(16,91,129,0.22) !important;
  box-shadow: 0 10px 24px rgba(10,22,40,0.12), 0 30px 64px rgba(16,91,129,0.22) !important;
}

/* Feature icon — keep app.css ::before (the colored circle) */
.feature .feature-icon {
  margin-bottom: 14px !important;
  transition: transform 0.35s cubic-bezier(.17,.67,.35,1.3);
}
.feature:hover .feature-icon {
  transform: scale(1.1) rotate(6deg);
}

.feature .feature-title {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--fu-ink) !important;
  -webkit-text-fill-color: var(--fu-ink) !important;
  margin-bottom: 10px !important;
}

/* FIX v7.2 BUG A: Feature card text was invisible (white on white) */
/* Triple-specificity to beat .section.section-start .text-muted */
.section.section-start .feature .feature-text,
.section.section-start .feature .feature-text.text-muted,
.section.section-start .feature p.text-muted {
  color: #4a6b80 !important;
  -webkit-text-fill-color: #4a6b80 !important;
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
}
.feature .feature-text {
  font-size: 0.88rem !important;
  color: #4a6b80 !important;
  -webkit-text-fill-color: #4a6b80 !important;
  line-height: 1.65 !important;
}

/* ══════════════════════════════════════
   STEPS SECTION
══════════════════════════════════════ */
.step {
  background-color: #fff !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(16,91,129,0.08) !important;
  -webkit-box-shadow: 0 2px 8px rgba(10,22,40,0.06), 0 8px 32px rgba(16,91,129,0.09) !important;
  box-shadow: 0 2px 8px rgba(10,22,40,0.06), 0 8px 32px rgba(16,91,129,0.09) !important;
  padding: 2.25rem 1.75rem !important;
  transition: transform 0.35s cubic-bezier(.17,.67,.35,1.3),
              box-shadow 0.35s ease !important;
}
.step.step-primary   { border-top: 4px solid var(--fu-red) !important; }
.step.step-secondary { border-top: 4px solid var(--fu-blue) !important; }

.step:hover {
  transform: translateY(-12px) scale(1.02) !important;
  -webkit-box-shadow: 0 10px 24px rgba(10,22,40,0.12), 0 28px 60px rgba(16,91,129,0.20) !important;
  box-shadow: 0 10px 24px rgba(10,22,40,0.12), 0 28px 60px rgba(16,91,129,0.20) !important;
}

/* Gradient number */
.step .step-number {
  display: inline-block !important;
  font-size: 3.8rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--fu-blue) 30%, var(--fu-red) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 0.85rem !important;
}

.step .step-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--fu-ink) !important;
}
.step .step-text {
  color: #3d5a72 !important;
  -webkit-text-fill-color: #3d5a72 !important;
  font-size: 0.89rem !important;
  line-height: 1.65 !important;
}

/* ══════════════════════════════════════
   SECTION TITLES (normal/light bg)
   FIX v7.2: gradient text was half-transparent on some letters
══════════════════════════════════════ */
.section:not(.section-start):not(.section-bg) .section-title {
  background: linear-gradient(to right, var(--fu-blue) 0%, var(--fu-red) 50%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.section:not(.section-start):not(.section-bg) .section-title::after {
  background-image: linear-gradient(90deg, var(--fu-blue), var(--fu-red)) !important;
  background-color: var(--fu-blue) !important;
}

/* FAQ section (section-bg) — same gradient title treatment */
.section.section-bg .section-title {
  background: linear-gradient(to right, var(--fu-blue) 0%, var(--fu-red) 50%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ══════════════════════════════════════
   UPLOAD BOX
══════════════════════════════════════ */
.uploadbox-drag {
  border-radius: 22px !important;
  background: linear-gradient(145deg, #f0f8ff 0%, #fff8f8 100%) !important;
  background-color: #f0f8ff !important;
  border: 2px dashed rgba(16,91,129,0.22) !important;
  transition: all 0.4s ease !important;
  cursor: pointer;
}
.uploadbox-drag:hover {
  border-color: var(--fu-red) !important;
  background: linear-gradient(145deg, #fff3f3 0%, #f0f8ff 100%) !important;
  -webkit-box-shadow: 0 0 0 5px rgba(213,96,98,0.07), 0 8px 32px rgba(213,96,98,0.12) !important;
  box-shadow: 0 0 0 5px rgba(213,96,98,0.07), 0 8px 32px rgba(213,96,98,0.12) !important;
  transform: scale(1.01);
}

.uploadbox-drag-inner i {
  font-size: 3rem !important;
  color: var(--fu-blue) !important;
  filter: drop-shadow(0 4px 12px rgba(16,91,129,0.28));
  display: block !important;
  margin-bottom: 1rem !important;
  animation: cloudBounce 2.5s ease-in-out infinite;
}
@keyframes cloudBounce {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-8px) scale(1.06); }
}

.uploadbox-drag-inner h3 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  color: var(--fu-ink) !important;
}

/* ══════════════════════════════════════
   ACCORDION / FAQ (fixes BUG #5)
   Must use .accordion-custom prefix
══════════════════════════════════════ */
.accordion-custom .accordion-item {
  background: transparent !important;
  border: none !important;
  margin-bottom: 14px !important;
}

.accordion-custom .accordion-button {
  border-radius: 16px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  -webkit-box-shadow: 0 2px 12px rgba(16,91,129,0.08) !important;
  box-shadow: 0 2px 12px rgba(16,91,129,0.08) !important;
}

.accordion-custom .accordion-button:not(.collapsed) {
  background-color: var(--fu-blue) !important;
  color: #fff !important;
  -webkit-box-shadow: 0 6px 24px rgba(16,91,129,0.20) !important;
  box-shadow: 0 6px 24px rgba(16,91,129,0.20) !important;
}

.accordion-custom .accordion-body {
  border-radius: 16px !important;
  -webkit-box-shadow: 0 2px 12px rgba(16,91,129,0.06) !important;
  box-shadow: 0 2px 12px rgba(16,91,129,0.06) !important;
}

/* ══════════════════════════════════════
   PAYMENT BRANDS
══════════════════════════════════════ */
.brand {
  background-color: #fff !important;
  border-radius: 16px !important;
  -webkit-box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.brand:hover {
  transform: translateY(-6px) scale(1.05) !important;
  -webkit-box-shadow: 0 12px 30px rgba(16,91,129,0.14) !important;
  box-shadow: 0 12px 30px rgba(16,91,129,0.14) !important;
}
.brand img {
  filter: grayscale(55%) opacity(0.60) !important;
  transition: filter 0.3s ease !important;
}
.brand:hover img {
  filter: grayscale(0%) opacity(1) !important;
}


/* ══════════════════════════════════════
   FOOTER — Nuclear v7.3
══════════════════════════════════════ */
.footer .footer-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 1rem !important;
}
.footer .footer-link {
  transition: color 0.22s ease, padding-left 0.22s ease, opacity 0.22s ease !important;
  display: inline-block !important;
  opacity: 0.8;
}
.footer .footer-link:hover {
  padding-left: 5px;
  opacity: 1;
}
.footer .footer-copyright {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.01em !important;
}

/* ══════════════════════════════════════
   PRELOADER
══════════════════════════════════════ */
.preloader {
  background: linear-gradient(135deg, #0a1628, var(--fu-blue)) !important;
}

/* ══════════════════════════════════════
   SMOOTH SCROLL + SELECTION
══════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}
::selection {
  background: rgba(213,96,98,0.25);
  color: var(--fu-ink);
}

/* ══════════════════════════════════════
   ACCESSIBILITY — focus-visible rings
══════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--fu-blue) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(16,91,129,0.18) !important;
}

/* ══════════════════════════════════════
   RESPONSIVE — TABLET (max 991px)
══════════════════════════════════════ */
@media (max-width: 991.98px) {
  .header .header-title {
    font-size: clamp(1.8rem, 5vw, 2.6rem) !important;
    text-align: center !important;
  }
  .header .header-text {
    text-align: center !important;
    font-size: 0.95rem !important;
  }
  .header .wrapper::before {
    width: 350px; height: 350px;
    top: -10%; right: -5%;
  }
  .header .wrapper::after {
    width: 250px; height: 250px;
  }
  .feature {
    padding: 22px 18px !important;
  }
  .step {
    padding: 1.75rem 1.25rem !important;
  }
  .step .step-number {
    font-size: 3rem !important;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE (max 575px)
══════════════════════════════════════ */
@media (max-width: 575.98px) {
  .header .header-title {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }
  .header .header-text {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }
  .header .wrapper::before {
    width: 220px; height: 220px;
    top: -5%; right: -10%;
    opacity: 0.5;
  }
  .header .wrapper::after {
    width: 160px; height: 160px;
    opacity: 0.4;
  }
  .header .header-img img {
    animation: none !important;
  }
  .feature {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  .feature:hover {
    transform: translateY(-6px) scale(1.01) !important;
  }
  .step {
    padding: 1.5rem 1rem !important;
    border-radius: 16px !important;
  }
  .step:hover {
    transform: translateY(-6px) scale(1.01) !important;
  }
  .step .step-number {
    font-size: 2.6rem !important;
  }
  .btn {
    border-radius: 10px !important;
    font-size: 0.9rem !important;
  }
  .uploadbox-drag {
    border-radius: 16px !important;
  }
  .section-title {
    font-size: 1.5rem !important;
  }
}

/* ══════════════════════════════════════
   DARK MODE — prefers-color-scheme: dark
   + .dark-mode class for manual toggle
══════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --fu-surface: #0d1b2a;
    --fu-ink: #e8f0f8;
    --fu-ink-mid: #a8c4d8;
  }
  body {
    background-color: #0d1b2a !important;
    color: #e0e8f0 !important;
  }

  /* Navbar */
  .nav-bar {
    background-color: #0f1f30 !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
  }
  .nav-bar .logo img { filter: brightness(1.8) !important; }
  .nav-bar .link .link-title span,
  .nav-bar .drop-down .drop-down-btn span { color: #c8dae8 !important; }

  /* Feature cards on dark bg — keep white cards */
  .feature {
    background-color: #132236 !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .feature .feature-title {
    color: #e8f0f8 !important;
    -webkit-text-fill-color: #e8f0f8 !important;
  }
  .section.section-start .feature .feature-text,
  .section.section-start .feature .feature-text.text-muted,
  .section.section-start .feature p.text-muted,
  .feature .feature-text {
    color: #8baec6 !important;
    -webkit-text-fill-color: #8baec6 !important;
  }

  /* Steps */
  .step {
    background-color: #132236 !important;
    border-color: rgba(255,255,255,0.06) !important;
  }
  .step .step-title { color: #e8f0f8 !important; }
  .step .step-text {
    color: #8baec6 !important;
    -webkit-text-fill-color: #8baec6 !important;
  }

  /* Section titles on light bg */
  .section:not(.section-start):not(.section-bg) .section-title {
    background: linear-gradient(to right, #4db8e8 0%, #e07375 50%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
  .section:not(.section-start) .section-text.text-muted,
  .section:not(.section-start) .lead.text-muted {
    color: #8baec6 !important;
  }

  /* Upload box */
  .uploadbox-drag {
    background: linear-gradient(145deg, #132236 0%, #1a2d42 100%) !important;
    border-color: rgba(255,255,255,0.12) !important;
  }
  .uploadbox-drag-inner h3 { color: #e8f0f8 !important; }

  /* FAQ */
  .accordion-custom .accordion-button {
    background-color: #132236 !important;
    color: #c8dae8 !important;
  }
  .accordion-custom .accordion-body {
    background-color: #0f1f30 !important;
    color: #a8c4d8 !important;
  }

  /* Brands */
  .brand {
    background-color: #132236 !important;
  }
  .brand img { filter: grayscale(40%) brightness(1.3) opacity(0.7) !important; }
  .brand:hover img { filter: grayscale(0%) brightness(1.1) opacity(1) !important; }

  /* Footer */
  .footer .footer-title { color: #e8f0f8 !important; }

  /* Scrollbar */
  ::-webkit-scrollbar-track { background: #0d1b2a; }

  /* Selection */
  ::selection {
    background: rgba(213,96,98,0.35);
    color: #fff;
  }
}

/* ══════════════════════════════════════
   PRINT — clean output
══════════════════════════════════════ */
@media print {
  .nav-bar, .footer, .preloader, .uploadbox-drag { display: none !important; }
  .header { background: #fff !important; }
  .header .header-title {
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
  }
  body { background: #fff !important; }
}

/* ══════════════════════════════════════
   DARK MODE TOGGLE BUTTON
══════════════════════════════════════ */
.dark-mode-toggle {
  background: none !important;
  border: 1.5px solid rgba(16,91,129,0.15) !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin-right: 10px !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
  color: var(--fu-blue) !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
.dark-mode-toggle:hover {
  background: rgba(16,91,129,0.08) !important;
  border-color: var(--fu-blue) !important;
  transform: rotate(20deg) scale(1.1) !important;
}

/* ══════════════════════════════════════
   DARK MODE — .dark-mode class (toggle)
   Mirrors prefers-color-scheme: dark rules
══════════════════════════════════════ */
.dark-mode body,
html.dark-mode body {
  background-color: #0d1b2a !important;
  color: #e0e8f0 !important;
}

/* Navbar */
.dark-mode .nav-bar {
  background: rgba(15,31,48,0.88) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
.dark-mode .nav-bar.scrolling {
  background: rgba(15,31,48,0.96) !important;
}
.dark-mode .nav-bar .link .link-title span,
.dark-mode .nav-bar .drop-down .drop-down-btn span { color: #c8dae8 !important; }
.dark-mode .nav-bar .link:hover .link-title span { color: #e07375 !important; }
.dark-mode .dark-mode-toggle {
  color: #f0c040 !important;
  border-color: rgba(240,192,64,0.3) !important;
}
.dark-mode .dark-mode-toggle:hover {
  background: rgba(240,192,64,0.12) !important;
}

/* Hero — Dark mode override */
.dark-mode .header {
  background: linear-gradient(140deg, #0a1628 0%, #0e2d4a 45%, #0d3f5e 100%) !important;
}
.dark-mode .header .wrapper .header-bg {
  opacity: 0.04 !important;
}

/* Features section — Dark mode override */
.dark-mode .section.section-start {
  background: linear-gradient(165deg, #0f2035 0%, #163655 60%, #0f2035 100%) !important;
}
.dark-mode .section.section-start .section-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}
.dark-mode .section.section-start .section-title::after {
  background-image: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.2)) !important;
}
.dark-mode .section.section-start > .container .section-text.text-muted,
.dark-mode .section.section-start .section-header .section-text,
.dark-mode .section.section-start .section-header .lead {
  color: rgba(255,255,255,0.60) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.60) !important;
}

/* Feature cards */
.dark-mode .feature {
  background-color: #132236 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.dark-mode .feature .feature-title {
  color: #e8f0f8 !important;
  -webkit-text-fill-color: #e8f0f8 !important;
}
.dark-mode .section.section-start .feature .feature-text,
.dark-mode .section.section-start .feature .feature-text.text-muted,
.dark-mode .section.section-start .feature p.text-muted,
.dark-mode .feature .feature-text {
  color: #8baec6 !important;
  -webkit-text-fill-color: #8baec6 !important;
}

/* Steps */
.dark-mode .step {
  background-color: #132236 !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.dark-mode .step .step-title { color: #e8f0f8 !important; }
.dark-mode .step .step-text {
  color: #8baec6 !important;
  -webkit-text-fill-color: #8baec6 !important;
}

/* Section titles on light bg */
.dark-mode .section:not(.section-start):not(.section-bg) .section-title {
  background: linear-gradient(to right, #4db8e8 0%, #e07375 50%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.dark-mode .section:not(.section-start) .section-text.text-muted,
.dark-mode .section:not(.section-start) .lead.text-muted {
  color: #8baec6 !important;
}

/* Upload box */
.dark-mode .uploadbox-drag {
  background: linear-gradient(145deg, #132236 0%, #1a2d42 100%) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.dark-mode .uploadbox-drag-inner h3 { color: #e8f0f8 !important; }
.dark-mode .uploadbox-drag-inner .text-muted { color: #8baec6 !important; }

/* FAQ */
.dark-mode .accordion-custom .accordion-button {
  background-color: #132236 !important;
  color: #c8dae8 !important;
}
.dark-mode .accordion-custom .accordion-body {
  background-color: #0f1f30 !important;
  color: #a8c4d8 !important;
}

/* FAQ section bg */
.dark-mode .section.section-bg {
  background-color: #0a1420 !important;
}
.dark-mode .section.section-bg .section-title {
  background: linear-gradient(to right, #4db8e8 0%, #e07375 50%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Brands */
.dark-mode .brand {
  background-color: #132236 !important;
}
.dark-mode .brand img { filter: grayscale(40%) brightness(1.3) opacity(0.7) !important; }
.dark-mode .brand:hover img { filter: grayscale(0%) brightness(1.1) opacity(1) !important; }

/* Footer */
.dark-mode .footer .footer-title { color: #e8f0f8 !important; }

/* Scrollbar */
.dark-mode ::-webkit-scrollbar-track { background: #0d1b2a; }

/* Selection */
.dark-mode ::selection {
  background: rgba(213,96,98,0.35);
  color: #fff;
}

/* Mobile menu */
.dark-mode .nav-bar-links {
  background-color: #0f1f30 !important;
}
.dark-mode .nav-bar .overlay {
  background-color: rgba(0,0,0,0.6) !important;
}
.dark-mode .drop-down-menu {
  background-color: #132236 !important;
}
.dark-mode .drop-down-item span { color: #c8dae8 !important; }