/* ============================================================
   HoreX Marketing Website — Design Tokens
   
   Single source of truth for colors, typography, spacing,
   breakpoints, shadows, and animation values.
   ============================================================ */

:root {
    /* ── Brand Colors ─────────────────────────────────── */
    --color-primary: #2563EB;
    --color-primary-dark: #1D4ED8;
    --color-primary-light: #3B82F6;
    --color-primary-50: #EFF6FF;
    --color-primary-100: #DBEAFE;
    --color-primary-200: #BFDBFE;
    --color-primary-600: #2563EB;
    --color-primary-700: #1D4ED8;
    --color-primary-800: #1E40AF;
    --color-primary-900: #1E3A8A;

    /* Gradient (brand signature) */
    --gradient-primary: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    --gradient-primary-hover: linear-gradient(135deg, #1D4ED8 0%, #6D28D9 100%);
    --gradient-hero: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    --gradient-subtle: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);

    /* Neutrals */
    --color-white: #FFFFFF;
    --color-gray-50: #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;
    --color-gray-950: #020617;

    /* Semantic */
    --color-success: #10B981;
    --color-success-light: #D1FAE5;
    --color-warning: #F59E0B;
    --color-warning-light: #FEF3C7;
    --color-error: #EF4444;
    --color-error-light: #FEE2E2;
    --color-info: #3B82F6;
    --color-info-light: #DBEAFE;

    /* ── Typography ───────────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Font sizes — mobile-first */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */
    --text-5xl: 3rem;
    /* 48px */
    --text-6xl: 3.75rem;
    /* 60px */
    --text-7xl: 4.5rem;
    /* 72px */

    /* Line heights */
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Font weights */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Letter spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;

    /* ── Spacing Scale ────────────────────────────────── */
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */
    --space-24: 6rem;
    /* 96px */
    --space-32: 8rem;
    /* 128px */

    /* ── Container ────────────────────────────────────── */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;
    --container-padding: var(--space-6);

    /* ── Border Radius ────────────────────────────────── */
    --radius-sm: 0.375rem;
    /* 6px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-2xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    /* ── Shadows ──────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.15);
    --shadow-glow-lg: 0 0 80px rgba(37, 99, 235, 0.2);

    /* ── Animations ───────────────────────────────────── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 800ms;

    /* ── Z-Index Scale ────────────────────────────────── */
    --z-base: 0;
    --z-above: 10;
    --z-nav: 100;
    --z-sticky: 200;
    --z-overlay: 500;
    --z-modal: 1000;
}

/* ── Breakpoints (reference, use in media queries) ───
   Mobile:  < 640px   (default)
   Tablet:  >= 640px  @media (min-width: 640px)
   Desktop: >= 1024px @media (min-width: 1024px)
   Wide:    >= 1400px @media (min-width: 1400px)
   ──────────────────────────────────────────────────── */

/* ============================================================
   HoreX Marketing Website — Base Styles
   
   Reset, typography, container, grid utilities.
   Mobile-first — all styles default to mobile,
   then override at tablet (640px) and desktop (1024px).
   ============================================================ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-normal);
    color: var(--color-gray-900);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
    color: var(--color-primary-dark);
}

ul,
ol {
    list-style: none;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* ── Typography ─────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-gray-900);
}

h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
}

h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
}

h3 {
    font-size: var(--text-2xl);
}

h4 {
    font-size: var(--text-xl);
}

p {
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

.text-sm {
    font-size: var(--text-sm);
}

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

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

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

/* ── Desktop typography scale ──────────────────────── */
@media (min-width: 1024px) {
    h1 {
        font-size: var(--text-6xl);
    }

    h2 {
        font-size: var(--text-4xl);
    }

    h3 {
        font-size: var(--text-3xl);
    }

    h4 {
        font-size: var(--text-2xl);
    }
}

/* ── Container ──────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.container--narrow {
    max-width: var(--container-lg);
}

.container--wide {
    max-width: var(--container-2xl);
}

/* ── Section Spacing ────────────────────────────────── */
.section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

@media (min-width: 1024px) {
    .section {
        padding-top: var(--space-24);
        padding-bottom: var(--space-24);
    }
}

.section--alt {
    background-color: var(--color-gray-50);
}

.section--dark {
    background: var(--gradient-hero);
    color: var(--color-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: var(--color-white);
}

.section--dark p {
    color: var(--color-gray-300);
}

/* ── Grid ───────────────────────────────────────────── */
.grid {
    display: grid;
    gap: var(--space-6);
}

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

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

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

@media (min-width: 640px) {
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

@media (min-width: 1024px) {
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .grid {
        gap: var(--space-8);
    }
}

/* ── Flex Utilities ─────────────────────────────────── */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-6 {
    gap: var(--space-6);
}

.gap-8 {
    gap: var(--space-8);
}

/* ── Spacing Utilities ──────────────────────────────── */
.mt-4 {
    margin-top: var(--space-4);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mt-8 {
    margin-top: var(--space-8);
}

.mt-12 {
    margin-top: var(--space-12);
}

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

.mb-6 {
    margin-bottom: var(--space-6);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

/* ── Visibility ─────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Show only on mobile */
.mobile-only {
    display: block;
}

@media (min-width: 1024px) {
    .mobile-only {
        display: none;
    }
}

/* Show only on desktop */
.desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-only {
        display: block;
    }
}

/* ============================================================
   HoreX Marketing Website — Components
   
   Navbar, Hero, Buttons, Cards, Footer, FAQ, Badges.
   All responsive and mobile-first.
   ============================================================ */

/* ── Navbar ─────────────────────────────────────────── */
.navbar {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: var(--container-xl);
    z-index: var(--z-nav);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
    transition: box-shadow var(--duration-normal) var(--ease-out);
}

.navbar.scrolled {
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

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

@media (min-width: 1024px) {
    .navbar__inner {
        height: 72px;
    }
}

.navbar__logo {
    font-size: var(--text-xl);
    font-weight: var(--font-extrabold);
    color: var(--color-gray-900);
    letter-spacing: var(--tracking-tight);
}

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

.navbar__links {
    display: none;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 1024px) {
    .navbar__links {
        display: flex;
    }
}

.navbar__link {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-gray-600);
    transition: color var(--duration-fast) var(--ease-out);
}

.navbar__link:hover {
    color: var(--color-gray-900);
}

.navbar__cta {
    display: none;
}

@media (min-width: 1024px) {
    .navbar__cta {
        display: flex;
    }
}

/* Mobile menu toggle */
.navbar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-gray-700);
}

@media (min-width: 1024px) {
    .navbar__toggle {
        display: none;
    }
}

.navbar__toggle svg {
    width: 24px;
    height: 24px;
}

/* ── Navbar Dropdown Item ─────────────────────────── */
.navbar__item {
    position: static; /* mega-menu positions relative to .navbar */
}

.navbar__dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    padding: 0;
}

.navbar__chevron {
    transition: transform var(--duration-normal) var(--ease-out);
    flex-shrink: 0;
}

.navbar__item.open .navbar__chevron {
    transform: rotate(180deg);
}

/* ── Mega Menu Panel ─────────────────────────────── */
.mega-menu {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    background: #ffffff;
    border-top: 1px solid var(--color-gray-100);
    box-shadow: 0 20px 60px -15px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
    z-index: 100;
    border-radius: 0 0 16px 16px;
    margin-top: -1px;
}

.navbar__item.open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu__inner {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 32px var(--container-padding);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

/* Narrow variant for Solutions (single column) */
.mega-menu--narrow {
    left: auto;
    right: auto;
    width: 300px;
    border-radius: 0 0 16px 16px;
}

.mega-menu--narrow .mega-menu__inner {
    grid-template-columns: 1fr;
    padding: 20px 24px;
    gap: 0;
}

/* Position narrow menu under its trigger */
.navbar__item[data-dropdown="solutions"] {
    position: relative;
}

.navbar__item[data-dropdown="solutions"] .mega-menu--narrow {
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}

.navbar__item[data-dropdown="solutions"].open .mega-menu--narrow {
    transform: translateX(-50%) translateY(0);
}

/* ── Mega Menu Group ─────────────────────────────── */
.mega-menu__group-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.mega-menu__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-600);
    transition: background 150ms ease, color 150ms ease;
}

.mega-menu__link:hover {
    background: var(--color-gray-50);
    color: var(--color-gray-900);
}

/* ── Mega Menu Icon Badges ───────────────────────── */
.mega-menu__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #EFF6FF;
    color: #2563EB;
}

.mega-menu__icon--green {
    background: #ECFDF5;
    color: #059669;
}

.mega-menu__icon--amber {
    background: #FFFBEB;
    color: #D97706;
}

.mega-menu__icon--violet {
    background: #F5F3FF;
    color: #7C3AED;
}

/* Hide mega-menus on mobile */
@media (max-width: 1023px) {
    .mega-menu { display: none !important; }
    .navbar__item { display: none; }
}

/* ── Mobile Bottom-Sheet Menu ──────────────────────── */

/* Backdrop overlay */
.mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) - 1);
    background: rgba(0, 0, 0, 0);
    transition: background 300ms ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-backdrop.open {
    display: block;
    background: rgba(0, 0, 0, 0.4);
}

/* Bottom sheet container */
.mobile-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    background: var(--color-white);
    border-radius: 20px 20px 0 0;
    padding: 8px var(--space-5) var(--space-8);
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 40px -10px rgba(0, 0, 0, 0.15);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu.open {
    transform: translateY(0);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Drag handle pill */
.mobile-menu__handle {
    width: 36px;
    height: 4px;
    background: var(--color-gray-300);
    border-radius: 2px;
    margin: 8px auto 20px;
    flex-shrink: 0;
}

/* Nav links */
.mobile-menu__link {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-gray-700);
    border-radius: 12px;
    transition: background 150ms ease;
}

.mobile-menu__link:hover,
.mobile-menu__link:active {
    background: var(--color-gray-50);
    color: var(--color-gray-900);
}

/* Accordion sections */
.mobile-menu__section {
    border-bottom: 1px solid var(--color-gray-100);
    padding-bottom: var(--space-1);
}

.mobile-menu__section:last-of-type {
    border-bottom: none;
}

.mobile-menu__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-gray-700);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    border-radius: 12px;
    transition: background 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu__trigger:active {
    background: var(--color-gray-50);
}

.mobile-menu__chev {
    transition: transform 200ms ease;
    flex-shrink: 0;
    color: var(--color-gray-400);
}

.mobile-menu__section.open .mobile-menu__chev {
    transform: rotate(180deg);
}

.mobile-menu__panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 var(--space-2) 0 var(--space-6);
    transition: max-height 350ms cubic-bezier(0.32, 0.72, 0, 1),
                opacity 250ms ease,
                padding 350ms cubic-bezier(0.32, 0.72, 0, 1);
}

.mobile-menu__section.open .mobile-menu__panel {
    max-height: 600px;
    opacity: 1;
    padding: 0 var(--space-2) var(--space-2) var(--space-6);
}

.mobile-menu__panel .mobile-menu__link {
    font-size: 0.9375rem;
    padding: 10px 12px;
    color: var(--color-gray-500);
}

.mobile-menu__group-title {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-3) 12px var(--space-1);
    margin-top: var(--space-1);
}

.mobile-menu__group-title:first-child {
    margin-top: 0;
}

/* CTA at bottom */
.mobile-menu__cta {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
}

.mobile-menu__cta .btn {
    font-size: 1rem;
    padding: 16px;
    border-radius: 14px;
}

/* ── Generic Bottom-Sheet (reusable modal) ─────────── */
/* Usage: same pattern as mobile-menu. Add .open class via JS to show. */

.bottom-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) - 1);
    background: rgba(0, 0, 0, 0);
    transition: background 300ms ease;
    -webkit-tap-highlight-color: transparent;
}

.bottom-sheet-backdrop.open {
    display: block;
    background: rgba(0, 0, 0, 0.4);
}

.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    background: var(--color-white);
    border-radius: 20px 20px 0 0;
    padding: 8px var(--space-5) var(--space-8);
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 40px -10px rgba(0, 0, 0, 0.15);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.bottom-sheet.open {
    transform: translateY(0);
}

.bottom-sheet__handle {
    width: 36px;
    height: 4px;
    background: var(--color-gray-300);
    border-radius: 2px;
    margin: 8px auto 20px;
    flex-shrink: 0;
}

.bottom-sheet__title {
    font-size: 1.125rem;
    font-weight: var(--font-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-4);
    padding: 0 var(--space-2);
}

.bottom-sheet__body {
    padding: 0 var(--space-2);
}

/* ── Buttons ────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1;
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-out);
    white-space: nowrap;
}

.btn--primary {
    background: var(--gradient-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-md), 0 0 0 0 rgba(37, 99, 235, 0);
}

.btn--primary:hover {
    background: var(--gradient-primary-hover);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
    color: var(--color-white);
}

.btn--outline {
    background: transparent;
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
}

.btn--outline:hover {
    border-color: var(--color-gray-400);
    background: var(--color-gray-50);
    color: var(--color-gray-900);
}

.btn--ghost {
    background: transparent;
    color: var(--color-gray-600);
    border: none;
    font-weight: 500;
}

.btn--ghost:hover {
    color: var(--color-gray-900);
    background: var(--color-gray-50);
}

.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
    border-radius: var(--radius-xl);
}

.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

.btn--full {
    width: 100%;
}

@media (min-width: 640px) {
    .btn--full {
        width: auto;
    }
}

/* ── Hero Section ───────────────────────────────────── */
.hero {
    padding-top: calc(64px + var(--space-16));
    padding-bottom: var(--space-16);
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(170deg, #f8faff 0%, #f0f4ff 40%, #ffffff 100%);
}

/* Dot-grid background pattern */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--color-gray-200) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

/* Radial gradient accent blobs */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 10% 30%, rgba(99, 102, 241, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 60% 70% at 90% 20%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 55% 85%, rgba(59, 130, 246, 0.07) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

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

@media (min-width: 1024px) {
    .hero {
        padding-top: calc(72px + var(--space-24));
        padding-bottom: var(--space-24);
        text-align: left;
        overflow-x: clip;
    }

    .hero>.container {
        display: flex;
        align-items: center;
        gap: var(--space-8);
    }
}

.hero__content {
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .hero__content {
        max-width: 540px;
        flex-shrink: 0;
    }
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-full);
    position: relative;
    overflow: hidden;
}

/* Badge shimmer effect */
.hero__badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.15), transparent);
    animation: badgeShimmer 3s ease-in-out infinite;
}

@keyframes badgeShimmer {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

.hero__title {
    max-width: 900px;
    margin: 0 auto var(--space-6);
    font-weight: var(--font-semibold);
}

@media (min-width: 1024px) {
    .hero__title {
        margin: 0 0 var(--space-6);
    }
}

.hero__subtitle {
    max-width: 640px;
    margin: 0 auto var(--space-8);
    font-size: var(--text-lg);
    color: var(--color-gray-500);
}

@media (min-width: 1024px) {
    .hero__subtitle {
        font-size: var(--text-xl);
        margin: 0 0 var(--space-8);
    }
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .hero__actions {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--space-4);
        width: auto;
        max-width: none;
        margin: 0;
    }
}

@media (min-width: 1024px) {
    .hero__actions {
        justify-content: flex-start;
    }
}

.hero__demo-window {
    margin-top: var(--space-12);
    overflow: visible;
}

@media (min-width: 1024px) {
    .hero__demo-window {
        margin-top: 0;
        flex: 1;
        min-width: 0;
        margin-right: -80px;
    }
}

/* ── Feature Cards ──────────────────────────────────── */
.card {
    padding: var(--space-8);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
}

.card:hover {
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-3px);
}

.card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-4);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.1));
    border-radius: var(--radius-lg);
    color: var(--color-primary);
    transition: all var(--duration-normal) var(--ease-out);
}

.card:hover .card__icon {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(124, 58, 237, 0.15));
    transform: scale(1.05);
}

.card__icon svg {
    width: 24px;
    height: 24px;
}

.card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
}

.card__text {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    line-height: var(--leading-relaxed);
}

/* ── Pain Point Cards ───────────────────────────────── */
.pain-card {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    border: 1px solid transparent;
    transition: all var(--duration-normal) var(--ease-out);
}

.pain-card:hover {
    background: var(--color-white);
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-md);
}

.pain-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-error-light);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: var(--text-xl);
}

.pain-card__text {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

.pain-card__text strong {
    color: var(--color-gray-900);
}

/* ── Section Header ─────────────────────────────────── */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-12);
}

.section-header__label {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: var(--space-3);
}

.section-header__title {
    margin-bottom: var(--space-4);
}

.section-header__subtitle {
    font-size: var(--text-lg);
    color: var(--color-gray-500);
}

/* ── FAQ Accordion ──────────────────────────────────── */
.faq-item {
    border-bottom: 1px solid var(--color-gray-200);
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-5) 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-gray-900);
    text-align: left;
    cursor: pointer;
}

.faq-item__question svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-gray-400);
    transition: transform var(--duration-normal) var(--ease-out);
}

.faq-item.open .faq-item__question svg {
    transform: rotate(180deg);
}

.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-slow) var(--ease-out);
}

.faq-item.open .faq-item__answer {
    max-height: 500px;
}

.faq-item__answer p {
    padding-bottom: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

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

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

@media (min-width: 640px) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns: 2fr repeat(4, 1fr);
        gap: var(--space-12);
    }
}

.footer__brand p {
    color: var(--color-gray-400);
    font-size: var(--text-sm);
    margin-top: var(--space-4);
    max-width: 300px;
}

.footer__col-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-white);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer__link {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    transition: color var(--duration-fast);
}

.footer__link:hover {
    color: var(--color-white);
}

.footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-gray-800);
    font-size: var(--text-sm);
}

@media (min-width: 640px) {
    .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ── Badge / Tag ────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
}

.badge--blue {
    background: var(--color-primary-50);
    color: var(--color-primary);
}

.badge--green {
    background: var(--color-success-light);
    color: var(--color-success);
}

/* ── CTA Banner ─────────────────────────────────────── */
.cta-banner {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    background: var(--gradient-hero);
    border-radius: var(--radius-2xl);
    color: var(--color-white);
}

.cta-banner h2 {
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.cta-banner p {
    color: var(--color-gray-300);
    margin-bottom: var(--space-8);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Comparison Table ───────────────────────────────── */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.comparison-table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-weight: var(--font-semibold);
    color: var(--color-gray-500);
    border-bottom: 2px solid var(--color-gray-200);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.comparison-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
    color: var(--color-gray-700);
}

.comparison-table tr:hover td {
    background: var(--color-gray-50);
}

/* ── Scroll animations ──────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Trust Strip ────────────────────────────────────── */
.trust-strip {
    padding: var(--space-12) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.trust-strip__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    text-align: center;
    margin-bottom: var(--space-10);
}

@media (min-width: 640px) {
    .trust-strip__stats {
        grid-template-columns: repeat(4, 1fr);
        margin-bottom: var(--space-12);
    }
}

.trust-strip__stat-number {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    color: var(--color-gray-900);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    margin-bottom: var(--space-1);
}

@media (min-width: 1024px) {
    .trust-strip__stat-number {
        font-size: var(--text-4xl);
    }
}

.trust-strip__stat-label {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    font-weight: var(--font-medium);
}

.trust-strip__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.trust-strip__logo {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gray-300);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    white-space: nowrap;
}

/* ── How It Works ───────────────────────────────────── */
.how-it-works {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    position: relative;
}

@media (min-width: 768px) {
    .how-it-works {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
}

.how-it-works__step {
    text-align: center;
    position: relative;
}

.how-it-works__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    color: var(--color-white);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-5);
    position: relative;
    z-index: 1;
}

/* Connector line between steps (desktop only) */
@media (min-width: 768px) {
    .how-it-works__step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 28px;
        left: calc(50% + 36px);
        width: calc(100% - 72px);
        height: 2px;
        background: var(--color-gray-200);
        z-index: 0;
    }
}

.how-it-works__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
}

.how-it-works__text {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    line-height: var(--leading-relaxed);
    max-width: 280px;
    margin: 0 auto;
}

/* ── Differentiator Blocks ──────────────────────────── */
.differentiator {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 768px) {
    .differentiator {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }

    .differentiator--reverse .differentiator__visual {
        order: -1;
    }
}

.differentiator__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.differentiator__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.differentiator__label svg {
    width: 18px;
    height: 18px;
}

.differentiator__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-gray-900);
    line-height: var(--leading-tight);
}

@media (min-width: 1024px) {
    .differentiator__title {
        font-size: var(--text-3xl);
    }
}

.differentiator__text {
    font-size: var(--text-base);
    color: var(--color-gray-500);
    line-height: var(--leading-relaxed);
}

.differentiator__visual {
    aspect-ratio: 4 / 3;
    background: var(--gradient-subtle);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.differentiator__visual-placeholder {
    color: var(--color-gray-300);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

/* ── Feature Showcase (Stripe-style split + stacked cards) ── */
.feature-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: center;
}

@media (min-width: 768px) {
    .feature-showcase {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }
}

@media (min-width: 1024px) {
    .feature-showcase {
        grid-template-columns: 5fr 6fr;
        gap: var(--space-16);
    }
}

/* -- Left column: content -- */
.feature-showcase__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.feature-showcase__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.feature-showcase__label svg {
    width: 18px;
    height: 18px;
}

.feature-showcase__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-gray-900);
    line-height: var(--leading-tight);
}

@media (min-width: 1024px) {
    .feature-showcase__title {
        font-size: var(--text-4xl);
    }
}

.feature-showcase__text {
    font-size: var(--text-base);
    color: var(--color-gray-500);
    line-height: var(--leading-relaxed);
    max-width: 480px;
}

/* Checklist items */
.feature-showcase__checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.feature-showcase__check-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-gray-700);
    font-weight: var(--font-medium);
}

.feature-showcase__check-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-showcase__check-icon svg {
    width: 12px;
    height: 12px;
    stroke: var(--color-white);
    stroke-width: 3;
    fill: none;
}

/* -- Right column: scrolling card deck (Stripe-style) -- */
.feature-showcase__cards {
    position: relative;
    height: 320px;
    overflow: hidden;
    /* Gradient mask: fade bottom cards to white — no ugly flat edge */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}

@media (min-width: 768px) {
    .feature-showcase__cards {
        height: 360px;
    }
}

.showcase-card {
    position: absolute;
    left: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    will-change: transform, opacity;
    /* Default hidden state */
    opacity: 0;
    pointer-events: none;
}

/* 
 * Slot system: 3 visible cards
 * Slot 0 = top, flush left, full opacity
 * Slot 1 = middle, offset right, slightly faded 
 * Slot 2 = bottom, SAME offset as slot 1, more faded
 */

/* All transitions use the same smooth easing */
.showcase-card.sc-animate {
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Slot 0: Top card — full width, prominent */
.showcase-card[data-slot="0"] {
    top: 0;
    left: 0;
    right: 8%;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 3;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.1), 0 4px 8px -4px rgba(0, 0, 0, 0.06);
}

/* Slot 1: Middle card — offset right, dimmed */
.showcase-card[data-slot="1"] {
    top: 0;
    left: 6%;
    right: 2%;
    opacity: 0.7;
    pointer-events: none;
    transform: translateY(105px);
    z-index: 2;
}

@media (min-width: 768px) {
    .showcase-card[data-slot="1"] {
        transform: translateY(115px);
    }
}

/* Slot 2: Bottom card — same offset as slot 1, more faded */
.showcase-card[data-slot="2"] {
    top: 0;
    left: 6%;
    right: 2%;
    opacity: 0.4;
    pointer-events: none;
    transform: translateY(210px);
    z-index: 1;
}

@media (min-width: 768px) {
    .showcase-card[data-slot="2"] {
        transform: translateY(230px);
    }
}

/* Exit UP: top card peels upward and shrinks — physical leafing feel */
.showcase-card[data-slot="exit-up"] {
    top: 0;
    left: 0;
    right: 8%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-110px) scale(0.95);
    z-index: 4;
}

/* Enter from bottom: new card slides in from below */
.showcase-card[data-slot="enter-bottom"] {
    top: 0;
    left: 6%;
    right: 2%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(300px);
    z-index: 0;
}

/* Card icon badge — inline layout */
.showcase-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
}

.showcase-card__icon svg {
    width: 20px;
    height: 20px;
}

.showcase-card__icon--purple {
    background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
}

.showcase-card__icon--blue {
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
}

.showcase-card__icon--teal {
    background: linear-gradient(135deg, #0D9488 0%, #14B8A6 100%);
}

.showcase-card__icon--amber {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
}

.showcase-card__icon--rose {
    background: linear-gradient(135deg, #E11D48 0%, #F43F5E 100%);
}

/* Card body */
.showcase-card__body {
    flex: 1;
    min-width: 0;
}

/* Card title */
.showcase-card__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
}

/* Card metadata row */
.showcase-card__meta {
    display: flex;
    gap: var(--space-6);
}

.showcase-card__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.showcase-card__meta-label {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    font-weight: var(--font-medium);
}

.showcase-card__meta-value {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    font-weight: var(--font-medium);
}

/* Divider between meta columns */
.showcase-card__divider {
    width: 1px;
    align-self: stretch;
    background: var(--color-gray-200);
}

/* Reversed variant (visual on the left, content on the right) */
@media (min-width: 768px) {
    .feature-showcase--reverse .feature-showcase__cards {
        order: -1;
    }
}

/* ── Integrations Strip ─────────────────────────────── */
.integrations__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .integrations__logos {
        gap: var(--space-6);
    }
}

.integrations__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gray-600);
    transition: all var(--duration-normal) var(--ease-out);
}

.integrations__logo:hover {
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.integrations__logo svg {
    width: 20px;
    height: 20px;
    color: var(--color-gray-400);
}

/* ── Testimonial ────────────────────────────────────── */
.testimonial {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.testimonial__quote {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    color: var(--color-gray-800);
    line-height: var(--leading-relaxed);
    font-style: italic;
    margin-bottom: var(--space-8);
    position: relative;
}

@media (min-width: 1024px) {
    .testimonial__quote {
        font-size: var(--text-2xl);
    }
}

.testimonial__quote::before {
    content: '\201C';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    color: var(--color-primary-200);
    font-family: Georgia, serif;
    line-height: 1;
}

.testimonial__author {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-gray-900);
}

.testimonial__role {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-top: var(--space-1);
}

/* ── Pain Card Title (refactored) ───────────────────── */
.pain-card__title {
    font-weight: var(--font-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
}

.pain-card__desc {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

/* ══════════════════════════════════════════════════════
   HERO FLOW ANIMATION
   Stripe-style animated product demo
   ══════════════════════════════════════════════════════ */

/* ── Flow Stage Container ──────────────────────────── */
.flow-stage {
    position: relative;
    width: 100%;
    height: 520px;
    margin-top: var(--space-12);
}

@media (min-width: 1024px) {
    .flow-stage {
        margin-top: 0;
        height: 540px;
    }
}

/* ── Shared UI Window ──────────────────────────────── */
.ui-window {
    position: absolute;
    border-radius: 12px;
    border: 1px solid #e3e3e0;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: white;
    opacity: 0;
    transform: translateY(20px);
    font-family: 'Inter', -apple-system, sans-serif;
}

.ui-window.show {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ui-window.glow {
    box-shadow: 0 8px 60px rgba(79, 70, 229, 0.15), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.win-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fafafa;
    border-bottom: 1px solid #e3e3e0;
}

.win-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dot-r {
    background: #ff5f57;
}

.dot-y {
    background: #ffbd2e;
}

.dot-g {
    background: #28c840;
}

.win-title {
    margin-left: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7280;
}

/* ── Phone Mockup (Invoice Scanner) ────────────────── */
.win-phone {
    top: 0;
    left: 0;
    width: 200px;
    border-radius: 24px;
    border: 3px solid #1a1a1a;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    z-index: 10;
}

.win-phone .win-bar {
    display: none;
}

.phone-notch {
    width: 80px;
    height: 6px;
    background: #1a1a1a;
    border-radius: 0 0 8px 8px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.phone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 6px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

.phone-header-title {
    font-size: 0.6rem;
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 4px;
}

.phone-header-badge {
    font-size: 0.5rem;
    font-weight: 600;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    padding: 1px 6px;
    border-radius: 100px;
}

/* Invoice Receipt Styling (realistic) */
.invoice-body {
    padding: 12px;
    font-size: 0.63rem;
    color: #6b7280;
    position: relative;
    background: white;
    min-height: 280px;
}

.inv-company {
    text-align: center;
    font-weight: 800;
    font-size: 0.72rem;
    color: #1a1a1a;
    letter-spacing: 0.02em;
}

.inv-sub {
    text-align: center;
    font-size: 0.52rem;
    color: #9ca3af;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #d1d5db;
    line-height: 1.4;
}

.inv-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 0.58rem;
}

.inv-row.bold {
    font-weight: 700;
    color: #1a1a1a;
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
    padding-top: 5px;
    font-size: 0.65rem;
}

/* Scan Beam */
.scan-beam {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #4f46e5 30%, rgba(79, 70, 229, 0.6) 70%, transparent 100%);
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

.scan-beam.active {
    opacity: 1;
    animation: scanBeam 2s ease-in-out forwards;
}

@keyframes scanBeam {
    from {
        top: 0;
    }

    to {
        top: calc(100% - 3px);
    }
}

/* ── Stock Warehouse Window ────────────────────────── */
.win-stock {
    bottom: 0;
    left: 20px;
    width: 340px;
    z-index: 15;
}

.stock-header {
    padding: 10px 14px;
    border-bottom: 1px solid #e3e3e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f8fafc, #f0f4ff);
}

.stock-header h3 {
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stock-header h3 svg {
    width: 14px;
    height: 14px;
    color: #4f46e5;
}

.stock-live {
    font-size: 0.6rem;
    font-weight: 600;
    color: #059669;
    display: flex;
    align-items: center;
    gap: 4px;
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #059669;
    opacity: 0;
    transition: opacity 0.3s;
}

.live-dot.pulse {
    opacity: 1;
    animation: livePulse 1.5s ease infinite;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4);
    }

    50% {
        opacity: 0.6;
        box-shadow: 0 0 0 4px rgba(5, 150, 105, 0);
    }
}

.stock-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #f0f0ee;
}

.stock-item {
    background: white;
    padding: 10px 12px;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.stock-item.show {
    opacity: 1;
    transform: scale(1);
}

.stock-item.highlight {
    background: #eef2ff;
    transition: background 0.3s;
}

.stock-item.highlight-off {
    background: white;
    transition: background 1.5s ease;
}

.stock-item.highlight-red {
    background: #fef2f2;
    transition: background 0.3s;
}

.stock-item.highlight-red-off {
    background: white;
    transition: background 1.5s ease;
}

.stock-item-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.stock-qty {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
}

.stock-qty.updated {
    color: #4f46e5;
}

.stock-qty.decreased {
    color: #dc2626;
}

.stock-unit {
    font-size: 0.55rem;
    color: #9ca3af;
    font-weight: 500;
}

.stock-delta {
    font-size: 0.62rem;
    font-weight: 700;
    color: #059669;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.3s;
}

.stock-delta.show {
    opacity: 1;
    transform: translateY(0);
}

.stock-delta.negative {
    color: #dc2626;
}

/* ── Receipt Confirmation Window ───────────────────── */
.win-receipt {
    top: 10px;
    right: 0;
    width: 340px;
    z-index: 5;
}

.receipt-header {
    padding: 10px 14px;
    border-bottom: 1px solid #e3e3e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.receipt-header h3 {
    font-size: 0.8rem;
    font-weight: 700;
}

.receipt-badge {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 100px;
    background: #f3f4f6;
    color: #9ca3af;
    transition: all 0.3s;
}

.receipt-table {
    width: 100%;
    font-size: 0.68rem;
}

.receipt-table th {
    padding: 6px 10px;
    font-size: 0.56rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    border-bottom: 1px solid #e3e3e0;
    background: #fafafa;
}

.receipt-table th:last-child {
    text-align: right;
}

.receipt-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #f3f4f6;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 0.64rem;
}

.receipt-table td:last-child {
    text-align: right;
    font-weight: 600;
}

.new-row {
    opacity: 0;
    transform: translateY(-6px);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.new-row.show {
    opacity: 1;
    transform: translateY(0);
}

.new-row.flash td {
    background: #eef2ff;
    transition: background 1.2s ease;
}

.new-row.flash-off td {
    background: transparent;
}

.status-badge {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 100px;
}

.status-matched {
    background: #ecfdf5;
    color: #059669;
}

.status-new {
    background: #fffbeb;
    color: #d97706;
}

/* Approve bar */
.approve-row {
    padding: 10px 14px;
    border-top: 1px solid #e3e3e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.approve-total {
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity 0.3s;
}

.approve-total.show {
    opacity: 1;
}

.approve-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.approve-btn.hidden {
    background: #f3f4f6;
    color: #9ca3af;
}

.approve-btn.ready {
    background: #4f46e5;
    color: white;
}

.approve-btn.loading {
    background: #4f46e5;
    color: white;
    opacity: 0.85;
}

.approve-btn.done {
    background: #059669;
    color: white;
}

.spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* ── POS Terminal Window ───────────────────────────── */
.win-pos {
    bottom: 50px;
    right: 10px;
    width: 200px;
    z-index: 20;
    border-radius: 14px;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pos-header {
    padding: 8px 12px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
}

.pos-header-title {
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pos-header-title svg {
    width: 12px;
    height: 12px;
}

.pos-order-badge {
    font-size: 0.5rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 8px;
    border-radius: 100px;
}

.pos-body {
    padding: 8px;
}

.pos-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 6px;
    font-size: 0.6rem;
    border-radius: 6px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pos-item.show {
    opacity: 1;
    transform: translateX(0);
}

.pos-item.flash {
    background: #fef2f2;
}

.pos-item-name {
    font-weight: 600;
    color: #1a1a1a;
}

.pos-item-price {
    font-weight: 700;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

.pos-total {
    display: flex;
    justify-content: space-between;
    padding: 6px;
    margin-top: 4px;
    border-top: 1px solid #e5e7eb;
    font-size: 0.68rem;
    font-weight: 800;
    color: #1a1a1a;
    opacity: 0;
    transition: opacity 0.3s;
}

.pos-total.show {
    opacity: 1;
}

.pos-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 7px;
    margin-top: 6px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.pos-pay-btn.hidden {
    background: #e5e7eb;
    color: #9ca3af;
}

.pos-pay-btn.ready {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: white;
}

.pos-pay-btn.done {
    background: #059669;
    color: white;
}

/* ── Animated Cursor ───────────────────────────────── */
.fake-cursor {
    position: absolute;
    width: 18px;
    height: 22px;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: top 1s cubic-bezier(0.22, 1, 0.36, 1),
        left 1s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s;
}

.fake-cursor.show {
    opacity: 1;
}

.fake-cursor svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.click-ripple {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(79, 70, 229, 0.3);
    pointer-events: none;
    transform: scale(0);
    opacity: 1;
    z-index: 99;
}

.click-ripple.animate {
    animation: ripple 0.5s ease-out forwards;
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* ── Flow Stage Responsive ─────────────────────────── */
@media (max-width: 1023px) {
    .flow-stage {
        height: 400px;
        overflow: visible;
        margin-top: var(--space-6);
    }
}

/* Phones: hide the complex multi-window animation entirely */
@media (max-width: 640px) {
    .hero__demo-window {
        display: none;
    }
    
    .hero {
        text-align: center;
    }
    
    .hero__content {
        max-width: 100%;
    }
}

@media (max-width: 1023px) {
    .ui-window {
        font-size: 13px;
    }

    /* Phone: narrow, left side */
    .win-phone {
        width: 190px !important;
        top: 10px !important;
        left: 2% !important;
        z-index: 2;
    }

    .win-phone .invoice-body {
        font-size: 11px;
        min-height: 280px;
        padding: 14px 12px;
    }

    /* Receipt: slightly offset, layered on top */
    .win-receipt {
        width: 88% !important;
        top: 0 !important;
        left: 6% !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 3;
    }

    /* Stock: bigger, shifted down */
    .win-stock {
        width: 92% !important;
        top: 30px !important;
        left: 4% !important;
        bottom: auto !important;
        z-index: 4;
    }

    /* POS: compact, right side */
    .win-pos {
        width: 190px !important;
        top: 5px !important;
        right: 2% !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 5;
    }

    .stock-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
}

/* ── Accessibility ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .ui-window,
    .scan-beam,
    .new-row,
    .stock-item,
    .pos-item,
    .fake-cursor {
        transition: none !important;
        animation: none !important;
    }

    .hero__badge::after {
        animation: none !important;
    }
}

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

        :root {
            --color-primary: #2563EB;
            --color-primary-dark: #1D4ED8;
            --color-primary-50: #EFF6FF;
            --color-primary-100: #DBEAFE;
            --color-primary-200: #BFDBFE;
            --color-primary-600: #2563EB;
            --color-primary-700: #1D4ED8;
            --gradient-primary: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);

            --color-white: #FFFFFF;
            --color-gray-50: #F8FAFC;
            --color-gray-100: #F1F5F9;
            --color-gray-200: #E2E8F0;
            --color-gray-300: #CBD5E1;
            --color-gray-400: #94A3B8;
            --color-gray-500: #64748B;
            --color-gray-600: #475569;
            --color-gray-700: #334155;
            --color-gray-800: #1E293B;
            --color-gray-900: #0F172A;

            --color-success: #10B981;
            --color-warning: #F59E0B;
            --color-error: #EF4444;

            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;
            --radius-2xl: 1.5rem;

            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

            --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        }

        body {
            font-family: var(--font-sans);
            background: var(--color-gray-50);
            color: var(--color-gray-900);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        /* ── Section Layout ────────────────────────── */
        .features {
            padding: 5rem 0;
            overflow: hidden;
            /* allow visual to bleed */
        }

        .features__inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Header */
        .features__header {
            margin-bottom: 3.5rem;
        }

        .features__label {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8125rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-primary);
            margin-bottom: 0.75rem;
        }

        .features__title {
            font-size: clamp(1.75rem, 4vw, 2.5rem);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -0.025em;
            color: var(--color-gray-900);
            max-width: 560px;
        }

        .features__subtitle {
            margin-top: 1rem;
            font-size: 1.0625rem;
            color: var(--color-gray-500);
            max-width: 520px;
            line-height: 1.6;
        }

        /* ── Split Layout ──────────────────────────── */
        .features__split {
            display: flex;
            flex-direction: column-reverse;
            gap: 2.5rem;
            align-items: stretch;
        }

        @media (min-width: 1024px) {
            .features__split {
                display: grid;
                grid-template-columns: minmax(0, 480px) 1fr;
                gap: 3rem;
                align-items: start;
            }
        }

        /* ── Accordion Cards ───────────────────────── */
        .feat-card {
            border: 1px solid var(--color-gray-200);
            border-radius: var(--radius-xl);
            background: var(--color-white);
            transition: all 0.35s var(--ease-out);
            overflow: hidden;
        }

        .feat-card+.feat-card {
            margin-top: 0.75rem;
        }

        .feat-card.active {
            border-color: var(--color-primary-200);
            box-shadow: 0 0 0 1px var(--color-primary-100), var(--shadow-lg);
        }

        /* Header row */
        .feat-card__header {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.125rem 1.25rem;
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none;
            transition: background 0.2s;
        }

        .feat-card__header:hover {
            background: var(--color-gray-50);
        }

        .feat-card.active .feat-card__header {
            background: var(--color-primary-50);
        }

        /* Icon circle */
        .feat-card__icon {
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-gray-100);
            color: var(--color-gray-500);
            transition: all 0.35s var(--ease-out);
        }

        .feat-card.active .feat-card__icon {
            background: var(--gradient-primary);
            color: white;
        }

        .feat-card__text {
            flex: 1;
            min-width: 0;
        }

        .feat-card__name {
            font-size: 1rem;
            font-weight: 650;
            color: var(--color-gray-900);
            line-height: 1.3;
        }

        .feat-card__tagline {
            font-size: 0.8125rem;
            color: var(--color-gray-400);
            margin-top: 0.125rem;
            line-height: 1.4;
        }

        .feat-card.active .feat-card__tagline {
            color: var(--color-gray-500);
        }

        /* Chevron */
        .feat-card__chevron {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            color: var(--color-gray-400);
            transition: transform 0.35s var(--ease-out);
        }

        .feat-card.active .feat-card__chevron {
            transform: rotate(180deg);
            color: var(--color-primary);
        }

        /* Expandable body */
        .feat-card__body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.45s var(--ease-out), opacity 0.3s;
            opacity: 0;
        }

        .feat-card.active .feat-card__body {
            max-height: 400px;
            opacity: 1;
        }

        .feat-card__content {
            padding: 0 1.25rem 1.25rem 1.25rem;
        }

        .feat-card__desc {
            font-size: 0.9375rem;
            color: var(--color-gray-600);
            line-height: 1.65;
            margin-bottom: 1rem;
        }

        /* Feature bullets */
        .feat-bullets {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .feat-bullets li {
            display: flex;
            align-items: flex-start;
            gap: 0.625rem;
            font-size: 0.875rem;
            color: var(--color-gray-700);
            line-height: 1.5;
        }

        .feat-bullets li svg {
            flex-shrink: 0;
            margin-top: 2px;
            color: var(--color-primary);
        }

        /* ── Visualization Panel ───────────────────── */
        .features__visual {
            position: relative;
            min-height: 420px;
            overflow: visible;
        }

        @media (min-width: 1024px) {
            .features__visual {
                /* Bleed right beyond grid */
                margin-right: -6vw;
            }
        }

        .feat-visual {
            position: absolute;
            inset: 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(12px);
            transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s 0.4s;
            pointer-events: none;
            overflow: visible;
        }

        .feat-visual.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
            transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s 0s;
        }

        /* ── Layered Scene (Stripe-style) ────────────── */
        .vis-scene {
            position: relative;
            overflow: visible;
        }

        /* Desktop: scene uses dashboard's natural height */
        @media (min-width: 1024px) {
            .vis-scene {
                padding: 0 0 60px;
            }
        }

        /* Back layer — the main dashboard, now absolute */
        .vis-layer--back {
            position: relative;
            z-index: 1;
        }

        @media (min-width: 1024px) {
            .vis-layer--back {
                position: relative;
                z-index: 1;
                transform: scale(0.92);
                transform-origin: top center;
            }
        }

        /* Front floating card — overlaps back layer */
        .vis-layer--front {
            position: absolute;
            z-index: 2;
            border-radius: var(--radius-xl);
            background: #ffffff;
            box-shadow:
                0 20px 60px -10px rgba(0, 0, 0, 0.15),
                0 8px 24px -6px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(0, 0, 0, 0.04);
            overflow: hidden;
        }

        /* Desktop: invoice peeks from bottom-right of dashboard */
        @media (min-width: 1024px) {
            .vis-layer--front {
                bottom: -60px;
                right: -30px;
                top: auto;
                transform: none;
                width: 42%;
                max-width: 260px;
            }
        }

        /* Mobile: front card becomes inline below */
        @media (max-width: 1023px) {
            .vis-layer--front {
                position: relative;
                margin-top: 12px;
                width: 100%;
                box-shadow:
                    0 8px 24px -6px rgba(0, 0, 0, 0.1),
                    0 0 0 1px rgba(0, 0, 0, 0.04);
            }
        }

        /* Accent — small floating notification pill */
        .vis-accent {
            position: absolute;
            z-index: 3;
            border-radius: 12px;
            background: #ffffff;
            box-shadow:
                0 12px 40px -8px rgba(0, 0, 0, 0.12),
                0 4px 12px -2px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(0, 0, 0, 0.04);
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-gray-800);
            white-space: nowrap;
        }

        /* Desktop: alert overlaps top-right corner of dashboard */
        @media (min-width: 1024px) {
            .vis-accent {
                top: 10px;
                right: -10px;
            }
        }

        /* Mobile: accent inline */
        @media (max-width: 1023px) {
            .vis-accent {
                position: relative;
                margin-top: 10px;
                top: auto;
                right: auto;
                width: fit-content;
            }
        }

        /* Accent icon circle */
        .vis-accent__icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .vis-accent__icon svg {
            width: 14px;
            height: 14px;
        }

        .vis-accent__icon--warning {
            background: #FEF3C7;
            color: #D97706;
        }

        .vis-accent__icon--success {
            background: #D1FAE5;
            color: #059669;
        }

        .vis-accent__icon--danger {
            background: #FEE2E2;
            color: #DC2626;
        }

        .vis-accent__icon--info {
            background: #DBEAFE;
            color: #2563EB;
        }

        .vis-accent__text {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .vis-accent__label {
            font-size: 0.5625rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-gray-400);
            font-weight: 600;
        }

        .vis-accent__val {
            font-size: 0.8125rem;
            font-weight: 700;
            color: var(--color-gray-900);
        }

        /* ── Phone frame (mobile inventory mock) ─── */
        .vis-phone {
            position: absolute;
            z-index: 4;
            border-radius: 20px;
            background: #ffffff;
            box-shadow:
                0 24px 80px -12px rgba(0, 0, 0, 0.18),
                0 8px 24px -6px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(0, 0, 0, 0.06),
                inset 0 0 0 1px rgba(255, 255, 255, 0.8);
            overflow: hidden;
            width: 200px;
        }

        .vis-phone__notch {
            width: 60px;
            height: 4px;
            border-radius: 4px;
            background: var(--color-gray-200);
            margin: 8px auto 0;
        }

        .vis-phone__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px 6px;
            border-bottom: 1px solid var(--color-gray-100);
        }

        .vis-phone__title {
            font-size: 0.6875rem;
            font-weight: 700;
            color: var(--color-gray-900);
        }

        .vis-phone__badge {
            font-size: 0.5625rem;
            font-weight: 700;
            color: #fff;
            background: var(--color-emerald);
            padding: 2px 8px;
            border-radius: 6px;
        }

        .vis-phone__row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 12px;
            border-bottom: 1px solid var(--color-gray-50);
            font-size: 0.5625rem;
        }

        .vis-phone__row-name {
            font-weight: 600;
            color: var(--color-gray-800);
            flex: 1;
        }

        .vis-phone__row-unit {
            color: var(--color-gray-400);
            margin: 0 8px;
        }

        .vis-phone__row-input {
            width: 48px;
            padding: 2px 6px;
            border: 1px solid var(--color-gray-200);
            border-radius: 6px;
            font-size: 0.5625rem;
            color: var(--color-gray-600);
            text-align: center;
            background: var(--color-gray-50);
        }

        .vis-phone__footer {
            padding: 6px 12px 10px;
            font-size: 0.5rem;
            color: var(--color-gray-400);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* Desktop: phone peeks from bottom-left of dashboard */
        @media (min-width: 1024px) {
            .vis-phone {
                bottom: -60px;
                left: -15px;
                top: auto;
                transform: none;
            }
        }

        /* Mobile: phone becomes inline */
        @media (max-width: 1023px) {
            .vis-phone {
                position: relative;
                margin-top: 12px;
                width: 100%;
                max-width: 240px;
                top: auto;
                left: auto;
                transform: none;
            }
        }

        /* Second accent pill — attached below phone block */
        .vis-accent--2 {
            top: auto;
            left: 20px;
        }

        @media (min-width: 1024px) {
            .vis-accent--2 {
                bottom: -100px;
                left: 30px;
                top: auto;
                right: auto;
            }
        }

        @media (max-width: 1023px) {
            .vis-accent--2 {
                position: relative;
                margin-top: 10px;
                top: auto;
                left: auto;
                right: auto;
                bottom: auto;
                width: fit-content;
            }
        }

        /* ── Staggered entrance animations ─────────── */
        .feat-visual.active .vis-layer--back {
            animation: visEnter 0.5s var(--ease-out) both;
            animation-delay: 0s;
        }

        .feat-visual.active .vis-layer--front {
            animation: visEnterFloat 0.55s var(--ease-out) both;
            animation-delay: 0.12s;
        }

        .feat-visual.active .vis-accent {
            animation: visEnterAccent 0.45s var(--ease-out) both;
            animation-delay: 0.25s;
        }

        .feat-visual.active .vis-phone {
            animation: visEnterFloat 0.5s var(--ease-out) both;
            animation-delay: 0.18s;
        }

        .feat-visual.active .vis-accent--2 {
            animation: visEnterAccent 0.45s var(--ease-out) both;
            animation-delay: 0.32s;
        }

        /* ── POS Panel scoped position overrides ──── */
        @media (min-width: 1024px) {
            [data-vis="operations"] .vis-accent:not(.vis-accent--2) {
                top: -20px;
                right: -20px;
            }

            [data-vis="operations"] .vis-layer--front {
                bottom: -80px;
                right: -40px;
            }

            [data-vis="operations"] .vis-phone {
                bottom: -80px;
                left: -25px;
            }

            [data-vis="operations"] .vis-accent--2 {
                top: auto;
                right: auto;
                bottom: -130px;
                left: 20px;
            }
        }

        @keyframes visEnter {
            from {
                opacity: 0;
                transform: translateY(16px);
            }

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

        /* Mobile override — no scale */
        @media (max-width: 1023px) {
            @keyframes visEnter {
                from {
                    opacity: 0;
                    transform: translateY(12px);
                }

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

        @keyframes visEnterFloat {
            from {
                opacity: 0;
                transform: translateY(24px) scale(0.96);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes visEnterAccent {
            from {
                opacity: 0;
                transform: translateY(-10px) scale(0.95);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* ── ERP Mock UI (Light) ───────────────────── */
        .mock-erp {
            background: #ffffff;
            border-radius: var(--radius-2xl);
            box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.04);
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        /* ERP Mock Themes to prevent visual monotony */
        
        /* 1. Tinted (Inventory): subtle blue-gray wash */
        .mock-erp--tinted {
            background: #f8fafc;
            box-shadow: var(--shadow-xl), 0 0 0 1px rgba(15, 23, 42, 0.06);
        }
        .mock-erp--tinted .mock-erp__header {
            background: #ffffff;
        }

        /* 2. Minimal (Finance): flat with internal border, no shadow */
        .mock-erp--minimal {
            background: #ffffff;
            box-shadow: none;
            border: 1px solid var(--color-gray-200);
        }

        /* 3. Dark Mode (Team/HR): deep rich sober mode palette */
        .mock-erp--dark {
            background: #0f172a;
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
            color: #f1f5f9;
        }
        .mock-erp--dark .mock-erp__header {
            border-bottom: 1px solid rgba(255,255,255,0.08);
            background: #1e293b;
        }
        .mock-erp--dark .mock-erp__header-title {
            color: #f8fafc;
        }
        .mock-erp--dark .mock-erp__header-sub {
            color: #94a3b8;
        }
        .mock-erp--dark .mock-erp__btn {
            background: rgba(255,255,255,0.05);
            border-color: rgba(255,255,255,0.1);
            color: #e2e8f0;
        }
        .mock-erp--dark .m-stat {
            border-color: rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.02);
        }
        .mock-erp--dark .m-stat__val,
        .mock-erp--dark .m-table td,
        .mock-erp--dark .m-staff-name {
            color: #f8fafc;
        }
        .mock-erp--dark .m-table td {
            border-top-color: rgba(255,255,255,0.06);
        }
        .mock-erp--dark .m-staff-row {
            border-bottom-color: rgba(255,255,255,0.06);
        }

        /* Page header bar — matches real HoreX ERP header */
        .mock-erp__header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--color-gray-100);
        }

        .mock-erp__header-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .mock-erp__header-icon svg {
            width: 16px;
            height: 16px;
            color: white;
        }

        .mock-erp__header-title {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--color-gray-900);
            flex: 1;
            min-width: 0;
        }

        .mock-erp__header-sub {
            font-size: 0.6875rem;
            color: var(--color-gray-400);
            font-weight: 400;
            margin-left: 6px;
        }

        .mock-erp__header-actions {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .mock-erp__btn {
            font-size: 0.625rem;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 6px;
            border: 1px solid var(--color-gray-200);
            background: white;
            color: var(--color-gray-600);
            white-space: nowrap;
        }

        .mock-erp__btn--primary {
            background: linear-gradient(135deg, #2563EB, #1d4ed8);
            border-color: transparent;
            color: white;
        }

        /* Body */
        .mock-erp__body {
            flex: 1;
            padding: 14px 16px;
            overflow: hidden;
        }

        /* ── Reusable ERP components (light) ────────── */

        /* Stat cards row */
        .m-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 12px;
        }

        .m-stat {
            border: 1px solid var(--color-gray-100);
            border-radius: 10px;
            padding: 10px 12px;
        }

        .m-stat__label {
            font-size: 0.625rem;
            color: var(--color-gray-400);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-weight: 600;
        }

        .m-stat__val {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--color-gray-900);
            margin-top: 2px;
        }

        .m-stat__val--green {
            color: #059669;
        }

        .m-stat__val--red {
            color: #dc2626;
        }

        .m-stat__val--blue {
            color: #2563EB;
        }

        /* Table */
        .m-table {
            width: 100%;
            font-size: 0.75rem;
            border-collapse: collapse;
        }

        .m-table th {
            text-align: left;
            font-weight: 600;
            color: var(--color-gray-400);
            padding: 0 4px 8px 0;
            font-size: 0.625rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .m-table th:last-child {
            text-align: right;
            padding-right: 0;
        }

        .m-table td {
            padding: 7px 4px 7px 0;
            border-top: 1px solid var(--color-gray-100);
            color: var(--color-gray-700);
        }

        .m-table td:last-child {
            text-align: right;
            padding-right: 0;
        }

        .m-table .m-amount {
            font-weight: 600;
            color: var(--color-primary);
        }

        .m-table .m-name--link {
            color: var(--color-primary);
            font-weight: 600;
        }

        /* Status badge */
        .m-badge {
            font-size: 0.5625rem;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .m-badge--green {
            background: #D1FAE5;
            color: #065F46;
        }

        .m-badge--yellow {
            background: #FEF3C7;
            color: #92400E;
        }

        .m-badge--red {
            background: #FEE2E2;
            color: #991B1B;
        }

        .m-badge--blue {
            background: #DBEAFE;
            color: #1E40AF;
        }

        .m-badge--gray {
            background: var(--color-gray-100);
            color: var(--color-gray-500);
        }

        /* Status dot inline */
        .m-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }

        .m-dot--green {
            background: #10B981;
        }

        .m-dot--yellow {
            background: #F59E0B;
        }

        .m-dot--red {
            background: #EF4444;
        }

        .m-dot--gray {
            background: var(--color-gray-400);
        }

        /* Section card inside mock */
        .m-card {
            border: 1px solid var(--color-gray-100);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 8px;
        }

        .m-card__title {
            font-size: 0.6875rem;
            font-weight: 700;
            color: var(--color-gray-800);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .m-card__title svg {
            width: 14px;
            height: 14px;
            color: var(--color-gray-400);
        }

        /* Alert card with red left border */
        .m-alert-card {
            border: 1px solid #FCA5A5;
            border-left: 3px solid #EF4444;
            border-radius: 10px;
            padding: 12px;
            background: #FEF2F2;
        }

        .m-alert-card__title {
            font-size: 0.6875rem;
            font-weight: 700;
            color: #991B1B;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .m-alert-item {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            font-size: 0.6875rem;
            color: #7F1D1D;
        }

        .m-alert-item span:last-child {
            font-weight: 700;
            color: #DC2626;
        }

        /* Two-column grid inside body */
        .m-grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        /* Price change delta */
        .m-delta--up {
            color: #059669;
            font-weight: 600;
        }

        .m-delta--down {
            color: #DC2626;
            font-weight: 600;
        }

        /* Rank number */
        .m-rank {
            width: 16px;
            font-size: 0.625rem;
            color: var(--color-gray-400);
            font-weight: 600;
            text-align: center;
            flex-shrink: 0;
        }

        /* Bar progress (light) */
        .m-bar-wrap {
            height: 4px;
            background: var(--color-gray-100);
            border-radius: 2px;
            overflow: hidden;
            flex: 1;
        }

        .m-bar {
            height: 100%;
            border-radius: 2px;
        }

        .m-bar--blue {
            background: var(--color-primary);
        }

        .m-bar--green {
            background: #10B981;
        }

        .m-bar--orange {
            background: #F59E0B;
        }

        .m-bar--red {
            background: #EF4444;
        }

        /* P&L row */
        .m-pnl-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 5px 0;
        }

        .m-pnl-label {
            width: 70px;
            font-size: 0.6875rem;
            color: var(--color-gray-500);
            flex-shrink: 0;
        }

        .m-pnl-val {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-gray-800);
            width: 65px;
            text-align: right;
            flex-shrink: 0;
        }

        /* Avatar */
        .m-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2563EB, #7C3AED);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.5625rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        /* Staff row */
        .m-staff-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 0;
            border-bottom: 1px solid var(--color-gray-100);
        }

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

        .m-staff-name {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-gray-800);
        }

        .m-staff-role {
            font-size: 0.625rem;
            color: var(--color-gray-400);
        }

        /* Tags */
        .m-tag {
            display: inline-flex;
            font-size: 0.5625rem;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 4px;
            background: var(--color-gray-100);
            color: var(--color-gray-600);
            margin-right: 4px;
            margin-bottom: 4px;
        }

        /* Message preview */
        .m-msg {
            border: 1px solid var(--color-gray-100);
            border-radius: 8px;
            padding: 10px;
            margin-top: 8px;
            border-left: 3px solid #10B981;
        }

        .m-msg__from {
            font-size: 0.5625rem;
            color: var(--color-gray-400);
            margin-bottom: 3px;
        }

        .m-msg__text {
            font-size: 0.75rem;
            color: var(--color-gray-600);
            line-height: 1.5;
        }

        /* Order summary */
        .m-order {
            background: var(--color-gray-50);
            border: 1px solid var(--color-gray-100);
            border-radius: 8px;
            padding: 10px;
        }

        .m-order-row {
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: var(--color-gray-600);
            padding: 3px 0;
        }

        .m-order-row--total {
            font-weight: 700;
            color: var(--color-gray-900);
            border-top: 1px solid var(--color-gray-200);
            margin-top: 4px;
            padding-top: 6px;
        }

        /* POS grid */
        .m-pos-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            margin-bottom: 10px;
        }

        .m-pos-item {
            background: var(--color-gray-50);
            border: 1px solid var(--color-gray-100);
            border-radius: 8px;
            padding: 10px 6px;
            text-align: center;
            font-size: 0.6875rem;
            font-weight: 500;
            color: var(--color-gray-700);
        }

        .m-pos-item--active {
            border-color: var(--color-primary);
            background: var(--color-primary-50);
            color: var(--color-primary-700);
        }

        .m-pos-price {
            font-size: 0.5625rem;
            color: var(--color-gray-400);
            margin-top: 2px;
        }

        /* Date range pill */
        .m-date-range {
            font-size: 0.625rem;
            color: var(--color-gray-500);
            border: 1px solid var(--color-gray-200);
            border-radius: 6px;
            padding: 4px 10px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        /* ── Expense breakdown rows (P&L card) ─────── */
        .m-expense-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .m-expense-row__label {
            width: 80px;
            font-size: 0.6875rem;
            font-weight: 600;
            color: var(--color-gray-600);
            flex-shrink: 0;
        }

        .m-expense-row__track {
            flex: 1;
            height: 8px;
            background: var(--color-gray-100);
            border-radius: 4px;
            overflow: hidden;
        }

        .m-expense-row__track > div {
            border-radius: 4px;
        }

        .m-expense-row__value {
            width: 80px;
            text-align: right;
            font-size: 0.6875rem;
            font-weight: 700;
            color: var(--color-gray-800);
            flex-shrink: 0;
        }

        /* ── KPI strip (Marketing Analytics) ─────────── */
        .m-kpi-strip {
            display: flex;
            gap: 0;
            border-bottom: 1px solid var(--color-gray-100);
        }

        .m-kpi-cell {
            flex: 1;
            padding: 12px 14px;
            border-right: 1px solid var(--color-gray-100);
        }

        .m-kpi-cell:last-child {
            border-right: none;
        }

        .m-kpi-cell__label {
            font-size: 0.5625rem;
            font-weight: 600;
            color: var(--color-gray-400);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 2px;
        }

        .m-kpi-cell__value {
            font-size: 1rem;
            font-weight: 800;
            color: var(--color-gray-900);
        }

        .m-kpi-cell__value--success {
            color: #059669;
        }

        .m-kpi-cell__sub {
            font-size: 0.5625rem;
            color: var(--color-gray-400);
            margin-top: 1px;
        }

        /* ── Bar rows (Orders by Channel chart) ──────── */
        .m-bar-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .m-bar-row__label {
            width: 60px;
            font-size: 0.6875rem;
            font-weight: 600;
            color: var(--color-gray-600);
            flex-shrink: 0;
        }

        .m-bar-row__track {
            flex: 1;
            height: 22px;
            background: var(--color-gray-100);
            border-radius: 4px;
            overflow: hidden;
        }

        .m-bar-row__fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, #1e3a8a, #3b82f6);
            display: flex;
            align-items: center;
            padding-left: 8px;
            min-width: fit-content;
        }

        .m-bar-row__fill-text {
            font-size: 0.625rem;
            font-weight: 700;
            color: #ffffff;
            white-space: nowrap;
        }

        .m-bar-row__value {
            width: 36px;
            text-align: right;
            font-size: 0.625rem;
            font-weight: 600;
            color: var(--color-gray-500);
            flex-shrink: 0;
        }

        /* ── Guest Profile Card (CRM) ────────────────── */
        .vis-accent--profile {
            position: absolute;
            z-index: 5;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            width: 180px;
        }

        @media (min-width: 1024px) {
            .vis-accent--profile {
                bottom: -30px;
                left: -10px;
            }
        }

        @media (max-width: 1023px) {
            .vis-accent--profile {
                position: relative;
                margin-top: 12px;
                width: 100%;
                max-width: 200px;
            }
        }

        .m-guest-profile {
            padding: 12px;
        }

        .m-guest-profile__header {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .m-guest-profile__avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1e3a5f, #2563eb);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 0.6875rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .m-guest-profile__name {
            font-size: 0.8125rem;
            font-weight: 700;
            color: #0f172a;
        }

        .m-guest-profile__since {
            font-size: 0.5rem;
            color: #64748b;
        }

        .m-guest-profile__stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
        }

        .m-guest-profile__stat-label {
            font-size: 0.4375rem;
            font-weight: 600;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .m-guest-profile__stat-value {
            font-size: 0.875rem;
            font-weight: 800;
            color: #0f172a;
        }

        /* ── Invoice accent variant ──────────────────── */

        @media (min-width: 1024px) {
            .vis-accent--invoice {
                top: -20px;
                right: -10px;
            }
        }

        /* ── Mobile Visual ─────────────────────────── */
        @media (max-width: 1023px) {
            .features__visual {
                min-height: 360px;
                margin-top: 0.5rem;
            }

            .feat-visual {
                position: relative;
                display: none;
            }

            .feat-visual.active {
                display: block;
            }

            .mock-window {
                height: auto;
            }
        }

        /* ── Phone-specific: simplify visuals ─────── */
        @media (max-width: 640px) {
            .features { padding: 3rem 0; }
            .features__header { margin-bottom: 2rem; }
            .features__visual { min-height: 280px; }
            
            /* Hide floating accent pills — too small to read */
            .vis-accent { display: none; }
            
            /* Hide phone mockup — secondary element */
            .vis-phone { display: none; }
            
            /* Tighter accordion spacing */
            .feat-card__header { padding: 1rem; gap: .75rem; }
            .feat-card__content { padding: 0 1rem 1rem; }
            .feat-card__icon { width: 38px; height: 38px; }
        }


/* ══════════════════════════════════════════════════
   Solutions Tabs — "Built for your type of business"
   Tab pills + expandable photo panels
   ══════════════════════════════════════════════════ */

.solutions {
    padding: var(--space-20) 0;
    background: var(--color-white);
}

.solutions__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.solutions__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.solutions__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--color-gray-900);
}

.solutions__subtitle {
    margin-top: 1rem;
    font-size: 1.0625rem;
    color: var(--color-gray-500);
    line-height: 1.6;
}

/* ── Tab Pills ─────────────────────────────── */
.sol-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.sol-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    color: var(--color-gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.sol-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(37, 99, 235, 0.04);
}

.sol-tab.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.sol-tab svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Panel ─────────────────────────────────── */
.sol-panels {
    position: relative;
    min-height: 380px;
}

.sol-panel {
    display: none;
    opacity: 0;
    animation: solFadeIn 0.4s ease forwards;
}

.sol-panel.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

@keyframes solFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* Content side */
.sol-panel__content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sol-panel__heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.3;
}

.sol-panel__points {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sol-panel__point {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}

.sol-panel__point-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-top: 2px;
}

.sol-panel__point-icon svg {
    width: 14px;
    height: 14px;
}

.sol-panel__point-text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.125rem;
}

.sol-panel__point-text span {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    line-height: 1.5;
}

.sol-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: 0.5rem;
    transition: gap 0.2s ease;
}

.sol-panel__cta:hover {
    gap: 0.625rem;
}

.sol-panel__cta svg {
    width: 16px;
    height: 16px;
}

/* Photo side */
.sol-panel__photo {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--color-gray-100);
}

.sol-panel__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Mobile ────────────────────────────────── */
@media (max-width: 768px) {
    .sol-tabs {
        gap: 0.375rem;
        margin-bottom: 2rem;
    }

    .sol-tab {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }

    .sol-panel.active {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .sol-panel__photo {
        order: -1;
        aspect-ratio: 16 / 10;
    }

    .sol-panel__heading {
        font-size: 1.25rem;
    }

    .sol-panels {
        min-height: auto;
    }
}

/* ══════════════════════════════════════════════════
   Solutions V2 — "One Platform. Every Format."
   Hero cards + product cards + mockup scenes
   ══════════════════════════════════════════════════ */

.sol2 {
    padding: 6rem 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.sol2-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

/* Header */
.sol2-header {
    text-align: center;
    margin-bottom: 4rem;
}

.sol2-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem .4rem .4rem;
    border-radius: 999px;
    background: #F8FAFC;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: .875rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 1.5rem;
}

.sol2-pill__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #2563EB);
}

.sol2-pill__icon svg {
    width: 12px;
    height: 12px;
}

.sol2-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.sol2-title span {
    background: var(--gradient-primary, linear-gradient(135deg, #2563EB 0%, #7C3AED 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sol2-sub {
    margin-top: 1.25rem;
    font-size: 1.125rem;
    color: #64748b;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

/* Stats */
.sol2-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.sol2-stat__val {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.sol2-stat__val em {
    font-style: normal;
    color: var(--color-primary, #2563EB);
}

.sol2-stat__label {
    font-size: .8125rem;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 2px;
}

/* ── Hero cards row ──────────────────────── */
.sol2-heroes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}

.sol2-hero {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sol2-hero:hover {
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: #cbd5e1;
}

.sol2-hero__content {
    padding: 1.5rem 1.75rem 1.75rem;
    position: relative;
    z-index: 10;
}

.sol2-hero__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.sol2-hero__text {
    font-size: .875rem;
    color: #64748b;
    line-height: 1.55;
    font-weight: 400;
    margin-bottom: .75rem;
}

.sol2-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: #2563eb;
    transition: gap .2s;
}

.sol2-hero:hover .sol2-hero__cta {
    gap: 10px;
}

.sol2-hero__cta svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    transition: transform .2s ease;
}

.sol2-hero:hover .sol2-hero__cta svg {
    transform: translateX(2px);
}

/* Mockup wrapper — contained within rounded area */
.sol2-hero__mockup {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    z-index: 1;
    background: #f8fafc;
    margin: 0 12px 12px;
    border-radius: 12px;
    overflow: hidden;
    min-height: 340px;
    border: 1px solid #f1f5f9;
}

.ambient-glow {
    position: absolute;
    width: 150%;
    height: 150%;
    top: 20%;
    left: -25%;
    background: radial-gradient(circle at center, rgba(37, 99, 235, 0.08) 0%, rgba(124, 58, 237, 0.05) 40%, transparent 70%);
    filter: blur(60px);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

.ambient-glow--green {
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.15) 0%, rgba(56, 189, 248, 0.1) 40%, transparent 70%);
}

/* ── Mockup Compositing Framework ───────────────── */
.mock-compose {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2rem;
}

/* ── Scene 1: Smartphone ──────────────────────── */
.scene-1 {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.scene-1__tablet {
    width: 380px;
    height: 300px;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0,0,0,0.06);
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.scene-1__phone {
    width: 280px;
    height: 380px;
    background: #fff;
    border-radius: 36px 36px 0 0;
    box-shadow: 0 -20px 40px rgba(0, 0, 0, .08), inset 0 0 0 6px #0f172a, inset 0 0 0 7px #334155;
    position: relative;
    z-index: 2;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.scene-1__phone-notch {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 24px;
    background: #0f172a;
    border-radius: 0 0 12px 12px;
    z-index: 10;
}

.scene-1__float-left {
    position: absolute;
    top: 120px;
    left: -40px;
    z-index: 3;
    background: #fff;
    border-radius: 12px;
    padding: .75rem 1rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: .5rem;
    animation: float1 6s ease-in-out infinite;
    width: max-content;
}

.scene-1__float-right {
    position: absolute;
    bottom: 60px;
    right: -30px;
    z-index: 3;
    background: #111;
    color: #fff;
    border-radius: 99px;
    padding: .75rem 1.25rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .875rem;
    animation: float2 5s ease-in-out infinite reverse;
}

/* ── Scene 2: Dark Kitchens (Tablet) ────────────── */
.scene-2 {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.scene-2__tablet {
    width: 380px;
    height: 300px;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0,0,0,0.06);
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.scene-2__float-top {
    position: absolute;
    top: -10px;
    right: -20px;
    z-index: 3;
    background: #fff;
    border-radius: 12px;
    padding: .5rem .75rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .875rem;
    color: #15803d;
    animation: float1 5s ease-in-out infinite;
}

.scene-2__float-card {
    position: absolute;
    bottom: 60px;
    left: -40px;
    z-index: 3;
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    width: 180px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    animation: float2 6s ease-in-out infinite;
}

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

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

/* ── Bottom product cards (Premium Split Layout) ────────── */
.sol2-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.sol2-product {
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all .3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sol2-product:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.sol2-product__img {
    height: 180px;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 12px 12px 0;
}

.sol2-product__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
    border-radius: 10px;
}

.sol2-product:hover .sol2-product__img img {
    transform: scale(1.04);
}

.sol2-product__body {
    padding: 1.125rem 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sol2-product__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .375rem;
    letter-spacing: -0.01em;
}

.sol2-product__sub {
    font-size: .8125rem;
    color: #64748b;
    line-height: 1.55;
    font-weight: 400;
    flex: 1;
    margin-bottom: .75rem;
}

.sol2-product__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    transition: gap .2s ease;
}

.sol2-product:hover .sol2-product__cta {
    gap: 10px;
}

.sol2-product__cta svg {
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
}

.sol2-product:hover .sol2-product__cta svg {
    transform: translateX(2px);
}

/* ── Responsive ─────────────────────────── */
@media (max-width:1024px) {
    .sol2-heroes {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .sol2-hero {
        min-height: auto;
        flex-direction: column-reverse;
        padding: 3rem 2rem 0;
    }

    .sol2-hero__mockup {
        padding-top: 1rem;
        padding-bottom: 3rem;
    }

    .ambient-glow {
        top: 10%;
    }

    .sol2-products {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

    .scene-1__float-left {
        left: 10px;
    }

    .scene-1__float-right {
        right: 10px;
    }

    .scene-2__float-card {
        left: 10px;
        bottom: 20px;
    }

    .scene-2__float-top {
        right: 10px;
        top: -10px;
    }

    .scene-1__phone,
    .scene-1__tablet,
    .scene-2__tablet {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-width:640px) {
    .sol2-products {
        grid-template-columns: 1fr;
    }

    .sol2-title {
        font-size: 2rem;
    }

    .sol2-stats {
        gap: 1.5rem;
        justify-content: space-between;
    }

    .sol2-stat {
        text-align: left;
        width: calc(50% - 1rem);
    }

    .sol2-hero {
        padding: 2rem 1.5rem 0;
        border-radius: 20px;
    }
    
    /* Hide floating accent pills — overflow and unreadable on phones */
    .scene-1__float-left,
    .scene-1__float-right,
    .scene-2__float-top,
    .scene-2__float-card {
        display: none;
    }
    
    /* Reduce mockup container height */
    .sol2-hero__mockup {
        min-height: 200px;
    }
    
    /* Scale down device mockups */
    .scene-1__phone {
        width: 220px;
        height: 300px;
    }
    
    .scene-1__tablet,
    .scene-2__tablet {
        width: 100%;
        max-width: 280px;
        height: auto;
        min-height: 200px;
    }
    
    .sol2-header { margin-bottom: 2.5rem; }
    .sol2-sub { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════
   PAIN BENTO — Bento grid section for pain points
   ═══════════════════════════════════════════════════════ */

/* ═══ SECTION ═══ */
.pb { padding: 6rem 1.25rem 7rem; position: relative; overflow: hidden; background: #f3f4f6; }
.pb::before {
    content:''; position:absolute; top:-15%; right:-10%; width:45%; height:55%;
    background: radial-gradient(ellipse at 50% 50%, rgba(196,181,253,0.25) 0%, rgba(147,197,253,0.12) 45%, transparent 70%);
    filter: blur(60px); pointer-events:none; z-index:0;
}
.pb::after {
    content:''; position:absolute; bottom:-10%; left:-10%; width:40%; height:45%;
    background: radial-gradient(ellipse at 50% 50%, rgba(147,197,253,0.1) 0%, transparent 65%);
    filter: blur(60px); pointer-events:none; z-index:0;
}
.pb__in { max-width:1200px; margin:0 auto; position:relative; z-index:1; }

/* ═══ HEADER ═══ */
.pb__hd { text-align:center; margin-bottom:3.5rem; }
.pb__pill {
    display:inline-flex; align-items:center; gap:6px;
    font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
    color:#6b7280; background:#fff; padding:6px 14px; border-radius:100px;
    border:1px solid #e5e7eb; margin-bottom:1.25rem;
}
.pb__pill svg { width:12px; height:12px; stroke-width:2.5; color:#9ca3af; }
.pb__h2 {
    font-size:clamp(2rem,4vw,3rem); font-weight:800; line-height:1.1;
    letter-spacing:-0.04em; color:#111;
}
.pb__h2 em {
    font-style:normal;
    background:linear-gradient(135deg,#2563EB,#7c3aed);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.pb__sub {
    margin-top:1rem; font-size:1rem; color:#6b7280;
    max-width:520px; margin-left:auto; margin-right:auto; line-height:1.6;
}

/* ═══ GRID ═══ */
.pb__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.pb__grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }

/* ═══ CARD ═══ */
.pb__c {
    background:#fff; border-radius:20px; border:1px solid rgba(0,0,0,0.06);
    overflow:hidden; display:flex; flex-direction:column;
    transition: transform .35s cubic-bezier(.2,1,.2,1), box-shadow .35s ease;
}
.pb__c:hover {
    transform:translateY(-4px);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.08);
}
.pb__c-top { padding:2rem 2rem 1.25rem; }
.pb__c-ic {
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem;
}
.pb__c-ic svg { width:20px; height:20px; stroke-width:1.75; }
.pb__c-ic--pur { background:#ede9fe; }
.pb__c-ic--pur svg { color:#7c3aed; }
.pb__c-ic--blu { background:#dbeafe; }
.pb__c-ic--blu svg { color:#2563eb; }
.pb__c-ic--grn { background:#d1fae5; }
.pb__c-ic--grn svg { color:#059669; }
.pb__c-ic--gry { background:#f3f4f6; }
.pb__c-ic--gry svg { color:#374151; }

.pb__c-t {
    font-size:1.3125rem; font-weight:700; line-height:1.2;
    letter-spacing:-0.02em; color:#111; margin-bottom:.5rem;
}
.pb__c-d { font-size:.8125rem; color:#6b7280; line-height:1.55; }

.pb__c-ui { margin-top:auto; padding:1rem 1.25rem 0; }
.pb__c-ui-in {
    background:#f9fafb; border-radius:16px 16px 0 0; border:1px solid #e5e7eb; border-bottom:none;
    padding:1rem; overflow:hidden; min-height:220px;
}

/* Wide card */
.pb__c--w { grid-column:1/-1; flex-direction:row; }
.pb__c--w .pb__c-top { flex:1; padding:2.5rem; display:flex; flex-direction:column; justify-content:center; }
.pb__c--w .pb__c-ui { flex:1.15; padding:1.25rem 1.25rem 0 0; margin-top:0; }
.pb__c--w .pb__c-ui-in { border-radius:16px; border-bottom:1px solid #e5e7eb; min-height:100%; padding:1.25rem; }
.pb__c--w .pb__c-t { font-size:1.375rem; }

/* Small card */
.pb__c--sm .pb__c-top { padding:1.75rem 1.75rem 1rem; }
.pb__c--sm .pb__c-t { font-size:1.0625rem; }
.pb__c--sm .pb__c-ui-in { min-height:180px; padding:.875rem; }

/* ═══ MOCKUP PRIMITIVES ═══ */
.mk-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:7px 10px; background:#fff; border-radius:10px;
    border:1px solid #f0f0f0; margin-bottom:10px;
}
.mk-toolbar__left { display:flex; align-items:center; gap:6px; }
.mk-toolbar__title { font-size:.625rem; font-weight:700; color:#111; }
.mk-toolbar__sub { font-size:.5625rem; color:#9ca3af; font-weight:500; }
.mk-toolbar__btn {
    font-size:.5rem; font-weight:700; color:#fff; background:#2563eb;
    padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.04em;
}
.mk-toolbar__btn--outline {
    background:transparent; color:#6b7280; border:1px solid #e5e7eb;
}
.mk-thead {
    display:flex; align-items:center; justify-content:space-between;
    padding:5px 10px; margin-bottom:4px;
    font-size:.5rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#c4c4c4;
}
.mk-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:7px 10px; border-radius:8px; margin-bottom:4px;
    font-size:.6875rem; font-weight:500; color:#374151;
}
.mk-row:nth-child(even) { background:#fff; }
.mk-row__l { display:flex; align-items:center; gap:8px; }
.mk-row__dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.mk-row__val { font-weight:700; font-size:.75rem; white-space:nowrap; }
.mk-avatar {
    width:20px; height:20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.4375rem; font-weight:800; color:#fff; flex-shrink:0;
}
.mk-stat {
    background:#fff; border-radius:10px; padding:10px 12px;
    border:1px solid #f0f0f0;
}
.mk-stat__lbl { font-size:.5rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#b0b0b0; margin-bottom:3px; }
.mk-stat__val { font-size:1.0625rem; font-weight:800; letter-spacing:-0.02em; color:#111; }
.mk-stat__sub { font-size:.5625rem; font-weight:600; margin-top:1px; }
.mk-badge {
    display:inline-flex; align-items:center; gap:3px;
    font-size:.5625rem; font-weight:700; padding:2px 7px; border-radius:5px;
}
.mk-badge--g { background:#dcfce7; color:#16a34a; }
.mk-badge--y { background:#fef3c7; color:#d97706; }
.mk-badge--r { background:#fee2e2; color:#dc2626; }
.mk-badge--b { background:#eff6ff; color:#2563EB; }
.mk-progress {
    height:4px; background:#f3f4f6; border-radius:2px; overflow:hidden; margin-top:4px;
}
.mk-progress__fill { height:100%; border-radius:2px; }
.mk-bars { display:flex; align-items:flex-end; gap:3px; }
.mk-bar { width:100%; border-radius:3px 3px 0 0; }
.mk-notif {
    background:#fff; border-radius:10px; padding:9px 12px;
    border:1px solid #f0f0f0;
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:6px;
}
.mk-notif:last-child { margin-bottom:0; }
.mk-notif__l { display:flex; align-items:center; gap:9px; }
.mk-notif__ic {
    width:26px; height:26px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mk-notif__ic svg { width:12px; height:12px; stroke-width:2; }
.mk-notif__name { font-size:.625rem; font-weight:700; color:#111; }
.mk-notif__sub { font-size:.5rem; color:#9ca3af; font-weight:500; margin-top:1px; }
.mk-notif__val { font-size:.6875rem; font-weight:700; white-space:nowrap; }
.mk-tabs { display:flex; gap:4px; margin-bottom:8px; }
.mk-tab {
    font-size:.4375rem; font-weight:700; padding:3px 8px; border-radius:6px;
    background:#f3f4f6; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em;
}
.mk-tab--active { background:#111; color:#fff; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:860px) {
    .pb { padding: 4rem 1.25rem; }
    .pb__h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    .pb__grid, .pb__grid3 { grid-template-columns:1fr; }
    .pb__c--w { flex-direction:column; }
    .pb__c--w .pb__c-top { padding: 1.75rem 1.75rem 1rem; }
    .pb__c--w .pb__c-ui { padding:0 1.25rem; }
    .pb__c--w .pb__c-ui-in { border-radius:16px 16px 0 0; border-bottom:none; min-height: 200px;}
}


                /* ═══════════════════════════════════════════
           SECTION 1 — BOOK A DEMO CTA (Split with Flow)
           ═══════════════════════════════════════════ */

        .cta-demo {
            padding: 4rem 4rem;
            margin: 4rem auto;
            max-width: 1280px;
            width: calc(100% - 2.5rem);
            border-radius: 32px;
            background: #09090b;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.05);
        }
        /* Ambient gradient overlays */
        .cta-demo::before {
            content:''; position:absolute; top:-30%; left:-10%; width:60%; height:80%;
            background: radial-gradient(ellipse at 50% 50%, rgba(124,58,237,0.15) 0%, rgba(37,99,235,0.08) 40%, transparent 70%);
            filter: blur(60px); pointer-events:none;
        }
        .cta-demo::after {
            content:''; position:absolute; bottom:-40%; right:-10%; width:70%; height:80%;
            background: radial-gradient(ellipse at 50% 50%, rgba(37,99,235,0.12) 0%, transparent 65%);
            filter: blur(60px); pointer-events:none;
        }
        .cta-demo__in { 
            max-width: 1100px; margin: 0 auto; 
            position: relative; z-index: 1; 
            display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; 
            align-items: center; 
        }
        
        .cta-demo__content { display:flex; flex-direction:column; align-items:flex-start; }
        
        .cta-demo__pill {
            display:inline-flex; align-items:center; gap:6px;
            font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
            color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.05); padding:6px 14px; border-radius:100px;
            border:1px solid rgba(255,255,255,0.1); margin-bottom:1.5rem;
        }
        .cta-demo__pill svg { width:12px; height:12px; stroke-width:2.5; }
        .cta-demo__h2 {
            font-size:clamp(2.5rem,4.5vw,3.5rem); font-weight:800; line-height:1.1;
            letter-spacing:-0.03em; color:#fff; margin-bottom:1.25rem; text-align:left;
        }
        .cta-demo__h2 em {
            font-style:normal;
            background:linear-gradient(135deg,#a78bfa,#60a5fa);
            -webkit-background-clip:text; background-clip:text;
            -webkit-text-fill-color:transparent;
        }
        .cta-demo__sub {
            font-size:1.125rem; color:rgba(255,255,255,0.6); line-height:1.6;
            margin-bottom:2.5rem; text-align:left; max-width:480px;
        }
        .cta-demo__btn {
            display:inline-flex; align-items:center; gap:8px;
            padding:16px 36px; border-radius:14px;
            background:linear-gradient(135deg,#2563eb,#7c3aed);
            color:#fff; font-size:1rem; font-weight:700;
            text-decoration:none; letter-spacing:-0.01em;
            transition: transform .25s, box-shadow .25s;
            box-shadow: 0 4px 24px rgba(37,99,235,0.3);
        }
        .cta-demo__btn:hover {
            transform:translateY(-2px);
            box-shadow: 0 8px 32px rgba(37,99,235,0.5);
        }
        .cta-demo__btn svg { width:18px; height:18px; stroke-width:2; }
        .cta-demo__trust {
            margin-top:2rem; display:flex; align-items:center; gap:16px;
            font-size:1rem; color:rgba(255,255,255,0.5); font-weight:500;
        }
        .cta-demo__trust img { width:48px; height:48px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,0.1); }
        .cta-demo__trust-info { display:flex; flex-direction:column; gap:4px; }
        .cta-demo__trust-n { color:#fff; font-weight:600; font-size:1.125rem; display:flex; align-items:center; gap:8px; }
        .cta-demo__trust-n::after { content:''; display:block; width:8px; height:8px; background:#10b981; border-radius:50%; box-shadow:0 0 10px rgba(16,185,129,0.5); }
        .cta-demo__trust-r { font-size:.875rem; }

        /* Flow / Mockup right side */
        .cta-demo__flow {
            position:relative; width:100%; height:460px;
            border-radius:24px; background:rgba(255,255,255,0.03);
            border:1px solid rgba(255,255,255,0.08);
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
            overflow:hidden; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
            transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
            transform-style: preserve-3d;
            transition: transform 0.5s ease;
        }
        .cta-demo__flow:hover {
            transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
        }
        
        .cta-flow__header {
            height:50px; border-bottom:1px solid rgba(255,255,255,0.08);
            display:flex; align-items:center; padding:0 20px; gap:8px;
            background:rgba(255,255,255,0.01);
        }
        .cta-flow__dot { width:10px; height:10px; border-radius:50%; }
        .cta-flow__dot:nth-child(1) { background:#ef4444; }
        .cta-flow__dot:nth-child(2) { background:#eab308; }
        .cta-flow__dot:nth-child(3) { background:#22c55e; }
        
        .cta-flow__body {
            padding:24px; display:flex; gap:20px; height:calc(100% - 50px);
        }
        .cta-flow__sidebar {
            width:60px; display:flex; flex-direction:column; gap:16px; align-items:center;
            padding-right:20px; border-right:1px solid rgba(255,255,255,0.05);
        }
        .cta-flow__nav-item {
            width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,0.03);
            display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.3);
        }
        .cta-flow__nav-item.active {
            background:#2563eb; color:#fff; box-shadow:0 0 12px rgba(37,99,235,0.4);
        }
        .cta-flow__nav-item svg { width:18px; height:18px; stroke-width:2; }
        
        .cta-flow__main { flex:1; display:flex; flex-direction:column; gap:20px; }
        .cta-flow__row { display:flex; gap:16px; }
        .cta-flow__card {
            background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05);
            border-radius:16px; padding:20px; flex:1; position:relative; overflow:hidden;
        }
        .cta-flow__card::before {
            content:''; position:absolute; top:0; left:0; width:100%; height:2px;
        }
        .cta-flow__card.blue::before { background:linear-gradient(90deg,#2563eb,transparent); }
        .cta-flow__card.purple::before { background:linear-gradient(90deg,#7c3aed,transparent); }
        
        .cta-flow__val { font-size:1.75rem; font-weight:800; color:#fff; letter-spacing:-0.02em; margin-bottom:4px; }
        .cta-flow__lbl { font-size:.75rem; color:rgba(255,255,255,0.4); font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
        
        
        /* ═══════════════════════════════════════════════════════
           CHART & CURSOR ANIMATION
           ═══════════════════════════════════════════════════════ */
        
        /* ═══════════════════════════════════════════════════════
           CHART & CURSOR ANIMATION
           ═══════════════════════════════════════════════════════ */
        .cta-flow__chart {
            background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05);
            border-radius:16px; padding:20px; flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
            position: relative; overflow: hidden;
            margin-top: 20px; /* added margin just in case */
        }
        .cta-flow__t { font-size:.875rem; font-weight:600; color:#fff; margin-bottom:auto; position: relative; z-index: 2; }
        /* Grid line */
        .cta-flow__chart::after {
            content:''; position:absolute; bottom:20px; left:20px; right:20px; height: 1px; background: rgba(255,255,255,0.1); z-index: 1;
        }

        /* Fake Cursor */
        .cta-fake-cursor {
            position: absolute;
            width: 32px; height: 32px;
            background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%203%207.07%2016.97%202.51-7.39%207.39-2.51L3%203z%22/%3E%3C/svg%3E') no-repeat center center;
            background-size: contain;
            z-index: 999;
            pointer-events: none;
            opacity: 0;
            top: 60%; left: 90%; /* Initial position */
            transform: translate(0, 0);
            transition: opacity 0.5s ease;
        }

        /* Classes for animation */
        /* 1. Cursor moves in */
        .cta-demo.anim-step-1 .cta-fake-cursor {
            opacity: 1;
            /* Move directly to the first active nav item or one of cards */
            animation: moveCursor 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }
        @keyframes moveCursor {
            0% { top: 60%; left: 90%; }
            100% { top: 40%; left: 60%; } /* Approximate position over the dashboard mockup cards */
        }
        
        /* 2. Cursor clicks (shrink) */
        .cta-demo.anim-step-2 .cta-fake-cursor {
            top: 40%; left: 60%;
            transform: scale(0.85);
            transition: transform 0.1s;
        }
        
        /* 3. Button ripple effect on click (fake on the card) */
        .cta-flow__card.blue { position: relative; overflow: hidden; }
        .cta-flow__card.blue::after {
            content:''; position: absolute; top:50%; left:50%; width:0; height:0; 
            background: rgba(255,255,255,0.2); border-radius: 50%; 
            transform: translate(-50%, -50%); opacity: 0;
        }
        .cta-demo.anim-step-2 .cta-flow__card.blue::after {
            animation: btnRipple 0.6s ease-out forwards;
        }
        @keyframes btnRipple {
            0% { width:0; height:0; opacity: 1; }
            100% { width:300px; height:300px; opacity: 0; }
        }

        /* 4. Numbers count up via JS, Bars grow */
        .cta-demo.anim-step-3 .cta-flow__bar-group:nth-child(1) .sales .cta-flow__bar-fill { height: 40%; transition-delay: 0.1s; }
        .cta-demo.anim-step-3 .cta-flow__bar-group:nth-child(1) .costs .cta-flow__bar-fill { height: 15%; transition-delay: 0.15s; }
        .cta-demo.anim-step-3 .cta-flow__bar-group:nth-child(2) .sales .cta-flow__bar-fill { height: 55%; transition-delay: 0.2s; }
        .cta-demo.anim-step-3 .cta-flow__bar-group:nth-child(2) .costs .cta-flow__bar-fill { height: 20%; transition-delay: 0.25s; }
        .cta-demo.anim-step-3 .cta-flow__bar-group:nth-child(3) .sales .cta-flow__bar-fill { height: 45%; transition-delay: 0.3s; }
        .cta-demo.anim-step-3 .cta-flow__bar-group:nth-child(3) .costs .cta-flow__bar-fill { height: 12%; transition-delay: 0.35s; }
        .cta-demo.anim-step-3 .cta-flow__bar-group:nth-child(4) .sales .cta-flow__bar-fill { height: 70%; transition-delay: 0.4s; }
        .cta-demo.anim-step-3 .cta-flow__bar-group:nth-child(4) .costs .cta-flow__bar-fill { height: 25%; transition-delay: 0.45s; }
        .cta-demo.anim-step-3 .cta-flow__bar-group:nth-child(5) .sales .cta-flow__bar-fill { height: 85%; transition-delay: 0.5s; }
        .cta-demo.anim-step-3 .cta-flow__bar-group:nth-child(5) .costs .cta-flow__bar-fill { height: 22%; transition-delay: 0.55s; }
        .cta-demo.anim-step-3 .cta-flow__bar-group:nth-child(6) .sales .cta-flow__bar-fill { height: 100%; transition-delay: 0.6s; }
        .cta-demo.anim-step-3 .cta-flow__bar-group:nth-child(6) .costs .cta-flow__bar-fill { height: 26%; transition-delay: 0.65s; }
        
        .cta-demo.anim-step-3 .cta-fake-cursor {
            opacity: 0; /* Fade out cursor after click */
        }
        @media (max-width:900px) {
            .cta-demo__in { grid-template-columns:1fr; gap:3rem; }
            .cta-demo__content { align-items:center; text-align:center; }
            .cta-demo__h2, .cta-demo__sub { text-align:center; }
            .cta-demo__flow { transform:none; }
            .cta-fake-cursor { display:none; }
        }

    
        /* ═══════════════════════════════════════════════════════
           SECTION 2 — TESTIMONIALS (Bento)
           ═══════════════════════════════════════════════════════ */
        .testi {
            padding: 8rem 1.25rem;
            background: #fff;
            position: relative;
        }
        .testi__in {
            max-width: 1200px; margin: 0 auto;
        }
        
        .testi__hd { margin-bottom: 4rem; text-align: center; }
        .testi__pill {
            display:inline-flex; align-items:center; gap:6px;
            font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
            color:#2563eb; background:#eff6ff; padding:6px 14px; border-radius:100px;
            border:1px solid #dbeafe; margin-bottom:1.5rem;
            justify-content: center;
        }
        .testi__pill svg { width:14px; height:14px; stroke-width:2.5; }
        .testi__h2 {
            font-size:clamp(2rem,4vw,3.5rem); font-weight:800; letter-spacing:-0.03em; color:#111; line-height: 1.1;
        }
        .testi__h2 em { font-style:normal; color:#2563eb; }
        
        /* Grid system - Bento Box */
        .testi__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        /* Main Testimonial (Spans 2 cols, 2 rows) */
        .testi__main {
            grid-column: span 2;
            grid-row: span 2;
            background: linear-gradient(145deg, #ffffff, #f8fafc);
            color: #111;
            padding: 4rem;
            border-radius: 24px;
            display: flex; flex-direction: column; justify-content: space-between;
            position: relative;
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
        }
        .testi__main::before {
            content:'"'; position:absolute; top:20px; left:40px;
            font-size: 10rem; font-weight:900; color:rgba(37,99,235,0.05); font-family:serif; line-height:1; pointer-events:none;
        }
        .testi__stars { display:flex; gap:4px; margin-bottom:2rem; color:#f59e0b; }
        .testi__stars svg { width:20px; height:20px; fill:currentColor; }
        .testi__quote {
            font-size: 1.75rem; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em;
            margin-bottom: 3rem; color: #374151;
        }
        .testi__quote strong { color: #fff; background: rgba(37,99,235,1); padding: 2px 4px; border-radius: 4px; }
        .testi__author { display:flex; align-items:center; gap:16px; margin-top: auto; }
        .testi__avatar { width:64px; height:64px; border-radius:50%; overflow:hidden; border:2px solid #eff6ff; flex-shrink:0;}
        .testi__name { font-weight:700; font-size:1.125rem; color: #111; }
        .testi__role { font-size:.875rem; color:#6b7280; margin-top:2px; font-weight: 500;}
        
        /* Metric Cards (1 col, 1 row each - stack vertically on right) */
        .testi__metric {
            background: #fff;
            border-radius: 24px;
            padding: 2.5rem 2rem;
            border: 1px solid rgba(0,0,0,0.06);
            display: flex; flex-direction: column; justify-content: center;
            text-align: center;
            box-shadow: 0 10px 30px -10px rgba(0,0,0,0.03);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .testi__metric:hover { transform: translateY(-4px); box-shadow: 0 15px 35px -10px rgba(0,0,0,0.08); }
        .testi__metric-val {
            font-size: 4rem; font-weight: 900; letter-spacing: -0.05em; margin-bottom: 8px; line-height: 1;
        }
        .testi__metric-label {
            font-size: .9375rem; color: #4b5563; font-weight: 500; line-height: 1.5; margin-bottom: 1.5rem; flex-grow:1;
        }
        .testi__metric-source {
            font-size: .75rem; color: #9ca3af; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; font-weight: 500;
        }
        .testi__metric-source svg { width: 14px; height: 14px; stroke-width: 2.5; }
        
        /* Small cards (bottom row) */
        .testi__row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }
        .testi__small {
            background: #fff;
            border-radius: 24px;
            padding: 2.5rem;
            border: 1px solid rgba(0,0,0,0.06);
            box-shadow: 0 10px 30px -10px rgba(0,0,0,0.03);
            display: flex; flex-direction: column;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .testi__small:hover { transform: translateY(-4px); box-shadow: 0 15px 35px -10px rgba(0,0,0,0.08); }
        .testi__small-quote {
            font-size: 1.0625rem; color: #374151; line-height: 1.6; font-weight: 500;
            margin-bottom: 2rem; flex-grow: 1;
        }
        .testi__small-author { display:flex; align-items:center; gap:16px; }
        .testi__small-avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0; }
        .testi__small-name { font-weight:700; font-size:1rem; color:#111; margin-bottom:2px; }
        .testi__small-role { font-size:.8125rem; color:#6b7280; font-weight:500; }
        
        @media (max-width: 1024px) {
            .testi__grid { grid-template-columns: 1fr; }
            .testi__main { grid-column: 1 / -1; grid-row: auto; padding: 2.5rem; }
            .testi__main::before { display: none; }
            .testi__quote { font-size: 1.25rem; max-width: 100%; }
            .testi__metric { flex-direction:row; align-items:center; justify-content:space-between; text-align:left; padding:2rem;}
            .testi__metric-val { font-size: 2.5rem; margin-bottom:0; }
            .testi__metric-label { margin-bottom:0; max-width: 50%; }
            .testi__row { grid-template-columns: 1fr; }
        }

        @media (max-width: 640px) {
            .testi { padding: 4rem 1.25rem; }
            .testi__main { padding: 1.5rem; }
            .testi__quote { font-size: 1.125rem; }
            
            .testi__metric { flex-direction: column; align-items: flex-start; gap: 1rem; }
            .testi__metric-label { max-width: 100%; }
            
            /* Horizontal scrolling carousel for small cards */
            .testi__row {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                padding-bottom: 1rem; 
                margin-left: -1.25rem;
                margin-right: -1.25rem;
                padding-left: 1.25rem;
                padding-right: 1.25rem;
                gap: 1rem;
                /* Hide scrollbar for cleaner look */
                -ms-overflow-style: none;  
                scrollbar-width: none;  
            }
            .testi__row::-webkit-scrollbar { display: none; }
            
            .testi__small {
                flex: 0 0 calc(90vw - 2.5rem);
                scroll-snap-align: center;
                padding: 1.75rem 1.5rem;
            }
        }

        /* ═══════════════════════════════════════════════════════
           SECTION 3 — FREE MIGRATION / RISK REVERSAL
           ═══════════════════════════════════════════════════════ */
        .migrate {
            padding: 8rem 1.25rem;
            background: #f8fafc;
            border-top: 1px solid rgba(0,0,0,0.04);
            position: relative; overflow: hidden;
        }
        /* Soft blue gradient background */
        .migrate::before {
            content:''; position:absolute; top:-30%; right:-10%; width:60%; height:80%;
            background: radial-gradient(ellipse at 50% 50%, rgba(37,99,235,0.06) 0%, rgba(124,58,237,0.04) 40%, transparent 70%);
            filter: blur(60px); pointer-events:none;
        }
        .migrate__in { max-width:1200px; margin:0 auto; position:relative; z-index:1; display:grid; grid-template-columns: 0.95fr 1.05fr; gap: 6rem; align-items: center; }
        
        /* Left: Image side */
        .migrate__visual { position:relative; padding-right: 2rem; }
        .migrate__visual-inner { border-radius:32px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 60px -12px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.04); }
        .migrate__visual-inner img { width:100%; height:100%; object-fit:cover; }
        
        .migrate__card-float {
            position:absolute; bottom:3rem; right:-1rem;
            background:rgba(255,255,255,0.95); border-radius:24px; padding:1.5rem 2rem;
            display:flex; align-items:center; gap:16px;
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.02);
            animation: float 6s ease-in-out infinite;
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        }
        .migrate__cf-ic {
            width:56px; height:56px; border-radius:50%; background:#eff6ff;
            color:#2563eb; display:flex; align-items:center; justify-content:center;
            flex-shrink:0; border:1px solid #dbeafe;
        }
        .migrate__cf-ic svg { width:28px; height:28px; stroke-width:2; }
        .migrate__cf-t { font-weight:700; font-size:1.0625rem; color:#111; margin-bottom:2px; }
        .migrate__cf-d { font-size:.875rem; color:#4b5563; font-weight:500; }
        
        /* Right: Content side */
        .migrate__content { display:flex; flex-direction:column; }
        .migrate__pill {
            display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
            font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
            color:#2563eb; background:#eff6ff; padding:6px 14px; border-radius:100px;
            border:1px solid #dbeafe; margin-bottom:1.5rem;
        }
        .migrate__pill svg { width:12px; height:12px; stroke-width:2.5; }
        .migrate__h2 {
            font-size:clamp(2.5rem,4.5vw,3.5rem); font-weight:800; line-height:1.1;
            letter-spacing:-0.03em; color:#111; margin-bottom:1.25rem;
        }
        .migrate__h2 em {
            font-style:normal;
            background:linear-gradient(135deg,#2563eb,#7c3aed);
            -webkit-background-clip:text; background-clip:text;
            -webkit-text-fill-color:transparent;
        }
        .migrate__sub {
            font-size:1.125rem; color:#4b5563; line-height:1.6;
            margin-bottom:3rem; max-width:480px; font-weight: 500;
        }
        
        /* Stepper */
        .migrate__steps { display:flex; flex-direction:column; gap:2.5rem; margin-bottom:3.5rem; position:relative; }
        
        .migrate__step { display:flex; gap:1.75rem; position:relative; z-index:2; }
        .migrate__step-icon {
            width:50px; height:50px; border-radius:50%; background:#fff; border:2px solid #e5e7eb;
            display:flex; align-items:center; justify-content:center; color:#9ca3af;
            flex-shrink:0; transition: border-color .3s, color .3s, box-shadow .3s, background .3s;
        }
        .migrate__step:hover .migrate__step-icon { 
            border-color:#2563eb; color:#2563eb; 
            background: #eff6ff;
            box-shadow: 0 0 0 4px #eff6ff; 
        }
        .migrate__step-icon svg { width:22px; height:22px; stroke-width:2; }
        
        .migrate__step-text { padding-top: 2px; }
        .migrate__step-t { font-weight:700; color:#111; margin-bottom:8px; font-size:1.125rem; letter-spacing: -0.01em; }
        .migrate__step-d { font-size:.9375rem; color:#4b5563; line-height:1.6; font-weight: 500; }
        
        .migrate__btn {
            display:inline-flex; align-items:center; justify-content: center; gap:12px; align-self:flex-start;
            padding:18px 40px; border-radius:14px;
            background:linear-gradient(135deg,#2563eb,#7c3aed);
            color:#fff; font-size:1rem; font-weight:700;
            text-decoration:none; letter-spacing:-0.01em;
            transition: transform .25s, box-shadow .25s;
            box-shadow: 0 8px 30px rgba(37,99,235,0.25);
        }
        .migrate__btn svg { width:24px; height:24px; flex-shrink: 0; }
        .migrate__btn:hover {
            transform:translateY(-2px);
            box-shadow: 0 12px 40px rgba(37,99,235,0.4);
        }
        
        @media (max-width:900px) {
            .migrate__in { grid-template-columns:1fr; gap:4rem; }
            .migrate__visual { order:2; padding-right:0; padding-bottom: 2rem;}
            .migrate__content { order:1; }
            .migrate__card-float { right: 1rem; bottom: -1rem; padding: 1.25rem; }
        }
        
        @media (max-width: 900px) {
            .cta-demo { padding: 3rem 1.5rem; border-radius: 24px; }
            .cta-demo__in { grid-template-columns: 1fr; gap: 3rem; }
        }

        /* ── Mobile-specific refinements (phones) ─── */
        @media (max-width: 640px) {
            /* CTA Demo: tighter padding, smaller type */
            .cta-demo { 
                padding: 2rem 1rem; 
                border-radius: 20px; 
                margin: 2rem auto; 
                width: calc(100% - 1.5rem); 
            }
            .cta-demo__in { gap: 2rem; }
            .cta-demo__h2 { font-size: 1.75rem; }
            .cta-demo__sub { font-size: 1rem; margin-bottom: 1.5rem; }
            .cta-demo__btn { 
                width: 100%; 
                justify-content: center; 
                padding: 14px 24px; 
            }
            .cta-demo__trust { 
                flex-wrap: wrap; 
                font-size: .875rem; 
                gap: 12px; 
            }
            .cta-demo__trust img { width: 40px; height: 40px; }
            
            /* CTA Flow mockup: shorter on phones, no sidebar */
            .cta-demo__flow { 
                height: auto; 
                min-height: 260px;
                transform: none; 
                border-radius: 16px; 
            }
            .cta-demo__flow:hover { transform: none; }
            .cta-flow__sidebar { display: none; }
            .cta-flow__body { padding: 16px; gap: 12px; flex-direction: column; }
            .cta-flow__row { flex-direction: column; gap: 10px; }
            .cta-flow__val { font-size: 1.25rem; }
            .cta-flow__card { padding: 14px; border-radius: 12px; }
            .cta-flow__header { height: 40px; padding: 0 14px; }
            .cta-flow__dot { width: 8px; height: 8px; }
            
            /* Migrate: tighter spacing */
            .migrate { padding: 4rem 1rem; }
            .migrate__in { gap: 2.5rem; }
            .migrate__h2 { font-size: 1.75rem; }
            .migrate__sub { font-size: 1rem; margin-bottom: 2rem; }
            .migrate__steps { gap: 1.75rem; margin-bottom: 2.5rem; }
            .migrate__step { gap: 1rem; }
            .migrate__step-icon { width: 40px; height: 40px; }
            .migrate__step-icon svg { width: 18px; height: 18px; }
            .migrate__step-t { font-size: 1rem; }
            .migrate__step-d { font-size: .875rem; }
            .migrate__btn { 
                width: 100%; 
                justify-content: center; 
                padding: 16px 24px; 
            }
            .migrate__visual-inner { 
                aspect-ratio: 3/4; 
                border-radius: 20px; 
            }
            .migrate__card-float { 
                padding: 1rem; 
                gap: 10px; 
                border-radius: 16px; 
            }
            .migrate__cf-ic { width: 40px; height: 40px; }
            .migrate__cf-ic svg { width: 20px; height: 20px; }
            .migrate__cf-t { font-size: .9375rem; }
            .migrate__cf-d { font-size: .8125rem; }
        }

        /* 5. Chart Animation */
        .cta-demo.anim-step-3 .chart-costs-group,
        .cta-demo.anim-step-3 .chart-sales-group {
            opacity: 1 !important;
            clip-path: inset(0 0 0 0) !important;
        }



        /* Base reset and tokens */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; background: #fff; color: #111; padding-bottom: 4rem; }

        /* Pricing Section */
        .pricing { padding: 8rem 1.25rem; position: relative; overflow: hidden; }
        
        .pricing__hd { text-align: center; max-width: 600px; margin: 0 auto 4rem; }
        
        .pricing__pill {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
            color: #2563eb; background: #eff6ff; padding: 6px 14px; border-radius: 100px;
            border: 1px solid #dbeafe; margin-bottom: 1.5rem; justify-content: center;
        }
        .pricing__h2 { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; color: #111; line-height: 1.1; margin-bottom: 1rem; }
        .pricing__sub { font-size: 1.125rem; color: #4b5563; line-height: 1.6; font-weight: 500; }
        
        /* Toggle */
        .pricing__toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; font-weight: 600; font-size: 1rem; color: #4b5563; }
        .pricing__toggle {
            position: relative; width: 56px; height: 32px; background: #e5e7eb; border-radius: 100px; cursor: pointer; transition: background 0.3s;
        }
        .pricing__toggle.annual { background: #2563eb; }
        .pricing__toggle::after {
            content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; background: #fff; border-radius: 50%;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .pricing__toggle.annual::after { transform: translateX(24px); }
        .pricing__badge {
            background: #ecfdf5; color: #059669; font-size: .75rem; padding: 4px 8px; border-radius: 100px; font-weight: 700; border: 1px solid #d1fae5;
        }

        /* Grid */
        .pricing__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: center; }
        
        /* Cards */
        .p-card {
            background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 24px; padding: 3rem 2rem;
            display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 10px 30px -10px rgba(0,0,0,0.03);
            position: relative; height: 100%;
        }
        .p-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08); }
        
        .p-card__name { font-size: 1.25rem; font-weight: 700; color: #111; margin-bottom: 8px; }
        .p-card__desc { font-size: .9375rem; color: #6b7280; font-weight: 500; margin-bottom: 2rem; line-height: 1.5; height: 44px; }
        
        .p-card__price-wrap { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 2rem; }
        .p-card__val { font-size: 3.5rem; font-weight: 800; color: #111; line-height: 1; letter-spacing: -0.05em; }
        .p-card__period { font-size: 1rem; color: #6b7280; font-weight: 500; padding-bottom: 6px; }
        
        .p-card__btn {
            display: flex; align-items: center; justify-content: center; width: 100%;
            padding: 16px; border-radius: 12px; font-weight: 600; font-size: 1rem;
            text-decoration: none; transition: all 0.2s; border: 1px solid;
            background: #fff; color: #111; border-color: #e5e7eb;
        }
        .p-card__btn:hover { background: #f9fafb; border-color: #d1d5db; }
        
        /* Features */
        .p-card__feats { margin-top: 2.5rem; border-top: 1px solid #f3f4f6; padding-top: 2.5rem; display: flex; flex-direction: column; gap: 16px; flex-grow: 1; }
        .p-card__feat { display: flex; align-items: flex-start; gap: 12px; font-size: .9375rem; color: #374151; font-weight: 500; line-height: 1.4; }
        .p-card__feat svg { width: 20px; height: 20px; color: #2563eb; flex-shrink: 0; stroke-width: 2.5; }
        .p-card__feat.op-50 { opacity: 0.5; }
        .p-card__feat.op-50 svg { color: #9ca3af; }
        
        /* Emphasized Card (Middle) */
        .p-card--pro {
            background: #111827; color: #fff; border-color: #1f2937; padding: 4rem 2.5rem;
            box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
        }
        .p-card--pro:hover { transform: translateY(-8px); box-shadow: 0 50px 100px -20px rgba(0,0,0,0.6); }
        .p-card--pro::before {
            content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px;
            background: linear-gradient(90deg, transparent, #3b82f6, transparent);
        }
        
        .p-card--pro .p-card__name, .p-card--pro .p-card__val { color: #fff; }
        .p-card--pro .p-card__desc, .p-card--pro .p-card__period { color: #a1a1aa; }
        .p-card--pro .p-card__feats { border-color: rgba(255,255,255,0.1); }
        .p-card--pro .p-card__feat { color: #d4d4d8; }
        .p-card--pro .p-card__feat svg { color: #60a5fa; }
        
        .p-card--pro .p-card__btn {
            background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; border: none;
            box-shadow: 0 8px 24px rgba(37,99,235,0.25);
        }
        .p-card--pro .p-card__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(37,99,235,0.4); background: linear-gradient(135deg, #1d4ed8, #6d28d9); }
        
        .p-card__badge-top {
            position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff;
            padding: 6px 16px; border-radius: 100px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
            box-shadow: 0 4px 12px rgba(59,130,246,0.3);
        }

        @media (max-width: 1024px) {
            .pricing__grid { grid-template-columns: 1fr; max-width: 480px; }
            .p-card--pro { padding: 3rem 2rem; }
        }

        @media (max-width: 640px) {
            .pricing { padding: 4rem 1rem; }
            .pricing__hd { margin-bottom: 2.5rem; }
            .pricing__h2 { font-size: 2rem; }
            .pricing__sub { font-size: 1rem; }
            .pricing__toggle-wrap { font-size: .875rem; gap: .75rem; }
            .p-card { padding: 2rem 1.5rem; border-radius: 20px; }
            .p-card--pro { padding: 2.5rem 1.5rem; }
            .p-card__desc { height: auto; }
            .p-card__val { font-size: 2.5rem; }
            .p-card__feats { gap: 12px; }
            .p-card__feat { font-size: .875rem; }
        }