.services-future {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(105px, 11vh, 142px) clamp(20px, 5vw, 76px) clamp(72px, 9vh, 110px);
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(3,7,18,.76), rgba(4,8,20,.97) 16%, rgba(4,8,20,.98)),
    radial-gradient(circle at var(--service-x, 50%) var(--service-y, 50%), rgba(47,198,255,.1), transparent 23%);
}

.services-future::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .33;
  background-image:
    linear-gradient(rgba(65,168,237,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65,168,237,.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
  content: "";
}

.services-orbit { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.services-orbit i { position: absolute; border: 1px solid rgba(98,181,255,.07); border-radius: 50%; }
.services-orbit i:nth-child(1) { top: 18%; left: -11%; width: 42vw; aspect-ratio: 1; }
.services-orbit i:nth-child(2) { right: -15%; bottom: -24%; width: 55vw; aspect-ratio: 1; border-color: rgba(147,101,255,.08); }
.services-orbit i:nth-child(3) { top: 8%; right: 14%; width: 180px; aspect-ratio: 1; border-style: dashed; animation: service-orbit 18s linear infinite; }

.services-inner { width: min(1460px, 100%); margin: 0 auto; }

.services-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  align-items: end;
  gap: clamp(34px, 6vw, 110px);
  margin-bottom: clamp(36px, 5vh, 58px);
}

.services-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 17px;
  color: rgba(185,215,239,.56);
  font: 700 10px/1 Inter, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.services-kicker span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(64,223,255,.3); border-radius: 50%; color: #68e8ff; letter-spacing: 0; }
.services-head h2 { margin: 0; font-size: clamp(34px, 4.2vw, 62px); line-height: 1.12; letter-spacing: -.05em; }
.services-head h2 em { color: transparent; background: linear-gradient(92deg, #75eaff, #a78bfa 74%); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.services-intro { padding-bottom: 4px; }
.services-intro p { margin: 0 0 20px; color: rgba(194,216,236,.56); font-size: 14px; line-height: 1.8; }
.services-intro a { display: inline-flex; align-items: center; gap: 12px; color: #c3f7ff; font-size: 13px; font-weight: 700; }
.services-intro a span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(78,221,255,.3); border-radius: 50%; color: #62eaff; transition: transform .25s ease, background .25s ease; }
.services-intro a:hover span { transform: translate(3px,-3px); background: rgba(52,215,255,.1); }

.service-matrix { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(12px, 1.4vw, 20px); }

.service-node {
  --node: 72,224,255;
  position: relative;
  grid-column: span 3;
  min-height: clamp(330px, 25vw, 380px);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(var(--node), .2);
  border-radius: 18px;
  background:
    radial-gradient(circle at var(--card-x, 50%) var(--card-y, 50%), rgba(var(--node), .17), transparent 34%),
    linear-gradient(145deg, rgba(13,23,43,.9), rgba(5,10,22,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 18px 55px rgba(0,0,0,.24);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .18s ease-out, border-color .3s ease, box-shadow .3s ease;
}

.service-node::before { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(var(--node),.12) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--node),.12) 1px,transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(135deg,#000,transparent 65%); content:""; pointer-events:none; }
.service-node::after { position: absolute; top: -70%; left: -45%; width: 38%; height: 230%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); transform: rotate(19deg); transition: left .75s ease; content:""; pointer-events:none; }
.service-node:hover { border-color: rgba(var(--node), .6); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 24px 70px rgba(0,0,0,.36), 0 0 32px rgba(var(--node),.1); }
.service-node:hover::after { left: 120%; }
.service-node--wide { grid-column: span 4; min-height: clamp(330px, 24vw, 370px); }
.service-node--blue { --node: 78,146,255; }.service-node--violet { --node: 147,105,255; }.service-node--purple { --node: 191,91,255; }.service-node--aqua { --node: 47,232,201; }.service-node--pink { --node: 255,94,178; }.service-node--green { --node: 70,239,148; }

.node-number { position: absolute; top: 18px; right: 20px; color: rgba(var(--node),.48); font: 600 9px/1 monospace; letter-spacing: .15em; }
.node-number { z-index: 5; padding: 6px 8px; border: 1px solid rgba(var(--node),.2); border-radius: 999px; color: rgba(224,247,255,.82); background: rgba(2,8,18,.68); backdrop-filter: blur(8px); }
.node-media { position: relative; height: clamp(148px, 12vw, 182px); overflow: hidden; border-bottom: 1px solid rgba(var(--node),.18); background: #050b18; }
.node-media::after { position:absolute; inset:0; background:linear-gradient(180deg,transparent 46%,rgba(5,10,22,.92)),linear-gradient(110deg,rgba(var(--node),.08),transparent 45%); content:""; pointer-events:none; }
.node-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.08) contrast(1.04) brightness(.88); transform:scale(1.02); transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .45s ease; }
.service-node:hover .node-media img { transform:scale(1.08); filter:saturate(1.16) contrast(1.05) brightness(1); }
.node-icon { position: relative; display: grid; width: 64px; height: 64px; place-items: center; margin-bottom: clamp(28px, 3vw, 44px); border: 1px solid rgba(var(--node),.25); border-radius: 17px; color: rgb(var(--node)); background: rgba(var(--node),.06); box-shadow: inset 0 0 24px rgba(var(--node),.06), 0 0 22px rgba(var(--node),.08); }
.node-icon::after { position:absolute; inset:-7px; border:1px dashed rgba(var(--node),.13); border-radius:21px; content:""; transition:transform .5s ease; }
.service-node:hover .node-icon::after { transform: rotate(45deg); }
.node-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(var(--node),.55)); }
.node-copy { position: relative; z-index: 2; padding: 18px 20px 56px; }
.node-copy h3 { margin: 0 0 10px; font-size: clamp(19px, 1.6vw, 24px); letter-spacing: -.025em; }
.node-copy p { margin: 0; color: rgba(193,214,233,.52); font-size: 12px; line-height: 1.7; }
.node-tags { position: absolute; right: 20px; bottom: 18px; left: 20px; display: flex; gap: 6px; z-index: 2; }
.node-tags span { padding: 5px 7px; border: 1px solid rgba(var(--node),.15); border-radius: 5px; color: rgba(var(--node),.68); background: rgba(var(--node),.035); font: 500 8px/1 monospace; }
.node-arrow { position:absolute; right:20px; bottom:19px; z-index:3; color:rgba(var(--node),.6); opacity:0; transform:translate(-6px,6px); transition:.25s ease; }
.service-node:hover .node-arrow { opacity:1; transform:none; }
.service-node:hover .node-tags { padding-right: 20px; }

.services-foot { display:flex; align-items:center; gap:18px; margin-top:30px; color:rgba(174,207,230,.3); font:600 8px/1 monospace; letter-spacing:.14em; }
.services-foot i { height:1px; flex:1; background:linear-gradient(90deg,transparent,rgba(88,208,255,.15),transparent); }
.services-foot b { color:rgba(192,229,247,.48); font-weight:600; }

@keyframes service-orbit { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
  .service-node { grid-column: span 6; }
  .service-node--wide:last-child { grid-column: 4 / span 6; }
}

@media (max-width: 720px) {
  .services-future { padding: 92px 16px 70px; }
  .services-head { grid-template-columns: 1fr; gap: 23px; }
  .services-head h2 br { display:none; }
  .services-intro { max-width: 520px; }
  .service-matrix { grid-template-columns: 1fr; }
  .service-node, .service-node--wide, .service-node--wide:last-child { grid-column: 1; min-height: 238px; }
  .node-icon { margin-bottom: 29px; }
  .services-foot span { display:none; }
}

@media (prefers-reduced-motion: reduce) { .services-orbit i:nth-child(3) { animation:none; } }