.vincula-landing {
  --vincula-pink: #e4579d;
  --vincula-purple: #785ef0;
  --vincula-yellow: #ffb000;
  --vincula-blue: #779dff;
  --vincula-teal: #5bb4a5;
  --vincula-green: #009e73;
  --vincula-light: #c8c8c8;
  --vincula-black: #000000;
  --vincula-dark: #646464;
  background: var(--vincula-purple);
  color: #fff;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}
.vincula-landing a:focus-visible,
.vincula-landing button:focus-visible { outline: 3px solid #000; outline-offset: 5px; }
.vincula-hero {
  position: relative;
  display: flex;
  min-height: calc(100svh - 92px);
  min-height: calc(100dvh - 92px);
  align-items: center;
  overflow: hidden;
  padding: 66px 0 42px;
  background: var(--vincula-purple);
}
.vincula-hero::before { content: ""; position: absolute; pointer-events: none; top: 65px; left: -45px; width: 210px; height: 230px; background-image: radial-gradient(rgb(0 0 0 / 15%) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(to right, #000, transparent); }
.vincula-hero > .container { position: relative; z-index: 1; }
.vincula-hero__background-logo {
  position: absolute;
  z-index: 0;
  right: 2%;
  bottom: 3%;
  width: clamp(500px, 67vw, 966px);
  pointer-events: none;
  user-select: none;
  --arrival-scale: 4.5;
  --arrival-duration: 8s;
  animation: vincula-hero-arrival var(--arrival-duration) ease-in-out both;
  transform-origin: center;
  will-change: transform;
}
.vincula-hero__background-logo img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center;
  animation: vincula-hero-spin 80s linear infinite;
}
.vincula-hero__intro { max-width: 960px; margin: 0 auto; text-align: center; }
.vincula-hero__eyebrow { display: inline-block; padding: 9px 18px; border: 1px solid var(--vincula-yellow); border-radius: 50px; color: var(--vincula-yellow); font-size: .7rem; font-weight: 650; letter-spacing: 1.7px; text-transform: uppercase; }
.vincula-hero h1 { margin: 26px 0 22px; font-size: clamp(2.7rem, 5.2vw, 4.6rem); font-weight: 750; line-height: 1.09; letter-spacing: -2.8px; }
.vincula-hero h1 em { color: var(--vincula-yellow); font-family: Georgia, serif; font-weight: 400; }
.vincula-hero__description { max-width: 640px; margin: 0 auto; color: rgb(255 255 255 / 88%); font-size: 1.075rem; line-height: 1.8; }
.vincula-hero__actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 30px; }
.vincula-hero__actions a { display: inline-flex; align-items: center; gap: 14px; font-size: .92rem; font-weight: 600; text-decoration: none; }
.vincula-hero__primary { padding: 17px 27px; border-radius: 50px; background: var(--vincula-yellow); color: var(--vincula-black); box-shadow: 0 8px 22px rgb(255 176 0 / 28%); }
.vincula-hero__primary:hover { background: #e6a000; color: var(--vincula-black); }
.vincula-hero__primary span { font-size: 1.3rem; }
.vincula-hero__secondary { color: #fff; }
.vincula-hero__secondary:hover { color: var(--vincula-yellow); text-decoration: underline; }
.vincula-hero__action-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 58%); border-radius: 50%; font-size: 1.3rem; }
.vincula-hero__pillars { display: grid; grid-template-columns: .9fr 1fr 1fr 1fr; align-items: center; max-width: 1040px; margin: 54px auto 0; padding: 24px 16px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 20px; background: #fff; color: #000; box-shadow: 0 10px 32px rgb(0 0 0 / 12%); }
.vincula-hero__brand { text-align: center; padding: 0 20px; }
.vincula-hero__logo { display: inline-block; max-width: 100%; height: auto; }
.vincula-hero__pillar { text-align: center; padding: 14px; border-left: 1px solid rgb(120 94 240 / 18%); }
.vincula-hero__pillar h2 { margin: 0 0 8px; font-size: clamp(1.25rem, 2.2vw, 1.9rem); font-weight: 700; letter-spacing: -.7px; }
.vincula-hero__pillar p { color: var(--vincula-dark); font-size: .85rem; margin: 0; }
.vincula-hero__values { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 34px; list-style: none; padding: 0; margin: 30px 0 0; font-size: .83rem; }
.vincula-hero__values li { display: flex; gap: 9px; align-items: center; }
@keyframes vincula-hero-arrival {
  0% { opacity: 0; transform: scale(var(--arrival-scale)); }
  12% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes vincula-hero-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (max-width: 1199.98px) {
  .vincula-hero { min-height: calc(100svh - 73px); min-height: calc(100dvh - 73px); }
}
@media (max-width: 991.98px) {
  .vincula-hero { padding-top: 48px; }
}
@media (max-width: 575.98px) {
  .vincula-hero { padding: 36px 10px 32px; }
  .vincula-hero h1 { letter-spacing: -1.6px; }
  .vincula-hero__eyebrow { font-size: .6rem; letter-spacing: 1px; padding-inline: 12px; }
  .vincula-hero__description { font-size: 1rem; }
  .vincula-hero__actions { gap: 18px; }
  .vincula-hero__pillars { grid-template-columns: 1fr; margin-top: 36px; padding: 24px; }
  .vincula-hero__brand { padding-bottom: 20px; }
  .vincula-hero__pillar { border-left: 0; border-top: 1px solid rgb(120 94 240 / 18%); padding: 20px 0; }
  .vincula-hero__pillar:last-child { padding-bottom: 0; }
  .vincula-hero__values { gap: 12px; flex-direction: column; align-items: center; }
  .vincula-hero__background-logo {
    --arrival-scale: 4.05;
    right: 2%;
    bottom: 2%;
    width: 105vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vincula-hero__background-logo img { animation: none; }
  .vincula-hero__background-logo { animation: none; }
}