/* =========================================================
   Services page — hero + 7 capabilities matrix
   (builds on styles.css tokens and components)
   ========================================================= */
/* ---------- Matrix section ---------- */
.matrix-sec{background:var(--dark);padding:20px 0 120px;position:relative;overflow:clip}
.mx-head{text-align:center;max-width:780px;margin:0 auto 54px;display:grid;justify-items:center}
.mx-head .label .i{width:14px;height:14px;color:var(--red-3)}
.mx-head .label{gap:8px;padding:8px 16px}
.mx-head p{margin-top:16px;font-size:1.05rem;color:#B9BAC0}
.matrix{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr) minmax(0,.85fr);gap:26px;align-items:center;padding:34px;border-radius:36px;background:linear-gradient(150deg,#1d2a20,#141813 55%,#121112);border:1px solid rgba(125,211,143,.22);box-shadow:0 50px 100px -40px rgba(39,128,63,.45);overflow:hidden}
.matrix::before,.matrix::after{content:"";position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none}
.matrix::before{width:420px;height:420px;left:-140px;top:20%;background:rgba(39,128,63,.35);animation:pulseGlow 7s ease-in-out infinite}
.matrix::after{width:360px;height:360px;right:-120px;bottom:-60px;background:rgba(85,185,106,.18);animation:pulseGlow 9s ease-in-out infinite}
.matrix>*{position:relative;z-index:1}

/* circuit + hub */
.circuit{position:relative;width:300px;height:540px}
.circuit>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.circuit .arc{fill:none;stroke:rgba(125,211,143,.35);stroke-width:2;stroke-dasharray:6 6;animation:dash 12s linear infinite}
@keyframes dash{to{stroke-dashoffset:-240}}
.circuit .ln{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s,stroke-width .3s}
.circuit .ln.on{stroke:var(--red-3);stroke-width:3;filter:drop-shadow(0 0 8px rgba(125,211,143,.9));stroke-dasharray:300;animation:draw .7s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
.circuit .dot{fill:var(--dark);stroke:rgba(125,211,143,.8);stroke-width:2.5;cursor:pointer;transition:r .3s,fill .3s}
.circuit .dot.on{fill:var(--red-3);stroke:#CDEFD4;r:7}
.circuit .end{fill:rgba(255,255,255,.4);transition:r .3s,fill .3s}
.circuit .end.on{fill:var(--red-3);r:5.5}
.hub2{position:absolute;left:130px;top:50%;width:196px;height:196px;margin:-98px 0 0 -98px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#27412F,#141C16 70%);border:2px solid rgba(125,211,143,.6);box-shadow:0 0 60px -6px rgba(85,185,106,.55);display:grid;place-items:center;align-content:center;text-align:center;padding:18px}
.hub2::before,.hub2::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(125,211,143,.35);pointer-events:none}
.hub2::before{inset:-10px;border-style:dashed;animation:spin 30s linear infinite}
.hub2::after{inset:-22px;border-color:rgba(125,211,143,.15);animation:spin 45s linear infinite reverse}
.hub2 .hic{width:56px;height:56px;border-radius:16px;background:rgba(85,185,106,.25);border:1px solid rgba(125,211,143,.6);display:grid;place-items:center;color:var(--red-3);box-shadow:0 0 24px rgba(85,185,106,.5);margin-bottom:10px}
.hub2 .hic .i{width:28px;height:28px}
.hub2 small{font-size:.62rem;font-weight:800;letter-spacing:.25em;color:var(--red-3)}
.hub2 h4{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.3rem;color:#fff;line-height:1.1;margin-top:4px}
.swap-in{animation:swapIn .5s var(--pop)}
@keyframes swapIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* capability list */
.caps7{display:grid;grid-auto-rows:66px;gap:12px;height:540px;padding-top:1px}
.cap7{display:flex;align-items:center;gap:14px;padding:0 14px 0 12px;border-radius:18px;border:1px solid rgba(85,185,106,.2);background:rgba(255,255,255,.04);cursor:pointer;text-align:left;width:100%;transition:transform .45s var(--ease),background .35s,border-color .35s,box-shadow .35s;opacity:0;transform:translateX(-30px)}
.matrix.in .cap7{opacity:1;transform:none;transition-delay:calc(var(--k) * .07s)}
.matrix.in .cap7.on{transform:translateX(8px);transition-delay:0s}
.cap7:hover{border-color:rgba(125,211,143,.5);background:rgba(39,128,63,.18)}
.cap7 .ci{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:rgba(0,0,0,.45);color:var(--red-3);border:1px solid rgba(85,185,106,.4);transition:all .35s var(--pop)}
.cap7 .ci .i{width:20px;height:20px}
.cap7 b{font-size:.85rem;color:var(--red-2);font-weight:800;font-family:ui-monospace,Consolas,monospace}
.cap7 h4{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.25rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.cap7 .go{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);color:#8E8F96;flex-shrink:0;transition:all .35s var(--ease)}
.cap7 .go .i{width:14px;height:14px;stroke-width:2.6}
.cap7.on{background:linear-gradient(90deg,rgba(39,128,63,.55),rgba(26,92,44,.35));border-color:var(--red-3);box-shadow:0 14px 34px -12px rgba(85,185,106,.6)}
.cap7.on .ci{background:var(--red-3);color:var(--dark);border-color:#CDEFD4;transform:scale(1.08) rotate(-6deg);box-shadow:0 0 20px rgba(125,211,143,.7)}
.cap7.on .go{background:var(--red-3);color:var(--dark);border-color:var(--red-3);transform:translateX(4px)}

/* sub-services panel */
.subs{display:flex;flex-direction:column;height:540px;border-radius:26px;border:1px solid rgba(125,211,143,.3);background:linear-gradient(180deg,rgba(39,128,63,.22),rgba(18,17,18,.6));padding:22px;backdrop-filter:blur(10px)}
.subs-h{border-bottom:1px solid rgba(85,185,106,.3);padding-bottom:14px;margin-bottom:14px}
.subs-h .kick{display:flex;align-items:center;gap:8px;font-family:ui-monospace,Consolas,monospace;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red-3)}
.subs-h .kick::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red-3);animation:ping 1.6s infinite}
.subs-h h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.7rem;color:#fff;margin-top:4px;line-height:1.1}
.subs-h p{font-size:.86rem;color:#CDEFD4;opacity:.85;margin-top:6px;line-height:1.5}
.subs-list{flex:1;overflow-y:auto;display:grid;align-content:start;gap:8px;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(125,211,143,.4) transparent}
.sub7{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;border:1px solid rgba(85,185,106,.2);background:rgba(255,255,255,.04);color:#E9E9EC;font-weight:600;font-size:.92rem;transition:background .3s,border-color .3s,transform .3s var(--ease);animation:subIn .5s var(--pop) both;animation-delay:calc(var(--k) * .06s)}
.sub7::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red-3);box-shadow:0 0 8px rgba(125,211,143,.8);flex-shrink:0;transition:transform .3s}
.sub7 .i{width:15px;height:15px;margin-left:auto;color:var(--red-3);opacity:0;transform:translateX(-6px);transition:all .3s}
.sub7:hover{background:rgba(39,128,63,.3);border-color:rgba(125,211,143,.6);transform:translateX(4px)}
.sub7:hover::before{transform:scale(1.5)}
.sub7:hover .i{opacity:1;transform:none}
@keyframes subIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.subs-cta{margin-top:14px;padding-top:14px;border-top:1px solid rgba(85,185,106,.3)}
.subs-cta a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-radius:14px;background:var(--red-2);color:var(--dark);font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 22px rgba(85,185,106,.4);transition:background .3s,box-shadow .3s}
.subs-cta a:hover{background:var(--red-3);box-shadow:0 0 32px rgba(85,185,106,.6)}
.subs-cta .i{width:16px;height:16px;stroke-width:2.6;flex-shrink:0}
.mx-hint{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:22px;font-size:.84rem;color:#8E8F96}
.mx-hint i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s}
.mx-hint i.on{width:22px;border-radius:4px;background:var(--red-3)}



@media (max-width:1180px){
  .matrix{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:26px}
  .circuit{grid-column:1/-1;width:auto;height:auto;display:grid;place-items:center;padding:30px 0}
  .circuit>svg{display:none}
  .hub2{position:relative;left:auto;top:auto;margin:0}
  .caps7{height:auto}
}
@media (max-width:760px){
.matrix{grid-template-columns:1fr;padding:18px;border-radius:26px}
  .cap7 h4{font-size:1.1rem}
  .subs{height:auto;max-height:none}
  .subs-list{overflow:visible}
  .matrix.in .cap7.on{transform:none}
  .subs{scroll-margin-top:90px}
}