/* =========================================================
   RESPONSIVE / MEDIA QUERIES
========================================================= */

.ra-mobile-toggle{
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255,255,255,.06);
}

.ra-mobile-toggle span{
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: relative;
}

.ra-mobile-toggle span::before,
.ra-mobile-toggle span::after{
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: #fff;
}

.ra-mobile-toggle span::before{
    top: -6px;
}

.ra-mobile-toggle span::after{
    top: 6px;
}

@media (max-width:600px){
    .ra-navbar{
        height: auto;
        min-height: 72px;
    }

    .ra-nav-container{
        padding: 14px 16px;
        align-items: flex-start;
    }

    .ra-nav-right{
        width: 100%;
        justify-content: flex-start;
        margin-top: 12px;
        flex-wrap: wrap;
    }
}

@media (max-width:900px){
    .ra-footer{
        padding: 50px 25px 35px;
    }

    .ra-footer-container{
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

@media (max-width: 991px){
    .ra-navbar{
        height: auto;
        min-height: 72px;
    }

    .ra-nav-container{
        flex-wrap: wrap;
        padding: 12px 0;
    }

    .ra-mobile-toggle{
        display: flex;
        margin-left: auto;
    }

    .ra-nav-menu{
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        margin-top: 15px;
        margin-left: 0;
        display: none;
    }

    .ra-nav-menu.active{
        display: flex;
    }

    .ra-nav-menu > li{
        width: 100%;
    }

    .ra-nav-menu > li > a{
        width: 100%;
        justify-content: flex-start;
        padding: 0 15px;
        height: 46px;
    }

    .ra-dropdown-menu{
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        min-width: 100%;
        margin-top: 8px;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .ra-dropdown.open .ra-dropdown-menu{
        display: block;
    }

    .ra-nav-right{
        width: 100%;
        margin-top: 15px;
        margin-left: 0;
        justify-content: flex-start;
    }
}

@media (max-width:991px){
    .ra-side-nav{
        display: none;
    }

    body{
        padding-left: 0;
    }

    .ra-hero-content h1{
        font-size: 48px;
    }

    .ra-hero-content h2{
        font-size: 42px;
    }

    .ra-hero-content p{
        font-size: 19px;
    }

    .ra-hero-section,
    .ra-second-section{
        background-attachment: scroll;
    }
}

@media(max-width:900px){

    .ra-register-content{
        grid-template-columns:1fr;
    }

    .ra-form-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:900px){

    .ra-reset-content{
        grid-template-columns:1fr;
    }

}

@media(max-width:900px){

    .ra-login-content{
        grid-template-columns:1fr;
    }

}

@keyframes raLogoBreath{
    0%{
        transform:translateY(-75px) scale(1);
    }

    50%{
        transform:translateY(-75px) scale(1.045);
    }

    100%{
        transform:translateY(-75px) scale(1);
    }
}

/* =========================================================
   NOSTAREVO HOME V2 - RESPONSIVE
========================================================= */

@media(max-width:1100px){
    .nr-home-v2{
        padding:85px 35px 75px;
    }

    .nr-mode-grid{
        gap:16px;
    }

    .nr-mode-card{
        padding:30px 24px 26px;
    }

    .nr-highlight-panel{
        grid-template-columns:1fr;
        gap:28px;
    }
}

@media(max-width:850px){
    .nr-mode-grid{
        grid-template-columns:1fr;
    }

    .nr-mode-card,
    .nr-mode-card-featured,
    .nr-mode-card-featured:hover{
        transform:none;
    }

    .nr-mode-card{
        min-height:auto;
    }

    .nr-final-cta{
        flex-direction:column;
        align-items:flex-start;
    }

    .nr-final-actions{
        width:100%;
    }

    .nr-btn{
        flex:1;
    }
}

@media(max-width:600px){
    .nr-home-v2{
        padding:68px 18px 55px;
    }

    .nr-section-heading{
        margin-bottom:38px;
    }

    .nr-section-heading h2{
        font-size:32px;
    }

    .nr-section-heading p{
        font-size:13px;
    }

    .nr-mode-card{
        padding:27px 22px 24px;
        border-radius:20px;
    }

    .nr-highlight-panel{
        margin-top:18px;
        padding:27px 22px;
        border-radius:20px;
    }

    .nr-highlight-stats{
        grid-template-columns:1fr 1fr;
        gap:9px;
    }

    .nr-mini-stat{
        min-height:82px;
        padding:13px 8px;
    }

    .nr-mini-stat strong{
        font-size:18px;
    }

    .nr-final-cta{
        margin-top:18px;
        padding:28px 22px;
        border-radius:20px;
    }

    .nr-final-actions{
        flex-direction:column;
    }

    .nr-btn{
        width:100%;
    }
}

/* =========================================================
   NOSTAREVO HOME V2 - PHONE PORTRAIT FIX
   Only affects narrow portrait screens. Desktop/landscape untouched.
========================================================= */
@media (max-width: 600px) and (orientation: portrait){

    html,
    body{
        max-width:100%;
        overflow-x:hidden !important;
    }

    .nr-home-v2{
        width:100% !important;
        max-width:100% !important;
        padding:62px 18px 52px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .nr-home-container{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:0 auto !important;
        box-sizing:border-box !important;
    }

    .nr-section-heading{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto 38px !important;
        padding:0 4px !important;
        box-sizing:border-box !important;
    }

    .nr-section-heading h2{
        font-size:36px !important;
        line-height:1.08 !important;
        overflow-wrap:normal !important;
        word-break:normal !important;
    }

    .nr-section-heading p{
        max-width:100% !important;
        font-size:14px !important;
        line-height:1.75 !important;
    }

    /* PVE / PVP / WOE - FORCE ONE FULL CARD PER ROW */
    .nr-mode-grid{
        width:100% !important;
        max-width:100% !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        gap:16px !important;
        margin:0 !important;
    }

    .nr-mode-card,
    .nr-mode-card-featured{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        margin:0 !important;
        padding:26px 22px 23px !important;
        box-sizing:border-box !important;
        transform:none !important;
    }

    .nr-mode-card:hover,
    .nr-mode-card-featured:hover{
        transform:none !important;
    }

    .nr-mode-card p{
        width:100% !important;
        max-width:100% !important;
        font-size:13px !important;
        line-height:1.75 !important;
        overflow-wrap:break-word !important;
    }

    .nr-card-number{
        right:20px !important;
        font-size:46px !important;
    }

    .nr-card-bottom{
        display:block !important;
        max-width:100% !important;
        line-height:1.5 !important;
    }

    /* SERVER HIGHLIGHTS - COPY FIRST, STATS 2 x 2 BELOW */
    .nr-highlight-panel{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        gap:25px !important;
        margin:18px 0 0 !important;
        padding:27px 21px !important;
        box-sizing:border-box !important;
    }

    .nr-highlight-copy{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .nr-highlight-copy h3{
        max-width:100% !important;
        font-size:29px !important;
        line-height:1.08 !important;
    }

    .nr-highlight-copy p{
        max-width:100% !important;
        font-size:13px !important;
        line-height:1.75 !important;
    }

    .nr-highlight-stats{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }

    .nr-mini-stat{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        min-height:82px !important;
        padding:12px 7px !important;
        box-sizing:border-box !important;
    }

    .nr-mini-stat strong{
        max-width:100% !important;
        font-size:18px !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    .nr-mini-stat span{
        max-width:100% !important;
        font-size:8px !important;
        line-height:1.4 !important;
        letter-spacing:1px !important;
        white-space:normal !important;
    }

    /* FINAL CTA - EVERYTHING STACKED */
    .nr-final-cta{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:22px !important;
        margin:18px 0 0 !important;
        padding:28px 21px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .nr-final-cta-copy{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .nr-final-cta h3{
        max-width:100% !important;
        font-size:29px !important;
        line-height:1.08 !important;
    }

    .nr-final-cta p{
        max-width:100% !important;
        font-size:13px !important;
        line-height:1.7 !important;
    }

    .nr-final-actions{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;
    }

    .nr-final-actions .nr-btn{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:48px !important;
        box-sizing:border-box !important;
    }
}