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

/* ── 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);
}

/* ── Decorative orbs ─────────────────────────────────────────────────── */
.deco-orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.deco-orb--hero-1 {
  top: 25%;
  right: 33%;
  width: 20rem;
  height: 20rem;
  background: rgba(0, 88, 251, 0.15);
  filter: blur(100px);
}
.deco-orb--hero-2 {
  bottom: 33%;
  left: 25%;
  width: 15rem;
  height: 15rem;
  background: hsl(189, 100%, 48%, 0.18);
  filter: blur(80px);
}
.deco-orb--hero-3 {
  top: 50%;
  left: 50%;
  width: 24rem;
  height: 24rem;
  background: rgba(0, 88, 251, 0.1);
  filter: blur(120px);
  transform: translate(-50%, -50%);
}
.deco-orb--feat-tr {
  top: 0;
  right: 0;
  width: 37.5rem;
  height: 37.5rem;
  background: rgba(0, 88, 251, 0.05);
  filter: blur(140px);
}
.deco-orb--inst-c {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 43.75rem;
  height: 25rem;
  background: rgba(0, 88, 251, 0.05);
  filter: blur(120px);
}
.deco-orb--sec-tr {
  top: 0;
  right: 0;
  width: 50rem;
  height: 37.5rem;
  background: rgba(0, 88, 251, 0.05);
  filter: blur(130px);
}
.deco-orb--soc-tc {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56.25rem;
  height: 25rem;
  background: rgba(0, 88, 251, 0.04);
  filter: blur(140px);
}
.deco-orb--cta-c {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 37.5rem;
  height: 25rem;
  background: rgba(0, 88, 251, 0.15);
  filter: blur(120px);
}
.deco-orb--wa {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  height: 130%;
  background: rgba(0, 88, 251, 0.08);
  filter: blur(90px);
}

/* ── 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: 700;
  color: #fff;
}
.payment-card__tag {
  font-weight: 700;
  text-transform: uppercase;
  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: uppercase;
}
.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);
}