/* Главная страница v2. */

/* ---------- Первый экран ---------- */

.home-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 889px;
    /* Зона колец видео (до 65 % кадра) + 16 px: длинный заголовок не заползает на них,
       а вытягивает первый экран вниз */
    padding-top: 556px;
    overflow: hidden;
}

/* Видео в пропорциях 16:9 с размером от высоты первого экрана, как в макете:
   1748×983 (x=-192) на 1440, 1252×704 (x=-262, y=68) на 768, 693×390 (x=-159, y=126) на 375.
   Высота задана в px, а не в vw: первый экран фиксированной высоты, и при масштабировании
   по ширине кольца наезжали бы на текст. Кольца занимают 25–60 % кадра, края кадра чёрные,
   поэтому видео может быть и уже экрана — края дополнительно растушёваны. */
.home-hero__media {
    position: absolute;
    top: -100px;
    left: 50%;
    width: auto;
    max-width: none;
    height: 983px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000;
    transform: translateX(calc(-50% - 38px));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    pointer-events: none;
}

.home-hero__content {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding-bottom: 80px;
}

.home-hero__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1028px;
}

.home-hero__title {
    max-width: 1028px;
    font-size: 80px;
    letter-spacing: -0.02em;
}

.home-hero__lead {
    max-width: 745px;
}

.home-hero .v2-btn {
    flex: none;
}

@media (max-width: 1199px) {
    .home-hero { min-height: 900px; padding-top: 546px; }
    .home-hero__media { top: 68px; height: 704px; transform: translateX(calc(-50% - 20px)); }
    .home-hero__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding-inline: 32px;
        padding-bottom: 32px;
    }
    .home-hero__text { gap: 12px; }
    .home-hero__title { font-size: 44px; }
    .home-hero .v2-btn {
        min-height: 48px;
        padding: 12px 18px 12px 24px;
        gap: 8px;
        font-size: 18px;
        line-height: 21px;
    }

    .home-hero .v2-btn .v2-icon { width: 24px; height: 24px; }
}

@media (max-width: 767px) {
    .home-hero { min-height: 702px; padding-top: 396px; }
    .home-hero__media { top: 126px; height: 390px; transform: translateX(-50%); }
    .home-hero__content { gap: 24px; padding-inline: 16px; padding-bottom: 16px; }
    .home-hero__title { font-size: 32px; }
    .home-hero .v2-btn {
        min-height: 40px;
        padding: 8px 12px 8px 16px;
        gap: 4px;
        font-size: 14px;
        line-height: 16.8px;
    }

    .home-hero .v2-btn .v2-icon { width: 24px; height: 24px; }
}

/* ---------- Этот сервис для вас, если ---------- */

.home-pains {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-pains li {
    display: flex;
    gap: 28px;
    padding: 28px;
    border-top: 1px solid var(--v2-line-strong);
    font-weight: 600;
    font-size: 24px;
    line-height: 28.8px;
    color: var(--v2-text-secondary);
    justify-content: space-between;
}

.home-pains li:last-child {
    border-bottom: 1px solid var(--v2-line-strong);
}

.home-pains span {
    flex: none;
    color: var(--v2-text);
    unicode-bidi: isolate;
}

/* RTL: номер справа, текст сразу за ним (а не прижат к левому краю) */
[dir="rtl"] .home-pains li {
    justify-content: flex-start;
}

@media (max-width: 767px) {
    .home-pains li {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        font-size: 18px;
        line-height: 21.6px;
    }
}

/* ---------- Платформа в действии ---------- */

.home-action__head {
    display: grid;
    grid-template-columns: minmax(0, 634fr) minmax(0, 630fr);
    column-gap: 16px;
    row-gap: 32px;
    align-items: start;
}

.home-action__title {
    grid-column: 1;
    grid-row: 1;
}

.home-action__text {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.home-action__btn {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
}

.home-action__media {
    background: #C4C4C4;
}

.home-action__media img {
    width: 100%;
    height: auto;
    max-height: 664px;
}

@media (max-width: 1199px) {
    .home-action__head { grid-template-columns: 1fr; row-gap: 12px; }
    .home-action__title,
    .home-action__text,
    .home-action__btn { grid-column: 1; grid-row: auto; }
    .home-action__btn { margin-top: 20px; }
}

/* ---------- До и после ---------- */

.home-ba {
    /* Переход как в прототипе Figma: по клику Smart Animate с пружиной «Slow»
       (масса 1, жёсткость 80, демпфирование 20) — 1.667 с, без отскока.
       Кривая пружины разложена в linear(); для старых браузеров — близкая cubic-bezier */
    --ba-duration: 1.667s;
    --ba-easing: cubic-bezier(0.16, 1, 0.3, 1);
    /* Доли ширины карточек: активная 853, неактивная 407 из 1280 (макет). Их же читает site.js */
    --ba-grow-active: 853;
    --ba-grow-idle: 407;

    display: flex;
    gap: 20px;
}

.v2-section--home-ba .v2-section__head{
    margin-bottom: 60px;
}

@supports (transition-timing-function: linear(0, 1)) {
    .home-ba {
        --ba-easing: linear(0, 0.053, 0.1643, 0.2905, 0.4115, 0.5189, 0.6104, 0.6864, 0.7487, 0.7992, 0.8398, 0.8724, 0.8985, 0.9192, 0.9358, 0.949, 0.9595, 0.9678, 0.9744, 0.9797, 0.9839, 0.9872, 0.9898, 0.9919, 0.9936, 0.9949, 0.9959, 0.9968, 0.9974, 0.998, 0.9984, 0.9987, 0.999, 0.9992, 0.9994, 0.9995, 0.9996, 0.9997, 0.9997, 0.9998, 1);
    }
}

/* Активная карточка в макете занимает 853 из 1280, неактивная — 407 */
.home-ba__card {
    display: flex;
    flex: var(--ba-grow-idle) 1 0;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    transition: flex-grow var(--ba-duration) var(--ba-easing);
}

.home-ba__card.is-active {
    flex-grow: var(--ba-grow-active);
    cursor: default;
}

.home-ba__card:focus-visible {
    outline: 2px solid var(--v2-lime);
    outline-offset: 6px;
}

.home-ba__media {
    overflow: hidden;
    background: #C4C4C4;
}

.home-ba__media img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: height var(--ba-duration) var(--ba-easing);
}

.home-ba__card.is-active .home-ba__media img {
    height: 540px;
}

.home-ba__text h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-weight: 600;
    font-size: 24px;
    line-height: 28.8px;
}

.home-ba__badge {
    flex: none;
    padding: 6px 12px;
    background: #000;
    font-weight: 500;
    font-size: 14px;
    line-height: 16.8px;
    letter-spacing: -0.03em;
    color: var(--v2-lime);
}

@media (prefers-reduced-motion: reduce) {
    .home-ba__card,
    .home-ba__media img {
        transition: none;
    }
}

/* Текст при переключении: гаснет с размытием за 0.15 с, проявляется за 0.4 с (порядок — в site.js) */
.home-ba__text {
    transition: opacity .4s ease-out, filter .4s ease-out;
}

.home-ba__card.is-text-hidden .home-ba__text {
    opacity: 0;
    filter: blur(8px);
    transition-duration: .15s;
    transition-timing-function: ease-in;
}

/* На время замера высоты (site.js) переходы выключены, чтобы состояния применялись мгновенно */
.home-ba.is-measuring .home-ba__card,
.home-ba.is-measuring .home-ba__media img {
    transition: none !important;
}

.home-ba__text p {
    margin: 0;
    font-size: 18px;
    line-height: 21.6px;
    color: var(--v2-text-muted);
}

@media (max-width: 1199px) {
    .home-ba { flex-direction: column; gap: 20px; }
    .home-ba__card { gap: 20px; }
    .home-ba__media img,
    .home-ba__card.is-active .home-ba__media img { height: 340px; }
}

@media (max-width: 767px) {
    .home-ba { gap: 16px; }
    .home-ba__card { gap: 16px; }
    .home-ba__media img,
    .home-ba__card.is-active .home-ba__media img { height: 200px; }
    .home-ba__text h3 { margin-bottom: 12px; font-size: 18px; line-height: 21.6px; }
    .home-ba__text p { font-size: 14px; line-height: 16.8px; }
}

/* ---------- Возможности платформы ---------- */

/* Размеры и отступы — из макета (Block 11): десктоп / планшет / мобильный */

.home-features {
    padding-top: 60px;
}

.home-features__grid {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.home-features__aside {
    position: sticky;
    top: 180px;
    flex: none;
    width: 630px;
    padding-top: 24px;
}

.home-features__frame {
    position: relative;
}

.home-features__photo {
    position: relative;
    aspect-ratio: 628 / 400;
    overflow: hidden;
    background: #C4C4C4;
}

.home-features__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
    opacity: 0;
    transition: opacity .35s ease;
}

.home-features__photo img.is-active {
    opacity: 1;
}

.home-features__content {
    flex: 1;
    min-width: 0;
    padding-top: 24px;
}

/* В макете список начинается на уровне нижнего края снимка: заголовок с описанием стоят
   рядом со снимком, первая возможность — под ним (от верха заголовка до списка 398 px) */
.home-features__head {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 398px;
}

.home-features__head .v2-text {
    max-width: 580px;
}

.home-features__list {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.home-feature__photo {
    display: none;
    background: #C4C4C4;
}

/* В макете рамка снимка в тех же пропорциях, что и на десктопе: 343×218 ≈ 628:400 */
.home-feature__photo {
    aspect-ratio: 628 / 400;
    overflow: hidden;
}

.home-feature__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}

/* Иконка → заголовок 12, остальные элементы 24 */
.home-feature__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.home-feature__body > .v2-icon {
    margin-bottom: -12px;
}

.home-feature__body h3 {
    max-width: 345px;
    margin: 0;
    font-weight: 600;
    font-size: 24px;
    line-height: 28.8px;
    color: var(--v2-light-text);
}

.home-feature__text {
    max-width: 561px;
    margin: 0;
    font-size: 18px;
    line-height: 21.6px;
    color: var(--v2-light-text-secondary);
}

/* Два абзаца подряд — шаг 12 */
.home-feature__text + .home-feature__text {
    margin-top: -12px;
}

/* Маркер — иконка Priority/24 из макета (dash.svg: черта 14×1.7 в квадрате 24×24), до текста 8 px; текст #808080.
   Шаг строк: 12 для двух длинных пунктов, 8 для трёх коротких (как в макете) */
.home-feature__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 593px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 21.6px;
    color: var(--v2-text-muted);
}

.home-feature__list:has(> li:nth-child(3)) {
    gap: 8px;
}

.home-feature__list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-feature__list li > .v2-icon {
    flex: none;
}

/* Список с заголовками: черта на уровне первой строки, заголовок #444, между ними 4 px */
.home-feature__list--points,
.home-feature__list--points:has(> li:nth-child(3)) {
    gap: 12px;
}

.home-feature__list--points li {
    align-items: flex-start;
}

.home-feature__list--points li > .v2-icon {
    margin-top: -1px;
}

.home-feature__list--points li > span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-feature__list--points strong {
    font-weight: 600;
    color: var(--v2-light-text-secondary);
}

@media (max-width: 1199px) {
    .home-features { padding-top: 20px; padding-bottom: 40px; }
    .home-features__grid { gap: 16px; }
    .home-features__aside { top: 140px; width: 49%; padding-top: 14px; }
    .home-features__content { padding-top: 14px; }
    .home-features__head { gap: 12px; min-height: 0; margin-bottom: 80px; }
    .home-features__head .v2-text { max-width: none; }
    .home-features__list { gap: 40px; }
    .home-feature__body { gap: 20px; }
    .home-feature__body h3,
    .home-feature__text,
    .home-feature__list { max-width: none; }
    .home-feature__text + .home-feature__text { margin-top: -8px; }
}

@media (max-width: 767px) {
    .home-features { padding-top: 40px; padding-bottom: 40px; }
    .home-features__grid { display: block; }
    .home-features__aside { display: none; }
    .home-features__content { padding-top: 0; }
    .home-features__head { margin-bottom: 40px; }
    .home-feature__photo { display: block; margin-bottom: 16px; }
    .home-feature__body { gap: 16px; }
    .home-feature__body > .v2-icon { width: 24px; height: 24px; }
    .home-feature__body h3 { font-size: 18px; line-height: 21.6px; }
    .home-feature__text,
    .home-feature__list { font-size: 14px; line-height: 16.8px; }
    .home-feature__text + .home-feature__text { margin-top: -12px; }
    .home-feature__list,
    .home-feature__list:has(> li:nth-child(3)),
    .home-feature__list--points,
    .home-feature__list--points:has(> li:nth-child(3)) { gap: 4px; }
    .home-feature__list li { align-items: flex-start; }
    .home-feature__list li > .v2-icon { margin-top: -4px; }
}

/* ---------- Блог ---------- */

/* Лента статей выходит за поля страницы, поэтому у секции нет боковых отступов */
.home-blog {
    padding: 80px 0;
}

.home-blog.v2-section .v2-section__head {
    margin-bottom: 80px;
}

.home-blog__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 80px;
}

.home-blog__head .v2-title {
    max-width: 665px;
    color: var(--v2-text-secondary);
}

/* Лента на всю ширину секции; отступ слева совпадает с левым краем .v2-container
   (контейнер 1440 по центру + поле страницы), справа — такой же, чтобы последняя карточка
   в конце прокрутки вставала по правому краю контейнера */
.home-blog__track {
    --track-inset: max(var(--v2-gutter), calc((100% - 1440px) / 2 + var(--v2-gutter)));

    display: flex;
    gap: 25px;
    overflow-x: auto;
    padding-inline: var(--track-inset);
    scroll-padding-inline: var(--track-inset);
    cursor: grab;
    scrollbar-width: none;
}

.home-blog__track::-webkit-scrollbar {
    display: none;
}

.home-blog__track.is-dragging {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
}

.home-blog__track .blog-card {
    flex: 0 0 552px;
    max-width: 100%;
}

.home-blog__track .blog-card__image {
    aspect-ratio: 552 / 340;
}

/* Полоса прокрутки ленты — только на десктопе */
.home-blog__progress {
    position: relative;
    height: 1px;
    margin: 44px 0 12px;
    background: var(--v2-line);
    cursor: pointer;
    touch-action: none;
}

.home-blog__progress span {
    position: absolute;
    top: -1px;
    height: 3px;
    background: var(--v2-text);
}

@media (max-width: 1199px) {
    .home-blog { padding: 60px 0; }
    .home-blog.v2-section .v2-section__head { margin-bottom: 40px; }
    .home-blog__head { flex-direction: column; align-items: flex-start; gap: 24px; }
    .home-blog__track { gap: 14px; }
    .home-blog__track .blog-card { flex-basis: 316px; }
    .home-blog__track .blog-card__image { aspect-ratio: 316 / 175; }
    .home-blog__progress { display: none; }
}

@media (max-width: 767px) {
    .home-blog { padding: 40px 0; }
    .home-blog.v2-section .v2-section__head { margin-bottom: 32px; }
    .home-blog__head { gap: 20px; }
    .home-blog__head .v2-btn { min-height: 40px; padding: 8px 12px 8px 16px; font-size: 14px; }
    .home-blog__track { gap: 10px; }
    .home-blog__track .blog-card { flex-basis: 100%; }
    .home-blog__track .blog-card__image { aspect-ratio: 343 / 190; }
}

/* ---------- PairTrade AI Finder ---------- */

.home-finder__title {
    color: var(--v2-text-muted);
}

.home-finder {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.home-finder__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.home-finder__media {
    aspect-ratio: 630 / 400;
    overflow: hidden;
    background: #0A0A0A;
}

.home-finder__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Карточка AI Finder в макете залита вертикальным градиентом (без иллюстрации) */
.home-finder__media--gradient {
    background: linear-gradient(180deg, #000000 0%, #232E34 50%, #97A8B0 100%);
}

.home-finder__card h3 {
    margin: 0;
    font-weight: 600;
    font-size: 24px;
    line-height: 28.8px;
}

.home-finder__card p {
    margin: 0;
    font-size: 18px;
    line-height: 21.6px;
    color: var(--v2-text-muted);
}

.home-finder__card h3 + p {
    margin-top: -4px;
}

@media (max-width: 1199px) {
    .home-finder { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .home-finder__card { gap: 16px; }
    .home-finder__card h3 { font-size: 18px; line-height: 21.6px; }
    .home-finder__card p { font-size: 14px; line-height: 16.8px; }
}