/* ========================================
   RESPONSIVE — Mobile Breakpoints
   ======================================== */

/* Tablet & below */
@media (max-width: 1024px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .split--reverse {
    direction: ltr;
  }

  .platform__grid {
    grid-template-columns: 1fr;
  }

  .analytics__grid {
    grid-template-columns: 1fr;
  }

  .cost__comparison {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .cost__vs {
    text-align: center;
  }

  .requirements__layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .requirements__circle {
    margin: 0 auto;
  }

  .apps__grid {
    grid-template-columns: 1fr;
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .spatial__bottom {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
    --section-padding: clamp(3rem, 6vw, 5rem);
  }

  /* Nav mobile — sidebar */
  .nav__toggle {
    display: flex;
  }

  .nav__links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 220px;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 30, 0, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--nav-height) + var(--space-lg)) var(--space-lg) var(--space-xl);
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    z-index: var(--z-nav);
  }

  .nav__links.open {
    transform: translateX(0);
  }

  .nav__links li {
    border-bottom: 1px solid rgba(192, 184, 122, 0.12);
  }

  .nav__links li:last-child {
    border-bottom: none;
  }

  .nav__links a {
    font-size: var(--text-sm);
    display: block;
    padding: 0.9em 0.5em;
    letter-spacing: 0.06em;
  }

  .nav__links a.active {
    color: var(--color-orange);
  }

  /* Grids to single column */
  .grid-2,
  .grid-3,
  .grid-4,
  .events__grid,
  .samples__grid,
  .multilingual__grid,
  .customise__grid,
  .spatial__top {
    grid-template-columns: 1fr;
  }

  .events__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  /* Hero adjustments */
  .hero__content {
    padding: var(--space-lg);
  }

  .hero__title {
    font-size: var(--text-4xl);
  }

  /* Footer */
  .footer__bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .events__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .circle-frame {
    width: 120px;
    height: 120px;
  }

  .hero__title {
    font-size: var(--text-3xl);
  }

  .hero__subtitle {
    font-size: var(--text-xl);
  }

  .platform__grid {
    gap: var(--space-md);
  }

  .card {
    padding: var(--space-lg);
  }
}


/* ---- Mobile: bg-slider--left (Models & Algorithms) ---- */
@media (max-width: 768px) {
  .bg-slider--left {
    min-height: auto;
    padding-bottom: var(--space-xl) !important;
  }

  .bg-slider--left .bg-slider__images {
    position: relative;
    aspect-ratio: 16 / 9;
  }

  .bg-slider__bottom {
    position: relative;
    padding-bottom: 0;
  }

  .bg-slider--left .section__header {
    text-align: left !important;
  }

  .radio-3d {
    flex-wrap: wrap;
  }

  .radio-3d__glass {
    display: none;
  }
}

/* ---- Mobile: hover-slider tap indicator ---- */
@media (max-width: 768px) {
  .hover-slider__text {
    padding: var(--space-xs) var(--space-sm);
  }
}