body.jpork-site {
  --jpork-primary: #2b2b2b;
  --jpork-secondary: #b5935b;
  --jpork-neutral: #121212;
  --jpork-surface: #1d1d1d;
  --jpork-surface-soft: #2a2a2a;
  --jpork-text: #f4f1ec;
  --jpork-text-dark: #e5ddd3;
  background:
    radial-gradient(circle at top left, rgba(181, 147, 91, 0.1), transparent 24%),
    radial-gradient(circle at bottom right, rgba(124, 124, 124, 0.12), transparent 28%),
    #111111;
}

.jpork-home {
  background:
    radial-gradient(circle at top left, rgba(181, 147, 91, 0.08), transparent 26%),
    radial-gradient(circle at 88% 14%, rgba(124, 124, 124, 0.12), transparent 18%),
    linear-gradient(180deg, #151515 0%, #101010 100%);
}

.jpork-home-hero__bg {
  background:
    radial-gradient(circle at 50% 42%, rgb(142 142 142 / 94%), rgb(44 44 44 / 95%) 36%, rgba(12, 12, 12, 0.98) 74%),
    linear-gradient(180deg, rgba(181, 147, 91, 0.08), transparent 36%);
}

.jpork-home .jpork-section-label,
.jpork-home .jpork-home-article-card__category,
.jpork-home .jpork-home-cta__microcopy li,
.jpork-home .jpork-home-quality__zoom-chip {
  color: #b5935b;
}

.jpork-home h1,
.jpork-home h2,
.jpork-home h3,
.jpork-home .jpork-section__title,
.jpork-home .jpork-home-hero__title,
.jpork-home .jpork-home-feature__stats-card strong {
  color: #ffffff;
}

.jpork-home,
.jpork-home p,
.jpork-home li,
.jpork-home .jpork-section__copy,
.jpork-home .jpork-section__copy p,
.jpork-home .jpork-home-feature__stats-copy,
.jpork-home .jpork-home-feature__stats-copy p,
.jpork-home .jpork-home-article-card__copy,
.jpork-home .jpork-home-article-card__copy p {
  color: rgba(233, 229, 223, 0.84);
}

.jpork-home-benefit-card,
.jpork-home-feature__top-card,
.jpork-home-feature__stats-card,
.jpork-home-quality__point,
.jpork-home-testimonial-card,
.jpork-home-article-card,
.jpork-home-cta,
.jpork-home-section--faq .jpork-accordion {
  background:
    linear-gradient(145deg, rgba(48, 48, 48, 0.94), rgba(24, 24, 24, 0.96)),
    rgba(20, 20, 20, 0.96);
  border-color: rgba(181, 147, 91, 0.14);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.26);
}

.jpork-home-benefit-card p,
.jpork-home-feature__top-copy p,
.jpork-home-quality__point p,
.jpork-home-feature__stats-card p {
  color: rgba(233, 229, 223, 0.76);
}

.jpork-home-section--products::before,
.jpork-home-section--feature::before,
.jpork-home-section--quality::before,
.jpork-home-section--testimonials::before,
.jpork-home-section--popular::before,
.jpork-home-section--articles::before,
.jpork-home-section--faq::before,
.jpork-home-section--cta::before {
  background:
    radial-gradient(circle at 84% 20%, rgba(181, 147, 91, 0.12), transparent 22%),
    radial-gradient(circle at 16% 82%, rgba(110, 110, 110, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(36, 36, 36, 0.34), rgba(14, 14, 14, 0.18) 70%);
}

.jpork-home-section--cta {
  background-color: #101010;
  background-image:
    linear-gradient(135deg, rgba(25, 25, 25, 0.3), rgba(15, 15, 15, 0.3)),
    var(--jpork-home-cta-bg, url("../images/image untuk section penjelasan kualitas produk.png"));
  background-size: auto, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}

.jpork-home .jpork-button--primary,
.jpork-home .jpork-button--secondary {
  border-color: rgba(181, 147, 91, 0.28);
}

.jpork-home .jpork-button--primary {
  background: linear-gradient(135deg, #353535, #1e1e1e);
  color: #ffffff;
}

.jpork-home .jpork-button--primary:hover,
.jpork-home .jpork-button--primary:focus-visible {
  background: linear-gradient(135deg, #4a4a4a, #2b2b2b);
  color: #ffffff;
  border-color: rgba(181, 147, 91, 0.34);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
}

.jpork-home .jpork-button--secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #f4f1ec;
}

.jpork-home .jpork-home-feature__stats-card {
  background: linear-gradient(135deg, rgba(59, 59, 59, 0.98), rgba(30, 30, 30, 0.96));
}

.jpork-home .jpork-home-quality__point-icon {
  background: transparent;
  border-color: transparent;
}

.jpork-home .jpork-home-benefit-card__icon {
  background: transparent;
  border-color: transparent;
}

.jpork-home .jpork-home-cta__microcopy li {
  background: rgba(181, 147, 91, 0.08);
  border-color: rgba(181, 147, 91, 0.14);
}

.jpork-header--home:not(.is-scrolled) .jpork-brand__logo {
  filter:
    drop-shadow(0 0 10px rgba(181, 147, 91, 0.12))
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.28));
}

@media (max-width: 760px) {
  .jpork-header--home:not(.is-scrolled) .jpork-nav {
    background:
      radial-gradient(circle at top right, rgba(181, 147, 91, 0.12), transparent 24%),
      linear-gradient(180deg, rgba(52, 52, 52, 0.96), rgba(18, 18, 18, 0.98) 28%),
      rgba(16, 16, 16, 0.98);
  }
}