:root {
            --primary-blue: #004a59;
            --accent-red: #cd0000;
            --dark-gold: #ff8c00;
            --bg-dark: #000;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #111;
            color: #fff;
            line-height: 1.6;
        }

        header {
            background: linear-gradient(89.87deg, #000 35.41%, #0b1a20 121.72%);
            padding: 20px;
            border-bottom: 2px solid var(--primary-blue);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .logo-placeholder {
            width: 150px;
            height: 50px;
            background: linear-gradient(45deg, var(--primary-blue), #007cba);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            letter-spacing: 2px;
            border-radius: 5px;
        }

        nav {
            display: flex;
            gap: 20px;
            padding: 10px 0;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            font-size: 0.9rem;
        }

        .hero-banner {
            height: 300px;
            background: radial-gradient(circle, #006ba1, #000);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .n-columns-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 40px 0;
        }

        .button {
            padding: 15px;
            text-align: center;
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
            text-transform: uppercase;
        }

        .login { background: linear-gradient(to bottom, var(--dark-gold), #8b5b00); color: #000; border: 2px solid #ffdd00; }
        .register { background: linear-gradient(to bottom, var(--accent-red), #000); color: #fff; border: 2px solid var(--accent-red); }

        .content-box {
            padding: 40px;
            background: #1a1a1a;
            border-radius: 10px;
            margin-bottom: 40px;
        }

        footer {
            background: #000;
            text-align: center;
            padding: 40px;
            border-top: 1px solid #333;
        }

        @media (max-width: 768px) {
            .n-columns-2 { grid-template-columns: 1fr; }
        }