/* ============================================
   EMERGENCY MOBILE FIX - Card Overlap Issues
   ============================================ */

@media (max-width: 768px) {
  /* ============================================
     CRYSTAL SECTION FIX - Prevent Card Overlap
     ============================================ */
  
  .crystal-section {
    padding: 60px 20px !important;
    min-height: auto !important;
    perspective: none !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* Header MUST stay above cards */
  .crystal-header {
    position: relative !important;
    z-index: 100 !important;
    margin-bottom: 40px !important;
    background: transparent !important;
  }

  .crystal-header h2 {
    position: relative !important;
    z-index: 101 !important;
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  .crystal-header p {
    position: relative !important;
    z-index: 101 !important;
    font-size: 15px !important;
  }

  /* Island container */
  .crystal-island {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 !important;
    transform-style: flat !important;
    perspective: none !important;
    z-index: 1 !important;
  }

  /* Hub card */
  .crystal-hub {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 24px !important;
    z-index: 1 !important;
    order: -1 !important; /* Hub first */
  }

  /* Satellite cards */
  .crystal-satellite {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
    z-index: 1 !important;
    animation: none !important;
  }

  .satellite-inner {
    transform: none !important;
    padding: 20px !important;
  }

  .satellite-icon {
    transform: none !important;
  }

  /* ============================================
     HOLO CARDS FIX
     ============================================ */
  
  .services-holo-section {
    padding: 60px 20px !important;
    position: relative !important;
  }

  .services-header {
    position: relative !important;
    z-index: 100 !important;
    margin-bottom: 30px !important;
  }

  .services-header h2 {
    position: relative !important;
    z-index: 101 !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

  .holo-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .holo-card {
    position: relative !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    transform: none !important;
  }

  .holo-card:nth-child(5) {
    grid-column: auto !important;
    max-width: 100% !important;
  }

  .holo-card-inner {
    transform: none !important;
    padding: 24px !important;
    position: relative !important;
  }

  .holo-card-content {
    transform: none !important;
  }

  .holo-icon-inner {
    transform: none !important;
  }

  /* ============================================
     SIDE CARDS FIX
     ============================================ */
  
  .two-sides-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .side-card {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 24px !important;
    transform: none !important;
    z-index: 1 !important;
  }

  /* ============================================
     REMOVE ANIMATIONS THAT CAUSE ISSUES
     ============================================ */
  
  .crystal-bg-effects,
  .crystal-orb,
  .ambient-floaters,
  .floater {
    display: none !important;
  }

  /* ============================================
     SECTION SPACING FIX
     ============================================ */
  
  section {
    position: relative !important;
  }

  .section-header {
    position: relative !important;
    z-index: 50 !important;
    margin-bottom: 30px !important;
  }

  h1, h2, h3 {
    position: relative !important;
    z-index: 51 !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .crystal-header h2 {
    font-size: 22px !important;
  }

  .crystal-hub,
  .crystal-satellite,
  .side-card,
  .holo-card-inner {
    padding: 20px !important;
  }
}