*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    :root {
      --p: #6b21a8;
      --p-dark: #4a1572;
      --p-mid: #8b5cf6;
      --p-light: #ede9fe;
      --p-pale: #f5f3ff;
      --ban1: #78439a;
      --ban2: #523493;
      --gold: #f59e0b;
      --gold-l: #fef3c7;
      --white: #fff;
      --bg: #F2F8FD;
      --border: #dde8f5;
      --ink: #1a0f2e;
      --muted: #5a6a80;
      --subtle: #94a3b8;
      --green: #16a34a;
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Space Grotesk', sans-serif;
      /* background: var(--bg); */
      -webkit-font-smoothing: antialiased;
    }

    /* ══ WRAPPER ══ */
    .ts-wrap {
      max-width: 100%;
      margin: 0px !important;
      padding: 0 24px
    }

    /* ══ HEADER ══ */
    .ts-header {
      text-align: center;
      margin-bottom: 48px
    }

    .ts-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--ban1), var(--ban2));
      color: #fff;
      border-radius: 100px;
      padding: 5px 16px 5px 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 16px;
      box-shadow: 0 4px 14px rgba(82, 52, 147, .25);
    }

    .ts-badge-dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .2);
      border: 1px solid rgba(255, 255, 255, .25);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .ts-badge-dot svg {
      width: 9px;
      height: 9px;
      color: #fff
    }

    .ts-title {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.03em;
      line-height: 1.1;
      margin-bottom: 12px
    }

    .ts-title em {
      font-style: normal;
      color: var(--p)
    }

    .ts-sub {
      font-size: 16px;
      color: var(--muted);
      max-width: 460px;
      margin: 0 auto 28px;
      line-height: 1.7
    }

    /* Stats pill */
    .ts-stats {
      display: inline-flex;
      gap: 0;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(82, 52, 147, .08);
    }

    .ts-stat {
      padding: 12px 24px;
      text-align: center;
      border-right: 1px solid var(--border);
      position: relative
    }

    .ts-stat:last-child {
      border-right: none
    }

    .ts-stat-val {
      font-size: 16px;
      font-weight: 700;
      color: var(--p);
      letter-spacing: -.02em;
      line-height: 1
    }

    .ts-stat-lbl {
      font-size: 12px;
      color: var(--subtle);
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-top: 3px
    }

    /* ══ DESKTOP GRID ══ */
    .logo-desktop {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 10px
    }

    /* tablet: 5 col */
    @media(max-width:1024px) and (min-width:769px) {
      .logo-desktop {
        grid-template-columns: repeat(5, 1fr);
        gap: 10px
      }
    }

    .logo-card {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 16px;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 8px;
      cursor: default;
      transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s, border-color .22s;
      position: relative;
      overflow: hidden;
    }

    .logo-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 15px;
      background: linear-gradient(135deg, var(--p-pale), rgba(255, 255, 255, 0));
      opacity: 0;
      transition: opacity .2s;
    }

    .logo-card:hover {
      transform: translateY(-5px) scale(1.03);
      box-shadow: 0 12px 32px rgba(107, 33, 168, .13);
      border-color: #c4b0e0
    }

    .logo-card:hover::after {
      opacity: 1
    }

    .lc-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .lc-name {
      font-weight: 700;
      text-align: center;
      line-height: 1.2;
      transition: transform .2s;
    }

    .logo-card:hover .lc-name {
      transform: scale(1.04)
    }

    /* Stagger animation */
    .logo-card {
      animation: fadeUp .4s ease both
    }

    .logo-card:nth-child(1) {
      animation-delay: .02s
    }

    .logo-card:nth-child(2) {
      animation-delay: .04s
    }

    .logo-card:nth-child(3) {
      animation-delay: .06s
    }

    .logo-card:nth-child(4) {
      animation-delay: .08s
    }

    .logo-card:nth-child(5) {
      animation-delay: .10s
    }

    .logo-card:nth-child(6) {
      animation-delay: .12s
    }

    .logo-card:nth-child(7) {
      animation-delay: .14s
    }

    .logo-card:nth-child(8) {
      animation-delay: .16s
    }

    .logo-card:nth-child(9) {
      animation-delay: .18s
    }

    .logo-card:nth-child(10) {
      animation-delay: .20s
    }

    .logo-card:nth-child(11) {
      animation-delay: .22s
    }

    .logo-card:nth-child(12) {
      animation-delay: .24s
    }

    .logo-card:nth-child(13) {
      animation-delay: .26s
    }

    .logo-card:nth-child(14) {
      animation-delay: .28s
    }

    .logo-card:nth-child(15) {
      animation-delay: .30s
    }

    .logo-card:nth-child(16) {
      animation-delay: .32s
    }

    .logo-card:nth-child(17) {
      animation-delay: .34s
    }

    .logo-card:nth-child(18) {
      animation-delay: .36s
    }

    .logo-card:nth-child(19) {
      animation-delay: .38s
    }

    .logo-card:nth-child(20) {
      animation-delay: .40s
    }

    .logo-card:nth-child(21) {
      animation-delay: .42s
    }

    .logo-card:nth-child(22) {
      animation-delay: .44s
    }

    .logo-card:nth-child(23) {
      animation-delay: .46s
    }

    .logo-card:nth-child(24) {
      animation-delay: .48s
    }

    .logo-card:nth-child(25) {
      animation-delay: .50s
    }

    .logo-card:nth-child(26) {
      animation-delay: .52s
    }

    .logo-card:nth-child(27) {
      animation-delay: .54s
    }

    .logo-card:nth-child(28) {
      animation-delay: .56s
    }

    .logo-card:nth-child(29) {
      animation-delay: .58s
    }

    .logo-card:nth-child(30) {
      animation-delay: .60s
    }

    /* ══ MOBILE CAROUSEL ══ */
    .logo-mobile {
      display: none;
      flex-direction: column;
      gap: 16px
    }

    .carousel-viewport {
      overflow: hidden;
      border-radius: 12px;
      padding: 4px 2px
    }

    .carousel-track {
      display: flex;
      gap: 10px;
      transition: transform .38s cubic-bezier(.4, 0, .2, 1);
      will-change: transform;
    }

    .carousel-track .logo-card {
      min-width: calc(33.333% - 7px);
      flex-shrink: 0;
      animation: none;
      aspect-ratio: 1;
      max-height: 100px;
    }

    @media(max-width:420px) {
      .carousel-track .logo-card {
        min-width: calc(50% - 5px)
        
      }
      .carousel-track .logo-card img{
        height: 80px;
        width: auto;
        object-fit: contain;
      }
      .logo-card:hover{
        transform: none;
        box-shadow: none;
        border-color: var(--border)
      }
    }

    /* Pagination */
    .carousel-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 2px
    }

    .carousel-counter {
      font-size: .72rem;
      font-weight: 600;
      color: var(--subtle)
    }

    .carousel-counter strong {
      color: var(--p);
      font-weight: 700
    }

    .cc-controls {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .cc-btn {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: var(--white);
      border: 1.5px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .18s;
      flex-shrink: 0;
    }

    .cc-btn:hover:not(:disabled) {
      border-color: var(--p);
      background: var(--p-pale)
    }

    .cc-btn:disabled {
      opacity: .3;
      cursor: not-allowed
    }

    .cc-btn svg {
      width: 14px;
      height: 14px;
      color: var(--ink)
    }

    .cc-dots {
      display: flex;
      gap: 5px;
      align-items: center
    }

    .cc-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--border);
      cursor: pointer;
      transition: all .25s;
    }

    .cc-dot.active {
      width: 20px;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--ban1), var(--ban2))
    }

    /* ══ TRUST STRIP ══ */
    .trust-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 36px;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 14px;
      padding: 14px 20px;
      box-shadow: 0 2px 12px rgba(82, 52, 147, .05);
      flex-wrap: wrap;
    }

    .ti {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: var(--muted);
      font-weight: 500;
      padding: 4px 0
    }

    .ti svg {
      width: 13px;
      height: 13px;
      color: var(--green);
      flex-shrink: 0
    }

    .ti-sep {
      width: 1px;
      height: 20px;
      background: var(--border);
      flex-shrink: 0
    }

    @media(max-width:600px) {
      .ti-sep {
        display: none
      }

      .trust-strip {
        gap: 10px 20px
      }
    }

    /* ══ SHARED ══ */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    /* Responsive switches */
    @media(max-width:768px) {
      .logo-desktop {
        display: none
      }

      .logo-mobile {
        display: flex
      }

    

      .ts-stats {
        flex-wrap: wrap;
        border-radius: 12px
      }

      .ts-stat {
        padding: 10px 16px
      }
    }