/* ===================================
   EVG Vault - Global Styles
   =================================== */


:root {

    --bg-primary: #070b16;
    --bg-secondary: #0d1426;

    --card-bg: rgba(255,255,255,0.06);

    --border: rgba(255,255,255,0.12);

    --text-primary: #ffffff;

    --text-secondary: #aab4cc;

    --accent: #00d9ff;

    --accent-secondary: #8b5cff;

    --shadow:
    0 20px 50px rgba(0,0,0,.45);

    --radius: 18px;

    --max-width: 1200px;

}



/* ===================================
   Reset
   =================================== */


* {

    margin:0;
    padding:0;

    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    background:
    radial-gradient(
        circle at 50% 0%,
        #17254d 0%,
        #070b16 45%,
        #050810 100%
    );

    color:var(--text-primary);

    font-family:
    Inter,
    Arial,
    sans-serif;

    line-height:1.6;

}



a {

    color:inherit;

    text-decoration:none;

}



img {

    max-width:100%;

    display:block;

}



/* ===================================
   Container
   =================================== */


.container {

    max-width:
    var(--max-width);

    margin:auto;

    padding:
    0 25px;

}



/* ===================================
   Navigation
   =================================== */


header:not(.section-header) {
    position:sticky;

    top:0;

    z-index:10;

    backdrop-filter:
    blur(15px);

    background:
    rgba(7,11,22,.75);

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

}



.navbar {

    max-width:
    var(--max-width);

    margin:auto;

    padding:
    20px 25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo {

    font-size:1.7rem;

    font-weight:900;

    letter-spacing:1px;

    background:
    linear-gradient(
        90deg,
        var(--accent),
        var(--accent-secondary)
    );

    -webkit-background-clip:text;

    color:transparent;

}



.navbar ul {

    list-style:none;

    display:flex;

    gap:25px;

}



.navbar a:hover {

    color:var(--accent);

}



/* ===================================
   Hero
   =================================== */


.hero {

    min-height:85vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:
    80px 25px;

}



.hero-content {

    max-width:900px;

}



.hero h1 {

    font-size:
    clamp(2.5rem,5vw,4.5rem);

    line-height:1.1;

    margin-bottom:25px;

}



.hero p {

    font-size:1.2rem;

    color:var(--text-secondary);

    max-width:700px;

    margin:auto;

}



.hero-buttons {

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:40px;

    flex-wrap:wrap;

}



.hero-buttons a {

    padding:
    14px 30px;

    border-radius:999px;

    background:
    linear-gradient(
        90deg,
        var(--accent),
        var(--accent-secondary)
    );

    color:#000;

    font-weight:700;

    transition:.25s;

}



.hero-buttons a:hover {

    transform:
    translateY(-4px);

    box-shadow:
    0 10px 35px rgba(0,217,255,.35);

}



.trust-badges {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:45px;

}



.trust-badges span {

    padding:
    10px 18px;

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

    border-radius:999px;

    background:
    var(--card-bg);

    color:
    var(--text-secondary);

}



/* ===================================
   Sections
   =================================== */


section {

    padding:
    90px 25px;

}



section h2 {

    text-align:center;

    font-size:2.4rem;

    margin-bottom:20px;

}



/* ===================================
   Feature Cards
   =================================== */


.feature-grid {

    max-width:
    var(--max-width);

    margin:
    45px auto 0;

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(260px,1fr)
    );

    gap:25px;

}



.feature-grid article {

    background:
    var(--card-bg);

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

    border-radius:
    var(--radius);

    padding:
    30px;

    backdrop-filter:
    blur(12px);

    transition:.3s;

}



.feature-grid article:hover {

    transform:
    translateY(-8px);

    border-color:
    var(--accent);

}



/* ===================================
   Game Section
   =================================== */


.games-section {

    padding:
    80px 20px;

    position:relative;

    overflow:hidden;

    isolation:isolate;

}



.games-section::before {

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:900px;

    height:600px;

    transform:
    translate(-50%, -50%);

    background:
    radial-gradient(
        circle,
        rgba(0,217,255,.15),
        transparent 65%
    );

    filter:
    blur(70px);

    z-index:-1;

    pointer-events:none;

}



.games-section header {

    text-align:center;

    max-width:800px;

    margin:
    0 auto;

}



.games-section header p {

    color:
    var(--text-secondary);

    font-size:
    1.1rem;

    margin-top:10px;

}



.game-grid {

    max-width:
    var(--max-width);

    margin:
    45px auto 0;

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(280px,1fr)
    );

    gap:25px;

}



.game-card {

    position:relative;

    display:block;

    text-decoration:none;

    color:inherit;

    background:
    rgba(255,255,255,.05);

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

    border-radius:
    18px;

    overflow:hidden;

    transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;

}



.game-card:hover {

    transform:
    translateY(-8px);

    border-color:
    rgba(0,220,255,.7);

    box-shadow:
    0 20px 40px rgba(0,0,0,.4);

}



.game-image {

    height:
    160px;

    overflow:hidden;

}



.game-image img {

    width:100%;

    height:100%;

    object-fit:cover;

}



.game-content {

    padding:
    25px;

}



.game-content h3 {

    margin-bottom:
    10px;

}



.game-content p {

    color:
    var(--text-secondary);

}



.game-content span {

    display:inline-block;

    margin-top:
    15px;

    color:
    var(--accent);

    font-weight:
    600;

}



/* ===================================
   How It Works
   =================================== */


.how-it-works > div {

    max-width:
    var(--max-width);

    margin:
    45px auto 0;

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(260px,1fr)
    );

    gap:25px;

}



.how-it-works article {

    background:
    var(--card-bg);

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

    border-radius:
    var(--radius);

    padding:
    30px;

    text-align:center;

    backdrop-filter:
    blur(12px);

}



.how-it-works p {

    color:
    var(--text-secondary);

}



/* ===================================
   FAQ
   =================================== */


.faq article {

    max-width:
    850px;

    margin:
    25px auto;

    padding:
    25px;

    background:
    var(--card-bg);

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

    border-radius:
    var(--radius);

}



.faq p {

    color:
    var(--text-secondary);

}



/* ===================================
   Footer
   =================================== */


footer {

    padding:
    40px 25px;

    text-align:center;

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

    color:
    var(--text-secondary);

}



footer a {

    margin:
    0 10px;

}



footer a:hover {

    color:
    var(--accent);

}



/* ===================================
   Mobile
   =================================== */


@media(max-width:800px) {


.navbar {

    flex-direction:column;

    gap:20px;

}


.navbar ul {

    flex-wrap:wrap;

    justify-content:center;

}



.hero {

    min-height:
    70vh;

}



.hero h1 {

    font-size:
    2.5rem;

}


}