/* =========================================================
   10 Get started (Figma 292:960) — blue gradient band, 1512 x 376, radius 60
   All selectors prefixed .cta
   Orbit box = the 860px outer ring; Figma centre (1082,188) => box right:0, top:-242
   ========================================================= */

.cta { background: var(--black); }

.cta__card {
  position: relative;
  max-width: var(--page-max);
  min-height: 376px;
  margin-inline: auto;
  overflow: clip;
  border-radius: clamp(28px, 4vw, 60px);
  background: var(--grad-blue);
  color: var(--white);
  isolation: isolate;
}

/* ---------- copy ---------- */
.cta__content {
  position: relative;
  z-index: 2;
  max-width: calc(640px + 2 * var(--gutter));
  padding: 54px var(--gutter) 60px;
}
.cta__title {
  max-width: 640px;
  font-size: clamp(38px, 3.97vw, 60px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.cta__body { max-width: 480px; margin-top: 22px; letter-spacing: -0.02em; }

.cta__btn {
  margin-top: 28px;
  height: 50px;
  padding: 0 20px 0 24px;
  background: var(--white);
  color: var(--black);
}
.cta__btn img { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.cta__btn:hover img { transform: translateX(3px); }

/* ---------- orbit (decorative) ---------- */
.cta__visual { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cta__orbit {
  position: absolute;
  right: 0;
  top: -242px;
  width: 860px;
  height: 860px;
  transform-origin: 100% 50%; /* scale toward the right edge between 1100 and 1512 */
}
@media (max-width: 1400px) { .cta__orbit { transform: scale(.88); } }
@media (max-width: 1250px) { .cta__orbit { transform: scale(.78); } }
.cta__ring, .cta__centre {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
}

.cta__arm {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform: rotate(var(--a));
  animation: cta-orbit var(--d, 60s) linear infinite;
}
.cta__arm--rev { animation-direction: reverse; }
.cta__node {
  position: absolute;
  left: calc(var(--r) - 5px);
  top: -5px;
  width: 10px; height: 10px;
  max-width: none;
}
@keyframes cta-orbit {
  from { transform: rotate(var(--a)); }
  to   { transform: rotate(calc(var(--a) + 360deg)); }
}

.cta__chip {
  position: absolute;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  color: var(--black);
  line-height: 1;
  white-space: nowrap;
  animation: cta-float 7s ease-in-out infinite alternate;
}
.cta__chip--far  { height: 44px; padding: 0 18.48px; font-size: 16px; letter-spacing: -0.02em; }
.cta__chip--near { height: 48px; padding: 0 20.16px; font-size: 17px; letter-spacing: -0.02em; background: var(--white); }

/* positions = Figma x-652 / y+242 inside the 860 box */
.cta__chip--agency  { left: 100px; top: 386px; background: rgba(255,255,255,.6);  filter: blur(1.5px);  animation-duration: 8s; }
.cta__chip--weekly  { left: 516px; top: 266px; background: rgba(255,255,255,.55); filter: blur(2.25px); animation-duration: 9.5s; animation-delay: -3s; }
.cta__chip--g2      { left: 200px; top: 548px; background: rgba(255,255,255,.5);  filter: blur(2.5px);  animation-duration: 10s; animation-delay: -6s; }
.cta__chip--hired   { left: 302px; top: 290px; animation-duration: 7s; animation-delay: -2s; }
.cta__chip--budgets { left: 436px; top: 472px; animation-duration: 7.5s; animation-delay: -4.5s; }

@keyframes cta-float {
  from { transform: translate3d(0, -6px, 0); }
  to   { transform: translate3d(4px, 6px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cta__arm, .cta__chip { animation: none !important; }
}

/* ---------- tablet / mobile: orbit drops below the copy ---------- */
@media (max-width: 1100px) {
  .cta__content { padding-bottom: 0; }
  .cta__visual { position: relative; inset: auto; height: 360px; }
  .cta__orbit {
    right: auto; left: 50%; top: 50%;
    margin: -430px 0 0 -430px; /* centre the 860 box (rings centred in it) */
    transform-origin: 50% 50%;
    transform: scale(.78);
  }
}
@media (max-width: 720px) {
  .cta__content { padding-top: 40px; }
  .cta__title { font-size: 36px; }
  .cta__body { margin-top: 16px; }
  .cta__btn { margin-top: 24px; }
  .cta__visual { height: 300px; }
  .cta__orbit { transform: scale(.52); }
}