/* ==========================================
   VAULT MAIN STYLE
========================================== */


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



:root{

    --bg:#111318;

    --panel:#161b22;

    --panel-hover:#21262d;

    --border:#30363d;

    --text:#f4f4f4;

    --muted:#9ca3af;

    --gold:#D9A441;

}





html{

    scroll-behavior:smooth;

}





body{

    background:var(--bg);

    color:var(--text);

    font-family:"Outfit",sans-serif;

    overflow-x:hidden;

}





a{

    text-decoration:none;

    color:inherit;

}





img{

    max-width:100%;

    display:block;

}





.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}







/* ==========================================
   BACKGROUND GLOW
========================================== */


.background-glow{


    position:fixed;


    width:650px;


    height:650px;


    right:-250px;


    top:100px;


    border-radius:50%;


    background:var(--gold);


    opacity:.12;


    filter:blur(180px);


    z-index:-1;


}







/* ==========================================
   HEADER
========================================== */


header{


    height:90px;


    background:var(--bg);


    border-bottom:1px solid #20242c;


}





nav{


    height:90px;


    display:flex;


    align-items:center;


    justify-content:space-between;


}





.logo img{


    height:58px;


}







/* ==========================================
   NAVIGATION
========================================== */


nav ul{


    display:flex;


    align-items:center;


    gap:45px;


    list-style:none;


}





nav ul a{


    color:#b6bec8;


    font-weight:500;


    transition:.25s;


}





nav ul a:hover{


    color:white;


}







/* ==========================================
   ACCOUNT
========================================== */


.account{


    display:flex;


    align-items:center;


    gap:12px;


}





.login,
.register{


    padding:12px 24px;


    border-radius:10px;


    font-weight:600;


    transition:.25s;


}





.login{


    color:white;


    border:1px solid var(--border);


}





.login:hover{


    border-color:var(--gold);


}





.register{


    background:var(--gold);


    color:#111;


}





.register:hover{


    transform:translateY(-2px);


    box-shadow:

    0 10px 30px rgba(217,164,65,.25);


}
/* ==========================================
   PROFILE MENU
========================================== */


.profile-menu{

    position:relative;

}





.profile-button{

    background:none;

    border:none;

    padding:0;

    cursor:pointer;

    transition:.25s;

}





.profile-button:hover{

    transform:scale(1.05);

}





.profile-button img{


    width:52px;


    height:52px;


    border-radius:50%;


    object-fit:cover;


    border:3px solid var(--gold);


}







.profile-letter{


    width:52px;


    height:52px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:linear-gradient(

        135deg,

        var(--gold),

        #a87520

    );


    color:#111;


    font-size:20px;


    font-weight:800;


    border:3px solid var(--gold);


}





.profile-letter.large{


    width:60px;


    height:60px;


    font-size:24px;


}







/* ==========================================
   DROPDOWN
========================================== */


.profile-dropdown{


    position:absolute;


    top:65px;


    right:0;


    width:270px;


    background:var(--panel);


    border:1px solid var(--border);


    border-radius:18px;


    overflow:hidden;


    opacity:0;


    visibility:hidden;


    transform:translateY(12px);


    transition:.25s;


    box-shadow:

    0 20px 50px rgba(0,0,0,.45);


    z-index:9999;


}





.profile-dropdown.active{


    opacity:1;


    visibility:visible;


    transform:translateY(0);


}







/* ==========================================
   USER HEADER
========================================== */


.dropdown-header{


    display:flex;


    align-items:center;


    gap:15px;


    padding:20px;


    border-bottom:1px solid var(--border);


}





.dropdown-avatar img{


    width:60px;


    height:60px;


    border-radius:50%;


    object-fit:cover;


}





.dropdown-user{


    min-width:0;


}





.dropdown-user h3{


    font-size:18px;


    font-weight:700;


    color:white;


    margin-bottom:5px;


}





.dropdown-user p{


    color:var(--muted);


    font-size:13px;


    overflow-wrap:anywhere;


}







/* ==========================================
   DROPDOWN LINKS
========================================== */


.profile-dropdown a{


    display:block;


    padding:15px 20px;


    color:var(--text);


    font-weight:500;


    transition:.2s;


}





.profile-dropdown a:hover{


    background:var(--panel-hover);


    color:var(--gold);


}





.logout-link{


    color:#ff7b72 !important;


}





.logout-link:hover{


    background:rgba(248,81,73,.12) !important;


}
/* ==========================================
   HERO SECTION
========================================== */


.hero{


    min-height:calc(100vh - 90px);


    display:flex;


    align-items:center;


}





.hero-grid{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:80px;


    align-items:center;


}







/* ==========================================
   HERO CONTENT
========================================== */


.hero-left{


    display:flex;


    flex-direction:column;


    justify-content:center;


}





.badge{


    width:max-content;


    padding:8px 18px;


    border:1px solid var(--border);


    border-radius:50px;


    color:var(--gold);


    font-size:13px;


    font-weight:600;


    letter-spacing:.5px;


    margin-bottom:28px;


}





.hero h1{


    max-width:600px;


    font-size:64px;


    line-height:1.05;


    font-weight:800;


    letter-spacing:-1px;


}





.hero p{


    max-width:570px;


    margin-top:28px;


    color:var(--muted);


    font-size:19px;


    line-height:1.8;


}







/* ==========================================
   HERO BUTTONS
========================================== */


.buttons{


    display:flex;


    gap:18px;


    margin-top:45px;


}





.btn-primary,
.btn-secondary{


    padding:18px 34px;


    border-radius:12px;


    font-weight:700;


    transition:.25s;


}





.btn-primary{


    background:var(--gold);


    color:#111;


}





.btn-primary:hover{


    transform:translateY(-3px);


    box-shadow:

    0 15px 35px rgba(217,164,65,.30);


}





.btn-secondary{


    border:1px solid var(--border);


    color:white;


}





.btn-secondary:hover{


    border-color:var(--gold);


}







/* ==========================================
   HERO IMAGE
========================================== */


.hero-right{


    display:flex;


    align-items:center;


    justify-content:center;


}





.hero-right img{


    width:520px;


    filter:

    drop-shadow(

        0 0 45px rgba(217,164,65,.30)

    );


    animation:float 5s ease-in-out infinite;


}







/* ==========================================
   FLOAT ANIMATION
========================================== */


@keyframes float{


    0%{


        transform:translateY(0);


    }



    50%{


        transform:translateY(-18px);


    }



    100%{


        transform:translateY(0);


    }


}
/* ==========================================
   RESPONSIVE DESIGN
========================================== */


@media(max-width:1100px){



    .hero-grid{


        grid-template-columns:1fr;


        gap:60px;


        text-align:center;


    }





    .hero-left{


        align-items:center;


    }





    .hero h1{


        font-size:52px;


    }





    .hero p{


        margin-left:auto;


        margin-right:auto;


    }





    .buttons{


        justify-content:center;


    }





    .hero-right img{


        width:420px;


    }



}








@media(max-width:900px){



    nav ul{


        display:none;


    }





    header,
    nav{


        height:80px;


    }





    .logo img{


        height:50px;


    }



}








@media(max-width:700px){



    .container{


        width:92%;


    }





    .account{


        gap:8px;


    }





    .login,
    .register{


        padding:10px 15px;


        font-size:14px;


    }





    .profile-dropdown{


        width:250px;


        right:-10px;


    }





    .hero{


        min-height:auto;


        padding:80px 0;


    }





    .hero h1{


        font-size:40px;


    }





    .hero p{


        font-size:16px;


    }





    .buttons{


        flex-direction:column;


        width:100%;


    }





    .btn-primary,
    .btn-secondary{


        width:100%;


        text-align:center;


    }





    .hero-right img{


        width:320px;


    }



}








@media(max-width:450px){



    .profile-button img,
    .profile-letter{


        width:44px;


        height:44px;


    }





    .profile-dropdown{


        width:230px;


    }





    .dropdown-header{


        padding:15px;


    }





    .profile-dropdown a{


        padding:13px 16px;


    }





    .hero h1{


        font-size:34px;


    }



}







/* ==========================================
   SELECTION
========================================== */


::selection{


    background:var(--gold);


    color:#111;


}