/* ==========================================
   ENHANCED ANIMATIONS - KARDIA MEDIA
   Beautiful animations for hero sections and contact forms
   Theme-adaptive with light/dark mode support
   ========================================== */

/* ==========================================
   ANIMATED VERTICAL LINES
   ========================================== */

.vertical-lines {
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.vertical-line {
  width: 1px;
  height: 100%;
  position: relative;
  background: var(--border-color);
  opacity: 0.3;
}

/* Animated glow effect */
.vertical-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100px;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    var(--primary-color) 50%, 
    transparent 100%);
  opacity: 0.8;
  animation: lineGlow 3s ease-in-out infinite;
  filter: blur(2px);
}

/* Staggered animation delays for each line */
.vertical-line.line-1::before { animation-delay: 0s; }
.vertical-line.line-2::before { animation-delay: 0.3s; }
.vertical-line.line-3::before { animation-delay: 0.6s; }
.vertical-line.line-4::before { animation-delay: 0.9s; }
.vertical-line.line-5::before { animation-delay: 1.2s; }
.vertical-line.line-6::before { animation-delay: 1.5s; }
.vertical-line.line-7::before { animation-delay: 1.8s; }

@keyframes lineGlow {
  0%, 100% {
    top: -100px;
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Theme adjustments */
[data-theme="light"] .vertical-line {
  opacity: 0.2;
}

[data-theme="light"] .vertical-line::before {
  opacity: 0.6;
}

@keyframes testAnimation {
  0% { 
    transform: translateY(0) scale(1) rotate(0deg);
    background-position: 0% 50%;
  }
  50% { 
    transform: translateY(-20px) scale(1.1) rotate(5deg);
    background-position: 100% 50%;
  }
  100% { 
    transform: translateY(0) scale(1) rotate(0deg);
    background-position: 0% 50%;
  }
}

/* Animation Variables */
:root {
  /* Animation Colors - Light Theme */
  --anim-primary: #6366f1;
  --anim-secondary: #ec4899;
  --anim-accent: #06b6d4;
  --anim-glow: rgba(99, 102, 241, 0.8); /* Much more visible */
  --anim-glow-strong: rgba(99, 102, 241, 1.0);
  --anim-bubble: rgba(99, 102, 241, 0.3); /* More visible */
  --anim-bubble-border: rgba(99, 102, 241, 0.5);
  --anim-particle: rgba(99, 102, 241, 0.8);
  --anim-wave: rgba(99, 102, 241, 0.3);
  --anim-orb: rgba(99, 102, 241, 0.5); /* Much more visible */
}

/* Dark Theme Animation Variables */
[data-theme="dark"] {
  --anim-glow: rgba(139, 92, 246, 0.4);
  --anim-glow-strong: rgba(139, 92, 246, 0.8);
  --anim-bubble: rgba(139, 92, 246, 0.15);
  --anim-bubble-border: rgba(139, 92, 246, 0.25);
  --anim-particle: rgba(139, 92, 246, 0.5);
  --anim-wave: rgba(139, 92, 246, 0.15);
  --anim-orb: rgba(139, 92, 246, 0.25);
}

/* ==========================================
   HERO SECTION ANIMATIONS - HOME PAGE
   ========================================== */

.hero-animated-bg {
  position: absolute;
  top: 160px; /* Offset by navbar height */
  left: 0;
  width: 100%;
  height: calc(100vh - 160px); /* Full viewport height minus navbar */
  overflow: hidden;
  pointer-events: none;
  z-index: 1; /* Above background but below content */
}

/* Floating Orbs */
.floating-orbs {
  position: absolute;
  width: 100%;
  height: 100%;
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(139, 92, 246, 0.8) 0%, 
    rgba(99, 102, 241, 0.6) 50%, 
    rgba(99, 102, 241, 0.2) 80%, 
    transparent 100%);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(139, 92, 246, 0.3);
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  opacity: 0.9;
  z-index: 2; /* Above hero-animated-bg but below navbar */
  box-shadow: 
    0 0 30px rgba(139, 92, 246, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.orb-1 {
  width: 80px;
  height: 80px;
  top: 20%; /* Top left peripheral area */
  left: 8%;
  animation: floatOrb1 12s infinite;
}

.orb-2 {
  width: 120px;
  height: 120px;
  bottom: 15%; /* Bottom right peripheral area */
  right: 12%;
  animation: floatOrb2 15s infinite;
}

.orb-3 {
  width: 60px;
  height: 60px;
  top: 10%; /* Top right peripheral area */
  right: 15%;
  animation: floatOrb3 10s infinite;
}

.orb-4 {
  width: 90px;
  height: 90px;
  bottom: 25%; /* Bottom left peripheral area */
  left: 10%;
  animation: floatOrb4 14s infinite;
}

.orb-5 {
  width: 50px;
  height: 50px;
  top: 60%; /* Mid-left peripheral area */
  left: 5%;
  animation: floatOrb5 8s infinite;
}

@keyframes floatOrb1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  25% { transform: translate(15px, -10px) scale(1.05); opacity: 0.9; }
  50% { transform: translate(-10px, -20px) scale(0.95); opacity: 0.6; }
  75% { transform: translate(20px, -5px) scale(1.02); opacity: 0.8; }
}

@keyframes floatOrb2 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.6; }
  33% { transform: translate(-20px, 15px) scale(1.1) rotate(120deg); opacity: 0.8; }
  66% { transform: translate(25px, -10px) scale(0.9) rotate(240deg); opacity: 0.5; }
}

@keyframes floatOrb3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50% { transform: translate(-60px, 40px) scale(1.3); opacity: 0.3; }
}

@keyframes floatOrb4 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.7; }
  25% { transform: translate(20px, -30px) scale(1.1) rotate(90deg); opacity: 0.9; }
  50% { transform: translate(-30px, -60px) scale(0.9) rotate(180deg); opacity: 0.5; }
  75% { transform: translate(50px, -20px) scale(1.2) rotate(270deg); opacity: 0.6; }
}

@keyframes floatOrb5 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  33% { transform: translate(25px, 20px) scale(0.7); opacity: 0.4; }
  66% { transform: translate(-35px, -15px) scale(1.4); opacity: 0.7; }
}

/* Geometric Shapes */
.geometric-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.shape {
  position: absolute;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.triangle-1 {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 20px solid rgba(139, 92, 246, 0.4);
  top: 15%;
  right: 8%; /* Far right peripheral area */
  animation: rotateFloat 15s infinite;
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.3));
}

.circle-1 {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.6), rgba(236, 72, 153, 0.2));
  border: 1px solid rgba(236, 72, 153, 0.4);
  bottom: 10%; /* Bottom left peripheral area */
  left: 6%;
  animation: pulseFloat 12s infinite;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.3);
}

.square-1 {
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, rgba(6, 182, 212, 0.6), rgba(6, 182, 212, 0.3));
  transform: rotate(45deg);
  top: 40%;
  right: 10%; /* Right peripheral area */
  animation: morphShape 16s infinite;
  border: 1px solid rgba(6, 182, 212, 0.4);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.triangle-2 {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid var(--anim-bubble-border);
  bottom: 30%;
  right: 10%;
  animation: bounceRotate 12s infinite;
}

.circle-2 {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--anim-accent);
  opacity: 0.6;
  top: 50%;
  right: 50%;
  animation: scaleFloat 16s infinite;
}

@keyframes rotateFloat {
  0%, 100% { transform: rotate(0deg) translateY(0px); opacity: 0.7; }
  25% { transform: rotate(90deg) translateY(-20px); opacity: 0.4; }
  50% { transform: rotate(180deg) translateY(10px); opacity: 0.8; }
  75% { transform: rotate(270deg) translateY(-30px); opacity: 0.3; }
}

@keyframes pulseFloat {
  0%, 100% { transform: scale(1) translateY(0px); opacity: 0.6; }
  50% { transform: scale(1.5) translateY(-25px); opacity: 0.9; }
}

@keyframes morphShape {
  0%, 100% { transform: rotate(45deg) scale(1); border-radius: 0; }
  25% { transform: rotate(135deg) scale(1.2); border-radius: 20%; }
  50% { transform: rotate(225deg) scale(0.8); border-radius: 50%; }
  75% { transform: rotate(315deg) scale(1.1); border-radius: 10%; }
}

@keyframes bounceRotate {
  0%, 100% { transform: rotate(0deg) translateY(0px); }
  25% { transform: rotate(90deg) translateY(-15px); }
  50% { transform: rotate(180deg) translateY(-30px); }
  75% { transform: rotate(270deg) translateY(-10px); }
}

@keyframes scaleFloat {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  33% { transform: scale(1.8); opacity: 0.3; }
  66% { transform: scale(0.5); opacity: 0.9; }
}

/* Gradient Waves */
.gradient-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.wave-svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.wave-path-1 {
  fill: var(--anim-wave);
  animation: waveFlow1 8s ease-in-out infinite;
}

.wave-path-2 {
  fill: var(--anim-bubble);
  animation: waveFlow2 12s ease-in-out infinite reverse;
}

@keyframes waveFlow1 {
  0%, 100% { d: path("M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,133.3C960,128,1056,96,1152,90.7C1248,85,1344,107,1392,117.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"); }
  50% { d: path("M0,128L48,138.7C96,149,192,171,288,165.3C384,160,480,128,576,133.3C672,139,768,181,864,197.3C960,213,1056,203,1152,186.7C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"); }
}

@keyframes waveFlow2 {
  0%, 100% { d: path("M0,128L48,138.7C96,149,192,171,288,165.3C384,160,480,128,576,133.3C672,139,768,181,864,197.3C960,213,1056,203,1152,186.7C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"); }
  50% { d: path("M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,133.3C960,128,1056,96,1152,90.7C1248,85,1344,107,1392,117.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"); }
}

/* Particle System */
.particle-system {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(139, 92, 246, 0.4));
  border-radius: 50%;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  box-shadow: 0 0 6px rgba(139, 92, 246, 0.4);
}

.particle-1 { top: 10%; left: 20%; animation: particleFloat1 6s infinite; }
.particle-2 { top: 30%; right: 25%; animation: particleFloat2 8s infinite; }
.particle-3 { bottom: 40%; left: 30%; animation: particleFloat3 7s infinite; }
.particle-4 { top: 60%; right: 40%; animation: particleFloat1 9s infinite; }
.particle-5 { bottom: 20%; right: 20%; animation: particleFloat2 5s infinite; }
.particle-6 { top: 80%; left: 60%; animation: particleFloat3 10s infinite; }
.particle-7 { top: 25%; left: 70%; animation: particleFloat1 6.5s infinite; }
.particle-8 { bottom: 60%; right: 60%; animation: particleFloat2 7.5s infinite; }
.particle-9 { top: 70%; left: 10%; animation: particleFloat3 8.5s infinite; }
.particle-10 { bottom: 10%; left: 80%; animation: particleFloat1 9.5s infinite; }

@keyframes particleFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(50px, -100px) scale(1.5); opacity: 0.8; }
  90% { opacity: 1; }
}

@keyframes particleFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  15% { opacity: 0.7; }
  50% { transform: translate(-80px, -60px) scale(0.5); opacity: 1; }
  85% { opacity: 0.7; }
}

@keyframes particleFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  20% { opacity: 0.9; }
  50% { transform: translate(30px, -120px) scale(2); opacity: 0.4; }
  80% { opacity: 0.9; }
}

/* ==========================================
   SERVICES PAGE HERO ANIMATIONS
   ========================================== */

.services-animated-bg {
  position: absolute;
  top: 80px; /* Offset by the negative margin of services hero section */
  left: 0;
  width: 100%;
  height: calc(100% - 80px); /* Adjust height accordingly */
  overflow: hidden;
  pointer-events: none;
  z-index: -1; /* Below content but above services background */
}

/* Floating Service Icons */
.floating-service-icons {
  position: absolute;
  width: 100%;
  height: 100%;
}

.service-icon-float {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--anim-bubble);
  border: 2px solid var(--anim-bubble-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.service-icon-float i {
  font-size: 24px;
  color: var(--anim-primary);
}

.icon-1 { top: 15%; left: 10%; animation: serviceIconFloat1 12s infinite; }
.icon-2 { top: 25%; right: 20%; animation: serviceIconFloat2 15s infinite; }
.icon-3 { bottom: 30%; left: 15%; animation: serviceIconFloat3 10s infinite; }
.icon-4 { top: 60%; right: 15%; animation: serviceIconFloat1 14s infinite; }
.icon-5 { bottom: 20%; right: 30%; animation: serviceIconFloat2 8s infinite; }
.icon-6 { top: 40%; left: 70%; animation: serviceIconFloat3 16s infinite; }

@keyframes serviceIconFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.8; }
  33% { transform: translate(40px, -30px) rotate(120deg) scale(1.1); opacity: 1; }
  66% { transform: translate(-20px, 50px) rotate(240deg) scale(0.9); opacity: 0.6; }
}

@keyframes serviceIconFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.7; }
  25% { transform: translate(-50px, 20px) rotate(90deg) scale(1.2); opacity: 0.9; }
  50% { transform: translate(30px, -40px) rotate(180deg) scale(0.8); opacity: 0.5; }
  75% { transform: translate(60px, 10px) rotate(270deg) scale(1.1); opacity: 0.8; }
}

@keyframes serviceIconFloat3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.9; }
  50% { transform: translate(-70px, -60px) rotate(180deg) scale(1.3); opacity: 0.4; }
}

/* Morphing Shapes */
.morphing-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.morph-shape {
  position: absolute;
  background: var(--anim-glow);
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.shape-1 {
  width: 100px;
  height: 100px;
  top: 20%;
  right: 10%;
  animation: morphShape1 20s infinite;
}

.shape-2 {
  width: 80px;
  height: 80px;
  bottom: 25%;
  left: 20%;
  animation: morphShape2 25s infinite;
}

.shape-3 {
  width: 120px;
  height: 120px;
  top: 60%;
  right: 40%;
  animation: morphShape3 15s infinite;
}

@keyframes morphShape1 {
  0%, 100% { 
    border-radius: 50%; 
    transform: rotate(0deg) scale(1); 
    opacity: 0.6;
  }
  25% { 
    border-radius: 0; 
    transform: rotate(90deg) scale(1.2); 
    opacity: 0.8;
  }
  50% { 
    border-radius: 30px; 
    transform: rotate(180deg) scale(0.8); 
    opacity: 0.4;
  }
  75% { 
    border-radius: 10px; 
    transform: rotate(270deg) scale(1.1); 
    opacity: 0.7;
  }
}

@keyframes morphShape2 {
  0%, 100% { 
    border-radius: 20px; 
    transform: rotate(0deg) scale(1); 
    opacity: 0.7;
  }
  33% { 
    border-radius: 50%; 
    transform: rotate(120deg) scale(1.3); 
    opacity: 0.3;
  }
  66% { 
    border-radius: 5px; 
    transform: rotate(240deg) scale(0.9); 
    opacity: 0.9;
  }
}

@keyframes morphShape3 {
  0%, 100% { 
    border-radius: 40%; 
    transform: rotate(0deg) scale(1); 
    opacity: 0.5;
  }
  50% { 
    border-radius: 0; 
    transform: rotate(180deg) scale(1.4); 
    opacity: 0.8;
  }
}

/* Data Visualization Elements - DISABLED to avoid diagonal lines */
.data-viz-elements {
  display: none; /* Hide data visualization elements that create lines */
}

.data-point {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--anim-secondary);
  border-radius: 50%;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.point-1 { top: 30%; left: 20%; animation: dataPoint 4s infinite; }
.point-2 { top: 30%; left: 40%; animation: dataPoint 4s infinite 1s; }
.point-3 { top: 50%; right: 25%; animation: dataPoint 4s infinite 2s; }
.point-4 { bottom: 30%; left: 60%; animation: dataPoint 4s infinite 3s; }

@keyframes dataLine1 {
  0%, 100% { transform: scaleX(0) translateX(0); opacity: 0; }
  25% { transform: scaleX(1) translateX(0); opacity: 0.5; }
  75% { transform: scaleX(1) translateX(50px); opacity: 0.3; }
}

@keyframes dataLine2 {
  0%, 100% { transform: scaleX(0) translateX(0); opacity: 0; }
  30% { transform: scaleX(1) translateX(0); opacity: 0.4; }
  70% { transform: scaleX(1) translateX(-30px); opacity: 0.2; }
}

@keyframes dataLine3 {
  0%, 100% { transform: scaleX(0) translateX(0); opacity: 0; }
  20% { transform: scaleX(1) translateX(0); opacity: 0.6; }
  80% { transform: scaleX(1) translateX(20px); opacity: 0.3; }
}

@keyframes dataPoint {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(2); opacity: 0.3; }
}

/* Digital Rain Effect */
.digital-rain {
  position: absolute;
  width: 100%;
  height: 100%;
}

.rain-column {
  position: absolute;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, var(--anim-accent) 50%, transparent 100%);
  opacity: 0.3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.column-1 { left: 15%; animation: digitalRain1 3s infinite; }
.column-2 { left: 30%; animation: digitalRain2 4s infinite; }
.column-3 { left: 50%; animation: digitalRain1 5s infinite; }
.column-4 { left: 70%; animation: digitalRain2 3.5s infinite; }
.column-5 { left: 85%; animation: digitalRain1 4.5s infinite; }

@keyframes digitalRain1 {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateY(100%); opacity: 0; }
}

@keyframes digitalRain2 {
  0% { transform: translateY(-100%); opacity: 0; }
  15% { opacity: 0.6; }
  85% { opacity: 0.6; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* ==========================================
   SECTION ANIMATIONS - THROUGHOUT PAGE
   ========================================== */

/* Universal Section Animation Container */
.section-animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Universal Section Orbs */
.section-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(139, 92, 246, 0.6) 0%, 
    rgba(99, 102, 241, 0.4) 50%, 
    rgba(99, 102, 241, 0.2) 80%, 
    transparent 100%);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(139, 92, 246, 0.2);
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  opacity: 0.8;
  z-index: 2;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

/* Universal Section Shapes */
.section-shape {
  position: absolute;
  animation-duration: 18s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  opacity: 0.6;
  z-index: 2;
}

/* Universal Section Particles */
.section-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6), rgba(139, 92, 246, 0.3));
  border-radius: 50%;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  box-shadow: 0 0 4px rgba(139, 92, 246, 0.3);
  z-index: 2;
}

/* About Section Specific Animations */
.about-orb-1 {
  width: 60px;
  height: 60px;
  top: 20%;
  left: 8%;
  animation: sectionFloat1 14s infinite;
}

.about-orb-2 {
  width: 80px;
  height: 80px;
  bottom: 25%;
  right: 10%;
  animation: sectionFloat2 16s infinite;
}

.about-orb-3 {
  width: 45px;
  height: 45px;
  top: 60%;
  left: 5%;
  animation: sectionFloat3 12s infinite;
}

.about-triangle {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid rgba(236, 72, 153, 0.4);
  top: 15%;
  right: 12%;
  animation: sectionRotate 20s infinite;
  filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.3));
}

.about-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.5), rgba(6, 182, 212, 0.2));
  border: 1px solid rgba(6, 182, 212, 0.3);
  bottom: 15%;
  left: 15%;
  animation: sectionPulse 14s infinite;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

.about-square {
  width: 16px;
  height: 16px;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.5), rgba(139, 92, 246, 0.2));
  transform: rotate(45deg);
  top: 40%;
  right: 8%;
  animation: sectionMorph 18s infinite;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* About Particles */
.about-particle-1 { top: 25%; left: 12%; animation: sectionParticleFloat1 8s infinite; }
.about-particle-2 { top: 45%; right: 15%; animation: sectionParticleFloat2 10s infinite; }
.about-particle-3 { bottom: 35%; left: 8%; animation: sectionParticleFloat3 9s infinite; }
.about-particle-4 { top: 70%; right: 12%; animation: sectionParticleFloat1 11s infinite; }
.about-particle-5 { bottom: 20%; right: 8%; animation: sectionParticleFloat2 7s infinite; }

/* Services Section Specific Animations */
.services-orb-1 {
  width: 70px;
  height: 70px;
  top: 10%;
  left: 6%;
  animation: sectionFloat2 15s infinite;
}

.services-orb-2 {
  width: 90px;
  height: 90px;
  top: 50%;
  right: 8%;
  animation: sectionFloat1 13s infinite;
}

.services-orb-3 {
  width: 55px;
  height: 55px;
  bottom: 30%;
  left: 10%;
  animation: sectionFloat3 17s infinite;
}

.services-orb-4 {
  width: 40px;
  height: 40px;
  bottom: 10%;
  right: 15%;
  animation: sectionFloat2 11s infinite;
}

.services-triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 16px solid rgba(139, 92, 246, 0.4);
  top: 25%;
  right: 12%;
  animation: sectionRotate 22s infinite;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.3));
}

.services-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.5), rgba(236, 72, 153, 0.2));
  top: 75%;
  left: 12%;
  animation: sectionPulse 16s infinite;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.3);
}

.services-hexagon {
  width: 20px;
  height: 20px;
  background: rgba(6, 182, 212, 0.4);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  top: 35%;
  left: 8%;
  animation: sectionMorph 20s infinite;
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.3));
}

/* Services Particles */
.services-particle-1 { top: 15%; left: 15%; animation: sectionParticleFloat1 9s infinite; }
.services-particle-2 { top: 35%; right: 18%; animation: sectionParticleFloat2 11s infinite; }
.services-particle-3 { top: 65%; left: 12%; animation: sectionParticleFloat3 8s infinite; }
.services-particle-4 { bottom: 25%; right: 10%; animation: sectionParticleFloat1 12s infinite; }
.services-particle-5 { top: 80%; right: 14%; animation: sectionParticleFloat2 10s infinite; }
.services-particle-6 { bottom: 15%; left: 6%; animation: sectionParticleFloat3 13s infinite; }

/* CTA Section Specific Animations */
.cta-orb-1 {
  width: 85px;
  height: 85px;
  top: 15%;
  right: 10%;
  animation: sectionFloat1 12s infinite;
  background: radial-gradient(circle at 30% 30%, 
    rgba(236, 72, 153, 0.7) 0%, 
    rgba(236, 72, 153, 0.4) 50%, 
    rgba(236, 72, 153, 0.1) 80%, 
    transparent 100%);
  box-shadow: 0 0 25px rgba(236, 72, 153, 0.3);
}

.cta-orb-2 {
  width: 65px;
  height: 65px;
  bottom: 20%;
  left: 8%;
  animation: sectionFloat3 14s infinite;
}

.cta-orb-3 {
  width: 50px;
  height: 50px;
  top: 60%;
  right: 15%;
  animation: sectionFloat2 10s infinite;
}

.cta-star {
  width: 18px;
  height: 18px;
  background: rgba(255, 215, 0, 0.6);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  top: 25%;
  left: 12%;
  animation: sectionRotate 16s infinite;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
}

.cta-diamond {
  width: 16px;
  height: 16px;
  background: linear-gradient(45deg, rgba(6, 182, 212, 0.6), rgba(6, 182, 212, 0.3));
  transform: rotate(45deg);
  bottom: 25%;
  right: 8%;
  animation: sectionMorph 18s infinite;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}

.cta-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.6), rgba(139, 92, 246, 0.2));
  top: 70%;
  left: 10%;
  animation: sectionPulse 12s infinite;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

/* CTA Particles */
.cta-particle-1 { top: 30%; left: 15%; animation: sectionParticleFloat3 7s infinite; }
.cta-particle-2 { bottom: 35%; right: 12%; animation: sectionParticleFloat1 9s infinite; }
.cta-particle-3 { top: 80%; right: 18%; animation: sectionParticleFloat2 8s infinite; }
.cta-particle-4 { bottom: 15%; left: 12%; animation: sectionParticleFloat3 11s infinite; }

/* Section Animation Keyframes */
@keyframes sectionFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  33% { transform: translate(12px, -8px) scale(1.05); opacity: 0.8; }
  66% { transform: translate(-8px, 15px) scale(0.95); opacity: 0.5; }
}

@keyframes sectionFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.7; }
  25% { transform: translate(-10px, 12px) scale(1.08) rotate(90deg); opacity: 0.9; }
  50% { transform: translate(15px, -6px) scale(0.92) rotate(180deg); opacity: 0.4; }
  75% { transform: translate(8px, 10px) scale(1.03) rotate(270deg); opacity: 0.6; }
}

@keyframes sectionFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50% { transform: translate(-15px, -20px) scale(1.15); opacity: 0.3; }
}

@keyframes sectionRotate {
  0%, 100% { transform: rotate(0deg) translateY(0px); opacity: 0.5; }
  25% { transform: rotate(90deg) translateY(-8px); opacity: 0.7; }
  50% { transform: rotate(180deg) translateY(5px); opacity: 0.8; }
  75% { transform: rotate(270deg) translateY(-12px); opacity: 0.4; }
}

@keyframes sectionPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 0.9; }
}

@keyframes sectionMorph {
  0%, 100% { transform: rotate(45deg) scale(1); border-radius: 0; opacity: 0.6; }
  33% { transform: rotate(135deg) scale(1.2); border-radius: 30%; opacity: 0.8; }
  66% { transform: rotate(225deg) scale(0.8); border-radius: 50%; opacity: 0.4; }
}

@keyframes sectionParticleFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  25% { opacity: 0.8; }
  50% { transform: translate(8px, -15px) scale(1.2); opacity: 0.6; }
  75% { opacity: 0.9; }
}

@keyframes sectionParticleFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  30% { opacity: 0.7; }
  50% { transform: translate(-12px, -10px) scale(0.8); opacity: 1; }
  70% { opacity: 0.5; }
}

@keyframes sectionParticleFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  20% { opacity: 0.9; }
  50% { transform: translate(6px, -20px) scale(1.5); opacity: 0.4; }
  80% { opacity: 0.8; }
}

/* ==========================================
   SECTION POSITIONING FOR ANIMATIONS
   ========================================== */

/* Ensure sections are positioned relative for absolute animation containers */
.about, .services, .cta {
  position: relative;
  overflow: hidden;
}

/* About Section Background */
.about-animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Services Section Background */
.services .section-animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* CTA Section Background */
.cta-animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Ensure section content is above animations */
.about-container,
.services-container,
.cta-container {
  position: relative;
  z-index: 10;
}

/* ==========================================
   SERVICES PAGE ANIMATIONS
   ========================================== */

/* Services Page Section Positioning */
.services-showcase, .services-cta, .contact {
  position: relative;
  overflow: hidden;
}

/* Contact Page Section Positioning */
.contact-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* Ensure services-showcase has proper height and positioning for vertical lines */
.services-showcase {
  min-height: 100vh;
  position: relative;
}

/* Services Showcase Animations */
.services-showcase-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.services-cta-bg, .services-contact-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Tech Orbs with Icons */
.tech-orb-1, .tech-orb-2, .tech-orb-3, .tech-orb-4,
.innovation-orb-1, .innovation-orb-2, .innovation-orb-3,
.comm-orb-1, .comm-orb-2, .comm-orb-3 {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, 
    rgba(99, 102, 241, 0.8) 0%, 
    rgba(139, 92, 246, 0.6) 50%, 
    rgba(99, 102, 241, 0.3) 80%, 
    transparent 100%);
  border: 2px solid rgba(99, 102, 241, 0.4);
  box-shadow: 
    0 0 30px rgba(99, 102, 241, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  z-index: 3;
}

.orb-core {
  width: 60%;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
}

.orb-core i {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 10px rgba(99, 102, 241, 0.8);
}

/* Tech Orb Positioning and Animations */
.tech-orb-1 {
  width: 80px;
  height: 80px;
  top: 10%;
  left: 8%;
  animation: techFloat1 16s infinite;
}

.tech-orb-2 {
  width: 100px;
  height: 100px;
  top: 40%;
  right: 6%;
  animation: techFloat2 18s infinite;
  background: radial-gradient(circle at 30% 30%, 
    rgba(236, 72, 153, 0.8) 0%, 
    rgba(219, 39, 119, 0.6) 50%, 
    rgba(236, 72, 153, 0.3) 80%, 
    transparent 100%);
  border-color: rgba(236, 72, 153, 0.4);
  box-shadow: 
    0 0 30px rgba(236, 72, 153, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.tech-orb-3 {
  width: 65px;
  height: 65px;
  bottom: 25%;
  left: 12%;
  animation: techFloat3 14s infinite;
}

.tech-orb-4 {
  width: 85px;
  height: 85px;
  top: 70%;
  right: 15%;
  animation: techFloat1 20s infinite;
  background: radial-gradient(circle at 30% 30%, 
    rgba(6, 182, 212, 0.8) 0%, 
    rgba(8, 145, 178, 0.6) 50%, 
    rgba(6, 182, 212, 0.3) 80%, 
    transparent 100%);
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 
    0 0 30px rgba(6, 182, 212, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Data Flow Lines - DISABLED to avoid intersecting lines */
.data-flow-lines {
  display: none; /* Hide diagonal flow lines that intersect with content */
}

.flow-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(99, 102, 241, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.8);
  animation: flowDot 8s infinite;
}

/* Tech Particles */
.tech-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.tech-particle {
  position: absolute;
  color: rgba(99, 102, 241, 0.8);
  font-weight: 600;
  font-size: 0.9rem;
  text-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.particle-1 {
  top: 15%;
  left: 20%;
  animation: techParticleFloat1 12s infinite;
}

.particle-2 {
  top: 35%;
  right: 25%;
  animation: techParticleFloat2 14s infinite;
  color: rgba(236, 72, 153, 0.8);
  text-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
}

.particle-3 {
  bottom: 40%;
  left: 15%;
  animation: techParticleFloat3 16s infinite;
  color: rgba(6, 182, 212, 0.8);
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}

.particle-4 {
  top: 60%;
  left: 45%;
  animation: techParticleFloat1 10s infinite;
  font-size: 1.2rem;
}

.particle-5 {
  top: 25%;
  right: 15%;
  animation: techParticleFloat2 18s infinite;
  font-size: 1.1rem;
}

.particle-6 {
  bottom: 20%;
  right: 30%;
  animation: techParticleFloat3 13s infinite;
  font-size: 1rem;
}

.particle-7 {
  top: 80%;
  left: 35%;
  animation: techParticleFloat1 20s infinite;
  font-size: 1.3rem;
  color: rgba(255, 215, 0, 0.8);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* Circuit Board Elements - DISABLED to avoid diagonal lines */
.circuit-elements {
  display: none; /* Hide circuit elements that create diagonal lines */
}

/* Innovation Orbs (CTA Section) */
.innovation-orb-1 {
  width: 90px;
  height: 90px;
  top: 20%;
  right: 10%;
  animation: innovationFloat1 14s infinite;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255, 215, 0, 0.8) 0%, 
    rgba(255, 193, 7, 0.6) 50%, 
    rgba(255, 215, 0, 0.3) 80%, 
    transparent 100%);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 
    0 0 30px rgba(255, 215, 0, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.innovation-orb-2 {
  width: 75px;
  height: 75px;
  bottom: 25%;
  left: 8%;
  animation: innovationFloat2 16s infinite;
}

.innovation-orb-3 {
  width: 85px;
  height: 85px;
  top: 60%;
  right: 20%;
  animation: innovationFloat3 12s infinite;
  background: radial-gradient(circle at 30% 30%, 
    rgba(34, 197, 94, 0.8) 0%, 
    rgba(22, 163, 74, 0.6) 50%, 
    rgba(34, 197, 94, 0.3) 80%, 
    transparent 100%);
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 
    0 0 30px rgba(34, 197, 94, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Success Indicators */
.success-indicators {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.success-badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.badge-1 {
  top: 15%;
  left: 15%;
  animation: successFloat1 12s infinite;
}

.badge-2 {
  top: 50%;
  left: 10%;
  animation: successFloat2 14s infinite;
}

.badge-3 {
  bottom: 20%;
  right: 12%;
  animation: successFloat3 16s infinite;
}

.success-badge i {
  font-size: 1.2rem;
  margin-bottom: 4px;
  color: rgba(255, 215, 0, 0.9);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

/* Energy Particles */
.energy-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.energy-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(99, 102, 241, 0.6) 50%, 
    transparent 100%);
  border-radius: 50%;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.energy-1 {
  top: 20%;
  left: 25%;
  animation: energyFloat1 8s infinite;
}

.energy-2 {
  top: 60%;
  right: 20%;
  animation: energyFloat2 10s infinite;
}

.energy-3 {
  bottom: 30%;
  left: 40%;
  animation: energyFloat3 12s infinite;
}

.energy-4 {
  top: 40%;
  right: 35%;
  animation: energyFloat1 14s infinite;
}

.energy-5 {
  bottom: 15%;
  right: 45%;
  animation: energyFloat2 9s infinite;
}

/* Communication Orbs (Contact Section) */
.comm-orb-1 {
  width: 80px;
  height: 80px;
  top: 25%;
  left: 10%;
  animation: commFloat1 15s infinite;
}

.comm-orb-2 {
  width: 70px;
  height: 70px;
  top: 60%;
  right: 15%;
  animation: commFloat2 17s infinite;
  background: radial-gradient(circle at 30% 30%, 
    rgba(34, 197, 94, 0.8) 0%, 
    rgba(22, 163, 74, 0.6) 50%, 
    rgba(34, 197, 94, 0.3) 80%, 
    transparent 100%);
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 
    0 0 30px rgba(34, 197, 94, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.comm-orb-3 {
  width: 85px;
  height: 85px;
  bottom: 20%;
  left: 20%;
  animation: commFloat3 13s infinite;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255, 215, 0, 0.8) 0%, 
    rgba(255, 193, 7, 0.6) 50%, 
    rgba(255, 215, 0, 0.3) 80%, 
    transparent 100%);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 
    0 0 30px rgba(255, 215, 0, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Connection Lines - DISABLED to avoid diagonal intersections */
.connection-lines {
  display: none; /* Hide connection lines that intersect with content */
}

/* Trust Particles */
.trust-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.trust-particle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  backdrop-filter: blur(5px);
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.trust-1 {
  top: 20%;
  right: 20%;
  animation: trustFloat1 10s infinite;
}

.trust-2 {
  top: 70%;
  left: 30%;
  animation: trustFloat2 12s infinite;
}

.trust-3 {
  bottom: 30%;
  right: 25%;
  animation: trustFloat3 14s infinite;
}

.trust-4 {
  top: 45%;
  left: 15%;
  animation: trustFloat1 16s infinite;
}

.trust-particle i {
  font-size: 0.9rem;
  color: rgba(255, 215, 0, 0.8);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Services Page Animation Keyframes */
@keyframes techFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.8; }
  25% { transform: translate(15px, -10px) scale(1.05) rotate(90deg); opacity: 1; }
  50% { transform: translate(-10px, 20px) scale(0.95) rotate(180deg); opacity: 0.6; }
  75% { transform: translate(20px, 5px) scale(1.02) rotate(270deg); opacity: 0.9; }
}

@keyframes techFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  33% { transform: translate(-20px, -15px) scale(1.08); opacity: 0.7; }
  66% { transform: translate(25px, 10px) scale(0.92); opacity: 1; }
}

@keyframes techFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.7; }
  50% { transform: translate(-15px, -25px) scale(1.15) rotate(180deg); opacity: 0.9; }
}

@keyframes dataFlow1 {
  0% { background-position: -200px 0; opacity: 0; }
  50% { opacity: 1; }
  100% { background-position: 200px 0; opacity: 0; }
}

@keyframes dataFlow2 {
  0% { background-position: 200px 0; opacity: 0; }
  50% { opacity: 1; }
  100% { background-position: -200px 0; opacity: 0; }
}

@keyframes flowDot {
  0% { left: 0; opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes techParticleFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  25% { opacity: 0.8; }
  50% { transform: translate(10px, -20px) scale(1.2); opacity: 1; }
  75% { opacity: 0.6; }
}

@keyframes techParticleFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  30% { opacity: 0.9; }
  50% { transform: translate(-15px, -15px) scale(0.8); opacity: 0.7; }
  70% { opacity: 1; }
}

@keyframes techParticleFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translate(8px, -25px) scale(1.5); opacity: 0.5; }
  80% { opacity: 0.8; }
}

@keyframes circuitPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.5); opacity: 1; }
}

@keyframes circuitFlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

@keyframes innovationFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.8; }
  33% { transform: translate(-12px, 18px) scale(1.1) rotate(120deg); opacity: 1; }
  66% { transform: translate(18px, -8px) scale(0.9) rotate(240deg); opacity: 0.7; }
}

@keyframes innovationFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  50% { transform: translate(20px, -30px) scale(1.2); opacity: 0.6; }
}

@keyframes innovationFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.8; }
  25% { transform: translate(10px, -15px) scale(1.05) rotate(90deg); opacity: 1; }
  75% { transform: translate(-15px, 10px) scale(0.95) rotate(270deg); opacity: 0.7; }
}

@keyframes successFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50% { transform: translate(-8px, -12px) scale(1.1); opacity: 1; }
}

@keyframes successFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  33% { transform: translate(12px, -8px) scale(0.95); opacity: 0.7; }
  66% { transform: translate(-8px, 15px) scale(1.05); opacity: 1; }
}

@keyframes successFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50% { transform: translate(15px, -20px) scale(1.15); opacity: 0.6; }
}

@keyframes energyFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  25% { opacity: 1; }
  50% { transform: translate(5px, -10px) scale(1.5); opacity: 0.8; }
  75% { opacity: 0.6; }
}

@keyframes energyFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  30% { opacity: 0.9; }
  50% { transform: translate(-8px, -8px) scale(1.2); opacity: 1; }
  70% { opacity: 0.4; }
}

@keyframes energyFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  20% { opacity: 0.8; }
  50% { transform: translate(3px, -15px) scale(1.8); opacity: 0.3; }
  80% { opacity: 1; }
}

@keyframes commFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.8; }
  50% { transform: translate(-18px, 12px) scale(1.1) rotate(180deg); opacity: 1; }
}

@keyframes commFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  33% { transform: translate(15px, -20px) scale(0.95); opacity: 0.7; }
  66% { transform: translate(-10px, 8px) scale(1.05); opacity: 1; }
}

@keyframes commFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.8; }
  25% { transform: translate(-8px, -15px) scale(1.08) rotate(90deg); opacity: 1; }
  75% { transform: translate(12px, 5px) scale(0.92) rotate(270deg); opacity: 0.6; }
}

@keyframes connectionPulse {
  0%, 100% { opacity: 0.3; transform: scaleX(0); }
  50% { opacity: 0.8; transform: scaleX(1); }
}

@keyframes trustFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(-10px, -15px) scale(1.2); opacity: 1; }
}

@keyframes trustFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  33% { transform: translate(12px, -8px) scale(0.9); opacity: 0.6; }
  66% { transform: translate(-8px, 12px) scale(1.1); opacity: 1; }
}

@keyframes trustFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  50% { transform: translate(8px, -20px) scale(1.15); opacity: 0.5; }
}

@keyframes orbCorePulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes circuitRipple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* ==========================================
   CONTACT FORM ANIMATIONS
   ========================================== */

.contact-form-wrapper {
  position: relative;
  background: var(--bg-secondary);
  border-radius: var(--element-border-radius);
  padding: 2rem;
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.form-animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Floating Bubbles */
.floating-bubbles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  background: var(--anim-bubble);
  border: 1px solid var(--anim-bubble-border);
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.bubble-1 {
  width: 40px;
  height: 40px;
  top: 10%;
  left: 10%;
  animation: bubbleFloat1 6s infinite;
}

.bubble-2 {
  width: 25px;
  height: 25px;
  top: 30%;
  right: 15%;
  animation: bubbleFloat2 8s infinite;
}

.bubble-3 {
  width: 35px;
  height: 35px;
  bottom: 20%;
  left: 20%;
  animation: bubbleFloat1 7s infinite;
}

.bubble-4 {
  width: 20px;
  height: 20px;
  top: 60%;
  right: 25%;
  animation: bubbleFloat2 5s infinite;
}

.bubble-5 {
  width: 30px;
  height: 30px;
  bottom: 40%;
  left: 60%;
  animation: bubbleFloat1 9s infinite;
}

.bubble-6 {
  width: 45px;
  height: 45px;
  top: 80%;
  right: 10%;
  animation: bubbleFloat2 10s infinite;
}

@keyframes bubbleFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  33% { transform: translate(20px, -30px) scale(1.2); opacity: 0.8; }
  66% { transform: translate(-15px, -60px) scale(0.8); opacity: 0.4; }
}

@keyframes bubbleFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  25% { transform: translate(-25px, -20px) scale(1.1); opacity: 0.9; }
  50% { transform: translate(30px, -50px) scale(0.9); opacity: 0.3; }
  75% { transform: translate(-10px, -30px) scale(1.3); opacity: 0.6; }
}

/* Connection Lines */
.connection-lines {
  position: absolute;
  width: 100%;
  height: 100%;
}

.connection-svg {
  width: 100%;
  height: 100%;
  opacity: 0.4;
}

.connection-line {
  stroke: var(--anim-primary);
  stroke-width: 1;
  opacity: 0.3;
  animation: connectionFlow 8s ease-in-out infinite;
}

.line-1 {
  animation-delay: 0s;
}

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

.connection-dot {
  fill: var(--anim-secondary);
  animation: connectionPulse 2s ease-in-out infinite;
}

.dot-1 { animation-delay: 0s; }
.dot-2 { animation-delay: 0.3s; }
.dot-3 { animation-delay: 0.6s; }
.dot-4 { animation-delay: 0.9s; }
.dot-5 { animation-delay: 1.2s; }
.dot-6 { animation-delay: 1.5s; }

@keyframes connectionFlow {
  0%, 100% { stroke-dasharray: 0 100; opacity: 0.2; }
  50% { stroke-dasharray: 100 0; opacity: 0.6; }
}

@keyframes connectionPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(2); opacity: 0.3; }
}

/* Glowing Orbs */
.glowing-orbs {
  position: absolute;
  width: 100%;
  height: 100%;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--anim-glow) 0%, transparent 70%);
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.orb-1 {
  width: 80px;
  height: 80px;
  top: 15%;
  right: 10%;
  animation: glowPulse1 4s infinite;
}

.orb-2 {
  width: 60px;
  height: 60px;
  bottom: 25%;
  left: 15%;
  animation: glowPulse2 6s infinite;
}

.orb-3 {
  width: 100px;
  height: 100px;
  top: 50%;
  left: 80%;
  animation: glowPulse1 5s infinite;
}

@keyframes glowPulse1 {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.5); opacity: 0.8; }
}

@keyframes glowPulse2 {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  33% { transform: scale(1.8); opacity: 0.6; }
  66% { transform: scale(0.8); opacity: 0.9; }
}

/* Enhanced Form Styles */
.enhanced-form {
  position: relative;
  z-index: 1;
}

.floating-label {
  position: relative;
  margin-bottom: 2rem;
}

.form-input {
  width: 100%;
  padding: 1.25rem 1rem 0.75rem;
  border: none;
  border-radius: var(--element-border-radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: var(--font-secondary);
  transition: all var(--transition-medium);
  outline: none;
  box-shadow: 0 2px 8px var(--shadow-color);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  padding-top: 1.5rem;
}

.form-label {
  position: absolute;
  top: 1.25rem;
  left: 1rem;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 500;
  pointer-events: none;
  transition: all var(--transition-medium);
  transform-origin: left top;
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
  transform: translateY(-0.75rem) scale(0.8);
  color: var(--anim-primary);
  font-weight: 600;
}

.form-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--border-color);
  border-radius: 1px;
}

.form-highlight {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--anim-primary), var(--anim-secondary));
  border-radius: 1px;
  transition: all var(--transition-medium);
  transform: translateX(-50%);
}

.form-input:focus ~ .form-highlight {
  width: 100%;
}

.form-input:focus {
  background: var(--bg-secondary);
  box-shadow: 0 4px 20px var(--anim-glow);
  transform: translateY(-2px);
}

/* Enhanced Submit Button */
.enhanced-submit-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--anim-primary), var(--anim-secondary));
  border: none;
  transform: translateY(0);
  transition: all var(--transition-medium);
}

.enhanced-submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px var(--anim-glow-strong);
}

.btn-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.enhanced-submit-btn:active .btn-ripple {
  width: 300px;
  height: 300px;
}

.btn-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--transition-medium);
}

.enhanced-submit-btn:hover .btn-glow {
  left: 100%;
}

.enhanced-note {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  opacity: 0.8;
}

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

@media (max-width: 768px) {
  .hero-animated-bg,
  .services-animated-bg {
    opacity: 0.6;
  }
  
  .orb {
    width: 60px !important;
    height: 60px !important;
  }
  
  .service-icon-float {
    width: 40px !important;
    height: 40px !important;
  }
  
  .service-icon-float i {
    font-size: 18px;
  }
  
  .bubble {
    width: 20px !important;
    height: 20px !important;
  }
  
  .contact-form-wrapper {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero-animated-bg,
  .services-animated-bg,
  .form-animated-bg {
    opacity: 0.4;
  }
  
  .floating-orbs,
  .floating-service-icons,
  .floating-bubbles {
    display: none;
  }
}

/* ==========================================
   VERTICAL LINES - FULL HEIGHT SPANS
   ========================================== */

/* Main Vertical Lines Container - Global */
.vertical-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 0; /* Behind all content */
  overflow: hidden;
}

/* Individual Vertical Lines */
.vertical-line {
  position: absolute;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(99, 102, 241, 0.3) 10%,
    rgba(99, 102, 241, 0.6) 30%,
    rgba(99, 102, 241, 0.8) 50%,
    rgba(99, 102, 241, 0.6) 70%,
    rgba(99, 102, 241, 0.3) 90%,
    transparent 100%
  );
  opacity: 0.4;
  animation: verticalFlow 8s ease-in-out infinite;
}

/* Dark theme adaptation */
[data-theme="dark"] .vertical-line {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(139, 92, 246, 0.2) 10%,
    rgba(139, 92, 246, 0.4) 30%,
    rgba(139, 92, 246, 0.6) 50%,
    rgba(139, 92, 246, 0.4) 70%,
    rgba(139, 92, 246, 0.2) 90%,
    transparent 100%
  );
  opacity: 0.3;
}

/* Line positioning across viewport - 7 lines evenly distributed */
.vertical-line.line-1 {
  left: 10%;
  animation-delay: 0s;
}

.vertical-line.line-2 {
  left: 22%;
  animation-delay: 1.2s;
}

.vertical-line.line-3 {
  left: 34%;
  animation-delay: 2.4s;
}

.vertical-line.line-4 {
  left: 50%;
  animation-delay: 3.6s;
}

.vertical-line.line-5 {
  left: 66%;
  animation-delay: 4.8s;
}

.vertical-line.line-6 {
  left: 78%;
  animation-delay: 6s;
}

.vertical-line.line-7 {
  left: 90%;
  animation-delay: 7.2s;
}

/* Section-specific vertical lines (in addition to global ones) */
.hero-lines,
.about-lines,
.services-lines,
.cta-lines,
.contact-lines,
.services-hero-lines,
.services-showcase-lines,
.services-cta-lines,
.services-contact-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10; /* Higher z-index to ensure visibility */
  overflow: hidden;
}

/* Specific positioning for services showcase */
.services-showcase-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15; /* Even higher for the services showcase */
  pointer-events: none;
}

/* Section-specific line styling with different intensities */
.hero-lines .vertical-line,
.services-hero-lines .vertical-line {
  opacity: 0.4;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(99, 102, 241, 0.3) 20%,
    rgba(99, 102, 241, 0.5) 50%,
    rgba(99, 102, 241, 0.3) 80%,
    transparent 100%
  );
}

.services-showcase-lines .vertical-line {
  opacity: 0.8;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(99, 102, 241, 0.4) 10%,
    rgba(99, 102, 241, 0.7) 30%,
    rgba(99, 102, 241, 0.9) 50%,
    rgba(99, 102, 241, 0.7) 70%,
    rgba(99, 102, 241, 0.4) 90%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.cta-lines .vertical-line,
.services-cta-lines .vertical-line {
  opacity: 0.7;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 215, 0, 0.4) 20%,
    rgba(255, 215, 0, 0.7) 50%,
    rgba(255, 215, 0, 0.4) 80%,
    transparent 100%
  );
}

.contact-lines .vertical-line,
.services-contact-lines .vertical-line {
  opacity: 0.3;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(6, 182, 212, 0.2) 20%,
    rgba(6, 182, 212, 0.4) 50%,
    rgba(6, 182, 212, 0.2) 80%,
    transparent 100%
  );
}

/* Contact hero specific styling */
.contact-hero-lines .vertical-line {
  opacity: 0.6;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(99, 102, 241, 0.4) 10%,
    rgba(99, 102, 241, 0.7) 30%,
    rgba(99, 102, 241, 0.9) 50%,
    rgba(99, 102, 241, 0.7) 70%,
    rgba(99, 102, 241, 0.4) 90%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

/* Contact page vertical lines - Elegant and visible */
.contact-page .vertical-lines .vertical-line {
  opacity: 0.35;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(99, 102, 241, 0.2) 10%,
    rgba(99, 102, 241, 0.4) 30%,
    rgba(99, 102, 241, 0.5) 50%,
    rgba(99, 102, 241, 0.4) 70%,
    rgba(99, 102, 241, 0.2) 90%,
    transparent 100%
  );
  box-shadow: none;
}

/* Contact page dark theme vertical lines */
[data-theme="dark"] .contact-page .vertical-lines .vertical-line {
  opacity: 0.25;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(139, 92, 246, 0.15) 10%,
    rgba(139, 92, 246, 0.3) 30%,
    rgba(139, 92, 246, 0.4) 50%,
    rgba(139, 92, 246, 0.3) 70%,
    rgba(139, 92, 246, 0.15) 90%,
    transparent 100%
  );
}

/* Vertical line animation - subtle flow effect */
@keyframes verticalFlow {
  0%, 100% {
    opacity: 0.4;
    background-position: 0% 0%;
  }
  50% {
    opacity: 0.8;
    background-position: 0% 100%;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .vertical-line {
    opacity: 0.3;
    width: 0.5px;
  }
  
  .hero-lines .vertical-line,
  .services-showcase-lines .vertical-line {
    opacity: 0.4;
  }
}

@media (max-width: 480px) {
  .vertical-line {
    opacity: 0.2;
  }
  
  /* Reduce number of lines on very small screens */
  .vertical-line.line-2,
  .vertical-line.line-4 {
    display: none;
  }
}

/* Accessibility - reduce motion */
@media (prefers-reduced-motion: reduce) {
  .vertical-line {
    animation: none !important;
    opacity: 0.3;
  }
}

/* ==========================================
   BEAUTIFUL SERVICE DROPDOWNS
   ========================================== */

/* Dropdown trigger button */
.service-learn-more.dropdown-trigger {
  background: none;
  border: 2px solid var(--anim-primary);
  color: var(--anim-primary);
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.service-learn-more.dropdown-trigger:hover {
  background: var(--anim-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.service-learn-more.dropdown-trigger.active {
  background: var(--anim-primary);
  color: white;
}

/* Inline Dropdown Trigger Styles */
.inline-dropdown-trigger {
  background: none;
  border: 2px solid var(--anim-primary);
  color: var(--anim-primary);
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.inline-dropdown-trigger:hover {
  background: var(--anim-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.inline-dropdown-trigger.active {
  background: var(--anim-primary);
  color: white;
}

.inline-dropdown-trigger .dropdown-icon {
  transition: transform 0.3s ease;
}

.inline-dropdown-trigger.active .dropdown-icon {
  transform: rotate(180deg);
}

/* Inline Dropdown Container */
.service-inline-dropdown,
.addon-inline-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
}

.service-inline-dropdown.open,
.addon-inline-dropdown.open {
  max-height: 2000px;
  margin-top: 2rem;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.3s ease;
}

/* Addon dropdowns - special styling within cards */
.addon-inline-dropdown.open {
  margin-top: 1.5rem;
}

.addon-inline-dropdown .inline-dropdown-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.addon-inline-dropdown .inline-dropdown-inner {
  padding: 2rem;
}

.addon-inline-dropdown .inline-dropdown-title {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.addon-inline-dropdown .inline-dropdown-subtitle {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.addon-inline-dropdown .inline-dropdown-list li {
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
  background: var(--card-bg);
}

.addon-inline-dropdown .inline-dropdown-list li:hover {
  background: rgba(99, 102, 241, 0.08);
}

[data-theme="dark"] .addon-inline-dropdown .inline-dropdown-list li:hover {
  background: rgba(139, 92, 246, 0.12);
}

/* Inline Dropdown Content */
.inline-dropdown-content {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

[data-theme="dark"] .inline-dropdown-content {
  background: var(--card-bg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.service-inline-dropdown.open .inline-dropdown-content,
.addon-inline-dropdown.open .inline-dropdown-content {
  animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Inline Dropdown Inner */
.inline-dropdown-inner {
  padding: 2.5rem;
}

/* Inline Dropdown Title */
.inline-dropdown-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
  line-height: 1.3;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Inline Dropdown Subtitle */
.inline-dropdown-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin: 0 0 2rem 0;
  line-height: 1.6;
}

/* Inline Dropdown Body */
.inline-dropdown-body {
  margin-top: 1.5rem;
}

/* Inline Dropdown Paragraph */
.inline-dropdown-paragraph {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}

/* Inline Dropdown Lists */
.inline-dropdown-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.inline-dropdown-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: 12px;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}

.inline-dropdown-list li:hover {
  border-left-color: var(--primary-color);
  background: rgba(99, 102, 241, 0.05);
  transform: translateX(5px);
}

[data-theme="dark"] .inline-dropdown-list li:hover {
  background: rgba(139, 92, 246, 0.15);
}

/* Bullet List Icons */
.inline-dropdown-list.bullet-list li i {
  color: var(--primary-color);
  font-size: 1.1rem;
  min-width: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

[data-theme="dark"] .inline-dropdown-list.bullet-list li i {
  color: var(--secondary-color);
}

/* Numbered List */
.inline-dropdown-list.numbered-list {
  counter-reset: inline-counter;
}

.inline-dropdown-list.numbered-list li {
  counter-increment: inline-counter;
  position: relative;
  padding-left: 3.5rem;
}

.inline-dropdown-list.numbered-list li::before {
  content: counter(inline-counter);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .inline-dropdown-list.numbered-list li::before {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* Animation */
@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .inline-dropdown-inner {
    padding: 2rem;
  }
  
  .inline-dropdown-title {
    font-size: 1.5rem;
  }
  
  .inline-dropdown-subtitle {
    font-size: 1rem;
  }
  
  .inline-dropdown-list li {
    padding: 0.875rem;
    font-size: 1rem;
  }
  
  .inline-dropdown-list.numbered-list li {
    padding-left: 3rem;
  }
  
  .inline-dropdown-list.numbered-list li::before {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    left: 0.875rem;
  }
}

@media (max-width: 480px) {
  .inline-dropdown-inner {
    padding: 1.5rem;
  }
  
  .inline-dropdown-title {
    font-size: 1.3rem;
  }
  
  .inline-dropdown-subtitle {
    font-size: 0.95rem;
  }
  
  .inline-dropdown-list li {
    padding: 0.75rem;
    font-size: 0.95rem;
  }
  
  .service-inline-dropdown.open,
  .addon-inline-dropdown.open {
    margin-top: 1.5rem;
  }
}

/* ==========================================
   PREMIUM SHINE EFFECT FOR PRICING CARDS
   ========================================== */

/* Premium shine container */
.premium-shine {
  position: relative;
  overflow: hidden;
}

/* Golden shine for light mode */
.premium-shine::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 215, 0, 0.1) 40%,
    rgba(255, 223, 0, 0.3) 50%,
    rgba(255, 215, 0, 0.1) 60%,
    transparent 70%
  );
  animation: premiumShine 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Diamond/crystal shine for dark mode */
[data-theme="dark"] .premium-shine::before {
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(139, 92, 246, 0.15) 40%,
    rgba(167, 139, 250, 0.35) 50%,
    rgba(139, 92, 246, 0.15) 60%,
    transparent 70%
  );
}

/* Glowing border animation */
.premium-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 215, 0, 0.4) 25%,
    rgba(255, 223, 0, 0.6) 50%,
    rgba(255, 215, 0, 0.4) 75%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderGlow 4s linear infinite;
  pointer-events: none;
  z-index: 1;
}

[data-theme="dark"] .premium-shine::after {
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(139, 92, 246, 0.5) 25%,
    rgba(167, 139, 250, 0.7) 50%,
    rgba(139, 92, 246, 0.5) 75%,
    transparent 100%
  );
}

/* Ensure content stays on top */
.premium-shine > * {
  position: relative;
  z-index: 2;
}

/* Enhanced shadow for premium cards */
.premium-shine {
  box-shadow: 
    0 10px 40px rgba(255, 215, 0, 0.2),
    0 0 0 1px rgba(255, 215, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: scale(1.02);
  transition: all 0.3s ease;
}

[data-theme="dark"] .premium-shine {
  box-shadow: 
    0 10px 40px rgba(139, 92, 246, 0.3),
    0 0 0 1px rgba(139, 92, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.premium-shine:hover {
  transform: scale(1.03) translateY(-5px);
  box-shadow: 
    0 20px 60px rgba(255, 215, 0, 0.3),
    0 0 0 2px rgba(255, 215, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .premium-shine:hover {
  box-shadow: 
    0 20px 60px rgba(139, 92, 246, 0.4),
    0 0 0 2px rgba(139, 92, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Shine animation */
@keyframes premiumShine {
  0% {
    transform: translate(-100%, -100%) rotate(45deg);
  }
  100% {
    transform: translate(100%, 100%) rotate(45deg);
  }
}

@keyframes borderGlow {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Sparkle effects */
.premium-shine .sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: sparkle 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

.premium-shine .sparkle:nth-child(1) {
  top: 20%;
  right: 15%;
  animation-delay: 0s;
}

.premium-shine .sparkle:nth-child(2) {
  top: 60%;
  right: 25%;
  animation-delay: 0.7s;
}

.premium-shine .sparkle:nth-child(3) {
  top: 40%;
  right: 40%;
  animation-delay: 1.4s;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .premium-shine::before,
  .premium-shine::after,
  .premium-shine .sparkle {
    animation: none !important;
  }
  
  .premium-shine {
    transform: none !important;
  }
}

/* ==========================================
   PREMIUM TIER STYLING FOR SERVICES BANNER ONLY
   ========================================== */

/* Premium tier container - ONLY on services banner */
.business-suite-banner .premium-tier,
.services-page .banner-platform.premium-tier {
  position: relative;
  transform: scale(1.03);
  transition: all 0.4s ease;
  z-index: 10;
  overflow: visible !important;
}

.business-suite-banner .premium-tier:hover,
.services-page .banner-platform.premium-tier:hover {
  transform: scale(1.05) translateY(-5px);
}

/* Premium background layer - Gold theme for light mode */
.business-suite-banner .premium-bg-layer,
.services-page .premium-bg-layer {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(
      135deg,
      rgba(255, 215, 0, 0.12) 0%,
      rgba(255, 223, 0, 0.18) 25%,
      rgba(255, 193, 7, 0.15) 50%,
      rgba(255, 215, 0, 0.12) 75%,
      rgba(255, 235, 59, 0.08) 100%
    ),
    var(--bg-primary);
  border: 2.5px solid transparent;
  border-radius: 16px;
  background-clip: padding-box;
  box-shadow: 
    0 0 40px rgba(255, 215, 0, 0.25),
    0 8px 32px rgba(255, 215, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  z-index: 0;
}

/* Animated golden border */
.business-suite-banner .premium-bg-layer::before,
.services-page .premium-bg-layer::before {
  content: '';
  position: absolute;
  inset: -2.5px;
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.5),
    rgba(255, 223, 0, 0.7),
    rgba(255, 193, 7, 0.8),
    rgba(255, 215, 0, 0.5)
  );
  border-radius: 16px;
  z-index: -1;
  animation: borderPulse 3s ease-in-out infinite;
}

@keyframes borderPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Diamond/Crystal theme for dark mode */
[data-theme="dark"] .business-suite-banner .premium-bg-layer,
[data-theme="dark"] .services-page .premium-bg-layer {
  background: 
    linear-gradient(
      135deg,
      rgba(139, 92, 246, 0.18) 0%,
      rgba(167, 139, 250, 0.25) 25%,
      rgba(196, 181, 253, 0.2) 50%,
      rgba(139, 92, 246, 0.18) 75%,
      rgba(109, 40, 217, 0.12) 100%
    ),
    var(--bg-primary);
  box-shadow: 
    0 0 50px rgba(139, 92, 246, 0.35),
    0 8px 40px rgba(139, 92, 246, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .business-suite-banner .premium-bg-layer::before,
[data-theme="dark"] .services-page .premium-bg-layer::before {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.6),
    rgba(167, 139, 250, 0.8),
    rgba(196, 181, 253, 0.9),
    rgba(139, 92, 246, 0.6)
  );
}

/* Animated shine overlay */
.business-suite-banner .premium-shine-overlay,
.services-page .premium-shine-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 16px;
  pointer-events: none;
  z-index: 2;
}

.business-suite-banner .premium-shine-overlay::before,
.services-page .premium-shine-overlay::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 70%
  );
  animation: premiumShineSweep 4s ease-in-out infinite;
}

[data-theme="dark"] .business-suite-banner .premium-shine-overlay::before,
[data-theme="dark"] .services-page .premium-shine-overlay::before {
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(196, 181, 253, 0.2) 50%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 70%
  );
}

@keyframes premiumShineSweep {
  0% {
    transform: translate(-100%, -100%) rotate(45deg);
  }
  100% {
    transform: translate(100%, 100%) rotate(45deg);
  }
}

/* Premium sparkles */
.business-suite-banner .premium-sparkle,
.services-page .premium-sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 223, 0, 0.8) 30%,
    transparent 70%
  );
  border-radius: 50%;
  animation: premiumSparkle 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
  filter: blur(1px);
}

[data-theme="dark"] .business-suite-banner .premium-sparkle,
[data-theme="dark"] .services-page .premium-sparkle {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(196, 181, 253, 0.9) 30%,
    transparent 70%
  );
}

.business-suite-banner .premium-sparkle:nth-child(3),
.services-page .premium-sparkle:nth-child(3) {
  animation-delay: 0s;
}

.business-suite-banner .premium-sparkle:nth-child(4),
.services-page .premium-sparkle:nth-child(4) {
  animation-delay: 1s;
}

.business-suite-banner .premium-sparkle:nth-child(5),
.services-page .premium-sparkle:nth-child(5) {
  animation-delay: 2s;
}

.business-suite-banner .premium-sparkle:nth-child(6),
.services-page .premium-sparkle:nth-child(6) {
  animation-delay: 1.5s;
}

@keyframes premiumSparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.5) rotate(180deg);
  }
}

/* Ensure content stays above effects */
.business-suite-banner .premium-tier > *:not(.premium-bg-layer):not(.premium-shine-overlay):not(.premium-sparkle),
.services-page .premium-tier > *:not(.premium-bg-layer):not(.premium-shine-overlay):not(.premium-sparkle) {
  position: relative;
  z-index: 5;
}

/* Add subtle glow to text in premium tier */
.business-suite-banner .premium-tier h3,
.services-page .premium-tier h3,
.business-suite-banner .premium-tier .btn-primary,
.services-page .premium-tier .btn-primary {
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

[data-theme="dark"] .business-suite-banner .premium-tier h3,
[data-theme="dark"] .services-page .premium-tier h3,
[data-theme="dark"] .business-suite-banner .premium-tier .btn-primary,
[data-theme="dark"] .services-page .premium-tier .btn-primary {
  text-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .business-suite-banner .premium-shine-overlay,
  .services-page .premium-shine-overlay,
  .business-suite-banner .premium-sparkle,
  .services-page .premium-sparkle {
    animation: none !important;
  }
  
  .business-suite-banner .premium-tier,
  .services-page .premium-tier {
    transform: scale(1.02) !important;
  }
  
  .business-suite-banner .premium-tier:hover,
  .services-page .premium-tier:hover {
    transform: scale(1.02) !important;
  }
}

/* ==========================================
   IMPROVED DARK MODE TEXT VISIBILITY
   ========================================== */

/* Light mode - default indigo/blue colors */
.premium-included-headline {
  color: #6366f1 !important;
}

.premium-check-icon {
  color: #6366f1 !important;
}

.premium-item-text {
  color: var(--text-secondary) !important;
}

.premium-value-main {
  color: #6366f1 !important;
}

.premium-value-sub {
  color: var(--text-secondary) !important;
}

.premium-pricing {
  color: var(--primary-color) !important;
}

/* Dark mode - bright white/grey for maximum visibility */
[data-theme="dark"] .premium-included-headline {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.6), 0 0 20px rgba(167, 139, 250, 0.3);
  font-weight: 700;
}

[data-theme="dark"] .premium-check-icon {
  color: #a78bfa !important;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.8)) brightness(1.3);
}

[data-theme="dark"] .premium-item-text {
  color: #f3f4f6 !important;
  font-weight: 500;
}

[data-theme="dark"] .premium-value-main {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(167, 139, 250, 0.5);
  font-weight: 700;
}

[data-theme="dark"] .premium-value-sub {
  color: #e5e7eb !important;
  font-weight: 500;
}

[data-theme="dark"] .premium-pricing {
  color: #ffffff !important;
  text-shadow: 0 0 15px rgba(167, 139, 250, 0.6), 0 0 30px rgba(167, 139, 250, 0.3);
  font-weight: 800;
}

/* Enhanced background for better contrast in dark mode */
[data-theme="dark"] .premium-included-section {
  background: rgba(109, 40, 217, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
}

[data-theme="dark"] .premium-value-box {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.18), rgba(196, 181, 253, 0.15)) !important;
  border-left-color: rgba(167, 139, 250, 0.7) !important;
}
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Scrollbar styling for dropdown body */
.dropdown-body::-webkit-scrollbar {
  width: 6px;
}

.dropdown-body::-webkit-scrollbar-track {
  background: rgba(99, 102, 241, 0.1);
  border-radius: 3px;
}

.dropdown-body::-webkit-scrollbar-thumb {
  background: var(--anim-primary);
  border-radius: 3px;
}

.dropdown-body::-webkit-scrollbar-thumb:hover {
  background: var(--anim-secondary);
}

/* ==========================================
   MODERN CONTACT FORM STYLES
   ========================================== */

.modern-contact-form {
  width: 100%;
  max-width: 500px;
  margin: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem;
  background: var(--bg-card, #ffffff);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light, rgba(99, 102, 241, 0.1));
  transition: all 0.3s ease;
}

[data-theme="dark"] .contact-form {
  background: #1f2937;
  border-color: rgba(139, 92, 246, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.contact-form:hover {
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.12);
  transform: translateY(-2px);
}

[data-theme="dark"] .contact-form:hover {
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.15);
}

/* Form Groups */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* Form Labels - Strong Specificity */
.modern-contact-form .form-label,
.contact-form .form-label {
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: var(--text-primary, #1f2937) !important;
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  line-height: 1.4 !important;
}

[data-theme="dark"] .modern-contact-form .form-label,
[data-theme="dark"] .contact-form .form-label {
  color: #e5e7eb !important;
}

/* Form Inputs */
.form-input {
  padding: 0.875rem 1rem;
  border: 2px solid var(--border-input, #e5e7eb);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--bg-input, #ffffff);
  color: var(--text-primary, #1f2937);
  transition: all 0.3s ease;
  outline: none;
  resize: vertical; /* For textarea */
}

[data-theme="dark"] .form-input {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

.form-input::placeholder {
  color: var(--text-muted, #9ca3af);
  opacity: 0.8;
}

[data-theme="dark"] .form-input::placeholder {
  color: #9ca3af;
}

.form-input:focus {
  border-color: var(--anim-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  transform: translateY(-1px);
}

[data-theme="dark"] .form-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Textarea specific */
textarea.form-input {
  min-height: 120px;
  line-height: 1.5;
}

/* Submit Button */
.form-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--anim-primary, #6366f1), var(--anim-secondary, #8b5cf6));
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.form-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.form-submit-btn:active {
  transform: translateY(0);
}

.form-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.form-submit-btn .btn-icon {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.form-submit-btn:hover .btn-icon {
  transform: translateX(2px);
}

/* Privacy Note */
.form-privacy-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--bg-note, rgba(99, 102, 241, 0.05));
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--text-muted, #6b7280);
  border: 1px solid rgba(99, 102, 241, 0.1);
}

[data-theme="dark"] .form-privacy-note {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.2);
  color: #9ca3af;
}

.form-privacy-note i {
  color: var(--anim-primary, #6366f1);
  flex-shrink: 0;
}

[data-theme="dark"] .form-privacy-note i {
  color: #a78bfa;
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-contact-form {
    max-width: 100%;
  }
  
  .contact-form {
    padding: 1.5rem;
    gap: 1.25rem;
  }
  
  .form-input {
    padding: 0.75rem;
    font-size: 1rem;
  }
  
  .form-submit-btn {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .contact-form {
    padding: 1.25rem;
  }
  
  .form-input {
    padding: 0.75rem;
  }
  
  textarea.form-input {
    min-height: 100px;
  }
}

/* ==========================================
   ACCESSIBILITY & PERFORMANCE
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  .hero-animated-bg,
  .services-animated-bg,
  .form-animated-bg,
  .orb,
  .shape,
  .particle,
  .service-icon-float,
  .morph-shape,
  .bubble,
  .glow-orb {
    animation: none !important;
    transform: none !important;
  }
  
  .wave-path-1,
  .wave-path-2,
  .connection-line,
  .connection-dot,
  .data-line,
  .data-point,
  .rain-column {
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --anim-bubble: rgba(99, 102, 241, 0.3);
    --anim-particle: rgba(99, 102, 241, 0.8);
    --anim-glow: rgba(99, 102, 241, 0.6);
  }
  
  [data-theme="dark"] {
    --anim-bubble: rgba(139, 92, 246, 0.4);
    --anim-particle: rgba(139, 92, 246, 0.9);
    --anim-glow: rgba(139, 92, 246, 0.8);
  }
}
/* Extra safety: keep hero orbs away from hero text on laptop / medium screens */
@media (max-width: 1440px) {
  /* Push orbs further to the extreme edges so they don't sit behind hero copy */
  .orb-1 {
    left: -8%;
    top: 18%;
  }

  .orb-4 {
    left: -10%;
    bottom: 22%;
  }

  .orb-5 {
    left: -12%;
    top: 65%;
  }

  .orb-2 {
    right: -8%;
    bottom: 15%;
  }

  .orb-3 {
    right: -10%;
    top: 12%;
  }
}

/* ==========================================
   MOBILE ENHANCEMENTS (override defaults)
   ========================================== */
@media (max-width: 480px) {
  /* Make hero background more visible on small screens */
  .hero-animated-bg,
  .services-animated-bg,
  .form-animated-bg {
    opacity: 0.8 !important;
  }

  /* Re-enable floating orbs/bubbles that were hidden on very small screens */
  .floating-orbs,
  .floating-service-icons,
  .floating-bubbles {
    display: block !important;
  }

  /* Slightly larger orbs/bubbles for better visibility on mobile */
  .orb {
    width: 70px !important;
    height: 70px !important;
  }

  .bubble {
    width: 24px !important;
    height: 24px !important;
  }

  /* Make vertical lines ("sticks") a bit stronger on mobile */
  .vertical-lines .vertical-line,
  .hero-lines .vertical-line,
  .services-hero-lines .vertical-line {
    opacity: 0.6 !important;
  }
}