.scn {
      --g: #1DE585;
      --ind: #6C5CDF;
      --indl: #A99CFF;
      --tx: rgba(255, 255, 255, .62);
      --mut: rgba(255, 255, 255, .4);
      --ln: rgba(255, 255, 255, .1);
      color: var(--tx);
      position: relative;
      padding: 64px 24px
    }

    .scn .in {
      max-width: 1160px;
      margin: 0 auto;
      text-align: center
    }

    .scn .tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      letter-spacing: .14em;
      color: var(--g);
      text-transform: uppercase;
      margin: 0 0 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap
    }

    .scn .tag .ln {
      height: 1px;
      width: 38px;
      background: rgba(29, 229, 133, .45);
      display: inline-block;
      flex: none
    }

    .scn-row {
      display: grid;
      grid-template-columns: 520px minmax(340px, 1fr);
      gap: 74px;
      align-items: center;
      text-align: left
    }

    .scn-row .radial {
      margin: 0 auto
    }

    .scn .radial {
      position: relative;
      width: 520px;
      height: 520px
    }

    .scn .spokes {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible
    }

    .scn .spokes line {
      stroke: rgba(29, 229, 133, .22);
      stroke-width: 1.4;
      stroke-dasharray: 5 7
    }

    .scn .rnode {
      position: absolute;
      transform: translate(-50%, -50%);
      width: 150px;
      background: rgba(255, 255, 255, .045);
      border: 1px solid var(--ln);
      border-radius: 14px;
      padding: 13px 11px;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      backdrop-filter: blur(6px);
      transition: .25s;
      z-index: 2
    }

    .scn .rnode:hover {
      border-color: rgba(29, 229, 133, .55);
      background: rgba(29, 229, 133, .07);
      transform: translate(-50%, -50%) scale(1.04)
    }

    .scn .rnode .pic {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: rgba(108, 92, 223, .16);
      border: 1px solid rgba(108, 92, 223, .4);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--indl)
    }

    .scn .rnode .pic svg {
      width: 19px;
      height: 19px
    }

    .scn .rnode .role {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8.5px;
      letter-spacing: .12em;
      color: var(--g);
      font-weight: 700
    }

    .scn .rnode .nm {
      color: #fff;
      font-weight: 700;
      font-size: 13.5px;
      line-height: 1.05
    }

    .scn .rnode .nm span {
      color: var(--g)
    }

    .scn .rnode.center {
      width: 184px;
      background: radial-gradient(circle at 50% 35%, rgba(29, 229, 133, .2), rgba(29, 229, 133, .04));
      border: 1.5px solid rgba(29, 229, 133, .55);
      box-shadow: 0 0 60px rgba(29, 229, 133, .28);
      z-index: 4;
      gap: 9px;
      padding: 18px 14px
    }

    .scn .rnode.center .sprout {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .scn .rnode.center .sprout svg {
      width: 27px;
      height: 27px
    }

    .scn .rnode.center .nm {
      font-size: 16.5px
    }

    .scn .rnode.center .role {
      color: #04220F;
      background: var(--g);
      padding: 3px 9px;
      border-radius: 5px
    }

    .scn .rnode.center::before {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 18px;
      border: 1.5px solid rgba(29, 229, 133, .5);
      animation: ping 3s ease-out infinite
    }

    @keyframes ping {
      0% {
        transform: scale(1);
        opacity: .7
      }

      100% {
        transform: scale(1.6);
        opacity: 0
      }
    }

    .scn .dot {
      position: absolute;
      left: 260px;
      top: 260px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--g);
      box-shadow: 0 0 9px var(--g);
      z-index: 3;
      animation: spoke 2.6s linear infinite
    }

    @keyframes spoke {
      0% {
        transform: translate(-50%, -50%);
        opacity: 0
      }

      12% {
        opacity: 1
      }

      78% {
        opacity: 1
      }

      100% {
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)));
        opacity: 0
      }
    }

    .scn .uc {
      position: relative;
      width: 100%;
      max-width: 500px
    }

    .scn .uc-stage {
      display: grid
    }

    .scn .uc-card {
      grid-area: 1/1;
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity .5s ease, transform .5s ease
    }

    .scn .uc-card.on {
      opacity: 1;
      visibility: visible;
      transform: none;
      z-index: 1
    }

    .scn .uc-kicker {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .2em;
      color: var(--g);
      font-weight: 700;
      margin: 0 2px 10px
    }

    .scn .uc-title {
      color: #fff;
      font-weight: 800;
      font-size: 21px;
      letter-spacing: -.02em;
      margin: 0 2px 30px;
      line-height: 1.15
    }

    .scn .uc-card .shot {
      flex: 1;
      display: flex;
      flex-direction: column
    }

    .scn .uc-card .uc-mile {
      margin-top: auto
    }

    .scn .uc-dots {
      display: flex;
      gap: 9px;
      justify-content: flex-start;
      margin-top: 18px;
      padding-left: 4px
    }

    .scn .uc-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .22);
      cursor: pointer;
      transition: .2s;
      border: none;
      padding: 0
    }

    .scn .uc-dot.on {
      background: var(--g);
      box-shadow: 0 0 8px var(--g)
    }

    .scn .shot {
      background: #FBFBFD;
      border-radius: 15px;
      padding: 16px 17px;
      box-shadow: 0 28px 64px -24px rgba(0, 0, 0, .7);
      border: 1px solid rgba(255, 255, 255, .06)
    }

    .scn .uc-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
      padding-bottom: 11px;
      border-bottom: 1px solid #EEF0F4;
      gap: 10px
    }

    .scn .uc-head .t {
      font-size: 13px;
      font-weight: 800;
      color: #1B2233;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .scn .uc-head .siren {
      color: #E0414E
    }

    .scn .uc-head .pulse2 {
      color: #5B4FE0
    }

    .scn .uc-head .live {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      color: #1FB37E;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap
    }

    .scn .uc-head .gd {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #1FB37E;
      box-shadow: 0 0 6px #1FB37E
    }

    .scn .msg {
      display: flex;
      gap: 10px;
      padding: 9px 0;
      border-top: 1px solid #F0F1F6
    }

    .scn .msg:first-of-type {
      border-top: none
    }

    .scn .msg .av {
      width: 27px;
      height: 27px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 700;
      font-size: 10px;
      flex: none
    }

    .scn .msg .av.sp {
      background: #fff;
      border: 1px solid #E7E9F0
    }

    .scn .msg .who {
      font-size: 12px;
      font-weight: 700;
      color: #1B2233;
      margin-bottom: 3px;
      display: flex;
      gap: 7px;
      align-items: center;
      flex-wrap: wrap
    }

    .scn .msg .role {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      background: #E9FBF2;
      color: #1FB37E
    }

    .scn .msg .role.own {
      background: #EEEBFB;
      color: #5B4FE0
    }

    .scn .msg .role.ed {
      background: #EEEBFB;
      color: #5B4FE0
    }

    .scn .msg .role.vw {
      background: #EEF1F6;
      color: #8C95A8
    }

    .scn .msg .tx {
      font-size: 12.3px;
      color: #1B2233;
      line-height: 1.5
    }

    .scn .msg .tx .mn {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      background: #F1F2F7;
      padding: 1px 5px;
      border-radius: 4px;
      color: #3B4252
    }

    .scn .mini-code {
      background: #1E293B;
      border-radius: 8px;
      padding: 8px 11px;
      margin-top: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      line-height: 1.5;
      color: #CBD5E1;
      white-space: pre-wrap;
      overflow-x: auto
    }

    .scn .mini-code .kw {
      color: #8B93FF
    }

    .scn .mini-code .fn {
      color: #56D6A0
    }

    .scn .mini-code .st {
      color: #7FD8B0
    }

    .scn .clartag {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      background: #FBEFDD;
      color: #C07A2B;
      font-family: 'JetBrains Mono', monospace;
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: .05em;
      padding: 3px 7px;
      border-radius: 5px;
      margin-left: 2px
    }

    .scn .mres {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 8px;
      background: #E3F6EE;
      color: #13855E;
      border-radius: 7px;
      padding: 6px 11px;
      font-size: 11.5px;
      font-weight: 700
    }

    .scn .mres.amber {
      background: #FBEFDD;
      color: #9A6526
    }

    .scn .uc-mile {
      margin-top: 12px;
      background: #E3F6EE;
      color: #13855E;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 11.5px;
      font-weight: 700;
      display: flex;
      gap: 8px;
      align-items: center
    }

    .scn .uc-mile.draft {
      background: #EEEBFB;
      color: #5B4FE0
    }

    @media(max-width:980px) {
      .scn-row {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 40px
      }

      .scn .uc,
      .scn .uc-dots {
        justify-content: center
      }

      .scn .uc {
        max-width: 520px
      }

      .scn .radial {
        transform: scale(.92)
      }
    }

    @media(max-width:560px) {
      .scn .radial {
        display: flex;
        flex-direction: column;
        width: auto;
        height: auto;
        gap: 10px;
        transform: none
      }

      .scn .spokes,
      .scn .dot {
        display: none
      }

      .scn .rnode,
      .scn .rnode.center {
        position: static;
        transform: none;
        width: 100%;
        flex-direction: row;
        text-align: left;
        align-items: center;
        gap: 12px
      }

      .scn .rnode:hover {
        transform: none
      }

      .scn .tag .ln {
        display: none
      }
    }

    .hero {
      align-items: flex-start;
    }

    .hero .hero-content {
      width: 100%;
      margin: 0 auto;
      padding-top: calc(var(--header-h, 58px) + 3.75rem);
      padding-bottom: 4.5rem;
    }

    .hero .hero-content h1 {
      font-size: clamp(28px, 3.6vw, 44px);
      line-height: 1.12
    }

    .hero .hero-content .subtitle {
      font-size: 16px;
      line-height: 1.5
    }

    .hero .hero-content .platform-components {
      font-size: 13px
    }

    @media (max-width: 768px) {
      .hero .hero-content {
        padding-top: calc(var(--header-h, 58px) + 2.75rem);
        padding-bottom: 4rem;
      }
    }

    @media (max-width: 480px) {
      .hero .hero-content {
        padding-top: calc(var(--header-h, 58px) + 2.25rem);
        padding-bottom: 3.5rem;
      }
    }


    /* ==========================================
   HIGH-IMPACT CLIENT SHOWCASE BANNER
   ========================================== */
.trust-banner-section {
  position: relative;
  padding: 90px 0 96px;
  background: #0B0E14;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(29, 229, 133, 0.08);
}

/* Background Radial Glow Effect from Reference 1 */
.trust-glow-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 250px;
  background: radial-gradient(ellipse at center, rgba(29, 229, 133, 0.12) 0%, rgba(29, 229, 133, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.trust-container {
  position: relative;
  z-index: 2;
  text-align: center;
}

.trust-header {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto 44px;
}

.trust-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--g, #1DE585);
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}

/* Typography styled exactly like Image 2 */
.trust-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.04;
  color: #FFFFFF;
  letter-spacing: 0;
  margin: 0;
}

.trust-title .highlight {
  color: #1DE585; /* Uses SuperCloudNow accent green */
  font-weight: 800;
}

.trust-description {
  width: min(660px, 100%);
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.65;
}

/* Marquee Container with edge fades */
.trust-marquee-wrapper {
  display: flex;
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0) 100%
  );
}

.trust-marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 34px;
  min-width: 100%;
  animation: trust-scroll 28s linear infinite;
}

.trust-marquee-wrapper:hover .trust-marquee-track {
  animation-play-state: paused;
}

/* Logo Cards styled for crisp SVG / Image support */
.trust-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 72px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(226, 237, 244, 0.82)),
    rgba(255, 255, 255, 0.86);
  color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.trust-logo-card svg {
  height: 28px;
  width: auto;
  fill: currentColor;
}

.trust-logo-img {
  display: block;
  width: 100%;
  max-width: 165px;
  max-height: 54px;
  object-fit: contain;
}

.trust-logo-img--wide {
  max-width: 182px;
}

.trust-logo-img--square {
  max-width: 60px;
  max-height: 60px;
}

.trust-logo-card:hover {
  color: #FFFFFF;
  transform: scale(1.08);
  border-color: rgba(29, 229, 133, 0.38);
  box-shadow:
    0 20px 44px rgba(29, 229, 133, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

@keyframes trust-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 17px));
  }
}

@media (max-width: 640px) {
  .trust-banner-section {
    padding: 70px 0 76px;
  }

  .trust-header {
    margin-bottom: 32px;
  }

  .trust-title {
    font-size: clamp(30px, 8vw, 40px);
  }

  .trust-description {
    font-size: 14px;
    line-height: 1.55;
  }

  .trust-logo-card {
    width: 150px;
    height: 62px;
    padding: 10px 16px;
  }

  .trust-logo-img {
    max-width: 122px;
    max-height: 40px;
  }

  .trust-logo-img--wide {
    max-width: 132px;
  }

  .trust-logo-img--square {
    max-width: 46px;
    max-height: 46px;
  }
}