/* ==========================================================================
   rotis - RESPONSIVE DESIGN (Desktop, Laptop, Tablet, Mobile)
   Pixel-perfect across all screen sizes with zero badge collisions
   ========================================================================== */

/* 1. Large Laptops & Small Desktops (<= 1200px) */
@media (max-width: 1200px) {
  .card-stack-permissions { left: 4%; width: 230px; }
  .card-users-metric { left: 2%; }
  .card-analytics-chart { left: auto; right: 4%; width: 210px; }
  .card-profitability-index { left: auto; right: 2%; }
  .numbers-bento-grid { grid-template-columns: 1fr; }
  .connect-banner-card { grid-template-columns: 1fr; }
}

/* 2. Tablets in Landscape & Portrait (769px - 1024px) */
@media (max-width: 1024px) {
  .site-header { padding-inline: 24px; }
  .nav-island { display: none; }
  
  /* Hero Floating Cards on Tablet: Scale & Clean Spacing */
  .card-stack-permissions {
    left: 20px;
    top: 50px;
    width: 210px;
    transform: scale(0.85);
    transform-origin: top left;
  }
  
  .card-analytics-chart {
    left: auto;
    right: 20px;
    top: 50px;
    width: 190px;
    transform: scale(0.85);
    transform-origin: top right;
  }

  .card-total-profit {
    top: 290px;
    transform: translateX(-50%) scale(0.92);
  }
  
  /* Hide minor outer badges to keep tablet uncluttered */
  .card-users-metric { display: none !important; }
  .card-profitability-index { display: none !important; }

  /* Partner Dock on Tablet: Never show scrollbar */
  .partner-dock-container {
    width: 95%;
    max-width: 860px;
    margin: 28px auto 60px;
  }

  .partner-dock-bar {
    padding: 14px 28px;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .partner-dock-bar::-webkit-scrollbar {
    display: none;
  }

  /* Grid Layouts on Tablet */
  .console-body-grid, 
  .askue-interactive-grid, 
  .monitoring-grid, 
  .roi-calculator-card,
  .three-features-grid,
  .carousel-card-slide {
    grid-template-columns: 1fr;
  }

  .footer-top-row { grid-template-columns: 1fr; text-align: center; }
  .text-right-col { text-align: center; }
}

/* 3. Small Tablets & Mobile Phones (<= 768px) */
@media (max-width: 768px) {
  .site-header {
    height: 64px;
    padding-inline: 16px;
  }

  .hero-headline {
    font-size: 30px;
    line-height: 1.25;
    padding-inline: 12px;
  }

  .hero-subhead {
    font-size: 13.5px;
    line-height: 1.55;
    padding-inline: 14px;
    margin-bottom: 24px;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    gap: 10px;
  }

  .btn-primary-hero, .btn-secondary-hero {
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    font-size: 13.5px;
  }

  /* 3D GLOBE STAGE ON MOBILE: Keep clean, prevent card collisions */
  .globe-stage-wrapper {
    height: 460px;
    margin-top: 10px;
  }

  #globe-canvas {
    width: 100%;
    height: 440px;
  }

  /* CRITICAL FIX: Hide side satellite badges on mobile to prevent overlapping */
  .card-stack-permissions { display: none !important; }
  .card-analytics-chart { display: none !important; }
  .card-users-metric { display: none !important; }
  .card-profitability-index { display: none !important; }

  /* ONLY show the primary hero metric card centered */
  .card-total-profit {
    top: 170px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 320px !important;
    padding: 14px 16px !important;
    z-index: 20 !important;
  }

  .profit-val-row .profit-num {
    font-size: 26px !important;
  }

  /* PARTNER DOCK ON MOBILE: Smooth scroll, NO ugly browser scrollbars */
  .partner-dock-container {
    width: 94%;
    margin: 20px auto 48px;
  }

  .partner-dock-bar {
    padding: 10px 16px;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }

  .partner-dock-bar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .partner-logo-item {
    flex-shrink: 0;
  }

  /* Bento & Features on Mobile */
  .bento-card {
    padding: 20px 18px;
  }

  .presets-row {
    grid-template-columns: 1fr;
  }

  .phase-metrics-row {
    grid-template-columns: 1fr;
  }

  /* Testimonials Avatars */
  .arched-avatars-row {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

  .arched-avatar-item {
    transform: none !important;
  }

  /* Footer on Mobile */
  .footer-compact-nav-row {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .footer-links-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
}

/* 4. Ultra-Small Devices (<= 400px) */
@media (max-width: 400px) {
  .hero-headline { font-size: 26px; }
  .card-total-profit { width: 94% !important; top: 150px !important; }
}