.service-shell {
  --shell-bg-1: #142845;
  --shell-bg-2: #2b4368;
  --shell-stroke-1: rgba(235, 239, 245, 0.96);
  --shell-stroke-2: rgba(214, 220, 229, 0.90);
  --shell-panel: rgba(10, 19, 33, 0.24);
  --shell-fill-dark: #4c5d78;
  --shell-fill-mid: #8d95a3;
  --shell-fill-light: #d5d8de;
  --shell-shadow: rgba(8, 14, 24, 0.22);

  position: relative;
  width: 132px;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 12px 20px rgba(8, 14, 24, 0.16));
}

.service-shell__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px 20px 26px 26px;
  background: linear-gradient(180deg, var(--shell-bg-2) 0%, var(--shell-bg-1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 4px 10px rgba(0,0,0,0.08);
  overflow: hidden;
}

.service-shell__frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 15px 15px 21px 21px;
  border: 1.5px solid var(--shell-stroke-1);
  clip-path: polygon(0 0, 84% 0, 100% 16%, 100% 100%, 0 100%);
}

.service-shell__frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 13px 13px 19px 19px;
  border: 1px solid var(--shell-stroke-2);
  opacity: 0.95;
  clip-path: polygon(0 0, 83% 0, 100% 17%, 100% 100%, 0 100%);
}

.service-shell__inner {
  position: absolute;
  inset: 14px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: 1fr 0.9fr;
  gap: 4px;
}

.service-shell__col {
  position: relative;
  background: linear-gradient(180deg, rgba(9, 18, 33, 0.18), rgba(9, 18, 33, 0.32));
  border: 1px solid rgba(224, 229, 236, 0.75);
  box-shadow:
    inset 0 0 0 1px rgba(10, 20, 35, 0.10),
    0 4px 8px -7px var(--shell-shadow);
}

.service-shell__col--left {
  grid-row: 1 / span 2;
  border-radius: 8px 0 0 14px;
  padding: 10px 8px 10px 10px;
}

.service-shell__col--top {
  border-radius: 0 12px 0 0;
  padding: 8px 6px 6px 6px;
  overflow: visible;
}

.service-shell__col--grid {
  border-radius: 0 0 12px 0;
  padding: 9px 8px 8px 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  align-content: center;
  justify-content: center;
}

.service-shell__bar,
.service-shell__tier,
.service-shell__cell,
.service-shell__tick {
  position: absolute;
  display: block;
}

.service-shell__bar {
  left: 5px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    1px 3px 6px rgba(0,0,0,0.12);
}

.service-shell__bar--lg {
  top: 18px;
  width: 45px;
}

.service-shell__bar--md {
  top: 42px;
  width: 40px;
  background: linear-gradient(180deg, #7f8795 0%, #59677d 100%);
}

.service-shell__bar--sm {
  top: 66px;
  width: 28px;
  background: linear-gradient(180deg, #a0a6b1 0%, #6f7a8d 100%);
}

.service-shell__tick {
  right: 16px;
  width: 5px;
  border-radius: 1px;
  background: linear-gradient(180deg, #8f97a4 0%, #657186 100%);
}

.service-shell__tick--1 {
  top: 42px;
  height: 12px;
}

.service-shell__tick--2 {
  top: 66px;
  height: 12px;
}

.service-shell__tier {
  left: 50%;
  transform: translateX(-50%);
  height: 12px;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 2px 4px rgba(0,0,0,0.08);
}

.service-shell__tier--1 {
  top: 6px;
  width: 35px;
  background: linear-gradient(180deg, #8f95a1 0%, #70798a 100%);
}

.service-shell__tier--2 {
  top: 22px;
  width: 44px;
  background: linear-gradient(180deg, #c0c3ca 0%, #999fab 100%);
}

.service-shell__tier--3 {
  top: 38px;
  width: 55px;
  background: linear-gradient(180deg, #e5e7ea 0%, #c9ccd3 100%);
}

.service-shell__cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: linear-gradient(180deg, #5b6b85 0%, #3e4f66 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 3px 6px rgba(0,0,0,0.10);
}

.service-shell__cell--light {
  background: linear-gradient(180deg, #d9dce1 0%, #bec3cb 100%);
}
/*  ----------  ICONE -----------  */
.services-circle-card.is-active .service-shell,
.services-circle-card:hover .service-shell,
.services-circle-card:focus-visible .service-shell {
  transform: translateY(50px) translateX(50px) scale(1.1);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

.services-circle-card__icon-slot {
  position: relative;
  overflow: visible;
}

.services-circle-card__icon-slot .service-shell--category {
  position: absolute;
  right: -40px;
  bottom: -45px;
  width: 170px;
  height: 170px;
  z-index: 3;
  pointer-events: none;
}

/*.services-circle-card__icon-slot .service-shell--category::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 22px 10px 22px 10px;
  background: rgba(27, 47, 82, 0.08);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    0 10px 24px rgba(19, 32, 58, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.16);
}*/

.services-circle-card__icon-slot .service-shell__frame {
  position: absolute;
  inset: 0;
  border-radius: 26px 10px 26px 10px;
  background: transparent;
  box-shadow: none;
}

/*.services-circle-card__icon-slot .service-shell__frame::before,
.services-circle-card__icon-slot .service-shell__frame::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px solid rgba(255,255,255,0.92);
  border-radius: 22px 10px 22px 10px;
}*/

/*.services-circle-card__icon-slot .service-shell__frame::after {
  inset: 26px;
  border-color: rgba(255,255,255,0.68);
}*/

@media (max-width: 900px) {
  .services-circle-card__icon-slot .service-shell--category {
    width: 136px;
    height: 136px;
    right: -20px;
    bottom: -20px;
  }
}

/* =========================================================
   STRATEGIC SOURCING & CONTRACTING
   ========================================================= */

.services-circle-card__icon-slot .service-shell--strategic {
  position: absolute;
  right: -40px;
  bottom: -65px;
  width: 170px;
  height: 170px;
  z-index: 3;
  pointer-events: none;
}

.service-shell--strategic .service-shell__frame {
  position: absolute;
  inset: 0;
  border-radius: 26px 10px 26px 10px;
  background: transparent;
  box-shadow: none;
}

.service-shell--strategic .service-shell__inner {
  position: absolute;
  inset: 14px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  grid-template-rows: 1fr 0.9fr;
  gap: 4px;
}

.service-shell--strategic .service-shell__col {
  position: relative;
  background: linear-gradient(180deg, rgba(9, 18, 33, 0.18), rgba(9, 18, 33, 0.32));
  border: 1px solid rgba(224, 229, 236, 0.75);
  box-shadow:
    inset 0 0 0 1px rgba(10, 20, 35, 0.10),
    0 4px 8px -7px var(--shell-shadow);
}

.service-shell--strategic .service-shell__col--network {
  grid-row: 1 / span 2;
  border-radius: 8px 0 0 14px;
}

.service-shell--strategic .service-shell__col--docs {
  border-radius: 0 12px 0 0;
}

.service-shell--strategic .service-shell__col--chain {
  border-radius: 0 0 12px 0;
}

/* network */
.service-shell--strategic .service-shell__node,
.service-shell--strategic .service-shell__link,
.service-shell--strategic .service-shell__doc,
.service-shell--strategic .service-shell__chain {
  position: absolute;
  display: block;
}

.service-shell--strategic .service-shell__node {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 2px 4px rgba(0,0,0,0.10);
}

.service-shell--strategic .service-shell__node--1 {
  top: 14px;
  left: 6px;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
  z-index: 1;
}

.service-shell--strategic .service-shell__node--2 {
  top: 38px;
  right: 12px;
  background: linear-gradient(180deg, #7f8795 0%, #59677d 100%);
  z-index: 1;
}

.service-shell--strategic .service-shell__node--3 {
  top: 64px;
  left: 12px;
  background: linear-gradient(180deg, #c0c3ca 0%, #999fab 100%);
  z-index: 2;
}

.service-shell--strategic .service-shell__node--4 {
  bottom: 28px;
  left: 43px;
  background: linear-gradient(180deg, #e5e7ea 0%, #c9ccd3 100%);
  z-index: 2;
}

.service-shell--strategic .service-shell__link {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7b8797 0%, #b9bec7 100%);
  transform-origin: left center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.service-shell--strategic .service-shell__link--1 {
  top: 25px;
  left: 16px;
  width: 34px;
  transform: rotate(33deg);
}

.service-shell--strategic .service-shell__link--2 {
  top: 72px;
  left: 24px;
  width: 40px;
  transform: rotate(42deg);
  z-index: 1;
}

.service-shell--strategic .service-shell__link--3 {
  top: 48px;
  left: 44px;
  width: 35px;
  transform: rotate(104deg);
}

/* docs */
.service-shell--strategic .service-shell__doc {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 54px;
  height: 55px;
  transform: translateX(-50%) skewX(-5deg);
  border-radius: 3px;
  background: linear-gradient(180deg, #e5e7ea 0%, #c9ccd3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    1px 3px 6px rgba(0,0,0,0.10);
}

.service-shell--strategic .service-shell__doc--back,
.service-shell--strategic .service-shell__doc--mid {
  display: none;
}

.service-shell--strategic .service-shell__doc--front::before,
.service-shell--strategic .service-shell__doc--front::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7e8795 0%, #a4adba 100%);
  transform: skewX(14deg);
}

.service-shell--strategic .service-shell__doc--front::before {
  top: 11px;
  box-shadow:
    0 8px 0 0 rgba(134, 143, 156, 0.95),
    0 16px 0 0 rgba(164, 173, 186, 0.92);
}

.service-shell--strategic .service-shell__doc--front::after {
  top: 27px;
  right: 18px;
}

/* chain */
.service-shell--strategic .service-shell__chain {
  width: 30px;
  height: 18px;
  border: 4px solid #7d8796;
  border-radius: 12px;
  transform: rotate(-26deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    1px 2px 4px rgba(0,0,0,0.08);
}

.service-shell--strategic .service-shell__chain--1 {
  left: 14px;
  top: 20px;
  border-color: #6a778c;
}

.service-shell--strategic .service-shell__chain--2 {
  left: 32px;
  top: 22px;
  border-color: #c8ccd2;
}

@media (max-width: 900px) {
  .services-circle-card__icon-slot .service-shell--strategic {
    width: 136px;
    height: 136px;
    right: -20px;
    bottom: -20px;
  }
}

/* =========================================================
   SUPPLIER PERFORMANCE & RELATIONSHIP MANAGEMENT
   ========================================================= */

.services-circle-card__icon-slot .service-shell--supplier {
  position: absolute;
  right: -40px;
  bottom: -70px;
  width: 170px;
  height: 170px;
  z-index: 3;
  pointer-events: none;
}

.service-shell--supplier .service-shell__frame {
  position: absolute;
  inset: 0;
  border-radius: 26px 10px 26px 10px;
  background: transparent;
  box-shadow: none;
}

.service-shell--supplier .service-shell__inner {
  position: absolute;
  inset: 14px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  grid-template-rows: 1fr 0.9fr;
  gap: 4px;
}

.service-shell--supplier .service-shell__col {
  position: relative;
  background: linear-gradient(180deg, rgba(9, 18, 33, 0.18), rgba(9, 18, 33, 0.32));
  border: 1px solid rgba(224, 229, 236, 0.75);
  box-shadow:
    inset 0 0 0 1px rgba(10, 20, 35, 0.10),
    0 4px 8px -7px var(--shell-shadow);
}

.service-shell--supplier .service-shell__col--report {
  grid-row: 1 / span 2;
  border-radius: 8px 0 0 14px;
}

.service-shell--supplier .service-shell__col--people {
  border-radius: 0 12px 0 0;
}

.service-shell--supplier .service-shell__col--gauge {
  border-radius: 0 0 12px 0;
}

/* gauge */
.service-shell--supplier .service-shell__gauge,
.service-shell--supplier .service-shell__people,
.service-shell--supplier .service-shell__people-body,
.service-shell--supplier .service-shell__report-bar {
  position: absolute;
  display: block;
}

.service-shell--supplier .service-shell__gauge--arc {
  left: 6px;
  top: 13px;
  width: 58px;
  height: 32px;
  border: 6px solid #8d95a3;
  border-bottom: 0;
  border-radius: 58px 58px 0 0;
  box-sizing: border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    1px 2px 4px rgba(0,0,0,0.08);
}

.service-shell--supplier .service-shell__gauge--arc::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 42px;
  height: 20px;
  transform: translateX(-50%);
  border: 2px solid rgba(229, 231, 234, 0.72);
  border-bottom: 0;
  border-radius: 42px 42px 0 0;
  box-sizing: border-box;
}

.service-shell--supplier .service-shell__gauge--needle {
  left: 32px;
  top: 39px;
  width: 30px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e5e7ea 0%, #aab2bf 100%);
  transform-origin: left center;
  transform: rotate(-24deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}

.service-shell--supplier .service-shell__gauge--hub {
  left: 30px;
  top: 36px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 2px 4px rgba(0,0,0,0.10);
}

/* people */
.service-shell--supplier .service-shell__people {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 2px 4px rgba(0,0,0,0.10);
}

.service-shell--supplier .service-shell__people--1 {
  top: 12px;
  left: 18px;
  background: linear-gradient(180deg, #c0c3ca 0%, #999fab 100%);
}

.service-shell--supplier .service-shell__people--2 {
  top: 16px;
  left: 38px;
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #8f95a1 0%, #70798a 100%);
}

.service-shell--supplier .service-shell__people-body {
  border-radius: 10px 10px 3px 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 2px 4px rgba(0,0,0,0.08);
}

.service-shell--supplier .service-shell__people-body--1 {
  top: 28px;
  left: 14px;
  width: 24px;
  height: 22px;
  background: linear-gradient(180deg, #e5e7ea 0%, #c9ccd3 100%);
  z-index: 1;
}

.service-shell--supplier .service-shell__people-body--2 {
  top: 29px;
  left: 34px;
  width: 21px;
  height: 18px;
  background: linear-gradient(180deg, #7f8795 0%, #59677d 100%);
  z-index: 0;
}

/* report bars */
.service-shell--supplier .service-shell__report-bar {
  bottom: 18px;
  width: 10px;
  border-radius: 2px 2px 1px 1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 2px 4px rgba(0,0,0,0.08);
}

.service-shell--supplier .service-shell__report-bar--1 {
  left: 6px;
  height: 45px;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
}

.service-shell--supplier .service-shell__report-bar--2 {
  left: 20px;
  height: 55px;
  background: linear-gradient(180deg, #7f8795 0%, #59677d 100%);
}

.service-shell--supplier .service-shell__report-bar--3 {
  left: 34px;
  height: 49px;
  background: linear-gradient(180deg, #c0c3ca 0%, #999fab 100%);
}

.service-shell--supplier .service-shell__report-bar--4 {
  left: 48px;
  height: 61px;
  background: linear-gradient(180deg, #e5e7ea 0%, #c9ccd3 100%);
}

@media (max-width: 900px) {
  .services-circle-card__icon-slot .service-shell--supplier {
    width: 136px;
    height: 136px;
    right: -20px;
    bottom: -20px;
  }
}

/* =========================================================
   RISK, CONTINUITY & SUPPLY RESILIENCE
   ========================================================= */

.services-circle-card__icon-slot .service-shell--risk {
  position: absolute;
  right: -40px;
  bottom: -65px;
  width: 170px;
  height: 170px;
  z-index: 3;
  pointer-events: none;
}

.service-shell--risk .service-shell__frame {
  position: absolute;
  inset: 0;
  border-radius: 26px 10px 26px 10px;
  background: transparent;
  box-shadow: none;
}

.service-shell--risk .service-shell__inner {
  position: absolute;
  inset: 14px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  grid-template-rows: 1fr 0.9fr;
  gap: 4px;
}

.service-shell--risk .service-shell__col {
  position: relative;
  background: linear-gradient(180deg, rgba(9, 18, 33, 0.18), rgba(9, 18, 33, 0.32));
  border: 1px solid rgba(224, 229, 236, 0.75);
  box-shadow:
    inset 0 0 0 1px rgba(10, 20, 35, 0.10),
    0 4px 8px -7px var(--shell-shadow);
}

.service-shell--risk .service-shell__col--flow {
  grid-row: 1 / span 2;
  border-radius: 8px 0 0 14px;
}

.service-shell--risk .service-shell__col--warning {
  border-radius: 0 12px 0 0;
}

.service-shell--risk .service-shell__col--resilience {
  border-radius: 0 0 12px 0;
}

.service-shell--risk .service-shell__warning,
.service-shell--risk .service-shell__flow,
.service-shell--risk .service-shell__resilience {
  position: absolute;
  display: block;
}

/* warning — VERSIONE GIALLA/NERA ATTIVA */
.service-shell--risk .service-shell__warning--triangle {
  left: 50%;
  top: 50%;
  width: 50px;
  height: 44px;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #ffd84a 0%, #e8b800 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    2px 4px 8px rgba(0,0,0,0.12);
}

/* warning — VERSIONE PALETTE COMMENTATA */
/*
.service-shell--risk .service-shell__warning--triangle {
  left: 50%;
  top: 50%;
  width: 50px;
  height: 44px;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #c0c3ca 0%, #8f95a1 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    2px 4px 8px rgba(0,0,0,0.12);
}
*/

.service-shell--risk .service-shell__warning--mark {
  left: 50%;
  top: 50%;
  width: 6px;
  height: 16px;
  transform: translate(-50%, -54%);
  border-radius: 2px;
  background: #141414;
}

.service-shell--risk .service-shell__warning--dot {
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, 12px);
  border-radius: 50%;
  background: #141414;
}

/* supply flow */
/* line verticale principale: lasciala pure come base */
.service-shell--risk .service-shell__flow--line {
  left: 34px;
  top: 14px;
  width: 4px;
  height: 102px;
  border-radius: 2px;
  background: linear-gradient(180deg, #8c96a4 0%, #c9ced5 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* rami separati */
.service-shell--risk .service-shell__flow--branch-right,
.service-shell--risk .service-shell__flow--branch-left-1,
.service-shell--risk .service-shell__flow--branch-left-2 {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8c96a4 0%, #c9ced5 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.service-shell--risk .service-shell__flow--branch-right {
  left: 36px;
  top: 30px;
  width: 20px;
  transform: rotate(50deg);
  transform-origin: left center;
}

.service-shell--risk .service-shell__flow--branch-left-1 {
  left: 14px;
  top: 71px;
  width: 20px;
  transform: rotate(-36deg);
  transform-origin: right center;
}

.service-shell--risk .service-shell__flow--branch-left-2 {
  left: -13px;
  top: 86px;
  width: 26px;
  transform: rotate(-90deg);
  transform-origin: right center;
}

/* nodi/blocchi separati e tutti controllabili */
.service-shell--risk .service-shell__flow--block-1,
.service-shell--risk .service-shell__flow--block-2,
.service-shell--risk .service-shell__flow--block-3,
.service-shell--risk .service-shell__flow--block-4,
.service-shell--risk .service-shell__flow--block-5,
.service-shell--risk .service-shell__flow--block-6 {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 2px 4px rgba(0,0,0,0.10);
}

/* asse centrale */
.service-shell--risk .service-shell__flow--block-1 {
  left: 28px;
  top: 10px;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
}

.service-shell--risk .service-shell__flow--block-2 {
  left: 28px;
  top: 62px;
  background: linear-gradient(180deg, #7f8795 0%, #59677d 100%);
}

.service-shell--risk .service-shell__flow--block-3 {
  left: 28px;
  top: 112px;
  background: linear-gradient(180deg, #c0c3ca 0%, #999fab 100%);
}

/* terminali rami: controllabili anche in left */
.service-shell--risk .service-shell__flow--block-4 {
  left: 44px;
  top: 44px;
  background: linear-gradient(180deg, #e5e7ea 0%, #c9ccd3 100%);
}

.service-shell--risk .service-shell__flow--block-5 {
  left: 5px;
  top: 82px;
  background: linear-gradient(180deg, #d7dce2 0%, #aab2bf 100%);
}

.service-shell--risk .service-shell__flow--block-6 {
  left: 5px;
  top: 112px;
  background: linear-gradient(180deg, #b4bcc8 0%, #8f99a8 100%);
}


/* resilience loop */
.service-shell--risk .service-shell__resilience--arc {
  left: 16px;
  top: 14px;
  width: 34px;
  height: 34px;
  border: 4px solid #8d95a3;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-28deg);
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0,0,0,0.24);
}

.service-shell--risk .service-shell__resilience--head {
  left: 40px;
  top: 16px;
  width: 0;
  height: 0;
  border-left: 8px solid #d7dce2;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: rotate(18deg);
}

.service-shell--risk .service-shell__resilience--node {
  left: 23px;
  top: 40px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 2px 4px rgba(0,0,0,0.10);
}

@media (max-width: 900px) {
  .services-circle-card__icon-slot .service-shell--risk {
    width: 136px;
    height: 136px;
    right: -20px;
    bottom: -20px;
  }
}

/* =========================================================
   PROCUREMENT ANALYTICS & PERFORMANCE VISIBILITY
   ========================================================= */

.services-circle-card__icon-slot .service-shell--analytics {
  position: absolute;
  right: -40px;
  bottom: -65px;
  width: 170px;
  height: 170px;
  z-index: 3;
  pointer-events: none;
}

.service-shell--analytics .service-shell__frame {
  position: absolute;
  inset: 0;
  border-radius: 26px 10px 26px 10px;
  background: transparent;
  box-shadow: none;
}

.service-shell--analytics .service-shell__inner {
  position: absolute;
  inset: 14px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  grid-template-rows: 1fr 0.9fr;
  gap: 4px;
}

.service-shell--analytics .service-shell__col {
  position: relative;
  background: linear-gradient(180deg, rgba(9, 18, 33, 0.18), rgba(9, 18, 33, 0.32));
  border: 1px solid rgba(224, 229, 236, 0.75);
  box-shadow:
    inset 0 0 0 1px rgba(10, 20, 35, 0.10),
    0 4px 8px -7px var(--shell-shadow);
}

.service-shell--analytics .service-shell__col--dashboard {
  grid-row: 1 / span 2;
  border-radius: 8px 0 0 14px;
}

.service-shell--analytics .service-shell__col--trend {
  border-radius: 0 12px 0 0;
}

.service-shell--analytics .service-shell__col--snapshot {
  border-radius: 0 0 12px 0;
}

.service-shell--analytics .service-shell__analytics-axis-x,
.service-shell--analytics .service-shell__analytics-axis-y,
.service-shell--analytics .service-shell__analytics-level,
.service-shell--analytics .service-shell__analytics-bar,
.service-shell--analytics .service-shell__analytics-kpi,
.service-shell--analytics .service-shell__analytics-trend,
.service-shell--analytics .service-shell__analytics-point,
.service-shell--analytics .service-shell__analytics-report,
.service-shell--analytics .service-shell__analytics-report-line,
.service-shell--analytics .service-shell__analytics-report-dot,
.service-shell--analytics .service-shell__analytics-report-chip {
  position: absolute;
  display: block;
}

/* dashboard */
.service-shell--analytics .service-shell__analytics-axis-x {
  left: 5px;
  right: 5px;
  bottom: 14px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7f8795 0%, #c4c8cf 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.service-shell--analytics .service-shell__analytics-axis-y {
  left: 5px;
  bottom: 14px;
  width: 3px;
  height: 58px;
  border-radius: 2px;
  background: linear-gradient(180deg, #7f8795 0%, #c4c8cf 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.service-shell--analytics .service-shell__analytics-level {
  left: 5px;
  width: 55px;
  height: 1px;
  background: rgba(214, 220, 229, 0.26);
}

.service-shell--analytics .service-shell__analytics-level--1 {
  bottom: 30px;
}

.service-shell--analytics .service-shell__analytics-level--2 {
  bottom: 46px;
}

.service-shell--analytics .service-shell__analytics-level--3 {
  bottom: 62px;
}

.service-shell--analytics .service-shell__analytics-bar {
  bottom: 17px;
  width: 12px;
  border-radius: 2px 2px 1px 1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 2px 4px rgba(0,0,0,0.10);
}

.service-shell--analytics .service-shell__analytics-bar--1 {
  left: 10px;
  height: 30px;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
}

.service-shell--analytics .service-shell__analytics-bar--2 {
  left: 28px;
  height: 44px;
  background: linear-gradient(180deg, #7f8795 0%, #59677d 100%);
}

.service-shell--analytics .service-shell__analytics-bar--3 {
  left: 46px;
  height: 56px;
  background: linear-gradient(180deg, #d9dce1 0%, #bec3cb 100%);
}

.service-shell--analytics .service-shell__analytics-kpi {
  top: 14px;
  height: 10px;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    1px 2px 4px rgba(0,0,0,0.08);
}

.service-shell--analytics .service-shell__analytics-kpi--1 {
  left: 5px;
  width: 24px;
  background: linear-gradient(180deg, #d9dce1 0%, #bec3cb 100%);
}

.service-shell--analytics .service-shell__analytics-kpi--2 {
  left: 41px;
  width: 18px;
  background: linear-gradient(180deg, #8f95a1 0%, #70798a 100%);
}

/* trend */
.service-shell--analytics .service-shell__analytics-trend {
  height: 4px;
  border-radius: 2px;
  transform-origin: left center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* chart 1 */
.service-shell--analytics .service-shell__analytics-trend--line-1 {
  top: 41px;
  left: 12px;
  width: 14px;
  background: linear-gradient(90deg, #d8dde3 0%, #a8b0bc 100%);
  transform: rotate(20deg);
}

.service-shell--analytics .service-shell__analytics-trend--line-2 {
  top: 47px;
  left: 27px;
  width: 16px;
  background: linear-gradient(90deg, #d8dde3 0%, #a8b0bc 100%);
  transform: rotate(-18deg);
}

.service-shell--analytics .service-shell__analytics-trend--line-3 {
  top: 41px;
  left: 40px;
  width: 18px;
  background: linear-gradient(90deg, #d8dde3 0%, #a8b0bc 100%);
  transform: rotate(16deg);
}

/* chart 2 */
.service-shell--analytics .service-shell__analytics-trend--line-4 {
  top: 27px;
  left: 4px;
  width: 20px;
  background: linear-gradient(90deg, #7c8797 0%, #b6bdc8 100%);
  transform: rotate(-18deg);
}

.service-shell--analytics .service-shell__analytics-trend--line-5 {
  top: 21px;
  left: 23px;
  width: 16px;
  background: linear-gradient(90deg, #7c8797 0%, #b6bdc8 100%);
  transform: rotate(20deg);
}

.service-shell--analytics .service-shell__analytics-trend--line-6 {
  top: 28px;
  left: 37px;
  width: 29px;
  background: linear-gradient(90deg, #7c8797 0%, #b6bdc8 100%);
  transform: rotate(-16deg);
}

.service-shell--analytics .service-shell__analytics-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 2px 4px rgba(0,0,0,0.10);
}

/* points chart 1 */
.service-shell--analytics .service-shell__analytics-point--1 {
  left: 10px;
  top: 40px;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
}

.service-shell--analytics .service-shell__analytics-point--2 {
  left: 23px;
  top: 45px;
  background: linear-gradient(180deg, #7f8795 0%, #59677d 100%);
}

.service-shell--analytics .service-shell__analytics-point--3 {
  left: 39px;
  top: 40px;
  background: linear-gradient(180deg, #c0c3ca 0%, #999fab 100%);
}

.service-shell--analytics .service-shell__analytics-point--4 {
  left: 56px;
  top: 45px;
  background: linear-gradient(180deg, #e5e7ea 0%, #c9ccd3 100%);
}

.service-shell--analytics .service-shell__analytics-point--5 {
  left: 72px;
  top: 29px;
  background: linear-gradient(180deg, #d7dce2 0%, #aab2bf 100%);
  display: none;
}

/* points chart 2 */
.service-shell--analytics .service-shell__analytics-point--6 {
  left: 4px;
  top: 24px;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
}

.service-shell--analytics .service-shell__analytics-point--7 {
  left: 20px;
  top: 19px;
  background: linear-gradient(180deg, #7f8795 0%, #59677d 100%);
}

.service-shell--analytics .service-shell__analytics-point--8 {
  left: 36px;
  top: 25px;
  background: linear-gradient(180deg, #c0c3ca 0%, #999fab 100%);
}

.service-shell--analytics .service-shell__analytics-point--9 {
  left: 48px;
  top: 22px;
  background: linear-gradient(180deg, #e5e7ea 0%, #c9ccd3 100%);
}

.service-shell--analytics .service-shell__analytics-point--10 {
  left: 61px;
  top: 18px;
  background: linear-gradient(180deg, #d7dce2 0%, #aab2bf 100%);
}

/* snapshot */
.service-shell--analytics .service-shell__analytics-report {
  width: 26px;
  height: 34px;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 2px 4px rgba(0,0,0,0.08);
}

.service-shell--analytics .service-shell__analytics-report--1 {
  left: 5px;
  top: 12px;
  background: linear-gradient(180deg, #d9dce1 0%, #bec3cb 100%);
}

.service-shell--analytics .service-shell__analytics-report--2 {
  left: 38px;
  top: 12px;
  width: 26px;
  background: linear-gradient(180deg, #e5e7ea 0%, #c9ccd3 100%);
}

.service-shell--analytics .service-shell__analytics-report-line {
  height: 2px;
  border-radius: 2px;
  background: rgba(95, 108, 126, 0.90);
}

/* report 1 lines */
.service-shell--analytics .service-shell__analytics-report-line--1 {
  left: 14px;
  top: 18px;
  width: 14px;
}

.service-shell--analytics .service-shell__analytics-report-line--2 {
  left: 14px;
  top: 24px;
  width: 14px;
}

.service-shell--analytics .service-shell__analytics-report-line--3 {
  left: 14px;
  top: 30px;
  width: 14px;
}

.service-shell--analytics .service-shell__analytics-report-dot--1 {
  left: 8px;
  top: 36px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    1px 2px 4px rgba(0,0,0,0.08);
}

/* report 2 chip + lines */
.service-shell--analytics .service-shell__analytics-report-chip--1 {
  left: 41px;
  top: 18px;
  width: 10px;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(180deg, #7f8795 0%, #59677d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    1px 2px 4px rgba(0,0,0,0.08);
}

.service-shell--analytics .service-shell__analytics-report-line--4 {
  left: 41px;
  top: 28px;
  width: 19px;
}

.service-shell--analytics .service-shell__analytics-report-line--5 {
  left: 41px;
  top: 34px;
  width: 17px;
}

@media (max-width: 900px) {
  .services-circle-card__icon-slot .service-shell--analytics {
    width: 136px;
    height: 136px;
    right: -20px;
    bottom: -20px;
  }
}

/* =========================================================
   PROCUREMENT OPERATIONS & PROCESS ENABLEMENT
   ========================================================= */

.services-circle-card__icon-slot .service-shell--operations {
  position: absolute;
  right: -40px;
  bottom: -70px;
  width: 170px;
  height: 170px;
  z-index: 3;
  pointer-events: none;
}

.service-shell--operations .service-shell__frame {
  position: absolute;
  inset: 0;
  border-radius: 26px 10px 26px 10px;
  background: transparent;
  box-shadow: none;
}

.service-shell--operations .service-shell__inner {
  position: absolute;
  inset: 14px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  grid-template-rows: 1fr 0.9fr;
  gap: 4px;
}

.service-shell--operations .service-shell__col {
  position: relative;
  background: linear-gradient(180deg, rgba(9, 18, 33, 0.18), rgba(9, 18, 33, 0.32));
  border: 1px solid rgba(224, 229, 236, 0.75);
  box-shadow:
    inset 0 0 0 1px rgba(10, 20, 35, 0.10),
    0 4px 8px -7px var(--shell-shadow);
}

.service-shell--operations .service-shell__col--lanes {
  grid-row: 1 / span 2;
  border-radius: 8px 0 0 14px;
}

.service-shell--operations .service-shell__col--routing {
  border-radius: 0 12px 0 0;
}

.service-shell--operations .service-shell__col--modules {
  border-radius: 0 0 12px 0;
}

.service-shell--operations .service-shell__ops-lane,
.service-shell--operations .service-shell__ops-rail,
.service-shell--operations .service-shell__ops-node,
.service-shell--operations .service-shell__ops-route,
.service-shell--operations .service-shell__ops-diamond,
.service-shell--operations .service-shell__ops-module,
.service-shell--operations .service-shell__ops-module-line {
  position: absolute;
  display: block;
}

/* lanes */
.service-shell--operations .service-shell__ops-lane {
  height: 12px;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 3px 6px rgba(0,0,0,0.10);
}

.service-shell--operations .service-shell__ops-lane--1 {
  left: 12px;
  top: 95px;
  width: 44px;
  background: linear-gradient(180deg, #d9dce1 0%, #bec3cb 100%);
  z-index: 1;
}

.service-shell--operations .service-shell__ops-lane--2 {
  left: 14px;
  top: 42px;
  width: 38px;
  background: linear-gradient(180deg, #7f8795 0%, #59677d 100%);
  z-index: 1;
}

.service-shell--operations .service-shell__ops-lane--3 {
  left: 17px;
  top: 18px;
  width: 32px;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
  z-index: 1;
}

.service-shell--operations .service-shell__ops-rail {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7f8795 0%, #c4c8cf 100%);
  transform-origin: left center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.service-shell--operations .service-shell__ops-rail--1 {
  left: 33px;
  top: 28px;
  width: 20px;
  transform: rotate(90deg);
}

.service-shell--operations .service-shell__ops-rail--2 {
  left: 22px;
  top: 50px;
  width: 50px;
  transform: rotate(90deg);
}

.service-shell--operations .service-shell__ops-rail--3 {
  left: 46px;
  top: 50px;
  width: 20px;
  transform: rotate(90deg);
}

.service-shell--operations .service-shell__ops-node {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    1px 2px 4px rgba(0,0,0,0.08);
}

.service-shell--operations .service-shell__ops-node--1 {
  left: 62px;
  top: 34px;
  background: linear-gradient(180deg, #c0c3ca 0%, #999fab 100%);
  display: none;
}

.service-shell--operations .service-shell__ops-node--2 {
  left: 41px;
  top: 68px;
  background: linear-gradient(180deg, #e5e7ea 0%, #c9ccd3 100%);
  transform: rotate(45deg);
}

/* routing */
.service-shell--operations .service-shell__ops-check {
  position: absolute;
  display: block;
}

.service-shell--operations .service-shell__ops-check--sheet {
  left: 50%;
  top: 12px;
  width: 56px;
  height: 42px;
  transform: translateX(-50%) skewX(10deg);
  border-radius: 3px;
  background: linear-gradient(180deg, #e5e7ea 0%, #c9ccd3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    1px 3px 6px rgba(0,0,0,0.10);
}

.service-shell--operations .service-shell__ops-check--box-1,
.service-shell--operations .service-shell__ops-check--box-2,
.service-shell--operations .service-shell__ops-check--box-3 {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    1px 2px 4px rgba(0,0,0,0.08);
  transform: skewX(10deg);
}

.service-shell--operations .service-shell__ops-check--box-1 {
  left: 18px;
  top: 20px;
}

.service-shell--operations .service-shell__ops-check--box-2 {
  left: 18px;
  top: 30px;
}

.service-shell--operations .service-shell__ops-check--box-3 {
  left: 18px;
  top: 40px;
}

.service-shell--operations .service-shell__ops-check--line-1,
.service-shell--operations .service-shell__ops-check--line-2,
.service-shell--operations .service-shell__ops-check--line-3 {
  height: 3px;
  border-radius: 2px;
  background: rgba(110, 121, 137, 0.92);
  transform: skewX(10deg);
}

.service-shell--operations .service-shell__ops-check--line-1 {
  left: 28px;
  top: 21px;
  width: 22px;
}

.service-shell--operations .service-shell__ops-check--line-2 {
  left: 28px;
  top: 31px;
  width: 18px;
}

.service-shell--operations .service-shell__ops-check--line-3 {
  left: 28px;
  top: 41px;
  width: 24px;
}

/* modules */
.service-shell--operations .service-shell__ops-module {
  height: 12px;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    1px 3px 6px rgba(0,0,0,0.10);
}

.service-shell--operations .service-shell__ops-module--1 {
  left: 12px;
  top: 14px;
  width: 16px;
  background: linear-gradient(180deg, #66738a 0%, #4b5970 100%);
}

.service-shell--operations .service-shell__ops-module--2 {
  left: 32px;
  top: 14px;
  width: 26px;
  background: linear-gradient(180deg, #7f8795 0%, #59677d 100%);
}

.service-shell--operations .service-shell__ops-module--3 {
  left: 18px;
  top: 34px;
  width: 40px;
  background: linear-gradient(180deg, #e5e7ea 0%, #c9ccd3 100%);
}

.service-shell--operations .service-shell__ops-module-line {
  height: 3px;
  border-radius: 2px;
  background: rgba(120, 132, 148, 0.88);
}

.service-shell--operations .service-shell__ops-module-line--1 {
  left: 14px;
  top: 52px;
  width: 14px;
}

.service-shell--operations .service-shell__ops-module-line--2 {
  left: 32px;
  top: 52px;
  width: 14px;
}

.service-shell--operations .service-shell__ops-module-line--3 {
  left: 50px;
  top: 52px;
  width: 8px;
}

@media (max-width: 900px) {
  .services-circle-card__icon-slot .service-shell--operations {
    width: 136px;
    height: 136px;
    right: -20px;
    bottom: -20px;
  }
}


/* =========================================================
   MOBILE DETAIL CARD — ICON SHELLS
   Reuse desktop shells, shrink uniformly inside flow-detail-card
   ========================================================= */

@media (max-width: 900px) {
  .flow-detail-card__icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 96px;
    height: 96px;
    overflow: visible;
    display: block;
  }

  .flow-detail-card__icon .service-shell {
    position: absolute;
    left: 40%;
    top: 40%;
    width: 170px;
    height: 170px;
    z-index: 1;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.75) !important;
    transform-origin: center center;
    filter: drop-shadow(0 8px 14px rgba(8, 14, 24, 0.14));
  }

  .flow-detail-card__icon .service-shell__frame {
    position: absolute;
    inset: 0;
    border-radius: 26px 10px 26px 10px;
    background: transparent;
    box-shadow: none;
  }
}

/* Focused Entry Point — pilot icon
   First test: Check Entry Point
   Purpose: focused package / bounded entry point
*/

.engagement-step.card,
.engagement-step-mobile {
  position: relative;
}

.entry-point-icon {
  width: 72px;
  height: 72px;
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  margin: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
}

.entry-point-icon__frame {
  width: 80px;
  height: 80px;
  position: relative;
  display: block;
  border-radius: 20px;
  transform: rotate(-8deg);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(221,229,237,0.72)),
    linear-gradient(135deg, rgba(36,54,76,0.16), rgba(36,54,76,0.04));
  box-shadow:
    inset 0 0 0 1px rgba(40,58,80,0.20),
    inset 0 -18px 28px rgba(36,54,76,0.08),
    0 18px 38px rgba(18,28,40,0.12);
  overflow: hidden;
}

.entry-point-icon__frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 15px;
  border: 1px solid rgba(44,70,104,0.30);
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(44,70,104,0.10) 45% 46%, transparent 47% 100%),
    radial-gradient(circle at 72% 28%, rgba(44,70,104,0.18) 0 2px, transparent 2.8px);
}

.entry-point-icon__frame::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  left: 17px;
  top: 15px;
  border-radius: 50%;
  border: 2px solid rgba(36,58,86,0.58);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,0.36),
    0 0 0 1px rgba(255,255,255,0.44);
}

.entry-point-icon__mark {
  position: absolute;
  width: 24px;
  height: 2px;
  left: 40px;
  top: 43px;
  border-radius: 999px;
  transform: rotate(43deg);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(36,58,86,0.78), rgba(36,58,86,0.34));
}

.entry-point-icon__mark::before,
.entry-point-icon__mark::after {
  content: "";
  position: absolute;
  left: -31px;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: rgba(36,58,86,0.36);
  transform: rotate(-43deg);
}

.entry-point-icon__mark::before {
  top: -13px;
}

.entry-point-icon__mark::after {
  top: -7px;
  width: 14px;
  opacity: 0.75;
}

/* keep card text clear from the icon */
.engagement-step.card {
  padding-right: 6.25rem !important;
}

.engagement-step-mobile {
  padding-right: 5.75rem !important;
}

/* active card: slightly stronger, still controlled */
.engagement-step.is-active .entry-point-icon__frame,
.engagement-step-mobile.is-active .entry-point-icon__frame {
  box-shadow:
    inset 0 0 0 1px rgba(40,58,80,0.30),
    inset 0 -18px 28px rgba(36,54,76,0.12),
    0 20px 42px rgba(18,28,40,0.16);
}

.engagement-step.is-active .entry-point-icon__frame::after,
.engagement-step-mobile.is-active .entry-point-icon__frame::after {
  border-color: rgba(30,54,84,0.72);
}

/* mobile position only — same icon family, no redesign */
.engagement-step-mobile .entry-point-icon {
  top: 1rem;
  right: 1rem;
}

/* Focused Entry Point — Visibility variant
   Same package frame, internal mark = minimum dataset / visibility grid
*/

.entry-point-icon--visibility .entry-point-icon__frame::after {
  width: 42px;
  height: 34px;
  left: 19px;
  top: 22px;
  border-radius: 9px;
  border: 1px solid rgba(36,58,86,0.48);
  background:
    linear-gradient(90deg, transparent 32%, rgba(36,58,86,0.20) 32.5% 33.5%, transparent 34% 66%, rgba(36,58,86,0.18) 66.5% 67.5%, transparent 68%),
    linear-gradient(0deg, transparent 31%, rgba(36,58,86,0.18) 31.5% 32.5%, transparent 33% 64%, rgba(36,58,86,0.16) 64.5% 65.5%, transparent 66%),
    linear-gradient(135deg, rgba(255,255,255,0.38), rgba(44,70,104,0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.38),
    0 0 0 1px rgba(255,255,255,0.34);
}

.entry-point-icon--visibility .entry-point-icon__mark {
  width: 8px;
  height: 8px;
  left: 28px;
  top: 30px;
  border-radius: 2px;
  transform: none;
  background: rgba(36,58,86,0.58);
  box-shadow:
    13px 0 0 rgba(36,58,86,0.38),
    26px 0 0 rgba(36,58,86,0.30),
    0 10px 0 rgba(36,58,86,0.34),
    13px 10px 0 rgba(36,58,86,0.50),
    26px 10px 0 rgba(36,58,86,0.28),
    0 20px 0 rgba(36,58,86,0.22),
    13px 20px 0 rgba(36,58,86,0.32),
    26px 20px 0 rgba(36,58,86,0.46);
}

.entry-point-icon--visibility .entry-point-icon__mark::before {
  width: 34px;
  height: 2px;
  left: -2px;
  top: -8px;
  border-radius: 999px;
  transform: none;
  background: linear-gradient(90deg, rgba(36,58,86,0.60), rgba(36,58,86,0.16));
}

.entry-point-icon--visibility .entry-point-icon__mark::after {
  width: 18px;
  height: 2px;
  left: 14px;
  top: 32px;
  border-radius: 999px;
  transform: none;
  background: linear-gradient(90deg, rgba(36,58,86,0.24), rgba(36,58,86,0.52));
  opacity: 1;
}

/* Focused Entry Point — Execution variant
   Same package frame, internal mark = controlled execution path / RFQ-to-award flow
*/

.entry-point-icon--execution .entry-point-icon__frame::after {
  width: 48px;
  height: 34px;
  left: 17px;
  top: 23px;
  border-radius: 10px;
  border: 1px solid rgba(36,58,86,0.34);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.36), rgba(44,70,104,0.07));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.34),
    0 0 0 1px rgba(255,255,255,0.22);
}

.entry-point-icon--execution .entry-point-icon__mark {
  width: 11px;
  height: 11px;
  left: 24px;
  top: 33px;
  border-radius: 3px;
  transform: none;
  background: rgba(36,58,86,0.58);
  box-shadow:
    17px 0 0 rgba(36,58,86,0.42),
    34px 0 0 rgba(36,58,86,0.30);
}

.entry-point-icon--execution .entry-point-icon__mark::before {
  content: "";
  position: absolute;
  width: 37px;
  height: 2px;
  left: 8px;
  top: 4px;
  border-radius: 999px;
  transform: none;
  background:
    linear-gradient(90deg,
      transparent 0 10%,
      rgba(36,58,86,0.50) 10% 42%,
      transparent 42% 56%,
      rgba(36,58,86,0.42) 56% 88%,
      transparent 88% 100%);
}

.entry-point-icon--execution .entry-point-icon__mark::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  left: 38px;
  top: -1px;
  border-radius: 2px;
  transform: rotate(45deg);
  background:
    linear-gradient(135deg, rgba(36,58,86,0.58), rgba(36,58,86,0.26));
  box-shadow:
    -18px 17px 0 -3px rgba(36,58,86,0.22);
  opacity: 1;
}

/* small execution baseline / rollout line */
.entry-point-icon--execution .entry-point-icon__frame::before {
  inset: 4px;
  border-radius: 15px;
  border: 1px solid rgba(44,70,104,0.26);
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(44,70,104,0.09) 45% 46%, transparent 47% 100%),
    linear-gradient(90deg, transparent 19%, rgba(36,58,86,0.20) 19.5% 72%, transparent 72.5%),
    radial-gradient(circle at 78% 70%, rgba(36,58,86,0.20) 0 2px, transparent 2.8px);
}

/* Focused Entry Point — Governance variant
   Same package frame, internal mark = cadence loop / recurring control rhythm
*/

.entry-point-icon--governance .entry-point-icon__frame::after {
  width: 42px;
  height: 42px;
  left: 19px;
  top: 19px;
  border-radius: 50%;
  border: 2px solid rgba(36,58,86,0.42);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.42) 0 32%, transparent 33%),
    conic-gradient(
      from 25deg,
      rgba(36,58,86,0.12) 0 18%,
      transparent 18% 30%,
      rgba(36,58,86,0.28) 30% 52%,
      transparent 52% 66%,
      rgba(36,58,86,0.20) 66% 86%,
      transparent 86% 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.36),
    0 0 0 1px rgba(255,255,255,0.24);
}

.entry-point-icon--governance .entry-point-icon__mark {
  width: 6px;
  height: 6px;
  left: 37px;
  top: 37px;
  border-radius: 50%;
  transform: none;
  background: rgba(36,58,86,0.62);
  box-shadow:
    0 -18px 0 rgba(36,58,86,0.34),
    16px -8px 0 rgba(36,58,86,0.42),
    13px 12px 0 rgba(36,58,86,0.30),
    -13px 12px 0 rgba(36,58,86,0.38),
    -16px -8px 0 rgba(36,58,86,0.26);
}

.entry-point-icon--governance .entry-point-icon__mark::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  left: -11px;
  top: -11px;
  border-radius: 50%;
  border: 1px solid rgba(36,58,86,0.32);
  transform: none;
  background: transparent;
}

.entry-point-icon--governance .entry-point-icon__mark::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 2px;
  left: 12px;
  top: -13px;
  border-radius: 999px;
  transform: rotate(38deg);
  background: linear-gradient(90deg, rgba(36,58,86,0.52), rgba(36,58,86,0.18));
  opacity: 1;
}

/* inner frame variation: light control grid, not data grid */
.entry-point-icon--governance .entry-point-icon__frame::before {
  inset: 4px;
  border-radius: 15px;
  border: 1px solid rgba(44,70,104,0.26);
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(44,70,104,0.08) 45% 46%, transparent 47% 100%),
    radial-gradient(circle at 26% 74%, rgba(36,58,86,0.16) 0 2px, transparent 2.8px),
    radial-gradient(circle at 74% 26%, rgba(36,58,86,0.16) 0 2px, transparent 2.8px);
}

/* =========================================================
   FOCUSED ENTRY POINT — SINGLE PAGE INTRO ICON
   Isolated. Does not affect service icons or card icons.
   ========================================================= */

.fe-single-intro-icon {
  position: relative;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 3;
}

.fe-single-intro-icon .entry-point-icon {
  position: absolute;
  top: 0.75rem;
  left: clamp(520px, 58vw, 880px);
  right: auto;
  bottom: auto;
  width: 72px;
  height: 72px;
  margin: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
  transform: translate(0, 0) scale(1.68);
  transform-origin: center center;
}

.fe-single-intro-icon .entry-point-icon__frame {
  width: 80px;
  height: 80px;
}

.fe-single-intro-icon .entry-point-icon__mark {
  position: absolute;
}

/* Execution icon — align internal flow with tilted frame on single FEP page */
.fe-single-intro-icon .entry-point-icon--execution .entry-point-icon__mark {
  transform: rotate(-8deg);
  top: 36px;
  transform-origin: center center;
}

@media (max-width: 900px) {
  .fe-single-intro-icon .entry-point-icon {
    top: -0.75rem;
    left: auto;
    right: 1.25rem;
    transform: translate(0, 0) scale(0.96);
  }
}

@media (max-width: 640px) {
  .fe-single-intro-icon {
    width: 72px;
    height: 72px;
    margin-top: 1.5rem;
  }

  .fe-single-intro-icon .entry-point-icon {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 72px;
    height: 72px;
    transform: translate(0, 0) scale(0.86);
    transform-origin: left top;
  }
}