/* PrepLingo homepage mobile stability layer. Desktop styles are untouched. */

@media (max-width: 1050px) {
  #sec-hero .hero-page {
    min-height: auto !important;
    padding-top: 20px !important;
    padding-bottom: 30px !important;
    align-items: flex-start !important;
  }
  #sec-hero .hero {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  #sec-hero .layer {
    opacity: 1 !important;
    transform: none !important;
    translate: 0 0 !important;
    animation: none !important;
    will-change: auto !important;
  }
  #sec-hero .main-anim,
  #sec-hero .pulse-dot,
  #sec-hero .pulse_sec_hero-dot {
    display: none !important;
  }
}

@media (max-width: 767px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }
  .homepage-block {
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
  }

  #sec-hero .hero-page {
    padding: 12px 12px 24px !important;
  }
  #sec-hero .hero {
    width: 100% !important;
    gap: 18px !important;
  }
  #sec-hero .hero-left {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  #sec-hero .mini-tag {
    margin-bottom: 14px !important;
    padding: 8px 12px !important;
    font-size: 11.5px !important;
    animation: none !important;
  }
  #sec-hero h1 {
    max-width: 100% !important;
    margin: 0 auto 10px !important;
    font-size: clamp(30px, 8.8vw, 38px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.7px !important;
    animation: none !important;
  }
  #sec-hero .typing-area {
    width: 100% !important;
    min-height: 64px !important;
    margin-bottom: 14px !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    animation: none !important;
  }
  #sec-hero .typing-course {
    max-width: calc(100% - 14px) !important;
    min-width: 0 !important;
    font-size: clamp(24px, 7.2vw, 32px) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
  }
  #sec-hero .cursor {
    flex: 0 0 3px;
    width: 3px !important;
    height: 31px !important;
  }
  #sec-hero .lead-form {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 12px !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    border-radius: 14px !important;
    animation: none !important;
  }
  #sec-hero .lead-form .field,
  #sec-hero .lead-form .field.full,
  #sec-hero .other-field,
  #sec-hero .submit-btn,
  #sec-hero .form-msg {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  #sec-hero .hero-right {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
  #sec-hero .visual-stage {
    width: min(100%, 520px) !important;
    max-width: 100% !important;
    aspect-ratio: 1498 / 1050 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    contain: layout paint;
  }
  #sec-hero .layer {
    max-width: none !important;
    filter: none !important;
  }

  /* Decorative movement is reduced on phones to stop loading-time collisions. */
  #sec-night .night-art,
  #sec-night .mini-stars span,
  #sec-stats .floating-shape,
  #sec-stats .mini-spark,
  #sec-quality .icon-circle,
  #sec-quality .spark,
  #sec-fun-learning .backdrop,
  #sec-fun-learning .plant,
  #sec-fun-learning .leaf,
  #sec-fun-learning .arm-left,
  #sec-fun-learning .arm-right,
  #sec-fun-learning .laptop,
  #sec-fun-learning .badge,
  #sec-fun-learning .floater,
  #sec-options .art-blob,
  #sec-options .schedule-board,
  #sec-options .sun,
  #sec-options .moon,
  #sec-options .day-row,
  #sec-options .fill,
  #sec-options .option-pill,
  #sec-options .spark,
  #sec-world .globe-figure,
  #sec-world .globe-inner,
  #sec-testimonials .float-icon,
  #sec-faq .big-bubble,
  #sec-faq .mini-bubble,
  #sec-faq .spark,
  #sec-blog .floating-note {
    animation: none !important;
  }

  #sec-fun-learning .art-stage,
  #sec-options .art-zone,
  #sec-world .globe-area,
  #sec-testimonials .testimonial-stage,
  #sec-results .results-board,
  #sec-quality .quality-panel {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* More compact mobile section rhythm. */
  #sec-logo-slider .logo-section,
  #sec-courses .courses-section,
  #sec-night .night-section,
  #sec-results .results-section,
  #sec-quality .quality-section,
  #sec-fun-learning .fun-section,
  #sec-options .options-section,
  #sec-world .world-section,
  #sec-testimonials .testimonials-section,
  #sec-faq .faq-section,
  #sec-blog .blog-section,
  #sec-contact .contact-section {
    padding-top: 44px !important;
    padding-bottom: 48px !important;
  }
  #sec-stats .stats-section {
    padding-top: 20px !important;
    padding-bottom: 24px !important;
  }
}

@media (max-width: 420px) {
  #sec-hero .hero-page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #sec-hero h1 {
    font-size: clamp(28px, 8.5vw, 34px) !important;
  }
  #sec-hero .typing-course {
    font-size: clamp(22px, 6.8vw, 29px) !important;
  }
  #sec-hero .typing-area {
    min-height: 60px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sec-hero *, .homepage-block * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}