/* === tambahan style untuk index mirip JSN === */

/* body padding agar tidak tertutup navbar fixed */
body { padding-top: 72px; }

/* Hero adjustments */
#hero { display:flex; align-items:center; justify-content:center; text-align:center; }
#hero h1 { font-weight:800; letter-spacing: -0.02em; line-height:1.05; }
#hero .lead { opacity:0.95; }

/* Pricing card styles */
.pricing-card { border-radius:14px; transition:transform .35s ease, box-shadow .35s ease; overflow:hidden; position:relative; }
.pricing-card:hover { transform:translateY(-8px); box-shadow:0 30px 60px rgba(2,6,23,0.12); }
.pricing-card.featured { background: linear-gradient(180deg, #fffefc, #fff); border-radius:16px; }

/* small badge tweak */
.pricing-card .badge { font-weight:700; padding:6px 12px; border-radius:999px; }

/* cards icon size */
.card .display-4 { font-size:48px; }

/* responsive tweaks */
@media (max-width:767px) {
  #hero h1 { font-size:34px; }
  .display-4 { font-size:40px; }
}

/* footer social hover */
.footer a:hover { color:#ffc107 !important; }

/* Navbar */
.custom-navbar {
  transition: background 0.3s, padding 0.3s;
  padding: 15px 0;
}
.custom-navbar.scrolled {
  background: rgba(0, 0, 0, 0.85);
  padding: 8px 0;
}

/* Hero Text Animation */
.hero h1 {
  animation: fadeInDown 1s ease;
}
.hero p {
  animation: fadeInUp 1.2s ease;
}
@keyframes fadeInDown {
  from {opacity:0; transform: translateY(-30px);}
  to {opacity:1; transform: translateY(0);}
}
@keyframes fadeInUp {
  from {opacity:0; transform: translateY(30px);}
  to {opacity:1; transform: translateY(0);}
}

/* Pricing Card */
.pricing-card {
  border-radius: 15px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.pricing-card.featured {
  border: 2px solid #ffc107;
}


/* Section spacing */
.section {
  padding: 80px 0;
}

/* Footer */
.footer a:hover {
  color: #ffc107 !important;
}