@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ===================================================================
   SABY COMMON STYLES — общий CSS для всех страниц карточек товаров
   =================================================================== */

/* === RESET & BASE === */
.sr * { margin: 0; padding: 0; box-sizing: border-box; }
.sr {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #333;
  max-width: 1140px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 0;
}

/* === CARD CONTAINER === */
.sr-card {
  background: #f5f5f5;
  border-radius: 20px;
  overflow: hidden;
}
.sr-card__title {
  font-size: 34px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  line-height: 1.18;
  text-align: center;
  padding: 48px 40px 32px;
}

/* === TWO-COLUMN ROW === */
.sr-row {
  display: flex;
  min-height: 360px;
}
.sr-row__text {
  flex: 1;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sr-row__img {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 28px;
}
.sr-row__img img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* === ROW LABEL (replaces tab name) === */
.sr-row__label {
  font-size: 13px;
  font-weight: 600;
  color: #F15A24;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
}

/* === CHECKLIST (blue checkmarks) === */
.sr-check {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sr-check li {
  font-size: 15px;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sr-check li::before {
  content: '';
  display: block;
  width: 20px; min-width: 20px; height: 20px;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A9EF5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}

/* === FEATURE POINTS (bold title + description) === */
.sr-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sr-points li h4 {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 3px;
}
.sr-points li p {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
}

/* === LINK BUTTON === */
.sr-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 26px;
  border-radius: 100px;
  border: 1.5px solid #d9d9d9;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  background: #fff;
  width: fit-content;
  transition: all .25s ease;
  font-family: inherit;
  cursor: pointer;
}
.sr-link:hover {
  border-color: #999;
  background: #fafafa;
}
.sr-link--blue {
  color: #4A9EF5;
  border-color: #c5ddf5;
}
.sr-link--blue:hover {
  background: #f0f6ff;
  border-color: #4A9EF5;
}

/* === AI GRID (2×2 features) === */
.sr-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 44px;
  padding: 0 44px 44px;
}
.sr-ai-item {}
.sr-ai-icon {
  width: 36px; height: 36px;
  color: #4A9EF5;
  margin-bottom: 12px;
}
.sr-ai-icon svg { width: 36px; height: 36px; }
.sr-ai-item h4 {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 5px;
}
.sr-ai-item p {
  font-size: 14px;
  color: #666;
  line-height: 1.55;
}
.sr-ai-visual {
  display: flex;
  justify-content: center;
  padding: 0 40px 40px;
}
.sr-ai-visual img {
  max-width: 420px;
  width: 100%;
  height: auto;
}

/* === FEATURE GRID (Единое окно) === */
.sr-fgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 32px 32px;
}
.sr-fcard {
  background: #fff;
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all .3s cubic-bezier(.32,.72,0,1);
  cursor: default;
}
.sr-fcard:hover {
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 60, 140, 0.08);
  transform: translateY(-4px);
}
.sr-fcard:hover .sr-fcard__icon {
  color: #F15A24;
}
.sr-fcard__icon {
  width: 32px; min-width: 32px; height: 32px;
  color: #4A9EF5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .3s ease;
}
.sr-fcard__icon svg { width: 28px; height: 28px; }
.sr-fcard h4 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  transition: color .3s ease;
}
.sr-fcard:hover h4 {
  color: #F15A24;
}

/* Feature grid bottom row */
.sr-fgrid-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 32px 32px;
}
.sr-fcard--wide {
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all .3s cubic-bezier(.32,.72,0,1);
  cursor: default;
}
.sr-fcard--wide:hover {
  border-color: #ddd;
  box-shadow: 0 8px 28px rgba(0, 60, 140, 0.08);
  transform: translateY(-4px);
}
.sr-fcard--wide:hover .sr-fcard__icon {
  color: #F15A24;
}
.sr-fcard--wide h4 {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  transition: color .3s ease;
}
.sr-fcard--wide:hover h4 {
  color: #F15A24;
}
.sr-fcard--wide p {
  font-size: 13px;
  color: #888;
  margin-top: 3px;
}

/* === APP STORE BUTTONS === */
.sr-stores {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.sr-store {
  padding: 10px 20px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: background .25s ease;
}
.sr-store:hover {
  background: #333;
}
.sr-store svg {
  width: 18px; height: 18px;
  fill: #fff;
}

/* === UTILITY CLASSES === */
.sr-blue { color: #4A9EF5; }
.sr-blue-link { color: #4A9EF5; text-decoration: underline; }

/* === DARK CARD === */
.sr-card--dark {
  background: #1A2233;
  color: #fff;
}
.sr-card--dark .sr-card__title {
  color: #fff;
}
.sr-card--dark .sr-row__label {
  color: #F15A24;
}
.sr-card--dark .sr-check li {
  color: rgba(255,255,255,0.85);
}
.sr-card--dark .sr-points li h4 {
  color: #fff;
}
.sr-card--dark .sr-points li p {
  color: rgba(255,255,255,0.55);
}

/* Dark sub-cards (inside dark card) */
.sr-dark-sub {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px 24px;
}
.sr-dark-sub h4 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.sr-dark-sub p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
}

/* Dark grid (2 or 3 col sub-cards) */
.sr-dark-grid {
  display: grid;
  gap: 12px;
  padding: 0 32px 32px;
}
.sr-dark-grid--2 { grid-template-columns: 1fr 1fr; }
.sr-dark-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

/* === CSS-ONLY TABS (radio hack) === */
.sr-tabs-wrap {
  padding: 0 32px;
}
.sr-tabs-wrap input[type="radio"] {
  display: none;
}
.sr-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.sr-tabs-nav label {
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid #d9d9d9;
  background: #fff;
  color: #333;
  transition: all 0.25s ease;
  font-family: inherit;
}
.sr-tabs-nav label:hover {
  border-color: #aaa;
}
/* Dark variant */
.sr-card--dark .sr-tabs-nav label {
  background: transparent;
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
}
.sr-card--dark .sr-tabs-nav label:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

.sr-tab-panel {
  display: none;
}

/* Active states for up to 7 tabs */
#sr-tab-1:checked ~ .sr-tabs-nav label[for="sr-tab-1"],
#sr-tab-2:checked ~ .sr-tabs-nav label[for="sr-tab-2"],
#sr-tab-3:checked ~ .sr-tabs-nav label[for="sr-tab-3"],
#sr-tab-4:checked ~ .sr-tabs-nav label[for="sr-tab-4"],
#sr-tab-5:checked ~ .sr-tabs-nav label[for="sr-tab-5"],
#sr-tab-6:checked ~ .sr-tabs-nav label[for="sr-tab-6"],
#sr-tab-7:checked ~ .sr-tabs-nav label[for="sr-tab-7"] {
  background: #F15A24;
  color: #fff;
  border-color: #F15A24;
}
#sr-tab-1:checked ~ .sr-tab-panel--1,
#sr-tab-2:checked ~ .sr-tab-panel--2,
#sr-tab-3:checked ~ .sr-tab-panel--3,
#sr-tab-4:checked ~ .sr-tab-panel--4,
#sr-tab-5:checked ~ .sr-tab-panel--5,
#sr-tab-6:checked ~ .sr-tab-panel--6,
#sr-tab-7:checked ~ .sr-tab-panel--7 {
  display: block;
}

/* Second set of tabs (b-prefix) for second tabbed block on same page */
#sr-tab-b1:checked ~ .sr-tabs-nav label[for="sr-tab-b1"],
#sr-tab-b2:checked ~ .sr-tabs-nav label[for="sr-tab-b2"],
#sr-tab-b3:checked ~ .sr-tabs-nav label[for="sr-tab-b3"],
#sr-tab-b4:checked ~ .sr-tabs-nav label[for="sr-tab-b4"],
#sr-tab-b5:checked ~ .sr-tabs-nav label[for="sr-tab-b5"],
#sr-tab-b6:checked ~ .sr-tabs-nav label[for="sr-tab-b6"],
#sr-tab-b7:checked ~ .sr-tabs-nav label[for="sr-tab-b7"] {
  background: #F15A24;
  color: #fff;
  border-color: #F15A24;
}
#sr-tab-b1:checked ~ .sr-tab-panel--b1,
#sr-tab-b2:checked ~ .sr-tab-panel--b2,
#sr-tab-b3:checked ~ .sr-tab-panel--b3,
#sr-tab-b4:checked ~ .sr-tab-panel--b4,
#sr-tab-b5:checked ~ .sr-tab-panel--b5,
#sr-tab-b6:checked ~ .sr-tab-panel--b6,
#sr-tab-b7:checked ~ .sr-tab-panel--b7 {
  display: block;
}

/* Third set (c-prefix) */
#sr-tab-c1:checked ~ .sr-tabs-nav label[for="sr-tab-c1"],
#sr-tab-c2:checked ~ .sr-tabs-nav label[for="sr-tab-c2"],
#sr-tab-c3:checked ~ .sr-tabs-nav label[for="sr-tab-c3"],
#sr-tab-c4:checked ~ .sr-tabs-nav label[for="sr-tab-c4"],
#sr-tab-c5:checked ~ .sr-tabs-nav label[for="sr-tab-c5"],
#sr-tab-c6:checked ~ .sr-tabs-nav label[for="sr-tab-c6"],
#sr-tab-c7:checked ~ .sr-tabs-nav label[for="sr-tab-c7"] {
  background: #F15A24;
  color: #fff;
  border-color: #F15A24;
}
#sr-tab-c1:checked ~ .sr-tab-panel--c1,
#sr-tab-c2:checked ~ .sr-tab-panel--c2,
#sr-tab-c3:checked ~ .sr-tab-panel--c3,
#sr-tab-c4:checked ~ .sr-tab-panel--c4,
#sr-tab-c5:checked ~ .sr-tab-panel--c5,
#sr-tab-c6:checked ~ .sr-tab-panel--c6,
#sr-tab-c7:checked ~ .sr-tab-panel--c7 {
  display: block;
}

/* === BANNER (full-width CTA inside dark card) === */
.sr-banner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1A2840 0%, #0F1B2D 100%);
  border: 1px solid rgba(255,255,255,0.08);
  margin: 0 32px 32px;
  overflow: hidden;
}
.sr-banner__img {
  flex: 0 0 auto;
  max-width: 260px;
}
.sr-banner__img img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.sr-banner__text {
  flex: 1;
}
.sr-banner__text h3 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.2;
}
.sr-banner__text p {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
  margin-bottom: 16px;
}
.sr-btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 100px;
  background: #F15A24;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all .25s ease;
  font-family: inherit;
}
.sr-btn-orange:hover {
  background: #D94D1A;
  box-shadow: 0 4px 16px rgba(241, 90, 36, 0.35);
}

/* === VIDEO EMBED === */
.sr-video-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  max-width: 100%;
}
.sr-video-wrap video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* === STAT ROW (horizontal numbers) === */
.sr-stat-row {
  display: flex;
  gap: 32px;
  padding: 0 32px 24px;
}
.sr-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sr-stat-item__icon {
  width: 32px; height: 32px;
  color: #4A9EF5;
}
.sr-stat-item__icon svg { width: 28px; height: 28px; }
.sr-stat-item__text {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.sr-stat-item__text span {
  font-weight: 400;
  color: rgba(255,255,255,0.6);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .sr {
    padding: 16px;
    gap: 16px;
  }
  .sr-card__title {
    font-size: 24px;
    padding: 32px 20px 24px;
  }
  .sr-row {
    flex-direction: column;
  }
  .sr-row__text {
    padding: 24px 20px;
  }
  .sr-row__img {
    padding: 16px 20px;
  }
  .sr-ai-grid {
    grid-template-columns: 1fr;
    padding: 0 20px 20px;
    gap: 20px;
  }
  .sr-ai-visual {
    padding: 0 20px 20px;
  }
  .sr-fgrid {
    grid-template-columns: 1fr;
    padding: 0 16px 16px;
  }
  .sr-fgrid-bottom {
    grid-template-columns: 1fr;
    padding: 0 16px 16px;
  }
  .sr-stores {
    flex-direction: column;
  }
  .sr-dark-grid--2,
  .sr-dark-grid--3 {
    grid-template-columns: 1fr;
    padding: 0 16px 16px;
  }
  .sr-tabs-wrap {
    padding: 0 16px;
  }
  .sr-tabs-nav label {
    font-size: 13px;
    padding: 8px 16px;
  }
  .sr-banner {
    flex-direction: column;
    margin: 0 16px 16px;
    padding: 24px 20px;
  }
  .sr-banner__img {
    max-width: 100%;
  }
  .sr-stat-row {
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 16px;
  }
}