/* P26M — hero section.
 * Stacked on mobile (text → mockup), split on desktop.
 */

.hero {
    position: relative;
    padding-block: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 96px);
    isolation: isolate;
    overflow: hidden;
}

.hero__inner {
    display: grid;
    gap: clamp(40px, 6vw, 72px);
    grid-template-columns: 1fr;
    align-items: center;
    position: relative;
}

.hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 640px;
}

.hero__title {
    font-family: var(--font-display);
    /* --display-scale = 1 на латинице; на uk/ru подрезает кегль (tokens.css). */
    font-size: calc(var(--fs-5xl) * var(--display-scale));
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--color-text);
}
/* Акцент героя — «светится», а не «закрашен» (P26M-429).
   Прежний градиент шёл под 135° от --color-brand к --color-brand-strong. Два
   стопа близки по светлоте, а диагональ на широкой двухстрочной коробке
   размазывала и без того малый перепад по горизонтали — каждой строке
   доставался тонкий срез рампы, и акцент читался плоской заливкой.
   Теперь рампа почти вертикальная (178°): верхняя строка садится на светлый
   конец, нижняя на базовый, перепад работает построчно и виден сразу.
   Тон при этом не меняется — стопы те же два брендовых токена.
   Объём даёт не заливка, а ореол: три drop-shadow (плотное ядро → средний →
   широкий bloom) вместо двух слабых на -glow-soft. drop-shadow, а не
   text-shadow, потому что при background-clip:text тень рисуется поверх
   заливки. Три слоя — потолок: это LCP-элемент, filter недёшев, а четвёртый
   слой (жёсткая кромка 0 1px 0) в сравнении ничего не добавлял. */
.hero__title em {
    font-style: normal;
    background: linear-gradient(178deg,
        var(--color-brand-strong) 2%,
        var(--color-brand) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px var(--color-brand-glow))
            drop-shadow(0 0 44px var(--color-brand-glow))
            drop-shadow(0 0 84px var(--color-brand-glow-soft));
}

.hero__lead {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 56ch;
}

.hero__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.hero__trust {
    margin-top: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-7);
    font-size: var(--fs-xs);
    color: var(--color-text-tertiary);
}
.hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.hero__trust-item .p26m-icon {
    width: 14px;
    height: 14px;
    color: var(--color-brand);
    flex-shrink: 0;
}
.hero__trust-item strong {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.hero__visual {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (min-width: 1024px) {
    .hero {
        padding-block: clamp(64px, 8vw, 128px) clamp(64px, 8vw, 128px);
    }
    .hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
        gap: var(--space-9);
    }
    .hero__title {
        font-size: calc(clamp(3rem, 4.5vw, 5rem) * var(--display-scale));
    }
}

/* Entrance choreography — staggered, single page-load orchestration. */
.hero__eyebrow  { animation: hero-rise 700ms var(--ease-out) both 50ms; }
.hero__title    { animation: hero-rise 800ms var(--ease-out) both 150ms; }
.hero__lead     { animation: hero-rise 800ms var(--ease-out) both 280ms; }
.hero__cta-group{ animation: hero-rise 800ms var(--ease-out) both 380ms; }
.hero__trust    { animation: hero-rise 800ms var(--ease-out) both 480ms; }
.hero__visual   { animation: hero-rise 900ms var(--ease-out) both 200ms; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__eyebrow,
    .hero__title,
    .hero__lead,
    .hero__cta-group,
    .hero__trust,
    .hero__visual {
        animation: none !important;
    }
}