@media(max-width:1200px){
    .header__inner{
        gap:23px
    }
    .nav{
        gap:18px
    }
    .header__actions{
        gap:15px
    }
    .main-layout{
        grid-template-columns:260px minmax(0,1fr);
        gap:23px
    }
    .sidebar{
        padding:19px
    }
    .profile-card__image{
        width:170px
    }
    .profile-card__info{
        padding:18px
    }
    .profile-card__top{
        flex-wrap:wrap;
        gap:5px
    }
    .profile-card__top .price small{
        display:inline;
        margin-left:4px
    }
    .info-sections{
        gap:16px
    }
    .section-panel{
        padding:21px
    }
    .toolbar{
        flex-wrap:wrap
    }
    .toolbar>.filter-input,.toolbar>.query-field{
        flex-basis:100%
    }
    .toolbar>.custom-select{
        flex:1;
        max-width:none
    }
}
@media(max-width:1024px){
    .header__inner{
        flex-wrap:wrap;
        row-gap:15px
    }
    .header__actions{
        margin-left:auto
    }
    .nav{
        order:3;
        width:100%;
        justify-content:center;
        margin:0;
        gap:30px;
        border-top:1px solid #ffffff0b;
        padding-top:10px
    }
    .hero{
        padding:52px 0 46px
    }
    .hero__content{
        max-width:540px
    }
    .hero h1{
        font-size:44px
    }
    .hero__subtitle{
        font-size:16px
    }
    .content__header{
        flex-wrap:wrap;
        align-items:flex-start
    }
    .view-controls{
        width:100%;
        justify-content:space-between
    }
    .content__header h2{
        font-size:29px
    }
    .profiles-list.is-grid{
        grid-template-columns:minmax(0,1fr)
    }
    .profiles-list.is-grid .profile-card__image{
        height:300px
    }
    .info-sections{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .info-sections .section-panel:last-child{
        grid-column:1/-1
    }
    .contact-form{
        max-width:650px
    }
    .footer-features{
        flex-wrap:wrap;
        gap:22px
    }
    .f-feature{
        flex:1 1 220px
    }
}
@media(max-width:800px){
    .container{
        padding-left:22px;
        padding-right:22px
    }
    .main-layout{
        grid-template-columns:minmax(0,1fr);
        padding-top:28px;
        gap:22px
    }
    .sidebar{
        display:block
    }
    .sidebar.is-collapsed{
        display:none
    }
    .mobile-filter-toggle{
        display:inline-flex
    }
    .main-layout>.mobile-filter-toggle{
        width:100%
    }
    .content__header{
        align-items:center;
        flex-wrap:nowrap
    }
    .view-controls{
        width:auto;
        justify-content:initial
    }
    .filter-group{
        margin-bottom:15px
    }
    .sidebar .categories{
        margin-top:16px
    }
    .category-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:5px
    }
    .profile-card__image{
        width:190px
    }
    .profile-card__top{
        flex-wrap:nowrap
    }
    .toolbar{
        flex-wrap:nowrap
    }
    .toolbar>.filter-input,.toolbar>.query-field{
        flex-basis:auto
    }
    .toolbar>.custom-select{
        flex:0 1 auto;
        max-width:180px
    }
    .profiles-list.is-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .profiles-list.is-grid .profile-card__image{
        height:250px
    }
    .profiles-list.is-grid .profile-card__top{
        flex-wrap:wrap
    }
    .hero::before{
        background:linear-gradient(90deg,#0b0b0ef5 0%,#0b0b0ed9 40%,#0b0b0e80),linear-gradient(0deg,#0b0b0e,transparent 35%)
    }
}
@media(max-width:600px){
    .container{
        padding-left:17px;
        padding-right:17px
    }
    .header{
        padding:17px 0
    }
    .header__inner{
        gap:10px
    }
    .main-logo{
        height:43px;
        max-width:165px
    }
    .brand__name{
        font-size:27px
    }
    .brand__tagline{
        font-size:8px;
        letter-spacing:1.5px
    }
    .header__actions{
        gap:8px
    }
    .language-label{
        display:none
    }
    .header__actions .btn{
        min-height:40px;
        padding:8px 13px;
        font-size:12px
    }
    .header-account{
        max-width:90px
    }
    .nav-toggle{
        display:inline-flex;
        width:40px;
        height:40px
    }
    .nav{
        display:none;
        gap:4px;
        padding-top:11px
    }
    .nav.is-open{
        display:flex;
        flex-direction:column;
        align-items:stretch
    }
    .nav__link{
        padding:11px 12px;
        border-radius:5px
    }
    .nav__link.active{
        background:#f04a8310;
        color:#ff8bb1
    }
    .nav__link.active::after{
        display:none
    }
    .hero{
        padding:41px 0 35px;
        background-position:65% top
    }
    .hero h1{
        font-size:37px;
        margin-bottom:19px
    }
    .hero__subtitle{
        max-width:340px;
        font-size:14px;
        line-height:1.8;
        margin-bottom:24px
    }
    .hero__features{
        gap:18px;
        flex-wrap:wrap;
        margin-top:25px
    }
    .feature{
        gap:7px;
        font-size:10px
    }
    .feature .icon{
        width:21px;
        height:21px
    }
    .content__header{
        flex-wrap:wrap;
        gap:13px
    }
    .content__header h2{
        font-size:29px
    }
    .view-controls{
        width:100%;
        justify-content:space-between
    }
    .toolbar{
        flex-wrap:wrap
    }
    .toolbar>.filter-input,.toolbar>.query-field{
        flex-basis:100%
    }
    .toolbar>.custom-select{
        flex:1;
        max-width:none
    }
    .favorites-toggle{
        padding-left:10px;
        padding-right:10px
    }
    .demo-notice{
        font-size:10px;
        line-height:1.8;
        padding:11px 12px
    }
    .profile-card{
        flex-direction:column
    }
    .profile-card__image{
        width:100%;
        height:310px;
        min-height:0
    }
    .profile-card__image img{
        object-position:center 30%
    }
    .profile-card__info{
        padding:19px
    }
    .profile-card__top{
        flex-wrap:wrap;
        gap:7px
    }
    .profile-card__top h3{
        font-size:20px
    }
    .profile-card__top .price{
        font-size:14px
    }
    .profile-card__top .price small{
        font-size:10px
    }
    .desc{
        font-size:12px
    }
    .profile-card__bottom{
        gap:12px
    }
    .profiles-list.is-grid{
        grid-template-columns:minmax(0,1fr)
    }
    .profiles-list.is-grid .profile-card__image{
        height:310px
    }
    .info-sections{
        grid-template-columns:minmax(0,1fr);
        gap:14px;
        padding-bottom:24px
    }
    .info-sections .section-panel:last-child{
        grid-column:auto
    }
    .section-panel{
        padding:23px
    }
    .footer{
        padding-top:30px
    }
    .footer-features{
        gap:23px
    }
    .f-feature{
        flex-basis:100%
    }
    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:22px
    }
    .footer-nav{
        gap:14px 22px
    }
    .footer-18{
        max-width:none
    }
    .footer-copyright{
        margin-top:22px
    }
    dialog.modal{
        width:calc(100% - 24px);
        max-height:calc(100dvh - 24px)
    }
    dialog.modal.modal-wide,dialog.modal.profile-modal{
        width:calc(100% - 24px)
    }
    .modal__body{
        padding:27px 21px
    }
    .modal__title{
        font-size:26px
    }
    .modal__close{
        top:10px;
        right:10px
    }
    .profile-detail{
        grid-template-columns:minmax(0,1fr);
        gap:21px
    }
    .detail-image{
        height:290px
    }
    .form-grid{
        grid-template-columns:minmax(0,1fr)
    }
    .toast-container{
        right:16px;
        bottom:16px
    }
}
@media(max-width:360px){
    .container{
        padding-left:14px;
        padding-right:14px
    }
    .brand__name{
        font-size:24px
    }
    .brand__tagline{
        font-size:7px
    }
    .main-logo{
        max-width:138px
    }
    .header__actions .btn{
        padding-left:10px;
        padding-right:10px
    }
    .hero h1{
        font-size:32px
    }
    .hero__features{
        gap:15px 12px
    }
    .feature{
        gap:5px;
        font-size:9px
    }
    .feature .icon{
        width:19px;
        height:19px
    }
    .sidebar{
        padding:17px
    }
    .category-btn{
        padding-left:7px;
        gap:6px;
        font-size:11px
    }
    .category-btn .icon{
        width:15px;
        height:15px
    }
    .favorites-toggle{
        font-size:10px;
        gap:5px
    }
    .profile-card__image,.profiles-list.is-grid .profile-card__image{
        height:275px
    }
    .profile-card__info{
        padding:17px
    }
    .section-panel{
        padding:20px
    }
}
@media (max-width: 1024px) {
    .hero { padding-top: 43px; padding-bottom: 42px; }
}
@media (max-width: 600px) {
    .brand { gap: 9px; }
    .brand > .icon { width: 29px; height: 29px; }
    .brand__tagline { margin-top: 4px; letter-spacing: 1.1px; font-size: 7px; }
    .hero { padding-top: 31px; padding-bottom: 32px; }
    .hero h1 { font-size: 36px; }
    .hero__eyebrow { font-size: 9px; letter-spacing: 1.8px; margin-bottom: 12px; }
    .hero__features { margin-top: 22px; }
    .header-account { gap: 7px; max-width: 140px; }
    .account-name { max-width: 62px; font-size: 11px; }
    .account-name .icon { display: none; }
    main > .container > .demo-notice { margin-top: 18px; }
}
@media (max-width: 360px) {
    .brand { gap: 7px; }
    .brand > .icon { width: 25px; height: 25px; }
    .brand__tagline { font-size: 6px; letter-spacing: 1px; }
    .hero h1 { font-size: 32px; }
    .hero__eyebrow { font-size: 8px; }
    .account-name { max-width: 47px; }
}
@media (max-width: 420px) {
    .account-name { display: none; }
}