:root {
  --brand: #0878ff;
  --brand-dark: #005ed6;
  --ink: #101827;
  --soft-blue: #eef6ff;
}

html { scroll-behavior: smooth; }
body { color: var(--ink); }
.py-lg-6 { padding-top: 6rem; padding-bottom: 6rem; }
.navbar-brand img, footer img { width: auto; object-fit: contain; }
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-dark);
}
.text-brand { color: var(--brand) !important; }
.hero { background: radial-gradient(circle at 85% 25%, #d9eaff 0, transparent 32%), linear-gradient(180deg, #fff 0%, var(--soft-blue) 100%); }
.eyebrow { color: var(--brand); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.product-preview { max-width: 520px; padding: 1.5rem 2rem 2.75rem 0; }
.phone-card { max-width: 390px; }
.preview-logo { width: 132px; height: auto; }
.loyalty-card { background: linear-gradient(135deg, #0878ff, #0556bd); }
.loyalty-card .progress { height: .45rem; background-color: rgba(255, 255, 255, .25); }
.scan-toast { right: 0; bottom: 0; min-width: 235px; }
.icon-circle { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--brand); background: #ddecff; }
.step-number { font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: #6c757d; }
.dashboard-card { background: var(--soft-blue); }
.cta-panel { background: radial-gradient(circle at top right, #2297ff, transparent 35%), #101827; }
.use-case-symbol { display: inline-grid; width: 5rem; height: 5rem; place-items: center; border-radius: 1.5rem; color: #fff; background: var(--brand); }
.reward-card { border-style: dashed !important; }
.accordion-button:not(.collapsed) { color: var(--ink); background: var(--soft-blue); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 .25rem rgba(8, 120, 255, .15); }

@media (max-width: 991.98px) {
  .py-lg-6 { padding-top: 3rem; padding-bottom: 3rem; }
}

@media (max-width: 575.98px) {
  .navbar-brand img { width: 142px; height: auto; }
  .hero .display-3 { font-size: calc(1.65rem + 3vw); }
  .product-preview { padding: .5rem 0 3.5rem; }
  .phone-card { padding: 1rem !important; }
  .scan-toast { right: .5rem; bottom: 0; min-width: 210px; }
  .cta-panel { border-radius: 1.5rem !important; }
}