/* ================================================================
   HELIWARE — MOBILE & TABLET RESPONSIVE
   Only overrides for screens <= 1024px. Desktop (> 1024px) is
   completely untouched — all rules here are inside media queries
   or apply to mobile-only elements that are hidden on desktop.
   ================================================================ */

/* ────────────────────────────────────────────────────────────
   TOUCH DEVICES — Restore system cursor
   ──────────────────────────────────────────────────────────── */
@media (pointer: coarse), (hover: none) {
  * { cursor: auto !important; }

  a, button, [role="button"],
  .btn-primary, .btn-ghost, .nav-link,
  .scene-dot, .industry-tab-btn, .sol-tab,
  .back-to-top-btn, .carousel-btn {
    cursor: pointer !important;
  }

  #cursor, #cursor-dot, #cursor-ring {
    display: none !important;
  }
}

/* ────────────────────────────────────────────────────────────
   HAMBURGER BUTTON  (hidden by default, shown <= 1024px)
   ──────────────────────────────────────────────────────────── */
#nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: rgba(5, 20, 42, 0.8);
  border: 1px solid rgba(0, 216, 255, 0.22);
  border-radius: 10px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease;
  z-index: 9999;
}

#nav-toggle:focus-visible {
  outline: 2px solid rgba(0, 216, 255, 0.6);
  outline-offset: 2px;
}

.hamburger-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.28s ease, opacity 0.28s ease, width 0.28s ease;
}

/* Open state → X */
#nav-toggle.is-active .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-toggle.is-active .hamburger-bar:nth-child(2) { opacity: 0; width: 0; }
#nav-toggle.is-active .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ────────────────────────────────────────────────────────────
   MOBILE NAV BACKDROP
   ──────────────────────────────────────────────────────────── */
#mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(1, 4, 14, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.32s ease;
}
#mobile-nav-backdrop.is-visible {
  display: block;
  opacity: 1;
}

/* ────────────────────────────────────────────────────────────
   MOBILE NAV DRAWER
   ──────────────────────────────────────────────────────────── */
#mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(3, 9, 24, 0.98) 0%, rgba(2, 6, 18, 0.99) 100%);
  border-left: 1px solid rgba(0, 216, 255, 0.12);
  box-shadow: -16px 0 50px rgba(0, 0, 0, 0.7), inset 0 0 80px rgba(0, 216, 255, 0.02);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#mobile-nav-drawer.is-open {
  transform: translateX(0);
}
body.mobile-nav-open {
  overflow: hidden;
  touch-action: none;
}

/* Drawer header */
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(0, 216, 255, 0.08);
  flex-shrink: 0;
}
.mobile-nav-logo {
  max-height: 28px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(0, 216, 255, 0.25));
}
#mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(0, 216, 255, 0.05);
  border: 1px solid rgba(0, 216, 255, 0.18);
  border-radius: 8px;
  color: #94A3B8;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease;
}
#mobile-nav-close:hover { background: rgba(0, 216, 255, 0.12); color: #fff; }

/* Nav link list */
.mobile-nav-links {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  flex: 1;
}
.mobile-nav-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9rem 1.25rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.92rem;
  font-weight: 500;
  color: #CBD5E1;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer !important;
  transition: color 0.18s ease, background 0.18s ease;
  letter-spacing: 0.01em;
}
.mobile-nav-link:active,
.mobile-nav-link:focus { color: #fff; background: rgba(0, 216, 255, 0.06); }

/* Chevron */
.mobile-chevron {
  color: #475569;
  flex-shrink: 0;
  transition: transform 0.28s ease, color 0.2s ease;
}
.mobile-accordion.is-open > .mobile-accordion-trigger .mobile-chevron {
  transform: rotate(180deg);
  color: #00D8FF;
}
.mobile-accordion.is-open > .mobile-accordion-trigger { color: #00D8FF; }

/* Submenu */
.mobile-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  transition: max-height 0.32s ease;
}
.mobile-accordion.is-open > .mobile-submenu { max-height: 380px; }
.mobile-submenu-item {
  display: block;
  padding: 0.65rem 1.25rem 0.65rem 2.1rem;
  font-size: 0.84rem;
  color: #94A3B8;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  cursor: pointer !important;
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.mobile-submenu-item:active { color: #00D8FF; padding-left: 2.5rem; }

/* CTA buttons */
.mobile-nav-cta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid rgba(0, 216, 255, 0.08);
  flex-shrink: 0;
}
.mobile-nav-cta .btn-primary,
.mobile-nav-cta .btn-ghost {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

/* ================================================================
   TABLET  (769px – 1024px)
   ================================================================ */
@media (max-width: 1024px) {

  /* Show hamburger, hide desktop nav links */
  #nav-toggle { display: flex; }
  #nav-links   { display: none !important; }
  #nav-cta     { display: none; }

  #nav {
    padding: 1rem 1.5rem;
    gap: 0.75rem;
  }
  #nav.scrolled { padding: 0.85rem 1.5rem; }

  /* Scene overlays: reduce horizontal margins for tablets */
  .overlay-content {
    margin-left: 2.5rem;
    margin-right: 1.5rem;
    max-width: 540px;
  }
  .overlay-content--right {
    margin-left: auto;
    margin-right: 2.5rem;
    max-width: 500px;
  }
  .overlay-content--bottom {
    margin-left: 2.5rem;
  }

  /* Scene 1 headline */
  #scene-1 .scene-headline {
    font-size: clamp(1.9rem, 2.8vw, 2.8rem);
  }

  /* Product cards: 2-col on tablet */
  #product-cards {
    grid-template-columns: repeat(2, 1fr);
    padding: 18vh 2rem 12vh;
  }

  /* Stats: 2-col */
  #stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 2-col */
  #footer {
    grid-template-columns: 1fr 1fr;
    padding: 2rem;
  }

  /* Hide GIS badge on tablet to reduce clutter */
  .gis-cursor-badge { display: none; }

  /* Feature boxes: wrap gently */
  .scene-feature-boxes {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Scene indicator: hide */
  #scene-indicator { display: none; }
}

/* ================================================================
   MOBILE  (<= 768px)  — PRIMARY MOBILE RULES
   ================================================================ */
@media (max-width: 768px) {

  /* ── Navigation ── */
  #nav {
    padding: 0.85rem 1.1rem;
    gap: 0.5rem;
  }
  #nav.scrolled { padding: 0.75rem 1.1rem; }
  #nav-toggle { display: flex; }
  #nav-links  { display: none !important; }
  #nav-cta    { display: none; }

  /* ── 3D Scene Overlays (Scenes 1–4): Exact 50/50 Horizontal Split ── */

  /* Split mobile viewport horizontally into two clean halves:
     Top half (0 to ~48vh): 3D Three.js interactive graphics
     Bottom half (~48vh to 100vh): dedicated container for text, badges, feature items & buttons */
  .scene-overlay {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 0 2rem 0 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  /* Lower section card: occupies bottom half (~44-46%), floating sheet look lifted slightly upward */
  .overlay-content,
  .overlay-content--right,
  .overlay-content--bottom,
  .overlay-content--center {
    width: calc(100% - 1.5rem) !important;
    max-width: calc(100% - 1.5rem) !important;
    margin: 0 auto 1.5rem auto !important;
    height: auto !important;
    max-height: 44vh !important;
    max-height: 44dvh !important;
    padding: 1rem 1.15rem 1.15rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
    background: linear-gradient(180deg, rgba(3, 10, 26, 0.82) 0%, rgba(1, 5, 14, 0.94) 100%) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(0, 216, 255, 0.22) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 216, 255, 0.08) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
  }

  /* Scene 4 specific override reset */
  #scene-4 .overlay-content {
    margin: 0 auto 1.5rem auto !important;
    max-width: calc(100% - 1.5rem) !important;
  }

  /* ── Scene Headlines ── */
  #scene-1 .scene-headline {
    font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
    line-height: 1.16 !important;
    margin-bottom: 0.35rem !important;
    letter-spacing: -0.02em !important;
  }

  .scene-headline {
    font-size: clamp(1.25rem, 5.2vw, 1.65rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 0.3rem !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .scene-headline .line {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  .scene-headline--medium {
    font-size: clamp(1.25rem, 5.2vw, 1.65rem) !important;
  }

  .scene-description {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    color: rgba(203, 213, 225, 0.85) !important;
    max-width: 100% !important;
    margin-bottom: 0.25rem !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Spacing between direct overlay children */
  .overlay-content > * + * {
    margin-top: 0.5rem !important;
  }

  /* ── Hero Badge ── */
  .hero-badge {
    display: inline-flex !important;
    margin: 0 0 0.15rem 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  .hero-badge .badge-text {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* ── CTA Buttons in lower section ── */
  .cta-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.65rem !important;
    width: 100% !important;
    margin-top: 0.75rem !important;
    flex-wrap: wrap !important;
  }

  .cta-group .btn-primary,
  .cta-group .btn-ghost {
    flex: 1 1 45% !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.82rem !important;
    padding: 0.65rem 0.6rem !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  /* ── Feature Boxes (Scenes 2, 3, 4) in lower section ── */
  .scene-feature-boxes {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
    margin-top: 0.5rem !important;
    width: 100% !important;
    overflow-x: visible !important;
    padding-bottom: 2px !important;
  }

  .scene-feature-box {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.4rem 0.65rem !important;
    background: rgba(0, 216, 255, 0.07) !important;
    border: 1px solid rgba(0, 216, 255, 0.22) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    flex: 0 1 auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .feature-box-icon {
    flex-shrink: 0 !important;
  }

  .feature-box-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .feature-box-info {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .feature-box-title {
    font-size: 0.72rem !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
  }

  /* ── GIS HUD Badge ── */
  .gis-cursor-badge { display: none !important; }

  /* ── Scene Indicator ── */
  #scene-indicator { display: none; }

  /* ── Scene 5 (Metrics / Impact) ── */
  #scene-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #scene-5 .hero-badge,
  #scene-5 .scene-headline,
  #scene-5 .scene-description,
  #scene-5 .metrics-ticker-wrapper,
  #scene-5 .metrics-grid-wrapper {
    transform: none !important;
    transition: opacity 0.5s ease !important;
  }

  .scene-5-content {
    padding: 2.5rem 1.1rem 2rem !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .scene-5-headline {
    font-size: clamp(1.5rem, 7vw, 2.1rem) !important;
    text-align: left !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .scene-5-subtext {
    text-align: left !important;
    margin: 0 !important;
    font-size: 0.88rem !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* Metrics Grid (Mobile view: scaled down, 3 by 3 layout) */
  .metrics-ticker-wrapper,
  .metrics-grid-wrapper {
    margin-top: 1.25rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  .metrics-ticker-track,
  .metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.45rem !important;
    width: 100% !important;
    animation: none !important;
  }

  .metric-pill-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.55rem 0.35rem !important;
    gap: 0.35rem !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: none !important;
  }

  .metric-pill-icon {
    width: 26px !important;
    height: 26px !important;
  }

  .metric-pill-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .metric-pill-data {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  .metric-pill-val {
    font-size: 0.92rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
  }

  .metric-pill-label {
    font-size: 0.52rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    text-align: center !important;
    margin-top: 0.1rem !important;
  }

  /* ── Esteemed Clientele 3 Cards (Side-by-side on mobile) ── */
  .clientele-metrics-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 0.45rem !important;
    padding: 0 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 1.25rem auto 1.25rem !important;
  }

  .clientele-metric-card {
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
    padding: 0.55rem 0.35rem !important;
    gap: 0.35rem !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .clientele-metric-icon {
    width: 26px !important;
    height: 26px !important;
  }

  .clientele-metric-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .clientele-metric-data {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  .clientele-metric-val {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
  }

  .clientele-metric-label {
    font-size: 0.52rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    text-align: center !important;
    margin-top: 0.1rem !important;
  }

  /* ── Scaled-down Client Logos on Mobile ── */
  .clients-ticker-wrapper {
    margin-top: 1.25rem !important;
    padding: 1.25rem 0 !important;
  }

  .clients-ticker-track {
    gap: 1.6rem !important;
  }

  .client-logo-card {
    height: 36px !important;
    padding: 0 0.4rem !important;
  }

  .client-logo-card img {
    max-width: 82px !important;
    max-height: 26px !important;
  }

  /* ── Product Cards (Scene 6) ── */
  #product-cards {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    padding: 14vh 0.85rem 8vh;
  }

  .product-card {
    padding: 0.85rem;
  }

  .product-card h3 {
    font-size: 0.9rem;
  }

  .product-card p {
    font-size: 0.72rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── Stats Grid (Scene 8) ── */
  #stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    padding: 0 0.85rem;
    max-width: 100%;
  }

  .stat-card {
    padding: 1.25rem 0.85rem;
  }

  .stat-number {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .stat-suffix {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
  }

  .stat-label {
    font-size: 0.62rem;
  }

  /* ── Scene 5-10 Flow Sections: Left Aligned & Responsive Wrapping ── */
  .flow-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .flow-section-inner {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
    text-align: left !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .flow-section-inner .hero-badge {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .flow-section-inner .scene-headline,
  .flow-section-inner .scene-description,
  .flow-section-inner h2,
  .flow-section-inner h3,
  .flow-section-inner p {
    text-align: left !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  /* Section headers */
  .section-eyebrow {
    font-size: 0.65rem !important;
    text-align: left !important;
    align-self: flex-start !important;
  }

  .section-title {
    font-size: clamp(1.4rem, 6.5vw, 2rem) !important;
    line-height: 1.2 !important;
    text-align: left !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .section-subtitle {
    font-size: 0.87rem !important;
    text-align: left !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* ── Platform showcase (HeliBhumi, HeliAI etc) ── */
  .platform-showcase-grid,
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }

  /* ── Solution grid ── */
  .solutions-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .solution-step-card {
    padding: 1.1rem;
  }

  /* ── Industry tabs ── */
  .industry-tabs-header-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .industry-tabs-header-wrap::-webkit-scrollbar { display: none; }

  .industry-tabs-nav {
    flex-wrap: nowrap;
    gap: 0.3rem;
    padding: 0.35rem 0.45rem;
    min-width: max-content;
  }

  .industry-tab-btn {
    font-size: 0.72rem;
    padding: 0.4rem 0.75rem;
    white-space: nowrap;
  }

  /* Industry panel cards */
  .industries-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .industry-panel-card {
    padding: 1.1rem;
  }

  /* ── Awards ── */
  .awards-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.85rem;
  }

  .awards-split-row {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }

  /* ── Partner / Clients ── */
  .partner-highlights-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .partner-banner-actions {
    flex-direction: column !important;
    gap: 0.6rem;
  }

  .partner-banner-actions .btn-primary,
  .partner-banner-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .clients-ticker-track {
    animation-duration: 25s;
  }

  /* ── Pipeline / How It Works ── */
  .pipeline-flow-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }

  .flow-cards-row {
    flex-direction: column !important;
    gap: 0.85rem;
  }

  .flow-connector {
    transform: rotate(90deg);
    align-self: center;
    flex-shrink: 0;
  }

  .flow-card {
    padding: 1.1rem;
  }

  /* ── Bhumi Capabilities ── */
  .bhumi-cap-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem;
  }

  /* ── Why Heliware CTA section ── */
  .centered-impact-cta {
    padding: 2.25rem 1.1rem;
    border-radius: var(--radius-lg);
  }

  /* ── Footer (inline/scene version) ── */
  #footer {
    grid-template-columns: 1fr 1fr;
    padding: 1.25rem 1.1rem;
    gap: 1rem;
  }

  /* ── Site Footer Compact Mobile Accordion ── */
  .site-footer {
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
  }

  .footer-main-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    padding-bottom: 2rem !important;
  }

  .footer-col-brand {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-brand-bio {
    max-width: 100% !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
  }

  .footer-cert-badges {
    gap: 6px !important;
    margin-bottom: 1.15rem !important;
  }

  .footer-badge-pill {
    padding: 3px 8px !important;
    font-size: 0.68rem !important;
  }

  /* Accordion Dropdown Container */
  .footer-col-accordion {
    background: rgba(12, 28, 54, 0.35);
    border: 1px solid rgba(0, 216, 255, 0.14);
    border-radius: 14px;
    padding: 0 !important;
    overflow: hidden;
    transition: border-color 0.3s ease, background 0.3s ease;
  }

  .footer-col-accordion.is-open {
    background: rgba(12, 28, 54, 0.55);
    border-color: rgba(0, 216, 255, 0.35);
  }

  /* Accordion Header / Opener Button */
  .footer-accordion-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 1.1rem !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #f8fafc !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    user-select: none !important;
    box-sizing: border-box !important;
  }

  .footer-accordion-btn::after {
    display: none !important;
  }

  .footer-accordion-icon {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    color: #00d8ff !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
  }

  .footer-col-accordion.is-open .footer-accordion-icon {
    transform: rotate(180deg) !important;
  }

  /* Collapsible Content */
  .footer-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.3s ease;
    opacity: 0;
    padding: 0 1.1rem;
    box-sizing: border-box;
  }

  .footer-col-accordion.is-open .footer-accordion-content {
    max-height: 800px;
    opacity: 1;
    padding: 0 1.1rem 1.25rem;
  }

  .footer-links-list {
    margin: 0 !important;
    padding-top: 0.35rem !important;
  }

  .footer-links-list li {
    padding: 0.35rem 0 !important;
  }

  .footer-link {
    font-size: 0.8rem !important;
  }

  .footer-offices-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin-top: 0.4rem !important;
    margin-bottom: 0.85rem !important;
  }

  .footer-office-card {
    padding: 0.6rem 0.55rem !important;
    background: rgba(8, 22, 45, 0.6) !important;
    border-radius: 9px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  .office-head {
    font-size: 0.72rem !important;
    gap: 5px !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.2 !important;
  }

  .office-head strong {
    font-size: 0.72rem !important;
  }

  .office-pin {
    width: 5px !important;
    height: 5px !important;
  }

  .office-address {
    font-size: 0.64rem !important;
    line-height: 1.35 !important;
    color: #94a3b8 !important;
  }

  .footer-direct-contact {
    margin-top: 0.85rem !important;
    padding-top: 0.85rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .footer-bottom-bar {
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
    padding-top: 1.5rem !important;
  }

  .footer-copyright {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
  }

  .footer-legal-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  .legal-link {
    font-size: 0.72rem !important;
  }

  /* ── Back to Top ── */
  .back-to-top-btn {
    bottom: 1.1rem;
    right: 1.1rem;
    width: 42px;
    height: 42px;
  }

  /* ── How-it-works modal ── */
  .tech-modal-inner {
    padding: 1.25rem 0.9rem;
    max-height: 92svh;
    overflow-y: auto;
    border-radius: var(--radius-lg);
  }

  .tech-modal-header {
    padding: 1rem 0.9rem;
  }

  /* ── Industry Grid (Scene 7) ── */
  #industry-grid {
    gap: 0.5rem;
    padding: 0 0.85rem;
    bottom: 10vh;
  }

  .industry-item {
    font-size: 0.72rem;
    padding: 0.4em 0.9em;
  }

  /* Synthetic badges on Scene 3 */
  .synthetic-metrics-grid {
    gap: 0.5rem;
  }

  .synthetic-badge {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .badge-value {
    font-size: 0.78rem;
  }

  /* ── Scene 2 & 3 Custom Margin Override: align to lifted floating card in mobile view ── */
  #scene-2 .overlay-content,
  #scene-3 .overlay-content {
    margin: 0 auto 1.5rem auto !important;
  }

  /* Ensure floating labels and chips don't break mobile layout */
  .ai-labels,
  .tech-labels,
  .tech-labels--chips {
    display: none !important;
  }

  /* ── Scene 7: THE PIPELINE MOBILE RESPONSIVENESS ── */
  .sticky-pipeline-section {
    padding: 3rem 0 2rem !important;
  }

  .pipeline-container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 0 1.1rem !important;
  }

  .pipeline-sticky-left {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    text-align: left !important;
  }

  .pipeline-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    line-height: 1.2 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    text-align: left !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .pipeline-desc {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1.25rem !important;
    text-align: left !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  /* Pipeline step tabs: horizontal scroll pills on mobile */
  .pipeline-step-nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 0.25rem !important;
  }
  .pipeline-step-nav::-webkit-scrollbar { display: none !important; }

  .pipeline-nav-item {
    flex: 1 0 auto !important;
    justify-content: center !important;
    padding: 0.55rem 0.85rem !important;
    gap: 0.45rem !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  .pipeline-nav-num {
    font-size: 0.75rem !important;
  }

  .pipeline-nav-title {
    font-size: 0.75rem !important;
  }

  /* Pipeline Cards */
  .pipeline-scrolling-right {
    gap: 1.5rem !important;
  }

  .pipeline-card {
    padding: 1.25rem 1.1rem !important;
    min-height: auto !important;
    border-radius: 16px !important;
  }

  .pipeline-card-badge {
    font-size: 0.65rem !important;
    margin-bottom: 0.5rem !important;
  }

  .pipeline-card-heading {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }

  .pipeline-card-sub {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
  }

  /* Pipeline Carousel */
  .pipeline-map-carousel {
    border-radius: 12px !important;
  }

  .carousel-track-wrapper {
    height: 220px !important;
  }

  .carousel-slide-tag {
    top: 8px !important;
    left: 8px !important;
    padding: 4px 10px !important;
    gap: 5px !important;
  }

  .slide-tag-title {
    font-size: 0.62rem !important;
  }

  .carousel-controls {
    padding: 8px 12px !important;
  }

  .carousel-btn {
    width: 28px !important;
    height: 28px !important;
  }

  /* ── Scene 8: Why Heliware Grid ── */
  #scene-8 {
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
  }

  .why-heliware-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    margin-top: 2rem !important;
  }

  .why-card {
    padding: 1.5rem 1.25rem !important;
    border-radius: 16px !important;
  }

  .why-card-top {
    margin-bottom: 1.25rem !important;
  }

  .why-card-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
  }

  .why-card-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .why-card-title {
    font-size: 1.3rem !important;
    margin-bottom: 0.65rem !important;
  }

  .why-card-desc {
    font-size: 0.86rem !important;
    margin-bottom: 1.25rem !important;
  }

  /* Awards metrics row */
  .awards-metrics-row {
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding: 1.5rem 1rem !important;
    margin-top: 2rem !important;
    margin-bottom: 2.5rem !important;
    border-radius: 16px !important;
  }

  .award-stat-val {
    font-size: 1.8rem !important;
  }

  .award-stat-label {
    font-size: 0.72rem !important;
  }

  /* Awards track container */
  .awards-track-container {
    height: 260px !important;
    border-radius: 12px !important;
  }

  .awards-slide-caption {
    bottom: 0.75rem !important;
    left: 0.75rem !important;
    font-size: 0.75rem !important;
    padding: 0.4rem 0.8rem !important;
  }

  /* Awards grid */
  .awards-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    margin-bottom: 2.5rem !important;
  }

  .award-card {
    border-radius: 16px !important;
  }

  .award-card-img-wrap {
    height: 180px !important;
  }

  /* Partner network banner */
  .partner-network-banner {
    padding: 1.75rem 1.25rem !important;
    border-radius: 16px !important;
  }

  .partner-banner-title {
    font-size: 1.35rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .partner-banner-desc {
    font-size: 0.85rem !important;
    margin-bottom: 1.25rem !important;
  }

  .partner-illustration-wrap {
    display: none !important;
  }

  .partner-highlights-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    margin-bottom: 1.25rem !important;
  }

  .partner-highlight-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .ph-title {
    display: block !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #fff !important;
  }

  .ph-sub {
    display: block !important;
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
  }

  /* Footer main grid */
  .footer-main-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .footer-offices-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .footer-direct-contact {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
  }

  .footer-contact-item {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ================================================================
   SMALL PHONE  (<= 480px)
   ================================================================ */
@media (max-width: 480px) {

  /* Nav */
  #nav { padding: 0.75rem 0.9rem; }

  /* Scene overlays: horizontal split lower panel lifted upward */
  .overlay-content,
  .overlay-content--right,
  .overlay-content--bottom {
    margin: 0 auto 1.35rem auto !important;
    width: calc(100% - 1.2rem) !important;
    max-width: calc(100% - 1.2rem) !important;
    padding: 1rem 0.95rem 1.15rem !important;
  }

  /* Lift overlay container slightly upward */
  .scene-overlay {
    padding-top: 0 !important;
    padding-bottom: 1.5rem !important;
  }

  /* Headline */
  #scene-1 .scene-headline {
    font-size: clamp(1.6rem, 8.5vw, 2.1rem) !important;
  }

  .scene-headline,
  .scene-headline--medium {
    font-size: clamp(1.2rem, 7vw, 1.6rem) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .scene-headline .line {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .scene-description {
    font-size: 0.8rem !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* Product cards: single column on tiny phones */
  #product-cards {
    grid-template-columns: 1fr;
    padding: 12vh 0.85rem 6vh;
  }

  /* Stats: single column */
  #stats-grid {
    grid-template-columns: 1fr;
    padding: 0 0.85rem;
  }

  /* Awards: 1 column */
  .awards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Bhumi grid: 1 column */
  .bhumi-cap-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer: 1 column */
  #footer {
    grid-template-columns: 1fr;
  }

  /* Mobile drawer: full width */
  #mobile-nav-drawer {
    width: 100vw;
    border-left: none;
  }

  /* Loading screen */
  .loading-content { padding: 0 0.85rem; }
  .loading-brand-logo { max-height: 26px; }

  /* Scene 5 */
  .scene-5-content { padding: 2.5rem 0.85rem 2rem !important; }

  /* Footer newsletter */
  .footer-newsletter-banner {
    padding: 1.25rem 0.85rem !important;
  }

  .carousel-track-wrapper {
    height: 190px !important;
  }
}

/* ================================================================
   LANDSCAPE PHONE  (height <= 480px on touch device)
   ================================================================ */
@media (max-height: 480px) and (pointer: coarse) {

  .scene-overlay { padding-top: 3.5rem; }

  #scene-1 .scene-headline {
    font-size: clamp(1.1rem, 5.5vw, 1.6rem);
    margin-bottom: 0.4rem;
  }

  .scene-description {
    font-size: 0.78rem;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cta-group {
    flex-direction: row;
    gap: 0.5rem;
  }

  .cta-group .btn-primary,
  .cta-group .btn-ghost {
    width: auto;
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
  }

  .overlay-content > * + * { margin-top: 0.6rem; }

  .scene-feature-boxes { margin-top: 0.4rem; }

  #mobile-nav-drawer {
    overflow-y: auto;
  }
}

/* ================================================================
   iOS SAFE AREA INSETS  (notch / Dynamic Island)
   ================================================================ */
@supports (padding: max(0px)) {
  #nav {
    padding-top: max(0.85rem, calc(0.5rem + env(safe-area-inset-top)));
  }

  #mobile-nav-drawer {
    padding-top: env(safe-area-inset-top);
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  body.mobile-nav-open {
    /* prevent content shift on iOS when scrollbar disappears */
    padding-right: 0 !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   CALENDLY POPUP WIDGET Z-INDEX FIX FOR MOBILE
   Ensure Calendly iframe/overlay renders above the mobile navigation drawer (z-index: 9999)
   ═════════════════════════════════════════════════════════════════ */
.calendly-overlay,
.calendly-popup,
.calendly-popup-content,
.calendly-popup-close {
  z-index: 999999 !important;
}