.mobile-desktop-warning {
  display: none;
}

@media (max-width: 768px) {

  /* Mobile-only desktop optimization warning */
  /* Mobile-only desktop optimization warning */
  .mobile-desktop-warning {
    display: block !important;
    background: rgba(15, 15, 20, 0.75); /* dark glass */
    color: #FFBF00; /* neon amber */
    text-align: center;
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 191, 0, 0.35); /* amber neon border */
    margin-bottom: 18px;
    backdrop-filter: blur(8px);
    letter-spacing: 0.4px;

    /* neon glow */
    text-shadow:
      0 0 6px rgba(255, 191, 0, 0.7),
      0 0 12px rgba(255, 191, 0, 0.5);

    border-radius: 6px;
 }



  /* Stack the entire navbar vertically */
  .nav-wrapper {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  /* Center and shrink the logo */
  .logo-img {
    width: 120px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Reduce the title size */
  header h1 {
    font-size: 1.4rem !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* Make nav vertical */
  header nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
  }

  /* Make each link full-width and centered */
  header nav .tab-link {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 10px 0 !important;
    font-size: 1rem !important;
  }

  /* ========================= */
/* SCROLL SECTION — MOBILE   */
/* ========================= */

.scroll-section {
  padding: 2rem 1rem !important;
}

.scroll-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

/* Each step becomes full-width and centered */
.scroll-step {
  width: 100% !important;
  text-align: center !important;
  padding: 0 10px !important;
}

/* Titles shrink slightly */
.scroll-step h3 {
  font-size: 1.3rem !important;
  margin-bottom: 0.5rem !important;
}

/* Paragraphs scale down */
.scroll-step p {
  font-size: 1rem !important;
  line-height: 1.45 !important;
}

/* Image becomes centered and full-width */
.scroll-visual img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Remove parallax overflow issues */
.parallax-wrap {
  overflow: hidden !important;
  width: 100% !important;
}

/* Disable left/right animation directions on mobile */
.from-left,
.from-right {
  transform: none !important;
  opacity: 1 !important;
}

/* ========================= */
/* IMAGE MARQUEE — MOBILE    */
/* ========================= */

.image-marquee {
  height: auto !important;
  padding: 1rem 0 !important;
  overflow: hidden !important;
}

/* Track becomes tighter */
.image-track {
  display: flex !important;
  gap: 12px !important;
  padding: 0 10px !important;
}

/* Each card becomes smaller */
.image-card {
  min-width: 180px !important;   /* desktop is ~300px */
  max-width: 180px !important;
  flex: 0 0 180px !important;
  text-align: center !important;
}

/* Images shrink */
.image-card {
  min-width: 160px !important;
  max-width: 160px !important;
  flex: 0 0 160px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}

/* Captions shrink */
.image-caption {
  font-size: 0.75rem !important;
  line-height: 1.25 !important;
  text-align: center !important;
  margin-top: 4px !important;
  padding: 0 6px !important;

  /* Prevent captions from growing too tall */
  max-height: 48px !important;
  overflow: hidden !important;

  /* Smooth wrapping */
  white-space: normal !important;
  word-break: break-word !important;
}

/* Make sure captions don't overlap each other */
.image-card img {
  margin-bottom: 4px !important;
}

/* Reduce fade mask height */
.fade-mask {
  height: auto !important;
}

/* Prevent overflow */
.image-marquee,
.image-track {
  overflow-x: hidden !important;
}

/* Completely disable circular layout */
  .cycle {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2rem !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  /* Remove ALL absolute positioning from nodes */
  .node {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 360px !important;
    padding: 1rem !important;
    text-align: center !important;
    z-index: 1 !important;
  }

  /* Remove circular offsets */
  .node[style] {
    position: static !important;
    transform: none !important;
  }

  /* Fix nodeCircle */
  .nodeCircle {
    width: 90px !important;
    height: 90px !important;
    margin: 0 auto !important;
    position: relative !important;
  }

  .nodeCircle img {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
  }

  /* Step number */
  .stepNumber {
    font-size: 1rem !important;
    right: 4px !important;
    bottom: 4px !important;
  }

  /* Labels */
  .nodeLabel {
    font-size: 1.1rem !important;
    margin-top: 10px !important;
  }

  /* Descriptions */
  .nodeDescription {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    margin-top: 6px !important;
    padding: 0 10px !important;
  }

  /* Center title */
  .center {
    position: static !important;
    transform: none !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
  }

  .centerTitle {
    font-size: 1.4rem !important;
  }

  .centerSub {
    font-size: 1.2rem !important;
  }

}