:root {
    --dark-olive: #3A3D2D;
    --green-olive: #6B7155;
    --amber: #FFB400;
    --white: #FFFFFF;
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
}

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

body {
    font-family: var(--font-sans);
    background-color: var(--dark-olive);
    color: #EAEAEA;
    line-height: 1.5;
    overflow-x: hidden;
}

/* Background */
.background-mesh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.background-mesh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.background-mesh .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(58, 61, 45, 0.4) 0%, rgba(58, 61, 45, 0.9) 100%);
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Typography */
h1,
h2,
h3 {
    font-weight: 400;
    letter-spacing: -0.02em;
}

.section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #E0E0E0;
}


/* Header & Logo */
.site-header {
    padding: 2rem 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.logo-container {
    width: 150px;
    /* Adjusted for Symplifye logo */
}

.company-logo {
    width: 100%;
    height: auto;
    display: block;
    /* mix-blend-mode: screen; Removed as PNG usually has transparency */
}

/* Hero Section */
.hero-section {
    padding: 120px 0 100px;
    position: relative;
    text-align: center;
    /* Center align hero content including logo */
}

.product-logo-container {
    width: 180px;
    margin: 0 auto 3rem auto;
    /* Centered logo */
    /* If we want it strictly in the center of the page, it should be margin auto. */
}

.product-logo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    mix-blend-mode: screen;
    /* Keep blend mode for the jpg product logo */
}

.hero-title {
    font-size: 4.5rem;
    line-height: 1.1;
    color: #EAEAEA;
    /* Slightly off-white for softer look */
    margin-bottom: 1.5rem;
    font-family: var(--font-sans);
    text-align: left;
    /* Reset text align for title if needed, or keep centered.
                         Design narrative said "Navigate Innovation..."
                         The original design had left aligned text.
                         The user asked for product logo at center.
                         I'll keep the title left aligned as per original design,
                         but center the logo? Or center everything?
                         "product logo at the centre of the page" usually implies the main focus.
                         Let's try centering the logo but keeping the text flow.
                         Actually, let's make the hero-section text-align: left by default (inherited or explicit)
                         and only center the logo container.
                      */
}

/* Re-asserting left align for hero content if .hero-section text-align was changed */
.hero-section .container {
    text-align: left;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: #C0C0C0;
    margin-bottom: 3rem;
    max-width: 500px;
    font-weight: 300;
}

.btn-primary {
    display: inline-block;
    background-color: var(--amber);
    color: #2A2D20;
    /* Darker text for contrast on amber */
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    font-family: var(--font-sans);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 180, 0, 0.3);
}

/* Game Worlds Section */
.game-worlds-section {
    padding: 80px 0;
}

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

.card {
    background: rgba(107, 113, 85, 0.15);
    /* Low opacity green olive */
    border: 1px solid rgba(107, 113, 85, 0.3);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: border-color 0.3s, transform 0.3s;
}

.card:hover {
    border-color: var(--amber);
    transform: translateY(-5px);
}

.card-icon {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.card-icon img {
    max-height: 100%;
    max-width: 100%;
    filter: drop-shadow(0 0 8px rgba(255, 180, 0, 0.2));
}

.card-title {
    font-size: 1.25rem;
    color: #EAEAEA;
    font-weight: 400;
}


/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }

    .container {
        padding: 0 1.5rem;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }
}