/* Shared mobile/tablet overrides for Quber design variants.
   Classes are added to existing markup; desktop styles stay inline. */

.q-menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid currentColor;
  background:transparent;
  color:inherit;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
}
.q-menu-btn span,
.q-menu-btn span::before,
.q-menu-btn span::after{
  display:block;
  width:18px;
  height:2px;
  background:currentColor;
  position:relative;
  transition:transform .2s ease,opacity .2s ease;
}
.q-menu-btn span::before,
.q-menu-btn span::after{
  content:"";
  position:absolute;
  left:0;
}
.q-menu-btn span::before{top:-6px}
.q-menu-btn span::after{top:6px}
.q-nav-open .q-menu-btn span{background:transparent}
.q-nav-open .q-menu-btn span::before{top:0;transform:rotate(45deg)}
.q-nav-open .q-menu-btn span::after{top:0;transform:rotate(-45deg)}

@media (max-width:960px){
  #cur-ring,#cur-dot,#cur-box,#cur-glow,#cur-sq{display:none!important}
  /* Keep horizontal overflow contained without locking page scroll */
  html{
    overflow-x:hidden;
    overflow-y:scroll;
    height:auto!important;
  }
  body{
    overflow-x:hidden;
    overflow-y:visible;
    height:auto!important;
    min-height:100%;
  }
  #qroot{
    overflow-x:hidden!important;
    overflow-y:visible!important;
    max-width:100vw;
    height:auto!important;
      }

  .q-bar{
    padding-left:18px!important;
    padding-right:18px!important;
    height:auto!important;
    min-height:64px;
    position:relative;
    align-items:center!important;
  }

  .q-menu-btn{
    display:inline-flex!important;
    margin:12px 14px 12px auto;
    align-self:center;
  }

  .q-nav{
    display:none!important;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    padding:12px 18px 18px!important;
    background:#05070D;
    border-bottom:1px solid rgba(127,127,127,.25);
    backdrop-filter:blur(18px);
    z-index:920;
  }
  #qroot[style*="#F5F6F2"] .q-nav{background:#F5F6F2!important}
  #qroot[style*="#080514"] .q-nav{background:#140c28!important}
  #qroot[style*="background:#000"] .q-nav{background:#000!important}
  header.q-header-float .q-nav{background:rgba(20,12,40,.96)!important}

  .q-nav-open .q-nav{display:flex!important}
  .q-nav a{
    padding:14px 10px!important;
    border-radius:0!important;
    width:100%;
    text-align:left;
    border:none!important;
    border-left:none!important;
    height:auto!important;
    display:block!important;
  }
  .q-nav a[href="#contact"]{
    text-align:center!important;
    margin-top:8px;
  }

  header.q-header-float{
    width:calc(100% - 24px)!important;
    left:12px!important;
    transform:none!important;
    border-radius:18px!important;
    top:10px!important;
  }
  header.q-header-float .q-nav{
    border-radius:0 0 18px 18px;
  }

  #top,
  .q-section{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  #top{
    padding-top:120px!important;
    padding-bottom:56px!important;
  }
  #qroot[style*="background:#000"] #top{
    padding-left:0!important;
    padding-right:0!important;
  }
  #qroot[style*="background:#000"] #top > div{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  .q-hero{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .q-hero h1,
  #top h1{
    font-size:clamp(34px,9vw,56px)!important;
  }
  #qroot[style*="background:#000"] #top h1{
    font-size:clamp(42px,12vw,72px)!important;
    -webkit-text-stroke-width:1px!important;
  }
  .q-hero p,
  #top p{
    font-size:16px!important;
  }
  .q-cta{
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  .q-cta a{
    text-align:center;
    justify-content:center;
    border-left:2px solid currentColor!important;
  }
  #qroot[style*="background:#000"] .q-cta a{
    border:2px solid #FFF!important;
  }
  #qroot[style*="background:#000"] .q-cta a[href="#contact"]{
    border-color:#37E0A8!important;
  }

  .q-stats{grid-template-columns:1fr 1fr!important}

  .q-cols-3,
  .q-cols-4,
  .q-split,
  .q-foot,
  .q-contact{
    grid-template-columns:1fr!important;
    gap:20px!important;
  }

  .q-cols-6{grid-template-columns:repeat(2,1fr)!important}

  .q-caps{grid-template-columns:1fr!important}
  .q-caps > *{grid-column:auto!important}

  .q-split{padding:28px 20px!important}
  .q-form-row{grid-template-columns:1fr!important}
  form[style],.q-form{padding:24px 18px!important}

  .q-row{
    grid-template-columns:1fr!important;
    gap:10px!important;
    align-items:start!important;
  }
  .q-row > span:last-child{justify-self:start!important}

  .q-foot-meta{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px!important;
  }

  .q-style{
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    justify-content:center!important;
    width:auto!important;
  }

  .q-mono-stats,
  .q-mono-logos{grid-template-columns:1fr 1fr!important}
  .q-mono-layers{grid-template-columns:1fr!important}
  .q-mono-stats > div,
  .q-mono-layers > div,
  .q-mono-logos > div{
    border-right:none!important;
    border-bottom:2px solid #FFF;
  }

  img{max-width:100%;height:auto}

  /* Keep hero console from growing as it types (stops layout shift) */
  #console-panel{
    height:260px!important;
    min-height:260px!important;
    max-height:260px!important;
    overflow:hidden!important;
  }
  #console-body{
    font-size:12px!important;
    line-height:1.75!important;
    overflow:hidden!important;
  }
}

@media (max-width:480px){
  .q-stats,
  .q-mono-stats{grid-template-columns:1fr!important}
}