:root {
  --batu-ink: #17251d;
  --batu-forest: #183d32;
  --batu-moss: #6b844b;
  --batu-sand: #f5f1e7;
  --batu-paper: #fffdf8;
  --batu-clay: #d8754d;
}

html { scroll-behavior: smooth; }
body { background: var(--batu-paper); color: var(--batu-ink); }
header {
  background: rgb(255 253 248 / 94%) !important;
  border-color: rgb(23 37 29 / 10%) !important;
  box-shadow: 0 5px 24px rgb(23 37 29 / 5%);
}
header .navbar { min-height: 82px; }
header nav > a:first-child { gap: .8rem; }
.batu-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgb(23 37 29 / 13%);
  transition: transform .2s ease;
}
header nav > a:first-child:hover .batu-logo { transform: rotate(-5deg) scale(1.04); }
header nav > a:first-child .display { color: var(--batu-forest); font-size: 1.18rem; font-weight: 800; letter-spacing: -.025em; }
header nav > a:first-child span span:last-child { color: #73796c !important; }
header nav .btn-ghost { border-radius: 999px; color: #425147; }
header nav .btn-ghost:hover { background: #e9eddf; color: var(--batu-forest); }
.home-hero {
  position: relative;
  background-color: var(--batu-forest) !important;
  background-image: radial-gradient(ellipse at 82% 8%, rgb(143 165 102 / 28%), transparent 38%), linear-gradient(125deg, #183d32 0%, #214638 58%, #314f3b 100%);
}
.home-hero::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image: radial-gradient(rgb(255 255 255 / 9%) .7px, transparent .7px);
  background-size: 9px 9px;
  opacity: .13;
}
.home-hero > div { position: relative; z-index: 1; }
.home-hero h1 { letter-spacing: -.055em; }
.home-hero h1 span { color: #e8b76b !important; }
.home-hero .btn-primary { border: 0; background: #e8b76b; color: #20382e; box-shadow: 0 8px 22px rgb(0 0 0 / 16%); }
.home-hero .btn-primary:hover { background: #f1ca8a; }
.home-hero .btn-outline { border-color: rgb(255 255 255 / 35%) !important; }
.home-hero > div > div:last-child {
  border-radius: 1.5rem !important;
  background: rgb(255 255 255 / 8%) !important;
  box-shadow: 0 24px 65px rgb(0 0 0 / 15%);
  backdrop-filter: blur(8px);
}
main > section:not(.home-hero) { scroll-margin-top: 90px; }
main .card, main iframe, main .rounded-3xl { box-shadow: 0 12px 34px rgb(23 37 29 / 6%); }
main .card { border: 1px solid rgb(23 37 29 / 7%); }
main .bg-primary { background: var(--batu-moss) !important; }
main .text-primary { color: var(--batu-moss) !important; }
footer { border-color: rgb(255 255 255 / 12%) !important; background: #172b24 !important; }
footer .display { color: #f0c780; }

@media (max-width: 640px) {
  header .navbar { min-height: 72px; }
  .batu-logo { width: 48px; height: 48px; }
  .home-hero > div { padding-top: 4rem; padding-bottom: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}