/* Base Styles */
        * { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
        }

        body { 
            font-family: sans-serif; 
            background-color: #0a0a0a; 
            color: #fff; 
            overflow-x: hidden; 
        }

        /* Navigation */
        nav { 
            position: fixed; 
            top: 0; 
            width: 100%; 
            background: rgba(10, 10, 10, 0.95); 
            backdrop-filter: blur(10px); 
            padding: 20px 50px; 
            z-index: 1000; 
            border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
        }

        .nav-container { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            max-width: 1400px; 
            margin: 0 auto; 
        }

        .logo { 
            font-size: 24px; 
            font-weight: bold; 
            background: linear-gradient(135deg, #7a5a4a, #a88070); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            letter-spacing: 2px; 
            font-family: 'GodOfWar',arial;
        }

        .back-btn { 
            color: #fff; 
            text-decoration: none; 
            padding: 10px 25px; 
            border: 2px solid #7a5a4a; 
            border-radius: 5px; 
            transition: all 0.3s ease; 
        }

        .back-btn:hover { 
            background: #7a5a4a; 
            transform: translateY(-2px); 
        }

        /* Hero Section */
        .hero { 
            height: 100vh; 
            background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.9) 100%), 
                        linear-gradient(135deg, #7a5a4a, #5e4438); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            position: relative; 
        }

        .hero::before { 
            content: ''; 
            position: absolute; 
            width: 100%; 
            height: 100%; 
            background: radial-gradient(circle at 50% 50%, rgba(122, 90, 74, 0.3) 0%, transparent 70%); 
            animation: pulse 4s ease-in-out infinite; 
        }

        /* Animations */
        @keyframes pulse { 
            0%, 100% { opacity: 0.5; } 
            50% { opacity: 1; } 
        }

        @keyframes slideDown { 
            from { opacity: 0; transform: translateY(-50px); } 
            to { opacity: 1; transform: translateY(0); } 
        }

        @keyframes fadeIn { 
            from { opacity: 0; } 
            to { opacity: 1; } 
        }

        @keyframes slideUp { 
            from { opacity: 0; transform: translateY(50px); } 
            to { opacity: 1; transform: translateY(0); } 
        }

        /* Hero Content */
        .hero-content { 
            text-align: center; 
            z-index: 1; 
            max-width: 900px; 
            padding: 0 20px; 
        }

        .game-logo { 
            font-size: 90px; 
            font-weight: bold; 
            margin-bottom: 20px; 
            animation: slideDown 1s ease-out; 
            text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8); 
            font-family: 'GodOfWar',arial;
        }

        .subtitle { 
            font-size: 28px; 
            margin-bottom: 15px; 
            color: #d0b8a8; 
            animation: fadeIn 1.5s ease-out; 
        }

        .release-info { 
            font-size: 18px; 
            color: #ccc; 
            margin-bottom: 40px; 
            animation: fadeIn 2s ease-out; 
        }

        /* Buttons */
        .cta-buttons { 
            display: flex; 
            gap: 20px; 
            justify-content: center; 
            animation: slideUp 1.5s ease-out; 
        }

        .btn { 
            padding: 15px 40px; 
            font-size: 18px; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
            transition: all 0.3s ease; 
            text-decoration: none; 
            display: inline-block; 
        }

        .btn-primary { 
            background: linear-gradient(135deg, #7a5a4a, #a88070); 
            color: #fff; 
            box-shadow: 0 10px 30px rgba(122, 90, 74, 0.3); 
        }

        .btn-primary:hover { 
            transform: translateY(-3px); 
            box-shadow: 0 15px 40px rgba(122, 90, 74, 0.5); 
        }

        .btn-secondary { 
            background: transparent; 
            color: #fff; 
            border: 2px solid #fff; 
        }

        .btn-secondary:hover { 
            background: #fff; 
            color: #0a0a0a; 
            transform: translateY(-3px); 
        }

        /* Content Sections */
        .overview { 
            padding: 100px 50px; 
            max-width: 1400px; 
            margin: 0 auto; 
        }

        .section-title { 
            font-family: 'GodOfWar', sans-serif;
            text-align: center; 
            font-size: 48px; 
            margin-bottom: 60px; 
            background: linear-gradient(135deg, #fff, #a88070); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            font-family: 'GodOfWar',arial;
        }

        /* Grid Layouts */
        .overview-content { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 60px; 
            align-items: center; 
        }

        .overview-text { 
            font-size: 18px; 
            line-height: 1.8; 
            color: #ccc; 
        }

        .overview-text p { 
            margin-bottom: 20px; 
        }

        .overview-image { 
            width: 100%; 
            height: 400px; 
            background: linear-gradient(135deg, #6a4a3a, #4a3028); 
            border-radius: 15px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 24px; 
            color: #666; 
            border: 2px solid rgba(122, 90, 74, 0.3); 
        }

        /* Features Section */
        .features { 
            padding: 100px 50px; 
            background: linear-gradient(180deg, #0a0a0a 0%, #150c08 100%); 
        }

        .features-container { 
            max-width: 1400px; 
            margin: 0 auto; 
        }

        .features-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
            gap: 40px; 
            margin-top: 60px; 
        }

        .feature-card { 
            background: linear-gradient(145deg, #251c18, #150c08); 
            padding: 40px; 
            border-radius: 15px; 
            border: 1px solid rgba(122, 90, 74, 0.2); 
            transition: all 0.3s ease; 
        }

        .feature-card:hover { 
            transform: translateY(-10px); 
            border-color: rgba(122, 90, 74, 0.5); 
            box-shadow: 0 20px 40px rgba(122, 90, 74, 0.2); 
        }

        /* Titans Section */
        .titans { 
            padding: 100px 50px; 
            max-width: 1400px; 
            margin: 0 auto; 
        }

        .titans-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
            gap: 30px; 
            margin-top: 60px; 
        }

        .titan-card { 
            background: linear-gradient(145deg, #1a1a1a, #0f0f0f); 
            padding: 35px; 
            border-radius: 15px; 
            border: 1px solid rgba(255, 255, 255, 0.1); 
            text-align: center; 
        }

        .titan-card h3 { 
            font-size: 22px; 
            margin-bottom: 15px; 
            color: #a88070; 
        }

        .titan-card p { 
            color: #ccc; 
            line-height: 1.6; 
        }

        /* Footer */
        footer { 
            background: #050505; 
            padding: 50px; 
            text-align: center; 
            border-top: 1px solid rgba(255, 255, 255, 0.1); 
        }

        .footer-content p { 
            color: #666; 
            margin: 10px 0; 
        }
        @media (max-width: 768px) {
            .game-logo { font-size: 52px; }
            .overview-content { grid-template-columns: 1fr; }
            .cta-buttons { flex-direction: column; }
            nav { padding: 20px; }
            .overview, .features, .titans { padding: 60px 20px; }
        }
        /* Specs Section */
        .specs {
            padding: 100px 50px;
            background: #0f0f0f;
        }

        .specs-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .specs-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 60px;
        }

        .spec-box {
            background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
            padding: 40px;
            border-radius: 15px;
            border: 1px solid rgba(74, 124, 158, 0.2);
        }

        .spec-box h3 {
            font-size: 28px;
            margin-bottom: 25px;
            color: #6fa8d1;
        }

        .spec-item {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .spec-label {
            color: #999;
        }

        .spec-value {
            color: #fff;
            font-weight: bold;
        }