/* ============================================================= */
        /* Reset and Base Styles */
/* ============================================================= */

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

:root {
    --brand-blue: #162739;
    --accent-green: #85A842;
    --bg-cream: #f8f7f5;
    --text-dark: #333333;
    --light-gray: #F5F5F5;
    --nav-green: #9CB770;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    background-color: var(--bg-cream);
    color: var(--text-dark);
}

/* ============================================================= */
/* Navigation Styles */
/* ============================================================= */

.nav-container {
position: sticky;
top: 0;
z-index: 1000;
background-color: #9CB770;
}

.navbar {
max-width: 1200px;
margin: 0 auto;
padding: 0.75rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}

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

.logo img {
height: 60px;
width: auto;
}

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

.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}

.nav-links a:not(.nav-cta-button):hover {
color: rgba(255, 255, 255, 0.8);
}

.nav-links .nav-cta-button {
background-color: #162739;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

.nav-links .nav-cta-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
background-color: #1a2f45;
}

.hamburger {
display: none;
cursor: pointer;
background: none;
border: none;
color: white;
font-size: 1.5rem;
}

@media (max-width: 768px) {
.logo img {
height: 50px;
}

.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #9CB770;
flex-direction: column;
padding: 1rem;
gap: 1rem;
}

.nav-links.active {
display: flex;
}

.hamburger {
display: block;
}
}


/* ============================================================= */
/* Hero Section Styles */
/* ============================================================= */
.hero {
position: relative;
min-height: 500px;
color: white;
overflow: hidden;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-background img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top; /* Added this line */
}
.hero-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(22, 39, 57, 0.9), rgba(31, 59, 92, 0.8));
}
.hero-wrapper {
position: relative;
z-index: 2;
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
display: grid;
grid-template-columns: 45% 55%;
gap: 1.5rem; /* Reduced from 2rem */
}
.hero-left {
padding-top: 3rem; /* Reduced from 4rem */
}
.hero-main h1 {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 1.5rem;
}
.hero-right {
display: flex;
flex-direction: column;
gap: 0.75rem; /* Reduced from 1rem */
padding-top: 1.5rem; /* Reduced from 2rem */
padding-left: 100px;
}
.hero-card {
background: rgba(255, 255, 255, 0.98);
border-radius: 12px;
padding: 1.25rem; /* Reduced from 1.5rem */
color: var(--text-dark);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 1.5rem; /* Reduced from 2rem */
max-width: 800px;
}
.card-content-wrap {
flex: 1;
min-width: 0;
}

.card-header {
text-align: center;
margin-bottom: 2rem;
display: block;  /* Forces block-level stacking */
}

.card-header i {
font-size: 1.5rem;
color: var(--accent-green);
}
.card-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--brand-blue);
}
.card-content {
font-size: 1.125rem;
line-height: 1.4;
color: #555;
margin-bottom: 0.75rem; /* Reduced from 1rem */
}
.card-cta {
display: inline-block;
background-color: var(--accent-green);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 24px;
text-decoration: none;
font-weight: 600;
text-align: center;
font-size: 1rem;
transition: all 0.3s ease;
width: 100%;
}
.card-cta:hover {
background-color: #6f8c37;
transform: translateY(-1px);
}
.card-side-image {
flex: 0 0 auto;
width: 200px;
height: 250px; /* Reduced from 300px */
border-radius: 8px;
overflow: hidden;
}
.card-side-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1200px) {
.hero-wrapper {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.hero-left {
text-align: center;
padding-top: 2rem;
}
.hero-main h1 {
font-size: 2.5rem;
}
.hero-right {
padding-left: 0;
}
.card-side-image {
width: 150px;
height: 200px; /* Reduced from 250px */
}
}
@media (max-width: 768px) {
.hero {
min-height: auto;
}
.hero-wrapper {
padding: 1rem;
}
.hero-main h1 {
font-size: 2rem;
}
.hero-card {
flex-direction: column;
padding: 0;
overflow: hidden;
}
.card-content-wrap {
padding: 0 1.5rem 1.5rem;
}
.card-side-image {
width: 100%;
height: 250px; /* Reduced from 300px */
order: -1;
border-radius: 8px 8px 0 0;
}
.card-side-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.card-header {
margin-bottom: 0.75rem;
}
.card-header h2 {
font-size: 1.25rem;
}
.card-content {
font-size: 1rem;
}
}


/* ============================================================= */
/* Footer Styles */
/* ============================================================= */

footer {
    background-color: var(--brand-blue);
    color: white;
    padding: 4rem 1rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.footer-section h3 {
    color: var(--accent-green);
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: var(--accent-green);
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    font-size: 1.5rem;
}

/* ============================================================= */
/* Responsive Design */
/* ============================================================= */

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--brand-blue);
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
        border-bottom: 3px solid var(--accent-green);
    }

    .nav-links.active {
        display: flex;
    }

    .hamburger {
        display: block;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* ============================================================= */
/* Social Proof Section Styles */
/* ============================================================= */

.social-proof {
    padding: 4rem 1rem;
    background-color: white;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto 4rem;
    display: flex;
    justify-content: space-around;
    gap: 2rem;
    flex-wrap: wrap;
}

.stat-card {
    flex: 1;
    min-width: 250px;
    text-align: center;
    padding: 2rem;
    background: var(--bg-cream);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: 3rem;
    font-weight: bold;
    color: var(--brand-blue);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.1rem;
    color: var(--text-dark);
    line-height: 1.4;
}

.transformations {
    max-width: 1200px;
    margin: 0 auto;
}

.transformations h2 {
    text-align: center;
    line-height: 1.3;
    font-size: 2.5rem;
    color: var(--brand-blue);
    margin-bottom: 3rem;
}

.transformation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 0 1rem;
}

.transformation-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.transformation-card:hover {
    transform: translateY(-5px);
}

.transformation-image {
    position: relative;
    overflow: hidden;
}

.transformation-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.transformation-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(22, 39, 57, 0.9));
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.transformation-card:hover .transformation-overlay {
    transform: translateY(0);
}

.transformation-stats {
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

.transformation-details {
    padding: 1.5rem;
}

.transformation-details h3 {
    color: var(--brand-blue);
    margin-bottom: 0.5rem;
}

.transformation-details p {
    color: var(--text-dark);
    font-style: italic;
}

/* ============================================================= */
/* System Overview Section Styles */
/* ============================================================= */
.system-overview {
    padding: 4rem 1rem;
    background-color: var(--light-gray);
}
.system-header {
    max-width: 800px;
    margin: 0 auto 2rem;
    text-align: center;
}
.system-header h2 {
    color: var(--brand-blue);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}
.system-intro {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: var(--text-dark);
}
.system-comparison.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
}
.approach-card {
    background: var(--brand-blue);
    color: white;
    border-radius: 12px;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}
.approach-card:hover {
    transform: translateY(-5px);
}
.approach-banner {
    background: rgba(255,255,255,0.1);
    padding: 2rem;
    text-align: center;
}
.approach-banner i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}
.approach-banner h4 {
    font-size: 1.3rem;
    margin: 0;
    color: white;
}
.approach-card p {
    padding: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
}
.approach-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    background: #ff4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.approach-badge i {
    color: white;
    font-size: 0.9rem;
}
.split-screen-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 2rem;
}
.split-screen {
    flex: 1;
    min-width: 0;
}

.split-screen.right h2 {
text-align: center;
color: var(--brand-blue);
font-size: 2.5rem;
margin-bottom: 2rem;
}

.content-card {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}
.transformation-story {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.story-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.story-content h3 {
    color: var(--brand-blue);
    margin-bottom: 1rem;
}
.result-highlight {
    display: inline-block;
    background: var(--accent-green);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin-top: 1rem;
    font-weight: bold;
}
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.feature-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 1.5rem;
    transition: transform 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-5px);
}
.feature-icon {
    font-size: 2rem;
    color: var(--accent-green);
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.founder-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}
.feature-content h3 {
    color: var(--brand-blue);
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .system-header h2 {
        font-size: 2rem;
    }
    
    .system-comparison.grid {
        grid-template-columns: 1fr;
    }
    
    .approach-banner {
        padding: 1.5rem;
    }
    
    .approach-card p {
        padding: 1.5rem;
    }

    .split-screen-container {
        flex-direction: column;
    }

    .story-image {
        max-width: 300px;
        margin: 0 auto;
    }

    .transformation-story {
        text-align: center;
    }

    .feature-card {
        padding: 1.25rem;
    }

    .feature-icon {
        min-width: 48px;
    }

    .founder-icon {
        width: 48px;
        height: 48px;
    }

    .feature-content h3 {
        font-size: 1.1rem;
    }

    .feature-content p {
        font-size: 0.95rem;
        line-height: 1.4;
    }
}


/* ============================================================= */
/* How It Works Section Styles */
/* ============================================================= */
.how-it-works {
padding: 4rem 1rem;
background-color: white;
}
.how-it-works-header {
max-width: 800px;
margin: 0 auto 4rem;
text-align: center;
}
.how-it-works-header h2 {
color: var(--brand-blue);
font-size: 2.5rem;
margin-bottom: 1.5rem;
}

.tech-human-intro {
max-width: 800px;  /* Keep readable line length */
margin: 1rem auto;  /* Center and add vertical spacing */
padding: 2rem;
background: #f8f7f5;  /* Light cream background from design system */
border-left: 4px solid #85A842;  /* Brand accent green */
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);  /* Subtle depth */
line-height: 1.6;  /* Better readability */
font-size: 1.125rem;  /* Slightly larger than body text */
}


.process-container {
max-width: 1200px;
margin: 0 auto;
}
.process-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-bottom: 4rem;
}
.process-step {
text-align: center;
position: relative;
}
/* Line before the icon */
.process-step::before {
content: '';
position: absolute;
top: 2rem;
left: -50%;
width: 100%;
height: 2px;
background: var(--accent-green);
z-index: 0;
}
/* Line after the icon */
.process-step::after {
content: '';
position: absolute;
top: 2rem;
left: 50%;
width: 100%;
height: 2px;
background: var(--accent-green);
z-index: 0;
}
/* Remove line before first step */
.process-step:first-child::before {
display: none;
}
/* Remove line after last step */
.process-step:last-child::after {
display: none;
}
.step-icon {
position: relative;
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: white;
border: 2px solid var(--accent-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--accent-green);
z-index: 1;
}
.step-number {
position: absolute;
top: -10px;
right: -10px;
width: 30px;
height: 30px;
background: var(--brand-blue);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: bold;
}
.step-content h3 {
color: var(--brand-blue);
margin-bottom: 1rem;
}
.experience-highlights {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 4rem;
}
.highlight-card {
background: var(--bg-cream);
padding: 2rem;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.highlight-card:hover {
transform: translateY(-5px);
}
.highlight-card i {
font-size: 2.5rem;
color: var(--accent-green);
margin-bottom: 1rem;
}
.highlight-card h4 {
color: var(--brand-blue);
margin-bottom: 1rem;
font-size: 1.2rem;
}


/* ============================================================= */
/* Founder Access Section Styles */
/* ============================================================= */
.founder-access {
padding: 4rem 1rem;
background: var(--bg-cream);
}

.founder-header {
max-width: 800px;
margin: 0 auto 4rem;
text-align: center;
}

.founder-header h2 {
color: var(--brand-blue);
font-size: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: 1.5rem;
}

.founder-intro {
font-size: clamp(1rem, 2vw, 1.25rem);
line-height: 1.6;
color: var(--text-dark);
}

.founder-split-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}

@media (min-width: 768px) {
.founder-split-container {
grid-template-columns: repeat(2, 1fr);
gap: 4rem;
}
}

.founder-content {
width: 100%;
}

.founder-image-container {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
aspect-ratio: 3/4;
max-width: 500px;
margin: 0 auto;
}

.founder-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}

@media (hover: hover) {
.founder-image-container:hover .founder-image {
transform: scale(1.05);
}
}

.founder-icon {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}

.credentials-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(
transparent,
rgba(22, 39, 57, 0.85) 30%,
rgba(22, 39, 57, 0.95)
);
padding: 1.5rem;
color: white;
}

@media (min-width: 768px) {
.credentials-overlay {
padding: 2rem;
}
}

.credentials-overlay h3 {
font-size: clamp(1.25rem, 3vw, 1.5rem);
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.credentials-list {
list-style: none;
padding: 0;
display: grid;
gap: 0.75rem;
}

.credentials-list li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: clamp(0.875rem, 2vw, 1rem);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.credentials-list i {
color: var(--accent-green);
font-size: 1.1em;
flex-shrink: 0;
}

.advantage-cards {
display: grid;
gap: 1.5rem;
margin-bottom: 2rem;
}

@media (min-width: 640px) {
.advantage-cards {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}

.advantage-card {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

@media (hover: hover) {
.advantage-card:hover {
transform: translateY(-5px);
}
}

.advantage-icon {
font-size: 2rem;
color: var(--accent-green);
margin-bottom: 1rem;
}

.advantage-card h3 {
color: var(--brand-blue);
margin-bottom: 1rem;
font-size: clamp(1.1rem, 2vw, 1.2rem);
}

/* Enhanced CTA styles */
.founder-cta {
background: white;
padding: 3rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 8px 24px rgba(22, 39, 57, 0.12);
max-width: 700px;
margin: 4rem auto 2rem;
grid-column: 1 / -1;
border: 1px solid rgba(133, 168, 66, 0.15);
position: relative;
overflow: hidden;
}

.founder-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--accent-green), var(--brand-blue));
}

.cta-text {
font-size: clamp(1.4rem, 2.5vw, 1.75rem);
line-height: 1.4;
margin-bottom: 2rem;
color: var(--brand-blue);
font-weight: 600;
max-width: 580px;
margin-left: auto;
margin-right: auto;
}

.cta-button {
display: inline-block;
background: var(--accent-green);
color: white;
padding: 1rem 2rem;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
font-size: 1.125rem;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(133, 168, 66, 0.25);
}

.cta-button:hover {
background: #739339;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(133, 168, 66, 0.3);
}

@media (max-width: 768px) {
.founder-cta {
padding: 2rem 1.5rem;
margin: 3rem 1rem;
}

.cta-text {
font-size: clamp(1.2rem, 4vw, 1.4rem);
}

.cta-button {
padding: 0.875rem 1.5rem;
font-size: 1rem;
width: 100%;
max-width: 300px;
}
}



/* ============================================================= */
/* Challenge Section Styles */
/* ============================================================= */

.challenge-section {
padding: 4rem 1rem;
background: white;
}

.challenge-container {
max-width: 1200px;
margin: 0 auto;
}

.challenge-content {
text-align: center;
}

.challenge-content h2 {
color: var(--brand-blue);
font-size: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: 1rem;
line-height: 1.2;
}

.challenge-intro {
font-size: clamp(1rem, 3vw, 1.25rem);
margin-bottom: 3rem;
color: var(--text-dark);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

/* Challenge Grid Layout */
.challenge-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
text-align: left;
}

/* Benefits List Styles */
.benefits-list {
background: var(--bg-cream);
padding: 2rem;
border-radius: 8px;
margin-bottom: 1.5rem;
}

.benefits-list h3 {
color: var(--brand-blue);
margin-bottom: 1.5rem;
font-size: 1.5rem;
font-weight: bold;
}

.benefits-list ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}

.benefits-list li {
display: flex;
gap: 1rem;
color: var(--text-dark);
}

.benefits-list i {
color: var(--accent-green);
font-size: 1rem;
margin-top: 0.4em;
flex-shrink: 0;
}

.benefits-list p {
margin: 0;
line-height: 1.4;
font-size: 1rem;
}

.benefits-list strong {
color: var(--brand-blue);
font-weight: 600;
}

.benefits-list em {
font-style: italic;
color: var(--text-dark);
opacity: 0.85;
}

/* Social Proof Strip */
.social-proof-strip {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.testimonial-avatars {
display: flex;
flex-shrink: 0;
}

.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid white;
margin-left: -10px;
}

.avatar:first-child {
margin-left: 0;
}

/* Signup Card Styles */
.signup-card {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.next-wave {
text-align: center;
margin-bottom: 2rem;
}

.next-wave h3 {
color: var(--brand-blue);
margin-bottom: 1rem;
font-size: clamp(1.1rem, 3vw, 1.3rem);
}

/* Countdown Styles */
.countdown {
display: flex;
justify-content: center;
gap: 0.5rem;
}

.countdown-item {
background: var(--brand-blue);
color: white;
padding: 0.75rem;
border-radius: 8px;
min-width: 60px;
}

.countdown .number {
display: block;
font-size: clamp(1.2rem, 3vw, 1.5rem);
font-weight: bold;
}

.countdown .label {
font-size: 0.8rem;
opacity: 0.9;
}

/* Form Styles */
.signup-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.form-group label {
font-weight: 500;
color: var(--text-dark);
}

.form-group input {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}

.form-group input:focus {
outline: none;
border-color: var(--accent-green);
box-shadow: 0 0 0 2px rgba(133, 168, 66, 0.2);
}

.signup-button {
width: 100%;
background: var(--accent-green);
color: white;
border: none;
padding: 1rem;
border-radius: 4px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: background-color 0.3s ease;
}

.signup-button:hover {
background-color: #6f8c37;
}

.guarantee {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
padding-top: 0.5rem;
color: var(--text-dark);
font-size: 0.9rem;
}

.guarantee i {
color: var(--accent-green);
font-size: 1.5rem;
flex-shrink: 0;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
.challenge-section {
padding: 3rem 1rem;
}

.challenge-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.benefits-list {
padding: 1.5rem;
}

.benefits-list h3 {
font-size: 1.3rem;
}

.benefits-list ul {
gap: 1rem;
}

.social-proof-strip {
flex-direction: column;
text-align: center;
padding: 1.25rem;
}

.testimonial-avatars {
justify-content: center;
}

.signup-card {
padding: 1.5rem;
}
}

@media (max-width: 480px) {
.countdown {
gap: 0.25rem;
}

.countdown-item {
min-width: 50px;
padding: 0.5rem;
}

.guarantee {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}

.benefits-list {
padding: 1.25rem;
}

.benefits-list li {
gap: 0.75rem;
}

.benefits-list p {
font-size: 0.95rem;
}
}


/* ================================ */
/* Pricing List Styles */
/* ================================ */

.pricing-section {
padding: 4rem 0;
background: var(--bg-cream);
}

.pricing-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}

.pricing-header {
text-align: center;
margin-bottom: 1rem;
}

.pricing-header h2 {
color: var(--brand-blue);
font-size: 2.5rem;
margin-bottom: 0;
}

.pricing-intro {
font-size: 1.25rem;
color: var(--text-dark);
margin-bottom: 1.5rem;
}

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

.pricing-card {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
position: relative;
}

.pricing-card.featured {
border: 2px solid var(--accent-green);
}

.featured-label {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--accent-green);
color: white;
padding: 0.4rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
}

.card-header {
text-align: center;
margin-bottom: 2rem;
}

.card-header h3 {
color: var(--brand-blue);
font-size: 1.75rem;
margin-bottom: 1.5rem;
}

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

.currency {
font-size: 2rem;
font-weight: 600;
color: var(--brand-blue);
}

.amount {
font-size: 3.5rem;
font-weight: 700;
color: var(--brand-blue);
line-height: 1;
}

.period {
font-size: 1.1rem;
color: var(--text-dark);
opacity: 0.8;
}

.price-detail {
color: var(--accent-green);
font-size: 1rem;
font-style: italic;
margin-top: -20px;
}

.features {
list-style: none;
padding: 0;
margin: 0 0 2rem;
flex-grow: 1;
}

.features li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--text-dark);
font-size: 0.95rem;
}

.features i {
color: var(--accent-green);
font-size: 0.9rem;
}

.pricing-cta {
display: block;
text-align: center;
padding: 1rem;
background: var(--accent-green);
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
transition: all 0.3s ease;
}

.pricing-cta:hover {
background-color: #6f8c37;
transform: translateY(-2px);
}

.pricing-cta.featured {
background: var(--brand-blue);
}

.pricing-cta.featured:hover {
background: #1f3b5c;
}

@media screen and (max-width: 768px) {
.pricing-section {
padding: 3rem 0;
}

.pricing-header h2 {
font-size: 2rem;
}

.pricing-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.pricing-card {
padding: 1.5rem;
}

.featured-label {
right: auto;
left: 50%;
transform: translateX(-50%);
}

.card-header h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}

.amount {
font-size: 3rem;
}

.features li {
font-size: 0.9rem;
}
}


/* ============================================================= */
/* About Section Styles */
/* ============================================================= */

.about-section {
    padding: 4rem 1rem;
    background: white;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
}

.about-header {
    text-align: center;
    margin-bottom: 3rem;
}

.about-header h2 {
    color: var(--brand-blue);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.about-intro {
    font-size: 1.25rem;
    color: var(--text-dark);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.founder-photo {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.main-photo {
    width: 100%;
    height: auto;
    display: block;
}

.photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(22, 39, 57, 0.9));
    padding: 2rem;
}

.credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.credential-item {
    background: rgba(255, 255, 255, 0.9);
    color: var(--brand-blue);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.journey-timeline {
    position: relative;
    padding-left: 2rem;
}

.journey-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-green);
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 0;
    width: 1rem;
    height: 1rem;
    background: var(--accent-green);
    border: 3px solid white;
    border-radius: 50%;
}

.timeline-item .year {
    color: var(--accent-green);
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.timeline-item h4 {
    color: var(--brand-blue);
    margin-bottom: 0.5rem;
}

.message-card {
    background: var(--bg-cream);
    padding: 3rem;
    border-radius: 12px;
    position: relative;
}

.quote-mark {
    position: absolute;
    top: -1rem;
    left: 2rem;
    font-size: 3rem;
    color: var(--accent-green);
    opacity: 0.3;
}

.message-card h3 {
    color: var(--brand-blue);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.message-card p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.credentials-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.credential-group h4 {
    color: var(--brand-blue);
    margin-bottom: 1rem;
}

.credential-group ul {
    list-style: none;
    padding: 0;
}

.credential-group li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.credential-group i {
    color: var(--accent-green);
}

.signature {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.signature-img {
    height: auto;
}

.signature-text {
    display: flex;
    flex-direction: column;
}

.signature-text strong {
    color: var(--brand-blue);
}

.signature-text span {
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* ============================================================= */
/* Organizations Section Styles V2 */
/* ============================================================= */

.organizations-section {
    padding: 4rem 1rem;
    background: var(--bg-cream);
}

.organizations-container {
    max-width: 1200px;
    margin: 0 auto;
}

.organizations-header {
    text-align: center;
    margin-bottom: 3rem;
}

.organizations-header h2 {
    color: var(--brand-blue);
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
}

.organizations-header h3 {
    color: var(--brand-blue);
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.org-tagline {
    font-size: 1.5rem;
    color: var(--text-dark);
}

.org-content-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
    align-items: start;
}

.org-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-card {
background: var(--bg-cream);
padding: 1.5rem;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
position: relative;
}

/* All four pseudo corners */
.stat-card::before,
.stat-card::after,
.stat-card > div::before,
.stat-card > div::after {
content: '';
position: absolute;
width: 15px;
height: 15px;
border: 3px solid rgba(22, 39, 57, 0.1);  /* 30% opacity */
pointer-events: none;
}

/* Top Left */
.stat-card::before {
top: -2px;
left: -2px;
border-right: 0;
border-bottom: 0;
border-top-left-radius: 8px;
}

/* Top Right */
.stat-card::after {
top: -2px;
right: -2px;
border-left: 0;
border-bottom: 0;
border-top-right-radius: 8px;
}

/* Bottom Left */
.stat-card > div::before {
bottom: -2px;
left: -2px;
border-right: 0;
border-top: 0;
border-bottom-left-radius: 8px;
}

/* Bottom Right */
.stat-card > div::after {
bottom: -2px;
right: -2px;
border-left: 0;
border-top: 0;
border-bottom-right-radius: 8px;
}
.stat-card:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: var(--brand-blue);
    margin-bottom: 0.5rem;
}

.org-message {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.highlight-text {
    font-size: 1.2rem;
    color: var(--brand-blue);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.program-features {
    margin-bottom: 2rem;
}

.program-features h3 {
    color: var(--brand-blue);
    margin-bottom: 1rem;
}

.program-features ul {
    list-style: none;
    padding: 0;
}

.program-features li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.program-features i {
    color: var(--accent-green);
}

.org-focus {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 2rem;
}

.org-focus p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.zoom-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cta-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cta-card h3 {
    color: var(--brand-blue);
    margin-bottom: 1rem;
}

.zoom-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent-green);
    color: white;
    padding: 1rem 2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin: 1.5rem 0;
    transition: background-color 0.3s ease;
}

.zoom-button:hover {
    background-color: #6f8c37;
}

.cta-note {
    font-size: 0.9rem;
    color: var(--text-dark);
    opacity: 0.8;
}

@media (max-width: 1024px) {
    .org-content-grid {
        grid-template-columns: 1fr 1fr;
    }

    .zoom-cta {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .organizations-header h2 {
        font-size: 2rem;
    }

    .org-tagline {
        font-size: 1.25rem;
    }

    .org-content-grid {
        grid-template-columns: 1fr;
    }

    .org-stats {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .stat-card {
        flex: 1;
        min-width: 200px;
    }
}


/* ============================================================= */
/* Start Steps Section Styles */
/* ============================================================= */

.start-steps {
padding: 4rem 1rem;
background-color: white;
}

.start-steps-header {
max-width: 800px;
margin: 0 auto 4rem;
text-align: center;
}

.start-steps-header h2 {
color: var(--brand-blue);
font-size: 2.5rem;
margin-bottom: 1.5rem;
}

.steps-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 3rem;
}

.step-block {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
padding: 1rem;
background: var(--bg-cream);
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.step-image {
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.step-image img {
width: 100%;
height: auto;
display: block;
}

.step-number {
position: absolute;
top: 1rem;
left: 1rem;
width: 40px;
height: 40px;
background: var(--accent-green);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.step-content {
flex: 1;
padding: 0 1rem;
}

.step-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}

.step-header i {
color: var(--accent-green);
font-size: 1.5rem;
}

.step-header h3 {
color: var(--brand-blue);
font-size: 1.5rem;
margin: 0;
}

.step-content p {
color: var(--text-dark);
line-height: 1.6;
margin: 0;
}

/* Desktop styles */
@media (min-width: 768px) {
.step-block {
flex-direction: row;
align-items: center;
padding: 2rem;
}

.step-image {
flex: 0 0 45%;
margin: 0;
}

.step-content {
flex: 0 0 55%;
padding: 0 0 0 2rem;
}

/* Alternate layout for even-numbered steps */
.step-block:nth-child(even) {
flex-direction: row-reverse;
}

.step-block:nth-child(even) .step-content {
padding: 0 2rem 0 0;
}
}

/* Additional responsive adjustments */
@media (max-width: 767px) {
.start-steps-header h2 {
font-size: 2rem;
}

.step-header h3 {
font-size: 1.25rem;
}

.step-content {
padding: 0;
}
}



/* ======================================================== */
/* SIX PILLARS */
/* ======================================================== */
.six-pillars {
padding: 2rem 1rem 3rem 1rem;
background: #f8f7f5;
}

.pillars-container {
max-width: 1200px;
margin: 0 auto 0 auto;
padding: 2.5rem 2.5rem 1.5rem 2.5rem;
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}


.pillars-header {
text-align: center;
margin-bottom: 2rem;
}
.pillars-header h2 {
color: #162739;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.solution-intro {
font-size: 1.2rem;
line-height: 1.6;
max-width: 800px;
margin: 0 auto 1rem;
color: #555;
}

.pillars-content {
display: flex;
gap: 2rem;
margin-bottom: 1rem;
}


.iceberg-section {
flex: 1;
max-width: 50%;
}


.iceberg-image {
display: block;  /* This is key */
width: auto;
max-height: 400px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
margin-left: auto;  /* This should actually move it to the right */

}

.pillars-detail {
flex: 1;
display: flex;
flex-direction: column;
}
.pillars-peak, .pillars-base {
margin-bottom: 1rem;
}
.pillars-peak h4, .pillars-base h4 {
color: #162739;
font-size: 1.1rem;
margin-bottom: 0.25rem;
}
.pillars-peak > p, .pillars-base > p {
font-size: 0.9rem;
color: #666;
margin-bottom: 0.5rem;
}
.pillar-items {
display: flex;
flex-direction: column;
/* gap: 0.1rem; */
}
.pillar-item {
display: flex;
align-items: center;
gap: 0.1rem;
padding: 0rem 0rem 0.65rem 0.2rem;
background: #fff;
border-radius: 6px;
transition: transform 0.3s ease;
}
.pillar-item:hover {
transform: translateX(5px);
}
.pillar-item i {
color: #85A842;
font-size: 1rem;
text-align: center;
width: 24px;
}
.pillar-item h5 {
color: #162739;
font-size: 1rem;
margin: 0;
}
.pillar-item p {
color: #666;
margin: 0;
font-size: 0.9rem;
}

@media (max-width: 768px) {

.six-pillars {
margin-bottom: -20px;
}

.pillars-content {
flex-direction: column;
}

.iceberg-section {
max-width: 100%;
}


.iceberg-image {
width: 100%;
height: auto;
max-height: none;
margin: 0 auto;
}


.pillars-detail {
padding: 1rem 0.25rem 0 0.25rem;
margin-bottom: -1rem;
}
.pillar-item {
display: block;
padding: 0.5rem 0;
line-height: 1.4;
}
.pillar-item i {
display: inline-block;
width: auto;
margin-right: 0.5rem;
}
.pillar-item h5 {
display: inline;
}
.pillar-item p {
display: inline;
margin-left: 0.1rem;
}
.pillar-item:hover {
transform: none;
}
}



/* ============================================================= */
/* Trial Section Styles */
/* ============================================================= */

.trial-section {
padding: 4rem 1rem;
background: white;
}

.trial-container {
max-width: 1200px;
margin: 0 auto;
}

.trial-content {
text-align: center;
}

.trial-content h2 {
color: var(--brand-blue);
font-size: 2.5rem;
line-height: 1.2;
margin-top: -30px;

}

.trial-intro {
font-size: clamp(1rem, 3vw, 1.25rem);
margin-bottom: 3rem;
color: var(--text-dark);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

/* Trial Grid Layout */
.trial-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
text-align: left;
}

/* Benefits List Styles */
.benefits-list {
background: var(--bg-cream);
padding: 2rem;
border-radius: 8px;
margin-bottom: 1.5rem;
}

.benefits-list h3 {
color: var(--brand-blue);
margin-bottom: 1.5rem;
font-size: 1.5rem;
font-weight: bold;
}

.benefits-list ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}

.benefits-list li {
display: flex;
gap: 1rem;
color: var(--text-dark);
}

.benefits-list i {
color: var(--accent-green);
font-size: 1rem;
margin-top: 0.4em;
flex-shrink: 0;
}

.benefits-list p {
margin: 0;
line-height: 1.4;
font-size: 1rem;
}

.benefits-list strong {
color: var(--brand-blue);
font-weight: 600;
}

.benefits-list em {
font-style: italic;
color: var(--text-dark);
opacity: 0.85;
}

/* Signup Card Styles */
.signup-card {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.signup-header {
background: var(--bg-cream);
margin: -2rem -2rem 2rem -2rem;
padding: 1.5rem;
border-radius: 8px 8px 0 0;
}

.signup-heading {
color: var(--brand-blue);
font-size: 1.75rem;
font-weight: 700;
margin: 0;
text-align: center;
}

/* Form Styles */
.signup-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.form-group {
display: flex;
flex-direction: column;
}

.form-group input {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}

.form-group input:focus {
outline: none;
border-color: var(--accent-green);
box-shadow: 0 0 0 2px rgba(133, 168, 66, 0.2);
}

/* Phone input specific styles */
.form-group input[type="tel"] {
letter-spacing: 0.5px;
}


.signup-button {
width: 100%;
background: var(--accent-green);
color: white;
border: none;
padding: 1rem;
border-radius: 4px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: background-color 0.3s ease;
margin-bottom: 0;
}

.signup-button:hover {
background-color: #6f8c37;
}

.guarantee {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 0.75rem;
color: var(--text-dark);
font-size: 0.85rem;
text-align: center;
}

.guarantee i {
color: var(--accent-green);
font-size: 1rem;
flex-shrink: 0;
}

.guarantee p {
margin: 0;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
.trial-section {
padding: 3rem 1rem;
}

.trial-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.benefits-list {
padding: 1.5rem;
}

.benefits-list h3 {
font-size: 1.3rem;
}

.benefits-list ul {
gap: 1rem;
}

.signup-card {
padding: 1.5rem;
}

.signup-header {
margin: -1.5rem -1.5rem 1.5rem -1.5rem;
padding: 1.25rem;
}
}

@media (max-width: 480px) {
.benefits-list {
padding: 1.25rem;
}

.benefits-list li {
gap: 0.75rem;
}

.benefits-list p {
font-size: 0.95rem;
}
}




/* ============================================================= */
/* Reality of Obesogenic Society and Human Complexity */
/* ============================================================= */

.reality-overview {
padding: 4rem 2rem;
background-color: #f8f7f5;
}

.reality-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 3fr 2fr;
gap: 3rem;
align-items: center;
}

.reality-content {
padding-right: 2rem;
}

.reality-content h2 {
color: #162739;
font-size: 2.5rem;
margin-bottom: 2rem;
line-height: 1.2;
}

.reality-lead {
font-size: 1.5rem;
color: #162739;
margin-bottom: 2rem;
line-height: 1.4;
}

.reality-details p {
margin-bottom: 1.5rem;
line-height: 1.6;
color: #333333;
}

.reality-image {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* max-height: 500px; */
}

.reality-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(22, 39, 57, 0.2), transparent);
}

/* Mobile Responsive */
@media (max-width: 768px) {
.reality-container {
grid-template-columns: 1fr;
gap: 2rem;
}

.reality-content {
padding-right: 0;
}

.reality-content h2 {
font-size: 2rem;
}

.reality-lead {
font-size: 1.25rem;
}

.reality-image {
max-height: 500px;
}
}


/* =============================== */
/* FAQs Section */
/* =============================== */

.faq-section {
padding: 20px 0 60px 0;
background-color: var(--bg-cream);
}

.faq-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.faq-header {
text-align: center;
margin-bottom: 40px;
}

.faq-header h2 {
color: var(--brand-blue);
font-size: 2.5rem;
margin-bottom: 15px;
line-height: 1.3;
}

.faq-header h3 {
color: var(--text-dark);
font-size: 1.25rem;
font-weight: normal;
margin-top: -10px;
}

.faq-list {
max-width: 900px;
margin: 0 auto;
}

.faq-item {
background: #fff;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.faq-question {
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
color: var(--brand-blue);
font-weight: 600;
font-size: 1.1rem;
}

.faq-question i {
color: var(--accent-green);
transition: transform 0.3s ease;
}

.faq-question.active i {
transform: rotate(180deg);
}

.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
padding: 0 20px;
}

.faq-answer.active {
max-height: 500px;
padding: 0 20px 20px;
}

.faq-answer p {
color: var(--text-dark);
line-height: 1.6;
margin: 0;
}

@media (max-width: 768px) {
.faq-section {
padding: 40px 0;
}

.faq-header h2 {
font-size: 2rem;
padding: 0 15px;
}

.faq-question {
font-size: 1rem;
padding: 15px;
}

.faq-answer.active {
padding: 0 15px 15px;
}
}



/* =============================== */
/* Form validation styles */
/* =============================== */

.form-group {
position: relative;
margin-bottom: 1rem;
}

.error-message {
color: #dc3545;
font-size: 0.875rem;
margin-top: 0.25rem;
}

input.error {
border-color: #dc3545;
}

/* Modal styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}

.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 5px;
position: relative;
}

.close-modal {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
position: absolute;
right: 20px;
top: 10px;
}

.close-modal:hover,
.close-modal:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

#modal-title {
margin-top: 0;
color: #162739;
}

#modal-message {
margin-bottom: 0;
color: #333333;
}


/* ============================================================= */
/* Contact Section Styles */
/* ============================================================= */

.contact-section {
    padding: 2rem 1rem;
    background-color: var(--bg-cream);
   /* min-height: calc(100vh - 300px); */ /* Account for nav and footer */
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.contact-container h1 {
    color: var(--brand-blue);
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.contact-container p {
    text-align: center;
    color: var(--text-dark);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.contact-container form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-container .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

.contact-container label {
    color: var(--brand-blue);
    font-weight: 500;
}

.contact-container input,
.contact-container textarea {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    width: 100%;
}

.contact-container input:focus,
.contact-container textarea:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 2px rgba(133, 168, 66, 0.2);
}

.contact-container textarea {
    resize: vertical;
    min-height: 150px;
}

.submit-button {
    background: var(--accent-green);
    color: white;
    padding: 1rem 2.5rem;  /* Increased horizontal padding a bit */
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: center;    /* Centers the button in the flex container */
    display: inline-flex;  /* Allows button to size to content */
    width: auto;          /* Ensures button doesn't stretch */
}

.submit-button:hover {
    background-color: #6f8c37;
}

@media (max-width: 768px) {
    .contact-container {
        padding: 1.5rem;
    }

    .contact-container h1 {
        font-size: 2rem;
    }
}

/* ============================================================= */
/* Contact Form Spinner Styles */
/* ============================================================= */

.spinner {
    margin-left: 8px;
}

.hidden {
    display: none;
}

.submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================= */
/* Contact Modal Styles */
/* ============================================================= */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(22, 39, 57, 0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 2rem;
    border: none;
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.close-modal {
    position: absolute;
    right: 1.5rem;
    top: 1rem;
    color: var(--text-dark);
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: var(--brand-blue);
}

#modal-title {
    color: var(--brand-blue);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

#modal-message {
    color: var(--text-dark);
    line-height: 1.5;
}


/* ============================================================= */
/* Blog Article Styles */
/* ============================================================= */

.blog-article {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    color: var(--text-dark);
}

.blog-header {
    margin-bottom: 2rem;
    text-align: center;
}

.blog-title {
    color: var(--brand-blue);
    font-size: 2.5rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.blog-meta {
    color: #666;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.blog-content {
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Article Typography */
.blog-content p {
    margin-bottom: 1.5rem;
}

.blog-content h2 {
    color: var(--brand-blue);
    font-size: 1.8rem;
    margin: 2.5rem 0 1rem;
}

.blog-content h3 {
    color: var(--brand-blue);
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
}

.blog-content strong {
    color: var(--brand-blue);
    font-weight: 600;
}

/* Lists in articles */
.blog-content ul, 
.blog-content ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.blog-content li {
    margin-bottom: 0.75rem;
}

/* Images in articles */
.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2rem 0;
}

.blog-content .image-caption {
    text-align: center;
    color: #666;
    font-size: 0.9rem;
    margin-top: -1.5rem;
    margin-bottom: 2rem;
}

/* Blockquotes */
.blog-content blockquote {
    margin: 2rem 0;
    padding: 1.5rem;
    border-left: 4px solid var(--accent-green);
    background: var(--bg-cream);
    border-radius: 0 8px 8px 0;
}

.blog-content blockquote p {
    margin: 0;
    font-style: italic;
}

/* Article footer */
.blog-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
}

.author-section {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    background: white;
    padding: 2rem 1.5rem;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 3rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);    /* Add subtle shadow */
}

.author-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.author-info h3 {
    color: var(--brand-blue);  /* Keep brand blue for name */
    margin-bottom: 0.5rem;
}

.author-bio {
    color: var(--text-dark);     /* Dark text for bio */
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
}

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

    .blog-content {
        font-size: 1rem;
    }

    .blog-content h2 {
        font-size: 1.5rem;
    }

    .blog-content h3 {
        font-size: 1.3rem;
    }

    .author-section {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem;

    }

    .author-image {
        margin: 0 auto;
    }
}

/* ============================================================= */
/* Unbroken Inner Circle Styles */
/* ============================================================= */

.unbroken-offer-page {
    padding: 4rem 1rem;
    background: var(--bg-cream);
}

.unbroken-container {
    max-width: 800px;
    margin: 0 auto;
}

.unbroken-header {
    text-align: center;
    margin-bottom: 3rem;
}

.unbroken-header h1 {
    color: var(--brand-blue);
    font-size: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.unbroken-header p {
    font-size: 1.25rem;
    color: var(--text-dark);
}

.unbroken-card {
    background: white;
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.unbroken-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-green);
    border-radius: 4px 4px 0 0;
}

.member-exclusive {
    display: inline-block;
    background: rgba(133, 168, 66, 0.1);
    color: var(--accent-green);
    padding: 0.75rem 1.5rem;
    border-radius: 24px;
    font-weight: 600;
    margin-bottom: 2rem;
}

.unbroken-benefits {
    margin: 2rem 0;
}

.unbroken-benefits h2 {
    color: var(--brand-blue);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.benefits-grid {
    display: grid;
    gap: 1rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-cream);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.benefit-item:hover {
    transform: translateY(-2px);
}

.benefit-item i {
    color: var(--accent-green);
    font-size: 1.2rem;
    padding-top: 0.2rem;
}

.unbroken-pricing {
    text-align: center;
    margin: 2.5rem 0;
    padding: 2rem;
    background: var(--bg-cream);
    border-radius: 8px;
}

.price-tag {
    font-size: 2.5rem;
    color: var(--brand-blue);
    font-weight: bold;
    margin: 1rem 0;
}

.original-price {
    text-decoration: line-through;
    color: #666;
    margin-bottom: 0.5rem;
}

.unbroken-cta {
    display: block;
    width: 100%;
    background: var(--accent-green);
    color: white;
    padding: 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-top: 2rem;
}

.unbroken-cta:hover {
    background: #6f8c37;
    transform: translateY(-2px);
}

.secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
}

.secure-note i {
    color: var(--accent-green);
}

@media (max-width: 768px) {
    .unbroken-offer-page {
        padding: 3rem 1rem;
    }

    .unbroken-header h1 {
        font-size: 2rem;
    }

    .unbroken-card {
        padding: 1.5rem;
    }

    .benefits-grid {
        gap: 0.75rem;
    }

    .benefit-item {
        padding: 0.75rem;
    }

    .price-tag {
        font-size: 2rem;
    }
}