/* ==========================================================================
   MSP Process — Integrations directory + vendor pages
   Dual-brand (cyan + green, matches home page). Non-boxy world-class
   typography. Reuses sa-hero / sa-section primitives. All page-specific
   styles are int-* namespaced. Per-category accents:
     PSA / ITSM         → cyan
     Identity / Chat    → green (was purple in preview; harmonized to brand)
     Helpdesk / RMM     → green
   ========================================================================== */

/* --- Hero overrides --------------------------------------------------- */
.int-hero .sa-hero__title-grad {
  background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-green) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.int-hero .sa-hero__pulse-eyebrow {
  color: var(--brand-cyan);
  background: rgba(0, 186, 251, 0.10);
  border: 1px solid rgba(0, 186, 251, 0.30);
}
.int-hero .sa-hero__pulse-eyebrow .sa-pulse {
  background: var(--brand-cyan);
  box-shadow: 0 0 10px var(--brand-cyan), 0 0 0 4px rgba(0, 186, 251, 0.18);
}
.int-hero .sa-hero__glow { background: rgba(0, 186, 251, 0.30); }
.int-hero .sa-hero__inner { grid-template-columns: 1fr; max-width: 920px; text-align: center; }
.int-hero .sa-hero__copy { align-items: center; }
.int-hero .sa-hero__sub { margin-left: auto; margin-right: auto; }
.int-hero .sa-hero__stats { max-width: 760px; margin-inline: auto; }

.int-grad {
  background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-green) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.int-grad--cyan {
  background: linear-gradient(135deg, var(--brand-cyan) 0%, #00bfff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.int-grad--green {
  background: linear-gradient(135deg, var(--brand-green) 0%, #5af6a8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- Vendor category section heading group --------------------------- */
.int-cat__label {
  display: inline-block;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px; letter-spacing: 0.20em; font-weight: 800; text-transform: uppercase;
  margin: 0 auto 14px;
  color: var(--brand-cyan);
}
.int-cat--green .int-cat__label { color: var(--brand-green); }

/* --- Vendor card grid ------------------------------------------------- */
.int-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px clamp(1.5rem, 2.5vw, 2rem);
  max-width: 1180px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.int-card {
  position: relative;
  padding: 22px 4px 22px 22px;
  display: flex; flex-direction: column; gap: 14px;
  border-left: 2px solid rgba(0, 186, 251, 0.22);
  background: transparent;
  text-decoration: none;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(.2, .7, .2, 1);
}
.int-card:hover { border-left-color: var(--brand-cyan); transform: translateX(2px); }
.int-cat--green .int-card { border-left-color: rgba(10, 154, 86, 0.22); }
.int-cat--green .int-card:hover { border-left-color: var(--brand-green); }

.int-card__logo {
  width: 100%; aspect-ratio: 16/7;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  border: 1px solid rgba(11, 18, 48, 0.08);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 22px;
  box-shadow: 0 6px 18px rgba(11, 18, 48, 0.06);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.int-card:hover .int-card__logo { box-shadow: 0 12px 28px rgba(11, 18, 48, 0.10); border-color: var(--brand-cyan); }
.int-cat--green .int-card:hover .int-card__logo { border-color: var(--brand-green); }
.int-card__logo img,
.int-card__logo svg { max-width: 100%; max-height: 56px; object-fit: contain; }

/* Kaseya ships as a white wordmark + blue "K" mark on transparent. Every
   tile that hosts a vendor logo uses a white/light background in light mode
   (and white again on the int-card grid in dark mode), so the wordmark
   would be invisible without intervention. Flip brightness with invert()
   and rotate hue back to keep the blue mark blue. Skip the filter only on
   the dark hero pair where the background already goes dark. */
img[alt="Kaseya BMS"] {
  filter: invert(1) hue-rotate(180deg);
}
[data-theme="dark"] .vint-logo-pair img[alt="Kaseya BMS"] {
  filter: none;
}

.int-card__tag {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.14em; font-weight: 800; text-transform: uppercase;
  color: var(--brand-cyan);
}
.int-cat--green .int-card__tag { color: var(--brand-green); }
.int-card__title { font-family: var(--font-brand); font-weight: 600; font-size: 16.5px; line-height: 1.25; letter-spacing: -0.2px; color: var(--heading); margin: 0; }
.int-card__desc { font-weight: 300; font-size: 13.5px; line-height: 1.55; color: var(--text); margin: 0; }
.int-card__cta {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.10em; font-weight: 800; text-transform: uppercase;
  color: var(--brand-cyan);
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
}
.int-cat--green .int-card__cta { color: var(--brand-green); }

@media (max-width: 960px) { .int-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .int-grid { grid-template-columns: 1fr; } }

/* --- Request panel + final CTA --------------------------------------- */
.int-request, .int-final {
  position: relative; overflow: hidden;
  max-width: 1080px; margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem);
  border-radius: 22px; text-align: center;
  background: linear-gradient(135deg, rgba(0, 186, 251, 0.10), rgba(10, 154, 86, 0.04));
  border: 1px solid rgba(0, 186, 251, 0.22);
}
.int-request::before, .int-final::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 900px; max-width: 130%; height: 280px;
  background: rgba(0, 186, 251, 0.14); filter: blur(110px); border-radius: 700px;
  pointer-events: none;
}
.int-request__inner, .int-final__inner { position: relative; z-index: 1; }
.int-request__title, .int-final__title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.4px; margin: 0 0 14px; }
.int-request__sub, .int-final__sub { font-weight: 300; font-size: 15.5px; line-height: 1.55; color: var(--text); max-width: 640px; margin: 0 auto 24px; }
.int-request__cta, .int-final__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ==========================================================================
   VENDOR PAGE — hero + sections shared across all 12 integration pages
   ========================================================================== */

/* --- Vendor hero — logo block + headline ----------------------------- */
.vint-hero .sa-hero__title-grad {
  background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-green) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.vint-hero .sa-hero__pulse-eyebrow {
  color: var(--brand-cyan);
  background: rgba(0, 186, 251, 0.10);
  border: 1px solid rgba(0, 186, 251, 0.30);
}
.vint-hero .sa-hero__pulse-eyebrow .sa-pulse {
  background: var(--brand-cyan);
  box-shadow: 0 0 10px var(--brand-cyan), 0 0 0 4px rgba(0, 186, 251, 0.18);
}
.vint-hero .sa-hero__glow { background: rgba(0, 186, 251, 0.30); }
.vint-hero .sa-hero__inner { grid-template-columns: 1fr; max-width: 960px; text-align: center; }
.vint-hero .sa-hero__copy { align-items: center; }
.vint-hero .sa-hero__sub { margin-left: auto; margin-right: auto; max-width: 720px; }
.vint-hero .sa-hero__stats { max-width: 760px; margin-inline: auto; }
.vint-hero--green .sa-hero__title-grad {
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-cyan) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vint-hero--green .sa-hero__pulse-eyebrow {
  color: var(--brand-green);
  background: rgba(10, 154, 86, 0.10);
  border-color: rgba(10, 154, 86, 0.30);
}
.vint-hero--green .sa-hero__pulse-eyebrow .sa-pulse {
  background: var(--brand-green);
  box-shadow: 0 0 10px var(--brand-green), 0 0 0 4px rgba(10, 154, 86, 0.18);
}
.vint-hero--green .sa-hero__glow { background: rgba(10, 154, 86, 0.30); }

/* MSP Process + vendor logo pair — theme-aware */
.vint-logo-pair {
  display: inline-flex; align-items: center; gap: 22px;
  padding: 16px 26px; margin-bottom: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  border: 1px solid rgba(11, 18, 48, 0.08);
  border-radius: 16px;
  box-shadow: 0 10px 26px -10px rgba(11, 18, 48, 0.20);
}
[data-theme="dark"] .vint-logo-pair {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.50);
}
.vint-logo-pair img {
  height: 40px; max-width: 240px;
  object-fit: contain;
}
.vint-logo-pair__msp-logo { height: 44px; max-width: 220px; }
/* Per-vendor logo size tweaks — Datto Autotask renders small at 40px,
   bump it so it reads at the same visual weight as the MSP wordmark. */
.vint-logo-pair img[src*="datto-autotask"] { height: 60px; max-width: 280px; }
/* Theme-only overrides — beat .vint-logo-pair img specificity */
.vint-logo-pair .theme-dark-only { display: none; }
[data-theme="dark"] .vint-logo-pair .theme-dark-only { display: block; }
[data-theme="dark"] .vint-logo-pair .theme-light-only { display: none; }
.vint-logo-pair__divider {
  width: 1px; height: 36px;
  background: rgba(11, 18, 48, 0.16);
  flex-shrink: 0;
}
[data-theme="dark"] .vint-logo-pair__divider { background: rgba(255, 255, 255, 0.18); }

/* --- Vendor — old vs new compare ------------------------------------- */
.vint-compare {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: 1180px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.vint-compare__col {
  position: relative;
  padding: 26px 8px 26px 26px;
  border-left: 3px solid rgba(255, 255, 255, 0.10);
  background: transparent;
}
.vint-compare__col--bad  { border-left-color: rgba(255, 94, 94, 0.55); }
.vint-compare__col--good { border-left-color: var(--brand-cyan); }
.vint-compare__tag {
  display: inline-block; margin-bottom: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.14em; font-weight: 800; text-transform: uppercase;
}
.vint-compare__col--bad .vint-compare__tag { color: #ff5e5e; }
.vint-compare__col--good .vint-compare__tag { color: var(--brand-cyan); }
.vint-compare__h {
  font-family: var(--font-brand); font-weight: 600;
  font-size: clamp(1.25rem, 0.9rem + 1vw, 1.5rem);
  line-height: 1.2; letter-spacing: -0.3px;
  color: var(--heading); margin: 0 0 18px;
}
.vint-compare__steps { position: relative; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; }
.vint-compare__steps::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; }
.vint-compare__col--bad .vint-compare__steps::before { background: linear-gradient(180deg, rgba(255, 94, 94, 0.4), rgba(255, 94, 94, 0.15)); }
.vint-compare__col--good .vint-compare__steps::before { background: linear-gradient(180deg, rgba(0, 186, 251, 0.4), rgba(0, 186, 251, 0.15)); }
.vint-compare__step { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.vint-compare__step::before {
  content: ""; position: absolute; left: -22px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 3px solid var(--bg);
}
.vint-compare__col--bad .vint-compare__step::before { background: #ff5e5e; box-shadow: 0 0 0 1px rgba(255, 94, 94, 0.5); }
.vint-compare__col--good .vint-compare__step::before { background: var(--brand-cyan); box-shadow: 0 0 0 1px rgba(0, 186, 251, 0.5); }
.vint-compare__num {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-weight: 800; font-size: 11px;
}
.vint-compare__col--bad .vint-compare__num { color: #ff5e5e; }
.vint-compare__col--good .vint-compare__num { color: var(--brand-cyan); }
.vint-compare__text { font-size: 13.5px; line-height: 1.55; color: var(--heading); }
.vint-hero--green ~ .vint-compare__col--good,
.vint-section--green .vint-compare__col--good { border-left-color: var(--brand-green); }
.vint-section--green .vint-compare__col--good .vint-compare__tag,
.vint-section--green .vint-compare__col--good .vint-compare__num { color: var(--brand-green); }
.vint-section--green .vint-compare__col--good .vint-compare__steps::before { background: linear-gradient(180deg, rgba(10, 154, 86, 0.4), rgba(10, 154, 86, 0.15)); }
.vint-section--green .vint-compare__col--good .vint-compare__step::before { background: var(--brand-green); box-shadow: 0 0 0 1px rgba(10, 154, 86, 0.5); }
@media (max-width: 900px) { .vint-compare { grid-template-columns: 1fr; } }

/* --- Vendor — process steps connected spine -------------------------- */
.vint-flow {
  --node: 56px; --line: 3px;
  position: relative; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 1180px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: calc(var(--node) / 2 + 22px) 0 0;
}
.vint-flow::before {
  content: ""; position: absolute;
  top: calc(var(--node) / 2 + 22px); left: 12%; right: 12%;
  height: var(--line); transform: translateY(-50%);
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-green));
  border-radius: 999px;
  pointer-events: none;
}
.vint-flow__step { position: relative; text-align: center; }
.vint-flow__node {
  position: relative;
  width: var(--node); height: var(--node); border-radius: 50%;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  font-family: var(--font-brand); font-weight: 700; font-size: 18px; color: #fff;
  background: linear-gradient(150deg, var(--brand-cyan), #00bfff);
  box-shadow: 0 10px 22px -8px rgba(0, 186, 251, 0.55), 0 0 0 6px var(--bg);
  z-index: 2;
}
.vint-section--green .vint-flow__node {
  background: linear-gradient(150deg, var(--brand-green), #5af6a8);
  box-shadow: 0 10px 22px -8px rgba(10, 154, 86, 0.55), 0 0 0 6px var(--bg);
}
.vint-flow__name { font-family: var(--font-brand); font-weight: 600; font-size: 15.5px; line-height: 1.25; letter-spacing: -0.2px; color: var(--heading); margin: 0 0 8px; }
.vint-flow__body { font-weight: 300; font-size: 13px; line-height: 1.55; color: var(--text); margin: 0; max-width: 24ch; margin-inline: auto; }
@media (max-width: 900px) { .vint-flow { grid-template-columns: repeat(2, 1fr); padding-top: 0; gap: 32px 18px; } .vint-flow::before { display: none; } }
@media (max-width: 540px) { .vint-flow { grid-template-columns: 1fr; } }

/* --- Vendor — capabilities grid (non-boxy left-accent) -------------- */
.vint-feats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px clamp(1.5rem, 2.5vw, 2rem);
  max-width: 1180px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.vint-feat {
  position: relative;
  padding: 22px 4px 22px 22px;
  display: flex; flex-direction: column; gap: 11px;
  border-left: 2px solid rgba(0, 186, 251, 0.20);
  background: transparent;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.vint-feat:hover { border-left-color: var(--brand-cyan); transform: translateX(2px); }
.vint-section--green .vint-feat { border-left-color: rgba(10, 154, 86, 0.20); }
.vint-section--green .vint-feat:hover { border-left-color: var(--brand-green); }
.vint-feat__head { display: flex; align-items: center; gap: 12px; }
.vint-feat__icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  color: var(--brand-cyan);
  background: linear-gradient(135deg, rgba(0, 186, 251, 0.12), rgba(0, 186, 251, 0.03));
  border: 1px solid rgba(0, 186, 251, 0.24);
  flex-shrink: 0;
  font-size: 20px;
}
.vint-section--green .vint-feat__icon {
  color: var(--brand-green);
  background: linear-gradient(135deg, rgba(10, 154, 86, 0.12), rgba(10, 154, 86, 0.03));
  border-color: rgba(10, 154, 86, 0.24);
}
.vint-feat__icon img, .vint-feat__icon svg { width: 24px; height: 24px; }
/* Bare icon variant — lets brand-colored SVGs (Teams, WhatsApp) render
   without our cyan/green tile tint. */
.vint-feat__icon--bare,
.vint-section--green .vint-feat__icon--bare {
  background: transparent;
  border: none;
  padding: 0;
}
.vint-feat__icon--bare svg { display: block; }
.vint-feat__title { font-family: var(--font-brand); font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -0.2px; color: var(--heading); margin: 0; flex: 1; min-width: 0; }
.vint-feat__desc { font-weight: 300; font-size: 13.5px; line-height: 1.55; color: var(--text); margin: 0; }
.vint-feat__tag {
  align-self: flex-start;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.12em; font-weight: 800; text-transform: uppercase;
  color: var(--brand-cyan);
}
.vint-section--green .vint-feat__tag { color: var(--brand-green); }
@media (max-width: 960px) { .vint-feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vint-feats { grid-template-columns: 1fr; } }

/* --- Vendor pages: mobile polish -------------------------------------- */
@media (max-width: 720px) {
  /* Hero logo pair: shrink and allow wrap so two large vendor logos
     fit on a phone without overflowing the card. */
  .vint-logo-pair {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
    padding: 12px 16px;
    margin-bottom: 22px;
    max-width: 100%;
  }
  .vint-logo-pair img { height: 32px; max-width: 160px; }
  .vint-logo-pair__msp-logo { height: 34px; max-width: 170px; }
  .vint-logo-pair img[src*="datto-autotask"] { height: 46px; max-width: 200px; }
  .vint-logo-pair__divider { height: 22px; }

  /* Compress capability + compare cards so phones see less wasted padding. */
  .vint-feat { padding: 18px 4px 18px 18px; gap: 9px; }
  .vint-feat__title { font-size: 15.5px; }
  .vint-feat__desc { font-size: 13px; }
  .vint-compare__col { padding: 22px 4px 22px 22px; }
  .vint-compare__h { font-size: 1.15rem; }
  .vint-compare__text { font-size: 13px; }

  /* Final CTA: tighter padding + smaller title so it doesn't dwarf the
     phone viewport. */
  .vint-final {
    padding: clamp(1.75rem, 6vw, 2.5rem) clamp(1rem, 4vw, 1.75rem);
    border-radius: 16px;
  }
  .vint-final__title { font-size: 1.5rem; line-height: 1.18; }
  .vint-final__sub { font-size: 14px; margin-bottom: 18px; }
  .vint-final__cta .msp-btn { width: 100%; justify-content: center; }
}

@media (max-width: 460px) {
  /* On the smallest phones, stack the logo pair vertically and drop the
     divider so each logo gets full readable size. */
  .vint-logo-pair {
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
  }
  .vint-logo-pair__divider {
    width: 36px; height: 1px;
  }
  .vint-logo-pair img,
  .vint-logo-pair__msp-logo { height: 34px; max-width: 200px; }
}

/* --- Vendor — live view dark sim card -------------------------------- */
.vint-mock-wrap { max-width: 1080px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.vint-mock {
  position: relative;
  background: linear-gradient(180deg, #0f1729, #050917);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -16px rgba(0, 0, 0, 0.5);
  color: #fff;
}
.vint-mock__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.vint-mock__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.vint-mock__title {
  margin-left: auto;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.10em; color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase; font-weight: 800;
}
.vint-mock__body {
  padding: 22px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 13px; line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}
.vint-mock__body .row { display: block; }
.vint-mock__body .ok      { color: #5af6a8; }
.vint-mock__body .fail    { color: #ff8888; }
.vint-mock__body .info    { color: var(--brand-cyan); }
.vint-mock__body .info-g  { color: var(--brand-green); }
.vint-mock__body .muted   { color: rgba(255, 255, 255, 0.5); }

/* --- Vendor — final CTA band ---------------------------------------- */
.vint-final {
  position: relative; overflow: hidden;
  max-width: 1080px; margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem);
  border-radius: 22px; text-align: center;
  background: linear-gradient(135deg, rgba(0, 186, 251, 0.10), rgba(10, 154, 86, 0.04));
  border: 1px solid rgba(0, 186, 251, 0.22);
}
.vint-section--green .vint-final,
.vint-final--green {
  background: linear-gradient(135deg, rgba(10, 154, 86, 0.10), rgba(0, 186, 251, 0.04));
  border-color: rgba(10, 154, 86, 0.22);
}
.vint-final::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 900px; max-width: 130%; height: 280px;
  background: rgba(0, 186, 251, 0.14); filter: blur(110px); border-radius: 700px;
  pointer-events: none;
}
.vint-section--green .vint-final::before,
.vint-final--green::before { background: rgba(10, 154, 86, 0.14); }
.vint-final__inner { position: relative; z-index: 1; }
.vint-final__title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.4px; margin: 0 0 14px; }
.vint-final__sub { font-weight: 300; font-size: 15.5px; line-height: 1.55; color: var(--text); max-width: 640px; margin: 0 auto 24px; }
.vint-final__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }