.about__diagram {
        --bg: transparent;
        --label: rgba(48, 38, 28, 0.78);
        --line: rgba(92, 63, 38, 0.32);
        --stage-w: 100%;
        --stage-h: min(560px, calc(100vh - 20px));
        /* Legend fades in shortly after layers start (was ~2.12s — felt too slow) */
        --legend-fade-delay: 0.45s;
        --legend-fade-duration: 0.4s;
      }

      .about__diagram *,
      .about__diagram *::before,
      .about__diagram *::after {
        box-sizing: border-box;
      }

      /* Avoid a big pooled shadow that reads like a rectangular “frame” on the About page */
      

      .head {
        text-align: center;
        max-width: 560px;
      }

      .head h1 {
        margin: 0 0 10px;
        font-size: clamp(1.15rem, 2.5vw, 1.45rem);
        font-weight: 600;
        letter-spacing: 0.02em;
      }

      .head p {
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.55;
        color: rgba(40, 32, 26, 0.72);
      }

      /* Stage (layers) left, legend right; tight column gap */
      .about__diagram {
        background: none !important;
        background-color: transparent !important;
        width: var(--stage-w);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(112px, 168px);
        column-gap: clamp(4px, 1vw, 10px);
        row-gap: 10px;
        align-items: start;
        justify-items: stretch;
        contain: none;
        overflow: visible;
        padding-top: clamp(82px, 11.5vw, 96px);
      }

      .about__diagram .stage {
        grid-column: 1;
        justify-self: stretch;
      }

      .about__diagram .stage {
        min-width: 0;
      }

      .about__diagram .legend {
        grid-column: 2;
        justify-self: stretch;
      }

      @media (max-width: 720px) {
        .about__diagram {
          grid-template-columns: 1fr;
          justify-items: center;
          width: 100%;
          max-width: 100%;
          --stage-h: min(420px, calc(100vh - 32px));
        }

        .about__diagram .stage,
        .about__diagram .legend {
          grid-column: auto;
          width: 100%;
          max-width: 520px;
        }

        .about__diagram .legend {
          justify-self: stretch;
          max-width: min(520px, 100%);
        }
      }

      .about__diagram .stage {
        position: relative;
        height: var(--stage-h);
        perspective: 1400px;
        perspective-origin: 52% 42%;
        overflow: visible;
        /* Mouse/trackpad: allow starting a vertical scroll from the stage */
        touch-action: pan-y;
        cursor: grab;
        -webkit-tap-highlight-color: transparent;
      }

      /* Touch: pan-y steals horizontal movement from Pointer Events; none = free yaw+pitch */
      @media (pointer: coarse) {
        .about__diagram .stage {
          touch-action: none;
        }
      }

      @media (max-width: 720px) {
        .about__diagram .stage {
          perspective-origin: 50% 42%;
        }
      }

      .about__diagram .stage.is-grabbing {
        cursor: grabbing;
      }

      .about__diagram .stage.is-grabbing,
      .about__diagram .stage.is-grabbing * {
        user-select: none;
      }

      .about__diagram .stage:focus {
        outline: none;
      }

      .about__diagram .stage:focus-visible {
        outline: 2px solid rgba(92, 63, 38, 0.45);
        outline-offset: 4px;
        border-radius: 6px;
      }

      .about__diagram .world {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transform-style: preserve-3d;
        transform: rotateX(62deg) rotateZ(-46deg) scale(0.94);
      }

      /* User drag: yaw = horizontal circle (around vertical), pitch = vertical circle (around horizontal) */
      .about__diagram .orbit {
        transform-style: preserve-3d;
        transform: rotateY(0deg) rotateX(0deg);
        will-change: transform;
      }

      .about__diagram .stack {
        position: relative;
        width: 1px;
        height: 1px;
        transform-style: preserve-3d;
      }

      @keyframes stack-layer-expand {
        0%,
        18% {
          transform: translateZ(0px);
        }
        100% {
          transform: translateZ(var(--z));
        }
      }

      @keyframes legend-fade-in {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .about__diagram .layer {
        --w: 300px;
        --d: 200px;
        --pop-stagger: 0s;
        position: absolute;
        left: calc(var(--w) / -2);
        top: calc(var(--d) / -2);
        width: var(--w);
        height: var(--d);
        transform: translateZ(0px);
        transform-style: preserve-3d;
        animation: none;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.35) inset,
          0 24px 50px rgba(0, 0, 0, 0.45);
        overflow: hidden;
        backface-visibility: hidden;
      }

      .about__diagram.is-revealed .layer {
        animation: stack-layer-expand 1.75s cubic-bezier(0.19, 1, 0.22, 1) calc(0.1s + var(--pop-stagger)) both;
      }

      .about__diagram .layerLogos {
        position: absolute;
        z-index: 2;
        left: 8px;
        right: 8px;
        bottom: 8px;
        top: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        pointer-events: none;
      }

      .about__diagram .layerLogos img {
        display: block;
        height: 28px;
        width: auto;
        max-width: 52px;
        object-fit: contain;
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
      }

      .about__diagram .layer--2 .layerLogos img,
      .about__diagram .layer--3 .layerLogos img,
      .about__diagram .layer--4 .layerLogos img {
        height: 34px;
        max-width: 60px;
      }

      .about__diagram .layer--6 .layerLogos img {
        height: 30px;
        max-width: 56px;
      }

      .about__diagram .layer--7 .layerLogos img {
        height: 38px;
        max-width: 80px;
      }

      /* Top “product” surface — scarlet / brick red */
      .about__diagram .layer--1 {
        --z: 206px;
        --pop-stagger: 0s;
        background: linear-gradient(145deg, rgba(220, 38, 38, 0.45), rgba(69, 10, 10, 0.58));
      }

      .about__diagram .mockChrome {
        height: 28px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 12px;
        background: rgba(28, 6, 6, 0.72);
        border-bottom: 1px solid rgba(248, 113, 113, 0.28);
        border-radius: 22px 22px 0 0;
      }

      .about__diagram .mockDot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(252, 165, 165, 0.55);
      }

      .about__diagram .mockBody {
        padding: 12px;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 10px;
        height: calc(100% - 28px);
      }

      .about__diagram .layer--1 .mockBody {
        padding-bottom: 42px;
      }

      .about__diagram .mockHero {
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.5), rgba(127, 29, 29, 0.45));
        border: 1px solid rgba(254, 202, 202, 0.35);
      }

      .about__diagram .mockAside {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .about__diagram .mockCard {
        flex: 1;
        border-radius: 999px;
        background: rgba(91, 11, 11, 0.55);
        border: 1px solid rgba(248, 113, 113, 0.25);
      }

      /* Frontend components — saturated blue */
      .about__diagram .layer--2 {
        --z: 138px;
        --pop-stagger: 0.04s;
        background: linear-gradient(180deg, rgba(59, 130, 246, 0.42), rgba(23, 37, 84, 0.55));
      }

      .about__diagram .compGrid {
        position: absolute;
        inset: 14px 14px 48px 14px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 10px;
      }

      .about__diagram .comp {
        border-radius: 999px;
        background: rgba(147, 197, 253, 0.28);
        border: 1px solid rgba(191, 219, 254, 0.4);
      }

      .about__diagram .comp--wide {
        grid-column: span 2;
      }

      .about__diagram .comp--tall {
        grid-row: span 2;
      }

      /* API / gateway — golden yellow */
      .about__diagram .layer--3 {
        --z: 70px;
        --pop-stagger: 0.08s;
        background: linear-gradient(180deg, rgba(234, 179, 8, 0.4), rgba(113, 63, 18, 0.5));
      }

      .about__diagram .routeLines {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(90deg, rgba(254, 243, 199, 0.2) 1px, transparent 1px),
          linear-gradient(rgba(253, 224, 71, 0.12) 1px, transparent 1px);
        background-size: 28px 28px;
        mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 75%);
      }

      .about__diagram .routePill {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 10px 18px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 650;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(66, 32, 6, 0.95);
        background: rgba(254, 249, 195, 0.75);
        border: 1px solid rgba(202, 138, 4, 0.45);
        white-space: nowrap;
      }

      /* Services / domain — emerald */
      .about__diagram .layer--4 {
        --z: 2px;
        --pop-stagger: 0.12s;
        background: linear-gradient(180deg, rgba(16, 185, 129, 0.38), rgba(6, 78, 59, 0.52));
      }

      .about__diagram .svcGrid {
        position: absolute;
        inset: 18px 18px 50px 18px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }

      .about__diagram .svc {
        border-radius: 999px;
        background: rgba(167, 243, 208, 0.18);
        border: 1px dashed rgba(110, 231, 183, 0.45);
      }

      /* Integration — bright cyan */
      .about__diagram .layer--5 {
        --z: -66px;
        --pop-stagger: 0.16s;
        background: linear-gradient(180deg, rgba(6, 182, 212, 0.4), rgba(21, 94, 117, 0.52));
      }

      .about__diagram .intStripes {
        position: absolute;
        inset: 20px 20px 48px 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
      }

      .about__diagram .intRow {
        height: 22px;
        border-radius: 999px;
        background: repeating-linear-gradient(
          90deg,
          rgba(165, 243, 252, 0.22) 0 14px,
          transparent 14px 26px
        );
        border: 1px solid rgba(103, 232, 249, 0.35);
      }

      /* Data — violet / purple */
      .about__diagram .layer--6 {
        --z: -134px;
        --pop-stagger: 0.2s;
        background: linear-gradient(180deg, rgba(139, 92, 246, 0.42), rgba(49, 46, 129, 0.55));
      }

      .about__diagram .dataCols {
        position: absolute;
        inset: 16px 16px 50px 16px;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        gap: 8px;
      }

      .about__diagram .dataCol {
        flex: 1;
        max-width: 36px;
        height: 70%;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(196, 181, 253, 0.55), rgba(91, 33, 182, 0.35));
        border: 1px solid rgba(167, 139, 250, 0.45);
      }

      .about__diagram .dataCol:nth-child(2) {
        height: 55%;
      }

      .about__diagram .dataCol:nth-child(3) {
        height: 85%;
      }

      .about__diagram .dataCol:nth-child(4) {
        height: 48%;
      }

      /* Infra grid — magenta / fuchsia */
      .about__diagram .layer--7 {
        --z: -202px;
        --pop-stagger: 0.24s;
        background: linear-gradient(180deg, rgba(217, 70, 239, 0.38), rgba(88, 28, 135, 0.55));
      }

      .about__diagram .infraGrid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(90deg, rgba(245, 208, 254, 0.22) 1px, transparent 1px),
          linear-gradient(rgba(232, 121, 249, 0.14) 1px, transparent 1px);
        background-size: calc(100% / 12) calc(100% / 8);
        opacity: 0.9;
      }

      .about__diagram .infraGlow {
        position: absolute;
        inset: 18%;
        border-radius: 999px;
        background: radial-gradient(circle at 40% 35%, rgba(250, 232, 255, 0.2), transparent 60%);
        pointer-events: none;
      }

      /* Legend: hidden until .is-revealed (scroll / in-view); then fades in after layers */
      .about__diagram .legend {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        opacity: 0;
        animation: none;
      }

      .about__diagram.is-revealed .legend {
        animation: legend-fade-in var(--legend-fade-duration) ease-out var(--legend-fade-delay) forwards;
      }

      .about__diagram .legend li {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        min-height: calc(var(--stage-h) / 7.2);
        padding-left: 22px;
        padding-right: 2px;
        font-size: 0.82rem;
        font-weight: 560;
        letter-spacing: 0.04em;
        color: var(--label);
        text-align: right;
      }

      .about__diagram .legend li::before {
        content: "";
        position: absolute;
        left: 0;
        width: 22px;
        height: 1px;
        background: var(--line);
        transform: translateX(-100%);
      }

      /* :nth-child counts text nodes between <li>s; :nth-of-type targets the Nth <li> reliably */
      .about__diagram .legend li:first-of-type {
        margin-top: 12px;
      }

      /* Row is tall + align-items:center — margin barely moves the label; translate shifts the paint */
      .about__diagram .legend li:nth-of-type(4) {
        transform: translateY(-22px);
      }

      /* Layer 5 vs equal row heights; + offset so it doesn’t overlap row 4 (Backend) */
      .about__diagram .legend li:nth-of-type(5) {
        transform: translateY(calc((var(--stage-h) / 7.2) * -0.92 + 26px));
      }

      /* Layer 6 vs equal row heights (was reading as layer 7); + offset vs row 5 */
      .about__diagram .legend li:nth-of-type(6) {
        transform: translateY(calc((var(--stage-h) / 7.2) * -0.93 + 16px));
      }

      /* Layer 7: pull up to sit just under Databases (equal rows leave it too low) */
      .about__diagram .legend li:nth-of-type(7) {
        transform: translateY(calc((var(--stage-h) / 7.2) * -1.14));
      }

      @media (max-width: 720px) {
        .about__diagram .legend li {
          min-height: auto;
          padding: 10px 8px;
          justify-content: center;
          text-align: center;
        }
        .about__diagram .legend li::before {
          display: none;
        }
        .about__diagram .legend li:nth-of-type(4),
        .about__diagram .legend li:nth-of-type(5),
        .about__diagram .legend li:nth-of-type(6),
        .about__diagram .legend li:nth-of-type(7) {
          transform: none;
        }
      }

      .about__diagram .swatch {
        display: inline-block;
        flex-shrink: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 0;
        vertical-align: middle;
        box-shadow: 0 0 0 1px rgba(92, 63, 38, 0.28);
      }

      .about__diagram .swatch--1 {
        background: linear-gradient(135deg, #ef4444, #450a0a);
      }
      .about__diagram .swatch--2 {
        background: #2563eb;
      }
      .about__diagram .swatch--3 {
        background: #ca8a04;
      }
      .about__diagram .swatch--4 {
        background: #059669;
      }
      .about__diagram .swatch--5 {
        background: #0891b2;
      }
      .about__diagram .swatch--6 {
        background: #7c3aed;
      }
      .about__diagram .swatch--7 {
        background: #c026d3;
      }

      @media (prefers-reduced-motion: reduce) {
        .about__diagram.is-revealed .layer {
          animation: none;
          transform: translateZ(var(--z));
        }

        .about__diagram.is-revealed .legend {
          animation: none;
          opacity: 1;
        }
      }