:root {
            --primary-bg: #161616;
            --accent-teal: rgb(129, 204, 204);
            --text-white: #ffffff;
            --text-gray: #a4a4a4;
            --font-main: 'Quicksand', sans-serif;
            --font-script: 'Great Vibes', 'Georgia', serif;
        }

        body {
            margin: 0;
            font-family: var(--font-main);
            color: #333;
            line-height: 1.6;
        }

        header {
            background-color: var(--primary-bg);
            padding: 20px;
            text-align: center;
        }

        .logo {
            font-family: var(--font-script);
            color: var(--text-white);
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        nav {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        nav a {
            color: var(--text-gray);
            text-decoration: none;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

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

        .hero {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), #2f4f4f;
            color: white;
            padding: 100px 20px;
            text-align: center;
        }

        .hero h1 { font-family: var(--font-script); font-size: 3rem; }

        .container { max-width: 1000px; margin: 40px auto; padding: 20px; }

        footer {
            background: var(--primary-bg);
            color: var(--text-gray);
            text-align: center;
            padding: 40px 20px;
        }

        @media (max-width: 768px) {
            .hero { padding: 50px 20px; }
            .hero h1 { font-size: 2rem; }
        }