[data-tc],
.t-carousel{
  --brand: #C0C0C0;                   --ink: #C0C0C0;                     --card-bg: rgba(16,18,22,.65);      --shadow-1: 0 30px 60px rgba(0,0,0,.35);
  --shadow-2: 0 10px 24px rgba(0,0,0,.20);
}

.t-carousel{ padding: 28px 0; }
.t-carousel__viewport{
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 60px;                   overflow: hidden;
}

.t-carousel__track{
  display: flex;
  width: 100%;
  will-change: transform;
  transition: transform .5s cubic-bezier(.22,.8,.2,1);
}
.t-slide{ flex: 0 0 100%; display:flex; justify-content:center; }

.t-card{
  position: relative;
  width: min(680px, 92%);
  padding: 36px 36px 46px;
  text-align: center;
  color: var(--ink);
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: 20px;
  box-shadow: var(--shadow-1), var(--shadow-2);
  border: 1px solid rgba(255,255,255,.08);
  outline: 1px solid rgba(0,0,0,.35);
  overflow: hidden;
}

.t-card, .t-card * { color: var(--ink) !important; }

.t-card::before{
  content:"";
  position:absolute; inset:-10% -10% auto -10%;
  height: 56%;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

.t-card__pointer{
  position: absolute;
  left: 50%; bottom: -10px;
  width: 18px; height: 18px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-2);
  border-radius: 4px;
}

.t-stars{ display:inline-block; margin: 2px 0 14px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.08)); }
.t-stars__row{ width: 120px; height: 22px; display:block; fill: #FFC107; }

.t-card__text{
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
  font-weight: 500;
  margin: 0 0 14px;
  max-width: 62ch;                         margin-left: auto; margin-right: auto;
  hyphens: auto; overflow-wrap: anywhere;
}
.t-card__text + .t-card__text{ margin-top: 8px; }

.t-card__author{ font-weight: 800; font-size: 17px; margin-top: 6px; letter-spacing:.2px; }
.t-card__role{ font-weight: 600; opacity:.9; font-size: 13px; }

.t-carousel__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer;
  width: 54px; height: 54px; padding: 0; border-radius: 999px;
  z-index: 5; pointer-events: auto;
}
.t-carousel__nav--prev{ left: 10px; }
.t-carousel__nav--next{ right: 10px; }

.t-arrow{
  position: relative; display:grid; place-items:center;
  width: 100%; height: 100%; border-radius: inherit;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(192,192,192,.18), rgba(192,192,192,.05)),
    rgba(30,30,30,.95);
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.t-arrow::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  background: conic-gradient(from 140deg, rgba(192,192,192,.95), rgba(192,192,192,.25), rgba(192,192,192,.95));
  -webkit-mask: radial-gradient(circle at center, transparent 23px, #000 24px);
          mask: radial-gradient(circle at center, transparent 23px, #000 24px);
  opacity:.75;
}
.t-arrow svg{ width: 20px; height: 20px; stroke: var(--brand) !important; fill: none; stroke-width: 2.5; }
.t-carousel__nav:hover .t-arrow{ transform: scale(1.07); }
.t-carousel__nav:active .t-arrow{ transform: scale(.97); }

.t-carousel__dots{
  display:flex; justify-content:center; gap:10px; margin-top:14px;
}
.t-carousel__dots button{
  width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background: rgba(192,192,192,.30);
}
.t-carousel__dots button[aria-current="true"]{ background: var(--brand); }

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .t-card{ background: rgba(16,18,22,.85); }
  .t-card__pointer{ background: rgba(16,18,22,.85); }
}

@media (max-width: 640px){
  .t-carousel__viewport{ padding: 0 44px; }
  .t-card{
    width: 100%;
    padding: 22px 18px 28px;
    border-radius: 16px;
    box-shadow: 0 16px 28px rgba(0,0,0,.35);     outline: none;
  }
  .t-stars__row{ width: 96px; height: 18px; }
  .t-card__text{
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 48ch;                         margin-bottom: 12px;
  }
  .t-card__author{ font-size: 16px; }
  .t-card__role{ font-size: 12.5px; }
  .t-arrow{ width: 44px; height: 44px; }
  .t-arrow::before{
    -webkit-mask: radial-gradient(circle at center, transparent 18px, #000 19px);
            mask: radial-gradient(circle at center, transparent 18px, #000 19px);
  }
}

@media (max-width: 380px){
  .t-carousel__viewport{ padding: 0 38px; }
  .t-card{ padding: 18px 14px 24px; }
  .t-arrow{ width: 40px; height: 40px; }
  .t-stars__row{ width: 88px; height: 16px; }
  .t-card__text{ font-size: 15px; line-height: 1.55; max-width: 44ch; }
}




.t-more{
  --ink:#C0C0C0; --ink-strong:#E9E9E9; --accent:#B4CF32;
  --glass:rgba(12,14,18,.62); --stroke:rgba(255,255,255,.12);
  color:var(--ink);
  margin-top: clamp(18px,4vw,32px);
  margin-bottom: clamp(18px,5vw,44px);
}
.t-more__inner{
  max-width:1100px; margin:0 auto;
  padding: 0 clamp(16px,3vw,32px);
}
.t-more__lead{
  text-align:center;
  margin:0 0 12px;
  font-weight:800; color:var(--ink-strong);
  letter-spacing:.02em;
}
.t-more__nav{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:center;
}
.t-more__link{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border:1px solid var(--stroke);
  border-radius:12px;
  background:var(--glass);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  text-decoration:none; color:var(--ink);
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  font-weight:800;
}
.t-more__icon{ width:22px; height:22px; display:grid; place-items:center; color:var(--ink-strong); }
.t-more__icon svg{ width:22px; height:22px; display:block; }

@media (hover:hover){
  .t-more__link{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease; }
  .t-more__link:hover{
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--accent) 45%, transparent);
    color: var(--ink-strong);
    box-shadow: 0 12px 26px rgba(0,0,0,.55);
  }
}

.t-more__visuallyhidden{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0;
}

.t-more__lead{
  color: #0b0e13; }