/* =========================================================
   ATeam Soft Solutions — Legacy Modernisation landing page
   Plain CSS. No build step, no framework.
   ========================================================= */

/* ---------- Base / resets / fonts / keyframes ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f5f4f8;color:#0c0a16;font-family:'Source Sans 3',system-ui,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:#5b34e0;text-decoration:none}
a:hover{color:#7c5cff}
details summary{list-style:none}
summary::-webkit-details-marker{display:none}
::selection{background:rgba(124,92,255,.28);color:#fff}
:focus-visible{outline:2px solid #7c5cff;outline-offset:3px}
image-slot{width:100%;height:100%}
@keyframes pulseDot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(124,92,255,.5)}50%{opacity:.35;box-shadow:0 0 0 7px rgba(124,92,255,0)}}
@keyframes gridPan{to{background-position:46px 46px}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes glowPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.07)}}
@keyframes shimmer{0%{transform:translateX(-130%)}60%,100%{transform:translateX(240%)}}
@keyframes shapeA{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-14px) rotate(-7deg)}}
@keyframes shapeB{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-20px) rotate(11deg)}}
@keyframes shapeC{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-11px) rotate(-1deg)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes cardScan{0%{transform:translateX(-58px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(430px);opacity:0}}
@keyframes dashFlow{to{stroke-dashoffset:-20}}
@keyframes haloPulse{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:.45;transform:scale(1.2)}}
@keyframes converge2{0%,15%{transform:translateY(0);opacity:1}45%{transform:translateY(18px);opacity:.6}80%,100%{transform:translateY(0);opacity:1}}
@keyframes tick2{0%,18%{opacity:0;transform:scaleY(0)}40%{opacity:.55;transform:scaleY(1)}62%{opacity:.55;transform:scaleY(1)}80%,100%{opacity:0;transform:scaleY(0)}}
@keyframes check2{0%,42%{opacity:0;transform:scale(0)}62%{opacity:1;transform:scale(1.2)}70%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes match2{0%,55%{opacity:0;transform:translateY(6px)}72%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes sliceShimmer{0%,100%{opacity:.32}50%{opacity:.58}}
@keyframes railFlow{to{background-position:52px 0}}
@keyframes railPulse{0%{left:-4%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:104%;opacity:0}}
@keyframes nodeRing{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.55);opacity:0}}
@keyframes chevFlow{0%,100%{opacity:.3;transform:translateX(0)}50%{opacity:1;transform:translateX(4px)}}
@keyframes iconPop{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.06)}}
@keyframes iconHalo{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.6;transform:scale(1.28)}}
@keyframes segSweep{0%{transform:translateX(-110%)}100%{transform:translateX(340%)}}
@keyframes numDrift{0%,100%{opacity:.34;transform:translateY(0)}50%{opacity:.6;transform:translateY(-3px)}}
@keyframes dotFlow{to{background-position:9px 0}}
@keyframes loopDash{to{stroke-dashoffset:-28}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---------- Image placeholders (drop real photos in) ---------- */
.img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;background:#141020;color:#6b6480;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.5;letter-spacing:.04em}
.img-ph span{max-width:26ch}

/* ---------- Hover / focus / active states ---------- */
.x1:hover{transform:translateY(-2px);background:#9f85ff !important}
.x2:hover{transform:translateY(-2px);background:#9f85ff;box-shadow:0 18px 34px -14px rgba(124,92,255,.6) !important}
.x3:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:#fff !important}
.x4:hover{transform:translateY(-6px) !important}
.x5:hover{transform:translateY(-6px) !important}
.x6:hover{transform:translateY(-6px) !important}
.x7:hover{transform:translateY(-6px) !important}
.x8:hover{transform:translateY(-6px) !important}
.x9:hover{transform:translateY(-6px) !important}
.x10:hover{transform:translateY(-5px);box-shadow:0 30px 56px -28px rgba(91,52,224,.42);border-color:rgba(124,92,255,.42) !important}
.x11:hover{transform:translateY(-5px);box-shadow:0 30px 56px -28px rgba(91,52,224,.42);border-color:rgba(124,92,255,.42) !important}
.x12:hover{transform:translateY(-5px);box-shadow:0 30px 56px -28px rgba(91,52,224,.42);border-color:rgba(124,92,255,.42) !important}
.x13:hover{transform:translateY(-5px);box-shadow:0 30px 56px -28px rgba(91,52,224,.42);border-color:rgba(124,92,255,.42) !important}
.x14:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(0,0,0,.5) !important}
.x15:hover{transform:translateY(-6px);box-shadow:0 40px 74px -34px rgba(22,12,45,.42);border-color:rgba(124,92,255,.35) !important}
.x16:hover{transform:translateY(-6px);box-shadow:0 40px 74px -34px rgba(22,12,45,.42);border-color:rgba(124,92,255,.35) !important}
.x17:hover{transform:translateY(-6px);box-shadow:0 40px 74px -34px rgba(22,12,45,.42);border-color:rgba(124,92,255,.35) !important}
.x18:hover{transform:translateY(-6px);box-shadow:0 40px 74px -34px rgba(22,12,45,.42);border-color:rgba(124,92,255,.35) !important}
.x19:hover{transform:translateY(-6px);box-shadow:0 40px 74px -34px rgba(22,12,45,.42);border-color:rgba(124,92,255,.35) !important}
.x20:hover{transform:translateY(-6px);box-shadow:0 40px 74px -34px rgba(22,12,45,.42);border-color:rgba(124,92,255,.35) !important}
.x21:hover{gap:14px;border-color:#5b34e0 !important}
.x22:hover{transform:translateY(-6px);box-shadow:0 36px 64px -30px rgba(124,92,255,.4) !important}
.x23:hover{transform:translateY(-6px);box-shadow:0 36px 64px -30px rgba(124,92,255,.4) !important}
.x24:hover{transform:translateY(-6px);box-shadow:0 36px 64px -30px rgba(124,92,255,.4) !important}
.x25:hover{transform:translateY(-6px);box-shadow:0 36px 64px -30px rgba(124,92,255,.4) !important}
.x26:hover{transform:translateY(-6px);box-shadow:0 36px 64px -30px rgba(124,92,255,.4) !important}
.x27:hover{transform:translateY(-6px);box-shadow:0 36px 64px -30px rgba(124,92,255,.4) !important}
.x28:hover{transform:translateY(-6px);box-shadow:0 36px 64px -30px rgba(124,92,255,.4) !important}
.x29:hover{transform:translateY(-6px);box-shadow:0 36px 64px -30px rgba(124,92,255,.4) !important}
.x30:hover{transform:translateX(4px);border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.1) !important}
.x31:hover{transform:translateX(4px);border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.1) !important}
.x32:hover{transform:translateX(4px);border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.1) !important}
.x33:hover{transform:translateX(4px);border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.1) !important}
.x34:hover{transform:translateX(4px);border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.1) !important}
.x35:hover{transform:translateX(4px);border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.1) !important}
.x36:hover{transform:translateX(4px);border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.1) !important}
.x37:hover{transform:translateY(-3px);box-shadow:0 28px 54px -20px rgba(0,0,0,.7) !important}
.x38:hover{background:#f0ecfb;color:#2e1c6b !important}
.x39:hover{transform:translateY(-2px);box-shadow:0 24px 44px -18px rgba(91,52,224,.8) !important}
.x40:focus{border-color:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.16);outline:none !important}
.x41:focus{border-color:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.16);outline:none !important}
.x42:focus{border-color:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.16);outline:none !important}
.x43:focus{border-color:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.16);outline:none !important}
.x44:focus{border-color:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.16);outline:none !important}
.x45:focus{border-color:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.16);outline:none !important}

/* ---------- Modal ---------- */
.modal-open{overflow:hidden}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .site-nav{display:none}
}
@media (max-width:1040px){
  .progress-rail{display:none}
}
@media (max-width:768px){
  body{font-size:16px}
  .cursor-ring,.cursor-dot{display:none}
}
@media (max-width:520px){
  .img-ph{font-size:10px}
}
/* never allow sideways scroll on small screens */
html,body{max-width:100%;overflow-x:hidden}