/* CSS Variables */
:root {
  /* Colors - Dark Theme */
  --color-bg: #0f0f10;
  --color-surface: #18181a;
  --color-surface-raised: #222224;
  --color-border: #2a2a2d;

  --color-text: #e8e8ea;
  --color-text-muted: #a1a1a6;
  --color-text-dim: #6b6b70;

  --color-accent: #6464ff;
  --color-accent-light: #8484ff;
  --color-accent-dim: #3f3fb8;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* Light mode colors for artifacts */
  --color-light-bg: #ffffff;
  --color-light-surface: #f9fafb;
  --color-light-border: #e5e7eb;
  --color-light-text: #111827;
  --color-light-text-muted: #6b7280;
  --color-light-text-dim: #9ca3af;

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Zalando Sans Expanded', 'Inter', sans-serif;
  --font-mono: 'Roboto Mono', 'SF Mono', monospace;

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

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
  --shadow-accent: 0 4px 20px rgba(100, 100, 255, 0.25);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
}

/* =====================================================
   Feature Flag: Signup Toggle
   Controls visibility of signup-related elements
   ===================================================== */

/* By default, hide signup elements and show no-signup elements */
.signup-only {
  display: none !important;
}

.no-signup {
  display: inline-flex !important;
}

/* When signup is enabled, flip visibility */
body.signup-enabled .signup-only {
  display: inline-flex !important;
}

body.signup-enabled .no-signup {
  display: none !important;
}

/* ===================================
 BASE STYLES
 =================================== */

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

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 16px;
  position: relative;
}

/* Background gradient effect */
body::before {
  content: '';
  position: fixed;
  top: -50vh;
  right: -30vw;
  width: 100vw;
  aspect-ratio: 1;
  background: radial-gradient(ellipse, rgba(100, 100, 255, 0.25), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 1024px) {
  body::before {
    top: -30vh;
    right: -160vw;
    width: 290vw;
  }
}

/* Container utilities */
.container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-tight {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-features {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-personas {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ===================================
 TYPOGRAPHY
 =================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
}

em {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 600;
}

/* Accent em styling for specific contexts */
.hero-title em,
.section-title em,
.demo-cta-title em {
  color: var(--color-accent-light);
}

/* Feature title em uses muted text */
.feature-title em {
  color: var(--color-text-dim);
}

strong {
  font-weight: 600;
  color: var(--color-text);
}

p {
  margin-bottom: 1.25rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  /* 32px to 48px */
  margin-bottom: 2.5rem;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
  display: block;
}

/* ===================================
 ICONS
 =================================== */

[data-lucide] {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
}

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

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 1rem 2rem;
  border-radius: 0.25rem;
  border: 1px solid;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  font-weight: 500;
}

.btn-primary {
  border-color: var(--color-accent);
  background: transparent;
  color: white;
}

.btn-primary:hover {
  background: var(--color-accent-light);
  box-shadow: var(--shadow-accent);
}

.btn-secondary {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text);
}

.btn-secondary:hover {
  border-color: var(--color-text-muted);
}

.btn-sm {
  font-size: 0.8125rem;
  padding: 0.75rem 1.5rem;
}

/* Animated Orbit Border Effect */
@property --orbit-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.btn-orbit {
  position: relative;
  border: none;
  background: transparent;
  isolation: isolate;
}

.btn-orbit::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from var(--orbit-angle),
      transparent 0%,
      var(--color-accent-dim) 70%,
      var(--color-accent) 78%,
      var(--color-accent-light) 82%,
      var(--color-accent-dim) 90%,
      transparent 100%);
  animation: orbitSpin 3s linear infinite;
  z-index: -2;
}

.btn-orbit::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: inherit;
  background: var(--color-surface);
  z-index: -1;
}

@keyframes orbitSpin {
  to {
    --orbit-angle: 360deg;
  }
}

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

.nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.75rem 0;
  background: rgba(15, 15, 16, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.nav-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo-link {
  display: flex;
  align-items: center;
}

.nav-logo {
  width: 160px;
  height: auto;
  object-fit: contain;
}

.nav-desktop {
  display: flex;
  justify-content: end;
  align-items: center;
  flex: 1;
  margin-left: 3rem;
}

.nav-links {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.5rem 0.875rem;
  border-radius: 0.25rem;
  transition: color var(--transition-fast), background var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-link:hover {
  color: var(--color-text);
  background: var(--color-surface-raised);
}

.nav-chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

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

.nav-dropdown-trigger {
  font-family: var(--font-mono);
}

/* Dropdown Menu */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.5rem;
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-trigger:focus+.nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown:hover .nav-chevron {
  transform: rotate(180deg);
}

/* Mega Menu (two columns) */
.nav-dropdown-mega {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  min-width: 560px;
  padding: 1rem;
}

.nav-dropdown-column {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-dropdown-heading {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
}

/* Dropdown Items */
.nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.nav-dropdown-item:hover {
  background: var(--color-surface-raised);
}

.nav-dropdown-item [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.nav-dropdown-item div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.nav-dropdown-item-title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.nav-dropdown-item-desc {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-dim);
  line-height: 1.4;
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0.5rem 0;
}

/* Mobile Navigation */
.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.5rem;
}

.nav-mobile-toggle [data-lucide] {
  width: 24px;
  height: 24px;
}

.nav-mobile-menu {
  border-top: 1px solid var(--color-border);
  margin-top: 0.75rem;
  background: var(--color-surface);
}

.nav-mobile-menu-content {
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-mobile-link {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.75rem 0;
  transition: color var(--transition-fast);
}

.nav-mobile-link:hover {
  color: var(--color-text);
}

/* Mobile Accordion */
.nav-mobile-accordion {
  border-bottom: 1px solid var(--color-border);
}

.nav-mobile-accordion-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: 0.75rem 0;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.nav-mobile-accordion-trigger:hover {
  color: var(--color-text);
}

.nav-mobile-accordion-trigger [data-lucide] {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.nav-mobile-accordion.open .nav-mobile-accordion-trigger [data-lucide] {
  transform: rotate(180deg);
}

.nav-mobile-accordion-content {
  display: none;
  padding-bottom: 0.75rem;
}

.nav-mobile-accordion.open .nav-mobile-accordion-content {
  display: block;
}

.nav-mobile-sublink {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-text-dim);
  text-decoration: none;
  padding: 0.5rem 0 0.5rem 1rem;
  transition: color var(--transition-fast);
}

.nav-mobile-sublink:hover {
  color: var(--color-accent);
}

.nav-mobile-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0.75rem 0;
}

.nav-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (max-width: 1024px) {
  .nav-desktop {
    display: none;
  }

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

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

.hero {
  position: relative;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  padding: 5rem 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-visual {
  scale: 1;
}

@media (min-width: 810px) {
  .hero-visual {
    scale: 0.75;
  }
}

@media (min-width: 1448px) {
  .hero-grid {
    grid-template-columns: 1fr 800px;
  }
}

@media (min-width: 1800px) {
  .hero-visual {
    scale: 1;
  }
}

.hero-content {
  position: relative;
  z-index: 10;
}

.hero-title {
  font-size: clamp(2.625rem, 5vw, 4rem);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.hero-description {
  font-size: 1.0625rem;
  max-width: 650px;
  margin-bottom: 2.5rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Wrapper to contain browser-window and hero-bubbles for proper positioning */
.hero-browser-wrapper {
  position: relative;
  width: fit-content;
}

/* ===================================
 BROWSER WINDOW MOCKUP
 =================================== */

.browser-window {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  aspect-ratio: 6 / 4;
}

.browser-chrome {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
}

.browser-dots {
  display: flex;
  gap: 6px;
}

.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}

.browser-dots span:first-child {
  background: #ff5f57;
}

.browser-dots span:nth-child(2) {
  background: #ffbd2e;
}

.browser-dots span:last-child {
  background: #28ca41;
}

.dotted-grid {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px, 0px 0px;
  background-position: 0 0, 30px 30px;
}

/* ===================================
 DASHBOARD MOCKUP
 =================================== */

.dashboard-container {
  display: flex;
  height: calc(100% - 35px);
}

.dashboard-sidebar {
  width: 48px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0;
  gap: 0.25rem;
  flex-shrink: 0;
}

.sidebar-logo {
  width: 22px;
  height: 22px;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-logo .img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: var(--color-text);
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
}

.sidebar-nav-item:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-nav-item.active {
  color: var(--color-accent-light);
  border-left-color: var(--color-accent);
  background: rgba(100, 100, 255, 0.1);
}

.sidebar-nav-item [data-lucide] {
  width: 16px;
  height: 16px;
}

/* Dashboard Main - Dark theme matching persona chat */
.dashboard-main {
  flex: 1;
  background: var(--color-light-surface);
  padding: 1rem;
  overflow: hidden;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.dashboard-header h1 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-light-text);
}

.dashboard-period {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  color: var(--color-light-text-muted);
  background: var(--color-light-surface-raised);
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--color-light-border);
}

.dashboard-period [data-lucide] {
  width: 10px;
  height: 10px;
}

/* Metrics Cards - Light theme */
.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.metric-card {
  background: var(--color-light-surface-raised);
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--color-light-border);
}

.metric-card-label {
  display: block;
  font-size: 0.6rem;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  margin-bottom: 0.125rem;
}

.metric-card-value {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--font-display);
  color: var(--color-light-text);
  margin-bottom: 0.0625rem;
}

.metric-card-change {
  font-size: 0.6rem;
  font-weight: 500;
}

.metric-card-change.positive {
  color: var(--color-success);
}

.metric-card-change.negative {
  color: var(--color-danger);
}

/* Charts Grid */
.dashboard-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 0.5fr 0.5fr;
  gap: 0.5rem;
}

.chart-card {
  background: var(--color-light-surface-raised);
  padding: 0.625rem;
  border-radius: 8px;
  border: 1px solid var(--color-light-border);
}

.chart-card.chart-large {
  grid-column: span 1;
}

.chart-card.chart-wide {
  grid-column: span 2;
}

.chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-light-text);
}

.chart-card-header [data-lucide] {
  width: 12px;
  height: 12px;
  color: var(--color-light-text-muted);
}

/* Line Chart */
.chart-line {
  height: calc(100% - 30px);
  overflow: visible;
}

.chart-line svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.chart-line-fill {
  opacity: 1;
}

.chart-line-stroke {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dashboard Bar Chart (vertical bars) */
.dashboard-charts .chart-bars {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  height: calc(100% - 30px);
  gap: 0.25rem;
}

.dashboard-charts .chart-bars .chart-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  gap: 0;
  margin-bottom: 0;
}

.dashboard-charts .chart-bar-fill {
  width: 80%;
  max-width: 20px;
  margin-top: auto;
  background: linear-gradient(180deg, rgba(100, 100, 255, 1) 0%, rgba(100, 100, 255, 0.6) 100%);
  border-radius: 2px 2px 0 0;
}

/* Use specific heights instead of percentages */
.dashboard-charts .chart-bars .chart-bar:nth-child(1) .chart-bar-fill {
  height: 85%;
}

.dashboard-charts .chart-bars .chart-bar:nth-child(2) .chart-bar-fill {
  height: 65%;
}

.dashboard-charts .chart-bars .chart-bar:nth-child(3) .chart-bar-fill {
  height: 45%;
}

.dashboard-charts .chart-bars .chart-bar:nth-child(4) .chart-bar-fill {
  height: 70%;
}

.dashboard-charts .chart-bars .chart-bar span {
  font-size: 0.45rem;
  color: var(--color-light-text-muted);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* Donut Chart */
.chart-donut {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 95px;
}

.chart-donut svg {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}

.chart-donut-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.chart-donut-center span {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--font-display);
  color: var(--color-light-text);
  line-height: 0.75;
}

.chart-donut-center small {
  font-size: 0.5rem;
  color: var(--color-light-text-muted);
}

/* Sparklines */
.chart-sparklines {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sparkline-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sparkline-label {
  font-size: 0.5625rem;
  color: var(--color-light-text-muted);
  width: 60px;
}

.sparkline {
  flex: 1;
  height: 24px;
}

.sparkline-value {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-light-text);
  width: 35px;
  text-align: right;
}

/* Responsive Dashboard */
@media (max-width: 768px) {
  .dashboard-sidebar {
    width: 40px;
  }

  .sidebar-logo {
    width: 22px;
    height: 22px;
  }

  .sidebar-nav-item [data-lucide] {
    width: 14px;
    height: 14px;
  }

  .dashboard-main {
    padding: 0.625rem;
  }

  .dashboard-header h1 {
    font-size: 0.75rem;
  }

  .dashboard-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
  }

  .metric-card {
    padding: 0.5rem;
  }

  .metric-card-value {
    font-size: 0.75rem;
  }

  .dashboard-charts {
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
  }

  .chart-card.chart-large {
    grid-column: span 2;
  }

  .chart-card.chart-wide {
    grid-column: span 2;
  }

  .dashboard-charts .chart-bars {
    height: 50px;
  }

  .chart-donut {
    height: 60px;
  }

  .chart-donut svg {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  .dashboard-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-charts {
    grid-template-columns: 1fr;
  }

  .chart-card.chart-large,
  .chart-card.chart-wide {
    grid-column: span 1;
  }
}

.hero-example {
  position: absolute;
  bottom: -1.25rem;
  left: -1.25rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  border-radius: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  max-width: 90%;
}

.example-question {
  color: var(--color-text-muted);
  margin-bottom: 0.375rem;
}

.example-answer {
  color: var(--color-success);
}

/* Hero Chat Overlay */
.hero-chat {
  position: absolute;
  padding: 1.5rem 3rem 1.5rem 1.5rem;
  width: 75%;
  background: rgba(10, 10, 10, 0.95);
  border-radius: 10px;
  border: 1px solid var(--color-border);
  bottom: -5rem;
  left: -5rem;
  width: 65%;
  z-index: 20;
  animation: heroChatBounce 8s ease-in-out infinite
}

@keyframes heroChatBounce {

  0%,
  100% {
    transform: translateY(-8px);
  }

  50% {
    transform: translateY(0);
  }
}

.hero-chat-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 400px;
  overflow: visible;
}

/* Chat Messages */
.hero-chat-message {
  display: flex;
}

.hero-chat-user {
  justify-content: flex-end;
}

.hero-chat-user .message-bubble {
  background: rgba(100, 100, 255, 0.2);
  border: 1px solid rgba(100, 100, 255, 0.4);
  border-radius: 0.75rem 0.75rem 0 0.75rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--color-text);
  max-width: 85%;
}

.hero-chat-assistant {
  gap: 0.625rem;
}

.hero-chat-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  display: flex;
  padding: 0.25rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-chat-content {
  flex: 1;
}

.hero-chat-content p {
  font-size: 0.875rem;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

/* Typing Indicator */
.hero-chat-typing {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface-raised);
  border-radius: 0.75rem;
  width: fit-content;
}

.hero-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-dim);
  animation: typingBounce 1.4s infinite ease-in-out;
}

.hero-chat-typing span:nth-child(1) {
  animation-delay: 0s;
}

.hero-chat-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.hero-chat-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Chat Metrics */
.hero-chat-metrics {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.hero-chat-metric {
  flex: 1;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.625rem 0.75rem;
  text-align: center;
}

.hero-chat-metric .metric-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 0.25rem;
}

.hero-chat-metric .metric-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
}

.hero-chat-metric .metric-value.success {
  color: var(--color-success);
}

.hero-chat-metric .metric-value.warning {
  color: var(--color-warning);
}

.hero-chat-metric .metric-value.danger {
  color: var(--color-danger);
}

/* Chat Insight */
.hero-chat-insight {
  display: flex;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: rgba(100, 100, 255, 0.05);
  border: 1px solid var(--color-accent);
  border-radius: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-text);
  line-height: 1.5;
}

.hero-chat-insight [data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Chat Animation Sequence */
/* Parent animations: fade-in-section takes 0.8s, hero-visual has animate-fade-up-delay-4 (0.4s delay + 0.6s animation = 1s total) */
/* So chat animations should start after ~1.2s minimum */

.chat-animate {
  opacity: 0;
  transform: translateY(10px);
}

/* User question appears */
.fade-in-section.is-visible .chat-animate-1 {
  animation: chatFadeIn 0.5s ease forwards;
  animation-delay: 1.5s;
}

/* Typing indicator appears and stays visible for a bit */
.fade-in-section.is-visible .chat-animate-2 {
  animation: chatFadeIn 0.4s ease forwards;
  animation-delay: 2s;
}

/* Typing indicator fades out when response comes in */
.fade-in-section.is-visible .chat-animate-2.typing-done {
  animation: chatFadeOut 0.3s ease forwards;
}

/* Response appears after typing indicator has been visible */
.fade-in-section.is-visible .chat-animate-3 {
  animation: chatFadeIn 0.5s ease forwards;
  animation-delay: 3s;
}

@keyframes chatFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@keyframes chatFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}

/* Hide typing indicator after response shows */
.fade-in-section.is-visible .hero-chat-response {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .hero-chat {
    position: static;
    width: 100%;
    padding: 1rem;
  }

  .hero-chat-metrics .metric-label {
    font-size: 0.5rem;
  }

  .hero-chat-metrics .metric-value {
    font-size: 1rem;
  }

  .hero-chat-body {
    max-height: 360px;
  }
}

@media (max-width: 1279px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 5rem;
  }
}

@media (max-width: 640px) {
  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* ===================================
 HERO BUBBLES ANIMATION
 =================================== */

.hero-bubbles {
  position: absolute;
  top: -5rem;
  right: -13rem;
  width: 280px;
  height: 280px;
  pointer-events: none;
  animation: heroBubblesBounce 8s ease-in-out infinite;
}

@keyframes heroBubblesBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.bubble-path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bubble-arc-visible {
  opacity: 0.6;
}

/* Goo layer for liquid absorption effect */
.bubble-goo-layer {
  position: absolute;
  inset: 0;
  filter: url(#goo-bubbles);
}

/* Synopsis destination - square, anchored bottom right */
.bubble-destination {
  position: absolute;
  bottom: 0;
  right: 40px;
  width: 110px;
  height: 110px;
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-raised) 100%);
  border-radius: 28px;
  display: flex;
  padding: 1.5rem;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(100, 100, 255, 0.8);
  z-index: 10;
}

.bubble-destination img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  color: white;
}

/* Pulse glow on destination */
.bubble-destination::before {
  content: '';
  position: absolute;
  border-radius: 36px;
  background: radial-gradient(circle, var(--color-surface), var(--color-surface-raised));
  opacity: 1;
  z-index: -1;
  animation: destinationPulse 2.5s ease-in-out infinite;
}

/* Pulse glow on destination */
.hero-bubbles::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 40px;
  width: 110px;
  height: 110px;
  border-radius: 36px;
  box-shadow: 0 0 20px rgba(100, 100, 255, 0.8);
  z-index: -10;
  animation: destinationPulse 2.5s ease-in-out infinite;
}

@keyframes destinationPulse {

  0%,
  100% {
    box-shadow: 0 0 5px rgba(100, 100, 255, 0.8);
  }

  50% {
    box-shadow: 0 0 30px rgba(100, 100, 255, 0.4);
  }
}

/* Individual bubbles */
.bubble {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  padding: 0.5rem;
  align-items: center;
  justify-content: center;
  background: var(--color-light-surface);
  /* 150 degree arc, rotated 45 degrees CW, ending near top-left of destination */
  offset-path: path('M 10,80 A 120,120 0 0 1 165,235');
  offset-rotate: 0deg;
  animation: bubbleOrbit 21s linear infinite;
  animation-delay: calc(var(--i) * -7s);
  opacity: 0;
}

.bubble img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(100, 100, 255, 0.9);
  opacity: 0;
  z-index: 2;
}

/* App-specific colors */
@keyframes bubbleOrbit {
  0% {
    offset-distance: 0%;
    opacity: 0;
    transform: scale(0.3);
  }

  8% {
    opacity: 1;
    transform: scale(1);
  }

  65% {
    opacity: 1;
    transform: scale(1);
  }

  75% {
    opacity: 1;
    transform: scale(0.6);
  }

  85% {
    opacity: 0.9;
    transform: scale(0.1);
  }

  95% {
    opacity: 0.5;
    transform: scale(0);
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
    transform: scale(0);
  }
}

/* Color shift animation - applied directly to each bubble's ::before */
.bubble[data-app="drive"]::before,
.bubble[data-app="slack"]::before,
.bubble[data-app="quickbooks"]::before,
.bubble[data-app="jira"]::before,
.bubble[data-app="pendo"]::before,
.bubble[data-app="exel"]::before,
.bubble[data-app="hubspot"]::before,
.bubble[data-app="salesforce"]::before {
  animation: bubbleColorShift 21s linear infinite;
}

.bubble[data-app="drive"]::before {
  animation-delay: calc(0 * -7s);
}

.bubble[data-app="slack"]::before {
  animation-delay: calc(1 * -7s);
}

.bubble[data-app="quickbooks"]::before {
  animation-delay: calc(2 * -7s);
}

.bubble[data-app="jira"]::before {
  animation-delay: calc(3 * -7s);
}

.bubble[data-app="pendo"]::before {
  animation-delay: calc(4 * -7s);
}

.bubble[data-app="exel"]::before {
  animation-delay: calc(5 * -7s);
}

.bubble[data-app="hubspot"]::before {
  animation-delay: calc(6 * -7s);
}

.bubble[data-app="salesforce"]::before {
  animation-delay: calc(7 * -7s);
}

@keyframes bubbleColorShift {

  0%,
  50% {
    opacity: 0;
  }

  70% {
    opacity: 0.4;
  }

  75% {
    opacity: 1;
  }

  85%,
  100% {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .hero-bubbles {
    display: none;
    width: 196px;
    height: 180px;
    top: -3rem;
    right: -2rem;
    z-index: 1;
  }

  .bubble-destination,
  .hero-bubbles::after {
    width: 90px;
    height: 90px;
    border-radius: 20px;
  }

  .bubble-destination [data-lucide] {
    width: 36px;
    height: 36px;
  }

  .bubble {
    width: 30px;
    height: 30px;
    offset-path: path('M 7,57 A 85,85 0 0 1 118,168');
  }

  .bubble [data-lucide] {
    width: 14px;
    height: 14px;
  }
}

/* ===================================
 PITCH SECTION
 =================================== */

.pitch {
  position: relative;
  padding: 5rem 0;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .pitch {
    padding: 8.75rem 0;
  }
}

.pitch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1536px) {
  .pitch-grid {
    grid-template-columns: 550px 1fr;
    gap: 5rem;
  }
}

.pitch-content p {
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 2.5rem 0;
}

.stat {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--color-accent-light);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--color-text-dim);
}


@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

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

.features {
  position: relative;
  padding: 8.75rem 0;
  background: rgba(24, 24, 26, 0.8);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--color-border);
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 8px 8px, 0px 0px;
  background-position: 0 0, 8px 8px;
}

.section-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 6.25rem;
}

.section-header h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  /* 32px to 44px */
  margin-bottom: 1rem;
}

.section-header p {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 5rem 0;
  border-top: 1px solid var(--color-border);
  overflow: visible;
}

@media (min-width: 1024px) {
  .feature {
    grid-template-columns: 450px 1fr;
    gap: 5rem;
  }
}

.feature-meta {
  height: fit-content;
}

.feature-number {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.feature-title {
  font-size: clamp(1.5rem, 3.25vw, 1.75rem);
  margin-bottom: 1.25rem;
  line-height: 1.25;
}

.feature-content {
  min-width: 0;
  overflow: hidden;
}

.feature-content p {
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}

.feature-list {
  list-style: none;
  margin-top: 1.5rem;
}

.feature-list li {
  color: var(--color-text-muted);
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.feature-list li [data-lucide] {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.feature-visual {
  border-radius: 0.375rem;
  min-height: 400px;
  margin-top: 2rem;
}

/* ===================================
 INTEGRATION MARQUEE
 =================================== */

.feature-visual.integration-marquee {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: unset;
  border: unset;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px, 0px 0px;
  background-position: 0 0, 30px 30px;
}

.marquee-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
}

/* Left-moving rows */
.marquee-row[data-direction="left"] .marquee-track {
  animation: marqueeLeft 360s linear infinite;
}

/* Right-moving rows */
.marquee-row[data-direction="right"] .marquee-track {
  animation: marqueeRight 360s linear infinite;
}

@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* Integration icons */
.integration-icon {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
  backdrop-filter: blur(100px);
}

.integration-icon [data-lucide] {
  width: 36px;
  height: 36px;
  stroke-width: 1;
  transition: color 0.3s ease, opacity 0.3s ease;
}

/* Synopsis icon overlay (hidden by default, shown on scroll morph) */
.integration-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("assets/images/logos/synopsis_icon_negative.svg") center/36px no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* App-specific colors */
.integration-icon[data-app="cloud"] {
  background: rgba(0, 161, 224, 0.15);
  border: 1px solid rgba(0, 161, 224, 0.3);
}

.integration-icon[data-app="cloud"] [data-lucide] {
  color: #00A1E0;
}

.integration-icon[data-app="target"] {
  background: rgba(255, 122, 89, 0.15);
  border: 1px solid rgba(255, 122, 89, 0.3);
}

.integration-icon[data-app="target"] [data-lucide] {
  color: #FF7A59;
}

.integration-icon[data-app="hash"] {
  background: rgba(224, 30, 90, 0.15);
  border: 1px solid rgba(224, 30, 90, 0.3);
}

.integration-icon[data-app="hash"] [data-lucide] {
  color: #E01E5A;
}

.integration-icon[data-app="calculator"] {
  background: rgba(44, 160, 28, 0.15);
  border: 1px solid rgba(44, 160, 28, 0.3);
}

.integration-icon[data-app="calculator"] [data-lucide] {
  color: #2CA01C;
}

.integration-icon[data-app="database"] {
  background: rgba(0, 51, 102, 0.15);
  border: 1px solid rgba(0, 51, 102, 0.3);
}

.integration-icon[data-app="database"] [data-lucide] {
  color: #003366;
}

.integration-icon[data-app="ticket"] {
  background: rgba(0, 82, 204, 0.15);
  border: 1px solid rgba(0, 82, 204, 0.3);
}

.integration-icon[data-app="ticket"] [data-lucide] {
  color: #0052CC;
}

.integration-icon[data-app="headphones"] {
  background: rgba(3, 54, 61, 0.15);
  border: 1px solid rgba(3, 54, 61, 0.3);
}

.integration-icon[data-app="headphones"] [data-lucide] {
  color: #03363D;
}

.integration-icon[data-app="credit-card"] {
  background: rgba(99, 91, 255, 0.15);
  border: 1px solid rgba(99, 91, 255, 0.3);
}

.integration-icon[data-app="credit-card"] [data-lucide] {
  color: #635BFF;
}

.integration-icon[data-app="table"] {
  background: rgba(52, 168, 83, 0.15);
  border: 1px solid rgba(52, 168, 83, 0.3);
}

.integration-icon[data-app="table"] [data-lucide] {
  color: #34A853;
}

.integration-icon[data-app="git-branch"] {
  background: rgba(110, 64, 201, 0.15);
  border: 1px solid rgba(110, 64, 201, 0.3);
}

.integration-icon[data-app="git-branch"] [data-lucide] {
  color: #6e40c9;
}

.integration-icon[data-app="phone"] {
  background: rgba(242, 47, 70, 0.15);
  border: 1px solid rgba(242, 47, 70, 0.3);
}

.integration-icon[data-app="phone"] [data-lucide] {
  color: #F22F46;
}

.integration-icon[data-app="message-circle"] {
  background: rgba(0, 135, 255, 0.15);
  border: 1px solid rgba(0, 135, 255, 0.3);
}

.integration-icon[data-app="message-circle"] [data-lucide] {
  color: #0087FF;
}

.integration-icon[data-app="mail"] {
  background: rgba(255, 224, 27, 0.15);
  border: 1px solid rgba(255, 224, 27, 0.3);
}

.integration-icon[data-app="mail"] [data-lucide] {
  color: #FFE01B;
}

.integration-icon[data-app="check-square"] {
  background: rgba(246, 114, 128, 0.15);
  border: 1px solid rgba(246, 114, 128, 0.3);
}

.integration-icon[data-app="check-square"] [data-lucide] {
  color: #F67280;
}

.integration-icon[data-app="file-text"] {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.integration-icon[data-app="file-text"] [data-lucide] {
  color: #FFFFFF;
}

.integration-icon[data-app="grid-3x3"] {
  background: rgba(24, 191, 255, 0.15);
  border: 1px solid rgba(24, 191, 255, 0.3);
}

.integration-icon[data-app="grid-3x3"] [data-lucide] {
  color: #18BFFF;
}

.integration-icon[data-app="calendar"] {
  background: rgba(255, 61, 87, 0.15);
  border: 1px solid rgba(255, 61, 87, 0.3);
}

.integration-icon[data-app="calendar"] [data-lucide] {
  color: #FF3D57;
}

.integration-icon[data-app="box"] {
  background: rgba(0, 97, 255, 0.15);
  border: 1px solid rgba(0, 97, 255, 0.3);
}

.integration-icon[data-app="box"] [data-lucide] {
  color: #0061FF;
}

.integration-icon[data-app="video"] {
  background: rgba(45, 140, 255, 0.15);
  border: 1px solid rgba(45, 140, 255, 0.3);
}

.integration-icon[data-app="video"] [data-lucide] {
  color: #2D8CFF;
}

.integration-icon[data-app="linkedin"] {
  background: rgba(0, 119, 181, 0.15);
  border: 1px solid rgba(0, 119, 181, 0.3);
}

.integration-icon[data-app="linkedin"] [data-lucide] {
  color: #0077B5;
}

.integration-icon[data-app="hard-drive"] {
  background: rgba(66, 133, 244, 0.15);
  border: 1px solid rgba(66, 133, 244, 0.3);
}

.integration-icon[data-app="hard-drive"] [data-lucide] {
  color: #4285F4;
}

.integration-icon[data-app="shopping-bag"] {
  background: rgba(150, 191, 72, 0.15);
  border: 1px solid rgba(150, 191, 72, 0.3);
}

.integration-icon[data-app="shopping-bag"] [data-lucide] {
  color: #96BF48;
}

.integration-icon[data-app="cylinder"] {
  background: rgba(51, 103, 145, 0.15);
  border: 1px solid rgba(51, 103, 145, 0.3);
}

.integration-icon[data-app="cylinder"] [data-lucide] {
  color: #336791;
}

.integration-icon[data-app="rocket"] {
  background: rgba(41, 181, 232, 0.15);
  border: 1px solid rgba(41, 181, 232, 0.3);
}

.integration-icon[data-app="rocket"] [data-lucide] {
  color: #29B5E8;
}

.integration-icon[data-app="server"] {
  background: rgba(255, 153, 0, 0.15);
  border: 1px solid rgba(255, 153, 0, 0.3);
}

.integration-icon[data-app="server"] [data-lucide] {
  color: #FF9900;
}

.integration-icon[data-app="cloud-cog"] {
  background: rgba(0, 127, 255, 0.15);
  border: 1px solid rgba(0, 127, 255, 0.3);
}

.integration-icon[data-app="cloud-cog"] [data-lucide] {
  color: #007FFF;
}

.integration-icon[data-app="database-alt"] {
  background: rgba(66, 133, 244, 0.15);
  border: 1px solid rgba(66, 133, 244, 0.3);
}

.integration-icon[data-app="database-alt"] [data-lucide] {
  color: #4285F4;
}

.integration-icon[data-app="bar-chart-2"] {
  background: rgba(126, 87, 194, 0.15);
  border: 1px solid rgba(126, 87, 194, 0.3);
}

.integration-icon[data-app="bar-chart-2"] [data-lucide] {
  color: #7E57C2;
}

.integration-icon[data-app="activity"] {
  background: rgba(0, 98, 255, 0.15);
  border: 1px solid rgba(0, 98, 255, 0.3);
}

.integration-icon[data-app="activity"] [data-lucide] {
  color: #0062FF;
}

.integration-icon[data-app="git-merge"] {
  background: rgba(82, 189, 148, 0.15);
  border: 1px solid rgba(82, 189, 148, 0.3);
}

.integration-icon[data-app="git-merge"] [data-lucide] {
  color: #52BD94;
}

.integration-icon[data-app="trending-up"] {
  background: rgba(255, 78, 132, 0.15);
  border: 1px solid rgba(255, 78, 132, 0.3);
}

.integration-icon[data-app="trending-up"] [data-lucide] {
  color: #FF4E84;
}

.integration-icon[data-app="mic"] {
  background: rgba(124, 77, 255, 0.15);
  border: 1px solid rgba(124, 77, 255, 0.3);
}

.integration-icon[data-app="mic"] [data-lucide] {
  color: #7C4DFF;
}

.integration-icon[data-app="send"] {
  background: rgba(89, 73, 188, 0.15);
  border: 1px solid rgba(89, 73, 188, 0.3);
}

.integration-icon[data-app="send"] [data-lucide] {
  color: #5949BC;
}

.integration-icon[data-app="megaphone"] {
  background: rgba(94, 45, 140, 0.15);
  border: 1px solid rgba(94, 45, 140, 0.3);
}

.integration-icon[data-app="megaphone"] [data-lucide] {
  color: #5E2D8C;
}

.integration-icon[data-app="briefcase"] {
  background: rgba(255, 102, 0, 0.15);
  border: 1px solid rgba(255, 102, 0, 0.3);
}

.integration-icon[data-app="briefcase"] [data-lucide] {
  color: #FF6600;
}

.integration-icon[data-app="settings"] {
  background: rgba(129, 183, 52, 0.15);
  border: 1px solid rgba(129, 183, 52, 0.3);
}

.integration-icon[data-app="settings"] [data-lucide] {
  color: #81B734;
}

.integration-icon[data-app="landmark"] {
  background: rgba(255, 0, 0, 0.15);
  border: 1px solid rgba(255, 0, 0, 0.3);
}

.integration-icon[data-app="landmark"] [data-lucide] {
  color: #FF0000;
}

.integration-icon[data-app="gem"] {
  background: rgba(0, 105, 170, 0.15);
  border: 1px solid rgba(0, 105, 170, 0.3);
}

.integration-icon[data-app="gem"] [data-lucide] {
  color: #0069AA;
}

.integration-icon[data-app="building"] {
  background: rgba(0, 120, 212, 0.15);
  border: 1px solid rgba(0, 120, 212, 0.3);
}

.integration-icon[data-app="building"] [data-lucide] {
  color: #0078D4;
}

.integration-icon[data-app="leaf"] {
  background: rgba(15, 184, 106, 0.15);
  border: 1px solid rgba(15, 184, 106, 0.3);
}

.integration-icon[data-app="leaf"] [data-lucide] {
  color: #0FB86A;
}

/* Scroll-based morph to Synopsis state */
.integration-icon.morphed {
  background: rgba(100, 100, 255, 0.15) !important;
  border-color: rgba(100, 100, 255, 0.3) !important;
}

.integration-icon.morphed [data-lucide] {
  opacity: 0;
}

.integration-icon.morphed::after {
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .integration-marquee {
    min-height: 300px;
    gap: 0.75rem;
  }

  .integration-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }

  .integration-icon [data-lucide] {
    width: 20px;
    height: 20px;
  }

  .integration-icon::after {
    background-size: 20px;
  }

  .marquee-track {
    gap: 0.75rem;
  }
}

/* ===================================
 INTEGRATION HUB ANIMATION
 =================================== */

.feature-visual.integration-hub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 450px;
  overflow: visible;
  background: unset;
  border: unset;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px, 0px 0px;
  background-position: 0 0, 30px 30px;
}

.hub-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 400px;
}

.hub-line {
  stroke: var(--color-accent-dim);
  stroke-width: 1;
  stroke-dasharray: 6 6;
  transition: opacity 0.5s ease;
}

.hub-line.cardinal {
  opacity: 0.5;
}

.hub-line.diagonal {
  opacity: 0;
}

/* Show diagonal lines when expanded */
.integration-hub.expanded .hub-line.diagonal {
  opacity: 0.5;
}

/* Goo layer - contains both center and bubbles for metaball effect */
.hub-goo-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 400px;
  filter: url(#goo-hub);
}

/* Center container - for positioning */
.hub-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 24px;
  background: var(--color-accent);
  z-index: 10;
}

/* Inner container for the logo - not affected by goo */
.hub-center-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-raised) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-shadow: 0 0 30px rgba(100, 100, 255, 0.5);
  transition: box-shadow 0.3s ease;
}

/* Gold glow pulse animation */
.hub-center-inner.glow-gold {
  animation: hubGoldPulse 0.8s ease;
}

@keyframes hubGoldPulse {
  0% {
    box-shadow: 0 0 30px rgba(100, 100, 255, 0.5);
  }

  50% {
    box-shadow: 0 0 35px rgba(255, 200, 50, 0.75), 0 0 40px rgba(255, 180, 50, 0.5);
  }

  100% {
    box-shadow: 0 0 30px rgba(100, 100, 255, 0.5);
  }
}

.hub-center-inner .img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Bubbles - inside goo layer for absorption effect */
.hub-bubble {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  z-index: 5;
}

.hub-bubble.cardinal {
  visibility: visible;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--delay);
}

.hub-bubble.diagonal {
  visibility: hidden;
}

/* Show diagonal bubbles when expanded */
.integration-hub.expanded .hub-bubble.diagonal {
  visibility: visible;
}

.hub-bubble.diagonal {
  opacity: 0;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--delay);
  animation-play-state: paused;
}

/* N direction */
.hub-bubble[data-direction="n"] {
  left: 50%;
  animation-name: hubBubbleN;
}

@keyframes hubBubbleN {
  0% {
    top: 8%;
    opacity: 0;
    transform: translateX(-50%) scale(0.3);
  }

  5% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  85% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  95% {
    opacity: 0.6;
    transform: translateX(-50%) scale(0.5);
  }

  100% {
    top: 42%;
    opacity: 0;
    transform: translateX(-50%) scale(0);
  }
}

/* E direction */
.hub-bubble[data-direction="e"] {
  top: 50%;
  animation-name: hubBubbleE;
}

@keyframes hubBubbleE {
  0% {
    right: 8%;
    opacity: 0;
    transform: translateY(-50%) scale(0.3);
  }

  5% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  85% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  95% {
    opacity: 0.6;
    transform: translateY(-50%) scale(0.5);
  }

  100% {
    right: 42%;
    opacity: 0;
    transform: translateY(-50%) scale(0);
  }
}

/* S direction */
.hub-bubble[data-direction="s"] {
  left: 50%;
  animation-name: hubBubbleS;
}

@keyframes hubBubbleS {
  0% {
    bottom: 8%;
    opacity: 0;
    transform: translateX(-50%) scale(0.3);
  }

  5% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  85% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  95% {
    opacity: 0.6;
    transform: translateX(-50%) scale(0.5);
  }

  100% {
    bottom: 42%;
    opacity: 0;
    transform: translateX(-50%) scale(0);
  }
}

/* W direction */
.hub-bubble[data-direction="w"] {
  top: 50%;
  animation-name: hubBubbleW;
}

@keyframes hubBubbleW {
  0% {
    left: 8%;
    opacity: 0;
    transform: translateY(-50%) scale(0.3);
  }

  5% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  85% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  95% {
    opacity: 0.6;
    transform: translateY(-50%) scale(0.5);
  }

  100% {
    left: 42%;
    opacity: 0;
    transform: translateY(-50%) scale(0);
  }
}

/* NE direction */
.hub-bubble[data-direction="ne"] {
  animation-name: hubBubbleNE;
}

@keyframes hubBubbleNE {
  0% {
    top: 15%;
    right: 15%;
    opacity: 0;
    transform: scale(0.3);
  }

  5% {
    opacity: 1;
    transform: scale(1);
  }

  85% {
    opacity: 1;
    transform: scale(1);
  }

  95% {
    opacity: 0.6;
    transform: scale(0.5);
  }

  100% {
    top: 44%;
    right: 44%;
    opacity: 0;
    transform: scale(0);
  }
}

/* SE direction */
.hub-bubble[data-direction="se"] {
  animation-name: hubBubbleSE;
}

@keyframes hubBubbleSE {
  0% {
    bottom: 15%;
    right: 15%;
    opacity: 0;
    transform: scale(0.3);
  }

  5% {
    opacity: 1;
    transform: scale(1);
  }

  85% {
    opacity: 1;
    transform: scale(1);
  }

  95% {
    opacity: 0.6;
    transform: scale(0.5);
  }

  100% {
    bottom: 44%;
    right: 44%;
    opacity: 0;
    transform: scale(0);
  }
}

/* SW direction */
.hub-bubble[data-direction="sw"] {
  animation-name: hubBubbleSW;
}

@keyframes hubBubbleSW {
  0% {
    bottom: 15%;
    left: 15%;
    opacity: 0;
    transform: scale(0.3);
  }

  5% {
    opacity: 1;
    transform: scale(1);
  }

  85% {
    opacity: 1;
    transform: scale(1);
  }

  95% {
    opacity: 0.6;
    transform: scale(0.5);
  }

  100% {
    bottom: 44%;
    left: 44%;
    opacity: 0;
    transform: scale(0);
  }
}

/* NW direction */
.hub-bubble[data-direction="nw"] {
  animation-name: hubBubbleNW;
}

@keyframes hubBubbleNW {
  0% {
    top: 15%;
    left: 15%;
    opacity: 0;
    transform: scale(0.3);
  }

  5% {
    opacity: 1;
    transform: scale(1);
  }

  85% {
    opacity: 1;
    transform: scale(1);
  }

  95% {
    opacity: 0.6;
    transform: scale(0.5);
  }

  100% {
    top: 44%;
    left: 44%;
    opacity: 0;
    transform: scale(0);
  }
}

/* Outer app icons */
.hub-apps {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 400px;
}

.hub-app {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
}

.hub-app [data-lucide] {
  width: 22px;
  height: 22px;
}

/* Initial apps - start at cardinal positions */
.hub-app.initial[data-app="cloud"] {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.hub-app.initial[data-app="hash"] {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.hub-app.initial[data-app="calculator"] {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.hub-app.initial[data-app="git-branch"] {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Expanded apps - start hidden, appear at cardinal positions */
.hub-app.expanded {
  opacity: 0;
  transform: scale(0.5);
}

.hub-app.expanded[data-app="table"] {
  top: 0;
  left: 50%;
}

.hub-app.expanded[data-app="target"] {
  top: 50%;
  right: 0;
}

.hub-app.expanded[data-app="phone"] {
  bottom: 0;
  left: 50%;
}

.hub-app.expanded[data-app="box"] {
  top: 50%;
  left: 0;
}

/* When expanded: initial apps move to diagonal, expanded apps appear at cardinal */
.integration-hub.expanded .hub-app.initial[data-app="cloud"] {
  top: 11%;
  left: auto;
  right: 11%;
  transform: none;
}

.integration-hub.expanded .hub-app.initial[data-app="hash"] {
  top: auto;
  bottom: 11%;
  right: 11%;
  transform: none;
}

.integration-hub.expanded .hub-app.initial[data-app="calculator"] {
  bottom: 11%;
  left: 11%;
  transform: none;
}

.integration-hub.expanded .hub-app.initial[data-app="git-branch"] {
  top: 11%;
  left: 11%;
  transform: none;
}

.integration-hub.expanded .hub-app.expanded {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.integration-hub.expanded .hub-app.expanded[data-app="table"] {
  transform: translateX(-50%);
}

.integration-hub.expanded .hub-app.expanded[data-app="target"] {
  transform: translateY(-50%);
}

.integration-hub.expanded .hub-app.expanded[data-app="phone"] {
  transform: translateX(-50%);
}

.integration-hub.expanded .hub-app.expanded[data-app="box"] {
  transform: translateY(-50%);
}

/* App colors */
.hub-app[data-app="cloud"] {
  background: rgba(0, 161, 224, 0.15);
  border: 1px solid rgba(0, 161, 224, 0.3);
}

.hub-app[data-app="cloud"] [data-lucide] {
  color: #00A1E0;
}

.hub-app[data-app="hash"] {
  background: rgba(224, 30, 90, 0.15);
  border: 1px solid rgba(224, 30, 90, 0.3);
}

.hub-app[data-app="hash"] [data-lucide] {
  color: #E01E5A;
}

.hub-app[data-app="calculator"] {
  background: rgba(44, 160, 28, 0.15);
  border: 1px solid rgba(44, 160, 28, 0.3);
}

.hub-app[data-app="calculator"] [data-lucide] {
  color: #2CA01C;
}

.hub-app[data-app="table"] {
  background: rgba(52, 168, 83, 0.15);
  border: 1px solid rgba(52, 168, 83, 0.3);
}

.hub-app[data-app="table"] [data-lucide] {
  color: #34A853;
}

.hub-app[data-app="git-branch"] {
  background: rgba(110, 64, 201, 0.15);
  border: 1px solid rgba(110, 64, 201, 0.3);
}

.hub-app[data-app="git-branch"] [data-lucide] {
  color: #6e40c9;
}

.hub-app[data-app="target"] {
  background: rgba(41, 181, 232, 0.15);
  border: 1px solid rgba(41, 181, 232, 0.3);
}

.hub-app[data-app="target"] [data-lucide] {
  color: #29B5E8;
}

.hub-app[data-app="phone"] {
  background: rgba(242, 47, 70, 0.15);
  border: 1px solid rgba(242, 47, 70, 0.3);
}

.hub-app[data-app="phone"] [data-lucide] {
  color: #F22F46;
}

.hub-app[data-app="box"] {
  background: rgba(0, 97, 255, 0.15);
  border: 1px solid rgba(0, 97, 255, 0.3);
}

.hub-app[data-app="box"] [data-lucide] {
  color: #0061FF;
}

/* Hub responsive */
@media (max-width: 640px) {
  .feature-visual.integration-hub {
    min-height: 350px;
  }

  .hub-lines,
  .hub-goo-layer,
  .hub-apps,
  .hub-bubbles {
    max-width: 300px;
    max-height: 300px;
  }

  .hub-center {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    padding: 0.75rem;
  }

  .hub-center-inner {
    padding: 0.75rem;
  }

  .hub-app {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .hub-app [data-lucide] {
    width: 18px;
    height: 18px;
  }

  .hub-bubble {
    width: 10px;
    height: 10px;
  }
}

.section-footer {
  text-align: center;
  padding-top: 5rem;
  border-top: 1px solid var(--color-border);
  margin-top: 2.5rem;
}

.section-footer p {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  margin-bottom: 2.5rem;
}

/* Mobile sticky background for feature-meta */
@media (max-width: 1023px) {
  .feature-meta.is-stuck {
    background: rgba(15, 15, 16, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1rem;
    margin: -1rem;
    border-radius: 10px;
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
  }
}

@media (min-width: 1024px) {
  .feature-meta {
    position: sticky;
    top: 120px;
  }
}

/* ===================================
 DASHBOARD BUILDER ANIMATION
 =================================== */

.dashboard-builder {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 2rem;
  position: relative;
  overflow: visible;
  width: 100%;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px, 0px 0px;
  background-position: 0 0, 30px 30px;
}

/* Query Input */
.dashboard-query {
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeSlideDown 0.6s ease forwards;
}

.query-input {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
}

.query-text {
  flex: 1;
}

.query-cursor {
  color: var(--color-accent-light);
  animation: blink 1s step-end infinite;
  opacity: 0;
}

.dashboard-builder.typing .query-cursor {
  opacity: 1;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  50.01%,
  100% {
    opacity: 0;
  }
}

/* Thinking State */
.dashboard-thinking {
  position: absolute;
  top: 4.5rem;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.dashboard-builder.thinking .dashboard-thinking {
  opacity: 1;
}

.thinking-avatar {
  width: 2rem;
  height: 2rem;
  background: var(--color-accent);
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s ease-in-out infinite;
}

.thinking-avatar img {
  width: 1.25rem;
  height: 1.25rem;
}

.thinking-dots {
  display: flex;
  gap: 0.375rem;
}

.thinking-dots span {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-text-dim);
  border-radius: 50%;
  animation: dotBounce 1.4s infinite;
}

.thinking-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.thinking-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotBounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-0.5rem);
  }
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(100, 100, 255, 0.4);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(100, 100, 255, 0);
  }
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dashboard-builder.building .dashboard-grid {
  opacity: 1;
}

/* Dashboard Widgets */
.dashboard-widget {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Grid position changes happen instantly, visual transitions are smooth */
  will-change: transform, opacity;
}

.dashboard-builder.building .dashboard-widget {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered animation delays */
.dashboard-widget[data-widget="1"] {
  transition-delay: 0s;
}

.dashboard-widget[data-widget="2"] {
  transition-delay: 0.15s;
}

.dashboard-widget[data-widget="3"] {
  transition-delay: 0.3s;
}

.dashboard-widget[data-widget="4"] {
  transition-delay: 0.45s;
}

.dashboard-widget[data-widget="5"] {
  transition-delay: 0.6s;
}

.dashboard-widget[data-widget="6"] {
  transition-delay: 0.75s;
}

.widget-large {
  grid-column: span 2;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.widget-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.widget-title [data-lucide] {
  width: 0.65rem;
  height: 0.65rem;
}

.widget-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.widget-body {
  position: relative;
  flex-grow: 1;
}

/* Line Chart */
.line-chart {
  width: 100%;
  height: 100px;
  overflow: visible;
}

.chart-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.dashboard-builder.building .chart-line {
  animation: drawLine 2s ease forwards;
  animation-delay: 0.8s;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.chart-area {
  opacity: 0;
}

.dashboard-builder.building .chart-area {
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 1.5s;
}

.chart-dot {
  opacity: 0;
  transform-origin: center;
}

.dashboard-builder.building .chart-dot {
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dashboard-builder.building .chart-dot:nth-child(3) {
  animation-delay: 0.9s;
}

.dashboard-builder.building .chart-dot:nth-child(4) {
  animation-delay: 1s;
}

.dashboard-builder.building .chart-dot:nth-child(5) {
  animation-delay: 1.1s;
}

.dashboard-builder.building .chart-dot:nth-child(6) {
  animation-delay: 1.2s;
}

.dashboard-builder.building .chart-dot:nth-child(7) {
  animation-delay: 1.3s;
}

.dashboard-builder.building .chart-dot:nth-child(8) {
  animation-delay: 1.4s;
}

.dashboard-builder.building .chart-dot:nth-child(9) {
  animation-delay: 1.5s;
}

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

  50% {
    transform: scale(1.3);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Metric Widgets */
.widget-metric .widget-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.widget-metric .metric-value {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1;
}

.widget-metric .metric-prefix,
.widget-metric .metric-suffix {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  margin: 0 0.125rem;
}

.metric-number {
  font-family: var(--font-display);
}

.metric-change {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.metric-change.positive {
  color: var(--color-success);
}

.metric-change.negative {
  color: var(--color-danger);
}

.metric-change i {
  width: 1rem;
  height: 1rem;
}

/* Bar Chart */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bar-item {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap: 0.5rem;
}

.bar-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  height: 1.25rem;
  background: var(--color-surface);
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-dim), var(--color-accent-light));
  border-radius: 0.25rem;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dashboard-builder.building .bar-fill {
  transform: scaleX(1);
}

.bar-item:nth-child(1) .bar-fill {
  transition-delay: 0.6s;
}

.bar-item:nth-child(2) .bar-fill {
  transition-delay: 0.75s;
}

.bar-item:nth-child(3) .bar-fill {
  transition-delay: 0.9s;
}

.bar-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-mono);
}

/* Gauge Widget */
.gauge-container {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}

.gauge-svg {
  width: 100%;
  max-width: 150px;
  height: auto;
}

.gauge-progress {
  transition: stroke-dashoffset 2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.8s;
}

.dashboard-builder.building .gauge-progress {
  stroke-dashoffset: 12.56;
  /* 157 * (1 - 0.92) for 92% */
}

.gauge-value {
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-success);
  font-family: var(--font-display);
}

.gauge-suffix {
  font-size: 1rem;
  margin-left: 0.125rem;
}

/* Dashboard Footer */
.dashboard-footer {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.65rem;
  color: var(--color-text-dim);
  opacity: 0;
}

.dashboard-builder.complete .dashboard-footer {
  animation: fadeSlideUp 0.6s ease forwards;
  animation-delay: 0.5s;
}

.dashboard-verified,
.dashboard-sources,
.dashboard-timestamp {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

.dashboard-verified [data-lucide],
.dashboard-sources [data-lucide],
.dashboard-timestamp [data-lucide] {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.dashboard-verified span {
  color: var(--color-success);
}

.dashboard-verified [data-lucide] {
  stroke: var(--color-success);
}

/* Keyframe Animations */
@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

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

/* Responsive Design */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .widget-large {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .dashboard-builder {
    padding: 0;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .widget-large {
    grid-column: span 1;
  }

  .metric-value {
    font-size: 1.75rem;
  }

  .dashboard-footer {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .dashboard-builder {
    padding: 0;
  }

  .dashboard-widget {
    padding: 0.875rem;
  }

  .metric-value {
    font-size: 1.5rem;
  }

  .bar-item {
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
  }

  .bar-label {
    font-size: 0.6875rem;
    max-width: 60px;
  }

  .query-input {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
  }
}

/* ===================================
 PERSONAS SECTION
 =================================== */

.personas {
  padding-top: 8.75rem;
}

.personas .section-header {
  margin-bottom: 3.75rem;
}

.personas .section-header p {
  font-family: var(--font-body);
  font-size: 1rem;
}

.persona-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.persona-tab {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.persona-tab:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.persona-tab.active {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.persona-panel {
  display: none;
}

.persona-panel.active {
  display: block;
}

/* ===================================
 CHAT COMPONENTS
 =================================== */

.chat-container {
  margin-bottom: 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  overflow: hidden;
}

.chat-header {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.chat-header:hover {
  background: var(--color-surface-raised);
}

.chat-title {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
}

.chat-subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-dim);
}

.chat-toggle {
  color: var(--color-accent);
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

.chat-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 3rem 0 1.5rem;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    padding 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.chat-container.open .chat-body {
  max-height: 2000px;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

/* Message spacing inside chat body */
.chat-body>*:not(:last-child) {
  margin-bottom: 1.5rem;
}

.message-user {
  display: flex;
  justify-content: flex-end;
}

.message-bubble {
  background: rgba(100, 100, 255, 0.25);
  border: 1px solid rgba(100, 100, 255, 0.5);
  border-radius: 0.75rem 0.75rem 0 0.75rem;
  /* rounded-t-xl rounded-bl-xl */
  padding: 0.75rem 1rem;
  max-width: 80%;
  font-size: 0.875rem;
  color: white;
}

.message-assistant {
  display: flex;
  gap: 0.75rem;
}

.message-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  display: flex;
  padding: 0.25rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.message-content {
  flex: 1;
}

.message-text {
  font-size: 0.875rem;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  color: white;
}

/* ===================================
 ARTIFACT COMPONENTS (Light Mode)
 =================================== */

.artifact {
  background: var(--color-light-bg);
  border: 1px solid var(--color-light-border);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  /* drop-shadow-lg */
}

.artifact-header {
  padding: 1.25rem;
  border-bottom: 1px solid var(--color-light-border);
  background: var(--color-light-surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.artifact-header-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.artifact-icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  background: rgba(100, 100, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.artifact-icon svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: var(--color-accent);
}

.artifact-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-light-text);
  font-weight: 500;
}

.artifact-type {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-light-text-muted);
  letter-spacing: 0.05em;
}

.artifact-body {
  padding: 1.25rem;
}

/* Artifact Tables */
.artifact-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
}

.artifact-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-light-border);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-light-text-muted);
  background: var(--color-light-surface);
  font-weight: 500;
}

.artifact-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-light-border);
  color: var(--color-light-text-muted);
}

.artifact-table td strong {
  color: var(--color-light-text);
}

.artifact-table .text-success {
  color: var(--color-success);
}

.artifact-table .text-danger {
  color: var(--color-danger);
}

.artifact-table .text-warning {
  color: var(--color-warning);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.metric-card {
  text-align: center;
  padding: 1rem;
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  border-radius: 0.375rem;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
}

.metric-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-light-text);
  display: block;
  margin-bottom: 0.25rem;
}

.metric-value.accent {
  color: var(--color-accent-light);
}

.metric-value.success {
  color: var(--color-success);
}

.metric-value.warning {
  color: var(--color-warning);
}

.metric-value.danger {
  color: var(--color-danger);
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-light-text-muted);
}

.chart-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.chart-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-light-text-muted);
  min-width: 100px;
}

.chart-track {
  flex: 1;
  height: 1.5rem;
  background: rgba(243, 244, 246, 1);
  border-radius: 0.25rem;
  overflow: hidden;
}

.chart-fill {
  height: 100%;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.5rem;
}

.chart-fill.success {
  background: var(--color-success);
}

.chart-fill.accent {
  background: var(--color-accent);
}

.chart-fill.warning {
  background: var(--color-warning);
}

.chart-fill.danger {
  background: var(--color-danger);
}

.chart-value {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: white;
  font-weight: 500;
}

.chart-change {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  min-width: 50px;
  text-align: right;
}

.chart-change.success {
  color: var(--color-success);
}

.chart-change.danger {
  color: var(--color-danger);
}

.artifact-insight {
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: rgba(100, 100, 255, 0.05);
  border-radius: 0.375rem;
  border: 1px solid var(--color-accent);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-light-text-muted);
}

.artifact-insight:first-child {
  flex-shrink: 0;
}

.artifact-insight p {
  margin: 0;
  color: var(--color-light-text);
}

.artifact-insight strong {
  margin: 0;
  color: var(--color-accent);
}

.artifact-insight [data-lucide] {
  color: var(--color-accent);
}

.artifact-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-light-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.artifact-sources,
.artifact-timestamp {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-light-text-muted);
}

.artifact-sources span {
  color: var(--color-light-text-dim);
}

/* Responsive adjustments for artifacts */
@media (max-width: 640px) {
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .chart-label {
    min-width: 80px;
    font-size: 0.6875rem;
  }

  .chart-change {
    min-width: 40px;
    font-size: 0.625rem;
  }
}

/* ===================================
 PERSONAS & CHAT - MOBILE RESPONSIVE
 =================================== */

/* Tablet and below (768px) */
@media (max-width: 768px) {
  .personas {
    padding-top: 5rem;
  }

  .personas .section-header {
    margin-bottom: 2.5rem;
  }

  .personas .section-header h2 {
    font-size: 2rem;
  }

  .personas .section-header p {
    font-size: 0.9375rem;
  }

  .persona-tabs {
    gap: 0.375rem;
    margin-bottom: 2rem;
  }

  .persona-tab {
    padding: 0.625rem 1.25rem;
    font-size: 0.75rem;
  }

  /* Chat containers */
  .chat-container {
    margin-bottom: 1.5rem;
  }

  .chat-header {
    padding: 0.875rem;
  }

  .chat-title {
    font-size: 0.8125rem;
  }

  .chat-subtitle {
    font-size: 0.6875rem;
  }

  /* Fix chat-body padding for tablet */
  .chat-body {
    padding: 0 1.5rem 0 1rem;
  }

  .chat-container.open .chat-body {
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
  }

  /* Message bubbles */
  .message-bubble {
    max-width: 85%;
    font-size: 0.8125rem;
  }

  .message-assistant {
    gap: 0.625rem;
  }

  .message-avatar {
    width: 1.5rem;
    height: 1.5rem;
  }

  .message-text {
    font-size: 0.8125rem;
  }

  /* Artifact adjustments */
  .artifact-header {
    padding: 1rem;
  }

  .artifact-body {
    padding: 1rem;
  }

  .artifact-title {
    font-size: 0.6875rem;
  }

  .artifact-type {
    font-size: 0.5625rem;
  }
}

/* Mobile (480px) */
@media (max-width: 480px) {
  .personas {
    padding-top: 3.75rem;
  }

  .personas .section-header {
    margin-bottom: 2rem;
  }

  .personas .section-header h2 {
    font-size: 1.5rem;
  }

  .personas .section-header p {
    font-size: 0.875rem;
  }

  .persona-tabs {
    gap: 0.25rem;
  }

  .persona-tab {
    padding: 0.5rem 1rem;
    font-size: 0.6875rem;
    flex: 1;
    min-width: 0;
  }

  /* Chat containers - CRITICAL FIXES */
  .chat-container {
    margin-bottom: 1rem;
    border-radius: 0.25rem;
  }

  .chat-header {
    padding: 0.625rem 0.75rem;
  }

  .chat-title {
    font-size: 0.6875rem;
    line-height: 1.3;
  }

  .chat-subtitle {
    font-size: 0.5625rem;
  }

  .chat-toggle {
    font-size: 0.875rem;
  }

  /* CRITICAL: Reduce horizontal padding on mobile */
  .chat-body {
    padding: 0 0.625rem;
  }

  .chat-container.open .chat-body {
    padding-top: 0.875rem;
    padding-bottom: 1rem;
    /* Reduce max-height for smoother mobile animation */
    max-height: 3000px;
  }

  /* Message spacing */
  .chat-body>*:not(:last-child) {
    margin-bottom: 0.875rem;
  }

  /* Message bubbles */
  .message-bubble {
    max-width: 92%;
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  .message-assistant {
    gap: 0.5rem;
  }

  .message-avatar {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
  }

  .message-text {
    font-size: 0.6875rem;
    line-height: 1.5;
    margin-bottom: 0.625rem;
  }

  /* Artifact mobile optimization */
  .artifact {
    border-radius: 0.375rem;
  }

  .artifact-header {
    padding: 0.625rem 0.75rem;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .artifact-header-left {
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
  }

  .artifact-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
  }

  .artifact-icon svg {
    width: 0.5625rem;
    height: 0.5625rem;
  }

  .artifact-title {
    font-size: 0.5625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .artifact-type {
    font-size: 0.5rem;
    flex-shrink: 0;
  }

  .artifact-body {
    padding: 0.625rem 0.75rem;
  }

  /* Metrics grid - stack on mobile */
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .metric-card {
    padding: 0.625rem;
  }

  .metric-value {
    font-size: 1.375rem;
    margin-bottom: 0.125rem;
  }

  .metric-label {
    font-size: 0.5rem;
  }

  /* Chart bars - prevent wrapping */
  .chart-bars {
    display: block;
    width: 100%;
  }

  .chart-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    align-items: center;
  }

  .chart-label {
    min-width: 55px;
    max-width: 55px;
    font-size: 0.5625rem;
    line-height: 1.2;
    word-break: break-word;
    overflow: hidden;
  }

  .chart-track {
    height: 1.125rem;
    flex: 1;
    min-width: 0;
  }

  .chart-value {
    font-size: 0.5625rem;
    padding-right: 0.375rem;
  }

  .chart-change {
    min-width: 30px;
    max-width: 30px;
    font-size: 0.5625rem;
    text-align: right;
  }

  /* Tables */
  .artifact-table {
    font-size: 0.6875rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .artifact-table th,
  .artifact-table td {
    padding: 0.375rem 0.5rem;
  }

  .artifact-table th:first-child,
  .artifact-table td:first-child {
    width: 100%;
  }

  .artifact-table th {
    font-size: 0.5rem;
  }

  .artifact-table td strong {
    font-size: 0.6875rem;
  }

  /* Insights */
  .artifact-insight {
    padding: 0.625rem;
    font-size: 0.6875rem;
    line-height: 1.5;
  }

  .artifact-insight i {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
  }

  .artifact-insight p {
    flex: 1;
    min-width: 0;
  }

  /* Action button */
  .artifact-action {
    padding: 0.5rem 0.875rem;
    font-size: 0.6875rem;
  }

  /* Sources */
  .artifact-sources {
    padding: 0.5rem0;
    font-size: 0.5625rem;
  }
}

/* Extra small mobile (360px and below) */
@media (max-width: 360px) {
  .personas .section-header h2 {
    font-size: 1.125rem;
  }

  .persona-tab {
    padding: 0.375rem 0.625rem;
    font-size: 0.5625rem;
  }

  .chat-header {
    padding: 0.5rem 0.625rem;
  }

  .chat-title {
    font-size: 0.625rem;
  }

  .chat-subtitle {
    font-size: 0.5rem;
  }

  .chat-body {
    padding: 0 0.5rem;
  }

  .chat-container.open .chat-body {
    padding-top: 0.75rem;
    padding-bottom: 0.875rem;
  }

  .message-bubble {
    padding: 0.5rem 0.625rem;
    font-size: 0.625rem;
  }

  .message-text {
    font-size: 0.625rem;
  }

  .artifact-header,
  .artifact-body {
    padding: 0.5rem;
  }

  .artifact-title {
    font-size: 0.5rem;
  }

  .metric-value {
    font-size: 1.25rem;
  }

  .metric-label {
    font-size: 0.5rem;
  }

  .chart-label {
    min-width: 50px;
    max-width: 50px;
    font-size: 0.5rem;
  }

  .chart-value,
  .chart-change {
    font-size: 0.5rem;
  }

  .chart-change {
    min-width: 28px;
    max-width: 28px;
  }

  .artifact-insight {
    padding: 0.5rem;
    font-size: 0.625rem;
  }

  .artifact-table {
    font-size: 0.625rem;
  }

  .artifact-table th {
    font-size: 0.5rem;
    padding: 0.375rem 0.375rem;
  }

  .artifact-table td {
    padding: 0.375rem 0.375rem;
  }

  .artifact-table td strong {
    font-size: 0.625rem;
  }
}

/* ===================================
 DEMO SECTION
 =================================== */

.demo {
  padding: 8.75rem 0;
}

.demo .section-header {
  max-width: 700px;
  margin-bottom: 4.5rem;
}

.demo .section-header p {
  font-family: var(--font-body);
  font-size: 1rem;
}

.demo-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.demo-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 2.5rem 2rem;
  padding-right: 2rem;
  position: relative;
  transition: border-color var(--transition-base);
}

.demo-step:hover {
  border-color: var(--color-accent);
}

.demo-step-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  color: var(--color-surface-raised);
  -webkit-text-stroke: 1px var(--color-border);
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
}

.demo-step h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  /* 22px */
  margin-bottom: 0.75rem;
}

.demo-step p {
  font-size: 0.875rem;
  margin-bottom: 0;
}

.demo-cta {
  text-align: center;
  padding: 3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}

.demo-cta-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.demo-cta-subtitle {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .demo-steps {
    grid-template-columns: 1fr;
  }
}

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

.footer {
  position: relative;
  padding: 5rem 0 2.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer-brand p {
  font-size: 0.8125rem;
  /* 13px to match original */
  color: var(--color-text-dim);
  max-width: 280px;
  margin-top: 1.25rem;
}

.footer-links h4 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
  margin-bottom: 1.25rem;
}

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

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

.footer-links a {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-text);
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.footer-bottom p {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-text-dim);
  margin: 0;
}

.footer-bottom a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  margin: 0;
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

.footer-legal a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-text-dim);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: var(--color-text);
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ===================================
 ANIMATIONS
 =================================== */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.animate-fade-up {
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}

.animate-fade-up-delay-1 {
  opacity: 0;
  animation: fadeUp 0.6s ease 0.1s forwards;
}

.animate-fade-up-delay-2 {
  opacity: 0;
  animation: fadeUp 0.6s ease 0.2s forwards;
}

.animate-fade-up-delay-3 {
  opacity: 0;
  animation: fadeUp 0.6s ease 0.3s forwards;
}

.animate-fade-up-delay-4 {
  opacity: 0;
  animation: fadeUp 0.6s ease 0.4s forwards;
}

/* Scroll animations */
.fade-in-section {
  opacity: 0;
}

.fade-in-section.is-visible {
  animation: fadeUp 0.8s ease forwards;
}

.fade-in-child {
  opacity: 0;
}

.fade-in-section.is-visible .fade-in-child:nth-child(1) {
  animation: fadeUp 0.6s ease 0.1s forwards;
}

.fade-in-section.is-visible .fade-in-child:nth-child(2) {
  animation: fadeUp 0.6s ease 0.25s forwards;
}

.fade-in-section.is-visible .fade-in-child:nth-child(3) {
  animation: fadeUp 0.6s ease 0.4s forwards;
}

.fade-in-section.is-visible .fade-in-child:nth-child(4) {
  animation: fadeUp 0.6s ease 0.55s forwards;
}

.fade-in-section.is-visible .fade-in-child:nth-child(5) {
  animation: fadeUp 0.6s ease 0.7s forwards;
}

.fade-in-section.is-visible .fade-in-child:nth-child(6) {
  animation: fadeUp 0.6s ease 0.85s forwards;
}

/* ===================================
 UTILITIES
 =================================== */

.hidden {
  display: none !important;
}

.hidden-future {
  display: none !important;
}

.hidden-mobile {
  display: table-cell;
}

@media (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }
}

.text-accent {
  color: var(--color-accent);
}

.text-success {
  color: var(--color-success);
}

.text-danger {
  color: var(--color-danger);
}

.text-warning {
  color: var(--color-warning);
}

.w-full {
  width: 100%;
}

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

/* ===================================
 DEMO PAGE STYLES
 =================================== */

.demo-section {
  min-height: calc(100vh - 73px);
  padding: 4rem 0;
  position: relative;
}

.demo-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* ===================================
 FORM COLUMN
 =================================== */

.demo-form-wrapper {
  position: relative;
}

.demo-form-header {
  margin-bottom: 3rem;
}

.demo-title {
  font-size: 3rem;
  font-family: var(--font-display);
  font-weight: 400;
  margin-bottom: 1rem;
  line-height: 1.1;
}

.demo-title em {
  color: var(--color-accent-light);
  font-style: italic;
}

.demo-subtitle {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ===================================
 FORM STYLES
 =================================== */

.demo-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 2.5rem;
}

.form-section {
  margin-bottom: 2.5rem;
}

.form-section:last-of-type {
  margin-bottom: 2rem;
}

.form-section-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-family: var(--font-text);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition: all var(--transition-base);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(100, 100, 255, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-dim);
}

/* Fix autofill background color */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--color-bg) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 3rem;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

/* Checkbox */
.form-group-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.form-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  cursor: pointer;
  accent-color: var(--color-accent);
}

.form-checkbox-label {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  cursor: pointer;
}

/* Form Actions */
.form-actions {
  margin-top: 2rem;
}

.btn-submit {
  width: 100%;
  font-size: 1rem;
  padding: 1.125rem 2rem;
  position: relative;
}

.btn-submit-text,
.btn-submit-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-submit-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-spinner {
  animation: spin 1s linear infinite;
}

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

.form-privacy {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--color-text-dim);
  text-align: center;
  line-height: 1.5;
}

.form-privacy-link {
  color: var(--color-accent-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.form-privacy-link:hover {
  color: var(--color-accent);
}

/* Form Messages */
.form-message {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 0.375rem;
  margin-top: 1.5rem;
  align-items: flex-start;
}

.form-message i {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
}

.form-message strong {
  display: block;
  margin-bottom: 0.25rem;
}

.form-message p {
  margin: 0;
  font-size: 0.9375rem;
}

.form-message a {
  color: inherit;
  text-decoration: underline;
}

.form-message-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.form-message-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* Demo form success state */
.demo-success-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.demo-success-content {
  text-align: center;
  max-width: 400px;
}

.demo-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.1);
  margin-bottom: 1.5rem;
}

.demo-success-icon i {
  width: 40px;
  height: 40px;
  color: #10b981;
}

.demo-success-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--color-text);
}

.demo-success-text {
  font-size: 1rem;
  color: var(--color-text-dim);
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* ===================================
 BENEFITS COLUMN
 =================================== */

.demo-benefits-wrapper {
  position: relative;
  height: 100%;
}

.demo-benefits-sticky {
  position: sticky;
  top: 120px;
}

.demo-benefits-title {
  font-size: 1.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 2rem;
  color: var(--color-text);
}

.demo-benefit {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}

.demo-benefit:last-of-type {
  border-bottom: none;
  margin-bottom: 3rem;
}

.demo-benefit-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-benefit-icon [data-lucide] {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1;
  color: var(--color-accent);
}

.demo-benefit-content {
  flex: 1;
}

.demo-benefit-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.demo-benefit-text {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

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

@media (max-width: 1024px) {
  .demo-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .demo-benefits-sticky {
    position: static;
  }

  .demo-benefits-wrapper {
    order: -1;
  }

  .demo-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .demo-section {
    padding: 2rem 0;
  }

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

  .demo-subtitle {
    font-size: 1rem;
  }

  .demo-form {
    padding: 1.75rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .demo-benefit {
    gap: 1rem;
  }

  .demo-benefit-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .demo-benefit-icon i {
    width: 1.25rem;
    height: 1.25rem;
  }
}

@media (max-width: 480px) {
  .demo-form-header {
    margin-bottom: 2rem;
  }

  .demo-form {
    padding: 1.5rem;
  }

  .form-section {
    margin-bottom: 2rem;
  }

  .form-section-title {
    margin-bottom: 1rem;
  }

  .demo-testimonial {
    padding: 1.5rem;
  }
}

/* ===================================
   LOGIN MODAL STYLES
   =================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  width: 100%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.15s ease;
}

.modal-close:hover {
  color: var(--color-text);
}

.modal-close i {
  width: 24px;
  height: 24px;
}

.modal-content {
  padding: 2.5rem;
}

.modal-header {
  text-align: center;
  margin-bottom: 2rem;
}

.modal-logo {
  width: 140px;
  height: auto;
  margin-bottom: 1.5rem;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.modal-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

.modal-subtitle strong {
  color: var(--color-text);
}

.success-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--color-success);
}

.success-icon i {
  width: 48px;
  height: 48px;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.form-input-wrapper {
  position: relative;
}

.form-input-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-dim);
  pointer-events: none;
  width: 20px;
  height: 20px;
}

/* Input styles for inputs with icons (login modal) */
.form-input-wrapper .form-input {
  width: 100%;
  padding: 0.875rem 0.875rem 0.875rem 2.75rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  color: var(--color-text);
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input-wrapper .form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(100, 100, 255, 0.15);
}

.form-input-wrapper .form-input::placeholder {
  color: var(--color-text-dim);
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: -0.5rem;
}

.form-link {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color 0.15s ease;
}

.form-link:hover {
  color: var(--color-accent-light);
}

.btn-full {
  width: 100%;
  justify-content: center;
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
}

.form-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  text-align: center;
}

/* ===================================
   AUTH SECTION (Reset Password, etc.)
   =================================== */

.auth-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem 3rem;
  position: relative;
  z-index: 1;
}

.auth-container {
  width: 100%;
  max-width: 440px;
}

.auth-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 2.5rem;
  text-align: center;
}

.auth-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0;
  color: var(--color-text-muted);
}

.auth-spinner {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-accent);
  animation: spin 1s linear infinite;
}

.auth-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.auth-icon svg {
  width: 2rem;
  height: 2rem;
}

.auth-icon-success {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-success);
}

.auth-icon-error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

.auth-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}

.auth-subtitle {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: left;
}

.auth-form .form-group {
  margin-bottom: 0;
}

.auth-form .form-input {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  color: var(--color-text);
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-form .form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(100, 100, 255, 0.15);
}

.auth-form .form-input::placeholder {
  color: var(--color-text-dim);
}

.form-hint {
  font-size: 0.8125rem;
  color: var(--color-text-dim);
  margin-top: 0.375rem;
}

.auth-redirect-progress {
  width: 100%;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin: 1.5rem 0;
  overflow: hidden;
}

.auth-redirect-bar {
  height: 100%;
  background: var(--color-success);
  border-radius: 2px;
  animation: progress 3s linear forwards;
}

@keyframes progress {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .auth-card {
    padding: 2rem 1.5rem;
  }

  .auth-title {
    font-size: 1.5rem;
  }
}