/* Interactive IT stack (from v3) — borderless, sits on the hero */
:root{ --navy:#081a38; --p200:#8eb5c6; --p100:#c6dae3; --p50:#e2eef4; --p300:#5591ab; }
/* ---------- Interactive IT stack (hero) ---------- */
.stack{
  position:relative; border-radius:28px; overflow:hidden; color:var(--p200);
  container-type:inline-size;
  background-color:var(--navy);
  background-image:linear-gradient(rgba(85,145,171,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(85,145,171,.08) 1px,transparent 1px);
  background-size:36px 36px;
  box-shadow:0 40px 80px -40px rgba(8,26,56,.55);
}
.stack-diag{ position:relative; aspect-ratio:500/296; }
@container (max-width:480px){ .stack-diag{ aspect-ratio:1/1; } }
.stack-spot{
  position:absolute; left:var(--sx,-999px); top:var(--sy,-999px);
  width:280px; height:280px; margin:-140px 0 0 -140px; border-radius:50%;
  background:radial-gradient(circle,rgba(28,108,143,.42) 0%,rgba(28,108,143,0) 70%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.stack.is-hover .stack-spot{ opacity:1; }
.stack-tag, .stack-hint{ position:absolute; top:13px; z-index:4; margin:0; }
.stack-tag{
  left:18px; display:flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--p100);
}
.stack-hint{ right:18px; font-size:14px; color:var(--p200); }
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--p200); animation:live 2s ease-out infinite; }
@keyframes live{ 0%{ box-shadow:0 0 0 0 rgba(142,181,198,.7);} 70%{ box-shadow:0 0 0 8px rgba(142,181,198,0);} 100%{ box-shadow:0 0 0 0 rgba(142,181,198,0);} }

.stack-links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.stack-links polygon{ fill:none; stroke:rgba(142,181,198,.13); stroke-width:1; }
.stack-links line{
  stroke:rgba(142,181,198,.22); stroke-width:1.3;
  stroke-dasharray:3 7; animation:flow 1.4s linear infinite;
  transition:stroke .3s ease, stroke-width .3s ease;
}
.stack-links line.is-active{ stroke:rgba(198,218,227,.55); }
.stack-links line.is-on{ stroke:var(--p200); stroke-width:2; }
@keyframes flow{ to{ stroke-dashoffset:-20; } }

.pk{
  position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:var(--p50); box-shadow:0 0 10px var(--p200); pointer-events:none; z-index:1;
  opacity:.22; transition:opacity .35s ease;
  animation:1.7s linear infinite;
}
.pk.is-active{ opacity:.8; }
.pk.is-on{ opacity:1; }
.pk-net{ animation-name:pk-net; }
.pk-sec{ animation-name:pk-sec; animation-delay:-.3s; }
.pk-cloud{ animation-name:pk-cloud; animation-delay:-.6s; }
.pk-soft{ animation-name:pk-soft; animation-delay:-.9s; }
.pk-learn{ animation-name:pk-learn; animation-delay:-1.2s; }
.pk-lc{ animation-name:pk-lc; animation-delay:-1.5s; }
@keyframes pk-net{ from{left:50%;top:47.3%} to{left:50%;top:14.19%} }
@keyframes pk-sec{ from{left:50%;top:47.3%} to{left:82.4%;top:31.08%} }
@keyframes pk-cloud{ from{left:50%;top:47.3%} to{left:82.4%;top:63.51%} }
@keyframes pk-soft{ from{left:50%;top:47.3%} to{left:50%;top:80.41%} }
@keyframes pk-learn{ from{left:50%;top:47.3%} to{left:17.6%;top:63.51%} }
@keyframes pk-lc{ from{left:50%;top:47.3%} to{left:17.6%;top:31.08%} }

.stack-hub{
  position:absolute; left:50%; top:47.3%; z-index:3; transform:translate(-50%,-50%);
  width:clamp(62px,16%,84px); aspect-ratio:1/1; padding:0; border:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary);
  box-shadow:0 0 0 8px rgba(28,108,143,.2), 0 0 44px rgba(28,108,143,.65);
  transition:background .25s ease;
}
.stack-hub:hover, .stack-hub[aria-pressed="true"]{ background:#2380a8; }
.stack-hub svg{ width:42%; height:42%; }
.hub-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--p200); pointer-events:none; animation:ring 3.4s cubic-bezier(.2,.7,.3,1) infinite; }
.hub-ring + .hub-ring{ animation-delay:.24s; }
@keyframes ring{ 0%{ transform:scale(1); opacity:.85;} 38%{ transform:scale(2.2); opacity:0;} 100%{ transform:scale(2.2); opacity:0;} }
.hub-label, .node-label{
  position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%);
  white-space:nowrap; border-radius:6px; background:var(--navy);
  font-family:var(--font-display); line-height:1.4;
}
.hub-label{ padding:2px 9px; font-weight:600; font-size:13px; letter-spacing:.04em; color:#fff; }

.stack-node{
  position:absolute; left:var(--x); top:var(--y); z-index:2;
  transform:translate(-50%,-50%) scale(var(--s,1));
  width:clamp(44px,11.5%,58px); aspect-ratio:1/1; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(142,181,198,.4); background:var(--panel); color:var(--p200);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.stack-node > svg{ width:46%; height:46%; }
.node-label{ padding:1px 8px; font-weight:500; font-size:14px; color:var(--p100); transition:color .25s ease; }
.stack-node.is-active{ --s:1.06; border-color:var(--p50); color:#fff; box-shadow:0 0 0 6px rgba(142,181,198,.14); }
.stack-node.is-active .node-label{ color:#fff; }
.stack-node.is-on{ background:var(--primary); border-color:var(--p200); color:#fff; box-shadow:0 0 0 6px rgba(28,108,143,.3), 0 0 30px rgba(28,108,143,.6); }
.stack-node.is-on .node-label{ color:#fff; }
.stack-node.is-on.is-active{ border-color:var(--p50); }
.node-check{
  position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%;
  display:none; align-items:center; justify-content:center; background:#fff;
}
.stack-node.is-on .node-check{ display:flex; }
.stack-node:focus-visible, .stack-hub:focus-visible{ outline:3px solid var(--p100); outline-offset:3px; }

.stack-info{ position:relative; display:flex; flex-direction:column; gap:10px; padding:16px 20px 18px; border-top:1px solid rgba(142,181,198,.16); background:rgba(8,26,56,.92); }
.stack-info-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stack-title{ font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.25; letter-spacing:-.01em; color:#fff; }
.stack-toggle{
  flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:999px;
  border:1px solid rgba(142,181,198,.5); background:transparent; color:#fff;
  font-family:var(--font-display); font-weight:500; font-size:15px;
  transition:background .2s ease, border-color .2s ease;
}
.stack-toggle:hover{ border-color:var(--p100); }
.stack-toggle[aria-pressed="true"]{ background:var(--primary); border-color:var(--primary); }
.stack-desc{ font-size:15px; line-height:1.5; color:var(--p200); }
.stack-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.stack-tags li{ padding:3px 10px; border-radius:999px; background:rgba(142,181,198,.13); color:var(--p100); font-size:14px; line-height:1.5; }
.stack-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:14px 20px; background:var(--panel); border-top:1px solid rgba(142,181,198,.16); }
.stack-summary{ flex:1 1 200px; font-size:15px; line-height:1.45; color:var(--p100); }
.stack .btn-primary:focus-visible, .stack-toggle:focus-visible{ outline-color:var(--p100); }
/* v4: no card background / border / shadow */
.hero .stack{ background:none; box-shadow:none; border-radius:0; overflow:visible; text-shadow:none; }
.hero .stack-info, .hero .stack-foot{ background:transparent; }
.hero-grid > .stack{ position:relative; z-index:1; align-self:center; }
/* stop focus-scroll shifting the hero sideways (wide glow spot) */
.hero{ overflow:clip; }
/* icon sprite stroke style (was rendering as filled squares) */
.stack .i{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* fixed space for text + pills so switching services never shifts the layout */
.hero .stack-desc{ min-height:4.5em; margin:0; }
.hero .stack-tags{ min-height:63px; align-content:flex-start; margin:0; padding:0; list-style:none; }
.hero .stack-summary{ min-height:4.35em; display:flex; align-items:center; margin:0; }

/* ---------- Smoothness pass ----------
   packets travel with transform (GPU) instead of left/top (layout every frame);
   cqw = 1% of the stack width, --ar converts "% of height" into cqw */
.stack-diag{ --ar:.592; }
@container (max-width:480px){ .stack-diag{ --ar:1; } }
.pk{ left:0; top:0; will-change:transform; }
@keyframes pk-net  { from{ transform:translate3d(50cqw,  calc(47.3cqw * var(--ar)),0); } to{ transform:translate3d(50cqw,calc(10.5cqw * var(--ar)),0); } }
@keyframes pk-sec  { from{ transform:translate3d(50cqw,  calc(47.3cqw * var(--ar)),0); } to{ transform:translate3d(89cqw,calc(27.5cqw * var(--ar)),0); } }
@keyframes pk-cloud{ from{ transform:translate3d(50cqw,  calc(47.3cqw * var(--ar)),0); } to{ transform:translate3d(89cqw,calc(67cqw * var(--ar)),0); } }
@keyframes pk-soft { from{ transform:translate3d(50cqw,  calc(47.3cqw * var(--ar)),0); } to{ transform:translate3d(50cqw,calc(84cqw * var(--ar)),0); } }
@keyframes pk-learn{ from{ transform:translate3d(50cqw,  calc(47.3cqw * var(--ar)),0); } to{ transform:translate3d(11cqw,calc(67cqw * var(--ar)),0); } }
@keyframes pk-lc   { from{ transform:translate3d(50cqw,  calc(47.3cqw * var(--ar)),0); } to{ transform:translate3d(11cqw,calc(27.5cqw * var(--ar)),0); } }
/* cursor spotlight moved by transform, set from JS */
.stack-spot{ left:0; top:0; margin:0; will-change:transform; transform:translate3d(-999px,-999px,0); transition:opacity .4s var(--ease-out,ease); }
/* softer, consistent node motion */
.stack-node{ transition:transform .4s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .3s ease, border-color .3s ease, color .3s ease; }
/* bigger icons inside the node circles (circle size unchanged) */
.stack-node > svg{ width:62%; height:62%; stroke-width:1.7; }
.stack-hub svg{ width:52%; height:52%; }
/* hero: text starts at the top instead of being centred against the taller stack panel */
.hero{ padding-top:112px; }
.hero-grid{ align-items:start; }
.hero-grid > :first-child{ padding-top:48px; }
@media (max-width:1024px){ .hero-grid > :first-child{ padding-top:0; } }
.hero .stats-bar{ margin-top:20px; }

/* gentle floating for the 6 service nodes: each drifts on its own slow rhythm */
@keyframes nodeFloat{
  0%,100%{ translate:0 0; }
  25%{ translate:1.5px -4px; }
  50%{ translate:0 -6px; }
  75%{ translate:-1.5px -3px; }
}
.stack-node{ animation:nodeFloat 6.5s cubic-bezier(.45,0,.55,1) infinite; }
.stack-node[data-id="net"]  { animation-duration:6.2s; animation-delay:-0.4s; }
.stack-node[data-id="sec"]  { animation-duration:7.1s; animation-delay:-2.3s; }
.stack-node[data-id="cloud"]{ animation-duration:6.6s; animation-delay:-4.1s; }
.stack-node[data-id="soft"] { animation-duration:7.4s; animation-delay:-1.2s; }
.stack-node[data-id="learn"]{ animation-duration:6.9s; animation-delay:-3.3s; }
.stack-node[data-id="lc"]   { animation-duration:7.7s; animation-delay:-5.2s; }
/* pause the drift while the visitor points at a node, so it's easy to click */
.stack-node:hover, .stack-node:focus-visible{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .stack-node{ animation:none; } }

/* phones: lift the "Your IT stack" label and "Tap to build yours" above the Network node so they don't touch it */
@media (max-width:640px){ .stack-tag, .stack-hint{ top:-24px; } }