/* =========================
   Pricing Hero (Above the Fold) — scoped
   ========================= */

#pricing-hero {
  background: transparent;
  padding: 3rem 1.25rem;
  position: relative;
}

.pricing-hero__container {
  position: relative;
  overflow: hidden; /* hide gear overflow */
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.5rem 2rem;

  /* Conversion-oriented palette:
     - Top: trust (blue)
     - Mid: growth (mint/teal tint)
     - Bottom: comfort/warmth (soft amber) */
  background:
    radial-gradient(1100px 300px at 15% -60%, rgba(59,130,246,0.10), transparent 60%),
    radial-gradient(1100px 300px at 85% 120%, rgba(16,185,129,0.10), transparent 60%),
    linear-gradient(180deg, #eef6ff 0%, #f7fdfa 55%, #fff7ed 100%);
  border-radius: 1.25rem;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
  text-align: center;
  border: 1px solid #e2e8f0;
}

/* subtle gradient ring border for premium feel */
.pricing-hero__container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, #3b82f6, #22c55e, #f59e0b, #3b82f6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .6;
}

.pricing-hero__copy {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1; /* above gears */
}

.pricing-hero__title {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.pricing-hero__sub {
  font-size: 1.125rem;
  color: #334155;
  margin-bottom: 0; /* no chips, so tighten */
}

/* =========================
   Decorative Gears (visible, rotating)
   ========================= */

.pricing-hero__gear {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  animation: pricing-hero-spin 18s linear infinite;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}

/* Gear appearance using conic + radial gradients */
.pricing-hero__gear {
  background:
    radial-gradient(circle at center, #ffffff 0 28%, transparent 29%), /* center hole */
    conic-gradient(
      from 0deg,
      rgba(37, 99, 235, 0.18) 0deg 20deg,
      transparent 20deg 45deg,
      rgba(16, 185, 129, 0.18) 45deg 65deg,
      transparent 65deg 90deg
    );
  border: 2px solid rgba(30,58,138,0.25);
}

/* Top-left gear */
.pricing-hero__gear--tl {
  width: 180px;
  height: 180px;
  top: -40px;
  left: -40px;
  animation-duration: 28s; /* slower */
}

/* Bottom-right gear */
.pricing-hero__gear--br {
  width: 240px;
  height: 240px;
  bottom: -50px;
  right: -50px;
  animation-duration: 20s; /* faster */
  animation-direction: reverse;
}

/* Spin keyframes */
@keyframes pricing-hero-spin {
  to { transform: rotate(360deg); }
}

/* =========================
   Responsive refinements
   ========================= */
@media (min-width: 768px) {
  .pricing-hero__title { font-size: 2.25rem; }
  .pricing-hero__sub   { font-size: 1.2rem; }
}

@media (max-width: 480px) {
  .pricing-hero__gear--tl { width: 120px; height: 120px; top: -30px; left: -30px; }
  .pricing-hero__gear--br { width: 160px; height: 160px; right: -32px; bottom: -32px; }
}

/* =========================
   Section 3 — Final Call to Action
   ========================= */

#pricing-final-cta {
  padding: 2.5rem 1.25rem;
  background: transparent; /* let the card carry the style */
}

.pricing-final-cta__container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  padding: 2rem 1.75rem;
  border-radius: 1.25rem;
  background:
    radial-gradient(900px 250px at 20% -60%, rgba(59,130,246,0.08), transparent 60%),
    radial-gradient(800px 240px at 90% 120%, rgba(34,197,94,0.08), transparent 60%),
    #f8fafc; /* soft card background */
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 22px rgba(2, 6, 23, 0.06);

  /* gradient ring accent */
  --ring: linear-gradient(90deg, #3b82f6, #22c55e, #3b82f6);
}
.pricing-final-cta__container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--ring);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

.pricing-final-cta__header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.pricing-final-cta__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.pricing-final-cta__sub {
  font-size: 1.05rem;
  color: #475569;
  max-width: 640px;
  margin: 0 auto;
}

.pricing-final-cta__actions {
  text-align: center;
  margin-top: 1.5rem;
}

.pricing-final-cta__actions .btn.cta.block {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.85rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(90deg, #0f172a, #1f2937);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pricing-final-cta__actions .btn.cta.block:hover,
.pricing-final-cta__actions .btn.cta.block:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* Responsive */
@media (min-width: 768px) {
  .pricing-final-cta__title { font-size: 1.75rem; }
  .pricing-final-cta__sub   { font-size: 1.1rem; }
}
/* =========================
   Final CTA — pill visibility, bounce loop, hover orange
   ========================= */

/* Make sure the ring (::before) sits under content */
.pricing-final-cta__container {
  position: relative;
  isolation: isolate;           /* create a new stacking context */
}
.pricing-final-cta__container::before {
  z-index: 0;                   /* keep border ring below content */
}
.pricing-final-cta__header,
.pricing-final-cta__actions {
  position: relative;
  z-index: 1;                   /* ensure text & button are above ring */
}

/* Bouncy pill */
.pricing-final-cta__actions .btn.cta.block {
  display: inline-block;
  position: relative;
  z-index: 1;                   /* sit above everything */
  animation: pricingCtaBounce 2.2s ease-in-out infinite;
  /* keep the same base styling you already set */
  transition: background 0.2s ease, box-shadow 0.2s ease;
  /* remove transform-on-hover so animation isn't overridden */
}

/* Hover → orange gradient */
.pricing-final-cta__actions .btn.cta.block:hover,
.pricing-final-cta__actions .btn.cta.block:focus {
  background: linear-gradient(90deg, #f59e0b, #fb923c); /* orange sweep */
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.35);
  outline: 2px solid #fed7aa;
  outline-offset: 2px;
}

/* Bounce keyframes (subtle, non-annoying) */
@keyframes pricingCtaBounce {
  0%, 100%   { transform: translateY(0); }
  50%        { transform: translateY(-6px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pricing-final-cta__actions .btn.cta.block {
    animation: none;
  }
}
/* Make final CTA button a compact pill instead of full-width */
.pricing-final-cta__actions .btn.cta.block {
  display: inline-block;       /* shrink to content */
  width: auto;                 /* don’t stretch */
  min-width: 180px;            /* optional: keeps it from looking tiny */
  padding: 0.75rem 1.75rem;    /* pill shape */
  border-radius: 999px;        /* fully rounded pill */
  text-align: center;
}


/* ===================
Services Section (Scoped: services-gridx) 
=========================== */
#services-gridx {
  padding: 32px 20px 64px; /* reduced top padding */
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
  font-family: 'Inter', sans-serif;
  --sgx-card-w: 280px;
  --sgx-green: 34, 197, 94; /* light green glow */
}

.services-gridx__container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.services-gridx__header { margin-bottom: 32px; }

.services-gridx__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.services-gridx__subtitle { color: #555; font-size: 1rem; }

/* --- Layout --- */
.services-gridx__cards {
  display: grid;
  gap: 25px;
  grid-template-columns: 1fr; /* default mobile: 1 per row */
  justify-content: center;
}

/* Tablet (≥768px): 2 cards per row */
@media (min-width: 768px) {
  .services-gridx__cards {
    grid-template-columns: repeat(2, minmax(var(--sgx-card-w), 1fr));
  }
}

/* Desktop (≥1024px): 4 cards per row */
@media (min-width: 1024px) {
  .services-gridx__cards {
    grid-template-columns: repeat(4, minmax(var(--sgx-card-w), 1fr));
  }
}

/* --- Card --- */
.services-gridx__card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(var(--sgx-green), 0.25);
  box-shadow:
    0 0 0 3px rgba(var(--sgx-green), 0.08) inset,
    0 6px 20px rgba(0,0,0,0.06);
  padding: 30px 20px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--sgx-card-w);
  width: 100%;
}

.services-gridx__card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--sgx-green), 0.4);
  box-shadow:
    0 0 0 4px rgba(var(--sgx-green), 0.15) inset,
    0 10px 25px rgba(0,0,0,0.1);
}

.services-gridx__icon { font-size: 2.5rem; margin-bottom: 15px; }

.services-gridx__card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 12px;
}

.services-gridx__desc {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 18px;
}

.services-gridx__cta {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ff6600;
  transition: color 0.25s ease;
}

.services-gridx__card:hover .services-gridx__cta { color: #e64500; }
.services-gridx__title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

/* underline animation */
.services-gridx__title::after {
  content: "";
  display: block;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    #ffffff,
    #1e90ff,
    #ff6600,
    #22c55e,
    #ffffff
  );
  background-size: 300% 100%;
  animation: servicesLineMove 6s linear infinite;
  width: 120px; /* adjust underline length */
}

@keyframes servicesLineMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Mobile: center the card inside the 1-column grid */
.services-gridx__cards {
  justify-items: center;   /* centers items within their grid areas */
}

/* Safety: center any card wherever it ends up */
.services-gridx__card {
  margin-inline: auto;     /* keeps single-column cards centered */
}

/* Optional: once you hit 2/4 columns, stretch again (not required, but tidy) */
@media (min-width: 768px) {
  .services-gridx__cards { justify-items: stretch; }
}