/* ============================================
   SIMTHEORY WEBSITE - MAIN STYLESHEET
   Clean, modern, enterprise-credible design
   ============================================ */

/* CSS Variables */
:root {
  /* Colors */
  --primary-blue: #2563eb;
  --primary-blue-hover: #1d4ed8;
  --dark-bg: #0f172a;
  --dark-bg-lighter: #1e293b;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --white: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --border-color: #e2e8f0;

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

  /* Spacing */
  --section-padding: 120px;
  --container-max: 1200px;
  --container-narrow: 800px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* Reset & Base */
.website-page *,
.website-page *::before,
.website-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.website-page {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  flex: 1 0 auto;
}

.website-page a {
  color: inherit;
  text-decoration: none;
}

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

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

.website-page ul,
.website-page ol {
  list-style: none;
}

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

.website-page h1,
.website-page h2,
.website-page h3,
.website-page h4,
.website-page h5,
.website-page h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

.website-page h1 {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  letter-spacing: -0.02em;
}

.website-page h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
}

.website-page h3 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  letter-spacing: -0.01em;
}

.website-page h4 {
  font-size: 1.25rem;
}

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

/* Accent font for headlines */
.website-page .accent-serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* Gradient text effect - Animated wave */
.website-page .gradient-highlight {
  background: linear-gradient(90deg, #0f172a, #1e40af, #3b82f6, #6366f1, #0f172a);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientWave 4s ease-in-out infinite;
  display: inline-block;
  position: relative;
  padding: 0.15em 0.1em 0.25em 0.1em;
  margin: -0.15em -0.1em -0.25em -0.1em;
  overflow: visible;
}

@keyframes gradientWave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================
   LAYOUT
   ============================================ */

.website-page .container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

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

.website-page section {
  padding: var(--section-padding) 0;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary-blue);
  color: white;
}

/* Override .website-page a { color: inherit } so btn-primary stays white */
.website-page .btn-primary {
  color: white;
}

.btn-primary:hover {
  background: var(--primary-blue-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-dark {
  background: var(--dark-bg);
  color: white;
}

.btn-dark:hover {
  background: var(--dark-bg-lighter);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

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

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

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

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

.btn-lg {
  padding: 16px 32px;
  font-size: 16px;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 14px;
}

/* Primary button - Navy gradient */
.website-page .btn-gradient {
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  color: white;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.25);
}

.website-page .btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 64, 175, 0.35);
}

.website-page .btn-soft {
  background: white;
  color: #1e293b;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.website-page .btn-soft:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.website-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
}

.website-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.website-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.website-header .logo img {
  height: 21px;
  width: auto;
}

.website-header .logo img.logo-light {
  display: block;
}

.website-header .logo img.logo-dark {
  display: none !important;
}

.website-header .nav-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.website-header .nav-item {
  position: relative;
}

.website-header .nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.website-header .nav-link:hover {
  color: var(--text-primary);
  background: var(--gray-50);
}

.website-header .nav-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.website-header .nav-item:hover .nav-link svg {
  transform: rotate(180deg);
}

/* Dropdown */
.website-header .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-base);
}

.website-header .nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.website-header .dropdown-item {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.website-header .dropdown-item:hover {
  background: var(--gray-50);
}

.website-header .dropdown-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.website-header .dropdown-item-desc {
  font-size: 13px;
  color: var(--text-muted);
}

.website-header .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.website-header .login-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.website-header .login-link:hover {
  color: var(--text-primary);
}

/* Mobile menu toggle */
.website-header .mobile-menu-toggle {
  display: none;
  padding: 8px;
  color: var(--text-primary);
}

.website-header .mobile-menu-toggle svg {
  width: 24px;
  height: 24px;
}

/* ============================================
   HERO SECTION - NEW DESIGN
   ============================================ */

.website-page .hero-new {
  padding-top: 140px;
  padding-bottom: 80px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle grid pattern */
.website-page .hero-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Floating orbs for visual interest - Blue tones */
.website-page .hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
}

.website-page .hero-orb-1 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  top: -100px;
  right: -100px;
}

.website-page .hero-orb-2 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  bottom: 0;
  left: -50px;
}

.website-page .hero-new .container {
  position: relative;
  z-index: 1;
}

.website-page .hero-new-content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* Eyebrow / tag */
.website-page .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.website-page .hero-eyebrow-dot {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  border-radius: 50%;
}

/* Main headline */
.website-page .hero-new h1 {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #0f172a;
  margin-bottom: 24px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.website-page .hero-subtitle-new {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: #64748b;
  max-width: 880px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

.website-page .hero-ctas-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 64px;
}

/* ============================================
   FLOATING UI SHOWCASE
   ============================================ */

/* ============================================
   HERO SHOWCASE - Animated Agent Demo
   ============================================ */

.website-page .hero-showcase {
  --sc-bg: #FFFFFF;
  --sc-surface: #F4F4F5;
  --sc-text: #18181B;
  --sc-muted: #52525B;
  --sc-dim: #71717A;
  --sc-accent: #4964D8;
  --sc-border: #E4E4E7;
  --sc-green: #16A34A;
  --sc-amber: #F59E0B;
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  height: 600px;
}

/* ---- Theme color fan swatches (Pantone-style) ---- */
.website-page .sc-theme-label {
  position: absolute;
  right: calc(50% + 80px);
  top: -2px;
  transform: rotate(-3deg);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: #94a3b8;
  white-space: nowrap;
  z-index: 7;
  pointer-events: none;
  letter-spacing: 0.01em;
}

.website-page .sc-theme-fan {
  position: absolute;
  left: calc(50% + 60px);
  top: 80px; /* pivot ~38px below browser top edge */
  z-index: 8; /* behind browser (z-index 10) */
}

.website-page .sc-theme-dot {
  position: absolute;
  width: 28px;
  height: 90px;
  border-radius: 4px;
  cursor: pointer;
  transform-origin: center bottom;
  left: -14px;
  bottom: 0;
  --rot: 0deg;
  transform: rotate(var(--rot));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  box-shadow: 0 1px 6px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
}

/* Rivet hole at pivot end */
.website-page .sc-theme-dot::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(128,128,128,0.18);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.website-page .sc-theme-dot:nth-child(1) { --rot: -40deg; }
.website-page .sc-theme-dot:nth-child(2) { --rot: -20deg; }
.website-page .sc-theme-dot:nth-child(4) { --rot: 20deg; }
.website-page .sc-theme-dot:nth-child(5) { --rot: 40deg; }

.website-page .sc-theme-dot:hover {
  transform: rotate(var(--rot)) translateY(-16px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

.website-page .sc-theme-dot.sc-dot-active {
  transform: rotate(var(--rot)) translateY(-12px);
  box-shadow: 0 0 0 2px white, 0 0 0 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
}

/* Smooth transitions for theme color swaps */
.website-page .showcase-main,
.website-page .showcase-browser-bar,
.website-page .showcase-url,
.website-page .sc-content,
.website-page .sc-user-bubble,
.website-page .sc-ai-name,
.website-page .sc-ai-text,
.website-page .sc-bar,
.website-page .sc-deck-slides,
.website-page .sc-deck-label,
.website-page .sc-flyout,
.website-page .sc-input-area,
.website-page .sc-input-toolbar,
.website-page .sc-tool-row,
.website-page .sc-tool-lbl,
.website-page .sc-fly-file,
.website-page .sc-fly-file-name,
.website-page .sc-fly-file-meta,
.website-page .sc-fly-title,
.website-page .sc-fly-header,
.website-page .sc-fly-goal,
.website-page .sc-fly-task,
.website-page .sc-slide,
.website-page .sc-tabs,
.website-page .sc-tab,
.website-page .sc-tabs-right {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Pause all animations when frozen */
.website-page .hero-showcase.sc-paused * {
  animation-play-state: paused !important;
}

/* Replay link */
.website-page .sc-replay {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.website-page .sc-replay:hover {
  color: var(--primary-blue);
}

.website-page .sc-replay.sc-replay-visible {
  opacity: 1;
  pointer-events: auto;
}

.website-page .showcase-main {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  background: white;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.08),
    0 25px 50px -12px rgba(15, 23, 42, 0.15),
    0 0 80px -20px rgba(90, 117, 230, 0.12);
  overflow: hidden;
  z-index: 10;
  height: 515px;
  display: flex;
  flex-direction: column;
}

.website-page .showcase-browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.website-page .showcase-dots { display: flex; gap: 6px; }
.website-page .showcase-dot { width: 10px; height: 10px; border-radius: 50%; }
.website-page .showcase-dot.red { background: #ef4444; }
.website-page .showcase-dot.yellow { background: #f59e0b; }
.website-page .showcase-dot.green { background: #22c55e; }

.website-page .showcase-url {
  flex: 1;
  margin-left: 12px;
  padding: 5px 12px;
  background: white;
  border-radius: 6px;
  font-size: 12px;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
}

/* Session tabs bar (simulated) */
.website-page .sc-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  height: 34px;
  background: var(--sc-bg);
  flex-shrink: 0;
  font-family: 'Inter', -apple-system, sans-serif;
}

.website-page .sc-tabs-brand {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.website-page .sc-tabs-list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.website-page .sc-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 10px;
  color: var(--sc-muted);
  background: var(--sc-surface);
  white-space: nowrap;
  cursor: default;
}

.website-page .sc-tab.sc-tab-active {
  background: var(--sc-accent);
  color: white;
}

.website-page .sc-tab-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: white;
  font-weight: 600;
}

.website-page .sc-tab-x {
  color: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
}

.website-page .sc-tab-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--sc-dim);
  flex-shrink: 0;
}

.website-page .sc-tabs-right {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--sc-muted);
}

.website-page .sc-tabs-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.website-page .sc-tabs-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: 2px;
  flex-shrink: 0;
}

/* Showcase content */
.website-page .sc-content {
  background: var(--sc-bg);
  font-family: 'Inter', -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Agent mode bar - sits above input at bottom, like the real app */
.website-page .sc-bar {
  background: var(--sc-surface);
  border-top: 1px solid var(--sc-border);
  border-left: 1px solid var(--sc-border);
  border-right: 1px solid var(--sc-border);
  border-radius: 10px 10px 0 0;
  width: 63%;
  margin: 0 auto;
  padding: 7px 12px 0;
  position: relative;
  z-index: 0;
  margin-bottom: 0;
  opacity: 0;
  animation: sc-bar-anim 24s ease infinite;
}

.website-page .sc-bar-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.website-page .sc-bar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: sc-bardot 24s ease infinite;
}

.website-page .sc-bar-status {
  position: relative;
  height: 1.2em;
  min-width: 65px;
}

.website-page .sc-bar-status span {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.website-page .sc-bar-working {
  color: var(--sc-muted);
  animation: sc-bar-w 24s ease infinite;
}

.website-page .sc-bar-done {
  color: var(--sc-green);
  animation: sc-bar-d 24s ease infinite;
}

.website-page .sc-bar-sep {
  width: 1px;
  height: 12px;
  background: var(--sc-border);
  flex-shrink: 0;
}

.website-page .sc-bar-folder {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--sc-muted);
  font-size: 11px;
  padding: 2px 8px 2px 5px;
  background: var(--sc-bg);
  border-radius: 6px;
  border: 1px solid var(--sc-border);
}

.website-page .sc-bar-folder svg { opacity: 0.7; }

.website-page .sc-bar-prog {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.website-page .sc-bar-counts {
  position: relative;
  height: 1.2em;
  min-width: 40px;
  flex-shrink: 0;
}

.website-page .sc-bar-counts span {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 11px;
  color: var(--sc-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.website-page .sc-count-a { animation: sc-count-a 24s ease infinite; }
.website-page .sc-count-b { animation: sc-count-b 24s ease infinite; }

.website-page .sc-bar-pmsgs {
  position: relative;
  flex: 1;
  height: 1em;
  min-width: 0;
}

.website-page .sc-bar-pmsgs span {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 11px;
  color: var(--sc-dim);
  white-space: nowrap;
}

.website-page .sc-pmsg-a { animation: sc-pmsg-a 24s ease infinite; }
.website-page .sc-pmsg-b { animation: sc-pmsg-b 24s ease infinite; }

.website-page .sc-bar-track {
  height: 3px;
  background: var(--sc-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.website-page .sc-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--sc-accent);
  border-radius: 2px;
  animation: sc-progress 24s ease infinite;
}

/* Chat messages - scrolling container */
.website-page .sc-msgs {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.website-page .sc-scroll {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: sc-scroll 24s ease infinite;
}

.website-page .sc-user {
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  animation: sc-fadein-4 24s ease infinite;
}

.website-page .sc-user-bubble {
  max-width: 88%;
  padding: 7px 11px;
  background: var(--sc-surface);
  border-radius: 14px 14px 4px 14px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--sc-text);
}

.website-page .sc-ai {
  display: flex;
  gap: 10px;
  opacity: 0;
  animation: sc-fadein-ai 24s ease infinite;
}

.website-page .sc-ai-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sc-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 2px;
}

.website-page .sc-ai-body { flex: 1; min-width: 0; }

.website-page .sc-ai-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--sc-text);
  margin-bottom: 4px;
}

/* AI inline text between tools */
.website-page .sc-ai-text {
  font-size: 11px;
  line-height: 1.4;
  color: var(--sc-text);
  margin: 6px 0;
  opacity: 0;
}

.website-page .sc-txt-1 { animation: sc-fadein-ai-txt1 24s ease infinite; }
.website-page .sc-txt-2 { animation: sc-fadein-ai-txt2 24s ease infinite; }
.website-page .sc-txt-3 { animation: sc-fadein-ai-txt3 24s ease infinite; }

/* Tool timeline blocks */
.website-page .sc-tool {
  padding: 3px 0;
  opacity: 0;
}

.website-page .sc-tool-1 { animation: sc-fadein-tool1 24s ease infinite; }
.website-page .sc-tool-2 { animation: sc-fadein-tool2 24s ease infinite; }
.website-page .sc-tool-3 { animation: sc-fadein-tool3 24s ease infinite; }
.website-page .sc-tool-4 { animation: sc-fadein-tool4 24s ease infinite; }

.website-page .sc-tool-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.website-page .sc-tool-chev {
  color: var(--sc-dim);
  flex-shrink: 0;
}

.website-page .sc-tool-chev-open {
  transform: rotate(90deg);
}

.website-page .sc-tool-ico {
  flex-shrink: 0;
  color: var(--sc-dim);
}

.website-page .sc-tool-lbl {
  font-size: 11px;
  color: var(--sc-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-page .sc-tool-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.website-page .sc-td-1 { animation: sc-td-1 24s ease infinite; }
.website-page .sc-td-2 { animation: sc-td-2 24s ease infinite; }
.website-page .sc-td-3 { animation: sc-td-3 24s ease infinite; }
.website-page .sc-td-4 { animation: sc-td-4 24s ease infinite; }

.website-page .sc-tool-sub {
  margin-left: 5px;
  padding-left: 14px;
  border-left: 2px solid rgba(148,163,184,0.3);
  margin-top: 2px;
  padding-bottom: 2px;
}

.website-page .sc-tool-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 10px;
  color: var(--sc-dim);
}

.website-page .sc-tool-idot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sc-green);
  flex-shrink: 0;
}

.website-page .sc-answer {
  font-size: 12px;
  line-height: 1.5;
  color: var(--sc-text);
}

/* Slide deck preview */
.website-page .sc-deck {
  margin-top: 6px;
  border-radius: 8px;
  max-width: 300px;
  border: 1px solid var(--sc-border);
  overflow: hidden;
  opacity: 0;
  animation: sc-fadein-56 24s ease infinite;
}

.website-page .sc-deck-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--sc-surface);
  font-size: 10px;
  color: var(--sc-muted);
  border-bottom: 1px solid var(--sc-border);
}

.website-page .sc-deck-label svg { opacity: 0.6; }
.website-page .sc-deck-pages { margin-left: auto; opacity: 0.7; }

.website-page .sc-deck-slides {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #FFFFFF;
  overflow: hidden;
}

.website-page .sc-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  opacity: 0;
}

.website-page .sc-sl-1 { animation: sc-sl-1 24s ease infinite; }
.website-page .sc-sl-2 { animation: sc-sl-2 24s ease infinite; }
.website-page .sc-sl-3 { animation: sc-sl-3 24s ease infinite; }
.website-page .sc-sl-4 { animation: sc-sl-4 24s ease infinite; }

.website-page .sc-sl-title { font-size: 14px; font-weight: 700; color: var(--sc-text); }
.website-page .sc-sl-sub { font-size: 9px; color: var(--sc-muted); margin-top: 2px; }

.website-page .sc-sl-heading {
  font-size: 8px;
  font-weight: 600;
  color: var(--sc-muted);
  margin-bottom: 6px;
  align-self: flex-start;
  padding-left: 16px;
}

.website-page .sc-sl-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 50px;
  padding: 0 20px;
  width: 100%;
}

.website-page .sc-sl-bar {
  flex: 1;
  background: var(--sc-accent);
  border-radius: 2px 2px 0 0;
  opacity: 0.8;
}

.website-page .sc-sl-line { width: 80%; height: 50px; color: var(--sc-accent); }

.website-page .sc-sl-big {
  font-size: 28px;
  font-weight: 800;
  color: var(--sc-green);
  letter-spacing: -0.02em;
}

.website-page .sc-sl-big-label { font-size: 9px; color: var(--sc-muted); margin-top: 2px; }

/* Agent bar actions (right side of top row) */
.website-page .sc-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.website-page .sc-bar-stop {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--sc-muted);
  cursor: default;
}

.website-page .sc-bar-stop svg { opacity: 0.6; }

.website-page .sc-bar-settings {
  display: flex;
  align-items: center;
  color: var(--sc-dim);
  cursor: default;
}

/* Chat input wrapper (input + toolbar) - flush to bottom, 60% centered */
.website-page .sc-input-wrap {
  width: 70%;
  margin: 0 auto;
  border-radius: 10px 10px 0 0;
  background: var(--sc-bg);
  box-shadow: 0 0 0 1px var(--sc-border);
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: sc-fadein-2 24s ease infinite;
}

.website-page .sc-input-area {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  gap: 8px;
}

.website-page .sc-input-ph {
  font-size: 11px;
  color: var(--sc-dim);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.website-page .sc-voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-dim);
  flex-shrink: 0;
}

/* Footer toolbar */
.website-page .sc-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 7px;
  gap: 6px;
}

.website-page .sc-tb-left,
.website-page .sc-tb-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.website-page .sc-tb-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-dim);
}

.website-page .sc-tb-mode {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(73,100,216,0.1);
  color: var(--sc-accent);
  font-size: 10px;
  font-weight: 600;
}

.website-page .sc-tb-mode svg { color: var(--sc-accent); }

.website-page .sc-tb-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  color: var(--sc-muted);
  background: var(--sc-surface);
}

.website-page .sc-tb-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.website-page .sc-tb-model-img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
}

.website-page .sc-send {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--sc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

/* ---- Floating cards (white, angled) ---- */
.website-page .sc-flyout {
  --fc-bg: #ffffff;
  --fc-text: #0f172a;
  --fc-muted: #475569;
  --fc-dim: #94a3b8;
  --fc-accent: #2563eb;
  --fc-border: #e2e8f0;
  --fc-green: #16a34a;
  --fc-amber: #d97706;
  position: absolute;
  width: 210px;
  background: var(--fc-bg);
  border-radius: 12px;
  box-shadow:
    0 4px 24px -4px rgba(0,0,0,0.12),
    0 0 0 1px rgba(0,0,0,0.06);
  z-index: 5;
  overflow: hidden;
  font-family: 'Inter', -apple-system, sans-serif;
}

/* Tool Timeline - Left (angled) */
.website-page .sc-fly-left {
  left: 0;
  top: 40px;
  opacity: 0;
  animation: sc-fly-in-l 24s ease infinite;
}

.website-page .sc-fly-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--fc-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px 6px;
}

.website-page .sc-fly-file {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; opacity: 0;
}
.website-page .sc-flt-1 { animation: sc-fadein-17 24s ease infinite; }
.website-page .sc-flt-2 { animation: sc-fadein-25 24s ease infinite; }
.website-page .sc-flt-3 { animation: sc-fadein-33 24s ease infinite; }
.website-page .sc-flt-4 { animation: sc-fadein-42 24s ease infinite; }

.website-page .sc-fly-file-ico {
  width: 22px; height: 22px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.website-page .sc-fly-ico-green { background: rgba(34,197,94,0.15); color: #22c55e; }
.website-page .sc-fly-ico-red   { background: rgba(239,68,68,0.15); color: #ef4444; }
.website-page .sc-fly-ico-blue  { background: rgba(59,130,246,0.15); color: #3b82f6; }

.website-page .sc-fly-file-name {
  font-size: 11px; color: var(--fc-text); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.website-page .sc-fly-file-meta {
  font-size: 10px; color: var(--fc-dim); flex-shrink: 0;
}
.website-page .sc-fly-file-stream {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px; color: var(--fc-accent); flex-shrink: 0;
}
.website-page .sc-fly-stream-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--fc-accent);
  animation: sc-stream-pulse 1.2s ease infinite;
}

/* Tasks Panel - Right (angled) */
.website-page .sc-fly-right {
  right: 0;
  top: 60px;
  opacity: 0;
  animation: sc-fly-in-r 24s ease infinite;
}

.website-page .sc-fly-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--fc-border);
  color: var(--fc-muted);
}

.website-page .sc-fly-header span {
  font-size: 12px;
  font-weight: 600;
  color: var(--fc-text);
}

.website-page .sc-fly-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--fc-accent);
  color: white;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.website-page .sc-fly-goal {
  padding: 8px 12px;
  border-bottom: 1px solid var(--fc-border);
}

.website-page .sc-fly-goal-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--fc-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.website-page .sc-fly-goal-text {
  font-size: 11px;
  line-height: 1.4;
  color: var(--fc-text);
}

.website-page .sc-fly-task {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--fc-muted);
  line-height: 1.3;
}

.website-page .sc-fly-task:last-child { padding-bottom: 10px; }

.website-page .sc-ft-ico {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--fc-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  margin-top: 1px;
}

.website-page .sc-ft-check { width: 10px; height: 10px; opacity: 0; }

.website-page .sc-ft-1 .sc-ft-ico { animation: sc-tsk-a-ico 24s ease infinite; }
.website-page .sc-ft-1 .sc-ft-check { animation: sc-tsk-a-chk 24s ease infinite; }
.website-page .sc-ft-2 .sc-ft-ico { animation: sc-tsk-b-ico 24s ease infinite; }
.website-page .sc-ft-2 .sc-ft-check { animation: sc-tsk-b-chk 24s ease infinite; }
.website-page .sc-ft-3 .sc-ft-ico { animation: sc-tsk-c-ico 24s ease infinite; }
.website-page .sc-ft-3 .sc-ft-check { animation: sc-tsk-c-chk 24s ease infinite; }
.website-page .sc-ft-4 .sc-ft-ico { animation: sc-tsk-d-ico 24s ease infinite; }
.website-page .sc-ft-4 .sc-ft-check { animation: sc-tsk-d-chk 24s ease infinite; }


/* ============================================
   HERO SHOWCASE - KEYFRAMES (24s cycle, fast start)
   ============================================ */

@keyframes sc-fadein-2 {
  0% { opacity: 0; }
  1%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-fadein-4 {
  0% { opacity: 0; transform: translateY(8px); }
  3%, 83% { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes sc-bar-anim {
  0%, 2% { opacity: 0; transform: translateY(100%); }
  4%, 32% { opacity: 1; transform: translateY(0); }
  34%, 83% { opacity: 1; transform: translateY(30px); }
  88%, 100% { opacity: 0; transform: translateY(100%); }
}

@keyframes sc-fly-in-l {
  0%, 3% { opacity: 0; transform: rotate(-3deg) translateX(-20px); }
  5%, 83% { opacity: 1; transform: rotate(-3deg) translateX(0); }
  88%, 100% { opacity: 0; transform: rotate(-3deg) translateX(0); }
}

@keyframes sc-fly-in-r {
  0%, 4% { opacity: 0; transform: rotate(2deg) translateX(20px); }
  6%, 83% { opacity: 1; transform: rotate(2deg) translateX(0); }
  88%, 100% { opacity: 0; transform: rotate(2deg) translateX(0); }
}

@keyframes sc-fadein-17 {
  0%, 7% { opacity: 0; }
  9%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-fadein-25 {
  0%, 13% { opacity: 0; }
  15%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-fadein-33 {
  0%, 19% { opacity: 0; }
  21%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-fadein-42 {
  0%, 25% { opacity: 0; }
  27%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-fadein-56 {
  0%, 40% { opacity: 0; }
  43%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-bardot {
  0%, 2% { background: var(--sc-amber); opacity: 0; }
  4%, 32% { background: var(--sc-amber); opacity: 1; }
  34%, 83% { background: var(--sc-green); opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-bar-w {
  0%, 2% { opacity: 0; }
  4%, 32% { opacity: 1; }
  34%, 100% { opacity: 0; }
}

@keyframes sc-bar-d {
  0%, 32% { opacity: 0; }
  34%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-pmsg-a {
  0%, 2% { opacity: 0; }
  4%, 20% { opacity: 1; }
  22%, 100% { opacity: 0; }
}

@keyframes sc-pmsg-b {
  0%, 20% { opacity: 0; }
  22%, 32% { opacity: 1; }
  34%, 100% { opacity: 0; }
}

@keyframes sc-count-a {
  0%, 2% { opacity: 0; }
  4%, 32% { opacity: 1; }
  34%, 100% { opacity: 0; }
}

@keyframes sc-count-b {
  0%, 32% { opacity: 0; }
  34%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-progress {
  0%, 4% { width: 0%; }
  13% { width: 25%; }
  19% { width: 50%; }
  25% { width: 75%; }
  34%, 83% { width: 100%; }
  88%, 100% { width: 0%; }
}

@keyframes sc-stream-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes sc-tsk-a-ico {
  0%, 7% { border-color: var(--fc-dim); background: transparent; }
  8%, 10% { border-color: var(--fc-amber); background: rgba(245,158,11,0.15); }
  12%, 83% { border-color: var(--fc-green); background: var(--fc-green); }
  88%, 100% { border-color: var(--fc-dim); background: transparent; }
}
@keyframes sc-tsk-a-chk {
  0%, 10% { opacity: 0; }
  12%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-tsk-b-ico {
  0%, 13% { border-color: var(--fc-dim); background: transparent; }
  14%, 16% { border-color: var(--fc-amber); background: rgba(245,158,11,0.15); }
  18%, 83% { border-color: var(--fc-green); background: var(--fc-green); }
  88%, 100% { border-color: var(--fc-dim); background: transparent; }
}
@keyframes sc-tsk-b-chk {
  0%, 16% { opacity: 0; }
  18%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-tsk-c-ico {
  0%, 19% { border-color: var(--fc-dim); background: transparent; }
  20%, 22% { border-color: var(--fc-amber); background: rgba(245,158,11,0.15); }
  24%, 83% { border-color: var(--fc-green); background: var(--fc-green); }
  88%, 100% { border-color: var(--fc-dim); background: transparent; }
}
@keyframes sc-tsk-c-chk {
  0%, 22% { opacity: 0; }
  24%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-tsk-d-ico {
  0%, 25% { border-color: var(--fc-dim); background: transparent; }
  26%, 28% { border-color: var(--fc-amber); background: rgba(245,158,11,0.15); }
  30%, 83% { border-color: var(--fc-green); background: var(--fc-green); }
  88%, 100% { border-color: var(--fc-dim); background: transparent; }
}
@keyframes sc-tsk-d-chk {
  0%, 28% { opacity: 0; }
  30%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-sl-1 {
  0%, 45% { opacity: 0; }
  47%, 53% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

@keyframes sc-sl-2 {
  0%, 53% { opacity: 0; }
  55%, 61% { opacity: 1; }
  63%, 100% { opacity: 0; }
}

@keyframes sc-sl-3 {
  0%, 61% { opacity: 0; }
  63%, 70% { opacity: 1; }
  72%, 100% { opacity: 0; }
}

@keyframes sc-sl-4 {
  0%, 70% { opacity: 0; }
  72%, 84% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

/* AI response appears early (name + avatar) */
@keyframes sc-fadein-ai {
  0%, 4% { opacity: 0; transform: translateY(6px); }
  6%, 83% { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(0); }
}

/* Inline AI text between tools */
@keyframes sc-fadein-ai-txt1 {
  0%, 6% { opacity: 0; }
  8%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-fadein-ai-txt2 {
  0%, 17% { opacity: 0; }
  19%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-fadein-ai-txt3 {
  0%, 34% { opacity: 0; }
  37%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

/* Tool timeline blocks appear sequentially */
@keyframes sc-fadein-tool1 {
  0%, 8% { opacity: 0; }
  10%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-fadein-tool2 {
  0%, 13% { opacity: 0; }
  15%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-fadein-tool3 {
  0%, 21% { opacity: 0; }
  23%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes sc-fadein-tool4 {
  0%, 27% { opacity: 0; }
  29%, 83% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

/* Tool dot status: transparent → amber (working) → green (done) */
@keyframes sc-td-1 {
  0%, 8% { background: transparent; }
  10%, 12% { background: var(--sc-amber); }
  14%, 83% { background: var(--sc-green); }
  88%, 100% { background: transparent; }
}

@keyframes sc-td-2 {
  0%, 13% { background: transparent; }
  15%, 17% { background: var(--sc-amber); }
  19%, 83% { background: var(--sc-green); }
  88%, 100% { background: transparent; }
}

@keyframes sc-td-3 {
  0%, 21% { background: transparent; }
  23%, 25% { background: var(--sc-amber); }
  27%, 83% { background: var(--sc-green); }
  88%, 100% { background: transparent; }
}

@keyframes sc-td-4 {
  0%, 27% { background: transparent; }
  29%, 31% { background: var(--sc-amber); }
  33%, 83% { background: var(--sc-green); }
  88%, 100% { background: transparent; }
}

/* Vertical scroll - steps after each content batch appears */
@keyframes sc-scroll {
  0%, 11% { transform: translateY(0); }
  13%, 16% { transform: translateY(-25px); }
  18%, 22% { transform: translateY(-50px); }
  24%, 28% { transform: translateY(-80px); }
  30%, 36% { transform: translateY(-110px); }
  38%, 42% { transform: translateY(-150px); }
  45%, 80% { transform: translateY(-310px); }
  88%, 100% { transform: translateY(0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .website-page .sc-bar,
  .website-page .sc-bar-dot,
  .website-page .sc-bar-working,
  .website-page .sc-bar-done,
  .website-page .sc-bar-fill,
  .website-page .sc-user,
  .website-page .sc-ai,
  .website-page .sc-fly-file,
  .website-page .sc-fly-left,
  .website-page .sc-fly-right,
  .website-page .sc-deck,
  .website-page .sc-ft-ico,
  .website-page .sc-ft-check,
  .website-page .sc-fly-badge,
  .website-page .sc-input-wrap,
  .website-page .sc-slide,
  .website-page .sc-tool,
  .website-page .sc-tool-dot,
  .website-page .sc-ai-text,
  .website-page .sc-scroll {
    animation: none !important;
    opacity: 1 !important;
  }
  .website-page .sc-bar-done,
  .website-page .sc-count-a,
  .website-page .sc-pmsg-a,
  .website-page .sc-pmsg-b { opacity: 0 !important; }
  .website-page .sc-bar-fill { width: 100% !important; }
  .website-page .sc-ft-ico {
    border-color: var(--fc-green) !important;
    background: var(--fc-green) !important;
  }
  .website-page .sc-ft-check { opacity: 1 !important; }
  .website-page .sc-bar-dot { background: var(--sc-green) !important; }
  .website-page .sc-tool-dot { background: var(--sc-green) !important; }
  .website-page .sc-scroll { transform: translateY(-310px) !important; }
  .website-page .sc-sl-1 { opacity: 1 !important; }
  .website-page .sc-sl-2,
  .website-page .sc-sl-3,
  .website-page .sc-sl-4 { opacity: 0 !important; }
}


/* ============================================
   SOCIAL PROOF STATS
   ============================================ */

.website-page .social-proof {
  padding: 60px 0;
  background: var(--white);
  border-bottom: 1px solid var(--border-color);
}

.website-page .proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
}

.website-page .proof-item {
  padding: 16px;
}

.website-page .proof-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--primary-blue), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.website-page .proof-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================
   TRUST BAR
   ============================================ */

.website-page .trust-bar {
  padding: 60px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: var(--white);
}

.website-page .trust-bar-inner {
  text-align: center;
}

.website-page .trust-bar-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 32px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.website-page .trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}

.website-page .trust-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-base);
}

.website-page .trust-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(100%);
  transition: all var(--transition-base);
}

.website-page .trust-logo:hover img {
  opacity: 1;
  filter: grayscale(0%);
}

/* ============================================
   SECTION STYLES
   ============================================ */

.website-page .section-header-new {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 64px;
}

.website-page .section-tag-new {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #2563eb;
  margin-bottom: 16px;
}

.website-page .section-header-new h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin-bottom: 16px;
}

.website-page .section-header-new p {
  font-size: 1.125rem;
  color: #64748b;
  line-height: 1.7;
}

/* ============================================
   FOUR PILLARS - NEW DESIGN
   ============================================ */

.website-page .pillars-new {
  padding: 120px 0;
  background: white;
}

.website-page .pillars-grid-new {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.website-page .pillar-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.website-page .pillar-card:hover {
  background: white;
  border-color: #cbd5e1;
  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.1);
  transform: translateY(-4px);
}

.website-page .pillar-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  color: white;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  margin-bottom: 20px;
}

.website-page .pillar-card-img {
  height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.website-page .pillar-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 12px;
}

.website-page .pillar-card p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

/* ============================================
   PILLAR 1 - MODELS DEMO ANIMATION (20s loop)
   Task 1 → Claude (15-35%)
   Task 2 → GPT    (38-58%)
   Task 3 → Gemini (61-80%)
   ============================================ */

.website-page .pillar-card-models {
  padding-top: 0;
  overflow: hidden;
}

.website-page .models-demo {
  background: #0f172a;
  border-radius: 12px 12px 0 0;
  padding: 16px;
  margin: 0 -24px 24px;
  position: relative;
  overflow: hidden;
}

/* Rotating prompts */
.website-page .mdl-prompt {
  font-size: 12px;
  color: #e2e8f0;
  padding: 8px 12px;
  background: #1e293b;
  border-radius: 8px;
  margin-bottom: 12px;
  opacity: 0;
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
}

.website-page .mdl-prompt-1 { animation: mdl-p1 20s ease infinite; }
.website-page .mdl-prompt-2 { animation: mdl-p2 20s ease infinite; }
.website-page .mdl-prompt-3 { animation: mdl-p3 20s ease infinite; }

/* 2x2 model grid */
.website-page .mdl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 44px;
}

.website-page .mdl-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(30, 41, 59, 0.6);
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  opacity: 0;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.website-page .mdl-card img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
}

.website-page .mdl-card-1 { animation: mdl-c1 20s ease infinite; }
.website-page .mdl-card-2 { animation: mdl-c2 20s ease infinite; }
.website-page .mdl-card-3 { animation: mdl-c3 20s ease infinite; }
.website-page .mdl-card-4 { animation: mdl-c4 20s ease infinite; }

/* Best match tags */
.website-page .mdl-match {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #3b82f6;
  opacity: 0;
}

.website-page .mdl-match-1 { animation: mdl-m1 20s ease infinite; }
.website-page .mdl-match-2 { animation: mdl-m2 20s ease infinite; }
.website-page .mdl-match-3 { animation: mdl-m3 20s ease infinite; }

/* ---- Models Keyframes ---- */

/* Prompts: appear during their task window */
@keyframes mdl-p1 {
  0%, 3%   { opacity: 0; transform: translateY(4px); }
  6%, 28%  { opacity: 1; transform: translateY(0); }
  32%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes mdl-p2 {
  0%, 32%  { opacity: 0; transform: translateY(4px); }
  35%, 55% { opacity: 1; transform: translateY(0); }
  59%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes mdl-p3 {
  0%, 59%  { opacity: 0; transform: translateY(4px); }
  62%, 76% { opacity: 1; transform: translateY(0); }
  80%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* Cards appear fast (0-3%), then highlight during their task */
/* Card 1 (Claude) - selected during Task 1 */
@keyframes mdl-c1 {
  0%       { opacity: 0; }
  2%, 7%   { opacity: 1; border-color: transparent; box-shadow: none; }
  10%, 28% { opacity: 1; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.25); }
  31%      { opacity: 1; border-color: transparent; box-shadow: none; }
  80%      { opacity: 1; }
  86%, 100% { opacity: 0; }
}
/* Card 2 (GPT) - selected during Task 2 */
@keyframes mdl-c2 {
  0%, 0.5% { opacity: 0; }
  3%, 33%  { opacity: 1; border-color: transparent; box-shadow: none; }
  36%, 55% { opacity: 1; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.25); }
  58%      { opacity: 1; border-color: transparent; box-shadow: none; }
  80%      { opacity: 1; }
  86%, 100% { opacity: 0; }
}
/* Card 3 (Gemini) - selected during Task 3 */
@keyframes mdl-c3 {
  0%, 1%   { opacity: 0; }
  4%, 60%  { opacity: 1; border-color: transparent; box-shadow: none; }
  63%, 76% { opacity: 1; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.25); }
  79%      { opacity: 1; border-color: transparent; box-shadow: none; }
  80%      { opacity: 1; }
  86%, 100% { opacity: 0; }
}
/* Card 4 (Kimi) - just appears */
@keyframes mdl-c4 {
  0%, 1.5% { opacity: 0; }
  4%, 80%  { opacity: 1; }
  86%, 100% { opacity: 0; }
}

/* Match tags: appear shortly after card selection */
@keyframes mdl-m1 {
  0%, 12%  { opacity: 0; }
  15%, 28% { opacity: 1; }
  32%, 100% { opacity: 0; }
}
@keyframes mdl-m2 {
  0%, 38%  { opacity: 0; }
  41%, 55% { opacity: 1; }
  59%, 100% { opacity: 0; }
}
@keyframes mdl-m3 {
  0%, 65%  { opacity: 0; }
  68%, 76% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/* ============================================
   PILLAR 2 - CONNECT DATA DEMO ANIMATION (20s)
   Icons appear → connected → query → answer
   ============================================ */

.website-page .pillar-card-connect {
  padding-top: 0;
  overflow: hidden;
}

.website-page .connect-demo {
  background: #0f172a;
  border-radius: 12px 12px 0 0;
  padding: 16px;
  margin: 0 -24px 24px;
  position: relative;
  overflow: hidden;
}

/* Integration icon row */
.website-page .cnt-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}

.website-page .cnt-int {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
}

.website-page .cnt-int img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
}

.website-page .cnt-int-1 { animation: cnt-i1 20s ease infinite; }
.website-page .cnt-int-2 { animation: cnt-i2 20s ease infinite; }
.website-page .cnt-int-3 { animation: cnt-i3 20s ease infinite; }
.website-page .cnt-int-4 { animation: cnt-i4 20s ease infinite; }
.website-page .cnt-int-5 { animation: cnt-i5 20s ease infinite; }

/* Green connected dot */
.website-page .cnt-dot {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #0f172a;
  opacity: 0;
  transform: scale(0);
}

.website-page .cnt-int-1 .cnt-dot { animation: cnt-d1 20s ease infinite; }
.website-page .cnt-int-2 .cnt-dot { animation: cnt-d2 20s ease infinite; }
.website-page .cnt-int-3 .cnt-dot { animation: cnt-d3 20s ease infinite; }
.website-page .cnt-int-4 .cnt-dot { animation: cnt-d4 20s ease infinite; }
.website-page .cnt-int-5 .cnt-dot { animation: cnt-d5 20s ease infinite; }

/* Status line */
.website-page .cnt-status {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #10b981;
  margin-bottom: 12px;
  opacity: 0;
  animation: cnt-status 20s ease infinite;
}

/* Query bubble */
.website-page .cnt-query {
  font-size: 12px;
  color: #e2e8f0;
  padding: 8px 12px;
  background: #1e293b;
  border-radius: 8px;
  border-bottom-right-radius: 4px;
  margin-bottom: 8px;
  margin-left: auto;
  max-width: 88%;
  opacity: 0;
  animation: cnt-query 20s ease infinite;
}

/* Answer bubble */
.website-page .cnt-answer {
  font-size: 11px;
  color: white;
  padding: 10px 12px;
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  border-radius: 8px;
  border-bottom-left-radius: 4px;
  line-height: 1.5;
  max-width: 92%;
  opacity: 0;
  animation: cnt-answer 20s ease infinite;
}

.website-page .cnt-answer-sources {
  display: block;
  font-size: 9px;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 4px;
}

/* ---- Connect Keyframes ---- */

/* Icons appear fast — staggered over ~1s */
@keyframes cnt-i1 {
  0%       { opacity: 0; transform: scale(0.8); }
  2%, 78%  { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes cnt-i2 {
  0%, 1%   { opacity: 0; transform: scale(0.8); }
  3%, 78%  { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes cnt-i3 {
  0%, 2%   { opacity: 0; transform: scale(0.8); }
  4%, 78%  { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes cnt-i4 {
  0%, 3%   { opacity: 0; transform: scale(0.8); }
  5%, 78%  { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes cnt-i5 {
  0%, 4%   { opacity: 0; transform: scale(0.8); }
  6%, 78%  { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(0.8); }
}

/* Green dots pop in right after icons — staggered over ~1s */
@keyframes cnt-d1 {
  0%, 6%   { opacity: 0; transform: scale(0); }
  9%, 78%  { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes cnt-d2 {
  0%, 7%   { opacity: 0; transform: scale(0); }
  10%, 78% { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes cnt-d3 {
  0%, 8%   { opacity: 0; transform: scale(0); }
  11%, 78% { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes cnt-d4 {
  0%, 9%   { opacity: 0; transform: scale(0); }
  12%, 78% { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes cnt-d5 {
  0%, 10%  { opacity: 0; transform: scale(0); }
  13%, 78% { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(0); }
}

/* Status text */
@keyframes cnt-status {
  0%, 14%  { opacity: 0; }
  17%, 78% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

/* Query bubble */
@keyframes cnt-query {
  0%, 20%  { opacity: 0; transform: translateY(6px); }
  24%, 78% { opacity: 1; transform: translateY(0); }
  84%, 100% { opacity: 0; transform: translateY(6px); }
}

/* Answer bubble */
@keyframes cnt-answer {
  0%, 28%  { opacity: 0; transform: translateY(6px); }
  32%, 78% { opacity: 1; transform: translateY(0); }
  84%, 100% { opacity: 0; transform: translateY(6px); }
}

/* ============================================
   PILLAR 4 - AGENT DEMO ANIMATION
   ============================================ */

.website-page .pillar-card-agent {
  padding-top: 0;
  overflow: hidden;
}

.website-page .agent-demo {
  background: #0f172a;
  border-radius: 12px 12px 0 0;
  padding: 16px;
  margin: 0 -24px 24px;
  position: relative;
  overflow: hidden;
}

.website-page .pillar-card-models,
.website-page .pillar-card-connect,
.website-page .pillar-card-agent,
.website-page .pillar-card-builder {
  display: flex;
  flex-direction: column;
}

.website-page .pillar-card-models .models-demo,
.website-page .pillar-card-connect .connect-demo,
.website-page .pillar-card-agent .agent-demo,
.website-page .pillar-card-builder .builder-demo {
  height: 240px;
  flex-shrink: 0;
}

/* Header row: dot + status + count */
.website-page .agent-demo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 500;
}

.website-page .agent-demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  animation: agent-dot 10s ease infinite;
  flex-shrink: 0;
}

.website-page .agent-demo-status {
  color: #f59e0b;
  animation: agent-status-working 10s ease infinite;
}

.website-page .agent-demo-status-done {
  position: absolute;
  left: 42px;
  color: #10b981;
  animation: agent-status-done 10s ease infinite;
}

.website-page .agent-demo-count {
  margin-left: auto;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  position: absolute;
  right: 16px;
  animation: agent-count-0 10s ease infinite;
}

.website-page .agent-demo-count-1 { animation-name: agent-count-1; }
.website-page .agent-demo-count-2 { animation-name: agent-count-2; }
.website-page .agent-demo-count-3 { animation-name: agent-count-3; }
.website-page .agent-demo-count-4 { animation-name: agent-count-4; }

/* Task list */
.website-page .agent-demo-tasks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.website-page .agent-demo-task {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
  padding: 6px 10px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 6px;
  transition: all 0.3s ease;
}

.website-page .agent-demo-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #334155;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.website-page .agent-demo-check::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* Individual task animations */
.website-page .agent-demo-task-1 { animation: agent-task-1 10s ease infinite; }
.website-page .agent-demo-task-1 .agent-demo-check { animation: agent-check-1 10s ease infinite; }
.website-page .agent-demo-task-1 .agent-demo-check::after { animation: agent-tick-1 10s ease infinite; }

.website-page .agent-demo-task-2 { animation: agent-task-2 10s ease infinite; }
.website-page .agent-demo-task-2 .agent-demo-check { animation: agent-check-2 10s ease infinite; }
.website-page .agent-demo-task-2 .agent-demo-check::after { animation: agent-tick-2 10s ease infinite; }

.website-page .agent-demo-task-3 { animation: agent-task-3 10s ease infinite; }
.website-page .agent-demo-task-3 .agent-demo-check { animation: agent-check-3 10s ease infinite; }
.website-page .agent-demo-task-3 .agent-demo-check::after { animation: agent-tick-3 10s ease infinite; }

.website-page .agent-demo-task-4 { animation: agent-task-4 10s ease infinite; }
.website-page .agent-demo-task-4 .agent-demo-check { animation: agent-check-4 10s ease infinite; }
.website-page .agent-demo-task-4 .agent-demo-check::after { animation: agent-tick-4 10s ease infinite; }

/* Progress bar */
.website-page .agent-demo-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.website-page .agent-demo-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: #3b82f6;
  animation: agent-progress 10s ease-out infinite;
}

/* ---- Keyframes ---- */

/* Progress bar: fills in steps as tasks complete */
@keyframes agent-progress {
  0%, 5%    { width: 0%; }
  15%, 19%  { width: 25%; }
  30%, 34%  { width: 50%; }
  45%, 49%  { width: 75%; }
  60%       { width: 100%; }
  85%       { width: 100%; }
  95%, 100% { width: 0%; }
}

/* Status dot: amber while working, green when done */
@keyframes agent-dot {
  0%, 58%   { background: #f59e0b; }
  62%, 82%  { background: #10b981; }
  90%, 100% { background: #f59e0b; }
}

/* "Working..." text visibility */
@keyframes agent-status-working {
  0%, 58%   { opacity: 1; }
  62%, 82%  { opacity: 0; }
  90%, 100% { opacity: 1; }
}

/* "Complete" text visibility */
@keyframes agent-status-done {
  0%, 58%   { opacity: 0; }
  62%, 82%  { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* Task count: show "0 of 4" initially, then hide */
@keyframes agent-count-0 {
  0%, 10%   { opacity: 1; }
  14%, 100% { opacity: 0; }
}
@keyframes agent-count-1 {
  0%, 10%   { opacity: 0; }
  14%, 25%  { opacity: 1; }
  29%, 100% { opacity: 0; }
}
@keyframes agent-count-2 {
  0%, 25%   { opacity: 0; }
  29%, 40%  { opacity: 1; }
  44%, 100% { opacity: 0; }
}
@keyframes agent-count-3 {
  0%, 40%   { opacity: 0; }
  44%, 55%  { opacity: 1; }
  59%, 100% { opacity: 0; }
}
@keyframes agent-count-4 {
  0%, 55%   { opacity: 0; }
  59%, 82%  { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* Task row: highlight text on completion */
@keyframes agent-task-1 {
  0%, 10%   { color: #64748b; }
  15%, 82%  { color: #94a3b8; }
  90%, 100% { color: #64748b; }
}
@keyframes agent-task-2 {
  0%, 25%   { color: #64748b; }
  30%, 82%  { color: #94a3b8; }
  90%, 100% { color: #64748b; }
}
@keyframes agent-task-3 {
  0%, 40%   { color: #64748b; }
  45%, 82%  { color: #94a3b8; }
  90%, 100% { color: #64748b; }
}
@keyframes agent-task-4 {
  0%, 55%   { color: #64748b; }
  60%, 82%  { color: #94a3b8; }
  90%, 100% { color: #64748b; }
}

/* Checkbox border: gray → green */
@keyframes agent-check-1 {
  0%, 10%   { border-color: #334155; background: transparent; }
  15%, 82%  { border-color: #10b981; background: #10b981; }
  90%, 100% { border-color: #334155; background: transparent; }
}
@keyframes agent-check-2 {
  0%, 25%   { border-color: #334155; background: transparent; }
  30%, 82%  { border-color: #10b981; background: #10b981; }
  90%, 100% { border-color: #334155; background: transparent; }
}
@keyframes agent-check-3 {
  0%, 40%   { border-color: #334155; background: transparent; }
  45%, 82%  { border-color: #10b981; background: #10b981; }
  90%, 100% { border-color: #334155; background: transparent; }
}
@keyframes agent-check-4 {
  0%, 55%   { border-color: #334155; background: transparent; }
  60%, 82%  { border-color: #10b981; background: #10b981; }
  90%, 100% { border-color: #334155; background: transparent; }
}

/* Tick mark: hidden → visible */
@keyframes agent-tick-1 {
  0%, 10%   { border-color: transparent; }
  15%, 82%  { border-color: white; }
  90%, 100% { border-color: transparent; }
}
@keyframes agent-tick-2 {
  0%, 25%   { border-color: transparent; }
  30%, 82%  { border-color: white; }
  90%, 100% { border-color: transparent; }
}
@keyframes agent-tick-3 {
  0%, 40%   { border-color: transparent; }
  45%, 82%  { border-color: white; }
  90%, 100% { border-color: transparent; }
}
@keyframes agent-tick-4 {
  0%, 55%   { border-color: transparent; }
  60%, 82%  { border-color: white; }
  90%, 100% { border-color: transparent; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .website-page .models-demo *,
  .website-page .connect-demo *,
  .website-page .agent-demo *,
  .website-page .agent-demo *::after,
  .website-page .builder-demo *,
  .website-page .builder-demo *::before,
  .website-page .builder-demo *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================
   PILLAR 3 - BUILDER DEMO ANIMATION (24s loop)
   Phase 1: Build (0-33%)
   Phase 2: Chat  (33-54%)
   Phase 3: Slides (54-92%)
   Reset (92-100%)
   ============================================ */

.website-page .pillar-card-builder {
  padding-top: 0;
  overflow: hidden;
}

.website-page .builder-demo {
  background: #0f172a;
  border-radius: 12px 12px 0 0;
  padding: 16px;
  margin: 0 -24px 24px;
  position: relative;
  overflow: hidden;
}

/* Phase containers — stacked via absolute positioning */
.website-page .builder-phase {
  position: absolute;
  inset: 16px;
  display: flex;
  flex-direction: column;
}

.website-page .builder-phase-build { animation: bld-phase-build 24s ease infinite; }
.website-page .builder-phase-chat  { animation: bld-phase-chat  24s ease infinite; }
.website-page .builder-phase-slides { animation: bld-phase-slides 24s ease infinite; }

/* ---- Phase 1: Build ---- */

.website-page .builder-demo-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.website-page .builder-demo-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.website-page .builder-demo-avatar-skeleton {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(110deg, #1e293b 30%, #334155 50%, #1e293b 70%);
  background-size: 200% 100%;
  animation: bld-skeleton 24s ease infinite;
}

.website-page .builder-demo-avatar-icon {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  animation: bld-avatar 24s ease infinite;
}

.website-page .builder-demo-live-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #0f172a;
  animation: bld-live 24s ease infinite;
}

.website-page .builder-demo-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.website-page .builder-demo-name {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  animation: bld-name 24s ease infinite;
}

.website-page .builder-demo-desc {
  font-size: 11px;
  color: #64748b;
  animation: bld-desc 24s ease infinite;
}

.website-page .builder-demo-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.website-page .builder-demo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #94a3b8;
  padding: 7px 10px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(6px);
}

.website-page .builder-demo-item-1 { animation: bld-item-1 24s ease infinite; }
.website-page .builder-demo-item-2 { animation: bld-item-2 24s ease infinite; }
.website-page .builder-demo-item-3 { animation: bld-item-3 24s ease infinite; }

.website-page .builder-demo-item-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.website-page .builder-demo-item-icon-kb { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.website-page .builder-demo-item-icon-sk { background: rgba(168, 85, 247, 0.2); color: #a78bfa; }
.website-page .builder-demo-item-icon-mc { background: rgba(16, 185, 129, 0.2); color: #34d399; }

.website-page .builder-demo-item-label { flex: 1; min-width: 0; }

.website-page .builder-demo-item-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.website-page .builder-demo-item-check::after {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
}

.website-page .builder-demo-item-1 .builder-demo-item-check { animation: bld-chk-1 24s ease infinite; }
.website-page .builder-demo-item-2 .builder-demo-item-check { animation: bld-chk-2 24s ease infinite; }
.website-page .builder-demo-item-3 .builder-demo-item-check { animation: bld-chk-3 24s ease infinite; }

/* ---- Phase 2: Chat ---- */

.website-page .builder-chat-msg {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 92%;
  opacity: 0;
  transform: translateY(8px);
}

.website-page .builder-chat-user {
  background: #1e293b;
  color: #e2e8f0;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  margin-bottom: 10px;
  animation: bld-chat-user 24s ease infinite;
}

.website-page .builder-chat-ai {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  color: white;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  animation: bld-chat-ai 24s ease infinite;
}

.website-page .builder-chat-ai-label {
  font-size: 10px;
  opacity: 0.7;
  font-weight: 500;
  margin-bottom: 4px;
}

/* ---- Phase 3: Slide deck ---- */

.website-page .builder-deck {
  background: #1e293b;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(51, 65, 85, 0.6);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.website-page .builder-deck-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.6);
  border-bottom: 1px solid rgba(51, 65, 85, 0.4);
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
}

.website-page .builder-deck-page {
  margin-left: auto;
  font-weight: 500;
  color: #64748b;
  position: relative;
  width: 30px;
  text-align: right;
}

.website-page .builder-deck-page-num {
  position: absolute;
  right: 0;
  opacity: 0;
}

.website-page .builder-deck-pg1 { animation: bld-pg1 24s ease infinite; }
.website-page .builder-deck-pg2 { animation: bld-pg2 24s ease infinite; }
.website-page .builder-deck-pg3 { animation: bld-pg3 24s ease infinite; }
.website-page .builder-deck-pg4 { animation: bld-pg4 24s ease infinite; }

.website-page .builder-deck-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.website-page .builder-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  opacity: 0;
}

.website-page .builder-slide-1 { animation: bld-sl1 24s ease infinite; }
.website-page .builder-slide-2 { animation: bld-sl2 24s ease infinite; }
.website-page .builder-slide-3 { animation: bld-sl3 24s ease infinite; }
.website-page .builder-slide-4 { animation: bld-sl4 24s ease infinite; }

/* Slide 1: Title */
.website-page .builder-slide-title {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 4px;
}

.website-page .builder-slide-sub {
  font-size: 10px;
  color: #64748b;
  margin-bottom: 10px;
}

.website-page .builder-slide-line {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 1px;
}

/* Slide 2: Bar chart */
.website-page .builder-slide-heading {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  align-self: flex-start;
}

.website-page .builder-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 70px;
  width: 100%;
  padding: 0 8px;
}

.website-page .builder-bar {
  flex: 1;
  height: var(--h);
  background: #334155;
  border-radius: 3px 3px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.website-page .builder-bar span {
  font-size: 8px;
  color: #64748b;
  position: absolute;
  bottom: -14px;
}

.website-page .builder-bar-accent {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
}

/* Slide 3: Line chart */
.website-page .builder-chart-line {
  width: 100%;
  height: 70px;
}

/* Slide 4: Metric */
.website-page .builder-slide-metric {
  font-size: 28px;
  font-weight: 700;
  color: #10b981;
  line-height: 1;
  margin-bottom: 4px;
}

.website-page .builder-slide-metric-label {
  font-size: 10px;
  color: #64748b;
  margin-bottom: 10px;
}

.website-page .builder-slide-metric-row {
  display: flex;
  gap: 6px;
}

.website-page .builder-metric-pill {
  font-size: 9px;
  font-weight: 600;
  color: #94a3b8;
  padding: 3px 8px;
  background: rgba(51, 65, 85, 0.5);
  border-radius: 4px;
}

/* ---- Builder Keyframes (24s) ---- */

/* Phase visibility */
@keyframes bld-phase-build {
  0%        { opacity: 1; }
  30%       { opacity: 1; }
  34%, 100% { opacity: 0; }
}
@keyframes bld-phase-chat {
  0%, 32%   { opacity: 0; }
  36%, 50%  { opacity: 1; }
  54%, 100% { opacity: 0; }
}
@keyframes bld-phase-slides {
  0%, 52%   { opacity: 0; }
  56%, 88%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}

/* Build phase elements (within 0-30%) */
@keyframes bld-skeleton {
  0%        { background-position: 200% 0; opacity: 1; }
  3%        { background-position: -200% 0; opacity: 1; }
  4%        { background-position: 200% 0; opacity: 1; }
  7%        { background-position: -200% 0; opacity: 1; }
  9%, 30%   { opacity: 0; }
  34%, 92%  { opacity: 0; }
  96%, 100% { background-position: 200% 0; opacity: 1; }
}

@keyframes bld-avatar {
  0%, 7%    { opacity: 0; transform: scale(0.7); }
  10%       { opacity: 1; transform: scale(1); }
  30%       { opacity: 1; }
  34%, 92%  { opacity: 0; }
  96%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes bld-name {
  0%, 9%    { opacity: 0; }
  12%, 30%  { opacity: 1; }
  34%, 92%  { opacity: 0; }
  96%, 100% { opacity: 0; }
}

@keyframes bld-desc {
  0%, 11%   { opacity: 0; }
  14%, 30%  { opacity: 1; }
  34%, 92%  { opacity: 0; }
  96%, 100% { opacity: 0; }
}

@keyframes bld-item-1 {
  0%, 13%   { opacity: 0; transform: translateY(6px); }
  16%, 30%  { opacity: 1; transform: translateY(0); }
  34%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes bld-item-2 {
  0%, 17%   { opacity: 0; transform: translateY(6px); }
  20%, 30%  { opacity: 1; transform: translateY(0); }
  34%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes bld-item-3 {
  0%, 21%   { opacity: 0; transform: translateY(6px); }
  24%, 30%  { opacity: 1; transform: translateY(0); }
  34%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes bld-chk-1 {
  0%, 15%   { opacity: 0; background: transparent; }
  18%, 30%  { opacity: 1; background: #10b981; }
  34%, 100% { opacity: 0; background: transparent; }
}
@keyframes bld-chk-2 {
  0%, 19%   { opacity: 0; background: transparent; }
  22%, 30%  { opacity: 1; background: #10b981; }
  34%, 100% { opacity: 0; background: transparent; }
}
@keyframes bld-chk-3 {
  0%, 23%   { opacity: 0; background: transparent; }
  26%, 30%  { opacity: 1; background: #10b981; }
  34%, 100% { opacity: 0; background: transparent; }
}

@keyframes bld-live {
  0%, 25%   { opacity: 0; transform: scale(0); }
  28%       { opacity: 1; transform: scale(1.2); }
  30%       { opacity: 1; transform: scale(1); }
  34%, 100% { opacity: 0; transform: scale(0); }
}

/* Chat phase elements (within 36-50%) */
@keyframes bld-chat-user {
  0%, 35%   { opacity: 0; transform: translateY(8px); }
  39%, 50%  { opacity: 1; transform: translateY(0); }
  54%, 100% { opacity: 0; transform: translateY(8px); }
}
@keyframes bld-chat-ai {
  0%, 41%   { opacity: 0; transform: translateY(8px); }
  45%, 50%  { opacity: 1; transform: translateY(0); }
  54%, 100% { opacity: 0; transform: translateY(8px); }
}

/* Slide phase: page numbers */
@keyframes bld-pg1 {
  0%, 55%   { opacity: 0; }
  58%, 65%  { opacity: 1; }
  67%, 100% { opacity: 0; }
}
@keyframes bld-pg2 {
  0%, 65%   { opacity: 0; }
  67%, 73%  { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes bld-pg3 {
  0%, 73%   { opacity: 0; }
  75%, 81%  { opacity: 1; }
  83%, 100% { opacity: 0; }
}
@keyframes bld-pg4 {
  0%, 81%   { opacity: 0; }
  83%, 88%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}

/* Slide phase: slide crossfades */
@keyframes bld-sl1 {
  0%, 55%   { opacity: 0; }
  58%, 65%  { opacity: 1; }
  67%, 100% { opacity: 0; }
}
@keyframes bld-sl2 {
  0%, 65%   { opacity: 0; }
  67%, 73%  { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes bld-sl3 {
  0%, 73%   { opacity: 0; }
  75%, 81%  { opacity: 1; }
  83%, 100% { opacity: 0; }
}
@keyframes bld-sl4 {
  0%, 81%   { opacity: 0; }
  83%, 88%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}

/* ============================================
   PILOT FAILED SECTION
   ============================================ */

.website-page .pilot-failed-section {
  padding: 120px 0;
  background: #0a0f1a;
  position: relative;
  overflow: hidden;
}

.website-page .pilot-failed-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.website-page .pilot-failed-section .section-header-new {
  position: relative;
}

.website-page .pilot-failed-section .section-header-new h2 {
  color: #f1f5f9;
}

.website-page .pilot-failed-section .section-header-new h2 .accent-serif {
  color: #f87171;
}

.website-page .pilot-failed-tag {
  color: #f87171;
}

.website-page .pilot-failed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}

.website-page .pilot-failed-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.6);
  border-radius: 16px;
  padding: 32px 24px;
  transition: all 0.3s ease;
}

.website-page .pilot-failed-card:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(71, 85, 105, 0.8);
  transform: translateY(-4px);
}

.website-page .pilot-failed-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  margin-bottom: 20px;
}

.website-page .pilot-failed-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 12px;
}

.website-page .pilot-failed-card p {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.7;
}

.website-page .pilot-failed-closing {
  text-align: center;
  font-size: 1.125rem;
  color: #94a3b8;
  max-width: 700px;
  margin: 48px auto 0;
  position: relative;
  line-height: 1.7;
}

/* ============================================
   SHADOW AI SECTION - NEW DESIGN
   ============================================ */

.website-page .shadow-section-new {
  padding: 120px 0;
  background: linear-gradient(180deg, #f8fafc 0%, white 100%);
}

.website-page .shadow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.website-page .shadow-content h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin-bottom: 24px;
}

.website-page .shadow-content h2 .accent-serif {
  color: #1e40af;
}

.website-page .shadow-content>p {
  font-size: 17px;
  color: #64748b;
  line-height: 1.8;
  margin-bottom: 16px;
}

.website-page .shadow-content>p.emphasis {
  color: #1e293b;
  font-weight: 500;
}

.website-page .shadow-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}

.website-page .shadow-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  color: #475569;
  transition: all 0.2s ease;
}

.website-page .shadow-feature-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.website-page .shadow-feature-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #059669, #10b981);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

/* Comparison visual */
.website-page .shadow-visual-new {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.website-page .comparison-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e2e8f0;
}

.website-page .comparison-card.bad {
  background: #fef2f2;
  border-color: #fecaca;
}

.website-page .comparison-card.good {
  background: #eff6ff;
  border-color: #bfdbfe;
  box-shadow: 0 10px 40px -10px rgba(37, 99, 235, 0.15);
}

.website-page .comparison-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.website-page .comparison-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.website-page .comparison-card.bad .comparison-icon {
  background: #fee2e2;
}

.website-page .comparison-card.good .comparison-icon {
  background: #dbeafe;
}

.website-page .comparison-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.website-page .comparison-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.website-page .comparison-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #475569;
}

.website-page .comparison-item-icon {
  font-size: 14px;
}

.website-page .comparison-card.bad .comparison-item-icon {
  color: #ef4444;
}

.website-page .comparison-card.good .comparison-item-icon {
  color: #2563eb;
}

/* ============================================
   DATA / CONTEXT SECTION - ORBIT DESIGN
   ============================================ */

.website-page .data-section-new {
  padding: 120px 0;
  background: white;
}

.website-page .data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.website-page .data-visual-new {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Orbit Scene --- */
.website-page .data-orbit-scene {
  position: relative;
  width: 420px;
  height: 420px;
}

/* Inward flow rings */
.website-page .data-flow-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 50%;
  animation: flow-inward 4s ease-in infinite;
  animation-delay: calc(var(--d) * 1.33s);
}

@keyframes flow-inward {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(0.35); opacity: 0; }
}

/* Center glow */
.website-page .data-center-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 260px; height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: glow-pulse 4s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

/* --- Orbit Ring --- */
.website-page .data-orbit-ring {
  position: absolute;
  inset: 0;
  animation: orbit-spin 55s linear infinite;
}

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

/* --- Orbit Nodes --- */
.website-page .data-orbit-node {
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  --angle: calc(var(--i) * 40deg);
  transform: rotate(var(--angle)) translateY(-175px);
}

.website-page .data-orbit-inner {
  width: 54px; height: 54px;
  background: white;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  /* Counter-rotate to stay upright: counters both ring spin and node angle */
  animation: orbit-counter 55s linear infinite;
  animation-delay: calc(-1 * var(--i) * 6.111s);
  transition: border-color 0.3s, box-shadow 0.3s;
}

@keyframes orbit-counter {
  to { transform: rotate(-360deg); }
}

.website-page .data-orbit-inner:hover {
  border-color: #3b82f6;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2);
}

.website-page .data-orbit-inner img {
  width: 26px; height: 26px;
  object-fit: contain;
  pointer-events: none;
}

.website-page .data-orbit-inner span {
  font-size: 8px;
  font-weight: 600;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
}

/* --- Mini Workspace --- */
.website-page .data-mini-workspace {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 210px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 40px -8px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  z-index: 10;
}

.website-page .dmw-chrome {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.website-page .dmw-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
}

.website-page .dmw-title {
  font-size: 9px;
  font-weight: 700;
  color: #334155;
  margin-left: auto;
  letter-spacing: 0.02em;
}

/* Phase container */
.website-page .dmw-body {
  position: relative;
  height: 130px;
  overflow: hidden;
}

.website-page .dmw-phase {
  position: absolute;
  inset: 0;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.website-page .dmw-phase.dmw-active {
  opacity: 1;
  pointer-events: auto;
}

/* Phase 1: AI analyzing */
.website-page .dmw-ai-row {
  display: flex;
  gap: 7px;
  align-items: flex-start;
}

.website-page .dmw-ai-avatar {
  width: 20px; height: 20px;
  min-width: 20px;
  background: linear-gradient(135deg, #1e3a5f, #3b82f6);
  border-radius: 6px;
  color: white;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.website-page .dmw-ai-name {
  font-size: 8px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 2px;
}

.website-page .dmw-ai-msg {
  font-size: 8.5px;
  color: #64748b;
  line-height: 1.4;
}

.website-page .dmw-shimmer-bar {
  height: 6px;
  margin-top: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: dmw-shimmer 1.5s ease-in-out infinite;
}

.website-page .dmw-shimmer-short {
  width: 60%;
  margin-top: 5px;
}

@keyframes dmw-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Phase 2: Chart insight */
.website-page .dmw-chart-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 48px;
  padding: 0 8px;
  margin-top: 6px;
}

.website-page .dmw-bar {
  flex: 1;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  border-radius: 3px 3px 0 0;
  height: 0;
  animation: none;
}

.website-page .dmw-active .dmw-bar {
  animation: bar-grow 0.8s ease-out forwards;
}

.website-page .dmw-active .dmw-bar:nth-child(1) { animation-delay: 0.1s; }
.website-page .dmw-active .dmw-bar:nth-child(2) { animation-delay: 0.2s; }
.website-page .dmw-active .dmw-bar:nth-child(3) { animation-delay: 0.3s; }
.website-page .dmw-active .dmw-bar:nth-child(4) { animation-delay: 0.35s; }
.website-page .dmw-active .dmw-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes bar-grow {
  to { height: var(--h); }
}

.website-page .dmw-bar-danger {
  background: linear-gradient(180deg, #ef4444, #b91c1c);
}

.website-page .dmw-bar-warn {
  background: linear-gradient(180deg, #f59e0b, #d97706);
}

.website-page .dmw-metric {
  font-size: 22px;
  font-weight: 800;
  color: #1e40af;
  text-align: center;
  margin-top: 6px;
  letter-spacing: -0.03em;
}

.website-page .dmw-metric-label {
  font-size: 8px;
  color: #64748b;
  text-align: center;
  font-weight: 500;
}

/* Phase 3: Actions taken */
.website-page .dmw-action-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-size: 9px;
  color: #334155;
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
}

.website-page .dmw-active .dmw-action-item {
  animation: action-in 0.4s ease-out forwards;
}

.website-page .dmw-active .dmw-action-item:nth-child(1) { animation-delay: 0.2s; }
.website-page .dmw-active .dmw-action-item:nth-child(2) { animation-delay: 0.5s; }
.website-page .dmw-active .dmw-action-item:nth-child(3) { animation-delay: 0.8s; }

@keyframes action-in {
  to { opacity: 1; transform: translateY(0); }
}

.website-page .dmw-check {
  color: #22c55e;
  flex-shrink: 0;
}

/* Input bar */
.website-page .dmw-input-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-top: 1px solid #e2e8f0;
  font-size: 8px;
  color: #94a3b8;
}

/* --- Text content --- */
.website-page .data-content h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin-bottom: 24px;
}

.website-page .data-content>p {
  font-size: 17px;
  color: #64748b;
  line-height: 1.8;
  margin-bottom: 16px;
}

.website-page .data-content>p.emphasis {
  color: #1e293b;
  font-weight: 500;
  font-size: 18px;
}

/* ============================================
   DELEGATION GAP SECTION
   ============================================ */

.website-page .delegation-section {
  padding: 120px 0;
  background: linear-gradient(180deg, #f8fafc 0%, white 100%);
}

.website-page .delegation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.website-page .delegation-content h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: 24px;
}

.website-page .delegation-content p {
  font-size: 17px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 16px;
}

.website-page .delegation-content p.emphasis {
  color: #1e293b;
  font-weight: 500;
  font-size: 18px;
}

/* Delegation visual - scrubber slider + card viewport */
.website-page .delegation-visual {
  /* container only */
}

/* ---- Scrubber ---- */
.website-page .deleg-scrubber {
  margin-bottom: 24px;
  user-select: none;
  -webkit-user-select: none;
}

.website-page .deleg-scrub-track {
  position: relative;
  height: 28px;
  cursor: pointer;
}

/* Rail background */
.website-page .deleg-scrub-bg {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: #e2e8f0;
  border-radius: 2px;
}

/* Coloured fill */
.website-page .deleg-scrub-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  width: 0;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, #f87171 0%, #3b82f6 33%, #8b5cf6 67%, #22c55e 100%);
  background-size: 100% 100%;
}

/* Stop pips on the rail */
.website-page .deleg-scrub-pip {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 2px solid white;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: background 0.3s, box-shadow 0.3s;
}

.website-page .deleg-scrub-pip.pip-passed[data-idx="0"] { background: #f87171; }
.website-page .deleg-scrub-pip.pip-passed[data-idx="1"] { background: #3b82f6; }
.website-page .deleg-scrub-pip.pip-passed[data-idx="2"] { background: #8b5cf6; }
.website-page .deleg-scrub-pip.pip-passed[data-idx="3"] { background: #22c55e; }

.website-page .deleg-scrub-pip.pip-current {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

/* Draggable thumb */
.website-page .deleg-scrub-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: white;
  border: 3px solid #f87171;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  cursor: grab;
  z-index: 3;
}

.website-page .deleg-scrub-thumb:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.12);
}

/* Labels row */
.website-page .deleg-scrub-labels {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.website-page .deleg-scrub-lbl {
  text-align: center;
  cursor: pointer;
  padding: 2px 0;
}

.website-page .deleg-scrub-lbl:first-child { text-align: left; }
.website-page .deleg-scrub-lbl:last-child  { text-align: right; }

.website-page .deleg-scrub-lbl span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  transition: color 0.3s;
}

.website-page .deleg-scrub-lbl.deleg-lbl-active span {
  color: #0f172a;
}

.website-page .deleg-scrub-lbl small {
  display: none;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 2px;
}

.website-page .deleg-scrub-lbl.deleg-lbl-active small {
  display: block;
}

.website-page .deleg-lbl-here { color: #dc2626; }
.website-page .deleg-lbl-goal { color: #16a34a; }

/* ---- Card viewport ---- */
.website-page .deleg-viewport {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: white;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.website-page .deleg-strip {
  display: flex;
  width: 400%;
}

.website-page .deleg-slide {
  width: 25%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  box-sizing: border-box;
}

.website-page .deleg-slide-msgs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.website-page .deleg-slide-foot {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid #f1f5f9;
}

/* Shared message styles (reused from before) */
.website-page .deleg-msg-user {
  display: flex;
  justify-content: flex-end;
}

.website-page .deleg-msg-user span {
  display: inline-block;
  padding: 8px 12px;
  background: #f4f4f5;
  border-radius: 14px 14px 4px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: #18181b;
}

.website-page .deleg-msg-ai {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.website-page .deleg-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #4964D8;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.website-page .deleg-msg-content {
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
  flex: 1;
  min-width: 0;
}

.website-page .deleg-tool {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
  margin-top: 5px;
}

.website-page .deleg-tool-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
}

.website-page .deleg-sched {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #16a34a;
  margin-top: 8px;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.08);
  border-radius: 6px;
}

.website-page .deleg-sched svg {
  flex-shrink: 0;
}

/* Pillar "Solves" labels */
.website-page .pillar-solves {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2563eb;
  margin-bottom: 8px;
  margin-top: 4px;
}

/* ============================================
   MODELS SECTION - NEW DESIGN (MARQUEE)
   ============================================ */

.website-page .models-section-new {
  padding: 120px 0 80px;
  background: #f8fafc;
  overflow: hidden;
}

.website-page .integrations-section-new {
  padding: 80px 0 120px;
  background: white;
  overflow: hidden;
}

/* Marquee shared */
.website-page .marquee-wrap {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.website-page .marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
}

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

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 8px)); }
}

.website-page .marquee-models {
  --marquee-duration: 35s;
}

.website-page .marquee-mcps {
  --marquee-duration: 50s;
}

/* Marquee card shared */
.website-page .marquee-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}

.website-page .marquee-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

.website-page .marquee-card-text {
  min-width: 0;
}

.website-page .marquee-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}

.website-page .marquee-card-sub {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* Model card specifics */
.website-page .marquee-model-img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

/* MCP card specifics */
.website-page .mcp-marquee-card {
  padding: 10px 18px;
}

.website-page .marquee-mcp-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ============================================
   SIMLINK SECTION
   ============================================ */

.website-page .simlink-section {
  padding: var(--section-padding) 0;
  background: #0a0f1a;
  color: #e2e8f0;
  overflow: hidden;
}

.website-page .simlink-tag {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
}

.website-page .simlink-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.website-page .simlink-content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #f1f5f9;
  margin-top: 20px;
  margin-bottom: 20px;
}

.website-page .simlink-content > p {
  font-size: 1.125rem;
  color: #94a3b8;
  line-height: 1.7;
  margin-bottom: 28px;
}

.website-page .simlink-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.website-page .simlink-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: #cbd5e1;
}

.website-page .simlink-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.website-page .simlink-cta {
  background: transparent;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 12px 28px;
  font-size: 15px;
  border-radius: 12px;
}

.website-page .simlink-cta:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
}

/* Simlink visual */
.website-page .simlink-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.website-page .simlink-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.website-page .simlink-device {
  width: 100%;
  max-width: 380px;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.4));
  animation: simlink-float 5s ease-in-out infinite;
}

@keyframes simlink-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.website-page .simlink-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94a3b8;
  position: relative;
  z-index: 2;
}

.website-page .simlink-status-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: simlink-pulse 2s ease-in-out infinite;
}

@keyframes simlink-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Notification area — fixed height so device stays put */
.website-page .simlink-notif-area {
  position: relative;
  width: 280px;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  z-index: 3;
  pointer-events: none;
  margin-bottom: 16px;
  overflow: hidden;
}

.website-page .simlink-notif {
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.5s cubic-bezier(0.34,1.56,0.64,1), transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: auto;
}

.website-page .simlink-notif.simlink-notif-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.website-page .simlink-notif.simlink-notif-out {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.website-page .simlink-notif-ico {
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.website-page .simlink-notif-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.website-page .simlink-notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: #22c55e;
  color: #fff;
  border-radius: 50%;
  font-size: 0.5rem;
  font-weight: 700;
}

.website-page .simlink-notif-desc {
  font-size: 0.6875rem;
  color: #64748b;
  line-height: 1.4;
  margin-top: 2px;
}

/* ============================================
   QUOTE SECTION - NEW DESIGN
   ============================================ */

.website-page .quote-section-new {
  padding: 120px 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.website-page .quote-section-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(37, 99, 235, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.website-page .quote-inner-new {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.website-page .quote-mark-new {
  font-size: 80px;
  line-height: 1;
  background: linear-gradient(135deg, #60a5fa, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
}

.website-page .quote-text-new {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400;
  line-height: 1.6;
  color: white;
  margin-bottom: 32px;
}

.website-page .quote-author-new {
  font-size: 16px;
  color: #93c5fd;
}

.website-page .quote-author-new strong {
  color: white;
  font-weight: 500;
}

/* ============================================
   SECURITY SECTION - NEW DESIGN
   ============================================ */

.website-page .security-section-new {
  padding: 120px 0;
  background: #f8fafc;
}

.website-page .security-grid-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.website-page .security-card-new {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.website-page .security-card-new:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.1);
}

.website-page .security-badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.website-page .security-card-new h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.website-page .security-card-new p {
  font-size: 13px;
  color: #64748b;
}

/* ============================================
   BOTTOM CTA - NEW DESIGN
   ============================================ */

.website-page .cta-section-new {
  padding: 120px 0;
  background: white;
  text-align: center;
}

.website-page .cta-inner-new {
  max-width: 700px;
  margin: 0 auto;
}

.website-page .cta-inner-new h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin-bottom: 24px;
}

.website-page .cta-inner-new p {
  font-size: 1.125rem;
  color: #64748b;
  margin-bottom: 40px;
}

.website-page .cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

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

.website-footer {
  background: var(--gray-50);
  padding: 80px 0 40px;
  border-top: 1px solid var(--border-color);
}

.website-footer .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.website-footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 48px;
  margin-bottom: 64px;
}

.website-footer .footer-brand p {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 16px;
  max-width: 280px;
}

.website-footer .footer-brand .logo img {
  height: 24px;
  width: auto;
}

.website-footer .footer-column h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.website-footer .footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.website-footer .footer-link {
  font-size: 14px;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.website-footer .footer-link:hover {
  color: var(--text-primary);
}

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

.website-footer .footer-copyright {
  font-size: 13px;
  color: var(--text-muted);
}

.website-footer .footer-legal {
  display: flex;
  gap: 24px;
}

.website-footer .footer-legal a {
  font-size: 13px;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

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

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

@media (max-width: 1024px) {
  .website-page .hero-showcase {
    height: auto;
    padding: 40px 0;
  }

  .website-page .showcase-main {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }

  .website-page .sc-flyout,
  .website-page .sc-theme-fan,
  .website-page .sc-theme-label {
    display: none;
  }

  .website-page .pillars-grid-new {
    grid-template-columns: repeat(2, 1fr);
  }

  .website-page .pilot-failed-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .website-page .shadow-grid,
  .website-page .data-grid,
  .website-page .delegation-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .website-page .security-grid-new {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .website-page .simlink-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .website-page .simlink-features {
    align-items: center;
  }

  .website-page .simlink-notif-area {
    width: 240px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: 80px;
  }

  .website-header .nav-main {
    display: none;
  }

  .website-header .mobile-menu-toggle {
    display: block;
  }

  .website-page .sc-bar-folder {
    display: none;
  }

  .website-page .sc-bar-stop,
  .website-page .sc-bar-settings {
    display: none;
  }

  .website-page .sc-user-bubble {
    font-size: 11px;
  }

  .website-page .sc-tb-pill {
    display: none;
  }

  .website-page .hero-ctas-new {
    flex-direction: column;
  }

  .website-page .hero-ctas-new a {
    width: 100%;
    text-align: center;
  }

  .website-page .pillars-grid-new {
    grid-template-columns: 1fr;
  }

  .website-page .pilot-failed-grid {
    grid-template-columns: 1fr;
  }

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

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

  .website-page .cta-buttons a {
    width: 100%;
  }

  .website-page .trust-logos {
    gap: 32px;
  }

  .website-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .website-footer .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .website-page .proof-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .website-page .proof-number {
    font-size: 2rem;
  }

  .website-page .data-orbit-scene {
    width: 320px;
    height: 320px;
    margin: 0 auto;
  }

  .website-page .data-orbit-node {
    width: 44px; height: 44px;
    margin: -22px 0 0 -22px;
    transform: rotate(var(--angle)) translateY(-130px);
  }

  .website-page .data-orbit-inner {
    width: 44px; height: 44px;
    border-radius: 11px;
  }

  .website-page .data-orbit-inner img {
    width: 20px; height: 20px;
  }

  .website-page .data-orbit-inner span {
    font-size: 7px;
  }

  .website-page .data-mini-workspace {
    width: 170px;
  }

  .website-page .dmw-body {
    height: 110px;
  }

  .website-page .dmw-ai-msg {
    font-size: 7.5px;
  }

  .website-page .dmw-metric {
    font-size: 18px;
  }

  .website-page .dmw-chart-row {
    height: 45px;
  }
}

@media (max-width: 480px) {
  .website-page .security-grid-new {
    grid-template-columns: 1fr;
  }

}

/* ============================================
   DARK MODE (Browser Preference)
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --primary-blue: #3b82f6;
    --primary-blue-hover: #60a5fa;
    --dark-bg: #0a0f1a;
    --dark-bg-lighter: #111827;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-light: #475569;
    --white: #0f172a;
    --gray-50: #1e293b;
    --gray-100: #1e293b;
    --gray-200: #334155;
    --gray-300: #475569;
    --border-color: #334155;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
  }

  .website-page {
    background: #0a0f1a;
    color: #f1f5f9;
  }

  .website-header {
    background: rgba(15, 23, 42, 0.85);
    border-bottom-color: var(--border-color);
  }

  .website-header .logo img.logo-light {
    display: block;
    filter: brightness(0) invert(1);
  }

  .website-header .logo img.logo-dark {
    display: none !important;
  }

  .website-page .hero-new {
    background: linear-gradient(180deg, #0f172a 0%, #0a0f1a 100%);
  }

  .website-page .hero-new::before {
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  }

  .website-page .hero-orb-1 {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.3) 0%, rgba(59, 130, 246, 0.2) 100%);
  }

  .website-page .hero-orb-2 {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(96, 165, 250, 0.15) 100%);
  }

  .website-page .hero-eyebrow {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
  }

  .website-page .hero-new h1 {
    color: #f1f5f9;
  }

  .website-page .hero-subtitle-new {
    color: #94a3b8;
  }

  .website-page .gradient-highlight {
    background: linear-gradient(90deg, #60a5fa, #93c5fd, #a78bfa, #60a5fa);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradientWave 4s ease-in-out infinite;
  }

  .website-page .btn-gradient {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  }

  .website-page .btn-soft {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
  }

  .website-page .btn-soft:hover {
    background: #334155;
    border-color: #475569;
  }

  /* Showcase browser chrome - dark mode */
  .website-page .showcase-main {
    background: #1e293b;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 25px 50px -12px rgba(0, 0, 0, 0.5),
      0 0 80px -20px rgba(73, 100, 216, 0.15);
  }

  .website-page .showcase-browser-bar {
    background: #0f172a;
    border-bottom-color: #334155;
  }

  .website-page .showcase-url {
    background: #1e293b;
    border-color: #334155;
    color: #64748b;
  }

  /* Dark mode: flip browser content to dark */
  .website-page .hero-showcase {
    --sc-bg: #0f172a;
    --sc-surface: #1e293b;
    --sc-text: #f1f5f9;
    --sc-muted: #94a3b8;
    --sc-dim: #64748b;
    --sc-accent: #4964D8;
    --sc-border: #334155;
    --sc-green: #22c55e;
    --sc-amber: #f59e0b;
  }

  .website-page .sc-deck-slides {
    background: #0f172a;
  }

  .website-page .sc-flyout {
    --fc-bg: #1e293b;
    --fc-text: #f1f5f9;
    --fc-muted: #94a3b8;
    --fc-dim: #64748b;
    --fc-accent: #3b82f6;
    --fc-border: #334155;
    --fc-green: #22c55e;
    --fc-amber: #f59e0b;
    background: var(--fc-bg);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.08),
      0 10px 40px -10px rgba(0,0,0,0.4);
  }

  .website-page .trust-bar {
    background: #0f172a;
    border-color: var(--border-color);
  }

  .website-page .trust-logo img {
    filter: grayscale(100%) invert(1) brightness(0.8);
    opacity: 0.7;
  }

  .website-page .trust-logo:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
  }

  .website-page .social-proof {
    background: #0a0f1a;
    border-bottom-color: var(--border-color);
  }

  .website-page .section-header-new h2 {
    color: #f1f5f9;
  }

  .website-page .section-header-new p {
    color: #94a3b8;
  }

  .website-page .pillars-new {
    background: #0a0f1a;
  }

  .website-page .pillar-card {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .pillar-card:hover {
    background: #0f172a;
    border-color: #475569;
  }

  .website-page .pillar-card h3 {
    color: #f1f5f9;
  }

  .website-page .pillar-card p {
    color: #94a3b8;
  }

  .website-page .models-demo,
  .website-page .connect-demo {
    background: #070b14;
  }

  .website-page .mdl-card,
  .website-page .cnt-int {
    background: rgba(15, 23, 42, 0.8);
  }

  .website-page .cnt-dot {
    border-color: #070b14;
  }

  .website-page .agent-demo {
    background: #070b14;
  }

  .website-page .agent-demo-task {
    background: rgba(15, 23, 42, 0.8);
  }

  .website-page .builder-demo {
    background: #070b14;
  }

  .website-page .builder-demo-item {
    background: rgba(15, 23, 42, 0.8);
  }

  .website-page .builder-demo-live-dot {
    border-color: #070b14;
  }

  .website-page .builder-deck {
    background: #151d2e;
    border-color: rgba(51, 65, 85, 0.4);
  }

  .website-page .shadow-section-new {
    background: linear-gradient(180deg, #0f172a 0%, #0a0f1a 100%);
  }

  .website-page .shadow-content h2 {
    color: #f1f5f9;
  }

  .website-page .shadow-content h2 .accent-serif {
    color: #60a5fa;
  }

  .website-page .shadow-content>p {
    color: #94a3b8;
  }

  .website-page .shadow-content>p.emphasis {
    color: #e2e8f0;
  }

  .website-page .shadow-feature-item {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
  }

  .website-page .shadow-feature-item:hover {
    border-color: #475569;
  }

  .website-page .comparison-card {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .comparison-card.bad {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
  }

  .website-page .comparison-card.good {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
  }

  .website-page .comparison-title {
    color: #f1f5f9;
  }

  .website-page .comparison-item {
    color: #94a3b8;
  }

  .website-page .data-section-new {
    background: #0a0f1a;
  }

  .website-page .data-orbit-inner {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .data-orbit-inner:hover {
    border-color: #3b82f6;
  }

  .website-page .data-orbit-inner span {
    color: #94a3b8;
  }

  .website-page .data-mini-workspace {
    background: #1e293b;
    box-shadow: 0 8px 40px -8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
  }

  .website-page .dmw-chrome {
    background: #0f172a;
    border-bottom-color: #334155;
  }

  .website-page .dmw-dot {
    background: #475569;
  }

  .website-page .dmw-title {
    color: #94a3b8;
  }

  .website-page .dmw-ai-name {
    color: #e2e8f0;
  }

  .website-page .dmw-ai-msg {
    color: #94a3b8;
  }

  .website-page .dmw-shimmer-bar {
    background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
    background-size: 200% 100%;
  }

  .website-page .dmw-metric {
    color: #60a5fa;
  }

  .website-page .dmw-metric-label {
    color: #94a3b8;
  }

  .website-page .dmw-action-item {
    color: #e2e8f0;
  }

  .website-page .dmw-input-bar {
    border-top-color: #334155;
    color: #64748b;
  }

  .website-page .data-flow-ring {
    border-color: rgba(59, 130, 246, 0.2);
  }

  .website-page .data-center-glow {
    background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
  }

  .website-page .data-content h2 {
    color: #f1f5f9;
  }

  .website-page .data-content>p {
    color: #94a3b8;
  }

  .website-page .data-content>p.emphasis {
    color: #e2e8f0;
  }

  .website-page .delegation-section {
    background: linear-gradient(180deg, #0f172a 0%, #0a0f1a 100%);
  }

  .website-page .delegation-content h2 {
    color: #f1f5f9;
  }

  .website-page .delegation-content p {
    color: #94a3b8;
  }

  .website-page .delegation-content p.emphasis {
    color: #e2e8f0;
  }

  .website-page .deleg-scrub-bg {
    background: #334155;
  }

  .website-page .deleg-scrub-pip {
    background: #475569;
    border-color: #1e293b;
  }

  .website-page .deleg-scrub-thumb {
    background: #1e293b;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  }

  .website-page .deleg-scrub-lbl span {
    color: #64748b;
  }

  .website-page .deleg-scrub-lbl.deleg-lbl-active span {
    color: #f1f5f9;
  }

  .website-page .deleg-viewport {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .deleg-msg-user span {
    background: #334155;
    color: #f1f5f9;
  }

  .website-page .deleg-msg-content {
    color: #cbd5e1;
  }

  .website-page .deleg-tool {
    color: #94a3b8;
  }

  .website-page .deleg-slide-foot {
    color: #94a3b8;
    border-top-color: #334155;
  }

  .website-page .pillar-solves {
    color: #60a5fa;
  }

  .website-page .models-section-new {
    background: #0f172a;
  }

  .website-page .integrations-section-new {
    background: #0a0f1a;
  }

  .website-page .marquee-card {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .marquee-card:hover {
    border-color: #475569;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  .website-page .marquee-card-name {
    color: #f1f5f9;
  }

  .website-page .marquee-card-sub {
    color: #64748b;
  }

  .website-page .quote-section-new {
    background: linear-gradient(135deg, #070b14 0%, #0f172a 100%);
  }

  .website-page .security-section-new {
    background: #0f172a;
  }

  .website-page .security-card-new {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .security-card-new:hover {
    border-color: #475569;
  }

  .website-page .security-badge {
    background: linear-gradient(135deg, #0f172a, #1e293b);
  }

  .website-page .security-card-new h3 {
    color: #f1f5f9;
  }

  .website-page .security-card-new p {
    color: #94a3b8;
  }

  .website-page .cta-section-new {
    background: #0a0f1a;
  }

  .website-page .cta-inner-new h2 {
    color: #f1f5f9;
  }

  .website-page .cta-inner-new p {
    color: #94a3b8;
  }

  .website-footer {
    background: #0f172a;
    border-top-color: var(--border-color);
  }

  .website-footer .footer-bottom {
    border-top-color: var(--border-color);
  }

  .website-footer .logo img {
    filter: invert(1) brightness(2);
  }

  .website-page .gradient-text,
  .website-page .proof-number {
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .website-header .nav-link:hover {
    background: #1e293b;
  }

  .website-header .dropdown {
    background: #1e293b;
    border-color: var(--border-color);
  }

  .website-header .dropdown-item:hover {
    background: #0f172a;
  }

}

/* ============================================
   NEW FOOTER STYLES (Dark theme footer)
   ============================================ */

.footer {
  background: #1e293b;
  padding: 80px 0 40px;
  color: #94a3b8;
}

.footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Top section with brand and social */
.footer .footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid #334155;
}

.footer .footer-brand {
  max-width: 320px;
}

.footer .footer-brand .logo {
  display: inline-block;
  margin-bottom: 16px;
}

/* Footer is always dark, so invert the light logo to white */
.footer .footer-brand .logo-light {
  display: block;
  filter: brightness(0) invert(1);
}

.footer .footer-brand .logo-dark {
  display: none !important;
}

.footer .footer-brand p {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.6;
}

/* Social links */
.footer .footer-social {
  display: flex;
  gap: 12px;
}

.footer .social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: all 0.2s ease;
}

.footer .social-link:hover {
  background: #475569;
  color: #f1f5f9;
}

/* Footer navigation grid */
.footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  margin-bottom: 64px;
}

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

.footer .footer-column h4 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #f1f5f9;
  margin-bottom: 20px;
}

.footer .footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer .footer-link {
  font-size: 13px;
  color: #94a3b8;
  transition: color 0.15s ease;
}

.footer .footer-link:hover {
  color: #f1f5f9;
}

.footer .footer-link-more {
  margin-top: 8px;
  font-weight: 500;
}

/* Footer bottom */
.footer .footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid #334155;
}

@media (min-width: 768px) {
  .footer .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer .footer-partner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer .partner-logo {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
}

.footer .footer-partner p {
  font-size: 13px;
  color: #94a3b8;
}

.footer .footer-partner a {
  color: #60a5fa;
  text-decoration: none;
}

.footer .footer-partner a:hover {
  text-decoration: underline;
}

.footer .footer-copyright {
  font-size: 13px;
  color: #64748b;
}

/* Responsive footer */
@media (max-width: 768px) {
  .footer .footer-top {
    flex-direction: column;
    gap: 32px;
  }
  
  .footer .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer .footer-bottom {
    text-align: center;
  }
  
  .footer .footer-partner {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   REUSABLE PAGE-LEVEL CLASSES  (wp- prefix)
   ============================================ */

/* --- Layout --- */
.wp-hero {
  padding: 140px 0 48px;
  text-align: center;
}
.wp-hero h1 { font-size: 3rem; letter-spacing: -0.04em; line-height: 1.1; }
.wp-hero p  { color: var(--text-secondary); font-size: 1.25rem; margin-top: 16px; max-width: 640px; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .wp-hero h1 { font-size: 3.75rem; } }

.wp-section     { padding: 64px 0; }
.wp-section-alt { padding: 64px 0; background: var(--gray-50); border-radius: var(--radius-lg); margin: 32px 0; }
.wp-cta         { padding: 64px 0; text-align: center; }

/* --- Grids --- */
.wp-grid-2 { display: grid; grid-template-columns: 1fr; gap: 32px; }
.wp-grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) {
  .wp-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .wp-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wp-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- Cards --- */
.wp-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: box-shadow var(--transition-base);
}
.wp-card:hover { box-shadow: var(--shadow-md); }

/* --- Sidebar layout (contact / sales forms) --- */
.wp-sidebar-layout { display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--white); }
@media (min-width: 768px) { .wp-sidebar-layout { grid-template-columns: 1fr 2fr; } }
.wp-sidebar { background: linear-gradient(135deg, #2563eb, #4338ca); color: var(--white); padding: 40px; }
.wp-sidebar h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 24px; }
.wp-main { padding: 40px; }
.wp-main h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 24px; color: var(--text-primary); }

/* --- Forms --- */
.wp-form-group { margin-bottom: 20px; }
.wp-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.wp-label .required { color: #ef4444; }
.wp-input, .wp-select, .wp-textarea {
  width: 100%;
  padding: 10px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wp-input:focus, .wp-select:focus, .wp-textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.wp-textarea { resize: vertical; min-height: 100px; }

/* --- FAQ --- */
.wp-faq-item { border-bottom: 1px solid var(--border-color); padding-bottom: 24px; margin-bottom: 24px; }
.wp-faq-q {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font-size: 1.125rem; font-weight: 500; color: var(--text-primary); gap: 12px;
}
.wp-faq-q i { transition: transform var(--transition-base); color: var(--text-muted); }
.wp-faq-a { margin-top: 16px; color: var(--text-secondary); line-height: 1.7; }

/* --- Badges --- */
.wp-badge { display: inline-block; padding: 2px 10px; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; }
.wp-badge-blue  { background: #dbeafe; color: #1e40af; }
.wp-badge-green { background: #dcfce7; color: #166534; }
.wp-badge-purple { background: #f3e8ff; color: #6b21a8; }
.wp-badge-gray  { background: var(--gray-100); color: var(--text-secondary); }

/* --- Comparison table --- */
.wp-compare-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.wp-compare-table th:first-child, .wp-compare-table td:first-child { width: 18%; }
.wp-compare-table th:nth-child(2), .wp-compare-table td:nth-child(2), .wp-compare-table th:nth-child(3), .wp-compare-table td:nth-child(3) { width: 41%; }
.wp-compare-table thead { background: #eff6ff; }
.wp-compare-table th { padding: 16px 24px; text-align: left; font-size: 1rem; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.wp-compare-table td { padding: 12px 24px; border-bottom: 1px solid var(--gray-100); color: var(--text-secondary); word-wrap: break-word; overflow-wrap: break-word; }
.wp-compare-table tbody tr:hover { background: var(--gray-50); }
.wp-compare-table .highlight-row { background: #dbeafe; }
.wp-compare-table img { max-width: 64px; height: 64px; object-fit: contain; display: inline-block; border-radius: 9999px; }

/* --- Comparison hero cards --- */
.wp-compare-hero { display: flex; align-items: center; gap: 24px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.wp-compare-model-card { flex: 1; min-width: 220px; max-width: 360px; background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; box-shadow: var(--shadow-sm); }
.wp-compare-model-card img { width: 72px; height: 72px; object-fit: contain; border-radius: 9999px; margin: 0 auto 16px; display: block; }
.wp-compare-model-card h3 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.wp-compare-model-card .wp-compare-lab { font-size: 0.875rem; color: var(--text-muted); }
.wp-compare-vs { font-size: 1.5rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }

/* --- Comparison related card images --- */
.wp-compare-related-img { width: 40px; height: 40px; object-fit: contain; border-radius: 9999px; flex-shrink: 0; }

/* --- Legal / prose text --- */
.wp-prose h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 12px; margin-top: 32px; color: var(--text-primary); }
.wp-prose p  { margin-bottom: 12px; color: var(--text-secondary); line-height: 1.7; }
.wp-prose ul, .wp-prose ol { padding-left: 24px; margin-bottom: 12px; }
.wp-prose ul { list-style: disc; }
.wp-prose ol { list-style: decimal; }
.wp-prose li { margin-bottom: 8px; color: var(--text-secondary); line-height: 1.7; }
.wp-prose a  { color: var(--primary-blue); }
.wp-prose a:hover { text-decoration: underline; }
.wp-prose strong { color: var(--text-primary); }


/* ============================================
   MCP DETAIL PAGE
   ============================================ */

.mcp-detail-top {
  padding-top: 140px;
}

.mcp-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 12px;
}

.mcp-detail-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: white;
  padding: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.mcp-detail-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.mcp-detail-icon-placeholder {
  color: var(--text-muted);
  font-size: 2rem;
}

.mcp-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.mcp-detail-meta-author {
  font-weight: 500;
  color: var(--text-primary);
}

.mcp-detail-meta-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5e1;
}

.mcp-detail-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 1024px) {
  .mcp-detail-body {
    grid-template-columns: 1fr 300px;
  }
}

.mcp-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mcp-detail-sidebar-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.mcp-detail-sidebar-card h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.mcp-detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mcp-detail-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mcp-detail-info-label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.mcp-detail-info-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.mcp-detail-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcp-detail-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.mcp-detail-feature i {
  color: #22c55e;
  font-size: 0.75rem;
  width: 16px;
  text-align: center;
}

.mcp-detail-install-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: all 0.15s ease;
}

.mcp-detail-install-btn-primary {
  background: #2563eb;
  color: white;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

.mcp-detail-install-btn-primary:hover {
  background: #1d4ed8;
}

.mcp-detail-install-btn-disabled {
  background: var(--gray-100);
  color: var(--text-muted);
  cursor: not-allowed;
}

.mcp-detail-section {
  margin-bottom: 48px;
}

.mcp-detail-section h2 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.mcp-detail-desc-card {
  background: var(--gray-50);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.mcp-detail-tool-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color 0.15s ease;
}

.mcp-detail-tool-card:hover {
  border-color: #cbd5e1;
}

.mcp-detail-tool-card h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.mcp-detail-tool-card p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.mcp-detail-prompt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gray-50);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.mcp-detail-prompt i {
  color: var(--text-muted);
  margin-top: 2px;
  flex-shrink: 0;
}

/* Dark mode overrides for MCP detail */
@media (prefers-color-scheme: dark) {
  .mcp-detail-icon {
    background: var(--dark-bg-lighter);
    border-color: #334155;
  }
  .mcp-detail-sidebar-card {
    background: var(--dark-bg-lighter);
    border-color: #334155;
  }
  .mcp-detail-desc-card {
    background: var(--dark-bg-lighter);
    border-color: #334155;
  }
  .mcp-detail-tool-card {
    background: var(--dark-bg-lighter);
    border-color: #334155;
  }
  .mcp-detail-prompt {
    background: var(--dark-bg-lighter);
    border-color: #334155;
  }
}

/* --- Dark-mode overrides for wp- classes --- */
@media (prefers-color-scheme: dark) {
  .website-page .wp-section-alt { background: var(--dark-bg-lighter); }
  .website-page .wp-card { background: var(--dark-bg-lighter); border-color: #334155; }
  .website-page .wp-sidebar { background: linear-gradient(135deg, #1e40af, #312e81); }
  .website-page .wp-main { background: var(--dark-bg); }
  .website-page .wp-input, .website-page .wp-select, .website-page .wp-textarea { background: var(--dark-bg-lighter); border-color: #334155; color: #e2e8f0; }
  .website-page .wp-faq-q { color: #e2e8f0; }
  .website-page .wp-faq-a { color: #94a3b8; }
  .website-page .wp-prose h2 { color: #e2e8f0; }
  .website-page .wp-prose p, .website-page .wp-prose li { color: #94a3b8; }
  .website-page .wp-compare-table { background: var(--dark-bg-lighter); }
  .website-page .wp-compare-table thead { background: #1e293b; }
  .website-page .wp-compare-table th { color: #e2e8f0; border-color: #334155; }
  .website-page .wp-compare-table td { color: #94a3b8; border-color: #1e293b; }
  .website-page .wp-compare-table tbody tr:hover { background: #0f172a; }
  .website-page .wp-compare-model-card { background: var(--dark-bg-lighter); border-color: #334155; }
  .website-page .wp-compare-model-card h3 { color: #e2e8f0; }
  .website-page .wp-compare-vs { color: #64748b; }
}

/* ============================================
   SALES CHATBOT MODAL
   ============================================ */

/* Overlay */
.sc-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sc-chat-overlay.sc-chat-open {
  display: flex;
}

/* Modal */
.sc-chat-modal {
  width: 800px;
  max-width: calc(100vw - 32px);
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 64px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: scChatSlideUp 0.25s ease-out;
}

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

/* Header */
.sc-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.sc-chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sc-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.sc-chat-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
}
.sc-chat-subtitle {
  font-size: 12px;
  color: #64748b;
  line-height: 1.3;
}
.sc-chat-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #64748b;
  cursor: pointer;
  border: none;
  background: none;
  transition: background 0.15s, color 0.15s;
}
.sc-chat-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Messages */
.sc-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Message bubbles */
.sc-chat-msg {
  display: flex;
  gap: 10px;
  animation: scChatFadeIn 0.2s ease-out;
}
@keyframes scChatFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.sc-chat-msg-user {
  flex-direction: row-reverse;
}
.sc-chat-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 2px;
}
.sc-chat-msg-bubble {
  max-width: 320px;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.sc-chat-msg-assistant .sc-chat-msg-bubble {
  background: #f1f5f9;
  color: #0f172a;
  border-bottom-left-radius: 4px;
}
.sc-chat-msg-user .sc-chat-msg-bubble {
  background: #2563eb;
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Typing indicator */
.sc-chat-typing {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sc-chat-typing-dots {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: #f1f5f9;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.sc-chat-typing-dots span {
  width: 7px;
  height: 7px;
  background: #94a3b8;
  border-radius: 50%;
  animation: scChatBounce 1.4s ease-in-out infinite;
}
.sc-chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.sc-chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes scChatBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* Input area */
.sc-chat-input-area {
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.sc-chat-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px 4px 4px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sc-chat-input-wrap:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.sc-chat-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #0f172a;
  outline: none;
  -webkit-appearance: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
  padding: 6px 0;
}
.sc-chat-input:focus {
  outline: none;
  box-shadow: none;
}
.sc-chat-input::placeholder {
  color: #94a3b8;
}
.sc-chat-send {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.sc-chat-send:hover {
  background: #1d4ed8;
}
.sc-chat-send:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}

/* Mobile: full-screen modal */
@media (max-width: 640px) {
  .sc-chat-modal {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
  .sc-chat-overlay {
    align-items: stretch;
  }
}


/* ============================================
   ENTERPRISE PAGE STYLES
   Follows the Simtheory design system from website.css
   ============================================ */

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

.website-page .ent-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 100px;
  padding-bottom: 60px;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  position: relative;
  overflow: hidden;
}

.website-page .ent-hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' fill='white'/%3E%3C/svg%3E");
  pointer-events: none;
}

.website-page .ent-hero-grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* ---- Education hero mosaic image reveal ---- */

.website-page .edu-mosaic-layer {
  position: absolute;
  inset: 0;
  z-index: 0;           /* behind .container (z-index:1) but above bg layers */
  pointer-events: none;
  overflow: hidden;
}

.website-page .edu-mosaic-group {
  position: absolute;
}

.website-page .edu-mosaic-cell {
  position: absolute;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.45s ease, transform 0.45s ease;
  border-radius: 2px;
}

.website-page .edu-mosaic-cell.edu-mosaic-visible {
  opacity: 0.22;
  transform: scale(1);
}

@media (prefers-color-scheme: dark) {
  .website-page .edu-mosaic-cell.edu-mosaic-visible {
    opacity: 0.16;
  }
}

@media (max-width: 767px) {
  .website-page .edu-mosaic-layer {
    display: none;
  }
}

/* ---- end education mosaic ---- */

.website-page .ent-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.website-page .ent-hero-glow-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, transparent 70%);
  top: -200px;
  right: -100px;
}

.website-page .ent-hero-glow-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
  bottom: -100px;
  left: -100px;
}

.website-page .ent-hero .container {
  position: relative;
  z-index: 1;
}

.website-page .ent-hero-content {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.website-page .ent-hero .hero-eyebrow {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.website-page .ent-hero .hero-eyebrow-dot {
  background: #3b82f6;
}

.website-page .ent-hero h1 {
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 24px;
}

.website-page .ent-hero .hero-subtitle-new {
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 36px;
}

/* ============================================
   VALUE PROPOSITION
   ============================================ */

.website-page .ent-value {
  padding: 100px 0;
  background: white;
}

.website-page .ent-value-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.website-page .ent-value-content {
  text-align: center;
  margin-bottom: 56px;
}

.website-page .ent-value-content h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin-bottom: 20px;
  line-height: 1.2;
}

.website-page .ent-value-content p {
  font-size: 18px;
  color: #64748b;
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto;
}

.website-page .ent-value-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.website-page .ent-pillar {
  text-align: center;
  padding: 36px 28px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.website-page .ent-pillar:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.website-page .ent-pillar-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  margin: 0 auto 18px;
}

.website-page .ent-pillar h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.website-page .ent-pillar p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

/* ============================================
   ENT-PILLAR ANIMATED DEMO PANELS
   Tile 1: Assistants (18s loop)
   Tile 2: Models & Integrations (16s loop)
   Tile 3: Security (14s loop)
   ============================================ */

/* -- Shared: all 3 tiles become flex cards with dark demo panels -- */
.website-page .ent-pillar-assistants,
.website-page .ent-pillar-models,
.website-page .ent-pillar-security {
  padding-top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.website-page .ent-assist-demo,
.website-page .ent-models-demo,
.website-page .ent-sec-demo {
  background: #0f172a;
  border-radius: 12px 12px 0 0;
  padding: 16px;
  margin: 0 -28px 18px;
  position: relative;
  overflow: hidden;
  height: 220px;
  flex-shrink: 0;
}

/* ---- TILE 1: ASSISTANTS DEMO (18s loop) ---- */

/* Header: avatar + name */
.website-page .ent-assist-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  opacity: 0;
  animation: ent-a-header 18s ease infinite;
}

.website-page .ent-assist-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1e40af, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  flex-shrink: 0;
}

.website-page .ent-assist-avatar-icon { line-height: 0; }

.website-page .ent-assist-live-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #0f172a;
}

.website-page .ent-assist-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.website-page .ent-assist-name {
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
}

.website-page .ent-assist-desc {
  font-size: 10px;
  color: #64748b;
}

/* Config items */
.website-page .ent-assist-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.website-page .ent-assist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #94a3b8;
  padding: 6px 10px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 6px;
  opacity: 0;
  transform: translateX(-8px);
}

.website-page .ent-assist-item-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.website-page .ent-assist-icon-mcp { background: rgba(139, 92, 246, 0.25); color: #a78bfa; }
.website-page .ent-assist-icon-skill { background: rgba(59, 130, 246, 0.25); color: #60a5fa; }
.website-page .ent-assist-icon-kb { background: rgba(245, 158, 11, 0.25); color: #fbbf24; }

.website-page .ent-assist-item-label { flex: 1; }

.website-page .ent-assist-item-check {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid #334155;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.website-page .ent-assist-item-check::after {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  transform: rotate(-45deg) translate(1px, -1px);
}

.website-page .ent-assist-item-1 { animation: ent-a-item1 18s ease infinite; }
.website-page .ent-assist-item-1 .ent-assist-item-check { animation: ent-a-chk1 18s ease infinite; }
.website-page .ent-assist-item-1 .ent-assist-item-check::after { animation: ent-a-tick1 18s ease infinite; }

.website-page .ent-assist-item-2 { animation: ent-a-item2 18s ease infinite; }
.website-page .ent-assist-item-2 .ent-assist-item-check { animation: ent-a-chk2 18s ease infinite; }
.website-page .ent-assist-item-2 .ent-assist-item-check::after { animation: ent-a-tick2 18s ease infinite; }

.website-page .ent-assist-item-3 { animation: ent-a-item3 18s ease infinite; }
.website-page .ent-assist-item-3 .ent-assist-item-check { animation: ent-a-chk3 18s ease infinite; }
.website-page .ent-assist-item-3 .ent-assist-item-check::after { animation: ent-a-tick3 18s ease infinite; }

/* Deployed badge */
.website-page .ent-assist-deployed {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #10b981;
  justify-content: center;
  opacity: 0;
  animation: ent-a-deployed 18s ease infinite;
}

.website-page .ent-assist-deployed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

/* -- Assistants keyframes -- */
@keyframes ent-a-header {
  0%, 2%   { opacity: 0; transform: translateY(4px); }
  6%, 82%  { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes ent-a-item1 {
  0%, 8%    { opacity: 0; transform: translateX(-8px); }
  14%, 82%  { opacity: 1; transform: translateX(0); }
  90%, 100% { opacity: 0; transform: translateX(-8px); }
}
@keyframes ent-a-item2 {
  0%, 16%   { opacity: 0; transform: translateX(-8px); }
  22%, 82%  { opacity: 1; transform: translateX(0); }
  90%, 100% { opacity: 0; transform: translateX(-8px); }
}
@keyframes ent-a-item3 {
  0%, 24%   { opacity: 0; transform: translateX(-8px); }
  30%, 82%  { opacity: 1; transform: translateX(0); }
  90%, 100% { opacity: 0; transform: translateX(-8px); }
}

@keyframes ent-a-chk1 {
  0%, 18%   { border-color: #334155; background: transparent; }
  22%, 82%  { border-color: #10b981; background: #10b981; }
  90%, 100% { border-color: #334155; background: transparent; }
}
@keyframes ent-a-chk2 {
  0%, 28%   { border-color: #334155; background: transparent; }
  32%, 82%  { border-color: #10b981; background: #10b981; }
  90%, 100% { border-color: #334155; background: transparent; }
}
@keyframes ent-a-chk3 {
  0%, 36%   { border-color: #334155; background: transparent; }
  40%, 82%  { border-color: #10b981; background: #10b981; }
  90%, 100% { border-color: #334155; background: transparent; }
}

@keyframes ent-a-tick1 {
  0%, 18%   { border-color: transparent; }
  22%, 82%  { border-color: white; }
  90%, 100% { border-color: transparent; }
}
@keyframes ent-a-tick2 {
  0%, 28%   { border-color: transparent; }
  32%, 82%  { border-color: white; }
  90%, 100% { border-color: transparent; }
}
@keyframes ent-a-tick3 {
  0%, 36%   { border-color: transparent; }
  40%, 82%  { border-color: white; }
  90%, 100% { border-color: transparent; }
}

@keyframes ent-a-deployed {
  0%, 48%   { opacity: 0; transform: translateY(4px); }
  54%, 82%  { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(4px); }
}

/* ---- TILE 2: MODELS & TOOLS DEMO (16s loop) ---- */

/* Model cards row */
.website-page .ent-mdl-grid {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}

.website-page .ent-mdl-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(30, 41, 59, 0.6);
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  opacity: 0;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.website-page .ent-mdl-card img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
}

.website-page .ent-mdl-card-1 { animation: ent-m-c1 16s ease infinite; }
.website-page .ent-mdl-card-2 { animation: ent-m-c2 16s ease infinite; }
.website-page .ent-mdl-card-3 { animation: ent-m-c3 16s ease infinite; }

/* Integration icon row */
.website-page .ent-int-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.website-page .ent-int-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.website-page .ent-int-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 3px;
}

.website-page .ent-int-icon-1 { animation: ent-m-i1 16s ease infinite; }
.website-page .ent-int-icon-2 { animation: ent-m-i2 16s ease infinite; }
.website-page .ent-int-icon-3 { animation: ent-m-i3 16s ease infinite; }
.website-page .ent-int-icon-4 { animation: ent-m-i4 16s ease infinite; }

/* Status line */
.website-page .ent-int-status {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #3b82f6;
  opacity: 0;
  animation: ent-m-status 16s ease infinite;
}

/* -- Models & Tools keyframes -- */

/* Models appear, then cycle highlights */
@keyframes ent-m-c1 {
  0%       { opacity: 0; transform: scale(0.9); }
  3%, 8%   { opacity: 1; transform: scale(1); border-color: transparent; box-shadow: none; }
  12%, 30% { opacity: 1; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
  34%      { opacity: 1; border-color: transparent; box-shadow: none; }
  78%      { opacity: 1; }
  86%, 100% { opacity: 0; }
}
@keyframes ent-m-c2 {
  0%, 1%   { opacity: 0; transform: scale(0.9); }
  4%, 30%  { opacity: 1; transform: scale(1); border-color: transparent; box-shadow: none; }
  34%, 52% { opacity: 1; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
  56%      { opacity: 1; border-color: transparent; box-shadow: none; }
  78%      { opacity: 1; }
  86%, 100% { opacity: 0; }
}
@keyframes ent-m-c3 {
  0%, 2%   { opacity: 0; transform: scale(0.9); }
  5%, 52%  { opacity: 1; transform: scale(1); border-color: transparent; box-shadow: none; }
  56%, 72% { opacity: 1; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
  76%      { opacity: 1; border-color: transparent; box-shadow: none; }
  78%      { opacity: 1; }
  86%, 100% { opacity: 0; }
}

/* Integration icons appear staggered after models */
@keyframes ent-m-i1 {
  0%, 35%  { opacity: 0; transform: scale(0.8); }
  40%, 78% { opacity: 1; transform: scale(1); }
  86%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes ent-m-i2 {
  0%, 38%  { opacity: 0; transform: scale(0.8); }
  43%, 78% { opacity: 1; transform: scale(1); }
  86%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes ent-m-i3 {
  0%, 41%  { opacity: 0; transform: scale(0.8); }
  46%, 78% { opacity: 1; transform: scale(1); }
  86%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes ent-m-i4 {
  0%, 44%  { opacity: 0; transform: scale(0.8); }
  49%, 78% { opacity: 1; transform: scale(1); }
  86%, 100% { opacity: 0; transform: scale(0.8); }
}

@keyframes ent-m-status {
  0%, 52%  { opacity: 0; }
  58%, 78% { opacity: 1; }
  86%, 100% { opacity: 0; }
}

/* ---- TILE 3: SECURITY DEMO (14s loop) ---- */

/* Shield */
.website-page .ent-sec-shield {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  width: 52px;
  height: 52px;
  color: #3b82f6;
  position: relative;
  opacity: 0;
  animation: ent-s-shield 14s ease infinite;
}

.website-page .ent-sec-shield-check {
  position: absolute;
  bottom: -2px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  animation: ent-s-shield-chk 14s ease infinite;
}

/* Security checklist */
.website-page .ent-sec-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.website-page .ent-sec-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
  padding: 5px 10px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 6px;
  opacity: 0;
}

.website-page .ent-sec-check {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid #334155;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.website-page .ent-sec-check::after {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  transform: rotate(-45deg) translate(1px, -1px);
}

.website-page .ent-sec-item-1 { animation: ent-s-row1 14s ease infinite; }
.website-page .ent-sec-item-1 .ent-sec-check { animation: ent-s-chk1 14s ease infinite; }
.website-page .ent-sec-item-1 .ent-sec-check::after { animation: ent-s-tick1 14s ease infinite; }

.website-page .ent-sec-item-2 { animation: ent-s-row2 14s ease infinite; }
.website-page .ent-sec-item-2 .ent-sec-check { animation: ent-s-chk2 14s ease infinite; }
.website-page .ent-sec-item-2 .ent-sec-check::after { animation: ent-s-tick2 14s ease infinite; }

.website-page .ent-sec-item-3 { animation: ent-s-row3 14s ease infinite; }
.website-page .ent-sec-item-3 .ent-sec-check { animation: ent-s-chk3 14s ease infinite; }
.website-page .ent-sec-item-3 .ent-sec-check::after { animation: ent-s-tick3 14s ease infinite; }

.website-page .ent-sec-item-4 { animation: ent-s-row4 14s ease infinite; }
.website-page .ent-sec-item-4 .ent-sec-check { animation: ent-s-chk4 14s ease infinite; }
.website-page .ent-sec-item-4 .ent-sec-check::after { animation: ent-s-tick4 14s ease infinite; }

/* -- Security keyframes -- */

@keyframes ent-s-shield {
  0%, 2%   { opacity: 0; transform: scale(0.7); }
  6%, 80%  { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes ent-s-shield-chk {
  0%, 50%  { opacity: 0; transform: scale(0); }
  56%, 80% { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(0); }
}

@keyframes ent-s-row1 {
  0%, 8%    { opacity: 0; transform: translateY(4px); }
  14%, 80%  { opacity: 1; transform: translateY(0); color: #94a3b8; }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes ent-s-row2 {
  0%, 16%   { opacity: 0; transform: translateY(4px); }
  22%, 80%  { opacity: 1; transform: translateY(0); color: #94a3b8; }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes ent-s-row3 {
  0%, 24%   { opacity: 0; transform: translateY(4px); }
  30%, 80%  { opacity: 1; transform: translateY(0); color: #94a3b8; }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes ent-s-row4 {
  0%, 32%   { opacity: 0; transform: translateY(4px); }
  38%, 80%  { opacity: 1; transform: translateY(0); color: #94a3b8; }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}

@keyframes ent-s-chk1 {
  0%, 16%   { border-color: #334155; background: transparent; }
  20%, 80%  { border-color: #10b981; background: #10b981; }
  88%, 100% { border-color: #334155; background: transparent; }
}
@keyframes ent-s-chk2 {
  0%, 24%   { border-color: #334155; background: transparent; }
  28%, 80%  { border-color: #10b981; background: #10b981; }
  88%, 100% { border-color: #334155; background: transparent; }
}
@keyframes ent-s-chk3 {
  0%, 32%   { border-color: #334155; background: transparent; }
  36%, 80%  { border-color: #10b981; background: #10b981; }
  88%, 100% { border-color: #334155; background: transparent; }
}
@keyframes ent-s-chk4 {
  0%, 40%   { border-color: #334155; background: transparent; }
  44%, 80%  { border-color: #10b981; background: #10b981; }
  88%, 100% { border-color: #334155; background: transparent; }
}

@keyframes ent-s-tick1 {
  0%, 16%   { border-color: transparent; }
  20%, 80%  { border-color: white; }
  88%, 100% { border-color: transparent; }
}
@keyframes ent-s-tick2 {
  0%, 24%   { border-color: transparent; }
  28%, 80%  { border-color: white; }
  88%, 100% { border-color: transparent; }
}
@keyframes ent-s-tick3 {
  0%, 32%   { border-color: transparent; }
  36%, 80%  { border-color: white; }
  88%, 100% { border-color: transparent; }
}
@keyframes ent-s-tick4 {
  0%, 40%   { border-color: transparent; }
  44%, 80%  { border-color: white; }
  88%, 100% { border-color: transparent; }
}

/* Reduce motion preference for enterprise demos */
@media (prefers-reduced-motion: reduce) {
  .website-page .ent-assist-demo *,
  .website-page .ent-models-demo *,
  .website-page .ent-sec-demo *,
  .website-page .ent-sec-demo *::after,
  .website-page .gov-sov-demo *,
  .website-page .gov-byom-demo *,
  .website-page .gov-zero-demo *,
  .website-page .gov-zero-demo *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================
   GOV-PILLAR ANIMATED DEMO PANELS
   Tile 1: Sovereign Cloud (16s loop)
   Tile 2: Bring Your Own Models (14s loop)
   Tile 3: Zero Leakage (14s loop)
   ============================================ */

/* -- Shared: all 3 gov tiles become flex cards with dark demo panels -- */
.website-page .ent-pillar-sovereign,
.website-page .ent-pillar-byom,
.website-page .ent-pillar-zeroleak {
  padding-top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.website-page .gov-sov-demo,
.website-page .gov-byom-demo,
.website-page .gov-zero-demo {
  background: #0f172a;
  border-radius: 12px 12px 0 0;
  padding: 16px;
  margin: 0 -28px 18px;
  position: relative;
  overflow: hidden;
  height: 220px;
  flex-shrink: 0;
}

/* ---- TILE 1: SOVEREIGN CLOUD DEMO (16s loop) ---- */

/* Cloud provider badges */
.website-page .gov-sov-clouds {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.website-page .gov-sov-cloud {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  padding: 7px 10px;
  background: rgba(30, 41, 59, 0.6);
  border: 1.5px solid transparent;
  border-radius: 7px;
  opacity: 0;
}

.website-page .gov-sov-cloud svg { color: #60a5fa; flex-shrink: 0; }

.website-page .gov-sov-cloud-1 { animation: gov-sv-c1 16s ease infinite; }
.website-page .gov-sov-cloud-2 { animation: gov-sv-c2 16s ease infinite; }
.website-page .gov-sov-cloud-3 { animation: gov-sv-c3 16s ease infinite; }

/* Boundary line */
.website-page .gov-sov-boundary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  opacity: 0;
  animation: gov-sv-boundary 16s ease infinite;
}

.website-page .gov-sov-boundary-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #f59e0b;
  white-space: nowrap;
}

.website-page .gov-sov-boundary-line {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    #f59e0b 0px,
    #f59e0b 4px,
    transparent 4px,
    transparent 8px
  );
  opacity: 0.6;
}

/* Lock indicator */
.website-page .gov-sov-lock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  color: #10b981;
  justify-content: center;
  opacity: 0;
  animation: gov-sv-lock 16s ease infinite;
}

.website-page .gov-sov-lock svg { color: #10b981; }

/* -- Sovereign keyframes -- */
@keyframes gov-sv-c1 {
  0%, 3%    { opacity: 0; transform: translateX(-8px); border-color: transparent; }
  8%, 28%   { opacity: 1; transform: translateX(0); border-color: transparent; }
  32%, 76%  { opacity: 1; transform: translateX(0); border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
  82%       { opacity: 1; border-color: transparent; box-shadow: none; }
  88%, 100% { opacity: 0; transform: translateX(-8px); }
}
@keyframes gov-sv-c2 {
  0%, 8%    { opacity: 0; transform: translateX(-8px); border-color: transparent; }
  13%, 34%  { opacity: 1; transform: translateX(0); border-color: transparent; }
  38%, 76%  { opacity: 1; transform: translateX(0); border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
  82%       { opacity: 1; border-color: transparent; box-shadow: none; }
  88%, 100% { opacity: 0; transform: translateX(-8px); }
}
@keyframes gov-sv-c3 {
  0%, 13%   { opacity: 0; transform: translateX(-8px); border-color: transparent; }
  18%, 40%  { opacity: 1; transform: translateX(0); border-color: transparent; }
  44%, 76%  { opacity: 1; transform: translateX(0); border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
  82%       { opacity: 1; border-color: transparent; box-shadow: none; }
  88%, 100% { opacity: 0; transform: translateX(-8px); }
}

@keyframes gov-sv-boundary {
  0%, 44%   { opacity: 0; }
  50%, 76%  { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes gov-sv-lock {
  0%, 54%   { opacity: 0; transform: translateY(4px); }
  60%, 76%  { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}

/* ---- TILE 2: BRING YOUR OWN MODELS DEMO (14s loop) ---- */

/* Model endpoint cards */
.website-page .gov-byom-endpoints {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.website-page .gov-byom-ep {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #94a3b8;
  padding: 8px 10px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 7px;
  opacity: 0;
}

.website-page .gov-byom-ep-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #334155;
  flex-shrink: 0;
}

.website-page .gov-byom-ep-name {
  flex: 1;
  font-weight: 500;
}

.website-page .gov-byom-ep-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.website-page .gov-byom-ep-1 { animation: gov-bm-ep1 14s ease infinite; }
.website-page .gov-byom-ep-1 .gov-byom-ep-dot { animation: gov-bm-dot1 14s ease infinite; }
.website-page .gov-byom-ep-2 { animation: gov-bm-ep2 14s ease infinite; }
.website-page .gov-byom-ep-2 .gov-byom-ep-dot { animation: gov-bm-dot2 14s ease infinite; }
.website-page .gov-byom-ep-3 { animation: gov-bm-ep3 14s ease infinite; }
.website-page .gov-byom-ep-3 .gov-byom-ep-dot { animation: gov-bm-dot3 14s ease infinite; }

/* Active status */
.website-page .gov-byom-active {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #10b981;
  justify-content: center;
  opacity: 0;
  animation: gov-bm-active 14s ease infinite;
}

.website-page .gov-byom-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

/* -- BYOM keyframes -- */
@keyframes gov-bm-ep1 {
  0%, 5%    { opacity: 0; transform: translateX(-8px); }
  12%, 78%  { opacity: 1; transform: translateX(0); }
  88%, 100% { opacity: 0; transform: translateX(-8px); }
}
@keyframes gov-bm-ep2 {
  0%, 14%   { opacity: 0; transform: translateX(-8px); }
  21%, 78%  { opacity: 1; transform: translateX(0); }
  88%, 100% { opacity: 0; transform: translateX(-8px); }
}
@keyframes gov-bm-ep3 {
  0%, 23%   { opacity: 0; transform: translateX(-8px); }
  30%, 78%  { opacity: 1; transform: translateX(0); }
  88%, 100% { opacity: 0; transform: translateX(-8px); }
}

/* Dots turn green one by one */
@keyframes gov-bm-dot1 {
  0%, 16%   { background: #334155; }
  20%, 78%  { background: #10b981; }
  88%, 100% { background: #334155; }
}
@keyframes gov-bm-dot2 {
  0%, 28%   { background: #334155; }
  32%, 78%  { background: #10b981; }
  88%, 100% { background: #334155; }
}
@keyframes gov-bm-dot3 {
  0%, 38%   { background: #334155; }
  42%, 78%  { background: #10b981; }
  88%, 100% { background: #334155; }
}

@keyframes gov-bm-active {
  0%, 48%   { opacity: 0; transform: translateY(4px); }
  55%, 78%  { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}

/* ---- TILE 3: ZERO DATA LEAKAGE DEMO (14s loop) ---- */

/* Shield */
.website-page .gov-zero-shield {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  width: 48px;
  height: 48px;
  color: #3b82f6;
  position: relative;
  opacity: 0;
  animation: gov-z-shield 14s ease infinite;
}

.website-page .gov-zero-shield-lock {
  position: absolute;
  bottom: -2px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f59e0b;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  animation: gov-z-lock 14s ease infinite;
}

/* Zero-trust checklist */
.website-page .gov-zero-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.website-page .gov-zero-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
  padding: 5px 10px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 6px;
  opacity: 0;
}

.website-page .gov-zero-check {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid #334155;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.website-page .gov-zero-check::after {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  transform: rotate(-45deg) translate(1px, -1px);
}

.website-page .gov-zero-item-1 { animation: gov-z-row1 14s ease infinite; }
.website-page .gov-zero-item-1 .gov-zero-check { animation: gov-z-chk1 14s ease infinite; }
.website-page .gov-zero-item-1 .gov-zero-check::after { animation: gov-z-tick1 14s ease infinite; }

.website-page .gov-zero-item-2 { animation: gov-z-row2 14s ease infinite; }
.website-page .gov-zero-item-2 .gov-zero-check { animation: gov-z-chk2 14s ease infinite; }
.website-page .gov-zero-item-2 .gov-zero-check::after { animation: gov-z-tick2 14s ease infinite; }

.website-page .gov-zero-item-3 { animation: gov-z-row3 14s ease infinite; }
.website-page .gov-zero-item-3 .gov-zero-check { animation: gov-z-chk3 14s ease infinite; }
.website-page .gov-zero-item-3 .gov-zero-check::after { animation: gov-z-tick3 14s ease infinite; }

.website-page .gov-zero-item-4 { animation: gov-z-row4 14s ease infinite; }
.website-page .gov-zero-item-4 .gov-zero-check { animation: gov-z-chk4 14s ease infinite; }
.website-page .gov-zero-item-4 .gov-zero-check::after { animation: gov-z-tick4 14s ease infinite; }

/* -- Zero leakage keyframes -- */

@keyframes gov-z-shield {
  0%, 2%   { opacity: 0; transform: scale(0.7); }
  6%, 80%  { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes gov-z-lock {
  0%, 50%  { opacity: 0; transform: scale(0); }
  56%, 80% { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(0); }
}

@keyframes gov-z-row1 {
  0%, 8%    { opacity: 0; transform: translateY(4px); }
  14%, 80%  { opacity: 1; transform: translateY(0); color: #94a3b8; }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes gov-z-row2 {
  0%, 16%   { opacity: 0; transform: translateY(4px); }
  22%, 80%  { opacity: 1; transform: translateY(0); color: #94a3b8; }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes gov-z-row3 {
  0%, 24%   { opacity: 0; transform: translateY(4px); }
  30%, 80%  { opacity: 1; transform: translateY(0); color: #94a3b8; }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes gov-z-row4 {
  0%, 32%   { opacity: 0; transform: translateY(4px); }
  38%, 80%  { opacity: 1; transform: translateY(0); color: #94a3b8; }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}

@keyframes gov-z-chk1 {
  0%, 16%   { border-color: #334155; background: transparent; }
  20%, 80%  { border-color: #10b981; background: #10b981; }
  88%, 100% { border-color: #334155; background: transparent; }
}
@keyframes gov-z-chk2 {
  0%, 24%   { border-color: #334155; background: transparent; }
  28%, 80%  { border-color: #10b981; background: #10b981; }
  88%, 100% { border-color: #334155; background: transparent; }
}
@keyframes gov-z-chk3 {
  0%, 32%   { border-color: #334155; background: transparent; }
  36%, 80%  { border-color: #10b981; background: #10b981; }
  88%, 100% { border-color: #334155; background: transparent; }
}
@keyframes gov-z-chk4 {
  0%, 40%   { border-color: #334155; background: transparent; }
  44%, 80%  { border-color: #10b981; background: #10b981; }
  88%, 100% { border-color: #334155; background: transparent; }
}

@keyframes gov-z-tick1 {
  0%, 16%   { border-color: transparent; }
  20%, 80%  { border-color: white; }
  88%, 100% { border-color: transparent; }
}
@keyframes gov-z-tick2 {
  0%, 24%   { border-color: transparent; }
  28%, 80%  { border-color: white; }
  88%, 100% { border-color: transparent; }
}
@keyframes gov-z-tick3 {
  0%, 32%   { border-color: transparent; }
  36%, 80%  { border-color: white; }
  88%, 100% { border-color: transparent; }
}
@keyframes gov-z-tick4 {
  0%, 40%   { border-color: transparent; }
  44%, 80%  { border-color: white; }
  88%, 100% { border-color: transparent; }
}

/* ============================================
   EVERY FRONTIER MODEL - FLOATING TILES
   ============================================ */

.website-page .ent-models {
  padding: 120px 0;
  background: #f8fafc;
  overflow: hidden;
}

/* Floating tiles container */
.website-page .ent-models-float {
  position: relative;
  height: 340px;
  max-width: 1000px;
  margin: 0 auto 50px;
}

/* Individual floating tile */
.website-page .ent-float-tile {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.08);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: default;
  z-index: 1;
}

.website-page .ent-float-tile:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 12px 40px -8px rgba(15, 23, 42, 0.15);
  border-color: #cbd5e1;
  z-index: 10;
}

.website-page .ent-float-tile img {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  object-fit: cover;
  flex-shrink: 0;
}

.website-page .ent-float-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.website-page .ent-float-info strong {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}

.website-page .ent-float-info span {
  font-size: 12px;
  color: #94a3b8;
}

/* Positioned tiles with float animations */
.website-page .ent-float-1 { top: 0%; left: 5%; animation: ent-float-1 6s ease-in-out infinite; }
.website-page .ent-float-2 { top: 8%; left: 28%; animation: ent-float-2 7s ease-in-out infinite; }
.website-page .ent-float-3 { top: 2%; left: 52%; animation: ent-float-3 5.5s ease-in-out infinite; }
.website-page .ent-float-4 { top: 12%; left: 75%; animation: ent-float-4 6.5s ease-in-out infinite; }
.website-page .ent-float-5 { top: 35%; left: 0%; animation: ent-float-5 7.5s ease-in-out infinite; }
.website-page .ent-float-6 { top: 40%; left: 22%; animation: ent-float-6 5s ease-in-out infinite; }
.website-page .ent-float-7 { top: 32%; left: 45%; animation: ent-float-7 6s ease-in-out infinite; }
.website-page .ent-float-8 { top: 38%; left: 68%; animation: ent-float-8 7s ease-in-out infinite; }
.website-page .ent-float-9 { top: 68%; left: 8%; animation: ent-float-9 6.5s ease-in-out infinite; }
.website-page .ent-float-10 { top: 72%; left: 32%; animation: ent-float-10 5.5s ease-in-out infinite; }
.website-page .ent-float-11 { top: 65%; left: 55%; animation: ent-float-11 7s ease-in-out infinite; }
.website-page .ent-float-12 { top: 70%; left: 78%; animation: ent-float-12 6s ease-in-out infinite; }

/* Float animations - each tile has unique movement */
@keyframes ent-float-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}
@keyframes ent-float-2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-1deg); }
}
@keyframes ent-float-3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}
@keyframes ent-float-4 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-0.5deg); }
}
@keyframes ent-float-5 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-11px) rotate(-1deg); }
}
@keyframes ent-float-6 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(1deg); }
}
@keyframes ent-float-7 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(-1.5deg); }
}
@keyframes ent-float-8 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-13px) rotate(0.5deg); }
}
@keyframes ent-float-9 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
@keyframes ent-float-10 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-1deg); }
}
@keyframes ent-float-11 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}
@keyframes ent-float-12 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-0.5deg); }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .website-page .ent-float-tile {
    animation: none !important;
  }
}

/* Legacy styles kept for backwards compatibility */
.website-page .ent-models-showcase {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 800px;
  margin: 0 auto 40px;
}

.website-page .ent-model-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 24px;
  transition: all 0.3s ease;
}

.website-page .ent-model-group:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.08);
}

.website-page .ent-model-provider {
  display: flex;
  align-items: center;
  gap: 14px;
}

.website-page .ent-model-provider img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
}

.website-page .ent-model-provider-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
}

.website-page .ent-model-provider div {
  display: flex;
  flex-direction: column;
}

.website-page .ent-model-provider strong {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.website-page .ent-model-provider span {
  font-size: 13px;
  color: #94a3b8;
}

.website-page .ent-model-tags {
  display: flex;
  gap: 8px;
}

.website-page .ent-model-tags span {
  padding: 4px 12px;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

/* Model extras */
.website-page .ent-models-extras {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
}

.website-page .ent-models-extra {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
}

.website-page .ent-models-extra svg {
  color: #94a3b8;
  flex-shrink: 0;
}

/* ============================================
   INTEGRATIONS
   ============================================ */

.website-page .ent-integrations {
  padding: 120px 0;
  background: white;
}

.website-page .ent-int-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.website-page .ent-int-category {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  transition: all 0.3s ease;
}

.website-page .ent-int-category:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 30px -8px rgba(15, 23, 42, 0.08);
}

.website-page .ent-int-cat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 14px;
}

.website-page .ent-int-cat-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.website-page .ent-int-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: white;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.website-page .ent-int-chip:hover {
  background: #f1f5f9;
}

.website-page .ent-int-chip img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
  background: white;
  padding: 2px;
}

.website-page .ent-int-chip span {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

/* Custom MCP callout */
.website-page .ent-int-custom {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: linear-gradient(135deg, #eff6ff, #f0f9ff);
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  padding: 28px 32px;
}

.website-page .ent-int-custom-icon {
  width: 48px;
  height: 48px;
  background: white;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  flex-shrink: 0;
}

.website-page .ent-int-custom strong {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  display: block;
  margin-bottom: 6px;
}

.website-page .ent-int-custom p {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

/* ============================================
   AGENTS
   ============================================ */

.website-page .ent-agents {
  padding: 120px 0;
  background: #f8fafc;
}

.website-page .ent-agents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.website-page .ent-agent-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 24px;
  transition: all 0.3s ease;
}

.website-page .ent-agent-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 30px -8px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.website-page .ent-agent-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  margin-bottom: 14px;
}

.website-page .ent-agent-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 6px;
}

.website-page .ent-agent-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

/* ============================================
   YOUR KNOWLEDGE. YOUR ASSISTANTS.
   ============================================ */

.website-page .ent-knowledge {
  padding: 120px 0;
  background: white;
}

.website-page .ent-knowledge-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.website-page .ent-knowledge-text .section-tag-new {
  display: inline-block;
  margin-bottom: 16px;
}

.website-page .ent-knowledge-text h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin-bottom: 20px;
  line-height: 1.2;
}

.website-page .ent-knowledge-text > p {
  font-size: 17px;
  color: #64748b;
  line-height: 1.8;
  margin-bottom: 28px;
}

.website-page .ent-knowledge-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.website-page .ent-kf {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
}

.website-page .ent-check {
  color: #22c55e;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Assistant card visual */
.website-page .ent-knowledge-visual {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.website-page .ent-assistant-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 24px;
  transition: all 0.3s ease;
}

.website-page .ent-assistant-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.08);
  transform: translateX(4px);
}

.website-page .ent-ac-avatar {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  flex-shrink: 0;
}

.website-page .ent-ac-info strong {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  display: block;
  margin-bottom: 2px;
}

.website-page .ent-ac-info span {
  font-size: 13px;
  color: #94a3b8;
}

/* ============================================
   CAPABILITY GRID
   ============================================ */

.website-page .ent-capabilities {
  padding: 120px 0;
  background: #f8fafc;
}

.website-page .ent-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.website-page .ent-cap-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px 28px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.website-page .ent-cap-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.website-page .ent-cap-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  margin-bottom: 18px;
}

.website-page .ent-cap-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 10px;
}

.website-page .ent-cap-card > p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 1;
}

.website-page .ent-cap-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.website-page .ent-cap-details span {
  padding: 4px 10px;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}

/* ============================================
   EDUCATION VISION CARDS — Subtle background images
   ============================================ */

.website-page .edu-vision-card {
  position: relative;
  overflow: hidden;
}

.website-page .edu-vision-card .ent-cap-icon,
.website-page .edu-vision-card h3,
.website-page .edu-vision-card > p,
.website-page .edu-vision-card .ent-cap-details {
  position: relative;
  z-index: 2;
}

.website-page .edu-vision-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(4px);
  opacity: 0;
  animation: eduVisionPulse 10s ease-in-out infinite;
  transition: opacity 0.6s ease;
}

/* Stagger the three cards so they don't all pulse at once */
.website-page .edu-vision-1 { animation-delay: 0s; }
.website-page .edu-vision-2 { animation-delay: 3.3s; }
.website-page .edu-vision-3 { animation-delay: 6.6s; }

@keyframes eduVisionPulse {
  0%   { opacity: 0; }
  15%  { opacity: 0.12; }
  35%  { opacity: 0.12; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Light mode: card needs to stay readable */
.website-page .edu-vision-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.70);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: eduOverlayPulse 10s ease-in-out infinite;
}

.website-page .edu-vision-card:nth-child(1)::after { animation-delay: 0s; }
.website-page .edu-vision-card:nth-child(3)::after { animation-delay: 3.3s; }
.website-page .edu-vision-card:nth-child(5)::after { animation-delay: 6.6s; }

@keyframes eduOverlayPulse {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  35%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .website-page .edu-vision-card::after {
    background: rgba(30, 41, 59, 0.78);
  }

  @keyframes eduVisionPulse {
    0%   { opacity: 0; }
    15%  { opacity: 0.10; }
    35%  { opacity: 0.10; }
    50%  { opacity: 0; }
    100% { opacity: 0; }
  }
}

/* On hover, let the image peek through a little more */
.website-page .edu-vision-card:hover .edu-vision-bg {
  opacity: 0.18 !important;
  animation-play-state: paused;
}

/* Mobile: disable the effect to save bandwidth */
@media (max-width: 767px) {
  .website-page .edu-vision-bg {
    display: none;
  }
  .website-page .edu-vision-card::after {
    display: none;
  }
}

/* ============================================
   GOVERNANCE
   ============================================ */

.website-page .ent-governance {
  padding: 120px 0;
  background: white;
}

.website-page .ent-gov-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.website-page .ent-gov-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 22px;
  transition: all 0.3s ease;
}

.website-page .ent-gov-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 30px -8px rgba(15, 23, 42, 0.08);
}

.website-page .ent-gov-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  margin-bottom: 14px;
}

.website-page .ent-gov-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 6px;
}

.website-page .ent-gov-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

/* ============================================
   SECURITY (uses existing security-grid-new)
   ============================================ */

.website-page .ent-security {
  padding: 120px 0;
  background: #f8fafc;
}

/* ============================================
   DEPLOYMENT CARDS
   ============================================ */

.website-page .ent-deployment {
  padding: 120px 0;
  background: white;
}

.website-page .ent-deploy-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.website-page .ent-deploy-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.website-page .ent-deploy-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.1);
}

.website-page .ent-deploy-card-featured {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1), 0 10px 40px -10px rgba(37, 99, 235, 0.15);
  position: relative;
}

.website-page .ent-deploy-card-featured::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20px;
  right: 20px;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 0 0 3px 3px;
}

.website-page .ent-deploy-card-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  margin-bottom: 20px;
}

.website-page .ent-deploy-card-tag {
  font-size: 13px;
  font-weight: 500;
  color: #2563eb;
  margin-bottom: 8px;
}

.website-page .ent-deploy-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.website-page .ent-deploy-best {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 24px;
}

.website-page .ent-deploy-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  margin-bottom: 28px;
  flex: 1;
}

.website-page .ent-deploy-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.website-page .ent-deploy-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

.website-page .ent-deploy-value {
  font-size: 14px;
  color: #334155;
  line-height: 1.4;
}

.website-page .ent-deploy-cta {
  width: 100%;
  text-align: center;
}

/* Shared features */
.website-page .ent-deploy-shared {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px 36px;
}

.website-page .ent-deploy-shared h4 {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 20px;
  text-align: center;
}

.website-page .ent-deploy-shared-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 24px;
}

.website-page .ent-deploy-shared-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #475569;
}

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

@media (max-width: 1023px) {
  .website-page .ent-value-pillars {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .website-page .ent-int-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .website-page .ent-agents-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .website-page .ent-knowledge-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .website-page .ent-cap-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .website-page .ent-deploy-cards {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .website-page .ent-deploy-shared-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .website-page .ent-gov-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .website-page .ent-model-group {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .website-page .ent-model-tags {
    flex-wrap: wrap;
  }

  .website-page .ent-models-extras {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  /* Floating tiles tablet adjustments */
  .website-page .ent-models-float {
    height: 420px;
  }
  .website-page .ent-float-tile {
    padding: 12px 14px;
  }
  .website-page .ent-float-tile img {
    width: 38px;
    height: 38px;
  }
  .website-page .ent-float-info strong {
    font-size: 14px;
  }
  /* Reposition for tablet */
  .website-page .ent-float-1 { top: 0%; left: 2%; }
  .website-page .ent-float-2 { top: 6%; left: 35%; }
  .website-page .ent-float-3 { top: 0%; left: 68%; }
  .website-page .ent-float-4 { top: 22%; left: 12%; }
  .website-page .ent-float-5 { top: 26%; left: 52%; }
  .website-page .ent-float-6 { top: 44%; left: 0%; }
  .website-page .ent-float-7 { top: 48%; left: 35%; }
  .website-page .ent-float-8 { top: 44%; left: 70%; }
  .website-page .ent-float-9 { top: 66%; left: 8%; }
  .website-page .ent-float-10 { top: 70%; left: 42%; }
  .website-page .ent-float-11 { top: 66%; left: 75%; }
  .website-page .ent-float-12 { top: 88%; left: 30%; }
}

@media (max-width: 767px) {
  .website-page .ent-hero {
    padding-top: 120px;
    padding-bottom: 60px;
  }

  .website-page .ent-hero h1 {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .website-page .ent-value,
  .website-page .ent-models,
  .website-page .ent-integrations,
  .website-page .ent-agents,
  .website-page .ent-knowledge,
  .website-page .ent-capabilities,
  .website-page .ent-governance,
  .website-page .ent-security,
  .website-page .ent-deployment {
    padding: 80px 0;
  }

  .website-page .ent-int-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .website-page .ent-agents-grid {
    grid-template-columns: 1fr;
  }

  .website-page .ent-cap-grid {
    grid-template-columns: 1fr;
  }

  .website-page .ent-deploy-shared-grid {
    grid-template-columns: 1fr;
  }

  .website-page .ent-gov-grid {
    grid-template-columns: 1fr;
  }

  .website-page .ent-int-custom {
    flex-direction: column;
    gap: 16px;
  }

  /* Floating tiles mobile - convert to scrolling marquee */
  .website-page .ent-models-float {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 0 16px;
  }
  .website-page .ent-float-tile {
    position: relative;
    top: auto !important;
    left: auto !important;
    animation: none !important;
    transform: none !important;
  }
  .website-page .ent-float-tile:hover {
    transform: translateY(-2px) !important;
  }
  .website-page .ent-float-tile img {
    width: 36px;
    height: 36px;
  }
  .website-page .ent-float-info strong {
    font-size: 13px;
  }
  .website-page .ent-float-info span {
    font-size: 11px;
  }
}

/* ============================================
   ENTERPRISE DARK MODE (Browser Preference)
   Must come AFTER all enterprise light-mode rules
   ============================================ */

@media (prefers-color-scheme: dark) {

  /* --- Hero (deepen dark bg) --- */
  .website-page .ent-hero {
    background: linear-gradient(180deg, #0a0f1a 0%, #0f172a 100%);
  }

  /* --- Value Proposition --- */
  .website-page .ent-value {
    background: #0a0f1a;
  }

  .website-page .ent-value-content h2 {
    color: #f1f5f9;
  }

  .website-page .ent-value-content p {
    color: #94a3b8;
  }

  .website-page .ent-pillar {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .ent-pillar:hover {
    border-color: #475569;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
  }

  .website-page .ent-pillar-icon {
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
    color: #60a5fa;
  }

  .website-page .ent-pillar h4 {
    color: #f1f5f9;
  }

  .website-page .ent-pillar p {
    color: #94a3b8;
  }

  .website-page .ent-assist-demo,
  .website-page .ent-models-demo,
  .website-page .ent-sec-demo,
  .website-page .gov-sov-demo,
  .website-page .gov-byom-demo,
  .website-page .gov-zero-demo {
    background: #0a0f1a;
    margin: 0 -28px 18px;
  }

  /* --- Models --- */
  .website-page .ent-models {
    background: #0f172a;
  }

  .website-page .ent-float-tile {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.3);
  }

  .website-page .ent-float-tile:hover {
    box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.5);
    border-color: #475569;
  }

  .website-page .ent-float-info strong {
    color: #f1f5f9;
  }

  .website-page .ent-float-info span {
    color: #64748b;
  }

  .website-page .ent-model-group {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .ent-model-group:hover {
    border-color: #475569;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.3);
  }

  .website-page .ent-model-provider strong {
    color: #f1f5f9;
  }

  .website-page .ent-model-provider-icon {
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
    color: #60a5fa;
  }

  .website-page .ent-model-tags span {
    background: #334155;
    color: #94a3b8;
  }

  .website-page .ent-models-extra {
    color: #94a3b8;
  }

  /* --- Integrations --- */
  .website-page .ent-integrations {
    background: #0a0f1a;
  }

  .website-page .ent-int-category {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .ent-int-category:hover {
    border-color: #475569;
    box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.4);
  }

  .website-page .ent-int-cat-label {
    color: #64748b;
  }

  .website-page .ent-int-chip {
    background: #0f172a;
  }

  .website-page .ent-int-chip:hover {
    background: #334155;
  }

  .website-page .ent-int-chip span {
    color: #cbd5e1;
  }

  .website-page .ent-int-custom {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-color: #334155;
  }

  .website-page .ent-int-custom-icon {
    background: #0f172a;
    border-color: #334155;
    color: #60a5fa;
  }

  .website-page .ent-int-custom strong {
    color: #f1f5f9;
  }

  .website-page .ent-int-custom p {
    color: #94a3b8;
  }

  /* --- Agents --- */
  .website-page .ent-agents {
    background: #0f172a;
  }

  .website-page .ent-agent-card {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .ent-agent-card:hover {
    border-color: #475569;
    box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.4);
  }

  .website-page .ent-agent-icon {
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
    color: #60a5fa;
  }

  .website-page .ent-agent-card h4 {
    color: #f1f5f9;
  }

  .website-page .ent-agent-card p {
    color: #94a3b8;
  }

  /* --- Knowledge / Assistants --- */
  .website-page .ent-knowledge {
    background: #0a0f1a;
  }

  .website-page .ent-knowledge-text h2 {
    color: #f1f5f9;
  }

  .website-page .ent-knowledge-text > p {
    color: #94a3b8;
  }

  .website-page .ent-kf {
    color: #cbd5e1;
  }

  .website-page .ent-assistant-card {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .ent-assistant-card:hover {
    border-color: #475569;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.3);
  }

  .website-page .ent-ac-avatar {
    color: #f1f5f9;
  }

  .website-page .ent-ac-info strong {
    color: #f1f5f9;
  }

  .website-page .ent-ac-info span {
    color: #64748b;
  }

  /* --- Capabilities --- */
  .website-page .ent-capabilities {
    background: #0f172a;
  }

  .website-page .ent-cap-card {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .ent-cap-card:hover {
    border-color: #475569;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
  }

  .website-page .ent-cap-icon {
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
    color: #60a5fa;
  }

  .website-page .ent-cap-card h3 {
    color: #f1f5f9;
  }

  .website-page .ent-cap-card > p {
    color: #94a3b8;
  }

  .website-page .ent-cap-details {
    border-top-color: #334155;
  }

  .website-page .ent-cap-details span {
    background: #334155;
    color: #94a3b8;
  }

  /* --- Governance --- */
  .website-page .ent-governance {
    background: #0a0f1a;
  }

  .website-page .ent-gov-card {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .ent-gov-card:hover {
    border-color: #475569;
    box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.4);
  }

  .website-page .ent-gov-icon {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #94a3b8;
  }

  .website-page .ent-gov-card h4 {
    color: #f1f5f9;
  }

  .website-page .ent-gov-card p {
    color: #94a3b8;
  }

  /* --- Security --- */
  .website-page .ent-security {
    background: #0f172a;
  }

  /* --- Deployment --- */
  .website-page .ent-deployment {
    background: #0a0f1a;
  }

  .website-page .ent-deploy-card {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .ent-deploy-card:hover {
    border-color: #475569;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
  }

  .website-page .ent-deploy-card-featured {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 10px 40px -10px rgba(59, 130, 246, 0.2);
  }

  .website-page .ent-deploy-card-icon {
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
    color: #60a5fa;
  }

  .website-page .ent-deploy-card-tag {
    color: #60a5fa;
  }

  .website-page .ent-deploy-card h3 {
    color: #f1f5f9;
  }

  .website-page .ent-deploy-best {
    color: #94a3b8;
  }

  .website-page .ent-deploy-details {
    border-top-color: #334155;
  }

  .website-page .ent-deploy-label {
    color: #64748b;
  }

  .website-page .ent-deploy-value {
    color: #cbd5e1;
  }

  .website-page .ent-deploy-shared {
    background: #1e293b;
    border-color: #334155;
  }

  .website-page .ent-deploy-shared h4 {
    color: #f1f5f9;
  }

  .website-page .ent-deploy-shared-item {
    color: #cbd5e1;
  }

  /* --- Section headers used across enterprise --- */
  .website-page .section-header-new h2 {
    color: #f1f5f9;
  }

  .website-page .section-header-new p {
    color: #94a3b8;
  }

  .website-page .section-tag-new {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
  }
}