/* OnSnack Theme Overrides — align with PNG design */
:root {
  --os-primary: #FF2E74;
  /* CTA pink */
  --os-secondary: #A778F2;
  /* violet */
  --os-accent: #FFB703;
  /* yellow accent */
  --os-dark: #0E0E0F;
  --os-card: #1A1B1E;
  --os-text: #F5F7FB;
  --os-muted: #C7CBD6;
  --os-grad: radial-gradient(80% 80% at 20% 10%, rgba(167, 120, 242, .25) 0%, rgba(14, 14, 15, 0) 40%),
    radial-gradient(80% 80% at 80% 20%, rgba(255, 46, 116, .22) 0%, rgba(14, 14, 15, 0) 40%),
    radial-gradient(80% 80% at 50% 100%, rgba(255, 183, 3, .18) 0%, rgba(14, 14, 15, 0) 40%),
    linear-gradient(180deg, #121215 0%, #0E0E0F 100%);
}

/* Base */
body {
  background: var(--os-grad);
  color: var(--os-text);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

a {
  color: var(--os-primary);
}

.text-muted {
  color: var(--os-muted) !important;
}

/* Navbar */
.navbar {
  background: transparent !important;
  transition: all .3s ease;
  border-bottom: 1px solid transparent;
}

.navbar-scrolled {
  background: rgba(18, 18, 21, .75) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(255, 255, 255, .06);
}

.navbar .nav-link {
  color: var(--os-text) !important;
  font-weight: 500;
}

.navbar .btn {
  border-radius: 999px;
  font-weight: 600;
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--os-primary);
  --bs-btn-border-color: var(--os-primary);
  --bs-btn-hover-bg: #ff1764;
  --bs-btn-hover-border-color: #ff1764;
  --bs-btn-color: #fff;
  border-radius: 999px;
  padding-inline: 1.25rem;
  box-shadow: 0 8px 24px rgba(255, 46, 116, 0.35);
}

.btn-outline-primary {
  --bs-btn-color: var(--os-primary);
  --bs-btn-border-color: var(--os-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--os-primary);
  --bs-btn-hover-border-color: var(--os-primary);
  border-radius: 999px;
}

.btn-light {
  border-radius: 999px;
}

/* Hero */
#hero {
  background: radial-gradient(120% 120% at 20% -10%, rgba(167, 120, 242, .4) 0%, rgba(18, 18, 21, 0) 55%),
    radial-gradient(120% 120% at 110% -10%, rgba(255, 46, 116, .35) 0%, rgba(18, 18, 21, 0) 50%);
  padding-top: 6rem;
  padding-bottom: 3rem;
}

#hero h1 {
  font-size: clamp(2.4rem, 3.8vw + 1rem, 4.2rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.5px;
}

#hero .lead {
  color: var(--os-muted);
  font-size: 1.125rem;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: #241f2b;
  color: #EAE7F5;
  border: 1px solid rgba(255, 255, 255, .06);
}

/* Cards / Sections */
.section {
  padding: 5rem 0;
}

.card {
  background: var(--os-card);
  color: var(--os-text);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 1.25rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

.icon-pill {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
}

/* FAQ */
.accordion-button {
  background: transparent;
  color: var(--os-text);
  font-weight: 600;
}

.accordion-item {
  background: transparent;
  border-color: rgba(255, 255, 255, .08);
}

.accordion-button:not(.collapsed) {
  color: var(--os-primary);
  box-shadow: none;
}

/* Footer */
footer {
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--os-muted);
}

.social a {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .2s ease;
}

.social a:hover {
  transform: translateY(-2px) scale(1.03);
}


/* Brand strip (marquee-like) */
.brand-strip {
  border-block: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0));
}

.strip .track {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  animation: scrollX 18s linear infinite;
  font-weight: 700;
  letter-spacing: .5px;
}

.strip span {
  display: inline-block;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
}

@keyframes scrollX {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Section Headings */
section h2 {
  font-size: clamp(1.8rem, 1rem + 2.5vw, 2.6rem);
  line-height: 1.1;
  font-weight: 800;
}

.lead-hero {
  font-size: 1.125rem;
  color: var(--os-muted);
}

.hero-title {
  font-weight: 800;
  letter-spacing: -.5px;
}

/* ===== Sections added ===== */
.text-gradient {
  background: linear-gradient(90deg, var(--os-primary), var(--os-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.object-cover {
  object-fit: cover;
}

/* FAQ specifics */
#faq .accordion-item {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: .75rem;
  border: 1px solid rgba(255, 255, 255, .08);
}

#faq .accordion-button {
  background: rgba(255, 255, 255, .02);
  color: var(--os-text);
  font-weight: 600;
}

#faq .accordion-button:not(.collapsed) {
  color: var(--os-primary);
  background: rgba(255, 46, 116, .07);
  box-shadow: none;
}

#faq .accordion-body {
  color: var(--os-muted);
}

/* Community card image fills */
#community .card img {
  min-height: 340px;
}

/* Marketplace logos */
.market-logos img {
  height: 34px;
  /* sesuaikan dengan asset */
  width: auto;
  display: block;
}

.soft-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
}

/* Small screens tweaks */
@media (max-width: 576px) {
  #community .card img {
    min-height: 220px;
  }

  .market-logos img {
    height: 28px;
  }
}

/* ====== Marquee Brand Strip ====== */
.brand-ticker {
  --speed: 22s;
  /* geser makin kecil = makin cepat */
  --gap: 1.75rem;
  /* jarak antar item */
  overflow: hidden;
  padding-block: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  /* Fade kiri‑kanan biar halus */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.brand-track {
  display: inline-flex;
  gap: var(--gap);
  width: max-content;
  /* penting: ikut lebar konten */
  animation: ticker var(--speed) linear infinite;
  will-change: transform;
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

  /* geser setengah karena kontennya diduplikasi */
}

/* Badge style (ikuti tema lo) */
.brand-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem .95rem;
  border-radius: 999px;
  font-weight: 600;
  background: #241f2b;
  color: #EAE7F5;
  border: 1px solid rgba(255, 255, 255, .06);
  white-space: nowrap;
}

/* Respect accessibility: matikan animasi untuk yang prefer-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .brand-track {
    animation: none;
  }
}