*{
    box-sizing:border-box;
}

.navbar{
    width:100%;
    min-height:128px;
    display:flex;
    justify-content:center;
    align-items:center;
    position:sticky;
    top:0;
    z-index:999;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(14px);
    border-bottom:1px solid #DCE4EC;
    padding:14px 3%;
}

.logo-wrap{
    position:absolute;
    left:4%;
    top:50%;
    transform:translateY(-50%);
}

.logo-img{
    height:120px;
    width:auto;
    display:block;
}

nav{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
}

nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#8A4B16;
    font-size:15px;
    font-weight:600;
    line-height:1;
    padding:12px 15px;
    border:1px solid #F2B77B;
    border-radius:8px;
    background:linear-gradient(135deg,#FFF4E8,#FFE8D0);
    text-decoration:none;
    transition:all .2s ease;
    box-shadow:0 2px 6px rgba(230,126,34,0.10);
}

nav a:hover{
    color:#7A3E0D;
    border-color:#E99A4D;
    background:linear-gradient(135deg,#FFE8D0,#FFD9B5);
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(230,126,34,0.18);
}

.nav-buttons{
    display:none;
}

.section{
    padding:38px 5% 72px;
}

.section-title{
    font-size:52px;
    margin-bottom:16px;
    color:#8A4B16;
}

.section-text{
    color:#64748B;
    max-width:760px;
    line-height:1.8;
    font-size:18px;
}

.footer{
    text-align:center;
    padding:80px 20px;
    color:#64748B;
}

.mobile-bg-logo,
.mobile-sloth{
    display:none;
}

.mobile-categories{
    display:none;
}

@media(max-width:1100px){

    .navbar{
        min-height:104px;
        padding:10px 2%;
    }

    .logo-wrap{
        left:2%;
    }

    .logo-img{
        height:100px;
    }

    nav{
        gap:5px;
        margin-left:90px;
    }

    nav a{
        font-size:14px;
        padding:10px 10px;
    }
}

@media(max-width:768px){

    .navbar{
        height:78px;
        min-height:0;
        padding:4px 12px;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:0;
    }
    
    nav{
        margin-left:auto;
        justify-content:flex-end;
        flex-wrap:nowrap;
        gap:10px;
    }
    
    nav > a{
        font-size:11px;
        padding:7px 9px;
        white-space:nowrap;
    }

    .logo-wrap{
        position:absolute;
        left:12px;
        top:50%;
        width:100px;
        height:100px;
        transform:translateY(-50%);
    }

    .logo-img{
        display:none;
    }
    
    .mobile-bg-logo{
        display:block;
        width:100px;
        height:auto;
    }
    
    .mobile-sloth{
        display:block;
        position:absolute;
        width:36px;
        left:30px;
        top:22px;
        transform-origin:50% 8%;
        animation:sloth-hang 4.5s ease-in-out infinite;
    }
    
    .desktop-nav{
        display:none;
    }
    
    .mobile-only{
        display:block;
    }
    
    .hero .bg-logo{
        display:none;
    }

    .hero .sloth-mascot{
        display:none;
    }

    .mobile-categories{
        position:relative;
    }
    
    .mobile-categories summary{
        list-style:none;
        cursor:pointer;
        font-size:11px;
        padding:7px 12px;
        color:#8A4B16;
        background:#FFF4E8;
        border:1px solid #F2B77B;
        border-radius:8px;
    }
    
    .mobile-categories summary::-webkit-details-marker{
        display:none;
    }
    
    .mobile-category-menu{
        position:absolute;
        top:100%;
        right:0;
        width:190px;
        margin-top:6px;
        padding:8px;
        background:#fff;
        border:1px solid #DCE4EC;
        border-radius:12px;
        box-shadow:0 8px 24px rgba(23,32,51,.12);
        z-index:1000;
    }
    
    .mobile-category-menu a{
        display:block;
        padding:8px 10px;
        font-size:12px;
        color:#172033;
        text-decoration:none;
    }

    .section{
        padding:24px 20px 48px;
    }

    .section-title{
        font-size:32px;
        line-height:1.08;
        margin-bottom:20px;
    }

    .section-text{
        font-size:15px;
        line-height:1.65;
    }

    .footer{
        padding:40px 20px;
    }
    
}