/* FELICIA MOBILE NAV + RESPONSIVE LAYOUT 20260828 V2 */
.mobile-nav-toggle{display:none}

@media (max-width:820px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body.felicia-nav-open{overflow:hidden}

  .site-shell{width:100%!important;margin:0!important;border-radius:0!important;border-left:0!important;border-right:0!important}
  .topbar{
    position:relative!important;
    z-index:1000!important;
    width:100%!important;
    min-height:76px!important;
    padding:10px 12px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    flex-wrap:nowrap!important;
    background:rgba(5,5,5,.97)!important;
    border-bottom:1px solid rgba(255,106,0,.22)!important;
    box-sizing:border-box!important;
  }

  .topbar .identity{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important;max-width:calc(100% - 58px)!important}
  .topbar .identity img{width:54px!important;height:54px!important;min-width:54px!important;border-radius:14px!important;object-fit:cover!important}
  .topbar .identity span{display:grid!important;gap:3px!important;min-width:0!important}
  .topbar .identity b{font-size:17px!important;line-height:1.1!important;letter-spacing:1px!important;white-space:nowrap!important}
  .topbar .identity small{font-size:7px!important;line-height:1.35!important;letter-spacing:1.25px!important;white-space:normal!important;max-width:190px!important}

  .mobile-nav-toggle{
    appearance:none;
    position:relative!important;
    display:grid!important;
    place-items:center;
    width:46px;
    height:46px;
    min-width:46px;
    padding:0;
    border:1px solid rgba(255,106,0,.52);
    border-radius:13px;
    background:linear-gradient(145deg,rgba(255,106,0,.14),rgba(10,10,11,.98));
    box-shadow:inset 0 0 20px rgba(255,95,0,.07),0 8px 22px rgba(0,0,0,.38);
    cursor:pointer;
  }
  .mobile-nav-toggle span{position:absolute;top:50%;left:50%;width:22px;height:2px;border-radius:4px;background:#ff7417;transform-origin:center;transition:transform .25s ease,opacity .2s ease}
  .mobile-nav-toggle span:nth-child(1){transform:translate(-50%,-8px)}
  .mobile-nav-toggle span:nth-child(2){transform:translate(-50%,-50%)}
  .mobile-nav-toggle span:nth-child(3){transform:translate(-50%,6px)}
  .topbar.nav-open .mobile-nav-toggle span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
  .topbar.nav-open .mobile-nav-toggle span:nth-child(2){opacity:0;transform:translate(-50%,-50%)}
  .topbar.nav-open .mobile-nav-toggle span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}
  .topbar .main-nav{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    margin:0!important;
    padding:9px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    border:1px solid rgba(255,106,0,.38)!important;
    border-radius:16px!important;
    background:rgba(7,7,8,.985)!important;
    box-shadow:0 24px 65px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.04)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-10px) scale(.985)!important;
    transform-origin:top right!important;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease!important;
  }
  .topbar.nav-open .main-nav{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0) scale(1)!important}
  .topbar .main-nav a{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    padding:13px 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    border:1px solid transparent!important;
    border-radius:10px!important;
    color:#ece9e6!important;
    font-size:13px!important;
    letter-spacing:1.1px!important;
  }
  .topbar .main-nav a:hover,.topbar .main-nav a:focus-visible{border-color:rgba(255,106,0,.65)!important;background:rgba(255,106,0,.12)!important;color:#fff!important;transform:none!important}

  .hero{min-height:auto!important;grid-template-columns:1fr!important;overflow:hidden!important}
  .hero-copy{width:100%!important;padding:44px 20px 24px!important}
  .hero-copy h1,.hero-copy h1::before{max-width:100%!important;font-size:clamp(46px,14vw,62px)!important;line-height:.98!important;letter-spacing:-1.5px!important;overflow-wrap:normal!important}
  .hero-copy>p{margin:30px 0 28px!important;max-width:100%!important}
  .hero-copy>p::after{max-width:100%!important;font-size:10px!important;line-height:2!important;letter-spacing:1.45px!important;overflow-wrap:anywhere!important}
  .online{max-width:100%!important;flex-wrap:wrap!important;row-gap:7px!important}
  .hero-machine{width:100%!important;min-height:340px!important;overflow:hidden!important}
  .hero-machine .glass{width:88%!important;height:76%!important;border-radius:25px!important;transform:none!important}
  .hero-machine .glass-back{transform:translate(-12px,-10px)!important}
  .hero-machine .glass-front img{width:min(190px,54vw)!important;border-radius:24px!important}
  .hero-machine .corner{width:82px!important;height:54px!important}

  .metric-bar{grid-template-columns:1fr!important;margin:0 12px 18px!important;padding:10px 14px!important}
  .metric-bar article{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.06)!important;padding:12px 5px!important}
  .metric-bar article:last-of-type{border-bottom:0!important}
  .qualities{grid-column:1!important;padding:15px 0!important}
  .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:22px 14px!important}
  .brand-card{min-width:0!important;height:104px!important}
  .brand-card img{width:100px!important;height:44px!important;max-width:82%!important}
  .service-showcase,.access-grid,.total-stats{grid-template-columns:1fr!important}
  .service-showcase{padding-left:14px!important;padding-right:14px!important}
  .service-showcase article{min-height:220px!important}
  .access-grid{padding:10px 14px 28px!important}
  .total-stats article{min-width:0!important}
  .final-cta{margin-left:14px!important;margin-right:14px!important;padding:22px 18px!important;display:grid!important;grid-template-columns:auto 1fr!important;gap:14px!important}
  .final-cta a{grid-column:1/-1!important;width:100%!important;text-align:center!important}
  footer{flex-direction:column!important;gap:12px!important;padding:22px 18px!important}

  .page-shell{width:100%!important;max-width:100%!important;padding-left:14px!important;padding-right:14px!important}
  .page-heading{grid-template-columns:1fr!important;gap:20px!important}
  .page-heading h1{font-size:clamp(38px,12vw,58px)!important}
  .page-heading .search,.search{width:100%!important;max-width:100%!important}
  .tool-grid,.reseller-grid{grid-template-columns:1fr!important}
  body.auth-page>.card,body.auth-with-navbar .register-card,body.auth-with-navbar .card{width:calc(100% - 28px)!important;max-width:480px!important;margin:22px auto!important}
}

@media (max-width:380px){
  .topbar .identity small{display:none!important}
  .topbar .identity b{font-size:15px!important}
  .hero-copy h1,.hero-copy h1::before{font-size:43px!important}
}