/* HERO */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 60px;
}

.hero-left {
  flex: 1;
  min-width: 340px;
}

.hero-img {
  flex: 1;
  display: flex;
  justify-content: center;
}

.hero-visual {
  width: 360px;
  height: 360px;
  border-radius: 30px;
  background: radial-gradient(circle at top, #e5f0ff, #dfeaff);
  box-shadow: 0 20px 60px rgba(0,60,120,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SERVICES */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.service-card {
  text-align: center;
  padding: 30px 20px;
}

.service-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

/* HOW WMaaS WORKS — cards */
.tl-card {
  padding:18px;
  border-left: 5px solid #006CFF;
}

/* TESTIMONIALS — infinite scroll */
.testi-area {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.testi-track {
  display: flex;
  gap: 18px;
  animation: testiLoop 35s linear infinite;
}

.testi-card {
  min-width: 320px;
  padding: 20px;
}

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

/* LEADERBOARD */
.leaderboard {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
}

.leader-list {
  padding: 0;
}

.leader-item {
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0,60,130,0.08);
  font-size: 15px;
}

/* GALLERY */
#aboutGallery::-webkit-scrollbar { display: none; }

/* PRICING LAYOUT FIX */
.pricing-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;   /* === ini yang paling penting === */
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
  margin: 0 auto;
}

/* biar badge tidak mendorong card ke kiri */
.popular {
  position: relative;
}

.popular .badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
}