/* ============================================================
   Page: /screen/design (Глабикс.Экран для дизайнеров) — редизайн 2026.
   Контентные секции — на компонентах кита (hero-2026, features-2026,
   solutions-2026, article-quote-2026). Page-scoped блоки: hero-blob,
   3-кол «преимущества», команда, кейс, тарифы с табами и FAQ-аккордеон.
   Табы/аккордеон используют существующий data-tabs JS (_scripts.html) —
   разметка сохранена, переопределён только стиль (scoped к .page-screen-design).
   ============================================================ */

/* --- Hero blob (бирюзовый, как у Экрана) --- */
.page-screen-design .hero-2026 {
  --hero-bg-image: url("/images/contacts/v2/hero-bg.svg");
  --hero-bg-image-sm: url("/images/contacts/v2/hero-bg.svg");
  --hero-bg-image-lg: url("/images/contacts/v2/hero-bg.svg");
}
.page-screen-design .hero-2026-gradient {
  left: 35.76%;
  top: 18.71%;
  width: 84.03%;
  height: 87.14%;
  background: linear-gradient(71.76deg, #f54141 20%, #dbff00 90%);
  opacity: 0.4;
  filter: blur(150px);
}

/* Заголовок секции (features / benefits / case) — по центру. */
.gs-section-title {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}
@media (min-width: 768px) {
  .gs-section-title {
    margin-bottom: 48px;
  }
}

/* ============================================================
   Преимущества — 3 колонки (иконка-иллюстрация + заголовок + текст).
   Используется дважды («Презентация идеи» / «Удобство использования»).
   ============================================================ */
.gs-benefits {
  margin: 56px 0;
}
@media (min-width: 768px) {
  .gs-benefits {
    margin: 72px 0;
  }
}
@media (min-width: 1280px) {
  .gs-benefits {
    margin: 120px 0;
  }
}
.gs-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .gs-benefits-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
/* Карточка-преимущество — как .partner-card на /partners/amocrm:
   белая карточка с лёгкой границей + тенью. */
.gs-benefit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 28px;
  background: var(--brand-white, #fff);
  border: 1px solid var(--surface-card-soft, #f3f3f4);
  border-radius: 16px;
  box-shadow: var(--shadow-xsm);
}
@media (min-width: 1024px) {
  .gs-benefit {
    padding: 32px;
  }
}
.gs-benefit-title {
  margin: 0;
}
.gs-benefit-text {
  margin: 0;
}

/* ============================================================
   «Плюсы для работы в команде» — 2 колонки (заголовок | 2 подпункта).
   ============================================================ */
.gs-team {
  margin: 56px 0;
}
@media (min-width: 768px) {
  .gs-team {
    margin: 72px 0;
  }
}
@media (min-width: 1280px) {
  .gs-team {
    margin: 120px 0;
  }
}
.gs-team-inner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: var(--gradient-secondary);
  border-radius: 24px;
  padding: 32px 24px;
  color: var(--brand-white, #fff);
}
/* SVG-подложка на всю карточку (поверх градиента). */
.gs-team-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/images/pricing/v2/plan-calc-grid.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.35;
}
.gs-team-inner > * {
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .gs-team-inner {
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    column-gap: 48px;
    padding: 56px;
  }
}
.gs-team-title {
  margin: 0;
  color: var(--brand-white, #fff);
}
.gs-team-points {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.gs-team-point-title {
  margin: 0 0 8px;
  color: var(--brand-white, #fff);
}
.gs-team-point-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   Кейс использования (Евгений Смирнов).
   ============================================================ */
.gs-case {
  margin: 56px 0;
}
@media (min-width: 768px) {
  .gs-case {
    margin: 72px 0;
  }
}
@media (min-width: 1280px) {
  .gs-case {
    margin: 120px 0;
  }
}
.gs-case-head {
  text-align: center;
  margin-bottom: 36px;
}
@media (min-width: 768px) {
  .gs-case-head {
    margin-bottom: 48px;
  }
}
.gs-case-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--gradient-secondary);
  color: var(--brand-white, #fff);
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 12px;
}
.gs-case-headline {
  margin: 0;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.gs-case-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .gs-case-body {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }
}
.gs-case-author {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gs-case-photo {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  object-fit: cover;
}
.gs-case-author p {
  margin: 0;
  color: var(--text-muted);
}
.gs-case-author a {
  text-decoration: underline;
}
.gs-case-text > * {
  margin: 0 0 16px;
}
.gs-case-text > *:last-child {
  margin-bottom: 0;
}
.gs-case-changes {
  margin: 40px auto 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .gs-case-changes {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
.gs-case-change {
  background-color: var(--surface-card-soft, #f3f3f4);
  border-radius: 16px;
  padding: 24px;
}
.gs-case-change-title {
  margin: 0 0 8px;
}
.gs-case-change-text {
  margin: 0;
  color: var(--text-muted);
}
.gs-case-quote {
  margin: 40px auto 0;
  max-width: 900px;
}

/* Тарифы — общий partial _pricing_company.html (свой <section> + Swiper).
   Над ним — отдельный заголовок секции. */
.gs-pricing-head {
  margin-top: 56px;
}
@media (min-width: 768px) {
  .gs-pricing-head {
    margin-top: 72px;
  }
}
.gs-pricing-head-title {
  text-align: center;
  margin: 0;
}

/* FAQ — общий компонент components/faq-2026.css (.faq-2026). */