/*!
 * Ethos AI Design System - Premium Dark AI Consulting Theme
 * A comprehensive design system for modern AI consulting interfaces
 * 
 * DESIGN PHILOSOPHY:
 * - Dark, premium aesthetic with tech-forward branding
 * - Glass morphism with subtle transparency effects
 * - Electric blue and tech mint accent colors
 * - Smooth animations and hover interactions
 * - Professional gradient backgrounds
 * 
 * COLOR PALETTE:
 * Primary Blue: #0080FF (Electric Blue - HSL: 210, 100%, 55%)
 * Primary Glow: #4DA3FF (Lighter Blue - HSL: 210, 100%, 65%)
 * Accent Green: #2DB584 (Tech Mint - HSL: 165, 65%, 45%)
 * Background: #0A0F1A (Rich Dark Navy - HSL: 215, 50%, 8%)
 * Foreground: #F2F2F2 (Bright White - HSL: 0, 0%, 95%)
 * 
 * TECHNIQUES USED:
 * - CSS Custom Properties (CSS Variables) for theming
 * - Glass morphism with backdrop-filter and rgba transparency
 * - Linear gradients for depth and visual interest
 * - Box shadows for glow effects and elevation
 * - CSS Grid and Flexbox for responsive layouts
 * - Smooth transitions and hover effects
 * - Keyframe animations for interactive elements
 */

/* ========================================
   CSS VARIABLES - DESIGN TOKENS
   ======================================== */

:root {
  /* === COLOR PALETTE === */
  
  /* Core Colors (HSL Format) */
  --background: 215 50% 8%;              /* #0A0F1A - Rich dark navy */
  --background-dark: 215 50% 8%;         /* Dark overlay reference */
  --foreground: 0 0% 95%;                /* Bright text on dark */
  
  /* Glass Morphism Colors (RGBA Format) */
  --card: rgba(255, 255, 255, 0.08);     /* Semi-transparent white for glass cards */
  --card-foreground: 0 0% 95%;           /* Text on glass cards */
  --popover: rgba(26, 35, 50, 0.95);     /* Modal/popover backgrounds */
  --popover-foreground: 0 0% 95%;        /* Text in modals */
  
  /* Brand Colors */
  --primary: 210 100% 55%;               /* #0080FF - Electric Blue */
  --primary-foreground: 0 0% 100%;       /* White text on primary */
  --primary-glow: 210 100% 65%;          /* #4DA3FF - Lighter blue for glow effects */
  
  /* Secondary & Accent Colors */
  --secondary: rgba(255, 255, 255, 0.1); /* Glass secondary elements */
  --secondary-foreground: 0 0% 95%;      /* Text on secondary */
  --accent: 165 65% 45%;                 /* #2DB584 - Tech Mint */
  --accent-foreground: 0 0% 100%;        /* White text on accent */
  
  /* Utility Colors */
  --muted: rgba(255, 255, 255, 0.05);    /* Subtle muted backgrounds */
  --muted-foreground: 0 0% 70%;          /* Muted text */
  --destructive: 0 84.2% 60.2%;          /* Error/danger color */
  --destructive-foreground: 0 0% 100%;   /* Text on destructive */
  
  /* Interactive Elements */
  --border: rgba(255, 255, 255, 0.1);    /* Glass borders */
  --input: rgba(255, 255, 255, 0.08);    /* Glass inputs */
  --ring: 210 100% 55%;                  /* Focus ring color */
  
  /* Border Radius */
  --radius: 0.75rem;                     /* 12px - Standard border radius */
  
  /* === GRADIENT DEFINITIONS === */
  
  /* Hero Gradients - Multi-stop gradients for depth */
  --gradient-hero: linear-gradient(135deg, #0a0f1a 0%, #1a2332 25%, #2a3544 50%, #1a2332 75%, #0a0f1a 100%);
  --gradient-section-1: linear-gradient(135deg, #0a0f1a 0%, #1e2a3a 50%, #0a0f1a 100%);
  --gradient-section-2: linear-gradient(135deg, #1a2332 0%, #2a3544 50%, #1a2332 100%);
  --gradient-section-3: linear-gradient(135deg, #0F936D 0%, #0a0f1a 50%, #0080FF 100%);
  
  /* UI Element Gradients */
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  --gradient-primary: linear-gradient(135deg, #0080FF 0%, #0F936D 100%);
  --gradient-tech: linear-gradient(90deg, #0080FF 0%, #0F936D 50%, #0080FF 100%);
  
  /* === SHADOW DEFINITIONS === */
  
  /* Glow Effects */
  --shadow-glow: 0 0 30px rgba(0, 128, 255, 0.2);        /* Primary blue glow */
  --shadow-card: 0 4px 20px rgba(10, 15, 26, 0.15);      /* Subtle card elevation */
  --shadow-primary: 0 4px 20px rgba(0, 128, 255, 0.15);  /* Primary button shadow */
  --shadow-accent: 0 4px 20px rgba(15, 147, 109, 0.12);  /* Accent element shadow */
  
  /* === ANIMATION EASING === */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);          /* Smooth transitions */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bouncy animations */
}

/* ========================================
   BASE STYLES
   ======================================== */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.hidden {
  display: none;
}

/* Background Gradients */
.bg-gradient-hero {
  background: var(--gradient-hero);
}

.bg-gradient-section-1 {
  background: var(--gradient-section-1);
}

.bg-gradient-section-2 {
  background: var(--gradient-section-2);
}

.bg-gradient-section-3 {
  background: var(--gradient-section-3);
}

/* Glass Morphism Effects */
.glass-card {
  background: var(--card);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
}

.glass-input {
  background: var(--input);
  border: 1px solid var(--border);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: calc(var(--radius) - 4px);
}

/* Text Gradient Effects */
.text-gradient {
  background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--muted-foreground)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-tech-gradient {
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.3), 0 3px 6px rgba(0, 0, 0, 0.4);
}

.text-primary-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

/* Glow Effects */
.glow-primary {
  box-shadow: var(--shadow-glow);
}

.glow-card {
  box-shadow: var(--shadow-card);
}

.glow-accent {
  box-shadow: var(--shadow-accent);
}

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

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s var(--ease-smooth);
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-primary);
}

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

.btn-secondary {
  background: var(--secondary);
  color: hsl(var(--secondary-foreground));
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.btn-accent {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  box-shadow: var(--shadow-accent);
}

.btn-accent:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s var(--ease-smooth);
}

.card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* Navigation */
.nav {
  background: rgba(26, 35, 50, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

/* Footer: keep bluish-grey background regardless of global light theme */
footer {
  /* Force dark bluish-grey footer surface */
  background: rgba(26, 35, 50, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  /* Scope footer text and borders to light-on-dark for readability */
  --foreground: 0 0% 95%;
  --muted-foreground: 0 0% 70%;
  --border: rgba(255, 255, 255, 0.1);
}

.nav-link {
  color: hsl(var(--foreground));
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: all 0.3s var(--ease-smooth);
  position: relative;
}

/* underline animation base */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: hsl(var(--primary));
  transition: all 0.3s var(--ease-smooth);
  transform: translateX(-50%);
}

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

/* FAQ section override: white background, dark text/borders */
#Frequently-Asked-Questions {
  background: #ffffff !important;                      /* background to white */
  color: rgb(27, 33, 47);                              /* default text color */
  /* Local tokens so Tailwind tokenized classes resolve to dark text */
  --foreground: 222 27% 15%;                           /* hsl approx of rgb(27,33,47) */
  --muted-foreground: 222 27% 15%;                     /* keep muted same as request */
  --border: rgb(27, 33, 47);                            /* borders/lines to rgb */
}

#Frequently-Asked-Questions article {
  background: #ffffff !important;                      /* card surface white */
  border: 2px solid rgb(27, 33, 47) !important;        /* restore outer box border */
}

/* Ensure inner dividers/lines adopt the specified color */
#Frequently-Asked-Questions .border-b,
#Frequently-Asked-Questions hr {
  border-color: rgb(27, 33, 47) !important;
  border-left-width: 0 !important;
  border-right-width: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 2px !important;                 /* only bottom line visible */
}

/* Hide the trailing separator on the last question */
#Frequently-Asked-Questions .space-y-4 > div:last-child .border-b,
#Frequently-Asked-Questions .space-y-4 > div:last-child hr {
  border-bottom: none !important;
}

/* Mission section on About page: white background with navy text */
.mission {
  background: #ffffff !important;
  color: rgb(27, 33, 47);
  --foreground: 222 27% 15%;
  --muted-foreground: 222 27% 15%;
  --border: rgb(27, 33, 47);
}

.mission .bg-card\/50,
.mission .bg-primary\/20,
.mission .bg-accent\/20 {
  background: rgba(27, 33, 47, 0.05) !important;
}

.mission .text-primary,
.mission .text-accent {
  color: rgb(27, 33, 47) !important;
}

.mission .text-muted-foreground {
  color: rgb(27, 33, 47) !important;
}

/* Ethos section on About page: white background with navy text */
.ethos {
  background: #ffffff !important;
  color: rgb(27, 33, 47);
  --foreground: 222 27% 15%;
  --muted-foreground: 222 27% 15%;
  --border: rgb(27, 33, 47);
}

.ethos .bg-card\/50,
.ethos .bg-primary\/20,
.ethos .bg-accent\/20 {
  background: rgba(27, 33, 47, 0.05) !important;
}

.ethos .text-primary,
.ethos .text-accent {
  color: rgb(27, 33, 47) !important;
}

.ethos .text-muted-foreground {
  color: rgb(27, 33, 47) !important;
}

.ethos .border-border\/20 {
  border-color: rgb(27, 33, 47) !important;
}

#Full-Service-AI .glass-card,
#Full-Service-AI article {
  background: #ffffff !important;                      /* card surface white */
  border-color: rgb(27, 33, 47) !important;            /* solid border color */
}

#Full-Service-AI .border-b,
#Full-Service-AI hr,
#Full-Service-AI .border {
  border-color: rgb(27, 33, 47) !important;
  border-width: 2px !important;
}

/* Thicker card borders in these sections */
#Frequently-Asked-Questions article,
#Full-Service-AI .glass-card,
#Full-Service-AI article {
  border-width: 2px !important;
}

/* Ensure <hr> renders with thicker top border */
#Frequently-Asked-Questions hr,
#Full-Service-AI hr {
  height: 0;
  border-top-width: 2px !important;
}

/* Hero special line now uses Subscribe section structure (bg-gradient-section-2 > section.bg-card) */

/* ================================ */
/* Pages: Contact & Careers (FAQ theme) */
/* ================================ */
#Contact-Page,
#Careers-Page {
  background: #ffffff !important;
  color: rgb(27, 33, 47);
  --foreground: 222 27% 15%;
  --muted-foreground: 222 27% 15%;
  --border: rgb(27, 33, 47);
}

/* Platform page adopts the White + Navy scheme */
#Platform-Page {
  background: #ffffff !important;
  color: rgb(27, 33, 47);
  --foreground: 222 27% 15%;
  --muted-foreground: 222 27% 15%;
  --border: rgb(27, 33, 47);
}

/* Generic borders and dividers */
#Contact-Page .border,
#Contact-Page .border-b,
#Contact-Page hr,
#Careers-Page .border,
#Careers-Page .border-b,
#Careers-Page hr,
#Platform-Page .border,
#Platform-Page .border-b,
#Platform-Page hr {
  border-color: rgb(27, 33, 47) !important;
  border-width: 2px !important;
}

/* Cards to solid white with clear borders */
#Contact-Page .glass-card,
#Careers-Page .glass-card,
#Careers-Page article,
#Platform-Page .glass-card,
#Platform-Page article {
  background: #ffffff !important;
  border: 2px solid rgb(27, 33, 47) !important;
}

/* Form elements on Contact page to light scheme */
#Contact-Page label,
#Contact-Page .text-muted-foreground,
#Contact-Page p,
#Contact-Page h1,
#Contact-Page h2,
#Contact-Page h3,
#Contact-Page h4 {
  color: rgb(27, 33, 47) !important;
}

/* ================================ */
/* Platform: Futuristic Stacked Visualization */
/* ================================ */
#Platform-Page .stack-visual {
  perspective: 1200px;
}

#Platform-Page .stack-layer {
  position: absolute;
  left: 50%;
  transform-style: preserve-3d;
  width: 88%;
  max-width: 460px;
  transform: translateX(-50%);
  transition: transform 0.45s var(--ease-smooth), filter 0.35s var(--ease-smooth), opacity 0.35s var(--ease-smooth);
}

/* Layer offsets for a stacked look (from bottom to top) */
#Platform-Page .stack-layer[data-layer="4"] { top: 18%; transform: translateX(-50%) translateY(40px) rotateX(18deg) rotateY(-8deg) scale(0.95); z-index: 1; opacity: 0.85; }
#Platform-Page .stack-layer[data-layer="3"] { top: 14%; transform: translateX(-50%) translateY(20px) rotateX(14deg) rotateY(-6deg) scale(0.97); z-index: 2; opacity: 0.9; }
#Platform-Page .stack-layer[data-layer="2"] { top: 10%; transform: translateX(-50%) translateY(8px)  rotateX(10deg) rotateY(-4deg) scale(0.99); z-index: 3; opacity: 0.95; }
#Platform-Page .stack-layer[data-layer="1"] { top: 6%;  transform: translateX(-50%) translateY(0px)  rotateX(6deg)  rotateY(-2deg) scale(1.0);  z-index: 4; opacity: 1; }

#Platform-Page .stack-layer .stack-layer-surface {
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 18px 22px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgb(27, 33, 47);
  background:
    radial-gradient(120% 120% at 10% 10%, rgba(0,128,255,0.06), transparent 40%),
    radial-gradient(120% 120% at 90% 15%, rgba(15,147,109,0.06), transparent 40%),
    #ffffff;
  box-shadow:
    0 8px 24px rgba(10,15,26,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.5),
    0 0 0 1px rgba(0,0,0,0.02);
  position: relative;
}

/* Futuristic neon edge accents */
#Platform-Page .stack-layer .stack-layer-surface::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,128,255,0.35), rgba(15,147,109,0.35));
  filter: blur(12px);
  opacity: 0.45;
}

/* Active layer pop */
#Platform-Page .stack-layer.active {
  filter: drop-shadow(0 0 22px rgba(0,128,255,0.25)) drop-shadow(0 0 12px rgba(15,147,109,0.18));
}

#Platform-Page .stack-layer.active .stack-layer-surface {
  border-color: hsl(var(--primary));
  box-shadow:
    0 10px 28px rgba(10,15,26,0.10),
    inset 0 0 0 2px rgba(255,255,255,0.7),
    0 0 0 2px rgba(0,128,255,0.20);
}

/* Hover affordance on desktop */
@media (hover: hover) and (pointer: fine) {
  #Platform-Page .stack-layer:hover {
    transform: translateX(-50%) translateY(-2px) rotateX(4deg) rotateY(-1deg) scale(1.01);
  }
}

#Contact-Page input,
#Contact-Page textarea,
#Contact-Page select {
  background: #ffffff !important;
  color: rgb(27, 33, 47) !important;
  border-color: rgb(27, 33, 47) !important;
  border-width: 2px !important;
}

#Contact-Page input::placeholder,
#Contact-Page textarea::placeholder {
  color: rgb(105, 110, 120) !important; /* subtle placeholder */
}

/* Careers content section base adjustments */
#Careers-Page section.bg-background {
  background: #ffffff !important;
}

#Careers-Page h1,
#Careers-Page h2,
#Careers-Page h3,
#Careers-Page p,
#Careers-Page li,
#Careers-Page label {
  color: rgb(27, 33, 47) !important;
}

/* Platform content section and typography overrides */
#Platform-Page section.bg-background {
  background: #ffffff !important;
}

#Platform-Page h1,
#Platform-Page h2,
#Platform-Page h3,
#Platform-Page p,
#Platform-Page li,
#Platform-Page label {
  color: rgb(27, 33, 47) !important;
}

/* Dark gradient subsections within Platform page: switch to light-on-dark tokens */
#Platform-Page .platform-dark-section {
  --foreground: 0 0% 95%;
  --muted-foreground: 0 0% 85%;
  --border: rgba(255, 255, 255, 0.6);
  color: hsl(var(--foreground)) !important;
}

/* Override Platform page's white-card rule inside dark sections */
#Platform-Page .platform-dark-section .glass-card,
#Platform-Page .platform-dark-section article {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: hsl(var(--foreground)) !important;
}

/* Ensure inner text in dark sections renders light */
#Platform-Page .platform-dark-section .text-muted-foreground,
#Platform-Page .platform-dark-section .platform-card-content,
#Platform-Page .platform-dark-section p,
#Platform-Page .platform-dark-section h2,
#Platform-Page .platform-dark-section h3 {
  color: hsl(var(--foreground)) !important;
}

/* Visual holder: right-side shape for images per section */
#Platform-Page .visual-holder {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 3;
  min-height: 240px;
  border: 2px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 10% 10%, rgba(0,128,255,0.08), transparent 40%),
    radial-gradient(120% 120% at 90% 15%, rgba(15,147,109,0.08), transparent 40%),
    #ffffff;
  box-shadow: 0 8px 24px rgba(10,15,26,0.08);
}

/* Visual holder in dark sections */
#Platform-Page .platform-dark-section .visual-holder {
  border-color: rgba(255, 255, 255, 0.6);
  background:
    radial-gradient(120% 120% at 10% 10%, rgba(77,163,255,0.10), transparent 40%),
    radial-gradient(120% 120% at 90% 15%, rgba(45,181,132,0.10), transparent 40%),
    rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 24px rgba(0,128,255,0.18);
}

/* Ensure card body text uses dark color (override gray utility classes) */
#Platform-Page .platform-card-content,
#Platform-Page .text-muted-foreground,
#Platform-Page .text-gray-300,
#Platform-Page .text-gray-400,
#Platform-Page .text-gray-500 {
  color: rgb(27, 33, 47) !important;
}

/* ======================================== */
/* Platform: Infographic Styles (Left/Right) */
/* ======================================== */
#Platform-Page .platform-infographic .layer-card {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  background:
    radial-gradient(120% 120% at 10% 10%, rgba(0,128,255,0.06), transparent 42%),
    radial-gradient(120% 120% at 90% 15%, rgba(45,181,132,0.06), transparent 42%),
    #ffffff;
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 6px 16px rgba(10,15,26,0.06);
}

#Platform-Page .platform-infographic .layer-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: rgb(27, 33, 47);
  background: linear-gradient(135deg, rgba(0,128,255,0.08), rgba(45,181,132,0.08));
  border: 2px solid var(--border);
}

#Platform-Page .platform-infographic .layer-icon svg {
  width: 22px;
  height: 22px;
}

#Platform-Page .platform-infographic .layer-title {
  font-weight: 700;
  font-size: 18px;
}

#Platform-Page .platform-infographic .desc-card {
  background:
    linear-gradient(180deg, rgba(0,128,255,0.04), rgba(45,181,132,0.04)),
    #ffffff;
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 20px rgba(10,15,26,0.06);
}

#Platform-Page .platform-infographic .desc-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

#Platform-Page .platform-infographic .desc-body {
  font-size: 16px;
}

#Platform-Page .platform-infographic .desc-value {
  margin-top: 10px;
  font-size: 15px;
}

#Platform-Page .platform-infographic .desc-value .label {
  color: hsl(var(--primary));
  font-weight: 600;
}

@media (min-width: 768px) {
  #Platform-Page .platform-infographic .layer-card { padding: 16px 18px; }
  #Platform-Page .platform-infographic .desc-card { padding: 20px 22px; }
}

/* Minimal hover effects to match AI Journey card feel (no background changes) */
#Platform-Page .platform-infographic .glass-card {
  transition: transform 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}

#Platform-Page .platform-infographic .glass-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--primary)) !important; /* override page-level !important border */
  background: #ffffff !important; /* keep card surface white per scheme */
  box-shadow: 0 8px 20px rgba(10,15,26,0.08);
}

/* Platform infographic: show only the active right-side description */
#Platform-Page .platform-infographic .desc-card {
  display: none;
}

#Platform-Page .platform-infographic .desc-card.active {
  display: block;
  border-color: hsl(var(--primary)) !important; /* bright blue */
  box-shadow: 0 8px 24px rgba(30, 136, 229, 0.18), 0 0 0 2px rgba(30, 136, 229, 0.14);
}

/* Transitions for right description cards (no fill on hover) */
#Platform-Page .platform-infographic .desc-card {
  transition: border-color 0.25s var(--ease-smooth),
              box-shadow 0.25s var(--ease-smooth);
}

/* Apply green fill to LEFT layer cards on hover */
#Platform-Page .platform-infographic .layer-card {
  transition: background-color 0.25s var(--ease-smooth),
              color 0.25s var(--ease-smooth),
              border-color 0.25s var(--ease-smooth),
              box-shadow 0.25s var(--ease-smooth);
}

#Platform-Page .platform-infographic .layer-card:hover {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: 0 10px 26px rgba(30, 136, 229, 0.28), 0 0 0 2px rgba(30, 136, 229, 0.18);
}

#Platform-Page .platform-infographic .layer-card:hover .layer-title,
#Platform-Page .platform-infographic .layer-card:hover h3,
#Platform-Page .platform-infographic .layer-card:hover p {
  color: hsl(var(--primary-foreground)) !important;
}

/* Tweak icon styling on hover for readability */
#Platform-Page .platform-infographic .layer-card:hover .layer-icon {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: hsl(var(--primary-foreground)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

#Platform-Page .platform-infographic .layer-card:hover .layer-icon svg {
  color: hsl(var(--primary-foreground)) !important;
  stroke: currentColor;
}

/* (optional enhancements removed: hover/glow and connector lines) */

/* ------------------------------- */
/* Careers Hero: light-on-dark like Index */
/* Ensure hero text matches index hero colors */
#Careers-Page #careers-hero {
  /* Override page-level light scheme within hero */
  --foreground: 0 0% 100%;        /* white */
  --muted-foreground: 0 0% 92%;   /* light gray */
  --border: 255 255 255;          /* white for borders if used */
  color: hsl(var(--foreground)) !important;
  /* Revert hero background to dark blue (override page-level white) */
  background: hsl(var(--background)) !important;
}

#Careers-Page #careers-hero .text-foreground {
  color: hsl(var(--foreground)) !important;
}

#Careers-Page #careers-hero .text-muted-foreground {
  color: hsl(var(--muted-foreground)) !important;
}

/* Reusable hero overlay used on Index and Careers */
.hero-gradient-overlay {
  background: radial-gradient(120% 120% at 10% 0%, rgba(6, 8, 12, 0.55) 0%, rgba(6, 8, 12, 0.35) 35%, rgba(6, 8, 12, 0.65) 100%),
              linear-gradient(to bottom, rgba(6, 8, 12, 0.2) 0%, rgba(6, 8, 12, 0.6) 100%);
}

.nav-link:hover::after {
  width: 100%;
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* Keyframe Definitions */
@keyframes float {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-20px); 
  }
}

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

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

@keyframes glow {
  0%, 100% {
    box-shadow: var(--shadow-glow);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 128, 255, 0.4);
  }
}

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

/* Animation Classes */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-fade-in {
  animation: fadeIn 0.8s var(--ease-smooth) forwards;
  opacity: 0;
}

.animate-slide-up {
  animation: slideUp 0.8s var(--ease-smooth) forwards;
  opacity: 0;
  transform: translateY(30px);
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-accordion-down {
  animation: accordion-down 0.2s ease-out;
}

.animate-accordion-up {
  animation: accordion-up 0.2s ease-out;
}

/* Hover Animations */
.hover-scale {
  transition: transform 0.3s var(--ease-smooth);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-lift {
  transition: transform 0.3s var(--ease-smooth);
}

.hover-lift:hover {
  transform: translateY(-8px);
}

/* ========================================
   CUSTOM LAYOUT UTILITIES
   ======================================== */

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.gap-8 {
  gap: 2rem; /* 32px */
}

.mt-auto {
  margin-top: auto;
}

@media (min-width: 1024px) {
  .lg\:flex {
    display: flex;
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}






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

@media (max-width: 768px) {
  .card {
    padding: 1rem;
  }
  
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 0.875rem;
  }
  
  .card {
    padding: 0.75rem;
  }
  
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background-color: var(--electric-blue);
  border-radius: 10px;
  border: 2px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--tech-mint);
}

/* AI Journey Section */
.journey-step-btn.active {
  background-color: rgba(38, 99, 235, 0.2);
  border-color: var(--electric-blue);
  box-shadow: 0 0 15px rgba(38, 99, 235, 0.3);
}

.journey-step-content {
  display: none;
  animation: fadeIn 0.5s ease-in-out;
}

.journey-step-content.active-content {
  display: block;
}

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


/* ========================================
   FOCUS STYLES
   ======================================== */

.btn:focus,
.glass-input:focus,
.nav-link:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  .glow-primary,
  .glow-card,
  .glow-accent {
    box-shadow: none !important;
  }
}

/* Hero Image Slide-in Animation */
.hero-image-container > div {
  animation: slideInFromRight 2.2s ease-out forwards;
}


.hero-gradient-overlay {
  /* Dark overlay with strong left coverage and gradual fade to center */
  background: linear-gradient(
    to right,
    hsl(var(--background-dark) / 0.92) 0%,  /* solid dark at far left */
    hsl(var(--background-dark) / 0.92) 28%, /* keep left area fully covered under copy */
    hsl(var(--background-dark) / 0.70) 40%, /* begin gentle fade */
    transparent 50%                    /* fully transparent by page center */
  ),
  linear-gradient(
    to bottom,
    hsl(var(--background-dark) / 0.95) 0%,  /* solid dark at top */
    hsl(var(--background-dark) / 0.80) 60%, /* fade gradually */
    hsl(var(--background-dark) / 0.20) 90%, /* very light at bottom */
    transparent 100%                    /* fully transparent at bottom */
  );
}

/* Outline button (for static pages using style.css) */
.btn-outline {
  background: var(--secondary);
  color: hsl(var(--secondary-foreground));
  border: 1px solid var(--border);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

/* Theme: Tan (warm, light background) */
/* ========================================
   COMPLIANCE LOGOS STRIP
   ======================================== */
.compliance-footer {
  padding: 0.75rem 0;
}

.compliance-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  opacity: 0.95;
}

.compliance-logos img {
  height: 32px;
  width: auto;
  filter: grayscale(100%) brightness(1.1);
  opacity: 0.9;
  transition: opacity 0.2s var(--ease-smooth), filter 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth);
}

.compliance-logos img:hover {
  opacity: 1;
  filter: grayscale(0%) brightness(1);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .compliance-logos {
    gap: 1rem;
    flex-wrap: wrap;
  }
  .compliance-logos img {
    height: 28px;
  }
}

.theme-tan {
  /* Warm tan background and dark text for contrast */
  --background: 35 35% 92%;            /* approx #F2E8D8 */
  --foreground: 215 50% 8%;            /* use dark navy text on light bg */
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-content {
    padding: 0 2rem;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p {
    font-size: 1rem;
  }

  .hero-content .cta-button {
    font-size: 0.9rem;
    padding: 0.7rem 1.4rem;
  }
}

@media (max-width: 480px) {
  .hero-content {
    text-align: center;
    padding: 0 1rem;
  }

  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-content p {
    font-size: 0.9rem;
  }

  .hero-content .cta-button {
    font-size: 0.8rem;
    padding: 0.6rem 1.2rem;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}