/* Bek Ventures Inspired Theme - Blue Color Scheme */
/* Based on Theme 1: Deep Blue Corporate but with blue replacing cyan/teal accents */

/* Import Onest font with full variable weight range */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');

:root {
  /* Ultra Dark Blue Corporate Color Palette */
  --background: hsl(215 40% 8%);
  --foreground: oklch(0.9804 0.0039 220.0000);
  --card: hsl(215 35% 12%);
  --card-foreground: oklch(0.9804 0.0039 220.0000);
  --popover: hsl(215 35% 12%);
  --popover-foreground: oklch(0.9804 0.0039 220.0000);
  
  /* Primary Blue (replacing cyan) - This is the key change */
  --primary: hsl(220 91% 60%); /* #2563eb equivalent */
  --primary-foreground: oklch(0.9804 0.0039 220.0000);
  
  /* Steel Blue Secondary */
  --secondary: hsl(215 30% 18%);
  --secondary-foreground: oklch(0.8627 0.0118 220.0000);
  --muted: hsl(215 25% 15%);
  --muted-foreground: oklch(0.7059 0.0098 220.0000);
  
  /* Bright Blue Accent (replacing light blue) */
  --accent: hsl(217 91% 70%); /* Lighter blue for accent */
  --accent-foreground: oklch(0.0824 0.0157 264.0520);
  
  --destructive: oklch(0.6275 0.2353 25.0000);
  --destructive-foreground: oklch(0.9804 0.0039 220.0000);
  
  /* Corporate Borders */
  --border: hsl(215 20% 20%);
  --input: hsl(215 25% 10%);
  --ring: hsl(220 91% 60%);
  
  /* Chart Colors - Blue Spectrum */
  --chart-1: hsl(220 91% 60%);
  --chart-2: hsl(217 91% 70%);
  --chart-3: hsl(213 91% 75%);
  --chart-4: hsl(210 91% 80%);
  --chart-5: hsl(207 91% 85%);
  
  /* Design System - Custom Properties */
  --gray-350: #b8bcc8;
  --gray-400: #9ca3af;
  --text-soft-white: #f8fafc;
  --blue-primary-bg: rgba(59, 130, 246, 0.15);
  --blue-electric-bg: rgba(70, 173, 245, 0.15);
  
  /* Shadow Tokens */
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-tabs-content: 0 8px 24px rgba(0, 0, 0, 0.25);
  --blue-electric: hsl(220 91% 60%);
  --border-subtle: rgba(255, 255, 255, 0.2);
  --section-spacing: 4rem; /* mb-16 */
  --content-max-width: 56rem; /* max-w-4xl */
  --container-max-width: 80rem; /* max-w-7xl */
  
  /* Typography - Updated to use Onest */
  --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Onest', Georgia, 'Times New Roman', Times, serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  
  /* Enhanced Corporate Shadows */
  --shadow-2xs: 0 2px 4px 0px hsl(250 85% 8% / 0.25);
  --shadow-xs: 0 4px 8px 0px hsl(250 85% 8% / 0.30);
  --shadow-sm: 0 6px 12px 0px hsl(250 85% 8% / 0.35), 0 2px 4px -2px hsl(250 85% 8% / 0.35);
  --shadow: 0 10px 20px -2px hsl(250 85% 8% / 0.40), 0 4px 8px -4px hsl(250 85% 8% / 0.40);
  --shadow-md: 0 16px 32px -4px hsl(250 85% 8% / 0.45), 0 6px 12px -6px hsl(250 85% 8% / 0.45);
  --shadow-lg: 0 24px 48px -6px hsl(250 85% 8% / 0.50), 0 10px 20px -8px hsl(250 85% 8% / 0.50);
  --shadow-xl: 0 32px 64px -8px hsl(250 85% 8% / 0.60);
  --shadow-2xl: 0 40px 80px -10px hsl(250 85% 8% / 0.70);
  
  /* Ultra Dark Background Gradients - Updated with Blue */
  --hero-gradient: linear-gradient(135deg, hsl(215 40% 8%) 0%, hsl(215 35% 12%) 50%, hsl(215 40% 8%) 100%);
  --card-gradient: linear-gradient(145deg, hsl(215 35% 12%) 0%, hsl(215 30% 15%) 100%);
  --text-gradient: linear-gradient(135deg, hsl(220 91% 60%) 0%, hsl(217 91% 70%) 50%, hsl(220 91% 60%) 100%);
  --cta-gradient: #46adf5;
  
  /* Corporate Specific Gradients */
  --executive-gradient: linear-gradient(135deg, hsl(215 35% 12%) 0%, hsl(215 30% 18%) 100%);
  --steel-gradient: linear-gradient(145deg, hsl(215 30% 18%) 0%, hsl(215 25% 15%) 50%, hsl(215 30% 18%) 100%);
  
  /* Navy Blue Color - Perfect tone for sections */
  --navy-blue: hsl(220 45% 18%);
  
  /* Design System Tokens */
  --glass-background: rgba(255, 255, 255, 0.1);
  --glass-border: 1px solid rgba(255, 255, 255, 0.2);
  --glass-border-color: rgba(255, 255, 255, 0.2);
  --electric-blue: #46adf5;
  --accent-lime: #32cd32;
  --section-background: hsl(220, 45%, 18%);
  --content-padding: 48px;
  --card-radius: 8px;
  --pill-radius: 50px;

  /* Consistent Card Design Tokens */
  --card-bg-premium: rgba(50, 65, 85, 0.9);
  --card-border-subtle: #6b7db0;
  --card-gradient-border: linear-gradient(135deg, var(--card-border-subtle) 0%, transparent 70%);
  --card-shadow-premium: none;
  --card-backdrop-blur: blur(8px);
  
  /* Radius and Spacing */
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 2px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 4px);
  --radius-xl: calc(var(--radius) + 8px);
  --tracking-normal: -0.01em;
  --spacing: 0.25rem;
}

/* Base styles */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-sans);background:var(--background);color:var(--foreground);line-height:1.6;letter-spacing:var(--tracking-normal)}

/* Premium Card Styling - Consistent across all components */
.card-premium {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%); /* From .bg-gradient-primary */
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  position: relative;
  box-shadow: var(--card-shadow-premium);
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
}

.card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: var(--card-gradient-border);
  border-radius: var(--card-radius);
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  z-index: 0;
}

/* Typography */
.hero-title {
  /* Typography */
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  
  /* Color */
  color: white;
  
  /* Spacing */
  margin-bottom: 1.5rem; /* mb-6 equivalent */
}

.hero-subtitle {
  /* Typography */
  font-size: 1.125rem; /* text-lg equivalent */
  line-height: 1.625; /* leading-relaxed equivalent */
  
  /* Color */
  color: #9ca3af; /* text-gray-350 equivalent */
  
  /* Layout */
  max-width: 56rem; /* max-w-4xl equivalent */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
  
  /* Spacing */
  margin-bottom: 3rem; /* mb-12 equivalent */
}

.section-title{font-size:clamp(1.875rem,4.5vw,2.75rem);font-weight:400;line-height:1.2;letter-spacing:-0.01em}
.metric-number{font-size:2rem;font-weight:600;color:white;margin:0}
.text-gradient{color:white}

/* Subtitle styling */
.subtitle{font-weight:300}

/* Extended color palette */
.text-gray-350 {
  color: var(--gray-400);
}

.text-gray-400 {
  color: var(--gray-400);
}

.text-soft-white {
  color: var(--text-soft-white);
}

/* Override Tailwind's text-white utility for softer appearance */
.text-white {
  color: var(--text-soft-white) !important;
}

.text-gray-400 {
  color: var(--gray-400);
}

.text-soft-white {
  color: var(--text-soft-white);
}

/* Standardized icon container system */
.icon-container-primary {
  width: 4rem;
  height: 4rem;
  background: rgba(70, 173, 245, 0.15);
  border: 2px solid var(--electric-blue);
  backdrop-filter: blur(12px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 1rem;
}

.icon-container-primary i,
.icon-container-primary [data-lucide] {
  stroke-width: 1.5 !important;
  fill: none !important;
}

/* Global styling for all circular icon containers - ensures consistency across all sections */
.w-16.rounded-full,
.w-12.rounded-full,
.h-16.rounded-full,
.h-12.rounded-full {
  background: rgba(70, 173, 245, 0.15) !important;
  border: 2px solid var(--electric-blue) !important;
}

/* Global icon styling for consistent line weight */
.w-16 i,
.w-16 [data-lucide],
.w-12 i, 
.w-12 [data-lucide] {
  stroke-width: 1.5 !important;
  fill: none !important;
}

.icon-container-use-case {
  width: 4rem; /* w-16 */
  height: 4rem; /* h-16 */
  backdrop-filter: blur(12px); /* backdrop-blur-sm */
  border-radius: 50%; /* rounded-full */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem; /* mr-4 */
  background: rgba(70, 173, 245, 0.15);
  border: 2px solid var(--electric-blue);
}

.icon-container-use-case i,
.icon-container-use-case [data-lucide] {
  stroke-width: 1.5 !important;
  fill: none !important;
}

.icon-container-metric {
  width: 3rem; /* w-12 */
  height: 3rem; /* h-12 */
  backdrop-filter: blur(12px); /* backdrop-blur-sm */
  border-radius: 50%; /* rounded-full */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem; /* mr-3 */
  background: rgba(70, 173, 245, 0.15);
  border: 2px solid var(--electric-blue);
}

.icon-container-metric i,
.icon-container-metric [data-lucide] {
  stroke-width: 1.5 !important;
  fill: none !important;
}

/* Button group component */
.cta-button-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 8rem; /* Standard spacing for hero CTA groups */
}

@media (min-width: 640px) {
  .cta-button-group {
    flex-direction: row;
  }
}

/* Section header pattern components */
.section-header-standard {
  text-align: center;
  margin-bottom: 4rem; /* mb-16 */
}

.section-header-title {
  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-soft-white);
  margin-bottom: 1rem; /* mb-4 */
}

.section-header-description {
  font-size: 1.125rem; /* text-lg */
  color: #b8bcc8; /* text-gray-350 */
  margin-bottom: 2rem; /* mb-8 */
  line-height: 1.75; /* leading-relaxed */
  max-width: 56rem; /* max-w-4xl */
  margin-left: auto;
  margin-right: auto;
}

/* Utility classes to replace inline styles */
.bg-transparent-section {
  background: transparent !important;
}

.canvas-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -20;
  pointer-events: none;
}

.integration-step {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.integration-status {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

.integration-status-active { 
  background: rgb(34, 197, 94); /* green */
}

.integration-status-pending { 
  background: rgb(251, 191, 36); /* yellow */
}

.integration-status-inactive { 
  background: rgb(107, 114, 128); /* gray */
}

/* Behavior-preserving utility classes - exact same output as inline */
.container-7xl {
  max-width: 80rem; /* max-w-7xl = 80rem = 1280px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem; /* px-6 = 1.5rem = 24px */
  padding-right: 1.5rem;
}

@media (min-width: 768px) {
  .container-7xl {
    padding-left: 4rem; /* md:px-16 = 4rem = 64px */
    padding-right: 4rem;
  }
}

@media (min-width: 1024px) {
  .container-7xl {
    padding-left: 1.5rem; /* lg:px-6 = 1.5rem = 24px */
    padding-right: 1.5rem;
  }
}

.section-description-lg {
  @apply text-lg text-gray-300 leading-relaxed max-w-4xl mx-auto;
}

.section-header-center {
  @apply text-center mb-16;
}

/* Buttons */
.btn-primary {
  background: var(--cta-gradient);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
  filter: brightness(1.1);
}

.btn-secondary {
  background: transparent;
  color: #70c5ff;
  border: 1px solid rgba(112, 197, 255, 0.6);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.btn-secondary:hover {
  background: rgba(112, 197, 255, 0.15);
  color: #87d1ff;
  border: 1px solid rgba(135, 209, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* Button Size Modifiers */
.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 500;
}

/* Button Layout Modifiers */
.btn-full {
  width: 100%;
}

/* =============================================================================
   CARDS - DARK BACKGROUND DESIGN SYSTEM STANDARD
   ============================================================================= */

/* 
 * DARK BACKGROUND INTERACTION MODEL:
 * 
 * INTERACTIVE CONTENT CARDS (have hover effects):
 * - .card (product cards, feature cards) 
 * - .kpi-tile (individual metric tiles)
 * - .kpi-card (individual metric cards) 
 * - .testimonial-card (individual testimonials)
 * - .step-card (individual step items)
 * 
 * BACKGROUND CONTAINERS (NO hover effects):
 * - .glass-card (section backgrounds, containers)
 * - .modern-content-card (tab content containers)
 */

.card {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%); /* From .bg-gradient-primary */
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--card-shadow-premium);
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: var(--card-gradient-border);
  border-radius: var(--radius-xl);
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  z-index: 0;
}

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

.card:hover {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.18) 0%, rgba(70, 173, 245, 0.13) 30%, rgba(70, 173, 245, 0.08) 60%, transparent 100%);
}

.step-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

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

.step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary);
}

.testimonial-card {
  background: var(--card-bg-premium);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: var(--card-shadow-premium);
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

.testimonial-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: var(--card-gradient-border);
  border-radius: var(--radius-xl);
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  z-index: 1;
}

.testimonial-card > * {
  position: relative;
  z-index: 3;
}

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

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 1rem;
  left: 2rem;
  font-size: 4rem;
  color: var(--primary);
  font-weight: 900;
  line-height: 1;
}

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

/* Main Navigation Container */
.main-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
}

.nav-transparent {
  background: transparent;
  backdrop-filter: none;
  transition: all 0.3s ease;
  z-index: 100;
}

.nav-blurred {
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(16px);
  transition: all 0.3s ease;
  z-index: 100;
}

/* Navigation Inner Container */
.nav-container {
  width: 100%;
  padding: 1rem 1.5rem;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Navigation Sections */
.nav-brand {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .nav-menu {
    display: flex;
  }
}

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

/* Mobile Menu Button */
.nav-mobile-button {
  display: block;
  margin-right: 1rem;
  padding: 0.5rem;
}

@media (min-width: 768px) {
  .nav-mobile-button {
    display: none;
  }
}

/* Prevent layout shift from dynamic header loading */
#header-component {
  min-height: 80px; /* Reserve space for header before it loads */
}

/* Navigation Links */
.nav-link {
  color: var(--text-soft-white);
  font-weight: 500;
  transition: opacity 0.3s ease;
  opacity: 0.9;
  text-decoration: none;
}

.nav-link:hover {
  color: var(--text-soft-white);
  opacity: 1;
}

.nav-link.active {
  color: var(--text-soft-white);
  opacity: 1;
  position: relative;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--electric-blue);
  border-radius: 1px;
}

/* Logo */
.nav-logo {
  height: 2rem;
  width: auto;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  z-index: 50;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

@media (min-width: 768px) {
  .mobile-menu-overlay {
    display: none;
  }
}

.mobile-menu-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Mobile Menu Header */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
}

.mobile-menu-close {
  padding: 0.5rem;
}

/* Mobile Menu Navigation */
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  gap: 1.5rem;
}

.mobile-menu-link {
  color: white;
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

.mobile-menu-link:hover {
  color: #60a5fa;
}

.mobile-menu-link.active {
  border-bottom: 2px solid #60a5fa;
  padding-bottom: 0.25rem;
}

/* Mobile Menu CTA */
.mobile-menu-cta {
  padding: 1.5rem;
  margin-top: auto;
}

/* =============================================================================
   LAYOUT & UTILITY DESIGN TOKENS
   ============================================================================= */

/* Grid Layout Tokens */
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

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

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

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

/* Flex Layout Tokens */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-center-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Icon Size Tokens */
.icon-sm {
  width: 1.5rem;   /* w-6 */
  height: 1.5rem;  /* h-6 */
  color: white;
}

.icon-md {
  width: 2rem;     /* w-8 */
  height: 2rem;    /* h-8 */
  color: white;
}

.icon-lg {
  width: 2.5rem;   /* w-10 */
  height: 2.5rem;  /* h-10 */
  color: white;
}

/* Text Alignment */
.text-centered {
  text-align: center;
}

/* Spacing Tokens */
.spacing-xs {
  margin-bottom: 0.5rem;  /* mb-2 */
}

.spacing-sm {
  margin-bottom: 1rem;    /* mb-4 */
}

.spacing-md {
  margin-bottom: 2rem;    /* mb-8 */
}

.spacing-lg {
  margin-bottom: 3rem;    /* mb-12 */
}

/* =============================================================================
   COMPONENT STYLES
   ============================================================================= */

.hero-gradient {
  background: var(--hero-gradient);
}

.card-gradient {
  background: var(--card-gradient);
}

/* =============================================================================
   SECTION COMPONENTS
   ============================================================================= */

/* Standard section container */
.section-container {
  max-width: 1280px; /* max-w-7xl */
  margin: 0 auto;
  padding: 0 1.5rem; /* px-6 */
}

/* Section header with title and optional subtitle */
.section-header {
  text-align: center;
  margin-bottom: 4rem; /* mb-16 */
}

/* Common subtitle patterns */
.section-subtitle {
  font-size: 1.25rem; /* text-xl */
  font-weight: 500; /* font-medium */
  color: var(--text-soft-white);
  max-width: 48rem; /* max-w-3xl */
  margin: 0 auto;
}

.section-description {
  font-size: 1.125rem; /* text-lg */
  color: #d1d5db; /* text-gray-300 */
  margin-bottom: 2rem; /* mb-8 */
  line-height: 1.625; /* leading-relaxed */
  max-width: 64rem; /* max-w-4xl */
  margin-left: auto;
  margin-right: auto;
}

/* Common card grid patterns */
.grid-2-cols {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}

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

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

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

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

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

/* Ultra Dark Corporate Styles - Only the essential classes from original */
.corporate-hero {
  background: transparent !important;
}




/* Use Case Cards Styling */
.use-case-card {
    background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%); /* From .bg-gradient-primary */
    border: none;
    border-radius: 8px;
    padding: 0;
    position: relative;
    backdrop-filter: var(--card-backdrop-blur);
    -webkit-backdrop-filter: var(--card-backdrop-blur);
    margin-bottom: 0; /* Remove bottom margin, let space-y-16 handle spacing */
    display: flex;
    min-height: 400px;
    transition: all 0.3s ease;
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.12),
      0 4px 16px rgba(0, 0, 0, 0.08),
      0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.use-case-card:hover {
    background: linear-gradient(135deg, rgba(70, 173, 245, 0.18) 0%, rgba(70, 173, 245, 0.13) 30%, rgba(70, 173, 245, 0.08) 60%, transparent 100%); /* From .bg-gradient-primary-hover:hover */
}

.use-case-card:focus {
    outline: none;
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.use-case-header {
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.use-case-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-soft-white);
    margin-bottom: 0.5rem;
}

.use-case-subtitle {
    color: var(--muted-foreground);
    font-size: 1rem;
}

.use-case-content {
    position: relative;
    z-index: 2;
    flex: 3;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.use-case-metrics {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    position: relative;
    z-index: 2;
}

.use-case-card.reverse {
    flex-direction: row-reverse;
}

.use-case-card.reverse .use-case-metrics {
    border-left: none;
    border-right: 1px solid var(--border);
}

/* Use case icon styling to match KPI tiles with electric blue */
.use-case-header .w-16 {
    background: rgba(70, 173, 245, 0.15) !important;
    border: 2px solid var(--electric-blue) !important;
}

.use-case-header .w-16 i,
.use-case-header .w-16 [data-lucide] {
    stroke-width: 1.5 !important;
    fill: none !important;
}

/* Metric item icon styling */
.metric-item .w-12 {
    background: rgba(70, 173, 245, 0.15) !important;
    border: 2px solid var(--electric-blue) !important;
}

.metric-item .w-12 i,
.metric-item .w-12 [data-lucide] {
    stroke-width: 1.5 !important;
    fill: none !important;
}

/* Remove border from KPI tiles within use cases and add shadows */
.use-case-card .metric-item .w-12 {
  background: rgba(70, 173, 245, 0.15) !important;
  border: none !important;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Use case image container styling */
.use-case-image-container {
    margin-top: 1.5rem;
    border-radius: var(--radius-lg);
    opacity: 0.8;
    transition: opacity 0.3s ease;
    height: 120px;
    width: 288px;
    align-self: flex-start;
}

.use-case-image-container:hover {
    opacity: 1;
}

.use-case-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Five-column layout for use cases */
.use-case-card.five-column-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    min-height: 400px;
}

.use-case-card.five-column-layout .use-case-content {
    grid-column: 1 / 3;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.use-case-card.five-column-layout .use-case-image-container {
    grid-column: 3 / 5;
    margin: 2rem;
    align-self: stretch;
    width: auto;
    height: auto;
    background-size: contain;
    background-position: center;
}

.use-case-card.five-column-layout .use-case-metrics {
    grid-column: 5 / 6;
    padding: 2rem 2rem 2rem 1rem;
    align-self: start;
}

.use-case-card.five-column-layout .metrics-grid {
    gap: 1rem;
    justify-content: flex-start;
    height: auto;
}

.use-case-card.five-column-layout .use-case-header .flex {
    align-items: flex-start;
}

.use-case-card.five-column-layout .use-case-header .w-16 {
    margin-top: 0.25rem;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .use-case-card {
        flex-direction: column !important;
        min-height: auto;
    }
    
    .use-case-card.reverse {
        flex-direction: column !important;
    }
    
    .use-case-metrics {
        min-width: auto;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid var(--border);
    }
    
    .use-case-card.reverse .use-case-metrics {
        border-right: none;
        border-top: 1px solid var(--border);
        order: 2;
    }
    
    .use-case-content {
        order: 1;
    }
    
    /* Mobile layout for five-column use case cards */
    .use-case-card.glass-card.five-column-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 0.5rem !important; /* Reduced gap between solution text and KPI section */
        min-height: auto !important;
        margin: 0 !important; /* Remove all margins */
    }
    
    .use-case-card.five-column-layout .use-case-content {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding: 1.75rem 1.25rem 1rem 1.25rem !important; /* Increased top padding to 1.75rem */
        order: 1;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
    }
    
    .use-case-card.five-column-layout .use-case-image-container {
        display: none !important; /* Hide image on mobile */
    }
    
    .use-case-card.five-column-layout .use-case-metrics,
    .use-case-card.five-column-layout .use-case-metrics.metrics-animated {
        grid-column: 1 !important;
        grid-row: 2 !important;
        padding: 0 1.25rem 1.25rem 1.25rem !important; /* No top padding, sides and bottom padding */
        margin-top: 0 !important; /* Remove any top margin */
        order: 2;
        border-top: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .use-case-card.five-column-layout .metrics-grid {
        display: flex !important;
        flex-direction: column !important; /* Stack vertically */
        gap: 0.75rem !important; /* Reasonable gap between individual KPI tiles */
        width: 100% !important;
    }
    
    .use-case-card.five-column-layout .metric-item {
        width: 100% !important; /* Full width */
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem !important;
    }
    
    /* Scale down KPI values and labels for mobile */
    .use-case-card.five-column-layout .metric-value {
        font-size: 1.5rem !important; /* Smaller than desktop */
        font-weight: 600 !important;
    }
    
    .use-case-card.five-column-layout .metric-label {
        font-size: 0.75rem !important; /* Smaller label text */
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }
    
    /* Ensure text content doesn't overflow */
    .use-case-card.five-column-layout .section-subtitle,
    .use-case-card.five-column-layout .fullwidth-feature-description,
    .use-case-card.five-column-layout .section-label {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Constrain icon containers */
    .use-case-card.five-column-layout .w-12 {
        width: 2rem !important;
        height: 2rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Remove spacing within use case content on mobile */
    .use-case-card.five-column-layout .use-case-header {
        margin-bottom: 0 !important; /* Remove bottom margin from header */
    }
    
    .use-case-card.five-column-layout .use-case-header .mb-4 {
        margin-bottom: 0 !important; /* Remove bottom margin from flex container */
    }
    
    .use-case-card.five-column-layout .challenge-section,
    .use-case-card.five-column-layout .solution-section {
        margin-bottom: 1rem !important; /* Reduce space between sections */
    }
}

/* Extra small screens (iPhone 12 and smaller) */
@media (max-width: 400px) {
    .use-case-card.five-column-layout {
        margin: 0.5rem !important;
        padding: 0 !important;
    }
    
    .use-case-card.five-column-layout .use-case-content {
        padding: 1.25rem 1rem 0.75rem 1rem !important; /* More top padding, reasonable sides, less bottom */
    }
    
    .use-case-card.five-column-layout .use-case-metrics {
        padding: 1rem !important; /* Reasonable padding even on small screens */
    }
    
    .use-case-card.five-column-layout .metric-value {
        font-size: 1.25rem !important; /* Even smaller */
    }
    
    .use-case-card.five-column-layout .metric-label {
        font-size: 0.7rem !important; /* Even smaller */
    }
}

.challenge-section,
.solution-section,
.metrics-section {
    margin-bottom: 1.5rem;
}

.challenge-section:last-child,
.solution-section:last-child,
.metrics-section:last-child {
    margin-bottom: 0;
}

.section-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-soft-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.section-text {
    color: #b8bcc8; /* gray-350 for consistency */
    line-height: 1.6;
    font-size: 0.95rem;
}


.metric-item {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%); /* From .bg-gradient-primary */
    border: none;
    border-radius: 8px;
    margin-bottom: 0;
    backdrop-filter: var(--card-backdrop-blur);
    -webkit-backdrop-filter: var(--card-backdrop-blur);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.08),
      0 2px 6px rgba(0, 0, 0, 0.06),
      0 1px 3px rgba(0, 0, 0, 0.04);
}


.metric-item > * {
    position: relative;
    z-index: 2;
}

.metrics-grid {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    margin: 0;
}

.metric-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-soft-white);
    margin: 0;
}

.metric-label {
    font-size: 0.6rem;
    color: #d1d5db;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* Responsive adjustments for use cases */
@media (max-width: 768px) {
    .use-case-card {
        padding: 1.5rem;
    }
    
    .use-case-title {
        font-size: 1rem;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 0.75rem;
    }
    
    .metric-value {
        font-size: 1.25rem;
    }
}

/* Modern Workflow Section Styles */

/* Value Proposition Layout with Side Toggles */
.value-prop-layout-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: start;
  max-width: 100vw;
  overflow: visible;
}

.value-prop-toggles {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: sticky;
  top: 6rem;
  z-index: 10;
}

.value-prop-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--card-bg-premium);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
  position: relative;
  overflow: hidden;
  text-align: left;
  width: 100%;
}

.value-prop-toggle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: var(--card-gradient-border);
  border-radius: var(--radius-lg);
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.value-prop-toggle:hover::before {
  opacity: 0.5;
}

.value-prop-toggle.active::before {
  opacity: 1;
  background: var(--card-gradient-border);
}


.value-prop-toggle:hover {
  color: var(--text-soft-white);
}

.value-prop-toggle.active {
  color: var(--text-soft-white);
  border: 1px solid transparent; /* Remove visible border, keep for layout */
  background: var(--card-bg-premium);
  transform: translateX(8px);
  box-shadow: var(--card-shadow-premium);
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
}

.toggle-icon {
  width: 64px;
  height: 64px;
  background: rgba(70, 173, 245, 0.15);
  border: 2px solid var(--electric-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.value-prop-toggle.active .toggle-icon {
  background: rgba(107, 125, 176, 0.2);
  border-color: var(--card-border-subtle);
}

.toggle-icon i,
.toggle-icon [data-lucide] {
  width: 24px !important;
  height: 24px !important;
  color: var(--text-soft-white) !important;
  stroke: white !important;
  fill: none !important;
  stroke-width: 1.5 !important;
}

.toggle-text {
  font-size: 0.9rem;
  line-height: 1.4;
  position: relative;
  z-index: 2;
}

.value-prop-content {
  position: sticky;
  top: 6rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: 580px; /* Prevent height jumping - matches 3-line description height */
}

.value-prop-content::-webkit-scrollbar {
  display: none;
}

/* Responsive behavior for value prop layout */
@media (max-width: 1280px) {
  .value-prop-layout-container {
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
  }
  
  .value-prop-toggle {
    padding: 1rem 1.25rem;
    font-size: 0.825rem;
  }
  
  .toggle-icon {
    width: 56px;
    height: 56px;
  }
  
  .toggle-icon i,
  .toggle-icon [data-lucide] {
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width: 1024px) {
  .value-prop-layout-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    min-height: auto;
  }
  
  .value-prop-toggles {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    order: 1;
  }
  
  .value-prop-content {
    position: relative;
    top: auto;
    max-height: none;
    overflow-y: visible;
    order: 2;
    min-height: auto; /* Reset min-height on mobile */
  }
  
  .value-prop-toggle:hover,
  .value-prop-toggle.active {
    transform: translateY(-2px);
  }
  
  .modern-content-panel {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .value-prop-toggles {
    grid-template-columns: 1fr;
  }
  
  .value-prop-toggle {
    padding: 1rem;
  }
}

/* Plain container for navigation row */
.modern-tabs-glass-container {
  padding: 16px 0 8px 0;
  margin-bottom: 0;
  overflow: visible; /* Allow shadow to show */
}

.modern-tabs-container {
  display: flex;
  justify-content: stretch;
  margin-bottom: 0;
}

.modern-tabs-nav {
  display: flex;
  justify-content: stretch;
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%); /* From .bg-gradient-primary */
  border-radius: 8px;
  padding: 6px;
  gap: 6px;
  border: none;
  flex-wrap: wrap;
  width: 100%;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06);
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
}

.modern-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #b8bcc8; /* gray-350 */
  font-size: 0.875rem;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.modern-tab-btn:hover {
  color: var(--text-soft-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.modern-tab-btn.active {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%) !important;
  color: var(--text-soft-white) !important; /* White text for active tab */
  font-weight: 500; /* Keep same weight as inactive tabs */
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
}

.tab-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem; /* Replaces mr-2 utility */
}

.tab-icon i,
.tab-icon [data-lucide] {
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

.modern-content-card {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  box-sizing: border-box;
  /* No hover effects - this is a background container for tabs/content */
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%); /* From .bg-gradient-primary */
  position: relative;
}

/* Remove diagonal gradient from workshops/suppliers section to avoid double gradient */
.section-navy .modern-content-card {
  background: transparent;
}

/* Remove background from content card when section has background image (but not from hero section card-premium) */
section.relative.overflow-hidden .modern-content-card:not(.card-premium) {
  background: transparent !important;
}

/* Hero section modern-content-card should have KPI tile gradient background */
.modern-content-card.card-premium {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%) !important;
  border: none;
  border-radius: 8px;
  box-shadow: var(--shadow-tabs-content);
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Remove gradient border from modern-content-card.card-premium */
.modern-content-card.card-premium::before {
  display: none;
}

/* Gradient Border Effect for Content Cards */
.gradient-border-card {
  position: relative;
  background: var(--card);
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.gradient-border-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--card-radius);
  padding: 1px;
  background: linear-gradient(135deg, var(--electric-blue) 0%, transparent 70%);
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 1;
}

.gradient-border-card > * {
  position: relative;
  z-index: 2;
}

/* Full-Width 2x2 Grid Layout */
.fullwidth-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
}

.fullwidth-feature-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
  position: relative;
  transition: all 0.4s ease;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--border);
}

.fullwidth-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: linear-gradient(135deg, var(--electric-blue) 0%, transparent 70%);
  border-radius: 8px;
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 1;
}

.fullwidth-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.fullwidth-feature-content {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px 0 0 8px;
  overflow: hidden;
}

.fullwidth-feature-content > * {
  position: relative;
  z-index: 2;
}

.fullwidth-feature-visual {
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* First card background image - Smart Input Processing */
.fullwidth-feature-card:nth-child(1) .fullwidth-feature-visual {
  background-image: url('images/vehicle-inspection.jpg');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.fullwidth-feature-card:nth-child(1) .fullwidth-feature-visual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 20, 38, 0.65);
  z-index: 1;
}

/* AI Cataloging Intelligence tile (2nd card) background and overlay */
.fullwidth-feature-card:nth-child(2) .fullwidth-feature-visual {
  background-image: url('images/parts-distribution-center.jpg');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.fullwidth-feature-card:nth-child(2) .fullwidth-feature-visual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 20, 38, 0.6);
  z-index: 1;
}

.fullwidth-feature-icon {
  width: 64px;
  height: 64px;
  background: rgba(70, 173, 245, 0.15);
  border: 2px solid var(--electric-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  transition: all 0.3s ease;
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fullwidth-feature-icon i,
.fullwidth-feature-icon i svg,
.fullwidth-feature-icon [data-lucide] {
  width: 32px;
  height: 32px;
  color: var(--text-soft-white) !important;
  stroke: white !important;
  fill: none !important;
  stroke-width: 1.5 !important;
  position: relative;
  z-index: 10;
}

.fullwidth-feature-card:hover .fullwidth-feature-icon {
  background: rgba(70, 173, 245, 0.2);
  border-color: rgba(70, 173, 245, 0.5);
  transform: scale(1.05);
}

.fullwidth-feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-soft-white);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.fullwidth-feature-description {
  font-size: 0.875rem;
  color: var(--gray-400); /* gray-400 */
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* New bullet structure for perfect alignment */
.bullet-items-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.aligned-bullet-item {
  display: flex;
  align-items: center;
  position: relative;
}

.bullet-icon-positioned {
  position: absolute;
  left: 16px; /* Center icon under main icon (32px - 16px = 16px) */
}

.bullet-text-positioned {
  margin-left: 80px; /* Align text with title text start (64px icon + 16px margin) */
  color: var(--text-soft-white);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Bullet icon styling - ensure proper size and weight */
.bullet-icon-positioned .fullwidth-feature-item-icon i,
.bullet-icon-positioned .fullwidth-feature-item-icon svg,
.bullet-icon-positioned .fullwidth-feature-item-icon [data-lucide] {
  width: 16px !important;
  height: 16px !important;
  color: var(--text-soft-white) !important;
  stroke: white !important;
  fill: none !important;
  stroke-width: 1.5 !important;
}

/* CONSOLIDATED: Content grid container with layout only */
.content-grid-container {
  position: relative;
  border-radius: 8px;
  padding: 2rem;
  background: transparent;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 1px 4px rgba(0, 0, 0, 0.03);
  min-height: 400px;
  /* Grid layout built-in */
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

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

/* Legacy support - keep existing classes working */
.overall-content-container {
  position: relative;
  border-radius: 8px;
  padding: 2rem;
  background: transparent;
  min-height: 400px;
}

.grid-with-border {
  position: relative;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 50%, transparent 100%);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 1px 4px rgba(0, 0, 0, 0.03);
}

/* Gradient border removed from grid-with-border */

/* Gradient border for image background container */
.gradient-border-container {
  position: relative;
}

.gradient-border-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.3) 0%, transparent 70%);
  border-radius: 8px;
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  z-index: -1;
}

.grid-with-border > * {
  position: relative;
  z-index: 2;
}

.fullwidth-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.75rem;
  color: var(--text-soft-white);
  font-size: 0.875rem;
}

.fullwidth-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.75rem;
  color: var(--text-soft-white);
  font-size: 0.875rem;
}

.fullwidth-feature-item-icon {
  width: 32px;
  height: 32px;
  background: rgba(70, 173, 245, 0.1);
  border: 1px solid rgba(70, 173, 245, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.fullwidth-feature-item i,
.fullwidth-feature-item i svg,
.fullwidth-feature-item [data-lucide] {
  width: 16px !important;
  height: 16px !important;
  color: var(--text-soft-white) !important;
  stroke: white !important;
  fill: none !important;
  stroke-width: 1.5 !important;
  position: relative;
  z-index: 10;
}

/* Hover animation enhancements */
.fullwidth-feature-card:hover::before {
  background: linear-gradient(135deg, var(--electric-blue) 0%, transparent 60%);
}

.fullwidth-feature-card:hover .fullwidth-feature-item-icon {
  background: rgba(70, 173, 245, 0.2);
  border-color: rgba(70, 173, 245, 0.5);
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 1024px) {
  .fullwidth-feature-grid {
    grid-template-columns: 1fr;
  }
  
  .fullwidth-feature-card {
    min-height: 400px;
  }
  
  .fullwidth-feature-content {
    padding: 2rem;
  }
  
  .fullwidth-feature-title {
    font-size: 1.125rem;
  }
}

@media (max-width: 640px) {
  .fullwidth-feature-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  
  .fullwidth-feature-visual {
    min-height: 200px;
    border-left: 1px solid var(--border);
    border-top: none;
  }
}

/* Value Proposition Image Placeholders */
.value-prop-image-placeholder {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.value-prop-image-placeholder::before {
  content: 'Image Placeholder';
  color: var(--muted-foreground);
  font-size: 0.875rem;
  text-align: center;
}

/* Hexagonal Grid Layout */
.hexagonal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 3rem 0;
}

.hex-tile {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.hex-tile:hover {
  transform: translateY(-8px) scale(1.02);
  z-index: 10;
}

.hex-content {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  
  /* Rounded hexagon shape */
  clip-path: polygon(
    15% 0%, 85% 0%, 
    100% 25%, 100% 75%, 
    85% 100%, 15% 100%, 
    0% 75%, 0% 25%
  );
  border-radius: 12px;
}

/* Hexagonal gradient border effect */
.hex-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: linear-gradient(135deg, var(--electric-blue) 0%, transparent 70%);
  clip-path: polygon(
    15% 0%, 85% 0%, 
    100% 25%, 100% 75%, 
    85% 100%, 15% 100%, 
    0% 75%, 0% 25%
  );
  border-radius: 12px;
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 1;
}

.hex-content > * {
  position: relative;
  z-index: 2;
}

.hex-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-soft-white);
  margin-bottom: 1rem;
  line-height: 1.3;
  text-align: center;
}

.hex-description {
  font-size: 0.875rem;
  color: #CBD5E1;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  text-align: center;
}

.hex-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.hex-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-soft-white);
  text-align: left;
}

.hex-feature i {
  width: 18px;
  height: 18px;
  color: var(--electric-blue);
  flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .hexagonal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .hexagonal-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .hex-tile {
    max-width: 280px;
  }
  
  .hex-content {
    padding: 1.5rem;
  }
  
  .hex-title {
    font-size: 1.1rem;
  }
}

/* Content panel animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.modern-content-panel {
  display: none;
  position: relative;
  z-index: 1;
}

.modern-content-panel.active {
  display: block;
  animation: fadeInUp 0.6s ease-out;
}

/* Remove duplicate gradient background - let container handle it */
.modern-content-panel {
  background: transparent;
}

/* Force all tabs to respect container width */
.modern-content-panel {
  max-width: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Additional specificity to ensure tabs 3 & 4 respect container */
.tabs-section .container-7xl .modern-content-card .modern-content-panel {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Ensure all tabs show the glassy background gradient regardless of active state */
.modern-content-card.card-premium.glass-card .modern-content-panel .content-grid-container {
  background: inherit !important;
}

.modern-content-panel.active .fullwidth-feature-icon {
  animation: fadeInLeft 0.8s ease-out 0.1s both;
}

.modern-content-panel.active .fullwidth-feature-title {
  animation: fadeInLeft 0.8s ease-out 0.2s both;
}

.modern-content-panel.active .fullwidth-feature-description {
  animation: fadeInLeft 0.8s ease-out 0.3s both;
}

/* Bullet items animate in one by one */
.modern-content-panel.active .aligned-bullet-item {
  opacity: 0;
  animation: fadeInLeft 0.6s ease-out both;
}

.modern-content-panel.active .aligned-bullet-item:nth-child(1) {
  animation-delay: 0.4s;
}

.modern-content-panel.active .aligned-bullet-item:nth-child(2) {
  animation-delay: 0.6s;
}

.modern-content-panel.active .aligned-bullet-item:nth-child(3) {
  animation-delay: 0.8s;
}

.modern-content-panel.active .aligned-bullet-item:nth-child(4) {
  animation-delay: 1.0s;
}

.modern-content-panel.active .aligned-bullet-item:nth-child(5) {
  animation-delay: 1.2s;
}

/* Background image is always visible - no animation */
.modern-content-panel .content-visual-column .absolute img {
  opacity: 1 !important;
}

/* Main feature image fades in early, before most bullets */
.modern-content-panel.active .content-visual-column .relative img {
  opacity: 0;
  animation: fadeIn 0.6s ease-out 0.2s both;
}

/* Legacy support for old structure */
.modern-content-panel.active .fullwidth-feature-item {
  animation: fadeInLeft 0.8s ease-out both;
}

.modern-content-panel.active .fullwidth-feature-item:nth-child(1) {
  animation-delay: 0.4s;
}

.modern-content-panel.active .fullwidth-feature-item:nth-child(2) {
  animation-delay: 0.5s;
}

.modern-content-panel.active .fullwidth-feature-item:nth-child(3) {
  animation-delay: 0.6s;
}

.modern-content-panel.active .fullwidth-feature-item:nth-child(4) {
  animation-delay: 0.7s;
}

/* CONSOLIDATED: Content column with header layout built-in */
.content-column-with-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 48px;
  padding-right: 2rem;
  /* Dark background for text column */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.05) 100%) !important;
  border-radius: 8px;
}

/* Header section within content column */  
.content-column-with-header > .content-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.content-column-with-header > .content-header > .fullwidth-feature-icon {
  flex-shrink: 0;
}

/* Legacy support */
.content-text-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 48px;
  padding-right: 2rem;
}

.content-category {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--electric-blue);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.content-title {
  font-size: 2rem;
  font-weight: 500;
  color: var(--text-soft-white);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.content-description {
  font-size: 1.125rem;
  color: #CBD5E1;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.content-features {
  margin-bottom: 2rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
  color: #E2E8F0;
  font-size: 0.875rem;
}

.feature-icon {
  width: 18px;
  height: 18px;
  color: var(--electric-blue);
  flex-shrink: 0;
}


.content-visual-column {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 0 16px 16px 0;
  overflow: hidden;
  height: 100%;
  min-height: 580px; /* Match the card min-height for perfect centering */
}


.screenshot-container {
  position: relative;
  width: 95%;
  max-width: none;
  height: 85%;
  border-radius: 12px;
  overflow: visible;
  margin: 2rem;
  z-index: 2;
}



.screenshot-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGRlZnM+CjxwYXR0ZXJuIGlkPSJncmlkIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPgo8cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMDMpIiBzdHJva2Utd2lkdGg9IjEiLz4KPC9wYXR0ZXJuPgo8L2RlZnM+CjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiIC8+Cjwvc3ZnPgo=');
  opacity: 0.3;
  z-index: 1;
}

.screenshot-image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  box-shadow: 
    0 8px 25px hsla(200, 100%, 65%, 0.2),
    0 4px 15px hsla(200, 100%, 65%, 0.15),
    0 0 20px hsla(200, 100%, 65%, 0.1);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .modern-content-panel {
    padding: 32px;
  }
  
  .content-text-column {
    padding: 1.5rem; /* Increased padding on all sides for mobile */
    margin-bottom: 2rem;
  }
  
  .content-title {
    font-size: 1.75rem;
  }
  
  .content-description {
    font-size: 1rem;
  }
  
  .screenshot-container {
    height: 300px;
  }
}

/* Define space-y-16 utility and increase gap between use case cards */
.space-y-16 > * + *,
.space-y-16 > .use-case-card + .use-case-card {
  margin-top: 2rem !important; /* Increased from default small gap to match benefits section */
}

@media (max-width: 768px) {
  .modern-tabs-nav {
    flex-direction: column;
    gap: 8px;
  }
  
  .modern-tab-btn {
    font-size: 0.875rem;
    padding: 14px 20px;
    width: 100%;
    flex: none;
  }
  
  .modern-content-panel {
    padding: 24px;
  }
  
  /* Hide visual columns (images) on mobile only */
  .content-visual-column {
    display: none !important;
  }
  
  /* Make content take full width when visual column is hidden on mobile */
  .grid.grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  /* Remove padding on mobile for better content fill */
  .overall-content-container {
    padding: 0;
  }
  
  /* Remove container padding within tab sections on mobile */
  .modern-content-card .container-7xl {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Remove padding from How We Get You Started container */
  .container-7xl.space-y-8 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure benefit card grids fill full width on mobile */
  .modern-content-panel {
    padding: 0;
  }
  
  /* Remove any inherited padding from benefit card containers */
  .modern-content-panel .grid {
    margin-left: 0;
    margin-right: 0;
  }
  
  /* Simple mobile layout for How We Get You Started section */
  .benefit-line-item {
    overflow: hidden !important;
    padding: 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .benefit-line-item * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Align icon to top of text content */
  .benefit-line-item .flex.items-center.space-x-6 {
    align-items: flex-start !important;
  }
  
  .benefit-line-item .w-14 {
    margin-top: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Hide integration badge and restructure container */
  .integration-badge {
    display: none !important;
  }
  
  .benefit-line-item .flex.items-center.justify-between {
    display: block !important;
    width: 100% !important;
  }
  
  /* Reduce title text size in How We Get You Started section to match benefits tiles */
  .benefit-line-item h3 {
    font-size: 1rem !important;
  }
}
  
  .content-title {
    font-size: 1.5rem;
  }
}

/* Hero Screenshot with Blue Glow */
.hero-screenshot-container img,
img[alt="Carpata Parts Management Interface"] {
  box-shadow: 
    0 8px 25px hsla(200, 100%, 65%, 0.2),
    0 4px 15px hsla(200, 100%, 65%, 0.15),
    0 0 20px hsla(200, 100%, 65%, 0.1);
}

/* Design System Utility Classes - Dark Background Standard */
/* glass-card is used as background containers - NO hover effects */
.glass-card {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%); /* From .bg-gradient-primary */
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  position: relative;
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: var(--card-gradient-border);
  border-radius: var(--card-radius);
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  z-index: 0;
}

.glass-card > * {
  position: relative;
  z-index: 2;
}



.electric-blue-text {
  color: var(--electric-blue);
}

/* Integration showcase container - transparent background with gradient border */
.integration-showcase.glass-card {
    background: transparent !important;
}

/* KPI Tile Styling - Premium Design Tokens */
.kpi-tile {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%); /* From .bg-gradient-primary */
  border: none;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06);
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
  position: relative;
  overflow: hidden;
}

.kpi-tile::before {
  display: none; /* Remove gradient border from KPI tiles */
}

.kpi-tile > * {
  position: relative;
  z-index: 2;
}

.kpi-tile:hover {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.18) 0%, rgba(70, 173, 245, 0.13) 30%, rgba(70, 173, 245, 0.08) 60%, transparent 100%);
}

/* Align icon to top of flex box in KPI tiles - target only the metric tiles */
.kpi-tile .flex.items-center.justify-center.mb-4 > .icon-container-primary {
  align-self: flex-start;
}

/* Ensure circular icon containers remain perfectly centered */
.w-16.h-16.rounded-full.flex.items-center.justify-center {
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure icon containers remain circular in careers page */
.w-14.h-14.rounded-full {
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

/* KPI Card Styling - Premium Design Tokens */
.kpi-card {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%); /* From .bg-gradient-primary */
  border-radius: var(--card-radius);
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: var(--card-shadow-premium);
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: var(--card-gradient-border);
  border-radius: var(--card-radius);
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  z-index: 0;
}

/* Remove gradient border from step tiles specifically */
.step-tile.kpi-card::before {
  display: none;
}

/* Remove gradient border from use case cards specifically */
.use-case-card.glass-card::before {
  display: none;
}

.kpi-card > * {
  position: relative;
  z-index: 2;
}

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


.metric-number {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-soft-white);
  margin: 0;
}

.kpi-content h3 {
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.kpi-content p {
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.kpi-content .text-sm {
  margin-top: 0.5rem;
}

/* Step tile animations enabled */

/* Remove bottom margins from last elements in sections */
section > div:last-child,
section > div > div:last-child,
section > div > div > div:last-child {
    margin-bottom: 0 !important;
}

/* Hero Screenshot Transition Effect */
.hero-screenshot-wrapper {
  position: relative;
}

.hero-screenshot-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  bottom: -8rem;
  background: var(--section-background) !important;
  z-index: 1;
}

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

/* Section Navy Background */
.section-navy {
  background: 
    /* Large organic blob - top left */
    radial-gradient(ellipse 600px 400px at 12% 20%, rgba(51, 115, 191, 0.4) 0%, rgba(51, 115, 191, 0.15) 50%, transparent 80%),
    radial-gradient(ellipse 450px 650px at 18% 28%, rgba(31, 61, 115, 0.25) 0%, transparent 70%),
    
    /* Medium organic shape - top right */
    radial-gradient(ellipse 500px 350px at 75% 15%, rgba(51, 115, 191, 0.35) 0%, rgba(31, 61, 115, 0.12) 50%, transparent 80%),
    radial-gradient(ellipse 380px 280px at 82% 22%, rgba(51, 115, 191, 0.2) 0%, transparent 70%),
    
    /* Flowing shape - right center */
    radial-gradient(ellipse 400px 600px at 88% 55%, rgba(31, 61, 115, 0.3) 0%, rgba(20, 41, 77, 0.1) 50%, transparent 75%),
    radial-gradient(ellipse 320px 480px at 85% 65%, rgba(31, 61, 115, 0.18) 0%, transparent 70%),
    
    /* Small accent - bottom left */
    radial-gradient(ellipse 350px 250px at 25% 80%, rgba(51, 115, 191, 0.28) 0%, rgba(31, 61, 115, 0.08) 60%, transparent 80%),
    
    /* Subtle background layer */
    radial-gradient(ellipse 800px 600px at 45% 45%, rgba(20, 41, 77, 0.05) 0%, transparent 70%),
    
    #1E293B;
  position: relative;
  z-index: 1; /* Above WebGL canvas (-20) */
  overflow: visible; /* Allow shadows to show */
  padding-bottom: 5rem !important; /* Extra space for button shadows */
}

.section-navy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='400' height='300' viewBox='0 0 400 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 150C50 120 100 180 150 150C200 120 250 180 300 150C350 120 380 140 400 130' stroke='rgba(255, 255, 255, 0.03)' stroke-width='0.5' fill='none'/%3E%3Cpath d='M0 80C80 50 120 110 200 80C280 50 320 90 400 70' stroke='rgba(255, 255, 255, 0.02)' stroke-width='0.3' fill='none'/%3E%3Cpath d='M0 220C60 190 140 250 220 220C280 190 340 230 400 210' stroke='rgba(255, 255, 255, 0.025)' stroke-width='0.4' fill='none'/%3E%3Cpath d='M0 40C100 10 150 70 250 40C300 10 350 50 400 30' stroke='rgba(255, 255, 255, 0.015)' stroke-width='0.3' fill='none'/%3E%3Cpath d='M0 260C70 230 130 290 210 260C290 230 330 270 400 250' stroke='rgba(255, 255, 255, 0.02)' stroke-width='0.3' fill='none'/%3E%3C/svg%3E");
  background-size: 800px 600px;
  background-position: 0 0;
  z-index: -1;
  opacity: 0.6;
}

.section-navy::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='300' height='200' viewBox='0 0 300 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100C40 70 80 130 120 100C160 70 200 120 240 100C270 80 290 90 300 85' stroke='rgba(79, 184, 255, 0.04)' stroke-width='0.4' fill='none'/%3E%3Cpath d='M0 60C60 30 90 90 150 60C210 30 240 70 300 50' stroke='rgba(79, 184, 255, 0.03)' stroke-width='0.3' fill='none'/%3E%3Cpath d='M0 140C50 110 110 170 170 140C230 110 260 150 300 130' stroke='rgba(79, 184, 255, 0.035)' stroke-width='0.3' fill='none'/%3E%3C/svg%3E");
  background-size: 600px 400px;
  background-position: -200px -100px;
  z-index: -1;
  opacity: 0.4;
}

@keyframes flowingLines {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(-100px) translateY(-50px);
  }
}

/* Ensure section content is above the background */
.section-navy > * {
  position: relative;
  z-index: 10;
}

/* Extra spacing for button shadows */
.section-navy .text-center.mt-12 {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
}

/* Benefit Cards for Workshops/Suppliers Section */
.benefit-card {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%); /* From .bg-gradient-primary */
  border: none;
  border-radius: 8px;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
  text-align: center;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}


.benefit-card > * {
  position: relative;
  z-index: 2;
}

.benefit-card:hover {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.18) 0%, rgba(70, 173, 245, 0.13) 30%, rgba(70, 173, 245, 0.08) 60%, transparent 100%);
}

.benefit-card-icon {
  width: 4rem;
  height: 4rem;
  background: rgba(70, 173, 245, 0.15);
  border: 2px solid var(--electric-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--text-soft-white);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.benefit-card-icon i,
.benefit-card-icon [data-lucide] {
  width: 2rem !important;
  height: 2rem !important;
  color: var(--text-soft-white) !important;
  stroke: white !important;
  stroke-width: 1.5 !important;
  fill: none !important;
}

.benefit-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-soft-white);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.benefit-description {
  font-size: 0.875rem;
  color: #CBD5E1;
  line-height: 1.5;
}


/* Benefit Display Card */
.benefit-display-card {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%); /* From .bg-gradient-primary */
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 2rem;
  position: relative;
  backdrop-filter: var(--card-backdrop-blur);
  -webkit-backdrop-filter: var(--card-backdrop-blur);
  min-height: 200px;
}

.benefit-display-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: var(--card-gradient-border);
  border-radius: var(--card-radius);
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  z-index: 0;
}

.benefit-display-card > * {
  position: relative;
  z-index: 2;
}

.benefit-content {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.benefit-content.active {
  display: block;
  opacity: 1;
}

/* Responsive adjustments for benefit cards */
@media (max-width: 1024px) {
  .benefit-card {
    padding: 1.25rem;
  }
  
  .benefit-display-card {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .benefit-card {
    padding: 1rem;
  }
  
  .benefit-title {
    font-size: 1rem;
  }
  
  .benefit-description {
    font-size: 0.8rem;
  }
  
  .benefit-display-card {
    padding: 1.25rem;
    min-height: 150px;
  }
}

/* Integration Card Styles */
.integration-card {
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  padding: 1.5rem 1.5rem 2rem 1.5rem;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transform: translateY(-4px) scale(1.01);
  border: 1px solid transparent;
  background-clip: padding-box;
}

.integration-card::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(96, 165, 250, 0.1));
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

.integration-card > * {
  position: relative;
  z-index: 5;
}

.integration-details {
  opacity: 1;
}

.integration-icon-container {
  transition: transform 0.3s ease;
  transform: scale(1.05);
}

/* Hover state */
.integration-card:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Electric blue pill badges */
.integration-badge {
  display: inline-block;
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.4);
  color: #60a5fa;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  text-align: center;
}

/* Enhanced cards for background image sections */
.card-over-image {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.card-over-image:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}


/* Global Section Spacing */
.section-spacing {
  padding-top: 7rem;    /* pt-28 */
  padding-bottom: 7rem; /* pb-28 - now equal */
}

.section-spacing-large {
  padding-top: 8rem;    /* pt-32 */
  padding-bottom: 8rem; /* pb-32 - equal */
}

.section-spacing-compact {
  padding-top: 4rem;    /* pt-16 */
  padding-bottom: 4rem; /* pb-16 - already equal */
}

/* Responsive section spacing */
@media (max-width: 768px) {
  .section-spacing {
    padding-top: 3rem;    /* pt-12 on mobile - increased for better breathing space */
    padding-bottom: 2rem; /* pb-8 on mobile - keep bottom spacing compact */
  }
  
  .section-spacing-large {
    padding-top: 5rem;    /* pt-20 on mobile */
    padding-bottom: 5rem; /* pb-20 on mobile - equal */
  }
  
  .section-spacing-compact {
    padding-top: 3rem;    /* pt-12 on mobile */
    padding-bottom: 3rem; /* pb-12 on mobile - already equal */
  }
}

/* ===== CSS OPTIMIZATION - CONSOLIDATED GRADIENT PATTERNS ===== */

/* Primary blue gradient - consolidates 13 duplicate instances */
.bg-gradient-primary {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%);
}

/* Primary blue gradient hover state - consolidates 4 duplicate instances */
.bg-gradient-primary-hover:hover {
  background: linear-gradient(135deg, rgba(70, 173, 245, 0.18) 0%, rgba(70, 173, 245, 0.13) 30%, rgba(70, 173, 245, 0.08) 60%, transparent 100%);
}

/* ===== PAGE-SPECIFIC STYLES (EXTRACTED FROM INDEX.HTML) ===== */

/* Page-specific styles for index.html - extracted to improve maintainability */

@keyframes textGradientFlow {
    0%, 100% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 25%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 75%;
    }
}

.tech-stack-section {
    background: linear-gradient(135deg, hsl(215 40% 8%) 0%, hsl(215 35% 10%) 50%, hsl(215 40% 8%) 100%);
}

.hero-split {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 4rem;
    align-items: start;
    min-height: 100vh;
    margin-top: -40px;
    padding-top: 6rem;
}

.hero-content {
    max-width: none;
}

.hero-workflow {
    background: hsl(215 35% 12% / 0.6);
    border: 1px solid hsl(215 20% 20% / 0.4);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(12px);
    box-shadow: 
        0 8px 32px hsl(215 40% 8% / 0.3),
        0 0 20px hsl(215 20% 20% / 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.vertical-workflow {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vertical-process-step {
    background: hsl(215 30% 15% / 0.8);
    border: 1px solid hsl(215 20% 20% / 0.4);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.vertical-process-step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, transparent, var(--primary), transparent);
    transform: translateY(-100%);
    transition: transform 0.6s ease;
}

.vertical-process-step.active::before {
    transform: translateY(100%);
}

.vertical-process-step.active {
    background: hsl(215 25% 18% / 0.9);
    border-color: hsl(215 20% 25% / 0.6);
    transform: translateX(8px);
}

.status-dot {
    transition: all 0.4s ease;
}

.status-dot.status-pending {
    background-color: rgb(248 113 113) !important;
}

.status-dot.status-processing {
    background-color: rgb(251 191 36) !important;
    animation: pulse 1.5s infinite;
}

.status-dot.status-complete {
    background-color: rgb(34 197 94) !important;
    box-shadow: 0 0 12px rgb(34 197 94);
}

/* Removed problematic KPI section background - now using transparent version at end of file */

.kpi-card {
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid rgba(77, 153, 255, 0.4);
    border-radius: 0.5rem;
    backdrop-filter: blur(10px);
}

.kpi-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.kpi-header .metric-number {
    width: 7rem;
    text-align: left;
    flex-shrink: 0;
}

.kpi-container {
    background: rgba(16, 32, 64, 0.5);
    backdrop-filter: blur(20px);
    border-radius: 0.75rem;
    padding: 2rem 2rem;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

.testimonials-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.testimonials-container .kpi-card:first-child {
    position: relative;
    z-index: 2;
}

.testimonials-container .kpi-card:last-child {
    position: relative;
    top: 3rem;
    z-index: 1;
}

@media (max-width: 768px) {
    .testimonials-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 3rem;
    }
    
    .testimonials-container .kpi-card:last-child {
        top: 0;
    }
}

.kpi-content {
    text-align: center;
    width: 100%;
}

.workflow-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 7rem;
}

.workflow-row:last-child {
    margin-bottom: 0;
}

.workflow-content {
    padding: 2rem 0;
}

.screenshot-placeholder {
    aspect-ratio: 16/10;
    background: transparent;
    border: 2px dashed rgba(156, 163, 175, 0.5);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.screenshot-placeholder-text {
    color: rgba(156, 163, 175, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

.floating-screenshot {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(34, 168, 201, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-screenshot:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(34, 168, 201, 0.2);
}

.workflow-content-box {
    background: linear-gradient(135deg, hsl(215 35% 12%) 0%, hsl(215 30% 18%) 100%);
    border: 2px solid rgba(34, 168, 201, 0.3);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.workflow-content-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(34, 168, 201, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .workflow-row {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 3rem;
    }
    
    .workflow-row.reverse {
        grid-template-areas: 
            "content"
            "screenshot";
    }
    
    .workflow-content {
        grid-area: content;
    }
    
    .screenshot-placeholder {
        grid-area: screenshot;
    }
}

.live-workflow-container {
    background: hsl(215 35% 12% / 0.6);
    border: 1px solid hsl(215 20% 20% / 0.4);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(12px);
    box-shadow: 
        0 8px 32px hsl(215 40% 8% / 0.3),
        0 0 20px hsl(215 20% 20% / 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.horizontal-workflow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.horizontal-process-step {
    background: hsl(215 30% 15% / 0.8);
    border: 1px solid hsl(215 20% 20% / 0.4);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.horizontal-process-step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, transparent, var(--primary), transparent);
    transform: translateY(-100%);
    transition: transform 0.6s ease;
}

.horizontal-process-step.active::before {
    transform: translateY(100%);
}

.horizontal-process-step.active {
    background: hsl(215 25% 18% / 0.9);
    border-color: hsl(215 20% 25% / 0.6);
    transform: translateY(-4px);
}

.progress-gradient {
    background: linear-gradient(90deg, hsl(200 100% 50%) 0%, hsl(190 100% 75%) 100%);
}

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

.workflow-unified-container {
    background: rgba(16, 32, 64, 0.5);
    backdrop-filter: blur(20px);
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.workflow-tabs-main {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.workflow-tab {
    padding: 2rem 1.5rem;
    border: 1px solid rgba(77, 153, 255, 0.4);
    border-radius: 0.5rem;
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.4s ease;
    opacity: 0.8;
    position: relative;
    overflow: hidden;
}

.workflow-tab.active {
    opacity: 1;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(77, 153, 255, 0.6);
}

.workflow-tab:hover {
    opacity: 1;
    transform: translateY(-2px);
    border-color: rgba(77, 153, 255, 0.5);
}

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

.workflow-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.workflow-tab-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
}

.workflow-tab-indicator {
    width: 12px;
    height: 12px;
    background-color: #ef4444;
    border-radius: 50%;
    transition: all 0.4s ease;
}

.workflow-tab.active .workflow-tab-indicator {
    background-color: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
    animation: indicatorProgress 1s ease-in-out;
}

.workflow-tab.completed {
    opacity: 0.7;
}

.workflow-tab.completed .workflow-tab-indicator {
    background-color: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.workflow-tab.completed .workflow-tab-progress .progress-gradient {
    width: 100%;
}

@keyframes indicatorProgress {
    0% {
        background-color: #ef4444;
    }
    50% {
        background-color: #f59e0b;
    }
    100% {
        background-color: #22c55e;
    }
}

.workflow-tab-subtitle {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.75rem;
}

.workflow-tab-progress {
    width: 100%;
    background-color: #374151;
    border-radius: 9999px;
    height: 6px;
    overflow: hidden;
}

.workflow-tab-progress .progress-gradient {
    height: 100%;
    background: linear-gradient(90deg, hsl(200 100% 50%) 0%, hsl(190 100% 75%) 100%);
    border-radius: 9999px;
    width: 0%;
    transition: width 1.5s ease;
}

.workflow-tab.active .workflow-tab-progress .progress-gradient {
    width: 100%;
}

.workflow-tab.completed .workflow-tab-progress .progress-gradient {
    width: 100%;
}

.workflow-tab:not(.active):not(.completed) .workflow-tab-progress .progress-gradient {
    width: 0% !important;
}

.workflow-content-area {
    position: relative;
    min-height: 800px;
    border-radius: 0.75rem;
    border: 1px solid rgba(77, 153, 255, 0.4);
    overflow: hidden;
}

.workflow-content-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.6s ease;
    display: flex;
    align-items: flex-start;
    padding: 2rem 0 0 2rem;
}

.workflow-content-panel.active {
    opacity: 1;
    transform: translateX(0);
}

.workflow-background-image {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotateZ(-45deg) rotateX(30deg) rotateY(45deg) scale(1.3);
    opacity: 0.5;
    border-radius: 8px;
    transition: all 0.6s ease;
}

.approval-background {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    opacity: 0.4;
}

.floating-content-container {
    position: relative;
    z-index: 10;
    background: rgba(16, 32, 64, 0.65);
    padding: 2rem 1.5rem;
    border: 1px solid rgba(77, 153, 255, 0.6);
    border-radius: 0.5rem;
    backdrop-filter: blur(10px);
    margin: 0;
    max-width: 500px;
    line-height: 1.4;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-4px);
    opacity: 1;
}

.workflow-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(107, 114, 128, 0.2);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 0.875rem;
    color: #d1d5db;
    font-weight: 500;
}

.detail-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
}

.status-processing {
    color: #fbbf24 !important;
}

.status-approved {
    color: #22c55e !important;
}

.status-pending {
    color: #f97316 !important;
}

@media (max-width: 768px) {
    .workflow-unified-container {
        padding: 1.5rem;
    }
    
    .workflow-tabs-main {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-bottom: 2rem;
    }
    
    .floating-content-container {
        margin: 1rem;
        max-width: none;
        padding: 1.5rem;
    }
    
    .workflow-content-area {
        min-height: 600px;
    }
    
    .workflow-background-image {
        transform: perspective(800px) rotateX(10deg) rotateY(-3deg) scale(0.7);
        opacity: 0.55;
    }
}

.logo-carousel-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 0;
}

.logo-carousel {
    display: flex;
    animation: scroll-logos 35s linear infinite;
    width: calc(240px * 14);
    position: relative;
}

.logo-item {
    flex-shrink: 0;
    width: 160px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 40px;
    position: relative;
}

.company-logo {
    height: 60px;
    width: auto;
    max-width: 160px;
    transition: all 0.3s ease;
}

.logo-carwow {
    height: 68px;
    max-width: 170px;
}

.logo-autotrader {
    height: 68px;
    max-width: 170px;
}

.logo-hk {
    height: 46px;
    max-width: 130px;
}

.logo-carousel:hover {
    animation-play-state: paused;
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-animation {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.integration-step {
    opacity: 0.5;
    transform: scale(0.95);
    transition: all 0.4s ease;
}

.integration-step.active {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(34, 197, 94, 0.6) !important;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.2);
}

.integration-step.active .integration-name {
    color: white !important;
}

.integration-step .integration-status {
    transform: scale(0);
    opacity: 0;
    transition: all 0.3s ease 0.2s;
}

.integration-step.active .integration-status {
    transform: scale(1);
    opacity: 1;
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4) !important;
}

.integration-step:not(.active) .integration-status {
    background-color: transparent !important;
    border-color: #6b7280 !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .logo-carousel {
        animation-duration: 30s;
    }
    
    .logo-item {
        width: 120px;
        margin: 0 25px;
    }
    
    .company-logo {
        height: 45px;
        max-width: 110px;
    }
}

.modern-tab-btn {
    padding: 8px 16px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

.fullwidth-feature-icon {
    margin-bottom: 1rem !important;
}

.fullwidth-feature-title {
    margin-bottom: 0.5rem !important;
}

@keyframes metricSubtleReveal {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.metric-item {
    opacity: 0;
}

.metric-item.animate {
    animation: metricSubtleReveal 0.6s ease-out both;
}

.icon-container-use-case {
    width: 4rem !important;
    height: 4rem !important;
    border-radius: 50% !important;
    flex-shrink: 0;
}

.integration-status {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.integration-status i {
    width: 0.875rem !important;
    height: 0.875rem !important;
}

/* ===== INLINE STYLE EXTRACTIONS ===== */

/* Background image blur - replaces style="filter: blur(6px);" */
.bg-image-blur {
    filter: blur(6px);
}

/* Gradient background container - replaces complex inline style */
.gradient-bg-container {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Benefit line item - blue gradient background with stronger backdrop blur */
.benefit-line-item {
    background: linear-gradient(135deg, rgba(70, 173, 245, 0.15) 0%, rgba(70, 173, 245, 0.10) 30%, rgba(70, 173, 245, 0.05) 60%, transparent 100%) !important;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}



/* Hero content styling - simplified structure */
.hero-content {
  position: relative;
  z-index: 10;
  padding-top: 16rem; /* pt-64 equivalent */
  text-align: center;
  max-width: 80rem; /* container-7xl equivalent */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 5rem; /* pb-20 equivalent */
}

@media (min-width: 768px) {
  .hero-content {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (min-width: 1024px) {
  .hero-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Tabs section styling */
.tabs-section {
  position: relative;
  z-index: 10;
}


/* KPI section styling */
.kpi-section {
  position: relative;
  z-index: 10;
  padding: 2rem 0;
}

/* Partners section styling */
.partners-section {
  position: relative;
  z-index: 10;
  padding: 4rem 0 5rem 0;
}