.site-header { background: #fff; }
.site-header__inner { display: flex; align-items: center; gap: 32px; min-height: 88px; padding-block: 24px 20px; }
.site-header__logo { margin-right: auto; }
.site-header__logo img { display: block; width: 256px; height: 44px; object-fit: contain; }
.site-header__city { color: var(--color-secondary); }
.site-header__actions { display: flex; align-items: center; gap: 8px; }
.hero, .address-check { position: relative; isolation: isolate; overflow: hidden; background: #a6b9e9 url('../../images/landing/background.png') center / cover no-repeat; box-shadow: 0 4px 16px #0000000d; }
.hero__inner { position: relative; padding-block: 80px; }
.hero__title { position: relative; z-index: 1; max-width: 699px; margin-bottom: 60px; color: #fff; font-size: 40px; font-weight: 500; line-height: 44px; }
.hero__image { position: absolute; z-index: -1; right: -150px; bottom: -76px; width: 529px; height: 466px; max-width: none; object-fit: contain; object-position: center bottom; }
.family-tariffs { margin-top: 56px; }
.family-tariffs .section-title { margin-bottom: 32px; }
.family-tariffs__carousel { position: relative; }
.family-tariffs__list { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 6px 16px; margin-inline: -6px; }
.family-tariffs__list::-webkit-scrollbar { display: none; }
.family-tariffs__arrow { position: absolute; z-index: 2; top: 50%; right: -52px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: #f2f3f7; box-shadow: 0 2px 6px #00000014; }
.family-tariffs__arrow img { transform: rotate(-90deg); }
.family-tariffs__arrow--prev { left: -52px; right: auto; }
.family-tariffs__arrow--prev img { transform: rotate(90deg); }
.family-tariffs__arrow:disabled { opacity: .35; cursor: default; }
.family-tariffs__dots { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.family-tariffs__dot { width: 32px; height: 12px; padding: 0; background: transparent; }
.family-tariffs__dot::before { display: block; width: 100%; height: 4px; border-radius: 2px; background: #e2e5eb; content: ''; }
.family-tariffs__dot[aria-current="true"]::before { background: var(--color-primary); }
.tariff-card { display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; filter: drop-shadow(0 4px 8px #00000014) drop-shadow(0 0 8px #0000000d); }
.tariff-card__image { width: 100%; height: 158px; border-radius: 20px 20px 0 0; object-fit: cover; }
.tariff-card__body { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 386px; margin-top: -20px; padding: 20px 16px; border-radius: 20px; background: #fff; }
.tariff-card__title { font-size: 20px; line-height: 24px; font-weight: 700; }
.tariff-card__description { min-height: 36px; margin-top: 8px; color: var(--color-secondary); font-size: 14px; line-height: 18px; }
.tariff-card__features { display: flex; flex-direction: column; gap: 16px; margin-block: 20px; }
.tariff-card__label { display: block; margin-bottom: 4px; color: var(--color-secondary); font-size: 14px; line-height: 18px; }
.tariff-card__features p { font-weight: 500; }
.tariff-card__features .tariff-card__extra { font-size: 12px; font-weight: 400; }
.tariff-card__footer { margin-top: auto; }
.tariff-card__price { font-size: 20px; line-height: 24px; font-weight: 700; }
.tariff-card__price > span { font-size: 16px; }
.tariff-card__price s { margin-left: 16px; color: var(--color-secondary); font-size: 14px; line-height: 20px; font-weight: 400; }
.tariff-card__discount { margin-top: 8px; font-size: 12px; line-height: 16px; }
.tariff-card__footer .button { width: 100%; margin-top: 12px; }
.advantages-section { margin-block: 56px; }
.advantages, .connection-steps .mts-container { display: grid; grid-template-columns: 389px minmax(0, 1fr); gap: 24px; }
.advantages__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.advantages__item { position: relative; min-height: 132px; padding: 32px 24px; overflow: hidden; border-radius: 20px; background: linear-gradient(145deg, #eeedf3 8%, #d5d6eb 88%); box-shadow: 0 4px 16px #0000000d; }
.advantages__body { display: block; max-width: calc(100% - 120px); }
.advantages__item-title { display: block; margin-bottom: 8px; font-size: 20px; line-height: 24px; font-weight: 500; }
.advantages__item-text { display: block; font-size: 16px; line-height: 20px; }
.advantages__icon { position: absolute; right: 24px; top: 50%; width: 100px; height: 100px; transform: translateY(-50%); }
.advantages__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.advantages__item:last-child { color: #fff; background: linear-gradient(110deg, #be0053, #ff0032); }
.services-addons { padding-block: 60px; background: var(--color-surface); }
.services-addons > .mts-container { display: grid; grid-template-columns: 389px minmax(0, 1fr); gap: 24px; }
.services-addons__intro p { margin-top: 16px; font-size: 16px; line-height: 20px; }
.connection-steps { margin-block: 56px; }
.connection-steps__grid { display: flex; flex-direction: column; gap: 16px; }
.StepItem { display: flex; gap: 16px; align-items: flex-start; }
.StepItem__num { display: grid; flex: 0 0 28px; place-items: center; height: 28px; border-radius: 50%; background: var(--color-surface); font-weight: 500; }
.StepItem__body { display: flex; flex-direction: column; gap: 4px; }
.StepItem__title { font-size: 16px; line-height: 20px; font-weight: 500; }
.StepItem__text { font-size: 16px; line-height: 20px; }
.address-check__inner { position: relative; padding-block: 60px; }
.address-check__title { position: relative; z-index: 1; max-width: 699px; margin-bottom: 32px; color: #fff; font-size: 24px; line-height: 28px; font-weight: 500; }
.address-check__image { position: absolute; z-index: -1; top: 50%; right: -108px; width: 368px; height: 368px; transform: translateY(-50%); object-fit: contain; }
.faq-section { padding-block: 56px 80px; }
.faq-section > .mts-container { display: grid; grid-template-columns: 389px minmax(0, 1fr); gap: 24px; }
.faq .mts-section__title { margin-bottom: 12px; }
.footer-contacts { max-width: 300px; }
.footer-contacts__logo img { width: 160px; height: auto; }
.footer-contacts__description { margin-block: 16px 12px; font-size: 14px; line-height: 18px; }
.footer-contacts .button { min-height: 32px; padding: 8px 12px; font-size: 12px; }
.footer-contacts__details { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 48px; font-size: 14px; line-height: 18px; }
.footer-contacts__details span { color: var(--color-secondary); }
.footer-contacts__details span:not(:first-child) { margin-top: 12px; }
.footer-contacts__details a { text-decoration: none; }
.footer-contacts__policy { display: inline-block; margin-top: 16px; color: var(--color-secondary); font-size: 12px; }
.status-page { min-height: calc(100dvh - 88px); padding: 48px 16px 80px; background: var(--color-surface); text-align: center; }
.status-page__image { display: block; width: 252px; height: 222px; margin: 0 auto 24px; object-fit: cover; }
.status-page__image--404 { width: 351px; height: 220px; margin: 0 auto 40px; object-position: center 44%; }
.status-page--thanks { padding-top: 72px; }
.status-page__title { margin-bottom: 8px; font-size: 24px; line-height: 28px; font-weight: 500; }
.status-page__text { max-width: 620px; margin-inline: auto; font-size: 16px; line-height: 20px; }
.status-page--thanks .status-page__text { max-width: 400px; }
.status-page .button { margin-top: 24px; }
.LegalPage { width: min(900px, calc(100% - 32px)); margin: 48px auto 80px; font-size: 16px; line-height: 1.5; }
.LegalPage__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; text-decoration: none; }
.LegalPage__title { margin-bottom: 32px; font: 500 32px/1.2 'MTS Wide', Arial, sans-serif; }
.LegalPage__subtitle { margin: 24px 0 16px; font-size: 24px; }
.LegalPage__list { padding-left: 20px; }
.LegalPage__item { margin-bottom: 12px; }
.showcase { padding-block: 40px 80px; }
.showcase__intro { max-width: 780px; margin-block: 16px 40px; line-height: 1.5; }
.showcase__section { margin-top: 48px; }
.showcase__section > h2 { margin-bottom: 24px; }
.showcase__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.showcase__example { width: 284px; }
.showcase__label { margin-bottom: 12px; color: var(--color-secondary); font-size: 14px; line-height: 18px; }
.showcase__suggestions { position: static; display: block; margin-top: 4px; }
.showcase__panel { width: 100%; padding: 32px; border-radius: 20px; background: var(--color-surface); }
.showcase__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1350px) {
    .family-tariffs__arrow { right: -16px; }
    .family-tariffs__arrow--prev { left: -16px; right: auto; }
}
@media (min-width: 768px) and (max-width: 1100px) {
    .advantages, .connection-steps .mts-container, .services-addons > .mts-container, .faq-section > .mts-container { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.8fr); }
    .hero__image { right: -250px; opacity: .6; }
    .address-check__image { right: -230px; opacity: .6; }
    .hero .connection-form, .address-check .connection-form { max-width: 75%; }
    .family-tariffs__list { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
    .site-header__inner { display: grid; grid-template-columns: 1fr auto; gap: 12px; min-height: 101px; padding-block: 16px 12px; }
    .site-header__logo img { width: 120px; height: 21px; }
    .site-header__city { font-size: 14px; line-height: 18px; }
    .site-header__city img { width: 16px; height: 16px; flex-basis: 16px; }
    .site-header__actions { grid-column: 1 / -1; flex-direction: row-reverse; justify-content: flex-end; }
    .site-header__simple, .site-header--simple .site-header__inner { min-height: 72px; }
    .site-header--simple .site-header__inner { grid-template-columns: minmax(0, 1fr) auto 40px; gap: 20px; padding-block: 16px; }
    .site-header--simple .site-header__actions { grid-column: auto; }
    .hero__inner { padding-block: 48px 32px; }
    .hero__title { margin-bottom: 20px; max-width: 328px; font: 500 24px/28px 'MTS Wide', Arial, sans-serif; }
    .hero__image { right: -32px; bottom: -34px; width: 236px; height: 208px; opacity: .6; }
    .hero { background-position: 65% center; }
    .family-tariffs { margin-top: 40px; }
    .family-tariffs .section-title { margin-bottom: 20px; }
    .family-tariffs__list { display: flex; flex-direction: column; gap: 12px; overflow: visible; padding: 0; margin: 0; }
    .family-tariffs__arrow, .family-tariffs__dots { display: none; }
    .tariff-card__image { height: auto; aspect-ratio: 328 / 133; }
    .tariff-card__body { min-height: 386px; }
    .advantages-section { margin-block: 40px; }
    .advantages, .connection-steps .mts-container, .services-addons > .mts-container, .faq-section > .mts-container { display: flex; flex-direction: column; gap: 20px; }
    .advantages__item { min-height: 122px; padding: 20px 16px; }
    .advantages__body { max-width: calc(100% - 64px); }
    .advantages__item-title { margin-bottom: 8px; font-size: 16px; line-height: 20px; }
    .advantages__item-text { font-size: 14px; line-height: 18px; }
    .advantages__icon { right: 12px; width: 80px; height: 80px; }
    .advantages__item:last-child .advantages__icon { width: 64px; height: 64px; right: 16px; }
    .services-addons { padding-block: 24px 32px; }
    .services-addons__intro p { margin-top: 8px; font-size: 14px; line-height: 17px; }
    .services-addons__grid { width: 100%; }
    .connection-steps { margin-block: 40px; }
    .connection-steps__grid { gap: 16px; }
    .StepItem { gap: 12px; }
    .StepItem__num { flex-basis: 24px; height: 24px; font-size: 14px; }
    .StepItem__title, .StepItem__text { font-size: 14px; line-height: 18px; }
    .address-check__inner { padding-block: 24px 32px; }
    .address-check__title { max-width: 236px; margin-bottom: 24px; font-size: 16px; line-height: 20px; }
    .address-check__image { top: 10px; right: -4px; width: 120px; height: 120px; transform: none; }
    .faq-section { padding-block: 40px 0; }
    .faq-section > .mts-container { gap: 32px; }
    .faq { order: 1; width: 100%; }
    .footer-contacts { order: 2; max-width: none; width: calc(100% + 32px); margin-inline: -16px; padding: 36px 16px 40px; background: var(--color-surface); }
    .footer-contacts__details { margin-top: 24px; }
    .status-page { min-height: calc(100dvh - 72px); padding-top: 64px; }
    .status-page__image { width: 158px; height: 140px; }
    .status-page__image--404 { width: 261px; max-width: 100%; height: 164px; margin: 0 auto 56px; }
    .status-page__title { font-size: 20px; line-height: 24px; }
    .status-page__text { max-width: 328px; font-size: 14px; line-height: 18px; }
    .status-page--thanks { padding-top: 100px; }
    .status-page--thanks .status-page__image { margin: 0 auto 24px; }
    .LegalPage__title { font-size: 24px; }
    .showcase__cards { grid-template-columns: 1fr; }
    .showcase__panel { padding: 20px 16px; }
    .showcase__example { width: 100%; max-width: 328px; }
}