/* ==========================================
   FORMSAVVY WEBSITE STYLES
   Modern, flashy design with blue-purple gradient
   ========================================== */

/* CSS Variables - Brand Colors from Logo */
:root {
    /* Brand Colors - Blue to Purple Gradient */
    --color-primary-blue: #1e5ba8;
    --color-primary-dark-blue: #0f3d7a;
    --color-primary-purple: #AA28B9;
    --color-primary-magenta: #d946ef;

    /* Gradient Definitions */
    --gradient-primary: linear-gradient(135deg, #1e5ba8 0%, #5b4fb8 50%, #AA28B9 100%);
    --gradient-secondary: linear-gradient(135deg, #5b4fb8 0%, #AA28B9 50%, #d946ef 100%);
    --gradient-accent: linear-gradient(135deg, #0f3d7a 0%, #1e5ba8 50%, #5b4fb8 100%);

    /* Dark Theme Colors */
    --color-bg-primary: #0a0e1a;
    --color-bg-secondary: #131829;
    --color-bg-tertiary: #1a1f35;
    --color-bg-card: #1e2337;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-text-primary: #ffffff;
    --color-text-secondary: #a0aec0;
    --color-text-muted: #718096;

    /* Legacy neutral colors (for compatibility) */
    --color-white: #ffffff;
    --color-gray-50: #1a1f35;
    --color-gray-100: #1e2337;
    --color-gray-200: rgba(255, 255, 255, 0.1);
    --color-gray-300: rgba(255, 255, 255, 0.15);
    --color-gray-400: #718096;
    --color-gray-500: #a0aec0;
    --color-gray-600: #cbd5e0;
    --color-gray-700: #e2e8f0;
    --color-gray-800: #edf2f7;
    --color-gray-900: #f7fafc;

    /* Semantic Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --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: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

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

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
}

/* ==========================================
   RESET & BASE STYLES
   ========================================== */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-base);
}

ul {
    list-style: none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

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

/* The home page is wider so the hero screenshot has room while both hero
   margins still match the nav. Docs and legal keep 1280: their text is long
   prose, and wider lines read worse. */
.home-page .container {
    max-width: 1440px;
}

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

.gradient-bg-1 {
    background: var(--gradient-primary);
}

.gradient-bg-2 {
    background: var(--gradient-secondary);
}

.gradient-bg-3 {
    background: linear-gradient(135deg, #1e5ba8 0%, #AA28B9 100%);
}

.gradient-bg-4 {
    background: linear-gradient(135deg, #5b4fb8 0%, #d946ef 100%);
}

.gradient-bg-5 {
    background: linear-gradient(135deg, #0f3d7a 0%, #5b4fb8 100%);
}

.gradient-bg-6 {
    background: linear-gradient(135deg, #AA28B9 0%, #d946ef 100%);
}

/* ==========================================
   BUTTONS
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    text-decoration: none;
}

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

.btn-primary {
    background: #AA28B9;
    color: white;
}

.btn-primary:hover {
    background: #8e1f9c;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(170, 40, 185, 0.5);
}

.btn-gradient {
    background: linear-gradient(135deg, #1e5ba8 0%, #AA28B9 100%);
    color: white;
    box-shadow: 0 10px 25px -10px rgba(170, 40, 185, 0.6);
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -15px rgba(170, 40, 185, 0.8);
    filter: brightness(1.1);
}

.btn-secondary {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-outline:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.btn-white {
    background: white;
    color: #1e5ba8;
}

.btn-white:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -10px rgba(255, 255, 255, 0.5);
}

.btn-outline-white {
    background: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-outline-white:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.btn-icon {
    width: 20px;
    height: 20px;
}

/* ==========================================
   NAVIGATION
   ========================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(30, 35, 55, 0.6);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-gray-200);
    transition: all var(--transition-base);
}

.navbar.scrolled {
    box-shadow: var(--shadow-md);
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) 0;
}

.logo-img {
    height: 40px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: var(--spacing-xl);
}

.nav-links a {
    font-weight: 500;
    color: var(--color-gray-700);
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width var(--transition-base);
}

.nav-links a:hover {
    color: var(--color-primary-blue);
}

.nav-links a:hover::after {
    width: 100%;
}

/* Dropdown Menu */
.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: rgba(30, 35, 55, 0.98);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    padding: var(--spacing-sm) 0;
    min-width: 220px;
    max-width: calc(100vw - 2rem);
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Add invisible bridge between link and dropdown */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
    z-index: 999;
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-lg);
    color: var(--color-text-secondary);
    font-weight: 500;
    transition: all var(--transition-base);
    white-space: nowrap;
    position: relative;
}

.dropdown-menu a::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: var(--spacing-lg);
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width var(--transition-base);
}

.dropdown-menu a:hover {
    background: rgba(30, 91, 168, 0.3);
    color: white;
}

.dropdown-menu a:hover::after {
    width: calc(100% - calc(var(--spacing-lg) * 2));
}

.nav-dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
    display: block;
    animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-sm);
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--color-text-primary);
    transition: all var(--transition-base);
}

/* ==========================================
   HERO SECTION
   ========================================== */

.hero {
    position: relative;
    padding: 8rem 0 6rem;
    margin-top: 72px;
    overflow: hidden;
    isolation: isolate;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float 20s ease-in-out infinite;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: var(--gradient-primary);
    top: -250px;
    right: -250px;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: var(--gradient-secondary);
    bottom: -200px;
    left: -200px;
    animation-delay: -5s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: var(--gradient-accent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -10s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-30px, 30px) scale(0.9);
    }
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4xl);
    align-items: center;
}

.hero-text {
    animation: fadeInUp 0.8s ease-out;
}

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

.hero-title {
    font-size: var(--font-size-6xl);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-primary);
}

.lightning-fast {
    display: block;
    font-size: var(--font-size-5xl);
    margin-top: var(--spacing-sm);
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.7;
}

.hero-ctas {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-3xl);
}

.hero-stats {
    display: flex;
    gap: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

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

.hero-image-wrapper {
    position: relative;
    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
    transition: transform 0.5s ease;
}

.hero-image-wrapper:hover {
    transform: perspective(1000px) rotateY(0) rotateX(0);
}

.hero-image {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* The hero video keeps its frame's shape before it loads, so the page does
   not jump when the poster arrives. */
video.hero-image {
    display: block;
    height: auto;
    aspect-ratio: 1480 / 1002;
    object-fit: cover;
    background: var(--color-bg-card);
}

/* Desktop: the screenshot is a whole Salesforce page, so at half the
   container it read as a thumbnail. The text column keeps its width (the
   headline wraps the same) and the image takes the rest, ending at the same
   margin the text starts at, so both sides of the hero match the nav. It
   keeps the base tilt, pivoting on its right edge: the tilt brings that edge
   forward, and pivoting there keeps it on the margin instead of past it. */
@media (min-width: 1025px) {
    .hero-content {
        grid-template-columns: minmax(0, min(33rem, 44%)) minmax(0, 1fr);
        gap: var(--spacing-3xl);
    }

    .hero-image-wrapper {
        transform-origin: right center;
    }

    /* A soft brand glow gives the image presence without adding anything
       to read. */
    .hero-image-wrapper::before {
        content: '';
        position: absolute;
        inset: 6% 6% 0 6%;
        z-index: -1;
        background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.35), rgba(168, 85, 247, 0.2) 45%, transparent 72%);
        filter: blur(40px);
        pointer-events: none;
    }
}

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

.screenshot-placeholder::after {
    content: 'Form Builder Screenshot';
    position: absolute;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-400);
    text-align: center;
}

/* ==========================================
   SECTION HEADERS
   ========================================== */

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-4xl);
}

.section-title {
    font-size: var(--font-size-5xl);
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-primary);
}

.section-subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* ==========================================
   FEATURES SECTION
   ========================================== */

.features {
    padding: var(--spacing-4xl) 0;
    background: radial-gradient(ellipse at top, rgba(30, 91, 168, 0.1) 0%, var(--color-bg-secondary) 50%, rgba(170, 40, 185, 0.1) 100%);
    position: relative;
    overflow: hidden;
}

.features::before {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(170, 40, 185, 0.08) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 15s ease-in-out infinite;
    pointer-events: none;
}

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

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

.feature-card {
    padding: var(--spacing-2xl);
    background: rgba(30, 35, 55, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(170, 40, 185, 0.1), transparent);
    transition: left 0.5s ease;
}

.feature-card:hover::before {
    left: 100%;
}

.feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(30, 91, 168, 0.15), 0 0 0 1px rgba(170, 40, 185, 0.2);
    border-color: rgba(170, 40, 185, 0.3);
}

.feature-card-featured {
    grid-column: span 1;
    background: linear-gradient(135deg, rgba(30, 91, 168, 0.05) 0%, rgba(170, 40, 185, 0.05) 100%);
    border: 2px solid rgba(170, 40, 185, 0.2);
}

.feature-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.feature-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.feature-description {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

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

.feature-list li {
    padding: var(--spacing-xs) 0;
    padding-left: var(--spacing-lg);
    position: relative;
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
}

.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary-blue);
    font-weight: 700;
}

/* ==========================================
   BENEFITS SECTION
   ========================================== */

.benefits {
    padding: var(--spacing-4xl) 0;
    background: linear-gradient(180deg,
        rgba(30, 91, 168, 0.03) 0%,
        rgba(170, 40, 185, 0.05) 50%,
        rgba(30, 91, 168, 0.03) 100%
    );
    position: relative;
    overflow: hidden;
}

.benefits::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(170, 40, 185, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(30, 91, 168, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(170, 40, 185, 0.08) 0%, transparent 60%);
    animation: pulse 15s ease-in-out infinite;
    z-index: 0;
}

.benefits::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 100px,
        rgba(255, 255, 255, 0.03) 100px,
        rgba(255, 255, 255, 0.03) 101px
    );
    z-index: 0;
}

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

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

.benefit-card {
    padding: var(--spacing-2xl);
    background: rgba(30, 35, 55, 0.6);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
}

.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--gradient-primary);
    transition: height var(--transition-slow);
}

.benefit-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg at 50% 50%, transparent, rgba(170, 40, 185, 0.1), transparent);
    opacity: 0;
    transition: all 0.8s ease;
    animation: rotate 4s linear infinite paused;
}

.benefit-card:hover::before {
    height: 100%;
}

.benefit-card:hover::after {
    opacity: 1;
    animation-play-state: running;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.benefit-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 40px rgba(30, 91, 168, 0.2);
    border-color: rgba(170, 40, 185, 0.2);
}

.benefit-number {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-md);
}

.benefit-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.benefit-description {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* ==========================================
   USE CASES SECTION
   ========================================== */

.use-cases {
    padding: var(--spacing-4xl) 0;
    background: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.use-cases::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(30, 91, 168, 0.1) 0%, transparent 70%);
    top: 0;
    right: -200px;
    animation: float 30s ease-in-out infinite;
}

.use-cases::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(170, 40, 185, 0.1) 0%, transparent 70%);
    bottom: 0;
    left: -200px;
    animation: float 25s ease-in-out infinite reverse;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

.use-case-card {
    background: rgba(30, 35, 55, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-slow);
    position: relative;
}

.use-case-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-slow);
    z-index: 0;
}

.use-case-card:hover::before {
    opacity: 0.03;
}

.use-case-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px rgba(30, 91, 168, 0.2), 0 0 0 1px rgba(170, 40, 185, 0.1);
    border-color: rgba(170, 40, 185, 0.3);
}

.use-case-image {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg,
        rgba(30, 91, 168, 0.1) 0%,
        rgba(170, 40, 185, 0.1) 100%);
    position: relative;
    overflow: hidden;
}

.use-case-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A soft vignette over a screenshot: the edges darken slightly toward the
   dark card, so a bright product screen sits in the page instead of on it.
   An overlay, so the image file stays a plain crop. */
.use-case-image:has(> img)::after,
.hero-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 40px rgba(10, 14, 26, 0.30);
    pointer-events: none;
}

.hero-image-wrapper::after {
    border-radius: 12px;
}

.use-case-placeholder::after {
    content: attr(alt);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-400);
    text-align: center;
}

.use-case-content {
    padding: var(--spacing-2xl);
}

.use-case-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.use-case-description {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

.use-case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.tag {
    padding: var(--spacing-xs) var(--spacing-md);
    background: linear-gradient(135deg, rgba(30, 91, 168, 0.1) 0%, rgba(170, 40, 185, 0.1) 100%);
    color: var(--color-primary-blue);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* ==========================================
   COMPETITIVE ADVANTAGES SECTION
   ========================================== */

.compare {
    padding: var(--spacing-4xl) 0;
    background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 50%, var(--color-bg-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.compare::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:
        radial-gradient(circle at 10% 50%, rgba(30, 91, 168, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 90% 50%, rgba(170, 40, 185, 0.08) 0%, transparent 50%);
    z-index: 0;
}

.compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

.compare-card {
    padding: var(--spacing-2xl);
    background: rgba(30, 35, 55, 0.6);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.compare-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(30, 91, 168, 0.15);
    border-color: rgba(170, 40, 185, 0.2);
}

.compare-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-white);
}

.compare-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.compare-description {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-xl);
    flex-grow: 1;
}

.compare-versus {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    border-top: 1px solid var(--color-gray-200);
    padding-top: var(--spacing-lg);
}

.compare-them,
.compare-us {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
}

.compare-them {
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid rgba(239, 68, 68, 0.4);
}

.compare-us {
    background: rgba(16, 185, 129, 0.08);
    border-left: 3px solid rgba(16, 185, 129, 0.4);
}

.compare-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.compare-them .compare-label {
    color: rgba(239, 68, 68, 0.7);
}

.compare-us .compare-label {
    color: rgba(16, 185, 129, 0.8);
}

.compare-detail {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ==========================================
   PRICING SECTION
   ========================================== */

.pricing {
    padding: var(--spacing-4xl) 0;
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
    position: relative;
    overflow: hidden;
}

.pricing::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(30, 91, 168, 0.15) 0%, transparent 70%);
    top: -300px;
    left: -300px;
    animation: float 20s ease-in-out infinite;
}

.pricing::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(170, 40, 185, 0.15) 0%, transparent 70%);
    bottom: -250px;
    right: -250px;
    animation: float 25s ease-in-out infinite reverse;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3xl);
    margin-bottom: var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

.pricing-card {
    background: var(--color-bg-card);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    transition: all var(--transition-base);
    position: relative;
}

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

.pricing-card-featured {
    border-color: transparent;
    background: var(--color-bg-card);
    box-shadow: var(--shadow-xl);
    position: relative;
}

.pricing-card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-xl);
    padding: 2px;
    background: var(--gradient-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-xs) var(--spacing-lg);
    background: var(--gradient-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.pricing-header {
    margin-bottom: var(--spacing-xl);
}

.pricing-tier {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.pricing-description {
    color: var(--color-text-secondary);
}

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

.price-amount {
    font-size: var(--font-size-5xl);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.price-period {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
}

.pricing-features {
    margin-bottom: var(--spacing-2xl);
}

.pricing-features li {
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-xl);
    position: relative;
    color: var(--color-gray-700);
}

.feature-included::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: 700;
}

.feature-not-included {
    opacity: 0.5;
}

.feature-not-included::before {
    content: '−';
    position: absolute;
    left: 0;
    color: var(--color-gray-400);
    font-weight: 700;
}

.pricing-note {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    max-width: 600px;
    margin: 0 auto;
}

/* Pricing Toggle */

.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.pricing-toggle-label {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--transition-base);
}

.pricing-toggle-label.active {
    color: var(--color-text-primary);
    font-weight: 600;
}

.pricing-toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    cursor: pointer;
}

.pricing-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.pricing-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-gray-600);
    border-radius: var(--radius-full);
    transition: background var(--transition-base);
}

.pricing-toggle-slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    bottom: 3px;
    background: var(--color-white);
    border-radius: 50%;
    transition: transform var(--transition-base);
}

.pricing-toggle-switch input:checked + .pricing-toggle-slider {
    background: var(--gradient-primary);
}

.pricing-toggle-switch input:checked + .pricing-toggle-slider::before {
    transform: translateX(24px);
}

.pricing-save-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--gradient-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-left: 4px;
    vertical-align: middle;
}

/* Pricing Comparison Table */

.pricing-table-wrapper {
    position: relative;
    z-index: 1;
    margin-bottom: var(--spacing-2xl);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pricing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(30, 35, 55, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    overflow: visible;
    min-width: 640px;
}

.pricing-table thead th {
    vertical-align: top;
    padding: var(--spacing-2xl) var(--spacing-xl);
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-table-feature-header {
    width: 40%;
}

.pricing-table-plan {
    width: 30%;
    position: relative;
}

.pricing-table-plan .pricing-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.pricing-table-plan-featured {
    background: linear-gradient(180deg, rgba(30, 91, 168, 0.08) 0%, rgba(170, 40, 185, 0.08) 100%);
}

.pricing-table-plan .pricing-tier {
    margin-top: var(--spacing-md);
}

.pricing-table-plan .pricing-description {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.pricing-table-plan .pricing-price {
    margin-bottom: var(--spacing-lg);
}

.pricing-table-plan .price-amount {
    font-size: var(--font-size-4xl);
}

.pricing-table-plan .btn {
    display: inline-flex;
}

.pricing-table tbody td {
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.pricing-table tbody tr:last-child td {
    border-bottom: none;
}

.pricing-table tbody td:first-child {
    text-align: left;
    color: var(--color-gray-700);
    font-weight: 500;
}

.pricing-table-check {
    text-align: center;
    color: var(--color-success);
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.pricing-table-dash {
    text-align: center;
    color: var(--color-gray-400);
    font-weight: 400;
    opacity: 0.5;
}

.pricing-table-section-row td {
    background: rgba(30, 91, 168, 0.06);
    color: var(--color-text-primary) !important;
    font-weight: 700 !important;
    font-size: var(--font-size-sm) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--spacing-sm) var(--spacing-xl) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Highlight featured column body cells */
.pricing-table tbody td:nth-child(2) {
    background: rgba(30, 91, 168, 0.03);
}

.pricing-table-section-row td:nth-child(2) {
    background: rgba(30, 91, 168, 0.08);
}

@media (max-width: 768px) {
    .pricing-table-wrapper {
        margin-left: calc(-1 * var(--spacing-xl));
        margin-right: calc(-1 * var(--spacing-xl));
        padding: 0 var(--spacing-md);
    }

    .pricing-table thead th {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .pricing-table tbody td {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .pricing-table-plan .price-amount {
        font-size: var(--font-size-3xl);
    }

    .pricing-table-section-row td {
        padding: var(--spacing-xs) var(--spacing-md) !important;
    }
}

/* ==========================================
   TESTIMONIALS SECTION
   ========================================== */

.testimonials {
    padding: var(--spacing-4xl) 0;
    background: var(--color-bg-card);
}

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

.testimonial-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    transition: all var(--transition-base);
}

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

.testimonial-rating {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.star {
    color: #fbbf24;
}

.testimonial-text {
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.author-name {
    font-weight: 700;
    color: var(--color-text-primary);
}

.author-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.author-company {
    font-size: var(--font-size-sm);
    color: var(--color-primary-blue);
    font-weight: 500;
}

/* ==========================================
   FAQ SECTION
   ========================================== */

.faq {
    padding: var(--spacing-4xl) 0;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
}

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

.faq-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
    transition: all var(--transition-base);
}

.faq-item:hover {
    border-color: var(--color-primary-blue);
}

.faq-question {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.faq-question:hover {
    color: var(--color-primary-blue);
}

.faq-icon {
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding: 0 var(--spacing-xl) var(--spacing-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* ==========================================
   FINAL CTA SECTION
   ========================================== */

.final-cta {
    padding: var(--spacing-4xl) 0;
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: pulse 15s ease-in-out infinite;
}

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

.cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.cta-title {
    font-size: var(--font-size-5xl);
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: var(--spacing-lg);
}

.cta-subtitle {
    font-size: var(--font-size-xl);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.cta-note {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-sm);
}

/* ==========================================
   FOOTER
   ========================================== */

.footer {
    background: #0a0e1a;
    color: var(--color-text-secondary);
    padding: var(--spacing-4xl) 0 var(--spacing-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

.footer-logo {
    height: 40px;
    width: auto;
    margin-bottom: var(--spacing-md);
}

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

.footer-heading {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--spacing-lg);
}

.footer-column ul li {
    margin-bottom: var(--spacing-sm);
}

.footer-column a:hover {
    color: var(--color-white);
}

.footer-bottom {
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-gray-700);
    text-align: center;
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

@media (max-width: 1024px) {
    /* Stacked, the video comes straight after the call to action and the
       stats follow it, so a phone sees the video on its first screen rather
       than below the stats. The text column dissolves into the grid so its
       pieces can be ordered around the video; each keeps its own spacing. */
    .hero-content {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hero-text {
        display: contents;
    }

    .hero-badge {
        justify-self: start;
    }

    .hero-ctas {
        margin-bottom: var(--spacing-2xl);
    }

    .hero-image-wrapper {
        order: 1;
        margin-bottom: var(--spacing-2xl);
    }

    .hero-stats {
        order: 2;
    }

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

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

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

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

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

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

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

    .nav-links {
        gap: var(--spacing-md);
    }

    .nav-links a {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 900px) {
    .nav-links {
        gap: var(--spacing-sm);
    }

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

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background: rgba(10, 14, 26, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: var(--spacing-2xl);
        gap: var(--spacing-lg);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

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

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        display: block;
        padding: var(--spacing-md);
        font-size: var(--font-size-lg);
    }

    .nav-cta {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

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

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

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

    .hero {
        padding: 4rem 0 3rem;
    }

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

    .hero-subtitle {
        font-size: var(--font-size-lg);
    }

    .hero-ctas {
        flex-direction: column;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

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

    .section-subtitle {
        font-size: var(--font-size-lg);
    }

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

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

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

    .use-cases-grid {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }

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

    .features,
    .benefits,
    .use-cases,
    .compare,
    .pricing,
    .testimonials,
    .cta-section,
    .integrations {
        padding: var(--spacing-3xl) 0;
    }

    .btn {
        white-space: normal;
        text-align: center;
    }

    .dropdown-menu a {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-md);
    }

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

    .lightning-fast {
        font-size: var(--font-size-2xl);
    }

    .section-title {
        font-size: var(--font-size-3xl);
    }

    .cta-title {
        font-size: var(--font-size-3xl);
    }

    .features,
    .benefits,
    .use-cases,
    .pricing,
    .testimonials,
    .cta-section,
    .integrations {
        padding: var(--spacing-2xl) 0;
    }

    .hero {
        padding: 3rem 0 2rem;
    }

    .hero-stats {
        gap: var(--spacing-md);
    }

    .stat-number {
        font-size: 1.25rem;
    }
}

/* ==========================================
   ANIMATIONS & SCROLL EFFECTS
   ========================================== */

.fade-in {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.slide-up {
    opacity: 0;
    transform: translateY(30px);
    animation: slideUp 0.6s ease-out forwards;
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Section visibility animations */
.section-visible {
    animation: sectionFadeIn 0.8s ease-out;
}

@keyframes sectionFadeIn {
    from {
        opacity: 0.8;
    }
    to {
        opacity: 1;
    }
}

/* Animated class for scroll-triggered elements */
.animated {
    animation-fill-mode: forwards;
}

/* Enhanced gradient animations */
@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.gradient-animated {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* Shimmer effect for cards */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(170, 40, 185, 0.1) 50%,
        transparent 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 3s infinite;
}

/* Glow effect */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(170, 40, 185, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(30, 91, 168, 0.5);
    }
}

.glow {
    animation: glow 3s ease-in-out infinite;
}

/* Bounce effect */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.bounce {
    animation: bounce 2s ease-in-out infinite;
}

/* Smooth scroll padding for fixed nav */
section {
    scroll-margin-top: 100px;
}

/* ============================================================
   FormSavvy AI section
   Blue-led with magenta as the accent, matching the brand
   hierarchy used everywhere else on the site.
   ============================================================ */

.ai-section {
    padding: var(--spacing-4xl) 0;
    background: var(--color-bg-secondary);
    position: relative;
    overflow: hidden;
}

/* A single soft magenta bloom behind the section. Accent, not theme:
   the brand is blue-led and a magenta wash would invert that. */
.ai-glow {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(170, 40, 185, 0.10) 0%, transparent 62%);
    pointer-events: none;
    z-index: 0;
}

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

.ai-eyebrow {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    margin-bottom: var(--spacing-md);
    border: 1px solid rgba(170, 40, 185, 0.35);
    border-radius: 999px;
    background: rgba(170, 40, 185, 0.08);
    color: #e879f9;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Hero badge in the masthead ------------------------------------------- */

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    margin-bottom: var(--spacing-lg);
    border: 1px solid rgba(170, 40, 185, 0.35);
    border-radius: 999px;
    background: rgba(170, 40, 185, 0.08);
    color: #e879f9;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.hero-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d946ef;
    box-shadow: 0 0 0 0 rgba(217, 70, 239, 0.7);
    animation: ai-pulse 2.4s infinite;
}

@keyframes ai-pulse {
    70% { box-shadow: 0 0 0 8px rgba(217, 70, 239, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 70, 239, 0); }
}

/* Respect a reduced-motion preference: the dot still reads as a status
   indicator without the pulse. */
@media (prefers-reduced-motion: reduce) {
    .hero-badge-dot { animation: none; }
}

.nav-link-ai {
    color: #e879f9 !important;
    font-weight: 700;
}

/* Demo area ------------------------------------------------------------- */

.ai-demo {
    margin: var(--spacing-2xl) 0 var(--spacing-3xl);
}

/* The AI section's looping clip: framed like the site's screenshots, and it
   keeps its shape while the poster loads. */
.ai-demo-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1600 / 1000;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    background: var(--color-bg-card);
}

/* Media placeholders ---------------------------------------------------- */

.media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(170, 40, 185, 0.3);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgba(30, 91, 168, 0.06) 0%, rgba(170, 40, 185, 0.06) 100%),
        var(--color-bg-card);
    color: var(--color-text-muted);
    text-align: center;
}

.media-placeholder-hero {
    aspect-ratio: 16 / 10;
    width: 100%;
}

.media-placeholder-inline {
    margin-top: var(--spacing-lg);
    /* Sized by ratio rather than a fixed height: it sits in one column now,
       so a fixed 190px reads as a squat box at narrow widths. */
    aspect-ratio: 16 / 10;
    min-height: 0;
}

.media-placeholder-fill {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border-width: 0 0 2px 0;
}

.media-placeholder-fill .media-placeholder-inner {
    padding: var(--spacing-md);
}

.media-placeholder-inner {
    padding: var(--spacing-xl);
}

.media-placeholder-inner svg {
    color: rgba(170, 40, 185, 0.5);
    margin-bottom: var(--spacing-md);
}

.media-placeholder-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.35rem;
}

.media-placeholder-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* AI capability grid ---------------------------------------------------- */

.ai-grid {
    /* The flagship card is roughly three times the height of a short one, which
       makes this layout awkward in two different ways:
         - A plain row grid stretches its neighbour to match, or (with
           align-items:start) floats it at the top of a tall row, leaving a big
           dead gap underneath.
         - CSS columns close the gap but fill top-to-bottom, so the cards end up
           in the wrong reading order left to right.
       The fix is to give the tall card its OWN column and let the five short
       cards flow through the remaining two. Row order stays correct, and the
       short cards pack against each other instead of against a tall neighbour. */
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
    align-items: start;
}

/* Five short cards fill two columns as 2 + 2 + 1, so the last one would sit
   alone with a hole beside it. Spanning it closes the row. */
.ai-card:last-child {
    grid-column: span 2;
}

/* The flagship spans all three rows of its own column, so the short cards
   beside it never inherit its height. Its prominence comes from the accent
   border and the screenshot it carries rather than from extra width. */
.ai-card-wide {
    grid-row: span 3;
    /* Fill the whole column whatever the screenshot's height, with the
       screenshot at the bottom edge, so no gap opens under a shorter image. */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(30, 91, 168, 0.06) 0%, rgba(170, 40, 185, 0.06) 100%);
    border: 2px solid rgba(170, 40, 185, 0.2);
}

.ai-card {
    padding: var(--spacing-xl);
    background: rgba(30, 35, 55, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    transition: all var(--transition-slow);
}

.ai-card:hover {
    transform: translateY(-6px);
    border-color: rgba(170, 40, 185, 0.3);
    box-shadow: 0 20px 40px rgba(30, 91, 168, 0.15), 0 0 0 1px rgba(170, 40, 185, 0.2);
}

.ai-card-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.ai-card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.ai-card-text {
    color: var(--color-text-secondary);
    line-height: 1.7;
    font-size: var(--font-size-sm);
}

.ai-card-wide .ai-card-text {
    margin-bottom: var(--spacing-lg);
}

.ai-card-wide .screenshot {
    margin-top: auto;
}

/* Trust panel ----------------------------------------------------------- */

.ai-trust {
    padding: var(--spacing-2xl);
    background: rgba(30, 35, 55, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
}

.ai-trust-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

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

.ai-trust-item {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    color: var(--color-text-secondary);
    line-height: 1.7;
    font-size: var(--font-size-sm);
}

.ai-trust-item strong {
    color: var(--color-text-primary);
    display: block;
    margin-bottom: 0.15rem;
}

.ai-trust-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 2px;
}

/* Comparison + pricing accents ------------------------------------------ */

.compare-card-ai {
    border-color: rgba(170, 40, 185, 0.3);
    background: linear-gradient(135deg, rgba(30, 91, 168, 0.06) 0%, rgba(170, 40, 185, 0.06) 100%);
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
    /* Two columns: the flagship takes one and spans the rows its neighbours
       occupy, so nothing stretches and nothing floats. The last card keeps its
       span, which here means full width, still closing the final row. */
    .ai-grid { grid-template-columns: 1fr 1fr; }
    .ai-card-wide { grid-row: span 2; }
}

@media (max-width: 768px) {
    .ai-grid { grid-template-columns: 1fr; }
    .ai-card-wide { grid-row: auto; }
    .ai-card:last-child { grid-column: span 1; }
    .ai-trust-grid { grid-template-columns: 1fr; }
    .ai-glow { width: 500px; height: 500px; }
    .media-placeholder-hero { aspect-ratio: 4 / 3; }
}