.trustelis-platform-page,
    .trustelis-platform-page * {
      box-sizing: border-box;
    }

    .trustelis-platform-page {
      --tl-scale: 1;
      --tl-stage-w: 1672px;
      --tl-stage-h: 1840px;
      --tl-fit-h: 1840px;

      --tl-blue: #087cff;
      --tl-blue2: #00a3ff;
      --tl-cyan: #22e6ff;
      --tl-purple: #7c3dff;
      --tl-purple2: #8b3dff;
      --tl-pink: #c02cff;
      --tl-green: #1ee981;
      --tl-text: #f8fafc;

      position: relative;
      width: 100vw;
      max-width: 100vw;
      margin: 0 calc(50% - 50vw);
      padding: 0;
      overflow-x: hidden;
      overflow-y: visible;
      background:
        radial-gradient(circle at 100% 0%, rgba(43, 58, 196, 0.34), transparent 24%),
        radial-gradient(circle at 82% 50%, rgba(124, 61, 255, 0.16), transparent 38%),
        radial-gradient(circle at 13% 68%, rgba(8, 124, 255, 0.14), transparent 36%),
        linear-gradient(180deg, #020614 0%, #040b18 54%, #020614 100%);
      color: var(--tl-text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      isolation: isolate;
      scroll-behavior: smooth;
    }

    @supports (width: 100dvw) {
      .trustelis-platform-page {
        width: 100dvw;
        max-width: 100dvw;
        margin-left: calc(50% - 50dvw);
        margin-right: calc(50% - 50dvw);
      }
    }

    .trustelis-platform-page a {
      color: inherit;
      text-decoration: none !important;
    }

    .trustelis-platform-page svg {
      display: block;
      flex: 0 0 auto;
    }

    .tlp-desktop-fit {
      position: relative;
      width: 100%;
      height: var(--tl-fit-h);
      min-height: var(--tl-fit-h);
      overflow: hidden;
      background:
        radial-gradient(circle at 100% 0%, rgba(43, 58, 196, 0.38), transparent 24%),
        radial-gradient(circle at 82% 50%, rgba(124, 61, 255, 0.16), transparent 38%),
        radial-gradient(circle at 13% 68%, rgba(8, 124, 255, 0.14), transparent 36%),
        linear-gradient(180deg, #020614 0%, #040b18 54%, #020614 100%);
    }

    .tlp-stage {
      position: absolute;
      left: 50%;
      top: 0;
      width: var(--tl-stage-w);
      height: var(--tl-stage-h);
      transform-origin: top center;
      transform: translateX(-50%) scale(var(--tl-scale));
      overflow: hidden;
      background:
        radial-gradient(circle at 100% 0%, rgba(43, 58, 196, 0.42), transparent 23%),
        radial-gradient(circle at 78% 41%, rgba(124, 61, 255, 0.13), transparent 35%),
        radial-gradient(circle at 16% 67%, rgba(8, 124, 255, 0.13), transparent 36%),
        #020614;
    }

    .tlp-stage::before {
      content: "";
      position: absolute;
      inset: -70px -60px;
      pointer-events: none;
      opacity: 0.58;
      background:
        repeating-radial-gradient(
          ellipse at 76% 43%,
          transparent 0 34px,
          rgba(124, 61, 255, 0.17) 35px 36px,
          transparent 37px 70px
        ),
        repeating-radial-gradient(
          ellipse at 11% 74%,
          transparent 0 30px,
          rgba(0, 132, 255, 0.15) 31px 32px,
          transparent 33px 62px
        );
      mask-image: linear-gradient(180deg, transparent 0%, black 13%, black 90%, transparent 100%);
    }

    .tlp-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.06;
      background:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
      background-size: 78px 78px;
      mask-image: radial-gradient(circle at 50% 45%, black 0%, transparent 75%);
    }

    .tlp-left {
      position: absolute;
      left: 74px;
      top: 200px;
      z-index: 25;
      width: 690px;
    }

    .tlp-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      height: 36px;
      padding: 0 18px;
      border-radius: 10px;
      color: #ffffff;
      text-transform: uppercase;
      font-size: 13px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: 0.09em;
      background: rgba(5, 13, 34, 0.82);
      border: 1px solid rgba(176, 87, 255, 0.78);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 22px rgba(124, 61, 255, 0.18);
    }

    .tlp-badge svg {
      width: 16px;
      height: 16px;
      color: #00a3ff;
    }

    .tlp-blue-word {
      color: var(--tl-blue);
    }

    .tlp-problem {
      margin: 30px 0 0;
      width: 560px;
      color: rgba(238, 244, 255, 0.84);
      font-size: 15.5px;
      line-height: 1.28;
      font-weight: 520;
      letter-spacing: -0.018em;
    }

    .tlp-title {
      margin: 0;
      width: 690px;
      color: #ffffff;
      font-size: 58px;
      line-height: 0.98;
      font-weight: 880;
      letter-spacing: -0.066em;
      text-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
    }

    .tlp-title-blue {
      color: var(--tl-blue);
      text-shadow: 0 0 28px rgba(8, 124, 255, 0.34);
    }

    .tlp-gradient {
      margin: 18px 0 0;
      width: 650px;
      font-size: 22px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.048em;
      background: linear-gradient(90deg, #00a3ff 0%, #2488ff 31%, #7c3dff 67%, #c02cff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .tlp-copy {
      margin: 28px 0 0;
      width: 595px;
      color: rgba(238, 244, 255, 0.84);
      font-size: 18px;
      line-height: 1.32;
      font-weight: 450;
      letter-spacing: -0.017em;
    }

    .tlp-actions {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 34px;
    }

    .tlp-primary,
    .tlp-secondary {
      height: 53px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      white-space: nowrap;
      font-size: 15.5px;
      line-height: 1;
      font-weight: 820;
      letter-spacing: -0.038em;
    }

    .tlp-primary {
      width: 250px;
      color: #ffffff !important;
      background: linear-gradient(100deg, #1594ff 0%, #0b7cff 40%, #7c22ff 75%, #a92dff 100%);
      border: 1px solid rgba(255, 255, 255, 0.16);
      box-shadow:
        0 16px 34px rgba(0, 119, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    }

    .tlp-secondary {
      width: 228px;
      color: #ffffff !important;
      background: rgba(3, 8, 24, 0.54);
      border: 1px solid rgba(148, 163, 184, 0.42);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    }

    .tlp-primary svg,
    .tlp-secondary svg {
      width: 23px;
      height: 23px;
    }

    .tlp-visual {
      position: absolute;
      right: 76px;
      top: 135px;
      z-index: 24;
      width: 660px;
      height: 540px;
    }

    .tlp-orbit-one,
    .tlp-orbit-two,
    .tlp-orbit-three,
    .tlp-orbit-four {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      transform: rotate(-2deg);
    }

    .tlp-orbit-one {
      left: -7px;
      top: 10px;
      width: 664px;
      height: 106px;
      border: 1px solid rgba(0, 163, 255, 0.50);
      box-shadow: 0 0 32px rgba(0, 163, 255, 0.08);
    }

    .tlp-orbit-two {
      left: 42px;
      top: 31px;
      width: 568px;
      height: 68px;
      border: 1px solid rgba(124, 61, 255, 0.58);
    }

    .tlp-orbit-three {
      left: -8px;
      top: 154px;
      width: 668px;
      height: 134px;
      border: 1px solid rgba(0, 163, 255, 0.31);
      box-shadow: 0 0 38px rgba(124, 61, 255, 0.11);
    }

    .tlp-orbit-four {
      left: -12px;
      top: 330px;
      width: 688px;
      height: 150px;
      border: 1px solid rgba(124, 61, 255, 0.22);
      box-shadow: 0 0 38px rgba(124, 61, 255, 0.08);
    }

    .tlp-orbit-dot {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 99px;
      background: #22e6ff;
      box-shadow: 0 0 18px rgba(34, 230, 255, 0.85);
    }

    .tlp-dot-a {
      left: 112px;
      top: 37px;
    }

    .tlp-dot-b {
      right: 112px;
      top: 37px;
      background: #7c3dff;
      box-shadow: 0 0 18px rgba(124, 61, 255, 0.85);
    }

    .tlp-usecase {
      position: absolute;
      left: 190px;
      top: 0;
      width: 280px;
      height: 51px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: linear-gradient(180deg, rgba(7, 22, 54, 0.82), rgba(2, 7, 21, 0.92));
      border: 1px solid rgba(8, 124, 255, 0.70);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 30px rgba(8, 124, 255, 0.12);
      color: #ffffff;
      font-size: 17px;
      font-weight: 820;
      letter-spacing: -0.04em;
    }

    .tlp-usecase svg {
      width: 27px;
      height: 27px;
      color: #ffffff;
    }

    .tlp-down {
      position: absolute;
      left: 329px;
      width: 2px;
      background: linear-gradient(180deg, #22e6ff, rgba(34, 230, 255, 0.15));
      box-shadow: 0 0 14px rgba(34, 230, 255, 0.55);
    }

    .tlp-down::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -2px;
      width: 10px;
      height: 10px;
      transform: translateX(-50%) rotate(45deg);
      border-right: 2px solid #22e6ff;
      border-bottom: 2px solid #22e6ff;
    }

    .tlp-down.one {
      top: 57px;
      height: 31px;
    }

    .tlp-platform-card {
      position: absolute;
      left: 60px;
      top: 82px;
      width: 540px;
      height: 220px;
      border-radius: 13px;
      padding: 18px 16px 15px;
      background:
        radial-gradient(circle at 78% 28%, rgba(192, 44, 255, 0.20), transparent 36%),
        radial-gradient(circle at 14% 15%, rgba(8, 124, 255, 0.22), transparent 38%),
        linear-gradient(135deg, rgba(7, 21, 55, 0.90), rgba(14, 10, 42, 0.94));
      border: 1px solid rgba(124, 61, 255, 0.86);
      box-shadow:
        0 0 30px rgba(8, 124, 255, 0.17),
        0 0 36px rgba(124, 61, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    }

    .tlp-platform-head {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      height: 30px;
      color: #ffffff;
      font-size: 20px;
      line-height: 1;
      font-weight: 860;
      letter-spacing: -0.05em;
    }

    .tlp-mini-mark {
      width: 29px;
      height: 25px;
      filter: drop-shadow(0 0 10px rgba(0, 163, 255, 0.45));
    }

    .tlp-pill-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 11px;
      margin-top: 18px;
      height: 144px;
    }

    .tlp-pillar {
      position: relative;
      border-radius: 9px;
      padding: 13px 12px;
      background: linear-gradient(180deg, rgba(4, 15, 38, 0.78), rgba(3, 8, 24, 0.88));
      border: 1px solid rgba(61, 130, 255, 0.34);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
      overflow: hidden;
    }

    .tlp-pillar:not(:last-child)::after {
      content: "";
      position: absolute;
      right: -6px;
      top: 16px;
      width: 1px;
      height: 111px;
      background: linear-gradient(180deg, transparent, rgba(0, 163, 255, 0.35), transparent);
    }

    .tlp-pillar h3 {
      margin: 0 0 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      color: #ffffff;
      font-size: 16px;
      line-height: 1;
      font-weight: 830;
      letter-spacing: -0.04em;
      text-align: center;
    }

    .tlp-pillar h3 svg {
      width: 21px;
      height: 21px;
    }

    .tlp-pillar.govern h3 {
      color: #168cff;
    }

    .tlp-pillar.enforce h3 {
      color: #b057ff;
    }

    .tlp-pillar.prove h3 {
      color: #22e6ff;
    }

    .tlp-pillar ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 7px;
    }

    .tlp-pillar li {
      position: relative;
      padding-left: 12px;
      color: rgba(238, 244, 255, 0.88);
      font-size: 11.2px;
      line-height: 1;
      font-weight: 650;
      letter-spacing: -0.023em;
      white-space: nowrap;
    }

    .tlp-pillar li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      width: 4px;
      height: 4px;
      border-radius: 99px;
      background: #168cff;
      box-shadow: 0 0 10px rgba(8, 124, 255, 0.75);
    }

    .tlp-pillar.enforce li::before {
      background: #b057ff;
      box-shadow: 0 0 10px rgba(176, 87, 255, 0.75);
    }

    .tlp-pillar.prove li::before {
      background: #22e6ff;
      box-shadow: 0 0 10px rgba(34, 230, 255, 0.75);
    }

    .tlp-infra {
      position: absolute;
      left: 75px;
      top: 322px;
      width: 510px;
      height: 39px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 23px;
      background: rgba(5, 13, 34, 0.70);
      border: 1px solid rgba(8, 124, 255, 0.55);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.92);
      font-size: 15px;
      line-height: 1;
      font-weight: 760;
      letter-spacing: -0.038em;
    }

    .tlp-infra span {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tlp-infra svg {
      width: 23px;
      height: 23px;
      color: #ffffff;
    }

    .tlp-infra .dot {
      width: 4px;
      height: 4px;
      border-radius: 99px;
      background: rgba(238, 244, 255, 0.70);
    }

    .tlp-down.two {
      top: 361px;
      height: 26px;
    }

    .tlp-action-card {
      position: absolute;
      left: 75px;
      top: 388px;
      width: 510px;
      height: 86px;
      border-radius: 10px;
      padding: 14px 17px;
      background: linear-gradient(180deg, rgba(8, 24, 50, 0.90), rgba(3, 8, 24, 0.95));
      border: 1px solid rgba(124, 61, 255, 0.80);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 24px rgba(8, 124, 255, 0.12);
    }

    .tlp-action-head {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: #ffffff;
      font-size: 20px;
      line-height: 1;
      font-weight: 860;
      letter-spacing: -0.05em;
    }

    .tlp-check {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #ffffff;
      background: #18c878;
      box-shadow: 0 0 22px rgba(24, 200, 120, 0.55);
    }

    .tlp-check svg {
      width: 17px;
      height: 17px;
    }

    .tlp-status-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 14px;
    }

    .tlp-status {
      height: 27px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 12px;
      line-height: 1;
      font-weight: 760;
      letter-spacing: -0.03em;
      border: 1px solid rgba(34, 230, 255, 0.42);
      background: rgba(0, 163, 255, 0.08);
      color: #22e6ff;
    }

    .tlp-status svg {
      width: 15px;
      height: 15px;
    }

    .tlp-status.blocked {
      color: #ff6b8c;
      border-color: rgba(255, 75, 120, 0.46);
      background: rgba(255, 75, 120, 0.08);
    }

    .tlp-status.escalated {
      color: #ffba4a;
      border-color: rgba(255, 186, 74, 0.46);
      background: rgba(255, 186, 74, 0.08);
    }

    .tlp-status.logged {
      color: #60a5ff;
      border-color: rgba(96, 165, 255, 0.46);
      background: rgba(96, 165, 255, 0.08);
    }

    .tlp-cards {
      position: absolute;
      left: 46px;
      top: 760px;
      width: 1580px;
      height: 112px;
      z-index: 26;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
    }

    .tlp-card {
      position: relative;
      border-radius: 10px;
      display: grid;
      grid-template-columns: 48px 66px 1fr;
      align-items: center;
      gap: 13px;
      padding: 14px 16px;
      background:
        radial-gradient(circle at 16% 45%, rgba(8, 124, 255, 0.16), transparent 39%),
        linear-gradient(180deg, rgba(5, 16, 41, 0.74), rgba(3, 8, 24, 0.88));
      border: 1px solid rgba(8, 124, 255, 0.42);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
      overflow: hidden;
    }

    .tlp-card.purple {
      border-color: rgba(124, 61, 255, 0.46);
      background:
        radial-gradient(circle at 16% 45%, rgba(124, 61, 255, 0.17), transparent 39%),
        linear-gradient(180deg, rgba(8, 15, 40, 0.75), rgba(3, 8, 24, 0.90));
    }

    .tlp-card.cyan {
      border-color: rgba(34, 230, 255, 0.36);
      background:
        radial-gradient(circle at 16% 45%, rgba(34, 230, 255, 0.12), transparent 39%),
        linear-gradient(180deg, rgba(5, 19, 38, 0.75), rgba(3, 8, 24, 0.90));
    }

    .tlp-card-num {
      align-self: start;
      color: #168cff;
      font-size: 30px;
      line-height: 1;
      font-weight: 880;
      letter-spacing: -0.06em;
      text-shadow: 0 0 18px rgba(0, 163, 255, 0.34);
    }

    .tlp-card.purple .tlp-card-num {
      color: #b057ff;
    }

    .tlp-card.cyan .tlp-card-num {
      color: #22e6ff;
    }

    .tlp-card-icon {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #ffffff;
      background:
        radial-gradient(circle at 50% 46%, rgba(8, 124, 255, 0.22), transparent 63%),
        rgba(3, 9, 26, 0.80);
      border: 1px solid rgba(0, 163, 255, 0.70);
      box-shadow:
        0 0 24px rgba(0, 143, 255, 0.18),
        inset 0 0 20px rgba(0, 143, 255, 0.10);
    }

    .tlp-card.purple .tlp-card-icon {
      border-color: rgba(176, 87, 255, 0.78);
      box-shadow:
        0 0 24px rgba(124, 61, 255, 0.22),
        inset 0 0 20px rgba(124, 61, 255, 0.11);
    }

    .tlp-card.cyan .tlp-card-icon {
      border-color: rgba(34, 230, 255, 0.62);
      box-shadow:
        0 0 24px rgba(34, 230, 255, 0.16),
        inset 0 0 20px rgba(34, 230, 255, 0.09);
    }

    .tlp-card-icon svg {
      width: 34px;
      height: 34px;
    }

    .tlp-card-content h3 {
      margin: 0;
      color: #ffffff;
      font-size: 18px;
      line-height: 1.05;
      font-weight: 850;
      letter-spacing: -0.048em;
    }

    .tlp-card-content p {
      margin: 5px 0 9px;
      width: 96%;
      color: rgba(238, 244, 255, 0.77);
      font-size: 12.2px;
      line-height: 1.14;
      font-weight: 450;
      letter-spacing: -0.017em;
    }

    .tlp-tags {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: nowrap;
      overflow: hidden;
    }

    .tlp-tags span {
      height: 20px;
      padding: 0 8px;
      border-radius: 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(238, 244, 255, 0.92);
      font-size: 10px;
      line-height: 1;
      font-weight: 720;
      letter-spacing: -0.025em;
      white-space: nowrap;
      border: 1px solid rgba(8, 124, 255, 0.42);
      background: rgba(8, 124, 255, 0.08);
    }

    .tlp-card.purple .tlp-tags span {
      border-color: rgba(176, 87, 255, 0.42);
      background: rgba(124, 61, 255, 0.10);
    }

    .tlp-card.cyan .tlp-tags span {
      border-color: rgba(34, 230, 255, 0.34);
      background: rgba(34, 230, 255, 0.07);
    }



    .tlp-components {
      position: absolute;
      left: 46px;
      top: 730px;
      width: 1580px;
      z-index: 26;
    }

    .tlp-components-head {
      text-align: center;
      margin: 0 auto 24px;
    }

    .tlp-components-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      height: 34px;
      padding: 0 15px;
      border-radius: 8px;
      color: var(--tl-blue);
      background: rgba(3, 10, 27, 0.70);
      border: 1px solid rgba(8, 124, 255, 0.50);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
      font-size: 13px;
      line-height: 1;
      font-weight: 820;
      letter-spacing: 0.085em;
      text-transform: uppercase;
    }

    .tlp-components-kicker svg {
      width: 19px;
      height: 19px;
    }

    .tlp-components-title {
      margin: 18px 0 0;
      color: #ffffff;
      font-size: 52px;
      line-height: 0.98;
      font-weight: 880;
      letter-spacing: -0.064em;
      text-shadow: 0 10px 34px rgba(0, 0, 0, 0.34);
    }

    .tlp-components-title span {
      color: var(--tl-blue);
      text-shadow: 0 0 28px rgba(8, 124, 255, 0.34);
    }

    .tlp-components-subtitle {
      margin: 14px auto 0;
      max-width: 810px;
      color: rgba(238, 244, 255, 0.78);
      font-size: 18px;
      line-height: 1.25;
      font-weight: 440;
      letter-spacing: -0.018em;
    }

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

    .tlp-component-card {
      position: relative;
      min-height: 274px;
      border-radius: 11px;
      padding: 20px 21px 18px;
      overflow: hidden;
      background:
        radial-gradient(circle at 88% 10%, rgba(8, 124, 255, 0.13), transparent 35%),
        linear-gradient(180deg, rgba(5, 16, 41, 0.80), rgba(3, 8, 24, 0.92));
      border: 1px solid rgba(8, 124, 255, 0.55);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 0 30px rgba(8, 124, 255, 0.06);
    }

    .tlp-component-card.purple {
      border-color: rgba(176, 87, 255, 0.52);
      background:
        radial-gradient(circle at 90% 10%, rgba(124, 61, 255, 0.16), transparent 36%),
        linear-gradient(180deg, rgba(8, 15, 40, 0.80), rgba(3, 8, 24, 0.93));
    }

    .tlp-component-card.cyan {
      border-color: rgba(34, 230, 255, 0.44);
      background:
        radial-gradient(circle at 90% 10%, rgba(34, 230, 255, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(5, 19, 38, 0.80), rgba(3, 8, 24, 0.93));
    }

    .tlp-component-top {
      display: grid;
      grid-template-columns: 44px 1fr 44px;
      align-items: start;
      gap: 15px;
    }

    .tlp-component-num {
      width: 42px;
      height: 42px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      color: var(--tl-blue);
      background: rgba(8, 124, 255, 0.10);
      border: 1px solid rgba(8, 124, 255, 0.44);
      font-size: 24px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.055em;
    }

    .tlp-component-card.purple .tlp-component-num {
      color: #b057ff;
      background: rgba(124, 61, 255, 0.11);
      border-color: rgba(176, 87, 255, 0.46);
    }

    .tlp-component-card.cyan .tlp-component-num {
      color: #22e6ff;
      background: rgba(34, 230, 255, 0.08);
      border-color: rgba(34, 230, 255, 0.36);
    }

    .tlp-component-title h3 {
      margin: 4px 0 0;
      color: #ffffff;
      font-size: 20px;
      line-height: 1.08;
      font-weight: 860;
      letter-spacing: -0.05em;
    }

    .tlp-component-title p {
      margin: 10px 0 0;
      color: rgba(238, 244, 255, 0.76);
      font-size: 13.4px;
      line-height: 1.27;
      font-weight: 430;
      letter-spacing: -0.017em;
    }

    .tlp-component-icon {
      width: 42px;
      height: 42px;
      color: var(--tl-blue);
      opacity: 0.95;
      filter: drop-shadow(0 0 16px rgba(8, 124, 255, 0.24));
    }

    .tlp-component-card.purple .tlp-component-icon {
      color: #b057ff;
      filter: drop-shadow(0 0 16px rgba(124, 61, 255, 0.26));
    }

    .tlp-component-card.cyan .tlp-component-icon {
      color: #22e6ff;
      filter: drop-shadow(0 0 16px rgba(34, 230, 255, 0.22));
    }

    .tlp-component-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 7px;
      margin-top: 18px;
    }

    .tlp-component-list.three {
      grid-template-columns: repeat(3, 1fr);
    }

    .tlp-component-list.single {
      grid-template-columns: 1fr;
    }

    .tlp-component-item {
      min-height: 31px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      color: rgba(238, 244, 255, 0.88);
      background: rgba(3, 8, 24, 0.44);
      border: 1px solid rgba(148, 163, 184, 0.18);
      font-size: 12.5px;
      line-height: 1.05;
      font-weight: 620;
      letter-spacing: -0.021em;
    }

    .tlp-component-item::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 99px;
      background: var(--tl-blue);
      box-shadow: 0 0 11px rgba(8, 124, 255, 0.80);
      flex: 0 0 auto;
    }

    .tlp-component-card.purple .tlp-component-item::before {
      background: #b057ff;
      box-shadow: 0 0 11px rgba(176, 87, 255, 0.80);
    }

    .tlp-component-card.cyan .tlp-component-item::before {
      background: #22e6ff;
      box-shadow: 0 0 11px rgba(34, 230, 255, 0.70);
    }

    .tlp-component-tag {
      position: absolute;
      left: 21px;
      bottom: 16px;
      height: 28px;
      padding: 0 12px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--tl-blue);
      background: rgba(8, 124, 255, 0.08);
      border: 1px solid rgba(8, 124, 255, 0.44);
      font-size: 12px;
      line-height: 1;
      font-weight: 820;
      letter-spacing: -0.025em;
      text-transform: uppercase;
    }

    .tlp-component-tag svg {
      width: 16px;
      height: 16px;
    }

    .tlp-component-card.purple .tlp-component-tag {
      color: #b057ff;
      background: rgba(124, 61, 255, 0.10);
      border-color: rgba(176, 87, 255, 0.46);
    }

    .tlp-component-card.cyan .tlp-component-tag {
      color: #22e6ff;
      background: rgba(34, 230, 255, 0.07);
      border-color: rgba(34, 230, 255, 0.38);
    }


    .tlp-mobile {
      display: none;
    }

    @media (max-width: 900px) {
      .trustelis-platform-page {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        background:
          radial-gradient(circle at 12% 3%, rgba(0, 132, 255, 0.22), transparent 31%),
          radial-gradient(circle at 100% 14%, rgba(124, 61, 255, 0.20), transparent 36%),
          linear-gradient(180deg, #020614 0%, #061127 54%, #020614 100%);
      }

      .tlp-desktop-fit {
        display: none;
      }

      .tlp-mobile {
        display: block;
        width: 100%;
        padding: 16px 12px 22px;
        overflow-x: hidden;
      }

      .tlp-m-shell {
        width: 100%;
        max-width: 430px;
        margin: 0 auto;
        border-radius: 26px;
        padding: 15px 13px 16px;
        background:
          radial-gradient(circle at 16% 0%, rgba(0, 132, 255, 0.18), transparent 34%),
          radial-gradient(circle at 100% 20%, rgba(124, 61, 255, 0.16), transparent 35%),
          linear-gradient(145deg, rgba(7, 18, 42, 0.84), rgba(3, 8, 22, 0.94));
        border: 1px solid rgba(105, 150, 255, 0.28);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.10),
          0 24px 70px rgba(0, 0, 0, 0.34),
          0 0 34px rgba(0, 119, 255, 0.10);
        overflow: hidden;
      }

      .tlp-m-badge {
        display: inline-flex;
        align-items: center;
        min-height: 31px;
        padding: 0 12px;
        border-radius: 10px;
        color: #ffffff;
        text-transform: uppercase;
        font-size: 10px;
        line-height: 1;
        font-weight: 840;
        letter-spacing: 0.08em;
        background: rgba(5, 13, 34, 0.82);
        border: 1px solid rgba(176, 87, 255, 0.58);
      }

      .tlp-m-title {
        margin: 4px 0 0;
        color: #ffffff;
        font-size: clamp(38px, 10.2vw, 49px);
        line-height: 0.96;
        font-weight: 880;
        letter-spacing: -0.068em;
        text-shadow: 0 10px 34px rgba(0, 0, 0, 0.32);
      }

      .tlp-m-gradient {
        margin: 14px 0 0;
        font-size: 20px;
        line-height: 1.06;
        font-weight: 850;
        letter-spacing: -0.05em;
        background: linear-gradient(90deg, #00a3ff 0%, #2488ff 30%, #7c3dff 67%, #c02cff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .tlp-m-copy {
        margin: 16px 0 17px;
        color: rgba(238, 244, 255, 0.79);
        font-size: 10.8px;
        line-height: 1.34;
        font-weight: 430;
        letter-spacing: -0.015em;
      }

      .tlp-m-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 16px 0 14px;
      }

      .tlp-m-primary,
      .tlp-m-secondary {
        width: 100%;
        min-height: 52px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #ffffff !important;
        font-size: 14px;
        line-height: 1;
        font-weight: 820;
        letter-spacing: -0.03em;
      }

      .tlp-m-primary {
        background: linear-gradient(100deg, #1594ff 0%, #0b7cff 40%, #7c22ff 75%, #a92dff 100%);
        border: 1px solid rgba(255, 255, 255, 0.15);
      }

      .tlp-m-secondary {
        background: rgba(3, 8, 24, 0.54);
        border: 1px solid rgba(148, 163, 184, 0.38);
      }

      .tlp-m-platform {
        margin-top: 16px;
        border-radius: 18px;
        padding: 15px 13px;
        background:
          radial-gradient(circle at 80% 20%, rgba(192, 44, 255, 0.14), transparent 36%),
          radial-gradient(circle at 12% 15%, rgba(8, 124, 255, 0.17), transparent 38%),
          linear-gradient(145deg, rgba(7, 21, 55, 0.82), rgba(14, 10, 42, 0.90));
        border: 1px solid rgba(124, 61, 255, 0.54);
      }

      .tlp-m-platform h2 {
        margin: 0 0 12px;
        color: #ffffff;
        text-align: center;
        font-size: 19px;
        line-height: 1;
        font-weight: 850;
        letter-spacing: -0.020em;
      }

      .tlp-m-pillar {
        border-radius: 14px;
        padding: 13px;
        background: rgba(3, 8, 24, 0.48);
        border: 1px solid rgba(8, 124, 255, 0.28);
      }

      .tlp-m-pillar + .tlp-m-pillar {
        margin-top: 9px;
      }

      .tlp-m-pillar h3 {
        margin: 0 0 9px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 840;
        letter-spacing: -0.04em;
      }

      .tlp-m-pillar.govern h3 {
        color: #168cff;
      }

      .tlp-m-pillar.enforce h3 {
        color: #b057ff;
      }

      .tlp-m-pillar.prove h3 {
        color: #22e6ff;
      }

      .tlp-m-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }

      .tlp-m-tags span {
        min-height: 25px;
        padding: 6px 10px;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        color: rgba(238, 244, 255, 0.88);
        border: 1px solid rgba(8, 124, 255, 0.32);
        background: rgba(8, 124, 255, 0.08);
        font-size: 11px;
        font-weight: 700;
      }



      .tlp-m-components {
        margin-top: 42px;
        scroll-margin-top: 92px;
      }

      .tlp-m-components-head {
        text-align: center;
        margin-bottom: 15px;
      }

      .tlp-m-components-kicker {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding: 0 12px;
        border-radius: 9px;
        color: var(--tl-blue);
        background: rgba(3, 10, 27, 0.66);
        border: 1px solid rgba(8, 124, 255, 0.42);
        font-size: 8.9px;
        line-height: 1;
        font-weight: 820;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .tlp-m-components-title {
        margin: 13px 0 0;
        color: #ffffff;
        font-size: clamp(34px, 8.8vw, 44px);
        line-height: 0.98;
        font-weight: 880;
        letter-spacing: -0.064em;
      }

      .tlp-m-components-title span {
        color: var(--tl-blue);
      }

      .tlp-m-components-subtitle {
        margin: 9px 0 0;
        color: rgba(238, 244, 255, 0.74);
        font-size: 12.8px;
        line-height: 1.3;
        font-weight: 430;
      }

      .tlp-m-components-grid {
        display: grid;
        gap: 10px;
      }

      .tlp-m-component-card {
        position: relative;
        border-radius: 16px;
        padding: 14px 13px 13px;
        background:
          radial-gradient(circle at 91% 9%, rgba(8, 124, 255, 0.13), transparent 35%),
          linear-gradient(145deg, rgba(7, 18, 42, 0.76), rgba(4, 10, 24, 0.88));
        border: 1px solid rgba(8, 124, 255, 0.33);
        overflow: hidden;
      }

      .tlp-m-component-card.purple {
        border-color: rgba(176, 87, 255, 0.34);
        background:
          radial-gradient(circle at 91% 9%, rgba(124, 61, 255, 0.14), transparent 35%),
          linear-gradient(145deg, rgba(8, 15, 40, 0.76), rgba(4, 10, 24, 0.90));
      }

      .tlp-m-component-card.cyan {
        border-color: rgba(34, 230, 255, 0.28);
        background:
          radial-gradient(circle at 91% 9%, rgba(34, 230, 255, 0.10), transparent 35%),
          linear-gradient(145deg, rgba(5, 19, 38, 0.76), rgba(4, 10, 24, 0.90));
      }

      .tlp-m-component-head {
        display: grid;
        grid-template-columns: 32px 1fr;
        gap: 10px;
        align-items: start;
      }

      .tlp-m-component-num {
        width: 31px;
        height: 31px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        color: var(--tl-blue);
        background: rgba(8, 124, 255, 0.10);
        border: 1px solid rgba(8, 124, 255, 0.38);
        font-size: 16px;
        font-weight: 850;
      }

      .tlp-m-component-card.purple .tlp-m-component-num {
        color: #b057ff;
        border-color: rgba(176, 87, 255, 0.38);
        background: rgba(124, 61, 255, 0.10);
      }

      .tlp-m-component-card.cyan .tlp-m-component-num {
        color: #22e6ff;
        border-color: rgba(34, 230, 255, 0.30);
        background: rgba(34, 230, 255, 0.07);
      }

      .tlp-m-component-card h3 {
        margin: 0;
        color: #ffffff;
        font-size: 16px;
        line-height: 1.08;
        font-weight: 850;
        letter-spacing: -0.044em;
      }

      .tlp-m-component-card p {
        margin: 6px 0 0;
        color: rgba(238, 244, 255, 0.72);
        font-size: 12px;
        line-height: 1.25;
        font-weight: 430;
      }

      .tlp-m-component-items {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 11px;
      }

      .tlp-m-component-items span {
        min-height: 25px;
        padding: 6px 9px;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        color: rgba(238, 244, 255, 0.86);
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: rgba(3, 8, 24, 0.42);
        font-size: 10.6px;
        line-height: 1;
        font-weight: 650;
      }

      .tlp-m-component-tag {
        margin-top: 11px;
        height: 23px;
        padding: 0 8px;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        color: var(--tl-blue);
        border: 1px solid rgba(8, 124, 255, 0.38);
        background: rgba(8, 124, 255, 0.08);
        font-size: 10px;
        font-weight: 820;
        text-transform: uppercase;
        letter-spacing: -0.01em;
      }

      .tlp-m-component-card.purple .tlp-m-component-tag {
        color: #b057ff;
        border-color: rgba(176, 87, 255, 0.38);
        background: rgba(124, 61, 255, 0.10);
      }

      .tlp-m-component-card.cyan .tlp-m-component-tag {
        color: #22e6ff;
        border-color: rgba(34, 230, 255, 0.30);
        background: rgba(34, 230, 255, 0.07);
      }

      .tlp-m-cards {
        display: grid;
        gap: 9px;
        margin-top: 14px;
      }

      .tlp-m-card {
        min-height: 92px;
        border-radius: 16px;
        padding: 13px;
        background:
          radial-gradient(circle at 15% 42%, rgba(8, 124, 255, 0.13), transparent 36%),
          linear-gradient(145deg, rgba(7, 18, 42, 0.72), rgba(4, 10, 24, 0.86));
        border: 1px solid rgba(8, 124, 255, 0.31);
      }

      .tlp-m-card.purple {
        border-color: rgba(124, 61, 255, 0.34);
      }

      .tlp-m-card.cyan {
        border-color: rgba(34, 230, 255, 0.28);
      }

      .tlp-m-card h3 {
        margin: 0;
        color: #ffffff;
        font-size: 16px;
        font-weight: 850;
        letter-spacing: -0.04em;
      }

      .tlp-m-card p {
        margin: 6px 0 0;
        color: rgba(223, 232, 247, 0.74);
        font-size: 12px;
        line-height: 1.25;
        font-weight: 430;
      }

    }

    @media (max-width: 380px) {
      .tlp-mobile {
        padding-left: 9px;
        padding-right: 9px;
      }

      .tlp-m-shell {
        border-radius: 23px;
        padding: 13px 11px 14px;
      }

      .tlp-m-title {
        font-size: clamp(36px, 10vw, 46px);
      }
    }


    /* V8 HERO REPLACEMENT - ONLY TOP HERO AREA */
    .tlp-left {
      left: 72px;
      top: 115px;
      width: 610px;
    }

    .tlp-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 13px;
      min-height: 44px;
      padding: 0 20px;
      border-radius: 13px;
      background: rgba(3, 10, 27, 0.70);
      border: 1px solid rgba(8, 124, 255, 0.52);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 26px rgba(8, 124, 255, 0.10),
        0 0 18px rgba(124, 61, 255, 0.08);
      color: #ffffff;
      text-transform: uppercase;
      font-size: 15px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: 0.19em;
    }

    .tlp-hero-badge svg {
      width: 24px;
      height: 24px;
      color: var(--tl-blue2);
      filter: drop-shadow(0 0 12px rgba(8, 124, 255, 0.50));
    }

    .tlp-title {
      margin: 38px 0 0;
      width: 625px;
      color: #ffffff;
      font-size: 72px;
      line-height: 0.985;
      font-weight: 890;
      letter-spacing: -0.066em;
      text-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
    }

    .tlp-title-blue {
      color: var(--tl-blue);
      text-shadow: 0 0 34px rgba(8, 124, 255, 0.44);
    }

    .tlp-copy-line {
      width: 118px;
      height: 2px;
      margin: 28px 0 21px;
      background: linear-gradient(90deg, #22e6ff, rgba(8, 124, 255, 0.45), transparent);
      box-shadow: 0 0 18px rgba(34, 230, 255, 0.30);
    }

    .tlp-copy {
      margin: 0;
      width: 545px;
      color: rgba(238, 244, 255, 0.82);
      font-size: 19px;
      line-height: 1.29;
      font-weight: 450;
      letter-spacing: -0.019em;
    }

    .tlp-copy .tlp-copy-blue {
      color: var(--tl-blue2);
    }

    .tlp-actions {
      margin-top: 33px;
      gap: 22px;
    }

    .tlp-primary,
    .tlp-secondary {
      height: 64px;
      border-radius: 9px;
      font-size: 17px;
    }

    .tlp-primary {
      width: 292px;
    }

    .tlp-secondary {
      width: 278px;
    }

    .tlp-value-strip {
      position: absolute;
      left: 74px;
      top: 708px;
      z-index: 25;
      width: 1524px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }

    .tlp-value {
      display: grid;
      grid-template-columns: 58px 1fr;
      align-items: center;
      gap: 16px;
      min-height: 82px;
      padding: 0 34px 0 0;
      position: relative;
    }

    .tlp-value:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 20px;
      top: 12px;
      width: 1px;
      height: 58px;
      background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.42), transparent);
    }

    .tlp-value-icon {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: var(--tl-blue);
      background: rgba(8, 124, 255, 0.08);
      border: 1px solid rgba(8, 124, 255, 0.52);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 24px rgba(8,124,255,.10);
    }

    .tlp-value.purple .tlp-value-icon { color: #b057ff; border-color: rgba(176,87,255,.54); background: rgba(124,61,255,.09); }
    .tlp-value.cyan .tlp-value-icon { color: #22e6ff; border-color: rgba(34,230,255,.46); background: rgba(34,230,255,.07); }

    .tlp-value-icon svg { width: 34px; height: 34px; }

    .tlp-value h3 {
      margin: 0;
      color: #ffffff;
      font-size: 20px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.045em;
    }

    .tlp-value p {
      margin: 7px 0 0;
      color: rgba(238, 244, 255, 0.72);
      font-size: 14px;
      line-height: 1.22;
      font-weight: 430;
      letter-spacing: -0.018em;
    }

    .tlp-visual {
      right: 74px;
      top: 105px;
      width: 748px;
      height: 575px;
    }

    .tlp-visual::before {
      content: "";
      position: absolute;
      inset: -64px -74px -42px -80px;
      opacity: 0.50;
      background:
        repeating-radial-gradient(ellipse at 47% 28%, transparent 0 17px, rgba(8, 124, 255, 0.12) 18px 19px, transparent 20px 38px),
        radial-gradient(circle at 47% 52%, rgba(124, 61, 255, 0.18), transparent 54%);
      mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 88%, transparent 100%);
      pointer-events: none;
    }

    .tlp-agent-card,
    .tlp-control-layer,
    .tlp-controlled-action {
      position: absolute;
      z-index: 2;
      border-radius: 13px;
      background: linear-gradient(180deg, rgba(7, 20, 48, 0.84), rgba(3, 8, 24, 0.94));
      border: 1px solid rgba(8, 124, 255, 0.58);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 30px rgba(8, 124, 255, 0.10);
    }

    .tlp-agent-card {
      right: 0;
      top: 0;
      width: 620px;
      height: 150px;
      padding: 25px 32px;
    }

    .tlp-agent-head {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      color: #ffffff;
      font-size: 24px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.045em;
    }

    .tlp-agent-mark {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #ffffff;
      background: rgba(8, 124, 255, 0.08);
      border: 1px solid rgba(96, 165, 255, 0.70);
      box-shadow: 0 0 25px rgba(8, 124, 255, 0.20), inset 0 0 16px rgba(8, 124, 255, 0.12);
    }

    .tlp-agent-mark svg { width: 32px; height: 32px; }

    .tlp-agent-pills {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-top: 24px;
    }

    .tlp-agent-pill {
      height: 41px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: rgba(255,255,255,.94);
      background: rgba(3, 8, 24, 0.56);
      border: 1px solid rgba(8, 124, 255, 0.48);
      font-size: 16px;
      line-height: 1;
      font-weight: 780;
      letter-spacing: -0.035em;
    }

    .tlp-agent-pill svg { width: 24px; height: 24px; }

    .tlp-flow-lines {
      position: absolute;
      left: 154px;
      top: 150px;
      width: 470px;
      height: 76px;
      pointer-events: none;
      z-index: 1;
      background:
        linear-gradient(116deg, transparent 0 24%, rgba(34,230,255,.72) 24.4% 24.8%, transparent 25.2%),
        linear-gradient(90deg, transparent 0 49.6%, rgba(34,230,255,.84) 49.9% 50.2%, transparent 50.5%),
        linear-gradient(64deg, transparent 0 74%, rgba(34,230,255,.72) 74.4% 74.8%, transparent 75.2%);
      filter: drop-shadow(0 0 10px rgba(34,230,255,.32));
      opacity: .78;
    }

    .tlp-control-layer {
      left: 0;
      top: 218px;
      width: 748px;
      height: 289px;
      padding: 24px 26px 20px;
      border-color: rgba(176, 87, 255, 0.78);
      background:
        radial-gradient(circle at 86% 24%, rgba(124, 61, 255, 0.19), transparent 36%),
        radial-gradient(circle at 18% 12%, rgba(8, 124, 255, 0.13), transparent 36%),
        linear-gradient(135deg, rgba(8, 18, 45, 0.88), rgba(13, 7, 35, 0.94));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 38px rgba(124, 61, 255, 0.13);
    }

    .tlp-layer-head {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      color: #ffffff;
      font-size: 29px;
      line-height: 1;
      font-weight: 880;
      letter-spacing: -0.055em;
    }

    .tlp-layer-head svg {
      width: 49px;
      height: 49px;
      color: #ffffff;
      filter: drop-shadow(0 0 16px rgba(255,255,255,.14));
    }

    .tlp-layer-head .tlp-layer-blue { color: #b057ff; }

    .tlp-layer-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 24px;
    }

    .tlp-layer-pillar {
      height: 178px;
      border-radius: 10px;
      padding: 18px 17px;
      background: rgba(3, 8, 24, 0.47);
      border: 1px solid rgba(8, 124, 255, 0.31);
    }

    .tlp-layer-pillar h3 {
      margin: 0 0 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      color: var(--tl-blue);
      font-size: 20px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.045em;
    }

    .tlp-layer-pillar.enforce h3 { color: #b057ff; }
    .tlp-layer-pillar.prove h3 { color: #22e6ff; }
    .tlp-layer-pillar h3 svg { width: 24px; height: 24px; }

    .tlp-layer-pillar ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
    }

    .tlp-layer-pillar li {
      position: relative;
      padding-left: 15px;
      color: rgba(238, 244, 255, 0.88);
      font-size: 14px;
      line-height: 1;
      font-weight: 560;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    .tlp-layer-pillar li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 5px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--tl-blue);
      box-shadow: 0 0 10px rgba(8,124,255,.75);
    }

    .tlp-layer-pillar.enforce li::before { background: #b057ff; box-shadow: 0 0 10px rgba(176,87,255,.75); }
    .tlp-layer-pillar.prove li::before { background: #22e6ff; box-shadow: 0 0 10px rgba(34,230,255,.75); }

    .tlp-down-new {
      position: absolute;
      left: 374px;
      top: 507px;
      width: 2px;
      height: 46px;
      background: linear-gradient(180deg, #22e6ff, rgba(34, 230, 255, 0.18));
      box-shadow: 0 0 16px rgba(34, 230, 255, 0.55);
      z-index: 3;
    }

    .tlp-down-new::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -5px;
      width: 22px;
      height: 22px;
      transform: translateX(-50%) rotate(45deg);
      border-right: 3px solid #22e6ff;
      border-bottom: 3px solid #22e6ff;
    }

    .tlp-controlled-action {
      left: 10px;
      top: 560px;
      width: 728px;
      height: 142px;
      padding: 20px 30px 14px;
      border-color: rgba(96, 165, 255, 0.65);
      background: linear-gradient(180deg, rgba(8, 22, 50, 0.90), rgba(3, 8, 24, 0.96));
    }

    .tlp-controlled-head {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      color: #ffffff;
      font-size: 25px;
      line-height: 1;
      font-weight: 860;
      letter-spacing: -0.05em;
    }

    .tlp-controlled-shield {
      width: 43px;
      height: 43px;
      display: grid;
      place-items: center;
      color: #22e6ff;
      filter: drop-shadow(0 0 18px rgba(34,230,255,.38));
    }

    .tlp-controlled-shield svg { width: 42px; height: 42px; }

    .tlp-status-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 18px;
    }

    .tlp-action-note {
      margin-top: 15px;
      color: rgba(255,255,255,.82);
      text-align: center;
      font-size: 13px;
      line-height: 1;
      font-weight: 760;
      letter-spacing: 0.28em;
      text-transform: uppercase;
    }

    .tlp-components {
      top: 880px;
    }

    @media (max-width: 900px) {
      .tlp-m-shell {
        padding: 16px 13px 18px;
      }

      .tlp-m-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 32px;
        padding: 0 12px;
        border-radius: 10px;
        background: rgba(5, 13, 34, 0.82);
        border: 1px solid rgba(8, 124, 255, 0.48);
        color: #ffffff;
        text-transform: uppercase;
        font-size: 10px;
        line-height: 1;
        font-weight: 840;
        letter-spacing: 0.12em;
      }

      .tlp-m-hero-badge svg { width: 17px; height: 17px; color: var(--tl-blue2); }

      .tlp-m-title {
        margin: 20px 0 0;
        font-size: clamp(40px, 11vw, 54px);
        line-height: 0.98;
        letter-spacing: -0.068em;
      }

      .tlp-m-copy-line {
        width: 92px;
        height: 2px;
        margin: 20px 0 14px;
        background: linear-gradient(90deg, #22e6ff, rgba(8, 124, 255, 0.45), transparent);
      }

      .tlp-m-copy .tlp-copy-blue { color: var(--tl-blue2); }

      .tlp-m-values {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
        margin-top: 16px;
      }

      .tlp-m-value {
        border-radius: 13px;
        padding: 12px;
        background: rgba(3, 8, 24, 0.48);
        border: 1px solid rgba(8, 124, 255, 0.26);
      }

      .tlp-m-value h3 {
        margin: 0;
        color: #ffffff;
        font-size: 14px;
        line-height: 1;
        font-weight: 850;
        letter-spacing: -0.035em;
      }

      .tlp-m-value p {
        margin: 6px 0 0;
        color: rgba(238, 244, 255, 0.72);
        font-size: 11px;
        line-height: 1.22;
        font-weight: 430;
      }

      .tlp-m-agent,
      .tlp-m-control-layer,
      .tlp-m-controlled {
        border-radius: 18px;
        background: linear-gradient(145deg, rgba(7, 21, 55, 0.82), rgba(14, 10, 42, 0.90));
        border: 1px solid rgba(8, 124, 255, 0.36);
        margin-top: 15px;
        padding: 14px;
      }

      .tlp-m-agent h2,
      .tlp-m-control-layer h2,
      .tlp-m-controlled h2 {
        margin: 0;
        color: #ffffff;
        text-align: center;
        font-size: 18px;
        line-height: 1.05;
        font-weight: 860;
        letter-spacing: -0.045em;
      }

      .tlp-m-agent-pills,
      .tlp-m-status-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 12px;
      }

      .tlp-m-agent-pills span,
      .tlp-m-status-row span {
        min-height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: rgba(238, 244, 255, 0.90);
        background: rgba(3, 8, 24, 0.48);
        border: 1px solid rgba(8, 124, 255, 0.28);
        font-size: 12px;
        font-weight: 720;
      }

      .tlp-m-control-layer { border-color: rgba(176, 87, 255, 0.42); }

      .tlp-m-action-note {
        margin-top: 12px;
        color: rgba(255,255,255,.74);
        text-align: center;
        font-size: 10px;
        line-height: 1.25;
        font-weight: 720;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }
    }


    /* V9 layout correction: keep the approved hero identity, fix spacing/overlaps, and extend the page before the global footer. */
    @media (min-width: 901px) {
      .tlp-left {
        top: 152px;
      }

      .tlp-copy-line {
        margin: 30px 0 24px;
      }

      .tlp-copy {
        width: 560px;
        font-size: 18px;
        line-height: 1.34;
      }

      .tlp-actions {
        margin-top: 34px;
      }

      .tlp-visual {
        top: 104px;
        height: 650px;
      }

      .tlp-controlled-action {
        top: 558px;
        height: 170px;
        padding: 18px 30px 16px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 15px;
      }

      .tlp-controlled-head {
        flex: 0 0 auto;
      }

      .tlp-status-row {
        margin-top: 0;
        flex: 0 0 auto;
      }

      .tlp-action-note {
        margin-top: 0;
        flex: 0 0 auto;
        letter-spacing: 0.24em;
      }

      .tlp-value-strip {
        top: 790px;
        left: 74px;
        width: 1524px;
        min-height: 112px;
        align-items: stretch;
      }

      .tlp-value {
        min-height: 112px;
        grid-template-columns: 62px 1fr;
        align-items: center;
        gap: 18px;
        padding: 14px 34px 14px 0;
      }

      .tlp-value:not(:last-child)::after {
        top: 22px;
        height: 68px;
        right: 22px;
      }

      .tlp-value-icon {
        width: 60px;
        height: 60px;
      }

      .tlp-value h3 {
        font-size: 21px;
        line-height: 1.05;
      }

      .tlp-value p {
        max-width: 245px;
        font-size: 14px;
        line-height: 1.28;
        white-space: normal;
      }

      .tlp-components {
        top: 980px;
      }

      .tlp-components-head {
        margin-bottom: 30px;
      }

      .tlp-components-grid {
        gap: 18px;
      }

      .tlp-component-card {
        min-height: 284px;
      }
    }

    @media (max-width: 900px) {
      .tlp-m-cards,
      .tlp-m-platform,
      .tlp-m-components,
      .tlp-m-component-grid {
        margin-bottom: 0;
      }
    }


    /* V10 PLATFORM HERO COLLISION FIX
       Scope: desktop hero only. Removes the badge visually, separates the right-side diagram from the value strip,
       and moves the following components section down without changing routes, buttons, mobile layout, or global shell. */
    @media (min-width: 901px) {
      .tlp-hero-badge {
        display: none;
      }

      .tlp-left {
        top: 142px;
      }

      .tlp-title {
        margin-top: 0;
      }

      .tlp-visual {
        top: 86px;
        height: 720px;
      }

      .tlp-agent-card {
        top: 0;
      }

      .tlp-flow-lines {
        top: 150px;
      }

      .tlp-control-layer {
        top: 205px;
      }

      .tlp-down-new {
        top: 492px;
        height: 38px;
      }

      .tlp-controlled-action {
        top: 535px;
        height: 150px;
        padding: 17px 30px 15px;
        gap: 12px;
      }

      .tlp-controlled-head {
        font-size: 24px;
      }

      .tlp-status-row {
        gap: 12px;
      }

      .tlp-action-note {
        letter-spacing: 0.22em;
      }

      .tlp-value-strip {
        top: 820px;
      }

      .tlp-components {
        top: 1035px;
      }
    }


    /* V11 PLATFORM HERO DIAGRAM SCALE + ALIGNMENT FIX
       Scope: desktop hero diagram only.
       Purpose: reduce the right-side diagram size, lower it slightly, and center the AI Agent / AI Use Case card content.
       Does not touch left hero copy, buttons, links, mobile layout, routes, global header/footer, or the following sections. */
    @media (min-width: 901px) {
      .tlp-visual {
        top: 118px;
        right: 74px;
        width: 748px;
        height: 720px;
        transform: scale(0.92);
        transform-origin: top right;
      }

      .tlp-agent-card {
        top: 0;
        height: 150px;
        padding: 18px 32px 17px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .tlp-agent-head {
        min-height: 50px;
        align-items: center;
        justify-content: center;
        gap: 16px;
        font-size: 23px;
      }

      .tlp-agent-mark {
        width: 50px;
        height: 50px;
      }

      .tlp-agent-mark svg {
        width: 29px;
        height: 29px;
      }

      .tlp-agent-pills {
        margin-top: 16px;
        gap: 13px;
      }

      .tlp-agent-pill {
        height: 36px;
        font-size: 14px;
      }

      .tlp-agent-pill svg {
        width: 22px;
        height: 22px;
      }

      .tlp-flow-lines {
        top: 150px;
      }

      .tlp-control-layer {
        top: 205px;
      }

      .tlp-down-new {
        top: 492px;
        height: 38px;
      }

      .tlp-controlled-action {
        top: 535px;
      }

      .tlp-value-strip {
        top: 820px;
      }

      .tlp-components {
        top: 1035px;
      }
    }


    /* V16 PREMIUM AI CONTROL PLANE VISUAL
       Scope: desktop hero visual only.
       Purpose: replaces the V14 dashboard with a stable CSS Grid dashboard that keeps the header fully visible,
       uses concrete high-impact AI actions, and preserves every other page section, link, mobile layout, and script. */
    @media (min-width: 901px) {
      .tlp-visual {
        top: 104px !important;
        right: 76px !important;
        width: 804px !important;
        height: 564px !important;
        transform: none !important;
        transform-origin: center center !important;
        display: block !important;
        overflow: visible !important;
        z-index: 24 !important;
        pointer-events: none;
      }

      .tlp-visual::before {
        content: "" !important;
        position: absolute;
        inset: -82px -74px -66px -80px;
        pointer-events: none;
        opacity: 0.58;
        background:
          repeating-radial-gradient(
            ellipse at 63% 40%,
            transparent 0 30px,
            rgba(8, 124, 255, 0.13) 31px 32px,
            transparent 33px 68px
          ),
          repeating-radial-gradient(
            ellipse at 62% 43%,
            transparent 0 74px,
            rgba(124, 61, 255, 0.15) 75px 76px,
            transparent 77px 144px
          ),
          radial-gradient(circle at 65% 39%, rgba(8, 124, 255, 0.18), transparent 43%),
          radial-gradient(circle at 86% 62%, rgba(124, 61, 255, 0.20), transparent 34%);
        mask-image: linear-gradient(180deg, transparent 0%, black 13%, black 88%, transparent 100%);
      }

      .tlp-visual::after {
        content: "" !important;
        position: absolute;
        left: 70px;
        right: 42px;
        bottom: -25px;
        height: 82px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(ellipse at center, rgba(8, 124, 255, 0.24), rgba(124, 61, 255, 0.11) 44%, transparent 72%);
        filter: blur(18px);
        opacity: 0.70;
      }

      .tlp-v15-dashboard,
      .tlp-v15-dashboard * {
        box-sizing: border-box;
      }

      .tlp-v15-dashboard {
        position: relative;
        width: 804px;
        height: 564px;
        margin: 0;
        border-radius: 22px;
        overflow: hidden;
        isolation: isolate;
        pointer-events: auto;
        display: grid;
        grid-template-columns: 96px 1fr;
        color: #ffffff;
        background:
          radial-gradient(circle at 79% 8%, rgba(8, 124, 255, 0.16), transparent 33%),
          radial-gradient(circle at 92% 43%, rgba(124, 61, 255, 0.20), transparent 36%),
          linear-gradient(143deg, rgba(4, 15, 40, 0.96), rgba(2, 7, 21, 0.985) 48%, rgba(9, 8, 35, 0.98));
        border: 1px solid rgba(96, 165, 255, 0.50);
        box-shadow:
          0 35px 88px rgba(0, 0, 0, 0.48),
          0 0 55px rgba(8, 124, 255, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.10);
      }

      .tlp-v15-dashboard::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background:
          linear-gradient(rgba(255,255,255,.030) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
        background-size: 48px 48px;
        opacity: 0.17;
        mask-image: radial-gradient(circle at 58% 42%, black 0%, transparent 72%);
      }

      .tlp-v15-dashboard::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 48%;
        left: -58%;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.10) 42%, transparent 78%);
        animation: tlpV15Sheen 8s ease-in-out infinite;
      }

      .tlp-v15-rail {
        position: relative;
        z-index: 2;
        min-width: 0;
        padding: 24px 15px 18px;
        display: grid;
        grid-template-rows: auto 1fr auto;
        justify-items: center;
        background: linear-gradient(180deg, rgba(5, 17, 44, 0.93), rgba(2, 7, 21, 0.98));
        border-right: 1px solid rgba(96, 165, 255, 0.32);
      }

      .tlp-v15-brand {
        text-align: center;
      }

      .tlp-v15-brand svg {
        width: 46px;
        height: 39px;
        margin: 0 auto 9px;
        filter: drop-shadow(0 0 13px rgba(8, 124, 255, 0.35));
      }

      .tlp-v15-brand span {
        display: block;
        color: #ffffff;
        font-size: 10.8px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: 0.055em;
      }

      .tlp-v15-nav {
        margin-top: 38px;
        display: grid;
        align-content: start;
        gap: 14px;
      }

      .tlp-v15-nav-item {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        color: rgba(238, 244, 255, 0.72);
        background: rgba(3, 8, 24, 0.46);
        border: 1px solid rgba(148, 163, 184, 0.20);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
      }

      .tlp-v15-nav-item.active {
        color: #ffffff;
        background: linear-gradient(135deg, #087cff 0%, #7c3dff 100%);
        border-color: rgba(34, 230, 255, 0.62);
        box-shadow: 0 0 25px rgba(8, 124, 255, 0.32), inset 0 1px 0 rgba(255,255,255,.16);
      }

      .tlp-v15-nav-item svg {
        width: 22px;
        height: 22px;
      }

      .tlp-v15-score {
        width: 70px;
        transform: translateY(-14px);
        border-radius: 15px;
        padding: 10px 8px 9px;
        background: rgba(4, 14, 36, 0.70);
        border: 1px solid rgba(8, 124, 255, 0.34);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 22px rgba(8, 124, 255, 0.08);
        text-align: center;
      }

      .tlp-v15-score-label {
        color: rgba(238, 244, 255, 0.90);
        font-size: 10.5px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: -0.03em;
        margin-bottom: 8px;
      }

      .tlp-v15-score-ring {
        width: 50px;
        height: 50px;
        margin: 0 auto 8px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #ffffff;
        font-size: 24px;
        line-height: 1;
        font-weight: 920;
        letter-spacing: -0.055em;
        background:
          radial-gradient(circle at center, #071126 0 52%, transparent 53%),
          conic-gradient(#22e6ff 0 36%, #087cff 36% 66%, #7c3dff 66% 92%, rgba(148,163,184,.16) 92% 100%);
        box-shadow: 0 0 20px rgba(34, 230, 255, 0.18);
      }

      .tlp-v15-score small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: #1ee981;
        font-size: 9.1px;
        line-height: 1;
        font-weight: 850;
      }

      .tlp-v15-score small::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #1ee981;
        box-shadow: 0 0 11px rgba(30, 233, 129, 0.70);
      }

      .tlp-v15-main {
        position: relative;
        z-index: 2;
        min-width: 0;
        height: 100%;
        padding: 18px 18px 16px;
        display: grid;
        grid-template-rows: 86px 78px 1fr 78px;
        gap: 10px;
      }

      .tlp-v15-main::before {
        content: "";
        position: absolute;
        top: 12px;
        right: 12px;
        width: 330px;
        height: 150px;
        pointer-events: none;
        opacity: 0.42;
        background:
          repeating-radial-gradient(ellipse at 58% 46%, transparent 0 24px, rgba(8, 124, 255, 0.16) 25px 26px, transparent 27px 58px),
          radial-gradient(circle at 58% 46%, rgba(124, 61, 255, 0.15), transparent 54%);
        mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 100%);
      }

      .tlp-v15-header {
        position: relative;
        z-index: 5;
        min-width: 0;
        overflow: visible;
        padding: 0 4px 0 0;
        display: block;
      }

      .tlp-v15-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 17px;
        color: var(--tl-cyan);
        font-size: 10.5px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: 0.155em;
        text-transform: uppercase;
      }

      .tlp-v15-eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22e6ff;
        box-shadow: 0 0 14px rgba(34, 230, 255, 0.75);
      }

      .tlp-v15-title {
        position: relative;
        z-index: 6;
        margin: 11px 0 0;
        color: #ffffff;
        font-size: 32px;
        line-height: 1.02;
        font-weight: 900;
        letter-spacing: -0.064em;
        white-space: nowrap;
        text-shadow: 0 11px 32px rgba(0, 0, 0, 0.34);
      }

      .tlp-v15-subtitle {
        position: relative;
        z-index: 6;
        margin: 6px 0 0;
        color: rgba(238, 244, 255, 0.76);
        font-size: 14.4px;
        line-height: 1.18;
        font-weight: 470;
        letter-spacing: -0.021em;
        white-space: nowrap;
      }

      .tlp-v15-kpis {
        position: relative;
        z-index: 4;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 9px;
      }

      .tlp-v15-kpi {
        position: relative;
        min-width: 0;
        height: 78px;
        border-radius: 12px;
        padding: 12px 10px 10px;
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 8px;
        align-items: center;
        overflow: hidden;
        background:
          radial-gradient(circle at 20% 0%, rgba(8, 124, 255, 0.16), transparent 45%),
          linear-gradient(180deg, rgba(8, 23, 55, 0.72), rgba(3, 8, 24, 0.88));
        border: 1px solid rgba(8, 124, 255, 0.37);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 24px rgba(8, 124, 255, 0.06);
      }

      .tlp-v15-kpi-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #22e6ff;
        background: rgba(8, 124, 255, 0.10);
        border: 1px solid rgba(34, 230, 255, 0.36);
        box-shadow: 0 0 19px rgba(8, 124, 255, 0.16), inset 0 0 14px rgba(8, 124, 255, 0.09);
      }

      .tlp-v15-kpi-icon svg {
        width: 16px;
        height: 16px;
      }

      .tlp-v15-kpi-text {
        min-width: 0;
      }

      .tlp-v15-kpi-text span {
        display: block;
        color: rgba(238, 244, 255, 0.78);
        font-size: 10.4px;
        line-height: 1.08;
        font-weight: 760;
        letter-spacing: -0.026em;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
      }

      .tlp-v15-kpi-text strong {
        display: inline-block;
        margin-top: 9px;
        color: #ffffff;
        font-size: 26px;
        line-height: 0.92;
        font-weight: 920;
        letter-spacing: -0.07em;
      }

      .tlp-v15-kpi-text em {
        margin-left: 6px;
        color: #1ee981;
        font-style: normal;
        font-size: 10.8px;
        line-height: 1;
        font-weight: 850;
        letter-spacing: -0.035em;
      }

      .tlp-v15-content {
        position: relative;
        z-index: 3;
        min-width: 0;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1.10fr) minmax(0, 1fr);
        gap: 10px;
      }

      .tlp-v15-card,
      .tlp-v15-mini-card {
        position: relative;
        min-width: 0;
        overflow: hidden;
        border-radius: 12px;
        background:
          radial-gradient(circle at 84% 9%, rgba(8, 124, 255, 0.10), transparent 35%),
          linear-gradient(180deg, rgba(5, 16, 41, 0.76), rgba(3, 8, 24, 0.91));
        border: 1px solid rgba(8, 124, 255, 0.39);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 24px rgba(8, 124, 255, 0.045);
      }

      .tlp-v15-card-head {
        height: 33px;
        padding: 0 11px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 9px;
      }

      .tlp-v15-card-head h4 {
        margin: 0;
        color: #ffffff;
        font-size: 16px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -0.052em;
        white-space: nowrap;
      }

      .tlp-v15-card-head span {
        color: #22e6ff;
        font-size: 10px;
        line-height: 1;
        font-weight: 850;
        letter-spacing: -0.025em;
        white-space: nowrap;
      }

      .tlp-v15-actions-card {
        min-height: 0;
        padding: 9px 10px 10px;
        display: grid;
        grid-template-rows: auto 1fr;
      }

      .tlp-v15-action-list {
        min-height: 0;
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        gap: 8px;
      }

      .tlp-v15-action-row {
        min-width: 0;
        min-height: 0;
        border-radius: 10px;
        padding: 7px 9px;
        display: grid;
        grid-template-columns: 33px minmax(0, 1fr) 76px 78px;
        align-items: center;
        gap: 7px;
        background: rgba(3, 8, 24, 0.44);
        border: 1px solid rgba(96, 165, 255, 0.16);
      }

      .tlp-v15-action-icon {
        width: 31px;
        height: 31px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        color: #22e6ff;
        background: rgba(8, 124, 255, 0.08);
        border: 1px solid rgba(34, 230, 255, 0.36);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 14px rgba(8,124,255,.12);
      }

      .tlp-v15-action-icon.money { color: #ffba4a; border-color: rgba(255, 186, 74, 0.50); background: rgba(255, 186, 74, 0.07); }
      .tlp-v15-action-icon.block { color: #ff5f87; border-color: rgba(255, 95, 135, 0.50); background: rgba(255, 95, 135, 0.07); }

      .tlp-v15-action-icon svg {
        width: 17px;
        height: 17px;
      }

      .tlp-v15-action-name {
        min-width: 0;
        color: #ffffff;
        font-size: 12.1px;
        line-height: 1.07;
        font-weight: 850;
        letter-spacing: -0.044em;
      }

      .tlp-v15-status {
        height: 24px;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffba4a;
        background: rgba(255, 186, 74, 0.09);
        border: 1px solid rgba(255, 186, 74, 0.48);
        font-size: 8.8px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -0.018em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .tlp-v15-status.blocked {
        color: #ff6b8c;
        background: rgba(255, 75, 120, 0.10);
        border-color: rgba(255, 75, 120, 0.50);
      }

      .tlp-v15-result {
        color: rgba(238, 244, 255, 0.74);
        font-size: 9.5px;
        line-height: 1.12;
        font-weight: 620;
        letter-spacing: -0.022em;
      }

      .tlp-v15-right {
        min-width: 0;
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) 96px;
        gap: 10px;
      }

      .tlp-v15-runtime {
        border-color: rgba(176, 87, 255, 0.58);
        background:
          radial-gradient(circle at 55% 38%, rgba(8, 124, 255, 0.20), transparent 35%),
          radial-gradient(circle at 88% 28%, rgba(124, 61, 255, 0.22), transparent 40%),
          linear-gradient(180deg, rgba(7, 18, 43, 0.84), rgba(5, 8, 30, 0.93));
      }

      .tlp-v15-live {
        height: 20px;
        padding: 0 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: rgba(238, 244, 255, 0.90) !important;
        background: rgba(3, 8, 24, 0.48);
        border: 1px solid rgba(148, 163, 184, 0.18);
      }

      .tlp-v15-live::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #1ee981;
        box-shadow: 0 0 10px rgba(30, 233, 129, 0.78);
      }

      .tlp-v15-runtime-core {
        position: relative;
        height: 106px;
        margin: 0 9px 0;
        display: grid;
        place-items: center;
      }

      .tlp-v15-orbit {
        position: absolute;
        left: 50%;
        top: 45%;
        border-radius: 50%;
        pointer-events: none;
      }

      .tlp-v15-orbit.one {
        width: 178px;
        height: 53px;
        border: 1px solid rgba(34, 230, 255, 0.50);
        box-shadow: 0 0 22px rgba(8,124,255,.10);
        animation: tlpV15OrbitA 17s linear infinite;
      }

      .tlp-v15-orbit.two {
        width: 136px;
        height: 78px;
        border: 1px solid rgba(124, 61, 255, 0.48);
        animation: tlpV15OrbitB 21s linear infinite reverse;
      }

      .tlp-v15-orbit-dot {
        position: absolute;
        left: 50%;
        top: 45%;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22e6ff;
        box-shadow: 0 0 14px rgba(34,230,255,.85);
        animation: tlpV15Dot 7.5s linear infinite;
      }

      .tlp-v15-brand-mark {
        position: relative;
        z-index: 2;
        width: 84px;
        height: 70px;
        filter: drop-shadow(0 0 18px rgba(8, 124, 255, 0.34));
        transform-origin: center center;
        will-change: transform;
        animation: tlpV16LogoSpin 22s linear infinite;
      }

      .tlp-v15-brand-mark svg {
        width: 100%;
        height: 100%;
        display: block;
      }


      .tlp-v15-runtime-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin: 0 12px 10px;
      }

      .tlp-v15-runtime-metrics div {
        min-width: 0;
        text-align: center;
      }

      .tlp-v15-runtime-metrics div:not(:last-child) {
        border-right: 1px solid rgba(148, 163, 184, 0.22);
      }

      .tlp-v15-runtime-metrics strong {
        display: block;
        color: #ffffff;
        font-size: 22px;
        line-height: .90;
        font-weight: 920;
        letter-spacing: -0.07em;
      }

      .tlp-v15-runtime-metrics span {
        display: block;
        margin-top: 5px;
        color: rgba(238, 244, 255, 0.70);
        font-size: 10.3px;
        line-height: 1;
        font-weight: 640;
      }

      .tlp-v15-lower {
        min-width: 0;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .tlp-v15-mini-card {
        padding: 8px 8px 9px;
      }

      .tlp-v15-mini-card .tlp-v15-card-head {
        height: 23px;
        padding: 0;
      }

      .tlp-v15-mini-card .tlp-v15-card-head h4 {
        font-size: 13.5px;
      }

      .tlp-v15-gate-list {
        display: grid;
        gap: 7px;
        margin-top: 8px;
      }

      .tlp-v15-gate-list div {
        min-width: 0;
        display: grid;
        grid-template-columns: 15px minmax(0, 1fr) 21px;
        align-items: center;
        gap: 6px;
        color: rgba(238, 244, 255, 0.84);
        font-size: 10.3px;
        line-height: 1;
        font-weight: 680;
      }

      .tlp-v15-gate-list svg {
        width: 13px;
        height: 13px;
        color: #22e6ff;
      }

      .tlp-v15-gate-list strong {
        color: #00a3ff;
        font-size: 11.2px;
        line-height: 1;
        font-weight: 900;
        text-align: right;
      }

      .tlp-v15-evidence-row {
        display: grid;
        grid-template-columns: 44px 1fr;
        align-items: center;
        gap: 8px;
        margin-top: 7px;
      }

      .tlp-v15-donut {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #ffffff;
        font-size: 15px;
        line-height: 1;
        font-weight: 920;
        letter-spacing: -0.055em;
        background:
          radial-gradient(circle at center, #071126 0 55%, transparent 56%),
          conic-gradient(#22e6ff 0 58%, #087cff 58% 78%, #7c3dff 78% 91%, rgba(148,163,184,.18) 91% 100%);
        box-shadow: 0 0 20px rgba(34, 230, 255, 0.14);
      }

      .tlp-v15-checks {
        display: grid;
        gap: 6px;
      }

      .tlp-v15-checks div {
        display: flex;
        align-items: center;
        gap: 6px;
        color: rgba(238, 244, 255, 0.82);
        font-size: 8.2px;
        line-height: 1;
        font-weight: 700;
        white-space: nowrap;
      }

      .tlp-v15-checks div::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex: 0 0 auto;
        background:
          linear-gradient(135deg, transparent 0 42%, #1ee981 43% 57%, transparent 58%) 3px 3px/6px 6px no-repeat,
          rgba(30, 233, 129, 0.09);
        border: 1px solid rgba(30, 233, 129, 0.72);
        box-shadow: 0 0 9px rgba(30, 233, 129, 0.22);
      }

      .tlp-v15-trust-strip {
        min-width: 0;
        border-radius: 12px;
        padding: 0 12px;
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) auto;
        align-items: center;
        gap: 9px;
        background:
          radial-gradient(circle at 9% 50%, rgba(8, 124, 255, 0.24), transparent 26%),
          linear-gradient(90deg, rgba(8, 124, 255, 0.20), rgba(124, 61, 255, 0.13), rgba(3, 8, 24, 0.72));
        border: 1px solid rgba(96, 165, 255, 0.38);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
      }

      .tlp-v15-trust-icon {
        width: 38px;
        height: 38px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        color: #ffffff;
        background: linear-gradient(135deg, #087cff, #7c3dff);
        box-shadow: 0 0 21px rgba(8, 124, 255, 0.31);
      }

      .tlp-v15-trust-icon svg {
        width: 20px;
        height: 20px;
      }

      .tlp-v15-trust-copy {
        min-width: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        color: rgba(238, 244, 255, 0.78);
        font-size: 10.8px;
        line-height: 1.16;
        font-weight: 520;
        letter-spacing: -0.026em;
      }

      .tlp-v15-trust-copy strong {
        display: inline-block;
        margin-right: 4px;
        color: #ffffff;
        font-size: 12.6px;
        font-weight: 900;
        letter-spacing: 0;
      }

      .tlp-v15-badges {
        display: flex;
        align-items: center;
        gap: 7px;
      }

      .tlp-v15-badges em {
        height: 26px;
        padding: 0 10px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: rgba(238, 244, 255, 0.90);
        border: 1px solid rgba(34, 230, 255, 0.30);
        background: rgba(34, 230, 255, 0.06);
        font-style: normal;
        font-size: 10px;
        line-height: 1;
        font-weight: 820;
        white-space: nowrap;
      }

      .tlp-v15-badges em::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 1px solid currentColor;
      }

      .tlp-v15-badges em:nth-child(1) { color: #1ee981; border-color: rgba(30, 233, 129, 0.42); background: rgba(30, 233, 129, 0.06); }
      .tlp-v15-badges em:nth-child(2) { color: #60a5ff; border-color: rgba(96, 165, 255, 0.42); background: rgba(96, 165, 255, 0.06); }
      .tlp-v15-badges em:nth-child(3) { color: #b057ff; border-color: rgba(176, 87, 255, 0.44); background: rgba(124, 61, 255, 0.08); }

      @keyframes tlpV15Sheen {
        0%, 48% { left: -58%; opacity: 0; }
        58% { opacity: 0.13; }
        74% { left: 112%; opacity: 0; }
        100% { left: 112%; opacity: 0; }
      }

      @keyframes tlpV16LogoSpin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      @keyframes tlpV15OrbitA {
        from { transform: translate(-50%, -50%) rotate(-8deg); }
        to { transform: translate(-50%, -50%) rotate(352deg); }
      }

      @keyframes tlpV15OrbitB {
        from { transform: translate(-50%, -50%) rotate(58deg); }
        to { transform: translate(-50%, -50%) rotate(418deg); }
      }

      @keyframes tlpV15Dot {
        from { transform: translate(-50%, -50%) rotate(0deg) translateX(82px); }
        to { transform: translate(-50%, -50%) rotate(360deg) translateX(82px); }
      }
    }

    @media (min-width: 901px) and (max-width: 1440px) {
      .tlp-visual {
        right: 46px !important;
        width: 742px !important;
        height: 522px !important;
      }

      .tlp-v15-dashboard {
        transform: scale(0.925);
        transform-origin: top right;
      }
    }




    /* V20 PLATFORM COMPONENTS SMART HEIGHT CALIBRATION
       Scope: desktop Platform Components section only.
       Purpose: keeps the V18 control flow design, removes the large footer gap from V19,
       and lets the script calculate desktop height from the real end of the section.
       Preserves hero, runtime gateway, buttons, routes, mobile layout, value strip, and component content. */
    @media (min-width: 901px) {
      .trustelis-platform-page {
        --tl-stage-h: 2260px;
        --tl-fit-h: 2260px;
      }

      .tlp-components.tlp-components-v18 {
        position: absolute !important;
        left: 78px !important;
        top: 965px !important;
        width: 1516px !important;
        min-height: 1180px !important;
        z-index: 26 !important;
        overflow: visible !important;
        padding: 0 0 56px !important;
      }

      .tlp-components-v18,
      .tlp-components-v18 * {
        box-sizing: border-box;
      }

      .tlp-components-v18::before {
        content: "";
        position: absolute;
        left: -100px;
        right: -100px;
        top: -98px;
        bottom: -112px;
        z-index: -3;
        pointer-events: none;
        opacity: 0.92;
        background:
          radial-gradient(circle at 8% 7%, rgba(8, 124, 255, 0.22), transparent 24%),
          radial-gradient(circle at 94% 12%, rgba(176, 87, 255, 0.17), transparent 27%),
          radial-gradient(circle at 50% 55%, rgba(0, 163, 255, 0.08), transparent 42%),
          repeating-radial-gradient(ellipse at 50% 21%, transparent 0 102px, rgba(8, 124, 255, 0.09) 103px 104px, transparent 105px 205px),
          linear-gradient(180deg, rgba(2, 6, 20, 0), rgba(2, 6, 20, 0.12));
        mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 93%, transparent 100%);
      }

      .tlp-components-v18::after {
        content: "";
        position: absolute;
        left: -130px;
        right: -130px;
        top: 238px;
        height: 520px;
        z-index: -2;
        pointer-events: none;
        opacity: 0.78;
        background:
          linear-gradient(90deg, transparent 0 3%, rgba(34, 230, 255, 0.34) 4%, rgba(34, 230, 255, 0.16) 5.4%, transparent 7.5%),
          linear-gradient(90deg, transparent 92%, rgba(176, 87, 255, 0.34) 95%, rgba(176, 87, 255, 0.18) 96.4%, transparent 98.5%);
        filter: drop-shadow(0 0 24px rgba(34, 230, 255, 0.25));
      }

      .tlp-components-v18 .tlp-components-head {
        position: relative;
        z-index: 5;
        text-align: center !important;
        margin: 0 auto 22px !important;
      }

      .tlp-components-v18 .tlp-components-kicker {
        height: 40px !important;
        padding: 0 22px !important;
        border-radius: 999px !important;
        gap: 12px !important;
        color: rgba(189, 220, 255, 0.98) !important;
        background: rgba(3, 10, 27, 0.78) !important;
        border: 1px solid rgba(65, 126, 255, 0.74) !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.10),
          0 0 30px rgba(8, 124, 255, 0.15) !important;
        font-size: 14px !important;
        line-height: 1 !important;
        font-weight: 850 !important;
        letter-spacing: 0.16em !important;
        text-transform: uppercase !important;
      }

      .tlp-components-v18 .tlp-components-kicker svg {
        width: 20px !important;
        height: 20px !important;
        color: #22e6ff !important;
        filter: drop-shadow(0 0 12px rgba(34, 230, 255, 0.42));
      }

      .tlp-components-v18 .tlp-components-title {
        margin: 22px 0 0 !important;
        color: #ffffff !important;
        font-size: 56px !important;
        line-height: 0.98 !important;
        font-weight: 900 !important;
        letter-spacing: -0.064em !important;
        text-shadow: 0 18px 42px rgba(0, 0, 0, 0.42) !important;
      }

      .tlp-components-v18 .tlp-components-title .tlp-v18-blue {
        color: var(--tl-blue) !important;
        text-shadow: 0 0 36px rgba(8, 124, 255, 0.42) !important;
      }

      .tlp-components-v18 .tlp-components-subtitle {
        margin: 18px auto 0 !important;
        max-width: 870px !important;
        color: rgba(238, 244, 255, 0.84) !important;
        font-size: 19px !important;
        line-height: 1.22 !important;
        font-weight: 540 !important;
        letter-spacing: -0.023em !important;
      }

      .tlp-v18-top-flow {
        position: relative;
        z-index: 4;
        display: grid;
        grid-template-columns: 0.94fr 1.76fr 0.86fr;
        gap: 64px;
        align-items: center;
        margin-top: 16px;
        min-height: 246px;
      }

      .tlp-v18-side-box,
      .tlp-v18-control-layer,
      .tlp-v18-outcomes-box {
        position: relative;
        border-radius: 16px;
        background:
          radial-gradient(circle at 14% 0%, rgba(8, 124, 255, 0.14), transparent 38%),
          linear-gradient(180deg, rgba(5, 16, 41, 0.79), rgba(3, 8, 24, 0.92));
        border: 1px solid rgba(8, 124, 255, 0.58);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 0 32px rgba(8, 124, 255, 0.10);
      }

      .tlp-v18-side-box,
      .tlp-v18-outcomes-box {
        min-height: 238px;
        padding: 19px 22px 20px;
      }

      .tlp-v18-outcomes-box {
        border-color: rgba(176, 87, 255, 0.58);
        background:
          radial-gradient(circle at 86% 5%, rgba(176, 87, 255, 0.16), transparent 36%),
          linear-gradient(180deg, rgba(12, 13, 43, 0.80), rgba(3, 8, 24, 0.92));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 0 34px rgba(124, 61, 255, 0.11);
      }

      .tlp-v18-side-box h3,
      .tlp-v18-outcomes-box h3 {
        margin: 0 0 16px !important;
        color: #ffffff !important;
        font-size: 20px !important;
        line-height: 1.05 !important;
        font-weight: 880 !important;
        letter-spacing: -0.045em !important;
        text-align: center;
      }

      .tlp-v18-list {
        display: grid;
        gap: 6px;
      }

      .tlp-v18-list-item {
        min-height: 30px;
        border-radius: 7px;
        display: grid;
        grid-template-columns: 26px 1fr;
        align-items: center;
        gap: 9px;
        padding: 0 10px;
        color: rgba(238, 244, 255, 0.92);
        background: rgba(3, 8, 24, 0.46);
        border: 1px solid rgba(96, 165, 255, 0.22);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: -0.023em;
      }

      .tlp-v18-list-item svg {
        width: 19px;
        height: 19px;
        color: #22e6ff;
        filter: drop-shadow(0 0 9px rgba(34, 230, 255, 0.32));
      }

      .tlp-v18-outcomes-box .tlp-v18-list-item {
        grid-template-columns: 28px 1fr;
        color: rgba(238, 244, 255, 0.90);
        border-color: rgba(176, 87, 255, 0.28);
      }

      .tlp-v18-outcomes-box .tlp-v18-list-item svg {
        color: #b057ff;
        filter: drop-shadow(0 0 9px rgba(176, 87, 255, 0.34));
      }

      .tlp-v18-side-note,
      .tlp-v18-outcome-note {
        margin: 15px auto 0;
        max-width: 270px;
        color: rgba(238, 244, 255, 0.78);
        font-size: 14.5px;
        line-height: 1.22;
        font-weight: 500;
        text-align: center;
        letter-spacing: -0.02em;
      }

      .tlp-v18-control-layer {
        min-height: 218px;
        padding: 22px 32px 23px;
        border-color: rgba(34, 230, 255, 0.72);
        background:
          radial-gradient(circle at 50% 0%, rgba(34, 230, 255, 0.10), transparent 48%),
          linear-gradient(180deg, rgba(5, 18, 45, 0.82), rgba(3, 8, 24, 0.94));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.075),
          0 0 36px rgba(34, 230, 255, 0.12);
      }

      .tlp-v18-control-layer::before,
      .tlp-v18-control-layer::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 73px;
        height: 4px;
        transform: translateY(-50%);
        background: linear-gradient(90deg, rgba(34, 230, 255, 0.12), #22e6ff, rgba(34, 230, 255, 0.12));
        box-shadow: 0 0 20px rgba(34, 230, 255, 0.55);
      }

      .tlp-v18-control-layer::before { left: -73px; }
      .tlp-v18-control-layer::after { right: -73px; }

      .tlp-v18-flow-node {
        position: absolute;
        top: 50%;
        width: 18px;
        height: 18px;
        border-radius: 99px;
        transform: translateY(-50%);
        background: #22e6ff;
        border: 2px solid rgba(135, 220, 255, 0.90);
        box-shadow: 0 0 20px rgba(34, 230, 255, 0.9), 0 0 42px rgba(8, 124, 255, 0.45);
      }

      .tlp-v18-flow-node.left { left: -82px; }
      .tlp-v18-flow-node.right { right: -82px; }

      .tlp-v18-control-layer h3 {
        margin: 0 0 20px !important;
        text-align: center;
        color: #ffffff !important;
        font-size: 22px !important;
        line-height: 1 !important;
        font-weight: 880 !important;
        letter-spacing: -0.045em !important;
      }

      .tlp-v18-layer-steps {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px;
        align-items: start;
      }

      .tlp-v18-layer-step {
        position: relative;
        text-align: center;
      }

      .tlp-v18-layer-step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: calc(50% + 33px);
        top: 31px;
        width: calc(100% - 48px);
        height: 2px;
        background: linear-gradient(90deg, #22e6ff, rgba(34, 230, 255, 0.18));
        box-shadow: 0 0 14px rgba(34, 230, 255, 0.30);
      }

      .tlp-v18-step-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 9px;
        border-radius: 15px;
        display: grid;
        place-items: center;
        color: #60a5ff;
        background: rgba(3, 8, 24, 0.48);
        border: 1px solid rgba(96, 165, 255, 0.46);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 22px rgba(8,124,255,.10);
      }

      .tlp-v18-step-icon svg {
        width: 38px;
        height: 38px;
      }

      .tlp-v18-step-num {
        width: 29px;
        height: 29px;
        margin: -8px auto 8px;
        border-radius: 99px;
        display: grid;
        place-items: center;
        color: #22e6ff;
        background: rgba(3, 10, 27, 0.88);
        border: 1px solid rgba(34, 230, 255, 0.42);
        font-size: 15px;
        line-height: 1;
        font-weight: 880;
        box-shadow: 0 0 16px rgba(34, 230, 255, 0.16);
      }

      .tlp-v18-layer-step strong {
        display: block;
        color: #ffffff;
        font-size: 15.5px;
        line-height: 1.08;
        font-weight: 820;
        letter-spacing: -0.032em;
      }

      .tlp-v18-control-note {
        margin: 18px auto 0;
        color: rgba(238, 244, 255, 0.82);
        font-size: 16px;
        line-height: 1.2;
        font-weight: 460;
        text-align: center;
        letter-spacing: -0.02em;
      }

      .tlp-v18-process-grid {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px 32px;
        margin-top: 24px;
      }

      .tlp-v18-process-grid::before {
        content: "";
        position: absolute;
        left: -88px;
        right: -88px;
        top: 96px;
        height: 4px;
        z-index: -1;
        opacity: 0.58;
        background: linear-gradient(90deg, transparent, rgba(34, 230, 255, 0.42), rgba(176, 87, 255, 0.30), transparent);
        box-shadow: 0 0 20px rgba(34, 230, 255, 0.22);
      }

      .tlp-v18-process-grid::after {
        content: "";
        position: absolute;
        left: -88px;
        right: -88px;
        top: 314px;
        height: 4px;
        z-index: -1;
        opacity: 0.48;
        background: linear-gradient(90deg, transparent, rgba(176, 87, 255, 0.36), rgba(34, 230, 255, 0.34), transparent);
        box-shadow: 0 0 20px rgba(176, 87, 255, 0.18);
      }

      .tlp-v18-card {
        position: relative;
        min-height: 187px;
        border-radius: 15px;
        padding: 24px 28px 22px 116px;
        overflow: hidden;
        background:
          radial-gradient(circle at 5% 0%, rgba(8, 124, 255, 0.16), transparent 36%),
          linear-gradient(180deg, rgba(5, 16, 41, 0.80), rgba(3, 8, 24, 0.92));
        border: 1px solid rgba(8, 124, 255, 0.62);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.065),
          0 0 30px rgba(8, 124, 255, 0.08),
          0 23px 54px rgba(0,0,0,.22);
      }

      .tlp-v18-card.purple {
        border-color: rgba(176, 87, 255, 0.60);
        background:
          radial-gradient(circle at 5% 0%, rgba(124, 61, 255, 0.18), transparent 36%),
          linear-gradient(180deg, rgba(13, 13, 45, 0.82), rgba(3, 8, 24, 0.93));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.065),
          0 0 30px rgba(124, 61, 255, 0.10),
          0 23px 54px rgba(0,0,0,.22);
      }

      .tlp-v18-card.cyan {
        border-color: rgba(34, 230, 255, 0.50);
        background:
          radial-gradient(circle at 5% 0%, rgba(34, 230, 255, 0.14), transparent 36%),
          linear-gradient(180deg, rgba(5, 21, 43, 0.80), rgba(3, 8, 24, 0.93));
      }

      .tlp-v18-card-num {
        position: absolute;
        left: 32px;
        top: 24px;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        color: #60a5ff;
        background: rgba(8, 124, 255, 0.13);
        border: 1px solid rgba(8, 124, 255, 0.58);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(8,124,255,.18);
        font-size: 27px;
        line-height: 1;
        font-weight: 880;
        letter-spacing: -0.05em;
      }

      .tlp-v18-card.purple .tlp-v18-card-num {
        color: #c084fc;
        background: rgba(124, 61, 255, 0.14);
        border-color: rgba(176, 87, 255, 0.56);
      }

      .tlp-v18-card.cyan .tlp-v18-card-num {
        color: #22e6ff;
        background: rgba(34, 230, 255, 0.11);
        border-color: rgba(34, 230, 255, 0.48);
      }

      .tlp-v18-card-icon {
        position: absolute;
        left: 32px;
        top: 82px;
        width: 54px;
        height: 54px;
        color: #1594ff;
        filter: drop-shadow(0 0 18px rgba(8,124,255,.28));
      }

      .tlp-v18-card.purple .tlp-v18-card-icon { color: #b057ff; filter: drop-shadow(0 0 18px rgba(124,61,255,.30)); }
      .tlp-v18-card.cyan .tlp-v18-card-icon { color: #22e6ff; filter: drop-shadow(0 0 18px rgba(34,230,255,.25)); }

      .tlp-v18-card h3 {
        margin: 0 !important;
        color: #ffffff !important;
        font-size: 23px !important;
        line-height: 1.05 !important;
        font-weight: 880 !important;
        letter-spacing: -0.052em !important;
      }

      .tlp-v18-card p {
        margin: 12px 0 0 !important;
        color: rgba(238, 244, 255, 0.82) !important;
        font-size: 15px !important;
        line-height: 1.31 !important;
        font-weight: 430 !important;
        letter-spacing: -0.02em !important;
      }

      .tlp-v18-card .tlp-v18-outcome {
        display: block;
        margin-top: 16px;
        color: #22e6ff;
        font-size: 15.5px;
        line-height: 1.22;
        font-weight: 850;
        letter-spacing: -0.022em;
      }

      .tlp-v18-card.purple .tlp-v18-outcome { color: #c084fc; }
      .tlp-v18-card.cyan .tlp-v18-outcome { color: #22e6ff; }

      .tlp-v18-bottom-line {
        position: relative;
        z-index: 4;
        margin: 24px auto 0;
        max-width: 980px;
        display: grid;
        grid-template-columns: 64px 1fr;
        align-items: center;
        gap: 22px;
        color: #ffffff;
        font-size: 22px;
        line-height: 1.25;
        font-weight: 750;
        letter-spacing: -0.038em;
      }

      .tlp-v18-bottom-line strong {
        color: var(--tl-blue);
        text-shadow: 0 0 26px rgba(8, 124, 255, 0.38);
      }

      .tlp-v18-bottom-icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        color: #ffffff;
        background: radial-gradient(circle at 50% 40%, rgba(34,230,255,.20), transparent 70%), rgba(8, 124, 255, 0.12);
        border: 1px solid rgba(34, 230, 255, 0.55);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 28px rgba(34, 230, 255, 0.18);
      }

      .tlp-v18-bottom-icon svg {
        width: 39px;
        height: 39px;
      }
    }



    /* V21 MOBILE PREMIUM TWO-COLUMN EXPERIENCE
       Scope: MOBILE ONLY (max-width: 900px).
       Purpose: enforce a premium two-items-per-row standard for mobile pills, tags, status rows,
       and component item chips; keep all chip text on one line; reduce mobile card height;
       preserve desktop, routes, buttons, scripts, global header, and global footer. */
    @media (max-width: 900px) {
      .trustelis-platform-page {
        background:
          radial-gradient(circle at 8% 2%, rgba(8, 124, 255, 0.24), transparent 28%),
          radial-gradient(circle at 100% 9%, rgba(124, 61, 255, 0.22), transparent 34%),
          radial-gradient(circle at 50% 48%, rgba(0, 163, 255, 0.08), transparent 42%),
          linear-gradient(180deg, #020614 0%, #061127 48%, #020614 100%) !important;
      }

      .tlp-mobile {
        display: block !important;
        width: 100% !important;
        padding: 14px 10px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-x: hidden !important;
      }

      .tlp-m-shell {
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        border-radius: 24px !important;
        padding: 14px 12px 18px !important;
        overflow: hidden !important;
        background:
          radial-gradient(circle at 12% 0%, rgba(8, 124, 255, 0.20), transparent 35%),
          radial-gradient(circle at 100% 18%, rgba(124, 61, 255, 0.17), transparent 36%),
          linear-gradient(145deg, rgba(7, 18, 42, 0.88), rgba(3, 8, 22, 0.96)) !important;
        border: 1px solid rgba(96, 165, 255, 0.34) !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.11),
          0 26px 72px rgba(0, 0, 0, 0.38),
          0 0 38px rgba(8, 124, 255, 0.11) !important;
      }

      .tlp-m-hero-badge {
        max-width: 100% !important;
        min-height: 30px !important;
        padding: 0 11px !important;
        gap: 8px !important;
        border-radius: 10px !important;
        font-size: 9.4px !important;
        letter-spacing: 0.105em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .tlp-m-hero-badge span,
      .tlp-m-primary span,
      .tlp-m-secondary span {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .tlp-m-title {
        margin-top: 18px !important;
        font-size: clamp(35px, 10.45vw, 48px) !important;
        line-height: 0.965 !important;
        letter-spacing: -0.071em !important;
      }

      .tlp-m-copy-line {
        width: 88px !important;
        margin: 18px 0 13px !important;
      }

      .tlp-m-copy {
        margin: 0 0 15px !important;
        font-size: 11.1px !important;
        line-height: 1.34 !important;
        letter-spacing: -0.016em !important;
      }

      .tlp-m-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        margin: 15px 0 14px !important;
      }

      .tlp-m-primary,
      .tlp-m-secondary {
        min-width: 0 !important;
        min-height: 49px !important;
        border-radius: 14px !important;
        font-size: 13.2px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
      }

      .tlp-m-values {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 14px !important;
      }

      .tlp-m-value {
        min-width: 0 !important;
        min-height: 76px !important;
        border-radius: 13px !important;
        padding: 11px !important;
        background:
          radial-gradient(circle at 100% 0%, rgba(8, 124, 255, 0.11), transparent 42%),
          rgba(3, 8, 24, 0.52) !important;
        border: 1px solid rgba(8, 124, 255, 0.30) !important;
      }

      .tlp-m-value h3 {
        margin: 0 !important;
        font-size: 14.5px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .tlp-m-value p {
        margin: 6px 0 0 !important;
        font-size: 10.5px !important;
        line-height: 1.18 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
      }

      .tlp-m-agent,
      .tlp-m-control-layer,
      .tlp-m-controlled {
        margin-top: 12px !important;
        padding: 12px !important;
        border-radius: 18px !important;
        background:
          radial-gradient(circle at 100% 0%, rgba(124, 61, 255, 0.12), transparent 39%),
          linear-gradient(145deg, rgba(7, 21, 55, 0.84), rgba(14, 10, 42, 0.92)) !important;
        border: 1px solid rgba(8, 124, 255, 0.39) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.065),
          0 0 24px rgba(8, 124, 255, 0.065) !important;
      }

      .tlp-m-control-layer {
        border-color: rgba(176, 87, 255, 0.44) !important;
      }

      .tlp-m-agent h2,
      .tlp-m-control-layer h2,
      .tlp-m-controlled h2 {
        margin: 0 !important;
        max-width: 100% !important;
        font-size: 16.6px !important;
        line-height: 1.02 !important;
        letter-spacing: -0.047em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .tlp-m-agent-pills,
      .tlp-m-status-row,
      .tlp-m-tags,
      .tlp-m-component-items {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
      }

      .tlp-m-agent-pills,
      .tlp-m-status-row {
        margin-top: 10px !important;
      }

      .tlp-m-agent-pills span:nth-child(3):last-child {
        grid-column: 1 / -1 !important;
      }

      .tlp-m-agent-pills span,
      .tlp-m-status-row span,
      .tlp-m-tags span,
      .tlp-m-component-items span {
        min-width: 0 !important;
        width: 100% !important;
        height: 29px !important;
        min-height: 29px !important;
        padding: 0 8px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: rgba(238, 244, 255, 0.90) !important;
        background: rgba(3, 8, 24, 0.52) !important;
        border: 1px solid rgba(8, 124, 255, 0.31) !important;
        font-size: 10.45px !important;
        line-height: 1 !important;
        font-weight: 740 !important;
        letter-spacing: -0.028em !important;
      }

      .tlp-m-status-row span {
        height: 30px !important;
        min-height: 30px !important;
        font-size: 11.4px !important;
        font-weight: 780 !important;
      }

      .tlp-m-status-row span:nth-child(1) {
        color: #1ee981 !important;
        border-color: rgba(30, 233, 129, 0.38) !important;
        background: rgba(30, 233, 129, 0.06) !important;
      }

      .tlp-m-status-row span:nth-child(2) {
        color: #ff6b8c !important;
        border-color: rgba(255, 107, 140, 0.36) !important;
        background: rgba(255, 107, 140, 0.055) !important;
      }

      .tlp-m-status-row span:nth-child(3) {
        color: #ffba4a !important;
        border-color: rgba(255, 186, 74, 0.36) !important;
        background: rgba(255, 186, 74, 0.055) !important;
      }

      .tlp-m-status-row span:nth-child(4) {
        color: #60a5ff !important;
        border-color: rgba(96, 165, 255, 0.38) !important;
        background: rgba(96, 165, 255, 0.065) !important;
      }

      .tlp-m-pillar {
        min-width: 0 !important;
        border-radius: 14px !important;
        padding: 11px !important;
        background: rgba(3, 8, 24, 0.47) !important;
      }

      .tlp-m-pillar + .tlp-m-pillar {
        margin-top: 9px !important;
      }

      .tlp-m-pillar h3 {
        margin: 0 0 8px !important;
        font-size: 14.8px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
      }

      .tlp-m-tags {
        margin: 0 !important;
      }

      .tlp-m-pillar.govern .tlp-m-tags span {
        border-color: rgba(8, 124, 255, 0.34) !important;
        background: rgba(8, 124, 255, 0.075) !important;
      }

      .tlp-m-pillar.enforce .tlp-m-tags span {
        border-color: rgba(176, 87, 255, 0.34) !important;
        background: rgba(124, 61, 255, 0.08) !important;
      }

      .tlp-m-pillar.prove .tlp-m-tags span {
        border-color: rgba(34, 230, 255, 0.30) !important;
        background: rgba(34, 230, 255, 0.065) !important;
      }

      .tlp-m-action-note {
        margin-top: 10px !important;
        max-width: 100% !important;
        font-size: 7.8px !important;
        line-height: 1 !important;
        font-weight: 780 !important;
        letter-spacing: 0.052em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .tlp-m-components {
        margin-top: 30px !important;
      }

      .tlp-m-components-head {
        margin-bottom: 13px !important;
      }

      .tlp-m-components-kicker {
        max-width: 100% !important;
        min-height: 28px !important;
        padding: 0 11px !important;
        border-radius: 10px !important;
        font-size: 8.1px !important;
        letter-spacing: 0.085em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .tlp-m-components-title {
        margin-top: 12px !important;
        font-size: clamp(29px, 8.35vw, 39px) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.071em !important;
        white-space: nowrap !important;
      }

      .tlp-m-components-subtitle {
        margin-top: 8px !important;
        font-size: 12px !important;
        line-height: 1.26 !important;
      }

      .tlp-m-components-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }

      .tlp-m-component-card {
        min-width: 0 !important;
        border-radius: 16px !important;
        padding: 12px !important;
        background:
          radial-gradient(circle at 91% 7%, rgba(8, 124, 255, 0.13), transparent 35%),
          linear-gradient(145deg, rgba(7, 18, 42, 0.78), rgba(4, 10, 24, 0.90)) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.055),
          0 0 24px rgba(8, 124, 255, 0.055) !important;
      }

      .tlp-m-component-card.purple {
        background:
          radial-gradient(circle at 91% 7%, rgba(124, 61, 255, 0.14), transparent 35%),
          linear-gradient(145deg, rgba(8, 15, 40, 0.78), rgba(4, 10, 24, 0.91)) !important;
      }

      .tlp-m-component-card.cyan {
        background:
          radial-gradient(circle at 91% 7%, rgba(34, 230, 255, 0.10), transparent 35%),
          linear-gradient(145deg, rgba(5, 19, 38, 0.78), rgba(4, 10, 24, 0.91)) !important;
      }

      .tlp-m-component-head {
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        gap: 9px !important;
        align-items: start !important;
      }

      .tlp-m-component-num {
        width: 29px !important;
        height: 29px !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        line-height: 1 !important;
      }

      .tlp-m-component-card h3 {
        margin: 1px 0 0 !important;
        max-width: 100% !important;
        color: #ffffff !important;
        font-size: clamp(13px, 3.72vw, 15.8px) !important;
        line-height: 1.04 !important;
        font-weight: 870 !important;
        letter-spacing: -0.056em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .tlp-m-component-card p {
        margin: 5px 0 0 !important;
        color: rgba(238, 244, 255, 0.74) !important;
        font-size: 11.25px !important;
        line-height: 1.20 !important;
        font-weight: 430 !important;
        letter-spacing: -0.018em !important;
      }

      .tlp-m-component-items {
        margin-top: 10px !important;
      }

      .tlp-m-component-items span {
        height: 27px !important;
        min-height: 27px !important;
        padding: 0 7px !important;
        border-radius: 7px !important;
        font-size: 9.45px !important;
        font-weight: 690 !important;
        letter-spacing: -0.032em !important;
        border-color: rgba(148, 163, 184, 0.19) !important;
      }

      .tlp-m-component-card.purple .tlp-m-component-items span {
        border-color: rgba(176, 87, 255, 0.25) !important;
        background: rgba(124, 61, 255, 0.075) !important;
      }

      .tlp-m-component-card.cyan .tlp-m-component-items span {
        border-color: rgba(34, 230, 255, 0.22) !important;
        background: rgba(34, 230, 255, 0.055) !important;
      }

      .tlp-m-component-tag {
        margin-top: 10px !important;
        height: 23px !important;
        padding: 0 8px !important;
        border-radius: 7px !important;
        font-size: 9.3px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
      }
    }

    @media (max-width: 380px) {
      .tlp-mobile {
        padding-left: 8px !important;
        padding-right: 8px !important;
      }

      .tlp-m-shell {
        border-radius: 22px !important;
        padding: 13px 10px 17px !important;
      }

      .tlp-m-title {
        font-size: clamp(33px, 10.2vw, 43px) !important;
      }

      .tlp-m-components-title {
        font-size: clamp(27px, 8.1vw, 36px) !important;
      }

      .tlp-m-agent h2,
      .tlp-m-control-layer h2,
      .tlp-m-controlled h2 {
        font-size: 15.7px !important;
      }

      .tlp-m-agent-pills span,
      .tlp-m-status-row span,
      .tlp-m-tags span {
        font-size: 9.7px !important;
        padding: 0 6px !important;
      }

      .tlp-m-component-card h3 {
        font-size: 13px !important;
      }

      .tlp-m-component-items span {
        font-size: 8.7px !important;
        padding: 0 5px !important;
      }
    }



    /* V23 MOBILE HERO DASHBOARD PREVIEW
       Scope: mobile only. Adds a compact dashboard visual beside the hero copy,
       keeps hero buttons in two columns, preserves desktop and all existing routes. */
    @media (max-width: 900px) {
      .tlp-m-hero-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(118px, 34vw, 156px) !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
      }

      .tlp-m-hero-copy {
        min-width: 0 !important;
        position: relative !important;
        z-index: 2 !important;
      }

      .tlp-m-hero-badge {
        min-height: 25px !important;
        padding: 0 8px !important;
        gap: 5px !important;
        border-radius: 8px !important;
        font-size: clamp(6.6px, 1.82vw, 8.6px) !important;
        letter-spacing: 0.075em !important;
      }

      .tlp-m-hero-badge svg {
        width: 13px !important;
        height: 13px !important;
      }

      .tlp-m-title {
        margin-top: 10px !important;
        font-size: clamp(24px, 6.75vw, 31px) !important;
        line-height: 0.965 !important;
        letter-spacing: -0.075em !important;
        text-wrap: balance !important;
      }

      .tlp-m-copy-line {
        width: 72px !important;
        height: 2px !important;
        margin: 14px 0 10px !important;
      }

      .tlp-m-copy {
        margin: 0 !important;
        max-width: 100% !important;
        font-size: clamp(8.7px, 2.45vw, 10.6px) !important;
        line-height: 1.26 !important;
        letter-spacing: -0.019em !important;
      }

      .tlp-m-dashboard-preview {
        min-width: 0 !important;
        width: 100% !important;
        aspect-ratio: 0.74 / 1 !important;
        max-height: 218px !important;
        border-radius: 15px !important;
        padding: 8px !important;
        position: relative !important;
        overflow: hidden !important;
        background:
          radial-gradient(circle at 68% 42%, rgba(8, 124, 255, 0.24), transparent 41%),
          radial-gradient(circle at 100% 0%, rgba(124, 61, 255, 0.22), transparent 38%),
          linear-gradient(155deg, rgba(7, 22, 54, 0.94), rgba(3, 8, 24, 0.98)) !important;
        border: 1px solid rgba(8, 124, 255, 0.56) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.10),
          0 0 26px rgba(8, 124, 255, 0.13),
          0 0 20px rgba(124, 61, 255, 0.09) !important;
      }

      .tlp-m-dashboard-preview::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        opacity: 0.13 !important;
        background:
          linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px) !important;
        background-size: 18px 18px !important;
        pointer-events: none !important;
      }

      .tlp-m-dashboard-preview::after {
        content: "" !important;
        position: absolute !important;
        inset: -34px -28px auto auto !important;
        width: 82px !important;
        height: 82px !important;
        border-radius: 999px !important;
        background: rgba(124, 61, 255, 0.24) !important;
        filter: blur(20px) !important;
        pointer-events: none !important;
      }

      .tlp-m-dash-top,
      .tlp-m-dash-kpis,
      .tlp-m-dash-core,
      .tlp-m-dash-actions {
        position: relative !important;
        z-index: 2 !important;
      }

      .tlp-m-dash-top {
        display: grid !important;
        grid-template-columns: 22px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 6px !important;
      }

      .tlp-m-dash-mark {
        width: 22px !important;
        height: 22px !important;
        border-radius: 7px !important;
        display: grid !important;
        place-items: center !important;
        color: #ffffff !important;
        background: rgba(8, 124, 255, 0.14) !important;
        border: 1px solid rgba(34, 230, 255, 0.42) !important;
        box-shadow: 0 0 13px rgba(8, 124, 255, 0.24) !important;
      }

      .tlp-m-dash-mark svg {
        width: 14px !important;
        height: 14px !important;
      }

      .tlp-m-dash-top span,
      .tlp-m-dash-top strong {
        display: block !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1 !important;
      }

      .tlp-m-dash-top span {
        color: #22e6ff !important;
        font-size: 5.6px !important;
        font-weight: 850 !important;
        letter-spacing: 0.09em !important;
        text-transform: uppercase !important;
      }

      .tlp-m-dash-top strong {
        margin-top: 3px !important;
        color: #ffffff !important;
        font-size: clamp(10.2px, 2.95vw, 13px) !important;
        font-weight: 900 !important;
        letter-spacing: -0.065em !important;
      }

      .tlp-m-dash-kpis {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin-top: 9px !important;
      }

      .tlp-m-dash-kpis div {
        min-width: 0 !important;
        height: 32px !important;
        border-radius: 7px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(3, 8, 24, 0.55) !important;
        border: 1px solid rgba(8, 124, 255, 0.28) !important;
      }

      .tlp-m-dash-kpis strong,
      .tlp-m-dash-kpis span {
        display: block !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1 !important;
      }

      .tlp-m-dash-kpis strong {
        color: #ffffff !important;
        font-size: clamp(10px, 2.9vw, 13px) !important;
        font-weight: 900 !important;
        letter-spacing: -0.055em !important;
      }

      .tlp-m-dash-kpis span {
        margin-top: 4px !important;
        color: rgba(238, 244, 255, 0.68) !important;
        font-size: 5.6px !important;
        font-weight: 780 !important;
        letter-spacing: -0.015em !important;
      }

      .tlp-m-dash-core {
        height: clamp(54px, 15.5vw, 72px) !important;
        margin-top: 8px !important;
        border-radius: 12px !important;
        display: grid !important;
        place-items: center !important;
        background:
          radial-gradient(circle at 50% 48%, rgba(8, 124, 255, 0.28), transparent 56%),
          rgba(3, 8, 24, 0.40) !important;
        border: 1px solid rgba(124, 61, 255, 0.30) !important;
        overflow: hidden !important;
      }

      .tlp-m-dash-orbit {
        position: absolute !important;
        border-radius: 50% !important;
        border: 1px solid rgba(34, 230, 255, 0.34) !important;
        transform: rotate(-9deg) !important;
      }

      .tlp-m-dash-orbit.one {
        width: 86px !important;
        height: 29px !important;
      }

      .tlp-m-dash-orbit.two {
        width: 64px !important;
        height: 47px !important;
        border-color: rgba(124, 61, 255, 0.42) !important;
        transform: rotate(20deg) !important;
      }

      .tlp-m-dash-dot {
        position: absolute !important;
        right: 24% !important;
        top: 26% !important;
        width: 4px !important;
        height: 4px !important;
        border-radius: 50% !important;
        background: #22e6ff !important;
        box-shadow: 0 0 10px rgba(34,230,255,.85) !important;
      }

      .tlp-m-dash-logo {
        width: clamp(38px, 11.5vw, 52px) !important;
        height: clamp(32px, 9.5vw, 44px) !important;
        filter: drop-shadow(0 0 14px rgba(8, 124, 255, 0.35)) !important;
      }

      .tlp-m-dash-logo svg {
        width: 100% !important;
        height: 100% !important;
      }

      .tlp-m-dash-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin-top: 8px !important;
      }

      .tlp-m-dash-actions span {
        min-width: 0 !important;
        height: 22px !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 5px !important;
        color: rgba(238, 244, 255, 0.86) !important;
        background: rgba(3, 8, 24, 0.52) !important;
        border: 1px solid rgba(8, 124, 255, 0.25) !important;
        font-size: clamp(6.5px, 1.85vw, 8px) !important;
        line-height: 1 !important;
        font-weight: 780 !important;
        letter-spacing: -0.025em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .tlp-m-dash-actions span:nth-child(1) {
        color: #1ee981 !important;
        border-color: rgba(30, 233, 129, 0.35) !important;
        background: rgba(30, 233, 129, 0.055) !important;
      }

      .tlp-m-dash-actions span:nth-child(2) {
        color: #ff6b8c !important;
        border-color: rgba(255, 107, 140, 0.32) !important;
        background: rgba(255, 107, 140, 0.05) !important;
      }

      .tlp-m-dash-actions span:nth-child(3) {
        color: #ffba4a !important;
        border-color: rgba(255, 186, 74, 0.32) !important;
        background: rgba(255, 186, 74, 0.05) !important;
      }

      .tlp-m-dash-actions span:nth-child(4) {
        color: #60a5ff !important;
        border-color: rgba(96, 165, 255, 0.34) !important;
        background: rgba(96, 165, 255, 0.06) !important;
      }

      .tlp-m-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 14px 0 14px !important;
      }

      .tlp-m-primary,
      .tlp-m-secondary {
        min-height: 46px !important;
        border-radius: 13px !important;
        gap: 7px !important;
        padding: 0 8px !important;
        font-size: clamp(10.7px, 3.05vw, 12.7px) !important;
      }

      .tlp-m-primary svg,
      .tlp-m-secondary svg {
        width: 17px !important;
        height: 17px !important;
      }
    }

    @media (max-width: 380px) {
      .tlp-m-hero-grid {
        grid-template-columns: minmax(0, 1fr) clamp(112px, 34vw, 128px) !important;
        gap: 8px !important;
      }

      .tlp-m-title {
        font-size: clamp(23px, 6.6vw, 28px) !important;
      }

      .tlp-m-copy {
        font-size: 8.6px !important;
        line-height: 1.22 !important;
      }

      .tlp-m-dashboard-preview {
        padding: 7px !important;
        border-radius: 14px !important;
      }

      .tlp-m-dash-kpis {
        gap: 4px !important;
        margin-top: 8px !important;
      }

      .tlp-m-dash-kpis div {
        height: 29px !important;
      }

      .tlp-m-dash-core {
        margin-top: 7px !important;
      }

      .tlp-m-dash-actions {
        gap: 4px !important;
        margin-top: 7px !important;
      }

      .tlp-m-dash-actions span {
        height: 20px !important;
        font-size: 6.2px !important;
      }

      .tlp-m-primary,
      .tlp-m-secondary {
        min-height: 44px !important;
        padding: 0 6px !important;
        font-size: 10.2px !important;
      }

      .tlp-m-primary svg,
      .tlp-m-secondary svg {
        width: 16px !important;
        height: 16px !important;
      }
    }



    /* V24 MOBILE ARCHITECTURE FIX
       Scope: mobile only.
       Purpose: replace the clipped summary dashboard with a compact full AI Use Case > TRUSTELIS Control > Controlled Action diagram,
       keep the hero in one row, and enforce the 2-items-per-row mobile standard across pills/tags/status items. */
    @media (max-width: 900px) {
      .tlp-mobile {
        padding-top: 18px !important;
      }

      .tlp-m-shell {
        padding-top: 22px !important;
        overflow: visible !important;
      }

      .tlp-m-hero-grid {
        grid-template-columns: minmax(0, 1fr) clamp(142px, 42vw, 174px) !important;
        align-items: start !important;
        gap: 9px !important;
      }

      .tlp-m-hero-copy {
        padding-top: 2px !important;
      }

      .tlp-m-title {
        font-size: clamp(23px, 6.45vw, 30px) !important;
        line-height: 0.955 !important;
        letter-spacing: -0.078em !important;
      }

      .tlp-m-copy-line {
        margin: 13px 0 9px !important;
      }

      .tlp-m-copy {
        font-size: clamp(8.45px, 2.35vw, 10.25px) !important;
        line-height: 1.25 !important;
      }

      .tlp-m-dashboard-preview.tlp-m-architecture-preview {
        aspect-ratio: auto !important;
        height: clamp(222px, 62vw, 252px) !important;
        max-height: none !important;
        margin-top: 7px !important;
        padding: 7px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background:
          radial-gradient(circle at 50% 2%, rgba(34, 230, 255, 0.18), transparent 34%),
          radial-gradient(circle at 100% 46%, rgba(124, 61, 255, 0.24), transparent 38%),
          linear-gradient(158deg, rgba(7, 22, 54, 0.96), rgba(3, 8, 24, 0.985)) !important;
        border: 1px solid rgba(8, 124, 255, 0.58) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.11),
          0 0 28px rgba(8, 124, 255, 0.13),
          0 0 22px rgba(124, 61, 255, 0.09) !important;
      }

      .tlp-m-dashboard-preview.tlp-m-architecture-preview::before {
        opacity: 0.10 !important;
        background:
          linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) !important;
        background-size: 17px 17px !important;
      }

      .tlp-m-dashboard-preview.tlp-m-architecture-preview::after {
        inset: auto -36px -28px auto !important;
        width: 92px !important;
        height: 92px !important;
        background: rgba(8, 124, 255, 0.22) !important;
        filter: blur(20px) !important;
      }

      .tlp-m-arch-topline,
      .tlp-m-arch-panel,
      .tlp-m-arch-connector {
        position: relative !important;
        z-index: 2 !important;
      }

      .tlp-m-arch-topline {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2px !important;
        min-width: 0 !important;
        margin-bottom: 6px !important;
        padding: 0 2px !important;
        text-align: center !important;
      }

      .tlp-m-arch-topline span,
      .tlp-m-arch-topline strong {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1 !important;
      }

      .tlp-m-arch-topline span {
        color: #22e6ff !important;
        font-size: clamp(5.6px, 1.55vw, 6.8px) !important;
        font-weight: 900 !important;
        letter-spacing: 0.105em !important;
        text-transform: uppercase !important;
      }

      .tlp-m-arch-topline strong {
        color: #ffffff !important;
        font-size: clamp(9px, 2.6vw, 11.8px) !important;
        font-weight: 900 !important;
        letter-spacing: -0.055em !important;
      }

      .tlp-m-arch-panel {
        min-width: 0 !important;
        border-radius: 10px !important;
        padding: 6px !important;
        background: rgba(3, 8, 24, 0.54) !important;
        border: 1px solid rgba(8, 124, 255, 0.34) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
      }

      .tlp-m-arch-panel.control {
        border-color: rgba(176, 87, 255, 0.45) !important;
        background:
          radial-gradient(circle at 84% 20%, rgba(124, 61, 255, 0.16), transparent 40%),
          rgba(3, 8, 24, 0.58) !important;
      }

      .tlp-m-arch-panel.action {
        border-color: rgba(34, 230, 255, 0.32) !important;
      }

      .tlp-m-arch-panel h4 {
        margin: 0 0 5px !important;
        color: #ffffff !important;
        text-align: center !important;
        font-size: clamp(7.1px, 2vw, 8.6px) !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: -0.05em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .tlp-m-arch-panel.control h4 {
        color: #b057ff !important;
      }

      .tlp-m-arch-panel.action h4 {
        color: #22e6ff !important;
      }

      .tlp-m-arch-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
      }

      .tlp-m-arch-grid span {
        min-width: 0 !important;
        height: clamp(18px, 5.2vw, 21px) !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 3px !important;
        color: rgba(238, 244, 255, 0.90) !important;
        background: rgba(8, 124, 255, 0.075) !important;
        border: 1px solid rgba(8, 124, 255, 0.25) !important;
        font-size: clamp(5.8px, 1.62vw, 7px) !important;
        line-height: 1 !important;
        font-weight: 780 !important;
        letter-spacing: -0.03em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .tlp-m-arch-panel.control .tlp-m-arch-grid span {
        border-color: rgba(176, 87, 255, 0.26) !important;
        background: rgba(124, 61, 255, 0.085) !important;
      }

      .tlp-m-arch-panel.action .tlp-m-arch-grid span:nth-child(1) {
        color: #1ee981 !important;
        border-color: rgba(30, 233, 129, 0.33) !important;
        background: rgba(30, 233, 129, 0.055) !important;
      }

      .tlp-m-arch-panel.action .tlp-m-arch-grid span:nth-child(2) {
        color: #ff6b8c !important;
        border-color: rgba(255, 107, 140, 0.30) !important;
        background: rgba(255, 107, 140, 0.05) !important;
      }

      .tlp-m-arch-panel.action .tlp-m-arch-grid span:nth-child(3) {
        color: #ffba4a !important;
        border-color: rgba(255, 186, 74, 0.30) !important;
        background: rgba(255, 186, 74, 0.05) !important;
      }

      .tlp-m-arch-panel.action .tlp-m-arch-grid span:nth-child(4) {
        color: #60a5ff !important;
        border-color: rgba(96, 165, 255, 0.32) !important;
        background: rgba(96, 165, 255, 0.06) !important;
      }

      .tlp-m-arch-connector {
        width: 2px !important;
        height: clamp(9px, 2.4vw, 12px) !important;
        margin: 3px auto !important;
        background: linear-gradient(180deg, #22e6ff, rgba(34, 230, 255, 0.14)) !important;
        box-shadow: 0 0 12px rgba(34, 230, 255, 0.45) !important;
      }

      .tlp-m-arch-connector::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        bottom: -2px !important;
        width: 7px !important;
        height: 7px !important;
        transform: translateX(-50%) rotate(45deg) !important;
        border-right: 1.5px solid #22e6ff !important;
        border-bottom: 1.5px solid #22e6ff !important;
      }

      .tlp-m-agent-pills,
      .tlp-m-status-row,
      .tlp-m-tags,
      .tlp-m-component-items {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-top: 12px !important;
      }

      .tlp-m-tags {
        margin-top: 0 !important;
      }

      .tlp-m-agent-pills span,
      .tlp-m-status-row span,
      .tlp-m-tags span,
      .tlp-m-component-items span {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 30px !important;
        height: 30px !important;
        padding: 0 7px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: clamp(8.7px, 2.35vw, 10.8px) !important;
        line-height: 1 !important;
        font-weight: 760 !important;
        letter-spacing: -0.028em !important;
      }

      .tlp-m-tags span,
      .tlp-m-component-items span {
        font-size: clamp(8.3px, 2.22vw, 10px) !important;
      }

      .tlp-m-component-items span {
        min-height: 28px !important;
        height: 28px !important;
      }

      .tlp-m-pillar {
        padding: 12px !important;
      }

      .tlp-m-agent,
      .tlp-m-control-layer,
      .tlp-m-controlled {
        padding: 13px !important;
      }
    }

    @media (max-width: 380px) {
      .tlp-m-hero-grid {
        grid-template-columns: minmax(0, 1fr) clamp(134px, 40vw, 148px) !important;
        gap: 7px !important;
      }

      .tlp-m-dashboard-preview.tlp-m-architecture-preview {
        height: clamp(216px, 64vw, 238px) !important;
        margin-top: 6px !important;
        padding: 6px !important;
        border-radius: 15px !important;
      }

      .tlp-m-title {
        font-size: clamp(22px, 6.25vw, 27px) !important;
      }

      .tlp-m-copy {
        font-size: 8.15px !important;
        line-height: 1.22 !important;
      }

      .tlp-m-arch-panel {
        padding: 5px !important;
      }

      .tlp-m-arch-grid {
        gap: 3px !important;
      }

      .tlp-m-arch-grid span {
        height: 18px !important;
        font-size: 5.7px !important;
      }

      .tlp-m-arch-panel h4 {
        font-size: 7px !important;
      }

      .tlp-m-agent-pills span,
      .tlp-m-status-row span,
      .tlp-m-tags span,
      .tlp-m-component-items span {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 5px !important;
        font-size: 8.4px !important;
      }

      .tlp-m-component-items span {
        height: 27px !important;
        min-height: 27px !important;
        font-size: 8px !important;
      }
    }

    /* V25 MOBILE PREMIUM HERO FIX
       Scope: MOBILE ONLY (max-width: 900px).
       Purpose: make the top mobile architecture diagram compact and fully visible,
       keep AI Use Case / Control / Action represented in a premium flow,
       preserve desktop, routes, scripts, global header, and global footer. */
    @media (max-width: 900px) {
      .tlp-mobile {
        padding-top: 24px !important;
      }

      .tlp-m-shell {
        padding-top: 20px !important;
        overflow: visible !important;
      }

      .tlp-m-hero-grid {
        grid-template-columns: minmax(0, 1fr) clamp(136px, 38vw, 160px) !important;
        align-items: start !important;
        gap: 10px !important;
        overflow: visible !important;
      }

      .tlp-m-hero-copy {
        padding-top: 6px !important;
      }

      .tlp-m-hero-badge {
        min-height: 24px !important;
        padding: 0 8px !important;
        font-size: clamp(6.4px, 1.74vw, 8px) !important;
        letter-spacing: 0.072em !important;
      }

      .tlp-m-title {
        margin-top: 11px !important;
        font-size: clamp(22px, 6.15vw, 29px) !important;
        line-height: 0.955 !important;
        letter-spacing: -0.079em !important;
      }

      .tlp-m-copy-line {
        width: 70px !important;
        margin: 12px 0 9px !important;
      }

      .tlp-m-copy {
        font-size: clamp(8.15px, 2.24vw, 9.8px) !important;
        line-height: 1.24 !important;
      }

      .tlp-m-dashboard-preview.tlp-m-architecture-preview {
        height: clamp(158px, 45vw, 186px) !important;
        min-height: 158px !important;
        max-height: 186px !important;
        aspect-ratio: auto !important;
        margin-top: 14px !important;
        padding: 6px !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        background:
          radial-gradient(circle at 48% 5%, rgba(34, 230, 255, 0.16), transparent 34%),
          radial-gradient(circle at 100% 44%, rgba(124, 61, 255, 0.20), transparent 38%),
          linear-gradient(158deg, rgba(7, 22, 54, 0.97), rgba(3, 8, 24, 0.99)) !important;
        border: 1px solid rgba(8, 124, 255, 0.58) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.12),
          0 0 22px rgba(8, 124, 255, 0.12),
          0 0 18px rgba(124, 61, 255, 0.08) !important;
      }

      .tlp-m-dashboard-preview.tlp-m-architecture-preview::before {
        opacity: 0.075 !important;
        background:
          linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px) !important;
        background-size: 16px 16px !important;
      }

      .tlp-m-dashboard-preview.tlp-m-architecture-preview::after {
        inset: auto -42px -38px auto !important;
        width: 96px !important;
        height: 96px !important;
        opacity: 0.82 !important;
        background: rgba(8, 124, 255, 0.20) !important;
        filter: blur(20px) !important;
      }

      .tlp-m-arch-topline {
        min-height: 12px !important;
        margin: 0 0 4px !important;
        padding: 0 1px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px !important;
        text-align: left !important;
      }

      .tlp-m-arch-topline span {
        font-size: clamp(4.8px, 1.34vw, 5.8px) !important;
        letter-spacing: 0.10em !important;
      }

      .tlp-m-arch-topline strong {
        margin: 0 !important;
        font-size: clamp(7.2px, 2vw, 9px) !important;
        letter-spacing: -0.045em !important;
      }

      .tlp-m-arch-panel {
        position: relative !important;
        min-width: 0 !important;
        border-radius: 9px !important;
        padding: 5px !important;
        background:
          radial-gradient(circle at 100% 0%, rgba(8, 124, 255, 0.10), transparent 42%),
          rgba(3, 8, 24, 0.56) !important;
        border: 1px solid rgba(8, 124, 255, 0.34) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
      }

      .tlp-m-arch-panel::before {
        content: "" !important;
        position: absolute !important;
        left: 5px !important;
        top: 5px !important;
        bottom: 5px !important;
        width: 2px !important;
        border-radius: 99px !important;
        background: linear-gradient(180deg, var(--tl-blue), rgba(8,124,255,.10)) !important;
        box-shadow: 0 0 9px rgba(8,124,255,.45) !important;
      }

      .tlp-m-arch-panel.control::before {
        background: linear-gradient(180deg, #b057ff, rgba(176,87,255,.10)) !important;
        box-shadow: 0 0 9px rgba(176,87,255,.42) !important;
      }

      .tlp-m-arch-panel.action::before {
        background: linear-gradient(180deg, #22e6ff, rgba(34,230,255,.10)) !important;
        box-shadow: 0 0 9px rgba(34,230,255,.38) !important;
      }

      .tlp-m-arch-panel.control {
        border-color: rgba(176, 87, 255, 0.44) !important;
        background:
          radial-gradient(circle at 86% 16%, rgba(124, 61, 255, 0.16), transparent 42%),
          rgba(3, 8, 24, 0.58) !important;
      }

      .tlp-m-arch-panel.action {
        border-color: rgba(34, 230, 255, 0.34) !important;
      }

      .tlp-m-arch-panel h4 {
        margin: 0 0 4px !important;
        padding-left: 5px !important;
        font-size: clamp(6.6px, 1.78vw, 8px) !important;
        line-height: 1 !important;
        letter-spacing: -0.052em !important;
        text-align: center !important;
      }

      .tlp-m-arch-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 3px !important;
        padding-left: 5px !important;
      }

      .tlp-m-arch-grid span {
        height: clamp(12px, 3.4vw, 14px) !important;
        min-height: 12px !important;
        padding: 0 2px !important;
        border-radius: 5px !important;
        font-size: clamp(4.9px, 1.35vw, 6.1px) !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: -0.026em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .tlp-m-arch-connector {
        position: relative !important;
        width: 2px !important;
        height: 6px !important;
        margin: 2px auto !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, #22e6ff, rgba(34, 230, 255, 0.12)) !important;
        box-shadow: 0 0 10px rgba(34, 230, 255, 0.42) !important;
      }

      .tlp-m-arch-connector::after {
        width: 5px !important;
        height: 5px !important;
        bottom: -1px !important;
        border-right-width: 1px !important;
        border-bottom-width: 1px !important;
      }

      .tlp-m-actions {
        margin: 16px 0 15px !important;
      }

      .tlp-m-values {
        margin-top: 14px !important;
        gap: 9px !important;
      }

      .tlp-m-value {
        min-height: 72px !important;
        padding: 12px !important;
        border-radius: 14px !important;
      }

      .tlp-m-value h3 {
        font-size: 14.2px !important;
      }

      .tlp-m-value p {
        font-size: 10.2px !important;
        line-height: 1.18 !important;
      }

      .tlp-m-agent {
        margin-top: 24px !important;
      }

      .tlp-m-agent,
      .tlp-m-control-layer,
      .tlp-m-controlled {
        padding: 13px !important;
        border-radius: 18px !important;
      }

      .tlp-m-agent h2,
      .tlp-m-control-layer h2,
      .tlp-m-controlled h2 {
        font-size: clamp(15px, 4.2vw, 17px) !important;
        line-height: 1 !important;
      }

      .tlp-m-agent-pills,
      .tlp-m-status-row,
      .tlp-m-tags,
      .tlp-m-component-items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
      }

      .tlp-m-agent-pills span,
      .tlp-m-status-row span,
      .tlp-m-tags span,
      .tlp-m-component-items span {
        height: 29px !important;
        min-height: 29px !important;
        font-size: clamp(8.5px, 2.26vw, 10.5px) !important;
      }

      .tlp-m-tags span,
      .tlp-m-component-items span {
        font-size: clamp(8px, 2.15vw, 9.8px) !important;
      }

      .tlp-m-component-items span {
        height: 28px !important;
        min-height: 28px !important;
      }
    }

    @media (max-width: 380px) {
      .tlp-mobile {
        padding-top: 22px !important;
      }

      .tlp-m-hero-grid {
        grid-template-columns: minmax(0, 1fr) clamp(128px, 37vw, 142px) !important;
        gap: 8px !important;
      }

      .tlp-m-hero-copy {
        padding-top: 5px !important;
      }

      .tlp-m-title {
        font-size: clamp(21px, 5.95vw, 26px) !important;
      }

      .tlp-m-copy {
        font-size: 7.9px !important;
        line-height: 1.21 !important;
      }

      .tlp-m-dashboard-preview.tlp-m-architecture-preview {
        height: clamp(148px, 43vw, 166px) !important;
        min-height: 148px !important;
        max-height: 166px !important;
        margin-top: 13px !important;
        padding: 5px !important;
        border-radius: 14px !important;
      }

      .tlp-m-arch-topline {
        margin-bottom: 3px !important;
      }

      .tlp-m-arch-panel {
        padding: 4px !important;
        border-radius: 8px !important;
      }

      .tlp-m-arch-panel::before {
        left: 4px !important;
        top: 4px !important;
        bottom: 4px !important;
      }

      .tlp-m-arch-panel h4 {
        margin-bottom: 3px !important;
        padding-left: 5px !important;
        font-size: 6.1px !important;
      }

      .tlp-m-arch-grid {
        gap: 2px !important;
        padding-left: 5px !important;
      }

      .tlp-m-arch-grid span {
        height: 11px !important;
        min-height: 11px !important;
        border-radius: 4px !important;
        font-size: 4.6px !important;
        padding: 0 1px !important;
      }

      .tlp-m-arch-connector {
        height: 5px !important;
        margin: 1px auto !important;
      }

      .tlp-m-primary,
      .tlp-m-secondary {
        min-height: 42px !important;
        font-size: 10.2px !important;
      }

      .tlp-m-value {
        min-height: 70px !important;
        padding: 10px !important;
      }

      .tlp-m-agent {
        margin-top: 22px !important;
      }
    }



    /* V26 MOBILE ONLY FIXES
       Scope: MOBILE ONLY (max-width: 900px).
       1) Remove the clipped top micro badge/text from the mobile hero so nothing is hidden under the Softr header.
       2) Add a clear premium gap after the middle-page "AI Agent / AI Use Case" title before its pills.
       Desktop, links, buttons, scripts, platform components content, global header, and global footer are untouched. */
    @media (max-width: 900px) {
      .tlp-mobile {
        padding-top: calc(78px + env(safe-area-inset-top, 0px)) !important;
      }

      .tlp-m-shell {
        padding-top: 22px !important;
        overflow: visible !important;
      }

      .tlp-m-hero-grid {
        align-items: start !important;
        overflow: visible !important;
      }

      .tlp-m-hero-copy {
        padding-top: 0 !important;
      }

      .tlp-m-hero-badge {
        display: none !important;
      }

      .tlp-m-title {
        margin-top: 0 !important;
      }

      .tlp-m-dashboard-preview.tlp-m-architecture-preview {
        margin-top: 2px !important;
      }

      .tlp-m-agent h2 {
        margin: 0 0 16px !important;
        padding: 0 !important;
      }

      .tlp-m-agent-pills {
        margin-top: 0 !important;
      }
    }

    @media (max-width: 380px) {
      .tlp-mobile {
        padding-top: calc(74px + env(safe-area-inset-top, 0px)) !important;
      }

      .tlp-m-shell {
        padding-top: 20px !important;
      }

      .tlp-m-agent h2 {
        margin-bottom: 15px !important;
      }

      .tlp-m-dashboard-preview.tlp-m-architecture-preview {
        margin-top: 1px !important;
      }
    }
    /* V16 NATIVE TRUST PACK BOTTOM INSET FIX
       Scope: desktop Live AI Control Plane preview only.
       Purpose: keep the final Trust Pack row fully inside the dashboard frame
       so its lower border and rounded corners are visible. */
    @media (min-width: 901px) {
      .tlp-v15-main > :last-child {
        translate: 0 -10px;
      }
    }
    /* V16 NATIVE TOP-LAYER FRAME FIX
       Scope: desktop Live AI Control Plane preview only.
       Purpose: render the complete outer frame above every internal dashboard
       layer so the bottom border and rounded corners can never be obscured. */
    @media (min-width: 901px) {
      .tlp-v15-dashboard {
        border-color: transparent !important;
      }

      .tlp-v15-frame-overlay {
        position: absolute;
        inset: 0;
        box-sizing: border-box;
        border: 1px solid rgba(96, 165, 255, 0.50);
        border-radius: 22px;
        pointer-events: none;
        z-index: 1000;
      }
    }