/* ==========================================================================
   Services hero — animated constellation
   ========================================================================== */

.page-hero--svc{
  position:relative;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
  overflow:hidden;
}

.svc-hero__inner{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items:center;
}

@media (max-width: 960px){
  .svc-hero__inner{ grid-template-columns: 1fr; }
}

.svc-hero__copy h1 em{
  font-style: italic;
  background: linear-gradient(120deg,#ee9002 0%,#f26722 35%,#c1268c 65%,#7e3fbf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.svc-hero__chips{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top: clamp(1.25rem, 2vw, 1.5rem);
}
.svc-hero__chip{
  display:inline-flex; align-items:center;
  padding: .4rem .85rem;
  font: 500 .8rem/1 var(--font-sans, ui-sans-serif, system-ui);
  letter-spacing:.02em;
  color: var(--fg-body, #2a2018);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-soft, rgba(42,32,24,0.12));
  border-radius: 999px;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.svc-hero__chip:hover{
  transform: translateY(-1px);
  border-color: rgba(238,144,2,0.6);
  box-shadow: 0 6px 16px rgba(238,144,2,0.18);
}
.svc-hero__chip.is-active{
  background: linear-gradient(120deg,#ee9002,#c1268c);
  color:#fff; border-color: transparent;
  box-shadow: 0 8px 20px rgba(193,38,140,0.32);
}

/* ---------- Constellation SVG ---------- */
.svc-constellation{
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 18px 40px rgba(170,59,170,0.18));
}
.svc-constellation__svg{
  width: 100%; height: 100%;
  display:block;
}

/* Halo */
.svc-halo{
  transform-origin: 260px 260px;
  animation: svc-halo-pulse 6s ease-in-out infinite;
}
@keyframes svc-halo-pulse{
  0%,100%{ transform: scale(.92); opacity:.85; }
  50%    { transform: scale(1.06); opacity: 1; }
}

/* Orbit rings */
.svc-orbit{
  transform-origin: 260px 260px;
  animation: svc-orbit-spin 60s linear infinite;
}
.svc-orbit--2{ animation-direction: reverse; animation-duration: 80s; }
@keyframes svc-orbit-spin{ to{ transform: rotate(360deg); } }

/* Connection lines */
.svc-link{
  stroke: url(#svc-grad-3);
  stroke-width: 1.25;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  opacity: .55;
  animation: svc-link-draw .9s ease-out forwards;
}
.svc-link[data-target="advisory"]{   animation-delay: .35s; }
.svc-link[data-target="s4hana"]{     animation-delay: .45s; stroke: url(#svc-grad-2); }
.svc-link[data-target="integration"]{animation-delay: .55s; stroke: url(#svc-grad-3); }
.svc-link[data-target="automation"]{ animation-delay: .65s; stroke: url(#svc-grad-4); }
.svc-link[data-target="analytics"]{  animation-delay: .75s; stroke: url(#svc-grad-5); }
.svc-link[data-target="managed"]{    animation-delay: .85s; stroke: url(#svc-grad-6); }
@keyframes svc-link-draw{ to{ stroke-dashoffset: 0; } }

/* Center hex */
.svc-core{ animation: svc-core-fade .9s ease-out .1s both; }
.svc-core__spin{ animation: svc-core-spin 24s linear infinite; transform-origin: center; transform-box: fill-box; }
.svc-core__fill{ filter: drop-shadow(0 6px 18px rgba(170,59,170,0.45)); }
.svc-core__e{
  fill: #fff;
  font: italic 700 44px/1 Georgia, "Times New Roman", serif;
}
@keyframes svc-core-fade{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes svc-core-spin{ to{ transform: rotate(-360deg); } }

/* Service nodes */
.svc-node{
  cursor: pointer;
  opacity: 0;
  animation: svc-node-fade .7s ease-out forwards;
  transition: filter .25s ease;
}
.svc-node[data-svc="advisory"]{   animation-delay: .55s; }
.svc-node[data-svc="s4hana"]{     animation-delay: .65s; }
.svc-node[data-svc="integration"]{animation-delay: .75s; }
.svc-node[data-svc="automation"]{ animation-delay: .85s; }
.svc-node[data-svc="analytics"]{  animation-delay: .95s; }
.svc-node[data-svc="managed"]{    animation-delay: 1.05s; }

@keyframes svc-node-fade{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

.svc-node__bg{ filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18)); transition: r .25s ease; }
.svc-node__halo{
  opacity: .35;
  animation: svc-node-pulse 3.6s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
.svc-node[data-svc="s4hana"] .svc-node__halo{ animation-delay:-.4s; }
.svc-node[data-svc="integration"] .svc-node__halo{ animation-delay:-.8s; }
.svc-node[data-svc="automation"] .svc-node__halo{ animation-delay:-1.2s; }
.svc-node[data-svc="analytics"] .svc-node__halo{ animation-delay:-1.6s; }
.svc-node[data-svc="managed"] .svc-node__halo{ animation-delay:-2.0s; }

@keyframes svc-node-pulse{
  0%,100%{ transform: scale(1);    opacity:.35; }
  50%    { transform: scale(1.18); opacity: 0;  }
}

.svc-node__icon{
  fill:#fff;
  font: 700 22px/1 ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
}
.svc-node__label{
  fill: var(--fg-body, #2a2018);
  font: 600 13px/1 var(--font-sans, ui-sans-serif, system-ui);
  letter-spacing: .03em;
  pointer-events: none;
}

/* Hover & active states */
.svc-node.is-hot{ filter: drop-shadow(0 12px 24px rgba(238,144,2,0.45)); }
.svc-node.is-hot .svc-node__bg{ r: 40; }
.svc-node.is-hot .svc-node__halo{ opacity: .8; animation-duration: 1.4s; }
.svc-link.is-hot{ opacity: 1; stroke-width: 2.5; }

/* Travelling pulses */
.svc-pulses circle{
  filter: drop-shadow(0 0 6px currentColor);
  offset-rotate: 0deg;
  animation: svc-pulse-travel 4.5s linear infinite;
  opacity: 0;
}
.svc-pulse--1{ offset-path: path("M 260 260 L 260 90");   animation-delay: 1.1s; color:#fdb813; }
.svc-pulse--2{ offset-path: path("M 260 260 L 407 175");  animation-delay: 1.4s; color:#f26722; }
.svc-pulse--3{ offset-path: path("M 260 260 L 407 345");  animation-delay: 1.7s; color:#c1268c; }
.svc-pulse--4{ offset-path: path("M 260 260 L 260 430");  animation-delay: 2.0s; color:#aa3baa; }
.svc-pulse--5{ offset-path: path("M 260 260 L 113 345");  animation-delay: 2.3s; color:#7e3fbf; }
.svc-pulse--6{ offset-path: path("M 260 260 L 113 175");  animation-delay: 2.6s; color:#0492ce; }

@keyframes svc-pulse-travel{
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ---------- Dark mode ---------- */
[data-theme="dark"] .svc-hero__chip{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: var(--fg-body, #f5ede0);
}
[data-theme="dark"] .svc-hero__chip:hover{
  background: rgba(238,144,2,0.10);
  border-color: rgba(238,144,2,0.55);
}
[data-theme="dark"] .svc-node__label{
  fill: rgba(245,237,224,0.92);
}
[data-theme="dark"] .svc-orbit{ stroke: rgba(238,144,2,0.22); }
[data-theme="dark"] .svc-orbit--2{ stroke: rgba(170,59,170,0.20); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .svc-halo, .svc-orbit, .svc-core__ring, .svc-node__halo, .svc-pulses circle{ animation: none !important; }
  .svc-link{ stroke-dashoffset: 0 !important; animation: none !important; }
  .svc-core, .svc-node{ opacity: 1 !important; animation: none !important; transform: none !important; }
}