/* ================================================================
   VSAA — COMPLETE MOBILE AUDIT FIX v3
   Covers: Theme flash, hero, service cards, typography, spacing,
           nav, floating buttons, animations, trust bar
   Desktop (> 820px) is UNTOUCHED
================================================================ */

/* ════════════════════════════════════════════════════════════════
   0. CRITICAL: Base reset — prevents ALL horizontal scroll
════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box !important; }
html {
  overflow-x: hidden !important;
  /* Dark bg set here prevents white flash even before JS runs */
  background-color: #070F1E;
}
html[data-theme="light"] { background-color: #F7F8FB; }
body { overflow-x: hidden !important; max-width: 100vw !important; }
img { max-width: 100% !important; }

/* ════════════════════════════════════════════════════════════════
   1. DARK THEME: Force consistent dark backgrounds
   Prevents any section from showing light bg in dark mode
════════════════════════════════════════════════════════════════ */
[data-theme="dark"] body { background: #070F1E !important; }
[data-theme="dark"] .hero-section { background: linear-gradient(135deg, #050D1A 0%, #091428 40%, #122549 100%) !important; }
[data-theme="dark"] section:not(.cta-section) { background-color: var(--bg-primary, #070F1E); }

/* ════════════════════════════════════════════════════════════════
   2. TRUST BAR — Smooth horizontal scroll, no wrap, no duplicates
════════════════════════════════════════════════════════════════ */
.trust-bar-section { overflow: hidden !important; }
.trust-scroll-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  gap: 2.5rem !important;
  animation: trustScroll 28s linear infinite !important;
}
.trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   3. HERO LOGO — Perfectly inside circles, no overflow into text
════════════════════════════════════════════════════════════════ */
.hero-logo-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.hero-logo-wrap {
  position: relative !important;
  z-index: 4 !important;
}
.hero-deco-1, .hero-deco-2 {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.hero-content { position: relative !important; z-index: 5 !important; }

/* ════════════════════════════════════════════════════════════════
   4. HERO SECTION — Full mobile layout
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .hero-section {
    min-height: auto !important;
    padding-top: 64px !important; /* must clear fixed navbar height */
    overflow-x: hidden !important;
  }
  .hero-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 2rem 1.25rem 3rem !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Logo ABOVE content */
  .hero-logo-container {
    order: 1 !important;
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }
  .hero-logo-wrap {
    width: 90px !important;
    height: 90px !important;
  }
  .hero-logo-image-v2 {
    width: 86px !important;
    height: 86px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }
  .hero-deco-1 { width: 120px !important; height: 120px !important; }
  .hero-deco-2 { width: 148px !important; height: 148px !important; }
  .logo-orbit-ring { inset: -8px !important; }

  /* Text content BELOW logo */
  .hero-content {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Badge */
  .hero-badge {
    margin: 0 auto 1.25rem !important;
    font-size: 0.6rem !important;
    letter-spacing: 2.5px !important;
    padding: 0.38rem 0.9rem !important;
    display: inline-flex !important;
  }

  /* Title */
  .hero-title {
    font-size: clamp(2.2rem, 9vw, 3rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.5rem !important;
    word-break: break-word !important;
  }

  /* Tagline */
  .hero-tagline {
    font-size: 0.6rem !important;
    letter-spacing: 4px !important;
    margin: 0.6rem 0 1rem !important;
  }

  /* Subtitle — "Your Trusted Partner in Finance, Tax & Compliance" */
  .hero-subtitle {
    font-size: clamp(1.1rem, 4vw, 1.35rem) !important;
    line-height: 1.45 !important;
    margin-bottom: 1rem !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* Description */
  .hero-description {
    font-size: 0.92rem !important;
    line-height: 1.75 !important;
    margin: 0 auto 1.5rem !important;
    max-width: 100% !important;
    word-break: normal !important;
  }

  /* Buttons — full width, stacked */
  .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    margin-bottom: 1.75rem !important;
  }
  .hero-buttons .btn,
  .hero-buttons a.btn {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.95rem 1.5rem !important;
    font-size: 0.95rem !important;
    min-height: 50px !important;
    border-radius: 12px !important;
  }

  /* Trust badges below buttons */
  .hero-trust-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem 1rem !important;
  }
  .trust-badge-item {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }

  /* Hide decorative elements that slow mobile */
  .hero-particles, .hero-bg-wave, .hero-grid-lines { display: none !important; }
}

@media (max-width: 400px) {
  .hero-logo-container { width: 180px !important; height: 180px !important; }
  .hero-logo-wrap { width: 90px !important; height: 90px !important; }
  .hero-logo-image-v2 { width: 86px !important; height: 86px !important; }
  .hero-deco-1 { width: 125px !important; height: 125px !important; }
  .hero-deco-2 { width: 175px !important; height: 175px !important; }
  .hero-title { font-size: clamp(1.9rem, 9vw, 2.4rem) !important; }
}

/* ════════════════════════════════════════════════════════════════
   5. SECTIONS — Consistent spacing
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  section, .section { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .container, .container-sm {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    max-width: 100% !important;
  }
  .section-heading { margin-bottom: 2rem !important; }
  .section-heading h2 {
    font-size: clamp(1.5rem, 6vw, 2.1rem) !important;
    line-height: 1.2 !important;
    word-break: normal !important;
  }
  .section-heading p { font-size: 0.9rem !important; line-height: 1.7 !important; }
  .section-label { font-size: 0.6rem !important; letter-spacing: 3px !important; }
}

/* ════════════════════════════════════════════════════════════════
   6. SERVICE CARDS — Column layout, no row wrapping issues
   Problem: 3-col on desktop fine, but mobile row layout was broken
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* 2 columns at 820-480px */
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    padding: 0 0.25rem !important;
  }
  .service-card {
    padding: 1.35rem 1.1rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-height: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    transition: box-shadow 0.18s ease !important;
    -webkit-tap-highlight-color: rgba(201,166,70,0.08) !important;
  }
  .service-card:hover { transform: none !important; }
  .service-card:active {
    background: rgba(201,166,70,0.06) !important;
    box-shadow: 0 0 0 2px rgba(201,166,70,0.25) !important;
  }
  .service-icon {
    width: 46px !important; height: 46px !important;
    font-size: 1.3rem !important;
    margin-bottom: 0.75rem !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
  }
  .service-card h3 {
    font-size: 0.88rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.4rem !important;
    word-break: normal !important;
  }
  .service-card p {
    font-size: 0.76rem !important;
    line-height: 1.65 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  /* ── SERVICE ARROW: Always visible on mobile as a gold tap button ── */
  .service-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: #0f1c2e !important;
    background: linear-gradient(135deg, #C9A646, #E5C97A) !important;
    border: none !important;
    border-top: none !important;
    border-radius: 9px !important;
    padding: 0.7rem 1rem !important;
    padding-top: 0.7rem !important;
    margin-top: 1rem !important;
    min-height: 44px !important;
    width: 100% !important;
    text-shadow: none !important;
    box-shadow: 0 2px 10px rgba(201,166,70,0.35) !important;
    animation: ctaPulse 2.5s ease-in-out infinite !important;
    cursor: pointer !important;
  }
  .service-arrow .arrow-icon {
    animation: arrowSlide 1.4s ease-in-out infinite !important;
  }
  @keyframes ctaPulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(201,166,70,0.35); }
    50%       { box-shadow: 0 4px 20px rgba(201,166,70,0.65); }
  }
  @keyframes arrowSlide {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(5px); }
  }
}
@media (max-width: 480px) {
  /* 1 column at very small screens */
  .services-grid { grid-template-columns: 1fr !important; }
  .service-card {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.85rem !important;
  }
  .service-icon { margin-bottom: 0 !important; margin-top: 2px !important; }
  .service-card-text { flex: 1 !important; min-width: 0 !important; }
}

/* ════════════════════════════════════════════════════════════════
   7. SOFTWARE (SW3) — Single column, icons aligned
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .software-grid, .sw3-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .software-card, .sw3-card {
    padding: 1.5rem 1.25rem !important;
  }
  .sw3-card:hover, .software-card:hover { transform: none !important; }
  .sw3-title { font-size: 1rem !important; }
  .sw3-desc { font-size: 0.82rem !important; line-height: 1.65 !important; }
  .sw3-features li {
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    padding-left: 1.4rem !important;
  }
}

/* SW3 STRIP — "SECURE SYSTEM, CLOUD READY" 3-column grid */
.sw3-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.75rem !important;
  justify-items: center !important;
  margin-top: 2rem !important;
}
.sw3-strip-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.4rem !important;
  text-align: center !important;
  padding: 0.75rem 0.4rem !important;
}
.sw3-strip-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  margin-bottom: 0.2rem !important;
}
.sw3-strip-item span:not(.sw3-strip-icon) {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  line-height: 1.3 !important;
  word-break: normal !important;
}
@media (max-width: 480px) {
  .sw3-strip { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem !important; }
  .sw3-strip-icon { font-size: 1.3rem !important; }
  .sw3-strip-item span:not(.sw3-strip-icon) { font-size: 0.55rem !important; letter-spacing: 0.5px !important; }
}

/* ════════════════════════════════════════════════════════════════
   8. FEATURES GRID
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.9rem !important;
  }
  .feature-card { padding: 1.25rem 1rem !important; }
  .feature-card:hover { transform: none !important; }
  .feature-icon {
    width: 46px !important; height: 46px !important;
    font-size: 1.1rem !important;
    margin: 0 auto 0.85rem !important;
  }
  .feature-card h4 { font-size: 0.85rem !important; line-height: 1.3 !important; }
  .feature-card p { font-size: 0.76rem !important; line-height: 1.65 !important; }
}
@media (max-width: 400px) {
  .features-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════
   9. ABOUT SECTION
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .about-image-block { max-width: 280px !important; margin: 0 auto !important; }
  .about-accent-card { display: none !important; }
  .about-content-text { text-align: left !important; }
  .about-stats { justify-content: flex-start !important; gap: 1.5rem !important; }
  .stat-number { font-size: 2rem !important; }
  .vsa-commitments { grid-template-columns: 1fr !important; gap: 0.7rem !important; }
  .vsa-vision-block { padding: 1rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   10. WHY CHOOSE US
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .why-grid { grid-template-columns: 1fr 1fr !important; gap: 0.85rem !important; }
  .why-card {
    padding: 1rem 0.9rem !important;
    flex-direction: column !important;
  }
  .why-card:hover { transform: none !important; }
  .why-icon { width: 40px !important; height: 40px !important; font-size: 1rem !important; }
  .why-card h4 { font-size: 0.84rem !important; }
  .why-card p { font-size: 0.75rem !important; line-height: 1.6 !important; }
}
@media (max-width: 400px) {
  .why-grid { grid-template-columns: 1fr !important; }
  .why-card { flex-direction: row !important; align-items: flex-start !important; gap: 0.75rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   11. CTA SECTION — Text always white/visible
════════════════════════════════════════════════════════════════ */
.cta-section h2 { color: #FFFFFF !important; }
.cta-section h2 em { color: #E5C97A !important; -webkit-text-fill-color: #E5C97A !important; }
.cta-section p { color: rgba(255,255,255,0.75) !important; }
.cta-section .section-label { color: #E5C97A !important; }
@media (max-width: 820px) {
  .cta-section { padding: 3.5rem 0 !important; }
  .cta-section h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.2 !important; }
  .cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-top: 1.5rem !important;
  }
  .cta-buttons .btn, .cta-buttons a {
    width: 100% !important; max-width: 300px !important;
    text-align: center !important; justify-content: center !important;
    min-height: 50px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   12. CLIENT PORTAL
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .portal-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .portal-mockup {
    max-width: 340px !important;
    margin: 0 auto !important;
    padding: 1.25rem !important;
    order: 1 !important;
  }
  .portal-content { order: 2 !important; }
  .portal-features-list { margin: 1rem 0 1.25rem !important; gap: 0.6rem !important; }
  .portal-feature {
    padding: 0.8rem 0.9rem !important;
    align-items: flex-start !important;
  }
  .pf-icon { width: 34px !important; height: 34px !important; font-size: 0.9rem !important; flex-shrink: 0 !important; }
  .pf-text strong { font-size: 0.85rem !important; }
  .pf-text span { font-size: 0.75rem !important; }
  .portal-cta { flex-direction: column !important; gap: 0.75rem !important; }
  .portal-cta .btn { width: 100% !important; min-height: 48px !important; justify-content: center !important; }
}

/* ════════════════════════════════════════════════════════════════
   13. CONTACT SECTION — Email display + form
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
  .contact-info-item {
    padding: 1rem !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  .ci-icon {
    width: 38px !important; height: 38px !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
  }
  .ci-text { flex: 1 !important; min-width: 0 !important; }
  .ci-text strong { font-size: 0.72rem !important; letter-spacing: 1.5px !important; }
  .ci-text span, .ci-text a {
    font-size: 0.875rem !important;
    word-break: break-all !important;
    display: block !important;
  }
  .contact-form-box { padding: 1.5rem 1.1rem !important; border-radius: 16px !important; }
  /* CRITICAL: 16px prevents iOS zoom on focus */
  .form-input, .form-select, .form-textarea {
    font-size: 16px !important;
    padding: 0.8rem 1rem !important;
    width: 100% !important;
  }
  .contact-whatsapp-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   14. MODAL — Bottom sheet on mobile
════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #mOverlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #mBox {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 1.75rem 1.25rem 2rem !important;
    margin: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .m-title { font-size: 1.3rem !important; }
  .m-input, .m-select, .m-textarea {
    font-size: 16px !important;
    padding: 0.85rem 1rem !important;
    width: 100% !important;
  }
  .m-submit {
    padding: 1rem !important;
    font-size: 1rem !important;
    min-height: 52px !important;
    width: 100% !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   15. FOOTER
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .footer { padding: 3rem 0 1.5rem !important; }
  .footer-container { padding: 0 1.25rem !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .footer-desc { font-size: 0.875rem !important; line-height: 1.75 !important; }
  .footer-col h4 { font-size: 0.65rem !important; letter-spacing: 2px !important; }
  .footer-links a {
    font-size: 0.875rem !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.35rem 0 !important;
  }
  .footer-contact-item { margin-bottom: 0.5rem !important; }
  .footer-contact-item span { font-size: 0.85rem !important; word-break: break-all !important; }
  .footer-social { gap: 0.5rem !important; }
  .footer-social a { width: 40px !important; height: 40px !important; font-size: 1rem !important; min-height: 40px !important; }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.4rem !important;
    padding-top: 1.25rem !important;
    font-size: 0.72rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   16. FLOATING BUTTONS — No overlap with content
════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* WhatsApp — bottom right, clear of scroll-to-top */
  .whatsapp-float {
    bottom: 20px !important;
    right: 16px !important;
    padding: 10px 12px !important;
    border-radius: 50px !important;
  }
  .whatsapp-float span { display:none !important; }
  /* Scroll-to-top — above WhatsApp */
  #backToTop, .back-to-top {
    bottom: 82px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 0.9rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   17. TOUCH TARGETS — All interactive elements min 44px
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .btn, button, a.btn,
  .btn-nav-client, .btn-nav-admin,
  .footer-links a, .navbar-link,
  .service-card, .feature-card {
    min-height: 44px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(201,166,70,0.12) !important;
  }
  button:active, .btn:active, a.btn:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   18. TYPOGRAPHY — Responsive at all breakpoints
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  h2 { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(1rem, 4vw, 1.4rem) !important; }
  p  { font-size: 0.92rem; line-height: 1.75; }
}
/* Extra small — 320px */
@media (max-width: 340px) {
  .hero-badge { font-size: 0.55rem !important; letter-spacing: 1.5px !important; }
  .hero-title { font-size: 1.85rem !important; }
  .hero-subtitle { font-size: 1rem !important; }
  .section-heading h2 { font-size: 1.4rem !important; }
  .navbar-brand-name { font-size: 0.72rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   19. THEME TOGGLE — Styled correctly inside mobile menu
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Theme toggle inside nav menu — shows as proper button, not orphan box */
  .navbar-menu li:has(.theme-toggle-btn) {
    padding: 0.5rem 1rem !important;
    border-top: 1px solid rgba(201,166,70,0.1) !important;
  }
  .theme-toggle-btn {
    min-width: 72px !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 0.95rem !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Light theme toggle style */
  html:not([data-theme="dark"]) .theme-toggle-btn {
    background: #ffffff !important;
    border-color: #0F1F4B !important;
    color: #0F1F4B !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   20. ANIMATIONS — Disable heavy animations on mobile
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Disable hover transforms */
  .software-card:hover, .feature-card:hover, .why-card:hover,
  .service-card:hover, .portal-feature:hover, .sw3-card:hover,
  .contact-info-item:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
  /* Faster entrance animations */
  .scroll-animate, .fade-up, .fade-up-delay-1, .fade-up-delay-2,
  .fade-up-delay-3, .fade-up-delay-4, .fade-in {
    animation-duration: 0.4s !important;
    transition-duration: 0.3s !important;
  }
  /* Disable complex CSS animations */
  .hero-grid-lines { animation: none !important; }
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   21. TABLET 821px–1100px
════════════════════════════════════════════════════════════════ */
@media (min-width: 821px) and (max-width: 1100px) {
  .container { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sw3-grid { grid-template-columns: 1fr 1fr !important; }
  .why-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════
   22. OVERFLOW PREVENTION — Universal
════════════════════════════════════════════════════════════════ */
section, .footer, .trust-bar-section, .navbar {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
.hero-section { overflow-x: hidden !important; }


/* ══════════════════════════════════════════════════
   CRITICAL: NAVBAR ALWAYS VISIBLE ON MOBILE
   Overrides ALL possible conflicts
══════════════════════════════════════════════════ */
.navbar,
html .navbar,
body .navbar,
html body .navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}
/* Light theme solid background fallback */
html:not([data-theme="dark"]) .navbar,
.navbar:not([data-theme="dark"]) {
  background: #ffffff !important;
}
/* Dark theme solid background fallback */  
[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] body .navbar {
  background: #060e1e !important;
}
.navbar-container {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Ensure body has top padding so content doesn't hide under navbar */
body {
  padding-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE NAVBAR OPEN — Force all items visible (dark + light theme)
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .navbar-menu {
    position: fixed !important;
    top: calc(var(--navbar-height-mobile, 72px) + env(safe-area-inset-top, 0px) + 0.35rem) !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--navbar-height-mobile, 72px) - env(safe-area-inset-top, 0px) - 1rem) !important;
    padding: 1rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border-radius: 20px !important;
    border: 1px solid #E6EAF1 !important;
    background: linear-gradient(180deg,#FFFFFF 0%,#F7F8FB 60%,#F2F4F8 100%) !important;
    box-shadow: 0 18px 48px rgba(15,31,75,0.18) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-0.35rem) !important;
    z-index: 10002 !important;
  }
  [data-theme="dark"] .navbar-menu {
    background: linear-gradient(180deg,#070F1E 0%,#091428 60%,#0D1E3A 100%) !important;
    border-color: rgba(201,166,70,0.15) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.5) !important;
  }
  .navbar-menu.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 10002 !important;
  }
  .navbar-menu.active li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
  }
  .navbar-menu.active .navbar-link {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #0F1F4B !important;
    min-height: 48px !important;
    line-height: 1.35 !important;
    padding: 0.9rem 1rem !important;
  }
  [data-theme="dark"] .navbar-menu.active .navbar-link {
    color: #FFFFFF !important;
  }
  .navbar-menu.active .navbar-cta {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .navbar-menu.active .btn-nav-client {
    color: var(--gold-main, #C9A646) !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .navbar-menu.active .btn-nav-admin {
    color: #0A1628 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .navbar-backdrop {
    z-index: 10001 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   NAVBAR BRAND — No truncation on mobile
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .navbar-brand-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: none !important;
    width: auto !important;
    word-break: normal !important;
    word-wrap: normal !important;
    font-size: 0.76rem !important;
    line-height: 1.2 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   NAVBAR LOGO — Allow brand name to use full available width
════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .navbar-logo {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: calc(100% - 60px) !important; /* leave room for hamburger */
    overflow: hidden;
  }
  .navbar-logo img {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
  }
  .navbar-brand {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden;
  }
}

/* ════════════════════════════════════════════════════════════════
   NUCLEAR OVERRIDE — Service CTA + Navbar Brand (Final Fix)
   These rules are last in cascade — override everything above
════════════════════════════════════════════════════════════════ */

/* Service "Click to Apply" — ALWAYS visible on mobile */
@media (max-width: 820px) {
  .service-card .service-arrow,
  .service-arrow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #0f1c2e !important;
    background: linear-gradient(135deg, #C9A646, #E5C97A) !important;
    border-radius: 9px !important;
    padding: 0.65rem 1rem !important;
    margin-top: 0.85rem !important;
    min-height: 44px !important;
    width: 100% !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
    text-shadow: none !important;
    box-shadow: 0 2px 12px rgba(201,166,70,0.4) !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-top: none !important;
  }
}

/* Navbar brand — NEVER truncate */
@media (max-width: 820px) {
  .navbar-brand-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: none !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    display: block !important;
    visibility: visible !important;
  }
  .navbar-logo {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: calc(100vw - 70px) !important;
  }
  .navbar-brand {
    min-width: 0 !important;
    flex: 1 !important;
  }
}