/* ============================================
   MOBILE PERFORMANCE OVERRIDES
   ============================================ */

@media (max-width: 768px) {
  html {
    scroll-behavior: auto;
    font-size: 13.6px;
  }

  * {
    -webkit-tap-highlight-color: transparent;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.2s !important;
  }

  h1 {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  h2 {
    font-size: clamp(1.5rem, 7.5vw, 2.1rem);
  }

  h3,
  .contact-heading {
    font-size: clamp(1.35rem, 6.8vw, 2.2rem);
  }

  .reveal {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: opacity 0.2s ease !important;
    transition-delay: 0s !important;
  }

  .reveal.visible {
    transform: none !important;
    filter: none !important;
  }

  .hero-word {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .magnetic {
    will-change: auto;
  }

  .stats-strip,
  .cta-section,
  .pull-quote,
  [class*="parallax"] {
    transform: none !important;
  }

  #page-home .hero {
    padding: 24px 16px 0;
    overflow: visible !important;
  }

  .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 22px;
    padding: 24px 0 32px;
  }

  .hero-inner > :first-child {
    display: contents;
  }

  .hero-kicker,
  #page-home h1,
  .hero-sub,
  .badge-row,
  .hero-actions {
    order: 1;
  }

  .badge-row,
  .hero-actions,
  .cta-actions,
  .compliance-flow-container,
  .compliance-flow-status,
  .footer-bottom,
  .contact-info,
  .dev-feat,
  .contact-item,
  .mock-status,
  .platform-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .badge-row {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .hero-actions {
    margin-top: 10px;
  }

  .hero-metrics {
    order: 3;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px;
    margin-top: 0;
    padding-top: 22px;
  }

  .hero-metrics .metric:last-child {
    grid-column: 1 / -1;
  }

  .features-grid,
  .features-grid .feature-card:first-child,
  .arch-layout,
  .dev-layout,
  .contact-layout,
  .compliance-cards,
  .mock-content,
  .cta-inner,
  .platform-body,
  .compliance-flow-grid,
  .qa-grid,
  .pf-stat-grid,
  .pf-stat-grid.four {
    grid-template-columns: 1fr !important;
  }

  .hero-right {
    display: flex !important;
    min-height: 280px;
    max-height: 300px;
    order: 2;
    align-items: center;
    justify-content: center;
  }

  #hero-globe,
  .globe-fallback {
    width: min(100%, 280px);
    max-width: 280px;
    max-height: 280px;
    aspect-ratio: 1 / 1;
    display: block;
    margin: 0 auto;
  }

  .globe-fallback {
    border-radius: 50%;
    object-fit: cover;
    box-shadow: inset -20px 0 40px rgba(0,0,0,0.45), 0 24px 70px rgba(61,58,255,0.18);
  }

  .platform-dashboard {
    display: flex !important;
    height: 760px;
    max-height: 760px;
  }

  .platform-body {
    height: calc(760px - 44px);
  }

  .platform-sidebar {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .platform-nav {
    width: 100%;
  }

  .compliance-flow-grid {
    display: grid;
  }

  .compliance-flow-step::after {
    display: none;
  }

  .stats-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .btn-primary,
  .btn-outline,
  .btn-cta,
  .nav-theme-btn,
  .nav-ham,
  .mob-link,
  .mob-cta,
  .tab-btn,
  .platform-nav,
  .compliance-flow-step,
  .copy-btn,
  .form-submit,
  .footer-demo-btn,
  .social-link,
  .back-to-top {
    min-width: 44px;
    min-height: 44px;
  }

  button {
    min-width: 44px;
    min-height: 44px;
  }

  .code-topbar .copy-btn {
    min-width: 58px;
    min-height: 28px;
  }

  .form-input,
  .form-textarea,
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .telemetry-log {
    display: none !important;
  }

  .platform-dashboard {
    height: 620px;
    max-height: 620px;
  }

  .platform-body {
    height: calc(620px - 44px);
  }
}