/* --- Design System: Variables --- */
:root {
    /* Core Palette - UPDATED */
    --primary-color: #00A8E0;
    --primary-color-darker: #007DAA;
    --secondary-color: #2c3e50; 
    --accent-orange: #ff6b47; 
    --accent-orange-darker: #e55a3f;
    --accent-green: #28a745; 
    --accent-yellow: #ffc107; 
    --accent-red: #dc3545; 
    --neutral-charcoal: #333333;
    --dark-slate-blue: #172554;

    /* Neutrals & Text */
    --text-light: #ffffff;
    --text-dark: #1a202c;
    --text-dark-secondary: #6c757d; 
    --text-muted-light: #a0aec0;
    --text-muted-dark: #cbd5e1;
    --text-muted-darker: #94a3b8;

    /* Backgrounds */
    --bg-light: #ffffff;
    --bg-soft-light: #f8f9fa; 
    --bg-indigo-dark: var(--secondary-color);
    --bg-indigo-darker: #1e1f57;
    --bg-primary-very-light: rgba(0, 168, 224, 0.05);

    /* Borders */
    --border-light: #e9ecef; 
    --border-dark: rgba(255, 255, 255, 0.2);
    --border-accent: var(--primary-color);

    /* Shadows */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.07);
    --shadow-primary-glow: 0 0 25px rgba(0, 168, 224, 0.3);
    --shadow-orange-glow: 0 10px 25px rgba(255, 107, 71, 0.3);
    --shadow-text-hero: 0 2px 8px rgba(0, 0, 0, 0.5);

    /* Gradients */
    --gradient-primary: linear-gradient(45deg, var(--primary-color) 0%, #0094c7 100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, var(--bg-indigo-darker) 100%);
    --gradient-hero-overlay: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    --gradient-accent-orange: linear-gradient(45deg, var(--accent-orange) 0%, #ff8a65 100%);

    /* Typography */
    --font-primary: 'Poppins', 'Segoe UI', sans-serif;
    --base-font-size: 16px;
    --line-height-base: 1.7;
    --line-height-heading: 1.3;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-wide: 0.05em;

    /* Layout & Spacing */
    --container-max-width: 1200px;
    --spacing-unit: 8px;
    --spacing-xs: calc(var(--spacing-unit) * 0.5);   /* 4px */
    --spacing-sm: var(--spacing-unit);             /* 8px */
    --spacing-md: calc(var(--spacing-unit) * 2);   /* 16px */
    --spacing-lg: calc(var(--spacing-unit) * 3);   /* 24px */
    --spacing-xl: calc(var(--spacing-unit) * 4);   /* 32px */
    --spacing-2xl: calc(var(--spacing-unit) * 6);  /* 48px */
    --spacing-3xl: calc(var(--spacing-unit) * 8);  /* 64px */
    --spacing-4xl: calc(var(--spacing-unit) * 12); /* 96px */
    --spacing-5xl: calc(var(--spacing-unit) * 16); /* 128px */

    /* Borders & Radii */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-pill: 999px;

    /* Transitions */
    --transition-speed-normal: 0.3s;
    --transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);

    /* Header */
    --header-height: 80px; 
    --header-height-scrolled: 72px;
}


/* --- Global Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height-scrolled); font-size: var(--base-font-size); -webkit-tap-highlight-color: transparent; }
body { font-family: var(--font-primary); line-height: var(--line-height-base); color: var(--text-dark); background-color: var(--bg-light); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
main { padding-top: var(--header-height); } 


/* --- Links --- */
a { color: var(--primary-color-darker); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--transition-speed-normal) var(--transition-bezier), text-decoration-color var(--transition-speed-normal) var(--transition-bezier); }
a:hover { color: var(--accent-orange); text-decoration-color: var(--accent-orange); }
a:focus-visible { outline: 2px solid var(--primary-color-darker); outline-offset: 2px; border-radius: var(--border-radius-sm); }


/* --- Headings & Text --- */
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--secondary-color); line-height: var(--line-height-heading); margin-bottom: var(--spacing-lg); letter-spacing: var(--letter-spacing-tight); }
h1 { font-size: clamp(2.8rem, 5.5vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); font-weight: 700; }
h3 { font-size: clamp(1.4rem, 3.5vw, 1.8rem); font-weight: 600; }
h4 { font-size: clamp(1.1rem, 3vw, 1.2rem); font-weight: 600; }
p { margin-bottom: var(--spacing-md); color: var(--text-dark-secondary); font-weight: 400; }
p.lead { font-size: clamp(1.1rem, 2.5vw, 1.25rem); font-weight: 400; color: var(--text-dark-secondary); margin-bottom: 0; max-width: 700px; margin-left: auto; margin-right: auto; }
strong { font-weight: 600; color: var(--text-dark); }


/* --- Utility Classes --- */
.container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--spacing-xl); }
.section { padding: var(--spacing-5xl) 0; overflow: hidden; position: relative; }
.section-sm { padding: var(--spacing-3xl) 0; }
.section-light { background-color: var(--bg-light); }
.section-soft-light { background-color: var(--bg-soft-light); }
.section-gradient-secondary { background: var(--gradient-secondary); color: var(--text-light); }
.section-gradient-secondary h1,
.section-gradient-secondary h2,
.section-gradient-secondary h3 { color: var(--text-light); }
.section-gradient-secondary p { color: rgba(255, 255, 255, 0.9); }
.text-center { text-align: center; }
.section-title { text-align: center; margin-bottom: var(--spacing-4xl); max-width: 800px; margin-left: auto; margin-right: auto; }
.section-title h2 { margin-bottom: var(--spacing-md); }


/* --- Buttons --- */
.btn { display: inline-block; padding: var(--spacing-md) var(--spacing-2xl); font-size: 0.95rem; font-weight: 600; border-radius: var(--border-radius-md); cursor: pointer; transition: all var(--transition-speed-normal) ease; text-align: center; border: 2px solid transparent; letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; line-height: 1.5; box-shadow: var(--shadow-md); -webkit-font-smoothing: antialiased; text-decoration: none !important; }
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none !important; } 
.btn:active { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: 3px solid var(--primary-color-darker); outline-offset: 2px; text-decoration: none !important; }
.btn-lg { padding: var(--spacing-lg) var(--spacing-3xl); font-size: 1.05rem; }
.btn-sm { padding: var(--spacing-sm) var(--spacing-lg); font-size: 0.85rem; } 
.btn-primary { background: var(--gradient-primary); color: var(--text-light); border-color: transparent; }
.btn-primary:hover { box-shadow: var(--shadow-lg), var(--shadow-primary-glow); }
.btn-secondary { background-color: transparent; color: var(--primary-color-darker); border-color: var(--primary-color-darker); box-shadow: none; }
.btn-secondary:hover { background-color: var(--primary-color-darker); color: var(--text-light); transform: translateY(-4px); box-shadow: var(--shadow-primary-glow); border-color: var(--primary-color-darker); }
.btn-accent-orange { background: var(--accent-orange); color: var(--text-light); border: none; }
.btn-accent-orange:hover { background: var(--accent-orange-darker); box-shadow: var(--shadow-orange-glow); transform: translateY(-3px) scale(1.02); }


/* --- Header --- */
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; height: var(--header-height); background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); box-shadow: none; border-bottom: 1px solid transparent; transition: background-color var(--transition-speed-normal) var(--transition-bezier), backdrop-filter var(--transition-speed-normal) var(--transition-bezier), box-shadow var(--transition-speed-normal) var(--transition-bezier), border-color var(--transition-speed-normal) var(--transition-bezier), height var(--transition-speed-normal) var(--transition-bezier); display: flex; align-items: center; }
.site-header.scrolled { height: var(--header-height-scrolled); background-color: rgba(248, 250, 252, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-md); border-bottom-color: var(--border-light); }
.header-container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: calc(var(--container-max-width) + var(--spacing-2xl)*2); margin: 0 auto; padding: 0 var(--spacing-2xl); height: 100%; }
.logo a { display: flex; align-items: center; line-height: 1; text-decoration: none; }
.header-container .logo img { height: 50px; width: auto; vertical-align: middle; transition: height var(--transition-speed-normal) var(--transition-bezier); }
.site-header.scrolled .logo img { height: 44px; }
.main-nav ul { list-style: none; display: flex; align-items: center; gap: var(--spacing-xl); margin-bottom: 0; }
.main-nav a { color: var(--text-dark); font-weight: 500; font-size: 0.95rem; padding: var(--spacing-sm) 0; position: relative; text-decoration: none; transition: color var(--transition-speed-normal) var(--transition-bezier); }
.main-nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background: var(--gradient-primary); transition: width var(--transition-speed-normal) var(--transition-bezier); }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--primary-color); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.nav-cta .btn { padding: var(--spacing-sm) var(--spacing-lg); font-size: 0.85rem; } 
.mobile-nav-toggle { display: none; font-size: 1.8rem; color: var(--secondary-color); background: none; border: none; cursor: pointer; padding: var(--spacing-md); }


/* --- HERO SECTION --- */
.hero {
    position: relative;
    padding: 120px 20px; /* Increased padding for more white space */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    background-image:
        linear-gradient(
          to bottom right,
          rgba(255,139,0,0.3),
          rgba(0,200,83,0.3)
        ),
        url('hero_image.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    z-index: 0;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px);
    background-size: 4px 4px;
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* Base text styles with sophisticated shadow */
.hero h1,
.hero h2,
.hero p.subtitle {
    color: var(--text-light);
    text-shadow:
      1px 1px 3px rgba(0, 0, 0, 0.7),
      0 0 15px rgba(23, 37, 84, 0.8),
      0 0 35px rgba(23, 37, 84, 0.6);
}

/* Primary Headline - Large & Bold */
.hero h1 {
    font-size: clamp(3rem, 6vw, 4.5rem); /* Significantly larger */
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: var(--spacing-lg); /* More space below */
}

/* Highlighted Text */
.hero .hero-highlight {
    color: var(--accent-orange); /* Stronger color contrast */
}

/* Secondary Headline - Medium */
.hero h2 {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 400; /* Lighter weight for hierarchy */
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--spacing-md);
}

/* Single Supporting Line - Small */
.hero p.subtitle {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px; /* Keep it tight */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-2xl); /* More space above the CTA */
}

.hero .cta-button {
    margin-top: var(--spacing-xl);
}


/* --- START: NEW INTERACTIVE WORKFLOW & ENTERPRISE SECTIONS --- */
.workflow-section {
    background-color: var(--bg-soft-light);
}

.interactive-demo-container {
    background-color: var(--bg-light);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
    overflow: hidden;
    margin-top: var(--spacing-3xl);
}

.demo-tabs {
    display: flex;
    background-color: var(--bg-soft-light);
    border-bottom: 1px solid var(--border-light);
}

.demo-tab-trigger {
    flex: 1;
    padding: var(--spacing-lg) var(--spacing-md);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark-secondary);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all var(--transition-speed-normal) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.demo-tab-trigger:hover {
    background-color: var(--bg-primary-very-light);
    color: var(--secondary-color);
}

.demo-tab-trigger.active {
    color: var(--accent-orange);
    border-bottom-color: var(--accent-orange);
    background-color: var(--bg-light);
}

.tab-number {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 50%;
    background-color: var(--text-muted-light);
    color: var(--text-light);
    font-size: 0.8rem;
    font-weight: 700;
    transition: background-color var(--transition-speed-normal) ease;
}

.demo-tab-trigger.active .tab-number {
    background-color: var(--accent-orange);
}

.demo-content-wrapper {
    padding: var(--spacing-3xl) var(--spacing-2xl);
}

.demo-content-panel {
    display: none;
    animation: fadeIn 0.5s ease;
}

.demo-content-panel.active {
    display: block;
}

.demo-interface-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}
.demo-interface-header h4 {
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}
.demo-interface-header p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-dark-secondary);
}

.demo-query-box {
    background-color: var(--bg-soft-light);
    border: 1px solid var(--border-light);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-dark-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}
.demo-query-box i {
    color: var(--primary-color);
}

.demo-results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.demo-result {
    background: var(--bg-soft-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    border: 2px solid var(--border-light);
    font-size: 0.9rem;
    transition: all var(--transition-speed-normal) ease;
    position: relative;
}

.demo-result.is-winner {
    border-color: var(--accent-green);
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.3);
    transform: scale(1.02);
}

.trust-score {
    display: inline-block;
    background: var(--accent-green);
    color: white;
    padding: 6px 12px;
    border-radius: var(--border-radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: var(--spacing-sm);
}
.trust-score.medium { background: var(--accent-yellow); }
.trust-score.low { background: var(--accent-red); }

.synthesized-answer-box {
    background: linear-gradient(45deg, var(--bg-primary-very-light), rgba(154, 125, 255, 0.05));
    border: 2px solid var(--accent-purple);
    box-shadow: 0 0 25px rgba(154, 125, 255, 0.2);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
}
.synthesized-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-md);
}
.synthesized-header i {
    color: var(--accent-purple);
}
.synthesized-answer-box p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-dark);
}
.synthesized-answer-box p strong {
    color: var(--accent-purple);
}

.enterprise-section {
    background: var(--gradient-secondary);
    color: var(--text-light);
    position: relative;
    overflow: hidden;
}

.enterprise-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 25px 25px;
    z-index: 0;
}

.enterprise-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--spacing-4xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

.enterprise-content h2 {
    color: var(--text-light);
    margin-bottom: var(--spacing-lg);
}

.enterprise-content p.lead {
    color: var(--text-muted-dark);
    margin-bottom: var(--spacing-xl);
    font-size: 1.1rem;
    line-height: 1.6;
}

.enterprise-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

.enterprise-feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-dark);
    transition: all var(--transition-speed-normal) ease;
}

.enterprise-feature-item:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-yellow);
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.2);
}

.enterprise-feature-icon {
    flex-shrink: 0;
    font-size: 1.2rem;
    color: var(--accent-yellow);
    background-color: rgba(255, 193, 7, 0.1);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enterprise-feature-item h4 {
    color: var(--text-light);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.enterprise-feature-item p {
    color: var(--text-muted-dark);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0;
}
/* --- END: NEW WORKFLOW & ENTERPRISE SECTION STYLES --- */


/* --- Visual Demo Section --- */
.visual-demo { padding: var(--spacing-5xl) 0; }
.visual-demo .section-title { margin-bottom: var(--spacing-3xl); }
.browser-mockup { max-width: 1000px; margin: 0 auto; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; background-color: #fff; border: 1px solid var(--border-light); }
.browser-header { background: #f1f3f5; padding: var(--spacing-sm) var(--spacing-lg); display: flex; align-items: center; border-bottom: 1px solid var(--border-light); }
.browser-header .dots { display: flex; gap: var(--spacing-sm); margin-right: var(--spacing-lg); }
.browser-header .dot { display: block; width: 12px; height: 12px; border-radius: 50%; }
.browser-header .dot.red { background-color: #ff5f57; }
.browser-header .dot.yellow { background-color: #ffbd2e; }
.browser-header .dot.green { background-color: #27c93f; }
.browser-header .browser-url { flex-grow: 1; text-align: center; background-color: var(--bg-light); border-radius: var(--border-radius-sm); border: 1px solid var(--border-light); padding: var(--spacing-xs) var(--spacing-md); font-size: 0.85rem; color: var(--text-dark-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: monospace; }
.browser-content { background-color: var(--bg-soft-light); }
.browser-content video { display: block; width: 100%; height: auto; }


/* --- AI Logos Section --- */
.ai-logos { padding: var(--spacing-3xl) 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.ai-logos h3 { text-align: center; font-weight: 500; color: var(--text-dark-secondary); font-size: 0.9rem; margin-bottom: var(--spacing-2xl); text-transform: uppercase; letter-spacing: 0.1em; }
.logo-grid { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--spacing-lg); }
.ai-logo { font-size: 1rem; font-weight: 500; color: var(--text-dark-secondary); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-md); background-color: var(--bg-light); border: 1px solid var(--border-light); transition: all var(--transition-speed-normal) var(--transition-bezier); box-shadow: var(--shadow-sm); }
.ai-logo:hover { transform: translateY(-5px) scale(1.04); color: var(--primary-color); border-color: var(--primary-color); box-shadow: var(--shadow-lg); }


/* --- Pricing Section (Beta) --- */
.pricing .section-title h2 { color: var(--text-light); }
.pricing .section-title p.lead { color: rgba(255, 255, 255, 0.95); max-width: 700px; margin: 0 auto; }
.pricing-grid { display: grid; grid-template-columns: minmax(280px, 400px); justify-content: center; gap: var(--spacing-xl); margin-top: var(--spacing-3xl); }
.pricing-tier { background-color: rgba(255, 255, 255, 0.05); padding: var(--spacing-2xl) var(--spacing-xl); border-radius: var(--border-radius-xl); border: 1px solid var(--border-dark); text-align: center; transition: all var(--transition-speed-normal) var(--transition-bezier); display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow-dark-soft); }
.pricing-tier:hover { transform: translateY(-10px) scale(1.02); box-shadow: var(--shadow-dark-strong); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); }
.pricing-tier h3 { color: var(--text-light); font-size: 1.7rem; margin-bottom: var(--spacing-sm); font-weight: 600; }
.tier-description { color: rgba(255, 255, 255, 0.9); font-weight: 500; margin-bottom: var(--spacing-xl); font-size: 1rem; min-height: 2.5em; }
.pricing-tier .price { font-size: clamp(2.8rem, 5vw, 3.5rem); font-weight: 700; color: var(--text-light); margin-bottom: var(--spacing-lg); line-height: 1; }
.price span.term { font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 0.7); margin-left: var(--spacing-xs); }
.pricing-tier ul { list-style: none; margin: var(--spacing-xl) 0; padding-left: var(--spacing-sm); text-align: left; flex-grow: 1; }
.pricing-tier ul li { margin-bottom: var(--spacing-md); position: relative; padding-left: var(--spacing-xl); color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; line-height: 1.5; }
.pricing-tier ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--accent-green); position: absolute; left: 0; top: 4px; font-size: 1.1em; }
.pricing-tier .btn { margin-top: auto; width: 100%; }
.pricing-note { text-align: center; margin-top: var(--spacing-2xl); color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; }


/* --- YouTube Promo Section --- */
.youtube-promo { padding: var(--spacing-4xl) 0; border-top: 1px solid var(--border-light); }
.youtube-promo .section-title { margin-bottom: var(--spacing-2xl); }
.youtube-promo .btn-secondary { border-color: var(--accent-orange); color: var(--accent-orange); }
.youtube-promo .btn-secondary:hover { background-color: var(--accent-orange); color: var(--text-light); border-color: var(--accent-orange); box-shadow: var(--shadow-orange-glow); }
.youtube-promo .btn i { margin-right: var(--spacing-sm); }


/* --- Footer --- */
.site-footer { background-color: var(--bg-indigo-darker); color: var(--text-muted-dark); padding: var(--spacing-4xl) 0 var(--spacing-2xl) 0; font-size: 0.95rem; }
.footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--spacing-2xl); border-bottom: 1px solid var(--border-dark); padding-bottom: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); }
.footer-logo .logo img { height: 50px; width: auto; margin-bottom: var(--spacing-sm); filter: brightness(0) invert(1) opacity(0.8); }
.footer-logo p { color: var(--text-muted-dark); margin-top: 0; font-size: 0.9rem; }
.footer-links { display: flex; gap: var(--spacing-xl); flex-wrap: wrap; }
.footer-links a { color: var(--text-muted-dark); font-weight: 500; text-decoration: none; }
.footer-links a:hover { color: var(--primary-color); }
.footer-social { display: flex; gap: var(--spacing-lg); }
.footer-social a { color: var(--text-muted-dark); font-size: 1.5rem; transition: color var(--transition-speed-normal) var(--transition-bezier), transform var(--transition-speed-normal) var(--transition-bezier); text-decoration: none; }
.footer-social a:hover { color: var(--primary-color); transform: translateY(-3px) scale(1.1); }
.footer-bottom { text-align: center; color: var(--text-muted-darker); font-size: 0.9rem; }


/* --- Animations --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInScaleUp { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.fade-in, .fade-in-scale-up { opacity: 0; animation-fill-mode: forwards; animation-play-state: paused; animation-duration: 0.6s; animation-timing-function: ease-out; }
.fade-in { animation-name: fadeIn; }
.fade-in-scale-up { animation-name: fadeInScaleUp; }


/* --- Responsive Design --- */
@media (max-width: 1024px) {
    :root { --header-height: 76px; --header-height-scrolled: 70px; --spacing-5xl: var(--spacing-4xl); }
    .section { padding: var(--spacing-4xl) 0; }
    h1 { font-size: clamp(2.5rem, 6vw, 3.5rem); }
    h2 { font-size: clamp(2rem, 5vw, 2.8rem); }
    .hero h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
    .hero p.subtitle { font-size: clamp(1rem, 2.5vw, 1.1rem); }
    .container { padding: 0 var(--spacing-lg); }
    .header-container { padding: 0 var(--spacing-lg); }
    .main-nav ul { gap: var(--spacing-lg); }
    .enterprise-grid { grid-template-columns: 1fr; gap: var(--spacing-3xl); text-align: center; }
    .enterprise-features-grid { text-align: left; }
    .workflow-steps-horizontal { grid-template-columns: 1fr; gap: var(--spacing-lg); }
    .workflow-step-card:not(:last-child)::after { display: none; }
}

@media (max-width: 768px) {
    :root { --header-height: 70px; --header-height-scrolled: 64px; }
    .main-nav { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--bg-light); box-shadow: var(--shadow-xl); padding-top: var(--header-height); z-index: 999; transform: translateX(-100%); transition: transform 0.4s var(--transition-bezier); overflow-y: auto; }
    .main-nav.mobile-active { transform: translateX(0); display: block; }
    .main-nav ul { flex-direction: column; align-items: flex-start; gap: 0; padding: var(--spacing-lg) 0; }
    .main-nav li { width: 100%; }
    .main-nav a { display: block; padding: var(--spacing-md) var(--spacing-xl); width: 100%; color: var(--text-dark); font-weight: 500; font-size: 1.1rem; text-decoration: none; }
    .main-nav a:hover { background-color: var(--bg-soft-light); color: var(--primary-color); }
    .nav-cta { display: none; }
    .main-nav .nav-cta-mobile { display: block; padding: var(--spacing-xl); margin-top: var(--spacing-md); border-top: 1px solid var(--border-light); }
    .main-nav .nav-cta-mobile .btn { width: 100%; text-align: center; background: var(--gradient-primary); color: var(--text-light); }
    .mobile-nav-toggle { display: block; z-index: 1001; position: relative; }
    .hero { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }
    .hero h1 { font-size: clamp(2.2rem, 7vw, 3rem); }
    .hero h2 { font-size: clamp(1.1rem, 4vw, 1.4rem); margin-bottom: var(--spacing-md); }
    .hero p.subtitle { font-size: 1rem; margin-bottom: var(--spacing-lg); }
    .hero .cta-button { flex-direction: column; gap: var(--spacing-md); align-items: center; }
    .hero .cta-button .btn { width: 90%; max-width: 350px; }
    .pricing-grid { grid-template-columns: minmax(280px, 1fr); }
    .footer-content { flex-direction: column; text-align: center; gap: var(--spacing-xl); }
    .footer-links { justify-content: center; gap: var(--spacing-lg); }
    .footer-social { justify-content: center; margin-top: var(--spacing-sm); }
    .header-container .logo img { height: 40px; }
    .site-header.scrolled .logo img { height: 38px; }
    .demo-results { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .enterprise-features-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    :root { --header-height: 64px; --header-height-scrolled: 60px; --spacing-unit: 6px; }
    .container { padding: 0 var(--spacing-md); }
    .section { padding: var(--spacing-3xl) 0; }
    .hero { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
    .hero h1 { font-size: 2rem; }
    .hero h2 { font-size: 1.05rem; }
    .hero p.subtitle { font-size: 0.95rem; }
    .btn { padding: var(--spacing-md) var(--spacing-lg); font-size: 0.9rem; }
    .btn-lg { padding: var(--spacing-lg) var(--spacing-xl); font-size: 1rem; }
    .browser-header .browser-url { display: none; }
    .browser-header { justify-content: flex-start; }
    .ai-logos { padding: var(--spacing-xl) 0; }
    .logo-grid { gap: var(--spacing-md); }
    .ai-logo { font-size: 0.85rem; }
}