.cp-hero {
      position: relative;
      min-height: 100vh;
      background: var(--cp-ink);
      color: #fff;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 100px 56px 0;
      height: 100vh;
    }

    .cp-hero__silk {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .cp-hero__silk canvas {
      display: block;
      width: 100% !important;
      height: 100% !important
    }

    .cp-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      /* background:
        radial-gradient(120% 80% at 20% 0%, rgba(13,110,253,.18), transparent 60%),
        linear-gradient(180deg, rgba(6,8,24,.15) 0%, rgba(6,8,24,.55) 60%, rgba(6,8,24,.92) 100%); */
    }

    .cp-hero__inner {
      position: relative;
      z-index: 2;
      /* max-width: 1400px; */
      width: 100%;
      /* padding-bottom: 80px; */
      text-align: center;
      height: inherit;
      align-content: center;
    }

    .cp-hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 8px 14px;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 999px;
      backdrop-filter: blur(8px);
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .85);
      margin-bottom: 36px;
    }

    .cp-hero__eyebrow .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--cp-lime);
      box-shadow: 0 0 0 0 #0d6efd78;
      animation: cpPulse 1.8s ease-out infinite;
    }

    @keyframes cpPulse {
      0% {
        box-shadow: 0 0 0 0 #0d6efd70
      }

      100% {
        box-shadow: 0 0 0 12px rgba(200, 245, 63, 0)
      }
    }

    .cp-hero__title {
      font-family: var(--cp-display);
      font-weight: 500;
      font-size: clamp(56px, 7.2vw, 116px);
      line-height: .98;
      letter-spacing: -.035em;
      color: #fff;
      margin: 0 0 10px;
    }

    .cp-hero__title .lime {
      color: var(--cp-lime);
      font-style: normal;
      font-family: var(--cp-display);
      font-weight: 500
    }

    .cp-hero__mask {
      display: inline-block;
      overflow: hidden
    }

    .cp-hero__mask>span {
      display: inline-block;
      transform: translateY(110%)
    }

    .cp-hero__sub {
      /* font-family: var(--fh) !important; */
      font-size: 18px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.75);
      max-width: 768px;
      margin: 0 0 5px;
      /* letter-spacing: 0.1em; */
      margin: auto;
    }

    .cp-hero__ctas {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .cp-cta-primary {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--cp-lime);
      color: #0a0c14;
      font-family: var(--cp-display);
      font-weight: 400;
      font-size: 14px;
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: 10px 24px;
      border-radius: 999px;
      text-decoration: none;
      border: none;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    }

    .cp-cta-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 40px -10px #0d6efd78;
      color: #0a0c14;
    }

    .cp-cta-ghost {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: transparent;
      color: #fff;
      font-family: var(--cp-display);
      font-weight: 500;
      font-size: 13px;
      letter-spacing: .04em;
      text-transform: uppercase;
      border-radius: 999px;
      text-decoration: none;
      border: 1px solid rgba(255, 255, 255, .22);
      transition: background .25s ease, border-color .25s ease;
    }

    .cp-cta-ghost:hover {
      background: rgba(255, 255, 255, .06);
      border-color: rgba(255, 255, 255, .4);
      color: #fff
    }

    /* Hero right column — telemetry card */
    .cp-hero__panel {
      background: rgba(8, 10, 18, 0.55);
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 18px;
      padding: 22px;
      font-family: var(--font-body);
      color: rgba(255, 255, 255, .92);
    }

    .cp-hero__panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .cp-hero__panel-head .live {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--cp-lime);
    }

    .cp-hero__panel-head .live::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--cp-lime);
      box-shadow: 0 0 8px var(--cp-lime);
    }

    .cp-tel-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: baseline;
      padding: 10px 0;
      border-bottom: 1px dashed rgba(255, 255, 255, .07);
      font-size: 12px;
    }

    .cp-tel-row:last-child {
      border-bottom: none
    }

    .cp-tel-row .k {
      color: rgba(255, 255, 255, .5);
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: 10.5px
    }

    .cp-tel-row .v {
      color: #fff;
      font-weight: 500
    }

    .cp-tel-row .v.good {
      color: var(--cp-lime)
    }

    .cp-tel-row .v.warn {
      color: var(--cp-amber)
    }

    /* hero footer telemetry strip */
    .cp-tel-strip {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 10px;
      border-top: 1px solid rgba(255, 255, 255, .10);
      font-family: var(--font-body);
      font-size: 10px;
      color: rgba(255, 255, 255, .7);
      letter-spacing: .12em;
      text-transform: uppercase;
      background: rgba(8, 10, 18, .4);
      backdrop-filter: blur(10px);
      /* bottom: 0; */
      /* width: 100%; */
      margin-top: auto;
    }

    .cp-tel-strip span {
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .cp-tel-strip .pill {
      padding: 4px 9px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 999px;
      font-size: 10px;
    }


    /* ============================================================
       SECTION 1 — Manual → Autonomous (transformation ledger)
    ============================================================ */
    .cp-shift {
      padding: 140px 56px;
      background: var(--cp-paper);
      border-bottom: 1px solid var(--cp-line);
      position: relative;
    }

    .cp-shift__inner {
      max-width: 1240px;
      margin: 0 auto
    }

    .cp-shift__head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 72px;
    }

    .cp-eyebrow {
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--cp-fg-faint);
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    /* .cp-eyebrow::before {
      content: "";
      width: 32px;
      height: 1px;
      background: var(--cp-fg-faint);
    } */

    .cp-h2 {
      font-family: var(--cp-display);
      font-weight: 500;
      font-size: clamp(40px, 5.4vw, 76px);
      line-height: 1;
      letter-spacing: -.035em;
      color: #0a0c14;
      margin: 18px 0 0;
    }

    .cp-shift__head p {
      font-family: var(--cp-sans);
      font-size: 18px;
      line-height: 1.65;
      color: var(--cp-fg-soft);
      max-width: 480px;
      margin: 0;
    }

    /* the big ledger card */
    .cp-shift__ledger {
      position: relative;
      background: radial-gradient(120% 60% at 0% 0%, rgb(255 255 255 / 5%), #ffffff00 60%), radial-gradient(120% 60% at 100% 100%, rgb(255 255 255 / 8%), transparent 60%), #ffffff;
      border: 1px solid var(--cp-line);
      border-radius: 10px;
      overflow: hidden;
    }

    .cp-shift__legend {
      display: grid;
      grid-template-columns: 60px 1fr 80px 1fr;
      gap: 24px;
      padding: 22px 36px;
      border-bottom: 1px solid var(--cp-line);
      background: rgba(255, 255, 255, .4);
      font-family: var(--font-body);
      font-size: 10.5px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--cp-fg-faint);
      align-items: center;
    }

    .cp-shift__legend .ix {
      color: var(--cp-fg-faint)
    }

    .cp-shift__legend .from {
      color: #ca5b4e
    }

    .cp-shift__legend .from::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ca5b4e;
      vertical-align: middle;
      margin-right: 10px;
    }

    .cp-shift__legend .arrow {
      text-align: center;
      color: var(--cp-fg-faint);
      font-size: 14px;
      letter-spacing: 0;
    }

    .cp-shift__legend .to {
      /* color: #4d6d10; */
    }

    .cp-shift__legend .to::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #0d6efd;
      vertical-align: middle;
      margin-right: 10px;
      box-shadow: 0 0 8px #4d90fe;
    }

    .cp-shift__row {
      display: grid;
      grid-template-columns: 60px 1fr 80px 1fr;
      gap: 24px;
      padding: 28px 36px;
      align-items: center;
      border-bottom: 1px solid var(--cp-line);
      position: relative;
      transition: background .35s ease, padding .35s ease;
    }

    .cp-shift__row:last-child {
      border-bottom: none
    }

    .cp-shift__row:hover {
      background: rgba(255, 255, 255, .6);
    }

    .cp-shift__row .ix {
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .14em;
      color: var(--cp-fg-faint);
    }

    .cp-shift__row .from {
      font-family: var(--cp-sans);
      font-size: 16px;
      line-height: 1.5;
      color: var(--cp-fg-soft);
      text-decoration: line-through;
      text-decoration-color: rgba(202, 91, 78, .4);
      text-decoration-thickness: 1.5px;
      text-underline-offset: 4px;
      transition: opacity .3s ease;
    }

    .cp-shift__row:hover .from {
      opacity: .55
    }

    .cp-shift__row .arrow {
      position: relative;
      height: 1px;
      background: linear-gradient(90deg, #4d90fe4d, var(--cp-line) 45%, #4d90feba);
      align-self: center;
      transform: translateY(0);
    }

    .cp-shift__row .arrow::after {
      content: "";
      position: absolute;
      right: -4px;
      top: 50%;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 5px 0 5px 7px;
      border-color: transparent transparent transparent #0d6efd;
      transform: translateY(-50%);
    }

    .cp-shift__row .to {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: -.012em;
      color: #0a0c14;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .cp-shift__row .ck {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #0d6efd;
      color: #ffffff;
      display: grid;
      place-items: center;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 0 0 0 rgba(200, 245, 63, 0);
      transition: box-shadow .35s ease;
    }

    .cp-shift__row:hover .ck {
      box-shadow: 0 0 0 6px #0d6efd26;
    }

    /* footer signature */
    .cp-shift__sign {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 36px;
      align-items: center;
      padding: 26px 36px;
      background: #0a0c14;
      color: #fff;
    }

    .cp-shift__sign p {
      font-family: var(--cp-display);
      font-weight: 400;
      font-size: 20px;
      line-height: 1.35;
      letter-spacing: -.012em;
      margin: 0;
      color: rgba(255, 255, 255, .92);
    }

    .cp-shift__sign .meta {
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .45);
      display: inline-flex;
      align-items: center;
      gap: 12px;
      white-space: nowrap;
    }

    .cp-shift__sign .meta::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--cp-lime);
      box-shadow: 0 0 8px var(--cp-lime);
    }

    /* outcome chips below */
    .cp-shift__outcomes {
      margin-bottom: 64px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .cp-shift__outcomes .item {
      padding: 26px 28px;
      border: 1px solid var(--cp-line);
      border-radius: 18px;
      background: var(--cp-paper);
      transition: transform .35s ease, border-color .25s ease;
    }

    .cp-shift__outcomes .item:hover {
      transform: translateY(-3px);
      border-color: rgba(10, 12, 20, .2);
    }

    .cp-shift__outcomes .item .k {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-body);
      font-size: 10.5px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgb(10 12 20 / 85%);
      margin-bottom: 16px;
    }

    .cp-shift__outcomes .item .k::before {
      content: "";
      width: 22px;
      height: 1px;
      background: var(--cp-fg-faint);
    }

    .cp-shift__outcomes .item .v {
      font-family: var(--cp-display);
      font-weight: 500;
      font-size: 24px;
      color: #0a0c14;
      letter-spacing: -.018em;
      line-height: 1.2;
    }


    /* ============================================================
       SECTION 2 — Lisa™ & Dave™ (dual personas)
    ============================================================ */
    .cp-agents {
      padding: 160px 56px;
      background: #0a0c14;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .cp-agents::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(45% 30% at 15% 100%, rgba(200, 245, 63, .10), transparent 70%),
        radial-gradient(45% 30% at 85% 0%, rgba(13, 110, 253, .15), transparent 70%);
      pointer-events: none;
    }

    .cp-agents__inner {
      position: relative;
      max-width: 1400px;
      margin: 0 auto
    }

    .cp-agents__head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 80px;
    }

    .cp-agents__head .cp-h2 {
      color: #fff
    }

    .cp-agents__head .cp-eyebrow {
      color: rgba(255, 255, 255, .55)
    }

    .cp-agents__head .cp-eyebrow::before {
      background: rgba(255, 255, 255, .4)
    }

    .cp-agents__head p {
      font-family: var(--cp-sans);
      font-size: 18px;
      line-height: 1.65;
      color: rgba(255, 255, 255, .7);
      max-width: 460px;
      margin: 0;
    }

    .cp-agents__pair {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 40px;
      align-items: stretch;
    }

    .cp-agent {
      position: relative;
      padding: 40px 36px;
      border: 0px solid rgba(255, 255, 255, .10);
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
      backdrop-filter: blur(8px);
      transition: transform .5s cubic-bezier(.22, .61, .36, 1), border-color .3s ease;
    }

    .cp-agent:hover {
      transform: translateY(-6px);
      border-color: rgba(255, 255, 255, .22);
    }

    .cp-agent__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32px;
    }

    .cp-agent__monogram {
      width: 88px;
      height: 88px;
      border-radius: 24px;
      display: grid;
      place-items: center;
      font-family: var(--cp-display);
      font-weight: 500;
      font-size: 52px;
      letter-spacing: -.04em;
      position: relative;
      overflow: hidden;
    }

    .cp-agent.lisa .cp-agent__monogram {
      background: linear-gradient(135deg, #4d90fe, #0d6efd);
      color: #ffffff;
    }

    .cp-agent.dave .cp-agent__monogram {
      background: linear-gradient(135deg, #4f8dff, var(--cp-blue-deep));
      color: #fff;
    }

    .cp-agent__monogram::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35), transparent 50%);
    }

    .cp-agent__badge {
      font-family: var(--font-body);
      font-size: 10px;
      letter-spacing: .16em;
      padding: 6px 10px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 999px;
      color: rgba(255, 255, 255, .7);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .cp-agent__badge::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #0a58ca;
      box-shadow: 0 0 6px #4d90fe;
    }

    .cp-agent__name {
      font-family: var(--cp-display);
      font-weight: 500;
      font-size: 40px;
      letter-spacing: -.02em;
      color: #fff;
      margin: 0 0 6px;
    }

    .cp-agent__role {
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .55);
      margin: 0 0 24px;
    }

    .cp-agent__quote {
      font-family: var(--cp-display);
      font-weight: 300;
      font-style: italic;
      font-size: 21px;
      line-height: 1.45;
      color: rgba(255, 255, 255, .85);
      margin: 0 0 28px;
      padding-left: 18px;
      border-left: 2px solid rgba(255, 255, 255, .18);
    }

    .cp-agent__skills {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }

    .cp-agent__skills li {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      align-items: center;
      font-family: var(--font-body);
      font-size: 15px;
      color: rgb(255 255 255 / 97%);
    }

    .cp-agent__skills li::before {
      content: "›";
      color: #4d90fe;
      font-size: 14px;
    }

    .cp-agent.dave .cp-agent__skills li::before {
      color: #4f8dff
    }

    /* bridge — connecting dots */
    .cp-agents__bridge {
      width: 100px;
      display: grid;
      place-items: center;
      position: relative;
    }

    .cp-agents__bridge::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 0px;
      background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 4px, transparent 4px 8px);
    }

    .cp-agents__bridge .core {
      position: relative;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: #0a0c14;
      border: 1px solid rgba(255, 255, 255, .18);
      display: grid;
      place-items: center;
      font-family: var(--cp-display);
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      box-shadow: 0 0 0 8px rgba(13, 110, 253, .12);
      letter-spacing: 2px;
    }

    .cp-agents__bridge .core::after {
      content: "";
      position: absolute;
      inset: -16px;
      border: 1px dashed rgb(255 255 255 / 55%);
      border-radius: 50%;
      animation: cpOrbit 14s linear infinite;
    }

    @keyframes cpOrbit {
      to {
        transform: rotate(360deg)
      }
    }

    /* ============================================================
       SECTION 3 — Intelligent Capabilities (asymmetric grid)
    ============================================================ */
    .cp-caps {
      padding: 160px 56px;
      background: var(--cp-paper);
      border-bottom: 1px solid var(--cp-line);
    }

    .cp-caps__inner {
      max-width: 1400px;
      margin: 0 auto
    }

    .cp-caps__head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 60px;
    }

    .cp-caps__head p {
      font-family: var(--cp-sans);
      font-size: 18px;
      line-height: 1.65;
      color: var(--cp-fg-soft);
      max-width: 480px;
      margin: 0;
    }

    .cp-caps__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .cp-cap {
      position: relative;
      isolation: isolate;
      border: 1px solid var(--cp-line);
      background: linear-gradient(180deg, var(--cp-paper), var(--cp-paper-2));
      display: flex;
      flex-direction: column;
      min-height: 300px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(15, 15, 20, .04);
      animation: cpCapIn .85s cubic-bezier(.16, 1, .3, 1) both;
      transition: transform .85s cubic-bezier(.16, 1, .3, 1),
        border-color .45s ease,
        box-shadow .45s ease !important;
    }

    @keyframes cpCapIn {
      from {
        opacity: 0;
        transform: translateY(34px) scale(.985);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .cp-cap:nth-child(1) {
      animation-delay: 0ms
    }

    .cp-cap:nth-child(2) {
      animation-delay: 70ms
    }

    .cp-cap:nth-child(3) {
      animation-delay: 140ms
    }

    .cp-cap:nth-child(4) {
      animation-delay: 210ms
    }

    .cp-cap:nth-child(5) {
      animation-delay: 280ms
    }

    .cp-cap:nth-child(6) {
      animation-delay: 350ms
    }

    .cp-cap::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(120% 80% at 80% -20%, rgba(0, 0, 0, .025), transparent 60%);
    }

    .cp-cap::after {
      content: "";
      position: absolute;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      left: var(--mx, 50%);
      top: var(--my, 50%);
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(13, 110, 253, .22), transparent 65%);
      opacity: 0;
      transition: opacity .4s ease;
    }

    .cp-cap>* {
      position: relative;
      z-index: 1
    }

    .cp-cap:hover {
      border-color: rgba(13, 110, 253, .45) !important;
      box-shadow: 0 26px 56px -30px rgba(10, 40, 100, .28),
        0 0 0 1px rgba(13, 110, 253, .14) !important;
      transform: translateY(-6px) !important;
    }

    .cp-cap:hover::after {
      opacity: 1
    }

    .cp-cap__num {
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .3em;
      color: var(--cp-fg-faint);
      text-transform: uppercase;
    }

    .cp-cap__glyph {
      position: absolute;
      top: 24px;
      right: 24px;
      width: 40px;
      height: 40px;
      border-radius: 13px;
      background: #0a0c14;
      border: 1px solid #0a0c14;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 17px;
      box-shadow: 0 4px 12px rgba(15, 15, 20, .12);
      transition: transform .55s cubic-bezier(.16, 1, .3, 1),
        background .4s ease,
        color .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
      z-index: 2;
    }

    .cp-cap:hover .cp-cap__glyph {
      transform: rotate(180deg) scale(1.12);
      background: var(--cp-blue);
      border-color: var(--cp-blue);
      color: #fff;
      box-shadow: 0 8px 22px rgba(13, 110, 253, .35);
    }

    .cp-cap__title {
      font-family: var(--cp-display);
      margin: auto 0 12px;
      transition: transform .5s ease;
    }

    .cp-cap:hover .cp-cap__title {
      transform: translateX(4px)
    }

    .cp-cap__desc {
      font-family: var(--cp-sans);
      font-size: 15px;
      line-height: 1.55;
      color: var(--cp-fg-soft);
      max-width: 46ch;
      margin: 0;
    }

    .cp-cap__tags {
      margin-top: 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .cp-cap__tags span {
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--cp-fg-soft);
      border: 1px solid var(--cp-line);
      border-radius: 999px;
      padding: 5px 11px;
      background: rgba(0, 0, 0, .015);
      transition: border-color .4s ease;
    }

    .cp-cap:hover .cp-cap__tags span {
      border-color: rgba(0, 0, 0, .16)
    }

    .cp-cap--featured {
      background:
        radial-gradient(90% 120% at 110% 120%, rgba(13, 110, 253, .10), transparent 55%),
        radial-gradient(80% 90% at -10% -10%, rgba(13, 110, 253, .14), transparent 55%),
        linear-gradient(180deg, #ffffff, #f4f7fc);
    }

    .cp-cap--featured .cp-cap__glyph {
      color: #fff;
      background: var(--cp-blue);
      border-color: transparent;
      box-shadow: 0 8px 22px rgba(13, 110, 253, .35);
    }

    .cp-cap--featured:hover .cp-cap__glyph {
      background: var(--cp-blue-deep);
      border-color: var(--cp-blue-deep);
      color: #fff;
      box-shadow: 0 10px 26px rgba(10, 88, 202, .4);
    }

    .cp-cap--featured .cp-cap__num {
      color: var(--cp-fg-soft)
    }

    /* ============================================================
       SECTION 4 — Enterprise Scale (magnitude grid · dark)
    ============================================================ */
    .cp-scale {
      padding: 160px 56px;
      background: #0a0c14;
      color: #fff;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .cp-scale::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(50% 40% at 0% 0%, rgba(13, 110, 253, .18), transparent 70%),
        radial-gradient(35% 30% at 100% 100%, #0d6efd1f, transparent 70%);
      pointer-events: none;
    }

    .cp-scale::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
      pointer-events: none;
      opacity: .5;
    }

    .cp-scale__inner {
      position: relative;
      max-width: 1320px;
      margin: 0 auto;
      z-index: 2
    }

    .cp-scale__head {
      margin-bottom: 70px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
    }

    .cp-scale__head .cp-eyebrow {
      color: rgba(255, 255, 255, .55)
    }

    .cp-scale__head .cp-eyebrow::before {
      background: rgba(255, 255, 255, .35)
    }

    .cp-scale__head .cp-h2 {
      color: #fff
    }

    .cp-scale__head p {
      font-family: var(--cp-sans);
      font-size: 18px;
      line-height: 1.65;
      color: rgba(255, 255, 255, .7);
      max-width: 480px;
      margin: 0;
    }

    /* the grid */
    .cp-scale__grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 16px;
    }

    /* base tile */
    .cp-tile {
      position: relative;
      overflow: hidden;
      padding: 32px;
      border: 0px solid rgba(255, 255, 255, .10);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
      backdrop-filter: blur(6px);
      transition: transform .45s cubic-bezier(.22, .61, .36, 1),
        border-color .3s ease, background .3s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 240px;
    }

    .cp-tile:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, .25);
      background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    }

    .cp-tile__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: var(--font-body);
      font-size: 10.5px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5);
    }

    .cp-tile__head .live::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #0d6efd;
      display: inline-block;
      margin-right: 8px;
      vertical-align: middle;
      box-shadow: 0 0 8px #4d90fe;
    }

    .cp-tile__num {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 56px;
      line-height: .95;
      letter-spacing: -.04em;
      color: #fff;
      font-variant-numeric: tabular-nums;
    }

    .cp-tile__num .u {
      font-family: var(--font-body);
      font-size: 14px;
      color: rgba(255, 255, 255, .55);
      margin-left: 6px;
      letter-spacing: .04em;
      vertical-align: middle;
    }

    .cp-tile__label {
      font-family: var(--cp-display);
      font-weight: 400;
      font-size: 18px;
      color: rgba(255, 255, 255, .92);
      margin: 14px 0 4px;
      letter-spacing: -.01em;
    }

    .cp-tile__sub {
      font-family: var(--cp-sans);
      font-size: 15px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.5;
      margin: 0;
    }

    /* hero tile — spans 2 rows on left */
    .cp-tile--hero {
      grid-column: 1;
      grid-row: 1 / 3;
      padding: 40px;
      background: linear-gradient(180deg, rgba(13, 110, 253, .18), rgba(13, 110, 253, .02));
      border-color: rgba(13, 110, 253, .3);
    }

    .cp-tile--hero .cp-tile__num {
      font-size: clamp(80px, 9vw, 132px);
      line-height: .9;
    }

    .cp-tile--hero .cp-tile__num .u {
      font-size: .2em;
      color: rgba(255, 255, 255, .7);
    }

    .cp-tile--hero .cp-tile__label {
      font-size: 24px;
      margin-top: 22px;
    }

    .cp-tile--hero .cp-tile__sub {
      font-size: 14.5px;
      max-width: 360px;
    }

    /* radar background for hero */
    .cp-tile--hero .radar {
      position: absolute;
      bottom: -120px;
      right: -120px;
      width: 460px;
      height: 460px;
      pointer-events: none;
      z-index: 0;
    }

    .cp-tile--hero .radar::before,
    .cp-tile--hero .radar::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(13, 110, 253, .22);
    }

    .cp-tile--hero .radar::after {
      inset: 22%;
      border-color: rgba(13, 110, 253, .3)
    }

    .cp-tile--hero .radar .r3 {
      position: absolute;
      inset: 44%;
      border-radius: 50%;
      border: 1px solid #0d6efd;
    }

    .cp-tile--hero .radar .core {
      position: absolute;
      inset: 50%;
      width: 14px;
      height: 14px;
      margin: -7px 0 0 -7px;
      border-radius: 50%;
      background: #0d6efd;
      box-shadow: 0 0 0 6px #4d90fe, 0 0 30px #4d90fe;
      animation: cpPulse 1.8s ease-out infinite;
    }

    .cp-tile--hero .radar .sweep {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(from 0deg, transparent 0deg, #4d90fe3b 50deg, transparent 90deg);
      animation: cpOrbit 6s linear infinite;
      mask: radial-gradient(circle at center, transparent 50%, #000 51%, #000 100%);
      -webkit-mask: radial-gradient(circle at center, transparent 50%, #000 51%, #000 100%);
    }

    .cp-tile--hero .cp-tile__head,
    .cp-tile--hero .cp-tile__body {
      position: relative;
      z-index: 2;
    }

    /* micro-viz inside small tiles */
    .cp-mviz {
      margin-top: 22px;
      height: 38px;
      display: flex;
      align-items: flex-end;
      gap: 4px;
    }

    .cp-mviz span {
      display: block;
      /* width: 5px; */
      border-radius: 2px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .08));
    }

    .cp-mviz.cloud {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 38px;
    }

    .cp-mviz.cloud .b {
      display: inline-flex;
      padding: 4px 10px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 999px;
      font-family: var(--font-body);
      font-size: 10px;
      letter-spacing: .14em;
      color: rgba(255, 255, 255, .7);
    }

    .cp-mviz.cloud .b.lime {
      background: #0d6efd2b;
      border-color: #0d6efd4d;
      color: #0d6efd;
    }

    .cp-mviz.dots {
      display: grid;
      grid-template-columns: repeat(14, 1fr);
      gap: 4px;
      height: 38px;
      align-content: center;
    }

    .cp-mviz.dots i {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .25);
    }

    .cp-mviz.dots i.on {
      background: #0d6efd;
      box-shadow: 0 0 6px #4d90fe;
    }

    .cp-mviz.heartbeat {
      height: 38px;
      width: 100%;
    }

    .cp-mviz.heartbeat svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* outcome ticker strip */
    .cp-scale__ticker {
      margin-top: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 24px;
      border: 0px solid rgba(255, 255, 255, .10);
      border-radius: 999px;
      background: rgba(255, 255, 255, .03);
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .55);
      flex-wrap: wrap;
      gap: 10px;
    }

    .cp-scale__ticker span {
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .cp-scale__ticker span::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #ce2367;
      box-shadow: 0 0 6px #a1074c;
    }

    .cp-scale__ticker span:nth-child(2)::before {
      background: var(--cp-blue);
      box-shadow: 0 0 6px var(--cp-blue)
    }

    .cp-scale__ticker span:nth-child(3)::before {
      background: var(--cp-amber);
      box-shadow: 0 0 6px var(--cp-amber)
    }

    .cp-scale__ticker span:nth-child(4)::before {
      background: #9b7dff;
      box-shadow: 0 0 6px #9b7dff
    }

    /* ============================================================
       SECTION 5 — Hybrid Multi-Cloud Matrix
    ============================================================ */
    .cp-matrix {
      padding: 160px 56px;
      background: var(--cp-paper);
      border-bottom: 1px solid var(--cp-line);
      position: relative;
    }

    .cp-matrix__inner {
      max-width: 1400px;
      margin: 0 auto
    }

    .cp-matrix__head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 80px;
    }

    .cp-matrix__head p {
      font-family: var(--cp-sans);
      font-size: 18px;
      line-height: 1.65;
      color: var(--cp-fg-soft);
      max-width: 480px;
      margin: 0;
    }

    .cp-matrix__diagram {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .cp-matrix__hub {
      position: relative;
      width: 100%;
      aspect-ratio: 1;
      max-width: 460px;
      margin: 0 auto;
      display: grid;
      place-items: center;
    }

    .cp-matrix__hub::before,
    .cp-matrix__hub::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid var(--cp-line);
    }

    .cp-matrix__hub::after {
      inset: 14%;
      border-color: rgba(10, 12, 20, .16);
    }

    .cp-matrix__hub-core {
      width: 60%;
      aspect-ratio: 1;
      background: #0a0c14;
      color: var(--cp-lime);
      border-radius: 50%;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 40px;
      box-shadow: 0 30px 80px -20px rgba(10, 12, 20, .45);
      position: relative;
      z-index: 2;
    }

    .cp-matrix__hub-core .label {
      font-family: var(--font-body);
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: #ffffff8f;
      margin-bottom: 8px;
    }

    .cp-matrix__hub-core .name {
      font-family: var(--cp-display);
      font-weight: 500;
      font-size: 28px;
      letter-spacing: -.02em;
      line-height: 1.1;
      color: #fff;
    }

    .cp-matrix__hub .ring-dot {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--cp-blue);
      box-shadow: 0 0 0 4px rgba(13, 110, 253, .12);
      z-index: 3;
    }

    .cp-matrix__hub .ring-dot.d1 {
      top: 50%;
      left: 0;
      transform: translate(-50%, -50%)
    }

    .cp-matrix__hub .ring-dot.d2 {
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #212529;
      box-shadow: 0 0 0 4px #6c757d40;
    }

    .cp-matrix__hub .ring-dot.d3 {
      top: 50%;
      right: 0;
      transform: translate(50%, -50%)
    }

    .cp-matrix__hub .ring-dot.d4 {
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%);
      background: #dc3545;
      box-shadow: 0 0 0 4px #dc354545;
    }

    .cp-matrix__nodes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .cp-matrix__node {
      padding: 24px 22px;
      border: 1px solid rgb(213 213 213 / 10%);
      border-radius: 10px;
      background: #f9f9f9;
      display: grid;
      grid-template-columns: 36px 1fr;
      gap: 16px;
      align-items: center;
      transition: transform .35s ease, border-color .3s ease, background .3s ease;
      box-shadow: 2px 5px 10px #00000014;
    }

    .cp-matrix__node:hover {
      transform: translateY(-3px);
      border-color: rgb(177 177 177 / 22%);
      background: #fff;
    }

    .cp-matrix__node .icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid var(--cp-line);
      display: grid;
      place-items: center;
      color: #0a0c14;
    }

    .cp-matrix__node .text .name {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 14px;
      color: #0a0c14;
    }

    .cp-matrix__node .text .meta {
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .14em;
      color: var(--cp-fg-faint);
      text-transform: uppercase;
    }

    .cp-matrix__note {
      margin-top: 60px;
      padding: 26px 32px;
      border: 1px dashed var(--cp-line);
      border-radius: 16px;
      font-family: var(--font-body);
      font-size: 15px;
      color: var(--cp-fg-soft);
      line-height: 1.7;
      text-align: center;
    }

    .cp-matrix__note strong {
      color: #0a0c14;
      font-weight: 500;
    }

    /* ============================================================
       SECTION 6 — End-to-End Stack (vertical slabs)
    ============================================================ */
    .cp-stack {
      padding: 160px 56px;
      background: #0a0c14;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .cp-stack::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      height: 100%;
      background: radial-gradient(60% 50% at 50% 0%, rgba(13, 110, 253, .16), transparent 70%);
      pointer-events: none;
    }

    .cp-stack__inner {
      position: relative;
      max-width: 1180px;
      margin: 0 auto
    }

    .cp-stack__head {
      margin-bottom: 60px;
      text-align: center
    }

    .cp-stack__head .cp-eyebrow {
      color: rgba(255, 255, 255, .55);
      justify-content: center;
      display: inline-flex
    }

    .cp-stack__head .cp-eyebrow::before {
      background: rgba(255, 255, 255, .35)
    }

    .cp-stack__head .cp-h2 {
      color: #fff
    }

    .cp-stack__head p {
      font-family: var(--cp-sans);
      font-size: 17px;
      line-height: 1.6;
      color: rgba(255, 255, 255, .7);
      max-width: 580px;
      margin: 28px auto 0;
    }

    .cp-stack__list {
      display: grid;
      gap: 12px;
      perspective: 1400px;
    }

    .cp-slab {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: center;
      padding: 22px 32px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      backdrop-filter: blur(8px);
      transition: transform .4s cubic-bezier(.22, .61, .36, 1), background .3s ease, border-color .3s ease;
    }

    .cp-slab:hover {
      transform: translateX(8px);
      background: rgba(255, 255, 255, .07);
      border-color: rgba(255, 255, 255, .22);
    }

    .cp-slab .layer {
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .18em;
      color: rgba(255, 255, 255, .45);
    }

    .cp-slab .title {
      font-family: var(--cp-display);
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -.012em;
      color: #fff;
    }

    .cp-slab .meta {
      font-family: var(--font-body);
      font-size: 13px;
      color: rgba(255, 255, 255, .55);
      letter-spacing: .08em;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .cp-slab .meta .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--cp-lime);
      box-shadow: 0 0 8px var(--cp-lime);
    }

    .cp-slab:nth-child(2n) .meta .dot {
      background: var(--cp-blue);
      box-shadow: 0 0 8px var(--cp-blue)
    }

    .cp-slab:nth-child(3n) .meta .dot {
      background: var(--cp-amber);
      box-shadow: 0 0 8px var(--cp-amber)
    }

    /* ============================================================
       SECTION 7 — Workspace Mock UI
    ============================================================ */
    .cp-workspace {
      padding: 160px 56px;
      background: var(--cp-paper);
      border-bottom: 0px solid var(--cp-line);
    }

    .cp-workspace__inner {
      max-width: 1400px;
      margin: 0 auto
    }

    .cp-workspace__head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 60px;
    }

    .cp-workspace__head p {
      font-family: var(--cp-sans);
      font-size: 18px;
      line-height: 1.65;
      color: var(--cp-fg-soft);
      max-width: 480px;
      margin: 0;
    }

    .cp-ws {
      position: relative;
      border: 1px solid var(--cp-line);
      border-radius: 24px;
      overflow: hidden;
      background: #fbfbf8;
      box-shadow: 0 60px 120px -40px rgba(10, 12, 20, .18);
    }

    .cp-ws__chrome {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--cp-line);
      background: var(--cp-paper-2);
    }

    .cp-ws__chrome .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(10, 12, 20, .12)
    }

    .cp-ws__chrome .url {
      flex: 1;
      margin-left: 12px;
      padding: 6px 14px;
      background: #fff;
      border: 1px solid var(--cp-line);
      border-radius: 999px;
      font-family: var(--font-body);
      font-size: 11px;
      color: var(--cp-fg-soft);
      letter-spacing: .04em;
    }

    .cp-ws__chrome .url::before {
      content: "🔒";
      opacity: .5;
      margin-right: 8px;
      font-size: 10px;
    }

    .cp-ws__body {
      display: grid;
      grid-template-columns: 220px 1fr 280px;
      min-height: 560px;
    }

    .cp-ws__sidebar {
      border-right: 1px solid var(--cp-line);
      padding: 22px 18px;
      background: rgba(245, 245, 242, .4);
    }

    .cp-ws__brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      background: #0a0c14;
      color: #fff;
      font-family: var(--cp-display);
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 20px;
    }

    .cp-ws__brand .square {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: var(--cp-lime);
      color: #0a0c14;
      display: grid;
      place-items: center;
      font-weight: 700;
      font-size: 11px;
    }

    .cp-ws__nav {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 4px;
    }

    .cp-ws__nav li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      font-family: var(--cp-sans);
      font-size: 13px;
      color: var(--cp-fg-soft);
      cursor: pointer;
    }

    .cp-ws__nav li.active {
      background: #fff;
      color: #0a0c14;
      font-weight: 500;
      box-shadow: 0 4px 14px -6px rgba(10, 12, 20, .12);
    }

    .cp-ws__nav li .badge {
      margin-left: auto;
      background: var(--cp-lime);
      color: #0a0c14;
      font-family: var(--font-body);
      font-size: 9px;
      padding: 2px 6px;
      border-radius: 6px;
    }

    .cp-ws__nav li::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      opacity: .35;
    }

    .cp-ws__nav li.active::before {
      background: var(--cp-lime);
      opacity: 1
    }

    .cp-ws__main {
      padding: 26px 28px;
      display: grid;
      gap: 22px;
      align-content: start
    }

    .cp-ws__topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .cp-ws__topbar h3 {
      font-family: var(--cp-display);
      font-weight: 500;
      font-size: 22px;
      color: #0a0c14;
      margin: 0;
      letter-spacing: -.01em;
    }

    .cp-ws__topbar .sub {
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .14em;
      color: var(--cp-fg-faint);
      text-transform: uppercase;
    }

    .cp-ws__topbar .live {
      font-family: var(--font-body);
      font-size: 11px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(200, 245, 63, .18);
      color: #0d6efde0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .cp-ws__topbar .live::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--cp-lime);
      box-shadow: 0 0 8px var(--cp-lime);
      animation: cpPulse 1.8s ease-out infinite;
    }

    .cp-ws__stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .cp-ws__stat {
      padding: 18px;
      background: #fff;
      border: 1px solid var(--cp-line);
      border-radius: 14px;
    }

    .cp-ws__stat .k {
      font-family: var(--font-body);
      font-size: 10px;
      letter-spacing: .18em;
      color: var(--cp-fg-faint);
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .cp-ws__stat .v {
      font-family: var(--cp-display);
      font-weight: 500;
      font-size: 28px;
      color: #0a0c14;
      letter-spacing: -.02em;
      line-height: 1;
    }

    .cp-ws__stat .v small {
      font-family: var(--font-body);
      font-size: 11px;
      color: var(--cp-fg-soft);
      margin-left: 4px;
    }

    .cp-ws__stat .bar {
      margin-top: 12px;
      height: 6px;
      background: var(--cp-paper-2);
      border-radius: 999px;
      overflow: hidden;
    }

    .cp-ws__stat .bar i {
      display: block;
      height: 100%;
      background: var(--cp-lime);
      border-radius: 999px;
    }

    .cp-ws__stat:nth-child(2) .bar i {
      background: var(--cp-blue)
    }

    .cp-ws__stat:nth-child(3) .bar i {
      background: var(--cp-amber)
    }

    .cp-ws__stat:nth-child(4) .bar i {
      background: #9b7dff
    }

    .cp-ws__chart {
      padding: 22px;
      background: #fff;
      border: 1px solid var(--cp-line);
      border-radius: 14px;
    }

    .cp-ws__chart .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .cp-ws__chart .head h4 {
      font-family: var(--cp-display);
      font-weight: 500;
      font-size: 14px;
      color: #0a0c14;
      margin: 0;
    }

    .cp-ws__chart .head .legend {
      display: flex;
      gap: 16px;
      font-family: var(--font-body);
      font-size: 10px;
      color: var(--cp-fg-soft);
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .cp-ws__chart .head .legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .cp-ws__chart .head .legend span::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: var(--cp-lime);
    }

    .cp-ws__chart .head .legend span:nth-child(2)::before {
      background: var(--cp-blue)
    }

    .cp-ws__chart svg {
      width: 100%;
      height: 140px;
      display: block
    }

    .cp-ws__side {
      border-left: 1px solid var(--cp-line);
      padding: 26px 22px;
      display: grid;
      gap: 18px;
      align-content: start;
      background: rgba(245, 245, 242, .4);
    }

    .cp-ws__side h4 {
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .18em;
      color: var(--cp-fg-faint);
      text-transform: uppercase;
      margin: 0;
    }

    .cp-ws__event {
      display: grid;
      grid-template-columns: 12px 1fr auto;
      gap: 12px;
      align-items: start;
      padding-bottom: 14px;
      border-bottom: 1px dashed var(--cp-line);
    }

    .cp-ws__event:last-child {
      border-bottom: none
    }

    .cp-ws__event .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-top: 5px;
      background: var(--cp-lime);
    }

    .cp-ws__event.warn .dot {
      background: var(--cp-amber)
    }

    .cp-ws__event.info .dot {
      background: var(--cp-blue)
    }

    .cp-ws__event .text {
      font-family: var(--cp-sans);
      font-size: 13px;
      color: #0a0c14;
      line-height: 1.45;
    }

    .cp-ws__event .text .sys {
      font-family: var(--font-body);
      font-size: 10px;
      color: var(--cp-fg-faint);
      letter-spacing: .12em;
      text-transform: uppercase;
      display: block;
      margin-bottom: 3px;
    }

    .cp-ws__event .time {
      font-family: var(--font-body);
      font-size: 10px;
      color: var(--cp-fg-faint);
      letter-spacing: .06em;
    }

    /* ============================================================
       SECTION 8 — Outcomes counter quotes
    ============================================================ */
    .cp-outcomes {
      padding: 160px 56px;
      background: #f4f6fb;
      border-bottom: 0px solid var(--cp-line);
    }

    .cp-outcomes__inner {
      /* max-width: 1400px; */
      margin: 0 auto;
      padding: 0 56px 0px;
      /* max-width: 1400px; */
      margin: 0 auto;
      background: rgb(242 242 242);
    }

    .cp-outcomes__head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 60px;
    }

    .cp-outcomes__head p {
      font-family: var(--cp-sans);
      font-size: 18px;
      line-height: 1.65;
      color: var(--cp-fg-soft);
      max-width: 480px;
      margin: 0;
    }

    .cp-outcomes__grid {
      /* display: grid; */
      /* grid-template-columns: repeat(3, 1fr); */
      /* gap: 1px; */
      /* background: var(--cp-line); */
      /* border: 1px solid var(--cp-line); */
      /* border-radius: 24px; */
      overflow: hidden;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border);
      border: 0px solid var(--border);
    }

    .cp-outcome {
      /* background: var(--cp-paper); */
      /* padding: 44px 32px 36px; */
      /* position: relative; */
      overflow: hidden;
      transition: background .3s ease;
      background: #f3f3f3;
      padding: 40px 0px;
      position: relative;
      overflow: hidden;
      gap: 0.5rem;
    }

    .cp-outcome:hover {
      /* background: #fff; */
    }

    .cp-outcome__num {
      font-weight: 500;
      font-size: clamp(48px, 5vw, 76px);
      line-height: .95;
      letter-spacing: -.04em;
      color: #0a0c14;
      /* margin: 0 0 18px; */
      display: flex;
      align-items: end;
    }

    .cp-outcome__num .u {
      font-family: var(--font-body);
      /* font-size: .26em; */
      /* color: var(--cp-fg-soft); */
      margin-left: 6px;
      letter-spacing: .04em;
      vertical-align: middle;
      font-weight: 100;
    }

    .cp-outcome__label {
      font-weight: 400;
      /* font-size: 18px; */
      /* color: #0a0c14; */
      /* margin: 0 0 6px; */
      letter-spacing: -.01em;
      font-family: var(--font-body) !IMPORTANT;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgb(0 0 0 / 75%);
      margin-bottom: 5px;
      display: block;
    }

    .cp-outcome__desc {
      font-family: var(--cp-sans);
      font-size: 15px;
      line-height: 1.55;
      color: var(--cp-fg-soft);
      margin: 0;
    }

    .cp-outcome::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    .cp-outcome:nth-child(1)::before {
      background: var(--cp-lime)
    }

    .cp-outcome:nth-child(2)::before {
      background: var(--cp-blue)
    }

    .cp-outcome:nth-child(3)::before {
      background: var(--cp-amber)
    }

    .cp-outcome:nth-child(4)::before {
      background: #9b7dff
    }

    .cp-outcome:nth-child(5)::before {
      background: #33e8cc
    }

    .cp-outcome:nth-child(6)::before {
      background: #ff5c35
    }

    .cp-outcome:hover::before {
      transform: scaleX(1)
    }

    .cp-outcome__index {
      position: absolute;
      top: 18px;
      right: 22px;
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .18em;
      color: var(--cp-fg-faint);
    }



    .cp-compound {
      padding: 160px 56px;
      background: #f4f6fb;
      border-bottom: 0px solid var(--cp-line);
    }

    .cp-compound__inner {
      max-width: 1400px;
      /* padding: 0 56px 0px; */
      margin: 0 auto;
      /* background: rgb(242 242 242); */
    }

    .cp-compound__head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 60px;
    }

    .cp-compound__head p {
      font-family: var(--cp-sans);
      font-size: 18px;
      line-height: 1.65;
      color: var(--cp-fg-soft);
      max-width: 480px;
      margin: 0;
    }

    .cp-compound__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--cp-line);
      border: 1px solid var(--cp-line);
      border-radius: 24px;
      overflow: hidden;

    }

    .cp-compound {
      background: var(--cp-paper);
      padding: 44px 32px 36px;
      overflow: hidden;
      transition: background .3s ease;
      position: relative;
      overflow: hidden;
      gap: 1rem;
      display: grid;
    }

    .cp-compound__num {
      font-weight: 500;
      font-size: clamp(48px, 5vw, 76px);
      line-height: .95;
      letter-spacing: -.04em;
      color: #0a0c14;
      /* margin: 0 0 18px; */
      display: flex;
      align-items: baseline;
    }

    .cp-compound__num .u {
      font-family: var(--font-body);
      font-size: .26em;
      /* color: var(--cp-fg-soft); */
      margin-left: 6px;
      letter-spacing: .04em;
      vertical-align: middle;
      font-weight: 100;
    }

    .cp-compound__label {
      font-weight: 400;
      /* font-size: 18px; */
      /* color: #0a0c14; */
      /* margin: 0 0 6px; */
      letter-spacing: -.01em;
      font-family: var(--font-body) !IMPORTANT;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgb(0 0 0 / 75%);
      margin-bottom: 5px;
      display: block;
    }

    .cp-compound__desc {
      font-family: var(--cp-sans);
      font-size: 15px;
      line-height: 1.55;
      color: var(--cp-fg-soft);
      margin: 0;
    }

    .cp-compound::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    .cp-compound:nth-child(1)::before {
      background: var(--cp-lime)
    }

    .cp-compound:nth-child(2)::before {
      background: var(--cp-blue)
    }

    .cp-compound:nth-child(3)::before {
      background: var(--cp-amber)
    }

    .cp-compound:nth-child(4)::before {
      background: #9b7dff
    }

    .cp-compound:nth-child(5)::before {
      background: #33e8cc
    }

    .cp-compound:nth-child(6)::before {
      background: #ff5c35
    }

    .cp-compound:hover::before {
      transform: scaleX(1)
    }

    .cp-compound__index {
      position: absolute;
      top: 18px;
      right: 22px;
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .18em;
      color: var(--cp-fg-faint);
    }
















    /* ============================================================
       SECTION 9 — Industries pill strip
    ============================================================ */
    .cp-industries {
      padding: 140px 56px;
      background: var(--cp-paper);
      border-bottom: 1px solid var(--cp-line);
      position: relative;
      overflow: hidden;
    }

    .cp-industries__inner {
      max-width: 1400px;
      margin: 0 auto;
      position: relative;
      z-index: 2
    }

    .cp-industries__head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 60px;
    }

    .cp-industries__head p {
      font-family: var(--cp-sans);
      font-size: 18px;
      line-height: 1.65;
      color: var(--cp-fg-soft);
      max-width: 480px;
      margin: 0;
    }

    .cp-industries__cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: flex-start;
    }

    .cp-industries__cloud a {
      /* display: inline-flex; */
      /* align-items: center; */
      text-align: center;
      padding: 8px 14px;
      border: 1px solid var(--cp-line);
      border-radius: 999px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 14px;
      color: #0a0c14;
      text-decoration: none;
      background: var(--cp-paper);
      transition: transform .35s cubic-bezier(.22, .61, .36, 1), background .25s ease, border-color .25s ease, color .25s ease;
    }

    .cp-industries__cloud a:hover {
      background: #0a0c14;
      color: #fff;
      border-color: #0a0c14;
      transform: translateY(-2px);
    }

    .cp-industries__cloud a .ix {
      font-family: var(--font-body);
      font-size: 10px;
      letter-spacing: .12em;
      color: var(--cp-fg-faint);
    }

    .cp-industries__cloud a:hover .ix {
      color: rgba(255, 255, 255, .55)
    }

    .cp-industries__cloud a.large {
      /* font-size: 22px; */
      /* padding: 18px 28px; */
    }

    .cp-industries__cloud a.medium {
      /* font-size: 18px; */
    }

    .cp-industries__map {
      position: absolute;
      right: -120px;
      top: 50%;
      transform: translateY(-50%);
      width: 720px;
      height: 720px;
      background-image:
        radial-gradient(circle at center, rgba(10, 12, 20, .06) 1px, transparent 1.4px);
      background-size: 14px 14px;
      mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
      pointer-events: none;
      opacity: .9;
      z-index: 1;
    }

    /* ============================================================
       FINAL CP CTA — local override of cta-section feel
    ============================================================ */
    .cp-final {
      position: relative;
      overflow: hidden;
      padding: 180px 40px;
      background: #0a0c14;
      color: #fff;
      text-align: center;
    }

    .cp-final .orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      pointer-events: none;
    }

    .cp-final .orbit::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 1), rgba(255, 255, 255, .02));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: .7;
    }

    .cp-final .orbit1 {
      width: clamp(220px, 28vw, 340px);
      height: clamp(220px, 28vw, 340px);
      animation: cpFinalOrbit 22s linear infinite;
    }

    .cp-final .orbit2 {
      width: clamp(320px, 42vw, 500px);
      height: clamp(320px, 42vw, 500px);
      animation: cpFinalOrbit 38s linear infinite reverse;
    }

    .cp-final .orbit3 {
      width: clamp(420px, 56vw, 660px);
      height: clamp(420px, 56vw, 660px);
      border: 1px dashed rgba(255, 255, 255, .08);
      animation: cpFinalOrbit 60s linear infinite;
    }

    @keyframes cpFinalOrbit {
      to {
        transform: translate(-50%, -50%) rotate(360deg)
      }
    }

    .cp-final__eyebrow {
      position: relative;
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 28px;
    }

    .cp-final__title {
      position: relative;
      font-family: var(--cp-display);
      font-weight: 500;
      font-size: clamp(48px, 8.5vw, 60px);
      line-height: 1.05;
      letter-spacing: -.02em;
      color: #fff;
      margin: 0 0 48px;
    }

    .cp-final__btns {
      position: relative;
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 1100px) {
      .cp-hero {
        padding: 120px 32px 0
      }

      .cp-hero__inner {
        grid-template-columns: 1fr;
        gap: 50px;
        padding-bottom: 50px
      }

      .cp-shift {
        padding: 100px 32px
      }

      .cp-shift__head,
      .cp-agents__head,
      .cp-caps__head,
      .cp-scale__head,
      .cp-matrix__head,
      .cp-workspace__head,
      .cp-outcomes__head,
      .cp-industries__head {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 50px
      }

      .cp-shift__legend {
        grid-template-columns: 40px 1fr;
        gap: 16px;
        padding: 16px 22px
      }

      .cp-shift__legend .arrow,
      .cp-shift__legend .to {
        display: none
      }

      .cp-shift__row {
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto auto;
        gap: 6px 16px;
        padding: 22px 22px;
      }

      .cp-shift__row .ix {
        grid-row: 1 / 4
      }

      .cp-shift__row .from {
        grid-column: 2
      }

      .cp-shift__row .arrow {
        grid-column: 2;
        width: 24px;
        height: 14px;
        background: none;
        position: relative;
      }

      .cp-shift__row .arrow::before {
        content: "↓";
        color: var(--cp-fg-faint);
        font-size: 14px;
      }

      .cp-shift__row .arrow::after {
        display: none
      }

      .cp-shift__row .to {
        grid-column: 2;
        font-size: 16.5px
      }

      .cp-shift__sign {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px
      }

      .cp-shift__outcomes {
        grid-template-columns: 1fr;
        margin-top: 40px
      }

      .cp-agents {
        padding: 110px 32px
      }

      .cp-agents__pair {
        grid-template-columns: 1fr;
        gap: 24px
      }

      .cp-agents__bridge {
        width: 100%;
        height: 60px;
        transform: rotate(90deg)
      }

      .cp-caps {
        padding: 100px 32px
      }

      .cp-caps__grid {
        grid-template-columns: 1fr 1fr
      }

      .cp-scale {
        padding: 100px 32px
      }

      .cp-scale__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
      }

      .cp-tile--hero {
        grid-column: 1 / 3;
        grid-row: 1
      }

      .cp-tile--hero .cp-tile__num {
        font-size: clamp(64px, 14vw, 96px)
      }

      .cp-scale__ticker {
        font-size: 10px;
        gap: 8px
      }

      .cp-matrix {
        padding: 100px 32px
      }

      .cp-matrix__diagram {
        grid-template-columns: 1fr;
        gap: 50px
      }

      .cp-stack {
        padding: 100px 32px
      }

      .cp-workspace {
        padding: 100px 32px
      }

      .cp-ws__body {
        grid-template-columns: 1fr
      }

      .cp-ws__sidebar,
      .cp-ws__side {
        display: none
      }

      .cp-ws__stats {
        grid-template-columns: 1fr 1fr
      }

      .cp-outcomes {
        padding: 100px 32px
      }

      /* The outcomes grid carries an inline style="grid-template-columns:
         repeat(4, 1fr)" on cp.html, so we need !important here to override
         it. Same applies for the smaller breakpoint below. */
      .cp-outcomes__grid,
      section#outcomes .cp-outcomes__grid {
        grid-template-columns: 1fr 1fr !important;
      }

      .cp-industries {
        padding: 100px 32px
      }

      .cp-industries__map {
        display: none
      }

      .cp-final {
        padding: 130px 28px
      }

      .cp-tel-strip {
        /* display: none */
      }
    }

    @media (max-width: 600px) {

      .cp-caps__grid,
      .cp-outcomes__grid,
      section#outcomes .cp-outcomes__grid {
        grid-template-columns: 1fr !important;
      }

      .cp-shift__outcomes {
        padding: 22px
      }

      .cp-slab {
        grid-template-columns: 50px 1fr;
        padding: 18px 18px;
        gap: 14px;
        transform: none !important;
      }

      .cp-slab .meta {
        grid-column: 1 / -1
      }

      .cp-scale__grid {
        grid-template-columns: 1fr
      }

      .cp-tile--hero {
        grid-column: 1
      }

      /* tighter section paddings on phones */
      .cp-hero {
        padding: 100px 20px 0
      }

      .cp-shift,
      .cp-agents,
      .cp-caps,
      .cp-scale,
      .cp-matrix,
      .cp-stack,
      .cp-workspace,
      .cp-outcomes,
      .cp-industries {
        padding: 80px 20px
      }

      .cp-final {
        padding: 110px 22px
      }

      /* workspace stats: stack on phones */
      .cp-ws__stats {
        grid-template-columns: 1fr
      }

      /* shrink decorative radar so it doesn't dominate */
      .cp-tile--hero .radar {
        width: 320px;
        height: 320px;
        bottom: -90px;
        right: -90px;
      }
    }

    /* ============================================================
       MOBILE — CP HERO + OUTCOMES (cp.html)
       Hero scales the title, eyebrow, sub and CTA for phones.
       The outcomes section uses Bootstrap utility paddings (.pt-5
       .mt-5 .px-5 = 3rem each) which are too tight on small
       viewports, so those are overridden with !important too.
    ============================================================ */
    @media (max-width: 768px) {
      /* ---- HERO ---- */
      .cp-hero {
        height: auto;
        min-height: auto;
        padding: 110px 20px 0;
      }
      .cp-hero__inner {
        text-align: center;
        padding-bottom: 40px;
      }
      .cp-hero__left {
        width: 100%;
      }
      .cp-hero .hero-tag {
        font-size: 10.5px !important;
        letter-spacing: .12em;
        line-height: 1.45;
        padding: 8px 14px;
        max-width: 100%;
        white-space: normal;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0 auto 22px;
      }
      .cp-hero__title {
        font-size: clamp(34px, 9vw, 50px);
        line-height: 1.05;
        letter-spacing: -.02em;
        margin-bottom: 18px;
      }
      .cp-hero__title em,
      .cp-hero__title .text-white {
        display: inline-block;
      }
      .cp-hero__sub {
        font-size: 14.5px;
        line-height: 1.55;
        padding: 0 4px;
        margin: 0 auto 22px;
      }
      .cp-hero__ctas {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        gap: 12px;
      }
      .cp-hero__ctas .cp-cta-primary,
      .cp-hero__ctas .cp-cta-ghost,
      .cp-hero__ctas a {
        width: 100%;
        justify-content: center;
        padding: 12px 22px;
      }

      /* ---- OUTCOMES (#outcomes uses Bootstrap pt-5 mt-5 px-5) ---- */
      section#outcomes {
        padding: 40px 18px 30px !important;
        margin-top: 24px !important;
      }
      section#outcomes .cp-outcomes__grid {
        grid-template-columns: 1fr 1fr !important;
        border-radius: 18px;
      }
      section#outcomes .cp-outcome {
        padding: 28px 18px 22px;
      }
      section#outcomes .cp-outcome__num {
        font-size: clamp(36px, 10vw, 52px);
        margin-bottom: 12px;
      }
      section#outcomes .cp-outcome__num .u {
        font-size: .28em;
      }
      section#outcomes .cp-outcome__label {
        font-size: 13.5px;
        line-height: 1.3;
      }
      section#outcomes .cp-outcome__desc {
        font-size: 12.5px;
        line-height: 1.45;
      }
    }

    @media (max-width: 480px) {
      .cp-hero {
        padding: 100px 18px 0;
      }
      .cp-hero__title {
        font-size: clamp(28px, 10vw, 40px);
      }
      .cp-hero__sub { font-size: 13.5px; }
      .cp-hero .hero-tag { font-size: 10px !important; }

      /* Outcomes — collapse to a single column on the smallest phones
         so the long labels never get clipped. */
      section#outcomes {
        padding: 36px 16px 24px !important;
      }
      section#outcomes .cp-outcomes__grid {
        grid-template-columns: 1fr !important;
      }
      section#outcomes .cp-outcome {
        padding: 26px 20px 22px;
      }
    }

    /* ============================================================
       SECTION — CP ORBIT (resilience lifecycle dial · dark theme)
       Adapted from resilience-orbit.html — a dark orbital "dial"
       with concentric rings, rotating bezel & sweep, 5 orbital
       phase nodes (PREPARE · PROTECT · RECOVER · VALIDATE · COMPLY),
       and a center "core" that morphs to show each phase's
       details on hover/click. Includes a stacked mobile fallback.
    ============================================================ */
    .cp-flow {
      --orb-ink: #070A1C;
      --orb-ink-1: #0A0E27;
      --orb-ink-2: #10173B;
      --orb-fg: #EAF0FF;
      --orb-soft: #A9B4D8;
      --orb-mute: #6B769C;
      --orb-line: rgba(150, 170, 230, .16);
      --orb-line-soft: rgba(150, 170, 230, .09);
      --orb-glass: rgba(18, 26, 58, .55);
      --orb-hue: #5B8CFF;
      padding: 140px 56px;
      background:
        radial-gradient(900px 700px at 12% 8%, rgba(56, 225, 176, .10), transparent 60%),
        radial-gradient(1000px 760px at 88% 92%, rgba(157, 124, 255, .12), transparent 62%),
        radial-gradient(700px 600px at 80% 6%, rgba(52, 200, 255, .08), transparent 60%),
        linear-gradient(160deg, var(--orb-ink), var(--orb-ink-1) 45%, var(--orb-ink-2));
      color: var(--orb-fg);
      border-bottom: 0;
      position: relative;
      overflow: hidden;
    }

    .cp-flow::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .55;
      pointer-events: none;
      z-index: 0;
      background-image:
        radial-gradient(1.4px 1.4px at 20% 30%, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1.2px 1.2px at 70% 22%, rgba(255, 255, 255, .55), transparent),
        radial-gradient(1.6px 1.6px at 40% 70%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1.1px 1.1px at 85% 60%, rgba(255, 255, 255, .45), transparent),
        radial-gradient(1.3px 1.3px at 12% 80%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1.2px 1.2px at 60% 88%, rgba(255, 255, 255, .4), transparent),
        radial-gradient(1.1px 1.1px at 33% 14%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1.4px 1.4px at 92% 35%, rgba(255, 255, 255, .5), transparent);
    }

    .cp-flow__inner {
      max-width: 1400px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .cp-flow__head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 24px;
    }

    .cp-flow__head .cp-eyebrow {
      color: var(--orb-soft);
    }

    .cp-flow__head .cp-eyebrow::before {
      background: var(--orb-soft);
      opacity: .45;
    }

    .cp-flow__head h2.cp-h2 {
      color: var(--orb-fg);
    }

    .cp-flow__head h2.cp-h2 em {
      font-style: italic;
      background: linear-gradient(100deg, #2196F3, #0999ff, #00e3ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .cp-flow__head p {
      font-family: var(--cp-sans);
      font-size: 18px;
      line-height: 1.65;
      color: var(--orb-soft);
      max-width: 480px;
      margin: 0;
    }

    /* ---- Orbital scene ---- */
    .cp-orb-scene {
      display: grid;
      place-items: center;
      padding: 8px clamp(16px, 4vw, 48px) 24px;
      position: relative;
    }

    .cp-orb-dial {
      --r: clamp(180px, 28vw, 235px);
      --node: clamp(88px, 12vw, 85px);
      position: relative;
      width: calc(var(--r) * 2 + var(--node) + 30px);
      height: calc(var(--r) * 2 + var(--node) + 30px);
      display: grid;
      place-items: center;
    }

    /* Concentric guide rings + rotating bezel + sweep */
    .cp-orb-rings {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      pointer-events: none;
    }

    .cp-orb-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px solid var(--orb-line-soft);
    }

    .cp-orb-ring.r1 {
      width: calc(var(--r) * 2);
      height: calc(var(--r) * 2);
      border-color: var(--orb-line);
    }

    .cp-orb-ring.r2 {
      width: calc(var(--r) * 1.34);
      height: calc(var(--r) * 1.34);
    }

    .cp-orb-ring.r3 {
      width: calc(var(--r) * 0.84);
      height: calc(var(--r) * 0.84);
    }

    .cp-orb-bezel {
      position: absolute;
      top: 50%;
      left: 50%;
      width: calc(var(--r) * 2 + 26px);
      height: calc(var(--r) * 2 + 26px);
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: repeating-conic-gradient(from 0deg, var(--orb-line) 0 .6deg, transparent .6deg 6deg);
      -webkit-mask: radial-gradient(circle, transparent calc(50% - 8px), #000 calc(50% - 8px));
      mask: radial-gradient(circle, transparent calc(50% - 8px), #000 calc(50% - 8px));
      opacity: .55;
      animation: cpOrbSpin 120s linear infinite;
    }

    .cp-orb-sweep {
      position: absolute;
      top: 50%;
      left: 50%;
      width: calc(var(--r) * 2);
      height: calc(var(--r) * 2);
      transform: translate(-50%, -50%);
      border-radius: 50%;
      pointer-events: none;
      background: conic-gradient(from 0deg, transparent 0 300deg,
          rgba(91, 140, 255, .16) 348deg, rgba(91, 140, 255, .34) 360deg);
      -webkit-mask: radial-gradient(circle, transparent calc(42%), #000 42%);
      mask: radial-gradient(circle, transparent 42%, #000 42%);
      animation: cpOrbSpin 14s linear infinite;
      mix-blend-mode: screen;
    }

    @keyframes cpOrbSpin {
      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    /* Spokes */
    .cp-orb-spokes {
      position: absolute;
      inset: 0;
    }

    .cp-orb-spoke {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 1px;
      width: var(--r);
      transform-origin: 0 50%;
      background: linear-gradient(90deg, rgba(150, 170, 230, .06), rgba(150, 170, 230, .22));
      transform: rotate(var(--a));
      transition: background .4s, box-shadow .4s, opacity .4s;
      opacity: .5;
    }

    .cp-orb-spoke.is-hot {
      background: linear-gradient(90deg, transparent, var(--c));
      box-shadow: 0 0 14px var(--c);
      opacity: 1;
    }

    /* ---- Core display ---- */
    .cp-orb-core {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: clamp(214px, 46%, 332px);
      height: clamp(214px, 46%, 332px);
      border-radius: 50%;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 8% 11%;
      background:
        radial-gradient(circle at 50% 38%, rgba(91, 140, 255, .18), transparent 70%),
        var(--orb-glass);
      border: 1px solid rgba(150, 170, 230, .22);
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, .3) inset,
        0 30px 80px rgba(0, 0, 0, .45),
        0 0 70px -10px var(--orb-hue);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
      transition: box-shadow .5s, border-color .5s;
    }

    .cp-orb-core::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle at 50% 30%,
          color-mix(in srgb, var(--orb-hue) 22%, transparent), transparent 62%);
      opacity: .9;
      transition: background .5s;
    }

    .cp-orb-core__layer {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      align-content: center;
      padding: 11% 13%;
      transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
    }

    .cp-orb-core__eyebrow {
      font-family: var(--font-body);
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--orb-soft);
      margin-bottom: 12px;
    }

    .cp-orb-core__head {
      font-family: var(--cp-display);
      font-weight: 600;
      line-height: 1.08;
      letter-spacing: -.01em;
      font-size: clamp(20px, 3vw, 30px);
      margin: 0;
      color: #fff;
      text-transform: capitalize;
    }

    .cp-orb-core__head .glow {
      background: linear-gradient(100deg, #9D7CFF, #34C8FF, #38E1B0);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .cp-orb-core__hint {
      font-family: var(--font-body);
      font-size: 10.5px;
      color: var(--orb-mute);
      margin-top: 16px;
      letter-spacing: .06em;
    }

    .cp-orb-detail {
      opacity: 0;
      transform: scale(.92);
      pointer-events: none;
    }

    .cp-orb-core.is-stage .cp-orb-default {
      opacity: 0;
      transform: scale(1.06);
    }

    .cp-orb-core.is-stage .cp-orb-detail {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }

    .cp-orb-detail__meta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--orb-soft);
      margin-bottom: 6px;
    }

    .cp-orb-detail__idx {
      color: var(--c);
    }

    .cp-orb-detail__dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--c);
      box-shadow: 0 0 8px var(--c);
    }

    .cp-orb-detail__name {
      font-family: var(--cp-display);
      font-weight: 700;
      font-size: clamp(24px, 4.5vw, 34px);
      letter-spacing: .02em;
      line-height: 1;
      margin: 2px 0 0;
      color: #fff;
    }

    .cp-orb-detail__desc {
      font-size: clamp(11.5px, 1.3vw, 13px);
      line-height: 1.5;
      color: var(--orb-soft);
      margin: 11px 0 0;
      max-width: 30ch;
    }

    .cp-orb-detail__chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px;
      margin-top: 13px;
    }

    .cp-orb-detail__chips span {
      font-family: var(--font-body);
      font-size: 13.5px;
      letter-spacing: .02em;
      color: var(--orb-fg);
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
      background: color-mix(in srgb, var(--c) 14%, transparent);
    }

    .cp-orb-core.is-stage .cp-orb-detail.show .cp-orb-detail__name {
      animation: cpOrbNameIn .55s cubic-bezier(.2, .8, .2, 1) both;
    }

    .cp-orb-core.is-stage .cp-orb-detail.show .cp-orb-detail__desc {
      animation: cpOrbFadeUp .5s ease .12s both;
    }

    .cp-orb-core.is-stage .cp-orb-detail.show .cp-orb-detail__chips {
      animation: cpOrbFadeUp .5s ease .2s both;
    }

    @keyframes cpOrbNameIn {
      from {
        opacity: 0;
        transform: translateY(12px);
        clip-path: inset(0 0 100% 0);
      }

      to {
        opacity: 1;
        transform: none;
        clip-path: inset(0 0 0 0);
      }
    }

    @keyframes cpOrbFadeUp {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    /* ---- Orbiting nodes ---- */
    .cp-orb-orbit {
      position: absolute;
      inset: 0;
    }

    .cp-orb-node {
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--node);
      height: var(--node);
      transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
      border: 0;
      background: none;
      padding: 0;
      cursor: pointer;
      color: inherit;
      display: grid;
      place-items: center;
      gap: 6px;
    }

    .cp-orb-node__puck {
      width: var(--node);
      height: var(--node);
      border-radius: 50%;
      display: grid;
      place-items: center;
      position: relative;
      background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .06), rgba(12, 18, 44, .85));
      border: 1px solid rgba(150, 170, 230, .28);
      box-shadow:
        0 10px 26px rgba(0, 0, 0, .5),
        0 0 0 6px rgba(10, 14, 39, .4);
      transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, border-color .4s;
    }

    .cp-orb-node__puck::after {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
      opacity: 0;
      transition: opacity .4s;
    }

    .cp-orb-node__puck svg {
      width: 38%;
      height: 38%;
      stroke: var(--c);
      transition: stroke .3s, transform .4s;
    }

    .cp-orb-node__ix {
      position: absolute;
      top: 9px;
      right: 13px;
      font-family: var(--font-body);
      font-size: 9px;
      color: var(--orb-mute);
    }

    .cp-orb-node__label {
      font-family: var(--cp-display);
      font-weight: 600;
      font-size: clamp(10px, 1.5vw, 12px);
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--orb-soft);
      text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
      transition: color .3s, text-shadow .3s;
    }

    .cp-orb-node__label::after {
      content: "";
      display: block;
      height: 1.5px;
      margin: 5px auto 0;
      width: 0;
      border-radius: 2px;
      background: var(--c);
      box-shadow: 0 0 8px var(--c);
      transition: width .4s cubic-bezier(.2, .7, .2, 1);
    }

    .cp-orb-node:hover .cp-orb-node__puck,
    .cp-orb-node:focus-visible .cp-orb-node__puck,
    .cp-orb-node.is-active .cp-orb-node__puck {
      transform: scale(1.12);
      border-color: var(--c);
      box-shadow:
        0 14px 34px rgba(0, 0, 0, .55),
        0 0 36px -4px var(--c),
        0 0 0 6px color-mix(in srgb, var(--c) 16%, transparent);
    }

    .cp-orb-node:hover .cp-orb-node__puck::after,
    .cp-orb-node:focus-visible .cp-orb-node__puck::after,
    .cp-orb-node.is-active .cp-orb-node__puck::after {
      opacity: 1;
    }

    .cp-orb-node:hover .cp-orb-node__puck svg,
    .cp-orb-node.is-active .cp-orb-node__puck svg {
      transform: scale(1.08);
    }

    .cp-orb-node:hover .cp-orb-node__label,
    .cp-orb-node:focus-visible .cp-orb-node__label,
    .cp-orb-node.is-active .cp-orb-node__label {
      color: #fff;
    }

    .cp-orb-node:hover .cp-orb-node__label::after,
    .cp-orb-node:focus-visible .cp-orb-node__label::after,
    .cp-orb-node.is-active .cp-orb-node__label::after {
      width: 78%;
    }

    .cp-orb-node:focus-visible {
      outline: none;
    }

    .cp-orb-node:focus-visible .cp-orb-node__puck {
      outline: 2px solid var(--c);
      outline-offset: 5px;
    }

    /* Travelling pip on each node ring */
    .cp-orb-node__pip {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      pointer-events: none;
    }

    .cp-orb-node__pip::before {
      content: "";
      position: absolute;
      top: -3px;
      left: 50%;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--c);
      box-shadow: 0 0 10px var(--c);
      transform-origin: 50% calc(var(--node) / 2 + 3px);
      margin-left: -2.5px;
      opacity: 0;
      animation: cpOrbPipSpin 6s linear infinite;
    }

    .cp-orb-node:hover .cp-orb-node__pip::before,
    .cp-orb-node.is-active .cp-orb-node__pip::before {
      opacity: .9;
    }

    @keyframes cpOrbPipSpin {
      from {
        transform: rotate(0);
      }

      to {
        transform: rotate(360deg);
      }
    }

    /* Entrance choreography (triggered when .cp-flow gets .is-ready) */
    .cp-orb-dial .cp-orb-ring,
    .cp-orb-dial .cp-orb-bezel,
    .cp-orb-dial .cp-orb-sweep {
      opacity: 0;
      transition: opacity 1s ease;
    }

    .cp-orb-dial .cp-orb-core {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.86);
      transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
    }

    .cp-orb-node {
      opacity: 0;
      transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r) * .55)) rotate(calc(-1 * var(--a))) scale(.7);
    }

    .cp-flow.is-ready .cp-orb-ring {
      opacity: 1;
    }

    .cp-flow.is-ready .cp-orb-bezel {
      opacity: .55;
    }

    .cp-flow.is-ready .cp-orb-sweep {
      opacity: 1;
    }

    .cp-flow.is-ready .cp-orb-core {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .cp-flow.is-ready .cp-orb-node {
      opacity: 1;
      transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
      transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
      transition-delay: calc(var(--i) * .09s + .25s);
    }

    .cp-orb-scene.is-focus .cp-orb-bezel,
    .cp-orb-scene.is-focus .cp-orb-sweep {
      animation-play-state: paused;
    }

    /* Caption */
    .cp-orb-cap {
      margin-top: 6px;
      text-align: center;
      font-family: var(--font-body);
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--orb-mute);
    }

    .cp-orb-cap b {
      color: var(--orb-soft);
      font-weight: 400;
    }

    /* ---- Mobile stacked fallback ---- */
    .cp-orb-stack {
      display: none;
      width: 100%;
      max-width: 540px;
      margin: 0 auto;
      padding: 4px 4px 8px;
    }

    .cp-orb-srow {
      border: 1px solid var(--orb-line);
      border-left: 3px solid var(--c);
      border-radius: 14px;
      background: var(--orb-glass);
      margin-bottom: 10px;
      overflow: hidden;
    }

    .cp-orb-srow__btn {
      width: 100%;
      border: 0;
      background: none;
      color: inherit;
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 15px 16px;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
    }

    .cp-orb-srow__ico {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      flex: none;
      background: color-mix(in srgb, var(--c) 16%, transparent);
      border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
    }

    .cp-orb-srow__ico svg {
      width: 19px;
      height: 19px;
      stroke: var(--c);
    }

    .cp-orb-srow__t {
      flex: 1;
    }

    .cp-orb-srow__name {
      display: block;
      font-family: var(--cp-display);
      font-weight: 700;
      letter-spacing: .12em;
      font-size: 15px;
      color: #fff;
    }

    .cp-orb-srow__tag {
      display: block;
      font-family: var(--font-body);
      font-size: 10px;
      color: var(--orb-mute);
      letter-spacing: .05em;
      margin-top: 3px;
    }

    .cp-orb-srow__ix {
      font-family: var(--font-body);
      font-size: 10px;
      color: var(--c);
    }

    .cp-orb-srow__panel {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .4s ease;
    }

    .cp-orb-srow.is-open .cp-orb-srow__panel {
      grid-template-rows: 1fr;
    }

    .cp-orb-srow__panel>div {
      overflow: hidden;
      min-height: 0;
    }

    .cp-orb-srow__desc {
      padding: 0 16px 4px 16px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--orb-soft);
    }

    .cp-orb-srow__chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 10px 16px 16px;
    }

    .cp-orb-srow__chips span {
      font-family: var(--font-body);
      font-size: 10px;
      color: var(--orb-fg);
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
      background: color-mix(in srgb, var(--c) 12%, transparent);
    }

    @media (max-width: 1024px) {
      .cp-flow {
        padding: 100px 32px;
      }

      .cp-flow__head {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 30px;
      }
    }

    @media (max-width: 640px) {
      .cp-flow {
        padding: 80px 20px;
      }

      .cp-orb-scene {
        display: none;
      }

      .cp-orb-stack {
        display: block;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .cp-orb-bezel,
      .cp-orb-sweep,
      .cp-orb-node__pip::before {
        animation: none;
      }

      .cp-flow.is-ready .cp-orb-node,
      .cp-orb-dial .cp-orb-ring,
      .cp-orb-dial .cp-orb-bezel,
      .cp-orb-dial .cp-orb-sweep,
      .cp-orb-dial .cp-orb-core {
        transition: none;
      }

      .cp-orb-detail__name,
      .cp-orb-detail__desc,
      .cp-orb-detail__chips {
        animation: none !important;
      }
    }