/* ==========================================================================
   AI SaaS Platform - Editorial Landing Page
   Main Stylesheet
   ========================================================================== */

/* ==========================================================================
   1. CSS Variables / Design Tokens
   ========================================================================== */

:root {
  /* Backgrounds - Layered Depth */
  --bg-void: #030303;
  --bg-deep: #020202;
  --bg-surface: #0a0a0a;
  --bg-elevated: #111111;
  
  /* Accent - Warm Gold (Enhanced saturation) */
  --accent: #d4c5ab;
  --accent-dim: rgba(212, 197, 171, 0.6);
  --accent-glow: rgba(212, 197, 171, 0.15);
  
  /* Text Hierarchy (Improved contrast for WCAG AA) */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-tertiary: rgba(255, 255, 255, 0.55);
  --text-muted: rgba(255, 255, 255, 0.35);
  
  /* Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-visible: rgba(255, 255, 255, 0.12);

  /* Surfaces (cards/containers) - Grounded and solid */
  --surface-card-bg: rgba(22, 24, 24, 0.92);
  /* Gentle lighting layer (avoid "brutal dark" bottom vignette) */
  --surface-card-overlay:
    radial-gradient(1100px 520px at 50% -18%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.02) 34%,
      transparent 64%),
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.00) 0%,
      rgba(0, 0, 0, 0.06) 68%,
      rgba(0, 0, 0, 0.12) 100%);
  --surface-card-border: rgba(255, 255, 255, 0.12);
  --surface-card-border-hover: rgba(255, 255, 255, 0.18);
  
  /* Shadow System - Three-tier hierarchy */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-xl: 0 24px 72px rgba(0, 0, 0, 0.48), 0 8px 20px rgba(0, 0, 0, 0.36);
  
  /* Legacy shadow variables for gradual migration */
  --surface-card-shadow: var(--shadow-md);
  --surface-card-shadow-hover: var(--shadow-lg);
  
  /* The Signature Gradient - Ambient Atmosphere */
  --gradient-atmosphere: conic-gradient(
    from 0deg at 50% 50%,
    rgba(168, 85, 247, 0.4) 0deg,
    rgba(59, 130, 246, 0.35) 120deg,
    rgba(16, 185, 129, 0.3) 240deg,
    rgba(168, 85, 247, 0.4) 360deg
  );
  
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Typography Scale - Mathematical progression (1.125 minor third + 1.25 major third) */
  --display-hero: clamp(2.5rem, 5vw + 1rem, 3.5rem);
  --display-section: clamp(2rem, 4vw + 0.5rem, 2.5rem);
  
  /* Headings - Consistent scale relationships */
  --heading-lg: clamp(1.5rem, 2.5vw + 0.25rem, 2rem);
  --heading-md: clamp(1.25rem, 2vw + 0.125rem, 1.5rem);
  --heading-sm: clamp(1.125rem, 1.5vw, 1.25rem);
  
  /* Body - Precise sizing */
  --body-lg: clamp(1.125rem, 1.5vw, 1.25rem);
  --body-base: 1rem;
  --body-sm: 0.875rem;
  --body-xs: 0.75rem;
  
  /* Line Heights - Refined for readability */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;
  
  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.05em;
  
  /* Section Vertical Rhythm - 8px baseline grid system */
  --spacing-unit: 8px;
  --section-gap: clamp(64px, 10vh, 96px);
  --section-padding: clamp(64px, 10vh, 128px);
  
  /* Container */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-padding: clamp(24px, 5vw, 64px);

  /* Layout heights */
  --nav-height: 64px;
  --notification-bar-height: 28px;
  --models-strip-height: 48px;
  
  /* Component Spacing - 8px baseline grid */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  
  /* Border Radius System - Standardized to 4 values */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-medium: 0.35s var(--ease-out-expo);
  --transition-slow: 0.6s var(--ease-out-expo);

  /* Motion */
  --mobile-menu-marquee-duration: 12s;
  
  /* Responsive Breakpoints - Standardized */
  --breakpoint-mobile: 640px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1280px;
}

/* ==========================================================================
   2. Reset & Base Styles
   ========================================================================== */

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

/* Prevent horizontal overflow on all elements */
* {
  max-width: 100%;
}

/* Allow specific elements to be wider */
html,
body,
.nav,
.hero,
.models-strip,
section,
footer,
.container,
.container-wide {
  max-width: none;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-primary);
  font-size: var(--body-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  background-color: var(--bg-deep);
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

/* When mobile menu is open, hard-lock background scroll */
html.is-menu-open,
body.is-menu-open {
  overflow: hidden !important;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

p {
  max-width: 65ch;
}

::selection {
  background-color: var(--accent);
  color: var(--bg-deep);
}

/* ==========================================================================
   3. Typography Utilities
   ========================================================================== */

.display-hero {
  font-size: var(--display-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.display-section {
  font-size: var(--display-section);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

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

.heading-md {
  font-size: var(--heading-md);
}

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

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

.text-primary {
  color: var(--text-primary);
}

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

.text-tertiary {
  color: var(--text-tertiary);
}

.text-muted {
  color: var(--text-muted);
}

.text-accent {
  color: var(--accent);
}

/* Gradient Text */
.gradient-text {
  display: inline-block;
  color: var(--accent);
  background: none;
  background-repeat: no-repeat;
  text-shadow: none;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient-text {
    background-image: linear-gradient(135deg, var(--accent) 0%, #ffffff 100%);
    background-size: 100% 100%;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
}

/* ==========================================================================
   4. Layout Utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

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

.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.section + .section {
  padding-top: 0;
}

/* ==========================================================================
   5. Component Patterns
   ========================================================================== */

/* Section Label */
.section-label {
  display: inline-block;
  font-size: var(--body-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-md);
}

/* Section Headline */
.section-headline {
  font-size: var(--display-section);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-md);
}

/* Section Subline */
.section-sub {
  font-size: var(--body-lg);
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto;
}

/* Button Primary */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 14px 28px;
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 500;
  font-size: var(--body-base);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 197, 171, 0.35);
  filter: brightness(1.05);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.btn-large {
  padding: 16px 32px;
  font-size: var(--body-lg);
}

/* Button Secondary (Text/Link Style) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px 20px;
  background: rgba(212, 197, 171, 0.08);
  color: var(--accent);
  font-weight: 500;
  font-size: var(--body-sm);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212, 197, 171, 0.15);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
}

.btn-secondary:hover {
  background: rgba(212, 197, 171, 0.12);
  border-color: rgba(212, 197, 171, 0.25);
  transform: translateX(2px);
}

.btn-secondary:active {
  transform: translateX(0);
}

/* Disable hover slide for specific buttons */
.btn-secondary.btn-no-slide:hover,
.btn-secondary.btn-no-slide:active {
  transform: none;
}

/* Button Link (Minimal Style) */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  background: none;
  color: var(--accent);
  font-weight: 500;
  font-size: var(--body-sm);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.btn-link:hover {
  opacity: 0.8;
  transform: translateX(2px);
}

.btn-link .arrow {
  transition: transform 0.2s ease;
}

.btn-link:hover .arrow {
  transform: translateX(2px);
}

/* Button Ghost */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 14px 28px;
  background: transparent;
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--body-base);
  border: 1px solid var(--border-visible);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(212, 197, 171, 0.04);
}

.btn-ghost .arrow {
  transition: transform var(--transition-fast);
}

.btn-ghost:hover .arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   5b. Top Notification Bar
   ========================================================================== */

.top-notification-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--notification-bar-height);
  z-index: 2001;
  background: rgb(79, 36, 92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 197, 171, 0.12);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
}

@keyframes liquidSmoke {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%; }
  33% { background-position: 100% 100%, 0% 50%, 20% 20%; }
  66% { background-position: 50% 0%, 100% 100%, 80% 80%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
}

.top-notification-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse 80% 100% at 20% 50%, rgba(130, 70, 150, 0.5) 0%, transparent 60%),
    radial-gradient(ellipse 80% 100% at 80% 50%, rgba(212, 197, 171, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 100% 150% at 50% 100%, rgba(40, 10, 50, 0.6) 0%, transparent 70%);
  background-size: 200% 200%, 250% 200%, 150% 150%;
  animation: liquidSmoke 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  filter: blur(4px);
}

.top-notification-bar-text {
  text-align: center;
  position: relative;
  z-index: 1;
}

.top-notification-bar-arrow {
  font-size: 0.6em;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

@media (max-width: 480px) {
  .top-notification-bar {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    padding: 0 var(--space-sm);
    gap: 0.3rem;
  }
}

/* Push nav down when notification bar is present */
body:has(.top-notification-bar) .nav {
  top: var(--notification-bar-height);
}

/* Push megamenu/mobile menu down when notification bar is present */
/* body:has(.top-notification-bar) .megamenu {
  top: calc(var(--notification-bar-height) + 100%);
} */

body:has(.top-notification-bar) .mobile-menu,
body:has(.top-notification-bar) .mobile-menu-overlay {
  top: calc(var(--notification-bar-height) + var(--nav-height));
}

/* ==========================================================================
   5c. Cookie Consent Bar (fallback in main.css)
   Notes:
   - Cookie styles also exist in `css/cookie-consent.css`.
   - Keeping a copy here prevents "unstyled cookie text at top" if that file fails
     to load on any device/network.
   ========================================================================== */

.cookie-consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.5rem var(--container-padding);
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: rgba(3, 3, 3, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.cookie-consent-bar.hidden {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

.cookie-consent-text {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}

.cookie-consent-actions {
  display: flex;
  gap: 0.5rem;
}

.cookie-btn {
  padding: 0.25rem 0.65rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.cookie-btn-accept {
  background: #d4c5ab;
  color: #030303;
}

.cookie-btn-accept:hover {
  background: #e8dcc6;
  transform: translateY(-1px);
}

.cookie-btn-decline {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cookie-btn-decline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
  .cookie-consent-bar {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }

  .cookie-consent-text {
    font-size: 0.625rem;
  }

  .cookie-consent-actions {
    width: 100%;
    justify-content: center;
  }

  .cookie-btn {
    flex: 1;
    max-width: 120px;
    padding: 0.3rem 0.75rem;
  }
}

/* ==========================================================================
   6. Navigation
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000; /* Increased to ensure it's always on top */
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--container-padding);
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, backdrop-filter 0.2s ease;
  border-bottom: 1px solid transparent;
  max-width: 100vw;
}

.nav-inner {
  /* Desktop nav: true visual centering (independent of logo/actions width) */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Equal left/right rails so spacing feels balanced */
  --nav-rail: clamp(200px, 18vw, 280px);
  width: 100%;
  max-width: var(--container-wide);
  height: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  flex: 0 0 var(--nav-rail);
}

.nav-logo-img {
  height: 28px;
  width: auto;
  display: block;
  margin-top: 4px;
}

/* Note: `.nav-links` is defined again below; keep it consistent there too. */

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  height: 100%;
  flex: 0 0 var(--nav-rail);
}

.nav-demo {
  font-size: var(--body-sm);
  font-weight: 500;
  padding: 8px 16px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-visible);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.nav-demo:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(212, 197, 171, 0.04);
}

.nav-cta {
  justify-self: end;
}

.nav[data-scrolled="true"] {
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom-color: var(--border-subtle);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* When mobile menu is open, always show header background (tablet/mobile) */
.nav.is-menu-open {
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.nav-logo {
  font-size: var(--heading-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  transition: color var(--transition-fast);
}

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

.nav-links {
  /* Absolute-center the whole nav group (prevents “leans left/right” feeling) */
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links > li {
  position: relative;
  display: flex;
  align-items: center;
}

/* Default: each megamenu is anchored to its own menu item */
.nav-links > li.has-megamenu {
  position: relative;
}

/* Product-only: anchor to the whole nav group so it starts from "Home" */
.nav-links > li.has-megamenu--product {
  position: static;
}

.nav-links > li > a {
  font-size: var(--body-sm);
  color: var(--text-tertiary);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 8px;
  text-decoration: none;
}

.nav-links > li > a:hover,
.nav-links > li.active > a {
  color: var(--text-primary);
}

/* Megamenu Dropdown */
.has-megamenu {
  position: relative;
}

.has-megamenu > a::after {
  content: '▾';
  margin-left: 0.25rem;
  font-size: 0.65rem;
  opacity: 0.5;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.has-megamenu:hover > a::after {
  opacity: 0.8;
}

.megamenu {
  position: absolute;
  top: 100%;
  /* Default alignment: align dropdown content under its trigger */
  left: -24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

/* Product-only alignment: align dropdown content with first nav item ("Home") */
.nav-links > li.has-megamenu--product > .megamenu {
  left: -9%;
}

.has-megamenu:hover .megamenu {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.megamenu-inner {
  display: flex;
  gap: 0;
  padding: 24px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  min-width: 720px;
  max-width: 800px;
}

.megamenu-single .megamenu-inner {
  min-width: 480px;
  max-width: 520px;
}

.megamenu-column {
  flex: 1;
  padding: 0 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.megamenu-column:first-child {
  padding-left: 0;
}

.megamenu-column:last-child {
  padding-right: 0;
  border-right: none;
}

.megamenu-column--featured {
  flex: 0 0 240px;
  padding: 0 0 0 20px;
}

.megamenu-section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-dim);
  margin-bottom: 16px;
}

.megamenu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.megamenu-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.megamenu-link:hover {
  background: rgba(255, 255, 255, 0.04);
}

.megamenu-link-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.megamenu-link-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.28);
  line-height: 1.4;
}

.megamenu-featured-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.megamenu-featured-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.12);
}

.megamenu-featured-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center;
  display: block;
  flex-shrink: 0;
}

/* Helper classes for conditional text visibility */
.mobile-text {
  display: none !important;
}

@media (max-width: 768px) {
  .desktop-text {
    display: none !important;
  }

  .mobile-text {
    display: inline !important;
  }
}

.megamenu-featured-content {
  padding: 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.megamenu-featured-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-dim);
  margin-bottom: 4px;
}

.megamenu-featured-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

/* Responsive megamenu */
@media (max-width: 1280px) {
  .megamenu-inner {
    min-width: 640px;
    max-width: 700px;
  }
  
  .megamenu-column--featured {
    flex: 0 0 200px;
  }
  
  .megamenu-featured-img {
    height: 120px;
  }
}

@media (max-width: 1024px) {
  .megamenu {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nav-height, 64px);
    padding: 0;
  }
  
  body:has(.top-notification-bar) .megamenu {
    top: calc(var(--notification-bar-height) + var(--nav-height));
  }
  
  .megamenu-inner {
    min-width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    flex-wrap: wrap;
    padding: 20px 16px;
  }
  
  .megamenu-single .megamenu-inner {
    min-width: 100%;
    max-width: 100%;
  }
  
  .megamenu-column {
    flex: 1 1 45%;
    min-width: 200px;
    padding: 0 12px;
    border-right: none;
    margin-bottom: 20px;
  }
  
  .megamenu-column:last-child {
    border-right: none;
  }
  
  .megamenu-column--featured {
    flex: 1 1 100%;
    padding: 0;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 20px;
  }
  
  .megamenu-featured-img {
    height: 160px;
  }
}

.nav-cta {
  font-size: var(--body-sm);
  font-weight: 500;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--bg-deep);
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212, 197, 171, 0.28);
  filter: brightness(1.05);
}

/* Hamburger Button */
.nav-hamburger {
  display: none;
  /* Use absolute-positioned lines for a clean symmetrical X */
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-visible);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  z-index: 1001;
}

.nav-hamburger:hover {
  border-color: var(--accent);
  background: rgba(212, 197, 171, 0.04);
}

.hamburger-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition-fast);
  transform-origin: center;
  transform: translate(-50%, -50%);
}

.hamburger-line:nth-child(1) {
  transform: translate(-50%, -50%) translateY(-6px);
}

.hamburger-line:nth-child(3) {
  transform: translate(-50%, -50%) translateY(6px);
}

/* Hamburger active state */
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0);
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  /* Keep the header bar visible/clickable above the overlay */
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1100; /* below nav, behind menu */
  opacity: 0;
  transition: opacity var(--transition-medium);
  pointer-events: none;
}

.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  /* Start below the fixed header bar */
  top: var(--nav-height);
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  background: #050505;
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-left: 1px solid var(--border-visible);
  z-index: 1150; /* above overlay, below nav */
  transform: translateX(100%);
  transition: transform var(--transition-medium);
  /* Important: clip pseudo-element glows so they don't create fake scroll/panning */
  overflow: hidden;
  display: none;
  isolation: isolate;
  /* Use dynamic viewport height on mobile (prevents iOS/Android "blank" scroll space) */
  height: calc(100vh - var(--nav-height));
  height: calc(100dvh - var(--nav-height));
  max-height: calc(100vh - var(--nav-height));
  max-height: calc(100dvh - var(--nav-height));
  pointer-events: none; /* prevents “scroll a bit” when closed */
}

.mobile-menu::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.mobile-menu::before {
  /* Infinite moving bar under the header (premium detail) */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(168, 85, 247, 0) 0%,
    rgba(168, 85, 247, 0.85) 18%,
    rgba(59, 130, 246, 0.85) 50%,
    rgba(16, 185, 129, 0.75) 82%,
    rgba(16, 185, 129, 0) 100%
  );
  background-size: 220% 100%;
  animation: mobile-menu-marquee var(--mobile-menu-marquee-duration) linear infinite;
  opacity: 0.9;
  pointer-events: none;
  z-index: 2;
  /* Mobile browsers can sometimes pause background-position animations without this */
  will-change: background-position;
  transform: translateZ(0);
}

.mobile-menu::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 400px;
  background: var(--gradient-atmosphere);
  filter: blur(100px);
  opacity: 0.12;
  z-index: -1;
  pointer-events: none;
  animation: glow-rotate 120s linear infinite;
}

.mobile-menu.active {
  transform: translateX(0);
  pointer-events: auto;
}

/* Only enable scrolling if content actually overflows */
.mobile-menu-content {
  /* Avoid double header padding (was causing pointless menu scrollbars) */
  padding-top: var(--space-lg);
  padding-bottom: calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px));
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden; /* enable only when needed */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Hide scrollbar (keep scroll behavior) */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.mobile-menu-content::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.mobile-menu.active.is-scrollable .mobile-menu-content {
  overflow-y: auto;
}

@keyframes mobile-menu-marquee {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}

/* Mobile Menu List */
.mobile-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu-list > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-menu-list > li:last-child {
  border-bottom: none;
}

.mobile-menu-list > li > a {
  display: block;
  padding: var(--space-md) 0;
  font-size: var(--body-base);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.mobile-menu-list > li > a:hover,
.mobile-menu-list > li > a:active {
  color: var(--text-primary);
  padding-left: var(--space-xs);
}

/* Mobile Menu Featured Card (eBook) */
.mobile-menu-featured {
  /* Keep it close to last item (no big dead space) */
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
  /* The list already has separators; avoid an extra “break line” */
  border-top: none;
  display: flex;
  justify-content: center;
}

.mobile-menu-featured-link {
  display: block;
  width: min(360px, 100%);
  text-decoration: none;
  color: inherit;
}

/* Reuse desktop megamenu card styles, but remove column layout constraints */
.mobile-menu-featured .megamenu-column--featured {
  flex: initial;
  padding: 0;
  border: 0;
}

.mobile-menu-featured .megamenu-featured-img {
  /* Give the cover room on mobile (avoid “squeezed” look) */
  height: clamp(180px, 34vw, 230px);
  object-fit: cover;
  object-position: center;
}

/* Mobile Submenu Toggle */
.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) 0;
  background: transparent;
  border: none;
  font-size: var(--body-base);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast);
  text-align: left;
}

.mobile-menu-toggle:hover {
  color: var(--text-primary);
}

.mobile-menu-arrow {
  transition: transform var(--transition-fast);
  opacity: 0.6;
}

.mobile-has-submenu.active .mobile-menu-arrow {
  transform: rotate(180deg);
}

/* Mobile Submenu */
.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-medium);
}

.mobile-has-submenu.active .mobile-submenu {
  max-height: 600px;
}

.mobile-submenu-section {
  padding: var(--space-sm) 0 var(--space-md) var(--space-lg);
}

.mobile-submenu-section:last-child {
  padding-bottom: var(--space-md);
}

.mobile-submenu-title {
  font-size: var(--body-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.mobile-submenu-ebook {
  display: block;
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
  background: rgba(212, 197, 171, 0.08);
  border: 1px solid rgba(212, 197, 171, 0.2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.mobile-submenu-ebook:hover,
.mobile-submenu-ebook:active {
  background: rgba(212, 197, 171, 0.12);
  border-color: var(--accent);
}

.mobile-submenu-ebook-label {
  display: block;
  font-size: var(--body-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 2px;
}

.mobile-submenu-ebook-title {
  display: block;
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-submenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-submenu ul li a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--body-sm);
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.mobile-submenu ul li a:hover,
.mobile-submenu ul li a:active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  padding-left: var(--space-md);
}

/* Mobile Navigation */
@media (max-width: 1024px) {
  .nav-inner {
    justify-content: space-between;
    /* Disable desktop fixed "rails" on small screens.
       The desktop min rail (200px) can overflow narrow viewports and make the
       right-side actions look flush against the edge. */
    --nav-rail: auto;
  }

  .nav-logo,
  .nav-actions {
    flex: 0 0 auto;
  }

  .nav-links {
    display: none;
  }

  .nav-demo-desktop {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

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

  .nav-actions {
    justify-self: end;
    gap: var(--space-sm);
  }
}

@media (max-width: 640px) {
  .mobile-menu {
    max-width: 100%;
  }

  .nav-cta {
    padding: 8px 14px;
    font-size: 0.8125rem;
  }

  .nav-logo-img {
    margin-top: 0;
  }
}

/* ==========================================================================
   7. Hero Section - Two Column Layout
   ========================================================================== */

.hero {
  /* Hero + models strip should fill the first viewport */
  min-height: calc(100vh - var(--models-strip-height));
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + var(--space-xl));
  padding-bottom: var(--space-xl);
  position: relative;
  overflow: hidden;
}

body:has(.top-notification-bar) .hero {
  padding-top: calc(var(--notification-bar-height) + var(--nav-height) + var(--space-xl));
}

.hero-grid {
  display: grid;
  /* Text column wider for better readability */
  grid-template-columns: minmax(min(420px, 100%), 540px) 1.2fr;
  gap: var(--space-2xl);
  align-items: center;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

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

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 6px 14px;
  border: 1px solid var(--border-visible);
  border-radius: 100px;
  margin-bottom: var(--space-md);
}

.hero-badge::after {
  content: "★★★";
  color: rgba(255, 214, 102, 0.92);
  font-size: 0.9em;
  letter-spacing: 0.18em;
  opacity: 0.9;
}

.hero-headline {
  font-size: var(--display-hero);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.hero-sub {
  font-size: var(--body-base);
  color: var(--text-secondary);
  max-width: 48ch;
  margin-bottom: var(--space-lg);
  line-height: var(--leading-normal);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 51rem;
  overflow: visible;
}

.hero-glow {
  position: absolute;
  width: 120%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gradient-atmosphere);
  filter: blur(120px);
  opacity: 0.6;
  animation: glow-rotate 120s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes glow-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Hero Frame - Unified atmospheric container */
.hero-frame {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-xl);
  /* Darker base to ground the image */
  background: rgba(0, 0, 0, 0.4);
  /* Subtle inner shadow for depth */
  box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  padding: 1px;
  overflow: visible;
}

/* Animated ethereal smoky outline - flowing around edges */
.hero-frame::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--radius-xl) + 6px);
  background:
    radial-gradient(closest-side at 50% 50%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.05) 45%,
      transparent 70%
    ),
    conic-gradient(
    from var(--glow-angle, 0deg) at 50% 50%,
    rgba(255, 255, 255, 0.14) 0deg,
    rgba(255, 255, 255, 0.035) 70deg,
    rgba(255, 255, 255, 0.11) 140deg,
    rgba(255, 255, 255, 0.025) 210deg,
    rgba(255, 255, 255, 0.12) 290deg,
    rgba(255, 255, 255, 0.14) 360deg
  );
  background-blend-mode: screen;
  z-index: -1;
  filter: blur(7px);
  opacity: 0.78;
  animation: ethereal-flow 120s linear infinite, smoke-breathe 5.8s ease-in-out infinite;
  pointer-events: none;
}

/* Outer atmospheric smoke - Soft diffusion */
.hero-frame::after {
  content: '';
  position: absolute;
  inset: -26px;
  border-radius: calc(var(--radius-xl) + 26px);
  background:
    radial-gradient(closest-side at 50% 50%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 68%
    ),
    conic-gradient(
    from calc(var(--glow-angle, 0deg) + 90deg) at 50% 50%,
    rgba(255, 255, 255, 0.07) 0deg,
    transparent 110deg,
    rgba(255, 255, 255, 0.06) 200deg,
    transparent 300deg,
    rgba(255, 255, 255, 0.07) 360deg
  );
  background-blend-mode: screen;
  z-index: -2;
  filter: blur(26px);
  opacity: 0.42;
  animation: ethereal-flow-outer 180s linear infinite reverse, smoke-breathe-outer 7.2s ease-in-out infinite;
  pointer-events: none;
}

@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes ethereal-flow {
  from { --glow-angle: 0deg; }
  to { --glow-angle: 360deg; }
}

@keyframes ethereal-flow-outer {
  from { 
    --glow-angle: 0deg;
    transform: scale(1);
  }
  to { 
    --glow-angle: 360deg;
    transform: scale(1.02);
  }
}

@keyframes smoke-breathe {
  0%, 100% { opacity: 0.76; }
  50% { opacity: 0.92; }
}

@keyframes smoke-breathe-outer {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 0.54; }
}

.hero-frame img,
.hero-frame video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-xl) - 1px);
  /* Unified lighting */
  filter: brightness(1.05) contrast(1.02);
}

.hero-platform-img {
  display: block;
  width: 95%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
}

.hero-people-overlay {
  position: absolute;
  bottom: 0;
  right: -12%;
  width: min(62vw, 74rem);
  height: auto;
  max-width: none;
  pointer-events: none;
  z-index: 3;
  border-radius: 0 !important;
  filter: none !important;
  margin: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
  image-rendering: auto;
}

@media (max-width: 1280px) {
  .hero-people-overlay {
    right: -10%;
    width: min(58vw, 46rem);
  }
}

@media (max-width: 1024px) {
  .hero-people-overlay {
    right: -8%;
    width: min(54vw, 36rem);
    bottom: 0;
  }
}

@media (max-width: 768px) {
  .hero-people-overlay {
    display: none;
  }
}

/* Keep the first hero line on one line (desktop), allow wrap on smaller screens */
.hero-line1 {
  white-space: nowrap;
}

.hero-headline .gradient-text {
  white-space: nowrap;
  line-height: inherit;
  vertical-align: top;
}

/* Hero responsive */
@media (max-width: 1280px) {
  .hero-grid {
    grid-template-columns: minmax(min(300px, 100%), 400px) 1fr;
    gap: var(--space-xl);
  }
  
  .hero-visual {
    max-width: 700px;
  }
}

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
  
  .hero-visual {
    max-width: 100%;
    padding-left: var(--space-md);
    margin-right: 0;
  }
  
  .hero-headline {
    font-size: var(--display-section);
  }

  .hero-line1 {
    white-space: normal;
  }

  .hero-headline .gradient-text {
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .hero {
    height: auto;
    min-height: auto;
    padding-top: calc(var(--nav-height) + var(--space-lg));
    padding-bottom: var(--space-md);
  }

  body:has(.top-notification-bar) .hero {
    padding-top: calc(var(--notification-bar-height) + var(--nav-height) + var(--space-lg));
  }
  
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .hero-visual {
    margin: 0;
    padding: 0;
    max-width: 100%;
  }
  
  .hero-content {
    text-align: center;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .hero-headline {
    font-size: var(--display-section);
  }

  .hero-line1 {
    white-space: normal;
  }

  .hero-headline .gradient-text {
    white-space: normal;
  }
}

/* ==========================================================================
   8. Problem Statement Section
   ========================================================================== */

.problem-section {
  padding: var(--space-2xl) var(--container-padding);
  text-align: center;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

.problem-header {
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
}

.problem-icon {
  font-size: 3rem;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-md);
}

.problem-headline {
  font-size: var(--heading-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.problem-description {
  font-size: var(--body-lg);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto;
}

.problem-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
}

.stat-card {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  background: var(--surface-card-bg);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--surface-card-overlay);
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   Intro Impact Section - Clean & Responsive
   ========================================================================== */
.intro-impact-section {
  padding: clamp(56px, 8vw, 92px) 0 clamp(56px, 7vw, 84px);
  background: var(--bg-void);
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.intro-impact-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(32px, 5vw, 56px);
}

.intro-impact-header .section-headline {
  max-width: 13ch;
  margin: 0 auto var(--space-md);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.intro-impact-header .section-sub {
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.75;
  max-width: 46rem;
  margin: 0 auto;
  text-wrap: balance;
}

.impact-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2vw, 28px);
  max-width: 1120px;
  margin: 0 auto;
  border-top: 1px solid var(--border-subtle);
  padding-top: clamp(26px, 4vw, 40px);
}

.metric-item {
  text-align: center;
  padding: 0 clamp(10px, 1.5vw, 22px);
  position: relative;
}

.metric-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: var(--border-subtle);
}

.metric-value {
  display: block;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}

.metric-label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-tertiary);
  line-height: 1.6;
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .intro-impact-section {
    padding: clamp(48px, 7vw, 72px) 0;
  }

  .impact-metrics {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }

  .metric-item:nth-child(2n)::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .intro-impact-header .section-headline {
    font-size: var(--display-section);
    max-width: none;
    margin: 0 auto 1.5rem;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }

  .intro-impact-header .section-sub {
    max-width: 38rem;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
  }

  .impact-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--border-subtle);
    padding-top: 0;
  }

  .metric-item {
    padding: 24px 15px;
    border-bottom: 1px solid var(--border-subtle);
  }

  .metric-item:nth-child(odd) {
    border-right: 1px solid var(--border-subtle);
  }

  .metric-item::after {
    display: none !important;
  }

  .metric-value {
    font-size: 1.05rem;
    font-weight: 600;
  }

  .metric-label {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .intro-impact-section {
    padding: 44px 0 48px;
  }

  .intro-impact-header {
    margin-bottom: 32px;
  }

  .impact-metrics {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0;
    border-top: 0;
    padding-top: 0;
  }

  .metric-item::after {
    display: none;
  }

  .metric-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .metric-item:first-child {
    border-top: 1px solid var(--border-subtle);
  }

  .metric-value {
    margin-bottom: 6px;
  }

  .metric-label {
    max-width: 28ch;
  }
}

.stat-card .bento-visual {
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.stat-card > * {
  position: relative;
  z-index: 1;
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  padding: 1px;
  background: radial-gradient(
    500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(168, 85, 247, 0.8),
    rgba(59, 130, 246, 0.6),
    rgba(16, 185, 129, 0.4),
    transparent 50%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--gradient-opacity, 0);
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 2;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--surface-card-border-hover);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.stat-number {
  font-size: var(--heading-md);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: var(--space-xs);
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-2xs);
}

.stat-source {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-2xs);
}

@media (max-width: 1024px) {
  .problem-stats {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
  
  .problem-icon {
    font-size: 2.5rem;
  }
  
  .problem-headline {
    font-size: var(--heading-md);
  }
  
  .problem-description {
    font-size: var(--body-base);
  }
  
  .stat-number {
    font-size: var(--heading-md);
  }
}

/* Models Strip - Visual Section Divider */
.models-strip {
  width: 100%;
  max-width: 100vw;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-sm) var(--container-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
}

.models-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: #3b3b3b;
}

.models-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.models-logos-img {
  max-width: 100%;
  height: auto;
  max-height: 32px;
  object-fit: contain;
  opacity: 0.25;
  filter: grayscale(100%) brightness(0.8);
}

.model-logo {
  font-size: var(--body-sm);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .models-logos {
    gap: var(--space-sm);
  }
  
  .model-logo {
    font-size: 0.7rem;
  }
}

/* ==========================================================================
   9. Platform Overview - Tabbed Showcase
   ========================================================================== */

.platform-overview {
  padding-top: var(--section-padding);
  padding-bottom: 0;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  text-align: center;
}

.platform-header {
  max-width: 640px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

/* Tab Navigation - Unified Selector */
/* Hide scrollbars but keep functionality */
.platform-tabs,
.carousel-scroll {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.platform-tabs::-webkit-scrollbar,
.carousel-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}

.platform-tabs {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  margin: 0 auto calc(var(--space-lg) + var(--space-md));
  padding: 6px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(255, 255, 255, 0.025) 100%
  );
  border: 1px solid rgba(27, 27, 27, 0.23);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  max-width: min(1200px, 100%);
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.platform-tabs::-webkit-scrollbar {
  display: none;
}

.platform-tabs::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% -30%, 
    rgba(255, 255, 255, 0.025), 
    transparent 70%
  );
  border-radius: inherit;
  pointer-events: none;
}

.platform-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 96px;
  padding: 0 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  text-align: center;
  flex: 1;
  min-width: min(180px, 30vw);
  scroll-snap-align: start;
}

.platform-tab .tab-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.platform-tab .tab-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: -0.015em;
  transition: color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  white-space: nowrap;
}

.platform-tab .tab-subtitle {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
  letter-spacing: -0.005em;
  transition: color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.platform-tab:hover:not(.active) {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.045) 0%,
    rgba(255, 255, 255, 0.025) 100%
  );
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.08);
}

.platform-tab:hover:not(.active) .tab-label {
  color: rgba(255, 255, 255, 0.82);
}

.platform-tab:hover:not(.active) .tab-subtitle {
  color: rgba(255, 255, 255, 0.58);
}

.platform-tab.active {
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.085) 0%, 
    rgba(255, 255, 255, 0.055) 100%
  );
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  position: relative;
}

.platform-tab.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.platform-tab.active .tab-label {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.platform-tab.active .tab-subtitle {
  color: rgba(255, 255, 255, 0.65);
}

/* Tab Content - Two Column Layout */
.platform-content {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 26rem;
}

.platform-panel {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: var(--space-2xl);
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.platform-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  position: relative;
}

/* Panel Description */
.panel-description {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
}

.panel-title {
  font-size: var(--heading-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  font-weight: 600;
  margin: 0 0 var(--space-xs) 0;
}

.panel-text {
  font-size: var(--body-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 100%;
  margin: 0;
}

.panel-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.panel-features li {
  font-size: var(--body-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  padding-left: var(--space-lg);
  position: relative;
}

.panel-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}

.panel-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px 20px;
  background: rgba(212, 197, 171, 0.08);
  color: var(--accent);
  font-weight: 500;
  font-size: var(--body-sm);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212, 197, 171, 0.15);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  width: fit-content;
}

.panel-cta::after {
  content: '→';
  transition: transform 0.2s ease;
}

.panel-cta:hover {
  background: rgba(212, 197, 171, 0.12);
  border-color: rgba(212, 197, 171, 0.25);
}

.panel-cta:hover::after {
  transform: translateX(3px);
}

/* Panel Visual */
.panel-visual {
  position: relative;
  width: 100%;
}

.platform-frame {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  background: rgba(0, 0, 0, 0.35);
  position: relative;
  isolation: isolate;
}

.platform-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: radial-gradient(
    500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(168, 85, 247, 0.85),
    rgba(59, 130, 246, 0.7),
    rgba(16, 185, 129, 0.5),
    transparent 50%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--gradient-opacity, 0);
  transition: opacity var(--transition-fast);
  pointer-events: none;
  z-index: 10;
}

.platform-placeholder {
  aspect-ratio: 16/8.5;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--body-base);
}

.platform-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 1;
}

.platform-glow {
  position: absolute;
  inset: -60px;
  background: var(--gradient-atmosphere);
  filter: blur(80px);
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}

/* Platform Proof */
.platform-proof {
  padding: var(--section-padding) 0;
}

.platform-proof-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.platform-proof-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-lg) * 0.4); /* Reduced gap from tabs to browser */
}

/* Reduced size browser container */
.platform-proof-card {
  width: 85%; /* 15% smaller overall */
  margin-inline: auto;
}

/* Override platform-tabs width inside proof so it spans full container */
.platform-proof-tabs {
  max-width: 100% !important;
  margin-bottom: calc((var(--space-lg) + var(--space-md)) * 0.5) !important;
}

.platform-proof-copy {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
}

.platform-proof-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.platform-proof-title {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  font-weight: 500;
  color: var(--text-primary);
}

.platform-proof-description {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0 auto;
}

/* Browser chrome frame */
.pp-browser {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #141414;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 52px rgba(0, 0, 0, 0.32);
}

.pp-browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  height: 36px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  user-select: none;
}

.pp-browser-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pp-browser-dots span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.pp-browser-dots span:nth-child(1) { background: rgba(255, 95, 86, 0.65); }
.pp-browser-dots span:nth-child(2) { background: rgba(255, 189, 46, 0.55); }
.pp-browser-dots span:nth-child(3) { background: rgba(39, 201, 63, 0.5); }

.pp-browser-url {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 22px;
  max-width: 320px;
  margin: 0 auto;
  border-radius: 6px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-browser-lock {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: rgba(39, 201, 63, 0.7);
}

.pp-browser-viewport {
  overflow: hidden;
  line-height: 0;
}

.platform-proof-img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(1.02) contrast(1.01);
}

/* Typing Overlay Animation */
.typing-overlay {
  position: absolute;
  left: 34%;
  top: 71%;
  display: flex;
  align-items: center;
  z-index: 5;
  pointer-events: none;
  transform-origin: left center;
}

.typing-text {
  font-size: clamp(0.7rem, 0.9vw, 0.95rem);
  font-family: var(--font-mono, 'SF Mono', 'Monaco', 'Consolas', monospace);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.typing-cursor {
  display: inline-block;
  font-size: clamp(0.7rem, 0.9vw, 0.95rem);
  font-weight: 600;
  color: var(--accent);
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}

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

/* Responsive adjustments based on container width */
@media (max-width: 1400px) {
  .typing-text,
  .typing-cursor {
    font-size: clamp(0.65rem, 0.85vw, 0.85rem);
  }
}

@media (max-width: 720px) {
  .platform-proof-card {
    width: 100%; /* Back to full width on mobile */
  }

  .platform-proof-copy {
    margin-top: 16px;
  }

  .pp-browser {
    border-radius: 10px;
  }

  .pp-browser-bar {
    height: 30px;
    padding: 0 10px;
  }

  .pp-browser-url {
    font-size: 0.7rem;
    max-width: 200px;
  }
}

@media (max-width: 1024px) {
  .typing-text,
  .typing-cursor {
    font-size: clamp(0.6rem, 0.8vw, 0.75rem);
  }
}

@media (max-width: 768px) {
  .typing-overlay {
    left: 34%;
    top: 71%;
  }
  
  .typing-text,
  .typing-cursor {
    font-size: clamp(0.55rem, 1.2vw, 0.7rem);
  }
}

@media (max-width: 640px) {
  .typing-overlay {
    left: 34%;
    top: 71%;
  }
  
  .typing-text,
  .typing-cursor {
    font-size: clamp(0.5rem, 1.8vw, 0.65rem);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .platform-panel {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    /* Video appears first, then text content below */
    grid-template-areas:
      "visual"
      "description";
  }
  
  .panel-description {
    text-align: center;
    grid-area: description;
    /* Center the container but keep list items properly aligned */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .panel-visual {
    grid-area: visual;
  }
  
  .panel-title {
    font-size: var(--heading-lg);
  }
  
  .panel-text {
    font-size: var(--body-base);
    max-width: 100%;
  }
  
  /* Keep bullet list left-aligned for readability */
  .panel-features {
    text-align: left;
    align-self: stretch;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .panel-cta {
    align-self: center;
  }
  
  /* Center the platform-overview content container on mobile */
  .platform-content {
    max-width: 100%;
    padding: 0;
  }
}

@media (max-width: 768px) {
  .platform-tabs {
    flex-wrap: wrap;
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .platform-tab {
    flex: 1 1 calc(50% - 6px);
    min-width: 140px;
  }
}

@media (max-width: 1024px) {
  .platform-tabs {
    max-width: 100%;
    gap: 3px;
  }
  
  .platform-tab {
    padding: 0 24px;
    min-width: 160px;
  }
  
  .platform-tab .tab-label {
    font-size: 0.875rem;
  }
  
  .platform-tab .tab-subtitle {
    font-size: 0.65rem;
  }
}

@media (max-width: 640px) {
  .platform-tabs {
    gap: 3px;
    padding: 3px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .platform-tab {
    padding: 0 0.75rem;
    gap: 0.2rem;
    min-width: min(120px, 28vw);
    height: 5.5rem;
  }
  
  .platform-tab .tab-label {
    font-size: 0.75rem;
    white-space: nowrap;
  }
  
  .platform-tab .tab-subtitle {
    font-size: 0.575rem;
    white-space: nowrap;
  }
}

/* ==========================================================================
   10. Features Grid - Visual Showcase
   ========================================================================== */

.agents-market-teaser {
  position: relative;
  padding: calc(var(--section-padding) * 0.45) var(--container-padding) calc(var(--section-padding) * 0.45);
  background: var(--bg-main, #020202);
  overflow: visible;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
}

.agents-market-teaser::before {
  display: none;
}

.agents-market-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1120px);
  max-width: min(1120px, calc(100vw - (var(--container-padding) * 2)));
  margin: 0 auto;
  display: grid;
  gap: clamp(1.5rem, 2.4vw, 2.1rem);
}

.agents-market-stage {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.agents-market-eyebrow-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin: 0 auto 0.9rem;
}

.agents-market-eyebrow-wrap .section-label {
  margin: 0;
  color: rgba(212, 197, 171, 0.88);
}

.agents-market-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid rgba(212, 197, 171, 0.25);
  background: rgba(212, 197, 171, 0.04);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.agents-market-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(212, 197, 171, 0.6);
}

.agents-market-headline {
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(1.9rem, 3.2vw, 2.95rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.agents-market-stage + .am-video-wrap {
  margin-top: 2.5rem;
}

.agents-market-headline-accent,
.agents-market-headline-base {
  display: block;
}

.agents-market-headline-accent {
  color: var(--accent);
}

.agents-market-sub {
  max-width: 600px;
  margin: 0.95rem auto 0;
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.76;
}

.agents-market-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.agents-market-actions .btn-primary,
.agents-market-link {
  min-height: 40px;
  min-width: 196px;
  padding-top: 0.68rem;
  padding-bottom: 0.68rem;
}

.agents-market-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.72rem 1rem;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

.agents-market-link:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transform: translateY(-1px);
}

.agents-market-avatars-wrap {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 20;
  margin: 0;
  width: 100%;
}

.agents-market-footer-meta {
  margin-top: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.agents-market-footer-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.agents-market-avatars-meta {
  width: auto;
  display: flex;
  justify-content: center;
}

.agents-market-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  min-height: 120px;
  width: auto;
  padding: 0 2rem;
  margin-top: 0;
  padding-inline: 0.5rem;
  overflow: visible;
}

.agents-market-avatars:hover .agents-market-avatar:not(:hover) {
  filter: grayscale(1) opacity(0.4);
  transform: scale(0.9);
}

.agents-market-avatar {
  width: calc(var(--avatar-size, 52px) * 1.15);
  height: calc(var(--avatar-size, 52px) * 1.15);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
  margin-left: var(--avatar-overlap, -0.55rem);
  border: 4px solid #0c0f18;
  background: linear-gradient(135deg, rgba(88, 185, 255, 0.42), rgba(160, 92, 255, 0.52));
  box-shadow: 
    0 12px 24px rgba(0, 0, 0, 0.6),
    0 0 15px rgba(0, 0, 0, 0.8),
    inset 0 0 1px 1px rgba(255, 255, 255, 0.1);
  z-index: var(--avatar-z, 1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.agents-market-avatar:hover {
  transform: scale(1.2) translateY(-10px);
  z-index: 50 !important;
  border-color: var(--accent, #d4c5ab);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(212, 197, 171, 0.2);
}

.agents-market-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agents-market-video-block {
  --agents-market-frame-radius: clamp(18px, 2.4vw, 28px);
  display: block;
  width: 100%;
  max-width: 1680px;
  margin: 2rem auto 0;
  position: relative;
}

.agents-market-video-block.automation-flow {
  max-width: 1680px;
  padding: 0 clamp(16px, 2.5vw, 32px);
  margin: 0 auto;
  overflow: visible;
  box-sizing: border-box;
}

.agents-market-video-block .automation-flow-grid {
  grid-template-columns: minmax(180px, 220px) minmax(min(340px, 100%), 400px) minmax(180px, 220px);
  gap: clamp(2rem, 4vw, 4rem);
  width: min(100%, 1120px);
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.agents-market-video-card {
  position: relative;
  width: 100%;
  max-width: 1400px;
  justify-self: center;
}

.agents-market-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: visible;
  border-radius: var(--agents-market-frame-radius);
  border: 0;
  background: #06080e;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  opacity: 1 !important;
}

.agents-market-video-frame::before {
  content: none;
}

.agents-market-video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--agents-market-frame-radius);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
  z-index: 1;
}

.agents-market-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--agents-market-frame-radius);
  filter: saturate(1.02) contrast(1.02);
  opacity: 1 !important;
}

.agents-market-video-card .platform-glow {
  inset: -40px 8% -80px;
  opacity: 0.15;
  filter: blur(88px);
}

.agents-market-video-block .flow-lines-svg .left-path {
  stroke: url(#agentsFlowLeftGradient);
  animation: flow-dash-left 14s linear infinite;
}

.agents-market-video-block .flow-lines-svg .right-path {
  stroke: url(#agentsFlowRightGradient);
  animation: flow-dash-right 14s linear infinite;
}

.agents-market-video-block .flow-lines-svg {
  overflow: visible;
}

.agents-market-video-block .flow-lines-svg path {
  opacity: 0.92;
}

.agents-market-video-block .flow-inputs {
  justify-self: end;
}

.agents-market-video-block .flow-outputs {
  justify-self: start;
}

/* =====================================================================
   Agent Team Packs — Scrolling Cards
   ===================================================================== */
.agent-teams-section {
  width: 100%;
  padding: 0 0 1rem;
  overflow: hidden;
}

@media (max-width: 768px) {
  .agent-teams-section {
    padding-top: 3.5rem;
  }
}

.agent-teams-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 0 var(--container-padding, 1.5rem);
}

.agent-teams-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  display: block;
  margin-bottom: 0.6rem;
}

.agent-teams-headline {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  letter-spacing: -0.01em;
}

.agent-teams-track-wrap {
  overflow: hidden;
  width: 100%;
  padding: 0.5rem 0 1.2rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  position: relative;
}

.agent-teams-carousel-shell {
  position: relative;
  width: 100%;
}
.agent-teams-track-wrap::-webkit-scrollbar { display: none; }

.agent-teams-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: agentTeamsScroll 22s linear infinite;
  will-change: transform;
}

.agent-teams-track:hover {
  animation-play-state: paused;
}

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

/* Card */
.agent-team-card {
  position: relative;
  width: 280px;
  flex-shrink: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: default;
  overflow: hidden;
}

.agent-team-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 50% at 85% 15%, rgba(var(--atc-rgb), 0.13) 0%, transparent 65%);
  pointer-events: none;
}

.agent-team-card:hover {
  border-color: rgba(var(--atc-rgb), 0.35);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--atc-rgb), 0.18);
}

/* Accent colours */
.agent-team-card[data-team-accent="pink"]   { --atc: #e85d8a; --atc-rgb: 232,93,138; --atc-label: rgba(232,93,138,0.9); }
.agent-team-card[data-team-accent="blue"]   { --atc: #5da8e8; --atc-rgb: 93,168,232; --atc-label: rgba(93,168,232,0.9); }
.agent-team-card[data-team-accent="amber"]  { --atc: #ded3c5; --atc-rgb: 222,211,197; --atc-label: rgba(222,211,197,0.9); }
.agent-team-card[data-team-accent="orange"] { --atc: #c8c6a7; --atc-rgb: 200,198,167; --atc-label: rgba(200,198,167,0.9); }
.agent-team-card[data-team-accent="teal"]   { --atc: #5de8c8; --atc-rgb: 93,232,200; --atc-label: rgba(93,232,200,0.9); }
.agent-team-card[data-team-accent="purple"] { --atc: #a97de8; --atc-rgb: 169,125,232; --atc-label: rgba(169,125,232,0.9); }
.agent-team-card[data-team-accent="gold"]   { --atc: #e8c85d; --atc-rgb: 232,200,93;  --atc-label: rgba(232,200,93,0.9); }
.agent-team-card[data-team-accent="cyan"]   { --atc: #5de0e8; --atc-rgb: 93,224,232;  --atc-label: rgba(93,224,232,0.9); }

/* Stacked avatars — no layout shift on hover */
.agent-team-avatars {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.agent-team-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #0c0f18;
  margin-right: -14px;
  flex-shrink: 0;
}
.agent-team-avatar:first-child { margin-right: 0; }

.agent-team-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.agent-team-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--atc-label);
  background: rgba(var(--atc-rgb), 0.1);
  border: 1px solid rgba(var(--atc-rgb), 0.2);
  border-radius: 8px;
  padding: 5px 10px;
  align-self: flex-start;
}

.agent-team-desc {
  font-size: 0.83rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

.agent-team-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.agent-team-perks li {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
  padding-left: 1.1rem;
  position: relative;
}

.agent-team-perks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--atc);
  opacity: 0.7;
}

.agent-teams-cta {
  text-align: center;
  padding: 1.2rem var(--container-padding, 1.5rem) 0;
}

/* Mobile arrow nav — hidden on desktop */
.agent-teams-mobile-nav {
  display: none;
}

@media (max-width: 767px) {
  .agents-market-teaser {
    padding-left: clamp(16px, 4vw, 22px);
    padding-right: clamp(16px, 4vw, 22px);
  }

  .agents-market-shell {
    display: block;
    width: 100%;
    max-width: 100%;
    gap: 1rem;
  }

  .agent-teams-section {
    overflow: visible;
    position: relative;
  }

  .agent-teams-track-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 0.5rem 2rem 1.2rem;
    scrollbar-width: none;
    position: static;
  }

  .agent-teams-track-wrap::-webkit-scrollbar {
    display: none;
  }

  .agent-teams-track {
    animation: none !important;
    gap: 0.75rem;
    padding-inline: 0;
  }

  .agent-teams-track .agent-team-card[aria-hidden="true"] {
    display: none;
  }

  .agent-team-card {
    width: 290px;
    scroll-snap-align: center;
    flex-shrink: 0;
    min-height: 220px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .agent-teams-mobile-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: calc(0.5rem + 110px);
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    padding: 0 0.65rem;
    z-index: 10;
  }

  .agent-teams-mobile-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(10, 10, 10, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255,255,255,0.76);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    pointer-events: auto;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  }

  .agent-teams-mobile-btn:hover,
  .agent-teams-mobile-btn:active {
    background: rgba(24, 24, 24, 0.74);
    border-color: rgba(255,255,255,0.18);
  }

  .agent-teams-mobile-btn--prev {
    transform: translateX(-1px);
  }

  .agent-teams-mobile-btn--next {
    transform: translateX(1px);
  }

  .agent-teams-cta {
    padding-top: 0.7rem;
  }

  .trust-security-intro {
    text-align: center;
    justify-items: center;
    margin-inline: auto;
  }

  .trust-security-title,
  .trust-security-copy {
    text-align: center;
    margin-inline: auto;
  }
}

/* ===================================================================== */
.trust-security-section {
  position: relative;
  padding: 0 var(--container-padding) calc(var(--section-padding) * 0.95);
  background: #020202;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.trust-security-shell {
  position: relative;
  z-index: 5;
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  gap: 1.4rem;
  isolation: isolate;
}

.trust-security-shell::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(920px, 92vw);
  height: 420px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 22% 42%, rgba(168, 85, 247, 0.18) 0%, transparent 34%),
    radial-gradient(circle at 76% 38%, rgba(59, 130, 246, 0.18) 0%, transparent 36%),
    radial-gradient(circle at 50% 75%, rgba(212, 197, 171, 0.1) 0%, transparent 46%);
  filter: blur(72px);
  opacity: 0.95;
  pointer-events: none;
  z-index: -1;
}

.trust-security-intro {
  max-width: 760px;
  display: grid;
  gap: 0.5rem;
  margin: 0 auto;
  text-align: center;
}

.trust-security-title {
  margin: 0;
  font-size: clamp(1.75rem, 2.85vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.trust-security-copy {
  max-width: 56ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.98rem;
  line-height: 1.68;
}

.trust-security-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0.6rem 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  background-color: #020202 !important;
  background-image: none !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 40px 100px rgba(0, 0, 0, 0.95);
  z-index: 10;
  overflow: hidden;
  isolation: isolate;
}

.trust-security-rail::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(168, 85, 247, 1),
    rgba(59, 130, 246, 0.8),
    transparent 60%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--gradient-opacity, 0);
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 10;
}

.trust-security-glow {
  position: absolute;
  inset: auto 10% -8% 10%;
  height: 180px;
  background: radial-gradient(circle at 50% 50%, rgba(95, 132, 255, 0.16) 0%, rgba(95, 132, 255, 0.08) 30%, transparent 72%);
  filter: blur(56px);
  opacity: 0.8;
  pointer-events: none;
  z-index: 1;
}

.trust-security-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  padding: 1.8rem 1.6rem 2rem;
  min-height: 0;
  background: transparent;
}

.trust-security-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 0.4rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease;
}

.trust-security-item:hover .trust-security-icon-box {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.trust-security-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(1.2) contrast(1.1);
}

.trust-security-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.trust-security-item:last-child::after {
  display: none;
}

.trust-security-item + .trust-security-item::before {
  content: none;
}

.trust-security-item-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #7fdaff; /* Matching kicker color for synergy */
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.trust-security-item-title {
  margin: 0;
  max-width: 22ch; /* Slightly wider for centered text */
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.trust-security-item-copy {
  margin: 0 auto;
  max-width: 32ch;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.88rem;
  line-height: 1.55;
}

.trust-security-visual {
  position: relative;
  z-index: 3;
  width: min(100%, 220px);
  margin: 0.15rem auto 0;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
}

.trust-security-visual-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.trust-security-visual-image {
  display: block;
  width: min(100%, 180px);
  height: auto;
  margin-top: 4px;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
  opacity: 0.94;
}

.trust-security-inline-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.4rem;
}

.trust-security-inline-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  font-weight: 500;
}

.agents-market-carousel {
  display: grid;
  gap: 1.15rem;
}

.agents-market-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

.agents-market-kicker {
  display: inline-block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7fdaff;
}

.agents-market-carousel-title {
  margin: 0;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  letter-spacing: -0.028em;
}

.agents-market-carousel-copy {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.68;
  max-width: 30ch;
}

.agents-carousel-wrapper {
  margin-inline: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: transparent;
  border: 0;
}

.agents-carousel-wrapper::before,
.agents-carousel-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(44px, 5vw, 72px);
  z-index: 6;
  pointer-events: none;
}

.agents-carousel-wrapper::before {
  left: 0;
  background: linear-gradient(90deg,
    rgba(3, 3, 3, 0.94) 0%,
    rgba(3, 3, 3, 0.78) 34%,
    rgba(3, 3, 3, 0.34) 68%,
    rgba(3, 3, 3, 0) 100%);
}

.agents-carousel-wrapper::after {
  right: 0;
  background: linear-gradient(270deg,
    rgba(3, 3, 3, 0.94) 0%,
    rgba(3, 3, 3, 0.78) 34%,
    rgba(3, 3, 3, 0.34) 68%,
    rgba(3, 3, 3, 0) 100%);
}

.agents-carousel-wrapper .carousel-scroll {
  cursor: grab;
  touch-action: pan-y;
}

.agents-carousel-wrapper .carousel-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.agents-carousel-wrapper .carousel-scroll.is-dragging a {
  pointer-events: none;
}

.latest-agent-card {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card-bg);
  border: 1px solid var(--surface-card-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
}

.agents-carousel-wrapper .carousel-card {
  width: 272px;
}

.latest-agent-card:hover {
  transform: translateY(-4px);
  border-color: var(--surface-card-border-hover);
  box-shadow: var(--shadow-lg);
}

.latest-agent-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    520px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(168, 85, 247, 0.8),
    rgba(59, 130, 246, 0.6),
    rgba(16, 185, 129, 0.4),
    transparent 50%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.1;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 3;
}

.latest-agent-card:hover::before {
  opacity: 0.18;
}

.latest-agent-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1.72 / 1;
  background: var(--bg-elevated);
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.latest-agent-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--transition-medium);
}

.latest-agent-card:hover .latest-agent-card-image {
  transform: scale(1.05);
}

.home-blog-section {
  padding: clamp(56px, 8vw, 88px) 0;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-deep);
}

.home-blog-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.home-blog-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(20px, 4vw, 48px);
  align-items: end;
  margin-bottom: 28px;
}

.home-blog-title {
  margin: 10px 0 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.home-blog-copy {
  margin: 0;
  max-width: 38ch;
  justify-self: end;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.home-blog-carousel {
  position: relative;
}

.home-blog-carousel .carousel-btn {
  top: -68px;
  right: 0;
}

.home-blog-carousel .carousel-prev {
  right: 56px;
}

.home-blog-carousel .carousel-scroll {
  cursor: grab;
  touch-action: pan-y;
}

.home-blog-carousel .carousel-scroll.is-dragging {
  cursor: grabbing;
}

.home-blog-carousel .carousel-scroll.is-dragging a {
  pointer-events: none;
}

.home-blog-carousel .carousel-track {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.home-blog-card {
  width: 258px;
  flex: 0 0 auto;
}

.home-blog-card-link {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(18, 19, 19, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: none;
  transition: border-color var(--transition-medium), background var(--transition-medium);
}

.home-blog-card-link:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(18, 19, 19, 0.6);
}

.home-blog-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-elevated);
}

.home-blog-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 11px 11px 0 0;
}

.home-blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 13px 13px;
  min-height: 0;
}

.home-blog-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-blog-card-category {
  color: var(--accent);
  font-weight: 600;
}

.home-blog-card-detail,
.home-blog-card-dot {
  color: var(--text-muted);
}

.home-blog-card-title {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.32;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-blog-card-excerpt {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-blog-card-cta {
  margin-top: 4px;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--accent);
  opacity: 0.8;
}

.home-blog-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  width: 100%;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: 0.95rem;
}

.latest-agent-card-price {
  position: absolute;
  bottom: 9px;
  right: 9px;
  padding: 4px 9px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  font-weight: 600;
  z-index: 2;
}

.latest-agent-card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  font-size: 48px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
}

.latest-agent-card-body {
  padding: 14px 15px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.latest-agent-card-header {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 0;
}

.latest-agent-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.latest-agent-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.latest-agent-card-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.latest-agent-card-category {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}

.latest-agent-card .carousel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
  letter-spacing: 0;
}

.latest-agent-card-role {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.latest-agent-card-description {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.latest-agent-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.latest-agent-card-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.42);
}

.latest-agent-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.01em;
  transition: color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.latest-agent-card:hover .latest-agent-card-link {
  color: var(--accent);
  transform: translateX(2px);
}

.latest-agent-card-link-text,
.latest-agent-card-stat {
  display: none;
}

.latest-agent-card-link-arrow {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
}

.latest-agent-card--custom .latest-agent-card-media {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
    linear-gradient(180deg, rgba(20, 21, 23, 0.95), rgba(14, 15, 17, 0.98));
}

.latest-agent-card-visual-custom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.latest-agent-card-custom-mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 300;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 1;
}

.latest-agent-card-custom-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 100%);
}

@media (max-width: 1024px) {
  .trust-security-rail {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .trust-security-item + .trust-security-item::before {
    left: 1.1rem;
    right: 1.1rem;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .agents-market-header-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.65rem;
  }

  .agents-market-carousel-copy {
    max-width: 34rem;
  }

  .agents-carousel-wrapper .carousel-card {
    width: 252px;
  }
}

@media (max-width: 768px) {
  .trust-security-section {
    padding-top: calc(var(--section-padding) * 0.34);
    padding-bottom: calc(var(--section-padding) * 0.4);
  }

  .trust-security-shell {
    gap: 0.9rem;
  }

  .trust-security-shell::before {
    width: min(620px, 120vw);
    height: 300px;
    top: 58%;
    filter: blur(56px);
    opacity: 0.82;
  }

  .trust-security-title {
    max-width: 12ch;
  }

  .trust-security-visual {
    width: min(100%, 180px);
    margin-top: 52px;
    gap: 0.35rem;
  }

  .trust-security-visual-label {
    font-size: 0.54rem;
  }

  .trust-security-visual-image {
    width: min(100%, 150px);
    border-radius: 10px;
  }

  .trust-security-item {
    padding: 1rem 1rem 1.05rem;
  }

  .agents-market-teaser {
    padding-top: calc(var(--section-padding) * 0.28);
    padding-bottom: calc(var(--section-padding) * 0.38);
  }

  .agents-market-shell {
    display: block;
    gap: 1rem;
  }

  .agents-market-stage {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .agents-market-eyebrow-wrap {
    justify-content: center;
    gap: 0.35rem;
    width: auto;
    max-width: 100%;
    margin: 0 auto 0.8rem;
    padding: 0;
    background: transparent;
  }

  .agents-market-headline {
    margin: 0 auto;
    max-width: 13ch;
    font-size: clamp(2rem, 7vw, 2.7rem);
    line-height: 1.1;
    text-wrap: pretty;
  }

  .agents-market-sub {
    max-width: 36ch;
    margin: 0.9rem auto 0;
    font-size: 0.94rem;
  }

  .agents-market-carousel {
    gap: 0.95rem;
  }

  .agents-market-video-block {
    gap: 0.95rem;
  }

  .agents-market-header-row {
    gap: 0.55rem;
    margin-bottom: 0.15rem;
  }

  .agents-market-carousel-title {
    font-size: 1.28rem;
  }

  .agents-market-carousel-copy {
    font-size: 0.84rem;
    max-width: 26rem;
  }

  .agents-market-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .agents-market-actions > a {
    justify-content: center;
    width: 100%;
  }

  .agents-market-avatars-wrap {
    justify-content: center;
    overflow: visible;
    margin-top: 0;
    margin-bottom: 0;
  }

  .agents-market-avatars {
    min-height: 120px;
    width: 100%;
    justify-content: center;
    padding-inline: 0;
    overflow: visible;
  }

  .agents-market-avatars-meta {
    width: 100%;
    gap: 0.3rem;
  }

  .agents-market-header-row {
    text-align: center;
  }

  .agents-market-video-frame {
    aspect-ratio: 16 / 9;
    border-radius: 20px;
  }

  .agents-market-video-card::after {
    height: 76px;
  }

  .agents-market-avatar {
    width: calc(var(--avatar-size, 52px) * 0.85);
    height: calc(var(--avatar-size, 52px) * 0.85);
    margin-left: var(--avatar-overlap-mobile, -13px);
    border-width: 3px;
    z-index: var(--avatar-z, 1);
  }

  .agents-carousel-wrapper .carousel-card {
    width: 236px;
  }

  .latest-agent-card-body {
    padding: 12px;
    gap: 8px;
  }

  .latest-agent-card-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .latest-agent-card .carousel-title {
    font-size: 14px;
  }

  .latest-agent-card-role {
    font-size: 11px;
  }

  .latest-agent-card-description {
    font-size: 12px;
  }

  .home-blog-header {
    grid-template-columns: 1fr;
    margin-bottom: 22px;
  }

  .home-blog-copy {
    justify-self: start;
    max-width: 52ch;
  }

  .home-blog-carousel .carousel-btn {
    top: -58px;
  }

  .home-blog-card {
    width: 264px;
  }
}

@media (max-width: 560px) {
  .agents-market-shell {
    display: block;
    gap: 0.5rem;
  }

  .agents-market-teaser {
    padding-top: calc(var(--section-padding) * 0.1);
  }

  .agents-market-stage {
    max-width: 100%;
  }

  .agents-market-headline {
    max-width: 14ch;
    font-size: clamp(1.9rem, 8.4vw, 2.35rem);
  }

  .agents-market-sub {
    max-width: 34ch;
  }

  .agents-market-avatars-wrap {
    margin-top: 0;
    margin-bottom: 0;
    overflow: visible;
  }

  .agents-market-avatars {
    min-height: 100px;
    width: 100%;
    overflow: visible;
  }

  .agents-market-avatars-meta {
    gap: 0.25rem;
  }

  .agents-market-avatar {
    width: calc(var(--avatar-size, 52px) * 0.75);
    height: calc(var(--avatar-size, 52px) * 0.75);
    margin-left: var(--avatar-overlap-mobile, -10px);
    z-index: var(--avatar-z, 1);
  }

  .agents-market-actions .btn-primary,
  .agents-market-link {
    min-width: 100%;
  }

  .agents-market-video-frame {
    aspect-ratio: 16 / 9;
    border-radius: 18px;
  }

  .home-blog-section {
    padding: 48px 0;
  }

  .home-blog-carousel .carousel-btn {
    display: none;
  }

  .home-blog-card {
    width: 82vw;
    max-width: 276px;
  }

  .home-blog-card-body {
    min-height: 0;
  }

  .agents-market-video-card::after {
    height: 64px;
  }

  .agents-market-avatars {
    padding-inline: 0;
  }

  .agents-carousel-wrapper {
    margin-inline: 0;
    border-radius: 16px;
  }

  .agents-carousel-wrapper::before,
  .agents-carousel-wrapper::after {
    display: none;
  }

  .agents-carousel-wrapper .carousel-card {
    width: min(236px, calc(100vw - (var(--container-padding) * 2.2)));
  }
}

.features-grid {
  padding: calc(var(--section-padding) * 0.75) var(--container-padding);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
}

.features-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-xl);
}

/* Integration showcase: place CTA centered between copy and visual */
.integration-showcase .features-header.integrations-hero {
  margin-bottom: 0;
}

.integrations-cta-wrap {
  display: flex;
  justify-content: center;
  margin: var(--space-lg) auto var(--space-lg);
}

@media (max-width: 768px) {
  .integrations-cta-wrap {
    margin: var(--space-md) auto var(--space-md);
  }
}

.features-showcase {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Keep horizontal spacing equal to vertical spacing between rows */
  gap: var(--space-lg);
}

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

.feature-card {
  background: rgba(10, 11, 14, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 420px; /* Reduced bulk from 480px */
  /* Fade the default outline out as gradient-opacity increases (prevents “double border”) */
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, calc(0.04 * (1 - var(--gradient-opacity, 0)))),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(168, 85, 247, 1),
    rgba(59, 130, 246, 0.8),
    transparent 60%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--gradient-opacity, 0);
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 10;
}

/* Bento cards: use the same ::before gradient outline as .feature-card / .platform-frame.
   The rAF-throttled JS mousemove handler prevents the flicker that caused issues before. */
.bento-card::before {
  /* inherits from .feature-card::before — just ensure it renders */
  display: block;
}

/* Reset the box-shadow to match .feature-card base (no extra overrides needed) */
.bento-card {
  transition: box-shadow 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
}

.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--surface-card-overlay);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.feature-card.bento-card--wide::after {
  opacity: 1;
}
.feature-card::after {
  opacity: 1;
}
.feature-card > * {
  position: relative;
  z-index: 1;
}

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

.feature-card-large .feature-content {
  margin-bottom: var(--space-md);
}

.feature-card-full {
  position: relative;
  border-radius: var(--radius-lg);
}

.feature-card-inner {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Balanced from 2.5fr */
  gap: var(--space-lg);
  align-items: center;
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
}

.feature-card-full::before {
  content: '';
  position: absolute;
  /* Render border INSIDE the card so overflow:hidden doesn't clip it */
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(168, 85, 247, 0.8),
    rgba(59, 130, 246, 0.6),
    rgba(16, 185, 129, 0.4),
    transparent 50%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--gradient-opacity, 0);
  transition: opacity 0.2s ease;
  pointer-events: none;
  /* Keep the glow outline ABOVE images/content (border-only mask) */
  z-index: 2;
}

.feature-card-full .feature-card-inner {
  position: relative;
  z-index: 1;
}

.feature-title {
  font-size: var(--heading-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.feature-desc {
  font-size: var(--body-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
}

.feature-link {
  display: inline-block;
  font-size: var(--body-sm);
  color: var(--accent);
  margin-top: var(--space-md);
  transition: opacity 0.2s ease;
}

.feature-link:hover {
  opacity: 0.8;
}

/* ==========================================================================
   Visual Container Refactor
   ========================================================================== */

.feature-visual {
  position: relative;
  width: 100%;
  height: 240px; /* Reduced from 280px */
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: visible;
  /* Pull to the very bottom of the card by negating the card's padding */
  margin-bottom: calc(var(--space-lg) * -1);
}

.feature-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Variant: Full bleed edgeless screenshot */
.feature-visual-edgeless {
  /* Side and bottom bleeds */
  margin-left: calc(var(--space-lg) * -1);
  margin-right: calc(var(--space-lg) * -1);
  width: calc(100% + (var(--space-lg) * 2));
  height: 260px; /* Adjusted height */
}

.feature-visual-edgeless img {
  object-fit: cover;
  object-position: left bottom;
}

/* Variant: Bottom-anchored but respects sides */
.feature-visual-bottom {
  /* Only bottom bleed (inherited from .feature-visual margin-bottom) */
  height: 240px;
}

.feature-visual-bottom img {
  object-position: bottom center;
}

/* Variant: Special agents perspective image */
.feature-visual-agents {
  height: 340px; /* Larger, matches top cards better */
  justify-content: flex-start; /* Pull visual to the left (towards content) */
  /* Remove the “floating gap” at the bottom on desktop */
  margin-bottom: calc(var(--space-lg) * -1);
}

.feature-visual-agents img {
  /* Make it bigger and less “squeezed” */
  width: 118%;
  max-width: none;
  height: 100%;
  margin-bottom: 0;
  object-position: left bottom;
  /* Nudge slightly further left for natural alignment */
  transform: translateX(-6%);
}

/* Video variant: Centered vertically with elegant frame */
.feature-visual-agents:has(.platform-frame) {
  justify-content: center;
  align-items: center;
  padding: var(--space-md) 0; /* Equal top and bottom margins */
}

.feature-visual-agents .platform-frame {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.feature-visual-agents .platform-frame video {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.feature-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.feature-card-small {
  padding: var(--space-md);
  min-height: auto;
}

/* ==========================================================================
   Bento Grid — features-grid section
   ========================================================================== */

.features-bento {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  /* 3 equal columns — cards span 2 or 1 to create zigzag wide/narrow layout */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 400px 400px;
  gap: 20px;
}

/* Zigzag placement:
   Row 1: Card 1 wide (col 1-2) | Card 2 narrow (col 3)
   Row 2: Card 3 narrow (col 1) | Card 4 wide  (col 2-3)  ← switched */
.bento-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
.bento-card:nth-child(2) { grid-column: 3;     grid-row: 1; }
.bento-card:nth-child(3) { grid-column: 1;     grid-row: 2; }
.bento-card:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }

.bento-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; /* ensure absolute children stay within */
  min-height: 0 !important; /* override .feature-card min-height: 420px — grid rows control height */
  padding: 0 !important;    /* override .feature-card padding — bento-content handles its own padding */
}

.bento-bg-img {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  object-fit: cover;
  z-index: 0;
  opacity: 0.15;
  pointer-events: none;
}

.bento-content, .bento-visual {
  position: relative;
  z-index: 2;
}

.bento-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d1c5ab;
  background: rgba(209, 197, 171, 0.1);
  border: 1px solid rgba(209, 197, 171, 0.25);
  border-radius: 999px;
  padding: 0.2em 0.65em;
  margin-bottom: 12px; /* more space between tag and title */
}

.bento-content {
  padding: 28px 28px 16px; /* generous top padding, proper side padding */
  flex-shrink: 0;
}

.bento-content .feature-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}

.bento-content .feature-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  opacity: 0.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}

.bento-content .feature-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.85rem;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.bento-content .feature-link:hover { opacity: 1; }

.bento-visual {
  flex: 1;
  min-height: 0; /* critical: lets flex item shrink inside fixed grid row */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Conveyor Belt Pills ---- */
.bento-visual--conveyors {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  padding: 20px 0 28px;
  overflow: hidden; /* clip scrolling pills to card bounds */
  flex: 1;
}

.conveyor-track {
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* Fade edges with a mask */
.conveyor-track::before,
.conveyor-track::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72px;
  z-index: 2;
  pointer-events: none;
}
.conveyor-track::before {
  left: 0;
  background: linear-gradient(to right, var(--surface-card, #0a0b0d) 20%, transparent);
}
.conveyor-track::after {
  right: 0;
  background: linear-gradient(to left, var(--surface-card, #0a0b0d) 20%, transparent);
}

.conveyor-belt {
  display: flex;
  gap: 12px;
  width: max-content;
  will-change: transform;
  /* Prevent sub-pixel jitter on loop */
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes scrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes scrollRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.conveyor-belt--left  { animation: scrollLeft  28s linear infinite; }
.conveyor-belt--right { animation: scrollRight 28s linear infinite; }

.conveyor-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  background: rgba(0,0,0,0.28);       /* distinctly darker than card bg */
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
  letter-spacing: 0.01em;
  transition: background 0.2s, border-color 0.2s;
}

.conveyor-pill:hover {
  background: rgba(209, 197, 171, 0.12);
  border-color: rgba(209, 197, 171, 0.3);
}

.conveyor-pill .pill-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  flex-shrink: 0;
}

.conveyor-pill img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Pause on hover */
.conveyor-track:hover .conveyor-belt {
  animation-play-state: paused;
}

/* ---- AI Media Generation Animation ---- */
.bento-visual--mediagen {
  align-items: center;
  justify-content: center;
  padding: 8px 28px 28px;
  overflow: visible;
}

.ai-media-ui {
  width: 100%;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-canvas {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: canvasGenerate 6s ease-in-out infinite;
}

.ai-canvas-inner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  opacity: 0.5;
  animation: picIcon 6s ease-in-out infinite;
}
.ai-canvas-inner::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,0.2);
  transform: rotate(45deg);
  animation: picIconShape 6s ease-in-out infinite;
}
.ai-canvas-inner::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  animation: picIconShape 6s ease-in-out infinite;
}

.ai-scanline {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(209,197,171,0.25), transparent);
  transform: skewX(-20deg);
  animation: scanPass 6s ease-in-out infinite;
}

.ai-prompt-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
}

.ai-sparkle {
  color: #d1c5ab;
  font-size: 14px;
  line-height: 1;
  animation: sparkleSpin 6s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-prompt-text {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.1);
  animation: typeText 6s ease-in-out infinite;
  transform-origin: left;
}

@keyframes scanPass {
  0%, 30% { left: -100%; opacity: 0; }
  35% { opacity: 1; }
  50%, 100% { left: 200%; opacity: 0; }
}

@keyframes canvasGenerate {
  0%, 35% {
     border-color: rgba(255,255,255,0.15);
     border-style: dashed;
     background: rgba(0,0,0,0.2);
     box-shadow: none;
  }
  45%, 85% {
     border-color: rgba(209, 197, 171, 0.4);
     border-style: solid;
     background: rgba(209, 197, 171, 0.08);
     box-shadow: 0 0 24px rgba(209, 197, 171, 0.06);
  }
  100% {
     border-color: rgba(255,255,255,0.15);
     border-style: dashed;
     background: rgba(0,0,0,0.2);
  }
}

@keyframes picIcon {
  0%, 35% { border-color: rgba(255,255,255,0.2); transform: scale(0.9); opacity: 0.4; }
  45%, 85% { border-color: #d1c5ab; transform: scale(1.15); opacity: 1; }
  100% { border-color: rgba(255,255,255,0.2); transform: scale(0.9); opacity: 0.4; }
}

@keyframes picIconShape {
  0%, 35% { background: rgba(255,255,255,0.2); box-shadow: none; }
  45%, 85% { background: #d1c5ab; box-shadow: 0 0 8px rgba(209, 197, 171, 0.5); }
  100% { background: rgba(255,255,255,0.2); box-shadow: none; }
}

@keyframes sparkleSpin {
  0%, 20% { transform: scale(1) rotate(0deg); opacity: 0.4; }
  25%, 35% { transform: scale(1.3) rotate(90deg); opacity: 1; filter: drop-shadow(0 0 6px #d1c5ab); }
  40%, 100% { transform: scale(1) rotate(90deg); opacity: 0.4; filter: none; }
}

@keyframes typeText {
  0% { width: 0%; opacity: 0; }
  10% { width: 0%; opacity: 1; }
  25%, 85% { width: 70%; opacity: 1; }
  100% { width: 70%; opacity: 0; }
}

/* ---- Doc Annotation Animation ---- */
.bento-visual--docalert {
  align-items: center;
  justify-content: center;
  padding: 8px 24px 24px;
  overflow: visible; /* let the doc panel breathe; card overflow:hidden clips it */
}

.doc-anim {
  width: 100%;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 14px 14px;
}

.doc-line {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  position: relative;
}
.doc-line--full  { width: 100%; }
.doc-line--med   { width: 72%; }
.doc-line--short { width: 45%; }

.doc-highlight-row {
  background: transparent;
  display: flex;
  align-items: center;
  height: 14px;
  gap: 8px;
}

.doc-hl {
  height: 14px;
  flex: 1;
  border-radius: 3px;
  background: rgba(209, 197, 171, 0);
  animation: docHighlight 7.2s ease-in-out infinite;
  animation-delay: var(--hl-delay, 0s);
}

.doc-label {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(209, 197, 171, 0.95);
  background: rgba(209, 197, 171, 0.1);
  border: 1px solid rgba(209, 197, 171, 0.3);
  border-radius: 999px;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(3px);
  animation: docLabel 7.2s ease-in-out infinite;
  animation-delay: var(--lbl-delay, 0s);
}

@keyframes docHighlight {
  0%    { background: rgba(209, 197, 171, 0); }
  10%   { background: rgba(209, 197, 171, 0.15); }
  55%   { background: rgba(209, 197, 171, 0.15); }
  70%   { background: rgba(209, 197, 171, 0); }
  100%  { background: rgba(209, 197, 171, 0); }
}

@keyframes docLabel {
  0%    { opacity: 0; transform: translateY(3px); }
  10%   { opacity: 1; transform: translateY(0); }
  55%   { opacity: 1; transform: translateY(0); }
  68%   { opacity: 0; transform: translateY(-2px); }
  100%  { opacity: 0; transform: translateY(3px); }
}

.bento-visual--img {
  align-items: flex-end;
  padding: 0;
}

.bento-img--agents {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

/* ---- Agent Workflow Animation ---- */
.bento-visual--workflow {
  align-items: center;
  justify-content: center;
  padding: 12px 32px 32px;
  overflow: visible;
}

.aw-ui {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 740 / 160;
  position: relative;
  background: transparent;
  border-radius: 12px;
}

.aw-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
}

/* Base Nodes */
.aw-node {
  position: absolute;
  background: var(--surface-card, #1c1c1c);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border-radius: 50%;
}

.aw-n-start    { left: 5.40%;  top: 50%;    width: 12px; height: 12px; border-color: rgba(255,255,255,0.25); }
.aw-n-plan     { left: 13.51%; top: 50%;    width: 20px; height: 20px; border-radius: 6px; }
.aw-n-search   { left: 27.02%; top: 18.75%; width: 24px; height: 24px; }
.aw-n-extract  { left: 43.24%; top: 18.75%; width: 24px; height: 24px; }
.aw-n-internal { left: 27.02%; top: 81.25%; width: 24px; height: 24px; }
.aw-n-analyze  { left: 43.24%; top: 81.25%; width: 24px; height: 24px; }
.aw-n-draft    { left: 59.45%; top: 50%;    width: 32px; height: 32px; }
.aw-n-review   { left: 75.67%; top: 50%;    width: 20px; height: 20px; border-radius: 6px; }
.aw-n-end      { left: 94.59%; top: 50%;    width: 14px; height: 14px; border-radius: 4px; }

.aw-node-icon {
  width: 16px;
  height: 16px;
  opacity: 0.8;
  border-radius: 3px;
}

/* Inner glowing elements */
.aw-node::after {
  content: '';
  position: absolute;
  background: #d1c5ab;
  border-radius: inherit;
  opacity: 0;
}
.aw-n-start::after     { width: 6px; height: 6px; animation: pN_start 10s infinite; }
.aw-n-plan::after      { width: 8px; height: 8px; animation: pN_plan 10s infinite; }
.aw-n-search::after,
.aw-n-extract::after,
.aw-n-internal::after,
.aw-n-analyze::after   { width: 10px; height: 10px; animation: pN_agents 10s infinite; }
.aw-n-draft::after     { width: 40px; height: 40px; background: transparent; animation: pN_draft 10s infinite; }
.aw-n-review::after    { width: 8px; height: 8px; animation: pN_review 10s infinite; }
.aw-n-end::after       { width: 6px; height: 6px; animation: pN_end 10s infinite; }

/* Outer agent rings */
.aw-n-draft::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(209, 197, 171, 0.5);
  opacity: 0;
  animation: pRing 10s infinite linear;
}

/* Tiny Labels */
.aw-label {
  position: absolute;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.aw-l-top { bottom: calc(100% + 6px); }
.aw-l-bot { top: calc(100% + 6px); }

/* SVG Packet Logic */
.aw-glow-paths path {
  stroke-dasharray: 20 400;
  stroke-dashoffset: 20;
  opacity: 0;
}
.aw-loop-line {
  animation: pLoopLine 1s linear infinite;
  stroke: rgba(209, 197, 171, 0.4);
}
@keyframes pLoopLine {
  to { stroke-dashoffset: -8; }
}
.aw-f1  { animation: pF1 10s infinite linear; }
.aw-f2, .aw-f3 { animation: pF23 10s infinite linear; }
.aw-f4, .aw-f5 { animation: pF45 10s infinite linear; }
.aw-f6, .aw-f7 { animation: pF67 10s infinite linear; }
.aw-f8  { animation: pF8 10s infinite linear; }
.aw-f10 { animation: pF10 10s infinite linear; }

/* === Timings (10s loop) === */
/* 0-10% : Path 1 (Start -> Plan) */
@keyframes pF1 {
  0% { stroke-dashoffset: 30; opacity: 0; }
  2% { stroke-dashoffset: 30; opacity: 1; }
  9% { stroke-dashoffset: -90; opacity: 1; }
  11%, 100% { stroke-dashoffset: -90; opacity: 0; }
}
@keyframes pN_start { 
  0%, 3% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px #d1c5ab; } 
  8%, 100% { opacity: 0; transform: scale(0.5); box-shadow: none; } 
}
@keyframes pN_plan { 
  7%, 15% { opacity: 0; transform: scale(0.5); } 
  9%, 13% { opacity: 1; transform: scale(1); box-shadow: 0 0 12px #d1c5ab; } 
  17%, 100% { opacity: 0; transform: scale(0.5); box-shadow: none; } 
}

/* 10% - 25% : Paths 2 & 3 (Plan -> Sub-agents) */
@keyframes pF23 {
  0%, 9% { stroke-dashoffset: 30; opacity: 0; }
  11% { stroke-dashoffset: 30; opacity: 1; }
  24% { stroke-dashoffset: -130; opacity: 1; }
  26%, 100% { stroke-dashoffset: -130; opacity: 0; }
}

/* 25% - 40% : Paths 4 & 5 (Sub-agents -> Extract/Analyze) */
@keyframes pN_agents {
  0%, 20% { opacity: 0; transform: scale(0.5); }
  24%, 38% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px #d1c5ab; }
  42%, 100% { opacity: 0; transform: scale(0.5); box-shadow: none; }
}
@keyframes pF45 {
  0%, 24% { stroke-dashoffset: 30; opacity: 0; }
  26% { stroke-dashoffset: 30; opacity: 1; }
  39% { stroke-dashoffset: -150; opacity: 1; }
  41%, 100% { stroke-dashoffset: -150; opacity: 0; }
}

/* 40% - 55% : Paths 6 & 7 (Merge to Draft) */
@keyframes pF67 {
  0%, 39% { stroke-dashoffset: 30; opacity: 0; }
  41% { stroke-dashoffset: 30; opacity: 1; }
  54% { stroke-dashoffset: -160; opacity: 1; }
  56%, 100% { stroke-dashoffset: -160; opacity: 0; }
}

/* 55% - 70% : Draft Node Animation */
@keyframes pN_draft {
  0%, 50% { opacity: 0; box-shadow: none; transform: scale(0.8); }
  55%, 68% { opacity: 1; box-shadow: 0 0 18px rgba(209, 197, 171, 0.5); transform: scale(1); }
  72%, 100% { opacity: 0; box-shadow: none; transform: scale(0.8); }
}
@keyframes pRing {
  0%, 48% { opacity: 0; transform: rotate(0deg); }
  53% { opacity: 1; transform: rotate(45deg); border-color: rgba(209, 197, 171, 0.8); }
  68% { opacity: 1; transform: rotate(270deg); }
  72%, 100% { opacity: 0; transform: rotate(360deg); border-color: rgba(209, 197, 171, 0.3); }
}

/* 70% - 80% : Path 8 (Draft -> Review) */
@keyframes pF8 {
  0%, 68% { stroke-dashoffset: 30; opacity: 0; }
  70% { stroke-dashoffset: 30; opacity: 1; }
  79% { stroke-dashoffset: -150; opacity: 1; }
  81%, 100% { stroke-dashoffset: -150; opacity: 0; }
}

@keyframes pN_review { 
  0%, 75% { opacity: 0; transform: scale(0.5); } 
  79%, 85% { opacity: 1; transform: scale(1); box-shadow: 0 0 12px #d1c5ab; } 
  89%, 100% { opacity: 0; transform: scale(0.5); box-shadow: none; } 
}

/* 85% - 95% : Path 10 (Review -> Done) */
@keyframes pF10 {
  0%, 84% { stroke-dashoffset: 30; opacity: 0; }
  86% { stroke-dashoffset: 30; opacity: 1; }
  94% { stroke-dashoffset: -160; opacity: 1; }
  96%, 100% { stroke-dashoffset: -160; opacity: 0; }
}

@keyframes pN_end { 
  0%, 92% { opacity: 0; transform: scale(0.5); } 
  94%, 98% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 16px #d1c5ab; } 
  100% { opacity: 0; transform: scale(0.5); box-shadow: none; } 
}


.bento-visual--video {
  padding: 0 16px 16px;
  align-items: stretch;
}

.bento-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

@media (max-width: 1024px) {
  .features-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 320px 320px;
    gap: 20px;
  }
  /* Equal 2-col, no zigzag on tablet */
  .bento-card:nth-child(1) { grid-column: 1;     grid-row: 1; }
  .bento-card:nth-child(2) { grid-column: 2;     grid-row: 1; }
  .bento-card:nth-child(3) { grid-column: 1;     grid-row: 2; }
  .bento-card:nth-child(4) { grid-column: 2;     grid-row: 2; }
}

@media (max-width: 640px) {
  /* Hide middle nodes: Extract and Analyze */
  .aw-n-extract, .aw-n-analyze {
    display: none !important;
  }
  
  /* Hide the paths connecting to and from these nodes */
  .aw-f4, .aw-f5, .aw-f6, .aw-f7 {
    display: none !important;
  }

  /* Shift all nodes to be centered by using a consistent offset */
  .aw-n-start   { left: 10%; }
  .aw-n-plan    { left: 20%; }
  .aw-n-search  { left: 36%; }
  .aw-n-internal { left: 36%; }
  .aw-n-draft   { left: 52%; }
  .aw-n-review  { left: 70%; }
  .aw-n-end     { left: 90%; }

  /* Adjust the SVG to match the centered distribution */
  .aw-svg {
    transform: scaleX(0.8);
    transform-origin: center;
  }
  
  /* Reset container to ensure proper centering with equal margins */
  .bento-visual--workflow {
    padding: 12px 16px 24px;
    margin: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  .aw-ui {
    width: 95%;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  /* Hide 'Learn more' text on mobile for bento cards */
  .bento-card .feature-link {
    display: none !important;
  }

  /* Fix Model Agnostic pills cut-off on mobile */
  .bento-visual--conveyors {
    gap: 12px;
    padding: 0;
    justify-content: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px; /* Force a minimum height so the visuals aren't squashed */
  }

  /* Shrink pills slightly to ensure they fit in the row */
  .conveyor-pill {
    padding: 5px 10px 5px 6px;
    font-size: 0.75rem;
  }

  /* Adjust icon size within pills for consistency */
  .conveyor-pill-icon {
    width: 14px;
    height: 14px;
  }

  .features-bento {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 320px);
  }
  .bento-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .bento-card:nth-child(2) { grid-column: 1; grid-row: 2; }
  .bento-card:nth-child(3) { grid-column: 1; grid-row: 3; }
  .bento-card:nth-child(4) { grid-column: 1; grid-row: 4; }
}

.feature-card-small .feature-link {
  margin-top: var(--space-sm);
  display: inline-block;
}

.feature-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.feature-title-small {
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.feature-desc-small {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .feature-row,
  .feature-row-four {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .feature-card-full .feature-card-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .feature-row,
  .feature-row-four {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   11. Use Cases by Department
   ========================================================================== */

.use-cases-section {
  padding: var(--section-padding) var(--container-padding);
  background: var(--bg-base);
}

.use-cases-container {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(min(220px, 35vw), 240px) 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* Left Vertical Tabs - Minimal elegant styling */
.use-cases-tabs-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.use-cases-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.use-cases-nav-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
  z-index: 10;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.use-cases-nav-btn:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: var(--accent);
}

.use-cases-nav-btn.prev {
  left: -44px;
}

.use-cases-nav-btn.next {
  right: -44px;
}

.use-case-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  padding-bottom: calc(var(--space-sm) + 2px);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--body-base);
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.use-case-tab .tab-label {
  flex: 1;
  transition: all 0.3s ease;
  letter-spacing: -0.01em;
}

.use-case-tab .tab-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.3s ease;
  color: var(--accent);
  font-size: 0.75rem;
  margin-left: var(--space-sm);
}

/* Progress bar indicator */
.tab-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(206, 191, 165, 0.6) 100%);
  z-index: 1;
}

.use-case-tab:hover {
  color: var(--text-secondary);
}

.use-case-tab:hover .tab-label {
  transform: translateX(4px);
}

.use-case-tab:hover .tab-arrow {
  opacity: 0.6;
  transform: translateX(0);
}

.use-case-tab.active {
  color: var(--text-primary);
}

.use-case-tab.active .tab-label {
  font-weight: 500;
  transform: translateX(4px);
}

.use-case-tab.active .tab-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* CTA button styling */
.use-case-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  margin-top: var(--space-md);
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: var(--body-base);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  position: relative;
  text-decoration: none;
}

.use-case-cta .tab-label {
  flex: 1;
  transition: all 0.3s ease;
  letter-spacing: -0.01em;
}

.use-case-cta .tab-arrow {
  opacity: 0.7;
  transform: translateX(0);
  transition: all 0.3s ease;
  font-size: 0.75rem;
  margin-left: var(--space-sm);
}

.use-case-cta:hover {
  color: var(--text-primary);
}

.use-case-cta:hover .tab-label {
  transform: translateX(4px);
}

.use-case-cta:hover .tab-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* Right Content Panels */
.use-cases-content {
  position: relative;
  min-height: 280px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--surface-card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--surface-card-border);
  box-shadow: var(--shadow-md);
}

.use-case-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.4s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--space-lg) 0;
}

.use-case-panel.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Individual background images for each department - Lazy loaded via JS for performance */
.use-case-panel[data-panel="marketing"].loaded {
  background-image: url('../media/home/marketing-dep-img.png');
}

.use-case-panel[data-panel="accounting"].loaded {
  background-image: url('../media/home/accounting-dep-img.png');
}

.use-case-panel[data-panel="operations"].loaded {
  background-image: url('../media/home/operational-dep-img.png');
}

.use-case-panel[data-panel="sales"].loaded {
  background-image: url('../media/home/sales-dep-img.png');
}

.use-case-panel[data-panel="hr"].loaded {
  background-image: url('../media/home/hr-dept.png');
}

.use-case-panel[data-panel="legal"].loaded {
  background-image: url('../media/home/legal-dept.png');
}

/* Make long bullet points slightly smaller for specific panels */
.use-case-panel[data-panel="sales"] .use-case-features li,
.use-case-panel[data-panel="hr"] .use-case-features li,
.use-case-panel[data-panel="legal"] .use-case-features li {
  font-size: var(--body-sm);
  line-height: 1.5;
}

.use-case-card {
  max-width: 500px;
  background: rgba(20, 22, 22, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-lg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  position: relative;
  overflow: hidden;
}

.use-case-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--surface-card-overlay);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.use-case-card > * {
  position: relative;
  z-index: 1;
}

.use-case-header {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.use-case-title {
  font-size: var(--heading-md);
  color: var(--text-primary);
  font-weight: 600;
  margin: 0 0 var(--space-xs) 0;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.use-case-subtitle {
  font-size: var(--body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.use-case-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.use-case-features li {
  font-size: var(--body-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  padding-left: var(--space-lg);
  position: relative;
}

.use-case-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
  font-size: 1em;
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 1024px) {
  .use-cases-container {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  
  .use-cases-tabs-wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 45px;
    margin-bottom: var(--space-md);
    position: relative;
    width: 100%;
  }

  .use-cases-nav-btn {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
  }

  .use-cases-nav-btn.prev {
    left: 5px;
  }

  .use-cases-nav-btn.next {
    right: 5px;
  }
  
  .use-cases-tabs {
    flex-direction: row;
    overflow: hidden;
    gap: 0;
    padding-bottom: 5px;
    width: 100%;
    justify-content: center;
    position: relative;
  }
  
  .use-case-tab {
    display: none;
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    border: none;
    padding: 0;
    justify-content: center;
    text-align: center;
    background: transparent;
  }

  .use-case-tab.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInTab 0.3s ease-out;
  }

  .use-case-tab .tab-label {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    transform: none !important;
    margin-bottom: 8px;
  }

  .tab-progress {
    position: relative;
    bottom: 0;
    height: 3px;
    width: 100% !important;
    max-width: 120px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    overflow: hidden;
  }

  .tab-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--progress-width, 0%);
    background: var(--accent);
    transition: width 0.1s linear;
  }

  @keyframes fadeInTab {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .use-cases-content {
    min-height: auto !important;
  }

  .use-case-panel {
    padding: var(--space-md) 0 !important;
  }

  .use-case-card {
    max-width: calc(100% - 40px) !important;
    margin: 0 auto !important;
    padding: var(--space-lg) !important;
    text-align: center;
  }

  .use-case-header {
    margin-bottom: var(--space-md) !important;
    text-align: center;
  }

  .use-case-title {
    font-size: 1.5rem !important;
    margin-bottom: var(--space-xs) !important;
  }

  .use-case-subtitle {
    font-size: 0.9rem !important;
  }

  .use-case-features {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm) !important;
  }

  .use-case-features li {
    padding-left: 0 !important;
    font-size: 0.85rem !important;
  }

  .use-case-features li::before {
    display: none; /* Hide checkmark on mobile for centered layout */
  }

  .use-case-cta {
    display: none;
  }
  
  .use-case-tab .tab-arrow {
    display: none;
  }
  
  .use-case-features {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .use-case-card {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .use-case-card {
    padding: var(--space-xl);
    margin: var(--space-lg);
  }
  
  .use-case-header {
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-lg);
  }
  
  .use-cases-content {
    min-height: 400px;
  }
}

/* ==========================================================================
   12. Automation Flow Showcase (Integrations)
   ========================================================================== */

.integration-showcase {
  padding: calc(var(--section-padding) * 1.4) var(--container-padding) var(--section-padding);
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, 
    rgba(0, 0, 0, 0.2) 0%,
    transparent 100%);
}

.showcase-container {
  max-width: var(--container-wide);
  margin: 0 auto;
  position: relative;
}

/* Automation flow layout */
.automation-flow {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 1.5rem);
  isolation: isolate;
}

.automation-flow-glow {
  display: none;
}

.automation-flow-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: min(240px, 28vw) minmax(min(340px, 100%), 400px) min(240px, 28vw);
  align-items: center;
  justify-content: center;
  gap: clamp(5rem, 8.5vw, 8.5rem);
  min-height: 460px;
}

/* SVG lines overlay */
.flow-lines-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0.95;
}

.flow-lines-svg path {
  fill: none;
  stroke: url(#agentsFlowLeftGradient); /* Fallback */
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 5;
  opacity: 0.85;
}

.left-path { stroke: url(#agentsFlowLeftGradient); }
.right-path { stroke: url(#agentsFlowRightGradient); }

.flow-lines-svg .left-path {
  stroke: url(#flowLeftGradient);
  animation: flow-dash-left 14s linear infinite;
}

.flow-lines-svg .right-path {
  stroke: url(#flowRightGradient);
  animation: flow-dash-right 14s linear infinite;
}

@keyframes flow-dash-left {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -220; }
}

@keyframes flow-dash-right {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -220; }
}

/* Pills */
.flow-column {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-width: 0;
}

.flow-inputs {
  padding-right: clamp(12px, 1.5vw, 24px);
}

.flow-outputs {
  padding-left: clamp(12px, 1.5vw, 24px);
}

/* Subtle vertical spread only — lines handle the curve */
.flow-inputs .flow-pill:nth-child(1) { transform: translateY(6px); }
.flow-inputs .flow-pill:nth-child(2) { transform: translateY(2px); }
.flow-inputs .flow-pill:nth-child(4) { transform: translateY(-2px); }
.flow-inputs .flow-pill:nth-child(5) { transform: translateY(-6px); }

.flow-outputs .flow-pill:nth-child(1) { transform: translateY(6px); }
.flow-outputs .flow-pill:nth-child(2) { transform: translateY(2px); }
.flow-outputs .flow-pill:nth-child(4) { transform: translateY(-2px); }
.flow-outputs .flow-pill:nth-child(5) { transform: translateY(-6px); }


.flow-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(15, 15, 18, 0.75) 0%,
    rgba(10, 10, 12, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Mouse-following gradient border (like feature cards) */
.flow-pill::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  padding: 1px;
  background: radial-gradient(
    300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(168, 85, 247, 0.6),
    rgba(59, 130, 246, 0.4),
    rgba(16, 185, 129, 0.3),
    transparent 50%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--gradient-opacity, 0);
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 5;
}

.flow-pill:hover {
  background: linear-gradient(135deg,
    rgba(25, 25, 30, 0.9) 0%,
    rgba(20, 20, 25, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.22);
  /* Hover effect adjusted to maintain the bend */
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.flow-inputs .flow-pill:nth-child(1):hover { transform: translateY(5px); }
.flow-inputs .flow-pill:nth-child(2):hover { transform: translateY(1px); }
.flow-inputs .flow-pill:nth-child(4):hover { transform: translateY(-3px); }
.flow-inputs .flow-pill:nth-child(5):hover { transform: translateY(-7px); }

.flow-outputs .flow-pill:nth-child(1):hover { transform: translateY(5px); }
.flow-outputs .flow-pill:nth-child(2):hover { transform: translateY(1px); }
.flow-outputs .flow-pill:nth-child(4):hover { transform: translateY(-3px); }
.flow-outputs .flow-pill:nth-child(5):hover { transform: translateY(-7px); }


.pill-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.pill-text {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.connection-dot {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  opacity: 0.95;
  filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.7));
  animation: dot-pulse 2.2s ease-in-out infinite;
}

.right-dot {
  right: -4px;
  background: rgba(96, 165, 250, 0.9);
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.85);
}

.left-dot {
  left: -4px;
  background: rgba(96, 165, 250, 0.9);
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.85);
}

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

/* Center video card */
.flow-center {
  display: flex;
  justify-content: center;
  position: relative;
}

/* Subtle glow behind video (like hero-glow but more subtle) */
.flow-video-glow {
  position: absolute;
  width: 160%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gradient-atmosphere);
  filter: blur(120px);
  opacity: 0.35;
  animation: glow-rotate 120s linear infinite;
  pointer-events: none;
  z-index: -1;
}

.flow-center-card {
  position: relative;
  width: min(400px, 100%);
  aspect-ratio: 10 / 16;
  border-radius: 16px;
  overflow: visible;
  background: transparent;
  transition: all 0.3s ease;
}

/* Mouse-following gradient border (2px, on top) */
.flow-center-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  padding: 2px;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(168, 85, 247, 0.9),
    rgba(59, 130, 246, 0.7),
    rgba(16, 185, 129, 0.5),
    transparent 40%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--gradient-opacity, 0);
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 3;
}

/* Inner container for video */
.flow-center-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(10, 10, 12, 0.65) 0%, rgba(10, 10, 12, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow-xl), inset 0 0 0 2px rgba(255, 255, 255, 0.02);
  z-index: 2;
}

.flow-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none;
  opacity: 1;
}

.flow-video-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

.agent-task-input {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background: rgba(10, 10, 12, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: min(360px, calc(100% - 40px));
  max-width: calc(100% - 40px);
  min-width: min(240px, calc(100% - 40px));
  z-index: 3;
}

.agent-task-input .task-text {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  letter-spacing: -0.01em;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Reserve a little room for the cursor, but allow more text */
  max-width: calc(100% - 12px);
}

/* Responsive */
@media (max-width: 1280px) {
  .automation-flow-grid {
    grid-template-columns: min(230px, 28vw) minmax(min(340px, 100%), 400px) min(230px, 28vw);
    gap: clamp(44px, 4.5vw, 68px);
  }
  .flow-center-card {
    width: min(380px, 100%);
  }
}

@media (max-width: 1024px) {
  .automation-flow {
    padding-left: 0;
    padding-right: 0;
  }
  .automation-flow-grid {
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    gap: 12px;
    min-height: auto;
    padding: 0;
    align-items: center;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    justify-items: center;
  }
  .flow-lines-svg {
    display: block;
    opacity: 1;
    z-index: 5;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
  }
  .flow-column {
    flex-direction: column;
    gap: 0.95rem;
    justify-content: center;
    width: 60px;
    z-index: 10;
  }
  .flow-inputs {
    margin-right: -8px;
  }
  .flow-outputs {
    margin-left: -8px;
  }
  .flow-pill {
    width: 60px;
    min-height: 64px;
    padding: 7px 2px;
    min-width: 0;
    background: rgba(10, 10, 12, 0.98);
    border-radius: 6px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    flex-direction: column;
    gap: 2px;
  }
  .pill-text {
    font-size: 0.5rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%;
    color: #fff;
    letter-spacing: -0.01em;
  }
  .pill-icon {
    width: 14px;
    height: 14px;
    font-size: 0.65rem;
    border: none;
    background: transparent;
    padding: 0;
  }
  .connection-dot {
    display: block;
    width: 4px;
    height: 4px;
  }
  .right-dot { right: -2px; }
  .left-dot { left: -2px; }

  .flow-center {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .flow-center-card {
    width: 100%;
    max-width: 300px; /* Still big but balanced */
    margin: 0;
    aspect-ratio: 10 / 16;
  }
  .agent-task-input {
    padding: 5px 8px;
    bottom: 15px;
    width: calc(100% - 20px);
    height: auto;
    min-height: 30px;
    background: rgba(10, 10, 12, 0.95);
  }
  .agent-task-input .task-text {
    font-size: 0.75rem;
  }
}

@media (max-width: 540px) {
  .agent-task-input {
    height: 42px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   11b. PRICING CALCULATOR (vs. scattered tools)
   ========================================================================== */

.calc-section {
  padding: var(--section-padding) var(--container-padding);
  background: var(--bg-deep);
}

.calc-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

/* Header */
.calc-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

/* Bento grid — mirrors .features-bento row 1 pattern */
.calc-bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
}

.calc-card:nth-child(1) { grid-column: 1 / 3; }
.calc-card:nth-child(2) { grid-column: 3; }

/* Both calc cards inherit .feature-card + .bento-card — override min-height */
.calc-card {
  min-height: 0 !important;
  padding: 1.6rem !important;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.calc-bento-head {
  padding: 0 !important;
}

/* ---- LEFT CARD: Without DIMA ---- */
.calc-card--without {
  background: rgba(10, 11, 14, 0.96);
}

.calc-card--without .calc-tools-list {
  gap: 0.24rem;
}

.calc-card--without .calc-tool-row {
  padding: 0.5rem 0.75rem;
  border-radius: 9px;
}

.calc-card--without .calc-tool-info {
  gap: 0.55rem;
}

.calc-card--without .calc-tool-icon,
.calc-card--without .calc-tool-icon--emoji {
  width: 19px;
  height: 19px;
}

.calc-card--without .calc-tool-text {
  gap: 0.02rem;
}

.calc-card--without .calc-tool-name {
  font-size: 0.78rem;
  line-height: 1.15;
}

.calc-card--without .calc-tool-rate {
  font-size: 0.62rem;
}

.calc-card--without .calc-tool-amount {
  font-size: 0.84rem;
}

.calc-card--without .calc-tool-row--more .calc-tool-rate {
  max-width: 24ch;
}

/* Team size control */
.calc-team-control {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.calc-team-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
}

.calc-stepper {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.calc-step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  user-select: none;
}

.calc-step-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.calc-step-btn:active {
  transform: scale(0.92);
}

.calc-team-num {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  min-width: 2ch;
  text-align: center;
  transition: transform 0.12s ease;
}

.calc-team-num.is-bumping {
  transform: scale(1.18);
}

/* Slider */
.calc-slider {
  flex: 1;
  min-width: 80px;
  height: 4px;
  border-radius: 2px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--track-pct, 8%),
    rgba(255, 255, 255, 0.1) var(--track-pct, 8%),
    rgba(255, 255, 255, 0.1) 100%
  );
  cursor: pointer;
  outline: none;
}

.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0a0b0e;
  box-shadow: 0 0 0 3px rgba(212, 197, 171, 0.15);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  cursor: grab;
}

.calc-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.2);
}

.calc-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0a0b0e;
  cursor: grab;
}

/* Tool rows */
.calc-tools-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.calc-tool-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.62rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.015);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.calc-tool-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.calc-tool-row.is-changing {
  transform: translateX(4px);
  border-color: rgba(248, 113, 113, 0.14);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.04);
}

.calc-tool-row--more {
  background: rgba(239, 68, 68, 0.035);
  border-color: rgba(239, 68, 68, 0.1);
}

.calc-tool-row--more .calc-tool-name {
  color: rgba(248, 113, 113, 0.92);
}

.calc-tool-row--more .calc-tool-rate {
  color: rgba(255, 255, 255, 0.34);
}

.calc-tool-amount--more {
  color: rgba(248, 113, 113, 0.9);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.calc-tool-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.calc-tool-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 5px;
  opacity: 0.7;
  flex-shrink: 0;
}

.calc-tool-icon--emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 0.85rem;
  flex-shrink: 0;
  opacity: 0.65;
}

.calc-tool-text {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.calc-tool-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.2;
}

.calc-tool-rate {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.03em;
}

.calc-tool-amount {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(248, 113, 113, 0.7);
  white-space: nowrap;
  will-change: transform, opacity;
}

/* Total row */
.calc-without-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.14);
  margin-top: auto;
}

.calc-footer-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.28);
}

.calc-without-total {
  font-size: 1.25rem;
  font-weight: 800;
  color: #f87171;
  letter-spacing: -0.03em;
  will-change: transform, opacity;
}

.calc-without-footer.is-changing {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -18px rgba(239, 68, 68, 0.35);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

/* ---- RIGHT CARD: With DIMA ---- */
.calc-card--with {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(212, 197, 171, 0.12), transparent 60%),
    rgba(10, 11, 14, 0.96);
  box-shadow:
    0 24px 60px -24px rgba(212, 197, 171, 0.18),
    inset 0 0 0 1px rgba(212, 197, 171, calc(0.14 - 0.06 * var(--gradient-opacity, 0))),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.calc-tag--dima {
  background: rgba(212, 197, 171, 0.1) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(212, 197, 171, 0.2) !important;
}

/* Plan selector buttons */
.calc-dima-plans {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.calc-dima-plan {
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
}

.calc-dima-plan:hover:not(.is-active) {
  border-color: rgba(212, 197, 171, 0.15);
  background: rgba(255, 255, 255, 0.035);
}

.calc-dima-plan:active {
  transform: scale(0.985);
}

.calc-dima-plan.is-active {
  border-color: rgba(212, 197, 171, 0.38);
  background: rgba(212, 197, 171, 0.07);
  box-shadow: inset 0 1px 0 rgba(212, 197, 171, 0.08);
}

.calc-dima-plan.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.06) 35%, transparent 70%);
  transform: translateX(-120%);
  animation: calc-plan-sheen 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.calc-dima-plan.is-disabled {
  opacity: 0.45;
  filter: saturate(0.55);
}

.calc-dima-plan.is-disabled .calc-plan-name,
.calc-dima-plan.is-disabled .calc-plan-includes li,
.calc-dima-plan.is-disabled .calc-plan-period {
  color: rgba(255, 255, 255, 0.24);
}

.calc-dima-plan.is-auto-switched {
  box-shadow: 0 0 0 1px rgba(212, 197, 171, 0.16), 0 16px 34px -22px rgba(212, 197, 171, 0.4);
}

.calc-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calc-plan-name {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
}

.calc-dima-plan.is-active .calc-plan-name {
  color: var(--accent);
}

.calc-plan-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
}

.calc-plan-period {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0;
  margin-left: 1px;
}

.calc-plan-includes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.calc-plan-includes li {
  font-size: 0.73rem;
  color: rgba(255, 255, 255, 0.4);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.4;
}

.calc-plan-includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-size: 0.65rem;
  color: var(--accent);
  opacity: 0.65;
}

.calc-dima-plan.is-active .calc-plan-includes li {
  color: rgba(255, 255, 255, 0.65);
}

/* Savings block */
.calc-savings-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.75rem;
  border-radius: 14px;
  background: rgba(74, 222, 128, 0.05);
  border: 1px solid rgba(74, 222, 128, 0.15);
  gap: 0.2rem;
  margin-top: auto;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.calc-savings-block.is-changing {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 16px 34px -24px rgba(74, 222, 128, 0.38);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.calc-savings-block.is-neutral {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.07);
}

.calc-savings-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(74, 222, 128, 0.6);
  font-weight: 700;
}

.calc-savings-block.is-neutral .calc-savings-label {
  color: rgba(255, 255, 255, 0.25);
}

.calc-savings-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #4ade80;
  letter-spacing: -0.04em;
  line-height: 1.1;
  display: block;
  will-change: transform, opacity;
}

.calc-savings-block.is-neutral .calc-savings-num {
  color: rgba(255, 255, 255, 0.4);
}

.calc-savings-note {
  font-size: 0.66rem;
  color: rgba(74, 222, 128, 0.5);
  text-align: center;
  max-width: 160px;
  line-height: 1.3;
}

.calc-savings-block.is-neutral .calc-savings-note {
  color: rgba(255, 255, 255, 0.25);
}

.calc-plan-rule {
  display: block;
  font-size: 0.67rem;
  line-height: 1.45;
  text-align: center;
  color: rgba(255, 255, 255, 0.38);
  max-width: 28ch;
  margin: -0.2rem auto 0;
  transition: color 0.28s ease, transform 0.28s ease;
}

.calc-plan-rule.is-emphasized {
  color: rgba(212, 197, 171, 0.78);
  transform: translateY(-1px);
}

@keyframes calc-plan-sheen {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}

/* CTA inside right card */
.comp-cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.88rem 1.5rem;
  border-radius: 14px;
  background: var(--accent);
  color: var(--bg-void);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: filter 0.2s ease, transform 0.2s ease;
  position: relative;
  z-index: 4;
}

.comp-cta-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .calc-bento {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .calc-card:nth-child(1) { grid-column: 1 / 3; }
  .calc-card:nth-child(2) { grid-column: 1 / 3; }
}

@media (max-width: 768px) {
  .calc-section {
    padding: calc(var(--section-padding) * 0.65) var(--container-padding);
  }

  .calc-bento {
    grid-template-columns: 1fr;
  }

  .calc-card:nth-child(1),
  .calc-card:nth-child(2) {
    grid-column: 1;
  }

  .calc-team-control {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .calc-slider {
    width: 100%;
    flex-basis: 100%;
  }
}

@media (max-width: 480px) {
  .calc-card {
    padding: 1.15rem !important;
    gap: 0.85rem;
  }
}



/* ==========================================================================
   12. Integrations Carousel
   ========================================================================== */

.integrations-carousel {
  padding: var(--section-padding) var(--container-padding) var(--section-padding) var(--container-padding);
  overflow: hidden;
}

.integrations-carousel .integrations-header {
  max-width: var(--container-wide);
  margin: 0 auto calc(var(--space-2xl) + var(--space-lg)) auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.integrations-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.integrations-description {
  font-size: var(--body-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

@media (max-width: 1024px) {
  .integrations-carousel .integrations-header {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.carousel-wrapper {
  position: relative;
  margin: 0 calc(-1 * var(--container-padding));
  max-width: 100vw;
  overflow: hidden;
}

.carousel-wrapper::before,
.carousel-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 5;
  pointer-events: none;
}

.carousel-wrapper::before {
  left: 0;
  background: linear-gradient(90deg, 
    rgba(0, 0, 0, 1) 0%, 
    rgba(0, 0, 0, 0.8) 30%,
    rgba(0, 0, 0, 0) 100%);
}

.carousel-wrapper::after {
  right: 0;
  background: linear-gradient(270deg, 
    rgba(0, 0, 0, 1) 0%, 
    rgba(0, 0, 0, 0.8) 30%,
    rgba(0, 0, 0, 0) 100%);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 197, 171, 0.15);
  color: var(--text-primary);
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 10;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(212, 197, 171, 0.3);
  transform: translateY(-50%) scale(1.05);
}

.carousel-prev {
  left: var(--container-padding);
}

.carousel-next {
  right: var(--container-padding);
}

.carousel-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-md) var(--container-padding);
}

.carousel-scroll::-webkit-scrollbar {
  display: none;
}

.carousel-track {
  display: flex;
  gap: var(--space-lg);
  width: max-content;
}

.carousel-card {
  flex: 0 0 auto;
  width: 380px;
  background: var(--surface-card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  box-shadow: var(--shadow-md);
}

.carousel-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--surface-card-overlay);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.carousel-card > * {
  position: relative;
  z-index: 1;
}

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

.carousel-visual {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.8) 0%, rgba(20, 20, 20, 0.6) 100%);
}

.carousel-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--body-lg);
  font-weight: 500;
  color: var(--text-secondary);
  background: linear-gradient(135deg, 
    rgba(206, 191, 165, 0.06) 0%, 
    rgba(206, 191, 165, 0.02) 100%);
}

.carousel-content {
  padding: var(--space-md) var(--space-lg);
  background: rgba(0, 0, 0, 0.10);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.carousel-label {
  display: block;
  font-size: var(--body-xs);
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.carousel-title {
  font-size: var(--body-lg);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

@media (max-width: 1024px) {
  .carousel-card {
    width: 360px;
  }
}

@media (max-width: 768px) {
  .carousel-card {
    width: 320px;
  }
  
  .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  
  .carousel-prev {
    left: var(--space-sm);
  }
  
  .carousel-next {
    right: var(--space-sm);
  }

  /* Mobile: always snap a single card perfectly centered */
  .carousel-scroll {
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    /* Remove side padding so "center" is true screen center */
    padding-left: 0;
    padding-right: 0;
  }

  .carousel-track {
    /* Allow first/last card to center (and keeps centering stable) */
    padding-left: calc((100vw - 320px) / 2);
    padding-right: calc((100vw - 320px) / 2);
  }

  .carousel-card {
    scroll-snap-align: center;
  }

  .agents-carousel-wrapper .carousel-scroll {
    padding-left: max(var(--container-padding), calc((100% - 236px) / 2));
    padding-right: max(var(--container-padding), calc((100% - 236px) / 2));
  }

  .agents-carousel-wrapper .carousel-track {
    gap: 0.8rem;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 560px) {
  .agents-carousel-wrapper::before,
  .agents-carousel-wrapper::after {
    width: 36px;
  }

  .agents-carousel-wrapper .carousel-scroll {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
}

/* WP Carousel States */
.carousel-loading,
.carousel-empty-state,
.carousel-error-state {
  width: 100%;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-align: center;
  min-height: 200px;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(206, 191, 165, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: var(--space-md);
}

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

/* ==========================================================================
   12. Asymmetric Showcase Section (DEPRECATED - keeping for reference)
   ========================================================================== */

.showcase {
  padding: var(--section-padding) var(--container-padding);
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.showcase-visual {
  position: relative;
}

.showcase-visual img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
}

.showcase-glow {
  position: absolute;
  inset: -50px;
  background: var(--gradient-atmosphere);
  filter: blur(100px);
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}

/* Showcase placeholder */
.showcase-placeholder {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--body-sm);
}

.showcase-content {
  background: var(--bg-surface);
  padding: var(--space-xl);
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
}

.showcase-desc {
  font-size: var(--body-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.showcase-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.showcase-features li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--body-sm);
  color: var(--text-secondary);
}

.showcase-features .check {
  color: var(--accent);
  font-weight: 600;
}

/* Flipped variant */
.showcase.showcase-flipped {
  grid-template-columns: 1fr 1.5fr;
}

.showcase.showcase-flipped .showcase-visual {
  order: 2;
}

.showcase.showcase-flipped .showcase-content {
  order: 1;
}

@media (max-width: 1024px) {
  .showcase,
  .showcase.showcase-flipped {
    grid-template-columns: 1fr;
  }
  
  .showcase-visual,
  .showcase.showcase-flipped .showcase-visual {
    order: 1;
  }
  
  .showcase-content,
  .showcase.showcase-flipped .showcase-content {
    order: 2;
  }
}

/* ==========================================================================
   10. Capabilities Section
   ========================================================================== */

.capabilities {
  padding: var(--section-padding) var(--container-padding);
  max-width: var(--container-max);
  margin: 0 auto;
}

.capabilities-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.capabilities-list {
  display: flex;
  flex-direction: column;
}

.capability {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  position: relative;
}

.capability-number {
  font-size: var(--heading-lg);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: var(--tracking-tight);
}

.capability-content {
  padding-right: var(--space-xl);
}

.capability-title {
  font-size: var(--heading-md);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.capability-desc {
  font-size: var(--body-base);
  color: var(--text-secondary);
  max-width: 60ch;
}

.capability-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-subtle);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.8s var(--ease-out-expo);
}

.capability.is-visible .capability-line {
  transform: scaleX(1);
}

@media (max-width: 640px) {
  .capability {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  
  .capability-number {
    font-size: var(--heading-md);
  }
}

/* ==========================================================================
   12. Integration Ecosystem Section
   ========================================================================== */

.integrations {
  padding: var(--section-padding) var(--container-padding);
  text-align: center;
}

.integrations .integrations-header {
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
}

.integrations-visual {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.integration-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--text-primary);
  z-index: 2;
}

.integration-orbit {
  position: absolute;
  inset: 0;
}

.integration-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  transform: rotate(var(--angle)) translateX(150px) rotate(calc(-1 * var(--angle)));
  background: var(--bg-surface);
  border: 1px solid var(--border-visible);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-medium);
  transition-delay: var(--delay);
}

.integration-node.is-visible {
  opacity: 1;
}

.integration-node img,
.integration-node svg {
  width: 24px;
  height: 24px;
  filter: grayscale(1) brightness(0.8);
}

/* Integration placeholder */
.integration-node-placeholder {
  width: 24px;
  height: 24px;
  background: var(--border-subtle);
  border-radius: 4px;
}

/* Connecting lines */
.integration-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.integration-lines line {
  stroke: var(--border-subtle);
  stroke-width: 1;
}

/* Alternative simpler grid layout */
.integrations-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
}

.integrations-grid .integration-node {
  position: relative;
  top: auto;
  left: auto;
  margin: 0;
  transform: none;
  opacity: 1;
}

@media (max-width: 640px) {
  .integration-node {
    transform: rotate(var(--angle)) translateX(100px) rotate(calc(-1 * var(--angle)));
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
  }
  
  .integration-hub {
    width: 60px;
    height: 60px;
    font-size: var(--body-xs);
  }
}

/* ==========================================================================
   12. Closing CTA Section
   ========================================================================== */

.closing {
  padding: var(--section-padding) var(--container-padding);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
}

.closing-atmosphere {
  position: absolute;
  inset: -70px;
  background: var(--gradient-atmosphere);
  filter: blur(142px);
  opacity: 0.35;
  pointer-events: none;
  will-change: transform, filter;
}

.closing-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.closing-label {
  display: inline-block;
  font-size: var(--body-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-md);
  padding: 6px 14px;
  border: 1px solid rgba(212, 197, 171, 0.18);
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(212, 197, 171, 0.06) 0%, rgba(212, 197, 171, 0.02) 100%);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.closing-headline {
  font-size: var(--display-section);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  font-weight: 500;
}

.closing-sub {
  font-size: var(--body-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
  line-height: var(--leading-normal);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.closing-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}


/* ==========================================================================
   15. Footer
   ========================================================================== */

.footer {
  background: var(--bg-void);
  padding: var(--space-2xl) var(--container-padding) var(--space-xl);
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2xl);
  max-width: var(--container-max);
  margin: 0 auto var(--space-xl);
}

.footer-brand {
  max-width: 250px;
}

.footer-logo {
  font-size: var(--heading-sm);
  font-weight: 600;
  color: var(--text-primary);
  display: inline-block;
  margin-bottom: var(--space-sm);
  transition: color var(--transition-fast);
}

.footer-logo:hover {
  color: var(--accent);
}

.footer-tagline {
  font-size: var(--body-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
}

.footer-backed {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-backed-label {
  font-size: var(--body-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-backed-logo {
  max-width: 48px;
  height: auto;
  opacity: 0.9;
  transition: opacity var(--transition-fast);
}

.footer-backed-logo:hover {
  opacity: 1;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.footer-col h4 {
  font-size: var(--body-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.footer-col a {
  display: block;
  font-size: var(--body-sm);
  color: var(--text-tertiary);
  padding: var(--space-xs) 0;
  transition: color var(--transition-fast);
}

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

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--body-sm);
  color: var(--text-muted);
}

.footer-legal {
  display: flex;
  gap: var(--space-md);
}

.footer-legal a {
  color: var(--text-tertiary);
  transition: color var(--transition-fast);
}

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

@media (max-width: 768px) {
  .footer {
    padding-top: calc(var(--space-2xl) / 2) !important;
  }

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

  .footer-tagline {
    max-width: 100% !important;
  }

  .footer-brand {
    max-width: 100% !important;
  }
  
  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
}

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

/* ==========================================================================
   14. Animation States
   ========================================================================== */

/* Base state - hidden */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: 
    opacity 0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
}

/* Revealed state */
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scale variant */
[data-animate="scale"] {
  opacity: 0;
  transform: scale(0.95);
}

[data-animate="scale"].is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Fade variant */
[data-animate="fade"] {
  opacity: 0;
  transform: none;
}

[data-animate="fade"].is-visible {
  opacity: 1;
}

/* Stagger children */
[data-animate-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-animate-stagger].is-visible > *:nth-child(2) { transition-delay: 100ms; }
[data-animate-stagger].is-visible > *:nth-child(3) { transition-delay: 150ms; }
[data-animate-stagger].is-visible > *:nth-child(4) { transition-delay: 200ms; }
[data-animate-stagger].is-visible > *:nth-child(5) { transition-delay: 250ms; }
[data-animate-stagger].is-visible > *:nth-child(6) { transition-delay: 300ms; }

[data-animate-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   17. Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero-glow,
  .closing-atmosphere {
    animation: none;
  }
}

/* ==========================================================================
   16. Utility Classes
   ========================================================================== */

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

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

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Mobile Overflow Prevention
   ========================================================================== */

@media (max-width: 768px) {
  /* Ensure no element causes horizontal scroll */
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative;
  }
  
  /* Constrain major containers without triggering nested scrollbars */
  .hero-grid,
  .platform-tabs,
  .platform-panel,
  .feature-row,
  .features-showcase,
  .use-cases-container,
  .integrations-carousel,
  .carousel-wrapper {
    max-width: 100vw !important;
  }
  
  /* Fix grid layouts that might overflow */
  .hero-grid {
    grid-template-columns: 1fr !important;
    padding: 0 var(--space-md) !important;
  }
  
  .use-cases-container {
    grid-template-columns: 1fr !important;
  }
  
  /* Platform tabs - ensure centered and scrollable */
  .platform-tabs {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: auto !important; /* This one is allowed for functionality */
  }
  
  .platform-tab {
    min-width: 28vw !important;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   Gradient Border Effect - Reusable Utility
   ========================================================================== */

.gradient-border-effect {
  position: relative;
}

.gradient-border-effect::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(168, 85, 247, 0.8),
    rgba(59, 130, 246, 0.6),
    rgba(16, 185, 129, 0.4),
    transparent 50%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--gradient-opacity, 0);
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   Chat Page Specific Styles
   ========================================================================== */

/* ==========================================================================
   Chat Capabilities (imagen.html one-to-one structure)
   NOTE: Uses the same class names as imagen.html capability blocks.
   ========================================================================== */

.mediagen-capabilities.chat-capabilities {
  padding: var(--space-2xl) 0;
}

/* Agent Automation Standalone - Centered Layout */
.chat-agent-standalone {
  padding: var(--space-2xl) 0;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 15, 0.25) 100%);
}

.agent-standalone-centered {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.agent-header {
  text-align: center;
  max-width: 700px;
}

.agent-header .section-label {
  display: block;
  margin-bottom: var(--space-sm);
}

.agent-header .section-headline {
  margin-bottom: var(--space-md);
}

.agent-header .section-sub {
  margin: 0;
}

.agent-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.agent-video-glow {
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gradient-atmosphere);
  filter: blur(100px);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.agent-video-wrapper .platform-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: visible;
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Gradient border - same as flow-center-card */
.agent-video-wrapper .platform-frame::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  padding: 2px;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(168, 85, 247, 0.9),
    rgba(59, 130, 246, 0.7),
    rgba(16, 185, 129, 0.5),
    transparent 40%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--gradient-opacity, 0);
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 3;
}

/* Inner video container */
.agent-video-wrapper .platform-frame .platform-img {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow-xl), inset 0 0 0 2px rgba(255, 255, 255, 0.02);
}

.agent-video-wrapper .platform-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

.agent-cta-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
  width: 100%;
}

.agent-benefits-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  width: 100%;
  margin-top: var(--space-md);
}

.agent-benefit-card {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xs);
}

.agent-benefit-card h4 {
  font-size: var(--body-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.agent-benefit-card p {
  font-size: var(--body-sm);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
}

@media (max-width: 1024px) {
  .agent-benefits-cards {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  
  .agent-video-wrapper {
    max-width: 100%;
  }
}

.chat-capabilities .capabilities-container {
  max-width: 100%;
  padding: 0;
}

.chat-capabilities .capabilities-container .platform-header {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.chat-capabilities .capability-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-2xl) * 1.5);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-2xl) clamp(32px, 5vw, 80px);
  border-bottom: 1px solid var(--border-subtle);
}

.chat-capabilities .capability-block:last-child {
  border-bottom: none;
}

.chat-capabilities .capability-reverse {
  direction: rtl;
}

.chat-capabilities .capability-reverse > * {
  direction: ltr;
}

.chat-capabilities .capability-visual {
  position: relative;
  max-width: 480px;
}

.chat-capabilities .capability-visual .platform-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.chat-capabilities .capability-visual .platform-frame > img,
.chat-capabilities .capability-visual .platform-frame > video,
.chat-capabilities .capability-visual .platform-frame > .chat-capability-split {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.chat-capabilities .capability-visual .platform-frame > .platform-img,
.chat-capabilities .capability-visual .platform-frame > .chat-capability-split {
  width: 100%;
  height: 100%;
  display: block;
}

.chat-capabilities .capability-visual .platform-img {
  height: 100%;
  border-radius: inherit;
}

.chat-capabilities .capability-visual video.platform-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chat-capabilities .capability-content {
  position: relative;
}

.chat-capabilities .capability-number {
  font-size: var(--body-lg);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.1em;
}

.chat-capabilities .capability-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
}

.chat-capabilities .capability-desc {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-md);
}

.chat-capabilities .capability-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.chat-capabilities .capability-features li {
  font-size: var(--body-sm);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
  padding-left: 20px;
  position: relative;
}

.chat-capabilities .capability-features li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 1.2em;
  line-height: 1;
}

/* Data Everywhere visual: two screenshots in one frame */
.chat-capability-split {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  padding: 0;
  border: none;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.chat-capability-split img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.22);
}

@media (max-width: 1200px) {
  .chat-capabilities .capability-block {
    gap: var(--space-xl);
    padding: var(--space-2xl) var(--container-padding);
  }
}

@media (max-width: 1024px) {
  .chat-capabilities .capability-block {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--container-padding);
  }

  .chat-capabilities .capability-reverse {
    direction: ltr;
  }
}

/* Chat RAG Section */
.chat-rag-section {
  padding: var(--section-padding) 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  position: relative;
}

.chat-rag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  margin-top: var(--space-2xl);
}

.chat-rag-visual {
  position: relative;
  width: 100%;
}

.chat-rag-cards-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.chat-rag-cards-vertical .feature-card {
  min-height: auto;
}

@media (max-width: 1024px) {
  .chat-rag-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .chat-rag-visual {
    max-width: 500px;
    margin: 0 auto;
  }
}

/* Chat Integrations Section */
.chat-integrations-section {
  padding: var(--section-padding) 0;
  background: transparent;
  position: relative;
}

.chat-integrations-section .platform-header {
  margin-bottom: var(--space-2xl);
}

.chat-integrations-section .feature-row {
  max-width: var(--container-wide);
  margin: 0 auto;
}

/* Center images vertically in chat-integrations-section only */
.chat-integrations-section .feature-visual {
  align-items: center;
  margin-bottom: 0;
  height: 300px;
}

.chat-integrations-section .feature-visual img {
  object-fit: contain;
  object-position: center center;
}

/* Chat Agent Video: Centered with Glow */
.chat-agent-video-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
}

/* Chat Agent Section: Two-column layout (text left, video right) */
.features-grid--chat-agent .features-showcase.chat-agent-layout {
  display: grid;
  grid-template-columns: minmax(320px, 520px) 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.features-grid--chat-agent .chat-agent-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.features-grid--chat-agent .features-header {
  text-align: left;
  max-width: none;
  margin: 0;
}

.features-grid--chat-agent .chat-agent-video-wrapper {
  max-width: none;
  margin: 0;
  justify-content: flex-end;
}

.features-grid--chat-agent .chat-agent-video-wrapper .platform-frame {
  width: 100%;
}

.features-grid--chat-agent .chat-agent-benefits {
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.chat-agent-glow {
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gradient-atmosphere);
  filter: blur(100px);
  opacity: 0.35;
  animation: glow-rotate 120s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.chat-agent-video-wrapper .platform-frame {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 1;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Mouse-following gradient border like flow-center-card */
.chat-agent-video-wrapper .platform-frame::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  padding: 2px;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(168, 85, 247, 0.9),
    rgba(59, 130, 246, 0.7),
    rgba(16, 185, 129, 0.5),
    transparent 40%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--gradient-opacity, 0);
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 10;
}

.chat-agent-video-wrapper .platform-frame video {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
}

/* Chat Agent Benefits Grid */
.chat-agent-benefits {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0;
  gap: var(--space-md);
}

@media (max-width: 1024px) {
  .features-showcase .chat-agent-video-wrapper {
    max-width: 100%;
    margin-left: calc(var(--space-md) * -1);
    margin-right: calc(var(--space-md) * -1);
    width: calc(100% + (var(--space-md) * 2));
  }
  
  .chat-agent-benefits {
    grid-template-columns: 1fr;
  }

  .features-grid--chat-agent .features-showcase.chat-agent-layout {
    grid-template-columns: 1fr;
  }

  .features-grid--chat-agent .chat-agent-video-wrapper {
    margin-top: var(--space-lg);
  }
}

/* Better Section Spacing for Chat Page - Reduced Bulk */
.chat-rag-section {
  padding: calc(var(--section-padding) * 0.85) 0;
}

.chat-integrations-section {
  padding: calc(var(--section-padding) * 0.75) 0;
}

.features-grid--chat-agent + .chat-integrations-section {
  padding-top: calc(var(--section-padding) * 0.85);
}

.chat-integrations-section + .chat-rag-section {
  padding-top: calc(var(--section-padding) * 0.85);
}

/* Ensure consistent max-widths */
.features-showcase {
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
}

/* Chat Page - Reduced Bulkiness & Better Information Density */
.chat-rag-section .platform-header,
.chat-integrations-section .platform-header {
  margin-bottom: calc(var(--space-xl) * 0.85);
}

/* Lighter backgrounds for better visual hierarchy */
.chat-rag-section {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
}

/* Feature List inside Cards */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.feature-list li {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  padding-left: 1.5rem;
  position: relative;
  display: flex;
  align-items: flex-start;
}

.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(59, 130, 246, 0.8);
  font-weight: 600;
  font-size: 0.875rem;
}

/* Use Case Pills - Using stat-card base styling */
.use-case-pills {
  max-width: 900px;
  margin: 0 auto;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  align-items: center;
}

.use-case-pill {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  min-width: 140px;
  /* stat-card class provides: background, border, gradient effect, shadows, transitions */
}

.pill-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.pill-desc {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* Large feature cards also using stat-card base */
.stat-card.feature-card-large {
  min-height: auto;
  padding: var(--space-lg) var(--space-xl);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stat-card.feature-card-large .feature-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stat-card.feature-card-large .feature-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: var(--space-md);
  opacity: 0.9;
  display: block;
}

.stat-card.feature-card-large .feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: var(--space-sm);
  margin-top: var(--space-xs);
}

.stat-card.feature-card-large .feature-desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
  max-width: 90%;
}

@media (max-width: 768px) {
  .pill-row {
    gap: var(--space-xs);
    justify-content: flex-start;
  }
  
  .use-case-pill {
    min-width: calc(50% - var(--space-xs) / 2);
    max-width: calc(50% - var(--space-xs) / 2);
    flex: 0 0 calc(50% - var(--space-xs) / 2);
    padding: var(--space-xs) var(--space-sm);
  }
  
  /* Last pill spans full width */
  .use-case-pill:last-child {
    min-width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  
  .pill-label {
    font-size: 0.875rem;
  }
  
  .pill-desc {
    font-size: 0.6875rem;
  }
  
  .feature-list {
    font-size: 0.8125rem;
  }
  
  .stat-card.feature-card-large {
    padding: var(--space-lg);
  }
  
  .stat-card.feature-card-large .feature-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md);
    margin-top: 0;
  }
  
  .stat-card.feature-card-large .feature-title {
    font-size: 1.125rem;
    margin-top: var(--space-xs);
  }
  
  .stat-card.feature-card-large .feature-desc {
    font-size: 0.875rem;
    max-width: 100%;
  }
}

/* ==========================================================================
   Mobile & Tablet Responsiveness Overrides
   ========================================================================== */

@media (max-width: 768px) {
  /* Hero & Section Spacing */
  .hero {
    padding-top: calc(var(--nav-height) + var(--space-lg));
    padding-bottom: var(--space-lg);
  }

  body:has(.top-notification-bar) .hero {
    padding-top: calc(var(--notification-bar-height) + var(--nav-height) + var(--space-lg));
  }
  
  .platform-overview,
  .chat-rag-section,
  .chat-integrations-section,
  .features-grid,
  .use-cases-section,
  .problem-section,
  .chat-agent-standalone,
  .mediagen-capabilities {
    padding-top: calc(var(--section-padding) * 0.5);
    padding-bottom: calc(var(--section-padding) * 0.5);
  }
  
  .platform-overview .platform-header {
    margin-bottom: var(--space-md);
  }
  
  .section-headline {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  /* Feature Grid Tablets */
  .feature-row {
    grid-template-columns: 1fr;
  }

  .feature-card {
    min-height: auto;
    text-align: center;
    padding: var(--space-lg); /* Tablet padding */
  }

  .feature-card .feature-content {
    margin-bottom: var(--space-sm) !important;
  }

  /* Specific fix for the 3rd card's oversized spacing */
  .feature-card-full .feature-content {
    margin-bottom: 0 !important;
  }

  .feature-card-full .feature-link {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
  }

  .feature-card-full .feature-card-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-lg);
    gap: 0 !important; 
  }

  /* Universal Visual Positioning for Tablets */
  .feature-visual {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    width: calc(100% + (var(--space-lg) * 2)) !important;
    margin-left: calc(var(--space-lg) * -1) !important;
    margin-right: calc(var(--space-lg) * -1) !important;
    margin-bottom: calc(var(--space-lg) * -1) !important;
    margin-top: var(--space-sm) !important; /* Reduced from lg */
    height: auto !important;
    min-height: 200px !important;
    overflow: visible !important;
    position: relative !important;
  }
  
  /* Center images in chat-integrations on tablets */
  .chat-integrations-section .feature-visual {
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 250px !important;
    width: 100% !important;
  }
  
  .chat-integrations-section .feature-visual img {
    transform: none !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .feature-visual img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: scale(1.1) !important;
    transform-origin: center bottom !important;
    display: block !important;
  }

  /* Specific offset for the security card on mobile */
  .feature-visual-bottom img {
    margin-right: -3rem !important;
  }

  /* Reset 3rd card special inner container for tablets */
  .feature-card-full .feature-card-inner {
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important; /* Zero gap between content and visual */
  }

  .feature-card-full .feature-link {
    margin-top: var(--space-xs) !important; /* Tighten link spacing */
    margin-bottom: var(--space-sm) !important;
  }

  .feature-card-full .feature-visual-agents {
    margin-bottom: calc(var(--space-lg) * -1) !important;
    margin-top: -2.5rem !important; /* Pull image UP to remove huge gap */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    min-height: 220px !important; /* Balanced height */
  }

  .feature-card-full .feature-visual-agents img {
    transform: scale(1.4) !important;
    transform-origin: center bottom;
  }

  /* Mobile-only fine alignment for agents image (must beat `.feature-visual img` rules) */
  .feature-card-full .feature-visual-agents img.feature-img-agents {
    margin-left: -6px !important;
    object-position: left bottom !important;
  }

  /* Keep video centered on tablets */
  .feature-card-full .feature-visual-agents:has(.platform-frame) {
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0 !important;
    padding: var(--space-md) 0 !important;
  }

  .feature-card-full .feature-visual-agents .platform-frame {
    width: 100% !important;
    max-width: 100% !important;
  }

  .feature-card-full .feature-visual-agents .platform-frame video {
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

@media (max-width: 480px) {
  /* Feature Grid Mobile */
  .feature-card {
    padding: var(--space-md); /* Mobile padding */
  }

  .feature-card-full .feature-card-inner {
    padding: var(--space-md);
    padding-bottom: 0 !important;
    gap: 0 !important;
  }

  /* Force even larger visuals on small phones for section 3 */
  .feature-card-full .feature-visual-agents {
    margin-top: -2rem !important;
    min-height: 180px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .feature-card-full .feature-visual-agents img {
    transform: scale(1.45) !important;
  }

  /* Mobile-only fine alignment for agents image (must beat `.feature-visual img` rules) */
  .feature-card-full .feature-visual-agents img.feature-img-agents {
    margin-left: -6px !important;
    object-position: left bottom !important;
  }

  /* Universal Visual Positioning for Mobile */
  .feature-visual {
    width: calc(100% + (var(--space-md) * 2)) !important;
    margin-left: calc(var(--space-md) * -1) !important;
    margin-right: calc(var(--space-md) * -1) !important;
    margin-bottom: calc(var(--space-md) * -1) !important;
    margin-top: var(--space-xs) !important;
    min-height: 160px !important;
  }
  
  /* Center images in chat-integrations on mobile */
  .chat-integrations-section .feature-visual {
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 200px !important;
    width: 100% !important;
  }
  
  .chat-integrations-section .feature-visual img {
    transform: none !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .feature-card-full .feature-visual-agents {
    margin-bottom: calc(var(--space-md) * -1) !important;
  }

  /* Keep video centered on mobile */
  .feature-card-full .feature-visual-agents:has(.platform-frame) {
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0 !important;
    padding: var(--space-md) 0 !important;
  }

  .feature-card-full .feature-visual-agents .platform-frame {
    width: 100% !important;
    max-width: 100% !important;
  }

  .feature-card-full .feature-visual-agents .platform-frame video {
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .feature-visual img {
    transform: scale(1.15) !important;
  }
}

/* Three column to single column */
@media (max-width: 768px) {
  .features-showcase .chat-agent-video-wrapper {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: 0 var(--space-sm);
  }
  
  .chat-agent-video-wrapper .platform-frame {
    border-radius: var(--radius-md);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .chat-agent-video-wrapper .platform-frame video {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: contain;
  }
  
  .chat-agent-benefits {
    grid-template-columns: 1fr;
  }
  
  .use-cases-container {
    gap: var(--space-xl);
  }
  
  .problem-stats {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .hero-headline {
    font-size: 1.75rem;
  }
  
  .section-headline {
    font-size: 1.5rem;
  }

  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  
  /* Chat Agent Video - Mobile: Properly centered */
  .features-showcase .chat-agent-video-wrapper {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: 0 var(--space-sm);
  }
  
  .chat-agent-video-wrapper .platform-frame {
    width: 100%;
    border-radius: var(--radius-md);
    margin-left: auto;
    margin-right: auto;
  }
  
  .chat-agent-video-wrapper .platform-frame video {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: contain;
    display: block;
  }
  
  .chat-agent-glow {
    width: 100%;
  }
}

/* ==========================================================================
   AI Integration Fusion Hub Styles
   ========================================================================== */
.ai-fusion-section {
  padding: var(--section-padding) 0 0 0;
  background: var(--bg-void);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fusion-header {
  text-align: center;
  margin-bottom: var(--space-m);
  z-index: 10;
  position: relative;
}

.fusion-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-sm);
  position: relative;
  z-index: 1;
}

.fusion-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex-shrink: 0;
  width: 260px;
}

.fusion-cards-left { align-items: flex-end; }
.fusion-cards-right { align-items: flex-start; }

.fusion-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: rgba(20, 22, 22, 0.4);
  border: 1px solid rgba(212, 197, 171, 0.08);
  border-top: 1px solid rgba(212, 197, 171, 0.15);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.fusion-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top left, rgba(212, 197, 171, 0.03), transparent 60%);
  pointer-events: none;
}

.fusion-card:hover {
  border-color: rgba(212, 197, 171, 0.25);
  background: rgba(28, 30, 30, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.fusion-card-title {
  font-size: var(--body-sm);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  line-height: 1.2;
}

.fusion-card-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.fusion-container {
  position: relative;
  flex: 0 0 auto;
  width: 500px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fusionCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Center Hub */
.fusion-center {
  position: relative;
  width: 140px;
  height: 140px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fusion-center:hover {
  transform: scale(1.08);
}

.fusion-center-outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(212, 197, 171, 0.08) 0%, transparent 70%);
  border: 1px solid rgba(212, 197, 171, 0.15);
  border-radius: 50%;
  animation: pulseOuter 4s ease-in-out infinite;
  transition: border-color 0.5s ease, background 0.5s ease;
}

.fusion-center:hover .fusion-center-outer {
  border-color: rgba(212, 197, 171, 0.3);
  background: radial-gradient(circle, rgba(212, 197, 171, 0.15) 0%, transparent 70%);
}

.fusion-center-inner {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30% 30%, #151515 0%, #0a0a0a 100%);
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(212, 197, 171, 0.05);
  z-index: 2;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.fusion-center:hover .fusion-center-inner {
  border-color: var(--accent);
  box-shadow: 0 0 50px rgba(212, 197, 171, 0.15), inset 0 0 20px rgba(212, 197, 171, 0.1);
}

.fusion-center-text {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.fusion-center:hover .fusion-center-text {
  color: #fff;
}

.fusion-magnet-glow {
  position: absolute;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

/* Satellite Nodes */
.fusion-satellites {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fusion-node {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 30% 30%, #1a1a1a 0%, #0d0d0d 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  z-index: 6;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  will-change: transform;
}

.fusion-node::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.node-icon {
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.3s ease, transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.node-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity 0.3s ease, transform 0.3s ease;
  filter: brightness(0.9) contrast(1.1);
}

.fusion-node:hover .node-icon img, 
.fusion-node.hovered .node-icon img {
  opacity: 1;
  transform: scale(1.1);
  filter: brightness(1.1) contrast(1.2);
}

.node-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.fusion-node:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(212, 197, 171, 0.2);
}

.fusion-node:hover .node-icon {
  color: #fff;
  transform: scale(1.1);
}

.fusion-node:hover .node-glow {
  opacity: 1;
}

/* Model specific hover colors */
.fusion-node[data-model="openai"]:hover, .fusion-node[data-model="openai"].hovered { border-color: #10a37f; box-shadow: 0 0 20px rgba(16, 163, 127, 0.3); }
.fusion-node[data-model="claude"]:hover, .fusion-node[data-model="claude"].hovered { border-color: #d97757; box-shadow: 0 0 20px rgba(217, 119, 87, 0.3); }
.fusion-node[data-model="gemini"]:hover, .fusion-node[data-model="gemini"].hovered { border-color: #4285f4; box-shadow: 0 0 20px rgba(66, 133, 244, 0.3); }
.fusion-node[data-model="google-docs"]:hover, .fusion-node[data-model="google-docs"].hovered { border-color: #4285f4; box-shadow: 0 0 20px rgba(66, 133, 244, 0.3); }
.fusion-node[data-model="google-drive"]:hover, .fusion-node[data-model="google-drive"].hovered { border-color: #34a853; box-shadow: 0 0 20px rgba(52, 168, 83, 0.3); }
.fusion-node[data-model="google-sheets"]:hover, .fusion-node[data-model="google-sheets"].hovered { border-color: #0f9d58; box-shadow: 0 0 20px rgba(15, 157, 88, 0.3); }
.fusion-node[data-model="youtube"]:hover, .fusion-node[data-model="youtube"].hovered { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.3); }
.fusion-node[data-model="nanoban"]:hover, .fusion-node[data-model="nanoban"].hovered { border-color: #ffffff; box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); }
.fusion-node[data-model="meta"]:hover, .fusion-node[data-model="meta"].hovered { border-color: #0668e1; box-shadow: 0 0 20px rgba(6, 104, 225, 0.3); }
.fusion-node[data-model="sql"]:hover, .fusion-node[data-model="sql"].hovered { border-color: #00758f; box-shadow: 0 0 20px rgba(0, 117, 143, 0.3); }
.fusion-node[data-model="calendar"]:hover, .fusion-node[data-model="calendar"].hovered { border-color: #4285f4; box-shadow: 0 0 20px rgba(66, 133, 244, 0.3); }

.fusion-node:hover .node-icon, .fusion-node.hovered .node-icon {
  color: #fff;
  transform: scale(1.1);
}

.fusion-node:hover .node-glow, .fusion-node.hovered .node-glow {
  opacity: 1;
}

@keyframes pulseOuter {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.15); opacity: 0.6; }
}

.fusion-cta {
  margin-top: var(--space-xl);
  z-index: 10;
}

@media (max-width: 1024px) {
  .fusion-layout {
    flex-direction: column;
    gap: var(--space-md);
  }
  .fusion-container {
    order: 0;
    width: 100%;
    max-width: 480px;
  }
  .fusion-cards {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-width: 560px;
    justify-content: center;
    gap: var(--space-sm);
  }
  .fusion-cards-left {
    order: 1;
  }
  .fusion-cards-left,
  .fusion-cards-right {
    align-items: stretch;
  }
  .fusion-cards-right {
    order: 2;
  }
  .fusion-card {
    flex: 1;
    min-width: 200px;
    padding: var(--space-sm);
  }
}

@media (max-width: 768px) {
  .fusion-container {
    height: 450px;
  }
  .fusion-center {
    width: 120px;
    height: 120px;
  }
  .fusion-center-inner {
    width: 90px;
    height: 90px;
  }
  .fusion-node {
    width: 44px;
    height: 44px;
  }
  .node-icon {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 640px) {
  .fusion-layout {
    gap: var(--space-sm);
  }
  .fusion-container {
    height: 380px;
    max-width: 100%;
  }
  .fusion-cards {
    max-width: 100%;
    gap: var(--space-sm);
  }
  .fusion-card {
    min-width: 140px;
    padding: var(--space-sm) var(--space-md);
  }
  .fusion-card-title {
    font-size: var(--body-xs);
  }
  .fusion-card-desc {
    font-size: 0.7rem;
  }
  .fusion-center {
    width: 110px;
    height: 110px;
  }
  .fusion-center-inner {
    width: 80px;
    height: 80px;
  }
  .fusion-node {
    width: 36px;
    height: 36px;
  }
  .node-icon {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================================
   Department Section — Desktop fixed-stage scroll swap
   ========================================================================== */

.dept-section {
  /* padding: var(--section-padding) var(--container-padding); */
  background: var(--bg-deep);
  position: relative;
}

.dept-showcase {
  --dept-panel-count: 3;
  --dept-sticky-top: clamp(100px, 12vh, 140px);
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-inline: clamp(24px, 4vw, 56px);
  position: relative;
}

.dept-header {
  text-align: center;
  margin-bottom: clamp(48px, 6vh, 80px);
  position: relative;
  z-index: 2;
}

.dept-scroll-track {
  position: relative;
  width: 100%;
  pointer-events: none;
}

.dept-scroll-step {
  height: clamp(280px, 52svh, 520px);
}

.dept-stage {
  position: relative;
  min-height: clamp(620px, 78svh, 820px);
  z-index: 1;
  width: 100%;
}

@media (max-height: 820px) and (min-width: 1025px) {
  .dept-stage {
    min-height: 0;
    height: calc(100vh - var(--dept-sticky-top) - 40px);
  }
}

.dept-stage.is-fixed {
  position: fixed;
  /* top / left / width set by JS from cached measurements */
}

.dept-stage.is-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100% !important;
}

.dept-panel {
  position: absolute;
  inset: 0;
  display: grid !important;
  grid-template-columns: minmax(300px, 410px) minmax(420px, 640px) !important;
  gap: clamp(36px, 6vw, 88px);
  align-items: center !important; /* Forces vertical centering of both columns */
  justify-content: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, 
              transform 0.4s var(--ease-out-expo), 
              visibility 0s linear 0.4s;
  will-change: opacity, transform;
}

.dept-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.4s ease, 
              transform 0.5s var(--ease-out-expo), 
              visibility 0s;
}

.dept-panel[data-index="0"] { z-index: 3; }
.dept-panel[data-index="1"] { z-index: 4; }
.dept-panel[data-index="2"] { z-index: 5; }

.dept-panel .dept-img-wrap {
  transform: rotate(1.5deg) scale(0.96);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.5);
  height: 100%; /* Ensure wrap takes full height */
  display: flex; /* Flex center image within wrap */
  align-items: center;
}

.dept-panel.is-active .dept-img-wrap,
.dept-panel:hover .dept-img-wrap {
  transform: rotate(0deg) scale(1.02) translateY(0);
}

.dept-img-wrap img {
  width: 100%;
  height: auto;
  max-height: 100%; /* Prevent image from over-growing vertically */
  object-fit: contain; /* Contain to keep original aspect perfectly */
  filter: grayscale(0.2);
  mix-blend-mode: normal;
  border-radius: var(--radius-lg);
}

.dept-panel:hover h3 {
  color: #fff;
}

.dept-panel[data-accent="amber"] {
  --dept-accent: #ded3c5;
  --dept-accent-rgb: 222, 211, 197;
}

.dept-panel[data-accent="orange"] {
  --dept-accent: #c8c6a7;
  --dept-accent-rgb: 200, 198, 167;
}

.dept-panel[data-accent="blue"] {
  --dept-accent: #a9bec3;
  --dept-accent-rgb: 169, 190, 195;
}

.dept-copy {
  min-width: 0;
  width: 100%;
  max-width: 640px;
  align-self: center !important; /* Force center align for text column */
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  padding: clamp(24px, 3vw, 36px) 0;
}

.dept-topbar {
  margin-bottom: 28px;
}

.dept-topbar .tab-content {
  display: inline-flex;
  align-items: center;
}

.dept-topbar .tab-label {
  font-size: 0.76rem;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--dept-accent, var(--accent));
  padding: 11px 16px 10px 30px;
  background: linear-gradient(
    180deg,
    rgba(var(--dept-accent-rgb), 0.18) 0%,
    rgba(var(--dept-accent-rgb), 0.08) 100%
  );
  border: 1px solid rgba(var(--dept-accent-rgb), 0.22);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.12);
  position: relative;
}

.dept-topbar .tab-label span {
  color: #fff;
  opacity: 0.58;
  margin-right: 8px;
  font-weight: 500;
}

.dept-topbar .tab-label::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--dept-accent, var(--accent));
  transform: translateY(-50%);
  box-shadow: 0 0 0 6px rgba(var(--dept-accent-rgb), 0.12);
}

.dept-copy-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 38rem;
}

.dept-headline {
  font-size: var(--display-section); 
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin-bottom: 18px;
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  max-width: 22ch;
  text-wrap: balance;
}

@media (max-height: 820px) and (min-width: 1025px) {
  .dept-headline { font-size: clamp(1.8rem, 3.5vh, 2.4rem); margin-bottom: 12px; }
  .dept-sub { font-size: 1rem; margin-bottom: 20px; }
  .dept-usecase-block { margin-bottom: 22px; }
  .dept-usecase { padding: 13px 0; font-size: 0.95rem; min-height: 0; }
  .dept-img-wrap { height: 100%; max-height: 540px; }
  .dept-topbar { margin-bottom: 16px; }
}

.dept-sub {
  font-size: var(--body-lg);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin-bottom: 28px;
  max-width: 46ch;
}

.dept-usecase-block {
  margin-bottom: 34px;
  padding: 0;
  width: 100%;
  max-width: 38rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

.dept-usecase-title {
  /* Match --body-xs metadata style */
  font-size: var(--body-xs);
  font-weight: 600;
  color: var(--dept-accent, var(--accent));
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.dept-usecase-title::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--dept-accent, var(--accent));
}

.dept-usecases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@media (max-width: 480px) {
  .dept-usecases {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dept-usecase {
  font-size: clamp(0.78rem, 2.5vw, 0.94rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  padding: 12px 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    color var(--transition-fast),
    opacity var(--transition-fast),
    transform var(--transition-fast);
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0;
  min-height: 52px;
  line-height: 1.25;
}

.dept-usecase::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--dept-accent, var(--accent));
  box-shadow: 0 0 0 3px rgba(var(--dept-accent-rgb), 0.06);
}

.dept-usecase:hover {
  color: #fff;
  opacity: 0.9;
  transform: translateY(-1px);
}

.dept-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--dept-accent, var(--accent));
  text-decoration: none;
  transition: all var(--transition-fast);
  padding: 14px 24px;
  border-radius: 12px;
  border: 1px solid rgba(var(--dept-accent-rgb, 212, 197, 171), 0.2);
  background: rgba(var(--dept-accent-rgb, 212, 197, 171), 0.08);
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .dept-link {
    width: calc(100% - 2.5rem);
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
}

.dept-link:hover {
  color: var(--text-primary);
  background: rgba(var(--dept-accent-rgb, 212, 197, 171), 0.1);
  border-color: rgba(var(--dept-accent-rgb, 212, 197, 171), 0.3);
  transform: translateX(2px);
}

.dept-link--amber {
  --accent: #ded3c5;
}

.dept-link--blue {
  --accent: #a9bec3;
}

.dept-link--orange {
  --accent: #c8c6a7;
}

.dept-arrow {
  font-size: 1.2em;
  transition: transform var(--transition-fast);
}

.dept-link:hover .dept-arrow {
  transform: translateX(3px);
}

.dept-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dept-media {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.dept-img-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  width: 100%;
  max-width: min(100%, 410px);
  height: 540px;
  margin-inline: auto;
  transition: opacity var(--transition-fast);
}

@media (max-width: 1280px) and (min-width: 1025px) {
  .dept-panel {
    grid-template-columns: minmax(280px, 370px) minmax(380px, 1fr) !important;
    gap: clamp(28px, 4vw, 60px);
  }

  .dept-copy {
    max-width: 580px;
  }

  .dept-copy-inner,
  .dept-usecase-block {
    max-width: 35rem;
  }
}

@media (max-height: 820px) and (min-width: 1025px) {
  .dept-img-wrap { height: 100%; max-height: calc(100vh - var(--dept-sticky-top) - 100px); }
}

/* Removed hover scale; switching animation logic moved to panel state */
.dept-panel.is-active .dept-img-wrap {
  animation: deptImgPop 0.6s var(--ease-out-expo) both;
}

@keyframes deptImgPop {
  0% { transform: scale(0.96); opacity: 0.8; }
  50% { transform: scale(1.015); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 1024px) {
  .dept-panel.is-active .dept-img-wrap {
    animation: none;
    transform: none;
  }
}

.dept-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, 
    rgba(0, 0, 0, 0.1) 0%, 
    transparent 30%, 
    transparent 70%, 
    rgba(0, 0, 0, 0.2) 100%);
  pointer-events: none;
  z-index: 1;
}

.dept-img-wrap::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(168, 85, 247, 0.2) 50%, 
    rgba(59, 130, 246, 0.2) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 2;
}

.dept-img-wrap:hover::before {
  /* Border glow on hover also disabled */
  opacity: 0;
}

.dept-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px; /* Slightly rounded corners */
  display: block;
  border: none !important;
  box-shadow: var(--shadow-lg);
  transition: opacity var(--transition-fast);
  filter: brightness(1.05);
}

.dept-img-wrap:hover .dept-image {
  /* Scale effect removed completely */
  transform: none;
}

@media (max-width: 1024px) {
  .dept-showcase {
    --dept-sticky-top: 86px;
    padding-inline: clamp(20px, 4vw, 32px);
  }

  .dept-scroll-track {
    display: none;
  }

  .dept-stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
  }

  .dept-panel {
    position: relative;
    inset: auto;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr;
    margin-bottom: 60px;
    gap: 24px;
    padding: 20px 0;
    box-shadow: none;
    border: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  .dept-media {
    order: -1 !important; /* Forces image to internal top */
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
  }

  .dept-img-wrap {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3; /* More horizontal for mobile headers */
  }

  .dept-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dept-copy {
    order: 1 !important;
    align-self: stretch !important;
    max-width: none;
  }

  .dept-headline {
    font-size: clamp(1.85rem, 4vw, 2.45rem);
    max-width: none;
  }

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

@media (max-width: 768px) {
  .dept-showcase {
    --dept-sticky-top: 72px;
  }

  .dept-section {
    padding-top: clamp(72px, 12vw, 96px);
    padding-bottom: clamp(72px, 12vw, 96px);
  }

  .dept-header {
    text-align: left;
  }

  .dept-stage {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .dept-panel {
    position: relative;
    inset: auto;
    padding: 0;
    margin-bottom: 60px;
    background: transparent;
  }

  .dept-copy-inner {
    align-items: center;
    text-align: center;
    padding: 0 1.25rem;
  }

  .dept-topbar {
    display: flex;
    justify-content: center;
    padding: 0 1.25rem;
    margin-bottom: 24px;
  }

  .dept-img-wrap {
    max-width: 400px;
    aspect-ratio: 4/5;
  }

  .dept-headline {
    font-size: clamp(1.85rem, 8vw, 2.6rem);
    line-height: 1.02;
    margin-inline: auto;
  }

  .dept-sub {
    font-size: 1.03rem;
    max-width: none;
  }

  .dept-usecase-block {
    margin-bottom: 28px;
  }

  .dept-usecases {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.5rem;
    row-gap: 0;
    width: 100%;
  }

  .dept-usecase {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: 8px;
    padding: 14px 8px;
  }

  .dept-usecase::before {
    margin-right: 0 flex-start;
    text-align: left;
  }
}

/* ==========================================================================
   Mobile Dept Sections: Sticky Stacking / Layering Effect
   ========================================================================== */
@media (max-width: 768px) {
  .dept-section {
    overflow: visible !important;
    padding-bottom: clamp(32px, 8vw, 48px);
  }

  .dept-showcase {
    overflow: visible !important;
    padding-inline: clamp(16px, 4vw, 22px);
  }

  .dept-stage {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .dept-panel-shell {
    position: relative;
    min-height: 85vh;
  }

  .dept-panel {
    position: sticky !important;
    top: 68px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0 0 24px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  .dept-panel-shell + .dept-panel-shell {
    margin-top: -26px;
  }

  .dept-panel-shell:nth-child(1) { z-index: 1; }
  .dept-panel-shell:nth-child(2) { z-index: 2; }
  .dept-panel-shell:nth-child(3) { z-index: 3; }

  .dept-image {
    border-radius: 20px !important;
  }

  .dept-panel .dept-img-wrap,
  .dept-panel.is-active .dept-img-wrap,
  .dept-panel:hover .dept-img-wrap {
    transform: none !important;
    box-shadow: none !important;
  }

  .dept-copy {
    padding: 18px 0 8px !important;
  }

  .dept-media {
    margin-bottom: 10px !important;
  }

  .dept-img-wrap {
    max-width: none !important;
    aspect-ratio: 4 / 3.8 !important;
    padding: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .dept-copy-inner {
    min-height: 0;
  }

  .dept-sub {
    margin-bottom: 22px;
  }

  .dept-usecase-block {
    margin-bottom: 20px;
  }

  .dept-panel-shell:last-child {
    min-height: auto;
    margin-bottom: 0 !important;
  }

  .dept-panel-shell:last-child .dept-panel {
    padding-bottom: 12px !important;
  }

  .dept-topbar {
    padding-left: 0 !important;
  }

  .dept-img-wrap {
    padding: 0 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   AGENTS-MARKET VIDEO — Fresh responsive styles (am-* classes)
   No conflicts with automation-flow, flow-center-card, platform-frame, etc.
   ========================================================================== */

/* ── Desktop: wrapper ── */
.am-video-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* ── Desktop: grid stays as-is (managed by .automation-flow-grid base) ── */

@media (min-width: 1025px) {
  .am-video-wrap {
    overflow: visible;
  }

  .am-video-grid {
    display: grid !important;
    grid-template-columns: minmax(180px, 220px) minmax(min(340px, 100%), 400px) minmax(180px, 220px) !important;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 4vw, 4rem);
    width: min(100%, 1120px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    min-height: 520px;
  }

  .am-video-pills {
    display: flex !important;
  }

  .am-video-card {
    width: auto;
    max-width: none;
    justify-self: center;
  }

  .am-video-frame {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1320px) {
  .am-video-grid,
  .agents-market-video-block .automation-flow-grid {
    grid-template-columns: minmax(160px, 190px) minmax(min(320px, 100%), 380px) minmax(160px, 190px) !important;
    width: min(100%, 980px) !important;
    gap: clamp(1.25rem, 2vw, 2rem) !important;
  }

  .am-video-card {
    max-width: none;
  }

  .flow-pill {
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  .pill-text {
    font-size: 0.7rem;
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  .am-video-grid,
  .agents-market-video-block .automation-flow-grid {
    grid-template-columns: minmax(140px, 160px) minmax(min(300px, 100%), 360px) minmax(140px, 160px) !important;
    width: min(100%, 860px) !important;
    gap: 0.9rem !important;
  }

  .am-video-card {
    max-width: none;
  }

  .flow-column {
    gap: 0.9rem;
  }

  .flow-pill {
    padding: 6px 9px;
  }

  .pill-icon {
    width: 20px;
    height: 20px;
    font-size: 0.72rem;
  }

  .pill-text {
    font-size: 0.66rem;
  }
}

/* ── Tablet ≤1024: hide pills/svg, show video only ── */
@media (max-width: 1024px) {
  .am-video-wrap {
    overflow: hidden;
  }

  .agents-market-teaser,
  .agents-market-shell {
    overflow: hidden;
  }

  .am-video-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    min-height: 0 !important;
    box-sizing: border-box;
  }

  .am-video-svg,
  .am-video-pills {
    display: none !important;
  }

  .am-video-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .am-video-card.flow-center {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  .am-video-card .flow-center-card {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: clamp(12px, 2vw, 20px) !important;
  }

  .am-video-card .flow-center-card::before {
    display: none !important;
  }

  .am-video-frame {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: clamp(12px, 2vw, 20px) !important;
    background: #06080e !important;
    position: relative !important;
    border: 0 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box;
  }

  .am-video-card .flow-center-card-inner {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    border: 0 !important;
  }

  .am-video-frame::before {
    display: none !important;
  }

  .am-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
    filter: saturate(1.02) contrast(1.02) !important;
    opacity: 1 !important;
  }

  .am-video-card .agent-task-input {
    left: 50% !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 28px) !important;
    padding: 10px 12px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
  }

  .am-video-card .agent-task-input .task-text {
    font-size: 0.82rem !important;
    max-width: 100% !important;
  }
}

/* ── Phone ≤767: tighten spacing ── */
@media (max-width: 767px) {
  .agents-market-actions {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .agents-market-stage + .am-video-wrap {
    margin-top: 2rem !important;
  }

  .agents-market-actions .btn-primary,
  .agents-market-actions .agents-market-link {
    min-width: auto !important;
    flex: 1 !important;
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
  }

  .am-video-wrap {
    margin-top: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .am-video-frame {
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    margin-bottom: 0 !important;
  }

  .am-video-card .flow-center-card {
    aspect-ratio: 1 / 1.28 !important;
  }

  .am-video-card .agent-task-input {
    bottom: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    padding: 9px 10px !important;
  }

  .am-video-card .agent-task-input .task-text {
    font-size: 0.78rem !important;
  }
}

/* ==========================================================================
   Value Pillars Strip (homepage TOC of value props)
   ========================================================================== */
.value-pillars {
  padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 88px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.value-pillars-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(212, 197, 171, 0.08), transparent 70%),
    radial-gradient(40% 40% at 100% 100%, rgba(212, 197, 171, 0.04), transparent 70%);
}

.value-pillars::before,
.value-pillars::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 92%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 197, 171, 0.25), transparent);
}

.value-pillars::before { top: 0; }
.value-pillars::after { bottom: 0; }

.value-pillars-shell {
  width: min(1180px, 92%);
  margin: 0 auto;
}

.value-pillars-intro {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.section-label--lead {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 14px;
  border: 1px solid rgba(212, 197, 171, 0.25);
  border-radius: 999px;
  background: rgba(212, 197, 171, 0.04);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.section-label--lead::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(212, 197, 171, 0.6);
}

.value-pillars-title {
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
  max-width: 22ch;
}

.value-pillars-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 48ch;
}

.value-pillars-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.value-pillar {
  position: relative;
  padding: 28px 26px 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) ,
    var(--bg-deep, #0a0c12);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), border-color 280ms ease, background 280ms ease;
}

.value-pillar::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  border-radius: 16px 0 0 16px;
  opacity: 0;
  transition: opacity 280ms ease;
}

.value-pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 100% 0%, rgba(212, 197, 171, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}

.value-pillar:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 197, 171, 0.28);
}

.value-pillar:hover::before,
.value-pillar:hover::after {
  opacity: 1;
}

.value-pillar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.value-pillar-num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-feature-settings: "tnum";
}

.value-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(212, 197, 171, 0.06);
  border: 1px solid rgba(212, 197, 171, 0.18);
  color: var(--accent);
}

.value-pillar-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
}

.value-pillar-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 900px) {
  .value-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .value-pillar { padding: 22px 20px 20px; }
}

@media (max-width: 560px) {
  .value-pillars-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Hero Proof Row — concrete outcome stats under hero CTAs
   ========================================================================== */
.hero-proof {
  list-style: none;
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 540px;
}

.hero-proof li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  padding-left: 14px;
}

.hero-proof li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(212, 197, 171, 0.7);
}

.hero-proof strong {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.25;
}

.hero-proof span {
  font-size: 0.78rem;
  color: var(--text-tertiary, var(--text-secondary));
  line-height: 1.4;
  opacity: 0.85;
}

@media (max-width: 768px) {
  .hero-proof {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    max-width: 100%;
  }
  .hero-proof li::before { top: 8px; }
}

/* ==========================================================================
   D1MA One — Capability Row
   ========================================================================== */
.d1ma-caps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: min(880px, 100%);
  margin: 18px auto 28px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}

.d1ma-cap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 200ms ease, transform 200ms ease;
}

.d1ma-cap:hover {
  background: rgba(212, 197, 171, 0.05);
  transform: translateY(-1px);
}

.d1ma-cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(212, 197, 171, 0.08);
  border: 1px solid rgba(212, 197, 171, 0.2);
  color: var(--accent);
}

.d1ma-cap-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.d1ma-cap-text strong {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.25;
}

.d1ma-cap-text span {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-tertiary, var(--text-secondary));
  opacity: 0.85;
}

@media (max-width: 900px) {
  .d1ma-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .d1ma-caps {
    grid-template-columns: 1fr;
    padding: 10px;
  }
}

/* ==========================================================================
   PRICING CALCULATOR — compact overrides (reduce overall height)
   ========================================================================== */

.calc-section {
  padding: clamp(2.5rem, 5vw, 4rem) var(--container-padding);
}

.calc-inner {
  gap: 1.4rem;
}

.calc-card {
  padding: 1.1rem 1.15rem !important;
  gap: 0.7rem;
}

.calc-bento-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.calc-bento-head .bento-tag {
  margin: 0 !important;
}

.calc-bento-head .feature-title {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* Team control — slimmer */
.calc-team-control {
  padding: 0.45rem 0.75rem;
  gap: 0.7rem;
  border-radius: 11px;
}

.calc-team-label {
  font-size: 0.62rem;
}

.calc-step-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 1rem;
}

.calc-team-num {
  font-size: 1.1rem;
  min-width: 1.6ch;
}

/* Tool list — 2 columns on desktop = ~half the height */
.calc-card--without .calc-tools-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.32rem 0.45rem;
}

.calc-card--without .calc-tool-row--more {
  grid-column: 1 / -1;
}

.calc-card--without .calc-tool-row {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
}

.calc-card--without .calc-tool-info {
  gap: 0.5rem;
  min-width: 0;
}

.calc-card--without .calc-tool-icon,
.calc-card--without .calc-tool-icon--emoji {
  width: 17px;
  height: 17px;
}

.calc-card--without .calc-tool-name {
  font-size: 0.74rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calc-card--without .calc-tool-rate {
  font-size: 0.58rem;
}

.calc-card--without .calc-tool-amount {
  font-size: 0.78rem;
}

/* Total footer slimmer */
.calc-without-footer {
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
}

.calc-footer-label {
  font-size: 0.65rem;
}

.calc-without-total {
  font-size: 1.15rem;
}

/* Right card — plan cards tighter */
.calc-dima-plans {
  gap: 0.4rem;
}

.calc-dima-plan {
  padding: 0.65rem 0.85rem;
  border-radius: 11px;
  gap: 0.4rem;
}

.calc-plan-name {
  font-size: 0.7rem;
}

.calc-plan-price {
  font-size: 1.05rem;
}

.calc-plan-period {
  font-size: 0.64rem;
}

.calc-plan-includes {
  gap: 0.14rem;
}

.calc-plan-includes li {
  font-size: 0.68rem;
  line-height: 1.32;
  padding-left: 0.95rem;
}

/* Savings block tighter */
.calc-savings-block {
  padding: 0.7rem 0.6rem;
  border-radius: 11px;
  gap: 0.1rem;
}

.calc-savings-label {
  font-size: 0.6rem;
}

.calc-savings-num {
  font-size: 1.6rem;
  line-height: 1;
}

.calc-savings-note {
  font-size: 0.6rem;
  max-width: 180px;
}

.comp-cta-btn {
  padding: 0.7rem 1.2rem;
  font-size: 0.84rem;
  border-radius: 11px;
}

/* Stack tool list back to single column on tablet/mobile */
@media (max-width: 1024px) {
  .calc-card--without .calc-tools-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HOME — DEEP CAPABILITY SECTIONS (Chat / Docs / Media / Workspaces / Automation)
   Big alternating image+content blocks, the imagen.html pattern.
   ========================================================================== */

.home-deep {
  padding: clamp(4rem, 8vw, 7rem) var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: clamp(5rem, 9vw, 8rem);
  max-width: var(--container-wide);
  margin: 0 auto;
}

.home-deep-block {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  position: relative;
}

.home-deep-block--reverse .home-deep-visual {
  order: 2;
}

.home-deep-visual {
  position: relative;
  border-radius: 16px;
}

.home-deep-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 11, 14, 0.7);
  box-shadow:
    0 30px 80px -40px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  aspect-ratio: 16 / 10;
}

.home-deep-media {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-deep-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(212, 197, 171, 0.1), transparent 65%);
  filter: blur(30px);
  z-index: -1;
  opacity: 0.45;
  pointer-events: none;
}

.home-deep-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  max-width: 500px;
}

.home-deep-title {
  font-size: clamp(2rem, 3vw + 0.5rem, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0.25rem 0 0;
}

.home-deep-lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.home-deep-pills {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.home-deep-pills li {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
}

.home-deep-link {
  align-self: flex-start;
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
  border-bottom: 1px solid rgba(212, 197, 171, 0.25);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.home-deep-link:hover {
  color: #fff;
  border-color: var(--accent);
  transform: translateX(2px);
}

/* Workspaces — department mosaic (slim) */
.home-deep-deps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border-radius: 16px;
  padding: 12px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 197, 171, 0.06), transparent 65%),
    rgba(10, 11, 14, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.home-deep-dep {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.home-deep-dep:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 197, 171, 0.3);
}

.home-deep-dep img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95);
}

.home-deep-dep span {
  position: absolute;
  left: 8px;
  bottom: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(10, 11, 14, 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Responsive */
@media (max-width: 900px) {
  .home-deep {
    gap: clamp(4rem, 10vw, 6rem);
  }

  .home-deep-block,
  .home-deep-block--reverse {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .home-deep-block--reverse .home-deep-visual {
    order: 0;
  }

  .home-deep-content {
    max-width: 100%;
  }

  .home-deep-frame {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 520px) {
  .home-deep-deps {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
  }

  .home-deep-title {
    font-size: 1.4rem;
  }
}