body {
     font-family: 'Inter', sans-serif;
 }

 .hero-bg {
     background: linear-gradient(135deg, rgba(139, 21, 56, 0.9), rgba(74, 85, 104, 0.9)),
         url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect fill="%23f8fafc" width="1200" height="800"/><g fill="%23e2e8f0"><circle cx="200" cy="150" r="80"/><circle cx="800" cy="200" r="60"/><circle cx="1000" cy="400" r="100"/><circle cx="300" cy="600" r="70"/></g></svg>');
     background-size: cover;
     background-position: center;
 }

 .phone-spin {
     animation: spin 3s linear infinite;
 }

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .fade-in {
     animation: fadeIn 0.6s ease-in-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .mobile-menu {
     transform: translateX(-100%);
     transition: transform 0.3s ease-in-out;
 }

 .mobile-menu.open {
     transform: translateX(0);
 }

 .service-card:hover {
     transform: translateY(-5px);
     transition: transform 0.3s ease;
 }