/* --- Global Resets & Variables --- */
:root {
    --bg-dark: #252530;
    --bg-gradient-end: #1a1a20; /* Darker shade for gradient */
    --text-light: #ffffff;
    --gold-accent: #d3b574;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Open Sans', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-dark);
    color: var(--text-light);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden; /* Prevent horizontal scroll */
    font-weight: 400; /* Base body font weight */
}

.container {
    /* width: 90%; */
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px; /* Updated side padding */
}

h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--text-light);
    margin-bottom: 0.8em;
    font-weight: 600; /* Unified heading weight */
}

h1 {
    font-size: 2.8rem; /* Mobile first */
    line-height: 1.2;
}

h2 {
    font-size: 2.2rem; /* Mobile first */
    text-align: center;
    margin-bottom: 1.5em;
    position: relative;
    padding-bottom: 10px;
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--gold-accent);
}

h3 {
    font-size: 1.6rem;
    color: var(--gold-accent);
}

p {
    margin-bottom: 1em;
}

a {
    color: var(--gold-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- Hero Section --- */
.hero {
    min-height: 90vh; /* Adjusted from 100vh */
    position: relative;
    display: flex; /* Use flex to align content container */
    flex-direction: column; /* Stack logo and text vertically */
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-gradient-end) 100%);
    overflow: hidden; /* Ensures pseudo-elements don't cause scroll */
}

.hero-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('hero-1.jpg'); /* Changed placeholder */
    background-size: cover;
    background-position: center;
    opacity: 0.3; /* Adjust opacity to make text readable */
    z-index: 0;
}

.hero-content-container {
    position: relative; /* To be above the background image */
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Takes up available space */
    padding: 20px;
    min-height: 90vh; /* Adjusted from 100vh, ensure it also spans the full height */
}

.logo-container {
    width: 100%;
    text-align: center; /* Centered logo */
    padding-top: 10px; /* Small padding from the top */
    flex-shrink: 0; /* Prevent logo container from shrinking */
}

.logo {
    max-width: 100px; /* Made logo smaller, was 120px */
    height: auto;
}

.hero-eyebrow {
    font-size: 0.9rem;
    font-weight: 600; /* Correct and consistent */
    color: var(--gold-accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 2em;
    margin-bottom: 1em; /* Adjusted from 0.5em */
    display: inline-block; /* Changed from block */
    background-color: var(--bg-gradient-end); /* Added background */
    padding: 0.3em 0.6em; /* Added padding */
    border-radius: 3px; /* Optional: slight rounding */
    max-width: fit-content; /* Ensure background fits content */
    margin-left: auto; /* Center if block/inline-block in a flex/text-align:center parent */
    margin-right: auto; /* Center if block/inline-block in a flex/text-align:center parent */
}

.hero-text {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    flex-grow: 1; /* Make hero text take available space */
    display: flex; /* Enable flexbox for vertical centering */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children vertically */
}

.hero-text h1 {
    color: var(--text-light);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 0.6em; 
    /* font-weight will inherit from h1 rule (600) */
}

.hero-text h2 {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 400; /* Keep this specific override for hero subheading */
    margin-bottom: 1em; 
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    max-width: 650px; /* Added max-width */
    margin-left: auto; /* Center H2 */
    margin-right: auto; /* Center H2 */
}
.hero-text h2::after { /* Remove underline for subheading in hero */
    display: none;
}

.cta-button {
    display: inline-block;
    background-color: var(--gold-accent);
    color: var(--bg-dark);
    font-family: var(--font-body);
    font-weight: 700; /* Correct and consistent */
    font-size: 1.1rem;
    padding: 15px 35px;
    border: none;
    border-radius: 50px; /* More rounded */
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    max-width: max-content; /* Set a max-width for the CTA */
    align-self: center; /* Center the button within the flex container */
}

.cta-button:hover {
    background-color: #c09f5b; /* Darker gold */
    transform: translateY(-2px);
}

.urgency-text {
    margin-top: 15px;
    font-size: 0.8rem;
    /* font-size and color removed to inherit from body */
}

/* --- Social Proof Section --- */
.social-proof {
    background: linear-gradient(180deg, var(--bg-gradient-end) 0%, var(--bg-dark) 100%);
    padding: 30px 0; 
    text-align: center;
    border-top: 2px solid var(--gold-accent);
}

.social-proof-text {
    font-size: 1rem;
    margin-bottom: 40px; /* Updated from 20px */
}

.logos-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Updated from 30px */
    flex-wrap: wrap; /* Allow logos to wrap on smaller screens */
}

.logos-strip img {
    max-height: 40px; /* Adjust as needed for your logos */
    opacity: 0.7; /* Subtle appearance */
    filter: grayscale(50%) brightness(150%); /* Optional: to make them blend better with dark bg */
}

/* --- Why Monaco Section --- */
.why-monaco {
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-gradient-end) 100%);
    padding: 60px 0;
    border-top: 2px solid var(--gold-accent);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; /* Updated from 30px */
    margin-top: 30px;
}

.benefit-item {
    background-color: rgba(37, 37, 48, 0.75); /* #252530 with 75% opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
    padding: 24px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Consistent card border */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Standardized card shadow */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
}

.benefit-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 15px;
    color: var(--gold-accent);
}

.benefit-item h3 {
    margin-bottom: 10px;
    font-size: 1.4rem;
    /* font-weight will inherit from h3 rule (600) */
}

/* --- Value Proposition Section (What You'll Learn) --- */
.value-prop { 
    background: linear-gradient(180deg, var(--bg-gradient-end) 0%, var(--bg-dark) 100%); /* Corrected alternating gradient */
    padding: 60px 0;
    border-top: 2px solid var(--gold-accent);
    margin-top: 0;
}

.value-bullets {
    list-style: none;
    padding-left: 0;
    max-width: 700px;
    margin: 0 auto;
    display: grid;
    gap: 20px; /* Updated from 30px */
}

.value-bullets li {
    display: flex;
    align-items: center; 
    font-size: 16px; /* Unified body text size */
    padding: 15px 15px 15px 25px; 
    border-radius: 4px;
    position: relative; 
    background-color: rgba(37, 37, 48, 0.75); /* #252530 with 75% opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Existing glassmorphism border */
    border-left: 3px solid var(--gold-accent); /* New gold left border */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Standardized card shadow */
}

.bullet-icon {
    color: var(--gold-accent);
    font-size: 1.3em; /* Made slightly larger */
    margin-right: 25px; /* Increased margin-right from 10px */
    line-height: 1; /* Align icon better with text */
    position: relative; 
    z-index: 1;
    flex-shrink: 0;
    /* New styles for circular border */
    display: inline-flex; /* For centering content */
    align-items: center;
    justify-content: center;
    width: 1.6em; /* Relative to font-size, e.g., 1.6 * 1.2rem */
    height: 1.6em; /* Relative to font-size */
    border: 2px solid var(--gold-accent);
    border-radius: 50%;
}

.value-bullets li strong {
    display: block;
    color: var(--text-light);
    margin-bottom: 5px;
    font-weight: 700; /* Correct and consistent */
}

/* --- Who Should Attend Section --- */
.who-should-attend {
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-gradient-end) 100%);
    padding: 60px 0;
    border-top: 2px solid var(--gold-accent);
}

.attendee-list {
    list-style: none;
    padding-left: 0;
    max-width: 800px;
    margin: 30px auto 0 auto;
    display: grid;
    gap: 20px; /* Updated from 30px */
}

.attendee-list li {
    font-size: 16px; /* Unified body text size */
    display: flex;
    align-items: center;
    background-color: rgba(37, 37, 48, 0.75); /* #252530 with 75% opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 4px;
    font-weight: 400; /* Explicit for list items if needed, or rely on body */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Standardized card shadow */
}

.attendee-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    color: var(--gold-accent);
}

/* --- Speakers Section --- */
.speakers {
    padding: 60px 0;
    background: linear-gradient(180deg, var(--bg-gradient-end) 0%, var(--bg-dark) 100%);
    border-top: 2px solid var(--gold-accent); 
}

.speaker-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 column */
    gap: 20px; /* Updated from 30px */
    margin-top: 30px;
}

.speaker-card {
    background-color: rgba(37, 37, 48, 0.75); /* #252530 with 75% opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Replaces gold border */
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Standardized card shadow */
}

.speaker-image-placeholder {
    width: 120px;
    height: 120px;
    background-color: #444; /* Placeholder color */
    border-radius: 50%;
    margin: 0 auto 20px auto;
    border: 3px solid var(--gold-accent);
    /* User should replace this with <img src="..."> or background-image */
}

.speaker-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px auto;
    border: 3px solid var(--gold-accent);
    display: block;
}

.speaker-card h3 {
    margin-bottom: 5px;
}

.speaker-title {
    font-style: italic;
    color: rgba(255,255,255,0.7);
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.speaker-card p {
    /* font-size and color removed to inherit from body */
    /* Existing inherited font-weight: 400 is correct */
}

/* Registration Form Section Styles Removed */

/* --- Footer --- */
footer {
    background: var(--bg-gradient-end);
    text-align: center;
    padding: 30px 0;
    /* font-size and color for p tags will be inherited from body */
    color: rgba(255,255,255,0.6); /* Base color for footer text if not overridden by p */
    border-top: 2px solid var(--gold-accent);
}

footer p {
    margin-bottom: 5px;
    /* font-size and color removed to inherit from body */
}

/* --- Modal --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7); /* Dimmed background */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--bg-gradient-end);
    margin: auto;
    padding: 50px 20px; /* Updated padding */
    border: 1px solid var(--gold-accent);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Standardized card shadow */
    animation: slideDown 0.5s ease-out;
}

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

.modal-content h2 {
    color: var(--gold-accent);
    margin-top: 0;
    margin-bottom: 0.2em;
    font-size: 1.8rem;
    line-height: 1.2;
}

.modal-content h2::after { /* Remove underline for modal h2 */
    display: none;
}

.modal-content p {
    margin-bottom: 1em;
}

/* Style for the email input in the modal */
.modal-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--gold-accent);
    border-radius: 4px;
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: var(--font-body);
    font-size: 1rem;
}

.modal-input::placeholder {
    color: rgba(255,255,255,0.5);
}

.terms-label {
    color: rgba(255,255,255,0.5); /* Same as placeholder */
}

#agreeToTerms {
    position: relative;
    top: 2px; /* Adjusted to 2px */
}

/* Smaller CTA button for the modal */
.modal-cta {
    font-size: 0.9rem;
    padding: 10px 25px;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

#confirmationMessageText { /* Style for the dynamic message P tag */
    margin-bottom: 1em;
    font-size: 1.05rem;
    text-decoration: none;
    cursor: pointer;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: var(--text-light);
    text-decoration: none;
    cursor: pointer;
}

/* Loading Spinner for Modal */
.loading-spinner {
    display: none;
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--gold-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Responsive Design --- */

/* Tablet */
@media (min-width: 768px) {
    h1 {
        font-size: 3.5rem;
    }
    .hero-text h2 {
        font-size: 1.3rem;
    }
    .cta-button {
        font-size: 1.2rem;
        padding: 18px 45px;
    }
    .logo {
        max-width: 120px;
    }
    .speaker-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* More flexible */
    }
     .hero-content-container {
        padding: 40px;
    }
}

/* Mobile specific for logos-strip */
@media (max-width: 767px) {
    .logos-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columns, will create 2 rows for 6 items */
        gap: 20px; /* Updated from 30px */
        justify-items: center; /* Center logos horizontally in their grid cells */
        align-items: center; /* Vertically align items in the center of grid cells */
    }

    .logos-strip img {
        /* max-height: 40px; is already set globally and will be respected */
        width: 100%; /* Make image responsive within its cell */
        max-width: 90px; /* Prevent logos from becoming too large, adjust as needed */
        object-fit: contain; /* Ensure aspect ratio is maintained and image fits */
        /* Opacity and filter are inherited from global .logos-strip img rule */
    }
}

/* Desktop */
@media (min-width: 1024px) {
    h1 {
        font-size: 4rem;
        /* No specific max-width here, letting .hero-text control it or it expands if needed */
    }

    .hero-text h1 {
        max-width: 900px; /* Allow h1 to be wider */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.2rem;
    }

    .speaker-grid {
        grid-template-columns: repeat(3, 1fr);
    }
     .container {
        padding: 60px 20px; /* Updated side padding */
    }
}

/* --- Deep-Dive Agenda Section --- */
.deep-dive-agenda {
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-gradient-end) 100%);
    padding: 60px 0;
    border-top: 2px solid var(--gold-accent);
}

.agenda-speaker {
    margin-bottom: 20px;
    padding: 20px;
    background-color: rgba(37, 37, 48, 0.75); /* #252530 with 75% opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Standardized card shadow */
}

.agenda-speaker h3 {
    font-family: var(--font-heading); /* Playfair Display */
    font-size: 1.4rem; /* Smaller Playfair for agenda speaker title */
    color: var(--gold-accent);
    margin-bottom: 10px; /* Adjusted margin */
    font-weight: 600;
}

.agenda-speaker-name {
    display: block;                     /* Retain for layout */
    font-style: italic;                 /* From .speaker-title */
    font-family: var(--font-body);      /* Set to Open Sans */
    color: rgba(255,255,255,0.7);     /* From .speaker-title */
    font-size: 0.95rem;                 /* From .speaker-title */
    font-weight: 400;                   /* Explicitly set, inherited by .speaker-title */
    margin-top: 5px;                    /* Retain for layout */
    line-height: 1.3;                   /* Retain for layout */
}

.agenda-speaker ul {
    list-style-position: inside;
    padding-left: 0; 
    font-family: var(--font-body); /* Ensure Open Sans for agenda content */
}

.agenda-speaker li {
    margin-bottom: 10px;
    line-height: 1.5;
    font-weight: 400; /* Explicit for list items if needed */
}

/* --- FAQ Section --- */
.faq-section {
    background: linear-gradient(180deg, var(--bg-gradient-end) 0%, var(--bg-dark) 100%);
    padding: 60px 0;
    border-top: 2px solid var(--gold-accent);
}

.faq-item {
    margin-bottom: 20px;
    border: 1px solid rgba(211, 181, 116, 0.2); /* Subtle border for each item */
    border-radius: 4px;
}

.faq-question {
    background-color: rgba(255,255,255,0.05);
    color: var(--text-light);
    cursor: pointer;
    padding: 18px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-family: var(--font-heading); /* Playfair Display for FAQ questions */
    font-size: 1.1rem; /* Slightly larger for Playfair */
    font-weight: 600; 
    transition: background-color 0.3s ease;
    position: relative; /* For accordion icon */
}

.faq-question::after { /* Accordion icon */
    content: '+'; /* Plus icon */
    font-size: 1.5rem;
    color: var(--gold-accent);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
    content: '−'; /* Minus icon when active */
    transform: translateY(-50%); /* Keep vertical centering */
}

.faq-question:hover {
    background-color: rgba(255,255,255,0.08);
}

.faq-answer {
    padding: 0px 20px; /* Initially no vertical padding */
    background-color: rgba(0,0,0,0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* Smooth transition */
}

.faq-answer p {
    margin: 0;
    padding: 20px 0; /* Padding applied when open */
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 300px; /* Adjust if answers are very long */
    padding: 0px 20px; /* Horizontal padding remains */
}

/* --- Final CTA Section --- */
.final-cta-section {
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-gradient-end) 100%);
    padding: 80px 0;
    text-align: center;
    border-top: 2px solid var(--gold-accent);
}

.final-cta-section h2 {
    margin-bottom: 1.5em;
    font-size: 2.5rem;
    /* font-weight will inherit from h2 rule (600) */
}

.final-cta-section .urgency-text {
    margin-top: 20px;
}