/**
 * Site-wide responsive fixes — load AFTER styles.css / ux-polish.css
 * Breakpoints: 1024 / 920 / 640 / 400
 */

/* Fluid base */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Tables that can overflow */
.pricing-table-wrap,
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pricing-table {
  min-width: 520px;
}

/* Sticky header stays usable */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(12px);
  background: rgba(7, 6, 12, 0.86);
}

/* —— Tablet / large phone —— */
@media (max-width: 1024px) {
  :root {
    --page-gutter: clamp(14px, 3.5vw, 28px);
  }

  .hero-shell {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hero-content {
    order: 1;
  }

  .hero-visual {
    order: 2;
    min-height: 0 !important;
    width: 100%;
  }

  .hero-video-wrap {
    width: min(340px, 72vw) !important;
    max-width: 100%;
    margin-inline: auto;
    translate: 0 0 !important;
  }

  /* Orbit stage owns genie sizing below 1024 — don't fight it */
  .hero-orbits .hero-video-wrap {
    width: min(200px, 44%) !important;
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(1.55rem, 6.5vw, 2.35rem);
  }

  .hero-description {
    max-width: none;
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .projects-grid,
  .testimonials-grid,
  .soft-grid,
  .trust-grid,
  .tech-grid,
  .blog-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }

  .services-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .service-card-link,
  .service-card-link:nth-child(1),
  .service-card-link:nth-child(2),
  .service-card-link:nth-child(n) {
    grid-column: span 1 !important;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .process-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 100%;
  }

  .genie-stage {
    width: min(160px, 28vw);
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    opacity: 0.9;
  }

  .genie-stage canvas {
    max-height: 160px;
  }
}

/* —— Mobile —— */
@media (max-width: 920px) {
  /* Header/menu handled by header-menu.css */

  main {
    padding-inline: max(12px, env(safe-area-inset-inline-start, 0px), env(safe-area-inset-inline-end, 0px));
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-x: clip;
  }

  section {
    margin-top: 48px;
  }

  .hero {
    margin-top: 8px;
    padding-block: 4px 16px;
  }

  .hero-shell {
    padding: 16px 14px !important;
    border-radius: 16px;
    gap: 12px;
  }

  /* Mobile only: genie on top */
  .hero-visual {
    order: 1 !important;
    min-height: 0 !important;
    padding-block: 4px 8px;
  }

  .hero-content {
    order: 2 !important;
    text-align: center;
  }

  /* Faster mobile: cut expensive effects */
  .hero-smoke-bg {
    display: none !important;
  }

  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(7, 6, 12, 0.94);
  }

  .hero-shell {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .hero-genie-ring,
  .hero-genie-sparkles {
    display: none;
  }

  .hero-genie-aura {
    filter: none;
    opacity: 0.45;
    animation: none !important;
  }

  .hero-video-wrap {
    animation: none !important;
  }

  .hero-ticker-track {
    animation-duration: 32s;
  }

  .btn-border-wrap::before {
    animation: none !important;
    background: linear-gradient(135deg, #a068ff, #070319, #a068ff) !important;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 18px;
    gap: 10px;
  }

  .hero-actions .btn,
  .hero-actions .btn-border-wrap {
    width: 100%;
  }

  .hero-kicker {
    margin-inline: auto;
  }

  .hero-description {
    margin-inline: auto;
  }

  .hero-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: stretch;
  }

  .hero-metrics div {
    min-width: 0;
    width: 100%;
  }

  .hero-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    overflow: visible;
  }

  .hero-strip span {
    font-size: 0.78rem;
    padding: 6px 10px;
  }

  .hero-ticker-track {
    gap: 28px;
  }

  .hero-ticker-track span {
    font-size: 0.78rem;
  }

  .glow-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 36px;
  }

  .projects-grid,
  .services-grid,
  .testimonials-grid,
  .soft-grid,
  .trust-grid,
  .tech-grid,
  .blog-grid,
  .pricing-grid,
  .about-shell,
  .contact-shell,
  .approach-track,
  .footer-grid,
  .process-track,
  .careers-form-grid {
    grid-template-columns: 1fr !important;
  }

  .software-solutions,
  .customer-process,
  .trust-section {
    padding: 40px 0;
    max-width: 100%;
  }

  .process-steps-list li {
    grid-template-columns: auto 1fr;
    padding: 12px;
  }

  .section-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .section-cta-row .btn {
    width: 100%;
  }

  .section-head h2 {
    font-size: clamp(1.3rem, 6vw, 1.7rem);
  }

  /* Hide floating tour genie on phones — covers CTAs / WhatsApp */
  .genie-stage {
    display: none !important;
  }

  .whatsapp-float {
    inset-inline-end: max(12px, env(safe-area-inset-inline-end, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
  }

  .chatbot-wrap {
    inset-inline-end: max(12px, env(safe-area-inset-inline-end, 0px));
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .back-to-top {
    inset-inline-end: max(12px, env(safe-area-inset-inline-end, 0px));
    bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }

  /* Prevent iOS zoom on inputs */
  input,
  select,
  textarea,
  .careers-field input,
  .careers-field select,
  .careers-field textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  .quote-form-box,
  .careers-form,
  .sms-optin-box,
  .contact-panel,
  .about-content {
    padding: 16px !important;
  }

  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    line-height: 1.6;
  }

  .footer-grid {
    gap: 20px;
  }

  .pricing-page,
  .legal-page,
  .service-page,
  .inner-page {
    padding-inline: 12px;
  }

  .pricing-note-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .pricing-note-actions .btn {
    width: 100%;
  }

  .service-page-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .service-page-actions .btn {
    width: 100%;
  }

  .breadcrumb {
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.85rem;
  }

  /* Soften heavy motion on small screens */
  .hero-video-wrap {
    animation-duration: 7s;
  }
}

/* —— Small phones —— */
@media (max-width: 640px) {
  .hero-shell {
    padding: 14px 10px !important;
  }

  .hero h1 {
    font-size: clamp(1.45rem, 7vw, 1.9rem);
    line-height: 1.25;
  }

  .hero-description {
    font-size: 0.9rem;
  }

  .hero-ticker {
    margin-inline: -6px;
  }

  .project-card-body,
  .service-card {
    padding: 14px;
  }

  .btn {
    padding: 12px 16px;
  }

  .company-legal-name {
    font-size: 0.78rem;
    word-break: break-word;
  }

  .site-header {
    padding-inline: max(10px, env(safe-area-inset-inline-start, 0px), env(safe-area-inset-inline-end, 0px));
  }

  .whatsapp-float {
    width: 48px;
    height: 48px;
  }
}

/* —— Very small —— */
@media (max-width: 400px) {
  .hero h1 {
    font-size: 1.35rem;
  }

  .hero-shell {
    padding: 12px 8px !important;
  }

  .lang-btn {
    padding: 8px 10px;
  }

  .hero-ticker-track span {
    font-size: 0.72rem;
  }
}

/* Touch: no hover-dependent layout jumps */
@media (hover: none) {
  .project-card:hover,
  .service-card:hover,
  .service-card-link:hover .service-card {
    transform: none;
  }
}