@property --g2-1-x-position { syntax: "<percentage>"; inherits: false; initial-value: 87.96875%; }
@property --g2-1-y-position { syntax: "<percentage>"; inherits: false; initial-value: 91.13%; }
@property --g2-2-x-position { syntax: "<percentage>"; inherits: false; initial-value: 13.4%; }
@property --g2-2-y-position { syntax: "<percentage>"; inherits: false; initial-value: 82.73%; }

.hero-aurora {
  --g2-1-x-position: 87.96875%;
  --g2-1-y-position: 91.13%;
  --g2-2-x-position: 13.4%;
  --g2-2-y-position: 82.73%;
  background:
    radial-gradient(60% 80% at 0% 0%, #ffffff 40%, transparent 100%),
    radial-gradient(100% 100% at 4% 3%, #ffffff 0%, transparent),
    radial-gradient(100% 100% at var(--g2-1-x-position) var(--g2-1-y-position), #6db5c9 -32%, transparent),
    radial-gradient(100% 100% at var(--g2-2-x-position) var(--g2-2-y-position), #fde882 0%, transparent),
    #ffffff;
  animation: heroGlow 10s ease-in-out infinite;
}

@keyframes heroGlow {
  50% {
    --g2-1-x-position: 15%;
    --g2-1-y-position: 15%;
    --g2-2-x-position: 61.21%;
    --g2-2-y-position: 13.75%;
  }
}

/* Title & Desc */
.hero-title {
  max-width: 711px;
  font-family: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-size: 56px;
  line-height: 62px;
  color: #334155;
  opacity: 1;
}

.hero-title__underline {
  text-decoration: underline;
  text-decoration-color: #FAD407;
  text-decoration-thickness: 6px;
  text-underline-offset: 6px;
}

.hero-desc {
  max-width: 711px;
  font-family: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 160%;
  letter-spacing: 0%;
  color: #475569;
  opacity: 1;
}

/* Buttons wrapper */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

/* Button: Ajukan Demo */
.hero-btn-primary-lg {
  width: 182px;
  height: 48px;
  border-radius: 12px;
  background: #016E8D;
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero-btn-primary-lg:hover {
  background: transparent;
  border-color: #016E8D;
  color: #016E8D;
}

.hero-btn-primary-lg:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 110, 141, 0.25);
}

.hero-btn-primary-lg .hero-btn-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* Button: Hubungi */
.hero-btn-outline-lg {
  width: 121px;
  height: 48px;
  padding: 11px 26px;
  border-radius: 12px;
  background: transparent;
  border: 2px solid #016E8D;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #016E8D;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero-btn-outline-lg:hover {
  background: rgba(1, 110, 141, 0.08);
}

.hero-btn-outline-lg:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 110, 141, 0.18);
}

/* Feature card */
.hero-feature-card {
  width: 100%;
  max-width: 445.3333435058594px;
  height: 213px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF80;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.hero-feature-card__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* ======================
   MOBILE ONLY HERO FIXES
   ====================== */
@media (max-width: 768px) {
  .hero-aurora {
    animation: none;
    min-height: auto !important;
  }

  .hero-aurora > div.mx-auto.w-full.max-w-\[1400px\].px-4.pt-16.relative.z-10 {
    padding-top: 104px !important;
    padding-bottom: 56px !important;
  }

  .hero-aurora .grid.gap-10.lg\:grid-cols-2.lg\:items-center {
    gap: 24px !important;
  }

  .hero-aurora .flex.flex-col.items-start.gap-6.mt-10.lg\:mt-20 {
    margin-top: 0 !important;
    gap: 20px !important;
  }

  .hero-aurora .flex.flex-col.w-full.items-start.gap-5 > img {
    width: 150px !important;
    height: auto !important;
  }

  .hero-aurora h1[style*="font-size:53px"] {
    max-width: 100% !important;
    font-size: 40px !important;
    line-height: 1.08 !important;
  }

  .hero-aurora h1[style*="font-size:53px"] span {
    white-space: normal !important;
  }

  .hero-title__underline {
    text-decoration-thickness: 4px;
    text-underline-offset: 4px;
  }

  .hero-desc {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .hero-desc span {
    white-space: normal !important;
  }

  /* tombol mobile tetap sejajar */
  .hero-buttons {
    width: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .hero-btn-primary-lg {
    width: auto !important;
    min-width: 150px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    gap: 8px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .hero-btn-outline-lg {
    width: auto !important;
    min-width: 92px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    gap: 8px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .hero-btn-primary-lg .hero-btn-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  .hero-aurora .relative.h-\[clamp\(420px\,55vw\,560px\)\].max-md\:h-\[400px\] {
    height: 300px !important;
  }

  /* ilustrasi wanita dinaikkan */
  #hero-illustration {
    left: 50% !important;
    right: auto !important;
    bottom: 35px !important;
    width: min(92vw, 420px) !important;
    transform: translateX(-50%) !important;
  }

  .hero-aurora > img.absolute.left-0.bottom-0.w-full.h-\[152px\].object-cover.pointer-events-none.z-0 {
    height: 92px !important;
  }

  .hero-feature-card {
    max-width: 100% !important;
    height: auto !important;
    min-height: 180px;
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .hero-feature-card__inner {
    gap: 14px !important;
  }

  .relative.z-20.bg-white .grid.w-full.max-w-\[1400px\].mx-auto.gap-6.px-4.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.mt-6.lg\:-mt-\[clamp\(120px\,14vw\,265px\)\] {
    gap: 16px !important;
    margin-top: -55px !important;
  }
}