/* ============================================
   MOBILE ANIMATION FIXES
   Optimized animations for mobile devices
   ============================================ */

/* ============================================
   WEBKIT KEYFRAMES FOR SAFARI/iOS COMPATIBILITY
   These are required for animations to work on Safari
   ============================================ */

/* Floating animation - webkit prefix */
@-webkit-keyframes floating {
  0%, 100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

/* Blob floating animation - webkit prefix */
@-webkit-keyframes blobFloat {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    -webkit-transform: translate(30px, -50px) rotate(120deg);
    transform: translate(30px, -50px) rotate(120deg);
  }
  66% {
    -webkit-transform: translate(-20px, 20px) rotate(240deg);
    transform: translate(-20px, 20px) rotate(240deg);
  }
}

/* Mesh move animation - webkit prefix */
@-webkit-keyframes meshMove {
  0%, 100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
  }
  33% {
    -webkit-transform: translate(30px, -50px) scale(1.1);
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    -webkit-transform: translate(-20px, 20px) scale(0.95);
    transform: translate(-20px, 20px) scale(0.95);
  }
}

/* Particle float animation - webkit prefix */
@-webkit-keyframes particleFloat {
  0% {
    -webkit-transform: translateY(100vh) translateX(0) scale(0);
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-10vh) translateX(var(--x-drift, 0)) scale(1);
    transform: translateY(-10vh) translateX(var(--x-drift, 0)) scale(1);
    opacity: 0;
  }
}

/* ============================================
   PRIORITY 0: TEXT GRADIENT FIX (Keep this)
   Gradient text doesn't work on mobile - use solid colors
   ============================================ */

@media screen and (max-width: 768px) {
  /* Base text-gradient fix - Light Mode */
  .text-gradient,
  h1.text-gradient,
  h2.text-gradient,
  h3.text-gradient,
  div.text-gradient,
  span.text-gradient,
  .hero-title.text-gradient,
  .section-title.text-gradient,
  .bento-stat-value.text-gradient {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--color-secondary) !important;
    color: var(--color-secondary) !important;
    background-size: auto !important;
  }

  /* Dark Mode text-gradient fix */
  [data-theme="dark"] .text-gradient,
  [data-theme="dark"] h1.text-gradient,
  [data-theme="dark"] h2.text-gradient,
  [data-theme="dark"] h3.text-gradient,
  [data-theme="dark"] div.text-gradient,
  [data-theme="dark"] span.text-gradient,
  [data-theme="dark"] .hero-title.text-gradient,
  [data-theme="dark"] .section-title.text-gradient,
  [data-theme="dark"] .bento-stat-value.text-gradient {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--color-secondary) !important;
    color: var(--color-secondary) !important;
    background-size: auto !important;
  }
}

/* ============================================
   PRIORITY 1: ENABLE ANIMATIONS ON MOBILE
   Keep animations running with optimized settings
   Using !important to ensure override
   ============================================ */

@media (max-width: 768px) {
  /* Mesh gradient animation - FORCE ENABLE with webkit */
  .gradient-mesh-bg::before {
    -webkit-animation: meshMove 25s ease-in-out infinite !important;
    animation: meshMove 25s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
  }

  /* Blob animations - FORCE ENABLE with webkit */
  .blob,
  .blob-1,
  .blob-2,
  .blob-3 {
    -webkit-animation: blobFloat 25s ease-in-out infinite !important;
    animation: blobFloat 25s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
  }

  /* Ensure blobs are visible */
  .blob-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Optimize blob appearance for mobile */
  .blob {
    -webkit-filter: blur(60px);
    filter: blur(60px);
    opacity: 0.4 !important;
  }

  .blob-1,
  .blob-2 {
    width: 300px !important;
    height: 300px !important;
    display: block !important;
  }

  .blob-3 {
    width: 250px !important;
    height: 250px !important;
  }

  /* Particle animations - FORCE ENABLE with webkit */
  .particle {
    -webkit-animation-duration: 12s !important;
    animation-duration: 12s !important;
    -webkit-animation-timing-function: linear !important;
    animation-timing-function: linear !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
  }

  /* Ensure particles container is visible */
  .particles-container {
    display: block !important;
    visibility: visible !important;
  }

  /* Hide particles beyond 15 on mobile for performance */
  .particle:nth-child(n+15) {
    display: none !important;
  }

  /* Floating animation - FORCE ENABLE with webkit */
  .floating {
    -webkit-animation: floating 6s ease-in-out infinite !important;
    animation: floating 6s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
  }

  .floating-slow {
    -webkit-animation: floating 10s ease-in-out infinite !important;
    animation: floating 10s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
  }

  /* Scroll reveal animations - keep with webkit */
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right {
    -webkit-transition: all 0.6s ease-out !important;
    transition: all 0.6s ease-out !important;
  }

  /* CRITICAL: Allow floating animation to work with scroll-reveal */
  .scroll-reveal-right.floating.revealed {
    -webkit-animation: floating 6s ease-in-out infinite !important;
    animation: floating 6s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  .scroll-reveal-left.floating.revealed {
    -webkit-animation: floating 6s ease-in-out infinite !important;
    animation: floating 6s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  .scroll-reveal.floating.revealed {
    -webkit-animation: floating 6s ease-in-out infinite !important;
    animation: floating 6s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  /* Force floating even without .revealed class on mobile */
  .scroll-reveal-right.floating,
  .scroll-reveal-left.floating,
  .scroll-reveal.floating {
    -webkit-animation: floating 6s ease-in-out infinite !important;
    animation: floating 6s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    opacity: 1 !important;
  }

  /* HERO FLOATING CARD - Force animation on mobile */
  .hero-floating-card {
    -webkit-animation: floating 6s ease-in-out infinite !important;
    animation: floating 6s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transform: none;
    transform: none;
  }

  .hero-floating-card.revealed {
    -webkit-animation: floating 6s ease-in-out infinite !important;
    animation: floating 6s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    opacity: 1 !important;
  }
}

/* ============================================
   PRIORITY 2: Optimize Backdrop Filter on Mobile
   ============================================ */

@media (max-width: 768px) {
  /* Reduce blur intensity slightly for performance */
  .glass-card,
  .glass-panel,
  .bento-item {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* ============================================
   PRIORITY 3: Performance Hints
   ============================================ */

/* GPU acceleration for animated elements */
.scroll-reveal,
.scroll-reveal-left,
.scroll-reveal-right,
.feature-card,
.animate-on-scroll,
.floating,
.floating-slow,
.blob,
.particle {
  will-change: transform, opacity;
}

/* Reset will-change after animation completes - BUT keep for floating elements */
.scroll-reveal.revealed:not(.floating),
.scroll-reveal-left.revealed:not(.floating),
.scroll-reveal-right.revealed:not(.floating),
.feature-card.visible:not(.floating),
.animate-on-scroll.visible:not(.floating) {
  will-change: auto;
}

/* Keep will-change active for continuously animated elements */
.floating,
.floating-slow,
.floating.revealed,
.scroll-reveal-right.floating.revealed,
.scroll-reveal-left.floating.revealed,
.scroll-reveal.floating.revealed {
  will-change: transform !important;
}

/* ============================================
   PRIORITY 4: 3D Card and Button Effects
   ============================================ */

@media (max-width: 768px) {
  /* 3D card transforms - simplified but still animated */
  .card-3d {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card-3d:hover {
    transform: translateY(-8px) scale(1.02);
  }

  /* Magnetic buttons - keep animation */
  .btn-magnetic {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .btn-magnetic:hover {
    transform: translateY(-4px) scale(1.02);
  }

  /* Social links - keep animation */
  .social-link {
    transition: transform 0.2s ease;
  }

  .social-link:hover {
    transform: scale(1.15);
  }
}

/* ============================================
   PRIORITY 5: Parallax on Mobile
   ============================================ */

@media (max-width: 768px) {
  /* Keep parallax but with reduced effect */
  [data-parallax] {
    transition: transform 0.1s ease-out;
  }
}

/* ============================================
   PRIORITY 6: Hover Reveal Effects
   ============================================ */

@media (max-width: 768px) {
  .hover-reveal {
    transition: transform 0.3s ease;
  }

  .hover-reveal:hover {
    transform: translateY(-4px);
  }
}

/* ============================================
   PRIORITY 7: Touch Device Optimizations
   CRITICAL: Keep animations running on touch devices
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* FORCE ENABLE floating animations on touch devices with webkit */
  .floating {
    -webkit-animation: floating 6s ease-in-out infinite !important;
    animation: floating 6s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    opacity: 1 !important;
  }

  .floating-slow {
    -webkit-animation: floating 10s ease-in-out infinite !important;
    animation: floating 10s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    opacity: 1 !important;
  }

  /* Floating with scroll-reveal combinations - FORCE visible and animated */
  .scroll-reveal-right.floating,
  .scroll-reveal-left.floating,
  .scroll-reveal.floating,
  .scroll-reveal-right.floating.revealed,
  .scroll-reveal-left.floating.revealed,
  .scroll-reveal.floating.revealed {
    -webkit-animation: floating 6s ease-in-out infinite !important;
    animation: floating 6s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  /* HERO FLOATING CARD - Force animation on touch devices */
  .hero-floating-card,
  .hero-floating-card.revealed {
    -webkit-animation: floating 6s ease-in-out infinite !important;
    animation: floating 6s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  /* FORCE ENABLE blob animations with webkit */
  .blob,
  .blob-1,
  .blob-2,
  .blob-3 {
    -webkit-animation: blobFloat 25s ease-in-out infinite !important;
    animation: blobFloat 25s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    display: block !important;
    visibility: visible !important;
  }

  /* FORCE ENABLE mesh gradient animation with webkit */
  .gradient-mesh-bg::before {
    -webkit-animation: meshMove 25s ease-in-out infinite !important;
    animation: meshMove 25s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
  }

  /* FORCE ENABLE particle animations with webkit */
  .particle {
    -webkit-animation: particleFloat linear infinite !important;
    animation: particleFloat linear infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
  }

  .particles-container {
    display: block !important;
    visibility: visible !important;
  }

  /* Ensure blob container is visible */
  .blob-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Use active states for touch feedback */
  .card-3d:active {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-transition: transform 0.1s ease;
    transition: transform 0.1s ease;
  }

  .btn-magnetic:active {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
    -webkit-transition: transform 0.1s ease;
    transition: transform 0.1s ease;
  }

  .social-link:active {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-transition: transform 0.1s ease;
    transition: transform 0.1s ease;
  }

  /* Tech Icon Card - Touch feedback */
  .tech-icon-card:active {
    -webkit-transform: scale(0.92) !important;
    transform: scale(0.92) !important;
    -webkit-transition: transform 0.15s ease !important;
    transition: transform 0.15s ease !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5) !important;
    border-color: var(--color-secondary) !important;
    background: rgba(212, 175, 55, 0.1) !important;
  }

  /* Glass card touch feedback */
  .glass-card:active {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-transition: transform 0.1s ease;
    transition: transform 0.1s ease;
  }

  /* Hover reveal - use touch feedback instead */
  .hover-reveal:active {
    transform: translateY(-4px);
    transition: transform 0.2s ease;
  }

  /* Disable custom cursor on touch devices */
  .custom-cursor {
    display: none !important;
  }
}

/* ============================================
   PRIORITY 8: Small Screen Optimizations
   ============================================ */

@media (max-width: 480px) {
  /* Slightly slower animations on very small screens with webkit */
  .blob,
  .blob-1,
  .blob-2,
  .blob-3 {
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
  }

  .floating {
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
  }

  .floating-slow {
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
  }

  /* Reduce particle count further */
  .particle:nth-child(n+10) {
    display: none;
  }

  /* Force animations to run on very small screens */
  .scroll-reveal-right.floating,
  .scroll-reveal-left.floating,
  .scroll-reveal.floating {
    -webkit-animation: floating 8s ease-in-out infinite !important;
    animation: floating 8s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    opacity: 1 !important;
  }

  /* HERO FLOATING CARD - Force animation on very small screens */
  .hero-floating-card,
  .hero-floating-card.revealed {
    -webkit-animation: floating 8s ease-in-out infinite !important;
    animation: floating 8s ease-in-out infinite !important;
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ============================================
   PRIORITY 9: iOS Safari Specific Fixes
   ============================================ */

@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    /* Fix transform performance on iOS - exclude floating to not override animation */
    .card-3d:not(.floating),
    .btn-magnetic {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    /* Blobs use 3D transforms in their animation, add backface-visibility only */
    .blob,
    .blob-1,
    .blob-2,
    .blob-3 {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    /* Floating elements - use perspective for GPU acceleration without overriding transform */
    .floating,
    .floating-slow,
    .scroll-reveal-right.floating,
    .scroll-reveal-left.floating,
    .scroll-reveal.floating,
    .hero-floating-card {
      -webkit-perspective: 1000px;
      perspective: 1000px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    /* HERO FLOATING CARD - Force animation on iOS Safari */
    .hero-floating-card,
    .hero-floating-card.revealed {
      -webkit-animation: floating 6s ease-in-out infinite !important;
      animation: floating 6s ease-in-out infinite !important;
      -webkit-animation-play-state: running !important;
      animation-play-state: running !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
  }
}

/* ============================================
   PRIORITY 10: Accessibility - Respect User Preferences
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  /* Disable animations only for users who prefer reduced motion */
  *,
  *::before,
  *::after {
    animation: none !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   EMERGENCY KILL SWITCH
   Add class 'no-animations' to <body> to disable everything
   ============================================ */

body.no-animations,
body.no-animations * {
  animation: none !important;
  transition: none !important;
}

body.no-animations .blob,
body.no-animations .particle {
  display: none !important;
}

/* ============================================
   PRIORITY 11: FOOTER MOBILE FIXES
   Ensure footer is fully visible on mobile
   ============================================ */

@media (max-width: 768px) {
  /* Footer base - ensure full visibility */
  .footer {
    padding: var(--spacing-10) 0 var(--spacing-8) !important;
    margin-top: var(--spacing-10) !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* Footer container - ensure proper padding */
  .footer .container {
    padding: 0 var(--spacing-4) !important;
    overflow: visible !important;
  }

  /* Footer content grid - single column on mobile */
  .footer-content {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-8) !important;
    margin-bottom: var(--spacing-8) !important;
    overflow: visible !important;
  }

  /* Footer sections - full width and centered */
  .footer-section {
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }

  /* Footer logo container */
  .footer-logo {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: var(--spacing-4) !important;
  }

  .footer-logo img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
  }

  /* Footer tagline - CRITICAL: prevent truncation */
  .footer-tagline {
    font-size: var(--font-size-sm) !important;
    line-height: 1.6 !important;
    margin: var(--spacing-4) auto !important;
    padding: 0 var(--spacing-2) !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }

  /* Footer headings */
  .footer-heading,
  .footer-section h3 {
    font-size: var(--font-size-lg) !important;
    margin-bottom: var(--spacing-4) !important;
    color: var(--color-secondary) !important;
  }

  /* Footer links list */
  .footer-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--spacing-2) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

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

  .footer-links a {
    display: block !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
    min-height: 44px !important;
    font-size: var(--font-size-base) !important;
    text-align: center !important;
    border-radius: var(--radius-base) !important;
    -webkit-transition: all 0.2s ease !important;
    transition: all 0.2s ease !important;
  }

  /* Footer contact list */
  .footer-contact {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--spacing-3) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .footer-contact li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--spacing-2) !important;
    width: 100% !important;
    padding: var(--spacing-2) 0 !important;
    flex-wrap: wrap !important;
  }

  .footer-contact a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: var(--spacing-2) var(--spacing-3) !important;
    font-size: var(--font-size-sm) !important;
    word-break: break-word !important;
  }

  /* Social links container - CRITICAL: ensure wrapping */
  .social-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--spacing-3) !important;
    margin-top: var(--spacing-4) !important;
    padding: 0 var(--spacing-2) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Social link items - proper touch targets */
  .social-link {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-full) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    -webkit-transition: all 0.2s ease !important;
    transition: all 0.2s ease !important;
  }

  .social-link svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Footer bottom section - CRITICAL: ensure visibility */
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--spacing-4) !important;
    padding: var(--spacing-6) 0 var(--spacing-4) !important;
    margin-top: var(--spacing-4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: center !important;
    overflow: visible !important;
  }

  /* Copyright text */
  .copyright {
    font-size: var(--font-size-sm) !important;
    line-height: 1.5 !important;
    text-align: center !important;
    order: 2 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
    padding: 0 var(--spacing-2) !important;
  }

  /* Footer inline links - CRITICAL: ensure visibility */
  .footer-links-inline {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--spacing-3) !important;
    font-size: var(--font-size-sm) !important;
    order: 1 !important;
  }

  .footer-links-inline a {
    padding: var(--spacing-2) var(--spacing-3) !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-transition: all 0.2s ease !important;
    transition: all 0.2s ease !important;
  }

  .footer-links-inline .separator {
    display: none !important;
  }
}

/* Very small screens */
@media (max-width: 374px) {
  .footer {
    padding: var(--spacing-8) 0 var(--spacing-6) !important;
  }

  .footer-content {
    gap: var(--spacing-6) !important;
  }

  .footer-logo img {
    width: 44px !important;
    height: 44px !important;
  }

  .social-link {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .social-link svg {
    width: 20px !important;
    height: 20px !important;
  }

  .footer-tagline {
    font-size: var(--font-size-xs) !important;
  }

  .footer-bottom {
    padding: var(--spacing-4) 0 var(--spacing-6) !important;
  }

  .copyright {
    font-size: var(--font-size-xs) !important;
  }

  .footer-links-inline a {
    font-size: var(--font-size-xs) !important;
    padding: var(--spacing-2) !important;
  }
}

/* ============================================
   PRIORITY 11B: FOOTER BOTTOM VISIBILITY FIX
   Ensure footer bottom is always visible
   ============================================ */

@media (max-width: 768px) {
  /* Force footer bottom to be visible */
  .footer-bottom {
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    position: relative !important;
    z-index: 5 !important;
    min-height: 80px !important;
    padding-bottom: var(--spacing-6) !important;
  }

  /* Ensure copyright is visible with proper color */
  .copyright {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }

  /* Ensure footer inline links are visible */
  .footer-links-inline {
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
  }

  .footer-links-inline a {
    visibility: visible !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }

  /* Add bottom padding to account for mobile navigation bar */
  .footer {
    padding-bottom: calc(var(--spacing-8) + 20px) !important;
  }
}

/* ============================================
   PRIORITY 12: COMPREHENSIVE TOUCH/ACTIVE STATES
   Touch feedback for all interactive elements
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* ===== BUTTONS ===== */
  .btn:active {
    -webkit-transform: scale(0.96) !important;
    transform: scale(0.96) !important;
    opacity: 0.9 !important;
    -webkit-transition: transform 0.1s ease !important;
    transition: transform 0.1s ease !important;
  }

  .btn-primary:active {
    -webkit-transform: scale(0.96) !important;
    transform: scale(0.96) !important;
    background: var(--color-primary) !important;
    box-shadow: 0 0 15px rgba(11, 37, 69, 0.4) !important;
  }

  .btn-secondary:active {
    -webkit-transform: scale(0.96) !important;
    transform: scale(0.96) !important;
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: var(--color-secondary) !important;
  }

  /* ===== NAVIGATION LINKS ===== */
  .nav-link:active {
    -webkit-transform: scale(0.97) !important;
    transform: scale(0.97) !important;
    color: var(--color-secondary) !important;
    background: rgba(212, 175, 55, 0.1) !important;
    -webkit-transition: all 0.1s ease !important;
    transition: all 0.1s ease !important;
  }

  /* ===== FOOTER LINKS ===== */
  .footer-links a:active {
    -webkit-transform: scale(0.97) !important;
    transform: scale(0.97) !important;
    color: var(--color-secondary) !important;
    background: rgba(212, 175, 55, 0.15) !important;
    -webkit-transition: all 0.1s ease !important;
    transition: all 0.1s ease !important;
  }

  .footer-contact a:active {
    -webkit-transform: scale(0.97) !important;
    transform: scale(0.97) !important;
    color: var(--color-secondary) !important;
    -webkit-transition: all 0.1s ease !important;
    transition: all 0.1s ease !important;
  }

  .footer-links-inline a:active {
    -webkit-transform: scale(0.97) !important;
    transform: scale(0.97) !important;
    color: var(--color-secondary) !important;
    background: rgba(212, 175, 55, 0.15) !important;
    border-radius: var(--radius-base) !important;
    -webkit-transition: all 0.1s ease !important;
    transition: all 0.1s ease !important;
  }

  /* ===== SOCIAL LINKS ===== */
  .social-link:active {
    -webkit-transform: scale(0.9) !important;
    transform: scale(0.9) !important;
    background: var(--color-secondary) !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5) !important;
    -webkit-transition: all 0.1s ease !important;
    transition: all 0.1s ease !important;
  }

  .social-link:active svg {
    color: var(--color-primary) !important;
  }

  /* ===== CARDS ===== */
  .glass-card:active {
    -webkit-transform: scale(0.98) !important;
    transform: scale(0.98) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3) !important;
    -webkit-transition: all 0.15s ease !important;
    transition: all 0.15s ease !important;
  }

  .card-3d:active {
    -webkit-transform: scale(0.98) translateY(-2px) !important;
    transform: scale(0.98) translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
    -webkit-transition: all 0.15s ease !important;
    transition: all 0.15s ease !important;
  }

  /* ===== BENTO ITEMS ===== */
  .bento-item:active {
    -webkit-transform: scale(0.98) !important;
    transform: scale(0.98) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.25) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    -webkit-transition: all 0.15s ease !important;
    transition: all 0.15s ease !important;
  }

  /* ===== FEATURE CARDS ===== */
  .feature-card:active {
    -webkit-transform: scale(0.98) !important;
    transform: scale(0.98) !important;
    box-shadow: var(--shadow-glow) !important;
    -webkit-transition: all 0.15s ease !important;
    transition: all 0.15s ease !important;
  }

  /* ===== SERVICE ITEMS ===== */
  .service-item:active {
    -webkit-transform: scale(0.98) !important;
    transform: scale(0.98) !important;
    box-shadow: var(--shadow-glow) !important;
    -webkit-transition: all 0.15s ease !important;
    transition: all 0.15s ease !important;
  }

  /* ===== CONTACT CARDS ===== */
  .contact-card:active {
    -webkit-transform: scale(0.98) !important;
    transform: scale(0.98) !important;
    box-shadow: var(--shadow-glow) !important;
    -webkit-transition: all 0.15s ease !important;
    transition: all 0.15s ease !important;
  }

  /* ===== HOVER REVEAL ELEMENTS ===== */
  .hover-reveal:active {
    -webkit-transform: scale(0.98) !important;
    transform: scale(0.98) !important;
    -webkit-transition: all 0.15s ease !important;
    transition: all 0.15s ease !important;
  }

  /* ===== LANGUAGE SELECTOR ===== */
  .language-selector button:active {
    -webkit-transform: scale(0.95) !important;
    transform: scale(0.95) !important;
    background: rgba(212, 175, 55, 0.15) !important;
    -webkit-transition: all 0.1s ease !important;
    transition: all 0.1s ease !important;
  }

  .language-dropdown a:active {
    -webkit-transform: scale(0.97) !important;
    transform: scale(0.97) !important;
    background: rgba(212, 175, 55, 0.2) !important;
    color: var(--color-secondary) !important;
    -webkit-transition: all 0.1s ease !important;
    transition: all 0.1s ease !important;
  }

  /* ===== MOBILE MENU TOGGLE ===== */
  .mobile-menu-toggle:active {
    -webkit-transform: scale(0.9) !important;
    transform: scale(0.9) !important;
    background: rgba(212, 175, 55, 0.1) !important;
    border-radius: var(--radius-base) !important;
    -webkit-transition: all 0.1s ease !important;
    transition: all 0.1s ease !important;
  }

  /* ===== CTA BUTTONS ===== */
  .cta-section .btn:active {
    -webkit-transform: scale(0.96) !important;
    transform: scale(0.96) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4) !important;
    -webkit-transition: all 0.1s ease !important;
    transition: all 0.1s ease !important;
  }

  /* ===== FOOTER SITEMAP LINKS ===== */
  .footer-sitemap-link:active {
    -webkit-transform: scale(0.97) translateX(4px) !important;
    transform: scale(0.97) translateX(4px) !important;
    color: var(--color-secondary) !important;
    -webkit-transition: all 0.1s ease !important;
    transition: all 0.1s ease !important;
  }

  .footer-sitemap-section:active {
    -webkit-transform: scale(0.99) !important;
    transform: scale(0.99) !important;
    -webkit-transition: all 0.15s ease !important;
    transition: all 0.15s ease !important;
  }

  .footer-sitemap-cta-button:active {
    -webkit-transform: scale(0.96) !important;
    transform: scale(0.96) !important;
    background: transparent !important;
    color: var(--color-secondary) !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3) !important;
    -webkit-transition: all 0.1s ease !important;
    transition: all 0.1s ease !important;
  }

  /* ===== GENERAL LINKS ===== */
  a:active:not(.btn):not(.nav-link):not(.social-link):not(.footer-links a):not(.footer-links-inline a) {
    opacity: 0.8 !important;
    -webkit-transition: opacity 0.1s ease !important;
    transition: opacity 0.1s ease !important;
  }

  /* ===== DISABLE HOVER STATES ===== */
  .btn:hover,
  .nav-link:hover,
  .social-link:hover,
  .card-3d:hover,
  .glass-card:hover,
  .bento-item:hover,
  .feature-card:hover,
  .service-item:hover,
  .contact-card:hover,
  .footer-links a:hover,
  .footer-contact a:hover,
  .footer-links-inline a:hover,
  .footer-sitemap-link:hover,
  .footer-sitemap-section:hover {
    -webkit-transform: none !important;
    transform: none !important;
  }
}

/* ============================================
   PRIORITY 13: ENSURE ALL TOUCH TARGETS
   Minimum 44px touch targets for accessibility
   ============================================ */

@media (max-width: 768px) {
  /* Ensure all clickable elements have proper touch targets */
  .btn,
  .nav-link,
  .social-link,
  .footer-links a,
  .footer-contact a,
  .footer-links-inline a,
  .mobile-menu-toggle,
  .language-selector button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Links should be inline-flex for proper alignment */
  .footer-links a,
  .footer-contact a,
  .footer-links-inline a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Ensure body allows full scrolling */
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100vh !important;
  }

  /* Main content should not cut off footer */
  main,
  #main-content {
    overflow: visible !important;
  }

  /* Ensure sections don't cut off content */
  section {
    overflow: visible !important;
  }
}

/* ============================================
   PRIORITY 14: TOUCH-ACTION FOR BETTER SCROLLING
   Prevent touch delays and improve responsiveness
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Allow vertical scrolling on main content */
  body {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  /* Buttons and links should respond immediately */
  .btn,
  .nav-link,
  .social-link,
  .footer-links a,
  .footer-contact a,
  .footer-links-inline a,
  .tech-icon-card,
  .card-3d,
  .glass-card,
  .bento-item,
  .mobile-menu-toggle {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Horizontal scroll areas */
  .bento-grid {
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ============================================
   PRIORITY 15: iOS SAFE AREA SUPPORT
   Handle notch and home indicator
   ============================================ */

@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    /* Footer safe area padding for iOS */
    .footer {
      padding-bottom: max(calc(var(--spacing-8) + 20px), calc(env(safe-area-inset-bottom) + var(--spacing-6))) !important;
    }

    .footer-bottom {
      padding-bottom: max(var(--spacing-6), calc(env(safe-area-inset-bottom) + var(--spacing-4))) !important;
    }
  }
}

/* ============================================
   PRIORITY 16: ENSURE FULL PAGE SCROLLABILITY
   Fix any scroll blocking issues
   ============================================ */

@media (max-width: 768px) {
  /* Ensure html and body allow full scroll */
  html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
  }

  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
    position: relative !important;
  }

  /* Ensure main content doesn't block footer */
  main,
  #main-content,
  .main-content {
    overflow: visible !important;
    min-height: auto !important;
  }

  /* Ensure footer is at the bottom and visible */
  .footer {
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
}

/* ============================================
   PRIORITY 17: BENTO GRID MOBILE FIXES
   Fix stretched icons and card layout issues
   ============================================ */

@media (max-width: 768px) {
  /* Bento Grid - Proper vertical stack */
  .bento-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-4) !important;
  }

  /* All bento items - consistent styling */
  .bento-item,
  .bento-item-large,
  .bento-item-tall,
  .bento-item-wide {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    padding: var(--spacing-5) !important;
    background: var(--glass-bg) !important;
    border-radius: var(--radius-xl) !important;
  }

  /* Bento item inner - no stretch */
  .bento-item-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* CRITICAL: Fix feature icons - prevent stretching */
  .feature-icon,
  .feature-icon-primary,
  .feature-icon-secondary,
  .feature-icon-accent {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: flex-start !important;
  }

  .feature-icon-primary {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    margin-bottom: var(--spacing-4) !important;
    border-radius: var(--radius-xl) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .feature-icon-secondary,
  .feature-icon-accent {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    margin-bottom: var(--spacing-3) !important;
    border-radius: var(--radius-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .feature-icon-primary svg {
    width: 32px !important;
    height: 32px !important;
  }

  .feature-icon-secondary svg,
  .feature-icon-accent svg {
    width: 28px !important;
    height: 28px !important;
  }

  /* Hide accent bar on mobile - looks disconnected */
  .bento-accent-bar {
    display: none !important;
  }

  /* Bento titles - proper sizing */
  .bento-title {
    font-size: var(--font-size-lg) !important;
    margin-bottom: var(--spacing-2) !important;
    line-height: 1.3 !important;
  }

  .bento-title-sm {
    font-size: var(--font-size-base) !important;
    margin-bottom: var(--spacing-2) !important;
    line-height: 1.3 !important;
  }

  /* Bento description */
  .bento-description {
    font-size: var(--font-size-sm) !important;
    line-height: 1.5 !important;
    color: var(--color-text-secondary) !important;
  }

  /* Bento gradient backgrounds - subtle full card backgrounds */
  .bento-gradient-primary,
  .bento-gradient-secondary,
  .bento-gradient-accent {
    background: var(--glass-bg) !important;
  }

  /* Stats card - horizontal layout on mobile */
  .bento-stats-card {
    padding: var(--spacing-4) !important;
  }

  .bento-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--spacing-3) !important;
    width: 100% !important;
  }

  .bento-stat {
    text-align: center !important;
    padding: var(--spacing-3) var(--spacing-2) !important;
    background: rgba(212, 175, 55, 0.05) !important;
    border-radius: var(--radius-base) !important;
  }

  .bento-stat-value {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: var(--spacing-1) !important;
  }

  .bento-stat-label {
    font-size: 10px !important;
    color: var(--color-text-muted) !important;
    line-height: 1.2 !important;
  }
}

/* Very small screens - further adjustments */
@media (max-width: 374px) {
  .feature-icon-primary {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }

  .feature-icon-secondary,
  .feature-icon-accent {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }

  .feature-icon-primary svg {
    width: 28px !important;
    height: 28px !important;
  }

  .feature-icon-secondary svg,
  .feature-icon-accent svg {
    width: 24px !important;
    height: 24px !important;
  }

  .bento-stats-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-2) !important;
  }

  .bento-stat {
    padding: var(--spacing-2) !important;
  }

  .bento-stat-value {
    font-size: var(--font-size-base) !important;
  }

  .bento-stat-label {
    font-size: 9px !important;
  }
}