/* ==========================================================================
   АДАПТИВ
   Базовый styles.css — точная вёрстка под десктоп 1440 (Figma, только
   десктоп-фрейм). Этот файл переопределяет её для более узких экранов.

   ≥1440       — как в макете, без изменений.
   1024–1439   — тот же дизайн, масштабированный под ширину окна (zoom),
                 без перестройки разметки: на "маленьком десктопе"/ноутбуке
                 сайт должен выглядеть как в макете, просто чуть мельче.
   ≤1023       — полноценная адаптивная перевёрстка в обычном потоке
                 (без absolute-координат из Figma): бургер-меню, стек
                 секций в 1–2 колонки, сравнение платформ как карточки.
   ========================================================================== */

/* бургер и мобильное меню скрыты на десктопе всегда */
.burger{display:none}
.mobile-nav{display:none}

/* --------------------------------------------------------------------------
   1024–1439: масштабирование десктоп-версии под ширину вьюпорта
   -------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1439.98px){
  html{overflow-x:hidden}
  .page-viewport{width:100%; overflow:hidden}
  .page{
    zoom:calc(100vw / 1440px);
  }
}

/* ==========================================================================
   ≤1023px — адаптивная перевёрстка
   ========================================================================== */
@media (max-width:1023px){

  html{overflow-x:hidden}
  body{overflow-x:hidden}

  .page-viewport{width:100%}
  .page{
    width:100%;
    max-width:100%;
  }

  /* ---------- бургер-меню ---------- */
  .header{
    position:relative;
    height:auto;
    padding:16px 20px;
  }
  .nav,
  .header__cta{display:none}

  .burger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:40px; height:40px;
    margin-left:auto;
    padding:0;
    border:0;
    background:rgba(52,47,45,.05);
    border-radius:10px;
    cursor:pointer;
  }
  .burger span{
    display:block;
    width:18px; height:2px;
    border-radius:2px;
    background:var(--ink);
    transition:transform .25s ease, opacity .2s ease;
  }
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .mobile-nav{
    display:grid;
    grid-template-rows:0fr;
    overflow:hidden;
    transition:grid-template-rows .3s ease;
    padding:0 20px;
  }
  .mobile-nav__inner{min-height:0; overflow:hidden}
  .mobile-nav--open{grid-template-rows:1fr}
  .mobile-nav__list{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding-top:8px;
  }
  .mobile-nav__list a{
    padding:12px 4px;
    font-family:'Gilroy',sans-serif;
    font-weight:600;
    font-size:16px;
    color:var(--ink);
    border-bottom:1px solid rgba(52,47,45,.08);
  }
  .mobile-nav__cta{
    display:flex;
    width:100%;
    height:48px;
    margin:16px 0 20px;
  }

  /* ---------- герой ---------- */
  .hero{
    width:auto;
    height:auto;
    margin:0 16px;
    padding:40px 20px 32px;
    border-radius:32px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    overflow:hidden;
  }

  /* сложный десктопный заголовок (обводка по буквам, точные px-координаты)
     не переводится во flow-раскладку — на мобильном показываем обычный
     читаемый заголовок тем же текстом (он уже есть для доступности) */
  .hero__title{
    position:static;
    flex-shrink:0;
    width:100%;
    height:auto;
    font-size:0; /* прячем «фейковые» ht-спаны */
    line-height:0;
    white-space:normal;
  }
  .hero__title .ht,
  .hero__title .ht--o{display:none}
  .hero__title .visually-hidden{
    position:static;
    width:auto; height:auto;
    padding:0; margin:0;
    overflow:visible;
    clip:auto;
    white-space:normal;
    display:block;
    font-family:'Druk Cyr',sans-serif;
    font-weight:700;
    font-size:clamp(32px, 9vw, 48px);
    line-height:1.15;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:#fff;
  }

  .hero__photo{display:none}
  .hero__photo--1,
  .hero__photo--2{
    display:block;
    position:absolute;
    z-index:1;
    opacity:.5;
  }
  .hero__photo--1{left:-40px; top:-30px; width:100px; height:94px}
  .hero__photo--2{right:-40px; bottom:-30px; width:110px; height:118px}

  .hero__about{
    position:relative;
    left:auto; top:auto;
    flex-shrink:0;
    width:100%;
    height:auto;
    max-width:360px;
    margin:24px 0 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    z-index:2;
  }
  .hero__about-icon{
    position:static;
    flex-shrink:0;
    width:56px; height:56px;
    margin-bottom:12px;
  }
  .hero__about-name{position:static; flex-shrink:0; width:auto; margin-bottom:8px}
  .hero__about-text{
    position:static;
    flex-shrink:0;
    display:block;
    width:auto;
    height:auto;
    text-align:center;
  }

  .hero__actions{
    position:relative;
    left:auto; top:auto;
    flex-shrink:0;
    width:100%;
    max-width:360px;
    margin:24px 0 0;
    flex-direction:column;
    gap:10px;
    z-index:2;
  }
  .hero__actions .btn{width:100%}

  /* ---------- «Как это работает» ---------- */
  .how{width:auto; margin:64px 16px 0}
  .section-title{font-size:28px; line-height:1.25; height:auto; padding:0 8px}
  .how__cards{flex-direction:column; margin-top:24px; gap:16px}
  .card{width:100%; height:auto; padding-bottom:24px}
  .card__ghost,
  .card__glow{display:none}
  .card__head{position:static; width:auto; padding:28px 24px 0}
  .card--orange .card__head,
  .card--blue .card__head{width:auto}
  .steps__text--w212,
  .steps__text--w223,
  .steps__text--w299,
  .steps__text--w418{width:auto; max-width:100%}
  .steps__item,
  .steps__item--tall{height:auto; min-height:40px}
  .card__shot{
    position:static;
    display:block;
    width:calc(100% - 48px);
    height:auto;
    aspect-ratio:auto;
    margin:24px auto 0;
    transform:none;
    border-radius:20px;
    object-fit:cover;
  }
  .card__shot--a{aspect-ratio:555.28/442.82}
  .card__shot--b{aspect-ratio:546.78/359.8}

  /* ---------- «Преимущества» ---------- */
  .benefits{width:auto; margin:64px 16px 0}
  .benefits__title{font-size:28px; line-height:1.25; height:auto; padding:0 8px}

  .bento{
    height:auto;
    margin-top:24px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .bento__card{
    position:relative;
    left:auto !important; top:auto !important;
    width:auto; height:auto;
    padding:28px 108px 32px 24px;
    overflow:hidden;
  }

  .art{display:none}
  .bento__card--money .art--money-2,
  .bento__card--formats .art--formats-2,
  .bento__card--analytics .art--analytics-4,
  .bento__card--direct .art--direct-1,
  .bento__card--safety .art--safety-2{
    display:block;
    position:absolute;
    right:-16px; bottom:-16px;
    left:auto; top:auto;
    width:96px; height:96px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    transform:none;
    filter:none;
    opacity:.9;
  }
  .bento__card--direct .art--direct-1{background-size:contain; background-position:center}

  .bento__title,
  .bento__text{
    position:static;
    left:auto !important; top:auto !important;
    width:auto !important;
    height:auto !important;
    transform:none !important;
  }
  .bento__text{margin-top:8px}

  .chips{
    position:static;
    width:auto;
    margin-top:16px;
    flex-direction:row;
    flex-wrap:wrap;
  }
  .chips--formats{width:auto}
  .chips__row{flex-wrap:wrap}
  .bento__card--money .chip:nth-child(1),
  .bento__card--money .chip:nth-child(2),
  .bento__card--money .chip:nth-child(3),
  .chips__row .chip:nth-child(1),
  .chips__row .chip:nth-child(2),
  .chips--formats > .chip:nth-child(2),
  .chips--formats > .chip:nth-child(3){width:auto}

  /* ---------- «Кому подходит» ---------- */
  .who{width:auto; margin:64px 16px 0}
  .who__title{font-size:28px; line-height:1.25; height:auto; padding:0 8px}
  .who__list{
    width:auto;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
  }
  .who__card,
  .who__card--art, .who__card--music, .who__card--podcast,
  .who__card--writer, .who__card--video, .who__card--gamedev, .who__card--school{
    width:auto !important;
    height:auto !important;
    padding:20px !important;
  }
  .who__card--art .who__text,
  .who__card--music .who__text,
  .who__card--podcast .who__text,
  .who__card--writer .who__text,
  .who__card--video .who__text,
  .who__card--gamedev .who__text,
  .who__card--school .who__text{width:auto !important; height:auto !important}

  /* ---------- «Сравнение с другими платформами» ----------
     Табличная раскладка на absolute-координатах не переводится во flow —
     на мобильном каждая строка становится карточкой со своими полями. */
  .compare{width:auto; margin:64px 16px 0}
  .section-title--tight{font-size:28px; line-height:1.25; height:auto; padding:0 8px}

  .cmp{margin-top:24px}
  .cmp__head{display:none}
  .cmp__rows{
    height:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .cmp__row{
    position:relative;
    top:auto !important;
    width:auto; height:auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:20px;
    gap:12px;
  }

  .cmp__logo{position:static}
  .cmp__logo--flame{left:auto; top:auto}
  .cmp__logo--img{
    left:auto !important; top:auto !important;
    width:auto !important; height:32px !important;
    max-width:140px;
    object-fit:contain; object-position:left center;
  }

  .cmp__tags{
    position:static; left:auto; top:auto;
    height:auto !important;
    flex-wrap:wrap;
  }

  .cmp__text{
    display:block;
    position:static;
    left:auto !important; top:auto !important;
    width:auto !important; height:auto !important;
  }
  .cmp__text::before{
    content:attr(data-label);
    display:block;
    font-family:'Gilroy',sans-serif;
    font-weight:600;
    font-size:12px;
    color:var(--ink);
    opacity:.4;
    margin-bottom:2px;
  }

  /* ---------- «Истории успеха» ---------- */
  .reviews{width:auto; margin:64px 0 0}
  .section-title--tight{padding:0 24px}
  .reviews__wrap{height:auto; padding:0 16px}
  .reviews__track{
    height:auto;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    margin:0 -16px;
    padding-left:16px;
    padding-right:16px;
  }
  .review{
    flex:0 0 auto;
    width:86%;
    max-width:360px;
    height:auto;
    scroll-snap-align:center;
  }
  .review__text,
  .review__divider,
  .review__author{width:auto}
  .reviews__arrow{display:none}

  /* ---------- FAQ ---------- */
  .faq{width:auto; margin:64px 16px 0}
  .faq__list{width:auto}
  .faq__row{padding:20px}
  .faq__content{width:auto}
  .faq__q{width:auto; height:auto; font-size:18px; line-height:1.3}
  .faq__answer{width:auto}
  .faq__answer > div{font-size:15px; line-height:1.4}
  .faq__toggle{width:40px; height:40px}

  /* ---------- футер ---------- */
  .footer{
    width:auto; height:auto;
    margin:64px 16px 24px;
    padding:32px 24px;
    display:flex;
    flex-direction:column;
    gap:28px;
  }
  .footer__logo,
  .footer__desc,
  .footer__copy,
  .footer__col,
  .footer__actions,
  .footer__socials{
    position:static;
    left:auto !important; top:auto !important;
    width:auto !important; height:auto !important;
  }
  .footer__col{gap:12px}
  .footer__actions{flex-direction:column; gap:10px}
  .footer__actions .btn{width:100%}
  .footer__socials{order:5}
  .footer__copy{order:6}
}