/**
 * Token-based utilities — replaces ad hoc inline styles on service/marketing pages
 */

/* ---- Spacing ---- */
.u-mt-sm { margin-top: var(--space-4); }
.u-mt-md { margin-top: var(--space-8); }
.u-mt-lg { margin-top: var(--space-12); }
.u-mt-btn { margin-top: var(--space-6); }
.u-text-center { text-align: center; }
.u-center-block { margin-left: auto; margin-right: auto; }

/* ---- Page hero variants ---- */
/* AI hero — violet-tinted light wash (v7 light-first) */
.page-hero--ai-gradient {
  background:
    radial-gradient(50rem 24rem at 15% 10%, rgba(91, 33, 182, 0.08), transparent 65%),
    radial-gradient(44rem 22rem at 85% 22%, rgba(0, 212, 255, 0.09), transparent 65%),
    linear-gradient(var(--color-off-white), var(--color-white));
}

.page-hero__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.badge--promo {
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
}

/* ---- Gradient text (works with .text-gradient clip) ----
   Light-surface stops (≥4.5:1 vs #fff) — heroes are light in v7 */
.text-gradient--coral-teal {
  background-image: linear-gradient(135deg, #b91c1c, #006B82);
}

.text-gradient--yellow-teal {
  background-image: linear-gradient(135deg, #b45309, #0f766e);
}

/* ---- Buttons ---- */
/* Deepened stops (v7): white label needs ≥3:1 on both gradient ends */
.btn--gradient-coral-teal {
  background: linear-gradient(135deg, #d94f4f, #007487);
  border: none;
  color: #fff;
}

.btn--gradient-coral-teal:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 28px rgba(0, 212, 255, 0.25), 0 8px 28px rgba(255, 107, 107, 0.2);
}

/* ---- Feature cards (light sections) ---- */
.card--feature-top-coral {
  border-top: 3px solid var(--color-coral-a11y);
}

.card--feature-top-teal {
  border-top: 3px solid var(--color-teal-a11y);
}

/* Feature icon color variants consolidated in cards.css */

/* ---- Dark content cards ---- */
.card--dark-bar-coral {
  border-left: 3px solid var(--color-coral);
}

.card--dark-bar-teal {
  border-left: 3px solid var(--color-teal);
}

.service-mini-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.service-mini-head h3 {
  margin: 0;
  color: #fff;
}

.service-mini-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-mini-icon--coral {
  background: rgba(255, 107, 107, 0.2);
  color: var(--color-on-light-coral);
}

.service-mini-icon--teal {
  background: rgba(0, 212, 255, 0.2);
  color: var(--color-on-light-teal);
}

/* ---- Process steps (numbered circles) ---- */
.card--feature-center {
  text-align: center;
}

.process-step-num {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--color-coral), var(--color-teal));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: #fff;
  font-weight: var(--font-black);
  font-size: 1.2rem;
}

/* ---- Stat / KPI blocks on dark ---- */
.card--dark-stat {
  text-align: center;
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.stat-highlight {
  font-size: 2.5rem;
  font-weight: var(--font-black);
  line-height: 1.1;
  background: linear-gradient(135deg, var(--color-coral), var(--color-teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- CTA strip variants ---- */
.cta-section--blend-ai {
  background: linear-gradient(135deg, var(--color-coral) 0%, #0b1426 50%, var(--color-teal) 100%);
}

/* ---- Pricing / emphasis (web maintenance) ---- */
.card--dark-outline-teal-soft {
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.card--dark-featured-yellow {
  border: 2px solid var(--color-yellow);
}

.badge--pill-dark {
  display: inline-block;
  background: var(--color-yellow);
  color: var(--color-navy);
  font-size: 0.75rem;
  font-weight: var(--font-semibold);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.5rem;
}

.heading-accent-yellow {
  color: var(--color-yellow);
}

.subtitle-on-dark-soft {
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  margin-top: var(--space-6);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.cta-row-center {
  text-align: center;
  margin-top: var(--space-8);
}

/* ---- Section headers on dark (explicit when nested markup skips token cascade) ---- */
.section--dark .section__header h2.heading-on-dark,
.section--dark h2.heading-on-dark {
  color: #fff;
}

/* ---- Service hub accents (vertical landing pages) ---- */
.page-accent--general-it {
  --hub-accent: #c85a38;
  --hub-accent-rgb: 200, 90, 56;
}

.page-accent--general-it .text-gradient--hub-accent {
  background-image: linear-gradient(135deg, #b34e2e, #0f766e);
}

.page-accent--general-it .btn--hub-accent {
  background: var(--hub-accent);
  border-color: var(--hub-accent);
  color: #fff;
}

.page-accent--general-it .btn--hub-accent:hover {
  filter: brightness(1.06);
}

.page-accent--general-it .card__icon--hub-accent,
.page-accent--general-it .card__feature-icon--hub-accent {
  background: rgba(var(--hub-accent-rgb), 0.1);
  color: var(--hub-accent);
}

.page-accent--general-it .card__category--hub-accent {
  color: var(--hub-accent);
}

.page-accent--general-it .card__step--hub-accent {
  color: var(--hub-accent);
}

.page-accent--web-digital {
  --hub-accent: #0d9488;
  --hub-accent-rgb: 13, 148, 136;
}

.page-accent--web-digital .text-gradient--sand-mint {
  background-image: linear-gradient(135deg, #8a6d3b, #0f766e);
}

.page-accent--web-digital .btn--hub-accent {
  background: var(--hub-accent);
  border-color: var(--hub-accent);
  color: #fff;
}

.page-accent--web-digital .btn--hub-accent:hover {
  filter: brightness(1.06);
}

.page-accent--web-digital .card__icon--hub-accent,
.page-accent--web-digital .card__feature-icon--hub-accent {
  background: rgba(var(--hub-accent-rgb), 0.1);
  color: var(--color-on-light-teal);
}

.page-accent--web-digital .card__category--hub-accent {
  color: var(--color-on-light-teal);
}

.page-accent--web-digital .card__step--hub-accent {
  color: var(--color-on-light-teal);
}

/* Services overview — pillar CTAs without a wrapper */
.btn--accent-terracotta {
  background: #b45309;
  border-color: #b45309;
  color: #fff;
}

.btn--accent-terracotta:hover {
  filter: brightness(1.06);
}

.btn--accent-teal-hub {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}

.btn--accent-teal-hub:hover {
  filter: brightness(1.06);
}

.btn--accent-coral {
  background: var(--color-on-light-coral-deep);
  border-color: var(--color-on-light-coral-deep);
  color: #fff;
}

.btn--accent-coral:hover {
  filter: brightness(1.08);
}

.card__icon--coral {
  background: var(--color-coral-subtle);
  color: var(--color-on-light-coral-deep);
}

.card__icon--sm {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.contact-service-card__icon--coral {
  background: var(--color-coral-subtle);
  color: var(--color-on-light-coral-deep);
}

.contact-service-card__icon--yellow {
  background: var(--color-yellow-subtle);
  color: var(--color-on-light-yellow);
}

.card__tag--coral {
  color: var(--color-on-light-coral-deep);
}

.card__tag--yellow {
  color: var(--color-on-light-yellow);
}

a.card__link--coral {
  color: var(--color-on-light-coral-deep);
}

a.card__link--coral:hover {
  color: var(--color-on-light-coral);
}

a.card__link--yellow {
  color: var(--color-on-light-yellow);
}

a.card__link--yellow:hover {
  color: var(--color-navy);
}

.card__icon--cyan,
.card__feature-icon--cyan {
  background: var(--color-teal-subtle);
  color: var(--color-on-light-teal);
}

.illustration-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.u-hidden {
  display: none !important;
}

.offline-brand-img {
  margin: 0 auto 2rem;
  display: block;
}

.u-mt-xl {
  margin-top: var(--space-10);
}