:root {
            --primary: #556B2F;
            --secondary: #2F4F2F;
            --accent: #F0E68C;
            --text: #E0E0E0;
            --bg: #1A1A1A;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Courier Prime', monospace; background: var(--bg); color: var(--text); line-height: 1.6; }
        h1, h2, h3 { font-family: 'Oswald', sans-serif; text-transform: uppercase; }
        a { color: var(--accent); text-decoration: none; }
        a:hover { text-decoration: underline; }
        
        /* Header */
        header { background: rgba(0,0,0,0.9); padding: 1rem 0; position: fixed; width: 100%; top: 0; z-index: 100; border-bottom: 2px solid var(--primary); }
        nav { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; }
        .logo { height: 50px; }
        .nav-right { display: flex; align-items: center; }
        .nav-links { display: flex; list-style: none; gap: 2rem; }
        .nav-links a { font-weight: bold; }

        /* Hamburger */
        .hamburger {
            display: none;
            cursor: pointer;
            padding: 10px;
        }
        .hamburger span {
            display: block;
            width: 33px;
            height: 4px;
            background: var(--accent);
            margin: 6px 0;
            transition: 0.3s;
        }

        /* Hero */
        .hero { 
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images6.alphacoders.com/525/525501.jpg') center/cover; 
            height: 100vh; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            text-align: center; 
            color: white; 
            padding-top: 80px; 
        }
        .hero h1 { font-size: 4rem; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); line-height: 1.1; }
        .hero p { font-size: 1.5rem; margin-bottom: 2rem; max-width: 600px; }
        .btn { background: var(--primary); color: white; padding: 1rem 2rem; margin: 0 1rem; border: none; font-size: 1.2rem; cursor: pointer; transition: background 0.3s; border-radius: 5px; }
        .btn:hover { background: #6B8E23; }

        /* Sections */
        section { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; }
        h2 { font-size: 3rem; text-align: center; margin-bottom: 3rem; color: var(--accent); }

        .about { background: var(--secondary); }
        .about p { font-size: 1.2rem; max-width: 800px; margin: 0 auto; text-align: center; }

        .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
        .feature { background: rgba(255,255,255,0.1); padding: 2rem; border-radius: 10px; text-align: center; border: 1px solid var(--primary); }

        .downloads { background: var(--secondary); text-align: center; }

        .community-section { background: var(--secondary); text-align: center; }

        .download-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem; 
            margin-top: 2rem; 
        }
        .community-grid { 
            display: grid; 
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem; 
            margin-top: 2rem; 
        }
        .three-per-row {
            grid-template-columns: repeat(3, 1fr);
        }
        .dl-item { background: rgba(255,255,255,0.1); padding: 2rem; border-radius: 10px; text-align: center; }
        .dl-item a { display: inline-block; background: var(--primary); padding: 1rem 2rem; margin-top: 1rem; font-size: 1.2rem; }

        .server-card { background: rgba(255,255,255,0.1); padding: 2rem; border-radius: 10px; text-align: center; }
        .server-card a { display: inline-block; background: var(--primary); padding: 1rem 2rem; margin-top: 1rem; font-size: 1.2rem; }

        .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
        .gallery img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; transition: transform 0.3s; }
        .gallery img:hover { transform: scale(1.05); }

        .support-section { text-align: center; }
        .resource-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
        .resource-item{ background: rgba(255,255,255,0.1); padding: 1rem; border-radius: 5px; }

        footer { background: var(--secondary); text-align: center; padding: 2rem; border-top: 2px solid var(--primary); }

        @media (max-width: 1024px) {
            .hamburger {
                display: block;
            }
            .nav-right {
                padding-right: 1.5rem;
            }
            .nav-links {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: rgba(0,0,0,0.95);
                flex-direction: column;
                display: none;
                padding: 1rem 0;
                border-bottom: 2px solid var(--primary);
            }
            .nav-links.active {
                display: flex;
            }
            .nav-links li {
                padding: 0.5rem 0;
                text-align: center;
            }
            .hamburger.active span:nth-child(1) {
                transform: rotate(45deg) translate(8px, 8px);
            }
            .hamburger.active span:nth-child(2) {
                opacity: 0;
            }
            .hamburger.active span:nth-child(3) {
                transform: rotate(-45deg) translate(7px, -6px);
            }
        }

        @media (max-width: 768px) {
            .hero {
                padding-top: 110px;
            }
            .hero h1 {
                font-size: 3.2rem;
            }
            .hero p {
                font-size: 1.3rem;
                padding: 0 1rem;
            }
            .btn {
                display: block;
                margin: 1rem auto;
                width: 80%;
                max-width: 300px;
            }
            .community-grid {
                grid-template-columns: 1fr;
            }
            */
            h2 {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 400px) {
            header { padding: 0.5rem 0; }
            .logo { height: 40px; }
            .hamburger { padding: 8px; }
            .hamburger span { width: 28px; height: 3px; margin: 5px 0; }
            .nav-right { padding-right: 2rem; }
            .hero { padding-top: 160px; }
            .hero h1 { font-size: 2.3rem; line-height: 1.0; }
            .hero p { font-size: 1.15rem; padding: 0 0.8rem; }
            .btn { padding: 0.8rem 1.4rem; font-size: 1.05rem; }
            h2 { font-size: 2rem; }
        }

        .features h2, .gallery h2 {
            grid-column: 1 / -1;
            text-align: center;
            margin-bottom: 3rem;
        }