/**
 * Mobile-only performance — hero LCP, lighter paint, layout before Bootstrap loads
 */

@media (max-width: 991.98px) {
  :root {
    --background-color: #0b1120;
    --default-color: #9ca3af;
    --heading-color: #f9fafb;
    --accent-highlight: #06b6d4;
    --default-font: "Roboto", system-ui, sans-serif;
    --heading-font: "Mulish", system-ui, sans-serif;
  }

  body.index-page {
    background: var(--background-color);
  }

  /* Hero paints before Bootstrap (loaded async on mobile) */
  .hero .container {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 1rem;
  }

  .hero-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 0;
  }

  .hero-content-col,
  .hero-visual-col {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }

  .hero-visual-col {
    order: 2;
  }

  .hero-content-col {
    order: 1;
  }

  /* AOS loads late — never hide hero or first screen */
  #hero [data-aos],
  #hero [data-aos].aos-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero {
    min-height: auto;
    padding-top: 88px;
    padding-bottom: 32px;
  }

  .hero .hero-portrait {
    max-width: min(100%, 320px);
    margin-inline: auto;
  }

  .hero-visual-glow {
    filter: blur(24px);
  }

  .hero-mesh {
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.2), transparent 55%),
      linear-gradient(180deg, #0b1120 0%, #0f172a 100%);
  }
}