/* ============================================
   ROMSOL - Enhanced Designs with Backgrounds
   ============================================ */

/* ============================================
   HERO SECTION - ENHANCED
   ============================================ */

#hero {
  padding: 80px 0;
  background: linear-gradient(135deg, #f0f4f9 0%, #ffffff 50%, #e7f1fd 100%);
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
}

/* Animated Background Pattern */
#hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23106eea' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  opacity: 0.4;
  animation: patternShift 20s linear infinite;
  z-index: 0;
}

@keyframes patternShift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 60px;
  }
}

/* Floating shapes in background */
#hero::after {
  content: '';
  position: absolute;
  top: 10%;
  right: 5%;
  width: 300px;
  height: 300px;
  background: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="100" cy="100" r="100" fill="%23106eea" opacity="0.1"/%3E%3Ccircle cx="100" cy="100" r="70" fill="%233b8af2" opacity="0.08"/%3E%3C/svg%3E') no-repeat;
  background-size: contain;
  animation: float 6s ease-in-out infinite;
  z-index: 0;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-30px);
  }
}

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

/* Additional floating element */
.hero-visual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Crect x="20" y="20" width="80" height="80" fill="%233b8af2" opacity="0.08" rx="10"/%3E%3Ccircle cx="150" cy="150" r="40" fill="%23106eea" opacity="0.1"/%3E%3C/svg%3E') no-repeat;
  background-size: contain;
  animation: rotate 10s linear infinite;
  z-index: 0;
}

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

/* ============================================
   WHY SECTION - ENHANCED
   ============================================ */

.why-section {
  position: relative;
  overflow: hidden;
}

.why-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(180deg, #e7f1fd 0%, transparent 100%);
  z-index: 0;
}

.why-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(16, 110, 234, 0.1) 0%, transparent 70%);
  z-index: 0;
}

.why-section > .container {
  position: relative;
  z-index: 1;
}

/* Card Enhancement */
.why-card {
  position: relative;
  overflow: hidden;
}

.why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(16, 110, 234, 0.05) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.why-card:hover::before {
  opacity: 1;
}

/* ============================================
   SOLUTIONS SECTION - ENHANCED
   ============================================ */

.solutions {
  position: relative;
  background: 
    linear-gradient(to right, 
      #f8f9fa 0%, 
      #f0f4f9 50%, 
      #f8f9fa 100%);
}

.solutions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm566-939c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 64c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm52 38c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm54 14c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm16 4c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM768 1415c1.653 0 3-1.343 3-3s-1.347-3-3-3c-1.666 0-3 1.343-3 3s1.334 3 3 3zM12 376c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm8 120c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm0 1c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23106eea' fill-opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.5;
  z-index: 0;
}

.solutions > .container {
  position: relative;
  z-index: 1;
}

/* Solution Card Glow Effect */
.solution-card {
  position: relative;
}

.solution-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(45deg, #106eea, #3b8af2, #106eea);
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  background-size: 200% 200%;
}

.solution-card:hover::after {
  opacity: 0.1;
  animation: gradient 3s ease infinite;
}

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

/* ============================================
   BENEFITS SECTION - ENHANCED
   ============================================ */

.benefits {
  position: relative;
  background: linear-gradient(to bottom, #ffffff 0%, #f0f4f9 100%);
}

.benefits::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  height: 200px;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"%3E%3Cpath d="M0,64L48,80C96,96,192,128,288,128C384,128,480,96,576,90.7C672,85,768,107,864,106.7C960,107,1056,85,1104,74.7L1152,64L1200,64L1200,0L1152,0C1104,0,1008,0,912,0C816,0,720,0,624,0C528,0,432,0,336,0C240,0,144,0,96,0L0,0Z" fill="%23f0f4f9" opacity="0.4"/%3E%3C/svg%3E');
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

.benefits > .container {
  position: relative;
  z-index: 1;
}

.benefit-item {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  position: relative;
  overflow: hidden;
}

.benefit-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(16, 110, 234, 0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.benefit-item:hover::after {
  opacity: 1;
}

/* ============================================
   CTA SECTION - ENHANCED
   ============================================ */

.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
  z-index: 0;
}

.cta-section > .container {
  position: relative;
  z-index: 1;
}

/* ============================================
   CONTACT SECTION - ENHANCED
   ============================================ */

.contact {
  position: relative;
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
}

.contact::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(16, 110, 234, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.contact > .container {
  position: relative;
  z-index: 1;
}

.contact-item {
  background: linear-gradient(135deg, #ffffff 0%, #f0f4f9 100%);
  border: 1px solid rgba(16, 110, 234, 0.1);
  position: relative;
  overflow: hidden;
}

.contact-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(16, 110, 234, 0.05) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.contact-item:hover::before {
  opacity: 1;
}

/* ============================================
   FOOTER - ENHANCED
   ============================================ */

.footer {
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.3;
  z-index: 0;
}

.footer > * {
  position: relative;
  z-index: 1;
}

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

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* Apply animations on scroll */
section {
  animation: fadeInUp 0.8s ease-out;
}

.why-card {
  animation: fadeInUp 0.8s ease-out;
}

.solution-card {
  animation: fadeInUp 0.8s ease-out;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  #hero::after,
  .hero-visual::before {
    width: 200px;
    height: 200px;
    opacity: 0.5;
  }

  .benefits::before {
    display: none;
  }

  .contact::before {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 480px) {
  #hero::before,
  .solutions::before,
  .footer::before,
  .cta-section::after {
    opacity: 0.2;
  }
}