/* ============================================
   CSS Reset & Base Styles
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
}

:root {
    /* Colors matching the app */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    
    --green-600: #16a34a;
    --green-700: #15803d;
    
    --red-600: #dc2626;

    /* Theme variables (from inline styles) */
    --dark: #1f2421;
    --teal: #216869;
    --green-primary: #49a078;
    --green-light: #9cc5a1;
    --light: #dce1de;
    --white: #ffffff;
    --text-primary: #1f2421;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --surface-radius: 16px;
    --card-radius: 12px;
    
    /* Spacing */
    --container-max-width: 1200px;
    --section-padding: 6rem 1.5rem;
    --section-padding-mobile: 4rem 1.5rem;
    
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    color: var(--slate-900);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    overflow-x: hidden;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--slate-900);
}

/* ============================================
   Buttons
   ============================================ */
.btn-primary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--primary-500);
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    background: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: white;
    color: var(--slate-700);
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    border: 2px solid var(--slate-300);
    cursor: pointer;
}

.btn-secondary:hover {
    border-color: var(--slate-400);
    background: var(--slate-50);
}

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

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* ============================================
   Navigation
   ============================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--slate-200);
    z-index: 1000;
    padding: 1rem 0;
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--slate-900);
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: 0.75rem;
    font-size: 1.25rem;
}

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

.nav-links a {
    color: var(--slate-700);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:not(.btn-primary):hover {
    color: var(--primary-600);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu-toggle span {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: var(--slate-700);
    transition: all 0.3s;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

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

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.nav-links.active {
    display: flex !important;
    position: absolute;
    top: 100%;
    right: 1.5rem;
    background: #1f2421;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    border-radius: 0.75rem;
    padding: 0.75rem;
    flex-direction: column;
    gap: 0.5rem;
    width: max-content;
    z-index: 999;
}

.nav-links.active a {
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.nav-links.active a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #9cc5a1;
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    padding: 8rem 0 6rem;
    background: linear-gradient(180deg, var(--slate-900) 0%, var(--dark) 100%);
    margin-top: 4rem;
}

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

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--slate-600);
    margin-bottom: 2rem;
    line-height: 1.6;
}

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

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

.stat {
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-600);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--slate-600);
}

/* App Mockup */
.app-mockup {
    position: relative;
}

.mockup-screen {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--slate-200);
}

.mockup-header {
    margin-bottom: 1.5rem;
}

.mockup-dots {
    display: flex;
    gap: 0.5rem;
}

.mockup-dots span {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--slate-300);
}

.mockup-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mockup-card {
    background: var(--slate-50);
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 2px solid var(--slate-200);
}

.mockup-card-label {
    font-size: 0.75rem;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.mockup-card-value {
    font-size: 2rem;
    font-weight: 300;
    color: var(--slate-900);
}

.mockup-card-value.green {
    color: var(--green-600);
}

.mockup-progress {
    height: 0.5rem;
    background: var(--slate-200);
    border-radius: 0.25rem;
    overflow: hidden;
}

.mockup-progress-bar {
    height: 100%;
    width: 65%;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
    animation: progressGrow 2s ease-out;
}

@keyframes progressGrow {
    from { width: 0; }
    to { width: 65%; }
}

/* ============================================
   Features Section
   ============================================ */
.features {
    padding: var(--section-padding);
}

.section-header {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 4rem;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--slate-600);
}

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

.feature-card {
    padding: 2rem;
    background: white;
    border: 2px solid var(--slate-200);
    border-radius: 1rem;
    transition: all 0.3s;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-300);
}

.feature-icon {
    width: 3rem;
    height: 3rem;
    background: var(--primary-100);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--primary-600);
}

.feature-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.feature-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.feature-description {
    color: var(--slate-600);
    line-height: 1.6;
}

/* ============================================
   Benefits Section
   ============================================ */
.benefits {
    padding: var(--section-padding);
    background: var(--slate-50);
}

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

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.benefit-item {
    display: flex;
    gap: 1rem;
}

.benefit-check {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background: var(--green-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.benefit-check svg {
    width: 1rem;
    height: 1rem;
}

.benefit-text h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.benefit-text p {
    color: var(--slate-600);
}

.stats-card {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--slate-200);
}

.stats-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--slate-200);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-row .stat-label {
    color: var(--slate-600);
    font-size: 0.875rem;
}

.stat-row .stat-value {
    font-weight: 700;
    font-size: 1.25rem;
}

.stat-row .stat-value.green {
    color: var(--green-600);
}

/* ============================================
   Pricing Section
   ============================================ */
.pricing {
    padding: var(--section-padding);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.pricing-card {
    position: relative;
    background: white;
    border: 2px solid var(--slate-200);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.pricing-card.featured {
    border-color: var(--primary-500);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2);
}

.pricing-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-500);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
}

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

.pricing-name {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

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

.price-amount {
    font-size: 3rem;
    font-weight: 700;
    color: var(--slate-900);
}

.price-period {
    font-size: 1rem;
    color: var(--slate-600);
}

.pricing-features {
    list-style: none;
    margin-bottom: 2rem;
}

.pricing-features li {
    padding: 0.75rem 0;
    color: var(--slate-700);
    border-bottom: 1px solid var(--slate-100);
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features li::before {
    content: "✓";
    color: var(--green-600);
    font-weight: 700;
    margin-right: 0.75rem;
}

/* ============================================
   Waitlist Section
   ============================================ */
.waitlist {
    padding: 80px 0;
    background: linear-gradient(180deg, rgba(156, 197, 161, 0.15) 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.waitlist::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: #49a078;
    opacity: 0.05;
    border-radius: 50% 30% 50% 30% / 40% 50% 50% 40%;
    transform: rotate(-15deg);
    z-index: 0;
}

.waitlist .container {
    position: relative;
    z-index: 1;
}

.waitlist .section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 48px;
}

.waitlist .section-title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #1f2421 0%, #216869 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.waitlist .section-subtitle {
    font-size: 1.125rem;
    color: #4a5568;
    line-height: 1.6;
}

.waitlist-content {
    display: flex;
    justify-content: center;
    max-width: 650px;
    margin: 0 auto;
}

.waitlist-card {
    background: #ffffff;
    border: 1px solid rgba(156, 197, 161, 0.3);
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 12px 40px rgba(31, 36, 33, 0.12);
    text-align: center;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.waitlist-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #49a078, #216869);
    z-index: 1;
}

.waitlist-card::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: #9cc5a1;
    opacity: 0.05;
    border-radius: 50%;
    z-index: 0;
}

.waitlist-card > * {
    position: relative;
    z-index: 1;
}

.waitlist-heading {
    font-size: 1.875rem;
    color: #1f2421;
    margin-bottom: 12px;
    font-weight: 700;
}

.waitlist-description {
    color: #4a5568;
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 32px;
}

.waitlist-form {
    margin-bottom: 32px;
}

.form-group {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-direction: column;
}

@media (min-width: 640px) {
    .form-group {
        flex-direction: row;
    }

    .email-input {
        flex: 1;
    }

    .form-group button {
        flex-shrink: 0;
        width: auto;
        min-width: 160px;
    }
}

.email-input {
    width: 100%;
    padding: 14px 20px;
    border: 2px solid rgba(156, 197, 161, 0.3);
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #ffffff;
}

.email-input:focus {
    outline: none;
    border-color: #49a078;
    box-shadow: 0 0 0 4px rgba(73, 160, 120, 0.1);
    transform: translateY(-1px);
}

.email-input:hover {
    border-color: #49a078;
}

.email-input::placeholder {
    color: #94a3b8;
}

.form-message {
    font-size: 0.95rem;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: none;
}

.form-message.success {
    display: block;
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid var(--green-600);
}

.form-message.error {
    display: block;
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid var(--red-600);
}

.waitlist-benefit {
    background: linear-gradient(135deg, rgba(73, 160, 120, 0.08), rgba(156, 197, 161, 0.08));
    border-left: 4px solid #49a078;
    padding: 24px;
    border-radius: 12px;
    text-align: left;
    margin-bottom: 32px;
    transition: all 0.3s ease;
}

.waitlist-benefit:hover {
    background: linear-gradient(135deg, rgba(73, 160, 120, 0.12), rgba(156, 197, 161, 0.12));
    transform: translateX(4px);
}

.benefit-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.waitlist-benefit p {
    color: #1f2421;
    line-height: 1.7;
    font-size: 1rem;
}

.waitlist-stats {
    background: linear-gradient(135deg, rgba(220, 225, 222, 0.5), rgba(156, 197, 161, 0.2));
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(156, 197, 161, 0.3);
}

.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

.stats-label {
    color: #4a5568;
    font-size: 1rem;
    font-weight: 500;
}

.stats-value {
    color: #49a078;
    font-size: 1.5rem;
    font-weight: 700;
}

.stats-note {
    color: #718096;
    font-size: 0.875rem;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .waitlist .section-title {
        font-size: 1.875rem;
    }
    
    .waitlist-card {
        padding: 32px 24px;
    }
    
    .waitlist-heading {
        font-size: 1.5rem;
    }
}
/* Social Proof Band */
.social-proof {
    background: var(--dark);
    padding: 1rem 0;
}

.social-proof-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.proof-item {
    display: flex;
    gap: 0.5rem;
}

.proof-label { color: var(--slate-200); }
.proof-value { font-weight: 700; color: var(--slate-200); }
.proof-divider { width: 1px; height: 20px; background: var(--slate-200); }

/* Why Waitlist */
.why-waitlist { padding: var(--section-padding); }
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}
.why-card {
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}
.waitlist-form.inline { display: flex; gap: 0.75rem; align-items: center; }
.waitlist-form.inline .email-input { flex: 1; }

@media (max-width: 768px) {
    .social-proof-content { flex-direction: column; gap: 1rem; }
    .waitlist-form.inline { flex-direction: column; align-items: stretch; }
}

/* Waitlist Stats */
.waitlist-stats {
    margin-top: 1.5rem;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}

.waitlist-stats .stats-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.waitlist-stats .stats-label {
    color: var(--slate-600);
}

.waitlist-stats .stats-value {
    font-weight: 700;
    color: var(--slate-900);
}

.waitlist-stats .stats-note {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--slate-500);
}

/* ============================================
   CTA Section
   ============================================ */
.cta {
    padding: var(--section-padding);
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    color: white;
}

.cta-content {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto;
}

.cta-title {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1rem;
}

.cta-subtitle {
    font-size: 1.25rem;
    color: var(--primary-100);
    margin-bottom: 2rem;
}

.cta-note {
    margin-top: 1rem;
    color: var(--primary-200);
    font-size: 0.875rem;
}

/* ============================================
   Footer
   ============================================ */
.footer {
    background: var(--slate-900);
    color: var(--slate-400);
    padding: 4rem 0 2rem;
}

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

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: white;
    margin-bottom: 1rem;
}

.footer-logo img {
    width: 60px;
    height: 60px;
}

.footer-description {
    color: var(--slate-400);
    line-height: 1.6;
}

.footer-heading {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: var(--slate-400);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: white;
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--slate-800);
    text-align: center;
    font-size: 0.875rem;
}

/* ============================================
   Mobile Responsive
   ============================================ */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .hero-image {
        order: -1;
    }
    
    .benefits-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: var(--section-padding-mobile);
    }
    
    .nav-links {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .hero {
        padding: 6rem 0 4rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
    }
    
    .hero-cta {
        flex-direction: column;
    }
    
    .hero-stats {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-title {
        font-size: 2rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }

    /* Remove card styling on mobile for better fit */
    .waitlist-card {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 2rem 0;
        box-shadow: none;
    }

    .waitlist-heading {
        font-size: 1.5rem;
    }

    .waitlist-content {
        max-width: 100%;
        padding: 0;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .btn-large {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    /* Hide decorative elements on very small screens for performance */
    .hero::before,
    .hero::after,
    .benefits::before,
    .features::before,
    #faq::before,
    #clarity-not-complexity::before,
    .hero-content::before,
    .hero-content::after,
    .hero-text::before,
    .hero-text::after,
    .hero-cta::before {
        display: none !important;
    }

    /* Reduce gap on mobile */
    .content-with-image {
        gap: 20px;
    }
}

/* ============================================
   Utility Classes (formerly inline styles)
   ============================================ */

/* Responsive image container */
.image-responsive {
    max-width: 100%;
    height: auto;
}

/* Section header centered with margin */
.section-header-centered {
    text-align: center;
    margin-bottom: 48px;
}

/* SEO card with top margin */
.seo-card-spaced {
    margin-top: 20px;
}

/* Stats card with padding override and visible overflow */
.stats-card-custom {
    padding: 32px;
    overflow: visible;
}

/* Image wrapper with scale transform */
.image-wrapper-scaled {
    transform: scale(1.1);
    transform-origin: center;
}

            :root {
                --dark: #1f2421;
                --teal: #216869;
                --green-primary: #49a078;
                --green-light: #9cc5a1;
                --light: #dce1de;
                --white: #ffffff;
                --text-primary: #1f2421;
                --text-secondary: #4a5568;
                --text-muted: #718096;
                --surface-radius: 16px;
                --card-radius: 12px;
            }
            
            /* Base - clean white background for readability */
            body { 
                background: var(--white); 
                color: var(--text-primary);
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                overflow-x: hidden;
            }
            
            html {
                overflow-x: hidden;
            }
            
            /* Nav - light (white) anchoring element */
            .nav {
                background: var(--white);
                border-radius: 0;
                box-shadow: 0 2px 8px rgba(31, 36, 33, 0.04);
                border-bottom: 1px solid rgba(31,36,33,0.04);
            }
            .nav-content { color: var(--text-primary); }
            .nav-links a { color: var(--text-primary); transition: color 0.2s; }
            .nav-links a:hover { color: var(--green-light); }

            .mobile-menu-toggle span { display: block; height: 2px; width: 20px; background: var(--text-primary); margin: 4px 0; }
            
            /* Hero - modern geometric design */
            .hero {
                background: var(--white);
                color: var(--text-primary);
                border-radius: 0;
                padding: 80px 0;
                position: relative;
                overflow: hidden;
                width: 100%;
                max-width: 100vw;
            }
            
            /* Geometric shapes background */
            .hero::before {
                content: '';
                position: absolute;
                top: -10%;
                right: -5%;
                width: 500px;
                height: 500px;
                background: var(--teal);
                opacity: 0.12;
                border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
                transform: rotate(45deg);
                z-index: 0;
            }
            
            .hero::after {
                content: '';
                position: absolute;
                bottom: -15%;
                left: -8%;
                width: 600px;
                height: 600px;
                background: var(--green-primary);
                opacity: 0.1;
                border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
                transform: rotate(-25deg);
                z-index: 0;
            }
            
            @media (max-width: 768px) {
                .hero::before {
                    width: 250px;
                    height: 250px;
                    top: -5%;
                    right: -10%;
                }
                .hero::after {
                    width: 300px;
                    height: 300px;
                    bottom: -10%;
                    left: -15%;
                }
            }
            
            /* Additional geometric accents */
            .hero-content {
                position: relative;
                z-index: 1;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 64px;
                align-items: center;
            }
            @media (max-width: 992px) {
                .hero-content {
                    grid-template-columns: 1fr;
                    gap: 48px;
                }
            }
            
            .hero-content::before {
                content: '';
                position: absolute;
                top: 15%;
                right: 10%;
                width: 120px;
                height: 120px;
                border: 3px solid var(--teal);
                opacity: 0.25;
                transform: rotate(15deg);
                z-index: -1;
            }
            
            .hero-content::after {
                content: '';
                position: absolute;
                bottom: 20%;
                left: 5%;
                width: 80px;
                height: 80px;
                background: var(--green-primary);
                opacity: 0.15;
                border-radius: 50%;
                z-index: -1;
            }
            
            /* Additional geometric shapes */
            .hero-text {
                position: relative;
            }
            
            .hero-text::before {
                content: '';
                position: absolute;
                top: -5%;
                left: -3%;
                width: 200px;
                height: 200px;
                background: var(--teal);
                opacity: 0.06;
                border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%;
                transform: rotate(-15deg);
                z-index: -1;
            }
            
            .hero-text::after {
                content: '';
                position: absolute;
                bottom: 5%;
                right: -5%;
                width: 150px;
                height: 150px;
                border: 2px solid var(--green-primary);
                opacity: 0.2;
                border-radius: 50%;
                z-index: -1;
            }
            
            .hero-cta {
                position: relative;
            }
            
            .hero-cta::before {
                content: '';
                position: absolute;
                top: -40px;
                right: -30px;
                width: 100px;
                height: 100px;
                background: var(--green-primary);
                opacity: 0.08;
                clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
                transform: rotate(25deg);
                z-index: -1;
            }
            
            .hero-title { color: var(--dark); font-weight: 700; position: relative; z-index: 2; }
            .hero-subtitle { color: var(--text-secondary); font-size: 1.125rem; line-height: 1.7; position: relative; z-index: 2; }
            .hero-image {
                position: relative;
                z-index: 1;
            }
            .hero-image .carded-image {
                box-shadow: 0 20px 60px rgba(31, 36, 33, 0.15);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .hero-image .carded-image:hover {
                transform: translateY(-8px);
                box-shadow: 0 24px 80px rgba(31, 36, 33, 0.2);
            }
            .hero-stats { color: var(--text-primary); }
            .hero-stats .stat-value { color: var(--green-primary); font-weight: 700; }
            .hero-stats .stat-label { color: var(--text-muted); font-size: 0.875rem; }
            
            /* Features - white cards on light background */
            .features { 
                background: linear-gradient(180deg, var(--light) 0%, var(--white) 100%); 
                border-radius: 0;
                padding: 80px 0;
                position: relative;
            }
            .features::before {
                content: '';
                position: absolute;
                top: 0;
                right: 10%;
                width: 350px;
                height: 350px;
                background: var(--green-primary);
                opacity: 0.03;
                border-radius: 50%;
                z-index: 0;
            }
            .features .container { position: relative; z-index: 1; }
            .features .section-header {
                text-align: center;
                max-width: 800px;
                margin: 0 auto 56px;
            }
            .features .section-title {
                font-size: 2.5rem;
                line-height: 1.2;
                margin-bottom: 16px;
                color: var(--dark);
            }
            .features .section-subtitle {
                font-size: 1.125rem;
                color: var(--text-secondary);
                line-height: 1.6;
            }
            .section-title { color: var(--dark); font-weight: 700; }
            .section-subtitle { color: var(--text-secondary); }
            
            .features-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 32px;
            }
            .feature-card {
                background: var(--white);
                border: 1px solid rgba(156, 197, 161, 0.2);
                border-radius: var(--card-radius);
                padding: 32px;
                transition: all 0.3s ease;
                box-shadow: 0 4px 12px rgba(31, 36, 33, 0.06);
                position: relative;
                overflow: hidden;
            }
            .feature-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background: linear-gradient(90deg, var(--green-primary), var(--teal));
                transform: scaleX(0);
                transform-origin: left;
                transition: transform 0.3s ease;
            }
            .feature-card:hover::before {
                transform: scaleX(1);
            }
            .feature-card:hover {
                border-color: var(--green-primary);
                box-shadow: 0 12px 32px rgba(73, 160, 120, 0.15);
                transform: translateY(-4px);
            }
            .feature-icon {
                width: 56px;
                height: 56px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, rgba(73, 160, 120, 0.1), rgba(33, 104, 105, 0.1));
                border-radius: 12px;
                margin-bottom: 20px;
                color: var(--green-primary);
                transition: all 0.3s ease;
            }
            .feature-card:hover .feature-icon {
                background: linear-gradient(135deg, var(--green-primary), var(--teal));
                color: var(--white);
                transform: scale(1.1);
            }
            .feature-icon svg {
                width: 28px;
                height: 28px;
            }
            .feature-title {
                color: var(--dark);
                font-weight: 700;
                font-size: 1.25rem;
                margin-bottom: 12px;
                line-height: 1.3;
            }
            .feature-description {
                color: var(--text-secondary);
                line-height: 1.7;
                font-size: 1rem;
            }
            @media (max-width: 768px) {
                .features .section-title { font-size: 1.875rem; }
                .features .section-subtitle { font-size: 1rem; }
                .features-grid { gap: 24px; }
                .feature-card { padding: 24px; }
            }
            
            /* Benefits - subtle green tint background */
            .benefits { 
                background: linear-gradient(180deg, var(--white) 0%, rgba(156, 197, 161, 0.15) 100%);
                border-radius: 0;
                padding: 80px 0;
                position: relative;
                overflow: hidden;
            }
            .benefits::before {
                content: '';
                position: absolute;
                top: 10%;
                left: -5%;
                width: 400px;
                height: 400px;
                background: var(--green-primary);
                opacity: 0.04;
                border-radius: 40% 60% 60% 40% / 50% 40% 60% 50%;
                transform: rotate(20deg);
                z-index: 0;
            }
            .benefits .container { position: relative; z-index: 1; }
            .benefits-content {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 64px;
                align-items: center;
            }
            @media (max-width: 992px) {
                .benefits-content {
                    grid-template-columns: 1fr;
                    gap: 48px;
                }
            }
            .benefits-text h2 { 
                color: var(--dark);
                font-size: 2.5rem;
                line-height: 1.2;
                margin-bottom: 40px;
                background: linear-gradient(135deg, var(--dark) 0%, var(--green-primary) 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            @media (max-width: 768px) {
                .benefits-text h2 { font-size: 1.875rem; }
            }
            .benefits-list {
                display: flex;
                flex-direction: column;
                gap: 24px;
            }
            .benefit-item {
                display: flex;
                gap: 20px;
                padding: 24px;
                background: var(--white);
                border-radius: var(--card-radius);
                border: 1px solid rgba(156, 197, 161, 0.2);
                box-shadow: 0 4px 12px rgba(31, 36, 33, 0.06);
                transition: all 0.3s ease;
                position: relative;
            }
            .benefit-item::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 4px;
                height: 100%;
                background: linear-gradient(180deg, var(--green-primary), var(--teal));
                border-radius: var(--card-radius) 0 0 var(--card-radius);
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            .benefit-item:hover {
                transform: translateX(8px);
                box-shadow: 0 12px 32px rgba(73, 160, 120, 0.15);
                border-color: var(--green-primary);
            }
            .benefit-item:hover::before {
                opacity: 1;
            }
            
            .benefit-check {
                background: linear-gradient(135deg, var(--green-primary), var(--teal));
                color: var(--white);
                border-radius: 50%;
                flex-shrink: 0;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
            }
            .benefit-item:hover .benefit-check {
                transform: scale(1.1) rotate(360deg);
            }
            .benefit-check svg {
                width: 18px;
                height: 18px;
            }
            .benefit-text {
                flex: 1;
            }
            .benefit-item h3 { 
                color: var(--dark); 
                font-weight: 700;
                font-size: 1.25rem;
                margin-bottom: 8px;
                line-height: 1.3;
            }
            .benefit-item p { 
                color: var(--text-secondary);
                line-height: 1.7;
                margin: 0;
            }
            
            .stats-card {
                background: linear-gradient(135deg, var(--dark) 0%, rgba(31, 36, 33, 0.95) 100%);
                color: var(--white);
                border-radius: var(--card-radius);
                box-shadow: 0 12px 40px rgba(31, 36, 33, 0.2);
                padding: 40px;
                position: relative;
                overflow: hidden;
            }
            .stats-card::before {
                content: '';
                position: absolute;
                top: -50%;
                right: -20%;
                width: 300px;
                height: 300px;
                background: var(--green-primary);
                opacity: 0.08;
                border-radius: 50%;
                z-index: 0;
            }
            .stats-card > * { position: relative; z-index: 1; }
            .stats-card h3 { 
                color: var(--white);
                font-size: 1.75rem;
                margin-bottom: 32px;
                font-weight: 700;
            }
            .stat-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
            .stat-row:last-child {
                border-bottom: none;
            }
            .stats-card .stat-label { 
                color: rgba(255,255,255,0.7);
                font-size: 0.9375rem;
            }
            .stats-card .stat-value { 
                color: var(--green-light); 
                font-weight: 700;
                font-size: 1.5rem;
            }
            
            /* Pricing - clear hierarchy */
            .pricing { 
                background: var(--white); 
                border-radius: 0;
                padding: 80px 0;
            }
            
            .pricing-card {
                background: var(--white);
                border: 1px solid var(--light);
                border-radius: var(--card-radius);
                box-shadow: 0 2px 8px rgba(31, 36, 33, 0.04);
            }
            
            .pricing-card.featured {
                background: var(--dark);
                border: 2px solid var(--green-primary);
                color: var(--white);
                box-shadow: 0 12px 40px rgba(31, 36, 33, 0.2);
                transform: scale(1.02);
            }
            .pricing-card.featured .pricing-name { color: var(--green-light); }
            .pricing-card.featured .price-amount { color: var(--white); }
            .pricing-card.featured .price-period { color: rgba(255,255,255,0.7); }
            .pricing-card.featured ul li { color: rgba(255,255,255,0.9); }
            
            .pricing-name { color: var(--text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.875rem; }
            .price-amount { color: var(--dark); font-weight: 700; }
            .price-period { color: var(--text-muted); }
            .pricing-features li { color: var(--text-secondary); }
            
            .pricing-badge {
                background: var(--green-primary);
                color: var(--white);
                border-radius: 999px;
                font-size: 0.75rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }
            
            /* CTA - high contrast, action-focused */
            .cta {
                background: var(--dark);
                border-radius: 0;
                color: var(--white);
                padding: 80px 0;
            }
            .cta-title { color: var(--white); font-weight: 700; }
            .cta-subtitle { color: rgba(255,255,255,0.8); }
            .cta-note { color: rgba(255,255,255,0.6); font-size: 0.875rem; }
            
            /* Footer - dark, consistent with nav */
            .footer {
                background: var(--dark);
                border-radius: 0;
                color: var(--white);
            }
            .footer-logo { color: var(--white); }
            .footer-heading { color: var(--green-light); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; }
            .footer-links a { color: rgba(255,255,255,0.7); transition: color 0.2s; }
            .footer-links a:hover { color: var(--white); }
            .footer-description { color: rgba(255,255,255,0.6); }
            .footer-bottom { color: rgba(255,255,255,0.5); }
            
            /* Buttons - high contrast, accessible 44px+ touch targets */
            .btn-primary {
                background: var(--green-primary);
                border: 2px solid var(--green-primary);
                color: var(--white);
                border-radius: 999px;
                font-weight: 600;
                padding: 12px 24px;
                min-height: 44px;
                transition: all 0.2s ease;
            }
            .btn-primary:hover {
                background: var(--teal);
                border-color: var(--teal);
                color: var(--white);
            }
            
            .btn-secondary {
                background: transparent;
                border: 2px solid var(--green-primary);
                color: var(--green-primary);
                border-radius: 999px;
                font-weight: 600;
                padding: 12px 24px;
                min-height: 44px;
                transition: all 0.2s ease;
            }
            .btn-secondary:hover {
                background: var(--green-primary);
                color: var(--white);
            }
            
            /* On dark backgrounds, adjust secondary button */
            .cta .btn-secondary {
                border-color: var(--white);
                color: var(--white);
            }
            .cta .btn-secondary:hover {
                background: var(--white);
                color: var(--dark);
            }
            
            /* CTA primary button needs more contrast on dark */
            .cta .btn-primary {
                background: var(--green-light);
                border-color: var(--green-light);
                color: var(--dark);
            }
            .cta .btn-primary:hover {
                background: var(--white);
                border-color: var(--white);
            }
            
            /* App mockup */
            .mockup-screen { 
                background: var(--white); 
                border-radius: var(--card-radius);
                border: 1px solid var(--light);
                box-shadow: 0 20px 60px rgba(31, 36, 33, 0.15);
            }
            .mockup-header { background: var(--light); }
            .mockup-card { 
                background: var(--light); 
                color: var(--dark); 
                border-radius: 8px;
            }
            .mockup-card-label { color: var(--text-muted); font-size: 0.75rem; }
            .mockup-card-value { color: var(--dark); font-weight: 700; }
            .mockup-card-value.green { color: var(--green-primary); }
            .mockup-progress { background: var(--light); border-radius: 4px; }
            .mockup-progress-bar {
                background: linear-gradient(90deg, var(--green-primary), var(--green-light));
                border-radius: 4px;
            }
            
            .logo { height: 48px; width: auto; }

            /* SEO content sections */
            .seo-section { background: var(--white); padding: 72px 0; }
            .seo-section.alt { background: var(--light); }
            .seo-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
            .seo-card { background: var(--white); border: 1px solid rgba(156,197,161,0.35); border-radius: var(--card-radius); padding: 24px; box-shadow: 0 2px 10px rgba(31,36,33,0.06); }
            .seo-card h3 { color: var(--dark); font-weight: 700; margin-bottom: 12px; }
            .seo-card p { color: var(--text-secondary); line-height: 1.6; }
            .seo-list { margin: 12px 0 0 16px; color: var(--text-secondary); line-height: 1.6; }
            .seo-list li { margin-bottom: 6px; }
            .seo-keywords { font-weight: 600; color: var(--green-primary); }
            /* Modern alternating image layouts */
            .content-with-image {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 48px;
                align-items: center;
                margin: 48px 0;
            }
            .content-with-image.reverse {
                direction: rtl;
            }
            .content-with-image.reverse > * {
                direction: ltr;
            }
            .image-wrapper {
                position: relative;
                max-width: 600px;
                margin: 0 auto;
            }
            .carded-image { 
                position: relative;
                border-radius: var(--card-radius);
                overflow: hidden;
            }
            .carded-image::before {
                content: '';
                position: absolute;
                top: -8px;
                left: -8px;
                right: -8px;
                bottom: -8px;
                background: linear-gradient(135deg, var(--green-primary), var(--green-light));
                opacity: 0.1;
                border-radius: calc(var(--card-radius) + 6px);
                z-index: 0;
            }
            .carded-image > img { 
                position: relative; 
                z-index: 1;
                width: 100%;
                height: auto;
                border-radius: var(--card-radius);
                box-shadow: 0 8px 24px rgba(31, 36, 33, 0.12);
                display: block;
            }
            .image-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 32px;
                margin: 40px 0;
                max-width: 1000px;
                margin-left: auto;
                margin-right: auto;
            }
            @media (max-width: 992px) {
                .content-with-image {
                    grid-template-columns: 1fr;
                    gap: 32px;
                }
                .content-with-image.reverse {
                    direction: ltr;
                }
                .image-grid {
                    grid-template-columns: 1fr;
                    gap: 24px;
                }
            }
            
            /* Enhanced Why Forecast section */
            #why-forecast-families { 
                background: linear-gradient(135deg, var(--white) 0%, rgba(156, 197, 161, 0.08) 100%);
                position: relative;
            }
            #why-forecast-families::before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 300px;
                height: 300px;
                background: var(--green-primary);
                opacity: 0.05;
                border-radius: 50% 0% 0% 50%;
                z-index: 0;
            }
            #why-forecast-families .container { position: relative; z-index: 1; }
            #why-forecast-families .section-content {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 48px;
                align-items: center;
            }
            #why-forecast-families .content-wrapper {
                position: relative;
                z-index: 1;
            }
            #why-forecast-families .content-heading {
                font-size: 1.75rem;
                color: var(--teal);
                margin-bottom: 24px;
                font-weight: 700;
            }
            #why-forecast-families .section-image {
                position: relative;
                z-index: 1;
            }
            #why-forecast-families .section-image img {
                width: 100%;
                height: auto;
                border-radius: var(--card-radius);
                box-shadow: 0 12px 40px rgba(31, 36, 33, 0.15);
            }
            @media (max-width: 992px) {
                #why-forecast-families .section-content {
                    grid-template-columns: 1fr;
                    gap: 32px;
                }
            }
            #why-forecast-families .section-header {
                text-align: center;
                max-width: 800px;
                margin: 0 auto 48px;
            }
            #why-forecast-families .section-title {
                font-size: 2.5rem;
                line-height: 1.2;
                margin-bottom: 16px;
                background: linear-gradient(135deg, var(--dark) 0%, var(--teal) 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            #why-forecast-families .section-subtitle {
                font-size: 1.25rem;
                color: var(--text-secondary);
            }
            #why-forecast-families .seo-list {
                position: relative;
                z-index: 1;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            #why-forecast-families .seo-list li {
                color: var(--text-primary);
                font-size: 1.125rem;
                line-height: 1.8;
                margin-bottom: 16px;
                padding-left: 36px;
                position: relative;
            }
            #why-forecast-families .seo-list li::before {
                content: '✓';
                position: absolute;
                left: 0;
                top: 0;
                width: 24px;
                height: 24px;
                background: var(--green-primary);
                color: var(--white);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                font-size: 0.875rem;
            }
            
            @media (max-width: 768px) {
                #why-forecast-families .section-title { font-size: 1.875rem; }
                #why-forecast-families .section-subtitle { font-size: 1.125rem; }
                #why-forecast-families .content-heading { font-size: 1.5rem; }
                #why-forecast-families .seo-list li { font-size: 1rem; }
            }
            
            /* Enhanced Clarity Not Complexity section */
            #clarity-not-complexity {
                background: linear-gradient(135deg, rgba(220, 225, 222, 0.3) 0%, var(--white) 100%);
                position: relative;
            }
            #clarity-not-complexity::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 400px;
                height: 400px;
                background: var(--teal);
                opacity: 0.04;
                border-radius: 0% 50% 50% 0%;
                z-index: 0;
            }
            #clarity-not-complexity .container { position: relative; z-index: 1; }
            #clarity-not-complexity .section-image {
                margin: 48px auto 0;
                max-width: 900px;
                position: relative;
                z-index: 1;
            }
            #clarity-not-complexity .section-image img {
                width: 100%;
                height: auto;
                border-radius: var(--card-radius);
                box-shadow: 0 12px 40px rgba(31, 36, 33, 0.15);
            }
            #clarity-not-complexity .section-header {
                text-align: center;
                max-width: 900px;
                margin: 0 auto 56px;
            }
            #clarity-not-complexity .section-title {
                font-size: 2.5rem;
                line-height: 1.2;
                margin-bottom: 16px;
                color: var(--dark);
            }
            #clarity-not-complexity .section-subtitle {
                font-size: 1.25rem;
                color: var(--text-secondary);
                font-weight: 500;
            }
            #clarity-not-complexity .seo-columns {
                gap: 32px;
            }
            #clarity-not-complexity .seo-card {
                background: var(--white);
                border: 1px solid var(--light);
                border-left: 4px solid var(--green-primary);
                border-radius: var(--card-radius);
                padding: 32px;
                box-shadow: 0 8px 24px rgba(31, 36, 33, 0.08);
                transition: all 0.3s ease;
                position: relative;
            }
            #clarity-not-complexity .seo-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 32px rgba(73, 160, 120, 0.15);
                border-left-color: var(--teal);
            }
            #clarity-not-complexity .seo-card::after {
                content: '';
                position: absolute;
                top: 24px;
                right: 24px;
                width: 40px;
                height: 40px;
                background: var(--green-light);
                opacity: 0.15;
                border-radius: 50%;
                transition: all 0.3s ease;
            }
            #clarity-not-complexity .seo-card:hover::after {
                opacity: 0.25;
                transform: scale(1.2);
            }
            #clarity-not-complexity .seo-card h3 {
                font-size: 1.375rem;
                color: var(--dark);
                margin-bottom: 16px;
                font-weight: 700;
                position: relative;
                z-index: 1;
            }
            #clarity-not-complexity .seo-card p {
                font-size: 1.0625rem;
                line-height: 1.7;
                color: var(--text-secondary);
                position: relative;
                z-index: 1;
            }
            
            @media (max-width: 768px) {
                #clarity-not-complexity .section-title { font-size: 1.875rem; }
                #clarity-not-complexity .section-subtitle { font-size: 1.125rem; }
                #clarity-not-complexity .seo-card { padding: 24px; }
                #clarity-not-complexity .seo-columns { gap: 20px; }
            }

            /* FAQ block */
            #faq {
                background: linear-gradient(135deg, var(--white) 0%, rgba(156, 197, 161, 0.08) 100%);
                border-radius: 0;
                padding: 80px 0;
                position: relative;
                overflow: hidden;
            }
            #faq::before {
                content: '';
                position: absolute;
                top: -5%;
                left: -6%;
                width: 420px;
                height: 420px;
                background: var(--teal);
                opacity: 0.04;
                border-radius: 50% 40% 60% 40% / 50% 60% 40% 50%;
                transform: rotate(12deg);
                z-index: 0;
            }
            #faq .container { position: relative; z-index: 1; }
            #faq .section-header {
                text-align: center;
                max-width: 900px;
                margin: 0 auto 56px;
            }
            #faq .section-title {
                font-size: 2.5rem;
                line-height: 1.2;
                margin-bottom: 16px;
                background: linear-gradient(135deg, var(--dark) 0%, var(--teal) 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            #faq .section-subtitle {
                font-size: 1.25rem;
                color: var(--text-secondary);
                font-weight: 500;
            }
            .faq-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 32px;
            }
            .faq-item {
                background: var(--white);
                border: 1px solid var(--light);
                border-left: 4px solid var(--green-primary);
                border-radius: var(--card-radius);
                padding: 28px;
                box-shadow: 0 8px 24px rgba(31, 36, 33, 0.08);
                transition: all 0.3s ease;
                position: relative;
            }
            .faq-item:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 32px rgba(73, 160, 120, 0.15);
                border-left-color: var(--teal);
            }
            .faq-item::after {
                content: '';
                position: absolute;
                top: 24px;
                right: 24px;
                width: 40px;
                height: 40px;
                background: var(--green-light);
                opacity: 0.15;
                border-radius: 50%;
                transition: all 0.3s ease;
            }
            .faq-item:hover::after {
                opacity: 0.25;
                transform: scale(1.15);
            }
            .faq-item h3 {
                margin: 0 0 12px;
                color: var(--dark);
                font-weight: 700;
                font-size: 1.25rem;
                line-height: 1.3;
            }
            .faq-item p {
                margin: 0;
                color: var(--text-secondary);
                line-height: 1.7;
                font-size: 1.0625rem;
            }
            @media (max-width: 768px) {
                #faq .section-title { font-size: 1.875rem; }
                #faq .section-subtitle { font-size: 1.125rem; }
                .faq-grid { gap: 20px; }
                .faq-item { padding: 24px; }
            }
            
            /* Mobile-specific adjustments */
            @media (max-width: 768px) {
                .hero { padding: 60px 0; }
                .features, .benefits, .pricing, .cta { padding: 60px 0; }
                .btn-primary, .btn-secondary { 
                    padding: 14px 28px;
                    min-height: 48px;
                    font-size: 1rem;
                }
                .content-with-image {
                    gap: 20px;
                }
            }

            /* Prevent layout shifts and horizontal scroll */
            * {
                max-width: 100%;
            }
            
            .container {
                overflow-x: hidden;
            }
            
            /* Optimize large decorative elements on mobile */
            @media (max-width: 480px) {
                .hero::before,
                .hero::after,
                .benefits::before,
                .features::before,
                #faq::before,
                #clarity-not-complexity::before {
                    display: none;
                }
                
                .hero-content::before,
                .hero-content::after,
                .hero-text::before,
                .hero-text::after,
                .hero-cta::before {
                    display: none;
                }
            }