/* Proviamo sfondi proprietari delle section */
/* =========================================================
   STEG DNA TEST 02 — CONNECTED TRACKS
   Motif di sfondo derivato dal monogramma/logo
   ========================================================= */

/* RAILS berre e punti nel footer */
.steg-dna-rails {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-rails::before,
.steg-dna-rails::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.steg-dna-rails::before {
  inset: auto -40px -60px auto;
  width: 420px;
  height: 260px;
  opacity: 0.055;
  background:
    radial-gradient(circle at 18px 196px, rgba(27, 47, 82, 0.95) 0 4px, transparent 5px),
    radial-gradient(circle at 332px 54px, rgba(27, 47, 82, 0.95) 0 4px, transparent 5px),
    linear-gradient(135deg,
      transparent 0 18%,
      rgba(27, 47, 82, 0.95) 18.4% 19.2%,
      transparent 19.6% 100%),
    linear-gradient(135deg,
      transparent 0 25%,
      rgba(27, 47, 82, 0.95) 25.4% 26.2%,
      transparent 26.6% 100%);
  transform: rotate(-8deg);
}

.steg-dna-rails::after {
  inset: auto 20px -24px auto;
  width: 280px;
  height: 180px;
  opacity: 0.035;
  background:
    radial-gradient(circle at 24px 138px, rgba(88, 123, 171, 0.95) 0 3px, transparent 4px),
    radial-gradient(circle at 226px 36px, rgba(88, 123, 171, 0.95) 0 3px, transparent 4px),
    linear-gradient(135deg,
      transparent 0 22%,
      rgba(88, 123, 171, 0.95) 22.5% 23.1%,
      transparent 23.6% 100%),
    linear-gradient(135deg,
      transparent 0 30%,
      rgba(88, 123, 171, 0.95) 30.5% 31.1%,
      transparent 31.6% 100%);
  transform: rotate(-8deg);
}

.steg-dna-rails > * {
  position: relative;
  z-index: 1;
}
/* PATTERNS come i FLOWBLOCKS sono uguali e cambiano solo i colori */
/* Linee curve e blocchi tipo grafica HOME */
.steg-dna-pattern {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-pattern::before,
.steg-dna-pattern::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* layer principale: grandi traiettorie + blocchi + griglia prospettica */
.steg-dna-pattern::before {
  left: -180px;
  top: 50%;
  width: 900px;
  height: 620px;
  opacity: 0.34;
  background:
    /* glow nodes */
    radial-gradient(circle at 220px 430px, rgba(58, 96, 158, 0.85) 0 4px, transparent 10px),
    radial-gradient(circle at 410px 360px, rgba(58, 96, 158, 0.78) 0 3px, transparent 9px),
    radial-gradient(circle at 590px 290px, rgba(58, 96, 158, 0.72) 0 3px, transparent 8px),

    /* luminous flow ribbons */
    radial-gradient(140% 58% at 14% 76%,
      transparent 0 46%,
      rgba(255,255,255,0.00) 46.5%,
      rgba(216,228,245,0.38) 48.2%,
      rgba(255,255,255,0.00) 50.2%,
      transparent 52% 100%),

    radial-gradient(138% 56% at 22% 80%,
      transparent 0 51%,
      rgba(25, 45, 82, 0.00) 51.4%,
      rgba(27, 47, 82, 0.34) 52.5%,
      rgba(27, 47, 82, 0.00) 54.2%,
      transparent 55.5% 100%),

    radial-gradient(138% 54% at 30% 84%,
      transparent 0 57%,
      rgba(25, 45, 82, 0.00) 57.4%,
      rgba(27, 47, 82, 0.26) 58.2%,
      rgba(27, 47, 82, 0.00) 59.4%,
      transparent 60.5% 100%),

    /* secondary sweep */
    radial-gradient(130% 48% at 8% 88%,
      transparent 0 64%,
      rgba(214,223,237,0.00) 64.6%,
      rgba(214,223,237,0.22) 65.6%,
      rgba(214,223,237,0.00) 66.8%,
      transparent 68% 100%),

    /* perspective grid */
    repeating-linear-gradient(
      90deg,
      rgba(27, 47, 82, 0.12) 0 1px,
      transparent 1px 58px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(27, 47, 82, 0.10) 0 1px,
      transparent 1px 58px
    ),

    /* volumetric blocks */
    linear-gradient(180deg, rgba(235,240,247,0.60), rgba(137,154,181,0.30)) 300px 330px / 84px 56px no-repeat,
    linear-gradient(180deg, rgba(235,240,247,0.54), rgba(137,154,181,0.26)) 402px 294px / 72px 48px no-repeat,
    linear-gradient(180deg, rgba(235,240,247,0.48), rgba(137,154,181,0.22)) 500px 254px / 96px 62px no-repeat,
    linear-gradient(180deg, rgba(235,240,247,0.42), rgba(137,154,181,0.20)) 620px 214px / 78px 52px no-repeat,
    linear-gradient(180deg, rgba(235,240,247,0.36), rgba(137,154,181,0.18)) 705px 184px / 62px 46px no-repeat,

    /* darker block shadows */
    linear-gradient(180deg, rgba(27,47,82,0.42), rgba(27,47,82,0.18)) 338px 362px / 84px 22px no-repeat,
    linear-gradient(180deg, rgba(27,47,82,0.38), rgba(27,47,82,0.16)) 436px 322px / 72px 18px no-repeat,
    linear-gradient(180deg, rgba(27,47,82,0.34), rgba(27,47,82,0.14)) 540px 286px / 96px 20px no-repeat;
  transform: translateY(-50%) perspective(1100px) rotateY(-34deg) rotateX(16deg) rotate(-7deg);
  transform-origin: left 62%;
  filter: blur(0.1px);
}

/* layer secondario: tracce più scure e più profonde */
.steg-dna-pattern::after {
  left: -120px;
  top: 50%;
  width: 760px;
  height: 520px;
  opacity: 0.22;
  background:
    radial-gradient(circle at 210px 350px, rgba(27, 47, 82, 0.95) 0 2px, transparent 7px),
    radial-gradient(circle at 390px 285px, rgba(27, 47, 82, 0.82) 0 2px, transparent 6px),

    radial-gradient(128% 52% at 18% 72%,
      transparent 0 48%,
      rgba(18, 30, 56, 0.00) 48.5%,
      rgba(18, 30, 56, 0.30) 49.7%,
      rgba(18, 30, 56, 0.00) 51.2%,
      transparent 52.2% 100%),

    radial-gradient(126% 50% at 26% 77%,
      transparent 0 55%,
      rgba(18, 30, 56, 0.00) 55.4%,
      rgba(18, 30, 56, 0.22) 56.4%,
      rgba(18, 30, 56, 0.00) 57.6%,
      transparent 58.6% 100%),

    linear-gradient(180deg, rgba(255,255,255,0.32), rgba(120,142,174,0.16)) 300px 248px / 56px 36px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(120,142,174,0.14)) 380px 218px / 48px 30px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(120,142,174,0.10)) 462px 188px / 58px 34px no-repeat;
  transform: translateY(-50%) perspective(1100px) rotateY(-34deg) rotateX(16deg) rotate(-7deg);
  transform-origin: left 62%;
}

.steg-dna-pattern > * {
  position: relative;
  z-index: 1;
}

/* COME i PATTERN*/
.steg-dna-flowblocks {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-flowblocks::before,
.steg-dna-flowblocks::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.steg-dna-flowblocks::before {
  left: -140px;
  top: 50%;
  width: 980px;
  height: 640px;
  opacity: 0.42;
  background:
    radial-gradient(circle at 220px 430px, rgba(53, 95, 164, 0.95) 0 4px, transparent 10px),
    radial-gradient(circle at 410px 350px, rgba(53, 95, 164, 0.88) 0 4px, transparent 10px),
    radial-gradient(circle at 610px 275px, rgba(53, 95, 164, 0.78) 0 3px, transparent 9px),

    radial-gradient(148% 62% at 10% 78%,
      transparent 0 42%,
      rgba(255,255,255,0.00) 42.6%,
      rgba(196,216,247,0.42) 44.2%,
      rgba(255,255,255,0.00) 45.8%,
      transparent 47.5% 100%),

    radial-gradient(142% 58% at 18% 82%,
      transparent 0 48%,
      rgba(25,45,82,0.00) 48.5%,
      rgba(27,47,82,0.54) 49.8%,
      rgba(25,45,82,0.00) 51.2%,
      transparent 52.8% 100%),

    radial-gradient(138% 54% at 26% 86%,
      transparent 0 55%,
      rgba(25,45,82,0.00) 55.4%,
      rgba(36,68,118,0.42) 56.5%,
      rgba(25,45,82,0.00) 57.6%,
      transparent 58.8% 100%),

    repeating-linear-gradient(
      90deg,
      rgba(27, 47, 82, 0.12) 0 1px,
      transparent 1px 68px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(27, 47, 82, 0.10) 0 1px,
      transparent 1px 68px
    ),

    linear-gradient(180deg, rgba(238,243,250,0.74), rgba(112,138,183,0.32)) 290px 338px / 120px 74px no-repeat,
    linear-gradient(180deg, rgba(230,238,248,0.68), rgba(95,122,170,0.30)) 434px 292px / 96px 62px no-repeat,
    linear-gradient(180deg, rgba(224,234,246,0.62), rgba(82,109,158,0.28)) 546px 246px / 132px 78px no-repeat,
    linear-gradient(180deg, rgba(214,226,242,0.56), rgba(70,97,148,0.24)) 700px 198px / 92px 58px no-repeat,

    linear-gradient(180deg, rgba(27,47,82,0.58), rgba(27,47,82,0.22)) 332px 392px / 120px 26px no-repeat,
    linear-gradient(180deg, rgba(27,47,82,0.52), rgba(27,47,82,0.20)) 470px 346px / 96px 22px no-repeat,
    linear-gradient(180deg, rgba(27,47,82,0.46), rgba(27,47,82,0.18)) 586px 302px / 132px 24px no-repeat,

    linear-gradient(rgba(36, 68, 118, 0.95), rgba(36, 68, 118, 0.95)) 250px 374px / 86px 2px no-repeat,
    linear-gradient(rgba(36, 68, 118, 0.95), rgba(36, 68, 118, 0.95)) 386px 328px / 62px 2px no-repeat,
    linear-gradient(rgba(36, 68, 118, 0.95), rgba(36, 68, 118, 0.95)) 506px 280px / 78px 2px no-repeat;
  transform: translateY(-50%) perspective(1200px) rotateY(-28deg) rotateX(15deg) rotate(-6deg);
  transform-origin: left 60%;
  filter: blur(0.1px);
}

.steg-dna-flowblocks::after {
  left: -70px;
  top: 50%;
  width: 860px;
  height: 560px;
  opacity: 0.28;
  background:
    radial-gradient(circle at 208px 408px, rgba(27, 47, 82, 0.95) 0 2px, transparent 7px),
    radial-gradient(circle at 392px 334px, rgba(27, 47, 82, 0.82) 0 2px, transparent 6px),
    radial-gradient(circle at 584px 262px, rgba(27, 47, 82, 0.74) 0 2px, transparent 6px),

    radial-gradient(134% 54% at 14% 76%,
      transparent 0 46%,
      rgba(18,30,56,0.00) 46.5%,
      rgba(18,30,56,0.34) 47.8%,
      rgba(18,30,56,0.00) 49.2%,
      transparent 50.6% 100%),

    radial-gradient(130% 50% at 22% 80%,
      transparent 0 53%,
      rgba(18,30,56,0.00) 53.4%,
      rgba(18,30,56,0.24) 54.4%,
      rgba(18,30,56,0.00) 55.5%,
      transparent 56.8% 100%),

    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(108,132,173,0.16)) 320px 286px / 78px 48px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(108,132,173,0.12)) 432px 244px / 66px 40px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(108,132,173,0.10)) 560px 204px / 84px 46px no-repeat,

    linear-gradient(rgba(70, 104, 165, 0.96), rgba(70, 104, 165, 0.96)) 294px 310px / 54px 1px no-repeat,
    linear-gradient(rgba(70, 104, 165, 0.96), rgba(70, 104, 165, 0.96)) 404px 268px / 42px 1px no-repeat,
    linear-gradient(rgba(70, 104, 165, 0.96), rgba(70, 104, 165, 0.96)) 526px 226px / 52px 1px no-repeat;
  transform: translateY(-50%) perspective(1200px) rotateY(-28deg) rotateX(15deg) rotate(-6deg);
  transform-origin: left 60%;
}

.steg-dna-flowblocks > * {
  position: relative;
  z-index: 1;
}

/* ORBITGRID come ORBITGRIS e ORBITGRIDI circle come pagina services */
.steg-dna-orbitgrid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-orbitgrid::before,
.steg-dna-orbitgrid::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.steg-dna-orbitgrid::before {
  right: -120px;
  top: 50%;
  width: 980px;
  height: 720px;
  opacity: 0.34;
  background:
    /* hub cores */
    radial-gradient(circle at 52% 52%, rgba(27, 47, 82, 0.96) 0 34px, transparent 36px),
    radial-gradient(circle at 52% 52%, rgba(30, 31, 32, 0.92) 0 68px, transparent 72px),
    radial-gradient(circle at 52% 52%, rgba(214, 223, 237, 0.88) 0 108px, transparent 114px),

    /* orbit nodes */
    radial-gradient(circle at 24% 36%, rgba(30, 31, 32, 0.95) 0 20px, transparent 22px),
    radial-gradient(circle at 50% 20%, rgba(27, 47, 82, 0.96) 0 22px, transparent 24px),
    radial-gradient(circle at 78% 34%, rgba(30, 31, 32, 0.95) 0 20px, transparent 22px),
    radial-gradient(circle at 72% 74%, rgba(27, 47, 82, 0.96) 0 18px, transparent 20px),
    radial-gradient(circle at 40% 82%, rgba(30, 31, 32, 0.95) 0 16px, transparent 18px),
    radial-gradient(circle at 16% 70%, rgba(27, 47, 82, 0.96) 0 14px, transparent 16px),

    /* orbit rings */
    radial-gradient(circle at 52% 52%,
      transparent 0 128px,
      rgba(27, 47, 82, 0.34) 129px 131px,
      transparent 132px 168px,
      rgba(30, 31, 32, 0.26) 169px 171px,
      transparent 172px 214px,
      rgba(27, 47, 82, 0.18) 215px 217px,
      transparent 218px 100%),

    radial-gradient(circle at 52% 52%,
      transparent 0 248px,
      rgba(214, 223, 237, 0.44) 249px 251px,
      transparent 252px 100%),

    /* segmented arc blocks */
    conic-gradient(from 210deg at 52% 52%,
      transparent 0deg 18deg,
      rgba(27, 47, 82, 0.72) 18deg 42deg,
      transparent 42deg 66deg,
      rgba(30, 31, 32, 0.68) 66deg 96deg,
      transparent 96deg 124deg,
      rgba(214, 223, 237, 0.52) 124deg 142deg,
      transparent 142deg 184deg,
      rgba(27, 47, 82, 0.58) 184deg 214deg,
      transparent 214deg 252deg,
      rgba(30, 31, 32, 0.62) 252deg 282deg,
      transparent 282deg 320deg,
      rgba(214, 223, 237, 0.42) 320deg 338deg,
      transparent 338deg 360deg),

    /* connection lines */
    linear-gradient(rgba(27, 47, 82, 0.34), rgba(27, 47, 82, 0.34)) 250px 258px / 204px 1px no-repeat,
    linear-gradient(rgba(30, 31, 32, 0.26), rgba(30, 31, 32, 0.26)) 454px 170px / 1px 176px no-repeat,
    linear-gradient(rgba(27, 47, 82, 0.24), rgba(27, 47, 82, 0.24)) 454px 346px / 186px 1px no-repeat,
    linear-gradient(rgba(30, 31, 32, 0.22), rgba(30, 31, 32, 0.22)) 330px 346px / 1px 140px no-repeat,

    /* subtle grid */
    repeating-linear-gradient(
      90deg,
      rgba(27, 47, 82, 0.06) 0 1px,
      transparent 1px 72px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(30, 31, 32, 0.05) 0 1px,
      transparent 1px 72px
    );
  transform: translateY(-50%) rotate(-8deg) scale(1);
  transform-origin: center center;
  filter: blur(0.15px);
}

.steg-dna-orbitgrid::after {
  right: -40px;
  top: 50%;
  width: 860px;
  height: 620px;
  opacity: 0.20;
  background:
    radial-gradient(circle at 52% 52%, rgba(255,255,255,0.88) 0 10px, transparent 12px),

    radial-gradient(circle at 24% 36%, rgba(255,255,255,0.58) 0 6px, transparent 8px),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.56) 0 6px, transparent 8px),
    radial-gradient(circle at 78% 34%, rgba(255,255,255,0.56) 0 6px, transparent 8px),
    radial-gradient(circle at 72% 74%, rgba(255,255,255,0.52) 0 5px, transparent 7px),
    radial-gradient(circle at 40% 82%, rgba(255,255,255,0.48) 0 5px, transparent 7px),

    radial-gradient(circle at 52% 52%,
      transparent 0 146px,
      rgba(255,255,255,0.22) 147px 148px,
      transparent 149px 196px,
      rgba(255,255,255,0.16) 197px 198px,
      transparent 199px 100%),

    conic-gradient(from 216deg at 52% 52%,
      transparent 0deg 24deg,
      rgba(255,255,255,0.18) 24deg 34deg,
      transparent 34deg 78deg,
      rgba(255,255,255,0.14) 78deg 88deg,
      transparent 88deg 196deg,
      rgba(255,255,255,0.12) 196deg 206deg,
      transparent 206deg 314deg,
      rgba(255,255,255,0.10) 314deg 324deg,
      transparent 324deg 360deg);
  transform: translateY(-50%) rotate(-8deg) scale(1);
  transform-origin: center center;
}

.steg-dna-orbitgrid > * {
  position: relative;
  z-index: 1;
}

.steg-dna-orbitgrids {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-orbitgrids::before,
.steg-dna-orbitgrids::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.steg-dna-orbitgrids::before {
  right: -120px;
  top: 50%;
  width: 980px;
  height: 720px;
  opacity: 0.28;
  background:
    /* hub cores */
    radial-gradient(circle at 52% 52%, rgba(27, 47, 82, 0.96) 0 34px, transparent 36px),
    radial-gradient(circle at 52% 52%, rgba(30, 31, 32, 0.92) 0 68px, transparent 72px),
    radial-gradient(circle at 52% 52%, rgba(214, 223, 237, 0.88) 0 108px, transparent 114px),

    /* orbit nodes */
    radial-gradient(circle at 24% 36%, rgba(30, 31, 32, 0.95) 0 20px, transparent 22px),
    radial-gradient(circle at 50% 20%, rgba(27, 47, 82, 0.96) 0 22px, transparent 24px),
    radial-gradient(circle at 78% 34%, rgba(30, 31, 32, 0.95) 0 20px, transparent 22px),
    radial-gradient(circle at 72% 74%, rgba(27, 47, 82, 0.96) 0 18px, transparent 20px),
    radial-gradient(circle at 40% 82%, rgba(30, 31, 32, 0.95) 0 16px, transparent 18px),
    radial-gradient(circle at 16% 70%, rgba(27, 47, 82, 0.96) 0 14px, transparent 16px),

    /* orbit rings */
    radial-gradient(circle at 52% 52%,
      transparent 0 128px,
      rgba(27, 47, 82, 0.34) 129px 131px,
      transparent 132px 168px,
      rgba(30, 31, 32, 0.26) 169px 171px,
      transparent 172px 214px,
      rgba(27, 47, 82, 0.18) 215px 217px,
      transparent 218px 100%),

    radial-gradient(circle at 52% 52%,
      transparent 0 248px,
      rgba(214, 223, 237, 0.44) 249px 251px,
      transparent 252px 100%),

    /* segmented arc blocks */
    conic-gradient(from 210deg at 52% 52%,
      transparent 0deg 18deg,
      rgba(27, 47, 82, 0.52) 18deg 42deg,
      transparent 42deg 66deg,
      rgba(30, 31, 32, 0.48) 66deg 96deg,
      transparent 96deg 124deg,
      rgba(214, 223, 237, 0.34) 124deg 142deg,
      transparent 142deg 184deg,
      rgba(27, 47, 82, 0.42) 184deg 214deg,
      transparent 214deg 252deg,
      rgba(30, 31, 32, 0.44) 252deg 282deg,
      transparent 282deg 320deg,
      rgba(214, 223, 237, 0.28) 320deg 338deg,
      transparent 338deg 360deg),

    /* connection lines */
    linear-gradient(rgba(27, 47, 82, 0.22), rgba(27, 47, 82, 0.22)) 250px 258px / 204px 1px no-repeat,
    linear-gradient(rgba(30, 31, 32, 0.18), rgba(30, 31, 32, 0.18)) 454px 170px / 1px 176px no-repeat,
    linear-gradient(rgba(27, 47, 82, 0.18), rgba(27, 47, 82, 0.18)) 454px 346px / 186px 1px no-repeat,
    linear-gradient(rgba(30, 31, 32, 0.16), rgba(30, 31, 32, 0.16)) 330px 346px / 1px 140px no-repeat,

    /* subtle grid */
    repeating-linear-gradient(
      90deg,
      rgba(27, 47, 82, 0.05) 0 1px,
      transparent 1px 72px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(30, 31, 32, 0.04) 0 1px,
      transparent 1px 72px
    );
  transform: translateY(-50%) rotate(-8deg) scale(1);
  transform-origin: center center;
  filter: blur(0.15px);
}

.steg-dna-orbitgrids::after {
  right: -40px;
  top: 50%;
  width: 860px;
  height: 620px;
  opacity: 0.16;
  background:
    radial-gradient(circle at 52% 52%, rgba(255,255,255,0.88) 0 10px, transparent 12px),

    radial-gradient(circle at 24% 36%, rgba(255,255,255,0.58) 0 6px, transparent 8px),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.56) 0 6px, transparent 8px),
    radial-gradient(circle at 78% 34%, rgba(255,255,255,0.56) 0 6px, transparent 8px),
    radial-gradient(circle at 72% 74%, rgba(255,255,255,0.52) 0 5px, transparent 7px),
    radial-gradient(circle at 40% 82%, rgba(255,255,255,0.48) 0 5px, transparent 7px),

    radial-gradient(circle at 52% 52%,
      transparent 0 146px,
      rgba(255,255,255,0.22) 147px 148px,
      transparent 149px 196px,
      rgba(255,255,255,0.16) 197px 198px,
      transparent 199px 100%);
  transform: translateY(-50%) rotate(-8deg) scale(1);
  transform-origin: center center;
}

.steg-dna-orbitgrids > * {
  position: relative;
  z-index: 1;
}

.steg-dna-orbitgridi {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-orbitgridi::before,
.steg-dna-orbitgridi::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.steg-dna-orbitgridi::before {
  right: -120px;
  top: 50%;
  width: 980px;
  height: 720px;
  opacity: 0.30;
  background:
    /* hub cores */
    radial-gradient(circle at 52% 52%, rgba(27, 47, 82, 0.96) 0 34px, transparent 36px),
    radial-gradient(circle at 52% 52%, rgba(30, 31, 32, 0.92) 0 68px, transparent 72px),
    radial-gradient(circle at 52% 52%, rgba(214, 223, 237, 0.88) 0 108px, transparent 114px),

    /* orbit nodes */
    radial-gradient(circle at 24% 36%, rgba(30, 31, 32, 0.95) 0 20px, transparent 22px),
    radial-gradient(circle at 50% 20%, rgba(27, 47, 82, 0.96) 0 22px, transparent 24px),
    radial-gradient(circle at 78% 34%, rgba(30, 31, 32, 0.95) 0 20px, transparent 22px),
    radial-gradient(circle at 72% 74%, rgba(27, 47, 82, 0.96) 0 18px, transparent 20px),
    radial-gradient(circle at 40% 82%, rgba(30, 31, 32, 0.95) 0 16px, transparent 18px),
    radial-gradient(circle at 16% 70%, rgba(27, 47, 82, 0.96) 0 14px, transparent 16px),

    /* orbit rings */
    radial-gradient(circle at 52% 52%,
      transparent 0 128px,
      rgba(27, 47, 82, 0.34) 129px 131px,
      transparent 132px 168px,
      rgba(30, 31, 32, 0.26) 169px 171px,
      transparent 172px 214px,
      rgba(27, 47, 82, 0.18) 215px 217px,
      transparent 218px 100%),

    radial-gradient(circle at 52% 52%,
      transparent 0 248px,
      rgba(214, 223, 237, 0.44) 249px 251px,
      transparent 252px 100%),

    /* segmented arc blocks 
    conic-gradient(from 210deg at 52% 52%,
      transparent 0deg 18deg,
      rgba(27, 47, 82, 0.52) 18deg 42deg,
      transparent 42deg 66deg,
      rgba(30, 31, 32, 0.48) 66deg 96deg,
      transparent 96deg 124deg,
      rgba(214, 223, 237, 0.34) 124deg 142deg,
      transparent 142deg 184deg,
      rgba(27, 47, 82, 0.42) 184deg 214deg,
      transparent 214deg 252deg,
      rgba(30, 31, 32, 0.44) 252deg 282deg,
      transparent 282deg 320deg,
      rgba(214, 223, 237, 0.28) 320deg 338deg,
      transparent 338deg 360deg), */

    /* icon symbols: bars */
    linear-gradient(180deg, rgba(27, 47, 82, 0.92), rgba(27, 47, 82, 0.66)) 190px 240px / 64px 10px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.88), rgba(30, 31, 32, 0.62)) 190px 258px / 52px 10px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.88), rgba(180, 191, 207, 0.60)) 190px 276px / 38px 10px no-repeat,

    /* icon symbols: pyramid */
    linear-gradient(180deg, rgba(27, 47, 82, 0.88), rgba(27, 47, 82, 0.62)) 620px 220px / 34px 8px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.82), rgba(180, 191, 207, 0.56)) 610px 234px / 54px 8px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.72), rgba(180, 191, 207, 0.48)) 598px 248px / 78px 8px no-repeat,

    /* icon symbols: 2x2 grid */
    linear-gradient(180deg, rgba(27, 47, 82, 0.92), rgba(27, 47, 82, 0.66)) 620px 402px / 18px 18px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.88), rgba(30, 31, 32, 0.62)) 646px 402px / 18px 18px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.82), rgba(30, 31, 32, 0.56)) 620px 428px / 18px 18px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.88), rgba(180, 191, 207, 0.60)) 646px 428px / 18px 18px no-repeat,

    /* subtle grid */
    repeating-linear-gradient(
      90deg,
      rgba(27, 47, 82, 0.05) 0 1px,
      transparent 1px 72px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(30, 31, 32, 0.04) 0 1px,
      transparent 1px 72px
    );
  transform: translateY(-50%) rotate(-8deg) scale(1);
  transform-origin: center center;
  filter: blur(0.15px);
}

.steg-dna-orbitgridi::after {
  right: -40px;
  top: 50%;
  width: 860px;
  height: 620px;
  opacity: 0.16;
  background:
    radial-gradient(circle at 52% 52%, rgba(255,255,255,0.88) 0 10px, transparent 12px),

    radial-gradient(circle at 24% 36%, rgba(255,255,255,0.58) 0 6px, transparent 8px),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.56) 0 6px, transparent 8px),
    radial-gradient(circle at 78% 34%, rgba(255,255,255,0.56) 0 6px, transparent 8px),
    radial-gradient(circle at 72% 74%, rgba(255,255,255,0.52) 0 5px, transparent 7px),
    radial-gradient(circle at 40% 82%, rgba(255,255,255,0.48) 0 5px, transparent 7px),

    radial-gradient(circle at 52% 52%,
      transparent 0 146px,
      rgba(255,255,255,0.22) 147px 148px,
      transparent 149px 196px,
      rgba(255,255,255,0.16) 197px 198px,
      transparent 199px 100%);
  transform: translateY(-50%) rotate(-8deg) scale(1);
  transform-origin: center center;
}

.steg-dna-orbitgridi > * {
  position: relative;
  z-index: 1;
}

/*ANALYTICA e ANALYTICS Ispirata alla pagina About */
.steg-dna-analytica {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-analytica::before,
.steg-dna-analytica::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.steg-dna-analytica::before {
  left: 50%;
  top: 56%;
  width: 1040px;
  height: 720px;
  opacity: 0.30;
  background:
    repeating-linear-gradient(  /* per accentuare la griglia di sfondo */
      90deg,
      rgba(27, 47, 82, 0.12) 0 1px,
      transparent 1px 72px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(30, 31, 32, 0.10) 0 1px,
      transparent 1px 72px
    ),

    linear-gradient(rgba(27, 47, 82, 0.08), rgba(27, 47, 82, 0.08)) 120px 420px / 760px 1px no-repeat,
    linear-gradient(rgba(27, 47, 82, 0.06), rgba(27, 47, 82, 0.06)) 180px 356px / 620px 1px no-repeat,
    linear-gradient(rgba(27, 47, 82, 0.05), rgba(27, 47, 82, 0.05)) 236px 296px / 500px 1px no-repeat,

    linear-gradient(180deg, rgba(24, 42, 73, 0.92), rgba(24, 42, 73, 0.66)) 414px 226px / 192px 18px no-repeat,
    linear-gradient(180deg, rgba(22, 39, 68, 0.88), rgba(22, 39, 68, 0.62)) 438px 198px / 144px 16px no-repeat,
    linear-gradient(180deg, rgba(21, 37, 64, 0.84), rgba(21, 37, 64, 0.58)) 460px 172px / 100px 14px no-repeat,
    linear-gradient(180deg, rgba(116, 145, 188, 0.62), rgba(116, 145, 188, 0.20)) 480px 148px / 60px 20px no-repeat,

    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.00)) 438px 198px / 144px 5px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.00)) 460px 172px / 100px 4px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.00)) 480px 148px / 60px 5px no-repeat,

    linear-gradient(180deg, rgba(30, 31, 32, 0.78), rgba(30, 31, 32, 0.48)) 324px 242px / 372px 152px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.00)) 324px 242px / 372px 8px no-repeat,

    linear-gradient(180deg, rgba(30, 31, 32, 0.76), rgba(30, 31, 32, 0.44)) 188px 356px / 52px 60px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.68), rgba(30, 31, 32, 0.38)) 726px 318px / 68px 24px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.68), rgba(30, 31, 32, 0.38)) 726px 346px / 68px 24px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.74), rgba(30, 31, 32, 0.40)) 144px 126px / 78px 14px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.74), rgba(30, 31, 32, 0.40)) 708px 110px / 88px 14px no-repeat,

    radial-gradient(circle at 214px 386px,
      transparent 0 44px,
      rgba(214, 223, 237, 0.32) 45px 46px,
      transparent 47px 100%),
    radial-gradient(circle at 184px 138px,
      transparent 0 36px,
      rgba(214, 223, 237, 0.24) 37px 38px,
      transparent 39px 100%),
    radial-gradient(circle at 742px 356px,
      transparent 0 36px,
      rgba(214, 223, 237, 0.22) 37px 38px,
      transparent 39px 100%),
    radial-gradient(circle at 746px 116px,
      transparent 0 38px,
      rgba(214, 223, 237, 0.20) 39px 40px,
      transparent 41px 100%),

    linear-gradient(rgba(52, 92, 156, 0.34), rgba(52, 92, 156, 0.34)) 214px 184px / 1px 172px no-repeat,
    linear-gradient(rgba(52, 92, 156, 0.28), rgba(52, 92, 156, 0.28)) 746px 130px / 1px 188px no-repeat,
    linear-gradient(rgba(52, 92, 156, 0.26), rgba(52, 92, 156, 0.26)) 510px 128px / 1px 114px no-repeat,
    linear-gradient(rgba(52, 92, 156, 0.22), rgba(52, 92, 156, 0.22)) 240px 356px / 86px 1px no-repeat,
    linear-gradient(rgba(52, 92, 156, 0.20), rgba(52, 92, 156, 0.20)) 696px 318px / 54px 1px no-repeat,

    radial-gradient(circle at 214px 356px, rgba(52, 92, 156, 0.72) 0 2px, transparent 7px),
    radial-gradient(circle at 746px 318px, rgba(52, 92, 156, 0.68) 0 2px, transparent 7px),
    radial-gradient(circle at 510px 242px, rgba(52, 92, 156, 0.82) 0 3px, transparent 10px),
    radial-gradient(circle at 184px 174px, rgba(52, 92, 156, 0.58) 0 2px, transparent 7px),
    radial-gradient(circle at 746px 130px, rgba(52, 92, 156, 0.58) 0 2px, transparent 7px),

    linear-gradient(rgba(27, 47, 82, 0.28), rgba(27, 47, 82, 0.28)) 842px 124px / 2px 76px no-repeat,
    linear-gradient(rgba(27, 47, 82, 0.24), rgba(27, 47, 82, 0.24)) 852px 136px / 2px 64px no-repeat,
    linear-gradient(rgba(27, 47, 82, 0.20), rgba(27, 47, 82, 0.20)) 862px 148px / 2px 52px no-repeat,
    linear-gradient(rgba(27, 47, 82, 0.16), rgba(27, 47, 82, 0.16)) 872px 158px / 2px 42px no-repeat;
  transform: translate(-50%, -50%) perspective(1600px) rotateX(42deg) rotateY(-23deg) rotate(-4deg) scale(1.04);
  transform-origin: center center;
  filter: blur(0.10px) drop-shadow(0 24px 28px rgba(19, 32, 58, 0.10));
}

.steg-dna-analytica::after {
  left: 50%;
  top: 56%;
  width: 940px;
  height: 640px;
  opacity: 0.22;
  background:
    radial-gradient(circle at 510px 244px, rgba(124, 155, 201, 0.82) 0 3px, transparent 14px),
    radial-gradient(circle at 214px 386px, rgba(255,255,255,0.54) 0 4px, transparent 10px),
    radial-gradient(circle at 184px 138px, rgba(255,255,255,0.44) 0 3px, transparent 9px),
    radial-gradient(circle at 742px 356px, rgba(255,255,255,0.40) 0 3px, transparent 9px),

    radial-gradient(circle at 510px 244px,
      transparent 0 76px,
      rgba(255,255,255,0.14) 77px 78px,
      transparent 79px 100%),
    radial-gradient(circle at 510px 244px,
      transparent 0 112px,
      rgba(255,255,255,0.10) 113px 114px,
      transparent 115px 100%),

    linear-gradient(rgba(92, 124, 179, 0.22), rgba(92, 124, 179, 0.22)) 332px 242px / 178px 1px no-repeat,
    linear-gradient(rgba(92, 124, 179, 0.18), rgba(92, 124, 179, 0.18)) 510px 242px / 186px 1px no-repeat;
  transform: translate(-50%, -50%) perspective(1600px) rotateX(42deg) rotateY(-23deg) rotate(-4deg) scale(1.04);
  transform-origin: center center;
  filter: drop-shadow(0 14px 18px rgba(124, 155, 201, 0.08));
}

.steg-dna-analytica > * {
  position: relative;
  z-index: 1;
}


/**/
.steg-dna-analytics {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-analytics::before,
.steg-dna-analytics::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.steg-dna-analytics::before {
  left: 50%;
  top: 54%;
  width: 1040px;
  height: 720px;
  opacity: 0.30;
  background:
    /* background grid */
    repeating-linear-gradient(
      90deg,
      rgba(27, 47, 82, 0.06) 0 1px,
      transparent 1px 72px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(30, 31, 32, 0.05) 0 1px,
      transparent 1px 72px
    ),

    /* faint depth rails */
    linear-gradient(rgba(27, 47, 82, 0.08), rgba(27, 47, 82, 0.08)) 120px 420px / 760px 1px no-repeat,
    linear-gradient(rgba(27, 47, 82, 0.06), rgba(27, 47, 82, 0.06)) 180px 356px / 620px 1px no-repeat,
    linear-gradient(rgba(27, 47, 82, 0.05), rgba(27, 47, 82, 0.05)) 236px 296px / 500px 1px no-repeat,

    /* central stepped platform - more sophisticated */
    linear-gradient(180deg, rgba(24, 42, 73, 0.92), rgba(24, 42, 73, 0.66)) 414px 226px / 192px 18px no-repeat,
    linear-gradient(180deg, rgba(22, 39, 68, 0.88), rgba(22, 39, 68, 0.62)) 438px 198px / 144px 16px no-repeat,
    linear-gradient(180deg, rgba(21, 37, 64, 0.84), rgba(21, 37, 64, 0.58)) 460px 172px / 100px 14px no-repeat,
    linear-gradient(180deg, rgba(116, 145, 188, 0.62), rgba(116, 145, 188, 0.20)) 480px 148px / 60px 20px no-repeat,

    /* platform highlights */
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.00)) 438px 198px / 144px 5px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.00)) 460px 172px / 100px 4px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.00)) 480px 148px / 60px 5px no-repeat,

    /* base plane */
    linear-gradient(180deg, rgba(30, 31, 32, 0.78), rgba(30, 31, 32, 0.48)) 324px 242px / 372px 152px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.00)) 324px 242px / 372px 8px no-repeat,

    /* surrounding modules */
    linear-gradient(180deg, rgba(30, 31, 32, 0.76), rgba(30, 31, 32, 0.44)) 188px 356px / 52px 60px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.68), rgba(30, 31, 32, 0.38)) 726px 318px / 68px 24px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.68), rgba(30, 31, 32, 0.38)) 726px 346px / 68px 24px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.74), rgba(30, 31, 32, 0.40)) 144px 126px / 78px 14px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.74), rgba(30, 31, 32, 0.40)) 708px 110px / 88px 14px no-repeat,

    /* halos */
    radial-gradient(circle at 214px 386px,
      transparent 0 44px,
      rgba(214, 223, 237, 0.32) 45px 46px,
      transparent 47px 100%),
    radial-gradient(circle at 184px 138px,
      transparent 0 36px,
      rgba(214, 223, 237, 0.24) 37px 38px,
      transparent 39px 100%),
    radial-gradient(circle at 742px 356px,
      transparent 0 36px,
      rgba(214, 223, 237, 0.22) 37px 38px,
      transparent 39px 100%),
    radial-gradient(circle at 746px 116px,
      transparent 0 38px,
      rgba(214, 223, 237, 0.20) 39px 40px,
      transparent 41px 100%),

    /* thin blue connections */
    linear-gradient(rgba(52, 92, 156, 0.34), rgba(52, 92, 156, 0.34)) 214px 184px / 1px 172px no-repeat,
    linear-gradient(rgba(52, 92, 156, 0.28), rgba(52, 92, 156, 0.28)) 746px 130px / 1px 188px no-repeat,
    linear-gradient(rgba(52, 92, 156, 0.26), rgba(52, 92, 156, 0.26)) 510px 128px / 1px 114px no-repeat,
    linear-gradient(rgba(52, 92, 156, 0.22), rgba(52, 92, 156, 0.22)) 240px 356px / 86px 1px no-repeat,
    linear-gradient(rgba(52, 92, 156, 0.20), rgba(52, 92, 156, 0.20)) 696px 318px / 54px 1px no-repeat,

    /* nodes */
    radial-gradient(circle at 214px 356px, rgba(52, 92, 156, 0.72) 0 2px, transparent 7px),
    radial-gradient(circle at 746px 318px, rgba(52, 92, 156, 0.68) 0 2px, transparent 7px),
    radial-gradient(circle at 510px 242px, rgba(52, 92, 156, 0.82) 0 3px, transparent 10px),
    radial-gradient(circle at 184px 174px, rgba(52, 92, 156, 0.58) 0 2px, transparent 7px),
    radial-gradient(circle at 746px 130px, rgba(52, 92, 156, 0.58) 0 2px, transparent 7px),

    /* analytics bars */
    linear-gradient(rgba(27, 47, 82, 0.28), rgba(27, 47, 82, 0.28)) 842px 124px / 2px 76px no-repeat,
    linear-gradient(rgba(27, 47, 82, 0.24), rgba(27, 47, 82, 0.24)) 852px 136px / 2px 64px no-repeat,
    linear-gradient(rgba(27, 47, 82, 0.20), rgba(27, 47, 82, 0.20)) 862px 148px / 2px 52px no-repeat,
    linear-gradient(rgba(27, 47, 82, 0.16), rgba(27, 47, 82, 0.16)) 872px 158px / 2px 42px no-repeat;
  transform: translate(-50%, -50%) perspective(1200px) rotateX(18deg) rotate(-6deg);
  transform-origin: center center;
  filter: blur(0.10px);
}

.steg-dna-analytics::after {
  left: 50%;
  top: 54%;
  width: 940px;
  height: 640px;
  opacity: 0.20;
  background:
    /* glows */
    radial-gradient(circle at 510px 244px, rgba(124, 155, 201, 0.82) 0 3px, transparent 14px),
    radial-gradient(circle at 214px 386px, rgba(255,255,255,0.54) 0 4px, transparent 10px),
    radial-gradient(circle at 184px 138px, rgba(255,255,255,0.44) 0 3px, transparent 9px),
    radial-gradient(circle at 742px 356px, rgba(255,255,255,0.40) 0 3px, transparent 9px),

    /* signal arcs */
    radial-gradient(circle at 510px 244px,
      transparent 0 76px,
      rgba(255,255,255,0.14) 77px 78px,
      transparent 79px 100%),
    radial-gradient(circle at 510px 244px,
      transparent 0 112px,
      rgba(255,255,255,0.10) 113px 114px,
      transparent 115px 100%),

    /* faint blue guide rails */
    linear-gradient(rgba(92, 124, 179, 0.22), rgba(92, 124, 179, 0.22)) 332px 242px / 178px 1px no-repeat,
    linear-gradient(rgba(92, 124, 179, 0.18), rgba(92, 124, 179, 0.18)) 510px 242px / 186px 1px no-repeat;
  transform: translate(-50%, -50%) perspective(1200px) rotateX(18deg) rotate(-6deg);
  transform-origin: center center;
}

.steg-dna-analytics > * {
  position: relative;
  z-index: 1;
}

/* ENGAGE richiama i 4 bundle */
.steg-dna-engage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-engage::before,
.steg-dna-engage::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.steg-dna-engage::before {
  left: 50%;
  top: 56%;
  width: 1120px;
  height: 720px;
  opacity: 0.30;
  background:
    /* subtle background grid */
    repeating-linear-gradient(
      90deg,
      rgba(27, 47, 82, 0.10) 0 1px,
      transparent 1px 88px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(30, 31, 32, 0.08) 0 1px,
      transparent 1px 88px
    ),

    /* connecting rails */
    linear-gradient(rgba(63, 108, 176, 0.26), rgba(63, 108, 176, 0.26)) 176px 468px / 210px 2px no-repeat,
    linear-gradient(rgba(63, 108, 176, 0.24), rgba(63, 108, 176, 0.24)) 430px 366px / 220px 2px no-repeat,
    linear-gradient(rgba(63, 108, 176, 0.22), rgba(63, 108, 176, 0.22)) 694px 264px / 210px 2px no-repeat,

    /* connector elbows */
    linear-gradient(rgba(63, 108, 176, 0.24), rgba(63, 108, 176, 0.24)) 384px 434px / 2px 36px no-repeat,
    linear-gradient(rgba(63, 108, 176, 0.22), rgba(63, 108, 176, 0.22)) 648px 332px / 2px 36px no-repeat,
    linear-gradient(rgba(63, 108, 176, 0.20), rgba(63, 108, 176, 0.20)) 902px 230px / 2px 34px no-repeat,

    /* step 1 platform */
    linear-gradient(180deg, rgba(27, 47, 82, 0.86), rgba(27, 47, 82, 0.60)) 104px 424px / 162px 34px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.72), rgba(30, 31, 32, 0.44)) 104px 456px / 162px 26px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.00)) 118px 432px / 136px 4px no-repeat,

    /* step 2 platform */
    linear-gradient(180deg, rgba(27, 47, 82, 0.88), rgba(27, 47, 82, 0.62)) 372px 322px / 178px 38px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.74), rgba(30, 31, 32, 0.46)) 372px 358px / 178px 28px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.00)) 388px 330px / 148px 4px no-repeat,

    /* step 3 platform */
    linear-gradient(180deg, rgba(27, 47, 82, 0.90), rgba(27, 47, 82, 0.64)) 638px 218px / 196px 42px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.76), rgba(30, 31, 32, 0.48)) 638px 258px / 196px 30px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.00)) 656px 226px / 162px 4px no-repeat,

    /* step 4 platform */
    linear-gradient(180deg, rgba(27, 47, 82, 0.92), rgba(27, 47, 82, 0.66)) 896px 114px / 212px 46px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.78), rgba(30, 31, 32, 0.50)) 896px 158px / 212px 32px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.00)) 916px 122px / 172px 4px no-repeat,

    /* modules / objects on steps */
    linear-gradient(180deg, rgba(225, 234, 246, 0.62), rgba(120, 145, 187, 0.28)) 128px 390px / 26px 34px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.58), rgba(120, 145, 187, 0.24)) 164px 402px / 34px 20px no-repeat,
    linear-gradient(180deg, rgba(27, 47, 82, 0.72), rgba(27, 47, 82, 0.42)) 206px 398px / 18px 24px no-repeat,

    linear-gradient(180deg, rgba(225, 234, 246, 0.64), rgba(120, 145, 187, 0.28)) 410px 282px / 28px 40px no-repeat,
    linear-gradient(180deg, rgba(27, 47, 82, 0.76), rgba(27, 47, 82, 0.44)) 452px 292px / 42px 28px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.58), rgba(120, 145, 187, 0.22)) 502px 300px / 22px 18px no-repeat,

    linear-gradient(180deg, rgba(27, 47, 82, 0.78), rgba(27, 47, 82, 0.46)) 676px 170px / 52px 46px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.62), rgba(120, 145, 187, 0.24)) 740px 176px / 64px 38px no-repeat,
    linear-gradient(180deg, rgba(27, 47, 82, 0.68), rgba(27, 47, 82, 0.40)) 812px 182px / 18px 30px no-repeat,

    linear-gradient(180deg, rgba(27, 47, 82, 0.80), rgba(27, 47, 82, 0.48)) 946px 64px / 56px 50px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.64), rgba(120, 145, 187, 0.24)) 1014px 72px / 42px 40px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.60), rgba(120, 145, 187, 0.22)) 1066px 50px / 22px 62px no-repeat,

    /* tiny icon-symbol recalls */
    linear-gradient(180deg, rgba(27, 47, 82, 0.86), rgba(27, 47, 82, 0.62)) 430px 264px / 32px 6px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.84), rgba(180, 191, 207, 0.56)) 430px 274px / 22px 6px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.74), rgba(180, 191, 207, 0.48)) 430px 284px / 14px 6px no-repeat,

    linear-gradient(180deg, rgba(27, 47, 82, 0.84), rgba(27, 47, 82, 0.58)) 746px 148px / 14px 14px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.80), rgba(30, 31, 32, 0.54)) 764px 148px / 14px 14px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.74), rgba(30, 31, 32, 0.48)) 746px 166px / 14px 14px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.84), rgba(180, 191, 207, 0.56)) 764px 166px / 14px 14px no-repeat,

    /* nodes */
    radial-gradient(circle at 386px 468px, rgba(63, 108, 176, 0.70) 0 2px, transparent 8px),
    radial-gradient(circle at 650px 366px, rgba(63, 108, 176, 0.66) 0 2px, transparent 8px),
    radial-gradient(circle at 904px 264px, rgba(63, 108, 176, 0.62) 0 2px, transparent 8px);
  transform: translate(-50%, -50%) perspective(1700px) rotateX(30deg) rotateY(-14deg) rotate(-9deg) scale(1.05);
  transform-origin: center center;
  filter: blur(0.10px) drop-shadow(0 26px 30px rgba(19, 32, 58, 0.10));
}

.steg-dna-engage::after {
  left: 50%;
  top: 56%;
  width: 980px;
  height: 660px;
  opacity: 0.22;
  background:
    /* glow accents */
    radial-gradient(circle at 186px 468px, rgba(255,255,255,0.44) 0 3px, transparent 10px),
    radial-gradient(circle at 462px 366px, rgba(255,255,255,0.42) 0 3px, transparent 10px),
    radial-gradient(circle at 738px 264px, rgba(255,255,255,0.40) 0 3px, transparent 10px),
    radial-gradient(circle at 1018px 152px, rgba(255,255,255,0.38) 0 3px, transparent 10px),

    radial-gradient(circle at 186px 468px,
      transparent 0 34px,
      rgba(214,223,237,0.18) 35px 36px,
      transparent 37px 100%),
    radial-gradient(circle at 462px 366px,
      transparent 0 36px,
      rgba(214,223,237,0.16) 37px 38px,
      transparent 39px 100%),
    radial-gradient(circle at 738px 264px,
      transparent 0 38px,
      rgba(214,223,237,0.14) 39px 40px,
      transparent 41px 100%),

    /* subtle blue guides */
    linear-gradient(rgba(96, 128, 182, 0.18), rgba(96, 128, 182, 0.18)) 234px 470px / 116px 1px no-repeat,
    linear-gradient(rgba(96, 128, 182, 0.16), rgba(96, 128, 182, 0.16)) 500px 368px / 118px 1px no-repeat,
    linear-gradient(rgba(96, 128, 182, 0.14), rgba(96, 128, 182, 0.14)) 764px 266px / 112px 1px no-repeat;
  transform: translate(-50%, -50%) perspective(1700px) rotateX(30deg) rotateY(-14deg) rotate(-9deg) scale(1.05);
  transform-origin: center center;
  filter: drop-shadow(0 16px 18px rgba(124, 155, 201, 0.08));
}

.steg-dna-engage > * {
  position: relative;
  z-index: 1;
}

/* versione invertita di ENGAGE*/
.steg-dna-engageinv {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-engageinv::before,
.steg-dna-engageinv::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.steg-dna-engageinv::before {
  left: 50%;
  top: 56%;
  width: 1120px;
  height: 720px;
  opacity: 0.30;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(27, 47, 82, 0.10) 0 1px,
      transparent 1px 88px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(30, 31, 32, 0.08) 0 1px,
      transparent 1px 88px
    ),

    /* connecting rails */
    linear-gradient(rgba(63, 108, 176, 0.26), rgba(63, 108, 176, 0.26)) 214px 246px / 210px 2px no-repeat,
    linear-gradient(rgba(63, 108, 176, 0.24), rgba(63, 108, 176, 0.24)) 474px 350px / 220px 2px no-repeat,
    linear-gradient(rgba(63, 108, 176, 0.22), rgba(63, 108, 176, 0.22)) 740px 452px / 210px 2px no-repeat,

    /* connector elbows */
    linear-gradient(rgba(63, 108, 176, 0.24), rgba(63, 108, 176, 0.24)) 422px 246px / 2px 38px no-repeat,
    linear-gradient(rgba(63, 108, 176, 0.22), rgba(63, 108, 176, 0.22)) 692px 350px / 2px 38px no-repeat,
    linear-gradient(rgba(63, 108, 176, 0.20), rgba(63, 108, 176, 0.20)) 948px 452px / 2px 36px no-repeat,

    /* step 1 platform - top left */
    linear-gradient(180deg, rgba(27, 47, 82, 0.92), rgba(27, 47, 82, 0.66)) 102px 112px / 212px 46px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.78), rgba(30, 31, 32, 0.50)) 102px 156px / 212px 32px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.00)) 122px 120px / 172px 4px no-repeat,

    /* step 2 */
    linear-gradient(180deg, rgba(27, 47, 82, 0.90), rgba(27, 47, 82, 0.64)) 366px 214px / 196px 42px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.76), rgba(30, 31, 32, 0.48)) 366px 254px / 196px 30px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.00)) 384px 222px / 162px 4px no-repeat,

    /* step 3 */
    linear-gradient(180deg, rgba(27, 47, 82, 0.88), rgba(27, 47, 82, 0.62)) 632px 318px / 178px 38px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.74), rgba(30, 31, 32, 0.46)) 632px 354px / 178px 28px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.00)) 648px 326px / 148px 4px no-repeat,

    /* step 4 - bottom right */
    linear-gradient(180deg, rgba(27, 47, 82, 0.86), rgba(27, 47, 82, 0.60)) 898px 420px / 162px 34px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.72), rgba(30, 31, 32, 0.44)) 898px 452px / 162px 26px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.00)) 912px 428px / 136px 4px no-repeat,

    /* modules / objects on steps */
    linear-gradient(180deg, rgba(27, 47, 82, 0.80), rgba(27, 47, 82, 0.48)) 152px 62px / 56px 50px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.64), rgba(120, 145, 187, 0.24)) 220px 70px / 42px 40px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.60), rgba(120, 145, 187, 0.22)) 272px 48px / 22px 62px no-repeat,

    linear-gradient(180deg, rgba(27, 47, 82, 0.78), rgba(27, 47, 82, 0.46)) 404px 166px / 52px 46px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.62), rgba(120, 145, 187, 0.24)) 468px 172px / 64px 38px no-repeat,
    linear-gradient(180deg, rgba(27, 47, 82, 0.68), rgba(27, 47, 82, 0.40)) 540px 178px / 18px 30px no-repeat,

    linear-gradient(180deg, rgba(225, 234, 246, 0.64), rgba(120, 145, 187, 0.28)) 670px 278px / 28px 40px no-repeat,
    linear-gradient(180deg, rgba(27, 47, 82, 0.76), rgba(27, 47, 82, 0.44)) 712px 288px / 42px 28px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.58), rgba(120, 145, 187, 0.22)) 762px 296px / 22px 18px no-repeat,

    linear-gradient(180deg, rgba(225, 234, 246, 0.62), rgba(120, 145, 187, 0.28)) 922px 386px / 26px 34px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.58), rgba(120, 145, 187, 0.24)) 958px 398px / 34px 20px no-repeat,
    linear-gradient(180deg, rgba(27, 47, 82, 0.72), rgba(27, 47, 82, 0.42)) 1000px 394px / 18px 24px no-repeat,

    /* tiny icon-symbol recalls */
    linear-gradient(180deg, rgba(27, 47, 82, 0.84), rgba(27, 47, 82, 0.58)) 216px 146px / 14px 14px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.80), rgba(30, 31, 32, 0.54)) 234px 146px / 14px 14px no-repeat,
    linear-gradient(180deg, rgba(30, 31, 32, 0.74), rgba(30, 31, 32, 0.48)) 216px 164px / 14px 14px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.84), rgba(180, 191, 207, 0.56)) 234px 164px / 14px 14px no-repeat,

    linear-gradient(180deg, rgba(27, 47, 82, 0.86), rgba(27, 47, 82, 0.62)) 700px 344px / 32px 6px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.84), rgba(180, 191, 207, 0.56)) 700px 354px / 22px 6px no-repeat,
    linear-gradient(180deg, rgba(214, 223, 237, 0.74), rgba(180, 191, 207, 0.48)) 700px 364px / 14px 6px no-repeat,

    /* nodes */
    radial-gradient(circle at 424px 246px, rgba(63, 108, 176, 0.70) 0 2px, transparent 8px),
    radial-gradient(circle at 694px 350px, rgba(63, 108, 176, 0.66) 0 2px, transparent 8px),
    radial-gradient(circle at 950px 452px, rgba(63, 108, 176, 0.62) 0 2px, transparent 8px);
  transform: translate(-50%, -50%) perspective(1700px) rotateX(30deg) rotateY(14deg) rotate(9deg) scale(1.05);
  transform-origin: center center;
  filter: blur(0.10px) drop-shadow(0 26px 30px rgba(19, 32, 58, 0.10));
}

.steg-dna-engageinv::after {
  left: 50%;
  top: 56%;
  width: 980px;
  height: 660px;
  opacity: 0.22;
  background:
    radial-gradient(circle at 208px 150px, rgba(255,255,255,0.38) 0 3px, transparent 10px),
    radial-gradient(circle at 484px 254px, rgba(255,255,255,0.40) 0 3px, transparent 10px),
    radial-gradient(circle at 760px 356px, rgba(255,255,255,0.42) 0 3px, transparent 10px),
    radial-gradient(circle at 1036px 458px, rgba(255,255,255,0.44) 0 3px, transparent 10px),

    radial-gradient(circle at 208px 150px,
      transparent 0 38px,
      rgba(214,223,237,0.14) 39px 40px,
      transparent 41px 100%),
    radial-gradient(circle at 484px 254px,
      transparent 0 38px,
      rgba(214,223,237,0.16) 39px 40px,
      transparent 41px 100%),
    radial-gradient(circle at 760px 356px,
      transparent 0 36px,
      rgba(214,223,237,0.18) 37px 38px,
      transparent 39px 100%),

    linear-gradient(rgba(96, 128, 182, 0.14), rgba(96, 128, 182, 0.14)) 292px 248px / 112px 1px no-repeat,
    linear-gradient(rgba(96, 128, 182, 0.16), rgba(96, 128, 182, 0.16)) 558px 352px / 118px 1px no-repeat,
    linear-gradient(rgba(96, 128, 182, 0.18), rgba(96, 128, 182, 0.18)) 822px 454px / 116px 1px no-repeat;
  transform: translate(-50%, -50%) perspective(1700px) rotateX(30deg) rotateY(14deg) rotate(9deg) scale(1.05);
  transform-origin: center center;
  filter: drop-shadow(0 16px 18px rgba(124, 155, 201, 0.08));
}

.steg-dna-engageinv > * {
  position: relative;
  z-index: 1;
}

/* =========================================
   STEG DNA — CATEGORY MANAGEMENT
   layered grid + tier logic + category blocks
   ========================================= */

.steg-dna-category-grid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-category-grid::before,
.steg-dna-category-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* main structural plane */
.steg-dna-category-grid::before {
  z-index: 0;
  background:
    /* stepped block silhouette */
    linear-gradient(0deg, rgba(23,53,95,0.08), rgba(23,53,95,0.08)) 68% 54% / 18% 8% no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.10), rgba(23,53,95,0.10)) 71% 47% / 14% 7% no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.11), rgba(23,53,95,0.11)) 74% 41% / 10% 6% no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.12), rgba(23,53,95,0.12)) 77% 36% / 7% 5% no-repeat,

    /* lower grouped blocks */
    linear-gradient(0deg, rgba(23,53,95,0.09), rgba(23,53,95,0.09)) 56% 63% / 4.5% 6% no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.08), rgba(23,53,95,0.08)) 60% 61% / 4% 5% no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.07), rgba(23,53,95,0.07)) 66% 66% / 5% 6.5% no-repeat,

    /* tilted plane */
    linear-gradient(135deg,
      rgba(23,53,95,0.00) 18%,
      rgba(23,53,95,0.035) 28%,
      rgba(23,53,95,0.06) 44%,
      rgba(23,53,95,0.02) 72%,
      rgba(23,53,95,0.00) 84%
    ),

    /* soft radial focus */
    radial-gradient(circle at 74% 40%,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.10) 16%,
      rgba(255,255,255,0.00) 42%
    );
  transform: skewX(-18deg) scale(1.08);
  transform-origin: center center;
  opacity: 0.95;
  
}

/* grid, traces and category lines */
.steg-dna-category-grid::after {
  z-index: 0;
  background:
    /* vertical grid */
    repeating-linear-gradient(
      90deg,
      rgba(23,53,95,0.00) 0,
      rgba(23,53,95,0.00) 78px,
      rgba(23,53,95,0.055) 79px,
      rgba(23,53,95,0.00) 80px
    ),

    /* horizontal grid */
    repeating-linear-gradient(
      0deg,
      rgba(23,53,95,0.00) 0,
      rgba(23,53,95,0.00) 62px,
      rgba(23,53,95,0.04) 63px,
      rgba(23,53,95,0.00) 64px
    ),

    /* long orbit lines */
    radial-gradient(120% 70% at 68% 56%, transparent 58%, rgba(23,53,95,0.08) 58.5%, transparent 59.2%),
    radial-gradient(110% 64% at 66% 58%, transparent 60%, rgba(23,53,95,0.06) 60.5%, transparent 61.1%),

    /* node glows */
    radial-gradient(circle at 73% 42%, rgba(255,255,255,0.65) 0 1px, rgba(23,53,95,0.00) 7px),
    radial-gradient(circle at 64% 61%, rgba(255,255,255,0.45) 0 1px, rgba(23,53,95,0.00) 6px),
    radial-gradient(circle at 58% 64%, rgba(255,255,255,0.40) 0 1px, rgba(23,53,95,0.00) 5px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.38) 0 1px, rgba(23,53,95,0.00) 5px);
  opacity: 0.72;
}

/* keep real content above */
.steg-dna-category-grid > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .steg-dna-category-grid::before {
    transform: skewX(-14deg) scale(1.04);
    opacity: 0.82;
  }

  .steg-dna-category-grid::after {
    opacity: 0.56;
  }
}

/* =========================================
   STEG DNA — CATEGORY MANAGEMENT v5
   stacks fixed, structure expanding to the left
   ========================================= */

.steg-dna-category-grids {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-category-grids::before,
.steg-dna-category-grids::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* stacks only */
.steg-dna-category-grids::before {
  z-index: 0;
  background:
    linear-gradient(0deg, rgba(23,53,95,0.12), rgba(23,53,95,0.12)) 68% 54% / 18% 8% no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.14), rgba(23,53,95,0.14)) 71% 47% / 14% 7% no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.15), rgba(23,53,95,0.15)) 74% 41% / 10% 6% no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.16), rgba(23,53,95,0.16)) 77% 36% / 7% 5% no-repeat,

    linear-gradient(0deg, rgba(23,53,95,0.11), rgba(23,53,95,0.11)) 55% 63% / 4.5% 6% no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.10), rgba(23,53,95,0.10)) 59% 61% / 4% 5% no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.10), rgba(23,53,95,0.10)) 64% 66% / 5% 6.5% no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.08), rgba(23,53,95,0.08)) 72% 63% / 5.5% 5.5% no-repeat;
  transform: skewX(-18deg) scale(1.08);
  transform-origin: center center;
  opacity: 1;
}

/* structure flowing left from the stacks */
.steg-dna-category-grids::after {
  z-index: 0;
  background:
    /* long connector strokes going left */
    linear-gradient(168deg, transparent 48%, rgba(23,53,95,0.14) 49%, rgba(23,53,95,0.14) 50%, transparent 51%) 56% 47% / 34% 16% no-repeat,
    linear-gradient(174deg, transparent 48%, rgba(23,53,95,0.12) 49%, rgba(23,53,95,0.12) 50%, transparent 51%) 52% 55% / 40% 18% no-repeat,
    linear-gradient(178deg, transparent 48%, rgba(23,53,95,0.10) 49%, rgba(23,53,95,0.10) 50%, transparent 51%) 48% 63% / 46% 18% no-repeat,

    /* parallel guidance lines */
    linear-gradient(0deg, rgba(23,53,95,0.10), rgba(23,53,95,0.10)) 44% 56% / 34% 1px no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.08), rgba(23,53,95,0.08)) 40% 62% / 40% 1px no-repeat,
    linear-gradient(0deg, rgba(23,53,95,0.06), rgba(23,53,95,0.06)) 36% 68% / 46% 1px no-repeat,

    /* left-expanding arcs */
    radial-gradient(160% 90% at 68% 56%, transparent 69%, rgba(23,53,95,0.12) 69.7%, transparent 70.3%),
    radial-gradient(150% 82% at 66% 58%, transparent 73%, rgba(23,53,95,0.10) 73.7%, transparent 74.3%),
    radial-gradient(140% 76% at 64% 60%, transparent 77%, rgba(23,53,95,0.08) 77.7%, transparent 78.3%),

    /* faint vertical grid only on left half */
    repeating-linear-gradient(
      90deg,
      rgba(23,53,95,0.00) 0,
      rgba(23,53,95,0.00) 62px,
      rgba(23,53,95,0.07) 63px,
      rgba(23,53,95,0.00) 64px
    ) left center / 58% 100% no-repeat,

    /* faint horizontal grid only on left half */
    repeating-linear-gradient(
      0deg,
      rgba(23,53,95,0.00) 0,
      rgba(23,53,95,0.00) 54px,
      rgba(23,53,95,0.05) 55px,
      rgba(23,53,95,0.00) 56px
    ) left center / 58% 100% no-repeat,

    /* nodes starting near stacks and moving left */
    radial-gradient(circle at 63% 50%, rgba(23,53,95,0.92) 0 2px, rgba(23,53,95,0.00) 7px),
    radial-gradient(circle at 56% 54%, rgba(23,53,95,0.76) 0 1.8px, rgba(23,53,95,0.00) 6px),
    radial-gradient(circle at 49% 59%, rgba(23,53,95,0.70) 0 1.7px, rgba(23,53,95,0.00) 6px),
    radial-gradient(circle at 42% 64%, rgba(23,53,95,0.66) 0 1.6px, rgba(23,53,95,0.00) 5px),
    radial-gradient(circle at 35% 69%, rgba(23,53,95,0.58) 0 1.4px, rgba(23,53,95,0.00) 5px),

    /* a few upper nodes */
    radial-gradient(circle at 60% 43%, rgba(23,53,95,0.72) 0 1.5px, rgba(23,53,95,0.00) 5px),
    radial-gradient(circle at 52% 39%, rgba(23,53,95,0.60) 0 1.3px, rgba(23,53,95,0.00) 5px),
    radial-gradient(circle at 44% 35%, rgba(23,53,95,0.50) 0 1.2px, rgba(23,53,95,0.00) 4px);
  opacity: 1;
}

.steg-dna-category-grids > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .steg-dna-category-grids::before {
    transform: skewX(-14deg) scale(1.04);
  }

  .steg-dna-category-grids::after {
    opacity: 0.82;
  }
}

/* =========================
   STEG DNA — SOURCING
   Strategic Sourcing & Contracting inspired
   ========================= */

.steg-dna-sourcing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-sourcing::before,
.steg-dna-sourcing::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ===== GRID ONLY ===== */
.steg-dna-sourcing::before {
  z-index: 0;
  inset: -6% -4% -10% -4%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 92px,
      rgba(52, 78, 126, 0.09) 92px 94px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 74px,
      rgba(52, 78, 126, 0.07) 74px 76px
    ),
    repeating-linear-gradient(
      -10deg,
      transparent 0 220px,
      rgba(52, 78, 126, 0.03) 220px 222px
    );
  transform: perspective(1400px) rotateX(72deg) scaleY(1.18);
  transform-origin: center center;
  clip-path: polygon(
    0% 7%,
    10% 5%,
    20% 8%,
    30% 6%,
    40% 9%,
    50% 7%,
    60% 10%,
    70% 8%,
    80% 11%,
    90% 9%,
    100% 12%,
    100% 93%,
    90% 90%,
    80% 92%,
    70% 89%,
    60% 91%,
    50% 88%,
    40% 90%,
    30% 87%,
    20% 89%,
    10% 86%,
    0% 88%
  );
  opacity: 1;
}

/* ===== SYMBOLS ONLY ===== */
.steg-dna-sourcing::after {
  z-index: 1;
  background:
    /* source blocks */
    linear-gradient(180deg, rgba(28, 46, 82, 0.22), rgba(28, 46, 82, 0.06)) 27% 30% / 38px 38px no-repeat,
    linear-gradient(180deg, rgba(28, 46, 82, 0.22), rgba(28, 46, 82, 0.06)) 28% 43% / 38px 38px no-repeat,
    linear-gradient(180deg, rgba(28, 46, 82, 0.22), rgba(28, 46, 82, 0.06)) 27.5% 56% / 38px 38px no-repeat,
    linear-gradient(180deg, rgba(28, 46, 82, 0.22), rgba(28, 46, 82, 0.06)) 29% 69% / 38px 38px no-repeat,

    /* nodes */
    radial-gradient(circle at 50.8% 39.8%, rgba(73, 109, 184, 0.84) 0 4px, rgba(73, 109, 184, 0.14) 5px 15px, transparent 16px),
    radial-gradient(circle at 56.2% 49.8%, rgba(73, 109, 184, 0.82) 0 4px, rgba(73, 109, 184, 0.14) 5px 15px, transparent 16px),
    radial-gradient(circle at 58.3% 60.2%, rgba(73, 109, 184, 0.78) 0 4px, rgba(73, 109, 184, 0.12) 5px 14px, transparent 15px),

    /* final block */
    linear-gradient(180deg, rgba(30, 49, 87, 0.22), rgba(30, 49, 87, 0.06)) 77.8% 52.8% / 160px 112px no-repeat,
    linear-gradient(180deg, rgba(30, 49, 87, 0.12), rgba(30, 49, 87, 0.04)) 75.7% 55.8% / 224px 18px no-repeat,
    linear-gradient(180deg, rgba(30, 49, 87, 0.09), rgba(30, 49, 87, 0.03)) 73.4% 58.3% / 290px 14px no-repeat,

    /* final glow */
    radial-gradient(circle at 80% 56.8%, rgba(84, 120, 194, 0.22) 0, rgba(84, 120, 194, 0.08) 8%, transparent 20%),

    /* bars */
    linear-gradient(180deg, rgba(39, 63, 108, 0.17), rgba(39, 63, 108, 0.04)) 69% 19% / 14px 54px no-repeat,
    linear-gradient(180deg, rgba(39, 63, 108, 0.17), rgba(39, 63, 108, 0.04)) 71.8% 17% / 14px 76px no-repeat,
    linear-gradient(180deg, rgba(39, 63, 108, 0.17), rgba(39, 63, 108, 0.04)) 74.5% 15.2% / 14px 98px no-repeat,
    linear-gradient(180deg, rgba(39, 63, 108, 0.17), rgba(39, 63, 108, 0.04)) 77.2% 13.6% / 14px 118px no-repeat,

    /* tiny points */
    radial-gradient(circle at 62.8% 73.5%, rgba(73, 109, 184, 0.20) 0 2px, transparent 3px),
    radial-gradient(circle at 65.4% 71.8%, rgba(73, 109, 184, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 67.8% 70.1%, rgba(73, 109, 184, 0.16) 0 2px, transparent 3px);
  opacity: 1;
}

.steg-dna-sourcing > * {
  position: relative;
  z-index: 2;
}

/* =========================
   STEG DNA — SUPPLIER PERFORMANCE
   Supplier Performance and Relationship Management
   ========================= */
.steg-dna-supplier-performance {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-supplier-performance::before,
.steg-dna-supplier-performance::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ===== 3D GRID BACKGROUND ===== */
.steg-dna-supplier-performance::before {
  z-index: 0;
  inset: -8% -4% -12% -4%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 96px,
      rgba(46, 73, 122, 0.085) 96px 98px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 74px,
      rgba(46, 73, 122, 0.06) 74px 76px
    ),
    repeating-linear-gradient(
      -11deg,
      transparent 0 220px,
      rgba(46, 73, 122, 0.028) 220px 222px
    );
  transform: perspective(1400px) rotateX(72deg) scaleY(1.16);
  transform-origin: center center;
  clip-path: polygon(
    0% 8%,
    10% 6%,
    20% 8.5%,
    30% 7%,
    40% 9%,
    50% 7.5%,
    60% 10%,
    70% 8.5%,
    80% 10.5%,
    90% 9%,
    100% 11%,
    100% 92%,
    90% 89.5%,
    80% 91%,
    70% 88.5%,
    60% 90%,
    50% 87.5%,
    40% 89%,
    30% 86.5%,
    20% 88.5%,
    10% 86%,
    0% 88%
  );
  opacity: 1;
}

/* ===== SYMBOLS / RELATIONSHIP LAYER ===== */
.steg-dna-supplier-performance::after {
  z-index: 1;
  background:

    /* nodes */
    radial-gradient(circle at 42.5% 47.5%, rgba(73, 109, 184, 0.78) 0 4px, rgba(73, 109, 184, 0.12) 5px 16px, transparent 17px),
    radial-gradient(circle at 50.5% 51.5%, rgba(73, 109, 184, 0.78) 0 4px, rgba(73, 109, 184, 0.12) 5px 16px, transparent 17px),
    radial-gradient(circle at 58.2% 45.8%, rgba(73, 109, 184, 0.76) 0 4px, rgba(73, 109, 184, 0.12) 5px 16px, transparent 17px),
    radial-gradient(circle at 63.8% 40.8%, rgba(73, 109, 184, 0.72) 0 4px, rgba(73, 109, 184, 0.10) 5px 14px, transparent 15px),

    /* small supplier/source blocks */
    linear-gradient(180deg, rgba(28, 46, 82, 0.19), rgba(28, 46, 82, 0.05)) 29% 56% / 34px 34px no-repeat,
    linear-gradient(180deg, rgba(28, 46, 82, 0.19), rgba(28, 46, 82, 0.05)) 35.5% 50.5% / 32px 32px no-repeat,
    linear-gradient(180deg, rgba(28, 46, 82, 0.19), rgba(28, 46, 82, 0.05)) 40% 45.5% / 30px 30px no-repeat,

    /* central review hub */
    radial-gradient(circle at 60% 61%, rgba(33, 50, 90, 0.85) 0 5px, transparent 6px),

    /* people / relationship symbol */
    radial-gradient(circle at 78.6% 33.8%, rgba(39, 63, 108, 0.22) 0 16px, transparent 17px),
    linear-gradient(180deg, rgba(39, 63, 108, 0.22), rgba(39, 63, 108, 0.05)) 76.7% 38.4% / 40px 34px no-repeat,
    radial-gradient(circle at 82.2% 34.1%, rgba(39, 63, 108, 0.22) 0 12px, transparent 13px),
    linear-gradient(180deg, rgba(39, 63, 108, 0.22), rgba(39, 63, 108, 0.05)) 80.9% 38.8% / 28px 24px no-repeat,

    /* KPI bars top-right */
    linear-gradient(180deg, rgba(39, 63, 108, 0.16), rgba(39, 63, 108, 0.04)) 69.5% 16.2% / 12px 48px no-repeat,
    linear-gradient(180deg, rgba(39, 63, 108, 0.16), rgba(39, 63, 108, 0.04)) 72.2% 14.8% / 12px 68px no-repeat,
    linear-gradient(180deg, rgba(39, 63, 108, 0.16), rgba(39, 63, 108, 0.04)) 74.9% 12.9% / 12px 90px no-repeat,
    linear-gradient(180deg, rgba(39, 63, 108, 0.16), rgba(39, 63, 108, 0.04)) 77.6% 10.8% / 12px 112px no-repeat,
    
    radial-gradient(circle at 75.5% 66.2%, rgba(255,255,255,0) 0 18px, transparent 19px),
    linear-gradient(
      25deg,
      transparent 0 75.15%,
      rgba(39, 63, 108, 0.36) 75.3%,
      rgba(39, 63, 108, 0.36) 76.25%,
      transparent 76.4%
    ) 0 0 / 100% 100% no-repeat,

    /* tiny points */
    radial-gradient(circle at 66.4% 74.2%, rgba(73, 109, 184, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 68.2% 72.4%, rgba(73, 109, 184, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 70.1% 70.8%, rgba(73, 109, 184, 0.14) 0 2px, transparent 3px);
  opacity: 1;
}

.steg-dna-supplier-performance > * {
  position: relative;
  z-index: 2;
}

/* Steg DNA — Continuity Risk Map
   Service page: Risk, Continuity & Supply Resilience
   Purpose: subtle supply-risk network, alternate route, continuity control
*/

.steg-dna-continuity-risk {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-continuity-risk > * {
  position: relative;
  z-index: 2;
}

.steg-dna-continuity-risk::before,
.steg-dna-continuity-risk::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* Main technical network — sharper version */
.steg-dna-continuity-risk::before {
  width: min(1040px, 92vw);
  height: min(620px, 62vw);
  right: -160px;
  top: 50%;
  transform: translateY(-50%) rotate(-7deg);
  opacity: 1;

  background:
    /* sharper primary nodes */
    radial-gradient(circle at 18% 64%, rgba(255,255,255,0.68) 0 4px, rgba(176,204,228,0.48) 4px 10px, transparent 6px),
    radial-gradient(circle at 34% 48%, rgba(255,255,255,0.64) 0 4px, rgba(176,204,228,0.42) 4px 10px, transparent 6px),
    radial-gradient(circle at 51% 38%, rgba(255,255,255,0.60) 0 4px, rgba(176,204,228,0.36) 4px 10px, transparent 6px),
    radial-gradient(circle at 69% 31%, rgba(255,255,255,0.54) 0 4px, rgba(176,204,228,0.30) 4px 9px, transparent 5px),
    radial-gradient(circle at 84% 25%, rgba(255,255,255,0.46) 0 3px, rgba(176,204,228,0.24) 3px 8px, transparent 4px),
    radial-gradient(circle at 27% 70%, rgba(220,232,244,0.46) 0 2px, transparent 15px),
    radial-gradient(circle at 43% 57%, rgba(220,232,244,0.38) 0 2px, transparent 18px),
    radial-gradient(circle at 58% 51%, rgba(220,232,244,0.34) 0 2px, transparent 14px),
    radial-gradient(circle at 76% 39%, rgba(220,232,244,0.30) 0 2px, transparent 20px),

    /* reduced route glow */
    linear-gradient(115deg, transparent 78%, rgba(205, 218, 232, 0.02) 27%, rgba(205, 218, 232, 0.04) 47%, rgba(205, 218, 232, 0.02) 66%, transparent 98%),

    /* sharper primary route */
    linear-gradient(112deg, transparent 0 20%, rgba(248, 252, 255, 0.78) 20% 20.9%, transparent 21.1%),
    linear-gradient(107deg, transparent 0 30%, rgba(248, 252, 255, 0.70) 30% 30.9%, transparent 31.1%),
    linear-gradient(103deg, transparent 0 45%, rgba(248, 252, 255, 0.62) 45% 45.8%, transparent 46%),
    linear-gradient(99deg, transparent 0 62%, rgba(248, 252, 255, 0.52) 62% 62.8%, transparent 63%),

    /* alternate route / bypass */
    linear-gradient(153deg, transparent 30%, rgba(184, 201, 218, 0.54) 31%, rgba(184, 201, 218, 0.54) 31.45%, transparent 32.1%),
    linear-gradient(28deg, transparent 42%, rgba(184, 201, 218, 0.48) 43%, rgba(184, 201, 218, 0.48) 43.4%, transparent 44.1%),

    /* floor/grid fragments */
    linear-gradient(0deg, transparent 72%, rgba(190, 204, 218, 0.11) 72.2%, transparent 72.5%),
    linear-gradient(90deg, transparent 76%, rgba(190, 204, 218, 0.10) 76.2%, transparent 76.5%),
    linear-gradient(135deg, transparent 54%, rgba(190, 204, 218, 0.09) 54.2%, transparent 54.5%);

  filter: none;

  mask-image:
    radial-gradient(ellipse at 58% 50%, black 0%, black 86%, transparent 98%);
}

/* Risk accent + depth control — sharper, still restrained */
.steg-dna-continuity-risk::after {
  width: min(520px, 46vw);
  height: min(360px, 40vw);
  right: 2%;
  top: 16%;
  opacity: 0.72;

  background:
    /* restrained warning accent */
    radial-gradient(circle at 68% 42%, rgba(246, 197, 67, 0.72) 0 2px, rgba(246, 197, 67, 0.28) 3px 9px, transparent 10px),
    conic-gradient(from 45deg at 68% 42%, transparent 0 18%, rgba(246, 197, 67, 0.34) 18% 25%, transparent 25% 100%),

    /* charcoal depth, avoids flat blue veil */
    radial-gradient(ellipse at 72% 48%, rgba(19, 30, 42, 0.16) 0%, rgba(19, 30, 42, 0.08) 34%, transparent 68%);

  mask-image:
    radial-gradient(ellipse at 67% 43%, black 0%, black 42%, transparent 74%);
}

@media (max-width: 900px) {
  .steg-dna-continuity-risk::before {
    width: 620px;
    height: 420px;
    right: -260px;
    top: 54%;
    opacity: 0.52;
  }

  .steg-dna-continuity-risk::after {
    width: 360px;
    height: 260px;
    right: -160px;
    top: 18%;
    opacity: 0.46;
  }
}

@media (max-width: 640px) {
  .steg-dna-continuity-risk::before,
  .steg-dna-continuity-risk::after {
    opacity: 0.30;
  }
}

/* Steg DNA — Analytics Visibility
   Service page: Procurement Analytics & Performance Visibility
   Purpose: subtle dashboard structure, performance indicators, trend visibility
*/

.steg-dna-analytics-visibility {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-analytics-visibility > * {
  position: relative;
  z-index: 2;
}

.steg-dna-analytics-visibility::before,
.steg-dna-analytics-visibility::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* Main visibility board */
.steg-dna-analytics-visibility::before {
  width: min(1180px, 104vw);
  height: min(620px, 62vw);
  right: -70px;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  opacity: 0.92;
  filter: none;

  background:
    /* main panel frame */
    linear-gradient(90deg, rgba(214,225,236,0.22) 0 1px, transparent 1px),
    linear-gradient(0deg, rgba(214,225,236,0.18) 0 1px, transparent 1px),

    /* large soft panel */
    linear-gradient(135deg, rgba(226,234,242,0.16), rgba(95,118,143,0.06)) 42% 30% / 46% 42% no-repeat,

    /* mini cards */
    linear-gradient(135deg, rgba(230,237,244,0.22), rgba(125,145,166,0.07)) 18% 56% / 22% 26% no-repeat,
    linear-gradient(135deg, rgba(230,237,244,0.18), rgba(125,145,166,0.06)) 47% 62% / 22% 24% no-repeat,
    linear-gradient(135deg, rgba(230,237,244,0.16), rgba(125,145,166,0.05)) 73% 47% / 20% 25% no-repeat,

    /* card borders */
    linear-gradient(90deg, transparent 17.8%, rgba(218,229,239,0.34) 17.9%, rgba(218,229,239,0.34) 40.2%, transparent 40.3%),
    linear-gradient(0deg, transparent 55.8%, rgba(218,229,239,0.30) 55.9%, rgba(218,229,239,0.30) 82.2%, transparent 82.3%),

    linear-gradient(90deg, transparent 46.8%, rgba(218,229,239,0.28) 46.9%, rgba(218,229,239,0.28) 69.2%, transparent 69.3%),
    linear-gradient(0deg, transparent 61.8%, rgba(218,229,239,0.24) 61.9%, rgba(218,229,239,0.24) 86.2%, transparent 86.3%),

    linear-gradient(90deg, transparent 72.8%, rgba(218,229,239,0.24) 72.9%, rgba(218,229,239,0.24) 93.2%, transparent 93.3%),
    linear-gradient(0deg, transparent 46.8%, rgba(218,229,239,0.22) 46.9%, rgba(218,229,239,0.22) 72.2%, transparent 72.3%),

    /* bar chart columns */
    linear-gradient(0deg, rgba(139,164,190,0.48), rgba(218,229,239,0.70)) 23% 75% / 3.2% 18% no-repeat,
    linear-gradient(0deg, rgba(139,164,190,0.42), rgba(218,229,239,0.64)) 29% 75% / 3.2% 27% no-repeat,
    linear-gradient(0deg, rgba(139,164,190,0.36), rgba(218,229,239,0.58)) 35% 75% / 3.2% 34% no-repeat,

    /* horizontal data rows */
    linear-gradient(90deg, rgba(220,231,241,0.48), rgba(220,231,241,0.16)) 52% 69% / 13% 1.5px no-repeat,
    linear-gradient(90deg, rgba(220,231,241,0.36), rgba(220,231,241,0.12)) 52% 75% / 16% 1.5px no-repeat,
    linear-gradient(90deg, rgba(220,231,241,0.30), rgba(220,231,241,0.10)) 52% 81% / 11% 1.5px no-repeat,

    /* small status chips */
    radial-gradient(circle at 78% 55%, rgba(235,242,248,0.82) 0 3px, rgba(145,170,196,0.34) 3px 7px, transparent 8px),
    radial-gradient(circle at 86% 62%, rgba(235,242,248,0.70) 0 2.5px, rgba(145,170,196,0.26) 3px 6px, transparent 7px),

    /* perspective floor grid — extends left */
    linear-gradient(112deg, transparent 0 18%, rgba(170,190,210,0.18) 18% 18.25%, transparent 18.5% 100%),
    linear-gradient(108deg, transparent 0 28%, rgba(170,190,210,0.16) 28% 28.25%, transparent 28.5% 100%),
    linear-gradient(104deg, transparent 0 39%, rgba(170,190,210,0.14) 39% 39.22%, transparent 39.45% 100%),
    linear-gradient(100deg, transparent 0 51%, rgba(170,190,210,0.12) 51% 51.2%, transparent 51.42% 100%),
    linear-gradient(96deg, transparent 0 64%, rgba(170,190,210,0.10) 64% 64.18%, transparent 64.38% 100%),

    linear-gradient(14deg, transparent 0 54%, rgba(190,207,224,0.16) 54% 54.22%, transparent 54.45% 100%),
    linear-gradient(10deg, transparent 0 64%, rgba(190,207,224,0.14) 64% 64.2%, transparent 64.42% 100%),
    linear-gradient(6deg, transparent 0 74%, rgba(190,207,224,0.12) 74% 74.18%, transparent 74.38% 100%),

    /* base grid */
    linear-gradient(90deg, rgba(180,198,216,0.07) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(0deg, rgba(180,198,216,0.06) 1px, transparent 1px) 0 0 / 72px 72px;

  mask-image:
    radial-gradient(ellipse at 54% 54%, black 0%, black 84%, transparent 100%);
}

/* Trend line, nodes, and subtle depth */
.steg-dna-analytics-visibility::after {
  width: min(620px, 56vw);
  height: min(360px, 40vw);
  right: -20px;
  top: 18%;
  opacity: 0.88;
  filter: none;

  background:
    /* trend nodes */
    radial-gradient(circle at 18% 68%, rgba(255,255,255,0.95) 0 3px, rgba(155,184,211,0.44) 3px 8px, transparent 9px),
    radial-gradient(circle at 36% 56%, rgba(255,255,255,0.88) 0 3px, rgba(155,184,211,0.38) 3px 8px, transparent 9px),
    radial-gradient(circle at 57% 44%, rgba(255,255,255,0.82) 0 3px, rgba(155,184,211,0.34) 3px 7px, transparent 8px),
    radial-gradient(circle at 79% 29%, rgba(255,255,255,0.74) 0 2.5px, rgba(155,184,211,0.28) 3px 7px, transparent 8px),

    /* trend segments */
    linear-gradient(146deg, transparent 0 34.8%, rgba(218,232,244,0.66) 34.8% 35.45%, transparent 35.45% 100%),
    linear-gradient(150deg, transparent 0 46.8%, rgba(218,232,244,0.58) 46.8% 47.45%, transparent 47.45% 100%),
    linear-gradient(145deg, transparent 0 60.8%, rgba(218,232,244,0.50) 60.8% 61.45%, transparent 61.45% 100%),

    /* small analytic markers */
    radial-gradient(circle at 25% 78%, rgba(205,224,240,0.50) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 48% 66%, rgba(205,224,240,0.42) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 68% 52%, rgba(205,224,240,0.36) 0 1.6px, transparent 2.3px),

    /* restrained depth */
    radial-gradient(ellipse at 62% 46%, rgba(16,26,38,0.14) 0%, rgba(16,26,38,0.06) 38%, transparent 72%);

  mask-image:
    radial-gradient(ellipse at 60% 50%, black 0%, black 74%, transparent 96%);
}

@media (max-width: 900px) {
  .steg-dna-analytics-visibility::before {
    width: 660px;
    height: 430px;
    right: -300px;
    top: 54%;
    opacity: 0.52;
  }

  .steg-dna-analytics-visibility::after {
    width: 520px;
    height: 300px;
    right: -260px;
    top: 24%;
    opacity: 0.46;
  }
}

@media (max-width: 640px) {
  .steg-dna-analytics-visibility::before,
  .steg-dna-analytics-visibility::after {
    opacity: 0.28;
  }
}

/* Steg DNA — Operations Enablement
   Service page: Procurement Operations, Process & Enablement
   Purpose: process structure, workflow control, operating cadence, enablement
   Visual rule: very thin 3D grid + defined process symbols, no circular nodes
*/

.steg-dna-operations-enablement {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.steg-dna-operations-enablement > * {
  position: relative;
  z-index: 2;
}

.steg-dna-operations-enablement::before,
.steg-dna-operations-enablement::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* Ultra-thin wide 3D grid — background only */
.steg-dna-operations-enablement::before {
  width: min(1560px, 132vw);
  height: min(660px, 64vw);
  left: 48%;
  top: 55%;
  transform: translate(-50%, -50%) rotate(-4deg);
  opacity: 0.92;
  filter: none;

  background:
    /* depth lines — denser, still thin */
    linear-gradient(110deg, transparent 0 8%, rgba(126,151,176,0.105) 8% 8.08%, transparent 8.16% 100%),
    linear-gradient(108deg, transparent 0 15%, rgba(126,151,176,0.100) 15% 15.08%, transparent 15.16% 100%),
    linear-gradient(106deg, transparent 0 23%, rgba(126,151,176,0.095) 23% 23.08%, transparent 23.16% 100%),
    linear-gradient(104deg, transparent 0 31%, rgba(126,151,176,0.090) 31% 31.075%, transparent 31.15% 100%),
    linear-gradient(102deg, transparent 0 39%, rgba(126,151,176,0.085) 39% 39.075%, transparent 39.15% 100%),
    linear-gradient(100deg, transparent 0 48%, rgba(126,151,176,0.078) 48% 48.07%, transparent 48.14% 100%),
    linear-gradient(98deg, transparent 0 57%, rgba(126,151,176,0.072) 57% 57.07%, transparent 57.14% 100%),
    linear-gradient(96deg, transparent 0 66%, rgba(126,151,176,0.066) 66% 66.065%, transparent 66.13% 100%),
    linear-gradient(94deg, transparent 0 76%, rgba(126,151,176,0.058) 76% 76.06%, transparent 76.12% 100%),

    /* cross-lines — denser */
    linear-gradient(14deg, transparent 0 42%, rgba(145,165,186,0.100) 42% 42.08%, transparent 42.16% 100%),
    linear-gradient(12deg, transparent 0 49%, rgba(145,165,186,0.095) 49% 49.08%, transparent 49.16% 100%),
    linear-gradient(10deg, transparent 0 56%, rgba(145,165,186,0.088) 56% 56.075%, transparent 56.15% 100%),
    linear-gradient(8deg, transparent 0 63%, rgba(145,165,186,0.080) 63% 63.075%, transparent 63.15% 100%),
    linear-gradient(6deg, transparent 0 70%, rgba(145,165,186,0.073) 70% 70.065%, transparent 70.13% 100%),
    linear-gradient(4deg, transparent 0 77%, rgba(145,165,186,0.066) 77% 77.06%, transparent 77.12% 100%),
    linear-gradient(2deg, transparent 0 84%, rgba(145,165,186,0.058) 84% 84.055%, transparent 84.11% 100%);

  mask-image:
    radial-gradient(ellipse at 52% 58%, black 0%, black 72%, transparent 100%);
}

/* Defined process symbols — no circular nodes */
.steg-dna-operations-enablement::after {
  width: min(900px, 80vw);
  height: min(500px, 52vw);
  right: -70px;
  top: 50%;
  transform: translateY(-50%) rotate(-3deg);
  opacity: 0.62;
  filter: none;

  background:
    /* main process spine */
    linear-gradient(145deg, transparent 0 30%, rgba(75,96,119,0.34) 30% 30.42%, transparent 30.42% 100%),
    linear-gradient(154deg, transparent 0 44%, rgba(75,96,119,0.30) 44% 44.4%, transparent 44.4% 100%),
    linear-gradient(143deg, transparent 0 58%, rgba(75,96,119,0.26) 58% 58.36%, transparent 58.36% 100%),

    /* workflow cards / process blocks */
    /*linear-gradient(135deg, rgba(248,250,252,0.98), rgba(64,84,110,0.46)) 20% 64% / 25% 21% no-repeat,
    linear-gradient(135deg, rgba(244,247,250,0.92), rgba(58,78,104,0.42)) 47% 55% / 27% 21% no-repeat,
    linear-gradient(135deg, rgba(238,242,247,0.84), rgba(52,72,98,0.38)) 73% 42% / 25% 20% no-repeat,*/

    /* workflow sheets / process blocks — light grey to blue-navy */
    linear-gradient(135deg, rgba(248,250,252,0.98), rgba(48,75,110,0.46)) 20% 64% / 25% 21% no-repeat,
    linear-gradient(135deg, rgba(244,247,250,0.92), rgba(44,70,104,0.42)) 47% 55% / 27% 21% no-repeat,
    linear-gradient(135deg, rgba(238,242,247,0.84), rgba(40,64,96,0.38)) 73% 42% / 25% 20% no-repeat,

    /* card top edges */
    /*linear-gradient(90deg, transparent 19.8%, rgba(63,82,104,0.30) 19.9%, rgba(63,82,104,0.30) 40.2%, transparent 40.3%),
    linear-gradient(90deg, transparent 46.8%, rgba(63,82,104,0.26) 46.9%, rgba(63,82,104,0.26) 69.2%, transparent 69.3%),
    linear-gradient(90deg, transparent 72.8%, rgba(63,82,104,0.22) 72.9%, rgba(63,82,104,0.22) 93.2%, transparent 93.3%),*/

    /* card side edges */
    linear-gradient(0deg, transparent 63.8%, rgba(63,82,104,0.075) 63.9%, rgba(63,82,104,0.075) 81.1%, transparent 81.2%),
    linear-gradient(0deg, transparent 54.8%, rgba(63,82,104,0.065) 54.9%, rgba(63,82,104,0.065) 72.1%, transparent 72.2%),
    linear-gradient(0deg, transparent 41.8%, rgba(63,82,104,0.055) 41.9%, rgba(63,82,104,0.055) 58.1%, transparent 58.2%),

    /* internal card process bars */
    linear-gradient(90deg, rgba(42,59,80,0.42), rgba(88,111,135,0.22)) 27% 70% / 10% 3px no-repeat,
    linear-gradient(90deg, rgba(42,59,80,0.34), rgba(88,111,135,0.18)) 27% 75% / 14% 3px no-repeat,
    linear-gradient(90deg, rgba(42,59,80,0.26), rgba(88,111,135,0.14)) 27% 80% / 8% 3px no-repeat,

    linear-gradient(90deg, rgba(42,59,80,0.36), rgba(88,111,135,0.18)) 54% 61% / 14% 3px no-repeat,
    linear-gradient(90deg, rgba(42,59,80,0.28), rgba(88,111,135,0.14)) 54% 67% / 10% 3px no-repeat,

    linear-gradient(90deg, rgba(42,59,80,0.30), rgba(88,111,135,0.14)) 79% 48% / 10% 3px no-repeat,
    linear-gradient(90deg, rgba(42,59,80,0.22), rgba(88,111,135,0.10)) 79% 53% / 7% 3px no-repeat,

    /* defined handoff connector blocks, not circles */
    linear-gradient(135deg, rgba(78,99,122,0.34), rgba(214,226,238,0.28)) 39% 58% / 18px 18px no-repeat,
    linear-gradient(135deg, rgba(78,99,122,0.28), rgba(214,226,238,0.22)) 65% 48% / 16px 16px no-repeat,

    /* decision diamond */
    conic-gradient(from 45deg at 62% 50%, rgba(45,64,87,0.34) 0 25%, rgba(225,235,244,0.36) 25% 50%, rgba(45,64,87,0.26) 50% 75%, rgba(225,235,244,0.28) 75% 100%) 62% 50% / 24px 24px no-repeat,

    /* subtle process baseline */
    linear-gradient(90deg, transparent 0 16%, rgba(70,92,116,0.22) 16% 78%, transparent 78% 100%) 0 72% / 100% 1px no-repeat;

  mask-image:
    radial-gradient(ellipse at 63% 52%, black 0%, black 80%, transparent 98%);
}

@media (max-width: 900px) {
  .steg-dna-operations-enablement::before {
    width: 1180px;
    height: 580px;
    left: 58%;
    top: 56%;
    opacity: 0.28;
  }

  .steg-dna-operations-enablement::after {
    width: 680px;
    height: 420px;
    right: -300px;
    top: 54%;
    opacity: 0.42;
  }
}

@media (max-width: 640px) {
  .steg-dna-operations-enablement::before {
    opacity: 0.20;
  }

  .steg-dna-operations-enablement::after {
    opacity: 0.24;
  }
}