/* ==========================================================================
   Comprehensive Mobile & Responsive Overrides for Bitfilx Tech
   Ensures 100% flawless presentation on all smartphones & tablets
   ========================================================================== */

/* Universal Mobile Safety: Zero Horizontal Scroll / Viewport Leak */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

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

/* Ensure all containers stay strictly within viewport */
.max-w-7xl,
.container,
.site-header,
nav,
section,
footer {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Tablet & Medium Viewports (<= 1023px)
   ========================================================================== */
@media (max-width: 1023px) {
  /* Hero section stacked layout */
  .hero-layout,
  body .market-hero .hero-layout,
  .home-experience .hero-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .hero-copy,
  .hero-terminal,
  body .market-hero .hero-copy,
  body .market-hero .hero-terminal {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }

  /* Two-column bento grids collapse gracefully */
  .execution-section > div,
  .capital-model-layout,
  .careers-feature-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* Services & Portfolio Grids */
  .home-experience #services > div > .grid,
  #services > div > .grid,
  .home-experience #portfolioGrid,
  #portfolioGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  /* Desk metrics: 2 columns on tablet */
  .home-experience .desk-metrics,
  .desk-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin-top: 40px !important;
    padding-block: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .desk-metrics > div {
    border-right: none !important;
    padding-inline: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
  }
}

/* ==========================================================================
   Smartphone & Small Screens (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
  html {
    scroll-padding-top: 76px !important;
  }

  /* Mobile Navbar & Header */
  .site-header {
    position: relative !important;
    width: 100% !important;
  }

  body nav,
  .home-experience nav {
    min-height: 60px !important;
    height: auto !important;
    padding-block: 10px !important;
    padding-inline: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .brand-lockup {
    gap: 8px !important;
  }

  .brand-wordmark {
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
  }

  .brand-symbol img {
    width: 32px !important;
    height: 32px !important;
  }

  /* Clean Dropdown Drawer for Mobile Menu */
  #mobileMenu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: #090f0b !important;
    border-bottom: 1px solid #303b2e !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85) !important;
    padding: 16px 14px !important;
  }

  #mobileMenu .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #mobileMenu a {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Top Ticker Bar: keep contained */
  aside,
  .site-ticker,
  [class*="sticky top-0"] {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    font-size: 10px !important;
    padding-block: 4px !important;
    padding-inline: 10px !important;
  }

  /* Section Padding Normalization */
  body section,
  .home-experience :where(section) {
    padding-block: 44px !important;
  }

  .market-hero,
  .home-experience .market-hero {
    padding-top: 28px !important;
    padding-bottom: 40px !important;
  }

  /* Hero Section: Single Column */
  .hero-layout,
  body .market-hero .hero-layout,
  .home-experience .hero-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    width: 100% !important;
  }

  .hero-copy,
  body .market-hero .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    space-y: 16px;
  }

  /* Typography Scale for Mobile */
  body h1,
  body .market-hero h1,
  .home-experience h1.hero-title,
  .home-experience .market-hero h1 {
    font-size: clamp(28px, 7.5vw, 38px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.04em !important;
    max-width: 100% !important;
    word-break: break-word !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }

  .hero-heading-tail {
    font-size: 0.65em !important;
    margin-top: 8px !important;
  }

  body h2,
  .home-experience h2 {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.03em !important;
  }

  .hero-description,
  body .market-hero h1 + p {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  /* Hero Assurances Strip: clean 1 column */
  .home-experience .hero-assurances,
  .hero-assurances,
  body .market-hero .hero-copy > .grid.sm\:grid-cols-3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 18px !important;
    width: 100% !important;
  }

  .hero-assurances > div,
  body .market-hero .hero-copy > .grid.sm\:grid-cols-3 > div {
    border-left: 2px solid var(--accent, #c7f86b) !important;
    padding: 8px 12px !important;
    width: 100% !important;
  }

  /* Hero CTA Buttons: Full Width Stack */
  .hero-actions,
  body .market-hero .hero-copy > .pt-2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    padding-top: 14px !important;
  }

  .hero-actions > :is(a, button),
  body .market-hero .hero-copy > .pt-2 > :is(a, button) {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding-inline: 16px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  /* Hero Terminal Console: scale to fit perfectly */
  .hero-terminal,
  body .market-hero .hero-terminal {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    padding-top: 0 !important;
  }

  .hero-terminal::before {
    display: none !important;
  }

  .home-experience .market-hero .hero-terminal > .glass-card,
  body .market-hero .hero-terminal > .glass-card {
    padding: 16px 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .home-experience .hero-art > :is(img, .hero-video) {
    height: clamp(230px, 62vw, 320px) !important;
    width: 100% !important;
  }

  /* Desk Metrics: 2 columns on Mobile */
  .home-experience .desk-metrics,
  .desk-metrics,
  body .market-hero .hero-copy > .pt-3 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 24px !important;
    padding: 16px !important;
    width: 100% !important;
  }

  .desk-metrics > div,
  body .market-hero .hero-copy > .pt-3 > div {
    padding: 6px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .desk-metrics strong,
  body .market-hero .hero-copy > .pt-3 > div > div:first-child {
    font-size: 18px !important;
  }

  .metric-number,
  body .market-hero .hero-copy > .pt-3 > div > div:last-child {
    font-size: 8px !important;
  }

  /* Services Section: Strict Single Column */
  .home-experience #services > div > .grid,
  #services > div > .grid,
  body #services .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .home-experience #services .glass-card,
  #services .glass-card,
  body #services .glass-card {
    width: 100% !important;
    padding: 20px 16px !important;
    min-height: auto !important;
    border-radius: 10px !important;
  }

  /* Portfolio & Pricing: Single Column */
  .home-experience #portfolioGrid,
  #portfolioGrid,
  .home-experience #pricing > div > .grid,
  #pricing .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Connected Markets Marquee */
  .exchange-network,
  .home-experience #exchanges.exchange-network {
    padding-block: 28px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .exchange-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .exchange-marquee {
    width: 100% !important;
    max-width: 100% !important;
  }

  .home-experience .exchange-brand {
    width: 145px !important;
    min-height: 56px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .home-experience .exchange-brand span {
    font-size: 14px !important;
  }

  .home-experience .exchange-brand img {
    width: 26px !important;
    height: 26px !important;
  }

  /* Performance & Capital Model */
  .capital-model-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    width: 100% !important;
  }

  .capital-model-card-header,
  .capital-model-fee,
  .capital-model-share,
  .capital-model-card-footer {
    padding: 16px 14px !important;
  }

  .capital-model-price {
    font-size: 32px !important;
  }

  /* Careers section */
  .careers-feature-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
  }

  .careers-benefit-strip {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
  }

  /* Modals: Mobile friendly */
  #bookingModal > .glass-card,
  #listingModal > .glass-card,
  #terminalModal > .glass-card {
    max-height: calc(100dvh - 28px) !important;
    overflow-y: auto !important;
    padding: 20px 16px !important;
    width: 95% !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  /* Floating WhatsApp Button */
  .floating-wa-btn {
    bottom: 14px !important;
    right: 14px !important;
    transform: scale(0.9) !important;
  }

  /* Footer */
  footer {
    padding-bottom: 80px !important;
  }

  footer > div > .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
}

/* Very narrow phones (<= 374px) */
@media (max-width: 374px) {
  .home-experience .desk-metrics,
  .desk-metrics,
  body .market-hero .hero-copy > .pt-3 {
    grid-template-columns: 1fr !important;
  }

  .capital-model-price {
    font-size: 26px !important;
  }

  body nav,
  .home-experience nav {
    padding-inline: 10px !important;
  }
}