:root {
  --bg1: #0f172a;
  --bg2: #1e293b;
  --brand: #0ea5e9;
  --muted: #94a3b8;
  --card: #111827ee;
}
html,
body {
  height: 100%;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  background: radial-gradient(
      1200px 800px at 80% -20%,
      #0ea5e922,
      transparent 70%
    ),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  color: #e5e7eb;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}
.navbar-brand span {
  color: var(--brand);
}

/* Animated BG CSS */

body {
  display: table;
  width: 100%;
  position: relative;
}

.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 90vw;
  display: flex;
  justify-content: space-between; /* Distribute lines evenly */
}

.line {
  position: relative;
  width: 1px;
  height: 100%;
  /*background: #ffffff;  /* Line color */
  overflow: hidden;
}

.line::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 75%,
    #ffffff 100%
  );
  animation: drop 7s 0s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}

/* Different colors for each line's pseudo-element */
.line:nth-child(1)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #ff4500 75%,
    #ff4500 100%
  );
  animation-delay: 0.5s;
}

.line:nth-child(2)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #32cd32 75%,
    #32cd32 100%
  );
  animation-delay: 1s;
}

.line:nth-child(3)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #1e90ff 75%,
    #1e90ff 100%
  );
  animation-delay: 1.5s;
}

.line:nth-child(4)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #ffd700 75%,
    #ffd700 100%
  );
  animation-delay: 2s;
}

.line:nth-child(5)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #8a2be2 75%,
    #8a2be2 100%
  );
  animation-delay: 2.5s;
}

.line:nth-child(6)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #20b2aa 75%,
    #20b2aa 100%
  );
  animation-delay: 3s;
}

.line:nth-child(7)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #dc143c 75%,
    #dc143c 100%
  );
  animation-delay: 3.5s;
}

.line:nth-child(8)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #00fa9a 75%,
    #00fa9a 100%
  );
  animation-delay: 4s;
}

.line:nth-child(9)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #ff1493 75%,
    #ff1493 100%
  );
  animation-delay: 4.5s;
}

.line:nth-child(10)::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #00bfff 75%,
    #00bfff 100%
  );
  animation-delay: 5s;
}

@keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}
/* END */

/* Section views */
.view {
  display: none;
  height: calc(var(--vh, 1vh) * 100 - var(--navH) - var(--footerH));
  padding: 4rem 1rem;
}
.view.active {
  display: block;
}

/* Center helper */
.center-box {
  min-height: 100%;
  display: grid;
  place-items: center;
}

/* Pretty cards */
.glass {
  background: rgba(17, 24, 39, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  backdrop-filter: blur(6px);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.btn-brand {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  padding: 0.5rem 1.5rem;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
  transition: all 0.3s ease;
}
.btn-brand:hover {
  background: linear-gradient(135deg, #3b82f6, #0ea5e9);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
}

.btn-wa {
  background: linear-gradient(135deg, #038e1a, #0a711f);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  padding: 0.5rem 1.5rem;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
  transition: all 0.3s ease;
}
.btn-wa:hover {
  background: linear-gradient(135deg, #3b82f6, #0ea5e9);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
}

.btn-brand-inv {
  background: linear-gradient(135deg, #ccd3d6, #ecedef);
  color: #3b82f6;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  padding: 0.5rem 1.5rem;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
  transition: all 0.3s ease;
}

.btn-brand-inv:hover {
  background: linear-gradient(135deg, #3b82f6, #0ea5e9);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
}

#icon-menu:hover {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
.muted {
  color: var(--muted);
}

/* Navbar link underline on hover */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: var(--brand);
  transition: width 0.3s;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Handphone / layar kecil: scroll diperbolehkan */
@media (max-width: 991px) {
  html,
  body {
    overflow: auto;
  }
  .view {
    height: auto; /* biarkan view menyesuaikan konten */
    min-height: calc(var(--vh, 1vh) * 100 - var(--navH));
    padding: 2rem 1rem;
  }
}

@media (min-width: 992px) {
  .view {
    padding: 3rem;
  }
}

/* Hover glow effect */
.hover-glow:hover {
  background-color: rgba(14, 165, 233, 0.9); /* brand color */
  color: #fff;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.6);
  transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .page-link {
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
  }
}

footer {
  /* position: fixed; */
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(2, 6, 23, 0.8);
  color: #94a3b8;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.9rem;
  z-index: 999;
}

/* Neon text hero */
.neon-text {
  font-size: 3rem;
  color: #fff;
  text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e,
    0 0 40px #ff005e, 0 0 80px #ff005e;
  animation: glow 1.5s infinite alternate;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e,
      0 0 40px #ff005e, 0 0 80px #ff005e;
  }
  100% {
    text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff,
      0 0 80px #00d4ff, 0 0 160px #00d4ff;
  }
}

/* Efek hover untuk roket */
.rocket-brand i {
  transition: transform 0.3s ease, color 0.3s ease;
}
.rocket-brand:hover i {
  transform: translateY(-4px) rotate(-10deg);
  color: #0dcaf0; /* Warna biru info bootstrap */
}

/* Product Carousel */
/* Tombol navigasi panah (default Bootstrap tapi digelapkan) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1) grayscale(100) brightness(0.3);
  /* invert(1) = ubah putih jadi hitam,
       grayscale(100) = abu-abu,
       brightness(0.3) = gelap */
}

/* Indikator bulat */
.carousel-indicators [data-bs-target] {
  background-color: #444; /* abu-abu gelap */
}

/* Indikator aktif lebih pekat */
.carousel-indicators .active {
  background-color: #000;
}