/* =========================
   MOBILE LAYOUT
========================= */

@media (max-width:768px) {

    .mobile-menu-btn{
    display:flex !important;
}

.mobile-panel{
    display:block !important;
}

    /* HERO */

    .landing-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 24px 16px 20px !important;
        gap: 0 !important;
    }

    .landing-left,
    .landing-right {
        width: 110%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .landing-left {
        text-align: center;
    }

    .logo-title {
        font-size: clamp(3.6rem, 15vw, 4.8rem) !important;
        line-height: .9 !important;
        margin-bottom: 6px !important;
    }

    .hero-subtitle {
        font-size: .75rem !important;
        letter-spacing: 2px !important;
        margin: 0 !important;
    }

    /* MOBILE NAV */

    .landing-nav {
        display: none !important;
    }

    .mobile-nav {
        display: flex !important;
    }

    /* CREATE / JOIN STACK */

    .card-stack {
        width: 100% !important;
        max-width: 700px !important;
        position: relative !important;
        height: 580px !important;
        margin: 0 auto !important;
        overflow: visible !important;
        gap: 200px;
    }

    .active-stack-card {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 30 !important;
    }
    .stack-card{
    touch-action:pan-y;
    will-change:transform;

    transition:
        transform .2s ease,
        opacity .2s ease,
        filter .2s ease;
}

    .next-stack-card {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 20 !important;
        opacity: .50 !important;
        transform:
            translateX(32px)
            translateY(32px)
            scale(.96) !important;
        filter: blur(2px) !important;
    }

    .stack-shadow {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 540px !important; /* adjust if needed */
        border-radius: 24px !important;
        display: block !important;
        pointer-events: none;
    }

    .stack-shadow-1 {
        z-index: 10 !important;
        background: #050505 !important;
        border: 1px solid rgba(16, 185, 129, .18) !important;
        opacity: 1 !important;

        transform:
            translateX(20px)
            translateY(20px)
            scale(.98) !important;

        box-shadow:
            0 0 0 1px rgba(16, 185, 129, .08),
            0 0 30px rgba(16, 185, 129, .12),
            0 20px 40px rgba(0, 0, 0, .55);
    }

    .stack-shadow-2 {
        z-index: 5 !important;
        background: #050505 !important;
        border: 1px solid rgba(16, 185, 129, .12) !important;
        opacity: 1 !important;

        transform:
            translateX(40px)
            translateY(40px)
            scale(.96) !important;

        box-shadow:
            0 0 0 1px rgba(16, 185, 129, .05),
            0 0 50px rgba(16, 185, 129, .08),
            0 30px 60px rgba(0, 0, 0, .65);
    }

    /* FORM CARD */

    .card--border-glow {
        min-height: 530px !important;
        padding: 28px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .card--border-glow::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 24px;

        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, .15),
                rgba(0, 0, 0, .45)
            );

        pointer-events: none;
        z-index: 0;
    }

    .card--border-glow > * {
        position: relative;
        z-index: 1;
    }

    .card--border-glow h3 {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    .card--border-glow p {
        font-size: .95rem !important;
        line-height: 1.6 !important;
    }

    /* LABELS */

    .input-group label {
        font-size: .95rem !important;
        font-weight: 600 !important;
    }

    /* INPUTS */

    .input-group input {
        height: 50px !important;
        padding: 0 20px !important;
        font-size: 1rem !important;
        border-radius: 16px !important;
    }
    

    /* BUTTON */

    .btn-primary {
        height: 56px !important;
        font-size: .92rem !important;
        font-weight: 700 !important;
        border-radius: 16px !important;
    }

    /* SESSION SWITCHER */

    .session-switcher {
        max-width: 400px !important;
        gap: 8px !important;
        margin: 40px auto 0 auto !important;
    }

    /* .session-tab {
        height: 44px !important;
        font-size: .78rem !important;
        font-weight: 600 !important;
        letter-spacing: .9px !important;
        border-radius: 999px !important;
    } */
    .session-tab {
        min-width: 150px;
        height: 60px;
        border-radius: 900px !important;
        font-size: .97rem;
        font-weight: 700;
        letter-spacing: 0.8px;
        cursor: pointer;
        transition: .1s ease;
    }
    

    /* INFO CARDS */

    .info-grid,
    .feature-grid {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .zero-trust-section {
        padding: 0 !important;
        margin: 0 !important;
    }

    .devices-section {
        padding: 0 !important;
        margin-top: 100px !important;
    }

    .feature-card,
    .info-card {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        min-height: 420px !important;
        padding: 24px !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
    }

    .feature-card::before,
    .info-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;

        background:
            linear-gradient(
                rgba(16, 185, 129, .08) 1px,
                transparent 1px
            ),
            linear-gradient(
                90deg,
                rgba(16, 185, 129, .08) 1px,
                transparent 1px
            );

        background-size: 40px 40px;

        pointer-events: none;
        z-index: 0;
    }

    .feature-card > *,
    .info-card > * {
        position: relative;
        z-index: 1;
    }

    .info-card-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .info-card-desc {
        font-size: .95rem !important;
        line-height: 1.7 !important;
        padding-right: 0 !important;
        margin-bottom: 28px !important;
    }

    /* STATS */

    .trust-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-top: 24px !important;
        padding-top: 24px !important;
        border-top: 1px solid rgba(255, 255, 255, .08) !important;
    }

    /* DEVICES */

    .device-card {
        padding: 20px !important;
        border-radius: 18px !important;
    }

    .device-card h3 {
        font-size: 1.2rem !important;
    }

    .device-card p {
        font-size: .9rem !important;
        line-height: 1.6 !important;
    }
    
/* =========================
   ABOUT PAGE MOBILE
========================= */

.about-layout{
    min-height:auto !important;

    display:flex !important;
    flex-direction:column !important;

    gap:20px !important;

    padding:20px 16px 40px !important;
}

.about-left{
    width:100% !important;

    min-height:auto !important;

    display:flex !important;
    flex-direction:column !important;

    justify-content:center !important;
    align-items:center !important;

    text-align:center !important;

    margin:0 !important;
    margin-top:0 !important;

    padding:40px 0 0 0 !important;
}

.about-left .logo-title{
    font-size:clamp(4rem,18vw,5rem) !important;

    line-height:.9 !important;

    margin-bottom:8px !important;
}

.about-left .hero-subtitle{
    font-size:.8rem !important;

    letter-spacing:4px !important;

    margin:0 !important;

    line-height:1.6 !important;
}

.about-right{
    width:100% !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;
}

.about-card{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    padding:24px !important;

    border-radius:20px !important;
}

.about-card h2{
    font-size:1.6rem !important;
    line-height:1.3 !important;
}

.about-card h3{
    font-size:1.35rem !important;
    line-height:1.3 !important;
}

.about-card p{
    font-size:.95rem !important;
    line-height:1.8 !important;
}

.about-card ul{
    padding-left:18px !important;
}

.about-card li{
    font-size:.92rem !important;
    line-height:1.8 !important;
    margin-bottom:12px !important;
}

.about-card .btn,
.about-card button{
    width:100% !important;
}
}

/* =========================
   PREMIUM MOBILE MENU
========================= */

.mobile-panel {
    position: fixed;

    top: 16px;
    right: -320px;

    width: 280px;
    height: auto;

    padding: 22px;

    background: rgba(0, 0, 0, .88);

    backdrop-filter: blur(24px);

    border: 1px solid rgba(16, 185, 129, .15);

    border-radius: 24px;

    box-shadow:
        0 0 40px rgba(16, 185, 129, .15),
        0 20px 60px rgba(0, 0, 0, .55);

    z-index: 99998;

    transition: .35s cubic-bezier(.4, 0, .2, 1);
}

.mobile-panel.show {
    right: 16px;
}

.mobile-panel-header {
    margin-bottom: 20px;
}

.mobile-panel-header h3 {
    margin: 0;

    color: var(--primary);

    font-family: "JetBrains Mono", monospace;

    font-size: 1.2rem;
}

.mobile-panel-link {
    display: block;

    padding: 14px 0;

    color: white;

    text-decoration: none;

    border-bottom: 1px solid rgba(255, 255, 255, .06);

    font-size: .95rem;
}

.mobile-panel-link:hover {
    color: var(--primary);
}

.mobile-install-btn {
    width: 100%;

    height: 48px;

    margin-top: 18px;

    border: none;

    border-radius: 14px;

    background: var(--primary);

    color: black;

    font-weight: 700;

    cursor: pointer;
}

.mobile-menu-btn {
    position: fixed;

    top: 16px;
    right: 16px;

    width: 52px;
    height: 52px;

    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 5px;

    background: rgba(0, 0, 0, .8);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(16, 185, 129, .15);

    border-radius: 16px;

    cursor: pointer;

    z-index: 99999;
}

.mobile-menu-btn span {
    width: 22px;
    height: 2px;

    background: var(--primary);

    transition: .3s ease;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}
/* =========================
   EXTRA SMALL DEVICES
========================= */

@media (max-width: 480px) {

    .logo-title {
        font-size: 3.3rem !important;
        line-height: .9 !important;
    }

    .hero-subtitle {
        font-size: .68rem !important;
        letter-spacing: 2px !important;
    }

    .card-stack {
        max-width: 100% !important;
        padding: 10 16px !important;
    }

    .card--border-glow {
        padding: 22px !important;
        border-radius: 20px !important;
    }

    .card--border-glow h3 {
        font-size: 1.65rem !important;
        line-height: 1.15 !important;
    }

    .card--border-glow p {
        font-size: .9rem !important;
        line-height: 1.5 !important;
    }

    .input-group label {
        font-size: .9rem !important;
    }

    .input-group input {
        height: 52px !important;
        font-size: .95rem !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
    }

    .btn-primary {
        height: 52px !important;
        font-size: .88rem !important;
        font-weight: 700 !important;
        border-radius: 14px !important;
    }

    .session-switcher {
        width: 100% !important;
        padding: 0 10px !important;
        gap: 8px !important;
        margin: 20px auto 8px auto !important;

        position: relative;

        z-index: 20;
    }

    .session-tab {
        height: 48px !important;
        font-size: .82rem !important;
        font-weight: 600 !important;
        letter-spacing: .5px !important;
        border-radius: 999px !important;
    }

    .mobile-menu-btn {
        position: fixed !important;

        top: 16px !important;
        right: 16px !important;

        width: 48px !important;
        height: 48px !important;

        z-index: 99999 !important;
    }

    .feature-card,
    .info-card {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;

        padding: 20px !important;

        border-radius: 18px !important;
    }

    .info-card-title {
        font-size: 1.55rem !important;
        gap: 12px !important;
    }

    .info-card-desc {
        font-size: .9rem !important;
        line-height: 1.7 !important;
    }

    .trust-stats {
        gap: 6px !important;
    }

    .trust-stats .font-mono:first-child {
        font-size: 1.3rem !important;
    }

    .trust-stats .font-mono:last-child {
        font-size: .55rem !important;
        line-height: 1.2 !important;
    }
}