:root {
    --bg-color: #0D0D0D;
    --text-primary: #FFFFFF;
    --text-secondary: #B0C4B8;
    --accent-brown: #4D734C;
    --accent-light: #2A4038;
    --card-bg-light: #2A4038;
    --card-bg-dark: #0D0D0D;
    --card-text-light: #FDFBF7;
    --font-primary: 'Outfit', sans-serif;
    --spacing-container: 8%;
    --border-radius-lg: 24px;
    --border-radius-md: 16px;
}

html {
    scroll-behavior: smooth;
}

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

body {
    font-family: var(--font-primary);
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow-x: hidden;
}

/* Utilities */
.highlight {
    font-weight: 300;
}

.highlight-text {
    color: #8FBC8F;
}

.btn {
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--accent-brown);
    color: white;
}

.btn-light {
    background-color: rgba(255, 255, 255, 0.9);
    color: #172621;
}

.mobile-only-btn {
    display: none;
}

/* Navbar */
.navbar {
    display: flex;
    align-items: center;
    padding: 24px var(--spacing-container);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1001; /* Ensure it's above the overlay */
}

.bar {
    height: 3px;
    width: 100%;
    background-color: var(--text-primary);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.nav-links {
    margin-left: 40px;
}

.navbar .btn {
    margin-left: auto;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 200px;
    width: auto;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-primary);
    margin: 0 16px;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #8FBC8F;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #8FBC8F;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Hero Section */
.hero {
    height: 90vh;
    padding: 0 var(--spacing-container);
    display: flex;
    align-items: flex-end;
    padding-bottom: 80px;
    background-image: url('images/piano_hero.png');
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    margin-bottom: 60px;
    margin: 20px;
    border-radius: 40px;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 600px;
    background-color: rgba(0, 0, 0, 0.4); /* Reduced opacity to show piano */
    padding: 40px;
    border-radius: 24px;
    backdrop-filter: blur(8px); /* Glassmorphism effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-content p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.95;
    max-width: 500px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* About Section */
.about-container {
    display: flex;
    gap: 20px;
    padding: 0 var(--spacing-container);
    margin-bottom: 20px;
}

.card {
    background-color: var(--card-bg-light);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.stats-card {
    flex: 1;
    background-color: #3B593F;
    /* Medium Green */
    color: white;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stats-card .card-content,
.stats-card .stats-header {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.stats-card iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    aspect-ratio: 16/9;
    width: auto;
}

.info-card {
    flex: 2;
    display: flex;
    background-color: #2A4038;
}

.info-content {
    flex: 1;
    padding: 40px;
}

.info-content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: white;
}

.info-content p {
    font-size: 0.95rem;
    margin-bottom: 16px;
    color: #B0C4B8;
    line-height: 1.6;
}

.info-image {
    flex: 1;
    background-image: url('images/piano_teaching.png');
    background-size: cover;
    background-position: center;
    border-top-left-radius: 100px;
    /* The curve effect */
    border-bottom-left-radius: 20px;
}

/* Courses Section */
.courses-container {
    display: flex;
    gap: 20px;
    padding: 0 var(--spacing-container);
    margin-bottom: 100px;
}

.course-card {
    flex: 1;
    background-color: var(--card-bg-light);
    border-radius: var(--border-radius-lg);
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.course-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-brown);
    background-color: #2f473e;
    /* Slightly lighter than card-bg-light */
}

.course-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: white;
}

.course-subtitle {
    display: block;
    color: var(--accent-brown);
    font-style: italic;
    margin-bottom: 15px;
    font-weight: 500;
}

.course-card p {
    color: #B0C4B8;
    line-height: 1.6;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .courses-container {
        flex-direction: column;
    }
}

/* Process Section */
.process {
    padding: 0 var(--spacing-container);
    margin-bottom: 100px;
}

.section-header {
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 2.5rem;
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.step-card {
    padding: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.step-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.step-card.active {
    border-left: 3px solid var(--accent-brown);
}

.step-number {
    font-size: 3rem;
    color: #3B593F;
    font-weight: 300;
    margin-right: 20px;
    line-height: 1;
}

.step-card h3 {
    font-size: 1.5rem;
    margin: 0;
    flex: 1;
}

.step-card p {
    flex-basis: 100%;
    margin-top: 15px;
}

.process-image .img-placeholder-lg {
    width: 100%;
    height: 600px;
    background-image: url('images/piano_recital.png');
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius-lg);
}

/* Feature Grid (Bento) */
.features {
    padding: 0 var(--spacing-container);
    margin-bottom: 100px;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 300px);
    gap: 20px;
}

.bento-item {
    background-color: var(--card-bg-light);
    border-radius: var(--border-radius-md);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
    border: none;
}

.bento-item.dark {
    background-color: var(--card-bg-dark);
    color: var(--card-text-light);
}

.bento-item h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    z-index: 2;
}

.bento-item p {
    font-size: 0.9rem;
    opacity: 0.8;
    z-index: 2;
}

/* Layout specific */
.item-1 {
    grid-column: 1 / 2;
    background-image: url('images/online_piano_lesson.png');
    background-size: cover;
    background-position: center;
    position: relative;
    color: var(--card-text-light);
    /* Ensure text is light */
}

/* Add overlay for readability */
.item-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
    z-index: 1;
}

/* Ensure content is above overlay */
.item-1 h3,
.item-1 p {
    position: relative;
    z-index: 2;
}

.item-2 {
    grid-column: 2 / 3;
    background-color: #FFFFFF;
    color: #172621;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically if needed, or stick to flex-end */
    align-items: center;
    text-align: center;
}

.faber-logo {
    max-width: 80%;
    height: auto;
    margin-bottom: 20px;
    display: block;
}

.item-2 p {
    color: #2A4038;
    opacity: 1;
}

.item-2 h3 {
    color: var(--accent-brown);
    margin-bottom: 10px;
}

.item-3 {
    grid-column: 3 / 4;
    height: 100%;
    grid-row: 1 / 3;
    background-image: url('images/autonomy.png');
    background-size: cover;
    background-position: center;
    position: relative;
    color: var(--card-text-light);
}

.item-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
    z-index: 1;
}

.item-3 h3,
.item-3 p {
    position: relative;
    z-index: 2;
}

/* Vertical card */
.item-4 {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    background-image: url('images/composer.png');
    background-size: cover;
    background-position: center;
    position: relative;
    color: var(--card-text-light);
    /* Ensure text is light */
}

.item-4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
    z-index: 1;
}

.item-4 .text-content {
    position: relative;
    z-index: 2;
    max-width: 50%;
}

.item-5 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

/* Placeholder tweaks for visual check */
.img-placeholder,
.img-placeholder-lg {
    background: transparent;
    width: 100%;
    height: 100%;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    :root {
        --spacing-container: 5%;
    }

    .navbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 10px 20px;
        background-color: var(--bg-color); /* Solid background to obscure scrolling content */
        position: fixed; /* Fix header at top */
        top: 0;
        width: 100%;
        z-index: 1000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
    }

    .logo {
        justify-self: start;
    }

    .logo-img {
        height: 60px; /* Reference style: compact logo */
    }

    .menu-toggle {
        display: flex;
        justify-self: center; /* Center the hamburger perfectly */
        padding: 10px;
    }

    /* Add a phantom element to the right if needed, or just let the grid handle it.
       If we want the menu toggle strictly in the center, 1fr auto 1fr works if content is balanced.
       Or we force the logo to be absolute.
       Let's stick to grid, but we need to ensure the empty right side balances the logo.
       If the logo is wide, the center might shift.
       Better approach for strict centering:
       Grid 3 equal columns? No.
       Absolute centering for the toggle might be safer if logo width varies.
       Let's try grid first, assuming logo width isn't huge.
    */
    
    /* Search icon placeholder (phantom third column) to balance layout? 
       For now, just grid. Alternatively, position absolute for the toggle.
    */


    /* Hide desktop CTA on mobile */
    .navbar > .btn {
        display: none;
    }

    /* Mobile CTA inside menu */
    .nav-links .mobile-only-btn {
        display: inline-block;
        margin-top: 30px;
        width: auto;
        min-width: 200px;
        padding: 12px 30px;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        margin: 0; /* Reset desktop margin */
        padding: 0; /* Reset padding if any */
        padding-top: 60px; /* Space inside the menu */
        top: 81px;
        left: 0;
        background-color: var(--bg-color); /* Match body bg */
        width: 100%;
        height: calc(100vh - 81px);
        z-index: 999; /* Below navbar */
        gap: 30px;
        transform: translateY(-100%); /* Slide up to hide? or just clip? */
        /* If we want it to slide down FROM the header, we need it to be behind the header but translate 0 means visible.
           Translate -100% moves it up.
           Let's use clip-path or max-height for a "drop down" feel, or just TranslateY(-150%)?
           Actually, sliding in from top is fine.
        */
        transform: translateY(-120%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 0;
        pointer-events: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    
    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-links a {
        font-size: 1.1rem; /* Slightly smaller, more elegant */
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 0;
    }
    
    /* Hamburger animation when active */
    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .hero {
        height: auto;
        min-height: 80vh;
        align-items: center;
        text-align: center;
        padding-top: 150px; /* Push content down to clear logo/navbar */
        padding-bottom: 60px;
    }

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

    .about-container {
        flex-direction: column;
    }

    .info-card {
        flex-direction: column;
    }

    .info-image {
        min-height: 200px;
        border-radius: 20px;
        order: -1;
    }

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

    .process-image .img-placeholder-lg {
        height: 300px;
        order: -1;
    }

    .process-grid {
        display: flex;
        flex-direction: column-reverse;
        /* steps below image on mobile usually preferred or vice versa */
    }

    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .bento-item {
        grid-column: auto !important;
        grid-row: auto !important;
        min-height: 250px;
    }
}

/* CTA Section */
.cta-section {
    padding: 120px var(--spacing-container);
    text-align: center;
    background: linear-gradient(180deg, var(--bg-color) 0%, var(--card-bg-light) 100%);
    position: relative;
    overflow: hidden;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.cta-content h2 {
    font-size: 3.5rem;
    margin-bottom: 24px;
    line-height: 1.1;
}

.cta-content p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Enhancements for CTA button */
.cta-section .btn-primary {
    padding: 16px 40px;
    font-size: 1.1rem;
    box-shadow: 0 4px 20px rgba(77, 115, 76, 0.3);
}

.cta-section .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(77, 115, 76, 0.5);
}

@media (max-width: 768px) {
    .cta-content h2 {
        font-size: 2.5rem;
    }
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 70px;
    height: 70px;
    z-index: 1001; /* Above mobile menu overlay */
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Ensure image fits circle */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: white; /* Fallback/Base */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent; /* Fix for jagged edges on transition */
}

.whatsapp-float img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.whatsapp-float:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px;
    }
}