/* =========================================================
   OBSEDIAN.SPACE — RESPONSIVE MOBILE NAVIGATION
========================================================= */

.mobile-nav-toggle,
.mobile-nav-menu,
.mobile-nav-backdrop{
    display:none;
}

@media (max-width:1050px){
    .nav-wrap{
        min-height:68px;
        padding:0 4%;
        gap:10px;
    }

    .nav-wrap .desktop-nav{
        display:none;
    }

    .nav-wrap .nav-actions{
        display:flex;
        margin-left:auto;
        gap:8px;
    }

    .nav-wrap .nav-actions .btn-light,
    .nav-wrap .nav-actions .btn-gradient{
        display:inline-flex;
        white-space:nowrap;
    }

    .mobile-nav-toggle{
        width:42px;
        height:42px;
        padding:0;
        border:1px solid #ded8ec;
        border-radius:12px;
        background:#fff;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px;
        cursor:pointer;
        flex:0 0 42px;
        box-shadow:0 8px 24px rgba(66,36,130,.08);
    }

    .mobile-nav-toggle span{
        width:18px;
        height:2px;
        border-radius:999px;
        background:#3c3154;
        transition:transform .2s ease, opacity .2s ease;
    }

    .mobile-nav-toggle[aria-expanded="true"] span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2){
        opacity:0;
    }

    .mobile-nav-toggle[aria-expanded="true"] span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .mobile-nav-backdrop{
        position:fixed;
        inset:0;
        background:rgba(17,12,31,.42);
        z-index:90;
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease;
    }

    .mobile-nav-menu{
        position:fixed;
        top:0;
        right:0;
        width:min(360px,88vw);
        height:100vh;
        padding:18px;
        background:#fff;
        border-left:1px solid #ece7f4;
        box-shadow:-20px 0 60px rgba(31,18,60,.18);
        z-index:100;
        overflow:auto;
        transform:translateX(105%);
        transition:transform .24s ease;
    }

    .mobile-nav-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        min-height:48px;
        padding-bottom:15px;
        border-bottom:1px solid #eeeaf4;
    }

    .mobile-nav-head strong{
        font-size:13px;
        letter-spacing:.08em;
    }

    .mobile-nav-head button{
        width:40px;
        height:40px;
        border:1px solid #e2ddec;
        border-radius:10px;
        background:#fff;
        color:#3f3453;
        font-size:26px;
        line-height:1;
        cursor:pointer;
    }

    .mobile-nav-menu nav{
        display:flex;
        flex-direction:column;
        gap:0;
        padding:14px 0;
    }

    .mobile-nav-menu nav a{
        display:block;
        padding:15px 4px;
        border-bottom:1px solid #f0edf5;
        color:#4f4a5c;
        font-size:15px;
        font-weight:700;
    }

    .mobile-nav-actions{
        display:flex;
        flex-direction:column;
        gap:10px;
        padding-top:8px;
    }

    .mobile-nav-actions .btn{
        width:100%;
    }

    body.mobile-nav-open{
        overflow:hidden;
    }

    body.mobile-nav-open .mobile-nav-menu{
        transform:translateX(0);
    }

    body.mobile-nav-open .mobile-nav-backdrop{
        opacity:1;
        pointer-events:auto;
    }
}

@media (max-width:700px){
    .nav-wrap .nav-actions .btn{
        padding:9px 11px;
        font-size:11px;
    }

    .nav-wrap .nav-actions .btn-gradient span{
        font-size:12px;
    }

    .hero{
        padding-top:42px;
    }
}

@media (max-width:520px){
    .nav-wrap .logo{
        width:126px;
        flex-basis:126px;
    }

    .nav-wrap .logo img{
        height:36px;
        max-height:36px;
        max-width:126px;
    }

    .nav-wrap .nav-actions{
        gap:6px;
    }

    .nav-wrap .nav-actions .btn{
        padding:8px 9px;
        border-radius:9px;
        font-size:10px;
    }

    .mobile-nav-toggle{
        width:40px;
        height:40px;
        flex-basis:40px;
    }

    .hero h1{
        font-size:clamp(36px,11.5vw,50px);
    }

    .hero-lead{
        font-size:14px;
    }

    .trust-row{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:9px 12px;
    }

    .ai-stage{
        min-height:500px;
        height:500px;
    }
}

@media (max-width:390px){
    .nav-wrap{
        padding-left:3.5%;
        padding-right:3.5%;
    }

    .nav-wrap .logo{
        width:112px;
        flex-basis:112px;
    }

    .nav-wrap .logo img{
        max-width:112px;
    }

    .nav-wrap .nav-actions .btn-light{
        padding-left:8px;
        padding-right:8px;
    }

    .nav-wrap .nav-actions .btn-gradient{
        font-size:9px;
        padding-left:8px;
        padding-right:8px;
    }

    .mobile-nav-menu{
        width:min(330px,92vw);
    }
}