.ws-affiliate-invite {
  padding: 80px 0;
  border-block: 1px solid var(--ws-line);
  background: radial-gradient(ellipse at 88% 35%, #dcefff 0, transparent 58%), #f5f8fc;
}
.ws-affiliate-invite__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 64px;
}
.ws-affiliate-invite__copy { min-width: 0; }
.ws-affiliate-invite .ws-kicker { margin-bottom: 22px; }
.ws-affiliate-invite h2 {
  margin: 0 0 22px;
  color: var(--ws-navy);
  font-size: clamp(2rem, 3.3vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.12;
}
.ws-affiliate-invite h2 span { color: var(--ws-blue); }
.ws-affiliate-invite p {
  max-width: 560px;
  margin: 0;
  color: var(--ws-text);
  font-size: 1.05rem;
  line-height: 1.65;
}
.ws-affiliate-invite__button { gap: 20px; margin-top: 30px; }
.ws-affiliate-flow { position: relative; min-width: 0; margin: 0; text-align: center; }
.ws-affiliate-flow__canvas { position: relative; width: 100%; aspect-ratio: 1.35; isolation: isolate; }
.ws-affiliate-flow__orbit {
  position: absolute; inset: 2% 13%; border: 1px solid #c8e1f5; border-radius: 50%;
  background: radial-gradient(circle, #e5f3ff 0, #e5f3ff00 70%);
}
.ws-affiliate-flow__orbit::after {
  content: ""; position: absolute; inset: 13%; border: 1px dashed #bedbf0; border-radius: inherit;
}
.ws-affiliate-flow__badge {
  position: absolute; display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 18%; border: 1px solid #e3edf5; border-radius: 16px;
  font-size: clamp(.8rem, 1.35vw, 1.1rem); font-weight: 700; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 14px 32px #11205112;
}
.ws-affiliate-flow__link {
  left: 2%; top: 40%; width: 34%; z-index: 2;
  color: white; background: var(--ws-blue); border-color: #168be2;
  animation: ws-affiliate-link 8s ease-in-out infinite;
}
.ws-affiliate-flow__icon,
.ws-affiliate-flow__check,
.ws-affiliate-flow__coin,
.ws-affiliate-flow__plus {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 1;
}
.ws-affiliate-flow__icon { width: 22px; height: 22px; font-size: 20px; }
.ws-affiliate-flow__badge i { display: block; line-height: 1; }
.ws-affiliate-flow__badge .svg-inline--fa { display: block; height: 1em; vertical-align: 0; }
.ws-affiliate-flow__trail {
  position: absolute; left: 34%; top: 49%; width: 25%; height: 2px;
  background: #76b8e9; transform-origin: left;
  animation: ws-affiliate-trail 8s ease-in-out infinite;
}
.ws-affiliate-flow__trail::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 8px; height: 8px; border-top: 2px solid #76b8e9; border-right: 2px solid #76b8e9; transform: rotate(45deg);
}
.ws-affiliate-flow__sale {
  left: 53%; top: 40%; width: 31%; z-index: 2; background: white; color: var(--ws-navy);
  animation: ws-affiliate-sale 8s ease-in-out infinite;
}
.ws-affiliate-flow__check {
  width: 26px; height: 26px; font-size: 14px;
  border-radius: 50%; background: #e2f7ee; color: #15835b;
}
.ws-affiliate-flow__cursor {
  position: absolute; left: 26%; top: 51%; width: 36px; height: 43px; z-index: 4;
  display: flex; align-items: flex-start; justify-content: flex-start;
  color: var(--ws-navy); font-size: 34px; line-height: 1;
  -webkit-text-stroke: 1px white;
  filter: drop-shadow(0 3px 3px #11205124);
  animation: ws-affiliate-cursor 8s ease-in-out infinite;
}
.ws-affiliate-flow__click {
  position: absolute; left: 23%; top: 46%; width: 34px; height: 34px; z-index: 3;
  border: 2px solid #78c7ff; border-radius: 50%; animation: ws-affiliate-click 8s ease-out infinite;
}
.ws-affiliate-flow__commission {
  width: 39%; height: 15%; z-index: 3; border-color: #bde9d7; background: #ecfff6; color: #146b4c;
}
.ws-affiliate-flow__commission--one {
  left: 49%; top: 12%; --from-y: 85%; --tilt: -7deg;
  animation: ws-affiliate-commission-one 8s ease-in-out infinite;
}
.ws-affiliate-flow__commission--two {
  left: 58%; top: 73%; --from-y: -85%; --tilt: 6deg;
  animation: ws-affiliate-commission-two 8s ease-in-out infinite;
}
.ws-affiliate-flow__coin {
  width: 23px; height: 23px; font-size: 13px;
  border: 1px solid #95d5b9; border-radius: 50%; background: #d4f5e5;
}
.ws-affiliate-flow__plus { width: 1em; height: 1em; font-size: .75em; }
.ws-affiliate-flow__spark {
  position: absolute; color: #3fa980; font-size: 20px; line-height: 1;
  animation: ws-affiliate-spark 8s ease-in-out infinite;
}
.ws-affiliate-flow__spark--one { left: 91%; top: 30%; }
.ws-affiliate-flow__spark--two { left: 43%; top: 78%; font-size: 17px; }
.ws-affiliate-flow__caption { margin-top: 8px; color: var(--ws-navy); font-size: .85rem; font-weight: 600; }
@keyframes ws-affiliate-link {
  0%, 22%, 32%, 100% { transform: scale(1); }
  27% { transform: scale(.94); }
}
@keyframes ws-affiliate-cursor {
  0%, 8% { opacity: 0; transform: translate(40px, 50px); }
  17% { opacity: 1; transform: translate(18px, 20px); }
  24%, 32% { opacity: 1; transform: translate(0, 0); }
  27% { opacity: 1; transform: translate(0, 0) scale(.85); }
  43%, 100% { opacity: 0; transform: translate(18px, 25px); }
}
@keyframes ws-affiliate-click {
  0%, 25% { opacity: 0; transform: scale(.3); }
  28% { opacity: .9; transform: scale(.6); }
  38%, 100% { opacity: 0; transform: scale(1.8); }
}
@keyframes ws-affiliate-trail {
  0%, 29% { opacity: 0; transform: scaleX(0); }
  40%, 86% { opacity: 1; transform: scaleX(1); }
  96%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes ws-affiliate-sale {
  0%, 35% { opacity: 0; transform: translateY(14px) scale(.75); }
  44% { opacity: 1; transform: translateY(-3px) scale(1.06); }
  49%, 86% { opacity: 1; transform: translateY(0) scale(1); }
  96%, 100% { opacity: 0; transform: translateY(-8px) scale(.95); }
}
@keyframes ws-affiliate-commission-one {
  0%, 49% { opacity: 0; transform: translateY(var(--from-y)) scale(.6); }
  61%, 84% { opacity: 1; transform: translateY(0) rotate(var(--tilt)); }
  96%, 100% { opacity: 0; transform: translateY(-16px) rotate(var(--tilt)); }
}
@keyframes ws-affiliate-commission-two {
  0%, 59% { opacity: 0; transform: translateY(var(--from-y)) scale(.6); }
  72%, 86% { opacity: 1; transform: translateY(0) rotate(var(--tilt)); }
  98%, 100% { opacity: 0; transform: translateY(16px) rotate(var(--tilt)); }
}
@keyframes ws-affiliate-spark {
  0%, 58%, 95%, 100% { opacity: 0; transform: scale(.5); }
  68%, 83% { opacity: 1; transform: scale(1); }
}
@media (max-width: 900px) {
  .ws-affiliate-invite__inner { gap: 28px; }
  .ws-affiliate-flow__badge { gap: 6px; border-radius: 12px; }
}
@media (max-width: 767px) {
  .ws-affiliate-invite { padding: 52px 0 36px; }
  .ws-affiliate-invite__inner { grid-template-columns: 1fr; gap: 28px; }
  .ws-affiliate-invite h2 { font-size: clamp(1.85rem, 7.5vw, 2.5rem); }
  .ws-affiliate-invite__button { width: 100%; }
  .ws-affiliate-flow { order: -1; width: 100%; max-width: 480px; justify-self: center; }
  .ws-affiliate-flow__badge { font-size: clamp(.75rem, 3.5vw, 1rem); }
  .ws-affiliate-flow__icon { width: 18px; height: 18px; font-size: 16px; }
  .ws-affiliate-flow__coin { width: 19px; height: 19px; font-size: 11px; }
  .ws-affiliate-flow__check { width: 22px; height: 22px; font-size: 12px; }
  .ws-affiliate-flow__cursor { width: 29px; height: 35px; font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-affiliate-flow__canvas * { animation: none; }
  .ws-affiliate-flow__cursor, .ws-affiliate-flow__click { display: none; }
  .ws-affiliate-flow__commission { transform: rotate(var(--tilt)); }
}