/* ===================================
   TalkGenAI - World-Class Design System
   Modern SaaS Landing Page
   =================================== */

/* CSS Variables - Refined Design Tokens */
:root {
    /* Primary Palette - Vibrant Orange */
    --color-primary: #f97316;
    --color-primary-dark: #ea580c;
    --color-primary-light: #fb923c;
    --color-primary-subtle: rgba(249, 115, 22, 0.08);

    /* Accent - Deep Teal */
    --color-accent: #0d9488;
    --color-accent-dark: #0f766e;
    --color-accent-subtle: rgba(13, 148, 136, 0.08);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #f97316 0%, #f59e0b 50%, #fbbf24 100%);
    --gradient-hero: linear-gradient(135deg, #fff7ed 0%, #ffedd5 40%, #fef3c7 100%);
    --gradient-card: linear-gradient(135deg, rgba(249, 115, 22, 0.03) 0%, rgba(245, 158, 11, 0.02) 100%);
    --gradient-accent: linear-gradient(135deg, #0d9488 0%, #06b6d4 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);

    /* Neutrals */
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-tertiary: #5b6577;     /* was #94a3b8 (2.5:1); 5.4:1 on #f5f5f5, IS 5568 / WCAG AA */
    --color-link: #c2410c;              /* brand orange as text: 5.2:1 on white; #f97316 is 2.8:1 */
    --color-link-hover: #9a3412;
    --color-text-white: #ffffff;

    --color-bg-white: #ffffff;
    --color-bg-page: #f5f5f5;
    --color-bg-card: #ffffff;
    --color-bg-subtle: #f5f5f5;
    --color-bg-dark: #0f172a;

    --color-heading: #0f172a;
    --color-bg: #fafbff;
    --color-bg-alt: #f1f5f9;

    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-border-focus: #f97316;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4.5rem;
    --spacing-3xl: 6rem;
    --spacing-4xl: 8rem;
    --spacing-5xl: 10rem;

    /* Typography */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.25rem;
    --font-size-6xl: 4rem;
    --font-size-7xl: 5rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* Shadows - Layered Depth System */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 20px 40px -5px rgba(15, 23, 42, 0.1), 0 10px 15px -5px rgba(15, 23, 42, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
    --shadow-glow: 0 0 30px rgba(249, 115, 22, 0.18);
    --shadow-glow-accent: 0 0 30px rgba(249, 115, 22, 0.18);

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-Index */
    --z-sticky: 1020;
    --z-modal: 1050;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-bg-dark: rgba(15, 23, 42, 0.8);
    --glass-blur: blur(16px);
    --glass-border: rgba(255, 255, 255, 0.2);

    /* Section Padding */
    --section-padding-mobile: 3rem;
    --section-padding-tablet: 4.5rem;
    --section-padding-desktop: 6rem;
}

/* ===================================
   Reset & Base
   =================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-page);
    min-height: 100vh;
}

/* ===================================
   Accessibility
   =================================== */

/* Keyboard focus ring. Dark orange: 3.4:1 or more on every background we use, light
   or dark (WCAG 2.1, 1.4.11 needs 3:1; brand #f97316 was 2.8:1 on white). !important
   because many components set outline:none on :focus for mouse users. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid #c2410c !important;
    outline-offset: 2px !important;
}

/* Form fields must be visible as fields: border 3:1 against the page (WCAG 2.1, 1.4.11).
   Was #e2e8f0 (1.2:1). Focused fields keep their own focus border; a component can set
   --field-border for a meaningful colour (it must still pass 3:1). */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=color]):not(:focus),
select:not(:focus),
textarea:not(:focus) {
    border-color: var(--field-border, #7c8796) !important;
}

/* Visually hidden, still read by screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 11000;
    background: var(--color-bg-dark);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-xl);
    transform: translateY(-150%);
    transition: transform var(--transition-fast);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    color: #fff;
}

/* ===================================
   Typography
   =================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.025em;
}

h1 { font-size: var(--font-size-6xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-link-hover);
}

/* A link inside a sentence must not be told apart by colour alone (WCAG 1.4.1). */
p a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Legal content links */
.legal-content a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}

.legal-content a:hover {
    text-decoration-thickness: 2.5px;
}

.legal-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-heading);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}

.legal-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--color-heading);
}

.legal-content p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.legal-content ul, .legal-content ol {
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.legal-content li {
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.legal-content li strong {
    color: var(--color-heading);
}

.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
}

.legal-content th,
.legal-content td {
    padding: 1rem;
    border: 1px solid var(--color-border);
    text-align: left;
}

.legal-content th {
    background: var(--color-bg-alt);
    font-weight: 600;
    color: var(--color-heading);
}

.notice-box {
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary);
    background: rgba(249, 115, 22, 0.05);
    margin-bottom: var(--spacing-xl);
}

.notice-box p { margin: 0; }

.notice-box--warning {
    border-left-color: #eab308;
    background: rgba(234, 179, 8, 0.05);
}

.notice-box--danger {
    border-left-color: #e11d48;
    background: rgba(225, 29, 72, 0.05);
}

.notice-box--success {
    border-left-color: #16a34a;
    background: rgba(22, 163, 74, 0.05);
}

.contact-box {
    background: var(--color-bg-alt);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    margin-top: var(--spacing-lg);
}

.contact-box h2,
.contact-box h3 {
    margin-top: 0;
}

/* Legal hero (compact) */
.legal-hero {
    padding: calc(80px + var(--spacing-2xl)) 0 var(--spacing-xl);
    text-align: center;
    background: var(--gradient-hero);
    position: relative;
    overflow: hidden;
}

.legal-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(249, 115, 22, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.legal-hero h1 {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
    position: relative;
}

.legal-hero p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: 0;
    position: relative;
}

.legal-content-section {
    background: var(--color-bg);
    padding: var(--spacing-2xl) 0;
}

@media (max-width: 768px) {
    .legal-hero h1 { font-size: var(--font-size-3xl); }
    .legal-content h2 { font-size: 1.5rem; }
    .legal-content table { font-size: 0.8rem; }
    .legal-content th,
    .legal-content td { padding: 0.5rem; }
}

/* ===================================
   Header - Glass + Minimal
   =================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    transition: all var(--transition-base);
    background: transparent;
    border-bottom: 1px solid transparent;
}

.site-header.scrolled {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom-color: var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity var(--transition-fast);
}

.site-logo:hover {
    opacity: 0.85;
    color: var(--color-text-primary);
}

.site-logo-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-weight: 900;
    font-size: 0.9rem;
    color: #ffffff;
    background: linear-gradient(150deg, #f97316 0%, #ea580c 100%);
    padding: 5px 10px;
    border-radius: 9px;
    letter-spacing: -0.03em;
    line-height: 1;
    border: none;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.22) inset,
        0 -1px 0 rgba(0,0,0,0.12) inset,
        0 2px 10px rgba(249,115,22,0.55);
    user-select: none;
    flex-shrink: 0;
}

/* Navigation */
.site-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
}

.nav-link {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
}

.nav-link:hover {
    color: var(--color-text-primary);
    background: var(--color-primary-subtle);
}

.nav-link.active {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    font-weight: var(--font-weight-semibold);
}

/* Nav CTA Button */
/* ⚠️ :not(.btn-secondary) is load-bearing. This class paints a FILLED gradient
   pill, so it forces white text — but the mobile drawer's "Book a Demo" carries
   `btn-secondary nav-cta` together, and .btn-secondary's white background then
   met this white text: an invisible button on a white drawer. The white belongs
   to the filled variant only. */
.nav-cta:not(.btn-secondary) {
    color: #111114 !important;   /* white on the orange gradient is 2.8:1 or less */
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    background: var(--gradient-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    margin-left: var(--spacing-sm);
}

.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), var(--shadow-glow);
}

.nav-cta:not(.btn-secondary):hover {
    color: #111114 !important;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--color-border);
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.mobile-menu-toggle:hover {
    background: var(--color-primary-subtle);
    border-color: var(--color-primary);
}

/* ===================================
   Hero Section - Dark Gradient
   =================================== */

.hero {
    padding: calc(80px + var(--spacing-4xl)) var(--spacing-lg) var(--spacing-4xl);
    text-align: center;
    background: var(--gradient-hero);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(249, 115, 22, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-xs);
}

.hero-badge .badge-dot {
    width: 6px;
    height: 6px;
    background: #34d399;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

.hero-title {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: var(--spacing-lg);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-title .gradient-text {
    background: linear-gradient(135deg, #f97316 0%, #f59e0b 40%, #fbbf24 70%, #fde047 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-normal);
}

.hero-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
}

.hero-social-proof {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-xl);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.hero-social-proof .stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hero-social-proof .stat-value {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.hero-divider {
    width: 1px;
    height: 16px;
    background: var(--color-border);
}

/* ===================================
   Buttons
   =================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

/* Dark text on the orange gradient: white on #f97316 is 2.8:1 and fails AA,
   #111114 is 6.7:1 (and higher on the amber end). Same pairing as the landing CTA. */
.btn-primary {
    background: var(--gradient-primary);
    color: #111114 !important;
    box-shadow: var(--shadow-md), 0 0 0 0 rgba(249, 115, 22, 0);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    color: #111114 !important;
}

.btn-primary:active {
    transform: translateY(0);
}

a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active,
a.btn-primary:focus {
    color: #111114 !important;
}

.btn-secondary {
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    border: 1.5px solid var(--color-border);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-accent {
    background: var(--gradient-accent);
    color: #111114 !important;   /* white on teal/cyan fails AA */
    box-shadow: var(--shadow-md);
}

.btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow-accent);
    color: #111114 !important;
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.5);
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border);
    backdrop-filter: blur(4px);
}

.btn-ghost:hover {
    background: var(--color-bg-white);
    border-color: var(--color-primary);
    color: var(--color-primary) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: var(--font-size-lg);
    border-radius: var(--radius-xl);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn-icon {
    font-size: 1.1em;
}

/* ===================================
   Cards
   =================================== */

.card {
    background: var(--color-bg-card);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-light);
    position: relative;
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--color-border);
}

.card-glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

/* ===================================
   Form Elements
   =================================== */

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    outline: none;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

textarea {
    resize: vertical;
    min-height: 120px;
    line-height: var(--line-height-relaxed);
}

/* ===================================
   Features Section
   =================================== */

.features-section {
    padding: var(--spacing-4xl) 0;
}

.features-section .section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    background: var(--color-primary-subtle);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.feature-card {
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-base);
}

.feature-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--color-primary-subtle);
    transform: translateY(-2px);
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    font-size: 1.5rem;
}

.feature-icon.purple { background: rgba(99, 102, 241, 0.1); }
.feature-icon.green { background: rgba(16, 185, 129, 0.1); }
.feature-icon.orange { background: rgba(249, 115, 22, 0.1); }
.feature-icon.blue { background: rgba(59, 130, 246, 0.1); }
.feature-icon.pink { background: rgba(236, 72, 153, 0.1); }
.feature-icon.teal { background: rgba(20, 184, 166, 0.1); }

.feature-card h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.5rem;
}

.feature-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* ===================================
   App Builder Section
   =================================== */

.builder-section {
    padding: var(--spacing-4xl) 0;
}

.builder-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.builder-input-card {
    position: sticky;
    top: 100px;
}

.builder-input-card .card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.builder-input-card .input-group {
    margin-bottom: var(--spacing-md);
}

.builder-input-card .input-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.builder-preview-card {
    min-height: 500px;
}

.builder-preview-card .preview-frame {
    width: 100%;
    height: 500px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: white;
}

/* Chat in builder */
.builder-chat {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
}

.builder-chat-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.builder-chat-messages {
    height: 130px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.builder-chat-messages .chat-msg {
    font-size: var(--font-size-sm);
    margin-bottom: 0.5rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.builder-chat-messages .chat-msg.user-msg {
    color: var(--color-primary);
}

/* ===================================
   Video Section
   =================================== */

.landing-video {
    padding: var(--spacing-3xl) 0;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    background: #000;
}

.video-wrapper iframe,
.video-wrapper .video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-thumbnail {
    background-size: cover;
    background-position: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-button {
    width: 72px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: var(--radius-lg);
    position: relative;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.video-thumbnail:hover .play-button {
    background-color: var(--color-primary);
    transform: scale(1.1);
    box-shadow: var(--shadow-glow);
}

.play-button::before {
    content: "";
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
}

/* ===================================
   CTA Section
   =================================== */

.cta-section {
    padding: var(--spacing-4xl) 0;
    text-align: center;
}

.cta-card {
    background: linear-gradient(135deg, #f97316 0%, #f59e0b 50%, #fbbf24 100%);
    border-radius: var(--radius-3xl);
    padding: var(--spacing-3xl) var(--spacing-xl);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.cta-card h2 {
    color: white;
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-sm);
    position: relative;
}

.cta-card p {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xl);
    position: relative;
}

.cta-card .btn {
    position: relative;
}

.cta-card .btn-primary {
    background: white;
    color: var(--color-link) !important;
    box-shadow: var(--shadow-md);
}

.cta-card .btn-primary:hover {
    background: #fff;
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    color: var(--color-primary-dark) !important;
}

.cta-card .btn-ghost {
    background: rgba(255, 255, 255, 0.12);
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3);
}

.cta-card .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: white !important;
    box-shadow: none;
}

/* ===================================
   Pricing
   =================================== */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: 880px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-xl);
    border: 1.5px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    position: relative;
}

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

.pricing-card.featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.pricing-card.featured::before {
    content: 'Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-primary);
    color: #111114;
    padding: 0.25rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
}

.plan-header {
    margin-bottom: var(--spacing-md);
}

.plan-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.25rem;
    color: var(--color-text-primary);
}

.plan-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: var(--spacing-md);
}

.price-currency {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.price-amount {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-primary);
    line-height: 1;
    letter-spacing: -0.03em;
}

.price-period {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-normal);
    margin-left: 0.25rem;
}

.plan-highlights {
    margin-top: auto;
}

.plan-highlights > p {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.plan-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan-features li {
    padding: 0.4rem 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.5;
}

.plan-features .check {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 2px;
    font-weight: var(--font-weight-bold);
}

/* ===================================
   FAQ Section
   =================================== */

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item {
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-base);
}

.faq-item:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.faq-item h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

.faq-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

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

.site-footer {
    background: var(--color-bg-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: var(--spacing-3xl) 0 var(--spacing-lg);
    margin-top: var(--spacing-4xl);
    border-top: 3px solid #ea580c;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

.footer-section h3,
.footer-section h4 {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    color: rgba(255, 255, 255, 0.95);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-sm);
}

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

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

.footer-links a {
    color: rgba(255, 255, 255, 0.5);
    transition: color var(--transition-fast);
    font-size: var(--font-size-sm);
}

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

.footer-bottom {
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-size: var(--font-size-sm);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.65);   /* 0.35 was 3.2:1 on the dark footer */
    margin: 0;
}

.footer-bottom a {
    color: #fb923c;                     /* light orange: 7.9:1 on the dark footer */
}

/* ===================================
   Animations
   =================================== */

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

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

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

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

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

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

.fade-in { animation: fadeIn 0.6s ease-out; }
.fade-in-up { animation: fadeInUp 0.8s ease-out; }

.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===================================
   Loading Overlay
   =================================== */

.loading-overlay,
#loadingOverlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    backdrop-filter: blur(8px);
}

#loadingOverlay.flex {
    display: flex !important;
}

.loading-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-2xl);
    text-align: center;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border-light);
    max-width: 320px;
}

.loading-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto var(--spacing-md);
}

.loading-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.25rem;
    color: var(--color-text-primary);
}

.loading-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* ===================================
   Containers & Layout
   =================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.section {
    padding: var(--section-padding-desktop) 0;
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--spacing-xl);
}

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

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ===================================
   Utility Classes
   =================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }

/* Legal Page Layout */
.legal-page {
    padding-top: calc(80px + var(--spacing-2xl));
    max-width: 800px;
    margin: 0 auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
    padding-bottom: var(--spacing-3xl);
}

.legal-page h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-lg);
}

.legal-page h2 {
    font-size: var(--font-size-2xl);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
}

.legal-page h3 {
    font-size: var(--font-size-lg);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
}

.legal-page p,
.legal-page li {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

.legal-page ul, .legal-page ol {
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.legal-page li {
    margin-bottom: 0.4rem;
}

/* ===================================
   Reduced Motion
   =================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

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

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --font-size-7xl: 4rem;
        --font-size-6xl: 3.25rem;
        --font-size-5xl: 2.75rem;
    }

    .hero {
        padding: calc(80px + var(--spacing-3xl)) var(--spacing-lg) var(--spacing-3xl);
    }

    .section {
        padding: var(--section-padding-tablet) 0;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }

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

    .builder-grid {
        grid-template-columns: 1fr;
    }

    .builder-input-card {
        position: static;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --font-size-7xl: 2.75rem;
        --font-size-6xl: 2.5rem;
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
    }

    .site-header {
        /* Opaque, no blur. This header is position:fixed, so a backdrop-filter
           here is a full-width GPU layer that resamples the page behind it on
           every scroll frame -- and it was applied unconditionally on mobile
           while desktop only blurs once .scrolled. --glass-bg is 0.92 opaque,
           so the blur was nearly invisible anyway. Same root cause as the
           .modal-overlay white-flash on dashboard.html. */
        background: var(--glass-bg);
    }

    .header-container {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .site-nav {
        /* Opens from the LEFT, same as the dashboard drawer and the ☰ beside it.
           Marketing used to slide in from the right while the app slid from the
           left, with the button in the same corner on both. */
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        background: var(--color-bg-white);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        padding: calc(60px + var(--spacing-xl)) var(--spacing-lg) var(--spacing-xl);
        overflow-y: auto;
        flex-direction: column;
    }

    .site-nav.active {
        transform: translateX(0);
    }

    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .nav-cta {
        margin-left: 0;
        margin-top: var(--spacing-sm);
    }

    /* "Book a Demo" inside the drawer was .btn-secondary: a WHITE button with a
       #e2e8f0 hairline border, sitting on the drawer's own WHITE background. On a
       phone it read as blank space — the filled "Sign In" under it was the only
       CTA anyone could see. Outlining it in the brand colour makes it a button
       again while keeping the hierarchy: Sign In stays the filled one.
       Scoped to .site-nav so the desktop header keeps its quiet grey pair. */
    .site-nav .btn-secondary {
        background: var(--color-primary-subtle);
        border-color: var(--color-primary);
        /* #c2410c, not --color-primary-dark: measured 4.78:1 against the 8% tint,
           where #ea580c manages only 3.29:1 and misses AA for 14px text. */
        color: #c2410c;
        font-weight: 600;
        justify-content: center;
    }

    .site-nav .btn-secondary:hover,
    .site-nav .btn-secondary:focus-visible {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #ffffff;
    }

    /* The icon inherits currentColor, so it follows the text on tap. */
    .site-nav .btn-secondary svg { color: inherit; }

    /* Tap targets. Footer link rows were 16-17px tall and the drawer's own
       links 33px, well under the 44px minimum. Inline links inside body copy
       are deliberately left alone, padding those would wreck the line box.
       Scoped to .site-footer on purpose: login.html reuses the .footer-links
       class for an inline "you agree to our Terms and Privacy" sentence, and
       making those anchors flex blocks broke it onto three lines. */
    .site-footer .footer-links a,
    .site-nav .nav-link,
    .site-nav .nav-cta {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .mobile-menu-toggle {
        display: block;
        min-width: 44px;
        min-height: 44px;
        order: -1;   /* ☰ first, on the same side the nav slides in from */
    }
    /* The ☰ is nested inside an unclassed flex wrapper together with the CTAs,
       so `order` alone could never lift it out of that wrapper, it only ever
       reordered it against "Sign In". display:contents dissolves the wrapper on
       mobile so its children become flex items of .header-container itself, and
       the toggle's order:-1 can finally put it first. The dashboard header is
       unaffected: its toggle is already a direct child, and its own wrapper
       (.user-menu) carries a class so it is not matched here. */
    .site-header .header-container > div:not([class]) { display: contents !important; }
    /* !important because that wrapper carries an inline style="display:flex",
       which beats any stylesheet rule without it. */
    .header-container { gap: 10px; }
    /* Pushes the sign-in / CTA to the far right, leaving ☰ + logo paired on the
       left. Without this, space-between spreads all three evenly. */
    .site-header .site-logo { margin-right: auto; }

    .mobile-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: calc(var(--z-sticky) - 1);
    }

    .mobile-menu-overlay.active {
        display: block;
    }

    .hero {
        padding: calc(70px + var(--spacing-2xl)) var(--spacing-md) var(--spacing-2xl);
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-social-proof {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .hero-divider {
        display: none;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

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

    .faq-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .card {
        padding: var(--spacing-lg);
    }

    .container,
    .container-narrow {
        padding: 0 var(--spacing-md);
    }

    .cta-card {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .section {
        padding: var(--section-padding-mobile) 0;
    }

    .btn-lg {
        padding: 0.875rem 1.5rem;
        font-size: var(--font-size-base);
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    :root {
        --font-size-6xl: 2rem;
        --font-size-5xl: 1.75rem;
    }

    .hero-title {
        font-size: var(--font-size-4xl);
    }
}