@import "tailwindcss";

@theme {
  --color-brand-dark: #030712;
  --color-brand-charcoal: #080e21;
  --color-brand-steel: #38bdf8;
  --color-brand-deep-blue: #0b1536;
  --color-brand-red: #ff1e27;
  --font-display: 'Inter', sans-serif;
}

:root {
  --bg-dark: #030712;
  --bg-card: #080e21;
  --text-main: #ffffff;
  --text-muted: #94a3b8;
  --accent-gradient: linear-gradient(135deg, #ffffff 0%, #38bdf8 50%, #ff1e27 100%);
  --cta-red: #ff1e27;
  --border-subtle: rgba(255, 255, 255, 0.12);
  --shadow-glow: 0 0 25px rgba(255, 30, 39, 0.3);
}

html {
  scroll-behavior: smooth;
}

/* Global Selection Styles - Ensures text remains high-contrast white on blue highlight */
::-moz-selection {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

::selection {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  margin: 0;
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 0;
}

/* Scrollbar Utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@media (max-width: 1279px) {
  body {
    padding-bottom: 70px; /* Space for sticky mobile bar */
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

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

.btn-primary {
  background: linear-gradient(135deg, #ff1e27 0%, #e60000 50%, #b30000 100%);
  color: #ffffff;
  padding: 0.85rem 2.25rem;
  border-radius: 50px;
  font-weight: 800;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(255, 30, 39, 0.45), 0 0 10px rgba(255, 30, 39, 0.3);
  animation: ctaGlowPulse 2.8s infinite ease-in-out;
}

.btn-primary::before,
.btn-outline::before,
button[type="submit"]::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -120%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(25deg);
  animation: btnShimmerSweep 3.2s infinite ease-in-out;
  pointer-events: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ff3840 0%, #ff1e27 100%);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 35px rgba(255, 30, 39, 0.75), 0 0 20px rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-primary:active,
.btn-outline:active,
button[type="submit"]:active {
  transform: translateY(1px) scale(0.97);
}

.btn-outline {
  border: 1.5px solid var(--color-brand-steel, #38bdf8);
  color: #ffffff;
  padding: 0.85rem 2.25rem;
  border-radius: 50px;
  font-weight: 700;
  transition: all 0.4s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 189, 248, 0.08);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
}

.btn-outline:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.6), inset 0 0 15px rgba(56, 189, 248, 0.3);
}

/* Button Icon Animation */
.btn-primary svg,
.btn-outline svg,
.btn-call-now svg,
.btn-call-now-header svg,
button[type="submit"] svg {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-primary:hover svg,
.btn-outline:hover svg,
.btn-call-now:hover svg,
.btn-call-now-header:hover svg,
button[type="submit"]:hover svg {
  transform: translateX(3px) scale(1.15);
}

/* Animated Dedicated Call / Call Now Buttons */
.btn-call-now {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #047857 100%);
  color: #ffffff !important;
  border-radius: 50px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.25s ease-in-out;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
}

.btn-call-now::before,
.btn-call-now-header::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -120%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(25deg);
  animation: btnShimmerSweep 3s infinite ease-in-out;
  pointer-events: none;
}

.btn-call-now:hover {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.6);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Crimson Call Button for Header Next to Logo */
.btn-call-now-header {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #991b1b 100%);
  color: #ffffff !important;
  border-radius: 50px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.25s ease-in-out;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
}

.btn-call-now-header:hover {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.65);
  border-color: rgba(255, 255, 255, 0.85);
}

.btn-call-now svg,
.btn-call-now-header svg {
  animation: phoneRing 2.5s infinite ease-in-out;
}

@keyframes phoneRing {
  0%, 100% { transform: rotate(0deg) scale(1); }
  10%, 30% { transform: rotate(-14deg) scale(1.15); }
  20%, 40% { transform: rotate(14deg) scale(1.15); }
  50% { transform: rotate(0deg) scale(1); }
}

@keyframes callGlowPulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
  }
  50% {
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.65);
  }
}

/* Keyframe Animations for Buttons */
@keyframes ctaGlowPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 30, 39, 0.45), 0 0 10px rgba(255, 30, 39, 0.2);
  }
  50% {
    box-shadow: 0 8px 32px rgba(255, 30, 39, 0.8), 0 0 25px rgba(255, 255, 255, 0.4);
  }
}

@keyframes btnShimmerSweep {
  0% {
    left: -120%;
  }
  20%, 100% {
    left: 180%;
  }
}

@media (max-width: 640px) {
  h1 { font-size: 2.25rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.75rem !important; line-height: 1.2 !important; }
  .btn-primary, .btn-outline { padding: 0.5rem 1rem; font-size: 0.75rem; }
  .container { padding-left: 1rem; padding-right: 1rem; }
  .card { padding: 1.25rem; }
  .top-bar { font-size: 0.65rem; }
  #main-header { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

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

.animate-fade-in {
  animation: fadeIn 0.5s ease forwards;
}

/* Service Card Enhancements */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 2rem;
  border-radius: 12px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card:hover {
  border-color: var(--color-brand-steel);
  transform: translateY(-12px);
  box-shadow: 
    0 20px 40px -10px rgba(3, 7, 18, 0.9),
    0 0 25px rgba(56, 189, 248, 0.2);
}

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.05), 
    transparent
  );
  transform: skewX(-20deg);
  transition: 0.8s;
  z-index: 2;
}

.card:hover::after {
  left: 150%;
}

.card img {
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover img {
  transform: scale(1.1);
}

.card .btn-outline {
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
}

.card:hover .btn-outline {
  background: rgba(56, 189, 248, 0.2);
  color: white;
  border-color: var(--color-brand-steel);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

/* Mobile Submenu */
.mobile-submenu {
    display: none;
    padding-left: 1rem;
    border-left: 1px solid var(--border-subtle);
    margin-top: 0.5rem;
}

.mobile-submenu.active {
    display: block;
}

/* Glassmorphism Header */
#site-header {
  z-index: 1000;
  width: 100%;
}

#main-header.scrolled {
  background: #030712;
  box-shadow: 0 10px 30px -10px rgba(3, 7, 18, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

#main-header.scrolled .btn-primary {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-shadow: 0 4px 15px rgba(255, 30, 39, 0.4);
}

/* Sticky Mobile Call Bar */
.mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #030712;
  border-top: 2px solid var(--color-brand-steel);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem;
  box-shadow: 0 -5px 20px rgba(3, 7, 18, 0.8);
}

.mobile-sticky-bar a {
  width: 100%;
  max-width: 400px;
  background: var(--color-brand-red);
  color: white;
  text-align: center;
  padding: 0.85rem;
  border-radius: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(255, 30, 39, 0.8); }
  70% { box-shadow: 0 0 0 15px rgba(255, 30, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 30, 39, 0); }
}

@keyframes pulse-steel {
  0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.8); }
  70% { box-shadow: 0 0 0 15px rgba(56, 189, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}

@keyframes whatsapp-shake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  5%, 15%, 25% { transform: rotate(5deg) scale(1.1); }
  10%, 20% { transform: rotate(-5deg) scale(1.1); }
  30% { transform: rotate(0deg) scale(1); }
}

.animate-whatsapp {
  animation: whatsapp-shake 5s infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}

.animate-float {
  animation: float 15s ease-in-out infinite;
}

@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

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

.animate-pulse-slow {
  animation: pulse-slow 8s ease-in-out infinite;
}

.hero-gradient-text {
  background: linear-gradient(90deg, #fff 0%, #E63946 50%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
  text-shadow: 0 0 30px rgba(230, 57, 70, 0.3);
}

@keyframes shine {
  to { background-position: 200% center; }
}

@keyframes shimmer {
  0% { left: -100%; }
  30% { left: 200%; }
  100% { left: 200%; }
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: skewX(-25deg);
  animation: shimmer 3s infinite;
}

@keyframes reveal {
  0% { opacity: 0; transform: translateY(30px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.reveal-text {
  opacity: 0;
  animation: reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

.animate-pulse-red {
  animation: pulse-red 2s infinite;
}

.animate-pulse-steel {
  animation: pulse-steel 2s infinite;
}

.cta-glow {
  position: relative;
}

.cta-glow::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--color-brand-red), var(--color-brand-steel), var(--color-brand-red));
  background-size: 400%;
  z-index: -1;
  filter: blur(12px);
  border-radius: 50px;
  opacity: 0.3;
  animation: glow-pulse 4s ease-in-out infinite;
  transition: opacity 0.3s ease;
}

.cta-glow:hover::before {
  opacity: 0.8;
  animation: glow-move 4s linear infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.05); }
}

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

.top-bar {
  background: #000;
  font-size: 0.75rem;
  padding: 0.5rem 0;
  color: var(--text-muted);
}

/* Dynamic Section Styles */
.problem-card {
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(13, 13, 13, 0.95));
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

.problem-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: linear-gradient(to bottom, var(--color-brand-steel), var(--color-brand-deep-blue));
  transition: height 0.4s ease;
  z-index: 2;
}

.problem-card:hover::before {
  height: 100%;
}

.problem-card:hover {
  border-color: rgba(70, 130, 180, 0.5);
  transform: translateY(-12px) scale(1.02);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.7), 
    0 0 20px rgba(70, 130, 180, 0.15),
    inset 0 0 20px rgba(255, 255, 255, 0.02);
  background: linear-gradient(145deg, rgba(28, 28, 28, 0.95), rgba(20, 20, 20, 0.98));
}

.problem-card:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  transform: skewX(-25deg);
  animation: shine 2s infinite;
  z-index: 3;
}

@keyframes shine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

.problem-card.active {
  border-color: var(--color-brand-red);
  background: rgba(230, 57, 70, 0.15);
  box-shadow: 0 0 40px rgba(230, 57, 70, 0.2);
  transform: scale(1.04);
  animation: active-pulse 3s infinite ease-in-out;
}

@keyframes active-pulse {
  0%, 100% { box-shadow: 0 0 40px rgba(230, 57, 70, 0.2); }
  50% { box-shadow: 0 0 60px rgba(230, 57, 70, 0.4); }
}

.problem-card.active::before {
  background: var(--color-brand-red);
  height: 100%;
}

.problem-card .select-indicator {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  background: var(--color-brand-steel);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5) rotate(-45deg);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.problem-card:hover .select-indicator {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.problem-card.active .select-indicator {
  background: var(--color-brand-red);
  opacity: 1;
  transform: scale(1) rotate(0deg);
  box-shadow: 0 0 20px rgba(230, 57, 70, 0.6);
  animation: indicator-pulse 2s infinite;
}

@keyframes indicator-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.problem-card .problem-number {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 5rem;
  line-height: 0.8;
  opacity: 0.03;
  position: absolute;
  top: 0;
  right: 1rem;
  transition: all 0.4s ease;
  color: white;
  letter-spacing: -0.05em;
}

.problem-card:hover .problem-number {
  opacity: 0.1;
  color: var(--color-brand-steel);
  transform: translateY(-5px) scale(1.05);
}

.problem-card.active .problem-number {
  opacity: 0.2;
  color: var(--color-brand-red);
}

.problem-card h3 {
  transition: color 0.3s ease;
}

.problem-card:hover h3 {
  color: var(--color-brand-steel);
}

.problem-card.active h3 {
  color: white;
}

.follow-up-section {
  display: none;
  animation: fadeIn 0.5s ease forwards;
}

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

input:focus, select:focus, textarea:focus {
  border-color: var(--color-brand-steel) !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25) !important;
  background-color: #080e21 !important;
  color: #ffffff !important;
}

/* Dark Input & Chrome/Safari Autofill Fixes */
input, select, textarea {
  color-scheme: dark;
  color: #ffffff;
}

select option {
  background-color: #080e21 !important;
  color: #ffffff !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px #030712 inset !important;
  transition: background-color 50000s ease-in-out 0s !important;
  caret-color: #ffffff !important;
  color: #ffffff !important;
}

/* SMS/Call/Email Consent Checkboxes - two independent .consent-row rows on
   every lead-capture form (contact.html, home.html/index.html, services.html,
   partials/footer.html, partials/service-contact-form.html): transactional
   (required) and marketing (optional) - kept as two separate rows rather than
   one, per Twilio A2P 10DLC rules that marketing consent can't be bundled
   into transactional consent. Their margins deliberately collapse to space
   the two rows apart with no extra CSS. Deliberately smaller/muted relative
   to real form labels/inputs above - this is supplementary legal text, not a
   primary instruction, and should read that way rather than competing
   visually with the actual form fields. */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 1rem 0 1.2rem;
  cursor: pointer;
  user-select: none;
}

.consent-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
  margin-top: 0.1rem;
  border: 2px solid var(--border-subtle);
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.consent-checkbox:hover {
  border-color: var(--color-brand-steel);
}

.consent-checkbox:checked {
  background: var(--color-brand-steel);
  border-color: var(--color-brand-steel);
}

.consent-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.38rem;
  top: 0.16rem;
  width: 0.32rem;
  height: 0.6rem;
  border: solid var(--color-brand-dark);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.consent-checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35);
}

/* Same red-highlight treatment app.v5.js already applies to other invalid
   required fields, so an unchecked-and-submitted consent box is flagged the
   same way as any other missing required field, not silently ignored. */
.consent-checkbox.border-red-500,
.consent-checkbox.\!border-red-500 {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) !important;
}

.consent-text {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Partners Section */
.partner-logo {
  filter: grayscale(1) brightness(0.8);
  transition: filter 0.3s ease;
  max-height: 40px;
}

.partner-logo:hover {
  filter: grayscale(0) brightness(1);
}

/* Google Ads MCC Certified Trust Badge */
.mcc-badge-hero {
  background: linear-gradient(135deg, rgba(24, 28, 38, 0.95), rgba(12, 14, 20, 0.98));
  border: 1px solid rgba(66, 133, 244, 0.45);
  box-shadow: 0 0 25px rgba(66, 133, 244, 0.25), inset 0 0 15px rgba(66, 133, 244, 0.1);
  border-radius: 16px;
  padding: 0.85rem 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mcc-badge-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  animation: mccShimmer 4s infinite;
}

@keyframes mccShimmer {
  0% { left: -100%; }
  30%, 100% { left: 200%; }
}

.mcc-badge-hero:hover {
  border-color: #4285F4;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(66, 133, 244, 0.4), inset 0 0 20px rgba(66, 133, 244, 0.2);
}

.mcc-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC05 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4);
  flex-shrink: 0;
}

.mcc-badge-pill {
  background: rgba(66, 133, 244, 0.18);
  border: 1px solid rgba(66, 133, 244, 0.5);
  color: #60A5FA;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
}

/* Accordion */
.accordion-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 1rem;
}

.accordion-card:hover {
  border-color: rgba(70, 130, 180, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.accordion-card.active-card {
  border-color: var(--color-brand-steel);
  box-shadow: 0 0 25px rgba(70, 130, 180, 0.2);
  background: rgba(26, 26, 26, 0.95);
}

.accordion-item {
  border-bottom: 1px solid var(--border-subtle);
}

.accordion-header {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  color: white;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
}

.accordion-header:hover {
  color: var(--color-brand-steel);
}

.accordion-header.active {
  color: white;
  background: rgba(70, 130, 180, 0.08);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-muted);
}

.accordion-body {
  padding: 0 1.5rem 1.5rem 1.5rem;
  line-height: 1.7;
  font-size: 0.95rem;
}

.faq-tab-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--border-subtle);
  background: var(--color-brand-charcoal);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-tab-btn:hover {
  border-color: var(--color-brand-steel);
  color: white;
  transform: translateY(-1px);
}

.faq-tab-btn.active {
  background: rgba(70, 130, 180, 0.15);
  border-color: var(--color-brand-steel);
  color: var(--color-brand-steel);
  box-shadow: 0 0 15px rgba(70, 130, 180, 0.25);
}

/* Graphical Numbers */
.stat-box {
  background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(10, 10, 10, 0.9));
  border: 1px solid var(--border-subtle);
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.stat-box:hover {
  border-color: var(--color-brand-steel);
  box-shadow: 0 0 30px rgba(70, 130, 180, 0.15);
  transform: translateY(-5px);
}

.stat-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-gradient);
  opacity: 0.5;
}

.stat-number {
  font-size: 2.5rem;
  @media (min-width: 768px) {
    font-size: 3.5rem;
  }
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.5rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

/* Testimonials */
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 2.5rem;
  border-radius: 1.5rem;
  position: relative;
  transition: all 0.4s ease;
}

.testimonial-card:hover {
  border-color: var(--color-brand-steel);
  box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.testimonial-stars {
  color: #FFD700;
  display: flex;
  gap: 2px;
  margin-bottom: 1rem;
}

.testimonial-quote {
  font-size: 1.125rem;
  color: #e0e0e0;
  font-style: italic;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.testimonial-quote::before {
  content: '"';
  position: absolute;
  top: -1rem;
  left: -1rem;
  font-size: 4rem;
  color: rgba(70, 130, 180, 0.1);
  font-family: serif;
  z-index: -1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-brand-steel);
}

.testimonial-info h4 {
  font-size: 1rem;
  margin: 0;
  color: white;
}

.testimonial-info p {
  font-size: 0.8rem;
  margin: 0;
  color: var(--text-muted);
}

/* Service Area Hub */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.area-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.area-link:hover {
  color: var(--color-brand-steel);
}

.nav-link.active {
    color: var(--color-brand-steel);
    font-weight: 800;
}

.nav-link-mobile {
    transition: all 0.3s ease;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
}

.nav-link-mobile.active {
    background: rgba(70, 130, 180, 0.1);
    color: var(--color-brand-steel);
    border-left: 4px solid var(--color-brand-steel);
}

/* Custom Scrollbar for Submenu */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--color-brand-steel) rgba(255, 255, 255, 0.05);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #38bdf8, #0284c7);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #0ea5e9;
}

#mobile-menu {
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}

.mobile-submenu-container {
    background: #000;
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Technology Stack Carousel Styles */
@keyframes techMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-tech-scroll {
  display: flex;
  width: max-content;
  animation: techMarquee 38s linear infinite;
  will-change: transform;
}

.tech-carousel-viewport:hover .animate-tech-scroll,
.animate-tech-scroll:hover {
  animation-play-state: paused !important;
}

.tech-card {
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: rgba(11, 21, 54, 0.6);
  backdrop-filter: blur(12px);
  user-select: none;
}

.tech-card:hover {
  transform: translateY(-8px) scale(1.06);
  background: rgba(8, 14, 33, 0.95);
  box-shadow: 0 12px 30px -5px var(--tech-glow, rgba(56, 189, 248, 0.4)), 0 0 15px var(--tech-glow, rgba(56, 189, 248, 0.2));
  border-color: var(--tech-border, rgba(56, 189, 248, 0.6));
}

.tech-card:hover .tech-icon {
  transform: scale(1.2) rotate(4deg);
  filter: drop-shadow(0 0 10px var(--tech-glow, rgba(56, 189, 248, 0.6)));
}

.tech-card.dimmed {
  display: none !important;
}

.tech-card.highlighted {
  border-color: var(--color-brand-steel);
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.5);
  transform: translateY(-4px);
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.animate-scroll {
    animation: scroll 40s linear infinite;
}

.slider-track:hover {
    animation-play-state: paused;
}

/* Entrance Scroll Reveal Animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.reveal-left {
  transform: translateX(-35px);
}

.reveal-on-scroll.reveal-right {
  transform: translateX(35px);
}

.reveal-on-scroll.reveal-scale {
  transform: scale(0.94) translateY(20px);
}

.reveal-on-scroll.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) scale(1) !important;
}

/* Stagger Delays */
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-150 { transition-delay: 150ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-250 { transition-delay: 250ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }
.reveal-delay-500 { transition-delay: 500ms; }

/* Branded Skeleton & Spinner Loading System */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-loader {
  background: linear-gradient(
    90deg,
    rgba(24, 24, 27, 0.9) 0%,
    rgba(56, 189, 248, 0.12) 35%,
    rgba(255, 30, 39, 0.12) 65%,
    rgba(24, 24, 27, 0.9) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s infinite linear;
  border-radius: 0.5rem;
}

.skeleton-card {
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Branded Dual-Ring Glowing Spinner */
@keyframes spin-glow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.branded-spinner-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.branded-spinner {
  width: 48px;
  height: 48px;
  position: relative;
  display: inline-block;
}

.branded-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #38bdf8;
  border-right-color: rgba(56, 189, 248, 0.3);
  animation: spin-glow 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}

.branded-spinner::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: #ff1e27;
  border-left-color: rgba(255, 30, 39, 0.3);
  animation: spin-reverse 0.75s linear infinite;
  box-shadow: 0 0 12px rgba(255, 30, 39, 0.5);
}

/* Translucent Loading Overlay */
.content-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(4px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  transition: opacity 0.3s ease;
}

/* Accessibility fallback */
@media (prefers-reduced-motion: reduce) {
  .skeleton-loader {
    animation: none !important;
    background: #27272a !important;
  }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   AiCodingX Interactive High-Tech Logo Background Graphics & Animations
   ========================================================================== */

.logo-badge-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.85rem;
  border-radius: 0.85rem;
  background: rgba(8, 14, 33, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.3);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.15), inset 0 0 12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
}

.logo-badge-wrapper:hover {
  border-color: rgba(56, 189, 248, 0.8);
  box-shadow: 
    0 0 35px rgba(56, 189, 248, 0.45),
    0 0 18px rgba(255, 30, 39, 0.35),
    inset 0 0 18px rgba(56, 189, 248, 0.25);
  transform: translateY(-2px) scale(1.02);
}

.logo-badge-compact {
  padding: 0.3rem 0.6rem;
  border-radius: 0.65rem;
}

/* Layer 1: Ambient Multi-Color Radial Pulsing Glow */
.logo-bg-aura {
  position: absolute;
  inset: -15px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(56, 189, 248, 0.4) 0%,
    rgba(255, 30, 39, 0.22) 45%,
    transparent 70%
  );
  filter: blur(12px);
  opacity: 0.7;
  animation: logoAuraPulse 4s infinite ease-in-out alternate;
  pointer-events: none;
  z-index: 1;
}

.logo-badge-wrapper:hover .logo-bg-aura {
  opacity: 1;
  filter: blur(8px);
  animation-duration: 2s;
}

@keyframes logoAuraPulse {
  0% {
    transform: scale(0.9) rotate(0deg);
    opacity: 0.55;
    background: radial-gradient(
      circle at 30% 50%,
      rgba(56, 189, 248, 0.45) 0%,
      rgba(255, 30, 39, 0.18) 50%,
      transparent 75%
    );
  }
  50% {
    transform: scale(1.1) rotate(180deg);
    opacity: 0.9;
    background: radial-gradient(
      circle at 70% 50%,
      rgba(255, 30, 39, 0.4) 0%,
      rgba(56, 189, 248, 0.3) 50%,
      transparent 75%
    );
  }
  100% {
    transform: scale(0.95) rotate(360deg);
    opacity: 0.65;
    background: radial-gradient(
      circle at 50% 50%,
      rgba(56, 189, 248, 0.4) 0%,
      rgba(255, 30, 39, 0.22) 45%,
      transparent 70%
    );
  }
}

/* Layer 2: Animated Tech Matrix Grid */
.logo-bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(56, 189, 248, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 189, 248, 0.12) 1px, transparent 1px);
  background-size: 8px 8px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  opacity: 0.55;
  animation: logoGridMotion 10s infinite linear;
  pointer-events: none;
  z-index: 2;
}

@keyframes logoGridMotion {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 32px 32px;
  }
}

/* Layer 3: Rotating Cyber Circuit Orbit Ring (SVG) */
.logo-bg-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.logo-orbit-outer {
  transform-origin: 50% 50%;
  animation: logoOrbitSpin 14s infinite linear;
}

.logo-orbit-inner {
  transform-origin: 50% 50%;
  animation: logoInnerOrbitSpin 9s infinite linear reverse;
}

@keyframes logoOrbitSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes logoInnerOrbitSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Layer 4: Laser Light Sweep Animation */
.logo-laser-sweep {
  position: absolute;
  top: -50%;
  left: -100%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(56, 189, 248, 0.4) 45%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 30, 39, 0.4) 55%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: logoLaserPass 3.8s infinite cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 4;
}

@keyframes logoLaserPass {
  0% {
    left: -120%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  40% {
    left: 180%;
    opacity: 0;
  }
  100% {
    left: 180%;
    opacity: 0;
  }
}

/* Layer 5: Floating Energy Particles */
.logo-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.p-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
  opacity: 0;
  animation: logoParticleFloat 3s infinite ease-out;
}

.p-dot.p1 {
  left: 20%;
  bottom: 10%;
  animation-delay: 0.2s;
  background: #38bdf8;
}

.p-dot.p2 {
  left: 50%;
  bottom: 15%;
  animation-delay: 1.2s;
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff;
}

.p-dot.p3 {
  left: 80%;
  bottom: 10%;
  animation-delay: 2.1s;
  background: #ff1e27;
  box-shadow: 0 0 6px #ff1e27;
}

.p-dot.p4 {
  left: 35%;
  bottom: 5%;
  animation-delay: 2.8s;
  background: #38bdf8;
}

@keyframes logoParticleFloat {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  30% {
    opacity: 0.95;
  }
  100% {
    transform: translateY(-28px) scale(1.4);
    opacity: 0;
  }
}

/* Specular Glow on Logo Image */
.logo-img {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
  transition: all 0.3s ease;
}

.logo-badge-wrapper:hover .logo-img {
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.7)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}

/* Animated Social Media Icon Graphics & Backgrounds */
.social-icon-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.95));
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(56, 189, 248, 0.1);
}

.social-glow {
  position: absolute;
  inset: -10px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(56, 189, 248, 0.35) 0%,
    rgba(255, 30, 39, 0.2) 50%,
    transparent 75%
  );
  filter: blur(8px);
  opacity: 0.5;
  animation: socialAuraPulse 3.5s infinite ease-in-out alternate;
  pointer-events: none;
  z-index: 1;
}

.social-sweep {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
  z-index: 2;
  pointer-events: none;
}

.social-icon-badge:hover {
  border-color: rgba(56, 189, 248, 0.8);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 
    0 0 25px rgba(56, 189, 248, 0.6),
    0 0 12px rgba(255, 30, 39, 0.4),
    inset 0 0 12px rgba(56, 189, 248, 0.3);
}

.social-icon-badge:hover .social-glow {
  opacity: 1;
  filter: blur(5px);
  animation-duration: 1.5s;
}

.social-icon-badge:hover .social-sweep {
  left: 100%;
  transition: 0.7s ease-in-out;
}

@keyframes socialAuraPulse {
  0% {
    transform: scale(0.85) rotate(0deg);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.15) rotate(180deg);
    opacity: 0.85;
  }
  100% {
    transform: scale(0.9) rotate(360deg);
    opacity: 0.5;
  }
}

/* ==========================================================================
   BUSINESS GROWTH PACKAGES & PROMO STYLING
   ========================================================================== */

.package-card {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(8, 12, 22, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 1.25rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.package-card:hover {
  transform: translateY(-8px);
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.25);
}

.package-card-featured {
  background: linear-gradient(180deg, rgba(15, 28, 54, 0.95) 0%, rgba(9, 16, 32, 0.98) 100%);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.35), 0 15px 40px rgba(0, 0, 0, 0.7);
  transform: scale(1.03);
}

.package-card-featured:hover {
  transform: scale(1.05) translateY(-6px);
  box-shadow: 0 0 50px rgba(56, 189, 248, 0.5), 0 25px 55px rgba(0, 0, 0, 0.85);
}

.package-card-featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 1.35rem;
  background: linear-gradient(90deg, #38bdf8, #ff1e27, #38bdf8);
  background-size: 200% 200%;
  z-index: -1;
  animation: borderGlowGradient 4s linear infinite;
  opacity: 0.8;
}

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

.package-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.package-badge-featured {
  background: linear-gradient(90deg, #38bdf8, #2563eb);
  color: #ffffff;
  border: none;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
}

.feature-check-icon {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.modal-backdrop-blur {
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(12px);
}

/* ==========================================================================
   ALEX VOICE WIDGET (Vapi Web SDK) - see assets/js/vapi-widget.js
   ========================================================================== */

/* Zero-footprint positioning container, same trick as the old widget used - doesn't expand
   page height or leave empty space below the footer. */
#vapi-widget-container {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  /* Forces this container to establish its own fresh stacking context, so its children's
     z-index values (also set to the max safe value inline) can never be out-ranked by some
     other element elsewhere on the page establishing an unexpectedly high stacking context of
     its own (e.g. via transform/filter/will-change on an ancestor). */
  isolation: isolate;
}

#vapi-talk-btn,
#vapi-call-panel,
#vapi-call-backdrop,
#vapi-welcome-popup,
#vapi-welcome-backdrop {
  pointer-events: auto !important;
}

.vapi-trigger-badge {
  position: fixed;
  bottom: 1.75rem;
  left: 1.75rem;
  z-index: 99990;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.1rem;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(8, 12, 22, 0.98));
  border: 2px solid rgba(56, 189, 248, 0.5);
  border-radius: 9999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(56, 189, 248, 0.35);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(16px);
  /* Draw the eye on page load without staying distracting forever: a few
     finite pulses, then it settles into its normal resting state. */
  animation: vapiTriggerNotice 1.8s ease-in-out 3;
}

.vapi-trigger-badge:hover {
  transform: translateY(-4px) scale(1.04);
  border-color: #38bdf8;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), 0 0 30px rgba(56, 189, 248, 0.55);
}

.vapi-trigger-badge:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 3px;
}

.vapi-trigger-badge.hidden {
  display: none;
}

@keyframes vapiTriggerNotice {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(56, 189, 248, 0.35); }
  50% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 38px 6px rgba(56, 189, 248, 0.75); }
}

/* Below `xl` (1280px), partials/header.html shows a fixed "CALL NOW 24/7" bar
   (.mobile-sticky-bar, ~4.5rem tall) pinned to the very bottom of the screen. Lift the
   trigger button clear of it - the call panel's own equivalent offset is set inline via
   Tailwind classes in partials/voice-agent-widget.html instead (bottom-[10.5rem] xl:bottom-20),
   since it doesn't need the same cascade-ordering workaround this rule once did. Keep this
   breakpoint in sync with .mobile-sticky-bar's own xl:hidden - it drifted out of sync once
   already (was 1023px/lg, a leftover from before the header nav moved to the xl cutoff),
   which silently broke this for any 1024-1279px-wide device, phone or tablet. */
@media (max-width: 1279px) {
  .vapi-trigger-badge {
    bottom: 6.5rem;
  }
}

/* Orb: shared base for the small idle icon and the larger active-call orb. --vapi-vol (0-1,
   set from JS via the volume-level/local-volume-level SDK events) drives a live, audio-reactive
   pulse - no canvas/waveform library needed. Defined once so both states move identically. */
.vapi-orb {
  --vapi-vol: 0;
  position: relative;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
  flex-shrink: 0;
  transform: scale(calc(1 + var(--vapi-vol) * 0.18));
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background 0.3s ease;
}

.vapi-orb-idle {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
}

.vapi-orb-idle::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #38bdf8;
  animation: vapiPulseRing 2.5s infinite ease-out;
  opacity: 0.7;
}

@keyframes vapiPulseRing {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(0.9); opacity: 0; }
}

.vapi-orb-active {
  width: 3rem;
  height: 3rem;
  box-shadow: 0 0 calc(15px + var(--vapi-vol) * 25px) rgba(56, 189, 248, calc(0.6 + var(--vapi-vol) * 0.4));
}

/* Color states for the active orb + status pill, toggled via class from JS. Amber = connecting,
   emerald = listening/idle-in-call, sky = Alex speaking, red = error/muted. */
.vapi-orb-active.state-connecting { background: linear-gradient(135deg, #f59e0b, #d97706); }
.vapi-orb-active.state-listening { background: linear-gradient(135deg, #34d399, #059669); }
.vapi-orb-active.state-speaking { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.vapi-orb-active.state-error { background: linear-gradient(135deg, #f87171, #dc2626); }

#vapi-call-panel {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#vapi-call-panel.hidden {
  display: none;
}

/* Transcript bubbles - same visual language as the site's other chat surfaces. */
.vapi-transcript-bubble {
  max-width: 92%;
  padding: 0.6rem 0.9rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

.vapi-transcript-bubble.role-user {
  align-self: flex-end;
  background: linear-gradient(90deg, #38bdf8, #2563eb);
  color: #ffffff;
  border-bottom-right-radius: 0.25rem;
}

.vapi-transcript-bubble.role-assistant {
  align-self: flex-start;
  background: #111726;
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #e5e7eb;
  border-bottom-left-radius: 0.25rem;
}

.vapi-transcript-bubble.is-partial {
  opacity: 0.6;
}