:root {
  /* NEW: Color Palette based on your logo */
  --brand-blue-dark: #0d2551;
  --brand-blue-mid: #1a4db3;
  --brand-blue-light: #3c92f7;
  --brand-accent: #66d9ff;

  /* Base dark theme colors */
  --slate-950: #020617; 
  --slate-900: #0f172a; 
  --slate-800: #1e293b;
  --slate-700: #334155; 
  --slate-400: #94a3b8; 
  --slate-300: #cbd5e1;
}

html { 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
} 

body { 
  font-family: 'Inter', sans-serif; 
  background-color: var(--slate-950); 
  color: var(--slate-300); 
  opacity: 0; 
  transition: opacity 0.5s ease-in-out;
  /* Subtle noise/texture background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'%3E%3Cdefs%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cdefs%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}
body.loaded { 
  opacity: 1; 
}

/* --- Typography & Effects --- */
.font-orbitron { font-family: 'Orbitron', sans-serif; }
.text-glow { 
  background: linear-gradient(90deg, var(--brand-accent), #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(60, 146, 247, 0.3); 
}

/* --- Backgrounds & Layout --- */
.bg-grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
}
.hero-gradient-glow {
    background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(26, 77, 179, 0.25), transparent);
    animation: pulse-glow 12s infinite ease-in-out;
}
@keyframes pulse-glow {
    0% { transform: scale(1); opacity: 0.25; } 
    50% { transform: scale(1.15); opacity: 0.35; } 
    100% { transform: scale(1); opacity: 0.25; }
}

/* --- Card Styles --- */
.glass-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 85, 0.6);
  transition: background 0.3s ease, border 0.3s ease, transform 0.3s ease;
}
.glass-card:hover {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(113, 128, 150, 0.5);
}
.card-hover-glow { 
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.6);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.card-hover-glow:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(102, 217, 255, 0.2), 0 0 10px rgba(102, 217, 255, 0.1);
}

/* --- Component-Specific Styles --- */
.process-step-icon.is-active { 
  border-color: var(--brand-blue-light) !important; 
  color: var(--brand-accent) !important; 
  transform: scale(1.1); 
}
.solution-tab { border-color: var(--slate-800); }
.solution-tab.tab-active { 
  background-color: var(--slate-800) !important; 
  color: #f8fafc !important; 
  border-color: var(--brand-blue-light) !important; 
}

/* --- Preloader --- */
#preloader { 
  position: fixed; 
  inset: 0; 
  background-color: var(--slate-950); 
  z-index: 100; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: opacity 0.5s ease-out; 
}
.loader-logo { animation: pulse-logo 2s infinite ease-in-out; }
@keyframes pulse-logo { 
  0% { transform: scale(1); opacity: 0.8; } 
  50% { transform: scale(1.1); opacity: 1; } 
  100% { transform: scale(1); opacity: 0.8; } 
}

/* --- AI Command Center Demo Styles --- */
.sms-bubble { max-width: 80%; padding: 0.5rem 1rem; border-radius: 1.25rem; }
.sms-ai { background: var(--slate-700); color: white; border-bottom-left-radius: 0.25rem; }
.sms-lead { background: var(--brand-blue-mid); color: white; border-bottom-right-radius: 0.25rem; align-self: flex-end; }
.sms-system { align-self: center; background: var(--brand-blue-dark); color: var(--brand-accent); font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 9999px; font-weight: 500; white-space: nowrap; }
.transcript-line { transition: opacity 0.3s ease-in-out; }

/* --- Form & FAQ Styles --- */
.progress-bar-fill { transition: width 0.4s ease-in-out; }
details summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }
.custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 1.25rem center;
    background-repeat: no-repeat;
    background-size: 1.25em;
}

/* --- NEW: Primary Button Styles --- */
.btn-primary {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    /* Gradient background matching the brand */
    background-image: linear-gradient(to right, var(--brand-blue-mid) 0%, var(--brand-blue-light) 50%, var(--brand-blue-mid) 100%);
    background-size: 200% auto;
    color: white;
    font-weight: 600;
    border-radius: 9999px;
    border: none;
    /* Subtle glow effect */
    box-shadow: 0 4px 15px 0 rgba(60, 146, 247, 0.25);
    /* Smooth transitions for all properties */
    transition: all 0.4s cubic-bezier(.4, .0, .2, 1);
    transform: scale(1);
    cursor: pointer;
}
.btn-primary:hover, .btn-primary:focus {
    /* Animate the gradient on hover */
    background-position: right center;
    /* Add a subtle lift effect */
    transform: scale(1.05);
    /* Enhance the glow on hover */
    box-shadow: 0 4px 20px 0 rgba(102, 217, 255, 0.3);
    outline: none;
}

/* --- Atmospheric Section Backgrounds --- */
.section-glow {
    position: relative;
    /* This is crucial to contain the pseudo-element */
    overflow: hidden;
}
/* This pseudo-element creates the background glow effect */
.section-glow::before {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.1;
    /* Place it behind the content */
    z-index: -1; 
}
/* Positioning the glow for different sections */
#bottlenecks::before {
    background: radial-gradient(circle, var(--brand-blue-light), transparent);
    top: -300px;
    left: -300px;
}
#ideal-for::before {
    background: radial-gradient(circle, var(--brand-blue-dark), transparent);
    bottom: -400px;
    right: -400px;
}
#solutions::before {
    background: radial-gradient(circle, var(--brand-blue-mid), transparent);
    top: -200px;
    right: -300px;
}
#process::before {
    background: radial-gradient(circle, var(--brand-accent), transparent);
    bottom: -300px;
    left: -400px;
    opacity: 0.08;
}

/* --- Utilities --- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
/* Add padding to body on mobile to avoid overlap with persistent CTA */
@media (max-width: 767px) {
  body { padding-bottom: 80px; }
}