:root {
  --erp-violet: #7138ef;
  --erp-violet-deep: #4d22b8;
  --erp-cyan: #00a8b8;
  --erp-orange: #f47a2a;
  --erp-ink: #071a2f;
  --erp-cloud: #f2f6fa;
  --erp-line: #d8e2ec;
  --erp-accent: var(--erp-violet);
  --erp-accent-soft: rgba(113, 56, 239, 0.1);
}

.accent-cyan { --erp-accent: var(--erp-cyan); --erp-accent-soft: rgba(0, 168, 184, 0.1); }
.accent-orange { --erp-accent: var(--erp-orange); --erp-accent-soft: rgba(244, 122, 42, 0.1); }
.accent-violet { --erp-accent: var(--erp-violet); --erp-accent-soft: rgba(113, 56, 239, 0.1); }

.erp-hub-hero,
.erp-detail-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 83% 22%, rgba(0, 168, 216, 0.17), transparent 24rem),
    radial-gradient(circle at 15% 88%, rgba(113, 56, 239, 0.2), transparent 25rem),
    linear-gradient(125deg, #061526, #092b4c 63%, #07365e);
}

.erp-hub-hero { padding: 112px 0 94px; }
.erp-hub-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 90px; align-items: end; position: relative; z-index: 2; }
.erp-hub-hero h1,
.erp-detail-hero h1 { color: #fff; margin: 0; letter-spacing: -.04em; }
.erp-hub-hero h1 { max-width: 900px; font-size: clamp(3.3rem, 6.2vw, 6.6rem); line-height: .98; }
.erp-hub-lead { border-left: 1px solid rgba(255,255,255,.25); padding-left: 34px; }
.erp-hub-lead p { color: #c4d4e3; font-size: 1.08rem; line-height: 1.8; margin: 0 0 28px; }
.erp-orbit { position: absolute; width: 520px; height: 520px; right: -160px; top: -180px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.erp-orbit:before,
.erp-orbit:after { content: ""; position: absolute; inset: 62px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; }
.erp-orbit:after { inset: 138px; }
.erp-orbit span { position: absolute; width: 9px; height: 9px; background: var(--erp-cyan); border-radius: 50%; box-shadow: 0 0 22px rgba(0,168,216,.8); }
.erp-orbit span:nth-child(1) { left: 29px; top: 250px; }
.erp-orbit span:nth-child(2) { left: 222px; bottom: 54px; background: var(--erp-violet); }
.erp-orbit span:nth-child(3) { right: 73px; top: 86px; background: var(--erp-orange); }

.erp-hub-intro { padding: 92px 0 62px; background: #fff; }
.erp-intro-grid { display: grid; grid-template-columns: .45fr 1.05fr 1fr; gap: 60px; align-items: start; }
.erp-intro-grid h2 { margin: 0; font-size: clamp(2.25rem, 3.8vw, 4rem); }
.erp-intro-grid > p:last-child { margin: 8px 0 0; font-size: 1.04rem; line-height: 1.8; }

.erp-service-directory { background: #fff; padding: 0 0 110px; }
.erp-directory-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--erp-line); border-left: 1px solid var(--erp-line); }
.erp-directory-card { --erp-accent: var(--erp-violet); position: relative; display: flex; flex-direction: column; min-height: 430px; padding: 36px 38px; border-right: 1px solid var(--erp-line); border-bottom: 1px solid var(--erp-line); color: var(--erp-ink); overflow: hidden; transition: background .2s ease, transform .2s ease; }
.erp-directory-card:before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--erp-accent); transform: scaleY(0); transform-origin: bottom; transition: transform .25s ease; }
.erp-directory-card:hover { background: var(--erp-cloud); transform: translateY(-2px); }
.erp-directory-card:hover:before { transform: scaleY(1); }
.erp-card-top { display: flex; justify-content: space-between; color: #74879a; font-size: .73rem; font-weight: 800; letter-spacing: .12em; }
.erp-card-arrow { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--erp-line); border-radius: 50%; color: var(--erp-accent); font-size: 1rem; transition: color .2s ease, background .2s ease; }
.erp-directory-card:hover .erp-card-arrow { color: #fff; background: var(--erp-accent); border-color: var(--erp-accent); }
.erp-card-kicker { margin: 62px 0 8px; text-transform: uppercase; letter-spacing: .13em; color: var(--erp-accent); font-size: .68rem; font-weight: 800; }
.erp-directory-card h2 { margin: 0 0 18px; font-size: clamp(2rem, 3vw, 3rem); }
.erp-directory-card > p:not(.erp-card-kicker) { max-width: 600px; line-height: 1.75; }
.erp-card-link { margin-top: auto; color: var(--erp-accent); font-size: .82rem; font-weight: 800; }

.erp-platform-band { padding: 100px 0; background: var(--erp-ink); }
.erp-platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.erp-platform-grid h2 { color: #fff; margin: 0; font-size: clamp(2.4rem, 4.2vw, 4.5rem); }
.erp-platform-points p { display: grid; grid-template-columns: 52px 1fr; gap: 18px; margin: 0; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.14); color: #c2d0dd; line-height: 1.6; }
.erp-platform-points p:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.erp-platform-points span { color: #b78cff; font-size: .7rem; font-weight: 800; }

.erp-detail-hero { padding: 104px 0 0; }
.erp-detail-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 80px; align-items: center; }
.erp-detail-hero h1 { max-width: 900px; font-size: clamp(3.1rem, 5.6vw, 6rem); line-height: 1.01; }
.erp-detail-summary { max-width: 760px; margin: 28px 0 0; color: #c5d4e1; font-size: 1.13rem; line-height: 1.75; }
.erp-detail-hero .hero-actions { margin-top: 35px; display: flex; gap: 24px; align-items: center; }
.erp-back-link { color: #d7e3ec; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 3px; font-size: .84rem; font-weight: 700; }
.erp-detail-grid-bg { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }

.erp-signal-graphic { position: relative; width: min(360px, 100%); aspect-ratio: 1; margin-left: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.erp-signal-graphic:before,
.erp-signal-graphic:after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.erp-signal-graphic:before { inset: 48px; }
.erp-signal-graphic:after { inset: 94px; }
.signal-core { position: absolute; inset: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 108px; height: 108px; border-radius: 26px; background: linear-gradient(135deg, var(--erp-accent), #0c75c8); box-shadow: 0 24px 55px rgba(0,0,0,.28); }
.signal-core span { color: #fff; font-weight: 850; letter-spacing: .13em; }
.signal-node { position: absolute; width: 13px; height: 13px; border: 3px solid rgba(255,255,255,.7); background: var(--erp-accent); border-radius: 50%; box-shadow: 0 0 20px var(--erp-accent); }
.node-one { left: 19px; top: 47%; }.node-two { top: 24px; left: 53%; }.node-three { right: 27px; top: 36%; }.node-four { right: 88px; bottom: 25px; }

.erp-stats { position: relative; z-index: 2; margin-top: 82px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.16); }
.erp-stats > div { min-height: 105px; padding: 24px 28px; border-right: 1px solid rgba(255,255,255,.16); }
.erp-stats > div:first-child { border-left: 1px solid rgba(255,255,255,.16); }
.erp-stats strong,
.erp-stats span { display: block; }
.erp-stats strong { color: #fff; font-size: 1.22rem; }
.erp-stats span { margin-top: 6px; color: #93a9bc; text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; font-weight: 800; }

.erp-opening-section { padding: 100px 0; background: #fff; }
.erp-opening-grid { display: grid; grid-template-columns: .38fr 1.05fr 1fr; gap: 60px; align-items: start; }
.erp-opening-grid h2 { margin: 0; font-size: clamp(2.3rem, 4vw, 4.2rem); }
.erp-opening-grid > p:last-child { margin: 8px 0 0; font-size: 1.04rem; line-height: 1.85; }

.erp-journey-section { padding: 100px 0 110px; background: var(--erp-cloud); border-top: 1px solid var(--erp-line); border-bottom: 1px solid var(--erp-line); }
.erp-section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; margin-bottom: 58px; }
.erp-section-heading h2 { margin: 0; font-size: clamp(2.3rem, 4vw, 4.1rem); }
.erp-section-heading > p { margin: 0 0 6px; line-height: 1.75; }
.erp-journey { position: relative; display: grid; grid-template-columns: repeat(var(--step-count), minmax(145px,1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.erp-journey:before { content: ""; position: absolute; left: 4%; right: 4%; top: 27px; height: 2px; background: linear-gradient(90deg, var(--erp-violet), var(--erp-cyan), var(--erp-orange)); }
.erp-journey li { position: relative; z-index: 1; padding: 0 14px; outline: none; }
.journey-number { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 24px; border: 2px solid #fff; border-radius: 18px; color: #fff; background: var(--erp-ink); box-shadow: 0 0 0 1px var(--erp-line), 0 12px 28px rgba(7,26,47,.12); font-size: .7rem; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.erp-journey li:hover .journey-number,
.erp-journey li:focus .journey-number,
.erp-journey li.is-active .journey-number { transform: translateY(-5px); background: var(--erp-accent); }
.erp-journey h3 { margin: 0 0 10px; font-size: 1.1rem; }
.erp-journey p { margin: 0; font-size: .82rem; line-height: 1.62; color: #5d6e7e; }

.erp-pillars-section { padding: 110px 0; background: #fff; }
.erp-pillar-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--erp-line); border-left: 1px solid var(--erp-line); }
.service-fusion-managed-services .erp-pillar-grid { grid-template-columns: repeat(2,1fr); }
.erp-pillar-grid article { position: relative; min-height: 430px; padding: 36px; border-right: 1px solid var(--erp-line); border-bottom: 1px solid var(--erp-line); overflow: hidden; }
.pillar-icon { position: relative; width: 68px; height: 68px; border: 1px solid var(--erp-line); border-radius: 20px; background: var(--erp-accent-soft); }
.pillar-icon span { position: absolute; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--erp-accent); }
.pillar-icon span:nth-child(1) { left: 14px; top: 29px; }.pillar-icon span:nth-child(2) { left: 30px; top: 14px; }.pillar-icon span:nth-child(3) { right: 13px; bottom: 14px; }
.pillar-icon:before,
.pillar-icon:after { content: ""; position: absolute; height: 1px; background: var(--erp-accent); transform-origin: left; }
.pillar-icon:before { left: 20px; top: 31px; width: 23px; transform: rotate(-42deg); }.pillar-icon:after { left: 35px; top: 20px; width: 25px; transform: rotate(47deg); }
.pillar-tag { margin: 60px 0 9px; color: var(--erp-accent); text-transform: uppercase; letter-spacing: .12em; font-size: .65rem; font-weight: 800; }
.erp-pillar-grid h3 { margin: 0 0 16px; font-size: 1.7rem; }
.erp-pillar-grid article > p:last-of-type { line-height: 1.72; }
.pillar-index { position: absolute; right: 25px; bottom: 21px; color: #c7d1db; font-size: .68rem; font-weight: 800; }

.erp-modules-section { padding: 110px 0; background: var(--erp-cloud); }
.erp-modules-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; align-items: start; }
.erp-modules-intro { position: sticky; top: 150px; }
.erp-modules-intro h2 { margin: 0 0 25px; font-size: clamp(2.4rem, 4vw, 4.2rem); }
.erp-modules-intro > p:last-child { line-height: 1.8; }
.erp-module-grid { display: grid; grid-template-columns: repeat(2, 1fr); background: #fff; border-top: 1px solid var(--erp-line); border-left: 1px solid var(--erp-line); }
.erp-module-grid article { min-height: 250px; padding: 30px; border-right: 1px solid var(--erp-line); border-bottom: 1px solid var(--erp-line); }
.erp-module-grid article > span { color: var(--erp-accent); font-size: .67rem; font-weight: 800; }
.erp-module-grid h3 { margin: 68px 0 11px; font-size: 1.42rem; }
.erp-module-grid p { margin: 0; font-size: .88rem; line-height: 1.68; }

.erp-outcomes-section { padding: 110px 0; color: #fff; background: var(--erp-ink); }
.erp-outcomes-section .erp-section-heading h2 { color: #fff; }
.erp-outcomes-section .erp-section-heading > p { color: #9cb0c1; }
.erp-outcome-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.17); border-left: 1px solid rgba(255,255,255,.17); }
.erp-outcome-grid article { min-height: 280px; padding: 29px; border-right: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); }
.erp-outcome-grid span { color: #b889ff; font-size: .68rem; font-weight: 800; }
.erp-outcome-grid h3 { margin: 67px 0 13px; color: #fff; font-size: 1.35rem; }
.erp-outcome-grid p { color: #aabccb; margin: 0; font-size: .87rem; line-height: 1.65; }
.erp-governance { display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; margin-top: 42px; padding: 28px 30px; border: 1px solid rgba(159,102,255,.6); border-radius: 14px; background: rgba(113,56,239,.09); }
.governance-check { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--erp-accent); color: #fff; font-weight: 900; }
.erp-governance p { margin: 0 0 6px; color: #b889ff; text-transform: uppercase; letter-spacing: .11em; font-size: .66rem; font-weight: 800; }
.erp-governance strong { color: #e2eaf1; font-size: 1rem; line-height: 1.65; font-weight: 650; }
.erp-outcome-statement { display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start; margin-top: 26px; padding: 8px 4px; }
.erp-outcome-statement > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--erp-accent); border-radius: 50%; color: var(--erp-accent); font-weight: 900; }
.erp-outcome-statement p { margin: 3px 0 0; color: #d9e4ed; line-height: 1.7; }
.erp-outcome-statement strong { color: var(--erp-accent); }
.erp-not-found { min-height: 60vh; display: grid; align-items: center; padding: 90px 0; background: var(--erp-cloud); }
.erp-not-found h1 { max-width: 800px; font-size: clamp(3rem, 6vw, 6rem); }

@media (width <= 1080px) {
  .erp-journey { grid-template-columns: repeat(var(--step-count), minmax(190px, 1fr)); overflow-x: auto; padding: 8px 8px 24px; scroll-snap-type: x mandatory; }
  .erp-journey:before { display: none; }
  .erp-journey li { min-height: 250px; padding: 20px; border: 1px solid var(--erp-line); background: #fff; scroll-snap-align: start; }
  .erp-outcome-grid { grid-template-columns: repeat(2,1fr); }
}

@media (width <= 900px) {
  .erp-hub-hero-grid,
  .erp-detail-hero-grid,
  .erp-platform-grid,
  .erp-section-heading,
  .erp-modules-layout { grid-template-columns: 1fr; gap: 48px; }
  .erp-intro-grid,
  .erp-opening-grid { grid-template-columns: 1fr; gap: 24px; }
  .erp-hub-lead { border-left: 0; border-top: 1px solid rgba(255,255,255,.22); padding: 26px 0 0; }
  .erp-signal-graphic { width: 290px; margin: 10px auto 0; }
  .erp-pillar-grid { grid-template-columns: 1fr; }
  .service-fusion-managed-services .erp-pillar-grid { grid-template-columns: 1fr; }
  .erp-pillar-grid article { min-height: 350px; }
  .erp-modules-intro { position: static; }
}

@media (width <= 680px) {
  .erp-hub-hero { padding: 76px 0 70px; }
  .erp-hub-hero h1,
  .erp-detail-hero h1 { font-size: clamp(3rem, 13vw, 4.6rem); }
  .erp-directory-grid,
  .erp-module-grid { grid-template-columns: 1fr; }
  .erp-directory-card { min-height: 375px; padding: 30px 26px; }
  .erp-detail-hero { padding-top: 76px; }
  .erp-detail-hero .hero-actions { align-items: stretch; flex-direction: column; }
  .erp-back-link { align-self: flex-start; }
  .erp-signal-graphic { width: 235px; }
  .erp-stats { grid-template-columns: 1fr; margin-top: 55px; }
  .erp-stats > div { min-height: 82px; border-left: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
  .erp-opening-section,
  .erp-journey-section,
  .erp-pillars-section,
  .erp-modules-section,
  .erp-outcomes-section { padding: 78px 0; }
  .erp-outcome-grid { grid-template-columns: 1fr; }
  .erp-outcome-grid article { min-height: 240px; }
  .erp-governance { grid-template-columns: 1fr; padding: 24px; }
  .erp-outcome-statement { grid-template-columns: 32px 1fr; }
}