/* ==========================================================================
   Shared helpers, decorative backgrounds, hero layers, and the phone/stats
   visuals used at the top of the front page
   ========================================================================== */

/* ── Inline SVG icon baseline ─────────────────────────────────────────── */
/* Inline SVGs have no intrinsic size, so an unsized one expands to fill its
   container. Default every icon to the current text size; the .icon-* classes
   below override this by specificity where an explicit size is wanted. */
svg:not([width]):not([height]) {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ── Icon sizes ───────────────────────────────────────────────────────── */
.icon-xs {
  width: 0.75rem;
  height: 0.75rem;
  font-size: 0.75rem;
}
.icon-sm {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}
.icon-md {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
}
.icon-lg {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
}
.icon-xl {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.75rem;
}
.icon-2xl {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
}
.icon-3xl {
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
}

.icon-xs,
.icon-sm,
.icon-md,
.icon-lg,
.icon-xl,
.icon-2xl,
.icon-3xl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Typography helpers ───────────────────────────────────────────────── */
.person-name {
  font-weight: 600;
  color: var(--foreground);
}
.text-primary {
  color: #0058fb;
}
.text-secondary {
  color: hsl(189, 100%, 48%);
}
.text-wa {
  color: #0058fb;
}
.text-white {
  color: #fff;
}
.text-dim {
  color: rgba(255, 255, 255, 0.45);
}
.text-dark-bg {
  color: hsl(224, 71%, 4%);
}
.text-body {
  color: var(--foreground);
}

/* ── Decorative & section backgrounds ────────────────────────────────── */
.bg-grid-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px);
  background-size: 44px 44px;
}
.bg-radial-green-c {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 88, 251, 0.035) 0%, transparent 70%);
}
.bg-radial-green-b {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at bottom, rgba(0, 88, 251, 0.045) 0%, transparent 70%);
}
.cta-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 88, 251, 0.055),
    rgba(255, 255, 255, 0.025) 42%,
    rgba(43, 124, 255, 0.05)
  );
}
.cta-bg-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, hsl(224, 71%, 4%), transparent);
}

/* ── Hero layers ─────────────────────────────────────────────────────── */
.hero-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(1.05);
  background-image: url('../../images/hero-bg.jpg');
  background-size: cover;
  background-position: center top;
}
.hero-overlay-drk {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    hsl(224, 71%, 4%, 0.6),
    hsl(224, 71%, 4%, 0.8),
    hsl(224, 71%, 4%)
  );
}
.hero-overlay-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(0, 88, 251, 0.08) 0%, transparent 65%);
}
.hero-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: auto;
}

/* ── Stats number glow ───────────────────────────────────────────────── */
.stat-number--glow {
  text-shadow: 0 0 20px rgba(0, 88, 251, 0.3);
}

/* ── Payment cards ───────────────────────────────────────────────────── */
.payment-card {
  position: relative;
  overflow: hidden;
}
.payment-card--ep {
  --pc: #0058fb;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.payment-card--jc {
  --pc: hsl(189, 100%, 48%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.payment-card--bt {
  --pc: hsl(38, 100%, 55%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.payment-card__name {
  font-weight: var(--fw-heading);
  color: #fff;
}
.payment-card__tag {
  font-weight: var(--fw-heading);
  text-transform: none;
  color: var(--pc);
}
.payment-card__time {
  margin-bottom: 1rem;
}
.payment-card__time-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: #fff;
}
.payment-card__time-unit {
  margin-left: 0.5rem;
  text-transform: none;
}
.payment-card__bar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.payment-card__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--pc);
  width: 0%;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}