/* =========================================================================
   Главная / клуб: «как снять рилс, который залетит» + «что обсудим».
   Поверх styles.css (шрифт, токены, кнопки, подвал, окно оплаты, куки).
   styles.css общий с /aistars — здесь только своё, туда не дописываем.
   ========================================================================= */

/* Фон белый, как в макете Ники. --paper (#f4f4f2) из styles.css — серый
   оттенок лендинга AI Stars, здесь он не нужен. */
.cl{--paper:#fff;background:#fff;color:var(--ink)}
.cl b{font-weight:600}

/* Синяя кнопка — как «присоединиться» в макете */
.btn--blue{background:var(--blue);border-color:var(--blue);color:var(--ink)}
.btn--blue:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
/* У лаймовой в styles.css ховер рассчитан на тёмный фон: на светлом
   белая рамка и белые буквы пропадают */
.cl .btn--lime:hover{border-color:var(--ink);color:var(--ink)}

/* ------------------------- 1 · как снять рилс ---------------------------- */
.rl{padding:clamp(56px,10vh,120px) 0 clamp(56px,8vh,100px);overflow:hidden}

.rl__head{max-width:980px}
.rl__title{
  margin:0 0 clamp(16px,2.4vh,26px);
  font-size:clamp(28px,4.4vw,64px);font-weight:600;line-height:1.05;letter-spacing:-.04em;
}
.rl__lead{max-width:34ch;font-size:clamp(16px,1.5vw,22px);line-height:1.45}

/* Низ блока по макету — одной колонкой: текст, широкая кнопка, подпись */
.rl__foot{max-width:980px}
.rl__text{max-width:52ch;font-size:clamp(16px,1.5vw,22px);line-height:1.45}
.rl__text p + p{margin-top:1.1em}
.rl__btn{margin-top:clamp(28px,5vh,48px);min-width:min(100%,520px);justify-content:space-between;text-transform:none;letter-spacing:0;font-size:clamp(15px,1.3vw,19px);font-weight:400}
.rl__claim{margin-top:clamp(20px,3vh,32px);max-width:40ch;font-size:clamp(16px,1.5vw,22px);line-height:1.4}

/* ------------------------------- вихрь ----------------------------------
   Сцена: центр — плашка «5,2 млн за 30 дней», вокруг по эллипсам плывут
   карточки, к каждой тянется нитка от центра (как в референсе).
   Позиции считает club.js. Без него — ровный коллаж сеткой. */
.vx{
  position:relative;
  /* Свой слой: z-index карточек (до 100) не должен спорить с плашкой
     cookie и окном оплаты — без изоляции карточки лезли поверх них */
  isolation:isolate;
  z-index:0;
  margin:clamp(24px,5vh,56px) 0;
  height:clamp(520px,92vh,900px);
}
.vx__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vx__lines line{stroke:rgba(2,6,14,.22);stroke-width:1}

.vx__core{
  position:absolute;left:50%;top:50%;z-index:50;margin:0;
  width:clamp(220px,26vw,400px);
  transform:translate(-50%,-50%);
  box-shadow:0 10px 40px rgba(2,6,14,.16);
}
.vx__core img{display:block;width:100%;height:auto}

.vx__list{list-style:none;margin:0;padding:0}
.vx__it{
  position:absolute;left:0;top:0;
  will-change:transform;
  box-shadow:0 6px 24px rgba(2,6,14,.14);
  background:#fff;
}
.vx__it img{display:block;width:100%;height:auto}
.vx__it--reel{width:clamp(96px,10.5vw,170px)}
.vx__it--views{width:clamp(110px,11vw,180px)}
.vx__it--com{width:clamp(180px,21vw,330px)}


/* Пока скрипт не расставил карточки — прячем, чтобы не мигнула куча в углу */
.js .vx:not(.is-on):not(.is-still) .vx__it{opacity:0}

/* Запасной вид: без JS или при «меньше движения» — коллаж потоком */
.vx.is-still,
html:not(.js) .vx{height:auto}
.vx.is-still .vx__lines,
html:not(.js) .vx__lines{display:none}
.vx.is-still .vx__core,
html:not(.js) .vx__core{position:relative;left:auto;top:auto;transform:none;margin:0 auto 24px}
.vx.is-still .vx__list,
html:not(.js) .vx__list{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;
  padding:0 var(--pad);
}
.vx.is-still .vx__it,
html:not(.js) .vx__it{position:relative;transform:none !important}

/* ------------------- 2 · что обсудим / тарифы / кто я -------------------- */
.ob{padding:clamp(56px,9vh,110px) 0 0;border-top:1px solid var(--line)}
.ob .wrap{max-width:1180px}

/* Заголовок на синей плашке — как в макете */
.ob__tag{
  display:inline-block;margin:0 0 clamp(24px,4vh,40px);
  padding:.32em .7em .36em;background:var(--blue);color:var(--ink);
  font-size:clamp(22px,2.4vw,34px);font-weight:600;line-height:1;letter-spacing:-.03em;
}
.ob__list{list-style:none;margin:0 0 clamp(44px,8vh,90px);padding:0;max-width:44ch;font-size:clamp(15px,1.3vw,20px);line-height:1.4}
.ob__list li{position:relative;padding-left:1.4em}
.ob__list li + li{margin-top:1em}
.ob__list li::before{content:"★";position:absolute;left:0;top:0}

/* Кнопки страницы прокручивают к тарифам — плавно, если человек не
   просил меньше движения; и с полем сверху, чтобы квадраты не липли к краю */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.tf{scroll-margin-top:24px}

/* Тарифы: квадраты 2×2 — карточка, фото с кнопкой, карточка, пусто */
.tf{
  display:grid;grid-template-columns:repeat(2,minmax(0,440px));gap:clamp(16px,2.4vw,32px);
  margin-bottom:clamp(64px,11vh,130px);
}
.tf__card,.tf__photo{aspect-ratio:1/1;margin:0}
.tf__card{
  display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,36px);
}
.tf__card--club{background:var(--blue);color:var(--blue-ink)}
.tf__card--lover{background:var(--graphite);color:#fff}
.tf__name{
  margin:0 0 clamp(14px,2vw,22px);
  font-size:clamp(34px,4vw,56px);font-weight:600;line-height:.95;letter-spacing:-.02em;text-transform:uppercase;
}
.tf__what{margin:0 0 .9em;font-size:clamp(12px,1vw,14px);line-height:1.35}
.tf__price{margin:auto 0 .6em;font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.02em}
.tf__note{margin:0;font-size:clamp(11px,.95vw,14px);line-height:1.35}
.tf__card--club .tf__note{color:var(--ink)}
.tf__card--club .tf__price{margin-bottom:.25em}
.tf__plus{margin:0 0 1.1em;font-size:clamp(12px,1vw,14px);font-weight:600;color:var(--ink)}
.tf__card--lover .tf__what{opacity:.85}
.tf__card--lover .tf__note{opacity:.9}

.tf__photo{position:relative;overflow:hidden}
.tf__photo img{display:block;width:100%;height:100%;object-fit:cover}
.tf__go{
  position:absolute;left:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);
  display:flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;
}
.tf__go span{
  padding:8px 12px;background:var(--lime);color:var(--ink);
  font-size:clamp(11px,.95vw,13px);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  transition:background-color .3s ease;
}
.tf__go:hover span{background:#fff}
/* Пропорции кнопки на фото — из макета: квадрат 440, кнопка 200×37,
   отступ слева ~30, снизу ~33. В единицах ширины квадрата (cqw) она
   остаётся той же долей фото на любом экране. Браузер без cqw берёт
   правила выше. */
.tf__photo{container-type:inline-size}
.tf__go{left:6.5cqw;bottom:7.5cqw;gap:2cqw}
.tf__go svg{width:4.2cqw;height:4.2cqw}
.tf__go span{
  display:flex;align-items:center;justify-content:center;
  width:45.5cqw;height:8.45cqw;padding:0;font-size:3cqw;
}
/* Продажи закрыты: плашка вместо кнопки, не реагирует на мышь */
.tf__go--soon{cursor:default;pointer-events:none}
.tf__go--soon span{background:#fff;color:var(--ink)}

/* Зачем */
.ob__why{max-width:62ch;margin-bottom:clamp(56px,9vh,110px);font-size:clamp(15px,1.3vw,20px);line-height:1.45}
.ob__why p + p{margin-top:1.1em}
.ob__h{
  margin:0 0 clamp(24px,4vh,44px);
  font-size:clamp(24px,2.8vw,40px);font-weight:600;line-height:1.05;letter-spacing:-.03em;
}

/* Кто я: розовая карточка + фото */
.who{
  display:grid;grid-template-columns:minmax(0,521fr) minmax(0,364fr);gap:clamp(16px,2.4vw,32px);
  max-width:900px;margin-bottom:clamp(28px,5vh,48px);
}
.who__card{
  padding:clamp(20px,2.6vw,34px);background:var(--pink);color:var(--ink);
  font-size:clamp(12px,1vw,14px);line-height:1.4;
}
.who__card p + p{margin-top:1.1em}
.who__h{margin:0 0 .5em;font-size:clamp(36px,4.4vw,60px);font-weight:500;line-height:1;letter-spacing:-.02em;text-transform:uppercase}
/* Сноска — строго по макету (Figma, кадр «Slide 16:9 - 7», карточка
   521×486): три полосы #B6B8C6 вплотную, по 14 в высоту, шириной 367,
   384 и 396, в каждой одна строка. Отступ слева 24, снизу 75.
   Поле карточки 24/521 = 4.606% (у элемента сетки процент поля
   считается от ширины его ячейки — то есть от самой карточки). Размеры
   сноски — в cqw, это доли ВНУТРЕННЕЙ ширины карточки: 521 − 2×24 = 473.
   Так плашка совпадает с макетом на любой ширине экрана. */
.who__card{container-type:inline-size;display:flex;flex-direction:column;padding:4.606%}
.who__aside{
  margin:auto 0 10.78cqw !important;
  font-size:1.98cqw;line-height:2.96cqw;color:var(--ink);
}
.who__aside span{display:block;width:77.59cqw;height:2.96cqw;padding-left:2.54cqw;background:#b6b8c6;white-space:nowrap}
.who__aside span:nth-child(2){width:81.18cqw}
.who__aside span:nth-child(3){width:83.72cqw}
.who__card{aspect-ratio:521/486}
.who__photo{margin:0;aspect-ratio:364/486}
.who__photo img{display:block;width:100%;height:100%;object-fit:cover}

.ob__btn{min-width:min(100%,520px);justify-content:space-between;text-transform:none;letter-spacing:0;font-size:clamp(15px,1.3vw,19px);font-weight:400}

/* ------------------------------- марка ---------------------------------- */
/* Отступы скромные: блок — подпись под кнопкой, а не отдельный экран */
.brand{padding:clamp(32px,5vh,56px) 0 clamp(28px,4vh,48px)}
.brand__row{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3.4vw,52px)}
.brand__year{padding:3px 6px;background:#c4c4c4;font-size:clamp(11px,1vw,15px);line-height:1}
.brand__mark{
  display:inline-flex;align-items:center;gap:.22em;
  font-size:clamp(40px,8.6vw,124px);font-weight:500;line-height:1;letter-spacing:-.02em;
}
.brand__wish{padding:.7em .8em;background:#b9b9b9;font-size:clamp(9px,.9vw,13px);line-height:1.05}

/* -------------------------------- телефон -------------------------------- */
@media (max-width:767px){
  /* Кнопки — доли ширины экрана из макета (кадр 1080): первая 667,
     нижняя 636. Высота макетная 80/1080, но не ниже 44 px — меньше
     пальцем не попасть. */
  .rl__btn,.ob__btn{min-width:0;min-height:max(44px,7.4vw);padding-top:0;padding-bottom:0}
  .rl__btn{width:61.8vw}
  .ob__btn{width:58.9vw}
  .ob__tag{min-width:58.5vw;min-height:max(40px,8.1vw);display:inline-flex;align-items:center}

  .vx{height:clamp(580px,180vw,760px)}
  /* На телефоне в вихре не все карточки: на узком экране двадцать
     штук превращаются в кашу */
  .vx [data-m="0"]{display:none}
  .vx__core{width:58vw}
  .vx__it--reel{width:23vw}
  .vx__it--views{width:28vw}
  .vx__it--com{width:56vw}

  /* Тарифы на телефоне — строго квадраты, но по одному в ряд: в паре
     квадрат выходит 160 px, и текст тарифа влезает только кеглем 6–7 px.
     Порядок макета сохранён: карточка, её фото, карточка, её фото.
     Шире 480 px квадрат не растёт и стоит по центру. Размеры текста
     в vw — растут вместе с квадратом. */
  .tf{grid-template-columns:minmax(0,480px);justify-content:center;gap:14px}
  .tf__card{aspect-ratio:1/1;padding:min(6vw,29px)}
  .tf__name{font-size:min(11vw,53px);margin-bottom:min(4vw,19px)}
  .tf__what,.tf__plus{font-size:min(3.4vw,16px)}
  .tf__price{font-size:min(6vw,29px);white-space:nowrap}
  .tf__note{font-size:min(3.2vw,15px)}
  .who{grid-template-columns:1fr}
  /* Марка в одну строку и на телефоне — подписи по бокам, как в макете */
  .brand__row{gap:3vw}
  .brand__mark{font-size:9.6vw}
  .brand__year{font-size:2.6vw;padding:2px 3px}
  .brand__wish{font-size:2vw;padding:.6em .7em}

  /* «Кто я» — квадрат во всю ширину экрана, как фото под ним. Размеры
     в vw: квадрат растёт с экраном — и текст вместе с ним, иначе на
     широком телефоне в середине остаётся пустое розовое поле */
  .who__card{aspect-ratio:1/1;padding:5vw;font-size:3.1vw;line-height:1.35;display:flex;flex-direction:column}
  .who__card p + p{margin-top:.8em}
  .who__h{font-size:9.5vw;margin-bottom:.35em}
  /* На телефоне в пропорциях макета текст сноски вышел бы 6 px.
     Ступенька та же — ширины в том же соотношении 367:384:396, —
     но полосы шире и выше, чтобы текст читался */
  .who__aside{margin:auto 0 0 !important;font-size:3.2cqw;line-height:4.5cqw}
  .who__aside span{width:88cqw;height:4.5cqw;padding-left:2.6cqw}
  .who__aside span:nth-child(2){width:92.1cqw}
  .who__aside span:nth-child(3){width:95cqw}
}