/* ============================================================
   Лендинг Андрея Снегурова
   Порядок блоков совпадает с порядком секций в index.html.
   ============================================================ */

/* ============================================================
   Шрифты
   ============================================================ */
/* Оригинальный дисплейный шрифт из макета. У него одно начертание,
   поэтому все заголовки и кнопки используют вес 400. */
@font-face {
    font-family: 'Electrolize RUS';
    src: url('assets/fonts/electrolize-rus.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   Токены
   ============================================================ */
:root {
    --bg: #111111;
    --accent: #008CFF;
    --accent-hover: #2EA0FF;
    --text: #FFFFFF;
    --overlay-photo: linear-gradient(61.36deg,
        rgba(17, 17, 17, 0) 20%,
        rgba(17, 17, 17, .3) 62%,
        #10181E 82%);

    --font-display: 'Electrolize RUS', 'Segoe UI', sans-serif;
    --font-body: 'Montserrat Alternates', 'Segoe UI', sans-serif;

    --radius-sm: 8px;
    --radius-md: 16px;
    --hairline: 0.8px solid var(--accent);

    --container: 390px;
    --gutter: 27px;
    --nav-h: 42px;
}

/* ============================================================
   Reset и база
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-h);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================================
   Утилиты
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Обрезка боковых выносов (свечения, номера 01-04, размытая копия
   hero-фото) — ровно как фрейм в макете. Живёт на общей обёртке
   страницы, а не на секциях и не на корне:
   - на корне (html/body) она расширяла область прокрутки, и
     фиксированное меню растягивалось шире экрана;
   - на секциях WebKit (Safari, встроенный браузер Telegram на iPhone)
     режет и по вертикали, хотя задан только overflow-x, — свечение
     обрубалось по нижней границе секции.
   У обёртки единственная вертикальная граница совпадает с концом
   страницы, где резать нечего. `hidden` — запасной вариант для
   браузеров без `clip`. */
.page {
    overflow-x: hidden;
    overflow-x: clip;
}

.section {
    position: relative;
    z-index: 1;
}

.section-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.18;
    color: var(--accent);
    text-align: center;
    text-transform: uppercase;
}

.accent { color: var(--accent); }

/* Видно только скринридеру: служебные подписи и статус карусели. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Размытые синие пятна фона. Позиция и размер задаются инлайном
   через --glow-x / --glow-y / --glow-size. */
.glow {
    position: absolute;
    /* Именно -1, а не 0: позиционированный элемент с уровнем стека 0
       красится ПОСЛЕ непозиционированного текста секции, то есть поверх
       него. Отрицательный уровень уводит свечение под контент. */
    z-index: -1;
    left: var(--glow-x, 0);
    top: var(--glow-y, 0);
    width: var(--glow-size, 154px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    filter: blur(129.6px);
    pointer-events: none;
}

/* ============================================================
   Кнопки
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: 20px;
    border: 0;
    background: var(--accent);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-color: var(--text); }

.btn--wide {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding-inline: 20px 52px;
    border-radius: var(--radius-sm);
}

.btn__arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    width: 24px;
    height: 24px;
    translate: 0 -50%;
}

/* ============================================================
   Навигация
   ============================================================ */
.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    height: var(--nav-h);
    background: var(--accent);
}

/* Без этого height: 100% у списка не от чего считать — у <nav> высота auto,
   и пункты прижимаются к верху полосы вместо центра. */
.nav nav { height: 100%; }

.nav__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    list-style: none;
}

.nav__link {
    position: relative;
    display: block;
    padding: 6px 2px;
    font-size: 13px;
    text-decoration: none;
    transition: text-shadow .2s ease;
}

/* Полоса меню ровно 42px по макету, а палец требует 44. Расширяем
   область нажатия невидимым псевдоэлементом, не трогая вид. */
.nav__link::after {
    content: '';
    position: absolute;
    inset: -7px -10px;
}

/* Ссылки лежат на сплошной синей полосе — синяя обводка фокуса
   по умолчанию на ней не видна. */
.nav__link:focus-visible { outline-color: var(--text); }

.nav__link.is-active {
    font-weight: 500;
    text-shadow: 0 0 12px rgba(255, 255, 255, .5);
}

/* ============================================================
   Hero

   Сетка на самой секции: на мобильном одна колонка (фото — полоса —
   слоган с кнопкой), на десктопе фото слева, а имя, слоган и кнопка
   собираются в правую колонку. Подпись на мобильном лежит абсолютом
   поверх фото, на десктопе встаёт в поток.
   ============================================================ */
.hero {
    display: grid;
    padding-top: 8px;
    grid-template-areas:
        'media'
        'rule'
        'pitch';
}

.hero__media {
    position: relative;
    grid-area: media;
    aspect-ratio: 390 / 404;
    overflow: hidden;
}

/* Фигура вырезана с прозрачным фоном, поэтому за ней видны фон страницы,
   свечение и синяя ломаная — как в макете. Пропорции исходника совпадают
   с рамкой из Figma (431x644), поэтому высота считается от ширины. */
.hero__photo {
    position: absolute;
    left: -3.333%;         /* -13 / 390 */
    top: 2.475%;           /*  10 / 404 */
    width: 110.513%;       /* 431 / 390 */
    height: auto;
    max-width: none;
}

/* В макете за фигурой лежит не копия фото, а её чёрный силуэт с размытием,
   сдвинутый на 13px вправо и 6px вниз, — он даёт мягкую тень по правому
   и нижнему контуру. Сила подобрана по замеру рендера макета: фон у края
   руки темнеет примерно на 30% в полосе ~15px. */
.hero__shadow {
    left: 0;
    top: 3.96%;            /*  16 / 404 */
    opacity: .38;
    filter: blur(7px);
}

.hero__lines {
    position: absolute;
    left: -7.5%;
    top: 14.4%;
    width: 99.4%;
    max-width: none;
    pointer-events: none;
}

.hero__caption {
    position: absolute;
    right: var(--gutter);
    top: 82px;
    z-index: 2;
    text-align: right;
}

.hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.18;
    color: var(--accent);
    text-transform: uppercase;
}

.hero__role {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.25;
}

.hero__rule {
    grid-area: rule;
    height: 8px;
    background: var(--accent);
}

.hero__pitch {
    grid-area: pitch;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: 27px var(--gutter) 0;
}

.hero__slogan {
    max-width: 350px;
    margin: 0 auto 24px;
    text-align: center;
    line-height: 1.42;
}

/* ============================================================
   Обо мне
   ============================================================ */
.about { padding-top: 35px; }

.about__text { margin-top: 26px; }

.about__text p {
    margin: 0 0 14px;
    line-height: 1.42;
}

.about__text p:last-child { margin-bottom: 0; }

.about__figure {
    position: relative;
    margin: 20px 0 0;
    padding-bottom: 8px;
}

/* Без overflow: hidden — иначе рамка-скобка внизу обрезалась бы
   скруглением угла и не доходила до левого края на 16px. Скруглены
   само фото и оверлей. */
.about__photo {
    position: relative;
    width: 61.3%;              /* 239 / 390 */
    aspect-ratio: 239 / 287;
}

.about__photo img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
}

/* Поверх фото три слоя: растворение верхнего края в фон, лёгкое
   растворение правого края и диагональный градиент из макета.
   Так у фото нет видимой верхней границы — оно проступает из фона,
   как в макете, а лицо и рука остаются нетронутыми. */
.about__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    background:
        linear-gradient(to bottom, var(--bg) 0%, rgba(17, 17, 17, .9) 6%, rgba(17, 17, 17, 0) 28%),
        linear-gradient(to left, rgba(17, 17, 17, .75) 0%, rgba(17, 17, 17, 0) 22%),
        var(--overlay-photo);
    pointer-events: none;
}

/* Угловая скобка по правому и нижнему краю фото. */
.about__bracket {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 74.6%;             /* 214 / 287 */
    overflow: visible;
}

.about__quote {
    position: absolute;
    right: var(--gutter);
    top: -8px;
    width: 69%;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 10px;
    line-height: 1.55;
    text-align: right;
    text-transform: uppercase;
}

/* Синие скобки в строке: «[» перед первым словом, «]» после последнего,
   как в макете. line-height: 0 — чтобы увеличенный кегль скобки
   не раздвигал строки. */
.about__quote::before,
.about__quote::after {
    color: var(--accent);
    font-size: 1.4em;
    line-height: 0;
    vertical-align: -.06em;
}

.about__quote::before { content: '[\00a0'; }
.about__quote::after  { content: '\00a0]'; }

/* ============================================================
   Мой подход
   ============================================================ */
.approach { padding-top: 42px; }

.approach__list {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

/* Первая колонка узкая (27px — ровно поле контейнера), номер выступает
   из неё влево отрицательным полем и уходит за край экрана. Числа в макете:
   бокс 75px, начинается на x=-21, то есть срезано 21px, видно 54px. */
.approach__item {
    display: grid;
    grid-template-columns: 27px 1fr;
    align-items: start;
    column-gap: 43px;
    margin-bottom: 30px;
}

.approach__num {
    width: 75px;
    margin-left: -48px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 64px;
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--accent);
    text-align: right;
}

.approach__name {
    margin: 6px 0 4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.3;
    color: var(--accent);
}

.approach__desc {
    margin: 0;
    line-height: 1.42;
}

/* ============================================================
   Услуги
   ============================================================ */
.services { padding-top: 42px; }

.services__list { margin-top: 30px; }

/* Правый нижний угол прямой — к нему снизу примыкает кнопка-«хвостик»,
   вместе они читаются как одна фигура. */
.service-card {
    position: relative;
    margin-bottom: 68px;       /* 44 высота хвостика + 24 воздуха */
    padding: 14px 16px 18px;
    border: var(--hairline);
    border-radius: var(--radius-md) var(--radius-md) 0 var(--radius-md);
}

.service-card__title {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.3;
    color: var(--accent);
}

.service-card__points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-card__points li {
    position: relative;
    margin-bottom: 6px;
    padding-left: 12px;
    line-height: 1.42;
}

.service-card__points li:last-child { margin-bottom: 0; }

.service-card__points li::before {
    content: '\2022';
    position: absolute;
    left: 0;
}

.btn--tab {
    position: absolute;
    right: -0.8px;             /* садится на обводку карточки, а не рядом с ней */
    bottom: -44px;
    width: 116px;
    padding-inline: 8px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ============================================================
   Отзывы
   ============================================================ */
.reviews { padding-top: 42px; }

.reviews__carousel {
    position: relative;
    margin-top: 28px;
}

/* Высоту подгоняет скрипт под активный слайд — иначе под коротким отзывом
   зияет пустота высотой с самый длинный. Без JS высота остаётся авто
   (по самому высокому слайду), и карусель всё равно работает. */
.reviews__viewport {
    overflow: hidden;
    transition: height .35s ease;
}

/* Трек — нативный горизонтальный скролл со scroll-snap: свайп пальцем
   и трекпадом работает без JS. Скрипт добавляет только индикаторы,
   стрелки и клавиатуру. */
.reviews__track {
    display: flex;
    /* Иначе flex растянул бы все слайды по самому высокому, и подгонка
       высоты под активный слайд стала бы бессмысленной. */
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reviews__track::-webkit-scrollbar { display: none; }

.reviews__track:focus-visible { outline-offset: 4px; }

.review-slide {
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: center;
}

.review-slide__photo {
    position: relative;
    width: 173px;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    outline: var(--hairline);
    outline-offset: -0.8px;
}

.review-slide__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-slide__label {
    position: absolute;
    top: 6px;
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.review-slide__label--before { left: 6px; }

.review-slide__label--after {
    left: 50%;
    padding-left: 6px;
}

.review-slide__text {
    max-width: 339px;
    margin: 18px 0 0;
    text-align: center;
    line-height: 1.42;
}

/* Индикаторы — три горизонтальных штриха, как в макете. */
.reviews__dots {
    display: flex;
    justify-content: center;
    gap: 3px;
    /* Отступ visually 27px, как в макете: 6 своих + 21 паддинга кнопки. */
    margin-top: 6px;
}

/* Видимая часть — полоска 38x3 (псевдоэлемент), но нажимать нужно
   по площади 38x45, иначе в неё не попасть пальцем. */
.reviews__dot {
    width: 38px;
    padding: 21px 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.reviews__dot::before {
    content: '';
    display: block;
    height: 3px;
    border-radius: 3px;
    background: var(--text);
    transition: background-color .2s ease;
}

.reviews__dot.is-active::before { background: var(--accent); }

/* Стрелки появляются только на планшете и шире. */
.reviews__arrow { display: none; }

/* ============================================================
   Контакты и подвал
   ============================================================ */
.contacts { padding-top: 42px; }

.contacts__lead {
    max-width: 356px;
    margin: 22px auto 32px;
    text-align: center;
    line-height: 1.42;
}

.contacts__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 29px;
}

.btn--social {
    width: 218px;
    border-radius: var(--radius-sm);
}

.footer {
    position: relative;
    z-index: 1;
    padding: 48px 0 24px;
    text-align: center;
}

.footer__note {
    margin: 0;
    font-size: 12px;
    opacity: .45;
}

/* ============================================================
   Появление блоков при скролле

   Начальная прозрачность действует только при живом JS и только если
   пользователь не просил убрать анимации — иначе контент виден всегда
   и страница не может остаться пустой.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .js-enabled [data-reveal] {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .5s ease, transform .5s ease;
    }

    .js-enabled [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   Планшет
   ============================================================ */
@media (min-width: 768px) {
    :root {
        --container: 720px;
        --gutter: 32px;
    }

    body { font-size: 15px; }

    .section-title { font-size: 38px; }

    /* На широком экране space-between растащил бы четыре пункта
       по самым краям — собираем их по центру. */
    .nav__list {
        justify-content: center;
        gap: 48px;
    }

    /* Координаты свечений взяты из макета шириной 390px. На широком экране
       те, что в макете прижаты к правому краю, надо привязать к правому краю,
       иначе они уезжают в середину. */
    .glow--right {
        left: auto;
        right: -40px;
    }

    .hero__caption { top: 96px; }
    .hero__title { font-size: 42px; }
    .hero__role { font-size: 15px; }

    /* Кнопка во всю ширину контейнера на 720px читается как баннер —
       ограничиваем и центрируем. */
    .hero__pitch .btn--wide,
    .approach .btn--wide {
        max-width: 420px;
        margin-inline: auto;
    }

    .approach__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
    }

    /* В две колонки номер уже нельзя выносить за край экрана — правая
       колонка наезжала бы на левую. Прижимаем его к краю своей ячейки. */
    .approach__item {
        grid-template-columns: auto 1fr;
        column-gap: 14px;
    }

    .approach__num {
        width: auto;
        margin-left: 0;
        font-size: 56px;
    }

    /* Карточки остаются колонкой, но не растягиваются: две колонки дают
       либо сироту в полряда, либо растянутую третью. Три в ряд — на десктопе. */
    .service-card {
        max-width: 480px;
        margin-inline: auto;
    }

    /* .about__figure — брат .container, а не он сам, поэтому ширину
       контейнера получает отдельным правилом. На мобильном этого делать
       нельзя: там фото по макету прижато к самому краю экрана. */
    .about__figure {
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .review-slide__photo { width: 240px; }
    .review-slide__text { max-width: 480px; }

    .reviews__arrow {
        position: absolute;
        top: 120px;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: var(--hairline);
        border-radius: 50%;
        background: rgba(17, 17, 17, .6);
        color: var(--text);
        font-size: 18px;
        cursor: pointer;
        transition: background-color .2s ease;
    }

    .reviews__arrow:hover { background: var(--accent); }
    .reviews__arrow--prev { left: 0; }
    .reviews__arrow--next { right: 0; }

    .contacts__links {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }
}

/* ============================================================
   Десктоп
   ============================================================ */
@media (min-width: 1024px) {
    :root {
        --container: 1120px;
        --gutter: 40px;
    }

    .section-title { font-size: 44px; }

    /* Hero в две колонки: слева фото, справа имя, слоган и кнопка.
       Крайние колонки — поля; синяя полоса при этом остаётся во всю
       ширину экрана, поэтому она занимает отдельный ряд на все колонки.
       Промежуток между колонками задан отдельной колонкой 48px, а не
       column-gap, иначе зазор появился бы и у крайних полей. */
    .hero {
        grid-template-columns:
            minmax(var(--gutter), 1fr)
            minmax(0, 460px)
            48px
            minmax(0, 612px)
            minmax(var(--gutter), 1fr);
        grid-template-areas:
            '.    media .    caption .'
            '.    media .    pitch   .'
            'rule rule  rule rule    rule';
        padding-top: calc(var(--nav-h) + 40px);
    }

    .hero__media {
        align-self: start;
        aspect-ratio: 460 / 560;
        border-radius: var(--radius-md);
    }

    .hero__caption {
        position: static;
        grid-area: caption;
        align-self: end;
        padding-bottom: 24px;
        text-align: left;
    }

    .hero__title { font-size: 64px; }

    .hero__role {
        margin-top: 16px;
        font-size: 18px;
    }

    .hero__pitch {
        align-self: start;
        max-width: none;
        margin-inline: 0;
        padding: 0;
    }

    .hero__slogan {
        max-width: 520px;
        margin-inline: 0;
        font-size: 16px;
        line-height: 1.5;
        text-align: left;
    }

    .hero__pitch .btn--wide { max-width: 420px; }

    .hero__rule { margin-top: 48px; }

    /* Две колонки, но не через `columns`: тот разрезал бы абзац посередине,
       и вторая колонка начиналась бы с середины фразы. Здесь колонка —
       это абзац целиком. */
    .about__text {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .about__text p { margin-bottom: 0; }

    .about__figure {
        display: grid;
        grid-template-columns: 320px 1fr;
        align-items: center;
        gap: 56px;
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .about__photo { width: 100%; }

    .about__quote {
        position: relative;
        width: auto;
        max-width: 460px;
        padding: 12px 20px;
        font-size: 14px;
        line-height: 1.7;
        text-align: left;
    }


    .services__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
        gap: 24px;
    }

    .service-card {
        display: flex;
        flex-direction: column;
        max-width: none;
        margin-inline: 0;
    }

    .service-card__points { flex: 1; }

    /* Без ограничения ширины стрелки уезжают к самым краям контейнера
       на 1120px и теряют связь с фото. */
    .reviews__carousel {
        max-width: 720px;
        margin-inline: auto;
    }

    .reviews__arrow {
        top: 50%;
        translate: 0 -50%;
    }

    .reviews__arrow--prev { left: -8px; }
    .reviews__arrow--next { right: -8px; }

    .review-slide__photo { width: 280px; }

    .review-slide__text {
        max-width: 620px;
        font-size: 15px;
    }
}

/* ============================================================
   Уважение к настройке «меньше движения»
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}