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

/* ══════════════════════════════
       CAROUSEL — desktop only
    ══════════════════════════════ */
    #carousel-section {
      width: 100%;
      max-width: 100rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .carousel-wrapper {
      width: 100%;
      position: relative;
      padding: 0 3rem;
    }

    .carousel-track-container {
      overflow: hidden;
      border-radius: 0.75rem;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .carousel-track.no-transition { transition: none; }

    .carousel-group {
      display: flex;
      min-width: 100%;
      flex-shrink: 0;
    }

    .carousel-slide { flex: 1; padding: 0.625rem; }

    .logo-card {
      background: #fff;
      border-radius: 0.75rem;
      height: 12rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.625rem;
      box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.08);
      transition: box-shadow 0.2s, transform 0.2s;
      padding: 1rem;
    }

    .logo-card:hover {
      box-shadow: 0 0.375rem 1.25rem rgba(0,0,0,0.13);
      transform: translateY(-0.125rem);
    }

    .logo-icon {
      width: 10rem;
      height: 10rem;
      border-radius: 0.625rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }

    .logo-name {
      font-size: 0.78rem;
      font-weight: 600;
      color: #555;
      text-align: center;
    }

    /* Arrows */
    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 50%;
      border: none;
      background: #fff;
      box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.15);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      color: #444;
      transition: background 0.2s, color 0.2s;
      z-index: 10;
    }

    .arrow:hover { background: #4f46e5; color: #fff; }
    .arrow-left  { left: 0.25rem; }
    .arrow-right { right: 0.25rem; }

    /* Dots */
    .dots {
      display: flex;
      gap: 0.5rem;
      margin-top: 1.25rem;
      justify-content: center;
    }

    .dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: #ccc;
      border: none;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }

    .dot.active { background: #4f46e5; transform: scale(1.3); }

    /* ══════════════════════════════
       TABLE — mobile only
    ══════════════════════════════ */
    #mobile-section { display: none; width: 100%; max-width: 22rem; padding: 0 1rem; }

    .logo-table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      border-radius: 0.75rem;
      overflow: hidden;
      box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.09);
    }

    .logo-table thead tr {
      background: #4f46e5;
      color: #fff;
    }

    .logo-table tbody tr {
      border-bottom: 0.0625rem solid #f0f0f0;
      transition: background 0.15s;
    }

    .logo-table tbody tr:last-child { border-bottom: none; }
    .logo-table tbody tr:hover { background: #f7f6ff; }

    .logo-table td {
      padding: 0.55rem 0.75rem;
      font-size: 0.8rem;
      color: #333;
      vertical-align: middle;
    }

    .logo-table tbody tr td a img {
      width: 150px;
      height: 150px;
      border-radius: 0.3rem;
      transition: transform 0.2s;
      display: block;
      align-items: center;
      margin: auto;
    }

    .logo-table td:last-child { text-align: center; }

    .tbl-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border-radius: 0.4rem;
      font-size: 0.7rem;
      font-weight: 700;
      color: #fff;
    }

    /* ══════════════════════════════
       Breakpoint: ≤ 33.75rem (540px)
    ══════════════════════════════ */
    @media (max-width: 33.75rem) {
      h2 { font-size: 1rem; margin-bottom: 1.25rem; }
      #carousel-section { display: none; }
      #mobile-section   { display: flex; flex-direction: column; align-items: center; }
    }