/* ===== Shared panel shell ===== */
.hero-graphic,
.visual-panel{
  position:relative;
  width:100%;
  aspect-ratio:6/5;
  min-height:300px;
  max-height:460px;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(145deg,#eef5ff,#f8fbff 55%,#e9fbf8);
  box-shadow:0 24px 60px rgba(16,42,67,.11);
  transition:transform .35s ease,box-shadow .35s ease;
}
.hero-graphic:hover,
.visual-panel:hover{
  transform:translateY(-6px);
  box-shadow:0 32px 76px rgba(16,42,67,.18);
}

.graphic-label{
  position:absolute;
  top:16px;
  left:16px;
  z-index:6;
  padding:7px 10px;
  border-radius:5px;
  background:#fff;
  color:var(--blue);
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  box-shadow:0 6px 18px rgba(16,42,67,.1);
}

.visual-caption{
  position:absolute;
  z-index:8;
  left:20px;
  right:20px;
  bottom:14px;
  margin:0;
  padding:10px 13px;
  border-radius:8px;
  background:rgba(255,255,255,.92);
  color:var(--slate);
  font-size:10.5px;
  box-shadow:0 8px 22px rgba(16,42,67,.1);
}

@keyframes spin-in-place{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}
@keyframes counter-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
@keyframes float-y{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
@keyframes pulse-soft{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}
@keyframes fade-up{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ===== Hero: copy + revolving orbit graphic ===== */
.offerings-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:3px;
  align-items:center;
}
.hero-copy{ animation:fade-up .7s ease both; }
.hero-graphic{ animation:fade-up .8s ease .1s both; }

.hero-core{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  display:grid;
  place-items:center;
  width:34%;
  aspect-ratio:1/1;
  max-width:150px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  text-align:center;
  font:700 14px/1.3 Manrope,sans-serif;
  box-shadow:0 0 0 16px rgba(20,110,245,.08),0 0 0 40px rgba(0,166,166,.05);
}

/* Two independent rings, each carrying two opposite nodes, spinning at
   different speeds and directions so the motion reads as orbiting rather
   than a single mechanical rotation. Sized off the panel's own box so the
   diagram always stays a true circle and never collides with the frame. */
.orbit-ring{
  position:absolute;
  top:50%;
  left:50%;
  width:56%;
  aspect-ratio:1/1;
  max-width:230px;
  border:1px dashed rgba(16,42,67,.18);
  border-radius:50%;
  animation:spin-in-place 24s linear infinite;
}
.ring-b{ width:78%; max-width:320px; animation-duration:32s; animation-direction:reverse; }

.orbit-node{
  position:absolute;
  top:50%;
  left:50%;
  width:26%;
  aspect-ratio:1/1;
  max-width:76px;
  min-width:52px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  box-shadow:0 10px 26px rgba(16,42,67,.13);
}
.orbit-node em{
  display:inline-block;
  font:700 10px Inter,sans-serif;
  font-style:normal;
  color:var(--navy);
  animation:counter-spin 24s linear infinite;
}
.ring-b .orbit-node em{ animation-duration:32s; animation-direction:reverse; }

.node-erp{ top:0; left:50%; border:2px solid var(--blue); }
.node-ai{ top:100%; left:50%; border:2px solid var(--violet); }
.node-digital{ top:50%; left:0; border:2px solid var(--teal); }
.node-ops{ top:50%; left:100%; border:2px solid var(--macis-green); }

/* ===== Sticky jump nav gets a little life on hover ===== */
.service-jump a{ transition:background-color .2s ease,color .2s ease; }

/* ===== Offering story rows: copy card + matching visual panel ===== */
.offerings-intro{ animation:fade-up .6s ease both; }

.story-row{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:32px;
  align-items:center;
  padding:36px 0;
  border-bottom:1px solid var(--border);
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease,transform .7s ease;
}
.story-row.is-visible{ opacity:1; transform:translateY(0); }
.story-row:last-child{ border-bottom:none; }
.story-row.visual-first{ grid-template-columns:1.08fr .92fr; }
.story-row.visual-first .visual-panel{ order:1; }
.story-row.visual-first .story-copy{ order:2; }

.story-copy{ transition:transform .3s ease; }
.story-copy:hover{ transform:translateY(-3px); }

/* ===== Enterprise: unified platform hub ===== */
.enterprise-visual{ background:radial-gradient(circle at 50% 50%,#fff,#eaf3ff); }
.system-hub{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  display:grid;
  place-items:center;
  width:30%;
  aspect-ratio:1/1;
  max-width:120px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  text-align:center;
  font:700 12px/1.3 Manrope,sans-serif;
  animation:pulse-soft 4s ease-in-out infinite;
}
.hub-lines{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:52%;
  aspect-ratio:1/1;
  max-width:210px;
  border:1px dashed #93b9e9;
  border-radius:50%;
  animation:spin-in-place 40s linear infinite;
}
.system-node{
  position:absolute;
  padding:9px 12px;
  border:1px solid #b9cde4;
  border-radius:8px;
  background:#fff;
  color:var(--navy);
  font-size:9.5px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(16,42,67,.09);
  animation:float-y 4.5s ease-in-out infinite;
}
.system-node.n1{ left:6%; top:22%; animation-delay:.1s; }
.system-node.n2{ left:38%; top:10%; animation-delay:.9s; }
.system-node.n3{ right:6%; top:22%; animation-delay:.4s; }
.system-node.n4{ left:6%; bottom:20%; animation-delay:1.3s; }
.system-node.n5{ left:38%; bottom:8%; animation-delay:.6s; }
.system-node.n6{ right:6%; bottom:20%; animation-delay:1.1s; }

/* ===== Digital: device mockups ===== */
.digital-visual{ background:linear-gradient(145deg,#e8fbf8,#f5fbff); }
.device{
  position:absolute;
  display:grid;
  place-items:center;
  border:7px solid var(--navy);
  background:linear-gradient(135deg,#dff8f5,#fff);
  color:#168b8b;
  font-size:8.5px;
  font-weight:800;
  box-shadow:0 20px 38px rgba(16,42,67,.16);
  animation:float-y 5s ease-in-out infinite;
}
.laptop{ left:8%; right:14%; top:16%; height:44%; border-radius:12px; animation-delay:0s; }
.laptop:after{
  content:'';
  position:absolute;
  left:-30px;
  right:-30px;
  bottom:-20px;
  height:13px;
  border-radius:3px 3px 12px 12px;
  background:#7890a4;
}
.tablet{ right:6%; bottom:12%; width:30%; max-width:130px; height:40%; border-radius:13px; animation-delay:.6s; }
.phone{ left:9%; bottom:12%; width:20%; max-width:88px; height:36%; border-radius:18px; animation-delay:1.1s; }

/* ===== AI: retail computer-vision overlay ===== */
.ai-visual{ background:linear-gradient(145deg,#e7edf4,#cad8e5); }
.photo-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(16,42,67,.18),rgba(115,87,216,.12));
  color:#536a7d;
  font:700 11px Inter,sans-serif;
  overflow:hidden;
}
.photo-placeholder:after{
  content:'';
  position:absolute;
  left:-10%;
  right:-10%;
  height:45%;
  top:-60%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.4),transparent);
  animation:scan-sweep 4s ease-in-out infinite;
}
@keyframes scan-sweep{
  0%{ top:-60%; }
  60%{ top:110%; }
  100%{ top:110%; }
}
.tracking-box{
  position:absolute;
  padding:7px;
  border:2px solid #7ee5df;
  color:#fff;
  background:rgba(16,42,67,.55);
  font-size:8px;
  letter-spacing:.08em;
  animation:pulse-soft 2.6s ease-in-out infinite;
}
.t1{ left:14%; top:26%; width:22%; max-width:95px; height:32%; max-height:120px; animation-delay:0s; }
.t2{ right:12%; top:20%; width:24%; max-width:105px; height:36%; max-height:135px; animation-delay:.5s; }
.t3{ left:40%; bottom:14%; width:20%; max-width:90px; height:24%; max-height:90px; animation-delay:1s; }
.heat{
  position:absolute;
  width:18%;
  max-width:90px;
  aspect-ratio:1/1;
  border-radius:50%;
  filter:blur(16px);
  background:rgba(245,158,11,.42);
  animation:pulse-soft 3.4s ease-in-out infinite;
}
.heat1{ left:22%; bottom:14%; }
.heat2{ right:16%; bottom:12%; background:rgba(214,69,69,.36); animation-delay:1.2s; }

/* ===== Operations: deploy / monitor / support / improve cycle ===== */
.ops-visual{ background:linear-gradient(145deg,#eef7ed,#f8fbff); }
.ops-cycle{
  position:absolute;
  left:50%;
  top:46%;
  width:56%;
  aspect-ratio:1/1;
  max-width:240px;
  transform:translate(-50%,-50%);
  border:26px solid rgba(79,138,76,.16);
  border-radius:50%;
}
.cycle-centre{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  text-align:center;
  color:var(--navy);
  font:800 11px/1.35 Manrope,sans-serif;
}
.cycle-step{
  position:absolute;
  z-index:3;
  padding:8px 11px;
  border-radius:99px;
  background:#fff;
  color:var(--macis-green);
  font-size:8.5px;
  font-weight:800;
  box-shadow:0 8px 20px rgba(16,42,67,.12);
  animation:step-pulse 8s ease-in-out infinite;
}
.c1{ left:50%; top:-14px; transform:translateX(-50%); animation-delay:0s; }
.c2{ right:-16px; top:44%; animation-delay:2s; }
.c3{ left:50%; bottom:-14px; transform:translateX(-50%); animation-delay:4s; }
.c4{ left:-16px; top:44%; animation-delay:6s; }
@keyframes step-pulse{
  0%,92%,100%{ transform:translate(0,0) scale(1); box-shadow:0 8px 20px rgba(16,42,67,.12); }
  8%{ transform:scale(1.12); box-shadow:0 10px 26px rgba(79,138,76,.35); }
}
.ops-metrics{
  position:absolute;
  left:18px;
  right:18px;
  bottom:54px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.ops-metrics span{ padding:9px 11px; border-radius:7px; background:#fff; color:var(--slate); font-size:8.5px; }
.ops-metrics b{ color:var(--macis-green); }

/* ===== Motion + responsive ===== */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; }
  .story-row{ opacity:1; transform:none; transition:none; }
}

@media (max-width:980px){
  .offerings-hero-grid,
  .story-row,
  .story-row.visual-first{ grid-template-columns:1fr; }
  .story-row.visual-first .visual-panel{ order:1; }
  .story-row.visual-first .story-copy{ order:2; }
}

@media (max-width:620px){
  .story-row{ padding:24px 0; gap:18px; }
  .hero-graphic,
  .visual-panel{ aspect-ratio:1/1; max-height:340px; }
  .ops-metrics{ display:none; }
}
/* ===== Enterprise section enhancements - append to serviceshero.css ===== */

/* Photo-enhanced hub nodes (extends existing .system-node) */
.system-node.has-photo{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:5px;
  padding:8px;
  width:auto;
  white-space:normal;
}
.system-node.has-photo img{
  width:52px;
  height:52px;
  border-radius:10px;
  object-fit:cover;
  box-shadow:0 10px 22px rgba(16,42,67,.16);
  background:#dbe6f3;
}
.node-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  margin-bottom:-13px;
  z-index:2;
  box-shadow:0 4px 10px rgba(16,42,67,.2);
}
.node-icon svg{ width:12px; height:12px; }
.system-node.has-photo b{ font-size:10.5px; color:var(--navy); margin-top:2px; }
.system-node.has-photo span:last-child{ font-size:8.5px; color:var(--slate); font-weight:400; }

/* Tagline under the pulsing hub centre */
.system-hub em{ display:block; font-size:7.5px; font-style:normal; letter-spacing:.1em; opacity:.85; margin-top:3px; }

/* Handwritten-style annotations on the hub graphic */
.annotation{
  position:absolute;
  z-index:6;
  font-family:'Segoe Script','Brush Script MT',cursive;
  color:var(--navy);
  font-size:12.5px;
  line-height:1.2;
}
.annotation-top{ top:14px; right:16px; text-align:right; }
.annotation-bottom{ bottom:60px; left:16px; }

/* Bottom-corner building photo on the hub graphic */
.hub-backdrop{
  position:absolute;
  right:0;
  bottom:0;
  width:40%;
  height:70px;
  overflow:hidden;
  border-radius:12px 0 0 0;
  z-index:1;
}
.hub-backdrop img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.backdrop-tag{
  position:absolute;
  right:10px;
  bottom:7px;
  color:#fff;
  font:800 8px/1.3 Manrope,sans-serif;
  letter-spacing:.03em;
  text-shadow:0 2px 6px rgba(0,0,0,.4);
  text-align:right;
}

/* Icon variant of .scope-flow (Discover/Configure/Integrate/Operate) */
.scope-flow--icons{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin:22px 0 6px;
}
.scope-flow--icons > i{ align-self:center; margin-top:20px; color:#b9cde4; font-style:normal; }
.scope-step{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:88px; }
/* .scope-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:10px;
  background:#eaf1fd;
  color:var(--blue);
  margin-bottom:2px;
} */
.scope-icon svg{ width:19px; height:19px; }
.scope-step b{ font-size:12.5px; color:var(--navy); }
.scope-step > span{ font-size:10.5px; color:var(--slate); line-height:1.3; }

/* Checkmark bullet list (used on the enterprise offering card) */
.check-list{ margin:18px 0; padding:0; list-style:none; }
.check-list li{ position:relative; padding:8px 0 8px 28px; color:#1e2024; font-size:14px; }
.check-list li::before{
  content:'';
  position:absolute; left:0; top:8px;
  width:18px; height:18px; border-radius:50%;
  background:var(--blue);
}
.check-list li::after{
  content:'';
  position:absolute; left:5px; top:13px;
  width:7px; height:3.5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

/* Icon variant of .evidence */
.evidence--icon{ display:flex; gap:12px; align-items:flex-start; }
.evidence-icon{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:8px;
  background:#dfe6fa; color:var(--blue); flex:none;
}
.evidence-icon svg{ width:17px; height:17px; }

/* Primary + secondary CTA row */
.cta-row{ display:flex; align-items:center; gap:18px; margin-top:20px; flex-wrap:wrap; }
.button-link{ color:var(--blue); font-weight:700; text-decoration:underline; font-size:13px; }

@media (max-width:620px){
  .scope-flow--icons > i{ display:none; }
  .system-node.has-photo img{ width:42px; height:42px; }
  .system-node.has-photo b{ font-size:9px; }
  .annotation{ font-size:10px; }
  .hub-backdrop{ width:54%; height:52px; }
}