/* ============================================
   POP HOSTING — Spacing, radius, shadow, motion
   ============================================ */
:root {
  /* ---- Radii ---- */
  --pop-radius: 12px;      /* default cards, reviews */
  --pop-radius-lg: 16px;   /* product / advantage cards */
  --pop-radius-xl: 20px;   /* hero accents */
  --pop-radius-pill: 30px; /* tabs, pills */
  --pop-radius-btn: 8px;   /* buttons */

  /* ---- Shadows (cool POP-blue tint) ---- */
  --pop-shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);
  --pop-shadow-sm: 0 2px 8px rgba(10, 30, 61, .06);
  --pop-shadow-md: 0 8px 24px rgba(10, 30, 61, .08);
  --pop-shadow-lg: 0 16px 48px rgba(10, 30, 61, .10);
  --pop-shadow-xl: 0 24px 56px rgba(10, 30, 61, .14);
  --pop-shadow-green: 0 4px 16px rgba(0, 201, 167, .35);
  --pop-shadow-blue: 0 2px 10px rgba(16, 98, 254, .20);

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;   /* numbers section padding */
  --space-15: 60px;     /* section ptb desktop */
  --space-20: 80px;     /* advantages / CTA padding */

  /* ---- Layout ---- */
  --container-max: 1140px; /* @kind other */
  --section-pad-y: 60px;       /* @kind spacing */
  --section-pad-y-mobile: 40px; /* @kind spacing */

  /* ---- Motion ---- */
  --pop-transition: all .3s cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --pop-ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */

  /* ---- Hover lift amounts ---- */
  --lift-btn: -2px;        /* @kind other */
  --lift-card: -5px;       /* @kind other */
  --lift-card-strong: -6px; /* @kind other */
}