/* «راهکارها و خدمات» — the living data-centre map: one isometric line drawing of a server room; each service is a zone of it. */
.services{--services-frost:blur(24px) saturate(160%);--services-sw:1px;--services-swm:1.3px;--services-swl:2.3px;--services-dash:3px 3.5px;--services-dot:0 2.6px;--services-port:0 1.9px;--services-vm:2.4px 2px;--services-vl:1.2px 3px;--services-loop:5px 4px;--services-glow:3px;position:relative;isolation:isolate;padding:120px 0;overflow:clip}
.services-inner{position:relative;width:var(--container);margin:0 auto}

.services-head{position:relative;z-index:1;max-width:680px;margin:0 auto 40px;text-align:center}
.services-eyebrow{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 12px;color:var(--cyan);font-size:12px;line-height:1.6}
.services-eyebrow span{display:block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(132,233,227,.1),0 0 17px rgba(132,233,227,.7)}
.services-title{margin:0;color:var(--white);font-size:clamp(28px,3.4vw,44px);font-weight:700;line-height:1.4;text-wrap:balance}
.services-sub{max-width:580px;margin:14px auto 0;color:var(--muted);font-size:15px;line-height:1.9;text-wrap:pretty}

.services-map{position:relative}


.services-stage{position:relative;z-index:1;width:100%;aspect-ratio:1220/560}
.services-art,.services-leads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.services-art{transition:opacity .7s var(--ease)}
.services-crop{position:absolute;width:14px;height:14px;border:0 solid rgba(13,184,168,.5);pointer-events:none}
.services-crop--tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.services-crop--tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.services-crop--br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.services-crop--bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}

/* ---------- Drawing ---------- */
.services-base,.services-zone{--services-c:var(--cyan-2);opacity:.7;transition:opacity .24s var(--ease),filter .24s var(--ease)}
.services-art--focus .services-base{opacity:.4}
.services-art--focus .services-zone{opacity:.3}
.services-art--focus .services-zone--active{--services-c:var(--cyan);opacity:1;filter:drop-shadow(0 0 var(--services-glow) rgba(0,209,193,.5))}

.services-ln{fill:none;stroke:var(--services-c);stroke-width:var(--services-sw);stroke-linecap:round;stroke-linejoin:round;opacity:var(--services-o,.78);transition:stroke .14s var(--ease),opacity .24s var(--ease)}
.services-ln--main{--services-o:1;stroke-width:var(--services-swm)}
.services-ln--faint{--services-o:.45}
.services-ln--cable{--services-o:.7}
.services-ln--hidden{--services-o:.32;stroke-dasharray:var(--services-dash)}
.services-ln--perf{--services-o:.6;stroke-dasharray:var(--services-dot)}
.services-ln--port{--services-o:.85;stroke-dasharray:var(--services-port)}
.services-ln--vm{--services-o:.9;stroke-dasharray:var(--services-vm)}
.services-ln--vline{--services-o:.42;stroke-dasharray:var(--services-vl)}
.services-ln--loop{--services-o:.85;stroke-dasharray:var(--services-loop)}
.services-ln--loopH{--services-o:.26;stroke-dasharray:var(--services-loop)}
.services-ln--shield{--services-o:.55}
.services-ln--wave{--services-o:.95}
.services-ln--ripple{--services-o:0;opacity:0}
.services-ln--pulse{--services-o:0;opacity:0;stroke:var(--white);stroke-width:var(--services-swm);stroke-dasharray:.3 1.4}
.services-face{fill:var(--cyan-2);stroke:none;transition:fill-opacity .24s var(--ease)}
.services-led{fill:none;stroke:var(--cyan);stroke-width:var(--services-swl);stroke-linecap:round;opacity:.55}
.services-tr{fill:none;stroke:var(--cyan);stroke-width:var(--services-swm);stroke-linecap:round;stroke-dasharray:.22 1.5;stroke-dashoffset:.22;opacity:0}
.services-pkt{fill:var(--white);stroke:var(--cyan);stroke-width:var(--services-sw)}

/* Entrance: the room draws itself in, zone by zone (delays are written per line). */
.services--wait .services-art,.services--wait .services-card{opacity:0}
.services--draw :is(.services-ln--main,.services-ln--detail,.services-ln--faint,.services-ln--drive,.services-ln--cable,.services-ln--shield,.services-ln--wave){stroke-dasharray:1 1;animation:servicesDraw .55s var(--ease) var(--services-d,0s) both}
.services--draw :is(.services-ln--hidden,.services-ln--perf,.services-ln--port,.services-ln--vm,.services-ln--vline,.services-ln--loop,.services-ln--loopH,.services-face,.services-led){animation:servicesFade .6s var(--ease) calc(var(--services-d,0s) + .25s) both}
@keyframes servicesDraw{0%{stroke-dashoffset:1;opacity:0}10%{opacity:var(--services-o,.78)}100%{stroke-dashoffset:0;opacity:var(--services-o,.78)}}
@keyframes servicesFade{from{opacity:0}}

/* Active zone: draw-over pass, then one accent per zone. */
.services-zone--play .services-tr{animation:servicesTrace .7s var(--ease) both}
@keyframes servicesTrace{0%{opacity:.95;stroke-dashoffset:.22}100%{opacity:.95;stroke-dashoffset:-1}}
.services-zone--play .services-led--server{animation:servicesBlink var(--services-bd,.9s) steps(1,end) var(--services-bl,0s) infinite}
@keyframes servicesBlink{0%{opacity:1}22%{opacity:.15}38%{opacity:1}61%{opacity:.3}74%{opacity:1}}
.services-zone--play .services-ln--drive{animation:servicesRow 2.2s var(--ease) calc(.2s + var(--services-r,0) * .14s) infinite}
@keyframes servicesRow{0%,45%,100%{stroke:var(--services-c);opacity:.78}10%{stroke:var(--white);opacity:1}}
.services-zone--active .services-ln--shield{--services-o:1}
.services-zone--play .services-ln--shield{animation:servicesFlash .9s var(--ease) both}
@keyframes servicesFlash{0%{opacity:.5}35%{opacity:1;stroke:var(--white)}100%{opacity:1}}
.services-zone--play .services-ln--ripple{animation:servicesRipple 1s var(--ease) calc(.2s + var(--services-r,0) * .18s) both}
@keyframes servicesRipple{0%{opacity:0}30%{opacity:.8}100%{opacity:0}}
.services-zone--active .services-glass{fill-opacity:.15}
.services-zone--play .services-ln--vm{animation:servicesFade .45s var(--ease) calc(.15s + var(--services-r,0) * .17s) both}
.services-zone--play .services-ln--pulse{animation:servicesPulse 1.5s linear .2s infinite}
@keyframes servicesPulse{0%{opacity:1;stroke-dashoffset:.3}70%,100%{opacity:1;stroke-dashoffset:-1}}

/* ---------- Leader lines ---------- */
.services-leads{z-index:1;opacity:0;transition:opacity .7s var(--ease)}
.services-lead__line{fill:none;stroke:rgba(230,243,241,.34);stroke-width:1;transition:stroke .14s var(--ease)}
.services-lead__node{fill:var(--navy-2);stroke:rgba(13,184,168,.8);stroke-width:1;transition:stroke .14s var(--ease)}
.services-lead__dot{fill:var(--cyan-2);transition:fill .14s var(--ease)}
.services-lead--on .services-lead__line{stroke:var(--cyan)}
.services-lead--on .services-lead__node{stroke:var(--cyan)}
.services-lead--on .services-lead__dot{fill:var(--cyan)}

/* ---------- Glass: labels, chips and card (opaque fallback first) ---------- */
.services-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
:is(.services-label,.services-chip,.services-card){isolation:isolate;overflow:hidden;background:#0f1e24;box-shadow:0 16px 40px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12)}
:is(.services-label,.services-chip,.services-card):before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:background .14s var(--ease)}
:is(.services-label,.services-chip,.services-card):after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(118deg,transparent 22%,rgba(255,255,255,.075) 40%,rgba(255,255,255,.02) 52%,transparent 64%) 0 0/160% 100% no-repeat;-webkit-mask:linear-gradient(180deg,#000,transparent 62%);mask:linear-gradient(180deg,#000,transparent 62%)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :is(.services-label,.services-chip,.services-card){background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(8,19,29,.34);-webkit-backdrop-filter:var(--services-frost);backdrop-filter:var(--services-frost)}
}

.services-label{position:absolute;left:0;top:0;display:block;margin:0;padding:8px 14px;border:0;border-radius:10px;color:var(--white);font:inherit;font-size:13px;font-weight:700;line-height:1.6;white-space:nowrap;cursor:pointer;pointer-events:auto;opacity:0;visibility:hidden;-webkit-tap-highlight-color:transparent;transition:opacity .7s var(--ease) calc(var(--services-i,0) * 70ms),visibility 0s linear .7s,color .14s var(--ease),box-shadow .14s var(--ease)}
.services-label>span,.services-chip>span{position:relative;z-index:1}
.services--labels .services-label{opacity:1;visibility:visible;transition:opacity .7s var(--ease) calc(var(--services-i,0) * 70ms),visibility 0s,color .14s var(--ease),box-shadow .14s var(--ease)}
.services--labels .services-leads{opacity:1}
.services-label:hover{box-shadow:0 16px 40px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(0,209,193,.3)}
.services-label[aria-pressed="true"],.services-chip[aria-pressed="true"]{color:var(--cyan);box-shadow:0 16px 40px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(0,209,193,.5),0 0 22px rgba(0,209,193,.14)}
.services-label--pinned:before{background:linear-gradient(180deg,rgba(0,209,193,.9),rgba(0,209,193,.45))}
:is(.services-label,.services-chip):focus{outline:none}
:is(.services-label,.services-chip):focus-visible{outline:3px solid #2dd4bf;outline-offset:2px}

.services-chips{display:none}

.services-card{position:relative;z-index:3;width:min(100%,640px);margin:20px auto 0;padding:24px;border-radius:16px;transition:opacity .24s var(--ease)}
.services-card--over{position:absolute;left:0;top:0;margin:0}
.services-card--out{opacity:0;transition-duration:.14s}
.services-card--empty{opacity:0;visibility:hidden}
.services-card__body{position:relative;z-index:1;display:grid}
.services-card__body>*,.services-card__sizer>*{grid-area:1/1}
.services-card__sizer{display:grid;visibility:hidden}
.services-card__title{margin:0 0 8px;color:var(--white);font-size:17px;font-weight:700;line-height:1.6}
.services-card__text{margin:0;color:#a9bdc0;font-size:14px;line-height:2;text-wrap:pretty}

/* ---------- Tablet ---------- */
@media (max-width:980px) and (min-width:681px){
  .services{padding:104px 0}
  .services-head{margin-bottom:32px}
  .services-label{padding:6px 10px;font-size:11.5px;border-radius:9px}
  .services-card{margin-top:24px}
}

/* ---------- Mobile: drawing on top, chips (tabs) below it, card under the chips ---------- */
@media (max-width:680px){
  .services{--services-frost:blur(16px) saturate(160%);padding:80px 0}
  .services-head{margin-bottom:28px}
  .services-title{font-size:28px}
  .services-sub{font-size:14px}
  .services-labels,.services-leads,.services-crop{display:none}
  .services-chips{position:relative;z-index:2;display:flex;gap:8px;margin:20px -14px 0;padding:6px 14px 8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;opacity:0;transition:opacity .7s var(--ease)}
  .services-chips::-webkit-scrollbar{display:none}
  .services--labels .services-chips{opacity:1}
  .services-chip{position:relative;flex:none;display:flex;align-items:center;min-height:44px;margin:0;padding:0 16px;border:0;border-radius:12px;color:var(--white);font:inherit;font-size:13px;font-weight:700;line-height:1.4;white-space:nowrap;cursor:pointer;scroll-snap-align:start;-webkit-tap-highlight-color:transparent;transition:color .14s var(--ease),box-shadow .14s var(--ease)}
  .services-card{margin-top:12px;border-radius:14px}
  .services-card__title{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .services-art,.services-leads,.services-label,.services-chips,.services-card,.services-base,.services-zone,.services-ln,.services-face{transition:none}
}