/* ========================================
   MODERN REDESIGN - RESPONSIVE STYLES
   Mobile-first responsive design for all new modern layouts
======================================== */

/* Tablet and Below (1024px) */
@media (max-width: 1024px) {
  /* Hero Section */
  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    padding: var(--spacing-md);
  }

  .hero-diagonal-shape {
    right: 30%;
    width: 600px;
  }

  .hero-content-right {
    display: none; /* Hide visual elements on tablet */
  }

  .hero-stats-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Bento Grid */
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }

  .bento-large {
    grid-column: span 2;
    grid-row: span 2;
  }

  .bento-medium {
    grid-column: span 2;
    grid-row: span 1;
  }

  .bento-small {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Services Staggered */
  .service-right,
  .service-left,
  .service-center {
    max-width: 100%;
    margin: 0;
  }

  .service-card-modern {
    grid-template-columns: auto 1fr;
    gap: var(--spacing-md);
  }

  .service-icon-modern {
    grid-row: span 2;
  }

  .service-badge {
    font-size: 2.5rem;
  }
}

/* Tablet Portrait (768px) */
@media (max-width: 768px) {
  /* Hero Section */
  .hero-title-modern {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .hero-title-accent {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
  }

  .hero-description {
    font-size: 1.0625rem;
  }

  .hero-stats-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
  }

  .stat-value {
    font-size: 2rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .btn-hero {
    width: 100%;
    justify-content: center;
  }

  /* Modern Section Headers */
  .section-title-large {
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .section-description {
    font-size: 1.0625rem;
  }

  /* Bento Grid - Single Column */
  .bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .bento-large,
  .bento-medium,
  .bento-small {
    grid-column: span 1;
    grid-row: span 1;
  }

  .bento-item {
    padding: var(--spacing-md);
  }

  .bento-content h3 {
    font-size: 1.5rem;
  }

  /* Services */
  .service-card-modern {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .service-icon-modern {
    margin: 0 auto;
    grid-row: auto;
  }

  .service-badge {
    font-size: 2rem;
    text-align: center;
  }

  .service-card-modern:hover,
  .service-left:hover {
    transform: translateY(-8px) scale(1.02);
  }

  .service-body h3 {
    font-size: 1.25rem;
  }
}

/* Mobile (640px) */
@media (max-width: 640px) {
  /* Hero */
  .hero-title-modern {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .hero-title-accent {
    font-size: 1.25rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  .hero-stats-cards {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .hero-stat-card {
    padding: var(--spacing-sm);
  }

  .stat-value {
    font-size: 1.75rem;
  }

  .btn-hero {
    padding: 1rem 2rem;
    font-size: 1rem;
  }

  /* Section Headers */
  .section-label {
    font-size: 0.8125rem;
  }

  .label-line {
    width: 20px;
  }

  .section-title-large {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .section-description {
    font-size: 1rem;
  }

  /* Bento Grid */
  .bento-item {
    padding: var(--spacing-md);
  }

  .bento-content h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
  }

  .bento-content p {
    font-size: 0.9375rem;
  }

  .bento-icon-badge {
    width: 48px;
    height: 48px;
  }

  .bento-icon-large {
    width: 56px;
    height: 56px;
  }

  .value-icon-compact {
    width: 40px;
    height: 40px;
  }

  .value-icon-compact svg {
    width: 20px;
    height: 20px;
  }

  .bento-content-compact h4 {
    font-size: 0.9375rem;
  }

  /* Services */
  .service-card-modern {
    padding: var(--spacing-md);
  }

  .service-icon-modern {
    width: 56px;
    height: 56px;
  }

  .service-badge {
    font-size: 1.75rem;
  }

  .service-body h3 {
    font-size: 1.125rem;
  }

  .service-features-modern li {
    font-size: 0.9375rem;
  }
}

/* Mobile Portrait (480px) */
@media (max-width: 480px) {
  /* Hero */
  .hero-container {
    padding: var(--spacing-sm);
  }

  .hero-badge {
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
  }

  .badge-dot {
    width: 6px;
    height: 6px;
  }

  .hero-title-modern {
    font-size: clamp(1.75rem, 12vw, 2.5rem);
    margin-bottom: var(--spacing-sm);
  }

  .hero-title-accent {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-md);
  }

  .hero-description {
    font-size: 0.9375rem;
    margin-bottom: var(--spacing-md);
  }

  .btn-hero {
    padding: 0.875rem 1.75rem;
    font-size: 0.9375rem;
  }

  /* Section Labels */
  .section-label {
    font-size: 0.75rem;
    gap: 0.5rem;
  }

  .label-text {
    padding: 0.375rem 1rem;
  }

  .section-title-large {
    font-size: clamp(1.5rem, 10vw, 2rem);
  }

  .section-description {
    font-size: 0.9375rem;
  }

  /* Bento Grid */
  .bento-grid {
    gap: var(--spacing-sm);
  }

  .bento-item {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .bento-content h3 {
    font-size: 1.125rem;
  }

  .bento-content p {
    font-size: 0.875rem;
  }

  .bento-icon-badge {
    width: 40px;
    height: 40px;
  }

  .bento-icon-badge svg {
    width: 24px;
    height: 24px;
  }

  .bento-icon-large {
    width: 48px;
    height: 48px;
  }

  .bento-icon-large svg {
    width: 32px;
    height: 32px;
  }

  .value-icon-compact {
    width: 36px;
    height: 36px;
  }

  .bento-content-compact h4 {
    font-size: 0.875rem;
  }

  /* Services */
  .services-staggered {
    gap: var(--spacing-md);
  }

  .service-card-modern {
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .service-badge {
    font-size: 1.5rem;
  }

  .service-icon-modern {
    width: 48px;
    height: 48px;
  }

  .service-icon-modern svg {
    width: 28px;
    height: 28px;
  }

  .service-body h3 {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
  }

  .service-features-modern li {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
  }
}

/* Very Small Devices (360px) */
@media (max-width: 360px) {
  .hero-title-modern {
    font-size: 1.5rem;
  }

  .hero-title-accent {
    font-size: 1rem;
  }

  .hero-description {
    font-size: 0.875rem;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.6875rem;
  }

  .section-title-large {
    font-size: 1.5rem;
  }

  .service-badge {
    font-size: 1.25rem;
  }
}

/* ========================================
   MOBILE FLICKERING FIXES
   Hardware acceleration and touch optimization
======================================== */

/* Hardware acceleration for all animated elements */
.hero-stat-card,
.service-card-modern,
.service-left,
.service-right,
.service-center,
.bento-item,
.card,
.animate-on-scroll,
.hero-visual-card,
.floating-shape {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .service-card-modern:hover,
  .service-left:hover,
  .service-right:hover,
  .service-center:hover,
  .bento-item:hover,
  .card:hover {
    transform: none !important;
  }

  /* Remove hover transitions on touch devices */
  .service-card-modern,
  .service-left,
  .service-right,
  .service-center,
  .bento-item,
  .card {
    transition: none !important;
  }
}

/* Optimize animations for mobile performance */
@media (max-width: 768px) {
  /* Reduce animation complexity on mobile */
  .animate-on-scroll {
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  /* UNIFIED BACKGROUND - Stop body gradient animation and create seamless background */
  body {
    background: #07234a !important;
    background-image: none !important;
    background-attachment: scroll !important;
    animation: none !important;
  }

  /* Remove animated body overlay */
  body::before {
    display: none !important;
    animation: none !important;
  }

  /* Make ALL sections transparent so background flows seamlessly */
  .section,
  section,
  .hero-section,
  .services-section,
  .bento-section,
  .mv-section,
  .about-section,
  .contact-section,
  main,
  article,
  [class*="section"] {
    background: transparent !important;
    background-image: none !important;
  }

  /* DISABLE ALL ANIMATED BACKGROUNDS ON MOBILE - This fixes flickering */
  .floating-shape,
  .hero-visual-card,
  .visual-card-glow,
  .services-bg-shape,
  .shape-circle-1,
  .shape-circle-2,
  #particles-js,
  .particles-canvas {
    animation: none !important;
    display: none !important;
  }

  /* Disable all shimmer/sliding effects that cause flickering */
  .mv-card::before,
  .mv-card::after,
  .value-item::before,
  .value-item::after,
  .value-icon::before,
  .value-icon::after,
  .service-detail-card::before,
  .service-detail-card::after,
  .mission-card::before,
  .mission-card::after,
  .vision-card::before,
  .vision-card::after,
  .service-modern-card::before,
  .service-modern-card::after,
  .bento-item::before,
  .bento-item::after,
  .service-card-modern::before,
  .service-card-modern::after,
  [class*="shimmer"],
  [class*="glow"] {
    animation: none !important;
    background: none !important;
    opacity: 0 !important;
    display: none !important;
  }

  /* AGGRESSIVE: Disable ALL animations on mobile */
  * {
    animation: none !important;
    -webkit-animation: none !important;
  }

  /* Re-enable only safe animations */
  .animate-on-scroll.is-visible {
    animation: none !important;
    transition: opacity 0.3s ease;
  }

  /* Ensure smooth scrolling with hardware acceleration */
  body {
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent flickering during scroll */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* DISABLE backdrop-filter on mobile - major cause of flickering on iPhone */
  .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(7, 35, 74, 0.98) !important;
  }

  .site-header.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(7, 35, 74, 1) !important;
  }

  /* Hardware acceleration for fixed elements */
  .site-header,
  .mobile-menu-toggle,
  .menu-container {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Reduce repaints during scroll */
  .section,
  .hero-container,
  .services-section,
  .bento-section {
    will-change: auto;
  }

  /* Disable bounce animation on scroll indicator */
  .scroll-indicator {
    animation: none !important;
  }

  /* Disable box-shadow animations that cause flickering */
  .service-card-modern,
  .bento-item,
  .mv-card,
  .card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: none !important;
  }

  .service-card-modern:hover,
  .bento-item:hover,
  .mv-card:hover,
  .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transform: none !important;
  }
}

/* ========================================
   Scroll Animations - Intersection Observer Compatible
======================================== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-slide-up {
  animation: slideUp 1s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .floating-shape,
  .hero-visual-card,
  .visual-card-glow,
  .services-bg-shape {
    animation: none !important;
  }
}