body{font-family:Inter,sans-serif}
.logo-text,.hero-title,.heading{font-family:Orbitron,sans-serif}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.hero-bg {
    background: linear-gradient(to bottom, rgba(16, 14, 29, 0.4), rgba(36, 32, 74, 0.7)), url('../images/lotus-tower.png') center/cover no-repeat;
}
.services-section {
    background: linear-gradient(to bottom, rgba(16, 14, 29, 0.7), rgba(16, 14, 29, 0.4)), url('../images/port-city.png') center/cover no-repeat fixed;
}
.case-studies-section {
    background: linear-gradient(to bottom, rgba(16, 14, 29, 0.5), rgba(36, 32, 74, 0.5)), url('../images/nelum-pokuna.png') center/cover no-repeat;
}
.features-section {
    background: linear-gradient(to bottom, rgba(16, 14, 29, 0.6), rgba(16, 14, 29, 0.8)), url('../images/ruwanwelisaya.png') center/cover no-repeat fixed;
}

@keyframes floatText {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.hero-title{
  font-size:clamp(3rem,8vw,6rem);
  font-weight:900;
  line-height: 1.2;
  padding-bottom: 10px;
  animation: floatText 4s infinite ease-in-out;
  background: linear-gradient(to right, #00F0FF, #FF2D95);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo-box{width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,#00F0FF,#FF2D95);display:flex;align-items:center;justify-content:center;color:#000;font-weight:900;box-shadow: 0 0 15px rgba(255, 45, 149, 0.6);}
.section{padding:90px 20px; width: 100%;}
.section > div.relative{max-width:1200px;margin:auto;}
.heading{text-align:center;font-size:3rem;margin:0 auto 40px auto;position:relative;width:fit-content;}
.heading::after {content:'';position:absolute;width:50px;height:4px;background:#00F0FF;bottom:-10px;left:50%;transform:translateX(-50%);border-radius:2px;box-shadow:0 0 10px #00F0FF;}

.card {
  background: rgba(36, 32, 74, 0.7);
  backdrop-filter: blur(10px);
  padding: 30px;
  border-radius: 24px;
  border: 1px solid rgba(0,240,255,.2);
  transform-style: preserve-3d;
  perspective: 1000px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  position: relative;
}

/* Internal div pops out in 3D */
.card-content {
  transform: translateZ(60px);
  transform-style: preserve-3d;
}

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

.cta-btn{
  background: linear-gradient(90deg, #00F0FF, #9D00FF, #FF2D95, #00F0FF);
  background-size: 300% 100%;
  animation: btnGradient 4s linear infinite;
  padding: 14px 32px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(157, 0, 255, 0.4);
  border: none;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.cta-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 240, 255, 0.6), 0 0 20px rgba(255, 45, 149, 0.6);
}
.whatsapp{position:fixed;right:20px;bottom:20px;background:#25D366;padding:12px 24px;border-radius:999px;color:#fff;box-shadow: 0 0 20px rgba(37, 211, 102, 0.5);transition: 0.3s; z-index: 100;}
.whatsapp:hover{transform: scale(1.05); box-shadow: 0 0 30px rgba(37, 211, 102, 0.8);}