/* ==========================================================================
   ZEO INFINITY: ULTRA-PREMIUM MOBILE SUITE (PHONE & TABLET EXPERIENCES)
   ========================================================================== */

/* 1. Global Viewport & Anti-Horizontal Overflow */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
  -webkit-text-size-adjust: 100% !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

img:not(#main-header-logo):not(.footer-col .logo img), video, iframe, svg, canvas {
  max-width: 100% !important;
  height: auto !important;
}

.header .logo img,
#main-header-logo {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.header.sticky .logo img,
.header.sticky #main-header-logo {
  height: 38px !important;
  max-height: 38px !important;
}

/* 2. Floating Actions & Sticky Bottom Bar Positioning (All Screens) */
.float-widgets,
.floating-actions {
  position: fixed !important;
  bottom: 2rem;
  right: 1.5rem;
  z-index: 998 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.float-btn {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 1.5rem !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18) !important;
  cursor: pointer !important;
  transition: transform 0.25s ease !important;
}

.float-btn:hover {
  transform: translateY(-4px) scale(1.05) !important;
}

/* 3. Global Tablet Breakpoint (max-width: 991px) */
@media (max-width: 991px) {
  .header .container {
    width: 94% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  .header-actions .btn-primary {
    display: none !important;
  }
  
  .nav-menu {
    width: 100% !important;
    max-width: 380px !important;
  }

  .mega-menu-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding: 0.75rem !important;
    border-left: 3px solid #0067E8 !important;
    background: rgba(37, 99, 235, 0.03) !important;
    border-radius: 12px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body.dark-mode .mega-menu-grid {
    background: rgba(255, 255, 255, 0.02) !important;
    border-left-color: #60A5FA !important;
  }

  .mega-column-title {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #0067E8 !important;
    margin-bottom: 0.4rem !important;
    padding-bottom: 0.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  body.dark-mode .mega-column-title {
    color: #60A5FA !important;
  }

  .mega-menu-list a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0.55rem 0.75rem !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
  }

  body.dark-mode .mega-menu-list a {
    color: #CBD5E1 !important;
  }

  .mega-menu-list a:hover,
  .mega-menu-list a:active {
    background: rgba(0, 103, 232, 0.1) !important;
    color: #0067E8 !important;
    transform: translateX(3px) !important;
  }
}

/* 4. Global Phone Breakpoint (max-width: 768px) */
@media (max-width: 768px) {

  /* =========================================================================
     A. UNIFIED SECTION SPACING & HERO HEADER CLEARANCE
     ========================================================================= */
  body > section:first-of-type,
  main > section:first-of-type,
  section.hero,
  .hero,
  section.service-hero,
  section.hero-sec,
  .hero-sec,
  section[style*="header-height"],
  section[style*="padding: 9rem"],
  section[style*="padding: 8.5rem"],
  section[style*="padding: 8rem"],
  section[style*="padding: 7rem"],
  .section:first-of-type {
    padding-top: calc(var(--header-height, 80px) + 2rem) !important;
    padding-bottom: 2.75rem !important;
    min-height: auto !important;
    display: block !important;
  }

  section:not(:first-of-type),
  .section:not(:first-of-type),
  section.problem-sec,
  section.solution-sec,
  section.timeline-sec,
  section.comparison-sec,
  section.services-grid-sec,
  section.why-sec,
  section.stats-sec,
  section.testi-sec,
  section.cases-sec,
  section.pricing-sec,
  section.faq-sec,
  section.final-cta-sec,
  section.estimator-sec,
  section.brand-logos-sec,
  section.calculator-sec,
  section[style*="padding: 6.5rem"],
  section[style*="padding: 5.5rem"],
  section[style*="padding: 5rem"],
  section[style*="padding: 4rem"] {
    padding: 2.75rem 0 !important;
    margin: 0 !important;
    min-height: auto !important;
  }

  /* Container width & horizontal padding */
  .container {
    width: 92% !important;
    max-width: 520px !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* =========================================================================
     B. FLUID TYPOGRAPHY, SECTION HEADERS & BADGES
     ========================================================================= */
  h1, .hero h1, .hero-headline, .section-title, .market-hero-title, .cta-headline {
    font-size: clamp(1.75rem, 6.5vw, 2.35rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 0.85rem !important;
  }

  h2, .section-subtitle, h2.section-title, .sec-title {
    font-size: clamp(1.35rem, 5.2vw, 1.85rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 0.65rem !important;
  }

  h3, .feature-title, .problem-card-title, .solution-card-title, .why-title, .orm-step-title {
    font-size: clamp(1.1rem, 3.8vw, 1.35rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 0.45rem !important;
  }

  p, .hero-desc, .sec-desc, .feature-desc, .section-subtitle, .market-narrative-lead, .market-narrative-lead p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
  }

  .badge, .sec-title-badge, .sec-title-badge-blue, .hero-badge-title, .retro-badge {
    font-size: 0.72rem !important;
    padding: 0.35rem 0.85rem !important;
    margin-bottom: 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    border-radius: 99px !important;
  }

  .sec-title-container,
  div[style*="text-align: center; margin-bottom"] {
    margin-bottom: 1.75rem !important;
    text-align: center !important;
  }

  /* =========================================================================
     C. UNIVERSAL GRID COLLAPSE & GAP NORMALIZATION (NO AWKWARD HOLES!)
     ========================================================================= */
  .grid, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-12,
  .hero-grid, .ai-panel-grid, .cards-grid, .services-grid,
  .pricing-grid, .local-pricing-grid, .why-grid, .cases-grid,
  .portfolio-grid, .checklist-grid, .comparison-grid,
  .orm-timeline-flow, .core-services-grid, .specialized-grid-8,
  .market-split-layout, .footer-grid,
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    display: grid !important;
  }

  /* Override desktop inline gaps to uniform comfortable 1.25rem */
  div[style*="gap: 5rem"],
  div[style*="gap: 4rem"],
  div[style*="gap: 3.5rem"],
  div[style*="gap: 3rem"],
  div[style*="gap: 2.5rem"],
  div[style*="gap: 2rem"] {
    gap: 1.25rem !important;
  }

  .sectors-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .sector-card {
    padding: 1.1rem 0.6rem !important;
  }
  .sector-card i {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.35rem !important;
  }
  .sector-card h4 {
    font-size: 13px !important;
  }

  /* =========================================================================
     D. PREMIUM CARDS, BOXES & SHADOWS
     ========================================================================= */
  .feature-card,
  .problem-card,
  .solution-card,
  .why-card,
  .process-step-card,
  .process-card,
  .service-card,
  .pricing-card,
  .local-price-card,
  .industry-card,
  .checklist-item,
  .ai-panel-card,
  .testi-card,
  .case-card,
  .orm-timeline-step,
  .portfolio-card,
  .graphic-portfolio-card,
  .logo-portfolio-card {
    padding: 1.35rem 1.15rem !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    border: 1px solid var(--border-color) !important;
    background: var(--white) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  }

  body.dark-mode .feature-card,
  body.dark-mode .problem-card,
  body.dark-mode .solution-card,
  body.dark-mode .why-card,
  body.dark-mode .process-step-card,
  body.dark-mode .process-card,
  body.dark-mode .service-card,
  body.dark-mode .pricing-card,
  body.dark-mode .local-price-card,
  body.dark-mode .industry-card,
  body.dark-mode .checklist-item,
  body.dark-mode .ai-panel-card,
  body.dark-mode .testi-card,
  body.dark-mode .case-card,
  body.dark-mode .orm-timeline-step,
  body.dark-mode .portfolio-card {
    background: #161B22 !important;
    border-color: #2D3748 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  }

  .feature-icon,
  .problem-card-icon,
  .solution-card-icon,
  .why-icon,
  .service-card-icon,
  .checklist-icon,
  .orm-step-number,
  .process-number {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.25rem !important;
    margin-bottom: 0.85rem !important;
  }

  /* =========================================================================
     E. HERO ACTION BUTTONS & CTAS
     ========================================================================= */
  .hero-ctas,
  .hero-actions,
  .cta-group,
  .market-cta-row,
  .error-actions,
  div[style*="display: flex; gap: 1rem; flex-wrap: wrap"],
  div[style*="display: flex; gap: 1.5rem"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-gradient,
  .btn-outline,
  .ai-pill-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.85rem 1.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
  }

  .hero-features-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    margin-top: 1.25rem !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* =========================================================================
     F. ORM HERO VISUALS & FLOATING ELEMENTS (NO OVERFLOW)
     ========================================================================= */
  .hero-illustration {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    margin-top: 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .dashboard-bg-glow {
    display: none !important;
  }

  .shield-icon-container {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 0.75rem !important;
  }
  .shield-icon-container i {
    font-size: 2rem !important;
  }

  .float-glass-card {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    animation: none !important;
    transform: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding: 0.75rem 1rem !important;
    border-radius: 12px !important;
  }

  .brand-logos-sec {
    padding: 1.5rem 0 !important;
  }
  .logos-flex {
    gap: 0.85rem 1.5rem !important;
    justify-content: center !important;
  }
  .logo-item {
    font-size: 1.05rem !important;
  }

  /* =========================================================================
     G. AI AUTOMATION & BRAND ORM LIFECYCLE
     ========================================================================= */
  .lifecycle-loop-container div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .timeline-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-bottom: 2rem !important;
  }
  .timeline-num {
    font-size: 3.5rem !important;
    width: auto !important;
    text-align: left !important;
  }
  .timeline-svg-line,
  .orm-timeline-flow::after {
    display: none !important;
  }

  /* Comparison & Cases */
  .comparison-column {
    padding: 1.5rem 1.15rem !important;
    border-radius: 16px !important;
  }
  .case-card {
    padding: 1.5rem 1.15rem !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .case-left h3 {
    font-size: 1.4rem !important;
  }

  /* =========================================================================
     H. ALL SERVICE CALCULATORS, SIMULATORS & 3D STUDIOS
     ========================================================================= */
  .calc-container,
  .est-container,
  .web-builder-container,
  .seo-mockup-console,
  .local-calc-container,
  .wp-optimizer-container,
  .shopify-optimizer-container,
  .android-sandbox-container,
  .cms-audit-card,
  .ad-builder-container,
  .brand-dna-card,
  .logo-builder-card,
  .brand-builder-card,
  .visualizer-builder-card,
  .packaging-builder-card,
  .auction-container,
  .terminal-container,
  .ai-simulator-card {
    grid-template-columns: 1fr !important;
    padding: 1.25rem 1rem !important;
    gap: 1.5rem !important;
    margin-top: 1.75rem !important;
    border-radius: 18px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .ad-builder-container div[style*="grid-template-columns"],
  .auction-container div[style*="grid-template-columns"],
  .cms-audit-card div[style*="grid-template-columns"],
  .android-sandbox-container div[style*="grid-template-columns"],
  .web-builder-container div[style*="grid-template-columns"],
  .wp-optimizer-container div[style*="grid-template-columns"],
  .shopify-optimizer-container div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .brand-builder-card > div[style*="grid-template-columns"],
  .visualizer-builder-card > div[style*="grid-template-columns"],
  .packaging-builder-card > div[style*="grid-template-columns"],
  div[style*="grid-template-columns: 190px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .brand-builder-card div[style*="border-right"],
  .visualizer-builder-card div[style*="border-right"],
  .packaging-builder-card div[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid #1e293b !important;
    padding: 1rem !important;
  }

  .brand-builder-card div[style*="min-height: 410px"],
  .visualizer-builder-card div[style*="min-height: 410px"],
  .packaging-builder-card div[style*="min-height: 410px"] {
    min-height: 260px !important;
    padding: 1rem !important;
  }

  .calc-results-box,
  .est-results,
  .calc-results,
  .local-results-panel {
    padding: 1.25rem 1rem !important;
    border-radius: 16px !important;
    gap: 0.85rem !important;
  }

  .calc-result-row,
  .slider-label-row,
  .calc-label,
  .local-calc-label,
  .auction-slider-label,
  .est-result-item,
  .calc-input-group {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  input[type="range"],
  .calc-slider,
  .local-calc-slider,
  .auction-slider,
  .slider-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 6px !important;
  }

  .calc-result-val,
  .slider-val-box,
  .est-result-val {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important;
  }

  /* AI SEO Simulator */
  .ai-tab-btn {
    flex: 1 1 auto !important;
    min-width: 65px !important;
    padding: 0.45rem 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-align: center !important;
  }

  #ai-chat-thread {
    height: 180px !important;
    padding: 0.6rem !important;
    gap: 0.65rem !important;
  }

  #ai-chat-thread > div {
    max-width: 90% !important;
    font-size: 0.82rem !important;
    padding: 0.65rem 0.85rem !important;
    line-height: 1.5 !important;
    border-radius: 12px !important;
  }

  #ai-chat-input-form {
    display: flex !important;
    gap: 6px !important;
    margin-top: 0.75rem !important;
  }

  #ai-chat-input {
    font-size: 16px !important;
    padding: 0.75rem 0.85rem !important;
    border-radius: 10px !important;
  }

  #ai-chat-send-btn {
    padding: 0.75rem 1.15rem !important;
    border-radius: 10px !important;
  }

  /* AI Terminal in #audit-tool */
  .score-gauge-wrapper {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1rem !important;
    padding: 1rem 0.75rem !important;
  }
  .keyword-list-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Local SEO Map */
  .map-mockup-wrapper {
    padding: 1.25rem 1rem !important;
    border-radius: 18px !important;
  }
  .map-result-item {
    padding: 1rem 0.75rem !important;
    gap: 10px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* =========================================================================
     I. ACCORDIONS & FAQ LISTS
     ========================================================================= */
  .faq-wrapper,
  .faq-accordion,
  .app-faq-accordion,
  .faq-container {
    max-width: 100% !important;
    margin: 1.5rem auto 0 !important;
    gap: 0.65rem !important;
  }
  .faq-card,
  .faq-item,
  .app-faq-item {
    border-radius: 14px !important;
    margin-bottom: 0.65rem !important;
  }
  .faq-header,
  .faq-header-btn,
  .app-faq-header {
    padding: 1rem 1.15rem !important;
    font-size: 0.95rem !important;
  }
  .faq-answer-wrapper,
  .faq-body,
  .faq-body-content,
  .app-faq-body {
    padding: 0 1.15rem 1rem !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }

  /* =========================================================================
     J. FINAL CTA SECTION & MODALS
     ========================================================================= */
  .final-cta-sec,
  section[style*="background: var(--primary)"] {
    padding: 3rem 0 !important;
  }
  .cta-card {
    padding: 2.25rem 1.25rem !important;
    border-radius: 20px !important;
  }
  .cta-headline {
    font-size: 1.75rem !important;
  }
  .cta-desc {
    font-size: 0.95rem !important;
    margin-bottom: 1.75rem !important;
  }

    /* =========================================================================
     K. FLOATING ACTIONS & STICKY BOTTOM BAR (NO OVERLAPS!)
     ========================================================================= */
  .float-widgets,
  .floating-actions {
    position: fixed !important;
    bottom: 4.8rem !important; /* Positioned comfortably above the sticky bottom bar */
    right: 0.85rem !important;
    z-index: 998 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
  }

  .float-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.22) !important;
    border-radius: 50% !important;
  }

  .sticky-mobile-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0.55rem 0.85rem !important;
    z-index: 997 !important;
    display: block !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid var(--border-color) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
  }

  body.dark-mode .sticky-mobile-bar {
    background: rgba(15, 23, 42, 0.96) !important;
    border-top-color: #1e293b !important;
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.5) !important;
  }

  .sticky-mobile-bar .btn {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
  }

  body {
    padding-bottom: 75px !important; /* Prevents sticky bar from hiding bottom links */
  }

  /* Form inputs & buttons */
  input, select, textarea, .form-control, .popup-input, .popup-textarea, .terminal-input-field {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .floating-stat-chip {
    position: static !important;
    display: inline-flex !important;
    margin: 8px 6px 0 0 !important;
    animation: none !important;
    transform: none !important;
    max-width: 100% !important;
  }

  .market-visual-showcase, .browser-mockup-frame {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  .popup-content {
    width: 95% !important;
    padding: 1.5rem !important;
    margin: 1rem !important;
  }

  /* =========================================================================
     L. MOBILE FOOTER REDESIGN (CLEAN, COMPACT, SLEEK LOGO, NO CRASH)
     ========================================================================= */
  .footer {
    padding: 3rem 0 6.5rem !important; /* Generous bottom spacing for fixed sticky consultation bar */
    background-color: #0b0f19 !important;
    border-top: 1px solid #1e293b !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .footer .container {
    width: 92% !important;
    max-width: 520px !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin: 0 auto !important;
  }

  .footer .logo {
    display: inline-block !important;
    margin-bottom: 0.85rem !important;
  }

  .footer .logo img {
    height: 36px !important;
    max-height: 36px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 0 0.75rem 0 !important;
    filter: none !important;
  }

  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    margin-bottom: 2rem !important;
  }

  .footer-col {
    width: 100% !important;
  }

  .footer-col h4 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 0.85rem !important;
    letter-spacing: -0.01em !important;
  }

  .footer-col p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: #94A3B8 !important;
    margin-bottom: 1rem !important;
  }

  .footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
  }

  .footer-links li {
    margin-bottom: 0 !important;
  }

  .footer-links a {
    color: #94A3B8 !important;
    font-size: 0.92rem !important;
    display: inline-block !important;
    padding: 2px 0 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
  }

  .footer-links a:hover,
  .footer-links a:active {
    color: #38bdf8 !important;
    transform: none !important;
  }

  .social-icons-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-top: 0.75rem !important;
  }

  .social-icon-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #1e293b !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.2s ease !important;
  }

  .social-icon-btn:hover {
    background: #2563EB !important;
    transform: translateY(-2px) !important;
  }

  .footer-newsletter-form {
    display: flex !important;
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    padding: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .footer-newsletter-form input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0.7rem 0.85rem !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    min-width: 0 !important;
  }

  .footer-newsletter-form input::placeholder {
    color: #64748B !important;
  }

  .footer-newsletter-form button {
    background: #2563EB !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.7rem 1.25rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s ease !important;
  }

  .footer-newsletter-form button:hover {
    background: #1d4ed8 !important;
  }

  .footer-bottom {
    border-top: 1px solid #1e293b !important;
    padding-top: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }

  .footer-bottom p {
    font-size: 0.82rem !important;
    color: #94A3B8 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
  }

  .footer-bottom-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.25rem !important;
  }

  .footer-bottom-links a {
    font-size: 0.82rem !important;
    color: #94A3B8 !important;
    text-decoration: none !important;
  }

  .footer-bottom-links a:hover {
    color: #ffffff !important;
  }

  /* =========================================================================
     M. DISABLE SCROLL/SWIPE & DISTRACTING ANIMATIONS ON MOBILE
     ========================================================================= */
  /* Remove scroll-triggered entrance reveals - elements show immediately without jumps */
  .reveal,
  .reveal.active,
  [data-reveal],
  .scroll-reveal,
  .scroll-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    visibility: visible !important;
  }

  /* Disable hover transform jumps on mobile touch screens */
  .feature-card:hover,
  .service-card:hover,
  .pricing-card:hover,
  .process-step-card:hover,
  .portfolio-card:hover,
  .case-card:hover,
  .why-card:hover {
    transform: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  }

  /* Disable distracting continuous floating, bobbing, rotating, and pulse animations */
  .coolFloat,
  .rotateGlow,
  .floatEffect,
  .floating-shape,
  .floating-badge,
  .hero-float-icon,
  .float-icon,
  .db-glow,
  .contact-hero::before,
  .contact-hero-glow,
  .floating-stat-chip,
  .pulseGlow,
  .pulse-ring,
  .pulse-glow,
  .float-bob,
  .portfolio-scroll-img {
    animation: none !important;
  }

  #page-transition {
    display: none !important;
  }

  /* =========================================================================
     N. MARQUEES (SERVICES PAGES & GENERAL)
     ========================================================================= */
  /* Services Pages Marquee Container */
  .marquee-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 1.25rem 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .marquee-title {
    border-right: none !important;
    border-bottom: none !important;
    padding: 0 1rem !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    width: 100% !important;
    white-space: normal !important;
    margin: 0 !important;
  }

  .marquee-track {
    display: flex !important;
    gap: 2rem !important;
    width: max-content !important;
    animation: marquee-scroll 18s linear infinite !important;
    will-change: transform !important;
  }

  .marquee-item {
    font-size: 0.95rem !important;
    gap: 0.4rem !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    opacity: 0.8 !important;
  }

  /* Homepage Client Logo Marquee */
  .logo-carousel-section {
    padding: 1.25rem 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .marquee-wrapper {
    overflow: hidden !important;
    width: 100% !important;
  }

  .marquee-content {
    display: flex !important;
    gap: 2.25rem !important;
    animation: marquee 20s linear infinite !important;
    width: max-content !important;
    align-items: center !important;
  }

      /* Homepage Tech Stack - Completely Hidden on Phone */
  .tech-marquee-section {
    display: none !important;
  }

  /* =========================================================================
     O. HOMEPAGE SPECIFIC MOBILE TUNING (INDEX.PHP)
     ========================================================================= */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .hero-content {
    text-align: left !important;
  }

  .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .hero-mockup-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin-top: 1rem !important;
    box-sizing: border-box !important;
  }

  .hero-mockup-wrapper .mockup-screen {
    width: 100% !important;
    max-width: 100% !important;
  }

  .floating-card {
    position: static !important;
    display: inline-flex !important;
    margin: 4px 6px 4px 0 !important;
    transform: none !important;
    animation: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .counters-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  @media (max-width: 480px) {
    .counters-grid {
      grid-template-columns: 1fr !important;
    }
  }

  .counter-box {
    padding: 1.25rem 0.75rem !important;
    text-align: center !important;
  }

  .counter-box h3 {
    font-size: clamp(1.8rem, 6vw, 2.3rem) !important;
  }

  .testimonial-slider-container {
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .testimonial-slide {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* =========================================================================
     P. ABOUT PAGE MOBILE TUNING (ABOUT.PHP)
     ========================================================================= */
  .about-hero {
    padding-top: calc(var(--header-height, 80px) + 1.75rem) !important;
    padding-bottom: 2.75rem !important;
    min-height: auto !important;
    display: block !important;
  }

  .about-hero-container .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .about-hero h1 {
    font-size: clamp(1.85rem, 6.5vw, 2.35rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  .dashboard-visual {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 1.25rem 1rem !important;
    transform: none !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  }

  .db-nodes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .db-node {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.75rem !important;
    border-radius: 8px !important;
  }

  /* Story Timeline Mobile Alignment */
  .story-timeline {
    position: relative !important;
    padding: 1.5rem 0 !important;
  }

  .story-timeline::after {
    left: 20px !important;
  }

  .timeline-item {
    width: 100% !important;
    left: 0 !important;
    padding-left: 3.25rem !important;
    padding-right: 0 !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    box-sizing: border-box !important;
  }

  .timeline-dot {
    left: 4px !important;
    right: auto !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
    top: 1.25rem !important;
  }

  .timeline-card {
    padding: 1.25rem 1rem !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* =========================================================================
     Q. CONTACT PAGE MOBILE TUNING (CONTACT-US.PHP)
     ========================================================================= */
  .contact-hero {
    padding-top: calc(var(--header-height, 80px) + 1.75rem) !important;
    padding-bottom: 2.75rem !important;
    min-height: auto !important;
  }

  .contact-hero h1 {
    font-size: clamp(1.85rem, 6.5vw, 2.35rem) !important;
    line-height: 1.2 !important;
    margin: 1rem 0 !important;
  }

  .contact-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .illustration-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1.5rem !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    transform: none !important;
  }

  .floating-badge {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 4px 6px 4px 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    animation: none !important;
    transform: none !important;
  }

  .badge-seo, .badge-ads, .badge-ai {
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }

  .glass-form-card {
    padding: 1.5rem 1rem !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .form-inputs-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .form-col-2 {
    grid-column: span 1 !important;
  }

  .input-wrapper-glass input,
  .input-wrapper-glass select,
  .input-wrapper-glass textarea {
    font-size: 16px !important; /* Prevents auto-zoom on iOS */
    padding: 0.75rem 0.85rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #form-submit-btn {
    width: 100% !important;
    padding: 0.95rem 1rem !important;
    font-size: 1rem !important;
  }

  .contact-info-grid,
  .contact-methods-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}

/* 5. Extra Small Phones (max-width: 480px) */
@media (max-width: 480px) {
  .sectors-grid {
    grid-template-columns: 1fr !important;
  }
  .nav-menu {
    width: 100% !important;
    max-width: 100% !important;
  }
  .header .logo img {
    max-height: 36px !important;
    width: auto !important;
  }
  .theme-toggle, .btn-icon {
    width: 38px !important;
    height: 38px !important;
  }
}



/* =========================================================================
   SEARCH POPUP & LIVE AUTOCOMPLETE ENHANCEMENTS (DESKTOP & MOBILE)
   ========================================================================= */
.search-results-list {
  max-height: min(60vh, 480px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-right: 6px !important;
  margin-top: 1rem !important;
}

.search-results-list::-webkit-scrollbar {
  width: 6px !important;
}

.search-results-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 4px !important;
}

.search-results-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px !important;
}

.search-results-list::-webkit-scrollbar-thumb:hover {
  background: var(--primary) !important;
}

.search-result-item:hover {
  background: rgba(37, 99, 235, 0.18) !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
  transform: translateX(4px) !important;
}

@media (max-width: 768px) {
  .search-popup-content {
    width: 92% !important;
    max-width: 480px !important;
    padding-top: 2rem !important;
  }
  .search-popup-close {
    top: 1.25rem !important;
    right: 1.25rem !important;
    font-size: 2rem !important;
  }
  .search-input-wrapper {
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.65rem !important;
  }
  .search-input-wrapper input {
    font-size: 1.25rem !important;
  }
  .search-suggestions-title {
    font-size: 0.8rem !important;
    margin-bottom: 0.65rem !important;
  }
  .search-suggestions {
    gap: 0.45rem !important;
    margin-bottom: 1.25rem !important;
  }
  .search-tag {
    padding: 0.35rem 0.85rem !important;
    font-size: 0.8rem !important;
  }
  .search-results-list {
    max-height: 55vh !important;
  }
}

/* =========================================================================
   ADDITIONAL TARGETED MOBILE PERFECTION SUITE (PHONE ONLY <= 768px)
   ========================================================================= */
@media (max-width: 768px) {

  /* --- 1. HOMEPAGE SPECIFIC (INDEX.PHP) --- */
  .hero-mockup-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin-top: 1.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .mockup-laptop {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.5rem !important;
    transform: none !important;
  }

  /* Dock 4 floating cards underneath mockup in neat 2x2 statistics dashboard */
  .floating-card,
  .floating-card.fc-seo,
  .floating-card.fc-revenue,
  .floating-card.fc-youtube,
  .floating-card.fc-leads {
    position: static !important;
    display: inline-flex !important;
    flex-direction: column !important;
    width: calc(50% - 5px) !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.65rem 0.75rem !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    animation: none !important;
    transform: none !important;
    pointer-events: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }

  .why-graphic {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .why-infographic {
    width: 220px !important;
    height: 220px !important;
    margin: 1.5rem auto !important;
    position: relative !important;
  }

  .why-badge-top,
  .why-badge-bottom,
  .why-infographic div[style*="background:#222"] {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 6px 4px !important;
    font-size: 11px !important;
  }

  /* Trust partners */
  .trust-grid {
    gap: 0.75rem 1.25rem !important;
    justify-content: flex-start !important;
  }

  /* Contact section on homepage */
  #contact div[style*="gap: 4rem"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* --- 2. ABOUT PAGE SPECIFIC (ABOUT.PHP) --- */
  .about-hero-title,
  .about-hero h1 {
    font-size: clamp(1.85rem, 6.5vw, 2.35rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  .about-hero-container .grid-2,
  .about-hero [style*="gap: 4rem"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .dashboard-visual {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 1.25rem 1rem !important;
    transform: none !important;
  }

  .db-nodes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .db-node {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.75rem !important;
    border-radius: 8px !important;
  }

  .story-timeline {
    position: relative !important;
    padding: 1.5rem 0 !important;
  }

  .story-timeline::after {
    left: 18px !important;
  }

  .timeline-item {
    width: 100% !important;
    left: 0 !important;
    padding-left: 3rem !important;
    padding-right: 0 !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    box-sizing: border-box !important;
  }

  .timeline-dot {
    left: 2px !important;
    right: auto !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
    top: 1.25rem !important;
  }

  div[style*="padding: 5rem 4rem"] {
    padding: 2.25rem 1.25rem !important;
  }

  h2[style*="font-size: 3rem"] {
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
    line-height: 1.25 !important;
  }

  /* --- 3. CONTACT PAGE SPECIFIC (CONTACT-US.PHP) --- */
  .contact-hero-title,
  .contact-hero h1 {
    font-size: clamp(1.85rem, 6.5vw, 2.35rem) !important;
    line-height: 1.2 !important;
    margin: 0.85rem 0 1rem !important;
  }

  .contact-hero-grid,
  .contact-hero [style*="gap: 4rem"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .illustration-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1.5rem !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    transform: none !important;
    perspective: none !important;
  }

  .illustration-container .dashboard-visual {
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .floating-badge,
  .floating-badge.badge-seo,
  .floating-badge.badge-ads,
  .floating-badge.badge-ai {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 4px 6px 4px 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    animation: none !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }

  .glass-form-card {
    padding: 1.5rem 1rem !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .form-inputs-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .form-col-2 {
    grid-column: span 1 !important;
  }

  /* --- 4. MARQUEES (SERVICES & GENERAL) --- */
  .marquee-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    padding: 1rem 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .marquee-title {
    border-right: none !important;
    border-bottom: none !important;
    padding: 0 1rem !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    width: 100% !important;
    white-space: normal !important;
    margin: 0 !important;
    opacity: 0.8 !important;
  }

  .marquee-track {
    display: flex !important;
    gap: 1.75rem !important;
    width: max-content !important;
    animation: marquee-scroll 18s linear infinite !important;
    will-change: transform !important;
  }

  .marquee-item {
    font-size: 0.92rem !important;
    gap: 0.4rem !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    opacity: 0.8 !important;
  }

  /* --- 5. FOOTER ON MOBILE --- */
  .footer {
    padding: 2.75rem 0 6.5rem !important;
    background-color: #0b0f19 !important;
    border-top: 1px solid #1e293b !important;
    text-align: left !important;
  }

  .footer .container {
    width: 92% !important;
    max-width: 520px !important;
    padding: 0 0.75rem !important;
    margin: 0 auto !important;
  }

  .footer-col .logo,
  .footer .logo {
    display: inline-block !important;
    margin-bottom: 0.65rem !important;
  }

  .footer-col .logo img,
  .footer .logo img {
    height: 32px !important;
    max-height: 32px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 0 0.65rem 0 !important;
  }

  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.75rem !important;
    margin-bottom: 1.75rem !important;
  }

  .footer-col {
    width: 100% !important;
  }

  .footer-col h4 {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  .footer-col p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: #94A3B8 !important;
    margin-bottom: 0.85rem !important;
  }

  .footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .footer-links li {
    margin: 0 !important;
  }

  .footer-links a {
    color: #94A3B8 !important;
    font-size: 0.9rem !important;
    display: inline-block !important;
    padding: 2px 0 !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
  }

  .footer-links a:hover {
    color: #38bdf8 !important;
  }

  .social-icons-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    margin-top: 0.65rem !important;
  }

  .social-icon-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #1e293b !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .footer-newsletter-form {
    display: flex !important;
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    padding: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .footer-newsletter-form input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0.65rem 0.85rem !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    min-width: 0 !important;
  }

  .footer-newsletter-form button {
    background: #2563EB !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.65rem 1.15rem !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }

  .footer-bottom {
    border-top: 1px solid #1e293b !important;
    padding-top: 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.65rem !important;
  }

  .footer-bottom p {
    font-size: 0.8rem !important;
    color: #94A3B8 !important;
    margin: 0 !important;
    line-height: 1.45 !important;
  }

  .footer-bottom-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.25rem !important;
  }

  .footer-bottom-links a {
    font-size: 0.8rem !important;
    color: #94A3B8 !important;
    text-decoration: none !important;
  }

  /* --- 6. FLOATING ACTIONS & STICKY BOTTOM BAR --- */
  .float-widgets {
    position: fixed !important;
    bottom: 4.8rem !important;
    right: 0.85rem !important;
    z-index: 998 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .float-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.2rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.22) !important;
  }

  .sticky-mobile-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0.55rem 0.85rem !important;
    z-index: 997 !important;
    display: block !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid var(--border-color) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
  }

  body.dark-mode .sticky-mobile-bar {
    background: rgba(15, 23, 42, 0.96) !important;
    border-top-color: #1e293b !important;
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.5) !important;
  }

  .sticky-mobile-bar .btn {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
  }

  body {
    padding-bottom: 75px !important;
  }

  /* --- 7. COMPLETE NEUTRALIZATION OF SCROLL/SWIPE JUMPS ON PHONE --- */
  .reveal,
  .reveal.active,
  [data-reveal],
  .scroll-reveal,
  .scroll-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    visibility: visible !important;
  }

  /* Stop jittery floating/bobbing animations */
  .coolFloat,
  .rotateGlow,
  .floatEffect,
  .floating-shape,
  .hero-float-icon,
  .float-icon,
  .db-glow,
  .contact-hero::before,
  .contact-hero-glow,
  .pulseGlow,
  .pulse-ring,
  .pulse-glow,
  .float-bob,
  .portfolio-scroll-img {
    animation: none !important;
  }


  /* --- WHY CHOOSE US & FEATURE CARDS (PHONE ONLY <= 768px) --- */
  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .why-graphic {
    padding: 1.5rem 1rem !important;
    border-radius: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .why-feature-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    margin-top: 1.25rem !important;
    width: 100% !important;
  }

  .why-feat-card {
    padding: 1.15rem 1.25rem !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .why-feat-card h4 {
    font-size: 1.05rem !important;
    margin-bottom: 0.35rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .why-feat-card p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .pricing-card {
    padding: 2rem 1.35rem !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  .pricing-card .pricing-desc {
    font-size: 0.88rem !important;
    margin-bottom: 1.25rem !important;
  }
}

/* ==========================================================================
   ULTRA-COMPACT MOBILE POPUPS & MODALS SUITE (PHONE ONLY <= 768px)
   Guarantees Zero Scroll, Hides Giant Marketing Headers & Preserves Desktop
   ========================================================================== */
@media (max-width: 768px) {
  /* Hide all top marketing visual banners in popups on phones */
  #zeo-ppc-popup-overlay .zeo-ppc-popup-visual,
  #zeo-seo-popup-overlay .zeo-seo-popup-visual,
  #zeo-webdev-popup-overlay .zeo-webdev-popup-visual {
    display: none !important;
  }

  /* Compact Popups overlay & containers */
  #zeo-ppc-popup-overlay,
  #zeo-seo-popup-overlay,
  #zeo-webdev-popup-overlay,
  .app-popup-modal {
    padding: 12px !important;
    align-items: center !important;
  }

  #zeo-ppc-popup-overlay .zeo-ppc-popup-container,
  #zeo-seo-popup-overlay .zeo-seo-popup-container,
  #zeo-webdev-popup-overlay .zeo-webdev-popup-container,
  .app-popup-modal .app-popup-content {
    max-width: 390px !important;
    width: 94% !important;
    max-height: 94vh !important;
    border-radius: 18px !important;
    overflow-y: auto !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
    padding: 18px 16px !important;
  }

  #zeo-ppc-popup-overlay .zeo-ppc-popup-grid,
  #zeo-seo-popup-overlay .zeo-seo-popup-grid,
  #zeo-webdev-popup-overlay .zeo-webdev-popup-grid {
    display: block !important;
    min-height: auto !important;
    border-radius: 18px !important;
  }

  #zeo-ppc-popup-overlay .zeo-ppc-popup-form-wrapper,
  #zeo-seo-popup-overlay .zeo-seo-popup-form-wrapper,
  #zeo-webdev-popup-overlay .zeo-webdev-popup-form-wrapper {
    padding: 0 !important;
    background: transparent !important;
  }

  /* Compact Input Heights & Typography for Phone */
  #zeo-ppc-popup-overlay input,
  #zeo-ppc-popup-overlay select,
  #zeo-seo-popup-overlay input,
  #zeo-seo-popup-overlay select,
  #zeo-webdev-popup-overlay input,
  #zeo-webdev-popup-overlay select,
  .app-popup-modal input,
  .app-popup-modal select {
    height: 38px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
  }

  #zeo-ppc-popup-overlay .form-group,
  #zeo-seo-popup-overlay .form-group,
  #zeo-webdev-popup-overlay .form-group,
  .app-popup-modal .popup-form-group {
    margin-bottom: 7px !important;
  }

  #zeo-ppc-popup-overlay label,
  #zeo-seo-popup-overlay label,
  #zeo-webdev-popup-overlay label,
  .app-popup-modal .popup-label {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }

  .desktop-only-ppc,
  .desktop-only-seo,
  .desktop-only-webdev,
  .desktop-only-global-modal {
    display: none !important;
  }
}