/* Reset & Base Styles */
:root {
    /* Color Palette - Forest Green & Gold */
    --green-900: #022c22;
    --green-800: #064e3b;
    --green-850: #043d2e;
    --green-700: #047857;
    --green-600: #059669;
    --green-500: #10b981;
    --green-light: #ecfdf5;
    
    --gold-primary: #d4af37; /* Rich Gold */
    --gold-light: #fbeea1;
    --gold-dark: #aa8c2c;
    
    --bg-color: #ffffff;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    
    /* Typography */
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Layout */
    --max-width: 1200px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    
    /* Animation */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg-color);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

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

/* Utilities */
.overflow-hidden {
    overflow: hidden;
}

.mt-4 {
    margin-top: 2rem;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background-color: var(--green-700);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: var(--transition);
    border: 2px solid transparent;
}

.btn-primary:hover {
    background-color: var(--green-800);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 78, 59, 0.2);
}

.btn-secondary {
    display: inline-block;
    background-color: transparent;
    color: var(--green-800);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    border: 2px solid var(--green-800);
    transition: var(--transition);
}

.btn-secondary:hover {
    background-color: var(--green-50);
    transform: translateY(-2px);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.btn-gold {
    background-color: var(--gold-primary);
    color: var(--green-900);
}

.btn-gold:hover {
    background-color: var(--gold-dark);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.btn-text {
    font-weight: 600;
    color: white;
    transition: var(--transition);
}

.navbar.scrolled .btn-text {
    color: var(--text-main);
}

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

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 0;
    transition: var(--transition);
    background: transparent;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 1rem 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 2.25rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: white;
    transition: var(--transition);
}

.navbar.scrolled .brand {
    color: var(--green-900);
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    transition: var(--transition);
}

.navbar.scrolled .nav-links a {
    color: var(--text-main);
}

.nav-links a:hover {
    color: var(--gold-primary);
}

.navbar.scrolled .nav-links a:hover {
    color: var(--green-700);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}


/* Hero Section */
/* Phase 4.5nw - the hero is sized by its CONTENTS now.
   ⭐⭐ min-height is REMOVED, not reduced. Any vh figure re-inflates the hero on a tall
   monitor, and that is what pushed the PolioPlus band off the first screen - the goal Bill
   set for this page. A shorter padding with min-height:100vh still left the same hole,
   because flex centring simply spread the slack around the content instead.
   ⚠️ 8.5rem top is not arbitrary: the fixed .navbar is ~88px, so anything at or below
   5.5rem puts the headline flush against the menu (tried, rejected). This leaves ~48px. */
.hero {
    position: relative;
    padding: 8.5rem 0 1.5rem;
    background-color: var(--green-900);
    color: white;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: -5%; /* Prevent edge bleeding during scale */
    /* Phase 4.5nw - v4 is v3 with the building's "CONNECT" sign repainted to read
       FundGuru. v3 is left on disk untouched, so reverting is this one line. */
    background-image: url('../assets/fundguru_sunrise_v4.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.9;
    animation: cinematic-zoom 25s ease-in-out infinite alternate;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 44, 34, 0.1) 0%, rgba(2, 44, 34, 0.95) 100%);
    z-index: 1;
}

@keyframes cinematic-zoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.hero-container {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Phase 4.5nw - ⭐⭐ 430px IS THE PAGE'S ALIGNMENT SPINE. dashboard.jpg is 1024x1024 - a
   SQUARE - so at width:100% of a half-width column it rendered ~535px tall and set the floor
   for the whole hero on its own. Capping it here is what brings the PolioPlus band up.
   ⚠️ .polio-band-inner's right column is pinned to this SAME 430px and ends on the same
   edge, which is what makes the globe sit under the chart. Change this number and change
   that one, or the two fall out of alignment again. */
.hero-visual {
    max-width: 430px;
    margin-left: auto;
}

/* Abstract Background Blobs - Raise Z-index so they sit above the overlay */
.gradient-blob {
    z-index: 2;
}
.hero-text .hero-title {
    font-size: 4rem;
    margin: 1.5rem 0;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--green-light);
    margin-bottom: 2.5rem;
    max-width: 90%;
}

.hero-cta-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
}

.hero-text .btn-secondary {
    color: white;
    border-color: rgba(255,255,255,0.3);
}

.hero-text .btn-secondary:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: white;
}

.inline-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gold-light);
}

/* Trust Avatars */
.hero-trust {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatars {
    display: flex;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--green-900);
    margin-left: -12px;
    background-size: cover;
    background-position: center;
}

.avatar:first-child { margin-left: 0; }
.avatar.i1 { background: linear-gradient(135deg, white, var(--green-light)); }
.avatar.i2 { background: linear-gradient(135deg, var(--gold-light), var(--gold-primary)); }
.avatar.i3 { background: linear-gradient(135deg, var(--green-700), var(--green-900)); border-color: var(--gold-primary); }

.trust-text {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.8);
}

/* Glass Mockup Wrapper */
.glass-mockup-wrapper {
    position: relative;
}

.mockup-img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: 1;
}

.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    color: var(--text-main);
}

.floating-metric {
    position: absolute;
    top: 10%;
    right: -10%;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 2;
}

.floating-ticket {
    position: absolute;
    bottom: 20%;
    left: -10%;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 2;
}

.metric-icon {
    font-size: 1.5rem;
    background: var(--green-50);
    padding: 0.5rem;
    border-radius: 50%;
}

.metric-info {
    display: flex;
    flex-direction: column;
}

.metric-val {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--green-900);
}

.metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.float-anim-1 { animation: float 6s infinite ease-in-out; }
.float-anim-2 { animation: float 7s infinite ease-in-out reverse; }

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Features Section */
.features-section {
    padding: 8rem 0;
    background: linear-gradient(to bottom, var(--green-850) 0%, var(--green-800) 100%);
}

.section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 5rem;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--green-900);
}

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

.feature-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: var(--transition);
    border: 1px solid rgba(0,0,0,0.05);
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.feature-img-wrapper {
    width: 100%;
    height: 180px;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    overflow: hidden;
    background-color: var(--green-light);
}

.feature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.feature-card:hover .feature-img {
    transform: scale(1.05);
}

.feature-card h3 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--green-900);
}


.features-section .section-header h2 {
    color: white !important;
}
.features-section .section-header p {
    color: rgba(255,255,255,0.85) !important;
}

/* Highlighted Events */
.events-highlight {
    padding: 8rem 0;
    background: linear-gradient(to bottom, var(--green-800) 0%, var(--green-700) 100%);
    color: rgba(255,255,255,0.85);
}

.events-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.events-content h2 {
    font-size: 3rem;
    margin: 1rem 0;
    color: white;
}

.check-list {
    list-style: none;
    margin: 2rem 0;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.check-icon {
    background: var(--green-700);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.events-visual {
    position: relative;
}

.event-cards-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

.event-card-ui {
    position: absolute;
    width: 80%;
    padding: 2rem;
    transition: var(--transition);
}

.event-card-ui.eco-event {
    top: 0;
    right: 0;
    z-index: 2;
}

.event-card-ui.youth-event {
    bottom: 0;
    left: 0;
    z-index: 1;
    transform: scale(0.95);
    opacity: 0.8;
}

.event-card-ui:hover {
    transform: translateY(-5px) scale(1.02);
    z-index: 3;
    opacity: 1;
}

.event-ui-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.event-ui-header h4 {
    font-size: 1.25rem;
}

.event-status {
    background: var(--green-light);
    color: var(--green-700);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.progress-bar-ui {
    height: 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--gold-primary);
    border-radius: 4px;
}

.event-ui-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Partner Callout */
.partner-callout {
    padding: 6rem 0;
    background-color: var(--green-800);
    color: white;
}

.partner-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 4rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.partner-badge {
    margin-bottom: 1rem;
    border-color: rgba(255, 255, 255, 0.3);
}

.partner-text {
    flex: 1;
}

.partner-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.partner-text p {
    font-size: 1.125rem;
    color: var(--green-light);
    max-width: 600px;
}

@media (max-width: 992px) {
    .partner-container {
        flex-direction: column;
        text-align: center;
    }
}

/* CTA Section */
.cta-section {
    padding: 8rem 0;
    background: var(--green-850);
    color: white;
    text-align: center;
}

.cta-container h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.cta-container p {
    font-size: 1.25rem;
    color: var(--green-light);
    margin-bottom: 3rem;
}

.cta-sub {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
}

/* Footer */
footer {
    background: #021c15;
    color: white;
    padding: 6rem 0 2rem;
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-brand .brand {
    color: white;
    margin-bottom: 1rem;
}

.footer-brand p {
    color: rgba(255,255,255,0.6);
    max-width: 300px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.footer-column h4 {
    margin-bottom: 1.5rem;
    color: white;
}

.footer-column a {
    display: block;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.75rem;
    transition: var(--transition);
}

.footer-column a:hover {
    color: var(--gold-primary);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.875rem;
}

/* Scroll Animations */
.reveal, .reveal-up, .reveal-left, .reveal-right {
    opacity: 0;
    transition: all 1s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-up { transform: translateY(50px); }
.reveal-left { transform: translateX(50px); }
.reveal-right { transform: translateX(-50px); }

.reveal.active, .reveal-up.active, .reveal-left.active, .reveal-right.active {
    opacity: 1;
    transform: translate(0);
}

/* Disable horizontal slide-ins on mobile phones to prevent viewport overflow */
@media (max-width: 768px) {
    .reveal-left, .reveal-right {
        transform: none !important;
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    /* Phase 4.5nw - the chart stops being a column and becomes a centred block. */
    .hero-visual {
        max-width: 480px;
        margin: 0 auto;
    }
    /* Phase 4.5nw - the PolioPlus band stacks at the SAME width as the hero above it, and
       the gold rule goes with it. These three belong together; splitting them is the bug.
       ⚠️⚠️ .polio-band--pinned, NOT a bare .polio-band-inner: the pinned modifier in
       css/polio_band.css is (0,2,0) and would beat a (0,1,0) override here no matter
       which stylesheet loads last. The band would stay two columns on a phone. */
    .polio-band--pinned .polio-band-inner {
        grid-template-columns: 1fr;
    }
    .polio-figure::before {
        display: none;
    }
    
    .hero-cta-group {
        justify-content: center;
    }
    
    .hero-trust {
        justify-content: center;
    }
    
    .events-container {
        grid-template-columns: 1fr;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
    }
}


/* Event Overlay Card (Safari Mockup) */
.event-overlay-card {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.02);
}
.mockup-date {
    color: var(--green-600);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}
.mockup-title {
    color: var(--green-900);
    font-size: 1.4rem;
    margin-bottom: 0;
    line-height: 1.2;
}
.mockup-action {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
    margin-top: 1rem;
}
.mockup-buy-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    display: block;
    text-align: center;
    width: 100%;
}
@media (max-width: 768px) {
    /* Phase 4.5nw - a phone's navbar is shorter, so the hero can start higher. */
    .hero {
        padding: 7.5rem 0 1rem;
    }
    .event-overlay-card {
        padding: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }
    .mockup-date {
        font-size: 0.7rem;
        margin-bottom: 0.15rem;
    }
    .mockup-title {
        font-size: 1.1rem;
    }
    .mockup-action {
        padding-top: 0.75rem;
        margin-top: 0.75rem;
    }
    .mockup-buy-btn {
        padding: 0.35rem 1rem;
        font-size: 0.85rem;
    }

    .logo-svg {
        width: 28px;
        height: 28px;
    }
    /* Darken the overlay specifically on mobile to ensure white text pops */
    .hero::after {
        background: linear-gradient(180deg, rgba(2, 44, 34, 0.6) 0%, rgba(2, 44, 34, 0.95) 100%);
    }

    /* Hide the middle nav links on mobile, but KEEP the action buttons (Log In, Sign Up Free) visible */
    .nav-links {
        display: none;
    }
    
    /* Mobile navbar: brand on left, actions on right */
    .nav-container {
        justify-content: space-between;
    }
    
    /* Tighten the brand on mobile so the action buttons fit */
    .brand {
        font-size: 1.4rem;
    }
    .brand .logo-text {
        font-size: 1.4rem;
    }
    
    /* Tighten action buttons on mobile */
    .nav-actions {
        gap: 0.5rem;
    }
    .nav-actions .btn-text {
        padding: 0.5rem 0.6rem;
        font-size: 0.9rem;
    }
    .nav-actions .btn-primary {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
    .hero-text .hero-title {
        font-size: 3rem;
    }
}

/* On very narrow phones, hide the text "Log In" — keep just the green Sign Up Free CTA */
@media (max-width: 420px) {
    .nav-actions .btn-text { display: none; }
}

.event-card-ui.ticket-card {
    top: 0;
    right: 0;
    z-index: 2;
    border-left: 5px solid var(--gold-primary);
}

.event-card-ui.auction-card {
    bottom: -20px;
    left: -20px;
    z-index: 1;
    transform: scale(0.95);
    opacity: 0.95;
    border-top: 5px solid var(--green-900);
}

.ticket-header h4 {
    font-size: 1.5rem;
    color: var(--green-900);
    margin: 0.5rem 0;
}

.ticket-type {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--gold-primary);
    letter-spacing: 1px;
}

.ticket-barcode {
    height: 45px;
    background: repeating-linear-gradient(90deg, 
        var(--green-900) 0, var(--green-900) 4px, 
        transparent 4px, transparent 8px, 
        var(--green-900) 8px, var(--green-900) 9px,
        transparent 9px, transparent 15px,
        var(--green-900) 15px, var(--green-900) 22px,
        transparent 22px, transparent 25px
    );
    opacity: 0.2;
    margin: 1.5rem 0;
    border-radius: 2px;
}

.bid-amount {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--green-900);
    margin: 0.5rem 0;
}

.bid-action {
    background: var(--gold-primary);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-weight: 600;
}

.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }

/* Pricing Section */
.pricing-section {
    padding: 8rem 0;
    background: linear-gradient(to bottom, var(--green-700) 0%, var(--green-600) 100%);
    color: rgba(255,255,255,0.85);
}

.pricing-container {
    display: flex;
    align-items: center;
    gap: 6rem;
}

.pricing-content {
    flex: 1;
}

.pricing-content h2 {
    font-size: 3rem;
    margin: 1.5rem 0;
    color: white;
}

.pricing-visual {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}

.checkout-ui {
    width: 100%;
    max-width: 460px;
    padding: 3rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0,0,0,0.05);
    border-top: 8px solid var(--green-700);
}

.checkout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.checkout-header h4 {
    color: var(--green-900);
    font-size: 1.25rem;
}

.secure-badge {
    background: var(--green-light);
    color: var(--green-700);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.border-bottom {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.border-top {
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.checkout-amount, .checkout-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkout-amount .label, .checkout-total .label {
    font-weight: 500;
    color: var(--text-muted);
}

.amount-val {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--green-900);
}

.total-val {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--green-900);
}

.tipping-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.tipping-header .label {
    font-weight: 600;
    color: var(--green-900);
}

.toggle-switch {
    width: 44px;
    height: 24px;
    background: var(--green-700);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.tipping-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.tip-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.tip-btn {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-md);
    padding: 0.75rem 0;
    text-align: center;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    transition: var(--transition);
}

.tip-btn.active {
    background: var(--green-50);
    border-color: var(--green-700);
    color: var(--green-700);
}

.btn-checkout {
    display: block;
    width: 100%;
    background: var(--gold-primary);
    color: white;
    font-weight: 600;
    border: none;
    padding: 1.25rem;
    border-radius: var(--radius-md);
    font-size: 1.125rem;
    cursor: pointer;
    transition: var(--transition);
}

.btn-checkout:hover {
    background: #d4a017;
}

@media (max-width: 992px) {
    .pricing-container {
        flex-direction: column-reverse;
        gap: 4rem;
    }
}

/* Gala Event Section */
.gala-section {
    /* Phase 4.5nw - the impact-counters section used to sit between this and the PolioPlus
       band. With it gone, 8rem of empty green opened up above this headline. */
    padding: 5rem 0 8rem;
    background: linear-gradient(to bottom, var(--green-900) 0%, var(--green-850) 100%);
    color: rgba(255,255,255,0.85);
}

.gala-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.gala-content h2 {
    font-size: 3rem;
    margin: 1.5rem 0;
    color: white;
}

.gala-image-card {
    padding: 0.5rem;
    width: 100%;
}

.gala-image-card .feature-img {
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: block;
}

@media (max-width: 992px) {
    .gala-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* How It Works Section */
.how-it-works-section {
    padding: 8rem 0;
    background: linear-gradient(180deg, var(--green-600) 0%, var(--green-500) 100%);
    color: white;
    position: relative;
    z-index: 1;
}

.steps-list {
    margin-top: 3rem;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.step-num {
    width: 48px;
    height: 48px;
    background: var(--gold-primary);
    color: var(--green-900);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.step-text h4 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    color: white;
}

.step-text p {
    color: var(--green-light);
    font-size: 1.125rem;
    max-width: 90%;
}

/* Marketing CRM Section */
.marketing-section {
    padding: 8rem 0;
    background: linear-gradient(180deg, var(--green-500) 0%, #5c4033 50%, var(--green-900) 100%);
    color: white;
    position: relative;
    z-index: 1;
}

@media (max-width: 992px) {
    .marketing-visual { margin-top: 3rem; }
}

/* Dream Image Marketing Hover & Testimonials */
.dream-img-wrapper {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-lg);
}

.dream-img-wrapper .feature-img,
.dream-img-wrapper .browser-mockup {
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.8s ease !important;
}

.dream-img-wrapper:hover .feature-img,
.dream-img-wrapper:hover .browser-mockup {
    transform: scale(1.12) !important;
}

.dream-testimonial {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    font-size: 0.9rem;
    font-style: italic;
    color: var(--green-900);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    border-left: 4px solid var(--gold-primary);
    z-index: 10;
}

.dream-img-wrapper:hover .dream-testimonial {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Pricing Page Specifics */
.pricing-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.pricing-tier {
    background: white;
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.pricing-tier:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 45px rgba(0,0,0,0.1);
}

.pro-tier {
    border: 2px solid var(--gold-primary);
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.15);
}

.pro-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold-primary);
    color: var(--green-900);
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tier-header {
    text-align: left;
    margin-bottom: 2rem;
}

.tier-header h2 {
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: 1rem;
}

.pro-tier .tier-header h2 {
    color: var(--green-900);
}

.price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.price .currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--green-900);
}

.price .amount {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--green-900);
}

.price .frequency {
    color: var(--text-muted);
    font-weight: 500;
}

.tier-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.tier-action {
    margin-bottom: 2.5rem;
}

.tier-features .features-title {
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-main);
    font-size: 0.95rem;
}

.check-list.dark-text li {
    color: var(--text-muted);
    font-size: 0.95rem;
    align-items: flex-start;
}

.check-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.gold-check {
    background: var(--gold-primary);
    color: var(--green-900);
}

.relative {
    position: relative;
}

.w-100 {
    width: 100%;
}

/* Pricing Calculator Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

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

.modal-content {
    background: white;
    width: 90%;
    max-width: 600px;
    border-radius: var(--radius-sm);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
    color: #3b82f6;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    font-family: var(--font-body);
}

.modal-body {
    padding: 2rem;
}

.calc-input-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
}

#calc-contacts-input {
    flex: 1;
    max-width: 300px;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-sm);
    background-color: #fef08a;
    color: var(--text-main);
    font-size: 1rem;
}

#calc-contacts-input:focus {
    outline: none;
    border-color: #3b82f6;
}

.calc-action-btn {
    background-color: #65a34e;
    color: white;
    padding: 0.75rem 1.75rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s;
}

.calc-action-btn:hover {
    background-color: #558a42;
    transform: none;
    box-shadow: none;
}

.calc-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
}

.calc-table th, .calc-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.95rem;
}

.calc-table th {
    background: white;
    font-weight: 800;
    color: var(--text-main);
}

.calc-table th:last-child, .calc-table td:last-child {
    text-align: center;
    border-left: 1px solid #e5e7eb;
}

.calc-table tfoot td {
    background: #374151;
    color: white;
    font-weight: 600;
    border-bottom: none;
}

.modal-footer {
    padding: 1rem 2rem;
    text-align: right;
    border-top: 1px solid #e5e7eb;
    background: white;
}

#close-modal-btn {
    background: #888;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
}

#close-modal-btn:hover {
    background: #666;
    transform: none;
}

/* Toggle Switch */
.billing-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.toggle-label {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}
.toggle-label.active {
    color: var(--green-900);
    font-weight: 800;
}
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--green-600);
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}
input:checked + .slider {
    background-color: var(--gold-primary);
}
input:checked + .slider:before {
    transform: translateX(24px);
}
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}
.modal-desc-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 90%;
    margin: 0 auto 2rem auto;
    line-height: 1.6;
}
.emerald-title {
    color: var(--green-600) !important;
}

/* Casino Graphic Placeholder */
.casino-footer {
    width: 100%;
    margin-top: 3.5rem;
    display: flex;
    justify-content: center;
}
.poker-chips-img {
    width: 100%;
    max-width: 1100px;
    height: 200px; /* Crops image horizontally like a banner */
    object-fit: cover;
    object-position: center 60%;
    opacity: 0.85;
    transition: var(--transition);
    /* Feather edges to blend into background */
    -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
    mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
}
.poker-chips-img:hover {
    opacity: 1;
    transform: translateY(-5px) scale(1.02);
}

/* =========================================
   FEATURED EVENTS CARDS (DASHBOARD STYLE)
   ========================================= */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.featured-card {
    display: flex;
    flex-direction: column;
    background: var(--green-850);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid var(--gold-primary);
}

.featured-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    border-color: var(--gold-primary);
}

.featured-hero {
    height: 140px;
    background-size: cover;
    background-position: center;
}

.featured-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.featured-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.featured-title {
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.featured-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-weight: 600;
}

.featured-stats {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.75rem;
    margin-top: auto;
}

.stat-main {
    display: flex;
    flex-direction: column;
}

.stat-main .stat-val {
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.stat-main .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.stat-alt {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stat-alt .stat-val {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.stat-alt .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.featured-progress-bg {
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    position: relative;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}

/* Tooltip */
.featured-progress-bg::after {
    content: attr(data-sold);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.95);
    color: var(--green-900);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    z-index: 10;
}
.featured-progress-bg:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.featured-progress-fill {
    height: 100%;
    background: linear-gradient(180deg, #fce68d 0%, #d4af37 50%, #b8860b 100%);
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 0 8px rgba(212, 175, 55, 0.5);
    position: relative;
}

/* Responsive Grid */
@media (max-width: 1024px) {
    .featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .featured-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================ */
/* FundGuru Mobile Menu (hamburger pattern for marketing pages)  */
/* Injected by js/mobile-menu.js                                 */
/* ============================================================ */

.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    align-items: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.mobile-menu-btn:hover { background: rgba(255,255,255,0.05); color: #d4af37; }
.mobile-menu-btn:focus-visible { outline: 2px solid #d4af37; outline-offset: 2px; }
/* When the navbar scrolls (background becomes white), flip hamburger to dark so it stays visible */
.navbar.scrolled .mobile-menu-btn { color: var(--text-main); }
.navbar.scrolled .mobile-menu-btn:hover { background: rgba(0,0,0,0.05); color: #d4af37; }

.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mobile-menu-overlay.open { display: block; opacity: 1; }

.mobile-menu-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: linear-gradient(180deg, #0a2616 0%, #021a14 100%);
    z-index: 9999;
    padding: 4rem 1.5rem 2rem;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 32px rgba(0,0,0,0.5);
    overflow-y: auto;
    color: #fff;
}
.mobile-menu-panel.open { transform: translateX(0); }

.mobile-menu-close {
    position: absolute;
    top: 1rem; right: 1rem;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    transition: color 0.18s, background 0.18s;
}
.mobile-menu-close:hover { color: #d4af37; background: rgba(255,255,255,0.05); }

.mobile-menu-panel .menu-section-label {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 1.4rem 0 0.4rem;
    font-weight: 700;
}
.mobile-menu-panel .menu-section-label:first-of-type { margin-top: 0; }

.mobile-menu-panel a {
    display: block;
    padding: 0.85rem 0;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 1.05rem;
    transition: color 0.18s, padding-left 0.18s;
    font-family: inherit;
}
.mobile-menu-panel a:hover { color: #d4af37; padding-left: 0.5rem; }

.mobile-menu-panel a.mm-btn-text {
    text-align: center;
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 0.85rem;
    margin-top: 0.6rem;
}
.mobile-menu-panel a.mm-btn-text:hover { padding-left: 0.85rem; background: rgba(255,255,255,0.05); }

.mobile-menu-panel a.mm-btn-primary {
    background: linear-gradient(135deg, #d4af37 0%, #f0d27a 100%);
    color: #0a2616;
    text-align: center;
    margin-top: 0.6rem;
    border-radius: 8px;
    border-bottom: none;
    padding: 1rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(212,175,55,0.25);
}
.mobile-menu-panel a.mm-btn-primary:hover {
    color: #0a2616;
    padding-left: 1rem;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(212,175,55,0.35);
}

body.menu-locked { overflow: hidden; }

@media (max-width: 768px) {
    .nav-links { display: none !important; }
    .nav-actions { display: none !important; }
    .mobile-menu-btn {
        display: inline-flex;
        /* Fixed to viewport — bulletproof against any navbar/page overflow */
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 1001; /* above the navbar (z-index: 1000) */
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border-radius: 8px;
    }
    /* Subtle visibility tweaks for the fixed pill */
    .mobile-menu-btn:hover { background: rgba(0, 0, 0, 0.55); color: #d4af37; }
    /* Defensive: prevent horizontal layout overflow on mobile (fixes the rotation snap-back issue) */
    html, body { max-width: 100vw; overflow-x: hidden; }
}