@media(max-width:768px){
  header{
    height:auto!important;
    min-height:72px!important;
    padding:14px 18px!important;
    flex-wrap:wrap!important;
    gap:12px!important;
    align-items:center!important;
  }

  .logo{
    font-size:30px!important;
    letter-spacing:4px!important;
    flex:1 1 auto!important;
  }

  .user-area{
    flex:0 0 auto!important;
  }

  .user-menu{
    gap:8px!important;
    padding:8px!important;
    border-radius:14px!important;
  }

  .user-name{
    max-width:70px!important;
    font-size:14px!important;
  }

  .user-link{
    font-size:13px!important;
    line-height:1.3!important;
  }

  .logout-btn{
    padding:8px 10px!important;
    font-size:13px!important;
  }

  .hero{
    padding:50px 20px!important;
    min-height:auto!important;
    grid-template-columns:1fr!important;
  }

  .hero h1{
    font-size:34px!important;
    line-height:1.18!important;
  }

  .hero p{
    font-size:15px!important;
  }

  .card{
    padding:22px!important;
  }

  .section,
  .page{
    padding:48px 20px!important;
  }

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

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

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

  .footer-pro{
    padding:46px 28px 120px!important;
  }

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

  .footer-grid > div:first-child{
    grid-column:1 / -1!important;
    text-align:left!important;
  }

  .qr-box{
    width:110px!important;
    height:110px!important;
  }

  .footer-col h3{
    font-size:18px!important;
    margin-bottom:16px!important;
  }

  .footer-col a{
    font-size:14px!important;
    margin-bottom:12px!important;
  }

  .footer-bottom{
    flex-direction:column!important;
    gap:8px!important;
  }
}

@media(max-width:420px){
  .footer-grid{
    grid-template-columns:1fr 1fr!important;
  }

  .logo{
    font-size:28px!important;
  }

  .user-menu{
    width:100%!important;
    justify-content:space-between!important;
  }

  header{
    justify-content:space-between!important;
  }
}

.mobile-menu-btn{
  display:none;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#27e6d3;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
}

@media(max-width:900px){
  .mobile-menu-btn{
    display:flex!important;
    align-items:center;
    justify-content:center;
    order:2;
  }

  #main-nav{
    display:none!important;
    width:100%;
    order:4;
    margin-top:8px;
    padding:12px;
    border-radius:18px;
    background:rgba(13,27,47,.96);
    border:1px solid rgba(255,255,255,.10);
  }

  #main-nav.mobile-open{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  #main-nav a{
    margin:0!important;
    padding:14px 12px;
    text-align:center;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    color:#d8e7f7;
    font-size:14px;
    font-weight:700;
  }

  #main-nav a:hover{
    background:rgba(39,230,211,.12);
    color:#27e6d3;
  }

  .user-area{
    order:3;
  }

  .logo{
    order:1;
  }
}

@media(max-width:420px){
  #main-nav.mobile-open{
    grid-template-columns:1fr;
  }
}