/* ==========================================================
   ROLAVI MOBILE OPTIMIZATION
   This file is loaded after the page styles to improve the
   experience on phones and small tablets without changing
   the desktop design.
   ========================================================== */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe {
  max-width: 100%;
}

@media (max-width: 980px) {
  :root {
    --header-height: 68px;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  .site-header {
    height: var(--header-height) !important;
  }

  .header-inner {
    gap: 10px !important;
  }

  .brand img {
    width: clamp(128px, 34vw, 168px) !important;
  }

  .nav-shop {
    display: none !important;
  }

  .language-switcher {
    display: flex !important;
    gap: 5px !important;
  }

  .lang-chip {
    width: 34px !important;
    height: 29px !important;
    border-radius: 9px !important;
  }

  .lang-chip img {
    width: 21px !important;
    height: 14px !important;
  }

  .menu-toggle {
    display: grid !important;
    place-items: center;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 13px !important;
  }

  .menu-toggle span {
    width: 19px !important;
    margin: 3px auto !important;
  }

  .main-nav {
    position: fixed !important;
    top: var(--header-height) !important;
    left: 12px !important;
    right: 12px !important;
    display: grid !important;
    gap: 0 !important;
    justify-content: stretch !important;
    padding: 10px 16px 14px !important;
    border-radius: 0 0 24px 24px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(8,18,32,.08) !important;
    box-shadow: 0 28px 60px rgba(7,17,31,.18) !important;
    max-height: calc(100svh - var(--header-height) - 16px);
    overflow-y: auto;
    transform: translateY(-130%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .22s ease, opacity .22s ease !important;
    z-index: 999 !important;
  }

  body.nav-open .main-nav {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .main-nav a {
    padding: 14px 2px !important;
    border-bottom: 1px solid #edf2f7 !important;
    font-size: 12px !important;
    letter-spacing: .07em !important;
  }

  .main-nav a:last-child {
    border-bottom: 0 !important;
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .menu-toggle span:nth-child(1) {
    transform: translateY(5px) rotate(45deg) !important;
  }

  body.nav-open .menu-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  body.nav-open .menu-toggle span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg) !important;
  }

  .container {
    width: min(100% - 28px, var(--container)) !important;
  }

  .hero-catch {
    min-height: auto !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding-top: 46px !important;
    padding-bottom: 54px !important;
  }

  .hero-content {
    text-align: center !important;
    max-width: 760px;
    margin-inline: auto;
  }

  .hero-content .app-lockup,
  .hero-content .app-lockup.app-lockup-stacked {
    margin-inline: auto !important;
    justify-items: center !important;
  }

  .hero-title {
    max-width: 100% !important;
    font-size: clamp(2.45rem, 11.5vw, 4.2rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.052em !important;
    text-align: center !important;
  }

  .hero-title strong {
    letter-spacing: -0.052em !important;
  }

  .hero-copy {
    max-width: 620px !important;
    margin: 18px auto 0 !important;
    font-size: clamp(1.05rem, 4.4vw, 1.35rem) !important;
    line-height: 1.36 !important;
    text-align: center !important;
  }

  .hero-actions {
    justify-content: center !important;
    gap: 12px !important;
  }

  .hero-actions .btn,
  .card-actions .small-link,
  .resource-actions .btn {
    min-height: 44px;
  }

  .hero-metrics {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    text-align: left;
  }

  .metric-card {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .phone-stage {
    min-height: 430px !important;
    padding: 0 0 24px !important;
    transform: none !important;
  }

  .phone-device {
    width: min(258px, 67vw) !important;
    transform: rotateZ(4deg) rotateY(-4deg) rotateX(1deg) !important;
    border-radius: 36px !important;
  }

  .phone-screen-mask,
  .phone-glass {
    inset: 4px !important;
    border-radius: 31px !important;
    clip-path: inset(0 round 31px) !important;
    -webkit-clip-path: inset(0 round 31px) !important;
  }

  .phone-youtube-canvas iframe {
    transform: scale(var(--phone-video-scale, .24)) translateZ(0) !important;
  }

  .page-hero {
    padding: 54px 0 44px !important;
  }

  .page-hero h1,
  .section-heading h2,
  .ecosystem-copy h2,
  .cta-panel h2 {
    font-size: clamp(2rem, 9vw, 3.3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.045em !important;
  }

  .page-hero p,
  .section-heading p,
  .ecosystem-copy .lead {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .section {
    padding: 58px 0 !important;
  }

  .section-heading {
    margin-bottom: 26px !important;
  }

  .feature-grid,
  .product-strip,
  .usecase-grid,
  .manual-grid,
  .software-grid,
  .video-grid,
  .values-grid,
  .product-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .feature-card,
  .product-mini,
  .usecase-card,
  .resource-card,
  .software-card,
  .value-card,
  .video-play-card,
  .product-detail-card {
    border-radius: 24px !important;
  }

  .product-mini img,
  .software-card img,
  .video-play-card img {
    max-height: none !important;
  }

  .product-mini-body,
  .product-detail-body,
  .software-card,
  .resource-card {
    padding: 22px !important;
  }

  .ecosystem-grid,
  .contact-layout,
  .about-grid,
  .video-band,
  .workflow-row,
  .workflow-row:nth-child(even),
  .cta-panel {
    grid-template-columns: 1fr !important;
  }

  .workflow-row {
    gap: 20px !important;
    padding: 18px !important;
    border-radius: 26px !important;
  }

  .workflow-row:nth-child(even) .workflow-image {
    order: 0 !important;
  }

  .workflow-image,
  .workflow-image.workflow-media {
    min-height: 230px !important;
    border-radius: 22px !important;
  }

  .workflow-video-card {
    aspect-ratio: 16 / 9;
  }

  .workflow-video-card iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .workflow-zoom-trigger {
    min-height: 260px !important;
    padding: 12px !important;
  }

  .workflow-zoom-trigger img {
    max-height: 320px !important;
  }

  .solution-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .solution-card,
  .solution-card.is-tall {
    min-height: 360px !important;
    border-radius: 24px !important;
  }

  .solution-card-content {
    padding: 22px 18px 20px !important;
  }

  .solution-card h3 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
  }

  .solution-intro-note {
    border-radius: 18px !important;
    align-items: flex-start !important;
  }

  .compare-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
  }

  .compare-table th,
  .compare-table td {
    min-width: 150px;
    padding: 12px !important;
  }

  .video-play-card .video-thumb-wrap img,
  .rolavi-video-card .video-thumb-wrap img,
  .final-video-ratio,
  .video-frame,
  .video-preview {
    aspect-ratio: 16 / 9 !important;
  }

  .final-video-heading {
    text-align: center !important;
  }

  .final-video-note {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .form-row,
  .spec-list {
    grid-template-columns: 1fr !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    text-align: center !important;
  }

  .footer-logo {
    margin-inline: auto !important;
  }

  .footer-links,
  .social-row {
    align-items: center !important;
    justify-content: center !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .whatsapp-float {
    width: 58px !important;
    height: 58px !important;
    right: 16px !important;
    bottom: 16px !important;
  }

  .whatsapp-float svg {
    width: 29px !important;
    height: 29px !important;
  }
}

@media (max-width: 520px) {
  .brand img {
    width: 128px !important;
  }

  .header-actions {
    gap: 6px !important;
  }

  .language-switcher {
    gap: 4px !important;
  }

  .lang-chip {
    width: 31px !important;
    height: 27px !important;
  }

  .lang-chip img {
    width: 19px !important;
    height: 13px !important;
  }

  .menu-toggle {
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
  }

  .hero-grid {
    padding-top: 34px !important;
    gap: 28px !important;
  }

  .hero-title {
    font-size: clamp(2.15rem, 12.8vw, 3.1rem) !important;
  }

  .hero-copy {
    font-size: 1.02rem !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  .hero-actions .btn,
  .resource-actions .btn,
  .card-actions .small-link {
    width: 100%;
    justify-content: center;
  }

  .phone-stage {
    min-height: 385px !important;
  }

  .phone-device {
    width: min(230px, 70vw) !important;
  }

  .page-hero h1,
  .section-heading h2,
  .ecosystem-copy h2,
  .cta-panel h2 {
    font-size: clamp(1.85rem, 9.7vw, 2.65rem) !important;
  }

  .workflow-text h3 {
    font-size: clamp(1.5rem, 8vw, 2.1rem) !important;
  }

  .section {
    padding: 46px 0 !important;
  }

  .product-mini-body,
  .product-detail-body,
  .software-card,
  .resource-card,
  .install-box,
  .notice-box,
  .contact-card,
  .about-card {
    padding: 20px !important;
  }

  .solution-card,
  .solution-card.is-tall {
    min-height: 330px !important;
  }

  .rolavi-carousel-stage {
    min-height: 620px !important;
  }

  .rolavi-slide img {
    max-height: 470px !important;
  }
}