:root{
    --bg:#0b0f16;
    --card:#0f1720;
    --accent:#00ffe1;
    --accent2:#6b6dff;
    --muted:#9aa5b1;
}

/* BASIC RESET */
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Inter,system-ui,Arial;
    background:linear-gradient(180deg,#071021 0%, #0b0f16 100%);
    color:#e6eef6;
}

/* keep container width same */
.container{max-width:1100px;margin:0 auto;padding:24px}

/* HEADER
   - make non-sticky so it scrolls with page
   - hide right-side action buttons via CSS (so they won't show anywhere)
*/
.site-header{
    background:transparent;
    padding:18px 0;
    position:static; /* was sticky -> now static so it doesn't overlap content */
    top:auto;
    z-index:20;
}
.site-header .container{display:flex;align-items:center;gap:16px}
.brand{font-weight:800;font-size:20px;color:var(--accent);text-decoration:none;display:flex;align-items:center;gap:10px}
.brand-logo{width:36px;height:36px;object-fit:contain}

/* keep nav left and visible */
.nav{margin-left:20px;display:flex;gap:14px}
.nav a{color:var(--muted);text-decoration:none;font-size:15px;transition:0.2s}
.nav a:hover{color:var(--accent2)}

/* HIDE header right action buttons (Participate / profile) visually */
.header-right{display:flex;align-items:center;gap:12px}
/* hide specific items so header left nav remains */
.header-right .btn,
.header-right .user-icon,
.header-right .policy-dropdown { display:none !important; }

 /* policy dropdown button visible override (we will show only Policy via dedicated markup below) */
.policy-toggle{ background:transparent;border:1px solid rgba(255,255,255,0.06); padding:8px 10px; border-radius:10px; cursor:pointer; color:var(--muted); }

/* show nav toggle on small screens as before */
.nav-toggle{display:none}

/* HERO
   - remove fixed equal flex for preview; left content takes remaining width.
   - we place preview absolutely on right edge (keeps it visually at right side of viewport)
*/
.hero{padding:48px 0; position:relative;}

/* main inner kept for left column layout */
.hero-inner{display:flex;align-items:flex-start;gap:40px;}

/* left uses most of available content area */
.hero-left{
    flex:1 1 640px;
    max-width: 720px;
    box-sizing:border-box;
    padding-right: 24px;
}

/* remove fixed height usage so content doesn't overlap footer */
.hero-left .hero-content-wrapper {
    display:block;
    /* no fixed height here */
    padding-bottom: 10px;
}

/* preview is positioned to the right of the centered container
   Using calc places it near the viewport right but keeps consistent gap when screen large.
   Adjust the "+ 40px" if you want more/less right spacing from viewport edge.
*/
/* REPLACE existing .site-preview block with this */
.site-preview{
    width:280px;                /* <-- original narrow width */
    height:560px;               /* <-- original height */
    border-radius:28px;
    background:linear-gradient(135deg,#072432,#06202a);
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:48px; 
    /* keep it at right of centered container but with smaller gap (20px) */
     right: calc((100vw - 1100px)/2 + 10px);
    z-index:5;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.site-preview .screen{
    width:100%;
    height:100%;
    border-radius:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:600;
}

/* fallback: when viewport is smaller than container, keep preview inside flow */
@media (max-width:1220px){
    .site-preview{
        position:relative;
        right:0;
        margin-left:auto;
        margin-right:0;
        top:0;
    }
    .hero-inner{align-items:flex-start;}
}

/* small subtitle move */
h1{font-size:44px;margin:0;line-height:1.02}
.subtitle{display:block;font-weight:600;color:var(--accent2);font-size:22px;margin-top:6px;}
.lead{color:var(--muted);margin-top:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;margin-right:12px;cursor:pointer;transition:0.25s}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#051424;font-weight:700}
.btn.ghost{border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.btn.small{padding:8px 14px;font-size:14px;border-radius:10px}

/* FEATURES */
.features{padding:48px 24px}
.cards{display:flex;gap:16px}
.card{
    background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
    padding:18px;border-radius:12px;flex:1;text-align:center;
    color:var(--muted);
}

/* GAME SECTION */
.games{padding:48px 24px}
.games-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:22px;
}

/* keep game card styles */
.game-card{
    background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
    padding:16px;
    border-radius:18px;
    display:flex;
    gap:16px;
    align-items:flex-start;
    min-height:150px;
    transition:0.3s;
    border:1px solid rgba(255,255,255,0.05);
}
.game-card:hover{
    transform:translateY(-4px);
    border:1px solid rgba(107,109,255,0.25);
    box-shadow:0 10px 40px rgba(0,0,0,0.35);
}

.game-thumb img{
    width:86px;height:86px;object-fit:cover;border-radius:14px
}
.game-placeholder{
    width:86px;height:86px;border-radius:14px;
    background:#071527;display:flex;align-items:center;justify-content:center;color:var(--muted)
}

.game-body h3{margin:0;font-size:18px}
.game-body p{margin:6px 0 12px;color:var(--muted)}

/* NEW — ONLY 1 BUTTON BELOW CARD */
.game-body .btn.primary{
    padding:10px 16px;
    font-size:14px;
    border-radius:10px;
    margin-top:6px;
    display:inline-block;
}

/* FOOTER
   - add more top padding so content never overlaps footer
   - golden separator keep small margin
*/
.site-footer{
    padding:48px 0 56px;
    color:var(--muted);
    margin-top:40px;
}

.footer-grid{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.footer-links-vertical a{
    color:var(--muted);
    text-decoration:none;
    margin-bottom:6px;
    font-size:15px;
}

.footer-motiv h3{margin:0;color:var(--accent2);font-size:20px}
.footer-bottom{text-align:center;color:var(--muted);margin-top:18px}

/* GOLDEN SEPARATOR */
.footer-sep{
    height:2px;
    background: linear-gradient(90deg, rgba(255,215,120,0.0), rgba(255,215,120,0.25), rgba(255,215,120,0.0));
    filter:drop-shadow(0 5px 15px rgba(255,200,80,0.15));
    margin-top:24px;
    border-radius:4px;
}

/* RESPONSIVE */
@media(max-width:900px){
    .hero-inner{flex-direction:column-reverse;padding:24px}
    h1{font-size:32px}

    .nav{display:none}
    .nav.open{
        display:flex;
        flex-direction:column;
        background:#071228;
        position:absolute;
        top:64px;right:24px;
        padding:12px;border-radius:8px;
        width:160px;
    }

    .nav-toggle{display:block;margin-left:auto;background:transparent;border:0;color:var(--muted);font-size:20px}

    .site-preview{width:180px;height:360px; position:relative; right:0; top:0; margin:0 auto 20px;}

    .games-grid{grid-template-columns:1fr;}
}

/* Glow polish */
.brand, .btn.primary{filter:drop-shadow(0 6px 14px rgba(107,109,255,0.18))}