:root {
  --c-dark:   #354041;   /* темно-зелений */
  --c-khaki:  #8da78b;   /* хакі */
  --c-light:  #a3bd24;   /* світло-зелений (акцент) */
  --c-bg:     #e1eee8;   /* світлий фон */
  --c-white:  #ffffff;   /* білий */
}

/* ======== Обгортка секції ======== */
.ts-wrapper {
  padding: 80px 20px;
  background: var( --c-white);
  text-align: center;
}

/* ======== Заголовок секції ======== */
.ts-header {
  margin: 0 0 60px;
  font: 700 36px/1.2 "Roboto", sans-serif;
  color: var(--c-dark);
  position: relative;
}
.ts-header::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin: 16px auto 0;
  background: var(--c-light);
  border-radius: 2px;
}

/* ======== Сітка учасників ======== */
.ts-members-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
}

/* ======== Картка учасника ======== */
.ts-member-card {
  background: var(--c-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.ts-member-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
}

/* ======== Фото учасника ======== */
.ts-member-photo {
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
}
.ts-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.ts-member-card:hover .ts-member-photo img {
  transform: scale(1.08) rotate(.5deg);
}

/* ======== Інфо учасника ======== */
.ts-member-info {
  padding: 24px 28px 36px;
}
.ts-member-name {
  margin: 0 0 8px;
  font: 700 22px/1.3 "Roboto", sans-serif;
  color: var(--c-dark);
}
.ts-member-role {
  margin: 0 0 16px;
  font: 600 14px/1.5 "Roboto", sans-serif;
  letter-spacing: .5px;
  color: var(--c-khaki);
  text-transform: uppercase;
}
.ts-member-bio {
  margin: 0 0 24px;
  font: 400 15px/1.6 "Open Sans", sans-serif;
  color: #555;
}

/* ======== Кнопка дзвінка ======== */
.ts-contact-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--c-dark);
  color: var(--c-white);
  font: 600 14px/1 "Open Sans", sans-serif;
  text-decoration: none;
  border-radius: 24px;
  transition: background .3s ease;
}
.ts-contact-btn:hover {
  background: var(--c-light);
}
.ts-contact-btn svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  fill: currentColor;
}

/* ======== Адаптив ======== */
@media (max-width: 480px) {
  .ts-wrapper { padding: 60px 10px; }
  .ts-header { font-size: 28px; margin-bottom: 40px; }
}
:root {
  --c-dark:   #354041;   /* темно-зелений */
  --c-khaki:  #8da78b;   /* хакі */
  --c-light:  #a3bd24;   /* світло-зелений (акцент) */
  --c-bg:     #e1eee8;   /* світлий фон */
  --c-white:  #ffffff;   /* білий */
}

/* ======== Обгортка секції ======== */
.ts-wrapper {
  padding: 80px 20px;
  background: var(--c-white);
  text-align: center;
}

/* ======== Заголовок секції ======== */
.ts-header {
  margin: 0 0 60px;
  font: 700 36px/1.2 "Roboto", sans-serif;
  color: var(--c-dark);
  position: relative;
}
.ts-header::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin: 16px auto 0;
  background: var(--c-light);
  border-radius: 2px;
}

/* ======== Сітка учасників ======== */
.ts-members-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
}

/* ======== Картка учасника ======== */
.ts-member-card {
  background: var(--c-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.ts-member-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
}

/* ======== Фото учасника ======== */
.ts-member-photo {
  overflow: hidden;
  aspect-ratio: 2/3;
  position: relative;
}
.ts-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.ts-member-card:hover .ts-member-photo img {
  transform: scale(1.08) rotate(.5deg);
}

`
.ts-member-info {
  padding: 24px 28px 36px;
}
.ts-member-name {
  margin: 0 0 8px;
  font: 700 22px/1.3 "Roboto", sans-serif;
  color: var(--c-dark);
}
.ts-member-role {
  margin: 0 0 16px;
  font: 600 14px/1.5 "Roboto", sans-serif;
  letter-spacing: .5px;
  color: var(--c-khaki);
  text-transform: uppercase;
}
.ts-member-bio {
  margin: 0 0 24px;
  font: 400 15px/1.6 "Open Sans", sans-serif;
  color: #555;
}

/* ======== Кнопка дзвінка ======== */
.ts-contact-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--c-dark);
  color: var(--c-white);
  font: 600 14px/1 "Open Sans", sans-serif;
  text-decoration: none;
  border-radius: 24px;
  transition: background .3s ease;
}
.ts-contact-btn:hover {
  background: var(--c-light);
}
.ts-contact-btn svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  fill: currentColor;
}

/* ======== Адаптив ======== */
@media (max-width: 480px) {
  .ts-wrapper { padding: 60px 10px; }
  .ts-header { font-size: 28px; margin-bottom: 40px; }
}
