/* VEGA CoreTech — Version A (index.html only): AI card + IT Staffing mini-card in the hero graphs */

/* AI & Machine Learning card: 3-4-2 network, pulses in sync with Train → Evaluate → Deploy */
.nn { display: block; width: 100%; height: auto; overflow: visible; }
.nn__e line { stroke: #E1E6F0; stroke-width: 1.2; }
.nn__p { stroke: url(#gBrand); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 14 86; stroke-dashoffset: 14; opacity: 0; }
.nn__p--a { animation: nnA 4.5s linear infinite; animation-delay: calc(var(--k) * 70ms); }
.nn__p--b { animation: nnB 4.5s linear infinite; animation-delay: calc(var(--k) * 70ms); }
@keyframes nnA { 0% { stroke-dashoffset: 14; opacity: 1; } 30% { stroke-dashoffset: -88; opacity: 1; } 31%, 100% { stroke-dashoffset: -88; opacity: 0; } }
@keyframes nnB { 0%, 33% { stroke-dashoffset: 14; opacity: 0; } 34% { opacity: 1; } 63% { stroke-dashoffset: -88; opacity: 1; } 64%, 100% { stroke-dashoffset: -88; opacity: 0; } }
.nn__n { fill: #fff; stroke-width: 2.2; transform-box: fill-box; transform-origin: center; }
.nn__n--1 { stroke: var(--blue); animation: nnGlow1 4.5s var(--ease) infinite; }
.nn__n--2 { stroke: #5C8BFF; animation: nnGlow2 4.5s var(--ease) infinite; }
.nn__n--3 { stroke: var(--violet); animation: nnGlow3 4.5s var(--ease) infinite; }
@keyframes nnGlow1 { 0%, 18% { fill: #DCE5FF; transform: scale(1.15); } 30%, 100% { fill: #fff; transform: none; } }
@keyframes nnGlow2 { 0%, 30% { fill: #fff; transform: none; } 36%, 52% { fill: #DCE5FF; transform: scale(1.15); } 64%, 100% { fill: #fff; transform: none; } }
@keyframes nnGlow3 { 0%, 63% { fill: #fff; transform: none; } 70%, 92% { fill: #E6DEFF; transform: scale(1.2); } 100% { fill: #fff; transform: none; } }
.nn__steps { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.nn__steps i { flex: 1; height: 2px; min-width: 8px; border-radius: 2px; background: #E1E6F0; }
.st { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.st--1 { animation: stOn 4.5s var(--ease) infinite; }
.st--2 { animation: stOn 4.5s var(--ease) infinite; animation-delay: 1.5s; }
.st--3 { animation: stOn 4.5s var(--ease) infinite; animation-delay: 3s; }
@keyframes stOn { 0% { background: #fff; color: var(--muted); border-color: var(--line); transform: none; } 6% { transform: scale(1.08); } 10%, 30% { background: var(--ink); color: #fff; border-color: var(--ink); transform: none; } 34%, 100% { background: #fff; color: var(--muted); border-color: var(--line); } }

/* Composition: every card has its own space, so no card or chip covers another's content */
.hero-graphs .charts { height: 560px; }
.hero-graphs .cc--staff { left: 0; top: 46px; width: 60%; z-index: 3; }
.hero-graphs .cc--rings { right: 0; top: 0; width: 37%; }
.hero-graphs .cc.cc--ai { left: auto; right: 0; top: auto; bottom: 0; width: 47%; }
.hero-graphs .cc--graph { left: 0; top: auto; bottom: 0; width: 50%; }
.hero-graphs .cchip--1 { left: 40%; top: 0; }
.hero-graphs .cchip--3 { left: auto; right: 9%; top: 47%; }

/* IT Staffing card */
.sav { display: flex; }
.sav i { width: 28px; height: 28px; display: grid; place-items: center; margin-left: -6px; border-radius: 50%; border: 2px solid #fff; background: var(--c); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; opacity: .18; transform: translateX(-8px) scale(.85); transition: opacity .5s var(--ease), transform .6s var(--spring); }
.sav i.is-in { opacity: 1; transform: none; }
.srows { display: grid; gap: 8px; }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.srow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--muted-2); transition: color .4s; }
.srow.is-run .srow__name, .srow.is-done .srow__name { color: var(--ink); }
.srow__bar { height: 5px; border-radius: 5px; background: #E6EAF2; overflow: hidden; }
.srow__bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.srow.is-run .srow__bar i { transform: scaleX(1); transition: transform 1.5s var(--ease); }
.srow.is-done .srow__bar i { transform: scaleX(1); background: linear-gradient(90deg, #18B67A, #4BE0A6); }
.srow__st { position: relative; display: grid; min-width: 84px; justify-items: end; }
.srow__wait, .srow__ok { grid-area: 1 / 1; }
.srow__wait { font-size: 11.5px; font-weight: 600; color: var(--muted-2); opacity: 0; transition: opacity .3s; }
.srow.is-run .srow__wait { opacity: 1; animation: blinkSoft 1s ease-in-out infinite; }
@keyframes blinkSoft { 50% { opacity: .35; } }
.srow__ok { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; background: rgba(24, 182, 122, .13); color: #0E8F5E; font-size: 11.5px; font-weight: 700; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .5s var(--spring); }
.srow__ok .ico { width: 13px; height: 13px; }
.srow.is-done .srow__ok { opacity: 1; transform: none; }
html:not(.js) .srow__ok { opacity: 1; transform: none; }
html:not(.js) .sav i { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .hero-graphs .charts { height: auto; }
  .hero-graphs .cc--staff, .hero-graphs .cc--rings, .hero-graphs .cc.cc--ai, .hero-graphs .cc--graph { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .hero-graphs .cc--staff { order: 1; grid-column: 1 / -1; }
  .hero-graphs .cc--rings { order: 2; } .hero-graphs .cc--ai { order: 3; } .hero-graphs .cc--graph { order: 4; }
  .hero-graphs .cchip { position: relative; left: auto; right: auto; top: auto; bottom: auto; order: 0; justify-self: center; }
  .cc--graph .sgraph { max-height: 230px; }
}
@media (max-width: 480px) {
  .srow { grid-template-columns: minmax(0, 1fr) auto; }
  .srow__bar { grid-column: 1 / -1; grid-row: 2; }
  .st { padding: 4px 8px; font-size: 11px; }
}
@media (max-width: 360px) {
  .hero-graphs .cchip { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .nn__p, .nn__n, .st { animation: none !important; }
  .st--1 { background: var(--ink); color: #fff; border-color: var(--ink); }
}
@media (max-width: 600px) {
  .hero-graphs .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-graphs .cc { grid-column: 1 / -1; }
  .hero-graphs .cchip { justify-self: center; }
}