/* ═══════════════════════════════════════════════════════════════════════════
   3A AUTOMATION - ULTRA FUTURISTIC DESIGN
   Version: 3.0 - Competition-Winning Design (Forensic Patch v28)
   Date: 21 Janvier 2026
   Brand Guide: /3A-BRANDING-GUIDE.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* GLOBAL: Hidden utility class */
.hidden {
  display: none !important;
}

/* FORENSIC FIX: Hide exposed telemetry panel */
.footer-telemetry-panel {
  display: none !important;
}

/* CRITICAL FIX: Constrain voice widget logo images - Session 140bis */
#voice-assistant-widget img[src*="logo.png"] {
  max-width: 60px !important;
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
}

#voice-assistant-widget .va-trigger img {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
}

#voice-assistant-widget .va-header-icon img {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESET & BASE
   ───────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Touch support for mobile */
button,
a,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
}

:root {
  /* ═══════════════════════════════════════════════════════════════════════
     BRAND COLORS - Extracted from Official Logo
     ═══════════════════════════════════════════════════════════════════════ */

  /* Primary Colors (from logo gradient) */
  --primary: #4FBAF1;
  /* Cyan Primary - CTAs, accents */
  --primary-dark: #2B6685;
  /* Teal Blue - hover states */
  --primary-light: #ADD4F0;
  /* Light Blue - highlights */
  --primary-ice: #E4F4FC;
  /* Ice White - text on dark */

  /* Background Colors (from logo background) */
  --secondary: #0D0F1A;
  /* Sober Deep Black - main dark bg */
  --bg-navy: #0F172A;
  /* Deep Navy - secondary dark */
  --bg-teal: #1E293B;
  /* Dark Slate - tertiary */

  /* Accent */
  --accent: #10B981;
  /* Success green */
  --accent-purple: #8B5CF6;
  /* Purple accent */
  --accent-orange: #F59E0B;
  /* Orange accent */

  /* Text Colors */
  --text-primary: #191E35;
  /* Navy Deep */
  --text-secondary: #8BA3B9;
  /* Light Blue Gray - improved contrast on dark bg */
  --text-muted: #4E4962;
  /* Muted Purple */
  --text-light: #E4F4FC;
  /* Ice White */

  /* Light Theme Backgrounds */
  --bg-white: #ffffff;
  --bg-light: #f8fafc;
  --bg-dark: #0D0F1A;
  /* Sober Deep Black */

  /* Borders */
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --border-dark: rgba(79, 186, 241, 0.2);
  /* Cyan transparent */

  /* Gradients */
  --gradient-primary: linear-gradient(180deg, #E4F4FC 0%, #ADD4F0 30%, #4FBAF1 100%);
  --gradient-bg-dark: linear-gradient(135deg, #191E35 0%, #1B2F54 50%, #254E70 100%);
  --gradient-cyber: linear-gradient(135deg, #4FBAF1 0%, #2B6685 50%, #10B981 100%);

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

  /* Typography - World Class Standard */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-weight-bold: 800;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  --shadow-glow: 0 0 40px rgba(79, 186, 241, 0.3);
  --shadow-glow-strong: 0 0 60px rgba(79, 186, 241, 0.5);

  /* Glassmorphism 2.0 (High Precision 2026 - Stitch Logic) */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.05);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  --glass-backdrop: blur(20px);
  --glass-ultra: blur(40px) saturate(180%);
  --glass-reflection: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%);

  /* Border radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* Animation Control - Toggle via body.lite class */
  --anim-state: running;
}

/* Kinetic Typography Keyframes - MUST be outside :root */
@keyframes kineticReveal {
  0% {
    transform: translateY(100%) skewY(10deg);
    opacity: 0;
    filter: blur(10px);
  }

  100% {
    transform: translateY(0) skewY(0);
    opacity: 1;
    filter: blur(0);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-light);
  background: var(--secondary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lite mode - Disable heavy animations on secondary pages */
body.lite {
  --anim-state: paused;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CYBER BACKGROUND
   ───────────────────────────────────────────────────────────────────────────── */
.cyber-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.cyber-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(79, 186, 241, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 186, 241, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 20s linear infinite;
  animation-play-state: var(--anim-state);
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(60px, 60px);
  }
}

.cyber-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  /* Optimized from 80px for better performance */
  opacity: 0.35;
  animation: glowPulse 8s ease-in-out infinite;
  animation-play-state: var(--anim-state);
  will-change: opacity, transform;
  /* GPU acceleration hint */
  contain: strict;
  /* Layout containment for performance */
}

.cyber-glow-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  animation-delay: 0s;
}

.cyber-glow-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  bottom: 20%;
  left: -150px;
  animation-delay: 3s;
}

.cyber-glow-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--accent-purple) 0%, transparent 70%);
  top: 50%;
  right: 10%;
  animation-delay: 5s;
}

@keyframes glowPulse {

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

  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTAINER
   ───────────────────────────────────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER ULTRA
   ───────────────────────────────────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(25, 30, 53, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(79, 186, 241, 0.1);
  z-index: 1000;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
}

.logo-icon {
  width: 40px;
  height: 40px;
}

.logo-icon svg,
.logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.logo-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  background: var(--gradient-cyber);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.logo-sub {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.2em;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

.nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: all 0.3s ease;
  position: relative;
}

.nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-cyber);
  transition: width 0.3s ease;
}

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

.nav a:hover::after {
  width: 100%;
}

.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary) !important;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.btn-nav::after {
  display: none;
}

.btn-nav:hover {
  background: var(--primary);
  color: var(--secondary) !important;
  box-shadow: var(--shadow-glow);
}

.btn-nav svg {
  transition: transform 0.3s ease;
}

.btn-nav:hover svg {
  transform: translateX(4px);
}

/* Mobile Nav Toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: var(--spacing-sm);
  cursor: pointer;
}

.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--primary);
  position: relative;
  transition: all 0.3s;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--primary);
  transition: all 0.3s;
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  bottom: -8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO ULTRA
   ───────────────────────────────────────────────────────────────────────────── */
.hero-ultra {
  min-height: 100vh;
  padding: 140px 0 80px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: var(--spacing-xl);
  letter-spacing: -0.04em;
  color: var(--text-light);
}

/* Ultra variant with built-in gradient (for standalone use) */
.hero-title-ultra {
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: var(--spacing-xl);
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #5EC8F7 0%, #A78BFA 50%, #34D399 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease infinite;
}

.hero-title.kinetic-type .title-line {
  display: block;
  opacity: 0;
  animation: kineticReveal 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.hero-title.kinetic-type .title-line:nth-child(2) {
  animation-delay: 0.2s;
}

/* NOTE: .gradient-text is defined in Service Pages section (line ~4737) with animation */

/* GLOBAL: Hero title highlights with gradient effect - Applied to ALL pages */
.hero-title .highlight,
.hero-title-ultra .highlight,
h1 .highlight {
  background: linear-gradient(135deg, #5EC8F7 0%, #A78BFA 50%, #34D399 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease infinite;
}

/* Particles - Legacy (Removed for Whisk) */
.hero-particles {
  display: none;
}

/* Neural Cortex Cinematic Background (Fixed) */
.hero-cinematic-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* Force viewport height */
  z-index: 0;
  overflow: hidden;
}

.cinematic-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensure it covers without distortion */
  object-position: center;
  opacity: 0.6;
  filter: contrast(1.2) saturate(1.1);
  animation: zoomDrift 60s ease-in-out infinite alternate;
  /* Slower, more majestic */
}

/* Hero Architecture Video Background (Remotion) */
.cinematic-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.6;
  filter: contrast(1.2) saturate(1.1);
}

.cinematic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, transparent 0%, var(--secondary) 90%);
  z-index: 1;
}

@keyframes zoomDrift {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.05);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO ANIMATION - Simple Auto-Loop Background (v3.0)
   NO SCROLL DEPENDENCY - Session 147 Final Fix
   ───────────────────────────────────────────────────────────────────────────── */

/* Hero Animation Container - Fixed in hero, NO scroll pinning */
.hero-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Just viewport height */
  z-index: 0;
  overflow: hidden;
}

/* Canvas for frame-by-frame auto-loop animation - EDGE-TO-EDGE */
.hero-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Edge-to-edge coverage for ALL screen ratios */
  width: 100vw;
  height: 100vh;
  min-width: 177.78vh;
  /* 100vh * 16/9 - covers wide screens */
  min-height: 56.25vw;
  /* 100vw * 9/16 - covers tall screens */
  object-fit: cover;
  opacity: 0.6;
  filter: contrast(1.2) saturate(1.1);
  z-index: 1;
}

/* Hide video fallback when canvas is active */
.hero-animation.canvas-active .hero-video-fallback {
  display: none !important;
}

/* Video fallback for no-JS or mobile - EDGE-TO-EDGE */
.hero-video-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Edge-to-edge coverage for ALL screen ratios */
  width: 100vw;
  height: 100vh;
  min-width: 177.78vh;
  /* 100vh * 16/9 - covers wide screens */
  min-height: 56.25vw;
  /* 100vw * 9/16 - covers tall screens */
  object-fit: cover;
  opacity: 0.6;
  filter: contrast(1.2) saturate(1.1);
  z-index: 0;
}

/* Mobile: Use video instead of canvas for performance */
@media (max-width: 768px) {
  .hero-canvas {
    display: none;
  }

  .hero-video-fallback {
    display: block !important;
  }
}


/* Telemetry Hub - See LIVE AGENTIC TELEMETRY HUB section (line ~9280) for full definition */

@keyframes floatParticle {

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

  25% {
    transform: translate(20px, -30px);
  }

  50% {
    transform: translate(-10px, -20px);
  }

  75% {
    transform: translate(15px, 10px);
  }
}

.particle-line {
  position: absolute;
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: lineScan 4s linear infinite;
  animation-play-state: var(--anim-state);
}

.line-1 {
  top: 25%;
  left: 0;
  animation-delay: 0s;
}

.line-2 {
  top: 50%;
  right: 0;
  animation-delay: 1.5s;
  transform: rotate(180deg);
}

.line-3 {
  bottom: 35%;
  left: 0;
  animation-delay: 3s;
}

@keyframes lineScan {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(calc(100vw + 100px));
    opacity: 0;
  }
}

/* Hero Content */
.hero-ultra-content {
  position: relative;
  z-index: 2;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: rgba(79, 186, 241, 0.1);
  border: 1px solid rgba(79, 186, 241, 0.2);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-xl);
  font-size: 0.875rem;
}

.tag-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
  animation-play-state: var(--anim-state);
}

@keyframes pulse {

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

  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.tag-text {
  color: var(--primary);
  font-weight: 500;
}

.tag-separator {
  color: rgba(79, 186, 241, 0.3);
}

/* .title-line moved to line ~4770 (Enhanced with animation) */

.hero-description {
  font-size: 1.25rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--spacing-2xl);
  max-width: 520px;
}

/* Readability Enhancement for busy backgrounds */
.hero-desc-readable {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 30px rgba(25, 30, 53, 0.9);
  background: rgba(25, 30, 53, 0.5);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(79, 186, 241, 0.1);
}

.desc-highlight {
  color: var(--primary);
  font-weight: 600;
}

/* Hero Actions */
.hero-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-3xl);
}

/* Cyber Buttons */
.btn-cyber {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.btn-primary-cyber {
  background: var(--gradient-cyber);
  color: var(--secondary);
}

.btn-primary-cyber .btn-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-primary-cyber:hover .btn-glow {
  left: 100%;
}

.btn-primary-cyber:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-strong);
}

.btn-secondary-cyber {
  background: transparent;
  color: var(--primary);
  border: 1px solid rgba(79, 186, 241, 0.3);
}

.btn-secondary-cyber .btn-border {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: var(--gradient-cyber);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn-secondary-cyber .btn-border::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: var(--secondary);
  border-radius: var(--radius-lg);
}

.btn-secondary-cyber:hover {
  border-color: transparent;
  box-shadow: 0 0 20px rgba(79, 186, 241, 0.2);
}

.btn-secondary-cyber:hover .btn-border {
  opacity: 1;
}

.btn-icon {
  display: flex;
  transition: transform 0.3s ease;
}

.btn-cyber:hover .btn-icon {
  transform: translateX(4px);
}

/* Button Text - Inside btn-cyber for text content */
.btn-text {
  position: relative;
  z-index: 1;
}

/* Button Variants - Session 154bis */
.btn-cyber-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn-cyber-outline:hover {
  background: rgba(79, 186, 241, 0.1);
  box-shadow: 0 0 20px rgba(79, 186, 241, 0.3);
}

.btn-dashboard {
  background: var(--glass-bg);
  color: var(--text-light);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.btn-dashboard:hover {
  background: rgba(79, 186, 241, 0.1);
  border-color: var(--primary);
}

.btn-pulse {
  animation: btnPulse 2s ease-in-out infinite;
}

@keyframes btnPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(79, 186, 241, 0.4);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(79, 186, 241, 0);
  }
}

.btn-wide {
  padding-left: var(--spacing-3xl);
  padding-right: var(--spacing-3xl);
  min-width: 200px;
}

.btn-lg {
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-size: 1.125rem;
}

.btn-small {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.875rem;
}

/* Hero Stats - Generic (Voice AI, Services pages) */
.hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-xl);
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: rgba(25, 30, 53, 0.6);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  min-width: 120px;
}

.stat-item .stat-value {
  display: block;
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
  font-weight: 800;
  background: var(--gradient-cyber);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  margin-bottom: var(--spacing-xs);
}

.stat-item .stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hero Stats - Ultra (Homepage) */
.hero-stats-ultra {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  padding-top: var(--spacing-2xl);
  border-top: 1px solid rgba(79, 186, 241, 0.1);
}

.stat-ultra {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.stat-number-ultra {
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--gradient-cyber);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  font-family: var(--font-mono);
}

.stat-label-ultra {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  white-space: nowrap;
}

.stat-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(79, 186, 241, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(79, 186, 241, 0.3), transparent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TECH ORBITAL (Hero Visual)
   ───────────────────────────────────────────────────────────────────────────── */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  /* Center within grid cell */
  align-self: center;
  /* Center within grid cell */
  height: 500px;
  width: 100%;
  max-width: 500px;
  /* Prevent overflow */
}

.tech-orbital {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Orbital Container - Rotating rings (centered via inset + margin, not transform) */
.orbital-container {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(79, 186, 241, 0.3);
  inset: 0;
  margin: auto;
}

#orbital-outer {
  width: 380px;
  height: 380px;
  animation: orbitSpin 25s linear infinite;
  animation-play-state: var(--anim-state, running);
  border-width: 1px;
}

#orbital-mid {
  width: 280px;
  height: 280px;
  animation: orbitSpin 18s linear infinite reverse;
  animation-play-state: var(--anim-state, running);
  border-color: rgba(16, 185, 129, 0.4);
}

#orbital-inner {
  width: 180px;
  height: 180px;
  animation: orbitSpin 12s linear infinite;
  animation-play-state: var(--anim-state, running);
  border-color: rgba(79, 186, 241, 0.5);
  border-width: 2px;
}

/* Orbital Particles - Glowing dots on the rings */
.orbital-particle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, var(--primary, #4FBAF1), var(--accent, #10B981));
  border-radius: 50%;
  box-shadow:
    0 0 10px var(--primary, #4FBAF1),
    0 0 20px var(--primary, #4FBAF1),
    0 0 40px rgba(79, 186, 241, 0.5);
  animation: particlePulse 2s ease-in-out infinite;
}

.particle-top {
  top: -6px;
  left: 50%;
  margin-left: -6px;
}

.particle-bottom {
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
}

.particle-left {
  left: -6px;
  top: 50%;
  margin-top: -6px;
}

.particle-right {
  right: -6px;
  top: 50%;
  margin-top: -6px;
}

@keyframes particlePulse {

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

  50% {
    transform: scale(1.3);
    opacity: 0.8;
  }
}

/* Hero Logo Center */
.hero-logo-center {
  position: relative;
  z-index: 10;
  border-radius: 12px;
  box-shadow:
    0 0 30px rgba(79, 186, 241, 0.5),
    0 0 60px rgba(79, 186, 241, 0.3);
}

.hero-logo-center.pulse-glow {
  animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {

  0%,
  100% {
    box-shadow:
      0 0 30px rgba(79, 186, 241, 0.5),
      0 0 60px rgba(79, 186, 241, 0.3);
    filter: brightness(1);
  }

  50% {
    box-shadow:
      0 0 50px rgba(79, 186, 241, 0.8),
      0 0 100px rgba(79, 186, 241, 0.5),
      0 0 150px rgba(16, 185, 129, 0.3);
    filter: brightness(1.15);
  }
}

.orbital-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(79, 186, 241, 0.2);
}

.ring-1 {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: orbitSpin 30s linear infinite;
  animation-play-state: var(--anim-state);
}

.ring-2 {
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  animation: orbitSpin 20s linear infinite reverse;
  animation-play-state: var(--anim-state);
  border-color: rgba(16, 185, 129, 0.2);
}

.ring-3 {
  width: 45%;
  height: 45%;
  top: 27.5%;
  left: 27.5%;
  animation: orbitSpin 15s linear infinite;
  animation-play-state: var(--anim-state);
  border-color: rgba(139, 92, 246, 0.2);
}

@keyframes orbitSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.tech-icon {
  position: absolute;
  width: 52px;
  height: 52px;
  background: rgba(25, 30, 53, 0.95);
  border: 1px solid rgba(79, 186, 241, 0.3);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  will-change: transform, opacity;
}

.tech-icon:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}

.tech-icon span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
  line-height: 1.2;
}

/* Counter-rotate tech-icons to keep text upright */
.ring-1 .tech-icon {
  animation: counterSpin 30s linear infinite;
  animation-play-state: var(--anim-state);
}

.ring-2 .tech-icon {
  animation: counterSpin 20s linear infinite reverse;
  animation-play-state: var(--anim-state);
}

.ring-3 .tech-icon {
  animation: counterSpin 15s linear infinite;
  animation-play-state: var(--anim-state);
}

@keyframes counterSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

/* Ring 1 positions (8 items - 400px ring) */
.ring-1 .tech-icon:nth-child(1) {
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
}

.ring-1 .tech-icon:nth-child(2) {
  top: 10%;
  right: 2%;
}

.ring-1 .tech-icon:nth-child(3) {
  top: 50%;
  right: -26px;
  transform: translateY(-50%);
}

.ring-1 .tech-icon:nth-child(4) {
  bottom: 10%;
  right: 2%;
}

.ring-1 .tech-icon:nth-child(5) {
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
}

.ring-1 .tech-icon:nth-child(6) {
  bottom: 10%;
  left: 2%;
}

.ring-1 .tech-icon:nth-child(7) {
  top: 50%;
  left: -26px;
  transform: translateY(-50%);
}

.ring-1 .tech-icon:nth-child(8) {
  top: 10%;
  left: 2%;
}

/* Ring 2 positions (8 items - 280px ring) */
.ring-2 .tech-icon:nth-child(1) {
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
}

.ring-2 .tech-icon:nth-child(2) {
  top: 8%;
  right: 0%;
}

.ring-2 .tech-icon:nth-child(3) {
  top: 50%;
  right: -26px;
  transform: translateY(-50%);
}

.ring-2 .tech-icon:nth-child(4) {
  bottom: 8%;
  right: 0%;
}

.ring-2 .tech-icon:nth-child(5) {
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
}

.ring-2 .tech-icon:nth-child(6) {
  bottom: 8%;
  left: 0%;
}

.ring-2 .tech-icon:nth-child(7) {
  top: 50%;
  left: -26px;
  transform: translateY(-50%);
}

.ring-2 .tech-icon:nth-child(8) {
  top: 8%;
  left: 0%;
}

/* Ring 3 positions (8 items - 180px ring)
   FIXED: Diagonal icons at ~15% for correct 45° circular distribution
   cos(45°) = 0.707, so position from edge = (1-0.707)/2 = 14.65% ≈ 15% */
.ring-3 .tech-icon {
  width: 44px;
  height: 44px;
}

.ring-3 .tech-icon span {
  font-size: 0.65rem;
}

.ring-3 .tech-icon:nth-child(1) {
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
}

.ring-3 .tech-icon:nth-child(2) {
  top: 3%;
  right: 3%;
}

.ring-3 .tech-icon:nth-child(3) {
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
}

.ring-3 .tech-icon:nth-child(4) {
  bottom: 3%;
  right: 3%;
}

.ring-3 .tech-icon:nth-child(5) {
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
}

.ring-3 .tech-icon:nth-child(6) {
  bottom: 3%;
  left: 3%;
}

.ring-3 .tech-icon:nth-child(7) {
  top: 50%;
  left: -22px;
  transform: translateY(-50%);
}

.ring-3 .tech-icon:nth-child(8) {
  top: 3%;
  left: 3%;
}

.orbital-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: var(--gradient-cyber);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow-strong);
}

.center-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--secondary);
}

.center-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--primary);
  animation: centerPulse 2s ease-out infinite;
  animation-play-state: var(--anim-state);
}

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

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Scroll Indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.scroll-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: rgba(79, 186, 241, 0.2);
  position: relative;
  overflow: hidden;
}

.scroll-dot {
  position: absolute;
  width: 3px;
  height: 10px;
  background: var(--primary);
  left: -1px;
  animation: scrollDown 2s ease-in-out infinite;
  animation-play-state: var(--anim-state);
}

@keyframes scrollDown {
  0% {
    top: 0;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION HEADERS ULTRA
   ───────────────────────────────────────────────────────────────────────────── */
.section-header-ultra {
  text-align: center;
  margin-bottom: var(--spacing-4xl);
}

.section-tag {
  display: inline-block;
  background: rgba(79, 186, 241, 0.1);
  border: 1px solid rgba(79, 186, 241, 0.2);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-lg);
}

.section-title-ultra {
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.02em;
  /* Gradient text effect - applied to ALL section titles */
  background: linear-gradient(135deg, #5EC8F7 0%, #A78BFA 50%, #34D399 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease infinite;
}

.section-desc-ultra {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FLYWHEEL SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.flywheel-section {
  padding: var(--spacing-4xl) 0;
  position: relative;
}

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

.flywheel-wheel {
  position: relative;
  width: 500px;
  height: 500px;
}

.flywheel-stage {
  position: absolute;
  width: 140px;
  padding: var(--spacing-lg);
  background: rgba(25, 30, 53, 0.8);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-xl);
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  cursor: pointer;
}

.flywheel-stage:hover {
  border-color: var(--primary);
  transform: scale(1.05);
  box-shadow: var(--shadow-glow);
}

.stage-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto var(--spacing-sm);
  background: rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.stage-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.stage-count {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Stage positions - circular layout */
.stage-1 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.stage-2 {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.stage-3 {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.stage-4 {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Stage colors */
.stage-1 .stage-icon {
  background: rgba(79, 186, 241, 0.1);
  color: var(--primary);
}

.stage-2 .stage-icon {
  background: rgba(16, 185, 129, 0.1);
  color: var(--accent);
}

.stage-3 .stage-icon {
  background: rgba(139, 92, 246, 0.1);
  color: var(--accent-purple);
}

.stage-4 .stage-icon {
  background: rgba(245, 158, 11, 0.1);
  color: var(--accent-orange);
}

.flywheel-center-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: var(--gradient-cyber);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow-strong);
}

.hub-text {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--secondary);
}

.flywheel-arrows {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  pointer-events: none;
}

.arrow-svg {
  width: 100%;
  height: 100%;
  animation: arrowRotate 10s linear infinite;
  animation-play-state: var(--anim-state);
}

@keyframes arrowRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SERVICES ULTRA
   ───────────────────────────────────────────────────────────────────────────── */
.services-ultra {
  padding: var(--spacing-4xl) 0;
  position: relative;
}

.services-grid-ultra {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

/* Glassmorphism 2.0 - Forensic Grade */
.service-card-ultra,
.squad-card {
  position: relative;
  padding: var(--spacing-2xl);
  background: rgba(255, 255, 255, 0.03);
  /* Extremely subtle fill */
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  /* iOS style blur */
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* Brighter border */
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  /* Top highlight */
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  /* Left highlight */
  border-radius: var(--radius-2xl);
  text-decoration: none;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  /* Deep glass shadow */
  color: var(--text-light);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.service-card-ultra:hover,
.squad-card:hover {
  transform: translateY(-5px) scale(1.01);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 50px rgba(79, 186, 241, 0.2);
  /* Glow effect */
}

.service-card-ultra::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--glass-reflection);
  pointer-events: none;
  z-index: 1;
}

.service-card-ultra:hover {
  border-color: var(--primary);
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-glow);
}


.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 0%, rgba(79, 186, 241, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service-card-ultra:hover .card-glow {
  opacity: 1;
}

.card-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gradient-cyber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.service-card-ultra:hover .card-border {
  transform: scaleX(1);
}

.card-content {
  position: relative;
  z-index: 1;
}

.card-icon {
  width: 70px;
  height: 70px;
  background: rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
  color: var(--primary);
  transition: all 0.3s ease;
}

.service-card-ultra:hover .card-icon {
  background: var(--primary);
  color: var(--secondary);
  box-shadow: var(--shadow-glow);
}

.card-icon.pme {
  background: rgba(16, 185, 129, 0.1);
  color: var(--accent);
}

.service-card-ultra:hover .card-icon.pme {
  background: var(--accent);
}

.card-icon.catalog {
  background: rgba(139, 92, 246, 0.1);
  color: var(--accent-purple);
}

.service-card-ultra:hover .card-icon.catalog {
  background: var(--accent-purple);
}

.card-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.card-desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.card-stats {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(79, 186, 241, 0.1);
}

.card-stat {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.card-stat strong {
  color: var(--primary);
  font-weight: 700;
}

.card-arrow {
  position: absolute;
  bottom: var(--spacing-2xl);
  right: var(--spacing-2xl);
  width: 40px;
  height: 40px;
  background: rgba(79, 186, 241, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: all 0.3s ease;
}

.service-card-ultra:hover .card-arrow {
  background: var(--primary);
  color: var(--secondary);
  transform: translateX(5px);
}

/* Strategic Trilogy - Squad Cards */
.squad-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  margin-top: var(--spacing-3xl);
}

/* .squad-card merged with .service-card-ultra for consistency */
/* 
.squad-card {
   ...
} 
*/

.squad-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--glass-reflection);
  pointer-events: none;
  z-index: 1;
}

.squad-card:hover {
  border-color: var(--primary);
  transform: translateY(-10px);
  box-shadow: var(--shadow-glow-strong);
}

.squad-card.featured {
  border: 2px solid var(--primary);
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.15) 0%, var(--glass-bg) 100%);
}

.squad-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  filter: drop-shadow(0 0 10px rgba(79, 186, 241, 0.3));
}

.squad-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-sans);
}

.squad-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.squad-models {
  list-style: none;
  margin-bottom: var(--spacing-xl);
  flex-grow: 1;
}

.squad-models li {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.squad-models li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--primary);
}

.squad-price {
  margin-top: auto;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
}

.price-amount {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
}

.unit {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.btn-squad {
  margin-top: var(--spacing-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  z-index: 2;
}

.btn-squad:hover {
  background: var(--primary);
  color: var(--secondary);
  box-shadow: var(--shadow-glow);
}

.btn-squad.featured {
  background: var(--primary);
  color: var(--secondary);
}

.squad-badge {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: var(--accent);
  color: var(--text-light);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  z-index: 3;
}


/* Featured card */
.card-featured {
  grid-column: span 1;
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.1) 0%, rgba(25, 30, 53, 0.8) 100%);
}

.card-badge {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  background: var(--gradient-cyber);
  color: var(--secondary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TECH STACK SECTION - Compact Marquee Design
   ───────────────────────────────────────────────────────────────────────────── */
.tech-stack-section {
  padding: var(--spacing-2xl) 0;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.section-header-ultra.compact {
  margin-bottom: var(--spacing-lg);
}

.section-header-ultra.compact .section-title-ultra {
  font-size: 1.5rem;
}

/* Tech Marquee Container */
.tech-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--spacing-sm) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.tech-marquee-track {
  display: flex;
  gap: var(--spacing-md);
  animation: marqueeScroll 40s linear infinite;
  animation-play-state: var(--anim-state);
  width: max-content;
  will-change: transform;
}

.tech-marquee.reverse .tech-marquee-track {
  animation: marqueeScrollReverse 35s linear infinite;
  animation-play-state: var(--anim-state);
}

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

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

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

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

/* Pause on hover for readability */
.tech-marquee:hover .tech-marquee-track {
  animation-play-state: paused;
}

/* Tech Pills */
.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: rgba(25, 30, 53, 0.8);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Tech Pill Logos */
.tech-pill img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.tech-pill:hover img {
  opacity: 1;
}

/* Category-specific logo colors */
.tech-pill.ecommerce img {
  filter: brightness(0) saturate(100%) invert(63%) sepia(91%) saturate(401%) hue-rotate(166deg) brightness(96%) contrast(93%);
}

.tech-pill.analytics img {
  filter: brightness(0) saturate(100%) invert(64%) sepia(52%) saturate(512%) hue-rotate(114deg) brightness(91%) contrast(90%);
}

.tech-pill.ads img {
  filter: brightness(0) saturate(100%) invert(57%) sepia(85%) saturate(1556%) hue-rotate(360deg) brightness(101%) contrast(96%);
}

.tech-pill.ai img {
  filter: brightness(0) saturate(100%) invert(42%) sepia(76%) saturate(2155%) hue-rotate(235deg) brightness(94%) contrast(93%);
}

.tech-pill.automation img {
  filter: brightness(0) saturate(100%) invert(51%) sepia(54%) saturate(2424%) hue-rotate(307deg) brightness(98%) contrast(93%);
}

.tech-pill.infra img {
  filter: brightness(0) saturate(100%) invert(41%) sepia(76%) saturate(2048%) hue-rotate(224deg) brightness(93%) contrast(93%);
}

.tech-pill.crm img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(89%) saturate(1095%) hue-rotate(336deg) brightness(99%) contrast(101%);
}

.tech-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: scale(1.05);
}

/* Category color coding */
.tech-pill.ecommerce {
  border-color: rgba(79, 186, 241, 0.3);
  color: var(--primary);
}

.tech-pill.analytics {
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--accent);
}

.tech-pill.ads {
  border-color: rgba(249, 115, 22, 0.3);
  color: #F97316;
}

.tech-pill.ai {
  border-color: rgba(139, 92, 246, 0.3);
  color: var(--accent-purple);
}

.tech-pill.automation {
  border-color: rgba(236, 72, 153, 0.3);
  color: #EC4899;
}

.tech-pill.infra {
  border-color: rgba(99, 102, 241, 0.3);
  color: #6366F1;
}

.tech-pill.crm {
  border-color: rgba(255, 122, 89, 0.3);
  color: #FF7A59;
}

.tech-pill.featured {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.5);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY - Reduced Motion Support
   Respects user preference for reduced motion (vestibular disorders, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  /* Disable all orbital animations */
  .orbital-ring,
  .ring-1,
  .ring-2,
  .ring-3,
  .tech-icon,
  .ring-1 .tech-icon,
  .ring-2 .tech-icon,
  .ring-3 .tech-icon {
    animation: none !important;
  }

  /* Disable center pulse */
  .center-pulse,
  .step-pulse {
    animation: none !important;
  }

  /* Disable marquee */
  .tech-marquee-track {
    animation: none !important;
  }

  /* Disable all decorative animations */
  .cyber-glow,
  .morph-blob,
  .data-stream,
  .particle-orb,
  .particle-line,
  .scroll-dot,
  .holographic::before,
  .gradient-border::before,
  .glitch::before,
  .glitch::after {
    animation: none !important;
  }

  /* Disable hover transform effects */
  .tech-icon:hover,
  .service-card-ultra:hover,
  .btn-cyber:hover {
    transform: none !important;
  }

  /* Keep essential transitions but make them instant */
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PROCESS ULTRA
   ───────────────────────────────────────────────────────────────────────────── */
.process-ultra {
  padding: var(--spacing-4xl) 0;
}

.process-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 0;
}

.timeline-line {
  position: absolute;
  left: 39px;
  /* Center of 80px marker (40px - 1px for 2px line width) */
  top: 40px;
  /* Start from center of first marker */
  bottom: 40px;
  /* End at center of last marker */
  width: 2px;
  background: linear-gradient(180deg, var(--primary), var(--accent), var(--accent-purple), var(--accent-orange));
}

.process-step-ultra {
  position: relative;
  display: flex;
  gap: var(--spacing-2xl);
  padding: var(--spacing-2xl) 0;
}

.step-marker {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background: rgba(25, 30, 53, 0.9);
  border: 2px solid var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.step-num {
  font-size: 1.25rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.70);
  font-family: var(--font-mono);
}

.step-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--primary);
  animation: stepPulse 2s ease-out infinite;
  animation-play-state: var(--anim-state);
  opacity: 0;
}

.process-step-ultra:hover .step-pulse {
  animation: stepPulse 2s ease-out infinite;
  animation-play-state: var(--anim-state);
}

@keyframes stepPulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.step-content-ultra {
  flex: 1;
  padding-top: var(--spacing-lg);
}

.step-content-ultra h3 {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.step-content-ultra p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Step colors - borders only, text stays white for contrast */
.process-step-ultra:nth-child(2) .step-marker {
  border-color: var(--primary);
}

.process-step-ultra:nth-child(3) .step-marker {
  border-color: var(--accent);
}

.process-step-ultra:nth-child(4) .step-marker {
  border-color: var(--accent-purple);
}

.process-step-ultra:nth-child(5) .step-marker {
  border-color: var(--accent-orange);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CTA ULTRA
   ───────────────────────────────────────────────────────────────────────────── */
.cta-ultra {
  padding: var(--spacing-4xl) 0;
}

.cta-card-ultra {
  position: relative;
  padding: var(--spacing-4xl);
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.1) 0%, rgba(25, 30, 53, 0.9) 100%);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.cta-glow {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(79, 186, 241, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.cta-content-ultra {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
}

.cta-desc {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-2xl);
}

/* Form Ultra */
.form-ultra {
  background: rgba(25, 30, 53, 0.6);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(79, 186, 241, 0.1);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.form-field {
  position: relative;
}

.form-field.full-width {
  grid-column: span 2;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-md);
  color: var(--text-light);
  font-size: 1rem;
  font-family: var(--font-sans);
  transition: all 0.3s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 186, 241, 0.1);
}

.form-field label {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 0.875rem;
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-field textarea~label {
  top: var(--spacing-lg);
  transform: none;
}

.form-field input:focus~label,
.form-field input:not(:placeholder-shown)~label,
.form-field textarea:focus~label,
.form-field textarea:not(:placeholder-shown)~label {
  top: var(--spacing-sm);
  transform: none;
  font-size: 0.7rem;
  color: var(--primary);
}

.field-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gradient-cyber);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.form-field input:focus~.field-border,
.form-field textarea:focus~.field-border {
  transform: scaleX(1);
}

.btn-submit {
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: 1.125rem;
  background: var(--gradient-cyber);
  color: var(--secondary);
  justify-content: center;
}

.btn-submit:hover {
  box-shadow: var(--shadow-glow-strong);
  transform: translateY(-2px);
}

.form-note-ultra {
  margin-top: var(--spacing-lg);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.form-note-ultra a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.form-note-ultra a:hover {
  color: var(--accent);
}

/* CTA Trust Signals */
.cta-trust-signals {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
}

.cta-trust-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cta-trust-item svg {
  color: var(--primary);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .cta-trust-signals {
    gap: var(--spacing-sm) var(--spacing-md);
  }
  .cta-trust-item {
    font-size: 0.65rem;
  }
}

/* Form Select Styling */
.form-field select {
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-md);
  background: rgba(79, 186, 241, 0.05);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-md);
  color: var(--text-light);
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234FBAF1' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 1.25rem;
  transition: all 0.3s ease;
}

.form-field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 186, 241, 0.1);
}

.form-field select option {
  background: var(--secondary);
  color: var(--text-light);
  padding: var(--spacing-md);
}

/* Form Messages */
.form-message {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-lg);
  animation: fadeSlideUp 0.4s ease;
}

.form-message.success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--accent);
}

.form-message.success svg {
  stroke: var(--accent);
  flex-shrink: 0;
}

.form-message.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.form-message.error svg {
  stroke: #f87171;
  flex-shrink: 0;
}

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

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

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER ULTRA
   ───────────────────────────────────────────────────────────────────────────── */
.footer-ultra {
  padding: var(--spacing-3xl) 0 var(--spacing-xl);
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(79, 186, 241, 0.1);
}

/* Footer Status Bar */
.footer-status-bar {
  display: flex;
  /* Ensure it's a flex container */
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  background: rgba(25, 30, 53, 0.6);
  border: 1px solid rgba(79, 186, 241, 0.15);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-2xl);
  width: 95%;
  /* Enlarge as requested */
  margin-left: auto;
  /* Center the bar */
  margin-right: auto;
  /* Center the bar */
}

.status-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
}

.status-dot.online {
  background: #10B981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  animation: statusPulse 2s ease-in-out infinite;
  animation-play-state: var(--anim-state);
}

@keyframes statusPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

.status-icon {
  font-size: 0.9rem;
}

.footer-desc {
  font-size: 0.875rem;
  color: var(--text-light);
  /* Changed from --text-secondary to --text-light */
  line-height: 1.6;
  max-width: 280px;
  font-weight: bold;
}

/* Social Icons - Session 118 */
.footer-social {
  display: flex;
  gap: 6px;
  margin-top: var(--spacing-lg);
  flex-wrap: nowrap;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: rgba(79, 186, 241, 0.1);
  color: var(--primary);
  transition: all 0.3s ease;
  border: 1px solid rgba(79, 186, 241, 0.2);
}

.social-link:hover {
  background: var(--primary);
  color: var(--bg-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(79, 186, 241, 0.3);
}

.social-link svg {
  width: 16px;
  height: 16px;
}

/* Social Icon Ultra - Footer modern icons */
.social-icon-ultra {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: rgba(79, 186, 241, 0.1);
  color: var(--primary);
  transition: all 0.3s ease;
  border: 1px solid rgba(79, 186, 241, 0.2);
}

.social-icon-ultra:hover {
  background: var(--primary);
  color: var(--bg-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(79, 186, 241, 0.3);
}

.social-icon-ultra svg {
  width: 18px;
  height: 18px;
}

.footer-grid-ultra {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-3xl);
}

.footer-brand-ultra .logo {
  margin-bottom: var(--spacing-lg);
}

.footer-tagline {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.footer-stats {
  font-size: 0.875rem;
  color: var(--primary);
  font-weight: 500;
}

.footer-links-ultra h4,
.footer-links-ultra .footer-heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.footer-email {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--primary);
  opacity: 0.9;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.footer-email:hover {
  opacity: 1;
}

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

.footer-links-ultra li {
  margin-bottom: var(--spacing-sm);
}

.footer-links-ultra a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.3s ease;
}

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

.footer-links-ultra a[href^="mailto:"] {
  white-space: nowrap;
}

/* Footer Telemetry Compact */
.footer-telemetry {
  padding: var(--spacing-md) 0;
  margin-top: var(--spacing-lg);
  border-top: 1px solid rgba(79, 186, 241, 0.1);
}

.telemetry-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md) var(--spacing-xl);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.telemetry-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
  color: var(--accent);
  font-weight: 600;
}

.telemetry-badge .pulse-dot {
  width: 6px;
  height: 6px;
  background: #10B981;
  border-radius: 50%;
  animation: pulse-telemetry 2s ease-in-out infinite;
}

@keyframes pulse-telemetry {

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

  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.telemetry-metric {
  color: rgba(255, 255, 255, 0.6);
}

.telemetry-metric strong {
  color: var(--primary);
  font-weight: 600;
}

.footer-bottom-ultra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-xl);
  border-top: 1px solid rgba(79, 186, 241, 0.1);
}

.footer-bottom-ultra p {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.footer-tech {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  /* WCAG AA contrast fix */
}

.tech-badge {
  background: rgba(79, 186, 241, 0.1);
  color: var(--primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE - LAPTOP (1200px) - FORENSIC FIX

   DIMENSIONS:
   - Container: 450x450px (35px margin for icon overflow)
   - Orbital: 380px
   - Ring-1: 380px, icons 50x50 (overflow 25px) ✓
   - Ring-2: 266px, icons 50x50 (overflow 25px) ✓
   - Ring-3: 171px, icons 42x42 (overflow 21px) ✓
   - Center: 90px
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .hero-visual {
    height: 450px;
    max-width: 450px;
  }

  .tech-orbital {
    width: 380px;
    height: 380px;
    margin: 35px auto;
  }

  .orbital-center {
    width: 90px;
    height: 90px;
  }

  .orbital-center .center-text {
    font-size: 1.4rem;
  }

  /* Ring-1 at 1200px - slightly smaller */
  .ring-1 .tech-icon {
    width: 50px;
    height: 50px;
  }

  .ring-1 .tech-icon:nth-child(1) {
    top: -25px;
  }

  .ring-1 .tech-icon:nth-child(3) {
    right: -25px;
  }

  .ring-1 .tech-icon:nth-child(5) {
    bottom: -25px;
  }

  .ring-1 .tech-icon:nth-child(7) {
    left: -25px;
  }

  /* Ring-2 at 1200px */
  .ring-2 .tech-icon {
    width: 48px;
    height: 48px;
  }

  .ring-2 .tech-icon:nth-child(1) {
    top: -24px;
  }

  .ring-2 .tech-icon:nth-child(3) {
    right: -24px;
  }

  .ring-2 .tech-icon:nth-child(5) {
    bottom: -24px;
  }

  .ring-2 .tech-icon:nth-child(7) {
    left: -24px;
  }

  /* Ring-3 at 1200px */
  .ring-3 .tech-icon {
    width: 42px;
    height: 42px;
  }

  .ring-3 .tech-icon span {
    font-size: 0.6rem;
  }

  .ring-3 .tech-icon:nth-child(1) {
    top: -21px;
  }

  .ring-3 .tech-icon:nth-child(3) {
    right: -21px;
  }

  .ring-3 .tech-icon:nth-child(5) {
    bottom: -21px;
  }

  .ring-3 .tech-icon:nth-child(7) {
    left: -21px;
  }

  /* ─── DIAGONAL ICONS FIX @1200px ───
     Push diagonals toward corners to prevent overlap with cardinals
     At 171px ring with 42px icons, 5%/-5% positions cause overlap */
  .ring-3 .tech-icon:nth-child(2) {
    top: 8%;
    right: 0%;
  }

  /* Leonardo - top-right */
  .ring-3 .tech-icon:nth-child(4) {
    bottom: 8%;
    right: 0%;
  }

  /* Playwright - bottom-right */
  .ring-3 .tech-icon:nth-child(6) {
    bottom: 8%;
    left: 0%;
  }

  /* WordPress - bottom-left */
  .ring-3 .tech-icon:nth-child(8) {
    top: 8%;
    left: 0%;
  }

  /* Apps Script - top-left */
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE - TABLET (1024px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-ultra .container {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-ultra,
  .mcp-explainer,
  .footer-ultra {
    overflow-x: hidden;
  }

  .hero-ultra-content {
    max-width: 600px;
    margin: 0 auto;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-stats-ultra {
    justify-content: center;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     ORBITAL TABLET (1024px) - FORENSIC FIX

     DIMENSIONS:
     - Container: 390x390px (margin 25px each side for 48px icons)
     - Orbital: 340px
     - Ring-1: 340px, icons 48x48 (overflow 24px) - margin 25px OK
     - Ring-2: 238px, icons 44x44 (overflow 22px)
     - Ring-3: 153px, icons 38x38 (overflow 19px)
     - Center: 80px
     ═══════════════════════════════════════════════════════════════════════════ */
  .hero-visual {
    display: flex;
    width: 100%;
    height: 390px;
    max-width: 390px;
    margin: 20px auto var(--spacing-lg);
    order: -1;
  }

  .tech-orbital {
    width: 340px;
    height: 340px;
    margin: 25px auto;
  }

  .orbital-center {
    width: 80px;
    height: 80px;
  }

  .orbital-center .center-text {
    font-size: 1.4rem;
  }

  /* ─── RING 1 at 1024px ─── */
  .ring-1 .tech-icon {
    width: 48px;
    height: 48px;
  }

  .ring-1 .tech-icon span {
    font-size: 0.7rem;
  }

  .ring-1 .tech-icon:nth-child(1) {
    top: -24px;
  }

  .ring-1 .tech-icon:nth-child(3) {
    right: -24px;
  }

  .ring-1 .tech-icon:nth-child(5) {
    bottom: -24px;
  }

  .ring-1 .tech-icon:nth-child(7) {
    left: -24px;
  }

  /* ─── RING 2 at 1024px ─── */
  .ring-2 .tech-icon {
    width: 44px;
    height: 44px;
  }

  .ring-2 .tech-icon span {
    font-size: 0.65rem;
  }

  .ring-2 .tech-icon:nth-child(1) {
    top: -22px;
  }

  .ring-2 .tech-icon:nth-child(3) {
    right: -22px;
  }

  .ring-2 .tech-icon:nth-child(5) {
    bottom: -22px;
  }

  .ring-2 .tech-icon:nth-child(7) {
    left: -22px;
  }

  /* ─── RING 3 at 1024px ─── */
  .ring-3 .tech-icon {
    width: 38px;
    height: 38px;
  }

  .ring-3 .tech-icon span {
    font-size: 0.55rem;
  }

  .ring-3 .tech-icon:nth-child(1) {
    top: -19px;
  }

  .ring-3 .tech-icon:nth-child(3) {
    right: -19px;
  }

  .ring-3 .tech-icon:nth-child(5) {
    bottom: -19px;
  }

  .ring-3 .tech-icon:nth-child(7) {
    left: -19px;
  }

  /* ─── DIAGONAL ICONS FIX @1024px ───
     At 153px ring with 38px icons, need more corner offset */
  .ring-3 .tech-icon:nth-child(2) {
    top: 10%;
    right: 2%;
  }

  /* Leonardo - top-right */
  .ring-3 .tech-icon:nth-child(4) {
    bottom: 10%;
    right: 2%;
  }

  /* Playwright - bottom-right */
  .ring-3 .tech-icon:nth-child(6) {
    bottom: 10%;
    left: 2%;
  }

  /* WordPress - bottom-left */
  .ring-3 .tech-icon:nth-child(8) {
    top: 10%;
    left: 2%;
  }

  /* Apps Script - top-left */

  .services-grid-ultra {
    grid-template-columns: 1fr 1fr;
  }

  .card-featured {
    grid-column: span 2;
  }

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

  .flywheel-wheel {
    width: 400px;
    height: 400px;
  }

  .footer-grid-ultra {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }

  .footer-brand-ultra {
    grid-column: span 3;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE - MOBILE
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tech-icon {
    min-width: 48px;
    min-height: 48px;
  }

  .tech-icon span {
    font-size: 0.85rem;
  }

  .ring-3 {
    display: none;
  }

  .ring-1 {
    animation-duration: 45s;
  }

  .ring-2 {
    animation-duration: 35s;
  }

  /* Navigation Mobile */
  .nav {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: rgba(25, 30, 53, 0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: var(--spacing-xl);
    gap: var(--spacing-lg);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(79, 186, 241, 0.1);
  }

  .nav.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-toggle {
    display: block;
  }

  .nav-toggle.active .hamburger {
    background: transparent;
  }

  .nav-toggle.active .hamburger::before {
    transform: rotate(45deg);
    top: 0;
  }

  .nav-toggle.active .hamburger::after {
    transform: rotate(-45deg);
    bottom: 0;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     HERO MOBILE - OPTIMIZED UX
     ═══════════════════════════════════════════════════════════════════════════ */
  .hero-ultra {
    padding: 100px 0 40px;
    min-height: unset;
  }

  .hero-ultra .container {
    padding: 0 var(--spacing-md);
  }

  /* Hero Tag - Compact on mobile */
  .hero-tag {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.75rem;
    margin-bottom: var(--spacing-lg);
  }

  .tag-dot {
    width: 6px;
    height: 6px;
  }

  /* Hero Title - Impactful on mobile */
  .title-line {
    font-size: 2rem;
    line-height: 1.15;
  }

  .title-line.gradient-text {
    font-size: 2.25rem;
  }

  .hero-title {
    margin-bottom: var(--spacing-lg);
  }

  /* Hero Description - Readable on mobile */
  .hero-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
  }

  .hero-description br {
    display: none;
    /* Remove line breaks on mobile */
  }

  .hero-scroll-indicator {
    display: none;
  }

  /* Hero Actions - Full width buttons */
  .hero-actions {
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
  }

  .btn-cyber {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
  }

  .btn-primary-cyber {
    font-size: 1rem;
  }

  .btn-secondary-cyber {
    font-size: 0.9rem;
  }

  /* Hero Stats - 2x2 Grid on mobile */
  .hero-stats-ultra {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(25, 30, 53, 0.5);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(79, 186, 241, 0.1);
  }

  .stat-ultra {
    text-align: center;
    padding: var(--spacing-sm);
  }

  .stat-number-ultra {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
  }

  .stat-label-ultra {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .stat-divider {
    display: none;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     ORBITAL MOBILE (768px) - FORENSIC FIX

     DIMENSIONS:
     - Container: 350x350px (margin 25px each side for 44px icons)
     - Orbital: 300px
     - Ring-1: 300px, icons 44x44 (overflow 22px) - margin 25px OK
     - Ring-2: 210px, icons 40x40 (overflow 20px)
     - Ring-3: 135px, icons 32x32 (overflow 16px)
     - Center: 65px

     CRITICAL: Icons must remain visible - no clipping!
     ═══════════════════════════════════════════════════════════════════════════ */
  .hero-visual {
    height: 350px;
    max-width: 350px;
    margin-top: 0;
    position: relative;
  }

  .tech-orbital {
    width: 300px;
    height: 300px;
    margin: 25px auto;
  }

  /* ─── RING 1: Outer ring (300px) ─── */
  .ring-1 .tech-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
  }

  .ring-1 .tech-icon span {
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.1;
  }

  /* Ring 1 positions - scaled for 44px icons (offset = 22px) */
  .ring-1 .tech-icon:nth-child(1) {
    top: -22px;
  }

  .ring-1 .tech-icon:nth-child(3) {
    right: -22px;
  }

  .ring-1 .tech-icon:nth-child(5) {
    bottom: -22px;
  }

  .ring-1 .tech-icon:nth-child(7) {
    left: -22px;
  }

  /* ─── RING 2: Middle ring (210px) ─── */
  .ring-2 .tech-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 4px;
  }

  .ring-2 .tech-icon span {
    font-size: 0.6rem;
    font-weight: 600;
  }

  /* Ring 2 positions - scaled for 40px icons (offset = 20px) */
  .ring-2 .tech-icon:nth-child(1) {
    top: -20px;
  }

  .ring-2 .tech-icon:nth-child(3) {
    right: -20px;
  }

  .ring-2 .tech-icon:nth-child(5) {
    bottom: -20px;
  }

  .ring-2 .tech-icon:nth-child(7) {
    left: -20px;
  }

  /* ─── RING 3: Inner ring (135px) ─── */
  .ring-3 {
    display: block;
    opacity: 0.9;
  }

  .ring-3 .tech-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 2px;
  }

  .ring-3 .tech-icon span {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
  }

  /* Ring 3 positions - scaled for 32px icons (offset = 16px) */
  .ring-3 .tech-icon:nth-child(1) {
    top: -16px;
  }

  .ring-3 .tech-icon:nth-child(3) {
    right: -16px;
  }

  .ring-3 .tech-icon:nth-child(5) {
    bottom: -16px;
  }

  .ring-3 .tech-icon:nth-child(7) {
    left: -16px;
  }

  /* ─── DIAGONAL ICONS FIX @768px ───
     Ring ~135px, Icons 32px - need corner positioning */
  .ring-3 .tech-icon:nth-child(2) {
    top: 12%;
    right: 5%;
  }

  .ring-3 .tech-icon:nth-child(4) {
    bottom: 12%;
    right: 5%;
  }

  .ring-3 .tech-icon:nth-child(6) {
    bottom: 12%;
    left: 5%;
  }

  .ring-3 .tech-icon:nth-child(8) {
    top: 12%;
    left: 5%;
  }

  /* ─── CENTER ─── */
  .orbital-center {
    width: 65px;
    height: 65px;
  }

  .orbital-center .center-text {
    font-size: 1.25rem;
  }

  /* ─── ANIMATIONS: Slow and synchronized ─── */
  .ring-1 {
    animation-duration: 50s;
  }

  .ring-2 {
    animation-duration: 40s;
  }

  .ring-3 {
    animation-duration: 30s;
    /* Was 15s - too fast! */
  }

  /* Counter-rotation must match ring duration exactly */
  .ring-1 .tech-icon {
    animation-duration: 50s;
  }

  .ring-2 .tech-icon {
    animation-duration: 40s;
  }

  .ring-3 .tech-icon {
    animation-duration: 30s;
    /* Sync with ring-3 */
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SERVICES SECTION MOBILE
     ═══════════════════════════════════════════════════════════════════════════ */
  .services-grid-ultra {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .card-featured {
    grid-column: span 1;
  }

  .service-card-ultra {
    padding: var(--spacing-lg);
  }

  .card-icon-ultra {
    width: 48px;
    height: 48px;
  }

  .card-title-ultra {
    font-size: 1.1rem;
  }

  .card-description-ultra {
    font-size: 0.9rem;
  }

  /* Section Headers Mobile */
  .section-header h2,
  .section-title {
    font-size: 1.75rem;
  }

  .section-header p,
  .section-subtitle {
    font-size: 0.95rem;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     MOBILE CENTERING FIX - All containers centered
     FORENSIC: HTML uses .hero-ultra-content, not .hero-content
     ═══════════════════════════════════════════════════════════════════════════ */
  .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto;
  }

  /* Hero centering - CORRECT selector */
  .hero-ultra-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
  }

  .hero-title,
  .hero-description,
  .hero-tag {
    text-align: center;
    width: 100%;
  }

  .hero-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-stats-ultra {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Section headers centering */
  .section-header {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* All sections text-align center */
  .services-ultra,
  .flywheel-section,
  .process-ultra,
  .tech-stack-section,
  .cta-ultra {
    text-align: center;
  }

  /* Section containers - flex column centered */
  .services-ultra .container,
  .flywheel-section .container,
  .process-ultra .container,
  .cta-ultra .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Grids full width, items centered */
  .services-grid-ultra {
    width: 100%;
    justify-items: center;
  }

  .tech-grid {
    width: 100%;
    justify-items: center;
  }

  /* Flywheel centered */
  .flywheel-wheel {
    margin: 0 auto;
  }

  /* Process timeline full width */
  .process-timeline {
    width: 100%;
    max-width: 100%;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     CTA "READY TO SCALE" MOBILE - Centered + Form Expanded
     ═══════════════════════════════════════════════════════════════════════════ */
  .cta-ultra {
    padding: var(--spacing-2xl) 0;
  }

  .cta-ultra .container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--spacing-sm);
  }

  .cta-card-ultra {
    width: 100%;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: var(--spacing-lg);
    margin: 0 auto;
  }

  .cta-content-ultra {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
  }

  .cta-title {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
  }

  .cta-desc {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-lg);
  }

  /* Form expanded to fill container */
  .form-ultra {
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-lg);
    box-sizing: border-box;
  }

  .form-grid {
    width: 100%;
  }

  .form-field {
    width: 100%;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    width: 100%;
    box-sizing: border-box;
  }

  .btn-submit {
    width: 100%;
    justify-content: center;
  }

  .cta-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Tech Grid Mobile */
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .tech-item {
    padding: var(--spacing-sm);
    font-size: 0.75rem;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     FLYWHEEL SECTION MOBILE - +10% enlarged
     Wheel 350px with stage 82px
     ═══════════════════════════════════════════════════════════════════════════ */
  .flywheel-section {
    padding: var(--spacing-2xl) 0;
  }

  .flywheel-wheel {
    width: 350px;
    height: 350px;
    margin: 0 auto;
  }

  .flywheel-stage {
    width: 82px;
    padding: var(--spacing-xs);
  }

  .stage-icon {
    width: 35px;
    height: 35px;
    margin-bottom: var(--spacing-xs);
  }

  .stage-icon svg {
    width: 18px;
    height: 18px;
  }

  .stage-label {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .stage-count {
    font-size: 0.6rem;
    margin-top: 2px;
  }

  .flywheel-arrows {
    width: 285px;
    height: 285px;
  }

  .flywheel-center-hub {
    width: 77px;
    height: 77px;
  }

  .hub-label {
    font-size: 0.66rem;
  }

  .hub-text {
    font-size: 1.1rem;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     PROCESS TIMELINE MOBILE (-20% reduced)
     ═══════════════════════════════════════════════════════════════════════════ */
  .process-timeline {
    padding-left: var(--spacing-sm);
  }

  .timeline-line {
    left: calc(var(--spacing-sm) + 20px);
    top: 20px;
    bottom: 20px;
  }

  .step-marker {
    width: 40px;
    height: 40px;
  }

  .step-num {
    font-size: 0.8rem;
  }

  .step-content h3 {
    font-size: 0.85rem;
  }

  .step-content p {
    font-size: 0.7rem;
    line-height: 1.4;
  }

  .step-content-ultra {
    padding: var(--spacing-sm);
  }

  .step-content-ultra h3 {
    font-size: 0.85rem;
    margin-bottom: var(--spacing-xs);
  }

  .step-content-ultra p {
    font-size: 0.7rem;
    line-height: 1.4;
  }

  .process-step-ultra {
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     FORMS MOBILE
     ═══════════════════════════════════════════════════════════════════════════ */
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-field.full-width {
    grid-column: span 1;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px;
    /* Prevents iOS zoom */
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     CTA SECTION MOBILE
     ═══════════════════════════════════════════════════════════════════════════ */
  .cta-content {
    padding: var(--spacing-xl);
  }

  .cta-content h2 {
    font-size: 1.5rem;
  }

  .cta-content p {
    font-size: 0.95rem;
  }

  .cta-actions {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .cta-actions .btn-cyber {
    width: 100%;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     FOOTER MOBILE - Definitive Centering Fix (v5)
     ═══════════════════════════════════════════════════════════════════════════ */
  .footer-ultra {
    padding: var(--spacing-2xl) 0;
  }

  .footer-status-bar {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-2xl);
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    display: flex;
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(25, 30, 53, 0.6);
    border: 1px solid rgba(79, 186, 241, 0.15);
    border-radius: var(--radius-lg);
  }

  .footer-grid-ultra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    width: 100%;
    margin-bottom: var(--spacing-2xl);
  }

  .footer-brand-ultra {
    text-align: left;
    grid-column: span 2;
  }

  .footer-links-ultra {
    text-align: left;
  }


  .footer-bottom-ultra {
    width: 100%;
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
    display: flex;
    align-items: center;
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(79, 186, 241, 0.1);
  }

  .footer-tech {
    justify-content: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .section-title-ultra {
    font-size: 2rem;
  }

  .cta-title {
    font-size: 1.5rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE - SMALL MOBILE
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .tech-orbital {
    width: 260px;
    height: 260px;
  }

  .hero-visual {
    max-width: 260px;
  }

  .title-line {
    font-size: 1.75rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  .stat-number-ultra {
    font-size: 2rem;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     ORBITAL SMALL MOBILE (480px) - FORENSIC FIX

     DIMENSIONS:
     - Container: 290x290px (fits 320px viewport with padding)
     - Orbital: 250px
     - Ring-1: 250px, icons 38x38 (overflow 19px)
     - Ring-2: 175px, icons 34x34 (overflow 17px)
     - Ring-3: 112px, icons 28x28 (overflow 14px)
     - Center: 55px

     CRITICAL: NO overflow:hidden!
     ═══════════════════════════════════════════════════════════════════════════ */
  .hero-visual {
    height: 290px;
    max-width: 290px;
    margin-top: 0;
  }

  .tech-orbital {
    width: 250px;
    height: 250px;
    margin: 20px auto;
  }

  /* ─── RING 1 at 480px ─── */
  .ring-1 .tech-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 3px;
  }

  .ring-1 .tech-icon span {
    font-size: 0.7rem;
  }

  .ring-1 .tech-icon:nth-child(1) {
    top: -19px;
  }

  .ring-1 .tech-icon:nth-child(3) {
    right: -19px;
  }

  .ring-1 .tech-icon:nth-child(5) {
    bottom: -19px;
  }

  .ring-1 .tech-icon:nth-child(7) {
    left: -19px;
  }

  /* ─── RING 2 at 480px ─── */
  .ring-2 .tech-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 3px;
  }

  .ring-2 .tech-icon span {
    font-size: 0.65rem;
  }

  .ring-2 .tech-icon:nth-child(1) {
    top: -17px;
  }

  .ring-2 .tech-icon:nth-child(3) {
    right: -17px;
  }

  .ring-2 .tech-icon:nth-child(5) {
    bottom: -17px;
  }

  .ring-2 .tech-icon:nth-child(7) {
    left: -17px;
  }

  /* ─── RING 3 at 480px ─── */
  .ring-3 {
    opacity: 0.8;
  }

  .ring-3 .tech-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 2px;
  }

  .ring-3 .tech-icon span {
    font-size: 0.4rem;
  }

  .ring-3 .tech-icon:nth-child(1) {
    top: -14px;
  }

  .ring-3 .tech-icon:nth-child(3) {
    right: -14px;
  }

  .ring-3 .tech-icon:nth-child(5) {
    bottom: -14px;
  }

  .ring-3 .tech-icon:nth-child(7) {
    left: -14px;
  }

  /* ─── DIAGONAL ICONS FIX @480px ───
     Ring ~112px, Icons 28px - need corner positioning */
  .ring-3 .tech-icon:nth-child(2) {
    top: 15%;
    right: 8%;
  }

  .ring-3 .tech-icon:nth-child(4) {
    bottom: 15%;
    right: 8%;
  }

  .ring-3 .tech-icon:nth-child(6) {
    bottom: 15%;
    left: 8%;
  }

  .ring-3 .tech-icon:nth-child(8) {
    top: 15%;
    left: 8%;
  }

  /* ─── CENTER at 480px ─── */
  .orbital-center {
    width: 55px;
    height: 55px;
  }

  .orbital-center .center-text {
    font-size: 1rem;
  }

  .flywheel-section {
    padding: var(--spacing-xl) 0;
  }

  .flywheel-wheel {
    width: 260px;
    height: 260px;
  }

  .flywheel-stage {
    width: 65px;
    padding: 4px;
  }

  .stage-icon {
    width: 26px;
    height: 26px;
  }

  .stage-icon svg {
    width: 14px;
    height: 14px;
  }

  .stage-label {
    font-size: 0.7rem;
  }

  .stage-count {
    display: none;
    /* Hide on very small screens */
  }

  .flywheel-arrows {
    width: 210px;
    height: 210px;
  }

  .flywheel-center-hub {
    width: 55px;
    height: 55px;
  }

  .hub-text {
    font-size: 0.8rem;
  }

  .hub-label {
    font-size: 0.65rem;
  }

  .section-title-ultra {
    font-size: 1.75rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ULTRA PREMIUM EFFECTS - COMPETITION WINNING
   ───────────────────────────────────────────────────────────────────────────── */

/* Holographic Card Effect */
.holographic {
  position: relative;
  background: linear-gradient(135deg,
      rgba(79, 186, 241, 0.1) 0%,
      rgba(139, 92, 246, 0.05) 50%,
      rgba(16, 185, 129, 0.1) 100%);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.holographic::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
      rgba(79, 186, 241, 0.5),
      rgba(139, 92, 246, 0.3),
      rgba(16, 185, 129, 0.5),
      rgba(79, 186, 241, 0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: holoBorder 4s linear infinite;
  animation-play-state: var(--anim-state);
  background-size: 300% 300%;
}

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

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Animated Gradient Border */
.gradient-border {
  position: relative;
  isolation: isolate;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle, 0deg),
      var(--primary),
      var(--accent-purple),
      var(--accent),
      var(--primary));
  z-index: -1;
  animation: rotateBorder 3s linear infinite;
  animation-play-state: var(--anim-state);
}

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

@keyframes rotateBorder {
  to {
    --angle: 360deg;
  }
}

/* Neon Glow Text */
.neon-text {
  text-shadow:
    0 0 10px var(--primary),
    0 0 20px var(--primary),
    0 0 40px var(--primary),
    0 0 80px var(--primary-dark);
  animation: neonPulse 2s ease-in-out infinite alternate;
  animation-play-state: var(--anim-state);
}

@keyframes neonPulse {
  from {
    text-shadow:
      0 0 10px var(--primary),
      0 0 20px var(--primary),
      0 0 40px var(--primary);
  }

  to {
    text-shadow:
      0 0 20px var(--primary),
      0 0 40px var(--primary),
      0 0 80px var(--primary),
      0 0 120px var(--primary-dark);
  }
}

/* 3D Card Transform */
.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card-3d:hover {
  transform: rotateY(5deg) rotateX(2deg) translateZ(20px);
}

/* Floating Animation for Elements */
.float-animation {
  animation: floatUpDown 6s ease-in-out infinite;
  animation-play-state: var(--anim-state);
}

@keyframes floatUpDown {

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

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

/* Data Stream Background Effect */
.data-stream {
  position: absolute;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,
      transparent 0%,
      var(--primary) 50%,
      transparent 100%);
  opacity: 0.3;
  animation: dataFlow 3s linear infinite;
  animation-play-state: var(--anim-state);
}

@keyframes dataFlow {
  0% {
    transform: translateY(-100%);
  }

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

/* Scanline Effect */
.scanline::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
      transparent,
      rgba(79, 186, 241, 0.3),
      transparent);
  animation: scanDown 8s linear infinite;
  animation-play-state: var(--anim-state);
}

@keyframes scanDown {
  0% {
    top: 0;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Glitch Effect */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.glitch::before {
  animation: glitch-1 0.3s infinite linear alternate-reverse;
  animation-play-state: var(--anim-state);
  color: var(--primary);
  z-index: -1;
}

.glitch::after {
  animation: glitch-2 0.3s infinite linear alternate-reverse;
  animation-play-state: var(--anim-state);
  color: var(--accent);
  z-index: -2;
}

@keyframes glitch-1 {
  0% {
    clip-path: inset(40% 0 61% 0);
    transform: translate(-2px, 2px);
  }

  20% {
    clip-path: inset(92% 0 1% 0);
    transform: translate(2px, -2px);
  }

  40% {
    clip-path: inset(43% 0 1% 0);
    transform: translate(-2px, 2px);
  }

  60% {
    clip-path: inset(25% 0 58% 0);
    transform: translate(2px, -2px);
  }

  80% {
    clip-path: inset(54% 0 7% 0);
    transform: translate(-2px, 2px);
  }

  100% {
    clip-path: inset(58% 0 43% 0);
    transform: translate(2px, -2px);
  }
}

@keyframes glitch-2 {
  0% {
    clip-path: inset(65% 0 15% 0);
    transform: translate(2px, -2px);
  }

  20% {
    clip-path: inset(10% 0 85% 0);
    transform: translate(-2px, 2px);
  }

  40% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(2px, -2px);
  }

  60% {
    clip-path: inset(70% 0 10% 0);
    transform: translate(-2px, 2px);
  }

  80% {
    clip-path: inset(30% 0 50% 0);
    transform: translate(2px, -2px);
  }

  100% {
    clip-path: inset(5% 0 90% 0);
    transform: translate(-2px, 2px);
  }
}

/* Typing Cursor */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  animation-play-state: var(--anim-state);
  color: var(--primary);
  font-weight: 300;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Number Counter Animation */
.counter-animated {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* Glass Panel */
.glass-panel {
  background: rgba(25, 30, 53, 0.4);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid rgba(79, 186, 241, 0.15);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 0 80px rgba(79, 186, 241, 0.03);
}

/* Morphing Background Blob */
.morph-blob {
  position: absolute;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  filter: blur(50px);
  /* Reduced for performance */
  animation: morphBlob 20s ease-in-out infinite;
  /* Slower for less CPU */
  animation-play-state: var(--anim-state);
  will-change: border-radius;
  contain: layout style;
}

/* Hide morph-blobs on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .morph-blob {
    display: none;
  }
}

@keyframes morphBlob {

  0%,
  100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }

  25% {
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
  }

  50% {
    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
  }

  75% {
    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
  }
}

/* Shimmer Loading Effect */
.shimmer {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(79, 186, 241, 0.1) 50%,
      transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  animation-play-state: var(--anim-state);
}

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

  100% {
    background-position: 200% 0;
  }
}

/* Enhanced Hero Title - Animation with guaranteed visibility */
.title-line {
  display: block;
  font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-light);
  opacity: 1;
  /* Visible by default - animation enhances, not required */
  transform: translateY(0);
  animation: titleReveal 0.8s ease both;
}

.title-line:nth-child(2) {
  animation-delay: 0.2s;
}

@keyframes titleReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

/* Gradient Text Enhanced - High contrast for dark backgrounds */
.gradient-text {
  background: linear-gradient(135deg,
      #5EC8F7 0%,
      /* Brighter cyan for better contrast */
      #A78BFA 50%,
      /* Brighter violet */
      #34D399 100%
      /* Brighter emerald */
    );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  /* Fallback for older browsers */
  animation: gradientShift 5s ease infinite;
  animation-play-state: var(--anim-state);
}

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

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Enhanced Button Hover */
.btn-cyber::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 255, 255, 0.15) 0%,
      transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-cyber:hover::before {
  opacity: 1;
}

/* Pulsing Ring Effect */
.pulse-ring {
  position: absolute;
  border: 2px solid var(--primary);
  border-radius: 50%;
  animation: pulseOut 2s ease-out infinite;
  animation-play-state: var(--anim-state);
}

@keyframes pulseOut {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Matrix Rain Effect (optional - add via JS) */
.matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.05;
}

.matrix-column {
  position: absolute;
  top: -100%;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--primary);
  writing-mode: vertical-lr;
  animation: matrixFall 20s linear infinite;
  animation-play-state: var(--anim-state);
}

@keyframes matrixFall {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(300vh);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ANIMATIONS & UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll-triggered animations */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children */
[data-animate-stagger]>* {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-animate-stagger].animated>*:nth-child(1) {
  transition-delay: 0.1s;
}

[data-animate-stagger].animated>*:nth-child(2) {
  transition-delay: 0.2s;
}

[data-animate-stagger].animated>*:nth-child(3) {
  transition-delay: 0.3s;
}

[data-animate-stagger].animated>*:nth-child(4) {
  transition-delay: 0.4s;
}

[data-animate-stagger].animated>* {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SERVICE PAGES - Preserved styles
   ───────────────────────────────────────────────────────────────────────────── */
/* NOTE: .breadcrumb is defined in Academy section (line ~10637) with enhanced styling */

/* Service Hero */
.service-hero {
  padding: 140px 0 60px;
  background: var(--gradient-bg-dark);
}

.service-hero .badge {
  display: inline-block;
  background: rgba(79, 186, 241, 0.2);
  color: var(--primary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-lg);
  border: 1px solid rgba(79, 186, 241, 0.3);
}

.service-hero h1 {
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--spacing-lg);
}

.service-hero h1 .highlight {
  color: var(--primary);
}

.service-hero .hero-sub {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: var(--spacing-xl);
}

.service-hero .hero-cta {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* Service Blocks */
.services-detail {
  padding: var(--spacing-4xl) 0;
  background: var(--secondary);
}

.service-block {
  margin-bottom: var(--spacing-4xl);
  padding-bottom: var(--spacing-4xl);
  border-bottom: 1px solid rgba(79, 186, 241, 0.1);
}

.service-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.service-block-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.service-icon-large {
  width: 80px;
  height: 80px;
  background: rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.service-icon-large.email {
  background: rgba(16, 185, 129, 0.1);
  color: var(--accent);
}

.service-icon-large.dropship {
  background: rgba(139, 92, 246, 0.1);
  color: var(--accent-purple);
}

.service-icon-large.google {
  background: rgba(245, 158, 11, 0.1);
  color: var(--accent-orange);
}

.service-block-header h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.service-block-header p {
  color: var(--text-secondary);
}

/* NOTE: .features-grid, .feature-card, .feature-list defined in Academie section (~line 11673) */

/* Email Flow Cards */
.flows-showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
}

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

.flow-card {
  background: rgba(25, 30, 53, 0.6);
  border: 1px solid rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  transition: all 0.3s ease;
}

.flow-card:hover {
  border-color: rgba(79, 186, 241, 0.3);
}

.flow-card.featured {
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.1) 0%, rgba(25, 30, 53, 0.8) 100%);
  border-color: rgba(79, 186, 241, 0.3);
}

.flow-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.flow-badge {
  background: rgba(79, 186, 241, 0.2);
  color: var(--primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.flow-badge.roi {
  background: rgba(16, 185, 129, 0.2);
  color: var(--accent);
}

.flow-header h3 {
  width: 100%;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-light);
  margin-top: var(--spacing-sm);
}

.flow-timeline {
  margin-bottom: var(--spacing-lg);
}

.flow-step {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(79, 186, 241, 0.05);
}

.flow-step:last-child {
  border-bottom: none;
}

.flow-step .day {
  width: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  font-family: var(--font-mono);
}

.flow-step .action {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.flow-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(79, 186, 241, 0.1);
}

.flow-kpis span {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.2);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}

/* CTA Section for Service Pages */
.cta {
  padding: var(--spacing-4xl) 0;
  background: linear-gradient(135deg, var(--bg-navy) 0%, var(--secondary) 100%);
}

.cta-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.cta h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
}

.cta p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
}

/* Footer for Service Pages */
.footer {
  padding: var(--spacing-3xl) 0 var(--spacing-xl);
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(79, 186, 241, 0.1);
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--spacing-3xl);
  margin-bottom: var(--spacing-2xl);
}

.footer-brand p {
  color: var(--text-secondary);
  margin-top: var(--spacing-md);
}

.footer-links h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-lg);
}

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

.footer-links li {
  margin-bottom: var(--spacing-sm);
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.3s ease;
}

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

.footer-bottom {
  text-align: center;
  padding-top: var(--spacing-xl);
  border-top: 1px solid rgba(79, 186, 241, 0.1);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* Buttons for Service Pages */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--gradient-cyber);
  color: var(--secondary);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid rgba(79, 186, 241, 0.3);
}

.btn-secondary:hover {
  background: rgba(79, 186, 241, 0.1);
  border-color: var(--primary);
}

.btn-large {
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-size: 1.125rem;
}

@media (max-width: 768px) {
  .service-hero h1 {
    font-size: 2rem;
  }

  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
  }

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

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

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

/* ─────────────────────────────────────────────────────────────────────────────
   COOKIE CONSENT BANNER - RGPD
   ───────────────────────────────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: rgba(25, 30, 53, 0.98);
  border-top: 1px solid rgba(79, 186, 241, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: var(--spacing-lg) var(--spacing-xl);
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

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

.cookie-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
}

.cookie-text p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

.cookie-text a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.cookie-text a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-shrink: 0;
}

.cookie-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: inherit;
}

.cookie-btn-primary {
  background: var(--gradient-cyber);
  color: var(--secondary);
}

.cookie-btn-primary:hover {
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.cookie-btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid rgba(79, 186, 241, 0.3);
}

.cookie-btn-secondary:hover {
  background: rgba(79, 186, 241, 0.1);
  color: var(--text-light);
}

@media (max-width: 768px) {
  .cookie-banner {
    padding: var(--spacing-md);
  }

  .cookie-content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-lg);
  }

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

  .cookie-btn {
    flex: 1;
    max-width: 160px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LEGAL PAGES (Privacy, Terms)
   ───────────────────────────────────────────────────────────────────────────── */
.legal-page {
  padding: calc(100px + var(--spacing-3xl)) 0 var(--spacing-4xl);
  min-height: 100vh;
}

.legal-content {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(25, 30, 53, 0.6);
  border: 1px solid rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--spacing-3xl);
}

.legal-content h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.legal-updated {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: var(--spacing-3xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid rgba(79, 186, 241, 0.1);
}

.legal-section {
  margin-bottom: var(--spacing-2xl);
}

.legal-section h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--spacing-md);
}

.legal-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.legal-section p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--spacing-md);
}

.legal-section ul {
  list-style: none;
  margin: var(--spacing-md) 0;
}

.legal-section li {
  position: relative;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.legal-section li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary);
}

.legal-section a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal-section a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.legal-section strong {
  color: var(--text-light);
  font-weight: 600;
}

@media (max-width: 768px) {
  .legal-content {
    padding: var(--spacing-xl);
    margin: 0 var(--spacing-md);
  }

  .legal-content h1 {
    font-size: 1.5rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   AUDIT PAGE STYLES
   ───────────────────────────────────────────────────────────────────────────── */
.audit-hero {
  padding: calc(100px + var(--spacing-3xl)) 0 var(--spacing-4xl);
  position: relative;
}

.audit-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4xl);
  align-items: start;
}

.audit-hero-text {
  padding-right: var(--spacing-xl);
}

.audit-hero-text h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--spacing-lg);
}

.audit-hero-text .hero-sub {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--spacing-2xl);
}

.badge-accent {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--accent);
}

.audit-includes {
  background: rgba(79, 186, 241, 0.05);
  border: 1px solid rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
}

.audit-includes h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-lg);
}

.check-list {
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
  line-height: 1.5;
}

.check-list li svg {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}

.check-list li strong {
  color: var(--text-light);
}

/* Form Card */
.audit-hero-form {
  position: sticky;
  top: 120px;
}

.form-card-ultra {
  background: rgba(25, 30, 53, 0.8);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.form-card-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.form-card-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.form-card-header p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.btn-full {
  width: 100%;
}

.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.form-note svg {
  flex-shrink: 0;
  color: var(--accent);
}

/* Process Section - AUDIT PAGE ONLY */
.audit-process {
  padding: var(--spacing-4xl) 0;
  background: rgba(0, 0, 0, 0.2);
}

/* Specific selector to avoid conflict with .process-ultra .process-timeline */
.audit-process .process-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl);
  margin-top: var(--spacing-3xl);
}

.process-step {
  position: relative;
  text-align: center;
  padding: var(--spacing-xl);
  background: rgba(25, 30, 53, 0.6);
  border: 1px solid rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-xl);
  transition: all 0.3s ease;
}

.process-step:hover {
  border-color: rgba(79, 186, 241, 0.3);
  transform: translateY(-4px);
}

.step-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-light);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  margin-bottom: var(--spacing-md);
}

.step-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.step-content p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.step-icon {
  margin-top: var(--spacing-lg);
  color: var(--primary);
  opacity: 0.5;
}

/* FAQ Section */
.audit-faq {
  padding: var(--spacing-4xl) 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
  margin-top: var(--spacing-3xl);
}

/* NOTE: .faq-item defined in FAQ section (~line 7070) with faq-icon */

/* Audit CTA */
.audit-cta {
  padding: var(--spacing-4xl) 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .audit-hero-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .audit-hero-text {
    padding-right: 0;
  }

  .audit-hero-form {
    position: static;
  }

  .audit-process .process-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .audit-hero-text h1 {
    font-size: 1.75rem;
  }

  .form-card-ultra {
    padding: var(--spacing-xl);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTACT PAGE STYLES
   ───────────────────────────────────────────────────────────────────────────── */
.contact-hero {
  padding: calc(100px + var(--spacing-3xl)) 0 var(--spacing-4xl);
  min-height: 100vh;
}

.contact-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4xl);
  align-items: start;
}

.contact-hero-text h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--spacing-lg);
}

.contact-hero-text .hero-sub {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--spacing-2xl);
}

/* Contact Methods */
.contact-methods {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.contact-method {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: rgba(79, 186, 241, 0.05);
  border: 1px solid rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.contact-method:hover {
  border-color: rgba(79, 186, 241, 0.3);
}

.method-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-md);
  color: var(--primary);
  flex-shrink: 0;
}

.method-content h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.method-content a,
.method-content p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  text-decoration: none;
}

.method-content a:hover {
  color: var(--primary);
}

/* Contact CTA Alternative */
.contact-cta-alt {
  padding: var(--spacing-xl);
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-xl);
  text-align: center;
}

.contact-cta-alt p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

/* Form Row */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

/* Contact FAQ */
.contact-faq {
  padding: var(--spacing-4xl) 0;
  background: rgba(0, 0, 0, 0.2);
}

.contact-faq .faq-item a {
  color: var(--primary);
  text-decoration: none;
}

.contact-faq .faq-item a:hover {
  text-decoration: underline;
}

/* Contact Form Card */
.contact-hero-form {
  position: sticky;
  top: 120px;
}

@media (max-width: 1024px) {
  .contact-hero-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .contact-hero-form {
    position: static;
  }
}

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

  .contact-hero-text h1 {
    font-size: 1.75rem;
  }

  .contact-method {
    flex-direction: column;
    text-align: center;
  }

  .method-icon {
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.about-hero {
  padding: 160px 0 80px;
  position: relative;
}

.about-hero-content {
  max-width: 800px;
}

.about-hero-content h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--primary-ice);
  margin-bottom: var(--spacing-lg);
  line-height: 1.2;
}

.about-hero-content h1 .highlight {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Vision Section */
.about-vision {
  padding: var(--spacing-4xl) 0;
}

.vision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
}

.vision-card {
  background: rgba(25, 30, 53, 0.6);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  text-align: center;
  transition: all 0.4s ease;
}

.vision-card:hover {
  border-color: rgba(79, 186, 241, 0.4);
  transform: translateY(-8px);
  box-shadow: var(--shadow-glow);
}

.vision-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  color: var(--primary);
}

.vision-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-ice);
  margin-bottom: var(--spacing-md);
}

.vision-card p {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Why 3A Section */
.about-why {
  padding: var(--spacing-4xl) 0;
  background: linear-gradient(180deg, transparent 0%, rgba(79, 186, 241, 0.02) 50%, transparent 100%);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
}

.why-pillar {
  background: rgba(25, 30, 53, 0.5);
  border: 1px solid rgba(79, 186, 241, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  transition: all 0.3s ease;
}

.why-pillar:hover {
  border-color: rgba(79, 186, 241, 0.3);
  transform: translateY(-4px);
}

.why-pillar.featured {
  border-color: rgba(79, 186, 241, 0.4);
  background: rgba(79, 186, 241, 0.05);
}

.pillar-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.pillar-letter {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--secondary);
}

.pillar-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-ice);
}

.why-pillar>p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  line-height: 1.7;
}

.pillar-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pillar-features li {
  padding: var(--spacing-sm) 0;
  padding-left: var(--spacing-lg);
  position: relative;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.pillar-features li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Expertise Section */
.about-expertise {
  padding: var(--spacing-4xl) 0;
}

.expertise-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-3xl);
}

.expertise-stat {
  text-align: center;
  padding: var(--spacing-xl);
  background: rgba(79, 186, 241, 0.05);
  border: 1px solid rgba(79, 186, 241, 0.15);
  border-radius: var(--radius-lg);
}

.stat-big {
  display: block;
  font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
  font-weight: 800;
  color: var(--primary);
  font-family: var(--font-mono);
  line-height: 1;
  margin-bottom: var(--spacing-sm);
}

.stat-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.expertise-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-lg);
}

.stack-category {
  background: rgba(25, 30, 53, 0.4);
  border: 1px solid rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

.stack-category h4 {
  color: var(--primary);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-md);
}

.stack-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.stack-items span {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(79, 186, 241, 0.1);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text-light);
  font-family: var(--font-mono);
}

/* Geography Section */
.about-geography {
  padding: var(--spacing-4xl) 0;
  background: linear-gradient(180deg, rgba(79, 186, 241, 0.02) 0%, transparent 100%);
}

.geo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
}

.geo-card {
  background: rgba(25, 30, 53, 0.5);
  border: 1px solid rgba(79, 186, 241, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
}

.geo-card.primary {
  border-color: rgba(79, 186, 241, 0.4);
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.geo-card h3 {
  color: var(--primary-ice);
  font-size: 1.1rem;
  margin-bottom: var(--spacing-lg);
}

.geo-region {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.geo-flag {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  font-family: var(--font-mono);
}

.geo-name {
  color: var(--text-light);
  font-weight: 500;
}

.geo-card>p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: var(--spacing-md);
  line-height: 1.6;
}

/* About CTA */
.about-cta {
  padding: var(--spacing-4xl) 0;
}

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

  .why-grid {
    grid-template-columns: 1fr;
  }

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

  .stat-big {
    font-size: 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRICING PAGE - Premium Cards Design
   ═══════════════════════════════════════════════════════════════════════════ */

.pricing-hero {
  padding: calc(80px + var(--spacing-4xl)) 0 var(--spacing-4xl);
  text-align: center;
}

.pricing-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: var(--text-light);
}

.pricing-hero .highlight {
  background: var(--gradient-cyber);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto var(--spacing-2xl);
}

.currency-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.currency-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.currency-buttons {
  display: flex;
  gap: var(--spacing-xs);
  background: rgba(79, 186, 241, 0.1);
  padding: 4px;
  border-radius: var(--radius-lg);
}

.currency-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.currency-btn:hover {
  color: var(--text-light);
}

.currency-btn.active {
  background: var(--primary);
  color: var(--secondary);
}

.roi-stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2xl);
  flex-wrap: wrap;
  margin-top: var(--spacing-2xl);
}

.roi-stat {
  text-align: center;
}

.roi-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-mono);
}

.roi-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.audit-section {
  padding: var(--spacing-md) 0;
}

.audit-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(79, 186, 241, 0.1) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: center;
}

.audit-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--text-light);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-sm);
}

.audit-card h2 {
  font-size: 1.5rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.audit-desc {
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto var(--spacing-sm);
  font-size: 0.9rem;
}

.audit-process {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-sm);
}

.audit-step {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.step-num {
  width: 24px;
  height: 24px;
  background: var(--accent);
  color: var(--text-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.step-text {
  color: var(--text-light);
  font-size: 0.8rem;
}

.audit-includes {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-2xl);
}

.audit-includes span {
  background: rgba(79, 186, 241, 0.1);
  border: 1px solid rgba(79, 186, 241, 0.2);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  color: var(--primary);
}

.pricing-section {
  padding: var(--spacing-2xl) 0;
}

.pricing-section h2,
.retainer-section h2 {
  font-size: 1.75rem;
  text-align: center;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.section-sub {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
  font-size: 0.9rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  max-width: 950px;
  margin: 0 auto;
}

.pricing-card {
  background: rgba(25, 30, 53, 0.6);
  border: 1px solid rgba(79, 186, 241, 0.15);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(79, 186, 241, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(79, 186, 241, 0.1);
}

.pricing-card.featured {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.1) 0%, rgba(25, 30, 53, 0.8) 100%);
}

.pricing-popular {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--primary);
  color: var(--secondary);
  text-align: center;
  padding: var(--spacing-xs);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pricing-card.featured .pricing-header {
  padding-top: calc(var(--spacing-lg) + 20px);
}

.pricing-header {
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-sm);
  text-align: center;
  border-bottom: 1px solid rgba(79, 186, 241, 0.1);
}

.pricing-badge {
  display: inline-block;
  background: rgba(79, 186, 241, 0.1);
  border: 1px solid rgba(79, 186, 241, 0.3);
  color: var(--primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
}

.pricing-price {
  margin: var(--spacing-sm) 0;
}

.price-amount {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text-light);
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CURRENCY + PERIOD SWITCHING SYSTEM

   PROBLEM: Elements have BOTH currency (.price-eur) AND period (.period-monthly)
   Old approach failed because [data-period=monthly] .period-monthly showed ALL
   monthly prices regardless of currency!

   SOLUTION: Use COMBINED attribute selectors [data-currency][data-period]
   ═══════════════════════════════════════════════════════════════════════════ */

/* STEP 1: Hide ALL price elements by default */
.price-eur,
.price-usd,
.price-mad {
  display: none !important;
}

.period-monthly,
.period-annual {
  display: none !important;
}

/* STEP 2: SETUP PRICES (inside .pricing-price, NO period class) */
/* These only need currency matching */
[data-currency="EUR"] .pricing-price .price-eur {
  display: inline !important;
}

[data-currency="USD"] .pricing-price .price-usd {
  display: inline !important;
}

[data-currency="MAD"] .pricing-price .price-mad {
  display: inline !important;
}

html:not([data-currency]) .pricing-price .price-eur {
  display: inline !important;
}

/* STEP 3: RETAINER PRICES - Must match BOTH currency AND period */
/* EUR + Monthly */
[data-currency="EUR"][data-period="monthly"] .price-eur.period-monthly {
  display: inline !important;
}

html:not([data-currency])[data-period="monthly"] .price-eur.period-monthly {
  display: inline !important;
}

html:not([data-currency]):not([data-period]) .price-eur.period-monthly {
  display: inline !important;
}

[data-currency="EUR"]:not([data-period]) .price-eur.period-monthly {
  display: inline !important;
}

/* EUR + Annual */
[data-currency="EUR"][data-period="annual"] .price-eur.period-annual {
  display: inline !important;
}

html:not([data-currency])[data-period="annual"] .price-eur.period-annual {
  display: inline !important;
}

/* USD + Monthly */
[data-currency="USD"][data-period="monthly"] .price-usd.period-monthly {
  display: inline !important;
}

[data-currency="USD"]:not([data-period]) .price-usd.period-monthly {
  display: inline !important;
}

/* USD + Annual */
[data-currency="USD"][data-period="annual"] .price-usd.period-annual {
  display: inline !important;
}

/* MAD + Monthly */
[data-currency="MAD"][data-period="monthly"] .price-mad.period-monthly {
  display: inline !important;
}

[data-currency="MAD"]:not([data-period]) .price-mad.period-monthly {
  display: inline !important;
}

/* MAD + Annual */
[data-currency="MAD"][data-period="annual"] .price-mad.period-annual {
  display: inline !important;
}

/* STEP 4: Period labels (/mois, /an) - only need period matching */
[data-period="monthly"] .price-period.period-monthly {
  display: inline !important;
}

[data-period="annual"] .price-period.period-annual {
  display: inline !important;
}

html:not([data-period]) .price-period.period-monthly {
  display: inline !important;
}

/* STEP 5: Annual savings badge */
.annual-savings {
  display: none !important;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
}

[data-period="annual"] .annual-savings {
  display: block !important;
}

.pricing-time {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.pricing-body {
  padding: var(--spacing-md) var(--spacing-lg);
}

.pricing-desc {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: var(--spacing-sm);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-sm) 0;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
  color: var(--text-light);
  font-size: 0.85rem;
}

.pricing-features li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Sub-items for B2C/B2B track alternatives */
.pricing-features li.sub-item {
  padding-left: 1.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  border-left: 2px solid rgba(79, 186, 241, 0.3);
  margin-left: 0.5rem;
}

.pricing-features li.sub-item .track-label {
  font-weight: 600;
  color: var(--primary);
  min-width: 2.5rem;
  display: inline-block;
}

.pricing-delivery {
  background: rgba(79, 186, 241, 0.1);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: var(--text-light);
}

.pricing-footer {
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
}

.pricing-footer .btn {
  width: 100%;
  justify-content: center;
}

.retainer-section {
  padding: var(--spacing-2xl) 0;
  background: rgba(79, 186, 241, 0.03);
}

/* Period Selector (Monthly/Annual toggle) */
.period-selector {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  background: rgba(25, 30, 53, 0.6);
  border-radius: var(--radius-full);
  padding: var(--spacing-xs);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.period-btn {
  padding: var(--spacing-sm) var(--spacing-xl);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.period-btn:hover {
  color: var(--text-light);
}

.period-btn.active {
  background: var(--primary);
  color: var(--secondary);
}

.period-badge {
  background: var(--accent);
  color: var(--secondary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 4px;
}

.retainer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  max-width: 700px;
  margin: 0 auto;
}

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

.retainer-card {
  background: rgba(25, 30, 53, 0.6);
  border: 1px solid rgba(79, 186, 241, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.retainer-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 186, 241, 0.3);
}

.retainer-card.featured {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.1) 0%, rgba(25, 30, 53, 0.8) 100%);
}

.retainer-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--secondary);
  padding: var(--spacing-xs) var(--spacing-lg);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.retainer-card h3 {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.retainer-price {
  margin-bottom: var(--spacing-xs);
}

.retainer-price .price-amount {
  font-size: 2rem;
}

.price-period {
  color: var(--text-secondary);
  font-size: 1rem;
}

.retainer-annual {
  background: rgba(79, 186, 241, 0.1);
  border: 1px solid rgba(79, 186, 241, 0.3);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.annual-price {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Note: .annual-savings styles are at line ~6655 with toggle logic */

.retainer-hours {
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
}

.retainer-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg) 0;
  text-align: left;
}

.retainer-card ul li {
  padding: var(--spacing-xs) 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  padding-left: 1.5rem;
  position: relative;
}

.retainer-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.retainer-rate {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
}

.retainer-note {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: var(--spacing-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADD-ONS SECTION - Pricing Page Optional Modules
   ═══════════════════════════════════════════════════════════════════════════ */

.addons-section {
  padding: var(--spacing-3xl) 0;
  background: linear-gradient(180deg, transparent 0%, rgba(139, 92, 246, 0.02) 50%, transparent 100%);
}

.addons-section h2 {
  text-align: center;
  margin-bottom: var(--spacing-sm);
}

.addons-section .section-sub {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.addon-category {
  margin-bottom: var(--spacing-2xl);
}

.addon-category-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.addon-category-title svg {
  color: var(--primary);
}

.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.addon-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  position: relative;
  transition: all 0.3s ease;
}

.addon-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.15);
}

.addon-card.addon-featured {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, var(--glass-bg) 100%);
}

.addon-badge {
  position: absolute;
  top: -10px;
  right: var(--spacing-md);
  background: var(--gradient-cyber);
  color: var(--text-dark);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.addon-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.addon-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(79, 186, 241, 0.1) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.addon-roi {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.addon-name {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.addon-desc {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  min-height: 2.5rem;
}

.addon-price {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.addon-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-light);
}

.addon-period {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.addon-setup {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Bundle Cards */
.addon-bundles {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid rgba(139, 92, 246, 0.1);
}

.addon-bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
}

.addon-bundle-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  position: relative;
  text-align: center;
}

.addon-bundle-card h4 {
  color: var(--text-light);
  font-size: 1rem;
  margin-bottom: var(--spacing-xs);
}

.addon-bundle-card p {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-bottom: var(--spacing-sm);
}

.addon-bundle-card.addon-bundle-featured {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, var(--glass-bg) 100%);
}

.addon-bundle-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.bundle-original {
  color: var(--text-muted);
  text-decoration: line-through;
  font-size: 0.9rem;
}

.bundle-arrow {
  color: var(--accent);
  font-weight: bold;
}

.bundle-discounted {
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 700;
}

.addon-note {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: var(--spacing-xl);
}

/* Responsive Add-ons */
@media (max-width: 768px) {
  .addon-grid {
    grid-template-columns: 1fr;
  }

  .addon-bundle-grid {
    grid-template-columns: 1fr;
  }

  .addon-bundle-price {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
}

.voice-section {
  padding: var(--spacing-2xl) 0;
  margin-top: var(--spacing-xl);
}

.voice-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(79, 186, 241, 0.05) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl) var(--spacing-2xl);
  text-align: center;
}

.voice-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
}

.voice-half {
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  background: rgba(139, 92, 246, 0.05);
}

.voice-half h4 {
  font-size: 0.95rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.voice-half>p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.voice-badge-phone {
  background: rgba(79, 186, 241, 0.2) !important;
  color: var(--accent) !important;
}

@media (max-width: 600px) {
  .voice-split {
    grid-template-columns: 1fr;
  }
}

.voice-badge {
  display: inline-block;
  background: rgba(139, 92, 246, 0.2);
  color: var(--accent-purple);
  padding: 2px var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.voice-icon {
  color: var(--accent-purple);
  margin-bottom: var(--spacing-xs);
}

.voice-icon svg {
  width: 32px;
  height: 32px;
}

.voice-card h3 {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.voice-card>p {
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto var(--spacing-sm);
  font-size: 0.85rem;
}

.voice-tech {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.voice-tech span {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  padding: 2px var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  color: var(--accent-purple);
}

.process-section {
  padding: var(--spacing-4xl) 0;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-xl);
  max-width: 1000px;
  margin: 0 auto;
}

.process-step {
  text-align: center;
  padding: var(--spacing-xl);
}

.process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: var(--secondary);
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
}

.process-step h4 {
  font-size: 1.125rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.process-step p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.data-sources {
  padding: var(--spacing-3xl) 0;
  background: rgba(245, 158, 11, 0.05);
  border-top: 1px solid rgba(245, 158, 11, 0.2);
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.data-sources h3 {
  text-align: center;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.data-sources>.container>p {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
}

.sources-list {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.sources-list a {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: var(--accent-orange);
  text-decoration: none;
  transition: all 0.2s ease;
}

.sources-list a:hover {
  background: rgba(245, 158, 11, 0.2);
}

.faq-section {
  padding: var(--spacing-4xl) 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  max-width: 900px;
  margin: 0 auto;
}

.faq-item {
  background: rgba(25, 30, 53, 0.4);
  border: 1px solid rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
}

.faq-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.2), rgba(0, 210, 180, 0.1));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  color: var(--primary);
}

.faq-item h3 {
  font-size: 1rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.faq-item p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.faq-item p strong {
  color: var(--text-light);
}

.faq-item p a {
  color: var(--primary);
  text-decoration: none;
}

.faq-item p a:hover {
  text-decoration: underline;
}

/* NOTE: .cta-section is defined in Academy section (line ~10686) with glassmorphism */

/* ═══════════════════════════════════════════════════════════════════════════
   AUTOMATIONS CATALOG - Premium Card Design
   ═══════════════════════════════════════════════════════════════════════════ */

.catalog-hero {
  padding: calc(80px + var(--spacing-4xl)) 0 var(--spacing-3xl);
  text-align: center;
}

.catalog-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
}

.catalog-hero .hero-sub {
  max-width: 700px;
}

.catalog-stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2xl);
  flex-wrap: wrap;
  margin: var(--spacing-2xl) 0;
}

.catalog-stat {
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: rgba(79, 186, 241, 0.1);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-xl);
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-mono);
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.flywheel-promo {
  margin-top: var(--spacing-2xl);
}

.flywheel-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid rgba(79, 186, 241, 0.3);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: all 0.3s ease;
}

.flywheel-link:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(79, 186, 241, 0.2);
}

.promo-icon {
  color: var(--primary);
}

.promo-text {
  text-align: left;
}

.promo-text strong {
  display: block;
  color: var(--text-light);
  font-size: 1rem;
}

.promo-text span {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.promo-arrow {
  color: var(--primary);
}

.catalog {
  padding: var(--spacing-3xl) 0;
}

.catalog-category {
  margin-bottom: var(--spacing-4xl);
}

.category-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.category-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.category-icon.acquisition {
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.2) 0%, rgba(79, 186, 241, 0.1) 100%);
  color: var(--primary);
}

.category-icon.seo {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
  color: var(--accent);
}

.category-icon.email {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
  color: var(--accent-purple);
}

.category-icon.shopify {
  background: linear-gradient(135deg, rgba(149, 191, 71, 0.2) 0%, rgba(149, 191, 71, 0.1) 100%);
  color: #95bf47;
}

.category-icon.analytics {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
  color: var(--accent-orange);
}

.category-icon.video,
.category-icon.vidéo {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
  color: var(--accent-purple);
}

.category-icon.sms {
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.2) 0%, rgba(79, 186, 241, 0.1) 100%);
  color: var(--primary);
}

.category-icon.retention {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
  color: var(--accent);
}

.category-icon.whatsapp {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.2) 0%, rgba(37, 211, 102, 0.1) 100%);
  color: #25D366;
}

.category-icon.voice {
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.2) 0%, rgba(79, 186, 241, 0.1) 100%);
  color: var(--primary);
}

.category-icon.dropshipping {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
  color: var(--accent-orange);
}

.category-icon.cinematicads {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
  color: var(--accent-purple);
}

.category-icon.avatar {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
  color: var(--accent-purple);
}

/* Category headers use section-title-ultra with gradient effect */
.category-header .section-title-ultra {
  font-size: 1.5rem;
  margin-bottom: 0;
  background: linear-gradient(135deg, #5EC8F7 0%, #A78BFA 50%, #34D399 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease infinite;
  text-shadow: 0 0 30px rgba(79, 186, 241, 0.3);
}

.category-count {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.automations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
}

.automation-card {
  background: rgba(25, 30, 53, 0.6);
  border: 1px solid rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  transition: all 0.3s ease;
}

.automation-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 186, 241, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.automation-card.highlight-card {
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.1) 0%, rgba(25, 30, 53, 0.8) 100%);
  border-color: rgba(79, 186, 241, 0.3);
}

.automation-card h3 {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.automation-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.automation-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.automation-meta .freq {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(79, 186, 241, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.automation-meta .benefit {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
}

/* CinematicAds Partner CTAs */
.category-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--text-light);
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  margin-left: auto;
  transition: all 0.3s ease;
}

.category-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79, 186, 241, 0.3);
}

.category-cta svg {
  transition: transform 0.3s ease;
}

.category-cta:hover svg {
  transform: translate(2px, -2px);
}

a.clickable-card {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

a.clickable-card:hover {
  text-decoration: none;
}

.card-cta {
  display: block;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(79, 186, 241, 0.1);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 0.3s ease;
}

a.clickable-card:hover .card-cta {
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST METRICS BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.trust-metrics-bar {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.05) 0%, rgba(13, 15, 26, 0.95) 100%);
  border-top: 1px solid rgba(79, 186, 241, 0.15);
  border-bottom: 1px solid rgba(79, 186, 241, 0.15);
}

.trust-metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--spacing-lg);
  text-align: center;
}

.trust-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.trust-metric-value {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary) 0%, #6dd5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.trust-metric-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

@media (max-width: 768px) {
  .trust-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md) var(--spacing-sm);
  }
  .trust-metric-value {
    font-size: 1.5rem;
  }
  .trust-metric-label {
    font-size: 0.65rem;
  }
}

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

.mcp-section {
  padding: var(--spacing-4xl) 0;
  background: rgba(79, 186, 241, 0.03);
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.section-badge {
  display: inline-block;
  background: rgba(79, 186, 241, 0.1);
  border: 1px solid rgba(79, 186, 241, 0.3);
  color: var(--primary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-md);
}

.section-header h2 {
  font-size: 2rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.section-header p {
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.mcp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
  max-width: 900px;
  margin: 0 auto;
  align-items: stretch;
}

.mcp-grid .mcp-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mcp-grid .mcp-card .mcp-text {
  flex: 1;
}

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

.mcp-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(79, 186, 241, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  text-align: center;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.mcp-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 186, 241, 0.3);
}

/* OLD WAY - Muted, discouraged aesthetic (deprecation style) */
.mcp-card.old-way {
  background: linear-gradient(135deg, rgba(40, 40, 60, 0.5) 0%, rgba(25, 25, 35, 0.7) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  opacity: 0.85;
}

.mcp-card.old-way::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg,
      transparent,
      transparent 10px,
      rgba(0, 0, 0, 0.03) 10px,
      rgba(0, 0, 0, 0.03) 20px);
  border-radius: inherit;
  pointer-events: none;
}

.mcp-card.old-way .mcp-icon {
  filter: grayscale(50%);
  opacity: 0.7;
}

.mcp-card.old-way h3 {
  color: rgba(255, 255, 255, 0.7);
}

.mcp-card.old-way .mcp-visual-bad {
  color: #f87171;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-md);
}

/* NEW WAY - Hero, premium, glowing aesthetic */
.mcp-card.new-way {
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.12) 0%, rgba(16, 185, 129, 0.08) 50%, rgba(25, 30, 53, 0.9) 100%);
  border-color: rgba(79, 186, 241, 0.4);
  box-shadow:
    0 0 40px rgba(79, 186, 241, 0.15),
    0 10px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mcp-card.new-way::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.5), rgba(16, 185, 129, 0.3), rgba(139, 92, 246, 0.3));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mcp-card.new-way:hover::before {
  opacity: 1;
}

.mcp-card.new-way .mcp-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 0 12px rgba(79, 186, 241, 0.6));
}

.mcp-card.new-way h3 {
  color: var(--primary);
  font-weight: 700;
}

.mcp-card.new-way .mcp-visual-good {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-md);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.mcp-card.mcp-active {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(25, 30, 53, 0.8) 100%);
}

.mcp-status {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.6rem;
  background: var(--accent);
  color: var(--text-light);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.mcp-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
  display: block;
}

.mcp-card h3 {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.mcp-card p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.mcp-card p strong {
  color: var(--primary);
  display: block;
  margin-bottom: var(--spacing-xs);
}

.mcp-text {
  margin-bottom: var(--spacing-md);
}

/* Hybrid Architecture Section - Session 144 */
.hybrid-section {
  padding: var(--spacing-4xl) 0;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.03) 0%, transparent 50%, rgba(79, 186, 241, 0.03) 100%);
  position: relative;
}

.hybrid-intro {
  max-width: 900px;
  margin: var(--spacing-xl) auto;
  padding: var(--spacing-lg) var(--spacing-xl);
  text-align: center;
}

.hybrid-intro-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}

.hybrid-intro-text strong {
  color: var(--text-light);
}

.hybrid-intro-text em {
  color: var(--primary);
  font-style: normal;
  font-weight: 600;
}

.hybrid-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
}

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

.hybrid-card {
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.hybrid-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 186, 241, 0.4);
}

.hybrid-card.featured {
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.12) 0%, rgba(16, 185, 129, 0.08) 50%, rgba(25, 30, 53, 0.9) 100%);
  border-color: rgba(79, 186, 241, 0.4);
  box-shadow: 0 0 40px rgba(79, 186, 241, 0.15);
}

.hybrid-icon {
  color: var(--primary);
  margin-bottom: var(--spacing-md);
}

.hybrid-card h3 {
  font-size: 1.25rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.hybrid-card p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.hybrid-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hybrid-list li {
  font-size: 0.95rem;
  color: var(--text-secondary);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hybrid-list li:last-child {
  border-bottom: none;
}

.hybrid-list li strong {
  color: var(--primary);
}

.hybrid-stat {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.hybrid-stat .stat-value {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.hybrid-stat .stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

.hybrid-tagline {
  font-size: 0.9rem;
  color: var(--primary);
  font-weight: 600;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(79, 186, 241, 0.2);
  font-style: italic;
}

.hybrid-cta {
  text-align: center;
  margin-top: var(--spacing-2xl);
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* Partners Section - Premium Cyber Branding */
.partners-section {
  padding: 5rem 0;
  background: linear-gradient(180deg, rgba(79, 186, 241, 0.02) 0%, rgba(25, 30, 53, 0.5) 50%, rgba(79, 186, 241, 0.02) 100%);
  position: relative;
  overflow: hidden;
}

.partners-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 186, 241, 0.3), transparent);
}

.partners-section .section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.partner-card {
  background: linear-gradient(135deg, rgba(25, 30, 53, 0.8) 0%, rgba(25, 30, 53, 0.4) 100%);
  border: 1px solid rgba(79, 186, 241, 0.15);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.partner-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(79, 186, 241, 0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.partner-card:hover {
  border-color: rgba(79, 186, 241, 0.5);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(79, 186, 241, 0.15), 0 0 30px rgba(79, 186, 241, 0.1);
}

.partner-card:hover::before {
  opacity: 1;
}

.partner-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: rgba(79, 186, 241, 0.1);
  border: 1px solid rgba(79, 186, 241, 0.2);
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
}

.partner-card:hover .partner-icon {
  background: rgba(79, 186, 241, 0.2);
  border-color: rgba(79, 186, 241, 0.4);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(79, 186, 241, 0.3);
}

.partner-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--primary);
  stroke-width: 1.5;
  fill: none;
  transition: all 0.3s ease;
}

.partner-card:hover .partner-icon svg {
  stroke: currentColor;
  filter: drop-shadow(0 0 8px rgba(79, 186, 241, 0.6));
}

.partner-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-light);
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.partner-card:hover .partner-name {
  color: var(--primary);
}

.partner-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  background: rgba(79, 186, 241, 0.1);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(79, 186, 241, 0.2);
  transition: all 0.3s ease;
}

.partner-card:hover .partner-badge {
  background: rgba(79, 186, 241, 0.2);
  border-color: rgba(79, 186, 241, 0.4);
}

/* Partner category colors */
.partner-card.ecommerce .partner-icon {
  background: rgba(149, 191, 71, 0.15);
  border-color: rgba(149, 191, 71, 0.3);
}

.partner-card.ecommerce .partner-icon svg {
  stroke: #95BF47;
}

.partner-card.ecommerce:hover .partner-icon {
  box-shadow: 0 0 20px rgba(149, 191, 71, 0.4);
}

.partner-card.email .partner-icon {
  background: rgba(52, 186, 167, 0.15);
  border-color: rgba(52, 186, 167, 0.3);
}

.partner-card.email .partner-icon svg {
  stroke: #34BAA7;
}

.partner-card.email:hover .partner-icon {
  box-shadow: 0 0 20px rgba(52, 186, 167, 0.4);
}

.partner-card.cloud .partner-icon {
  background: rgba(66, 133, 244, 0.15);
  border-color: rgba(66, 133, 244, 0.3);
}

.partner-card.cloud .partner-icon svg {
  stroke: #4285F4;
}

.partner-card.cloud:hover .partner-icon {
  box-shadow: 0 0 20px rgba(66, 133, 244, 0.4);
}

.partner-card.social .partner-icon {
  background: rgba(24, 119, 242, 0.15);
  border-color: rgba(24, 119, 242, 0.3);
}

.partner-card.social .partner-icon svg {
  stroke: #1877F2;
}

.partner-card.social:hover .partner-icon {
  box-shadow: 0 0 20px rgba(24, 119, 242, 0.4);
}

.partner-card.ai .partner-icon {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
}

.partner-card.ai .partner-icon svg {
  stroke: #8B5CF6;
}

.partner-card.ai:hover .partner-icon {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.partner-card.automation .partner-icon {
  background: rgba(255, 106, 0, 0.15);
  border-color: rgba(255, 106, 0, 0.3);
}

.partner-card.automation .partner-icon svg {
  stroke: #FF6A00;
}

.partner-card.automation:hover .partner-icon {
  box-shadow: 0 0 20px rgba(255, 106, 0, 0.4);
}

.partner-card.hosting .partner-icon {
  background: rgba(103, 58, 183, 0.15);
  border-color: rgba(103, 58, 183, 0.3);
}

.partner-card.hosting .partner-icon svg {
  stroke: #673AB7;
}

.partner-card.hosting:hover .partner-icon {
  box-shadow: 0 0 20px rgba(103, 58, 183, 0.4);
}

.partner-card.ads .partner-icon {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.partner-card.ads .partner-icon svg {
  stroke: currentColor;
}

.partner-card.ads:hover .partner-icon {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.partner-card.data .partner-icon {
  background: rgba(0, 176, 117, 0.15);
  border-color: rgba(0, 176, 117, 0.3);
}

.partner-card.data .partner-icon svg {
  stroke: #00B075;
}

.partner-card.data:hover .partner-icon {
  box-shadow: 0 0 20px rgba(0, 176, 117, 0.4);
}

.partner-card.messaging .partner-icon {
  background: rgba(37, 211, 102, 0.15);
  border-color: rgba(37, 211, 102, 0.3);
}

.partner-card.messaging .partner-icon svg {
  stroke: #25D366;
}

.partner-card.messaging:hover .partner-icon {
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
}

/* Partners more text */
.partners-more {
  text-align: center;
  margin-top: 2rem;
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-style: italic;
  opacity: 0.9;
}

/* Partners grid responsive */
@media (max-width: 1024px) {
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .partner-card {
    padding: 1.5rem 1rem;
  }

  .partner-icon {
    width: 48px;
    height: 48px;
  }

  .partner-icon svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cta {
  padding: var(--spacing-4xl) 0;
}

.cta-content {
  text-align: center;
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-4xl);
}

.cta-content h2 {
  font-size: 2rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
}

.cta-content p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

@media (max-width: 768px) {

  .pricing-grid,
  .retainer-grid,
  .process-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .audit-process {
    flex-direction: column;
    align-items: center;
  }

  .roi-stats,
  .catalog-stats {
    gap: var(--spacing-md);
  }

  .catalog-stat {
    padding: var(--spacing-md);
  }

  .stat-number {
    font-size: 2rem;
  }

  .category-header {
    flex-direction: column;
    text-align: center;
  }

  /* Automations Grid - 2x2 layout on mobile */
  .automations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .automation-card {
    padding: var(--spacing-md);
  }

  .automation-card h3 {
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: var(--spacing-xs);
  }

  .automation-card p {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
  }

  .automation-meta {
    font-size: 0.65rem;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
  }

  .automation-meta span {
    padding: 0.2rem 0.4rem;
  }

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

  .flywheel-link {
    flex-direction: column;
    text-align: center;
  }

  .promo-text {
    text-align: center;
  }

  /* CTA SECTIONS - Mobile UX Optimization */
  .cta {
    padding: var(--spacing-2xl) 0;
  }

  .cta-content {
    padding: var(--spacing-xl) var(--spacing-md);
    margin: 0 var(--spacing-sm);
    border-radius: var(--radius-xl);
  }

  .cta-content h2 {
    font-size: 1.35rem;
    line-height: 1.3;
    margin-bottom: var(--spacing-sm);
  }

  .cta-content p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-lg);
  }

  .cta-actions {
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
  }

  .cta-actions .btn,
  .cta-actions .btn-large,
  .cta-content .btn,
  .cta-content .btn-large {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
  }

  /* Fix inline style buttons in CTA */
  .cta-content>div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100%;
  }

  .cta-content>div[style*="display: flex"] .btn {
    width: 100%;
  }

  .tech-icon {
    min-width: 48px;
    min-height: 48px;
  }

  .tech-icon span {
    font-size: 0.85rem;
  }

  .ring-3 {
    display: none;
  }

  .ring-1 {
    animation-duration: 45s;
  }

  .ring-2 {
    animation-duration: 35s;
  }
}

@media (max-width: 480px) {
  .cta {
    padding: var(--spacing-xl) 0;
  }

  .cta-content {
    padding: var(--spacing-lg) var(--spacing-sm);
    margin: 0;
    border-radius: var(--radius-lg);
  }

  .cta-content h2 {
    font-size: 1.2rem;
  }

  .hero-visual {
    max-width: 260px;
    height: 320px;
  }

  .tech-orbital {
    width: 260px;
    height: 260px;
  }

  .cta-content p {
    font-size: 0.85rem;
  }

  .cta-actions .btn,
  .cta-actions .btn-large,
  .cta-content .btn,
  .cta-content .btn-large {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
  }

  /* Automations Grid - 2x2 compact on small mobile */
  .automations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .automation-card {
    padding: var(--spacing-sm);
  }

  .automation-card h3 {
    font-size: 0.8rem;
  }

  .automation-card p {
    font-size: 0.7rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .automation-meta {
    font-size: 0.6rem;
  }

  .automation-meta span {
    padding: 0.15rem 0.3rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PME PAGE - WORKFLOW DIAGRAM
   ───────────────────────────────────────────────────────────────────────────── */
.workflow-diagram {
  background: rgba(25, 30, 53, 0.4);
  border: 1px solid rgba(79, 186, 241, 0.15);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-2xl);
  margin-top: var(--spacing-2xl);
}

.workflow-diagram h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.workflow-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.workflow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(79, 186, 241, 0.08);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  min-width: 160px;
  max-width: 200px;
  text-align: center;
  transition: all 0.3s ease;
}

.workflow-step:hover {
  border-color: rgba(79, 186, 241, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.step-icon {
  width: 48px;
  height: 48px;
  background: var(--gradient-cyber);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: var(--spacing-md);
}

.step-content h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.step-content p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.step-output {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(16, 185, 129, 0.15);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.workflow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--primary);
  font-size: 1.5rem;
  opacity: 0.6;
  margin-top: 40px;
}

.workflow-arrow::after {
  content: "→";
}

/* ─────────────────────────────────────────────────────────────────────────────
   PME PAGE - SECTORS SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.sectors {
  padding: var(--spacing-4xl) 0;
  background: linear-gradient(135deg, rgba(25, 30, 53, 0.5) 0%, rgba(27, 47, 84, 0.3) 100%);
}

.sectors .section-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.section-badge {
  display: inline-block;
  background: rgba(79, 186, 241, 0.15);
  color: var(--primary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-md);
}

.sectors h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-light);
}

.sectors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  max-width: 900px;
  margin: 0 auto;
}

.sector-card {
  background: rgba(25, 30, 53, 0.6);
  border: 1px solid rgba(79, 186, 241, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  text-align: center;
  transition: all 0.3s ease;
}

.sector-card:hover {
  border-color: rgba(79, 186, 241, 0.4);
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.sector-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.sector-card p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* PME Mobile Responsive */
@media (max-width: 900px) {
  .sectors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .workflow-steps {
    flex-direction: column;
    align-items: center;
  }

  .workflow-step {
    max-width: 100%;
    width: 100%;
  }

  .workflow-arrow {
    transform: rotate(90deg);
    margin: var(--spacing-sm) 0;
  }
}

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

/* Language Switcher Styling - Premium 2026 */
.lang-nav {
  display: flex;
  gap: 4px;
  margin-left: 1rem;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-full);
  align-items: center;
}

.lang-link {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem !important;
  font-weight: 800;
  color: var(--text-secondary) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none !important;
}

.lang-link:hover {
  color: var(--primary) !important;
}

.lang-link.active {
  background: var(--primary);
  color: var(--secondary) !important;
  box-shadow: 0 0 15px rgba(79, 186, 241, 0.3);
}

.lang-link::after {
  display: none !important;
}

.lang-switch {
  display: none !important;
  /* Legacy support */
}



/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY - WCAG 2.1 AA Compliance
   ═══════════════════════════════════════════════════════════════════════════ */

/* Skip Link - WCAG 2.4.1 Bypass Blocks */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--secondary);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  z-index: 10000;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--text-light);
  outline-offset: 2px;
}

/* Visually Hidden - Screen Reader Only */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden:focus,
.visually-hidden:active,
.sr-only:focus,
.sr-only:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Focus Visible - WCAG 2.4.7 */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Remove outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* High Contrast Focus for dark backgrounds */
.header :focus-visible,
.footer-ultra :focus-visible,
[class*="dark"] :focus-visible {
  outline-color: var(--text-light);
}

/* Footer Heading - Replaces H4 for accessibility */
.footer-heading {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  margin-bottom: 1rem;
}

/* Reduced Motion - WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --primary: #00BFFF;
    --text-secondary: #CCCCCC;
    --border-dark: rgba(255, 255, 255, 0.5);
  }

  .btn {
    border: 2px solid currentColor;
  }
}

/* =========================================
   SMB/B2B PAGE - PAIN POINTS SECTION
   ========================================= */
.pain-section {
  padding: var(--spacing-3xl) 0;
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.pain-card {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  text-align: center;
  transition: all 0.3s ease;
}

.pain-card:hover {
  border-color: rgba(239, 68, 68, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.15);
}

.pain-icon {
  width: 64px;
  height: 64px;
  background: rgba(239, 68, 68, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-md);
  color: #ef4444;
}

.pain-icon svg {
  width: 32px;
  height: 32px;
}

.pain-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.pain-card p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 992px) {
  .pain-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* =========================================
   SMB/B2B PAGE - RESULTS SECTION
   ========================================= */
.results-section {
  padding: var(--spacing-3xl) 0;
  background: rgba(79, 186, 241, 0.03);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.result-card {
  background: rgba(79, 186, 241, 0.08);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  text-align: center;
  transition: all 0.3s ease;
}

.result-card:hover {
  border-color: rgba(79, 186, 241, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(79, 186, 241, 0.15);
}

.result-number {
  font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
  font-weight: 800;
  background: var(--gradient-cyber);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: var(--spacing-xs);
}

.result-label {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.result-card p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 992px) {
  .results-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .result-number {
    font-size: 2.5rem;
  }
}

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

  .result-number {
    font-size: 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION REVEAL ANIMATIONS - Preloaded to prevent CLS
   ═══════════════════════════════════════════════════════════════════════════ */
.section-hidden {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Refactored Inline Styles (Index & Dashboard Hygiene) */
.blob-1 {
  width: 500px;
  height: 500px;
  background: rgba(79, 186, 241, 0.15);
  top: 10%;
  left: 60%;
}

.blob-2 {
  width: 400px;
  height: 400px;
  background: rgba(139, 92, 246, 0.1);
  bottom: 20%;
  left: 10%;
  animation-delay: -5s;
}

.stream-1 {
  left: 5%;
}

.stream-2 {
  left: 15%;
  animation-delay: -1s;
}

.stream-3 {
  left: 85%;
  animation-delay: -2s;
}

.stream-4 {
  left: 95%;
  animation-delay: -0.5s;
}

.mini-log-container {
  background: rgba(10, 14, 23, 0.5);
  padding: 5px 15px;
  font-family: 'Fira Code', monospace;
  font-size: 0.7rem;
  border-top: 1px solid rgba(0, 242, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 15px;
}

.mini-log-label {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 0.6rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.mini-log-content {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.6);
}

.mini-log-btn {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 0.65rem;
  border: 1px solid var(--primary-color);
  padding: 2px 8px;
  border-radius: 4px;
  transition: 0.3s;
  white-space: nowrap;
}

/* Helper for cookie banner toggle */
.cookie-banner.hidden {
  display: none;
}

/* Orbital Ring Positions (Refactored Clean CSS) */
/* Ring 1 (8 items) */
.ring-1-pos-0 {
  --i: 0;
  --total: 8;
}

.ring-1-pos-1 {
  --i: 1;
  --total: 8;
}

.ring-1-pos-2 {
  --i: 2;
  --total: 8;
}

.ring-1-pos-3 {
  --i: 3;
  --total: 8;
}

.ring-1-pos-4 {
  --i: 4;
  --total: 8;
}

.ring-1-pos-5 {
  --i: 5;
  --total: 8;
}

.ring-1-pos-6 {
  --i: 6;
  --total: 8;
}

.ring-1-pos-7 {
  --i: 7;
  --total: 8;
}

/* Ring 2 (7 items) */
.ring-2-pos-0 {
  --i: 0;
  --total: 7;
}

.ring-2-pos-1 {
  --i: 1;
  --total: 7;
}

.ring-2-pos-2 {
  --i: 2;
  --total: 7;
}

.ring-2-pos-3 {
  --i: 3;
  --total: 7;
}

.ring-2-pos-4 {
  --i: 4;
  --total: 7;
}

.ring-2-pos-5 {
  --i: 5;
  --total: 7;
}

.ring-2-pos-6 {
  --i: 6;
  --total: 7;
}

/* Ring 3 (8 items) */
.ring-3-pos-0 {
  --i: 0;
  --total: 8;
}

.ring-3-pos-1 {
  --i: 1;
  --total: 8;
}

.ring-3-pos-2 {
  --i: 2;
  --total: 8;
}

.ring-3-pos-3 {
  --i: 3;
  --total: 8;
}

.ring-3-pos-4 {
  --i: 4;
  --total: 8;
}

.ring-3-pos-5 {
  --i: 5;
  --total: 8;
}

.ring-3-pos-6 {
  --i: 6;
  --total: 8;
}

.ring-3-pos-7 {
  --i: 7;
  --total: 8;
}

/* Automations Page Blobs */
.blob-auto-1 {
  width: 400px;
  height: 400px;
  background: rgba(79, 186, 241, 0.1);
  top: 20%;
  right: 10%;
}

.blob-auto-2 {
  width: 300px;
  height: 300px;
  background: rgba(139, 92, 246, 0.08);
  bottom: 30%;
  left: 5%;
  animation-delay: -7s;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LIVE AGENTIC TELEMETRY HUB
   ───────────────────────────────────────────────────────────────────────────── */
.telemetry-hub {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 320px;
  background: rgba(25, 30, 53, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(79, 186, 241, 0.3);
  border-radius: 16px;
  padding: 1.25rem;
  z-index: 999;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(79, 186, 241, 0.05);
  font-family: var(--font-mono);
  color: var(--text-light);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.telemetry-hub.collapsed {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.telemetry-hub.collapsed .telemetry-content {
  display: none;
}

.telemetry-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.telemetry-hub:not(.collapsed) .telemetry-toggle {
  transform: rotate(180deg);
}

.telemetry-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(79, 186, 241, 0.15);
  padding-bottom: 0.75rem;
}

.telemetry-pulse {
  width: 12px;
  height: 12px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10B981;
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }

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

.telemetry-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.telemetry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.telemetry-item {
  display: flex;
  flex-direction: column;
}

.telemetry-label {
  font-size: 0.6rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.telemetry-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}

.telemetry-matrix {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.matrix-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
}

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

.matrix-bar-bg {
  width: 100px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.matrix-bar-fill {
  height: 100%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  transition: width 1s ease;
}

.telemetry-log {
  font-size: 0.65rem;
  height: 60px;
  overflow-y: auto;
  border-top: 1px solid rgba(79, 186, 241, 0.15);
  padding-top: 0.75rem;
  color: var(--text-secondary);
}

.log-entry {
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-entry.active {
  color: var(--primary);
  font-weight: bold;
}

.collapsed .telemetry-icon {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

/* Global Utilities */
.icon-v-align {
  vertical-align: -2px;
  margin-right: 4px;
}

.link-underline {
  color: inherit;
  text-decoration: underline;
}

/* Pricing Page Specifics */
.pricing-month-badge {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(79, 186, 241, 0.1);
  border-radius: 8px;
}

.pricing-month-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
}

.pricing-month-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Utility for spacing (Flywheel page) */
.mt-2rem {
  margin-top: 2rem;
}

/* Pricing Page Updates */
.pricing-grid-narrow {
  max-width: 800px;
  margin: 0 auto;
}

.pricing-disclaimer {
  text-align: center;
  margin-top: 2rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MULTI-MARKET PRICING - Dynamic Visibility
   Controlled by GeoLocale.js setting data-currency on <html>
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-currency="EUR"] .price-mad,
html[data-currency="MAD"] .price-eur,
html[data-currency="MAD"] .price-usd {
  display: none !important;
}

/* Show currency-specific prices ONLY for Setup Packs (no period class) */
/* Retainer prices are controlled by the period toggle system (lines 6582-6648) */
html[data-currency="MAD"] .price-mad:not(.period-monthly):not(.period-annual) {
  display: inline-block !important;
}

html[data-currency="EUR"] .price-mad:not(.period-monthly):not(.period-annual),
html[data-currency="EUR"] .price-usd:not(.period-monthly):not(.period-annual) {
  display: none !important;
}

html[data-currency="EUR"] .price-eur:not(.period-monthly):not(.period-annual) {
  display: inline-block !important;
}

html[data-currency="USD"] .price-mad:not(.period-monthly):not(.period-annual),
html[data-currency="USD"] .price-eur:not(.period-monthly):not(.period-annual) {
  display: none !important;
}

html[data-currency="USD"] .price-usd:not(.period-monthly):not(.period-annual) {
  display: inline-block !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   INDUSTRIAL CLEANUP UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */
.bg-shape-1 {
  width: 500px;
  height: 500px;
  background: rgba(79, 186, 241, 0.15);
  top: 10%;
  left: 60%;
}

.bg-shape-2 {
  width: 400px;
  height: 400px;
  background: rgba(139, 92, 246, 0.1);
  bottom: 20%;
  left: 10%;
  animation-delay: -5s;
}

/* .stream-1 to .stream-4 defined at ~line 9110 - duplicates removed */

.bg-shape-3 {
  width: 400px;
  height: 400px;
  background: rgba(79, 186, 241, 0.1);
  top: 20%;
  right: 10%;
}

.bg-shape-4 {
  width: 300px;
  height: 300px;
  background: rgba(139, 92, 246, 0.08);
  bottom: 30%;
  left: 5%;
  animation-delay: -7s;
}

/* ─────────────────────────────────────────────────────────────────────────────
   AUDIT CLEANUP UTILITIES (Eliminating Inline Styles)
   ───────────────────────────────────────────────────────────────────────────── */
.overlay-blend {
  mix-blend-mode: overlay;
}

.particle-top {
  top: -4px;
  left: 50%;
}

.particle-bottom {
  bottom: -4px;
  right: 50%;
  background: #fff !important;
}

.particle-left {
  top: 50%;
  left: -4px;
}

.v-align-middle {
  vertical-align: -2px;
  margin-right: 4px;
}

.hide-initially {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DYNAMIC PRICING SYSTEM (Multi-Market Orchestration)
   ───────────────────────────────────────────────────────────────────────────── */
.price-mad,
.price-eur,
.price-usd {
  display: none;
}

[data-currency="MAD"] .price-mad {
  display: inline;
}

[data-currency="EUR"] .price-eur {
  display: inline;
}

.v-align-middle {
  vertical-align: middle;
  margin-right: 4px;
}

.mt-sm {
  margin-top: 0.5rem !important;
}

.bar-w-85 {
  width: 85% !important;
}

.bar-w-42 {
  width: 42% !important;
}

[data-currency="USD"] .price-usd {
  display: inline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRICING UTILITIES (Hardening Phase)
   ───────────────────────────────────────────────────────────────────────────── */
.pricing-grid-constrained {
  max-width: 800px;
  margin: 0 auto;
}

.price-badge-extra {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(79, 186, 241, 0.1);
  border-radius: 8px;
}

.price-emphasis {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
}

.price-secondary-note {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.text-center-muted {
  text-align: center;
  margin-top: 2rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.link-inherit {
  color: inherit;
  text-decoration: underline;
}

/* Testimonials Section */
.testimonials-section {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--bg-dark) 0%, #0a0a12 100%);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 60px;
}

.testimonial-card {
  padding: 40px 30px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0, 255, 136, 0.1);
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 80px;
  color: var(--accent);
  opacity: 0.1;
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial-quote {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-light);
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.testimonial-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--bg-dark);
  font-size: 0.9rem;
}

.testimonial-info {
  display: flex;
  flex-direction: column;
}

.testimonial-name {
  font-weight: 600;
  color: var(--text-light);
}

.testimonial-role {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.testimonial-metric {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.testimonial-metric .metric-value {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.testimonial-metric .metric-label {
  font-size: 0.9rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .testimonials-section {
    padding: 60px 0;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
  }

  .testimonial-card {
    padding: 30px 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKING PAGE - Session 142
   ═══════════════════════════════════════════════════════════════════════════ */

.booking-hero {
  padding: 120px 0 60px;
  text-align: center;
}

.booking-hero .badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
  color: var(--text-light);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.booking-hero .hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--text-light);
}

.booking-hero .hero-title .highlight {
  color: var(--primary);
}

.booking-hero p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.booking-section {
  padding: 60px 0 100px;
}

.booking-section .section-title {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 40px;
  color: var(--text-light);
}

.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.booking-calendar,
.booking-form {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 30px;
}

.booking-calendar h3,
.booking-form h3 {
  color: var(--text-light);
  font-size: 1rem;
  margin-bottom: 16px;
  font-weight: 600;
}

.date-selector {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 30px;
}

.date-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-light);
}

.date-btn:hover:not(:disabled) {
  background: rgba(79, 186, 241, 0.1);
  border-color: var(--primary);
}

.date-btn.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-light);
}

.date-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.date-btn .day-name {
  font-size: 0.7rem;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 4px;
}

.date-btn .day-num {
  font-size: 1.1rem;
  font-weight: 700;
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.time-slots .no-slots {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 20px;
}

.time-btn {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-light);
  font-size: 0.9rem;
  font-weight: 500;
}

.time-btn:hover {
  background: rgba(79, 186, 241, 0.1);
  border-color: var(--primary);
}

.time-btn.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-light);
}

.selected-slot {
  background: rgba(79, 186, 241, 0.1);
  border: 1px solid var(--primary);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: center;
}

.selected-slot.empty {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.selected-slot .date {
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 4px;
}

.selected-slot .time {
  color: var(--primary);
  font-size: 0.9rem;
}

.booking-form .form-group {
  margin-bottom: 16px;
}

.booking-form label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-light);
  font-size: 0.95rem;
  transition: all 0.2s;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(79, 186, 241, 0.05);
}

.booking-form input::placeholder,
.booking-form textarea::placeholder {
  color: var(--text-muted);
}

.booking-form select {
  cursor: pointer;
}

.booking-form textarea {
  resize: vertical;
  min-height: 80px;
}

.booking-submit {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border: none;
  border-radius: 10px;
  color: var(--text-light);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.booking-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(79, 186, 241, 0.3);
}

.booking-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--text-light);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* CRITICAL: Hide booking success by default - Session 142 */
.booking-success {
  display: none;
  text-align: center;
  padding: 60px 30px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--accent);
  border-radius: 16px;
  grid-column: 1 / -1;
}

.booking-success.show {
  display: block;
}

.booking-success .icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--text-light);
  margin: 0 auto 24px;
}

.booking-success h2 {
  font-size: 1.8rem;
  color: var(--text-light);
  margin-bottom: 12px;
}

.booking-success p {
  color: var(--text-secondary);
  font-size: 1rem;
}

.booking-benefits {
  padding: 80px 0;
  background: rgba(0, 0, 0, 0.2);
}

.booking-benefits .section-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 50px;
  color: var(--text-light);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.benefit-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s;
}

.benefit-card:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-5px);
  border-color: var(--primary);
}

.benefit-icon {
  width: 64px;
  height: 64px;
  background: rgba(79, 186, 241, 0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--primary);
}

/* Benefit icon color variants */
.benefit-card:nth-child(1) .benefit-icon {
  color: var(--primary);
}

.benefit-card:nth-child(2) .benefit-icon {
  color: var(--accent);
  background: rgba(16, 185, 129, 0.1);
}

.benefit-card:nth-child(3) .benefit-icon {
  color: var(--accent-purple);
  background: rgba(139, 92, 246, 0.1);
}

.benefit-card h3 {
  color: var(--text-light);
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.benefit-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Booking Page Mobile */
@media (max-width: 768px) {
  .booking-hero {
    padding: 100px 0 40px;
  }

  .booking-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .date-selector {
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }

  .date-btn {
    padding: 8px 4px;
  }

  .date-btn .day-name {
    font-size: 0.6rem;
  }

  .date-btn .day-num {
    font-size: 0.9rem;
  }

  .time-slots {
    grid-template-columns: repeat(3, 1fr);
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .booking-success {
    padding: 40px 20px;
  }
}

/* ===================================
   ACADEMY PAGE STYLES - Session 145
   =================================== */

/* Hero Academy */
.hero-academy {
  padding: var(--spacing-3xl) 0 var(--spacing-2xl);
  text-align: center;
  background: linear-gradient(180deg, rgba(79, 186, 241, 0.05) 0%, transparent 100%);
}

.hero-academy .hero-title-ultra {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--spacing-md);
}

.hero-academy .hero-subtitle {
  max-width: 700px;
  margin: 0 auto var(--spacing-xl);
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.7;
}

.hero-features {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.hero-feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.hero-feature svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Access Banner */
.access-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: rgba(79, 186, 241, 0.1);
  border: 1px solid rgba(79, 186, 241, 0.3);
  border-radius: var(--radius-md);
  margin: var(--spacing-xl) 0;
}

.access-banner svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
  flex-shrink: 0;
}

.access-banner p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.access-banner strong {
  color: var(--text-light);
}

.access-banner a {
  color: var(--primary);
  text-decoration: underline;
}

/* Navigation Tabs */
.nav-tabs {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xl);
  background: var(--glass-bg);
  padding: var(--spacing-xs);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  flex-wrap: wrap;
}

.nav-tab {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.nav-tab.active {
  background: var(--primary);
  color: var(--bg-dark);
}

/* Tab Content */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Section Subtitle */
.section-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: var(--spacing-xl);
  max-width: 600px;
}

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

/* Path Card */
.path-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.path-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 186, 241, 0.4);
}

.path-badge {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  padding: 4px 12px;
  background: var(--accent);
  color: var(--bg-dark);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.path-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.path-icon svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
}

.path-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.path-role {
  font-size: 0.85rem;
  color: var(--primary);
  margin-bottom: var(--spacing-md);
}

.path-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.path-modules {
  margin-top: auto;
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.path-modules-title {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.path-modules-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.path-module {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.path-module svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.path-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.path-duration {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.path-cta {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════
   COURSE CARDS - Academy Course Catalog
   ═══════════════════════════════════════════════════════════════════ */

.course-card {
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.course-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 186, 241, 0.4);
}

.course-header {
  padding: var(--spacing-lg);
  background: rgba(79, 186, 241, 0.05);
  border-bottom: 1px solid var(--glass-border);
}

.course-category {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-xs);
}

.course-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.course-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.course-body {
  padding: var(--spacing-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-outcomes {
  flex: 1;
}

.course-outcomes-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
}

.course-outcome {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.course-outcome svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.course-meta {
  display: flex;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.course-meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.course-meta-item svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   PARCOURS & MODULE STYLES - Academy Learning Paths
   ═══════════════════════════════════════════════════════════════════ */

.path-hero {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-2xl) 0;
}

.path-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
}

.path-hero h1 span {
  background: var(--gradient-cyber);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.path-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.path-meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.path-meta-item svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.path-description {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Module List */
.module-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.module {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  backdrop-filter: blur(10px);
}

.module-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.module-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-cyber);
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--bg-dark);
}

.module-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-light);
  margin: 0;
}

.module-duration {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.module-duration svg {
  width: 16px;
  height: 16px;
}

.module-description {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.module-lessons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.module-lessons .lesson {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.module-lessons .lesson svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   LESSON STYLES - Academy Course Lessons
   ═══════════════════════════════════════════════════════════════════ */

.lesson {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  backdrop-filter: blur(10px);
}

.lesson-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: var(--spacing-md);
}

.lesson-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-cyber);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--bg-dark);
}

.lesson-title {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-light);
}

.lesson-duration {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.lesson-content {
  color: var(--text-secondary);
  line-height: 1.7;
}

.lesson-content h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-light);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.lesson-content h2:first-child {
  margin-top: 0;
}

.lesson-content p {
  margin-bottom: var(--spacing-md);
}

.lesson-content ul,
.lesson-content ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

.lesson-content li {
  margin-bottom: var(--spacing-xs);
}

/* CTA Section for parcours */
.cta-section {
  text-align: center;
  padding: var(--spacing-2xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-2xl);
}

.cta-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--text-light);
}

.cta-section p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-xl);
  background: var(--gradient-cyber);
  color: var(--bg-dark);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(79, 186, 241, 0.3);
}

/* Breadcrumb */
.breadcrumb {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-lg);
}

.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--accent);
}

/* Course Hero (for individual course pages) */
.course-hero {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-xl) 0;
}

.course-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
}

.course-hero .course-description {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════════
   COURS NAVIGATION BUTTONS
   ═══════════════════════════════════════════════════════════════════ */

.nav-buttons {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--glass-border);
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.nav-btn:hover {
  background: rgba(79, 186, 241, 0.1);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.nav-btn svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

.nav-btn-prev {
  margin-right: auto;
}

.nav-btn-next {
  margin-left: auto;
  flex-direction: row-reverse;
}

/* ═══════════════════════════════════════════════════════════════════
   COURS CONTENT BOXES (Step, Tip)
   ═══════════════════════════════════════════════════════════════════ */

.step-box {
  background: rgba(79, 186, 241, 0.08);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-md) 0;
}

.step-box h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 var(--spacing-xs) 0;
}

.step-box p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.tip-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-md) 0;
}

.tip-box h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 var(--spacing-xs) 0;
}

.tip-box p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   BADGES (Clients, etc.)
   ═══════════════════════════════════════════════════════════════════ */

.badge-clients {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(79, 186, 241, 0.3);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════
   GUIDE CARDS - Academy Quick Guides
   ═══════════════════════════════════════════════════════════════════ */

.guide-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.guide-card:hover {
  transform: translateX(4px);
  border-color: rgba(79, 186, 241, 0.4);
}

.guide-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.guide-icon svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.guide-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.guide-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 2px;
}

.guide-card-time {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   BLOG CARDS - Blog Index and Related Articles
   ═══════════════════════════════════════════════════════════════════ */

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 186, 241, 0.4);
}

.blog-card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-card-body {
  padding: var(--spacing-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
  line-height: 1.4;
}

.blog-card-excerpt {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Related Cards - Blog Article Sidebar */
.related-card {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}

.related-card:hover {
  border-color: rgba(79, 186, 241, 0.4);
}

.related-card-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.related-card-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* NOTE: .case-card defined in Cas Clients section (~line 11762) */

/* ═══════════════════════════════════════════════════════════════════
   PROCESS CARDS - Methodology/Process Display
   NOTE: Main definitions moved to "PROCESS & SECURITY CARDS" section
   ═══════════════════════════════════════════════════════════════════ */

.process-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.process-description {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* NOTE: .security-card, .security-icon are defined in Legal sections (line ~11928) with glassmorphism */

/* ═══════════════════════════════════════════════════════════════════
   TECH CARDS - Technology Stack Display
   ═══════════════════════════════════════════════════════════════════ */

.tech-card {
  padding: var(--spacing-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.tech-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 186, 241, 0.4);
}

.tech-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--spacing-md);
}

.tech-card-icon svg {
  width: 48px;
  height: 48px;
  color: var(--primary);
}

.tech-card-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.tech-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-xs);
}

.tech-card-category {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   INVESTOR CARDS - Investors Page Display
   ═══════════════════════════════════════════════════════════════════ */

.investor-card {
  padding: var(--spacing-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.investor-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 186, 241, 0.4);
}

.investor-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.investor-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-lg);
}

.investor-card-icon svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
}

.investor-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-light);
}

.investor-card-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.investor-card-content {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   KPI CARDS - Metrics/KPI Display
   ═══════════════════════════════════════════════════════════════════ */

.kpi-card {
  padding: var(--spacing-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: border-color 0.2s ease;
}

.kpi-card:hover {
  border-color: rgba(79, 186, 241, 0.3);
}

.kpi-card-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--spacing-sm);
}

.kpi-card-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-xs);
}

.kpi-card-trend {
  font-size: 0.85rem;
  color: var(--success);
}

.kpi-card-trend.negative {
  color: var(--error);
}

/* ═══════════════════════════════════════════════════════════════════
   SUMMARY CARDS - Legal/Policy Summaries
   ═══════════════════════════════════════════════════════════════════ */

.summary-card {
  padding: var(--spacing-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
}

.summary-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.summary-icon svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.summary-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}

.summary-content {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   GENERIC ICON CONTAINERS - Reusable Icon Styles
   ═══════════════════════════════════════════════════════════════════ */

.brain-icon,
.section-icon,
.right-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.brain-icon svg,
.section-icon svg,
.right-icon svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════
   SVG SIZE CONSTRAINTS - Prevent Giant Icon Bug
   ═══════════════════════════════════════════════════════════════════ */

/* Global SVG constraint for inline icons */
.card svg:not([width]),
.icon svg:not([width]),
[class*="-card"] svg:not([width]),
[class*="-icon"] svg:not([width]) {
  max-width: 48px;
  max-height: 48px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .hero-features {
    flex-direction: column;
    align-items: flex-start;
  }

  .access-banner {
    flex-direction: column;
    text-align: center;
  }

  .nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .nav-tab {
    white-space: nowrap;
    padding: var(--spacing-sm) var(--spacing-md);
  }

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

  .case-card-results {
    grid-template-columns: 1fr;
  }

  .process-card {
    flex-direction: column;
    text-align: center;
  }

  .process-icon {
    margin: 0 auto;
  }

  .blog-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ACADEMY GUIDES - Accordion Style Quick Guides
   Added Session 147 - Missing CSS classes fix
   ═══════════════════════════════════════════════════════════════════ */

.page-hero {
  text-align: center;
  padding: var(--spacing-3xl) 0 var(--spacing-2xl);
}

.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
}

.page-hero h1 span {
  background: var(--gradient-cyber);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-description {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Guide Accordion */
.guide {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  transition: all 0.3s ease;
}

.guide:hover {
  border-color: rgba(79, 186, 241, 0.3);
}

.guide-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: background 0.3s ease;
}

.guide-header:hover {
  background: rgba(79, 186, 241, 0.05);
}

.guide-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(79, 186, 241, 0.1);
  border-radius: var(--radius-md);
  color: var(--primary);
  flex-shrink: 0;
}

.guide-icon svg {
  width: 20px;
  height: 20px;
}

.guide-info {
  flex: 1;
}

.guide-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-light);
  margin: 0 0 var(--spacing-xs) 0;
}

.guide-time {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.guide-toggle {
  color: var(--text-muted);
  transition: transform 0.3s ease;
}

.guide.open .guide-toggle {
  transform: rotate(180deg);
}

.guide-content {
  display: none;
  border-top: 1px solid var(--glass-border);
}

.guide.open .guide-content {
  display: block;
}

.guide-body {
  padding: var(--spacing-lg);
  color: var(--text-secondary);
  line-height: 1.7;
}

.guide-body h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
  margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

.guide-body h4:first-child {
  margin-top: 0;
}

.guide-body ul {
  margin: 0 0 var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
}

.guide-body ul li {
  margin-bottom: var(--spacing-xs);
}

/* Guide Steps */
.step {
  background: rgba(25, 30, 53, 0.5);
  border-left: 3px solid var(--primary);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.step h5 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-light);
  margin: 0 0 var(--spacing-xs) 0;
}

.step p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Guide Tips */
.tip {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.tip h5 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #10B981;
  margin: 0 0 var(--spacing-xs) 0;
}

.tip p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Guide Mobile Responsive */
@media (max-width: 768px) {
  .guide-header {
    padding: var(--spacing-md);
  }

  .guide-icon {
    width: 36px;
    height: 36px;
  }

  .guide-title {
    font-size: 1rem;
  }

  .guide-body {
    padding: var(--spacing-md);
  }

  .step {
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   AUDIT-GRATUIT PAGE - Session 148 CSS Fixes
   ═══════════════════════════════════════════════════════════════════ */

/* Service Detail Section */
.services-détail {
  padding: var(--spacing-3xl) 0;
  margin-top: var(--spacing-xl);
}

.service-block {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  backdrop-filter: blur(20px);
}

.service-block-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.service-icon-large {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(79, 186, 241, 0.3);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-icon-large svg {
  width: 32px;
  height: 32px;
  color: var(--primary);
}

.service-block-header h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-light);
  margin: 0 0 var(--spacing-xs) 0;
}

.service-block-header p {
  color: var(--text-secondary);
  margin: 0;
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.feature-card {
  background: rgba(25, 30, 53, 0.6);
  border: 1px solid rgba(79, 186, 241, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  transition: all 0.3s ease;
}

.feature-card:hover {
  border-color: rgba(79, 186, 241, 0.4);
  transform: translateY(-2px);
}

.feature-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-light);
  margin: 0 0 var(--spacing-sm) 0;
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0 0 var(--spacing-md) 0;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  position: relative;
  padding-left: var(--spacing-lg);
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-xs);
}

.feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Audit Next Steps Section */
.audit-next-steps {
  padding: var(--spacing-3xl) 0;
  background: linear-gradient(180deg, transparent, rgba(25, 30, 53, 0.5));
}

.audit-next-steps>.container>div:last-child {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
}

.audit-next-steps>.container>div:last-child>div {
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}

.audit-next-steps>.container>div:last-child>div:hover {
  border-color: rgba(79, 186, 241, 0.4);
  transform: translateY(-4px);
}

.audit-next-steps svg circle {
  fill: rgba(79, 186, 241, 0.1);
  stroke: var(--primary);
}

.audit-next-steps h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-light);
  margin: var(--spacing-md) 0 var(--spacing-sm) 0;
}

.audit-next-steps p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CAS-CLIENTS PAGE - Enhanced Styles Session 148
   ═══════════════════════════════════════════════════════════════════ */

/* Case Hero Enhancement */
.case-hero {
  padding: var(--spacing-3xl) 0 var(--spacing-2xl);
}

.case-hero-content {
  max-width: 800px;
}

.case-hero-content .badge {
  display: inline-block;
  margin-bottom: var(--spacing-md);
}

.case-hero-content .hero-title {
  margin-bottom: var(--spacing-md);
}

.case-hero-content .hero-sub {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
}

/* Trust Badges */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(79, 186, 241, 0.1);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

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

/* Case Cards Enhanced */
.cases-section {
  padding: var(--spacing-3xl) 0;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-xl);
}

.case-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}

.case-card:hover {
  border-color: rgba(79, 186, 241, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.case-vertical {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.case-vertical.healthcare {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

.case-vertical.ecommerce {
  background: rgba(79, 186, 241, 0.15);
  color: var(--primary);
}

.case-vertical.b2b {
  background: rgba(139, 92, 246, 0.15);
  color: #8B5CF6;
}

.case-status {
  font-size: 0.75rem;
  color: var(--accent);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(16, 185, 129, 0.1);
  border-radius: var(--radius-sm);
}

.case-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-light);
  margin: 0 0 var(--spacing-sm) 0;
}

.case-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0 0 var(--spacing-lg) 0;
}

.case-context,
.case-solution {
  margin-bottom: var(--spacing-lg);
}

.case-context h3,
.case-solution h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.case-context p,
.case-solution p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

.case-solution ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.case-solution li {
  position: relative;
  padding-left: var(--spacing-lg);
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-xs);
}

.case-solution li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
}

.case-results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--glass-border);
}

.result-item {
  text-align: center;
}

.result-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  background: var(--gradient-cyber);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.result-value.positive {
  background: linear-gradient(135deg, #10B981, #34D399);
  -webkit-background-clip: text;
  background-clip: text;
}

.result-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: var(--spacing-xs);
}

/* Process & Security Cards Enhanced */
.process-section,
.security-section {
  padding: var(--spacing-3xl) 0;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
}

.process-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.process-intro p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.process-card {
  display: block;
  /* Override conflicting flex from earlier duplicate definition */
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}

.process-card:hover {
  border-color: rgba(79, 186, 241, 0.4);
  transform: translateY(-4px);
}

.process-number {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 28px;
  height: 28px;
  background: var(--gradient-cyber);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-light);
}

.process-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(79, 186, 241, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(79, 186, 241, 0.3);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.process-icon svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
}

.process-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-light);
  margin: 0 0 var(--spacing-sm) 0;
}

.process-card>p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 0 var(--spacing-md) 0;
}

.process-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.process-card li {
  position: relative;
  padding-left: var(--spacing-md);
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: var(--spacing-xs);
}

.process-card li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary);
}

/* Security Grid */
.security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
}

.security-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  backdrop-filter: blur(20px);
  text-align: center;
  transition: all 0.3s ease;
}

.security-card:hover {
  border-color: rgba(16, 185, 129, 0.4);
  transform: translateY(-4px);
}

.security-icon {
  width: 48px;
  height: 48px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-md);
}

.security-icon svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.security-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
  margin: 0 0 var(--spacing-sm) 0;
}

.security-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

/* Mobile Responsive for Audit & Case pages */
@media (max-width: 768px) {
  .service-block-header {
    flex-direction: column;
    text-align: center;
  }

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

  .trust-badges {
    justify-content: center;
  }
}

/* Agent Ops Live Telemetry - Session 177 */
.agent-ops-telemetry {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(79, 186, 241, 0.2);
  background: rgba(13, 15, 26, 0.6);
  backdrop-filter: blur(12px);
  max-width: 520px;
  animation: fadeIn 1s ease-out 0.5s both;
}

.telemetry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(79, 186, 241, 0.1);
  padding-bottom: 8px;
}

.telemetry-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10B981;
  animation: pulse 2s infinite;
}

.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.tel-item {
  display: flex;
  flex-direction: column;
}

.tel-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tel-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-light);
  font-family: var(--font-mono);
}

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

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

/* v64 Session 148 Forensic fixes */

/* v65 Session 183bis - Platform Portfolio Styles */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

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

.feature-card-purple {
  border-color: rgba(168, 85, 247, 0.3);
}

.feature-card-purple:hover {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 8px 32px rgba(168, 85, 247, 0.15);
}

.text-purple {
  color: #A855F7;
}

.platform-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(251, 191, 36, 0.15);
  color: #FBBF24;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.platform-badge.platform-live {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.platform-tagline {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0.5rem 0 1rem;
  font-style: italic;
}

.platform-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.status-dot.building {
  background: #FBBF24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  animation: statusPulse 2s ease-in-out infinite;
}

.platform-note {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(79, 186, 241, 0.05);
  border: 1px solid rgba(79, 186, 241, 0.2);
  border-radius: 0.75rem;
  text-align: center;
}

.platform-note p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.platform-note strong {
  color: var(--primary);
}

/* Footer Platform Links - Coming Soon */
.platform-link-soon {
  color: var(--text-secondary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.coming-badge {
  background: rgba(251, 191, 36, 0.15);
  color: #FBBF24;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* About Platforms Section */
.about-platforms {
  padding: 5rem 0;
  background: linear-gradient(180deg, rgba(79, 186, 241, 0.02) 0%, transparent 100%);
}

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

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

.platform-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.platform-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(79, 186, 241, 0.1);
}

.platform-icon {
  margin-bottom: 1.5rem;
  color: var(--primary);
}

.platform-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 0.25rem;
}

.platform-type {
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.platform-card p:not(.platform-type) {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.platform-status-badge {
  display: inline-block;
  background: rgba(251, 191, 36, 0.15);
  color: #FBBF24;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.platform-link-live {
  display: inline-block;
  background: linear-gradient(135deg, var(--primary), #10B981);
  color: white;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.platform-link-live:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79, 186, 241, 0.3);
}