/* ==========================================================================
   Olbrite - hi.olbrite.com Design System & Styles
   Premium Futuristic Glassmorphism & High Performance Canvas Stage
   ========================================================================== */

:root {
  /* Brand Colors */
  --primary: #754be7;
  --primary-rgb: 117, 75, 231;
  --primary-light: #9d7df8;
  --primary-dark: #3b1b82;
  --gradient-primary: linear-gradient(135deg, #754be7 0%, #9333ea 50%, #db2777 100%);
  --accent-cyan: #38ef7d;
  --accent-pink: #f43f5e;
  --accent-sky: #0ea5e9;

  /* Neutrals */
  --bg-dark: #080811;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.06);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-active: rgba(157, 125, 248, 0.4);
  
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;

  /* Typography & Sizing */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s ease;
  --transition-normal: 0.35s var(--ease-spring);
}

/* Light / Clean Canvas Theme */
body.light-theme {
  --bg-page: #f9faff;
  --bg-surface: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.98);
  --border-glass: rgba(117, 75, 231, 0.12);
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-dim: #94a3b8;
}

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

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--bg-page, #f9faff);
  color: var(--text-main, #0f172a);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  line-height: 1.5;
}

body.hero-locked {
  overflow: hidden !important;
  height: 100vh !important;
}

/* ==========================================================================
   Auxiliary / Inspection Mode (?intro=off)
   Bypasses the intro sequence immediately: unlocks scroll, docks the pill,
   reveals hero content and displays the navbar without animation delays.
   ========================================================================== */
html.intro-off body.hero-locked,
html.intro-off body {
  overflow-y: auto !important;
  height: auto !important;
}

html.intro-off #glass-doors {
  display: none !important;
}

html.intro-off .navbar {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  transition: background 0.3s ease, backdrop-filter 0.3s ease !important;
}

html.intro-off .hero-status-pill {
  top: 6.5rem !important;
  left: calc(max(2rem, (100% - 1280px) / 2 + 2rem)) !important;
  transform: none !important;
  animation: none !important;
  padding: 0.45rem 1rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(117, 75, 231, 0.18) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  pointer-events: none !important;
  cursor: default !important;
  transition: none !important;
}

@media (max-width: 768px) {
  html.intro-off .hero-status-pill {
    top: 6.4rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 0.82rem !important;
  }
}

html.intro-off .hero-reveal-item,
html.intro-off #hero-social-proof,
html.intro-off #hero-features-ribbon {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html.intro-off .hero-media-overlay {
  opacity: 1 !important;
  transition: none !important;
}

html.intro-off .hero-video-loop {
  opacity: 1 !important;
}

html.intro-off #mindy-avatar-container {
  display: none !important;
}

/* ==========================================================================
   Navigation Bar (Desktop horizontal & Mobile Accordion)
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.85rem 2rem;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: transform 0.8s var(--ease-spring), opacity 0.8s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}

.navbar.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(117, 75, 231, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  z-index: 1002;
}

.brand-logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Mobile Toggle Button (Clean borderless 3 lines) */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 1002;
  padding: 0;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.hamburger-bar {
  width: 24px;
  height: 2.5px;
  background-color: var(--text-main);
  border-radius: 3px;
  transition: all 0.3s var(--ease-spring);
}

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

.mobile-menu-toggle.open .hamburger-bar:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
  background-color: var(--primary);
}

.mobile-menu-toggle.open .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-menu-toggle.open .hamburger-bar:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
  background-color: var(--primary);
}

/* Desktop Menu Wrapper */
.nav-menu-wrapper {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

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

.nav-links a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

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

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

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid rgba(117, 75, 231, 0.18);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.72);
  flex: 0 0 auto;
}

.language-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 3rem;
  padding: 0.36rem 0.42rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.language-option:hover {
  color: var(--primary);
}

.language-option.is-selected {
  color: #fff;
  background: linear-gradient(135deg, #754be7 0%, #9333ea 100%);
  box-shadow: 0 2px 8px rgba(117, 75, 231, 0.25);
}

.language-option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.mindy-sound-toggle:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.btn-login {
  color: var(--text-main);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.btn-login:hover {
  color: var(--primary);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #754be7 0%, #9062f8 100%);
  color: #ffffff;
  padding: 0.75rem 1.45rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(117, 75, 231, 0.3);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(117, 75, 231, 0.45);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  color: #0f172a;
  padding: 0.75rem 1.45rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

/* ==========================================================================
   Hero Section with Sticky Interactive Stage
   ========================================================================== */
.hero-scroll-container {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  width: 100%;
}

.hero-scroll-container.unlocked {
  height: 100vh;
  min-height: 100vh;
}

.hero-sticky-stage {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Capa de render multimedia (Canvas + Video Loop) */
.hero-media-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #fbfbfd;
}

.hero-canvas,
.hero-video-loop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.5s ease;
}

.hero-canvas {
  z-index: 2;
  opacity: 1;
}

.hero-video-loop {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

.hero-video-loop.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Glass Door Effect (Frosted Glass with Vertical Seam)
   ========================================================================== */
.glass-door-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: flex;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

.glass-door-leaf {
  position: relative;
  overflow: hidden;
  width: 50%;
  min-width: 50%;
  max-width: 50%;
  flex: 0 0 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}

.glass-door-left {
  box-shadow: inset -2px 0 15px rgba(255, 255, 255, 0.8), inset 0 0 40px rgba(117, 75, 231, 0.05);
}

.glass-door-right {
  box-shadow: inset 2px 0 15px rgba(255, 255, 255, 0.8), inset 0 0 40px rgba(117, 75, 231, 0.05);
}

.glass-door-seam {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(117, 75, 231, 0.35) 20%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(117, 75, 231, 0.35) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow: 0 0 15px rgba(157, 125, 248, 0.8);
  transition: opacity 0.8s ease, transform 1s ease;
}

.glass-door-container.opened {
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s 1.2s, opacity 1s ease;
}

.glass-door-container.opened .glass-door-left {
  transform: translateX(-100%);
  opacity: 0;
}

.glass-door-container.opened .glass-door-right {
  transform: translateX(100%);
  opacity: 0;
}

.glass-door-container.opened .glass-door-seam {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.4);
}

/* Grabado elegante sobre las puertas de vidrio (50% transparencia y bajo contraste) */
.glass-engraving {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  pointer-events: none;
  opacity: 0.5;
  filter: contrast(0.85) brightness(1.05);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  width: 100%;
  max-width: 320px;
}

.engraved-mark {
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(117, 75, 231, 0.12));
}

.engraved-logo {
  width: 210px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(117, 75, 231, 0.12));
}

/* Al abrir, los logos se desvanecen hacia la izquierda y derecha respectivamente */
.glass-door-container.opened .glass-engraving-left {
  opacity: 0;
  transform: translate(-80%, -50%);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-door-container.opened .glass-engraving-right {
  opacity: 0;
  transform: translate(-20%, -50%);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Gradiente de integración de la media con el contenido */
.hero-media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.92) 36%,
    rgba(255, 255, 255, 0.55) 55%,
    rgba(255, 255, 255, 0.05) 100%
  );
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.hero-media-overlay.active {
  opacity: 1;
}

/* ==========================================================================
   Hero Welcome Glass Pill (Interactive Touch / Click trigger)
   ========================================================================== */
.hero-status-pill {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 2.5rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(117, 75, 231, 0.35);
  border-radius: var(--radius-full);
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e1b4b;
  box-shadow: 0 20px 50px rgba(117, 75, 231, 0.22), 0 0 35px rgba(255, 255, 255, 0.9);
  transition: all 1s var(--ease-spring);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.hero-status-pill:hover {
  transform: translate(-50%, -52%) scale(1.02);
  border-color: var(--primary);
  box-shadow: 0 24px 55px rgba(117, 75, 231, 0.35), 0 0 45px rgba(255, 255, 255, 0.95);
}

.hero-status-pill.ready {
  animation: pillPulseGlow 3s ease-in-out infinite;
}

@keyframes pillPulseGlow {
  0%, 100% {
    box-shadow: 0 20px 50px rgba(117, 75, 231, 0.22), 0 0 35px rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 26px 60px rgba(117, 75, 231, 0.4), 0 0 45px rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%) scale(1.025);
  }
}

.hero-status-pill.animating {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 55px rgba(117, 75, 231, 0.4);
  pointer-events: none;
  cursor: default;
}

.hero-status-pill.docked {
  top: 6.5rem;
  left: calc(max(2rem, (100% - 1280px) / 2 + 2rem));
  transform: none !important;
  animation: none !important;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(117, 75, 231, 0.18);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  pointer-events: none;
  cursor: default;
}

.scroll-indicator-dot {
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.4; }
}

/* Contenido del Hero (Izquierda) */
.hero-content {
  position: relative;
  z-index: 10;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  pointer-events: none;
}

.hero-left-column {
  max-width: 600px;
  pointer-events: auto;
}

.hero-reveal-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-spring), transform 0.7s var(--ease-spring);
}

.hero-reveal-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Dynamic Main Title with Olbrite Gradient - Increased vertical spacing to CTAs */
.hero-title {
  font-size: clamp(2.6rem, 4.6vw, 3.8rem);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-top: 1.5rem;
  margin-bottom: 3.5rem; /* Espaciado generoso vertical al grupo de botones */
  min-height: 2.4em;
  display: flex;
  align-items: flex-start;
}

.title-rotating-line {
  display: inline-block;
  background: linear-gradient(135deg, #2e1065 0%, #581c87 40%, #754be7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #2e1065;
  transition: opacity 0.45s ease, transform 0.45s var(--ease-spring);
  will-change: opacity, transform;
}

.title-rotating-line.text-swap-out {
  opacity: 0;
  transform: translateY(-12px);
}

.title-rotating-line.text-swap-in {
  opacity: 0;
  transform: translateY(12px);
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.hero-cta-microcopy {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  color: #64748b;
  margin-bottom: 2rem;
  font-weight: 550;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s var(--ease-spring);
}

.hero-cta-microcopy.revealed {
  opacity: 1;
  transform: translateY(0);
}

.hero-cta-microcopy .microcopy-sparkle {
  color: #9333ea;
  font-size: 0.95rem;
}

/* Social Proof */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s var(--ease-spring);
}

.hero-social-proof.revealed {
  opacity: 1;
  transform: translateY(0);
}

.avatar-group {
  display: flex;
}

.avatar-group img,
.avatar-group .avatar-placeholder {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  margin-left: -8px;
  background: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: bold;
  color: #334155;
}

.avatar-group .avatar-placeholder:first-child {
  margin-left: 0;
}

.social-proof-text {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.3;
}

.social-proof-text strong {
  color: #0f172a;
}

/* Micro metric badges at the bottom of hero */
.hero-features-ribbon {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%, 40px);
  opacity: 0;
  z-index: 15;
  display: flex;
  gap: 1.5rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(117, 75, 231, 0.15);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  transition: opacity 0.8s ease, transform 0.8s var(--ease-spring);
  pointer-events: none;
}

.hero-features-ribbon.revealed {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.ribbon-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

.ribbon-item svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

/* ==========================================================================
   Mindy AI Concierge Avatar Presenter (Bottom Right)
   ========================================================================== */
.mindy-avatar-container {
  position: absolute;
  bottom: 0;
  right: clamp(1.5rem, 4.5vw, 5rem);
  z-index: 18;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform-origin: bottom right;
  transform: translate3d(40px, 30px, 0) scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
  will-change: transform, opacity;
}

.mindy-avatar-container.active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Salida requerida: "hacerse pequeño hacia la esquina derecha inferior y desaparecer con un fade" */
.mindy-avatar-container.exit {
  transform-origin: bottom right;
  transform: translate3d(60px, 60px, 0) scale(0.04);
  opacity: 0;
  filter: blur(10px);
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.75s ease, filter 0.75s ease;
  pointer-events: none;
}

.mindy-video-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(380px, 50vh, 560px);
  width: auto;
  aspect-ratio: 720 / 1280;
  filter: drop-shadow(0 14px 28px rgba(26, 16, 63, 0.12)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.05));
  background: transparent;
  isolation: isolate;
}

.mindy-avatar-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  background: transparent !important;
}

.mindy-avatar-static {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
}

/* iOS keeps the welcome audio/timing but uses a true-alpha still to avoid opaque video artifacts. */
html.ios-alpha-fallback .mindy-avatar-video {
  opacity: 0 !important;
}

html.ios-alpha-fallback .mindy-avatar-static {
  display: block;
}

/* Glassmorphism Speech Bubble */
.mindy-speech-bubble {
  position: relative;
  margin-bottom: 0.75rem;
  background: rgba(255, 255, 255, 0.54);
  background-clip: padding-box;
  border: 1px solid rgba(117, 75, 231, 0.22);
  border-radius: 16px 16px 4px 16px;
  padding: 0.65rem 1.15rem;
  box-shadow: 0 10px 28px rgba(117, 75, 231, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  transform-origin: bottom right;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: normal;
  width: auto;
  max-width: 360px;
  overflow-wrap: break-word;
  pointer-events: auto;
  isolation: isolate;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mindy-speech-bubble {
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
  }
}

.mindy-speech-bubble.bubble-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: mindyBubbleFloat 3.2s ease-in-out infinite alternate;
}

@keyframes mindyBubbleFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

.mindy-bubble-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #754be7;
  margin-bottom: 0.25rem;
  min-height: 44px;
}

.mindy-badge-left {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.mindy-sound-toggle {
  background: rgba(117, 75, 231, 0.08);
  border: 1px solid rgba(117, 75, 231, 0.22);
  border-radius: var(--radius-full);
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #754be7;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  pointer-events: auto;
}

.mindy-sound-toggle:hover {
  background: #754be7;
  color: #ffffff;
  transform: scale(1.08);
}

.mindy-sound-toggle:focus-visible {
  outline: 3px solid rgba(117, 75, 231, 0.45);
  outline-offset: 2px;
}

.mindy-sound-toggle svg {
  width: 14px;
  height: 14px;
}

.mindy-sound-toggle .sound-icon-off {
  display: none;
}

.mindy-sound-toggle[aria-pressed="false"] .sound-icon-on {
  display: none;
}

.mindy-sound-toggle[aria-pressed="false"] .sound-icon-off {
  display: block;
}

.mindy-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: mindyPulse 2s infinite;
}

@keyframes mindyPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.mindy-bubble-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e1b4b;
  margin: 0;
  line-height: 1.2;
}

/* ==========================================================================
   Integrations & Compatibility Slider Section ("Our agents can work with...")
   ========================================================================== */
.integrations-section {
  position: relative;
  width: 100%;
  scroll-margin-top: 5rem;
  padding: 6rem 0 4.5rem;
  background: linear-gradient(180deg, #fbfbfd 0%, #ffffff 40%, #f8f7fd 100%);
  overflow: hidden;
  border-bottom: 1px solid rgba(117, 75, 231, 0.08);
}

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

.integrations-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}

.integrations-header .section-subtitle {
  font-size: 1.12rem;
  color: #64748b;
  margin-top: 1rem;
  line-height: 1.6;
}

.integrations-marquee-area {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  width: 100%;
  position: relative;
}

/* Gradient fade masks on left and right edges for smooth infinity feel */
.marquee-track-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
  -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%);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  width: max-content;
  will-change: transform;
}

.marquee-track-left {
  animation: marqueeScrollLeft 36s linear infinite;
}

.marquee-track-right {
  animation: marqueeScrollRight 40s linear infinite;
}

.marquee-track-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marqueeScrollLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes marqueeScrollRight {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Individual Integration Badge / Pill */
.integration-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.45rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(117, 75, 231, 0.14);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 18px rgba(117, 75, 231, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
  flex-shrink: 0;
}

.integration-pill:hover {
  transform: translateY(-3px) scale(1.03);
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 10px 25px rgba(117, 75, 231, 0.18), 0 0 18px rgba(255, 255, 255, 0.95);
}

.integration-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.integration-label {
  font-size: 0.94rem;
  font-weight: 600;
  color: #1e1b4b;
  letter-spacing: -0.01em;
}

/* Special Highlight for 'And hundreds of tools' */
.integration-pill.pill-highlight {
  background: linear-gradient(135deg, rgba(117, 75, 231, 0.08) 0%, rgba(236, 72, 153, 0.08) 100%);
  border: 1.5px dashed rgba(117, 75, 231, 0.45);
}

.integration-pill.pill-highlight:hover {
  background: linear-gradient(135deg, rgba(117, 75, 231, 0.14) 0%, rgba(236, 72, 153, 0.14) 100%);
  border-color: var(--primary);
  box-shadow: 0 8px 25px rgba(117, 75, 231, 0.22);
}

.integration-pill.pill-highlight .integration-label {
  background: linear-gradient(135deg, #6d28d9 0%, #754be7 50%, #db2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #754be7;
  font-weight: 700;
}

.pill-sparkle {
  font-size: 1.15rem;
  line-height: 1;
}

/* ==========================================================================
   What is an Agent Section (Interactive Educational Architecture)
   ========================================================================== */
.what-is-an-agent-section {
  position: relative;
  width: 100%;
  padding: 6.5rem 2rem 5.5rem;
  background: linear-gradient(180deg, #f8f7fd 0%, #ffffff 40%, #fbfbfd 100%);
  border-bottom: 1px solid rgba(117, 75, 231, 0.08);
  overflow: hidden;
}

.what-is-an-agent-section::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(117, 75, 231, 0.08) 0%, rgba(236, 72, 153, 0.03) 70%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.agent-explainer-container {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1.35fr;
  gap: 3.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Left Column Styling */
.agent-explainer-left {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.section-tag-wrapper {
  margin-bottom: 0.25rem;
}

.agent-explainer-title {
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #0f172a;
  margin: 0;
}

.agent-explainer-title .gradient-text {
  background: linear-gradient(135deg, #2e1065 0%, #754be7 50%, #9333ea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #754be7;
}

.agent-explainer-lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
  max-width: 540px;
}

.agent-explainer-lead strong {
  color: #1e1b4b;
  font-weight: 700;
}

/* Visual Pull-Quote in What is an AI Agent */
.agent-pullquote {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: linear-gradient(135deg, rgba(117, 75, 231, 0.08) 0%, rgba(236, 72, 153, 0.06) 100%);
  border: 1px solid rgba(117, 75, 231, 0.22);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  margin: 0.25rem 0 0.5rem;
  box-shadow: 0 4px 16px rgba(117, 75, 231, 0.06);
}

.agent-pullquote .pullquote-sparkle {
  font-size: 1.1rem;
}

.agent-pullquote .pullquote-text {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e1b4b;
  letter-spacing: -0.01em;
}

.agent-cta-row {
  margin: 0.5rem 0 1rem;
}

.btn-agent-learn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.85rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(117, 75, 231, 0.28);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}

.btn-agent-learn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(117, 75, 231, 0.38);
}

/* Comparison Card ("More than a generic assistant") */
.agent-comparison-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(117, 75, 231, 0.18);
  border-radius: 20px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 12px 36px rgba(117, 75, 231, 0.08), 0 2px 8px rgba(0, 0, 0, 0.02);
  margin-top: 0.5rem;
}

.comparison-card-top {
  margin-bottom: 1rem;
}

.comparison-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 750;
  color: #1e1b4b;
  letter-spacing: -0.01em;
}

.comparison-columns-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.comparison-column {
  padding: 1rem;
  border-radius: 14px;
}

.col-generic {
  background: rgba(241, 245, 249, 0.7);
  border: 1px solid rgba(203, 213, 225, 0.6);
}

.col-agent {
  background: linear-gradient(135deg, rgba(117, 75, 231, 0.08) 0%, rgba(236, 72, 153, 0.04) 100%);
  border: 1.5px solid rgba(117, 75, 231, 0.3);
  box-shadow: 0 4px 16px rgba(117, 75, 231, 0.06);
}

.comparison-col-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.col-avatar-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.avatar-generic {
  background: #e2e8f0;
  color: #64748b;
}

.avatar-agent {
  background: linear-gradient(135deg, #754be7 0%, #9333ea 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(117, 75, 231, 0.35);
}

.comparison-col-header h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.comparison-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.comparison-check-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.3;
}

.item-negative {
  color: #64748b;
}

.item-positive {
  color: #0f172a;
  font-weight: 600;
}

.status-marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  flex-shrink: 0;
}

.marker-cross {
  background: #cbd5e1;
  color: #475569;
}

.marker-check {
  background: linear-gradient(135deg, #754be7 0%, #9333ea 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(117, 75, 231, 0.3);
}

/* Right Column: Interactive Stage */
.agent-explainer-right {
  position: sticky;
  top: 7rem;
  align-self: start;
  width: 100%;
}

.agent-interactive-stage-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stage-desk-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1.5px solid rgba(117, 75, 231, 0.2);
  box-shadow: 0 24px 60px rgba(117, 75, 231, 0.12), 0 4px 18px rgba(0, 0, 0, 0.03);
  background: #ffffff;
  aspect-ratio: 3 / 2;
}

.desk-base-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 0.22s ease, transform 0.6s ease;
}

.desk-base-image.is-changing {
  opacity: 0.28;
  transform: scale(0.99);
}

.stage-desk-frame:hover .desk-base-image {
  transform: scale(1.015);
}

/* Ambient Animated Glows */
.desk-ambient-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 2;
  mix-blend-mode: screen;
}

.brain-glow {
  top: 14%;
  left: 36%;
  width: 120px;
  height: 100px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, rgba(117, 75, 231, 0.15) 50%, transparent 80%);
  animation: brainBreathing 3.5s ease-in-out infinite alternate;
}

.loop-pulse-glow {
  bottom: 8%;
  right: 14%;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.35) 0%, rgba(59, 130, 246, 0.15) 60%, transparent 80%);
  animation: loopPulsing 4s ease-in-out infinite;
}

.laptop-glow {
  bottom: 22%;
  left: 45%;
  width: 60px;
  height: 40px;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.6) 0%, transparent 75%);
  animation: laptopBreathing 2.8s ease-in-out infinite alternate;
}

@keyframes brainBreathing {
  0% { transform: scale(0.92); opacity: 0.5; }
  100% { transform: scale(1.12); opacity: 0.95; }
}

@keyframes loopPulsing {
  0% { transform: rotate(0deg) scale(0.95); opacity: 0.4; }
  50% { transform: rotate(180deg) scale(1.08); opacity: 0.85; }
  100% { transform: rotate(360deg) scale(0.95); opacity: 0.4; }
}

@keyframes laptopBreathing {
  0% { opacity: 0.4; }
  100% { opacity: 0.95; }
}

/* Interactive Hotspots Overlaid on Desk */
.stage-hotspot {
  position: absolute;
  z-index: 5;
  cursor: pointer;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Coordinates mapped to each visual component on the image */
.hotspot-model {
  top: 4%;
  left: 23%;
  width: 25%;
  height: 28%;
}

.hotspot-skills {
  top: 22%;
  left: 1%;
  width: 32%;
  height: 38%;
}

.hotspot-tools {
  top: 10%;
  right: 2%;
  width: 33%;
  height: 35%;
}

.hotspot-harness {
  bottom: 6%;
  left: 7%;
  width: 29%;
  height: 36%;
}

.hotspot-loops {
  bottom: 6%;
  right: 4%;
  width: 31%;
  height: 40%;
}

/* Pulse indicator dot */
.hotspot-pulse-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #754be7;
  box-shadow: 0 0 0 0 rgba(117, 75, 231, 0.6);
  animation: hotspotRadar 2s infinite;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}

@keyframes hotspotRadar {
  0% { box-shadow: 0 0 0 0 rgba(117, 75, 231, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(117, 75, 231, 0); }
  100% { box-shadow: 0 0 0 0 rgba(117, 75, 231, 0); }
}

.stage-hotspot:hover .hotspot-pulse-dot,
.stage-hotspot.active .hotspot-pulse-dot {
  opacity: 1;
  background: #ec4899;
}

/* Rotating SVG Loop on Loops hotspot */
.stage-loop-svg {
  position: absolute;
  bottom: 8%;
  left: 18%;
  width: 64%;
  height: 64%;
  pointer-events: none;
  opacity: 0.75;
  transform-origin: center center;
}

.svg-loop-track {
  fill: none;
  stroke: rgba(147, 51, 234, 0.25);
  stroke-width: 3;
}

.svg-loop-dash {
  fill: none;
  stroke: url(#loopGradient, #9333ea);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 45 190;
  stroke-dashoffset: 0;
  animation: rotateSvgLoop 5.5s linear infinite;
  transform-origin: center center;
}

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

.loop-spin-svg {
  animation: loopSpin 4s linear infinite;
}

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

/* Hover Floating Reveal Panel */
.hotspot-reveal-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 250px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(117, 75, 231, 0.25);
  border-radius: 16px;
  padding: 0.85rem 1rem;
  box-shadow: 0 14px 35px rgba(117, 75, 231, 0.22), 0 2px 8px rgba(0, 0, 0, 0.04);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 20;
}

.stage-hotspot:hover .hotspot-reveal-panel,
.stage-hotspot.active .hotspot-reveal-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.panel-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #754be7 0%, #9333ea 100%);
  flex-shrink: 0;
}

.panel-header strong {
  display: block;
  font-size: 0.88rem;
  color: #0f172a;
  line-height: 1.2;
}

.panel-subtitle {
  display: block;
  font-size: 0.72rem;
  color: #754be7;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.panel-desc {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #475569;
  margin: 0;
}

/* Quick-Tap Component Pill Switcher */
.agent-components-pill-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(117, 75, 231, 0.15);
  border-radius: var(--radius-full);
}

.comp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #334155;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.24s ease;
}

.comp-pill:hover {
  background: rgba(117, 75, 231, 0.08);
  color: #754be7;
}

.comp-pill.active {
  background: linear-gradient(135deg, #754be7 0%, #9333ea 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(117, 75, 231, 0.32);
}

/* Dynamic Active Component Detail Card */
.agent-active-component-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(117, 75, 231, 0.18);
  border-radius: 18px;
  padding: 1.15rem 1.4rem;
  box-shadow: 0 10px 30px rgba(117, 75, 231, 0.06);
  transition: all 0.3s ease;
}

.active-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.active-card-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #754be7;
}

.active-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.active-card-text {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #475569;
  margin: 0;
}

.active-card-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.card-micro-tag {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  background: rgba(117, 75, 231, 0.08);
  color: #754be7;
  border-radius: var(--radius-full);
}

.gradient-text {
  background: linear-gradient(135deg, #754be7 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #754be7;
  display: inline-block;
}

/* ==========================================================================
   Why Choose Olbrite Section (We build, train and supervise AI agents)
   ========================================================================== */
.why-choose-section {
  position: relative;
  width: 100%;
  padding: 6.5rem 2rem 5.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #faf9fe 50%, #ffffff 100%);
  border-bottom: 1px solid rgba(117, 75, 231, 0.08);
  overflow: hidden;
}

.why-choose-section::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 5%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(117, 75, 231, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.why-choose-section::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.why-choose-container {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  z-index: 1;
}

.why-choose-top-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 4rem;
}

.why-choose-intro {
  display: flex;
  flex-direction: column;
}

.why-choose-tag {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #754be7;
  text-transform: uppercase;
  position: relative;
  padding-top: 0.65rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.why-choose-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 3.5px;
  background: linear-gradient(90deg, #754be7 0%, #9333ea 100%);
  border-radius: 2px;
}

.why-choose-title {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #0f172a;
  margin: 0.4rem 0 1.25rem;
}

.why-choose-lead {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #475569;
  margin-bottom: 1.85rem;
}

.why-choose-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.why-choose-btn-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

.btn-why-quote {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.75rem;
  font-size: 1.02rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #754be7 0%, #9333ea 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(117, 75, 231, 0.35);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, filter 0.25s;
}

.btn-why-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(117, 75, 231, 0.48);
  filter: brightness(1.05);
}

.handwritten-accent {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #754be7;
  transform: rotate(-2.5deg);
  display: inline-block;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(117, 75, 231, 0.18);
  margin-top: 0.15rem;
  margin-left: 0.25rem;
}

.why-choose-micro-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  background: rgba(117, 75, 231, 0.05);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(117, 75, 231, 0.1);
  width: fit-content;
}

/* 3 Pillars Grid */
.why-choose-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.why-pillar-card {
  position: relative;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(117, 75, 231, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
  overflow: hidden;
  cursor: pointer;
}

.why-pillar-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px -8px rgba(117, 75, 231, 0.22), 0 0 0 1px rgba(117, 75, 231, 0.35);
  border-color: rgba(117, 75, 231, 0.35);
}

.pillar-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.pillar-card-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.4rem 0.65rem;
}

.pillar-num {
  font-size: 1.35rem;
  font-weight: 900;
  color: rgba(117, 75, 231, 0.4);
  letter-spacing: -0.02em;
}

.pillar-action-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--primary);
  background: rgba(117, 75, 231, 0.08);
  border: 1px solid rgba(117, 75, 231, 0.18);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
}

.pillar-card-body {
  padding: 1.25rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pillar-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.45rem;
  line-height: 1.25;
}

.pillar-card-desc {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

.pillar-media-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 23px;
}

.pillar-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-pillar-card:hover .pillar-img {
  transform: scale(1.025);
}

.pillar-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  transition: opacity 0.4s;
}

.why-pillar-card:hover .pillar-ambient-glow {
  opacity: 0.35;
}

.glow-blue {
  background: radial-gradient(circle at 60% 70%, rgba(56, 189, 248, 0.4) 0%, transparent 60%);
}

.glow-purple {
  background: radial-gradient(circle at 60% 70%, rgba(168, 85, 247, 0.4) 0%, transparent 60%);
}

.glow-cyan {
  background: radial-gradient(circle at 60% 70%, rgba(34, 211, 238, 0.4) 0%, transparent 60%);
}

/* Interactive Floating Chips on Pillars */
.pillar-hover-chip {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  opacity: 0.92;
  padding: 0.4rem 0.9rem;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-full);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, background 0.3s;
  pointer-events: none;
}

.why-pillar-card:hover .pillar-hover-chip {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  background: rgba(15, 23, 42, 0.9);
}

.chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.mini-pulse-spinner {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #c084fc;
  border-top-color: transparent;
  animation: spinMini 0.9s linear infinite;
}

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

.live-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: liveBadgePulse 1.8s infinite;
}

@keyframes liveBadgePulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ==========================================================================
   Bottom Trust & Credentials Bar
   ========================================================================== */
.why-credentials-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.6rem 2.2rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(117, 75, 231, 0.12);
  border-radius: 24px;
  box-shadow: 0 12px 35px -8px rgba(117, 75, 231, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.cred-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.cred-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trophy-icon {
  color: #d97706;
  filter: drop-shadow(0 2px 8px rgba(217, 119, 6, 0.25));
}

.cred-content {
  display: flex;
  flex-direction: column;
}

.cred-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.15rem;
  line-height: 1.2;
}

.cred-title strong {
  color: #754be7;
  font-weight: 800;
}

.cred-sub {
  font-size: 0.76rem;
  color: #64748b;
  margin: 0;
  line-height: 1.2;
}

.cred-divider {
  width: 1px;
  height: 38px;
  background: rgba(117, 75, 231, 0.14);
  flex-shrink: 0;
}

/* Quote Item */
.cred-quote-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  max-width: 380px;
  padding-left: 0.25rem;
}

.cred-quote-mark {
  font-size: 2.4rem;
  line-height: 0.75;
  color: #754be7;
  font-family: Georgia, serif;
  font-weight: 800;
  opacity: 0.85;
  flex-shrink: 0;
}

.cred-quote-wrap {
  display: flex;
  flex-direction: column;
}

.cred-quote-text {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #475569;
  font-style: italic;
  margin: 0 0 0.25rem;
}

.cred-quote-author {
  font-size: 0.74rem;
  font-weight: 700;
  color: #754be7;
  display: block;
}

/* ==========================================================================
   Core Sections
   ========================================================================== */
.section {
  padding: 7rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
}

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

.section-tag {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 0.75rem;
  display: block;
}

.section-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.15;
}

/* Cards Grid */
.cards-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: #ffffff;
  border: 1px solid rgba(117, 75, 231, 0.1);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-light);
  box-shadow: 0 12px 30px rgba(117, 75, 231, 0.08);
}

.feature-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(117, 75, 231, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.75rem;
}

.feature-card p {
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ==========================================================================
   Section 4: From One Agent to an AI Team (AI Teams in Action)
   ========================================================================== */
.ai-teams-section {
  position: relative;
  width: 100%;
  padding: 6.5rem 2rem 6rem;
  background: linear-gradient(180deg, #f9f8fe 0%, #ffffff 50%, #f7f6fd 100%);
  border-bottom: 1px solid rgba(117, 75, 231, 0.08);
  overflow: hidden;
}

.ai-teams-container {
  max-width: 1280px;
  margin: 0 auto;
}

.ai-teams-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 3.5rem;
}

.teams-tag {
  color: var(--primary);
  background: rgba(117, 75, 231, 0.08);
  border: 1px solid rgba(117, 75, 231, 0.18);
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-full);
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.teams-title {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #0f172a;
  margin-bottom: 1rem;
}

.teams-subtitle {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #475569;
  max-width: 680px;
  margin: 0 auto 1.5rem;
}

.teams-quote-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(117, 75, 231, 0.16);
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e1b4b;
  box-shadow: 0 4px 16px rgba(117, 75, 231, 0.06);
}

/* Pipeline Flow Track */
.ai-teams-pipeline-stage {
  position: relative;
  width: 100%;
}

.pipeline-flow-track {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1.05fr;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 3.5rem;
}

.pipeline-agent-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(117, 75, 231, 0.16);
  border-radius: 20px;
  padding: 1.35rem 1.15rem;
  box-shadow: 0 10px 30px rgba(117, 75, 231, 0.06);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease, border-color 0.35s ease;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 250px;
}

.pipeline-agent-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(117, 75, 231, 0.16);
  border-color: rgba(117, 75, 231, 0.4);
}

.agent-card-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.agent-avatar-badge {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: linear-gradient(135deg, rgba(117, 75, 231, 0.12) 0%, rgba(236, 72, 153, 0.08) 100%);
  border: 1px solid rgba(117, 75, 231, 0.2);
  flex-shrink: 0;
}

.avatar-sales { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.3); }
.avatar-research { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.3); }
.avatar-qualification { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.3); }
.avatar-followup { background: rgba(236, 72, 153, 0.12); border-color: rgba(236, 72, 153, 0.3); }
.avatar-human { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.3); }

.agent-role-meta {
  display: flex;
  flex-direction: column;
}

.agent-badge-tag {
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  color: var(--primary);
  text-transform: uppercase;
}

.agent-badge-tag.human-tag {
  color: #15803d;
}

.agent-name {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.agent-task-box {
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex-grow: 1;
}

.task-action-label {
  font-size: 0.7rem;
  font-weight: 750;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.agent-action-desc {
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.4;
  margin: 0;
}

.agent-handoff-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(117, 75, 231, 0.06);
  border: 1px solid rgba(117, 75, 231, 0.16);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
}

.handoff-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.card-human-loop {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 253, 244, 0.75) 100%);
  border: 1.5px solid rgba(34, 197, 94, 0.35);
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.1);
}

.human-pill {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #15803d;
}

.dot-live {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.pipeline-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(117, 75, 231, 0.4);
  animation: pulseConnector 2s ease-in-out infinite;
}

@keyframes pulseConnector {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(3px); opacity: 1; color: var(--primary); }
}

/* Collaboration Grid */
.teams-collaboration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.collab-badge-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(117, 75, 231, 0.14);
  border-radius: 18px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 6px 20px rgba(117, 75, 231, 0.04);
}

.collab-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.collab-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.collab-text strong {
  font-size: 0.95rem;
  color: #0f172a;
  font-weight: 750;
}

.collab-text span {
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.45;
}

/* ==========================================================================
   Section 7: Core Conversion — Free Pre-Analysis with Mindy
   ========================================================================== */
.pre-analysis-section {
  position: relative;
  width: 100%;
  padding: 6.5rem 2rem 6.5rem;
  background: radial-gradient(circle at 50% 10%, rgba(157, 125, 248, 0.12) 0%, transparent 50%),
              linear-gradient(180deg, #ffffff 0%, #f6f4fe 40%, #ffffff 100%);
  border-bottom: 1px solid rgba(117, 75, 231, 0.1);
  overflow: hidden;
}

.pre-analysis-container {
  max-width: 1080px;
  margin: 0 auto;
}

.pre-analysis-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3.5rem;
}

.preanalysis-tag {
  color: var(--primary);
  background: rgba(117, 75, 231, 0.08);
  border: 1px solid rgba(117, 75, 231, 0.2);
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-full);
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.preanalysis-title {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #0f172a;
  margin-bottom: 1rem;
}

.preanalysis-subtitle {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #475569;
  max-width: 680px;
  margin: 0 auto;
}

/* Chat Frame */
.pre-analysis-chat-frame {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(117, 75, 231, 0.22);
  border-radius: 28px;
  padding: 2.5rem;
  box-shadow: 0 24px 60px rgba(117, 75, 231, 0.12), 0 4px 16px rgba(0, 0, 0, 0.03);
  position: relative;
}

.chat-frame-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(117, 75, 231, 0.12);
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.chat-avatar-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #754be7 0%, #ec4899 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 16px rgba(117, 75, 231, 0.3);
}

.avatar-dot-online {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #ffffff;
  box-shadow: 0 0 6px #22c55e;
}

.avatar-emoji {
  font-size: 1.5rem;
  line-height: 1;
}

.chat-meta {
  flex-grow: 1;
  margin-left: 0.5rem;
}

.chat-meta h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.chat-meta p {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0.2rem 0 0;
}

.chat-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #166534;
}

.chat-message-bubble {
  background: linear-gradient(135deg, rgba(117, 75, 231, 0.06) 0%, rgba(236, 72, 153, 0.03) 100%);
  border: 1px solid rgba(117, 75, 231, 0.16);
  border-radius: 18px;
  padding: 1.25rem 1.6rem;
  margin-bottom: 1.8rem;
}

.chat-bubble-p {
  font-size: 1.18rem;
  font-weight: 750;
  color: #1e1b4b;
  margin: 0 0 0.4rem;
  line-height: 1.4;
}

.chat-hint {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
}

/* Intent Chips */
.preanalysis-intent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.2rem;
}

.intent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1.5px solid rgba(117, 75, 231, 0.2);
  border-radius: var(--radius-full);
  padding: 0.65rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 650;
  color: #1e1b4b;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.25s var(--ease-spring);
  outline: none;
}

.intent-chip:hover {
  border-color: var(--primary);
  background: rgba(117, 75, 231, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(117, 75, 231, 0.12);
}

.intent-chip.active {
  background: linear-gradient(135deg, #754be7 0%, #9333ea 100%);
  color: #ffffff;
  border-color: #754be7;
  box-shadow: 0 6px 18px rgba(117, 75, 231, 0.35);
  transform: translateY(-1px);
}

.chip-emoji {
  font-size: 1.05rem;
  line-height: 1;
}

/* 4 Step Cards */
.preanalysis-pillars-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

.pillar-step-card {
  background: rgba(248, 250, 252, 0.75);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  padding: 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: all 0.3s ease;
}

.pillar-step-card:hover {
  background: #ffffff;
  border-color: rgba(117, 75, 231, 0.3);
  box-shadow: 0 8px 24px rgba(117, 75, 231, 0.08);
  transform: translateY(-3px);
}

.step-num-pill {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(117, 75, 231, 0.1);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.2rem;
}

.pillar-step-card h5 {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0f172a;
  margin: 0;
  text-transform: uppercase;
}

.pillar-step-card p {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.45;
  margin: 0;
}

/* Action Bar */
.preanalysis-action-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(117, 75, 231, 0.12);
}

.btn-launch-preanalysis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  font-size: 1.08rem;
  font-weight: 750;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #754be7 0%, #ec4899 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(117, 75, 231, 0.35);
  transition: all 0.3s var(--ease-spring);
}

.btn-launch-preanalysis:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 40px rgba(117, 75, 231, 0.45);
}

.preanalysis-trust-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.84rem;
  color: #64748b;
  font-weight: 550;
  flex-wrap: wrap;
  justify-content: center;
}

.check-green {
  color: #16a34a;
  font-weight: 800;
  margin-right: 0.2rem;
}

.trust-dot {
  color: #cbd5e1;
}

/* ==========================================================================
   Section 8: Proof & Experience (Defensible Track Record)
   ========================================================================== */
.proof-section {
  position: relative;
  width: 100%;
  padding: 6rem 2rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(117, 75, 231, 0.08);
}

.proof-container {
  max-width: 1280px;
  margin: 0 auto;
}

.proof-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3.5rem;
}

.proof-tag {
  color: var(--primary);
  background: rgba(117, 75, 231, 0.08);
  border: 1px solid rgba(117, 75, 231, 0.18);
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-full);
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.proof-title {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #0f172a;
  margin-bottom: 1rem;
}

.proof-subtitle {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #475569;
  max-width: 680px;
  margin: 0 auto;
}

.proof-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.proof-stat-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(117, 75, 231, 0.15);
  border-radius: 22px;
  padding: 2rem 1.6rem;
  box-shadow: 0 10px 30px rgba(117, 75, 231, 0.05);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease, border-color 0.35s ease;
  display: flex;
  flex-direction: column;
}

.proof-stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(117, 75, 231, 0.15);
  border-color: rgba(117, 75, 231, 0.35);
}

.proof-stat-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(117, 75, 231, 0.1);
}

.proof-number {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #1e1b4b 0%, #754be7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
}

.proof-award-icon {
  font-size: 2.4rem;
  line-height: 1;
}

.proof-badge-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--primary);
  background: rgba(117, 75, 231, 0.08);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
}

.proof-card-heading {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.5rem;
  line-height: 1.25;
}

.proof-card-desc {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   Section 9: Business Use Cases (Operational Categories)
   ========================================================================== */
.use-cases-section {
  position: relative;
  width: 100%;
  padding: 6.5rem 2rem 6rem;
  background: linear-gradient(180deg, #f7f6fe 0%, #ffffff 50%, #f9f8ff 100%);
  border-bottom: 1px solid rgba(117, 75, 231, 0.08);
}

.use-cases-container {
  max-width: 1280px;
  margin: 0 auto;
}

.use-cases-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3.5rem;
}

.usecases-tag {
  color: var(--primary);
  background: rgba(117, 75, 231, 0.08);
  border: 1px solid rgba(117, 75, 231, 0.18);
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-full);
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.usecases-title {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #0f172a;
  margin-bottom: 1rem;
}

.usecases-subtitle {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #475569;
  max-width: 680px;
  margin: 0 auto;
}

.use-cases-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.use-case-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(117, 75, 231, 0.16);
  border-radius: 22px;
  padding: 1.8rem 1.5rem;
  box-shadow: 0 10px 30px rgba(117, 75, 231, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease, border-color 0.35s ease;
}

.use-case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(117, 75, 231, 0.15);
  border-color: rgba(117, 75, 231, 0.35);
}

.use-case-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(117, 75, 231, 0.1);
}

.use-case-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-sales { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.icon-cx { background: rgba(168, 85, 247, 0.12); color: #9333ea; }
.icon-ops { background: rgba(16, 185, 129, 0.12); color: #059669; }
.icon-products { background: rgba(236, 72, 153, 0.12); color: #db2777; }

.use-case-category-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
  display: block;
}

.use-case-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.use-case-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.use-case-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #475569;
}

.use-case-list strong {
  color: #0f172a;
  font-weight: 700;
}

.bullet-dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: 6px;
}

/* ==========================================================================
   Section 10: Final High-Conversion CTA (Olbrite Deep Luxury Purple)
   ========================================================================== */
.final-cta-section {
  position: relative;
  width: 100%;
  padding: 5.5rem 2rem 6.5rem;
  background: #ffffff;
}

.final-cta-container {
  max-width: 1180px;
  margin: 0 auto;
}

.final-cta-card {
  position: relative;
  background: linear-gradient(135deg, #100624 0%, #1e0b3e 45%, #2a0845 100%);
  border-radius: 32px;
  padding: 4.5rem 3.5rem;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(17, 6, 39, 0.45);
  border: 1px solid rgba(157, 125, 248, 0.25);
  text-align: center;
}

.final-cta-ambient-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 350px;
  background: radial-gradient(ellipse, rgba(117, 75, 231, 0.45) 0%, rgba(236, 72, 153, 0.15) 50%, transparent 80%);
  pointer-events: none;
  filter: blur(40px);
}

.final-cta-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-cta-tag {
  color: #c084fc;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  background: rgba(157, 125, 248, 0.15);
  border: 1px solid rgba(157, 125, 248, 0.3);
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-full);
  display: inline-block;
}

.final-cta-title {
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  font-weight: 850;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

.final-cta-subtitle {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin-bottom: 2.5rem;
  max-width: 640px;
}

.final-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.btn-cta-main {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 2.4rem;
  font-size: 1.05rem;
  font-weight: 750;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #754be7 0%, #ec4899 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(117, 75, 231, 0.4);
  transition: all 0.3s var(--ease-spring);
}

.btn-cta-main:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 35px rgba(117, 75, 231, 0.55);
}

.btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2.2rem;
  font-size: 1.05rem;
  font-weight: 750;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.3s var(--ease-spring);
}

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

.final-cta-trust {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: #94a3b8;
  font-weight: 500;
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================================
   Section 11: Structured Multi-Column Footer
   ========================================================================== */
.footer {
  border-top: 1px solid rgba(117, 75, 231, 0.1);
  padding: 5rem 2rem 3rem;
  background: #ffffff;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: 3rem;
}

.footer-col-brand {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-brand-logo img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.footer-tagline {
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--primary);
  margin: 0;
}

.footer-subtext {
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
  max-width: 280px;
}

.footer-copyright-note {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 1.5rem;
}

.footer-heading {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links-list a {
  font-size: 0.86rem;
  color: #475569;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.footer-links-list a:hover {
  color: var(--primary);
  transform: translateX(2px);
}

.footer-links-list a.highlight-link {
  color: var(--primary);
  font-weight: 700;
}

/* ==========================================================================
   Responsive & Mobile Improvements (Accordion Menu + Compact Stage)
   ========================================================================== */
@media (max-width: 900px) {
  /* Compact Top Navbar with seamless backdrop */
  .navbar {
    padding: 0.65rem 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(117, 75, 231, 0.08);
  }

  .navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
  }

  .brand-logo img {
    height: 30px;
  }

  /* Hamburger toggle appears - borderless 3 lines */
  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .hamburger-bar {
    width: 22px;
    height: 2px;
    background-color: var(--text-main);
    border-radius: 2px;
    transition: all 0.3s var(--ease-spring);
  }

  .mobile-menu-toggle.open .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background-color: var(--primary);
  }

  .mobile-menu-toggle.open .hamburger-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .mobile-menu-toggle.open .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background-color: var(--primary);
  }

  /* Accordion mobile drawer - edge-to-edge bounds so bottom button is never cut off */
  .nav-menu-wrapper {
    position: absolute;
    top: 100%;
    left: -1.25rem;
    width: calc(100% + 2.5rem);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 1.5rem;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    border-bottom: none;
    box-shadow: none;
    pointer-events: none;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.3s ease;
  }

  .nav-menu-wrapper.accordion-open {
    max-height: 480px;
    opacity: 1;
    visibility: visible;
    padding: 1rem 1.5rem 1.75rem;
    border-bottom: 1px solid rgba(117, 75, 231, 0.15);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

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

  .nav-links a {
    display: block;
    width: 100%;
    padding: 0.75rem 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(117, 75, 231, 0.08);
  }

  .nav-actions {
    width: 100%;
    margin-top: 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding-bottom: 0;
  }

  .language-switcher {
    align-self: center;
    margin-bottom: 0.35rem;
  }

  .btn-login {
    text-align: center;
    padding: 0.55rem;
    font-size: 0.95rem;
  }

  .btn-primary, .btn-secondary {
    width: 100%;
    text-align: center;
    padding: 0.8rem 1.25rem;
    font-size: 0.98rem;
  }

  /* Mobile Hero Stage Optimizations */
  .hero-scroll-container {
    height: 100vh; /* No scroll needed before entering */
    min-height: 100vh;
    overflow: hidden;
  }

  .hero-scroll-container.unlocked {
    height: 100vh; /* Scroll immediately down to core solution */
    min-height: 100vh;
    overflow: visible;
  }

  /* Engraved Glass Branding on Mobile */
  .glass-engraving {
    top: 36%;
    gap: 0.55rem;
  }

  .engraved-mark {
    width: 46px;
    height: 46px;
  }

  .engraved-logo {
    width: 115px;
  }

  .hero-sticky-stage {
    align-items: stretch;
  }

  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 8.75rem 1.25rem 2rem;
    margin-top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .hero-left-column {
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .hero-status-pill {
    padding: 0.95rem 1.75rem;
    font-size: 1.1rem;
    width: 90%;
    max-width: 360px;
    justify-content: center;
    top: 72%;
  }

  .hero-status-pill.docked {
    top: 6.4rem; /* All agents active un poco más abajo */
    left: 50%;
    transform: translateX(-50%) !important;
    animation: none !important;
    width: auto;
    font-size: 0.82rem;
  }

  .hero-title {
    font-size: 2.15rem;
    line-height: 1.16;
    justify-content: center;
    min-height: 2.4em;
    margin-top: 0.25rem; /* Frase dinámica más arriba */
    margin-bottom: 0;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
    width: 100%;
    max-width: 325px;
    margin-top: auto; /* Empuja botones hacia abajo */
    margin-bottom: 1.25rem;
  }

  .hero-social-proof {
    justify-content: center;
    padding-top: 0;
    margin-bottom: 0.5rem; /* Franja inferior hacia abajo */
  }

  .hero-features-ribbon {
    display: none;
  }

  .hero-media-overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.88) 45%,
      rgba(255, 255, 255, 0.3) 100%
    );
  }

  .section {
    padding: 4.5rem 1.25rem;
  }

  /* Integrations Marquee on Mobile */
  .integrations-section {
    padding: 4rem 0 2.75rem;
  }

  .integrations-header {
    margin-bottom: 2.25rem;
  }

  .integrations-header .section-subtitle {
    font-size: 0.96rem;
  }

  .integrations-marquee-area {
    gap: 0.9rem;
  }

  .marquee-track {
    gap: 0.9rem;
  }

  .integration-pill {
    padding: 0.52rem 1.1rem;
    gap: 0.65rem;
  }

  .integration-icon {
    width: 21px;
    height: 21px;
  }

  .integration-label {
    font-size: 0.86rem;
  }

  .cta-banner {
    padding: 2.5rem 1.5rem;
  }

  /* Mindy AI Concierge Mobile Placement & Scaling (+60% scale increase) */
  .mindy-avatar-container {
    right: 0;
    bottom: 0;
    max-width: calc(100vw - 20px);
    z-index: 18;
  }

  .mindy-video-wrapper {
    height: clamp(304px, 43vh, 384px);
  }

  .mindy-speech-bubble {
    padding: 0.45rem 0.85rem;
    margin-bottom: 0.35rem;
    border-radius: 14px 14px 2px 14px;
    align-self: flex-end;
    margin-right: 0.35rem;
    max-width: calc(100vw - 20px);
  }

  .mindy-bubble-badge {
    font-size: 0.64rem;
    margin-bottom: 0.15rem;
    gap: 0.45rem;
  }

  .mindy-sound-toggle {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .mindy-sound-toggle svg {
    width: 12px;
    height: 12px;
  }

  .mindy-online-dot {
    width: 6px;
    height: 6px;
  }

  .mindy-bubble-text {
    font-size: 0.82rem;
  }

  /* What is an Agent Section Responsive */
  .what-is-an-agent-section {
    padding: 4.5rem 1.25rem 3.5rem;
  }

  .agent-explainer-container {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .agent-explainer-right {
    position: relative;
    top: auto;
  }

  .agent-explainer-left {
    text-align: center;
    align-items: center;
  }

  .agent-explainer-lead {
    margin: 0 auto;
    font-size: 1rem;
  }

  .agent-cta-row {
    justify-content: center;
  }

  .agent-comparison-card {
    width: 100%;
    max-width: 540px;
    padding: 1.15rem 1rem;
  }

  .comparison-columns-wrap {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .comparison-column {
    padding: 0.85rem;
  }

  .agent-components-pill-bar {
    gap: 0.35rem;
    padding: 0.35rem 0.4rem;
  }

  .comp-pill {
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
  }

  .stage-hotspot .hotspot-reveal-panel {
    display: none; /* Mobile users rely on the dedicated active detail card below */
  }

  .agent-active-component-card {
    padding: 1rem 1.15rem;
  }

  .active-card-title {
    font-size: 1.12rem;
  }

  .active-card-text {
    font-size: 0.86rem;
  }

  /* Why Choose Olbrite Responsive */
  .why-choose-section {
    padding: 4.5rem 1.25rem 4rem;
  }

  .why-choose-top-grid {
    grid-template-columns: 1fr;
    gap: 2.75rem;
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .why-choose-intro {
    align-items: center;
  }

  .why-choose-title {
    font-size: 2.15rem;
  }

  .why-choose-btn-row {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
  }

  .handwritten-accent {
    transform: rotate(-3deg);
    font-size: 2rem;
  }

  .why-choose-micro-badge {
    margin: 0.4rem auto 0;
    text-align: center;
  }

  .why-choose-pillars-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
    gap: 1.5rem;
  }

  .why-pillar-card {
    border-radius: 20px;
  }

  .pillar-hover-chip {
    position: static;
    width: fit-content;
    max-width: calc(100% - 2rem);
    box-sizing: border-box;
    margin: 0 auto 1rem;
    white-space: normal;
    justify-content: center;
    text-align: center;
    opacity: 1;
    transform: none;
  }

  .why-pillar-card:hover .pillar-hover-chip {
    transform: none;
  }

  .why-credentials-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
    border-radius: 20px;
  }

  .cred-divider {
    display: none;
  }

  .cred-item {
    gap: 0.75rem;
  }

  .cred-quote-item {
    max-width: 100%;
    border-top: 1px solid rgba(117, 75, 231, 0.12);
    padding-top: 1.25rem;
    padding-left: 0;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .nav-menu-wrapper {
    gap: 0.9rem;
  }

  .nav-links {
    gap: 0.8rem;
  }

  .nav-links a {
    font-size: 0.82rem;
  }

  .nav-actions .btn-primary {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ==========================================================================
   The Olbrite Ecosystem (3D Floating Stage, Perspective & Pedestal)
   ========================================================================== */
/* ==========================================================================
   The Olbrite Ecosystem (3D Floating Stage, Cinematic Depth & Pedestal)
   ========================================================================== */
.ecosystem-section {
  position: relative;
  padding: 3.5rem 1.5rem 4.5rem;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, rgba(243, 238, 255, 0.95) 0%, rgba(249, 250, 255, 1) 75%);
}

.ecosystem-section::before,
.ecosystem-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 5;
}

.ecosystem-section::before {
  top: 0;
  background: linear-gradient(180deg, #f9faff 0%, rgba(249, 250, 255, 0) 100%);
}

.ecosystem-section::after {
  bottom: 0;
  background: linear-gradient(0deg, #f9faff 0%, rgba(249, 250, 255, 0) 100%);
}

.ecosystem-bg-ambient {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 850px;
  height: 420px;
  background: radial-gradient(ellipse at center, rgba(157, 125, 248, 0.2) 0%, rgba(236, 72, 153, 0.07) 45%, rgba(249, 250, 255, 0) 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}

.ecosystem-container {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 6;
}

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

.ecosystem-tag {
  letter-spacing: 0.14em;
  font-weight: 750;
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
}

.ecosystem-title {
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.15;
  margin: 0.35rem 0 0.5rem;
}

.ecosystem-title .title-highlight {
  display: inline-block;
  background: linear-gradient(135deg, #2e1065 0%, #581c87 40%, #754be7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ecosystem-subtitle {
  font-size: 0.98rem;
  color: #64748b;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.5;
}

/* 3D Stage Wrapper */
.ecosystem-stage-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  padding-bottom: 10px;
}

.ecosystem-3d-scene {
  perspective: 1200px;
  perspective-origin: 50% 50%;
  width: 100%;
  max-width: 1200px;
  height: 440px;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
}

.ecosystem-cards-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Base Card Glassmorphism - Compact & Balanced (Buttons Removed) */
.ecosystem-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 345px;
  max-width: 90vw;
  height: 425px;
  margin-top: -212px;
  margin-left: -172px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 1.35rem 1.45rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.86s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.86s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.86s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.86s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
  cursor: pointer;
  user-select: none;
  will-change: transform, filter, opacity;
}

.card-glass-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  transform: rotate(25deg);
  opacity: 0.6;
  transition: opacity 0.5s ease, transform 0.6s ease;
}

.ecosystem-card:hover .card-glass-shine {
  opacity: 0.85;
  transform: rotate(25deg) translateY(-8px);
}

/* 3D Positions & Depth of Field (Desktop) */
@media (min-width: 993px) {
  /* Center Card: in focus, sharp, foreground, prominent */
  .ecosystem-card[data-position="center"] {
    transform: translate3d(0, 0, 75px) scale(1.02);
    filter: blur(0px);
    opacity: 1;
    border-color: rgba(117, 75, 231, 0.38);
    box-shadow: 0 25px 70px rgba(117, 75, 231, 0.2), 0 0 45px rgba(157, 125, 248, 0.25), inset 0 1px 2px rgba(255, 255, 255, 1);
    z-index: 15;
    pointer-events: auto;
  }

  .ecosystem-card[data-position="center"]:hover {
    transform: translate3d(0, -6px, 90px) scale(1.035);
    box-shadow: 0 35px 85px rgba(117, 75, 231, 0.26), 0 0 55px rgba(157, 125, 248, 0.35);
    border-color: var(--primary);
  }

  /* Left Card: distant, tilted, blurred */
  .ecosystem-card[data-position="left"] {
    transform: translate3d(-370px, 0, -90px) rotateY(18deg) scale(0.88);
    filter: blur(2.5px);
    opacity: 0.72;
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: -15px 20px 45px rgba(117, 75, 231, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.95);
    z-index: 8;
    pointer-events: auto;
  }

  .ecosystem-card[data-position="left"]:hover {
    transform: translate3d(-360px, -6px, -45px) rotateY(12deg) scale(0.91);
    filter: blur(1px);
    opacity: 0.88;
    border-color: rgba(117, 75, 231, 0.3);
  }

  /* Right Card: distant, tilted, blurred */
  .ecosystem-card[data-position="right"] {
    transform: translate3d(370px, 0, -90px) rotateY(-18deg) scale(0.88);
    filter: blur(2.5px);
    opacity: 0.72;
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 15px 20px 45px rgba(117, 75, 231, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.95);
    z-index: 8;
    pointer-events: auto;
  }

  .ecosystem-card[data-position="right"]:hover {
    transform: translate3d(360px, -6px, -45px) rotateY(-12deg) scale(0.91);
    filter: blur(1px);
    opacity: 0.88;
    border-color: rgba(117, 75, 231, 0.3);
  }
}

/* Card Header & Icons */
.card-top-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.card-badge-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(117, 75, 231, 0.08);
  border: 1px solid rgba(117, 75, 231, 0.16);
  box-shadow: 0 4px 12px rgba(117, 75, 231, 0.06);
}

.badge-brand-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.badge-development {
  background: linear-gradient(135deg, rgba(117, 75, 231, 0.15) 0%, rgba(236, 72, 153, 0.15) 100%);
  border-color: rgba(117, 75, 231, 0.3);
  color: var(--primary);
}

.code-bracket-symbol {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--primary);
}

.badge-experts {
  background: rgba(117, 75, 231, 0.08);
  color: var(--primary);
}

.card-title-group {
  flex: 1;
}

.card-main-heading {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 0.18rem;
}

.card-sub-heading {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
  margin: 0;
}

/* ==========================================================================
   Card Mockup 1: Olbrite Systems (Height 165px)
   ========================================================================== */
.mockup-systems {
  background: linear-gradient(180deg, rgba(248, 249, 255, 0.95) 0%, rgba(243, 244, 255, 0.85) 100%);
  border: 1px solid rgba(117, 75, 231, 0.14);
  border-radius: 16px;
  padding: 0.65rem 0.7rem;
  margin-bottom: 0.75rem;
  display: flex;
  gap: 0.55rem;
  height: 165px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.mockup-channels-col {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  width: 82px;
  min-width: 82px;
}

.mini-channel-pill {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 0.18rem 0.35rem;
  font-size: 0.62rem;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.28rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.channel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-wa { background: #25D366; box-shadow: 0 0 4px rgba(37, 211, 102, 0.5); }
.dot-ig { background: #E1306C; box-shadow: 0 0 4px rgba(225, 48, 108, 0.5); }
.dot-fb { background: #1877F2; box-shadow: 0 0 4px rgba(24, 119, 242, 0.5); }
.dot-sms { background: #754be7; box-shadow: 0 0 4px rgba(117, 75, 231, 0.5); }
.dot-mail { background: #EA4335; box-shadow: 0 0 4px rgba(234, 67, 53, 0.5); }
.dot-web { background: #0284c7; box-shadow: 0 0 4px rgba(2, 132, 199, 0.5); }

.mockup-feed-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.s3-widget {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(117, 75, 231, 0.16);
  border-radius: 10px;
  padding: 0.4rem 0.55rem;
  box-shadow: 0 3px 10px rgba(117, 75, 231, 0.04);
}

.widget-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.3rem;
}

.widget-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.66rem;
  color: var(--primary);
}

.pulsing-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 5px #10b981;
  animation: pulseDot 1.6s infinite;
}

.widget-feed-list {
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
}

.feed-item {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.64rem;
}

.feed-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.avatar-1 { background: linear-gradient(135deg, #754be7, #9d7df8); }
.avatar-2 { background: linear-gradient(135deg, #ec4899, #f472b6); }
.avatar-3 { background: linear-gradient(135deg, #06b6d4, #38bdf8); }

.feed-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}

.feed-name {
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-meta {
  color: #94a3b8;
  font-size: 0.58rem;
  margin-left: 0.25rem;
}

.mockup-metric-badge {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(117, 75, 231, 0.16);
  border-radius: 10px;
  padding: 0.32rem 0.55rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 3px 10px rgba(117, 75, 231, 0.04);
}

.metric-top {
  display: flex;
  flex-direction: column;
}

.metric-label {
  font-size: 0.56rem;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
}

.metric-count {
  font-size: 1rem;
  font-weight: 850;
  color: #0f172a;
  line-height: 1.1;
}

.metric-delta {
  font-size: 0.6rem;
  font-weight: 700;
  color: #10b981;
}

.metric-bars-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}

.chart-bar {
  width: 4px;
  height: var(--bar-h);
  background: rgba(117, 75, 231, 0.28);
  border-radius: 2px;
  transition: height 0.6s ease;
}

.chart-bar.active {
  background: var(--primary);
  box-shadow: 0 0 6px rgba(117, 75, 231, 0.5);
}

/* ==========================================================================
   Card Mockup 2: Olbrite Development (Height 165px)
   ========================================================================== */
.mockup-dev {
  background: linear-gradient(180deg, #18112e 0%, #0d091e 100%);
  border: 1px solid rgba(117, 75, 231, 0.35);
  border-radius: 16px;
  padding: 0.65rem 0.7rem;
  margin-bottom: 0.75rem;
  height: 165px;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 0.55rem;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 6px 20px rgba(0, 0, 0, 0.25);
}

.mockup-code-terminal {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.terminal-tab-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.35rem;
}

.terminal-traffic-lights {
  display: flex;
  gap: 3px;
}

.terminal-traffic-lights span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.terminal-traffic-lights span:nth-child(1) { background: #ff5f56; }
.terminal-traffic-lights span:nth-child(2) { background: #ffbd2e; }
.terminal-traffic-lights span:nth-child(3) { background: #27c93f; }

.terminal-tabs {
  display: flex;
  gap: 0.15rem;
  overflow-x: hidden;
}

.term-tab {
  background: transparent;
  border: none;
  font-size: 0.62rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #94a3b8;
  padding: 0.12rem 0.32rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.term-tab.active {
  background: rgba(117, 75, 231, 0.4);
  color: #ffffff;
  font-weight: 600;
}

.terminal-code-body {
  flex: 1;
  overflow: hidden;
}

.code-snippet {
  display: none;
  font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  line-height: 1.38;
  color: #e2e8f0;
  margin: 0;
  white-space: pre;
}

.code-snippet.active {
  display: block;
}

.token-kw { color: #c084fc; font-weight: 600; }
.token-fn { color: #67e8f9; }
.token-str { color: #86efac; }
.token-bool { color: #fb923c; }
.token-prop { color: #f1f5f9; }

.mockup-phone-frame {
  width: 72px;
  min-width: 72px;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 0.3rem 0.25rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
}

.phone-screen {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.phone-notch {
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  align-self: center;
  margin-bottom: 0.15rem;
}

.phone-app-header {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: #ffffff;
}

.phone-logo-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--primary-glow);
}

.phone-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  font-size: 0.52rem;
  color: #cbd5e1;
}

.phone-nav-row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.14rem 0.24rem;
  border-radius: 4px;
  white-space: nowrap;
}

.p-icon {
  width: 5px;
  height: 5px;
  border-radius: 2px;
}

.p-icon-1 { background: #38bdf8; }
.p-icon-2 { background: #c084fc; }
.p-icon-3 { background: #f472b6; }
.p-icon-4 { background: #34d399; }

.floating-tech-badges {
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  display: flex;
  gap: 0.25rem;
  z-index: 5;
}

.tech-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  animation: floatBadge 3.2s ease-in-out infinite alternate;
}

.tech-badge.badge-cloud { animation-delay: 0s; }
.tech-badge.badge-db { animation-delay: 0.6s; }
.tech-badge.badge-link { animation-delay: 1.2s; }
.tech-badge.badge-cube { animation-delay: 1.8s; }

@keyframes floatBadge {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

/* ==========================================================================
   Card Mockup 3: Olbrite Experts (Height 165px)
   ========================================================================== */
.mockup-experts {
  background: linear-gradient(180deg, rgba(248, 249, 255, 0.95) 0%, rgba(243, 244, 255, 0.85) 100%);
  border: 1px solid rgba(117, 75, 231, 0.14);
  border-radius: 16px;
  padding: 0.65rem 0.7rem;
  margin-bottom: 0.75rem;
  height: 165px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.mockup-roadmap-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(117, 75, 231, 0.16);
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
  box-shadow: 0 3px 10px rgba(117, 75, 231, 0.04);
  display: flex;
  flex-direction: column;
}

.roadmap-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.22rem;
}

.roadmap-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 5px rgba(117, 75, 231, 0.5);
}

.roadmap-header h4 {
  font-size: 0.7rem;
  font-weight: 750;
  color: #0f172a;
  margin: 0;
}

.roadmap-steps-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
}

.roadmap-step {
  display: flex;
  align-items: flex-start;
  gap: 0.28rem;
  font-size: 0.6rem;
  padding: 0.15rem 0.28rem;
  border-radius: 6px;
}

.roadmap-step.done {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
}

.roadmap-step.in-progress {
  background: rgba(117, 75, 231, 0.1);
  color: var(--primary);
  font-weight: 700;
}

.roadmap-step.next {
  background: rgba(0, 0, 0, 0.03);
  color: #94a3b8;
}

.step-check {
  font-weight: 800;
  font-size: 0.65rem;
  line-height: 1;
}

.step-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.step-info strong {
  font-size: 0.62rem;
}

.step-desc {
  font-size: 0.52rem;
  color: #64748b;
}

.mockup-consult-badge {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(117, 75, 231, 0.16);
  border-radius: 10px;
  padding: 0.32rem 0.55rem;
  box-shadow: 0 3px 10px rgba(117, 75, 231, 0.04);
}

.consult-badge-header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  color: #1e1b4b;
}

.consult-stat {
  font-size: 0.58rem;
  color: #64748b;
  margin: 0.06rem 0 0.16rem;
}

.consult-metrics-row {
  display: flex;
  justify-content: space-around;
  gap: 0.4rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 0.16rem;
}

.c-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-val {
  font-size: 0.82rem;
  font-weight: 850;
  color: var(--primary);
  line-height: 1.1;
}

.c-sub {
  font-size: 0.54rem;
  color: #64748b;
}

/* ==========================================================================
   Features List & CTA Buttons
   ========================================================================== */
.card-features-list {
  list-style: none;
  margin: 0.5rem 0 0.75rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.36rem;
}

.card-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.75rem;
  color: #334155;
  line-height: 1.32;
}

.check-icon {
  width: 15px;
  height: 15px;
  min-width: 15px;
  border-radius: 50%;
  background: rgba(117, 75, 231, 0.12);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  margin-top: 1px;
}

.card-cta-row {
  margin-top: auto;
}

.card-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.62rem 1.15rem;
  border-radius: var(--radius-full);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.35s var(--ease-spring);
}

.btn-systems {
  background: #ffffff;
  color: var(--primary);
  border: 1.5px solid rgba(117, 75, 231, 0.25);
  box-shadow: 0 4px 12px rgba(117, 75, 231, 0.08);
}

.btn-systems:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(117, 75, 231, 0.25);
}

.btn-development {
  background: linear-gradient(135deg, #754be7 0%, #ec4899 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 6px 20px rgba(117, 75, 231, 0.35);
}

.btn-development:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 25px rgba(117, 75, 231, 0.45);
}

.btn-experts {
  background: #ffffff;
  color: #1e1b4b;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.btn-experts:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(117, 75, 231, 0.12);
}

/* ==========================================================================
   Navigation Arrows & Pagination Dots
   ========================================================================== */
.stage-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(117, 75, 231, 0.22);
  color: #1e1b4b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 25;
  box-shadow: 0 6px 20px rgba(117, 75, 231, 0.14);
  transition: all 0.3s var(--ease-spring);
}

.stage-nav-btn:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 25px rgba(117, 75, 231, 0.35);
  border-color: var(--primary);
}

.stage-nav-prev {
  left: max(0.5rem, calc(50% - 610px));
}

.stage-nav-next {
  right: max(0.5rem, calc(50% - 610px));
}

.ecosystem-dots-container {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

.ecosystem-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(117, 75, 231, 0.25);
  border: none;
  cursor: pointer;
  transition: all 0.35s ease;
  padding: 0;
}

.ecosystem-dot.active {
  width: 24px;
  border-radius: 6px;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(117, 75, 231, 0.6);
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 992px) {
  .ecosystem-section {
    padding: 3rem 1rem 3.5rem;
  }

  .ecosystem-3d-scene {
    perspective: 900px;
    height: 435px;
  }

  .ecosystem-card {
    width: 90%;
    max-width: 350px;
    height: 420px;
    margin-top: -210px;
    margin-left: -45%;
  }

  .ecosystem-card[data-position="center"] {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    filter: blur(0px);
    pointer-events: auto;
    z-index: 10;
    box-shadow: 0 20px 50px rgba(117, 75, 231, 0.16);
  }

  .ecosystem-card[data-position="left"] {
    transform: translate3d(-110%, 0, 0) scale(0.9);
    opacity: 0;
    filter: blur(3px);
    pointer-events: none;
    z-index: 1;
  }

  .ecosystem-card[data-position="right"] {
    transform: translate3d(110%, 0, 0) scale(0.9);
    opacity: 0;
    filter: blur(3px);
    pointer-events: none;
    z-index: 1;
  }

  .stage-nav-prev {
    left: 0.5rem;
  }

  .stage-nav-next {
    right: 0.5rem;
  }
}

@media (max-width: 640px) {
  .ecosystem-card {
    width: 94%;
    margin-left: -47%;
    padding: 1.25rem 1.15rem;
  }

  .stage-nav-btn {
    width: 38px;
    height: 38px;
  }
}

/* ==========================================================================
   Responsive Adaptations for Strategic Sections (AI Teams, Pre-Analysis, Proof, Use Cases, CTA, Footer)
   ========================================================================== */
@media (max-width: 992px) {
  .pipeline-flow-track {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
  }

  .pipeline-connector {
    transform: rotate(90deg);
    margin: 0.2rem auto;
    animation: none;
  }

  .teams-collaboration-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .preanalysis-pillars-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .proof-cards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .use-cases-grid-4 {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .footer-col-brand {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .ai-teams-section,
  .pre-analysis-section,
  .proof-section,
  .use-cases-section,
  .final-cta-section {
    padding: 4.5rem 1.25rem;
  }

  .pre-analysis-chat-frame {
    padding: 1.5rem 1.15rem;
    border-radius: 20px;
  }

  .chat-frame-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }

  .preanalysis-intent-chips {
    gap: 0.5rem;
    justify-content: flex-start;
  }

  .intent-chip {
    padding: 0.55rem 0.95rem;
    font-size: 0.82rem;
  }

  .preanalysis-pillars-wrap {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .proof-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

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

  .final-cta-card {
    padding: 3rem 1.25rem;
    border-radius: 24px;
  }

  .final-cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .btn-cta-main,
  .btn-cta-secondary {
    width: 100%;
    justify-content: center;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-col-brand {
    grid-column: span 1;
  }
}