/* ── Hero (компактный, скруглённый низ) ── */
    .tv-hero {
      background: linear-gradient(135deg, #051B35 0%, #0B3D6B 45%, #0A6CFF 100%);
      padding: var(--space-12) 0;
      position: relative;
      overflow: hidden;
      border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
    }
    .tv-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 700px 500px at 80% 50%, rgba(10, 108, 255, 0.25) 0%, transparent 70%),
        radial-gradient(ellipse 400px 400px at 10% 80%, rgba(23, 233, 183, 0.12) 0%, transparent 60%);
      pointer-events: none;
      z-index: 1;
    }
    .tv-hero__inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: var(--space-12);
      align-items: center;
    }
    /* компактнее, чем базовый hero: меньше заголовок и отступы */
    .tv-hero .hero__badge { margin-bottom: var(--space-4); }
    .tv-hero .hero__title {
      font-size: clamp(2rem, 4vw, 2.75rem);
      margin-bottom: var(--space-4);
    }
    .tv-hero .hero__subtitle {
      margin-bottom: var(--space-6);
      max-width: 440px;
    }
    @media (max-width: 900px) {
      .tv-hero { padding: var(--space-10) 0 var(--space-8); }
      .tv-hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
    }
    @media (max-width: 480px) {
      .tv-hero .hero__actions { flex-direction: column; }
      .tv-hero .hero__actions .btn { width: 100%; justify-content: center; }
    }

    /* ── Price block under buttons ── */
    .tv-hero__price {
      margin-top: var(--space-5);
      display: flex;
      align-items: baseline;
      gap: var(--space-3);
    }
    .tv-hero__price-value {
      font-size: var(--font-size-2xl);
      font-weight: var(--font-weight-extrabold);
      color: #17E9B7;
    }
    .tv-hero__price-note {
      font-size: var(--font-size-sm);
      color: rgba(255,255,255,0.5);
    }

    /* ── Advantage cards grid ── */
    .tv-advantages-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      max-width: 460px;
      margin: 0 auto;
    }
    .tv-advantage-card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--radius-xl);
      padding: var(--space-5) var(--space-4);
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
      backdrop-filter: blur(8px);
      transition: all var(--transition-base);
    }
    .tv-advantage-card:hover {
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.22);
      transform: translateY(-2px);
    }
    .tv-advantage-card__value {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-extrabold);
      color: white;
      line-height: 1.1;
    }
    .tv-advantage-card__text {
      font-size: var(--font-size-sm);
      color: rgba(255,255,255,0.6);
      line-height: 1.4;
    }

    @media (max-width: 900px) {
      .tv-advantages-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 100%;
        gap: 10px;
      }
      .tv-advantage-card {
        padding: var(--space-4);
      }
      .tv-advantage-card__value {
        font-size: var(--font-size-lg);
      }
      .tv-advantage-card__text {
        font-size: var(--font-size-xs);
      }
    }

    /* ── Тематики каналов ── */
    .tv-topics-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-5);
    }
    .tv-topic-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-100);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      transition: box-shadow var(--transition-base), transform var(--transition-base);
    }
    .tv-topic-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .tv-topic-card__icon {
      width: 48px; height: 48px;
      border-radius: var(--radius-lg);
      background: var(--color-brand-50);
      color: var(--color-brand-500);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-4);
    }
    .tv-topic-card__title {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      color: var(--color-gray-900);
      margin-bottom: var(--space-1);
    }
    .tv-topic-card__desc {
      font-size: var(--font-size-sm);
      color: var(--color-gray-500);
      line-height: var(--line-height-relaxed);
    }
    @media (max-width: 900px) {
      .tv-topics-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    }
    /* мобила: карточка горизонтальная — компактнее в один столбец */
    @media (max-width: 560px) {
      .tv-topics-grid { grid-template-columns: 1fr; }
      .tv-topic-card {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
        align-items: center;
      }
      .tv-topic-card__icon {
        grid-row: 1 / 3;
        margin-bottom: 0;
        width: 44px; height: 44px;
      }
      .tv-topic-card__desc { grid-column: 2; }
    }

    /* ── Feature cards (почему кабельное ТВ) ── */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-6);
    }
    @media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }

    .feature-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-100);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      display: flex;
      gap: var(--space-4);
      align-items: flex-start;
      transition: box-shadow var(--transition-base), transform var(--transition-base);
    }
    .feature-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .feature-card__icon {
      flex-shrink: 0;
      width: 52px; height: 52px;
      border-radius: var(--radius-lg);
      background: var(--color-brand-50);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-brand-500);
    }
    .feature-card__title {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      color: var(--color-gray-900);
      margin-bottom: var(--space-1);
    }
    .feature-card__desc {
      font-size: var(--font-size-sm);
      color: var(--color-gray-500);
      line-height: var(--line-height-relaxed);
    }

    /* ── Шаги подключения ── */
    .tv-steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-6);
    }
    .tv-step {
      background: var(--color-white);
      border: 1px solid var(--color-gray-100);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
    }
    .tv-step__num {
      width: 36px; height: 36px;
      border-radius: var(--radius-md);
      background: var(--color-brand-50);
      color: var(--color-brand-500);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-extrabold);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-4);
    }
    .tv-step__title {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      color: var(--color-gray-900);
      margin-bottom: var(--space-1);
    }
    .tv-step__desc {
      font-size: var(--font-size-sm);
      color: var(--color-gray-500);
      line-height: var(--line-height-relaxed);
    }
    .tv-step__desc a {
      color: var(--color-brand-500);
      font-weight: var(--font-weight-medium);
      text-decoration: none;
      white-space: nowrap;
    }
    @media (max-width: 768px) {
      .tv-steps-grid { grid-template-columns: 1fr; gap: var(--space-4); }
      .tv-step {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
        align-items: center;
      }
      .tv-step__num { grid-row: 1 / 3; margin-bottom: 0; }
      .tv-step__desc { grid-column: 2; }
    }

/* ── TV Plan Banner (horizontal, redesigned) ── */
.tv-plan-banner {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border: 1.5px solid var(--color-brand-100);
  border-radius: var(--radius-2xl);
  box-shadow:
    0 4px 28px rgba(10, 108, 255, 0.08),
    0 1px 4px rgba(10, 108, 255, 0.04);
  overflow: hidden;
  position: relative;
}

/* gradient left stripe */
.tv-plan-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom,
    var(--color-brand-500) 0%,
    var(--color-accent-500) 100%);
  border-radius: 2px 0 0 2px;
  z-index: 1;
}

.tv-plan-banner__left {
  padding: var(--space-7) var(--space-8) var(--space-7) calc(var(--space-8) + 4px);
  background: linear-gradient(135deg, var(--color-brand-50) 0%, var(--color-white) 100%);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 196px;
}

.tv-plan-banner__label {
  display: block;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brand-500);
  margin-bottom: var(--space-2);
}

.tv-plan-banner__price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: var(--space-1);
}

.tv-plan-banner__amount {
  font-size: clamp(40px, 4.5vw, 52px);
  font-weight: 900;
  color: var(--color-gray-900);
  line-height: 1;
  letter-spacing: -0.04em;
}

.tv-plan-banner__currency {
  font-size: var(--font-size-lg);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
}

.tv-plan-banner__note {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  font-weight: var(--font-weight-medium);
}

.tv-plan-banner__sep {
  width: 1px;
  background: var(--color-gray-100);
  margin: var(--space-6) 0;
  flex-shrink: 0;
}

.tv-plan-banner__features {
  flex: 1;
  list-style: none;
  padding: var(--space-7) var(--space-8);
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-6);
  align-content: center;
}

.tv-plan-banner__features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
}

.tv-plan-banner__features li::before {
  content: '';
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    var(--color-accent-500)
    url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5l3 3 5-5.5' stroke='%230D1320' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 10px no-repeat;
}

.tv-plan-banner__action {
  padding: var(--space-7) var(--space-8) var(--space-7) var(--space-4);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Tablet: features in 1 column ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .tv-plan-banner__features {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-6);
  }
  .tv-plan-banner__amount {
    font-size: 42px;
  }
  .tv-plan-banner__left {
    min-width: 172px;
    padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 4px);
  }
  .tv-plan-banner__action {
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-3);
  }
}

/* ── Mobile: vertical stack ── */
@media (max-width: 768px) {
  .tv-plan-banner {
    flex-direction: column;
    align-items: stretch;
  }

  /* stripe → top bar */
  .tv-plan-banner::before {
    left: 0; right: 0;
    top: 0; bottom: auto;
    width: auto;
    height: 4px;
    border-radius: 0;
    background: linear-gradient(to right,
      var(--color-brand-500) 0%,
      var(--color-accent-500) 100%);
  }

  .tv-plan-banner__left {
    padding: calc(var(--space-6) + 4px) var(--space-6) var(--space-5);
    text-align: center;
    align-items: center;
    min-width: auto;
    background: linear-gradient(180deg, var(--color-brand-50) 0%, var(--color-white) 100%);
  }

  .tv-plan-banner__amount {
    font-size: 48px;
  }

  .tv-plan-banner__sep {
    width: auto;
    height: 1px;
    margin: 0 var(--space-6);
  }

  .tv-plan-banner__features {
    padding: var(--space-5) var(--space-6);
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .tv-plan-banner__action {
    padding: var(--space-4) var(--space-6) var(--space-6);
    justify-content: center;
  }

  .tv-plan-banner__action .btn {
    width: 100%;
  }
}