/* ==========================================================================
   MAIN — entry point CSS
   Urutan: base -> components -> sections -> pages
   ========================================================================== */

/* Base */
@import url("base/variables.css");
@import url("base/reset.css");
@import url("base/typography.css");
@import url("base/animations.css");
@import url("base/utilities.css");

/* Components */
@import url("components/buttons.css");
@import url("components/navbar.css");
@import url("components/cards.css");
@import url("components/tabs.css");
@import url("components/accordion.css");
@import url("components/marquee.css");
@import url("components/forms.css");

/* Sections (index.html) */
@import url("sections/hero.css");
@import url("sections/trusted.css");
@import url("sections/cheap.css");
@import url("sections/showcase.css");
@import url("sections/features.css");
@import url("sections/editors.css");
@import url("sections/pricing.css");
@import url("sections/faq.css");
@import url("sections/footer.css");
@import url("sections/stories.css");

/* Pages (pages/*.html) */
@import url("pages/subpages.css");

/* ==========================================================================
   Background global: gradient gelap pelangi + glow hero yang memudar
   ========================================================================== */
body {
  background: var(--gradient-body);
  background-attachment: fixed;
}

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--gradient-hero);
  opacity: 1;
  transition: opacity 1.2s var(--ease-out-cubic);
}

.bg-layer.is-faded {
  opacity: 0;
}

.bg-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cahaya lembut di bagian showcase */
.bg-light {
  position: absolute;
  left: 50%;
  top: 0;
  width: 140%;
  height: 60%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 70%);
}