/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colors */
    --primary-color: #2563eb; /* Blue 600 */
    --primary-hover: #1d4ed8; /* Blue 700 */
    --primary-light: #dbeafe; /* Blue 100 */
    --primary-dark: #1e40af; /* Blue 800 */
    --secondary-color: #64748b; /* Slate 500 */
    --accent-color: #f59e0b; /* Amber 500 */
    --success-color: #10b981; /* Emerald 500 */
    --error-color: #ef4444; /* Red 500 */
    --warning-color: #f59e0b; /* Amber 500 */
    
    /* Neutrals */
    --white: #ffffff;
    --gray-50: #f8fafc; /* Slate 50 */
    --gray-100: #f1f5f9; /* Slate 100 */
    --gray-200: #e2e8f0; /* Slate 200 */
    --gray-300: #cbd5e1; /* Slate 300 */
    --gray-400: #94a3b8; /* Slate 400 */
    --gray-500: #64748b; /* Slate 500 */
    --gray-600: #475569; /* Slate 600 */
    --gray-700: #334155; /* Slate 700 */
    --gray-800: #1e293b; /* Slate 800 */
    --gray-900: #0f172a; /* Slate 900 */
    
    /* Typography */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    
    /* Font Sizes */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem; /* 36px */
    --text-5xl: 3rem; /* 48px */
    --text-6xl: 3.75rem; /* 60px */
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    
    /* Layout */
    --max-width-sm: 640px;
    --max-width-md: 768px;
    --max-width-lg: 1024px;
    --max-width-xl: 1280px;
    --max-width-2xl: 1536px;
}

/* Base Typography */
html {
    font-family: var(--font-family-sans);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--white);
    color: var(--gray-900);
    font-size: var(--text-base);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Visually Hidden Utility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -40px; /* Increased to ensure it's off-screen */
    left: 6px;
    background: var(--primary-color);
    color: var(--white);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    border-radius: var(--radius-md);
    z-index: 10000; /* Ensure it's above everything */
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 6px;
}

/* Header */
.header {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 500; /* Ensure header is above most content */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Safari support */
}

.nav {
    padding: var(--space-4) 0;
}

.nav-container {
    max-width: var(--max-width-xl);
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0px;
}

.brand-icon {
    display: inline-flex;
    align-items: center;
}

.brand-icon svg {
    width: 48px;
    height: 48px;
    fill: url(#brandGradient);
}

.brand-icon svg defs {
    display: block;
}

.brand-text {
    font-size: var(--text-2xl);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    letter-spacing: -0.02em;
}

.nav-menu {
    display: flex;
    gap: var(--space-8);
    align-items: center;
}

.nav-link {
    color: var(--gray-700);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
    position: relative;
    padding: var(--space-1) 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width var(--transition-normal);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--primary-color);
}

.nav-link:hover::after,
.nav-link:focus::after {
    width: 100%;
}

.nav-link:focus {
    outline: none; /* Custom focus handled by ::after */
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    z-index: 1001; /* Ensure toggle is above mobile menu */
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hamburger {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--gray-700);
    position: relative;
    transition: background var(--transition-fast) 0.2s; /* Delay background transition */
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--gray-700);
    transition: transform var(--transition-fast), top var(--transition-fast) 0.1s;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    top: 8px;
}

/* Active state for hamburger menu */
.nav-open .hamburger {
    background: transparent; /* Make middle line disappear */
}
.nav-open .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}
.nav-open .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}


/* Main Content */
.main {
    min-height: calc(100vh - 80px); /* Adjust if header height changes */
}

/* New Hero / Call Initiator Section */
.hero-call-initiator {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--primary-light) 100%);
    padding: var(--space-8) 0 var(--space-6); /* Reduced padding significantly */
    text-align: center;
    min-height: calc(100vh - 80px); /* Ensure it fits in viewport minus header */
    display: flex;
    align-items: center;
}

.hero-call-initiator-container {
    max-width: var(--max-width-lg); /* Slightly wider for form */
    margin: 0 auto;
    padding: 0 var(--space-4);
    width: 100%;
}

.hero-call-initiator-content {
    margin-bottom: var(--space-6); /* Reduced margin */
}

.hero-call-initiator .hero-title {
    font-size: var(--text-5xl); /* Increased back to text-5xl for better prominence */
    font-weight: 800;
    line-height: 1.1; /* Tighter line height */
    color: var(--gray-900);
    margin-bottom: var(--space-3); /* Reduced margin */
}

.hero-call-initiator .hero-title .highlight {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--primary-color); /* Fallback for browsers that don't support background-clip */
}

.hero-call-initiator .hero-description {
    font-size: var(--text-base); /* Reduced from text-lg */
    color: var(--gray-700); /* Darker for better contrast */
    margin-bottom: var(--space-6); /* Reduced margin */
    max-width: 600px; /* Slightly narrower */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5; /* Tighter line height */
}

/* Call Form Styles (within hero) */
.call-form {
    background: var(--white);
    padding: var(--space-6) var(--space-5); /* Reduced padding */
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-200);
    margin-bottom: var(--space-6); /* Reduced margin */
    text-align: left; /* Align form content left */
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6); /* Reduced gap */
    margin-bottom: var(--space-6); /* Reduced margin */
}

.form-section {
    /* Removed individual section background/border, form itself has it */
}

.form-section-title { /* Now visually hidden, but keep for structure */
    /* Styles removed as it's visually hidden */
}

.form-group {
    margin-bottom: var(--space-4); /* Reduced margin */
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-weight: 600; /* Bolder labels */
    color: var(--gray-800); /* Darker labels */
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
}

.form-input,
.form-select {
    width: 100%;
    padding: var(--space-2) var(--space-3); /* Reduced padding */
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm); /* Slightly smaller text */
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--gray-50); /* Slight background for inputs */
}

.form-input::placeholder {
    color: var(--gray-400);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
    background: var(--white);
}

.form-input:hover,
.form-select:hover {
    border-color: var(--gray-400);
}


.form-input.error-field, /* Class to add via JS for error */
.form-select.error-field {
    border-color: var(--error-color);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); /* Light red shadow */
}


.form-help {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-top: var(--space-1);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--error-color);
    margin-top: var(--space-1);
    display: none; /* Hidden by default, shown by JS */
    font-weight: 500;
}

.form-error.show {
    display: block;
}

.form-actions {
    text-align: center;
    margin-top: var(--space-3); /* Reduced margin */
}

.cta-subtext {
    color: var(--gray-500);
    font-size: var(--text-sm);
    margin-top: var(--space-3);
}

/* App Download Promo Section */
.app-download-promo {
    margin-top: var(--space-12);
    padding: var(--space-8);
    background-color: var(--primary-light); /* Light background to stand out */
    border-radius: var(--radius-xl);
    text-align: center;
    border: 1px solid var(--primary-color); /* Subtle border */
}

.app-promo-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: var(--space-3);
}

.app-promo-description {
    font-size: var(--text-base);
    color: var(--gray-700);
    margin-bottom: var(--space-6);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.app-store-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.app-store-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 600;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    border: 1px solid transparent;
}

.app-store-button svg {
    width: 20px; /* Adjust icon size as needed */
    height: 20px;
}

.app-store-button.apple {
    background-color: #000000; /* Apple's typical black */
    color: var(--white);
    border-color: #000000;
}

.app-store-button.apple:hover {
    background-color: #333333;
    transform: scale(1.03);
}

.app-store-button.google {
    background-color: var(--white);
    color: var(--gray-800);
    border-color: var(--gray-300); /* Google's typical white with border */
}

.app-store-button.google:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
    transform: scale(1.03);
}


/* How It Works Section (Relocated and Restyled) */
.how-it-works {
    padding: var(--space-16) 0; /* Reduced padding */
    background: var(--white);
}

.how-it-works-container {
    max-width: var(--max-width-xl);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.how-it-works .section-title {
    margin-bottom: var(--space-8); /* More space after title */
}

.section-title.center-title {
    text-align: center;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-8);
}

.step-card {
    background: var(--gray-50);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    text-align: center;
    border: 1px solid var(--gray-200);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-color), #4f46e5);
    color: var(--white);
    font-size: var(--text-xl);
    font-weight: 700;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-md);
}

/* Remove old .step-icon and .step-number styles if they are no longer used elsewhere,
   or adjust if they are still needed for other elements.
   For now, I'll comment them out as the new structure replaces them. */

/*
.step-icon {
    color: var(--primary-color);
    margin-bottom: var(--space-4);
    display: inline-block;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--primary-color);
    color: var(--white);
    font-size: var(--text-xl);
    font-weight: 700;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-md);
}
*/

.step-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.step-description {
    color: var(--gray-600);
    font-size: var(--text-base);
    line-height: 1.6;
}


/* Features Section */
.features {
    padding: var(--space-16) 0; /* Increased padding to ensure content isn't cut off */
    background: var(--gray-100); /* Slightly different background */
}

.features-container {
    max-width: var(--max-width-xl);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.features .section-title {
    margin-bottom: var(--space-8);
}
.features .section-subtitle { /* Added for consistency */
    font-size: var(--text-lg);
    color: var(--gray-600);
    text-align: center;
    margin-top: calc(-1 * var(--space-6)); /* Pull up under title */
    margin-bottom: var(--space-12);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6); /* Reduced gap for tighter layout */
    /* margin-top: var(--space-12); Removed, using subtitle margin */
}

.feature-card {
    background: var(--white);
    padding: var(--space-6); /* Reduced padding for more compact cards */
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.feature-icon {
    /* font-size: var(--text-4xl); Fallback if SVG fails, or for other icons */
    margin-bottom: var(--space-3); /* Reduced margin for tighter layout */
    color: var(--gray-800); /* Set default color for monochrome SVGs */
    display: inline-flex; /* Helps with alignment */
    align-items: center;
    justify-content: center;
    width: 40px; /* Slightly smaller icons for more compact layout */
    height: 40px;
}

.feature-svg-icon {
    display: block; /* Ensure it behaves as a block element */
    width: 100%;
    height: 100%;
    /* stroke-width: 1.5; Let inline SVG attribute handle this if present */
    stroke: currentColor;
    fill: none;
}

.feature-card:hover .feature-icon {
    color: var(--primary-color); /* Change icon color on card hover */
}

.feature-title {
    font-size: var(--text-lg); /* Slightly smaller title for more compact layout */
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2); /* Reduced margin */
}

.feature-description {
    color: var(--gray-600);
    line-height: 1.5; /* Slightly tighter line height */
    font-size: var(--text-sm); /* Smaller text for more compact layout */
}

.app-feature-teaser {
    display: block; /* Ensure it takes its own line or use inline-block if preferred */
    font-size: var(--text-xs);
    color: var(--primary-color); /* Make it stand out */
    font-weight: 500;
    margin-top: var(--space-2);
}

/* Pricing Section (New) */
.pricing {
    padding: var(--space-16) 0;
    background: var(--white);
}

.pricing-container {
    max-width: var(--max-width-lg); /* Consistent width */
    margin: 0 auto;
    padding: 0 var(--space-4);
    text-align: center;
}

.pricing .section-title {
    margin-bottom: var(--space-2);
}

.pricing .section-subtitle {
    font-size: var(--text-lg);
    color: var(--gray-600);
    margin-bottom: var(--space-10);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-card {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    position: relative;
    transition: all 0.3s ease;
    text-align: left;
    min-height: 520px;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
}

.pricing-card.featured {
    border-color: var(--primary-color);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
}

.pricing-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    z-index: 10;
}

.pricing-header {
    margin-bottom: var(--space-4);
}

.pricing-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.pricing-price {
    margin-bottom: var(--space-2);
}

.price-amount {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--primary-color);
}

.price-period {
    font-size: var(--text-base);
    color: var(--gray-600);
    font-weight: 500;
}

.pricing-description {
    color: var(--gray-600);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6) 0;
    flex-grow: 1;
}

.pricing-features li {
    padding: var(--space-1) 0;
    color: var(--gray-700);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--gray-100);
    line-height: 1.4;
}

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

.pricing-cta {
    width: 100%;
    justify-content: center;
    margin-top: auto;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
}

.pricing-faq {
    background: var(--gray-50);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-top: var(--space-10);
}

.pricing-faq h4 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-6);
    text-align: center;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.faq-item h5 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.faq-item p {
    color: var(--gray-600);
    font-size: var(--text-base);
    line-height: 1.6;
}

.current-offering-note {
    font-size: var(--text-base);
    color: var(--gray-700);
    margin-top: var(--space-8);
}
.current-offering-note .highlight {
    color: var(--primary-color);
    font-weight: 600;
}


/* Languages Section */
.languages {
    padding: var(--space-16) 0; /* Reduced padding */
    background: var(--gray-50); /* Match features section */
}

.languages-container {
    max-width: var(--max-width-xl);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.languages .section-title {
    margin-bottom: var(--space-2);
}
.languages .section-description { /* Reusing this class */
    font-size: var(--text-lg);
    color: var(--gray-600);
    text-align: center;
    margin-bottom: var(--space-12);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


.languages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    /* margin-top: var(--space-12); Removed, using description margin */
}

.languages-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* More compact columns */
    gap: var(--space-3); /* Reduced gap */
}

.language-item {
    display: flex;
    align-items: center;
    gap: var(--space-2); /* Reduced gap inside item */
    padding: var(--space-3); /* Reduced padding */
    background: var(--white); /* Changed from gray-50 */
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.language-item:hover {
    background: var(--primary-light);
    transform: scale(1.03);
}

.language-flag {
    font-size: var(--text-2xl);
}

.language-name {
    font-weight: 500;
    color: var(--gray-900);
}

.languages-note {
    margin-top: var(--space-12);
    text-align: center;
    padding: var(--space-6);
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.languages-note p {
    color: var(--gray-600);
    font-size: var(--text-base);
    margin: 0;
}

.languages-note strong {
    color: var(--primary-color);
    font-weight: 600;
}

/* Footer */
.footer {
    background: var(--gray-900);
    color: var(--gray-300);
    padding: var(--space-16) 0 var(--space-8);
}

.footer-container {
    max-width: var(--max-width-xl);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-16);
    margin-bottom: var(--space-12);
}

.footer-brand {
    max-width: 300px;
}

.footer-text-logo {
    font-size: var(--text-xl);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: 0px;
    letter-spacing: -0.02em;
}

.footer-brand-icon {
    display: inline-flex;
    align-items: center;
}

.footer-brand-icon svg {
    width: 42px;
    height: 42px;
    fill: url(#footerBrandGradient);
}

.footer-brand-icon svg defs {
    display: block;
}

.footer-tagline {
    color: var(--gray-400);
    line-height: 1.6;
}

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

.footer-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--space-4);
}

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

.footer-list li {
    margin-bottom: var(--space-2);
}

.footer-link {
    color: var(--gray-400);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-link:hover,
.footer-link:focus-visible {
    color: var(--white);
    text-decoration: underline;
}

.footer-link:focus {
    outline: none;
}


.footer-bottom {
    border-top: 1px solid var(--gray-700);
    padding-top: var(--space-8);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-copyright {
    color: var(--gray-400);
    font-size: var(--text-sm);
}
.footer-attribution {
    color: var(--gray-500);
    font-size: var(--text-xs);
}
.footer-attribution a {
    color: var(--gray-400);
    text-decoration: underline;
}
.footer-attribution a:hover {
    color: var(--white);
}


/* Buttons (General) */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-lg);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    line-height: 1; /* Ensure consistent height */
}

.cta-button.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.cta-button.primary:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color));
    transform: translateY(-2px); /* Subtle lift */
    box-shadow: var(--shadow-lg);
}

.cta-button.primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--primary-light); /* More prominent focus */
}

.cta-button.primary:active {
    transform: translateY(0);
    background: var(--primary-dark);
}

.cta-button:disabled,
.cta-button.loading { /* Apply disabled styles when loading too */
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-loading {
    display: none; /* Hidden by default */
}

.cta-button.loading .btn-text {
    visibility: hidden; /* Hide text but keep space */
}

.cta-button.loading .btn-loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: absolute; /* Overlay on button */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner {
    animation: spin 1s linear infinite;
    width: 1.2em; /* Relative to button font size */
    height: 1.2em;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Call Status */
.call-status {
    margin-top: var(--space-6);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
    display: none; /* Hidden by default */
    font-weight: 500;
}

.call-status.show {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


.call-status.success {
    background: var(--success-color);
    color: var(--white);
}

.call-status.error {
    background: var(--error-color);
    color: var(--white);
}

.call-status.info {
    background: var(--primary-light);
    color: var(--primary-dark); /* Darker for better contrast */
    border: 1px solid var(--primary-color);
}


/* Responsive Design */
@media (max-width: 1024px) { /* Tablet and below */
    .hero-call-initiator {
        padding: var(--space-12) 0 var(--space-10);
    }
    .hero-call-initiator .hero-title {
        font-size: var(--text-4xl);
    }
    .hero-call-initiator .hero-description {
        font-size: var(--text-base); /* Slightly smaller */
    }

    .form-grid {
        grid-template-columns: 1fr; /* Stack form sections */
        gap: var(--space-6);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-12);
        text-align: center; /* Center footer brand on mobile */
    }
    .footer-brand {
        margin: 0 auto; /* Center brand */
    }
    
    .footer-links {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* More flexible footer links */
        text-align: left; /* Align footer links left */
    }
}

/* Medium screens (tablets and smaller desktops) */
@media (max-width: 1200px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
        max-width: 900px;
    }
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr; /* Stack pricing cards on mobile */
        gap: var(--space-6);
    }
    
    .pricing-card {
        min-height: auto;
        padding: var(--space-6);
    }
    
    .pricing-title {
        font-size: var(--text-2xl);
    }
    
    .price-amount {
        font-size: var(--text-4xl);
    }
    
    .pricing-description,
    .pricing-features li {
        font-size: var(--text-base);
    }
    
    .pricing-cta {
        font-size: var(--text-base);
        padding: var(--space-4) var(--space-6);
    }
    
    .faq-grid {
        grid-template-columns: 1fr; /* Stack FAQ items on mobile */
        gap: var(--space-4);
    }
}

@media (max-width: 768px) { /* Mobile */
    .nav-menu {
        display: none; /* Hide desktop menu */
        /* Mobile menu will be absolutely positioned */
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        padding: var(--space-4) 0;
        box-shadow: var(--shadow-lg);
        border-top: 1px solid var(--gray-200);
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        transition: transform var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
    }
    .nav-menu.nav-active { /* Class added by JS to show menu */
        display: flex;
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .nav-menu .nav-link {
        padding: var(--space-3) var(--space-4);
        width: 100%;
        text-align: center;
    }
    .nav-menu .nav-link::after { /* Remove underline for mobile nav items */
        display: none;
    }
    
    .nav-toggle {
        display: block;
    }
    
    .hero-call-initiator {
        padding: var(--space-10) 0 var(--space-8);
    }
    .hero-call-initiator .hero-title {
        font-size: var(--text-3xl); /* Further reduce for mobile */
    }
    
    .section-title {
        font-size: var(--text-3xl);
    }
    
    .how-it-works,
    .features,
    .pricing,
    .languages {
        padding: var(--space-12) 0; /* Consistent padding for sections */
    }
    
    .call-form {
        padding: var(--space-6);
    }
        
    .features-grid, .steps-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .languages-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust for smaller lang items */
        gap: var(--space-4);
    }
    .language-item {
        padding: var(--space-3);
    }
    .language-flag {
        font-size: var(--text-xl);
    }
    .language-name {
        font-size: var(--text-sm);
    }

    .notify-form {
        flex-direction: column;
        align-items: stretch; /* Make button full width */
    }
    .notify-form .cta-button.secondary {
        width: 100%;
    }
}

@media (max-width: 480px) { /* Small Mobile */
    .hero-call-initiator .hero-title {
        font-size: var(--text-2xl);
    }
    .hero-call-initiator .hero-description {
        font-size: var(--text-sm);
    }
    
    .section-title {
        font-size: var(--text-2xl);
    }
    
    .cta-button {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-base);
    }
        
    .languages-grid {
        grid-template-columns: 1fr; /* Stack languages on very small screens */
    }
}

/* Print Styles */
@media print {
    .header,
    .footer,
    .hero-call-initiator .call-form, /* Don't print form */
    .pricing .notify-form { /* Don't print notify form */
        display: none;
    }
    
    .hero-call-initiator {
        background: none;
        padding: var(--space-8) 0;
        text-align: left;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important; /* Remove transition delays */
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* High Contrast Mode (Basic example, can be expanded) */
@media (prefers-contrast: high) {
    :root {
        --gray-50: #000000;
        --gray-100: #000000;
        --gray-200: #000000;
        --gray-300: #000000;
        --gray-400: #ffffff; /* Invert for text on dark */
        --gray-500: #ffffff;
        --gray-600: #ffffff;
        --gray-700: #ffffff;
        --gray-800: #ffffff;
        --gray-900: #ffffff;
        --white: #000000;
        --primary-color: #ffff00; /* Example: Yellow for high contrast */
        --primary-light: #000000;
    }
    .header, .call-form, .step-card, .feature-card, .pricing-card, .language-item {
        border: 2px solid #ffffff;
    }
    .footer {
        border-top: 2px solid #ffffff;
    }
}

/* Focus Visible Polyfill (if not using a JS polyfill, this provides basic support) */
/* Modern browsers support :focus-visible natively */
*:focus:not(:focus-visible) {
  outline: none;
}
*:focus-visible {
  outline: 3px solid var(--primary-color); /* Default focus style */
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.3); /* Softer glow */
}
/* Remove default outline for elements that get custom focus styles */
.nav-link:focus-visible,
.cta-button:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.nav-toggle:focus-visible {
    outline: none; /* Already have custom focus or will get it */
}
.form-input:focus-visible,
.form-select:focus-visible {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.cta-button.primary:focus-visible {
    box-shadow: 0 0 0 4px var(--primary-light);
}
.nav-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* PWA Install Button Styles */
.pwa-install-container {
    margin: var(--space-4) 0; /* Reduced margin */
    text-align: center;
    animation: slideInUp 0.5s ease-out;
    position: relative;
    z-index: 1;
    background: rgba(249, 250, 251, 0.3);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-5); /* Reduced padding */
    backdrop-filter: blur(8px);
    transition: all var(--transition-normal);
}

.pwa-install-container:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
}

.pwa-install-title {
    font-size: var(--text-lg); /* Slightly smaller */
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 var(--space-2) 0; /* Reduced margin */
    line-height: 1.3;
}

.pwa-install-description {
    margin: 0 0 var(--space-4) 0; /* Reduced margin */
    line-height: 1.5;
    color: var(--gray-700);
    font-size: var(--text-sm); /* Slightly smaller text */
}

.pwa-install-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5); /* Reduced padding */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-family-sans);
    font-size: var(--text-sm); /* Slightly smaller text */
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.pwa-install-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color));
}

.pwa-install-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.pwa-install-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--primary-light), var(--shadow-lg);
}

.pwa-install-icon {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.pwa-install-button:hover .pwa-install-icon {
    transform: translateY(-1px);
}

.pwa-install-description {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--gray-600);
    font-weight: 500;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* PWA Install Button - Mobile Responsive */
@media (max-width: 768px) {
    .pwa-install-container {
        margin: var(--space-4) 0;
    }
    
    .pwa-install-button {
        padding: var(--space-4) var(--space-8);
        font-size: var(--text-lg);
        width: 100%;
        max-width: 280px;
    }
    
    .pwa-install-description {
        font-size: var(--text-xs);
    }
}

/* PWA Install Button - Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .pwa-install-description {
        color: var(--gray-400);
    }
}