/* Variables */
:root {
    --color-black: #000000;
    --color-gold: #c39e6d;
    --color-gold-t: rgba(195, 158, 109, 0.3);
    --color-asphalt: #55565a;
    --color-asphalt-t: rgba(85, 86, 90, 0.4);
    --color-wolff-gray: #b3b2b1;
    --color-red: #E31837;
    --color-white: #FFFFFF;

    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Inter', sans-serif;

    --transition-speed: 0.3s;
}

/* Reset & Global */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
}

/* Sticky Header */
#sticky-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    /* Vertical padding */
    pointer-events: none;
    /* Let clicks pass through header area except on interactive elements */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Ensure interactive children catch events */
#sticky-header>* {
    pointer-events: auto;
}

.nav-logo {
    height: 180px;
    padding-left: 20px;
}

.nav-toggle {
    color: var(--color-white);
    padding-right: 20px;
    font-family: var(--font-heading);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-speed);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
}

.nav-toggle:hover {
    color: var(--color-gold);
}

/* Google Translate Hiding & Toggle Styling */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0px !important;
}

#google_translate_element {
    display: none !important;
}

/* Make the toggle buttons look clickable */
#lang-en,
#lang-es {
    cursor: pointer;
    font-weight: 700;
    transition: color 0.3s;
}

#lang-en:hover,
#lang-es:hover {
    color: var(--color-gold);
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Hero Section */
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center, #1a1a1a 0%, var(--color-black) 70%);
}

.mountain-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, var(--color-black) 100%), url('assets/images/mountains.png');
    background-size: cover;
    background-position: bottom center;
}

.mountain-svg {
    display: none;
}

.hero-section h1 {
    font-size: 5rem;
    color: var(--color-white);
    margin-bottom: 1rem;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
    line-height: 1.1;
}

.hero-section h2 {
    font-size: 1.8rem;
    color: var(--color-gold);
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.hero-section p {
    color: var(--color-white);
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.hero-section .content-wrapper {
    padding-top: 220px;
}

/* Animations */
.animate-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
}

.delay-1 {
    animation-delay: 0.3s;
}

.delay-2 {
    animation-delay: 0.6s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Player Recruitment Section */
.recruitment-section {
    background-color: var(--color-asphalt);
    padding: 80px 0;
    color: var(--color-white);
    position: relative;
    z-index: 2;
}

.split-layout {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 40px;
    text-align: left;
}

.split-left {
    flex: 1;
    padding-right: 20px;
}

.split-left h2 {
    color: var(--color-gold);
    font-size: 3rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.split-left h3 {
    color: var(--color-white);
    font-size: 1.5rem;
    margin-bottom: 2rem;
    letter-spacing: 1px;
}

.split-left .sub-text {
    font-size: 1.2rem;
    color: var(--color-white);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.split-left .body-text {
    color: var(--color-wolff-gray);
    font-size: 1rem;
    line-height: 1.6;
}

.split-divider {
    width: 2px;
    background-color: var(--color-red);
    flex-shrink: 0;
}

.split-right {
    flex: 1;
    padding-left: 20px;
}

#playerForm {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#playerForm h4 {
    font-family: var(--font-heading);
    color: var(--color-white);
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

#playerForm input,
#playerForm select,
#playerForm textarea {
    width: 100%;
    padding: 15px 20px;
    background: transparent;
    border: 2px solid var(--color-wolff-gray);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1rem;
    outline: none;
    transition: var(--transition-speed);
}

#playerForm input::placeholder,
#playerForm select option,
#playerForm textarea::placeholder {
    color: var(--color-wolff-gray);
    opacity: 0.7;
    font-family: var(--font-body);
    /* Keep placeholders readable if heading font is too strong, or match heading? Email section doesn't specify placeholder font. using body is safer for readability, or heading for consistency. Email section uses heading for input font-family. I will use heading for consistency. */
    font-family: var(--font-heading);
}

/* Fix for select options being black text on white default or weird in some browsers */
#playerForm select option {
    background-color: var(--color-black);
    color: var(--color-white);
}

#playerForm input:focus,
#playerForm select:focus,
#playerForm textarea:focus {
    border-color: var(--color-gold);
    background: rgba(255, 255, 255, 0.05);
}

/* File Inputs */
#playerForm input[type="file"] {
    border: 2px dashed var(--color-wolff-gray);
    padding: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    /* File inputs usually look better with standard font */
}

/* Labels for file inputs */
.file-label {
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: -5px;
    /* Pull closer to input */
    display: block;
    text-transform: uppercase;
}

#playerForm button {
    padding: 15px 40px;
    background-color: var(--color-gold);
    color: var(--color-black);
    border: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-speed);
    text-transform: uppercase;
    margin-top: 10px;
}

#playerForm button:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

#player-form-message {
    margin-top: 10px;
    color: var(--color-gold);
    font-weight: 600;
}

/* Update Mobile Responsiveness */
@media (max-width: 768px) {
    .nav-logo {
        height: 110px;
    }

    .hero-section {
        height: auto;
        min-height: 100vh;
        padding-bottom: 60px;
    }

    .hero-section .content-wrapper {
        padding-top: 180px;
    }

    .split-layout {
        flex-direction: column;
        gap: 30px;
    }

    .split-divider {
        width: 100%;
        height: 2px;
    }

    .split-left,
    .split-right {
        padding: 0;
        text-align: center;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-section h2 {
        font-size: 1.2rem;
    }

    /* ... rest of existing mobile styles ... */
}

/* iPhone/Small Screen Refinement */
@media (max-width: 480px) {
    .hero-section .content-wrapper {
        padding-top: 200px;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }

    .nav-logo {
        height: 100px;
    }
}

/* Email Capture Section */
.email-section {
    background-color: var(--color-black);
    padding: 100px 0;
    border-top: 2px solid var(--color-asphalt);
    border-bottom: 2px solid var(--color-asphalt);
}

.email-section h3 {
    color: var(--color-gold);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.email-section p {
    color: var(--color-wolff-gray);
    margin-bottom: 3rem;
}

.input-group {
    display: flex;
    justify-content: center;
    gap: 0;
    max-width: 600px;
    margin: 0 auto;
}

.email-section input {
    flex: 1;
    padding: 15px 20px;
    background: transparent;
    border: 2px solid var(--color-wolff-gray);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1rem;
    outline: none;
    transition: var(--transition-speed);
}

.email-section input:focus {
    border-color: var(--color-white);
    background: rgba(255, 255, 255, 0.05);
}

.email-section button {
    padding: 15px 40px;
    background-color: var(--color-gold);
    color: var(--color-black);
    border: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-speed);
    text-transform: uppercase;
}

.email-section button:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

#form-message {
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--color-gold);
}

.hidden {
    display: none;
}

/* Roadmap Section */
.roadmap-section {
    padding: 100px 0;
    background-color: var(--color-black);
    /* Pitch Black */
}

.roadmap-section h3 {
    color: var(--color-white);
    font-size: 2.5rem;
    margin-bottom: 4rem;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 20px;
    border-left: 2px solid var(--color-gold);
    /* Gold Line */
    text-align: left;
}

.timeline-item {
    position: relative;
    padding-left: 50px;
    /* Space for icon */
    padding-bottom: 60px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

/* Icons */
.timeline-icon {
    position: absolute;
    left: -26px;
    /* Center on the line */
    top: 0;
    width: 50px;
    height: 50px;
    background-color: var(--color-black);
    border: 2px solid var(--color-gold);
    border-radius: 50%;

    /* Grid Centering */
    display: grid;
    place-items: center;

    color: var(--color-gold);
    font-size: 1.2rem;
    z-index: 2;
    transition: var(--transition-speed);
}

.timeline-icon i {
    width: auto;
    height: auto;
    line-height: normal;
    margin: 0;
    padding: 0;
}

.timeline-icon:hover {
    background-color: var(--color-gold);
    color: var(--color-black);
}

.timeline-content {
    position: relative;
    top: -5px;
    /* Align with icon */
}

.timeline-item .year {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: 0.9rem;
    /* Smaller, tagline style label above headline */
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.timeline-item h4 {
    font-family: var(--font-heading);
    color: var(--color-white);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    line-height: 1.1;
    text-transform: uppercase;
}

.timeline-item .sub-text {
    color: var(--color-wolff-gray);
    font-size: 1rem;
    line-height: 1.5;
    max-width: 600px;
}

/* Highlight specifically for the last item if needed, but styling is uniform now */
.timeline-item.highlight .timeline-icon {
    background-color: var(--color-gold);
    color: var(--color-black);
    box-shadow: 0 0 15px var(--color-gold-t);
}

.timeline-item.highlight h4 {
    color: var(--color-gold);
}


/* Community Vote Section */
.vote-section {
    background-color: var(--color-asphalt);
    padding: 100px 0;
    color: var(--color-white);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.vote-section h2 {
    font-size: 3rem;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.vote-section .sub-text {
    font-size: 1.2rem;
    color: var(--color-wolff-gray);
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.poll-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 2rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.poll-radio-card {
    cursor: pointer;
    min-height: 80px;
    /* Enhanced tap target */
    display: block;
    position: relative;
}

/* Hide the actual radio input */
.poll-radio-card input {
    display: none;
}

.card-content {
    border: 3px solid var(--color-asphalt-t);
    /* Thicker border */
    border-color: #444;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px;
    transition: all var(--transition-speed);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.team-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-wolff-gray);
    transition: color var(--transition-speed);
}

/* Selected State */
.poll-radio-card input:checked+.card-content {
    border-color: var(--color-gold);
    background-color: rgba(195, 158, 109, 0.1);
    box-shadow: 0 0 15px var(--color-gold-t);
}

.poll-radio-card input:checked+.card-content .team-name {
    color: var(--color-gold);
}

/* Hover State */
.poll-radio-card:hover .card-content {
    border-color: var(--color-wolff-gray);
    transform: translateY(-2px);
}

.poll-radio-card:hover input:checked+.card-content {
    border-color: var(--color-gold);
}

.vote-btn {
    padding: 15px 50px;
    background-color: var(--color-gold);
    color: var(--color-black);
    border: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition-speed);
    text-transform: uppercase;
    margin-top: 10px;
}

.vote-btn:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

/* Results View */
#poll-results h3 {
    margin-bottom: 2rem;
    color: var(--color-gold);
}

.result-bar-container {
    max-width: 600px;
    margin: 0 auto 20px auto;
    text-align: left;
}

.result-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-white);
}

.progress-track {
    background-color: rgba(0, 0, 0, 0.5);
    height: 25px;
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    background-color: var(--color-gold);
    height: 100%;
    width: 0%;
    /* JS will animate this */
    transition: width 1s ease-out;
}

/* Sticky Action Bar */
#sticky-action-bar {
    position: fixed;
    bottom: -100px;
    /* Hidden initially */
    left: 0;
    width: 100%;
    background-color: var(--color-black);
    border-top: 2px solid var(--color-gold);
    padding: 15px 20px;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    transition: bottom 0.4s ease-out;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.8);
}

#sticky-action-bar.visible {
    bottom: 0;
}

#sticky-action-bar p {
    color: var(--color-white);
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 1.2rem;
    margin: 0;
}

#sticky-action-bar .action-btn-small {
    background-color: var(--color-gold);
    color: var(--color-black);
    border: none;
    padding: 10px 25px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-speed);
}

#sticky-action-bar .action-btn-small:hover {
    background-color: var(--color-white);
}

/* Footer */

.footer-section {
    padding: 50px 0;
    border-top: 1px solid var(--color-asphalt);
    background-color: var(--color-black);
}

.social-links {
    margin-bottom: 2rem;
}

.social-links a {
    color: var(--color-white);
    font-size: 1.8rem;
    margin: 0 15px;
    transition: var(--transition-speed);
}

.social-links a:hover {
    color: var(--color-gold);
    transform: translateY(-3px);
}

.copyright {
    color: var(--color-asphalt);
    font-size: 0.9rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 3.5rem;
    }

    .hero-section h2 {
        font-size: 1.5rem;
    }

    .input-group {
        flex-direction: column;
    }

    .email-section button {
        width: 100%;
    }

    .timeline {
        margin-left: 10px;
    }

    /* Poll Section Mobile Fixes */
    .poll-options {
        grid-template-columns: 1fr;
        /* Stack vertically */
        gap: 15px;
    }

    .vote-section .content-wrapper {
        padding-right: 20px;
        /* Ensure padding */
        padding-left: 20px;
    }

    .poll-radio-card,
    .result-bar-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        /* Force box sizing */
    }

    .poll-radio-card {
        min-height: 80px;
    }

    .vote-btn {
        width: 100%;
    }

    /* Sticky Bar adjustments */
    #sticky-action-bar {
        padding: 10px 15px;
        justify-content: space-between;
    }

    #sticky-action-bar p {
        font-size: 1rem;
    }

    #sticky-action-bar .action-btn-small {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
}

/* Admin Portal Entry */
.admin-lock {
    color: var(--color-asphalt);
    margin-left: 10px;
    font-size: 0.8rem;
    transition: var(--transition-speed);
    text-decoration: none;
}

.admin-lock:hover {
    color: var(--color-gold);
}

/* Admin Dashboard */
.admin-body {
    background-color: var(--color-black);
    color: var(--color-white);
    /* padding-top: 100px; Remove fixed padding, use layout logic */
    min-height: 100vh;
}

.admin-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 20px 50px 20px;
    /* Top padding clears sticky header */
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-asphalt);
    padding-bottom: 1rem;
}

.admin-header h1 {
    color: var(--color-gold);
}

.admin-logout {
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-heading);
    text-transform: uppercase;
    border: 1px solid var(--color-wolff-gray);
    padding: 10px 20px;
    transition: var(--transition-speed);
}

.admin-logout:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* Tabs */
.admin-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab-btn {
    background: transparent;
    border: 1px solid var(--color-asphalt);
    color: var(--color-wolff-gray);
    padding: 10px 20px;
    cursor: pointer;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    transition: var(--transition-speed);
}

.tab-btn.active,
.tab-btn:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
    border-bottom: 2px solid var(--color-gold);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeInUp 0.5s ease-out;
}

/* Tables */
.data-table-container {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #111;
}

.admin-table th,
.admin-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #333;
}

.admin-table th {
    color: var(--color-gold);
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 500;
    border-bottom: 2px solid var(--color-gold);
}

.admin-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

.admin-table tr:hover {
    background-color: rgba(195, 158, 109, 0.1);
}

.action-btn {
    display: inline-block;
    color: var(--color-wolff-gray);
    font-size: 1.2rem;
    margin-right: 15px;
    transition: var(--transition-speed);
}

.action-btn:hover {
    color: var(--color-gold);
}

/* Login Form Center */
.login-wrapper {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #1a1a1a 0%, var(--color-black) 70%);
}

.login-form-container {
    background-color: #0f0f0f;
    padding: 40px;
    border: 1px solid var(--color-asphalt);
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.login-form-container h2 {
    color: var(--color-gold);
    margin-bottom: 20px;
}

.login-error {
    color: var(--color-red);
    margin-top: 10px;
    font-weight: bold;
}

/* Vision Gallery Section */
#vision-gallery {
    padding: 100px 0;
    background-color: var(--color-black);
}

#vision-gallery h2 {
    color: var(--color-gold);
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

#vision-gallery .sub-text {
    font-size: 1.2rem;
    color: var(--color-wolff-gray);
    margin-bottom: 3rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 20px;
}

.gallery-item {
    width: 100%;
    height: auto;
    border-radius: 4px;
    filter: grayscale(100%);
    transition: filter 0.3s, transform 0.3s;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.gallery-item:hover {
    filter: grayscale(0%);
    transform: scale(1.02);
    box-shadow: 0 8px 15px rgba(195, 158, 109, 0.2);
    /* Subtle Gold Shadow */
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#modal-image {
    max-width: 100%;
    max-height: 90vh;
    /* Keep it within view */
    border: 2px solid var(--color-gold);
    box-shadow: 0 0 30px rgba(195, 158, 109, 0.3);
}

.close-modal {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 3rem;
    color: var(--color-gold);
    cursor: pointer;
    transition: transform 0.3s, color 0.3s;
    line-height: 1;
    z-index: 2001;
}

.close-modal:hover {
    color: var(--color-white);
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    #vision-gallery h2 {
        font-size: 2.2rem;
    }


    .close-modal {
        top: 20px;
        right: 20px;
    }
}

/* Crest Explainer Styling */
.crest-headline {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 2.5rem;
    color: var(--color-gold);
    margin-bottom: 10px;
}

.crest-subtext {
    font-family: var(--font-body);
    color: var(--color-white);
    max-width: 600px;
    margin: 0 auto 30px auto;
    font-size: 1.1rem;
    /* Suggesting a legible size, though not explicitly asked, it fits context */
}

/* --- Easter Egg Styles --- */

/* Decoy Container */
.decoy-container {
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.system-font {
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.decoy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s;
    display: block;
}

.decoy-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(227, 24, 55, 0.2);
    /* Red tint */
    color: var(--color-red);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 0.3s;
    text-shadow: 0 0 5px red;
    pointer-events: none;
}

.decoy-container:hover .decoy-img {
    opacity: 0.4;
    filter: hue-rotate(90deg) contrast(1.5);
}

.decoy-container:hover {
    border: 2px solid var(--color-red);
    box-shadow: 0 0 15px var(--color-red);
}

.decoy-container:hover .decoy-overlay {
    opacity: 1;
}

/* Easter Modals */
.easter-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.98);
    /* Deep Black */
    z-index: 3000;
    /* Highest Priority */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.easter-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.easter-content {
    text-align: center;
    max-width: 600px;
    padding: 40px;
    border: 1px solid var(--color-gold);
    background-color: #111;
    box-shadow: 0 0 50px rgba(195, 158, 109, 0.2);
    position: relative;
}

.gold-text {
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
    animation: glitchText 2s infinite;
}

.easter-content p {
    color: var(--color-wolff-gray);
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    line-height: 1.6;
}

.prize-content {
    border-color: var(--color-gold);
    background: radial-gradient(circle, #222 0%, #000 100%);
}

.prize-img {
    max-width: 100%;
    height: auto;
    border: 2px solid var(--color-gold);
    margin: 20px 0;
    box-shadow: 0 0 20px var(--color-gold);
}

.close-easter {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2rem;
    color: var(--color-wolff-gray);
    cursor: pointer;
    transition: color 0.3s;
}

.close-easter:hover {
    color: var(--color-red);
}

@keyframes glitchText {
    0% {
        opacity: 1;
        text-shadow: 2px 2px red;
    }

    50% {
        opacity: 0.8;
        text-shadow: -2px -2px blue;
    }

    100% {
        opacity: 1;
        text-shadow: 2px 2px red;
    }
}

/* Founding Member Section */
.founding-section {
    background-color: var(--color-black);
    /* Dark/Premium feel */
    padding: 80px 0;
    color: var(--color-white);
    position: relative;
    border-top: 1px solid var(--color-gold-t);
}

.founding-img {
    width: 100%;
    height: auto;
    border: 3px solid var(--color-gold);
    display: block;
    box-shadow: 0 0 20px rgba(195, 158, 109, 0.2);
}

.gold-text {
    color: var(--color-gold) !important;
}

#foundingMemberForm {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

#foundingMemberForm input {
    width: 100%;
    padding: 15px 20px;
    background: transparent;
    border: 2px solid var(--color-gold);
    /* Gold borders as requested */
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1rem;
    outline: none;
    transition: var(--transition-speed);
}

#foundingMemberForm input::placeholder {
    color: var(--color-wolff-gray);
    opacity: 0.7;
}

#foundingMemberForm input:focus {
    background: rgba(195, 158, 109, 0.1);
    box-shadow: 0 0 10px var(--color-gold-t);
}

#foundingMemberForm button {
    padding: 15px 40px;
    background-color: var(--color-gold);
    color: var(--color-black);
    border: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition-speed);
    text-transform: uppercase;
    margin-top: 10px;
}

#foundingMemberForm button:hover {
    background-color: var(--color-white);
    color: var(--color-black);
    box-shadow: 0 0 15px var(--color-gold);
}

#founding-form-message {
    margin-top: 10px;
    color: var(--color-gold);
    font-weight: 600;
    font-size: 1.1rem;
}

/* Update Mobile styles for founding section if needed */
@media (max-width: 768px) {
    .founding-section {
        padding: 60px 0;
    }
}