:root {
    --bg:#050505;
    --panel:#0c0c0c;
    --text:#eaeaea;
    --muted:#999;
    --accent:#ff7a18;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:Inter,sans-serif;
    background:var(--bg);
    color:var(--text);
}

/* HERO */

.hero{position:relative;height:100vh;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle,rgba(0,0,0,.4),rgba(0,0,0,.9))}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}

.hero h1{font-family:Oswald;font-size:100px;letter-spacing:6px;color:var(--accent)}
.glow{text-shadow:0 0 50px rgba(255,122,24,.6)}

.hero p{color:var(--muted);font-size:20px;margin-bottom:40px}

/* BUTTONS */

.btn{padding:14px 30px;border-radius:12px;text-decoration:none;font-weight:600;transition:.25s}
.btn.primary{background:var(--accent);color:#000}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(255,122,24,.4)}
.btn.ghost{border:1px solid var(--accent);color:var(--accent)}
.btn.ghost:hover{background:var(--accent);color:#000}
.big{font-size:18px}

/* SECTIONS */

.section{padding:120px 0}
.section.dark{background:linear-gradient(180deg,#050505,#0b0b0b)}

.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container.center{text-align:center}

h2{font-family:Oswald;font-size:56px;margin-bottom:30px}

/* SPLIT */

.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.reverse{grid-template-columns:1fr 1fr}
.image-box img{width:100%;border-radius:20px}
.image-box.tall img{height:600px;object-fit:cover}

/* TEXT */

.accent{color:var(--accent);font-weight:600}
.lead{max-width:900px;color:#ccc;margin-bottom:50px}

/* GRID CARDS */

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}

.card{
    background:linear-gradient(180deg,#111,#080808);
    border:1px solid #1b1b1b;
    border-radius:18px;
    padding:26px;
    transition:.3s;
    position:relative;
}

.card:hover{
    transform:translateY(-8px) scale(1.02);
    border-color:var(--accent);
    box-shadow:0 30px 80px rgba(0,0,0,.7);
}

/* PULSE */

.pulse::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:18px;
    border:1px solid rgba(255,122,24,.3);
    animation:pulse 2.5s infinite;
}

@keyframes pulse{
    0%{opacity:0}
    50%{opacity:1}
    100%{opacity:0}
}

/* RULES */

.rules{list-style:none;padding:0}
.rules li{margin-bottom:12px}

/* JOIN */

.join-box{
    display:inline-flex;
    gap:30px;
    align-items:center;
    background:#0b0b0b;
    padding:40px;
    border-radius:22px;
    border:1px solid #1c1c1c;
}

.ip{font-size:30px;color:var(--accent);font-weight:700}

/* FOOTER */

footer{text-align:center;padding:40px;background:#020202;color:#666}

/* REVEAL */

.reveal{opacity:0;transform:translateY(60px);transition:.9s ease}
.reveal.visible{opacity:1;transform:none}

html {
    scroll-behavior: smooth;
}

/* NAVBAR */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 16px 0;
    backdrop-filter: blur(10px);
    background: rgba(5,5,5,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: 0.3s;
}

.navbar.scrolled {
    padding: 10px 0;
    background: rgba(5,5,5,0.85);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: Oswald;
    letter-spacing: 3px;
    color: var(--accent);
    font-size: 22px;
}

.nav-links {
    display: flex;
    gap: 24px;
    align-items: center;
}

.nav-links a {
    color: #ddd;
    text-decoration: none;
    font-weight: 500;
    transition: 0.2s;
}

.nav-links a:hover {
    color: var(--accent);
}

.btn.small {
    padding: 10px 18px;
    border-radius: 10px;
}

/* BURGER */

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.burger span {
    width: 26px;
    height: 2px;
    background: #fff;
}

.card i {
    color: var(--accent);
    margin-right: 10px;
    font-size: 18px;
}

.rules i {
    color: var(--accent);
    margin-right: 10px;
}
.card:hover i {
    transform: scale(1.2) rotate(-5deg);
    transition: 0.2s;
}

/* MOBILE */

@media(max-width:900px){
    .nav-links {
        position: fixed;
        top: 70px;
        right: -100%;
        background: #050505;
        flex-direction: column;
        padding: 30px;
        border-left: 1px solid #222;
        height: 100vh;
        transition: .3s;
    }

    .nav-links.open {
        right: 0;
    }

    .burger {
        display: flex;
    }
}

/* RESPONSIVE */

@media(max-width:900px){
    .split{grid-template-columns:1fr}
    .hero h1{font-size:64px}
    h2{font-size:40px}
}
@media (max-width: 700px) {

    /* SPLIT sekce na mobilu jako sloupec */
    .split {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    /* Zrušíme reverse bordel */
    .split.reverse {
        grid-template-columns: 1fr !important;
    }

    /* Obrázky v sekcích */
    .image-box img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 16px;
    }

    .image-box.tall img {
        height: 320px;
    }

}
@media (max-width: 700px) {

    .join-box {
        flex-direction: column;
        gap: 20px;
        padding: 24px;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .join-box .btn {
        width: 100%;
        text-align: center;
    }

    .ip {
        font-size: 22px;
        word-break: break-all;
    }

}
@media (max-width: 500px) {
    .hero h1 {
        font-size: 48px;
        letter-spacing: 3px;
    }

    .hero p {
        font-size: 16px;
    }
}