/* VEGA CoreTech — IT Staffing section (all design2 pages) */
.staff__intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.staff__text { display: grid; gap: 18px; justify-items: start; }
.link-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-h); font-weight: 600; color: var(--blue); }
.link-more .ico { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.link-more:hover .ico { transform: translateX(4px); }
.staff__models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sm { position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start; min-width: 0; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s; }
.sm:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sm__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--tint-blue); color: var(--blue); }
.sm h3 { margin-top: 6px; font-size: 18px; letter-spacing: -.02em; }
.sm p { font-size: 14.5px; color: var(--muted); }
.mv { display: flex; align-items: center; gap: 6px; height: 26px; margin-top: 6px; }
.mv--bar { width: 100%; height: 6px; border-radius: 6px; background: #EEF1F6; overflow: hidden; }
.mv--bar i { display: block; width: 100%; height: 100%; background: var(--grad); transform-origin: left; animation: mvbar 4s var(--ease) infinite; }
@keyframes mvbar { 0% { transform: scaleX(0); } 60%, 85% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.mv--switch b { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.mv--switch i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #DDE2EA; animation: mvsw 4s var(--ease) infinite; }
.mv--switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(10, 15, 31, .25); animation: mvknob 4s var(--spring) infinite; }
@keyframes mvsw { 0%, 40% { background: #DDE2EA; } 50%, 90% { background: var(--green); } 100% { background: #DDE2EA; } }
@keyframes mvknob { 0%, 40% { transform: none; } 50%, 90% { transform: translateX(16px); } 100% { transform: none; } }
.mv--seat i { width: 22px; height: 22px; border-radius: 50%; background: #E6EAF2; }
.mv--seat i.is-new { background: var(--grad); animation: mvseat 4s var(--spring) infinite; }
@keyframes mvseat { 0%, 30% { transform: scale(0); } 45%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
.mv--team i { width: 22px; height: 22px; margin-right: -8px; border-radius: 50%; border: 2px solid #fff; background: var(--grad); animation: bob 3s ease-in-out infinite; }
.mv--team i:nth-child(2) { background: linear-gradient(135deg, #7C5CFF, #2453FF); animation-delay: -.6s; }
.mv--team i:nth-child(3) { background: linear-gradient(135deg, #18B67A, #13C6F2); animation-delay: -1.2s; }
.mv--team i:nth-child(4) { background: linear-gradient(135deg, #FFB547, #FF8A3D); animation-delay: -1.8s; }

/* Roles marquee */
.staff__roles { margin-top: 64px; }
.staff__label { margin-bottom: 16px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rmq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rmq + .rmq { margin-top: 10px; }
.rmq__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.rmq--rev .rmq__track { animation-direction: reverse; animation-duration: 52s; }
.rmq:hover .rmq__track { animation-play-state: paused; }
.rmq__grp { display: flex; gap: 10px; padding-right: 10px; }
.rc { padding: 11px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); font-family: var(--font-h); font-weight: 600; font-size: 15px; white-space: nowrap; }
.rc--dark { background: var(--ink); border-color: var(--ink); color: #fff; }

/* How it works: looping pipeline */
.pl { position: relative; margin-top: 64px; padding: 26px; border-radius: 32px; color: #fff; background: radial-gradient(60% 90% at 20% 0%, rgba(36, 83, 255, .35), transparent 70%), radial-gradient(50% 80% at 100% 100%, rgba(19, 198, 242, .2), transparent 70%), var(--dark); overflow: hidden; }
.pl__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pl__eyebrow { font-family: var(--font-h); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.pl__note { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.pl__board { position: relative; --gap: 14px; }
.pl__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.pl__col { position: relative; display: grid; align-content: start; gap: 8px; min-height: 250px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.pl__col b { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.pl__n { font-family: var(--font-h); font-weight: 800; font-size: 13px; color: #7FD9FF; letter-spacing: .1em; }
.pl__ic { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #9FE6FF; }
.pl__ic .ico { width: 18px; height: 18px; }
.pl__col:not(:last-child)::after { content: ""; position: absolute; right: calc(var(--gap) / -2 - 5px); top: 50%; width: 10px; height: 10px; border-top: 2px solid rgba(127, 217, 255, .5); border-right: 2px solid rgba(127, 217, 255, .5); transform: translateY(-50%) rotate(45deg); z-index: 2; }
.pl__track { position: absolute; left: 0; right: 0; top: 104px; height: 140px; pointer-events: none; }
.pl__card { --step: calc(100% + var(--gap)); position: absolute; left: 0; top: calc(var(--row) * 70px); width: calc((100% - var(--gap) * 3) / 4); display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 56px; }
.pl__card::before { content: ""; position: absolute; inset: 0 10px; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); z-index: -1; }
.pl__card { color: var(--ink); animation: plflow 12s cubic-bezier(.65, 0, .35, 1) infinite backwards; animation-delay: calc(var(--k) * -2s); z-index: 1; }
.pl__av { flex: none; width: 30px; height: 30px; margin-left: 8px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fff 0 22%, transparent 23%), radial-gradient(ellipse 60% 45% at 50% 100%, #fff 0 60%, transparent 61%), var(--c); }
.pl__lines { flex: 1; display: grid; gap: 5px; min-width: 0; }
.pl__lines i { height: 6px; border-radius: 4px; background: #E6EAF2; }
.pl__lines i:last-child { width: 60%; }
.pl__skill { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--tint-blue); color: var(--blue); font-size: 11px; font-weight: 700; }
.pl__ok { position: absolute; right: 2px; top: -6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 6px 12px -4px rgba(24, 182, 122, .7); animation: plok 12s var(--spring) infinite backwards; animation-delay: inherit; }
.pl__ok .ico { width: 13px; height: 13px; }
@keyframes plflow {
  0% { transform: translateX(calc(var(--step) * -0.3)); opacity: 0; }
  5% { transform: translateX(0); opacity: 1; }
  20% { transform: translateX(0); }
  27% { transform: translateX(var(--step)); }
  45% { transform: translateX(var(--step)); }
  52% { transform: translateX(calc(var(--step) * 2)); }
  70% { transform: translateX(calc(var(--step) * 2)); }
  77% { transform: translateX(calc(var(--step) * 3)); opacity: 1; }
  94% { transform: translateX(calc(var(--step) * 3)); opacity: 1; }
  100% { transform: translateX(calc(var(--step) * 3)) translateY(-12px); opacity: 0; }
}
@keyframes plok { 0%, 78% { transform: scale(0); } 82% { transform: scale(1.2); } 85%, 94% { transform: scale(1); } 100% { transform: scale(0); } }

/* Why our staffing */
.staff__why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.staff__why li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.sw__ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--tint-blue); color: var(--blue); }

@media (max-width: 1180px) {
  .staff__intro { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .staff__why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* Vertical flow on smaller screens */
  .pl__cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pl__col { min-height: 0; height: 104px; padding: 14px 16px; padding-right: 52%; }
  .pl__ic { right: auto; left: auto; position: static; display: none; }
  .pl__col:not(:last-child)::after { right: auto; left: 24px; top: auto; bottom: -9px; transform: rotate(135deg); }
  .pl__track { left: auto; right: 0; top: 0; width: 50%; height: calc(104px * 4 + 30px); }
  .pl__card { --step: calc(104px + 10px); top: 24px; width: 100%; animation-name: plflowY; }
  .pl__card:nth-child(n+4) { display: none; }
  .pl__card:nth-child(1) { animation-delay: 0s; } .pl__card:nth-child(2) { animation-delay: -4s; } .pl__card:nth-child(3) { animation-delay: -8s; }
}
@keyframes plflowY {
  0% { transform: translateY(-14px); opacity: 0; }
  5% { transform: none; opacity: 1; }
  20% { transform: none; }
  27% { transform: translateY(var(--step)); }
  45% { transform: translateY(var(--step)); }
  52% { transform: translateY(calc(var(--step) * 2)); }
  70% { transform: translateY(calc(var(--step) * 2)); }
  77% { transform: translateY(calc(var(--step) * 3)); opacity: 1; }
  94% { transform: translateY(calc(var(--step) * 3)); opacity: 1; }
  100% { transform: translateY(calc(var(--step) * 3)) translateX(12px); opacity: 0; }
}
@media (max-width: 760px) {
  .staff__models { grid-template-columns: minmax(0, 1fr); }
  .staff__why { grid-template-columns: minmax(0, 1fr); }
  .pl { padding: 18px; border-radius: 26px; }
  .rc { padding: 9px 14px; font-size: 14px; }
}
@media (max-width: 420px) {
  .pl__col { padding-right: 46%; }
  .pl__track { width: 46%; }
  .pl__lines { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pl__card, .pl__ok, .mv i, .mv--bar i, .rmq__track { animation: none !important; }
  .pl__card { transform: translateX(calc(var(--step) * var(--k, 0))); opacity: 1; }
  .pl__card:nth-child(n+5) { display: none; }
  .rmq__track { flex-wrap: wrap; width: auto; }
  .rmq__grp:last-child { display: none; }
  .rmq__grp { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .pl__card { transform: translateY(calc(var(--step) * var(--k, 0))); }
}