@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  scroll-behavior: smooth;
  background-color: #ffffff;
  color: #0f172a;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Clean Glass Navbar */
.glass-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f8fafc;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Animation utilities */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.badge-glow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 12px rgba(59, 130, 246, 0.12);
}

/* ===== Animasi & Efek Scroll ===== */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.stagger.in-view > * { opacity: 1; transform: none; }
.stagger.in-view > *:nth-child(1) { transition-delay: .1s; }
.stagger.in-view > *:nth-child(2) { transition-delay: .25s; }
.stagger.in-view > *:nth-child(3) { transition-delay: .4s; }
.stagger.in-view > *:nth-child(4) { transition-delay: .55s; }

@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.card-in { animation: cardIn .6s ease backwards; }

@keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.animate-gradient { background-size: 200% 200%; animation: gradientShift 6s ease infinite; }

@keyframes blob { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-30px) scale(1.15); } 66% { transform: translate(-20px,20px) scale(.9); } }
.animate-blob { animation: blob 9s ease-in-out infinite; }
.animate-blob-delay { animation: blob 11s ease-in-out infinite reverse; }

@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(249,115,22,.45); } 70% { box-shadow: 0 0 0 14px rgba(249,115,22,0); } 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); } }
.btn-pulse { animation: pulseRing 2.4s infinite; }

.animate-float { display: inline-block; animation: float 3s ease-in-out infinite; }
.badge-glow { box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 14px rgba(249,115,22,.2); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > *, .card-in, .animate-blob, .animate-blob-delay, .btn-pulse, .animate-gradient, .animate-float { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ===== Motif Background (Modern, Subtle & Engineering-Grade) ===== */
/* Hero: Modern subtle dot grid with soft spotlight mask */
#hero {
  background-color: #ffffff;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.08), transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(249, 115, 22, 0.06), transparent 40%),
    radial-gradient(rgba(15, 23, 42, 0.12) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 24px 24px;
}

/* Subtle border glow */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.code-badge {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.02em;
}

/* Katalog: garis kisi tipis ala blueprint */
#katalog {
  background-color: #f8fafc;
  background-image:
    linear-gradient(rgba(37,99,235,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.04) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Keunggulan: putih dengan cahaya lembut + titik */
#keunggulan {
  background-color: #ffffff;
  background-image:
    radial-gradient(circle at 10% 90%, rgba(249,115,22,.06), transparent 35%),
    radial-gradient(circle at 90% 10%, rgba(37,99,235,.06), transparent 36%);
}

/* FAQ */
#faq {
  background-color: #f8fafc;
}

/* Garis pemisah halus */
#katalog, #keunggulan, #faq { position: relative; }
#katalog::before, #keunggulan::before, #faq::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.3), rgba(249, 115, 22, 0.3), transparent);
}

/* Footer */
footer { background-color: #ffffff; }

@media (prefers-reduced-motion: reduce) { 
  .reveal, .stagger > *, .card-in, .animate-blob, .animate-blob-delay, .btn-pulse, .animate-gradient, .animate-float { 
    animation: none !important; 
    transition: none !important; 
    opacity: 1 !important; 
    transform: none !important; 
  } 
}