/* ============================================================
   PlatonicFarm Redesign — styles.css
   Сессия 2: Header. Остальные блоки пока на исходном style.css.
   Все значения соответствуют /docs/DESIGN-TOKENS.md.
   ============================================================ */

/* ---------- 1. Дизайн-токены ---------- */
:root {
    /* Цвета — база */
    --rd-bg:                #0a0a0a;
    --rd-bg-elevated:       #0f0f0f;
    --rd-surface:           #111111;
    --rd-surface-hover:     #161616;
    --rd-surface-2:         #1a1a1a;
    --rd-border:            #1f1f1f;
    --rd-border-strong:     #2a2a2a;
    --rd-divider:           #161616;

    /* Цвета — текст */
    --rd-text:              #f5f5f5;
    --rd-text-secondary:    #a3a3a3;
    --rd-text-muted:        #6b6b6b;
    --rd-text-subtle:       #4a4a4a;

    /* Акцент */
    --rd-accent:            #f97316;
    --rd-accent-hover:      #fb8a3d;
    --rd-accent-pressed:    #ea670c;

    /* Типографика */
    --rd-font-sans:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --rd-font-mono:         'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Spacing-шкала (используем в Header) */
    --rd-space-1:  4px;
    --rd-space-2:  8px;
    --rd-space-3:  12px;
    --rd-space-4:  16px;
    --rd-space-5:  20px;
    --rd-space-6:  24px;
    --rd-space-8:  32px;
    --rd-space-10: 40px;
    --rd-space-12: 48px;
    --rd-space-16: 64px;
    --rd-space-20: 80px;
    --rd-space-24: 96px;
    --rd-space-32: 128px;

    /* Контейнеры */
    --rd-container-max:     1280px;
    --rd-container-wide:    1440px;   /* для full-bleed-секций (App Preview, рендеры клиентов) */
    --rd-gutter-mobile:     20px;
    --rd-gutter-desktop:    32px;

    /* Радиусы */
    --rd-radius-xs:   4px;
    --rd-radius-sm:   6px;
    --rd-radius-md:   10px;
    --rd-radius-lg:   16px;
    --rd-radius-pill: 999px;

    /* Границы */
    --rd-border-1:      1px solid var(--rd-border);
    --rd-border-1-strong: 1px solid var(--rd-border-strong);

    /* Тени */
    --rd-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --rd-shadow-md: 0 8px 24px rgba(0,0,0,0.5);
    --rd-shadow-lg: 0 24px 60px rgba(0,0,0,0.6);

    /* Backdrop */
    --rd-backdrop-blur:     blur(16px) saturate(160%);
    --rd-nav-bg:            rgba(10, 10, 10, 0.65);
    --rd-nav-bg-scrolled:   rgba(10, 10, 10, 0.85);

    /* Анимации */
    --rd-duration-fast: 120ms;
    --rd-duration-base: 200ms;
    --rd-duration-slow: 320ms;
    --rd-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-index */
    --rd-z-sticky:   200;
    --rd-z-dropdown: 300;
    --rd-z-overlay:  400;

    /* Размеры Header */
    --rd-header-h-mobile:  56px;
    --rd-header-h-desktop: 64px;
}

/* =============================================
   ВЕРТИКАЛЬНЫЙ РИТМ
   64px+64px на секции = 128px между соседними. Base-ритм по DESIGN-TOKENS §3.
   На мобиле 32+32=64px. .rd-howto и .rd-app — отдельные селекторы для
   обратной совместимости с разметкой ранних сессий.
   ============================================= */
.rd-section,
.rd-howto,
.rd-app {
    padding: 64px 0;
}

@media (max-width: 1023px) {
    .rd-section,
    .rd-howto,
    .rd-app {
        padding: 32px 0;
    }
}

/* =============================================
   ТИПОГРАФИКА — единый источник правды
   ============================================= */

/* Section H2 — заголовки блоков */
.rd-h2 {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--rd-text);
}

/* Section subtitle — подзаголовок под H2 */
.rd-subtitle {
    margin: 12px 0 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--rd-text-secondary);
}

/* Заголовочный блок секции — H2 + subtitle вместе */
.rd-section-header {
    margin-bottom: 56px;
}

/* Eyebrow — метка над заголовком или внутри карточки */
.rd-eyebrow {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-text-muted);
}

/* Card title */
.rd-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--rd-text);
}

/* Card body */
.rd-card-body {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--rd-text-secondary);
}

/* Bold-акцент внутри card body — белый, не оранжевый (BLOCKS §3) */
.rd-card-body strong {
    color: var(--rd-text);
    font-weight: 600;
}

/* Social Proof — цифра. Inter (как весь сайт). Mono зарезервирован
   только для floating-карточки в hero (DESIGN-TOKENS §14.1). */
.rd-stat-number {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--rd-text);
}

/* Social Proof — подпись после цифры */
.rd-stat-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--rd-text-muted);
}

/* Адаптив — мобила */
@media (max-width: 768px) {
    .rd-h2 {
        font-size: 28px;
    }
    .rd-section-header {
        margin-bottom: 40px;
    }
}

/* ---------- 2. Базовые сбросы только для нового Header ---------- */
/* Не трогаем body — он управляется старым style.css до полной переделки */

.rd-header,
.rd-header * {
    box-sizing: border-box;
}

.rd-header button {
    font-family: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

/* Чтобы старый header.header не показывался (а он есть в DOM? Нет — мы заменили его блоком .rd-header). */
/* На всякий случай — если что-то осталось от исходного style.css, оно не будет видно. */

/* ---------- 3. HEADER ---------- */
.rd-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--rd-z-sticky);
    height: var(--rd-header-h-mobile);
    font-family: var(--rd-font-sans);
    color: var(--rd-text);

    background-color: var(--rd-nav-bg);
    -webkit-backdrop-filter: var(--rd-backdrop-blur);
    backdrop-filter: var(--rd-backdrop-blur);

    border-bottom: 1px solid transparent;
    transition:
        background-color var(--rd-duration-base) var(--rd-ease-out),
        border-color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-header[data-scrolled="true"] {
    background-color: var(--rd-nav-bg-scrolled);
    border-bottom-color: var(--rd-border);
}

@media (min-width: 768px) {
    .rd-header {
        height: var(--rd-header-h-desktop);
    }
}

.rd-header__inner {
    height: 100%;
    max-width: var(--rd-container-max);
    margin: 0 auto;
    padding: 0 var(--rd-gutter-mobile);
    display: flex;
    align-items: center;
    gap: var(--rd-space-4);
}

@media (min-width: 768px) {
    .rd-header__inner {
        padding: 0 var(--rd-gutter-desktop);
        gap: var(--rd-space-8);
    }
}

/* ---------- 3.1. Лого ---------- */
.rd-header__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-space-2);
    text-decoration: none;
    color: var(--rd-text);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.rd-header__logo-img {
    width: 22px;
    height: 22px;
    display: block;
}

.rd-header__logo-text {
    display: inline-block;
}

/* ---------- 3.2. Основная навигация (десктоп) ---------- */
.rd-header__nav {
    display: none;
    align-items: center;
    gap: var(--rd-space-5);
    flex: 1;
    margin-left: var(--rd-space-6);
}

@media (min-width: 1024px) {
    .rd-header__nav {
        display: flex;
    }
}

.rd-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: var(--rd-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--rd-text-secondary);
    text-decoration: none;
    line-height: 1;
    transition: color var(--rd-duration-base) var(--rd-ease-out),
                background-color var(--rd-duration-base) var(--rd-ease-out);
    white-space: nowrap;
}

.rd-nav-link:hover,
.rd-nav-link[aria-expanded="true"] {
    color: var(--rd-text);
    background-color: var(--rd-surface-hover);
}

.rd-nav-link--active {
    color: var(--rd-accent);
}

.rd-nav-chevron {
    margin-left: 2px;
    opacity: 0.7;
    transition: transform var(--rd-duration-base) var(--rd-ease-out);
}

.rd-nav-link[aria-expanded="true"] .rd-nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* Триггеры с шевроном: меньше padding справа, чем у обычных ссылок,
   чтобы оптическая дистанция между текстом-триггера и текстом-соседа
   совпадала с дистанцией между двумя обычными ссылками. */
.rd-nav-link--trigger {
    padding-right: 8px;
}

.rd-nav-item {
    position: relative;
}

/* ---------- 3.3. Мега-меню (Learn) ---------- */
.rd-mega {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 560px;
    background-color: var(--rd-surface);
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-md);
    box-shadow: var(--rd-shadow-md);
    z-index: var(--rd-z-dropdown);

    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--rd-duration-base) var(--rd-ease-out),
                transform var(--rd-duration-base) var(--rd-ease-out);
}

.rd-mega[data-open="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.rd-mega__inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--rd-space-8);
    padding: var(--rd-space-6);
}

.rd-mega__col {
    display: flex;
    flex-direction: column;
    gap: var(--rd-space-3);
}

.rd-mega__heading {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-text-muted);
}

.rd-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rd-mega__link {
    display: block;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: var(--rd-radius-sm);
    color: var(--rd-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--rd-duration-fast) var(--rd-ease-out),
                color var(--rd-duration-fast) var(--rd-ease-out);
}

.rd-mega__link:hover {
    background-color: var(--rd-surface-hover);
    color: var(--rd-text);
}

.rd-mega__list--articles {
    gap: var(--rd-space-3);
}

.rd-mega__article {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    margin: 0 -10px;
    border-radius: var(--rd-radius-sm);
    text-decoration: none;
    transition: background-color var(--rd-duration-fast) var(--rd-ease-out);
}

.rd-mega__article:hover {
    background-color: var(--rd-surface-hover);
}

.rd-mega__article-title {
    color: var(--rd-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.005em;
}

.rd-mega__article-meta {
    color: var(--rd-text-muted);
    font-size: 12px;
    line-height: 1.3;
}

/* ---------- 3.4. Простое dropdown (Support) ---------- */
.rd-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background-color: var(--rd-surface);
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-md);
    box-shadow: var(--rd-shadow-md);
    z-index: var(--rd-z-dropdown);
    padding: var(--rd-space-2);

    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--rd-duration-base) var(--rd-ease-out),
                transform var(--rd-duration-base) var(--rd-ease-out);
}

.rd-dropdown[data-open="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.rd-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rd-dropdown__link {
    display: block;
    padding: 8px 12px;
    border-radius: var(--rd-radius-sm);
    color: var(--rd-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--rd-duration-fast) var(--rd-ease-out);
}

.rd-dropdown__link:hover {
    background-color: var(--rd-surface-hover);
}

/* ---------- 3.5. Действия справа ---------- */
.rd-header__actions {
    display: flex;
    align-items: center;
    gap: var(--rd-space-3);
    margin-left: auto;
    padding-right: var(--rd-space-2);
    flex-shrink: 0;
}

/* Кнопка Start Rendering — контурная (зафиксированное решение §14.2) */
.rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--rd-radius-sm);
    font-family: var(--rd-font-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--rd-duration-base) var(--rd-ease-out),
                border-color var(--rd-duration-base) var(--rd-ease-out),
                color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-btn--ghost {
    background-color: transparent;
    border: var(--rd-border-1);
    color: var(--rd-text);
}

.rd-btn--ghost:hover {
    background-color: var(--rd-surface-hover);
    border-color: var(--rd-border-strong);
}

.rd-btn--accent {
    background-color: var(--rd-accent);
    border: 1px solid var(--rd-accent);
    color: #0a0a0a;
}

.rd-btn--accent:hover {
    background-color: var(--rd-accent-hover);
    border-color: var(--rd-accent-hover);
}

.rd-header__cta {
    display: none;
}

@media (min-width: 1024px) {
    .rd-header__cta {
        display: inline-flex;
    }
}

.rd-header__icon-btn {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--rd-radius-pill);
    color: var(--rd-text-secondary);
    text-decoration: none;
    transition: background-color var(--rd-duration-base) var(--rd-ease-out),
                color var(--rd-duration-base) var(--rd-ease-out);
}

@media (min-width: 1024px) {
    .rd-header__icon-btn {
        display: inline-flex;
    }
}

.rd-header__icon-btn:hover {
    background-color: var(--rd-surface-hover);
    color: var(--rd-text);
}

/* ---------- 3.6. Бургер (мобила) ---------- */
.rd-header__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: var(--rd-radius-sm);
    background-color: transparent;
    /* Убираем стандартный синий/серый блик мобильного браузера на тапе. */
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--rd-duration-base) var(--rd-ease-out);
}

/* Focus-ring: убираем при клике мышью/тапом, показываем только при
   keyboard-навигации (Tab). Стандартный современный паттерн —
   сохраняет accessibility и не оставляет «рамку» после клика. */
.rd-header__burger:focus {
    outline: none;
}

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

/* Hover-фон только на устройствах с реальным hover (мышь).
   На тач-устройствах :hover залипает после клика → тёмная рамка
   вокруг крестика остаётся пока не тапнешь в другое место. */
@media (hover: hover) {
    .rd-header__burger:hover {
        background-color: var(--rd-surface-hover);
    }
}

.rd-header__burger > span {
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: var(--rd-text);
    border-radius: 2px;
    transition: transform var(--rd-duration-base) var(--rd-ease-out),
                opacity var(--rd-duration-fast) var(--rd-ease-out),
                background-color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-header__burger[aria-expanded="true"] > span {
    background-color: var(--rd-text-secondary);
}

.rd-header__burger[aria-expanded="true"] > span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}

.rd-header__burger[aria-expanded="true"] > span:nth-child(2) {
    opacity: 0;
}

.rd-header__burger[aria-expanded="true"] > span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
}

@media (min-width: 1024px) {
    .rd-header__burger {
        display: none;
    }
}

/* ---------- 3.7. Мобильное меню (overlay) ---------- */
.rd-mobile {
    position: fixed;
    top: var(--rd-header-h-mobile);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--rd-z-overlay);
    background-color: var(--rd-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* Скрыть полосу прокрутки внутри меню (FF + WebKit) */
    scrollbar-width: none;

    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--rd-duration-slow) var(--rd-ease-out),
                transform var(--rd-duration-slow) var(--rd-ease-out);
}

.rd-mobile::-webkit-scrollbar {
    display: none;
}

.rd-mobile[data-open="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.rd-mobile[hidden] {
    display: none;
}

/* min-height + flex column → пункты меню сверху, .rd-mobile__cta уносится
   к низу через margin-top: auto. Linear-style: список свободно дышит,
   CTA всегда под большим пальцем. */
.rd-mobile__inner {
    min-height: 100%;
    padding: var(--rd-space-6) var(--rd-gutter-mobile) var(--rd-space-12);
    display: flex;
    flex-direction: column;
    gap: var(--rd-space-3);
}

.rd-mobile__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rd-mobile__link {
    display: block;
    padding: 12px 4px;
    border-bottom: 1px solid var(--rd-divider);
    color: var(--rd-text);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.rd-mobile__link--secondary {
    font-size: 15px;
    font-weight: 400;
    color: var(--rd-text-secondary);
    padding: 10px 4px;
}

.rd-mobile__section {
    display: flex;
    flex-direction: column;
    gap: var(--rd-space-2);
    padding-top: var(--rd-space-3);
    border-top: 1px solid var(--rd-divider);
}

.rd-mobile__heading {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-text-muted);
}

.rd-mobile__cta {
    /* margin-top:auto → flex-spacer в столбце.
       Толкает кнопку к нижнему краю меню; пункты остаются сверху. */
    margin-top: auto;
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 15px;
}

/* Скрываем скролл страницы когда меню открыто.
   Блокируем оба корня (html + body): на mobile Safari/Chrome
   `overflow: hidden` только на body не всегда останавливает прокрутку
   корневого элемента. :has() покрывает современные браузеры (Safari 15.4+,
   Chrome 105+, Firefox 121+), которых для лендинга достаточно. */
html:has(body.rd-mobile-lock),
body.rd-mobile-lock {
    overflow: hidden;
}

/* ---------- 3.8. Сдвиг контента под фиксированный навбар ---------- */
/* Старый style.css задаёт собственные паддинги для .hero и .section.
   Чтобы они не уехали под фиксированный навбар, добавим scroll-margin
   для всех якорных секций — это обеспечит корректный скролл по якорю. */
[id="main"],
[id="how-it-works"],
[id="prices"],
[id="specs"],
[id="calculator"],
[id="about"],
[id="portfolio"],
[id="reviews"] {
    scroll-margin-top: var(--rd-header-h-desktop);
}

/* Скрываем старый header полностью — у нас теперь .rd-header */
body > header.header {
    display: none !important;
}

/* ============================================================
   4. HERO (сессия 3)
   ============================================================ */

/* ---------- 4.1. Секция и видео-фон ---------- */
.rd-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    /* Для современных iOS: 100svh — учитывает изменение высоты с появлением UI браузера */
    min-height: 100svh;
    overflow: hidden;
    color: var(--rd-text);
    font-family: var(--rd-font-sans);
    background-color: var(--rd-bg);
    /* Сдвиг под фиксированный навбар: на десктопе минимум должен быть 100vh - header */
    isolation: isolate;
}

.rd-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.rd-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Чуть приглушаем видео, чтобы текст хорошо читался */
    filter: saturate(95%) brightness(85%);
}

/* Тёмный градиент: лёгкое затемнение сверху → плотное снизу.
   Сверху держим небольшое затемнение (~20%), чтобы заголовок гарантированно
   читался на любом кадре видео, включая светлые. Низ почти непрозрачный
   для плавного перехода к следующей секции на --rd-bg. */
.rd-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10,10,10,0.2) 0%,
        rgba(10,10,10,0.5) 60%,
        rgba(10,10,10,0.95) 100%
    );
}

/* Оранжевое свечение radial 8% — единственное место, где допустим
   оранжевый цвет помимо CTA и hover-навигации (DESIGN-TOKENS §1.3) */
.rd-hero__glow {
    position: absolute;
    /* Центрируем на области заголовка: ~30% сверху, по центру */
    inset: 0;
    background: radial-gradient(
        ellipse 60% 40% at 50% 38%,
        rgba(249,115,22,0.08) 0%,
        rgba(249,115,22,0) 70%
    );
    mix-blend-mode: screen;
}

/* ---------- 4.2. Внутренний контейнер и сетка ---------- */
.rd-hero__inner {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: inherit;
    max-width: var(--rd-container-max);
    margin: 0 auto;
    padding: calc(var(--rd-header-h-mobile) + var(--rd-space-12)) var(--rd-gutter-mobile) var(--rd-space-16);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 768px) {
    .rd-hero__inner {
        padding: calc(var(--rd-header-h-desktop) + var(--rd-space-20)) var(--rd-gutter-desktop) var(--rd-space-24);
        min-height: 100vh;
        min-height: 100svh;
    }
}

/* ---------- 4.3. Заголовок и подзаголовок ---------- */
.rd-hero__content {
    max-width: 720px; /* DESIGN-TOKENS §3.2: --container-narrow для hero-текста */
    display: flex;
    flex-direction: column;
    gap: var(--rd-space-6);
}

.rd-hero__title {
    /* Inter ExtraBold, tight letter-spacing, адаптивный размер.
       BRIEF: двухстрочный "Your deadline. Our GPUs." → допускает поднять верхнюю границу */
    font-family: var(--rd-font-sans);
    font-weight: 800;
    font-size: clamp(40px, 8vw, 96px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin: 0;
    color: var(--rd-text);
}

/* Каждое предложение — на своей строке, без <br> в HTML */
.rd-hero__title > span {
    display: block;
}

.rd-hero__lead {
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.55;
    color: var(--rd-text-secondary);
    max-width: 560px;
    margin: 0;
}

/* Каждое предложение — на своей строке, без <br> в HTML */
.rd-hero__lead > span {
    display: block;
}

/* ---------- 4.4. CTA и текстовая ссылка ---------- */
.rd-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rd-space-5);
    margin-top: var(--rd-space-2);
}

/* Большой вариант кнопки — только в hero (главная CTA на странице) */
.rd-btn--lg {
    padding: 14px 22px;
    font-size: 15px;
    border-radius: var(--rd-radius-sm);
}

.rd-hero__cta {
    /* hover: усиленное свечение, как описано в DESIGN-TOKENS --shadow-glow-cta */
    box-shadow: 0 0 0 0 rgba(249,115,22,0);
    transition: background-color var(--rd-duration-base) var(--rd-ease-out),
                box-shadow var(--rd-duration-base) var(--rd-ease-out),
                transform var(--rd-duration-base) var(--rd-ease-out);
}

.rd-hero__cta:hover {
    box-shadow: 0 8px 32px rgba(249,115,22,0.25);
    transform: translateY(-1px);
}

.rd-hero__cta:active {
    transform: translateY(0);
}

/* Текстовая ссылка — серая, hover подчёркивание. БЕЗ оранжевого. */
.rd-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rd-text-secondary);
    text-decoration: none;
    line-height: 1;
    padding: 6px 0;
    transition: color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-hero__link:hover {
    color: var(--rd-text);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.rd-hero__link svg {
    transition: transform var(--rd-duration-base) var(--rd-ease-out);
}

.rd-hero__link:hover svg {
    transform: translateX(2px);
}

/* ---------- 4.5. Floating UI-карточка ---------- */
.rd-hero__card {
    position: absolute;
    z-index: 2;
    /* Правый нижний угол, не у самого края — есть воздух */
    right: var(--rd-gutter-mobile);
    bottom: var(--rd-space-8);

    width: min(320px, calc(100vw - var(--rd-gutter-mobile) * 2));
    padding: var(--rd-space-4) var(--rd-space-5);

    background-color: rgba(17, 17, 17, 0.78);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);

    border: var(--rd-border-1);
    border-radius: var(--rd-radius-lg);
    box-shadow:
        var(--rd-shadow-md),
        inset 0 1px 0 rgba(255,255,255,0.04); /* стеклянный блик сверху */

    /* Появление с задержкой после загрузки страницы — даёт ощущение "продукт работает" */
    opacity: 0;
    transform: translateY(8px);
    animation: rd-hero-card-in 600ms var(--rd-ease-out) 400ms forwards;
}

@media (min-width: 768px) {
    .rd-hero__card {
        right: var(--rd-gutter-desktop);
        bottom: var(--rd-space-12);
        padding: var(--rd-space-5) var(--rd-space-6);
    }
}

@keyframes rd-hero-card-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rd-hero__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--rd-space-3);
    padding-bottom: var(--rd-space-3);
    border-bottom: 1px solid var(--rd-border);
}

.rd-hero__card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--rd-text);
    letter-spacing: 0.005em;
}

.rd-hero__card-check {
    /* Зелёный success — единственный non-monochrome декор по DESIGN-TOKENS §1.4 */
    color: #22c55e;
    flex-shrink: 0;
}

.rd-hero__card-id {
    /* Mono-шрифт — только во floating-карточке (DESIGN-TOKENS §14.1) */
    font-family: var(--rd-font-mono);
    font-size: 11px;
    color: var(--rd-text-muted);
    letter-spacing: 0.02em;
}

.rd-hero__card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rd-space-3);
    margin: 0;
}

.rd-hero__card-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rd-hero__card-stat dt {
    font-size: 10px;
    font-weight: 500;
    color: var(--rd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rd-hero__card-stat dd {
    /* Mono для технических чисел — render time, frames, cost */
    font-family: var(--rd-font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--rd-text);
    margin: 0;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

/* На очень узком мобильном — карточка может перекрывать текст. Подвинем её
   ниже основной content или скроем — пока скроем на <480px */
@media (max-width: 479px) {
    .rd-hero__card {
        display: none;
    }
}

/* ---------- 4.6. Active scroll-spy state ---------- */
/* Подсветка активного пункта навигации (управляется JS через .rd-nav-link--active).
   Hover-цвет — оранжевый, по BRIEF "оранжевый только CTA и hover активного nav". */
.rd-nav-link.rd-nav-link--active {
    color: var(--rd-text);
}

.rd-nav-link.rd-nav-link--active:hover {
    color: var(--rd-accent);
}

/* Скрываем старый <section class="hero"> если он остался в DOM
   (на случай если при следующих сессиях исходник вернётся) */
body > section.hero,
body > section.section.hero {
    display: none !important;
}

/* ============================================================
   5. SOCIAL PROOF STRIP (сессия 4)
   ============================================================ */

.rd-strip {
    padding: 32px 0;
    background-color: var(--rd-bg);
    border-bottom: 1px solid var(--rd-border);
    overflow: hidden;
    font-family: var(--rd-font-sans);
}

.rd-strip__inner {
    max-width: var(--rd-container-max);
    margin: 0 auto;
    padding: 0 var(--rd-gutter-mobile);
}

@media (min-width: 768px) {
    .rd-strip__inner {
        padding: 0 var(--rd-gutter-desktop);
    }
}

/* Layout-only: типографика управляется через .rd-stat-label на родителе
   и .rd-stat-number на цифрах */
.rd-strip__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--rd-space-3) var(--rd-space-6);
    line-height: 1.4;
}

.rd-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.rd-strip__sep {
    color: var(--rd-text-subtle);
    user-select: none;
}

/* Мобильный marquee: на узких экранах список превращается в бесконечный
   горизонтальный скролл. JS дублирует содержимое и анимирует через transform. */
@media (max-width: 767px) {
    .rd-strip__inner {
        padding: 0;
        position: relative;
        /* Маска по краям — мягкое исчезновение текста на границах */
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0,
            #000 var(--rd-space-5),
            #000 calc(100% - var(--rd-space-5)),
            transparent 100%
        );
        mask-image: linear-gradient(
            90deg,
            transparent 0,
            #000 var(--rd-space-5),
            #000 calc(100% - var(--rd-space-5)),
            transparent 100%
        );
    }

    .rd-strip__list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: var(--rd-space-5);
        padding: 0 var(--rd-space-5);
        width: max-content;
        animation: rd-marquee 28s linear infinite;
    }

    .rd-strip__list[data-marquee-paused="true"] {
        animation-play-state: paused;
    }
}

@keyframes rd-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .rd-strip__list {
        animation: none !important;
    }
}

/* ============================================================
   6. HOW IT WORKS (сессия 4)
   ============================================================ */

.rd-howto {
    background-color: var(--rd-bg);
    color: var(--rd-text);
    font-family: var(--rd-font-sans);
}

.rd-howto__inner {
    max-width: var(--rd-container-max);
    margin: 0 auto;
    padding: 0 var(--rd-gutter-mobile);
}

@media (min-width: 768px) {
    .rd-howto__inner {
        padding: 0 var(--rd-gutter-desktop);
    }
}

/* ---------- 6.1. Заголовок секции ---------- */
/* Layout-only: типографика управляется через .rd-section-header / .rd-h2 / .rd-subtitle */
.rd-howto__header {
    text-align: center;
}

/* ---------- 6.2. Сетка шагов ---------- */
.rd-howto__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rd-space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .rd-howto__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--rd-space-5);
    }
}

@media (min-width: 1024px) {
    .rd-howto__steps {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--rd-space-5);
    }
}

/* ---------- 6.3. Карточка шага ---------- */
.rd-howto__step {
    position: relative;
    background-color: var(--rd-surface);
    /* Лёгкий градиент сверху — даёт глубину вместо монолитного серого */
    background-image: linear-gradient(
        180deg,
        rgba(255,255,255,0.025) 0%,
        rgba(255,255,255,0) 60%
    );
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-md);
    padding: var(--rd-space-6);
    overflow: hidden;
    transition: border-color var(--rd-duration-base) var(--rd-ease-out),
                background-color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-howto__step:hover {
    border-color: var(--rd-border-strong);
}

/* Большая фоновая нумерация 01–04 — Vercel-стиль, низкая прозрачность */
.rd-howto__num {
    position: absolute;
    top: var(--rd-space-3);
    right: var(--rd-space-4);
    font-family: var(--rd-font-mono);
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    color: var(--rd-text);
    opacity: 0.06;
    letter-spacing: -0.04em;
    pointer-events: none;
    user-select: none;
}

.rd-howto__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--rd-space-2);
    /* Резерв сверху, чтобы фоновая нумерация не залезала на label */
    padding-top: var(--rd-space-6);
}

/* Типографика на .rd-howto__label / .rd-howto__step-title / .rd-howto__desc
   управляется через общие классы .rd-eyebrow / .rd-card-title / .rd-card-body
   (см. блок ТИПОГРАФИКА выше). Здесь — только layout родителя. */

/* ---------- 6.4. Announcement bar (-20%) ---------- */
.rd-announce {
    /* Pill компактная по содержимому, центрирована относительно секции.
       width: fit-content делает её шириной по детям, margin: 0 auto центрирует. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rd-space-2);
    margin: var(--rd-space-12) auto 0;
    width: fit-content;
    padding: 8px 16px 8px 8px;
    background-color: var(--rd-bg-elevated);
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-pill);
    color: var(--rd-text-secondary);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    transition: border-color var(--rd-duration-base) var(--rd-ease-out),
                background-color var(--rd-duration-base) var(--rd-ease-out),
                color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-announce:hover {
    border-color: var(--rd-border-strong);
    background-color: var(--rd-surface-hover);
    color: var(--rd-text);
}

.rd-announce__pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background-color: rgba(249, 115, 22, 0.12);
    color: var(--rd-accent);
    border-radius: var(--rd-radius-xs);
    font-family: var(--rd-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    flex-shrink: 0;
}

.rd-announce__text {
    flex: 0 1 auto;
}

.rd-announce__arrow {
    flex-shrink: 0;
    transition: transform var(--rd-duration-base) var(--rd-ease-out);
}

.rd-announce:hover .rd-announce__arrow {
    transform: translateX(2px);
}

/* ============================================================
   7. APP PREVIEW (блок 4.5)
   ============================================================ */

.rd-app {
    background-color: var(--rd-bg);
    color: var(--rd-text);
    font-family: var(--rd-font-sans);
    overflow: hidden; /* отрезает уехавший за scale(0.95) тёмный шот */
}

/* ---------- 7.1. Шапка (центрирована, max-width 720px) ---------- */
.rd-app__copy {
    max-width: 720px;
    margin: 0 auto var(--rd-space-12);
    padding: 0 var(--rd-gutter-mobile);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--rd-space-3);
}

@media (min-width: 768px) {
    .rd-app__copy {
        padding: 0 var(--rd-gutter-desktop);
        margin-bottom: var(--rd-space-16);
    }
}

.rd-app__copy .rd-eyebrow {
    margin-bottom: var(--rd-space-1);
}

/* CTA + theme-toggle в один ряд, центрированы */
.rd-app__controls {
    display: flex;
    align-items: center;
    gap: var(--rd-space-4);
    margin-top: var(--rd-space-4);
    flex-wrap: wrap;
    justify-content: center;
}

/* Уравнивание высоты CTA и toggle — оба становятся ровно 36px,
   независимо от внутренних padding'ов. */
.rd-app__controls > .rd-app__cta,
.rd-app__controls > .rd-theme-toggle {
    min-height: 36px;
    box-sizing: border-box;
}

.rd-app__cta {
    margin-top: 0;
}

/* ---------- 7.3. Theme toggle (Dark | Light) ----------
   Сегментный контрол по дизайн-системе:
   рамка 1px var(--rd-border) на обёртке,
   --rd-radius-sm (6px), прозрачный фон.
   Активная кнопка получает заливку --rd-surface-hover. */
.rd-theme-toggle {
    display: inline-flex;
    padding: 3px;
    background-color: transparent;
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-sm);
    gap: 2px;
}

.rd-theme-toggle__btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--rd-text-secondary);
    font-family: var(--rd-font-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 7px 14px;
    /* radius-xs (4px) у внутренних кнопок — на 2px меньше внешней рамки,
       чтобы заливка активной кнопки красиво вписывалась с зазором 3px. */
    border-radius: var(--rd-radius-xs);
    cursor: pointer;
    transition: background-color var(--rd-duration-base) var(--rd-ease-out),
                color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-theme-toggle__btn:hover {
    color: var(--rd-text);
}

.rd-theme-toggle__btn[aria-selected="true"] {
    background-color: var(--rd-surface-hover);
    color: var(--rd-text);
}


/* ---------- 7.4. Stage (один шот по выбранной теме) ----------
   Ширина stage больше шапки: используем --rd-container-wide (1440px) с
   небольшим gutter по бокам. На очень больших экранах останется воздух,
   на средних шот занимает почти всю ширину viewport. */
.rd-app__stage {
    position: relative;
    width: 100%;
    max-width: var(--rd-container-wide);
    margin: 0 auto;
    padding: 0 var(--rd-gutter-mobile);
    /* Пропорция PNG скриншотов 2481x1584 ≈ 1.566. aspect-ratio считается
       по box-area без padding — поэтому реальная высота = (width - 2*gutter) / 1.566.
       Это нормально, padding визуально становится воздухом по бокам шота. */
    aspect-ratio: 2481 / 1584;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .rd-app__stage {
        padding: 0 var(--rd-gutter-desktop);
    }
}

/* PNG скриншоты — RGBA с прозрачными полями. НЕ заливаем фон,
   НЕ рисуем рамку, НЕ ставим box-shadow — иначе они нарисуются по
   прямоугольнику картинки, а не по реальному силуэту окна.
   Любые тени/скругления уже запечены в самих PNG. */
.rd-app__shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    transition: opacity var(--rd-duration-base) var(--rd-ease-out);
}

/* Видимость зависит от data-theme на родителе stage.
   Fade-cross 200ms через transition: opacity. */
.rd-app__stage[data-theme="dark"] .rd-app__shot--dark {
    opacity: 1;
    z-index: 2;
}
.rd-app__stage[data-theme="dark"] .rd-app__shot--light {
    opacity: 0;
    z-index: 1;
}
.rd-app__stage[data-theme="light"] .rd-app__shot--light {
    opacity: 1;
    z-index: 2;
}
.rd-app__stage[data-theme="light"] .rd-app__shot--dark {
    opacity: 0;
    z-index: 1;
}

/* Оранжевое свечение между окнами — radial-gradient в центре */
.rd-app__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 60% 50% at 50% 60%,
        rgba(249, 115, 22, 0.06) 0%,
        rgba(249, 115, 22, 0) 70%
    );
}

/* ---------- 7.3. Floating-карточка терминала ---------- */
.rd-app__terminal {
    position: absolute;
    z-index: 3;
    /* В правом верхнем углу шота. Слегка смещён от верхнего края
       (-12px), чтобы создать эффект "плавающей подсказки", не убегая
       при этом за viewport на средних экранах (~1152px). */
    top: -12px;
    right: 12px;

    background-color: var(--rd-surface);
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-md);
    padding: 16px 20px;
    box-shadow:
        var(--rd-shadow-md),
        inset 0 1px 0 rgba(255,255,255,0.04);

    font-family: var(--rd-font-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--rd-text-muted);
    white-space: nowrap;

    /* Появление с задержкой */
    opacity: 0;
    transform: translateY(8px);
    animation: rd-app-terminal-in 600ms var(--rd-ease-out) 300ms forwards;
}

.rd-app__terminal-line {
    color: var(--rd-text-muted); /* #6b6b6b */
}

.rd-app__terminal-cmd {
    color: var(--rd-text); /* #f5f5f5 — команда выделена */
    margin-bottom: 4px;
}

@keyframes rd-app-terminal-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Уменьшенный терминал на промежуточных размерах, чтобы не выходил за макет */
@media (max-width: 1199px) and (min-width: 640px) {
    .rd-app__terminal {
        font-size: 12px;
        padding: 12px 16px;
    }
}

/* На узких экранах терминал перекрывает большую часть шота и теряет читаемость —
   скрываем, оставляя только сам скриншот. */
@media (max-width: 639px) {
    .rd-app__terminal {
        display: none;
    }
}

/* ============================================================
   8. PRICING (сессия 5)
   ============================================================ */

.rd-pricing {
    background-color: var(--rd-bg);
    color: var(--rd-text);
    font-family: var(--rd-font-sans);
}

.rd-pricing__inner {
    max-width: var(--rd-container-max);
    margin: 0 auto;
    padding: 0 var(--rd-gutter-mobile);
}

@media (min-width: 768px) {
    .rd-pricing__inner {
        padding: 0 var(--rd-gutter-desktop);
    }
}

/* Скрываем старую секцию исходника — у нас теперь rd-pricing */
body > section.pricing,
body > section.section.pricing {
    display: none !important;
}

/* ---------- 8.1. Header секции ---------- */
.rd-pricing__header {
    text-align: center;
}

/* ---------- 8.2. Сетка карточек ---------- */
.rd-pricing__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rd-space-4);
}

@media (min-width: 768px) {
    .rd-pricing__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--rd-space-5);
        align-items: stretch;
    }
}

/* ---------- 8.3. Карточка тарифа ---------- */
.rd-pricing__card {
    position: relative;
    background-color: var(--rd-surface);
    background-image: linear-gradient(
        180deg,
        rgba(255,255,255,0.025) 0%,
        rgba(255,255,255,0) 60%
    );
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-md);
    padding: var(--rd-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--rd-space-5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-pricing__card:hover {
    border-color: var(--rd-border-strong);
}

/* Featured карточка (PLUS) — выделена только усиленной границей и
   pill-меткой "Most popular" сверху. Без оранжевого glow по решению владельца. */
.rd-pricing__card--featured {
    border-color: var(--rd-border-strong);
}

/* Most popular pill — над карточкой (паттерн Stripe).
   Свешивается за верхний край на половину своей высоты, по центру. */
.rd-pricing__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--rd-bg-elevated);
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-pill);
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-text-secondary);
    line-height: 1;
    white-space: nowrap;
}

/* ---------- 8.4. Шапка карточки (название + tagline) ---------- */
.rd-pricing__card-head {
    display: flex;
    flex-direction: column;
    gap: var(--rd-space-1);
}

.rd-pricing__plan-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--rd-text);
}

.rd-pricing__plan-tagline {
    margin: 0;
    font-size: 13px;
    color: var(--rd-text-muted);
    line-height: 1.4;
}

/* ---------- 8.5. Цена ---------- */
.rd-pricing__price {
    display: flex;
    align-items: baseline;
    gap: var(--rd-space-2);
    line-height: 1;
}

.rd-pricing__price-amount {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--rd-text);
}

.rd-pricing__price-period {
    font-size: 16px;
    font-weight: 500;
    color: var(--rd-text-secondary);
}

.rd-pricing__price-meta {
    display: flex;
    align-items: center;
    gap: var(--rd-space-2);
    font-size: 12px;
    color: var(--rd-text-muted);
    margin-top: -8px;
}

.rd-pricing__price-unit {
    color: var(--rd-text-secondary);
}

.rd-pricing__price-vat {
    color: var(--rd-text-muted);
    /* Тонкий разделитель перед VAT */
    padding-left: var(--rd-space-2);
    border-left: 1px solid var(--rd-border);
}

/* ---------- 8.6. Список фичей ---------- */
.rd-pricing__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rd-space-3);
    flex: 1; /* растягивает до низа карточки, чтобы CTA выровнялись на одной линии */
}

.rd-pricing__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--rd-space-3);
    font-size: 13px;
    line-height: 1.55;
    color: var(--rd-text-secondary);
}

.rd-pricing__feature strong {
    color: var(--rd-text);
    font-weight: 600;
}

.rd-pricing__check {
    flex-shrink: 0;
    margin-top: 4px;
    /* Без декоративного цвета — белая/серая по DESIGN-TOKENS.
       Используем currentColor с затемнением через muted color. */
    color: var(--rd-text-secondary);
}

/* ---------- 8.7. CTA-кнопка ---------- */
.rd-pricing__cta {
    width: 100%;
    /* Поверх стандартного rd-btn — увеличиваем padding для веса */
    padding: 12px 18px;
    font-size: 14px;
    margin-top: 0;
}

/* ---------- 8.8. Footer (платежи + VAT-сноска) ---------- */
.rd-pricing__footer {
    margin-top: var(--rd-space-12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rd-space-5);
}

.rd-pricing__payments {
    display: flex;
    align-items: center;
    gap: var(--rd-space-4);
}

.rd-pricing__payments-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-text-muted);
}

/* Платёжные badges — текстовые pill-метки вместо SVG-логотипов.
   Минималистичный паттерн: рамка + label, бренд читается типографикой. */
.rd-pricing__payment-badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--rd-space-2);
}

.rd-pricing__payment-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-xs);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--rd-text-secondary);
    background-color: var(--rd-bg-elevated);
    line-height: 1.4;
    user-select: none;
    transition: color var(--rd-duration-base) var(--rd-ease-out),
                border-color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-pricing__payment-badge:hover {
    color: var(--rd-text);
    border-color: var(--rd-border-strong);
}

.rd-pricing__vat-note {
    margin: 0;
    max-width: 640px;
    text-align: center;
    font-size: 12px;
    line-height: 1.55;
    color: var(--rd-text-muted);
}

/* ============================================================
   9. RENDER SPECS (сессия 6)
   ============================================================ */

.rd-specs {
    background-color: var(--rd-bg);
    color: var(--rd-text);
    font-family: var(--rd-font-sans);
}

.rd-specs__inner {
    max-width: var(--rd-container-max);
    margin: 0 auto;
    padding: 0 var(--rd-gutter-mobile);
}

@media (min-width: 768px) {
    .rd-specs__inner {
        padding: 0 var(--rd-gutter-desktop);
    }
}

/* ---------- 9.1. Header секции ---------- */
.rd-specs__header {
    text-align: center;
}

/* ---------- 9.2. Список аккордеона ----------
   Single-column, тонкие 1px разделители между пунктами вместо
   прямоугольных карточек (паттерн Linear/Vercel FAQ). */
.rd-specs__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 880px;
    /* Внешняя 1px рамка задаёт верхний и нижний край списка */
    border-top: var(--rd-border-1);
    border-bottom: var(--rd-border-1);
}

.rd-specs__item {
    /* Между пунктами — 1px разделитель.
       Не на последнем элементе (там уже border-bottom списка). */
    border-bottom: var(--rd-border-1);
}

.rd-specs__item:last-child {
    border-bottom: none;
}

/* ---------- 9.3. Кликабельный заголовок пункта ---------- */
.rd-specs__head {
    /* Resetting button defaults */
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;

    /* Layout */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rd-space-4);
    padding: 20px 4px;
    text-align: left;

    transition: color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-specs__head:hover .rd-specs__title {
    color: var(--rd-text);
}

.rd-specs__head:hover .rd-specs__chevron {
    color: var(--rd-text);
}

/* Заголовок пункта: rd-card-title уже даёт типографику (18px / 600 / -0.005em).
   Здесь — только цвет и transition. По умолчанию чуть приглушён, чтобы
   активный пункт читался явнее. */
.rd-specs__title {
    color: var(--rd-text);
    transition: color var(--rd-duration-base) var(--rd-ease-out);
    flex: 1 1 auto;
}

/* ---------- 9.4. Chevron ---------- */
.rd-specs__chevron {
    flex-shrink: 0;
    color: var(--rd-text-secondary);
    transition: transform var(--rd-duration-base) var(--rd-ease-out),
                color var(--rd-duration-base) var(--rd-ease-out);
}

/* Когда .js-specs-card получает .is-active (ставит JS на клик):
   - chevron переворачивается на 180° (вверх)
   - заголовок становится белым (а не приглушённым) */
.rd-specs__item.is-active .rd-specs__chevron {
    transform: rotate(180deg);
    color: var(--rd-text);
}

/* ---------- 9.5. Body — анимация раскрытия ----------
   Используем grid-template-rows: 0fr → 1fr.
   Это modern CSS-аккордеон без необходимости знать высоту контента.
   Браузерная поддержка: Chrome 117+, Safari 17.4+, Firefox 127+. */
.rd-specs__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--rd-duration-slow, 320ms) var(--rd-ease-out);
}

.rd-specs__item.is-active .rd-specs__body {
    grid-template-rows: 1fr;
}

.rd-specs__body-inner {
    /* min-height: 0 нужно чтобы grid-row 0fr фактически был 0px,
       иначе содержимое всё равно занимает min-content. */
    min-height: 0;
    overflow: hidden;
    /* Внутренний padding снизу для воздуха перед закрывающей чертой */
    padding-bottom: 0;
    transition: padding-bottom var(--rd-duration-slow, 320ms) var(--rd-ease-out);
}

.rd-specs__item.is-active .rd-specs__body-inner {
    padding-bottom: 20px;
}

/* ---------- 9.6. Текст внутри body ----------
   .rd-card-body уже даёт 14px / 1.6 / --rd-text-secondary.
   Здесь — только спейсинг между параграфами и max-width для удобного чтения. */
.rd-specs__text {
    max-width: 720px;
}

.rd-specs__text + .rd-specs__text {
    margin-top: var(--rd-space-3);
}

/* ============================================================
   10. CALCULATOR V2 (сессия 8)
   Архитектура: ввод слева, результат+тарифы+CTA справа.
   Полностью соответствует дизайн-системе:
   - Оранжевый только в CTA (DS §1.3, §1.4.1)
   - Все границы 1px var(--rd-border) (DS §5)
   - Все радиусы из шкалы (DS §4)
   - Inter / JetBrains Mono из var(--rd-font-*) (DS §2.1)
   - Spacing на шкале var(--rd-space-*) (DS §3)
   ============================================================ */

.rd-calc {
    background-color: var(--rd-bg);
    color: var(--rd-text);
    font-family: var(--rd-font-sans);
}

.rd-calc__inner {
    max-width: var(--rd-container-max);
    margin: 0 auto;
    padding: 0 var(--rd-gutter-mobile);
}

@media (min-width: 768px) {
    .rd-calc__inner {
        padding: 0 var(--rd-gutter-desktop);
    }
}

/* Скрываем старую секцию исходника */
body > section.calculator,
body > section.section.calculator {
    display: none !important;
}

/* ---------- 10.1. Header секции ---------- */
.rd-calc__header {
    text-align: center;
}

/* ---------- 10.2. Карточка-контейнер ---------- */
.rd-calc__card {
    background-color: var(--rd-surface);
    background-image: linear-gradient(
        180deg,
        rgba(255,255,255,0.025) 0%,
        rgba(255,255,255,0) 60%
    );
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-lg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .rd-calc__card {
        /* Левая (ввод) и правая (результат+тарифы+CTA) — равные колонки.
           Концепт V2 использует 1.15:1 — округляем до 1:1, ритм симметричнее. */
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- 10.3. Панели ---------- */
/* Внутренний ритм панели задаётся точечными margin'ами на элементах
   (см. .rd-calc__hero, .rd-calc__tariffs, .rd-calc__bottom, .rd-calc__panel-foot),
   а не общим gap. Так концепт может задавать разные расстояния между блоками
   (head → hero ≠ hero → tariffs ≠ tariffs → bottom), что невозможно при общем gap. */
.rd-calc__panel {
    padding: var(--rd-space-6);
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .rd-calc__panel {
        padding: var(--rd-space-8);
    }
}

/* Разделитель между панелями: горизонтальный на мобиле, вертикальный на десктопе. */
.rd-calc__panel--right {
    border-top: var(--rd-border-1);
}

@media (min-width: 1024px) {
    .rd-calc__panel--right {
        border-top: none;
        border-left: var(--rd-border-1);
    }
}

/* ---------- 10.4. Шапка панели (eyebrow + опциональный pill) ---------- */
.rd-calc__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rd-space-3);
    /* margin снизу до следующего блока (hero справа, form слева). */
    margin-bottom: var(--rd-space-5);
}

.rd-calc__panel-title {
    margin: 0;
    /* типографику даёт rd-eyebrow */
}

/* "Live estimate · EUR" pill — статический индикатор справа в шапке левой панели. */
.rd-calc__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-space-2);
    padding: 5px 10px;
    background-color: var(--rd-surface-2);
    border: var(--rd-border-1);
    border-radius: 999px;
    font-size: 11px;
    color: var(--rd-text-secondary);
    letter-spacing: 0.02em;
    line-height: 1;
}

.rd-calc__pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--rd-accent);
    flex-shrink: 0;
}

/* ---------- 10.5. Форма (ввод) ---------- */
.rd-calc__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rd-space-4) var(--rd-space-4);
}

@media (min-width: 640px) {
    .rd-calc__form {
        /* 50/50 — все четыре поля симметричны:
           GPU Model | # GPUs
           Frame count | Time per frame */
        grid-template-columns: 1fr 1fr;
    }
}

.rd-calc__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rd-calc__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--rd-text-secondary);
    line-height: 1.4;
}

/* ---------- 10.6. Инпуты и select ---------- */
.rd-calc__input,
.rd-calc__select {
    appearance: none;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background-color: var(--rd-surface-2);
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-sm);
    color: var(--rd-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color var(--rd-duration-base) var(--rd-ease-out),
                box-shadow var(--rd-duration-base) var(--rd-ease-out);
}

.rd-calc__input::placeholder {
    color: var(--rd-text-muted);
}

/* Подавление browser autofill — Chrome/Edge при срабатывании autofill красит
   фон в светло-жёлтый/белый, что разрушает тёмную палитру калькулятора.
   Трюк: бесконечный inset box-shadow цвета фона + transition на 9999s,
   чтобы анимация смены фона никогда не успевала отработать. */
.rd-calc__input:-webkit-autofill,
.rd-calc__select:-webkit-autofill,
.rd-calc__stepper-input:-webkit-autofill,
.rd-calc__time-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--rd-surface-2) inset !important;
    -webkit-text-fill-color: var(--rd-text) !important;
    caret-color: var(--rd-text);
    transition: background-color 9999s ease-out, color 9999s ease-out;
}

/* Time-cell имеет прозрачный input поверх ячейки — autofill заливал бы
   только сам input. На него тот же приём, но фон transparent (фон рисует ячейка). */
.rd-calc__time-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
}

/* Stepper-input тоже прозрачный — фон рисует .rd-calc__stepper. */
.rd-calc__stepper-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
}

.rd-calc__input:focus,
.rd-calc__select:focus {
    outline: none;
    border-color: var(--rd-accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

/* Кастомная стрелка для select */
.rd-calc__select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23a3a3a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.rd-calc__select::-ms-expand { display: none; }

.rd-calc__select option,
.rd-calc__select optgroup {
    background-color: var(--rd-surface-2);
    color: var(--rd-text);
}

/* Стилизация скроллбара внутри dropdown'а нативного select.
   Firefox — поддерживается стабильно через scrollbar-width/color.
   Chrome/Edge на Windows — выпадающий список рисуется ОС, ::-webkit-scrollbar
   на нём не применяется надёжно, но мы пробуем — на Mac/некоторых конфигах работает.
   Если в Chrome on Windows скролл всё равно белый — это ограничение нативного select,
   обходится только полной заменой на кастомный dropdown. */
.rd-calc__select {
    scrollbar-width: thin;
    scrollbar-color: var(--rd-border-strong) transparent;
}

.rd-calc__select::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.rd-calc__select::-webkit-scrollbar-track {
    background: transparent;
}

.rd-calc__select::-webkit-scrollbar-thumb {
    background-color: var(--rd-border-strong);
    border-radius: 4px;
    border: 2px solid var(--rd-surface-2);
}

.rd-calc__select::-webkit-scrollbar-thumb:hover {
    background-color: var(--rd-text-muted);
}

/* ---------- 10.6.5. Custom GPU dropdown ---------- */
/* Нативный <select> в Chrome on Windows не позволяет стилизовать hover/выделение
   опций (они рисуются ОС). Мы скрываем его и рисуем кастомный listbox.
   Скрытый select остаётся state holder'ом для script.js. */

/* Wrapper — relative для absolute-позиционирования listbox */
.rd-calc__gpu {
    position: relative;
}

/* Скрытый нативный select — visually-hidden но остаётся в DOM.
   tabindex=-1 убирает из Tab-цепочки (фокус идёт только на trigger).
   Активируется только когда rd-calc.js успешно инициализировал dropdown
   (через атрибут data-gpu-ready на wrapper'е). До этого — нативный select
   виден как fallback. */
.rd-calc__gpu[data-gpu-ready] > .rd-calc__select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Trigger — кнопка-замена нативного select. По умолчанию скрыт,
   показывается только когда JS готов (защита от FOUC). */
.rd-calc__gpu-trigger {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--rd-space-3);
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background-color: var(--rd-surface-2);
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-sm);
    color: var(--rd-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--rd-duration-base) var(--rd-ease-out),
                box-shadow var(--rd-duration-base) var(--rd-ease-out);
}

.rd-calc__gpu[data-gpu-ready] > .rd-calc__gpu-trigger {
    display: inline-flex;
}

.rd-calc__gpu-trigger:focus-visible {
    outline: none;
    border-color: var(--rd-accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

/* Open-state — оранжевый focus-stroke даже без focus-visible */
.rd-calc__gpu-trigger[aria-expanded="true"] {
    border-color: var(--rd-accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

/* Placeholder text (когда не выбрано) — приглушённый */
.rd-calc__gpu-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-calc__gpu-value[data-placeholder] {
    color: var(--rd-text-muted);
}

/* Chevron — поворачивается на 180° когда listbox открыт */
.rd-calc__gpu-chevron {
    flex-shrink: 0;
    color: var(--rd-text-muted);
    transition: transform var(--rd-duration-base) var(--rd-ease-out);
}

.rd-calc__gpu-trigger[aria-expanded="true"] .rd-calc__gpu-chevron {
    transform: rotate(180deg);
}

/* Listbox — выпадающий список. По умолчанию hidden (через атрибут).
   Показывается через [hidden] override + opacity-анимация. */
.rd-calc__gpu-listbox {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--rd-z-dropdown, 100);
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--rd-surface);
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-sm);
    box-shadow: var(--rd-shadow-lg, 0 24px 60px rgba(0,0,0,0.6));
    padding: var(--rd-space-2) 0;
    /* Тонкий скроллбар внутри listbox — наш, не системный */
    scrollbar-width: thin;
    scrollbar-color: var(--rd-border-strong) transparent;
}

.rd-calc__gpu-listbox[hidden] {
    display: none;
}

/* Webkit-scrollbar внутри listbox — здесь работает (это обычный div) */
.rd-calc__gpu-listbox::-webkit-scrollbar {
    width: 8px;
}

.rd-calc__gpu-listbox::-webkit-scrollbar-track {
    background: transparent;
}

.rd-calc__gpu-listbox::-webkit-scrollbar-thumb {
    background-color: var(--rd-border-strong);
    border-radius: 4px;
    border: 2px solid var(--rd-surface);
}

.rd-calc__gpu-listbox::-webkit-scrollbar-thumb:hover {
    background-color: var(--rd-text-muted);
}

/* Группа (NVIDIA RTX 50 Series) — заголовок-eyebrow */
.rd-calc__gpu-group {
    padding: var(--rd-space-3) var(--rd-space-4) var(--rd-space-1);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-text-muted);
    pointer-events: none;
}

/* Опция — RTX 5090, RTX 5080, ... */
.rd-calc__gpu-option {
    display: block;
    padding: 8px var(--rd-space-4);
    font-size: 14px;
    color: var(--rd-text);
    cursor: pointer;
    transition: background-color var(--rd-duration-fast, 120ms) var(--rd-ease-out);
}

.rd-calc__gpu-option:hover,
.rd-calc__gpu-option[data-active] {
    background-color: var(--rd-surface-hover);
}

.rd-calc__gpu-option[aria-selected="true"] {
    background-color: var(--rd-surface-hover);
    color: var(--rd-text);
    font-weight: 500;
}

/* "Select a graphics card" — placeholder option, отдельной группы.
   Тонко отделён от первой группы. */
.rd-calc__gpu-option--placeholder {
    color: var(--rd-text-muted);
    border-bottom: var(--rd-border-1);
    margin-bottom: var(--rd-space-1);
}

/* ---------- 10.7. Stepper (Number of GPUs) ---------- */
/* Wrapper над <input id="card-count"> — JS логика не тронута,
   обработчики −/+ в rd-calc.js дисптатят 'input' на тот же input. */
.rd-calc__stepper {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    height: 44px;
    background-color: var(--rd-surface-2);
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-sm);
    overflow: hidden;
    transition: border-color var(--rd-duration-base) var(--rd-ease-out),
                box-shadow var(--rd-duration-base) var(--rd-ease-out);
}

.rd-calc__stepper:focus-within {
    border-color: var(--rd-accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

.rd-calc__stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--rd-text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color var(--rd-duration-base) var(--rd-ease-out),
                background-color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-calc__stepper-btn:hover {
    color: var(--rd-text);
    background-color: var(--rd-surface-hover);
}

.rd-calc__stepper-input {
    appearance: none;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    border-left: var(--rd-border-1);
    border-right: var(--rd-border-1);
    color: var(--rd-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 0;
}

.rd-calc__stepper-input:focus {
    outline: none;
}

/* ---------- 10.8. Time per frame (Hrs / Min / Sec) ---------- */
.rd-calc__time {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rd-space-2);
}

.rd-calc__time-cell {
    position: relative;
    height: 44px;
    background-color: var(--rd-surface-2);
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-sm);
    transition: border-color var(--rd-duration-base) var(--rd-ease-out),
                box-shadow var(--rd-duration-base) var(--rd-ease-out);
}

.rd-calc__time-cell:focus-within {
    border-color: var(--rd-accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

.rd-calc__time-input {
    appearance: none;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--rd-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 0 38px 0 12px;
}

.rd-calc__time-input::placeholder {
    color: var(--rd-text-muted);
}

.rd-calc__time-input:focus {
    outline: none;
}

/* Unit-лейбл (Hrs / Min / Sec) — внутри ячейки, справа */
.rd-calc__time-unit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 500;
    color: var(--rd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    pointer-events: none;
}

/* ---------- 10.9. Footer левой панели (Clear all) ---------- */
.rd-calc__panel-foot {
    display: flex;
    justify-content: flex-end;
    /* margin-top: auto — прижимает Reset к низу левой панели,
       выравнивая её высоту с правой. */
    margin-top: auto;
    padding-top: var(--rd-space-4);
}

.rd-calc__reset {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-space-2);
    background: transparent;
    border: none;
    color: var(--rd-text-muted);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    transition: color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-calc__reset:hover {
    color: var(--rd-text);
}

.rd-calc__reset svg {
    flex-shrink: 0;
}

/* ---------- 10.10. Hero-tile с результатом (правая панель) ---------- */
/* Главный визуальный блок — результат расчёта (СРАВНЕНИЕ ВРЕМЕНИ).
   По DS §1.4.1 оранжевый glow внутри карточек запрещён → нейтральный фон
   + усиленная граница + inset-highlight (DS §6).

   Сетка: 2 колонки × 3 строки. Левая (PlatonicFarm) и правая (Your PC) —
   симметричные, обе на одной шкале:
     row 1: label (uppercase eyebrow)
     row 2: value (число времени)
     row 3: sub-caption (подпись)
   Все три ряда — auto height по самому высокому элементу в ряду,
   так лейблы / числа / подписи слева и справа всегда на одной высоте. */
.rd-calc__hero {
    background-color: var(--rd-surface-2);
    border: 1px solid var(--rd-border-strong);
    border-radius: var(--rd-radius-md);
    padding: var(--rd-space-5) var(--rd-space-6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--rd-space-4);
    row-gap: var(--rd-space-2);
}

/* Левая колонка (main) — выравнивание по левому краю */
.rd-calc__hero-main { display: contents; }
.rd-calc__hero-main > .rd-calc__hero-label { grid-column: 1; grid-row: 1; }
.rd-calc__hero-main > .rd-calc__hero-value { grid-column: 1; grid-row: 2; }
.rd-calc__hero-main > .rd-calc__hero-sub   { grid-column: 1; grid-row: 3; }

/* Правая колонка (vs) — выравнивание по правому краю */
.rd-calc__hero-vs { display: contents; }
.rd-calc__hero-vs > .rd-calc__hero-label    { grid-column: 2; grid-row: 1; text-align: right; }
.rd-calc__hero-vs > .rd-calc__hero-vs-value { grid-column: 2; grid-row: 2; text-align: right; }
.rd-calc__hero-vs > .rd-calc__hero-vs-cap   { grid-column: 2; grid-row: 3; text-align: right; }

/* Лейблы (PLATONICFARM / YOUR PC) — единая типографика, одна высота */
.rd-calc__hero-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-text-muted);
    line-height: 1;
    margin: 0;
}

/* Главные числа времени — обе стороны одинакового размера и веса.
   Inter (не mono): крупные числа на сайте идут на Inter (Hero H1, цены тарифов). */
.rd-calc__hero-value,
.rd-calc__hero-vs-value {
    font-family: var(--rd-font-sans);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--rd-text);
    margin: 0;
    transition: color var(--rd-duration-base) var(--rd-ease-out),
                opacity var(--rd-duration-base) var(--rd-ease-out);
}

/* Правое (Your PC) — чуть более тихое: secondary, чтобы PlatonicFarm читался
   как главное число. При этом размер и вес одинаковые. */
.rd-calc__hero-vs-value {
    color: var(--rd-text-secondary);
}

/* Empty-state — заменяем число на placeholder-фразу "Awaiting input".
   Делается через ::before над пустым (visibility: hidden) числом —
   так высота сохраняется, hero не прыгает при появлении значения.
   Сам текст числа скрыт через visibility, ::before рисуется поверх. */
.rd-calc__hero-value[data-empty],
.rd-calc__hero-vs-value[data-empty] {
    position: relative;
    visibility: hidden;
}

.rd-calc__hero-value[data-empty]::before,
.rd-calc__hero-vs-value[data-empty]::before {
    content: 'Awaiting input';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    visibility: visible;
    /* Тихий, тонкий, прозрачный плейсхолдер */
    font-family: var(--rd-font-sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-text-subtle);
    opacity: 0.7;
    white-space: nowrap;
}

/* Левый плейсхолдер — слева, правый — справа (под значениями) */
.rd-calc__hero-value[data-empty]::before { left: 0; }
.rd-calc__hero-vs-value[data-empty]::before { right: 0; }

/* Подписи (total render time / render time) — одинаковая типографика,
   одна высота, на одном уровне в row 3. */
.rd-calc__hero-sub,
.rd-calc__hero-vs-cap {
    font-size: 11px;
    font-weight: 500;
    color: var(--rd-text-muted);
    line-height: 1;
    letter-spacing: 0.02em;
    margin: 0;
    text-transform: none;
}

/* ---------- 10.11. Тарифы (info-таблица под hero) ---------- */
/* margin-top 14px — концепт: hero → plansHead = 14px, не общий gap панели. */
.rd-calc__tariffs {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
}

.rd-calc__tariff {
    display: grid;
    grid-template-columns: 1fr 80px 96px;
    align-items: center;
    column-gap: var(--rd-space-3);
    padding: var(--rd-space-3) var(--rd-space-4);
    border-bottom: 1px solid var(--rd-divider);
}

.rd-calc__tariff:last-child {
    border-bottom: none;
}

/* Header строка таблицы — eyebrow-стилистика, разделитель снизу */
.rd-calc__tariff--head {
    padding: 0 var(--rd-space-4) var(--rd-space-2);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-text-muted);
    border-bottom: var(--rd-border-1);
}

/* Featured строка Plus — нейтральный стиль (концепт V2 не выделяет Plus отдельно,
   но в DS-варианте оставляем eyebrow-divider'ы между всеми тремя строками одинаковыми). */

.rd-calc__tariff-rate,
.rd-calc__tariff-total,
.rd-calc__tariff-total-head {
    text-align: right;
}

.rd-calc__tariff--head > span:nth-child(2) {
    text-align: right;
}

.rd-calc__tariff-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rd-calc__tariff-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--rd-text);
}

.rd-calc__tariff-cond {
    font-size: 11px;
    color: var(--rd-text-muted);
}

.rd-calc__tariff-rate {
    font-family: var(--rd-font-mono);
    font-size: 13px;
    color: var(--rd-text-secondary);
}

.rd-calc__tariff-total {
    font-family: var(--rd-font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--rd-text);
}

/* ---------- 10.12. Низ правой панели (промо + CTA) ---------- */
/* margin-top: auto прижимает блок к низу панели, выравнивая высоту правой и левой.
   padding-top: 18px — концепт: tariffs → bottom внутренний padding (без gap панели). */
.rd-calc__bottom {
    margin-top: auto;
    padding-top: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rd-space-3);
    align-items: center;
}

@media (min-width: 640px) {
    .rd-calc__bottom {
        /* Промо-полоска занимает остаток, CTA — fixed-width. */
        grid-template-columns: 1fr auto;
    }
}

/* Announcement-полоска "−20% for new users · applied at checkout".
   Полностью нейтральная (DS §1.4.1, §12.5): фон --rd-bg-elevated, без оранжевой заливки.
   Акцент только на цифре −20% — bold белым (DS §12.5). */
.rd-calc__promo {
    display: flex;
    align-items: center;
    gap: var(--rd-space-3);
    height: 44px;
    padding: 0 var(--rd-space-4);
    background-color: var(--rd-bg-elevated);
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-sm);
    font-size: 13px;
    color: var(--rd-text-secondary);
    line-height: 1.2;
}

.rd-calc__promo-tag {
    font-weight: 700;
    color: var(--rd-text);
    letter-spacing: 0.01em;
}

/* CTA "Start rendering" — главная оранжевая кнопка (DS §12.1).
   Единственное использование оранжевого внутри блока. */
.rd-calc__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rd-space-2);
    height: 44px;
    padding: 0 var(--rd-space-5);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 639px) {
    .rd-calc__cta {
        width: 100%;
    }
}

/* ---------- 10.13. Disclaimer ---------- */
.rd-calc__disclaimer {
    margin: var(--rd-space-6) auto 0;
    max-width: 720px;
    text-align: left;
    font-size: 12px;
    line-height: 1.6;
    color: var(--rd-text-muted);
    opacity: 0.6;
}

.rd-calc__disclaimer p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* ============================================================
   11. WHY CHOOSE — Блок 6.5
   Сетка 4×1 (десктоп) → 2×2 (планшет) → 1×4 (мобила).
   Карточка-«панель» по системе: тонкая граница, лёгкий
   градиент сверху, inset-highlight в 1px. Иконка — Lucide
   line 20px, цвет --rd-text-secondary (не оранжевая).
   ============================================================ */

.rd-why__container {
    max-width: var(--rd-container-max);
    margin: 0 auto;
    padding: 0 var(--rd-gutter-mobile);
}

@media (min-width: 768px) {
    .rd-why__container {
        padding: 0 var(--rd-gutter-desktop);
    }
}

.rd-why__header {
    text-align: center;
}

.rd-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rd-space-4);
}

@media (min-width: 640px) {
    .rd-why__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .rd-why__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--rd-space-5);
    }
}

.rd-why__card {
    padding: var(--rd-space-8);
    background-color: var(--rd-surface);
    background-image: linear-gradient(
        180deg,
        rgba(255,255,255,0.02) 0%,
        rgba(255,255,255,0) 100%
    );
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-md);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
    gap: var(--rd-space-4);
}

.rd-why__icon {
    width: 20px;
    height: 20px;
    color: var(--rd-text-secondary);
    flex-shrink: 0;
}

/* ============================================================
   12. CLIENT WORK — Блок 7
   Bento-сетка: 5 landscape-плиток 16:9 + 1 portrait-плитка
   1col × 2rows. Hover: scale(1.02) + затемнение + появление
   круглой play-кнопки в центре. Тонкая рамка 1px по системе.
   ============================================================ */

.rd-portfolio__container {
    max-width: var(--rd-container-max);
    margin: 0 auto;
    padding: 0 var(--rd-gutter-mobile);
}

@media (min-width: 768px) {
    .rd-portfolio__container {
        padding: 0 var(--rd-gutter-desktop);
    }
}

.rd-portfolio__header {
    text-align: center;
}

/* ---------- 12.1. Сетка ---------- */
/* Все 6 плиток 16:9. Десктоп — 3 кол × 2 ряда (6 ячеек). На планшете
   2 кол × 3 ряда. На мобиле 1 колонка. Portrait-видео занимает обычную
   16:9 ячейку — кропается через object-fit:cover (черные летербоксы YouTube
   уходят за границы кадра).

   Сбрасываем list-style/margin/padding на rd-классе, чтобы не ломать
   .portfolio__grid из current-site/style.css. */
.rd-portfolio__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rd-space-3);
}

@media (min-width: 640px) {
    .rd-portfolio__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .rd-portfolio__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--rd-space-4);
    }
}

/* ---------- 12.2. Карточка ---------- */
/* Все плитки одинаковые 16:9. Перебиваем .portfolio__item из current-site
   (там та же 16:9, но с другими радиусами/фоном). */
.rd-portfolio__item {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--rd-radius-lg);
    border: var(--rd-border-1);
    overflow: hidden;
    background-color: var(--rd-surface);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Portrait-видео в landscape-ячейке: object-position: center гарантирует,
   что по центру кадра (где обычно сюжет вертикального видео) ничего не
   обрежется. object-fit: cover уже задан на .rd-portfolio__thumb. */
.rd-portfolio__item--portrait .rd-portfolio__thumb {
    object-position: center center;
}

/* ---------- 12.3. Кнопка-обёртка ---------- */
.rd-portfolio__btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    /* Перебиваем outline из старого .portfolio__thumb-btn */
    outline-offset: -2px;
}

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

/* ---------- 12.4. Превью ---------- */
.rd-portfolio__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--rd-duration-slow) var(--rd-ease-out),
                filter var(--rd-duration-slow) var(--rd-ease-out);
}

.rd-portfolio__btn:hover .rd-portfolio__thumb,
.rd-portfolio__btn:focus-visible .rd-portfolio__thumb {
    transform: scale(1.02);
    filter: brightness(0.7);
}

/* ---------- 12.5. Hover-оверлей и play-кнопка ---------- */
.rd-portfolio__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--rd-duration-base) var(--rd-ease-out);
    pointer-events: none;
}

.rd-portfolio__btn:hover .rd-portfolio__overlay,
.rd-portfolio__btn:focus-visible .rd-portfolio__overlay {
    opacity: 1;
}

/* Touch: play-иконка всегда видна (наследуем поведение от старого CSS) */
@media (hover: none) {
    .rd-portfolio__overlay {
        opacity: 1;
    }
}

.rd-portfolio__play {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rd-text);
    transition: transform var(--rd-duration-base) var(--rd-ease-out),
                background-color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-portfolio__btn:hover .rd-portfolio__play {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.18);
}

/* SVG внутри play-круга — наследует currentColor (белый) и
   получает явный сдвиг на 1px вправо для оптической центровки треугольника. */
.rd-portfolio__play .iconify {
    transform: translateX(1px);
}

/* ---------- 12.6. Модалка — рестайл ---------- */
/* JS перезаписывает className на .portfolio-modal__content (см. script.js
   initPortfolio), поэтому стилизуем через scope .rd-portfolio-modal —
   сохраняем оригинальные классы для JS, но визуал — наш. */
.rd-portfolio-modal {
    position: fixed;
    inset: 0;
    z-index: var(--rd-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--rd-space-6);
}

.rd-portfolio-modal[hidden] {
    display: none;
}

.rd-portfolio-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.rd-portfolio-modal .portfolio-modal__content {
    position: relative;
    z-index: 1;
    width: min(90vw, 1200px);
    aspect-ratio: 16 / 9;
    border-radius: var(--rd-radius-lg);
    border: var(--rd-border-1);
    overflow: hidden;
    background-color: #000;
    box-shadow: var(--rd-shadow-lg);
}

.rd-portfolio-modal .portfolio-modal__content--portrait {
    width: min(50vh, 420px);
    aspect-ratio: 9 / 16;
}

.rd-portfolio-modal .portfolio-modal__content iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.rd-portfolio-modal__close {
    position: absolute;
    top: var(--rd-space-4);
    right: var(--rd-space-4);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--rd-surface);
    border: var(--rd-border-1);
    color: var(--rd-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color var(--rd-duration-base) var(--rd-ease-out),
                border-color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-portfolio-modal__close:hover {
    background-color: var(--rd-surface-hover);
    border-color: var(--rd-border-strong);
}

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

/* ============================================================
   13. REVIEWS (сессия 9, БЛОК 8)
   ============================================================
   Гибрид-паттерн: классы reviews__* и id #reviews-slider/#reviews-track
   зафиксированы JS (current-site/script.js initReviewsSlider).
   Здесь — только CSS-перебивка через scope .rd-reviews. */

.rd-reviews {
    background-color: var(--rd-bg);
}

.rd-reviews__container {
    max-width: var(--rd-container-max);
    margin: 0 auto;
    padding: 0 var(--rd-gutter-mobile);
}

@media (min-width: 768px) {
    .rd-reviews__container {
        padding: 0 var(--rd-gutter-desktop);
    }
}

.rd-reviews__header {
    text-align: left;
}

/* ---------- 13.1. Слайдер и трек ---------- */
/* Слайдер съезжает за границы контейнера через отрицательный margin, чтобы
   первая и последняя карточки касались краёв вьюпорта. Боковые padding'и трека
   возвращают первую/последнюю карточки на одну линию с заголовком секции. */
.rd-reviews .reviews__slider {
    margin-inline: calc(var(--rd-gutter-mobile) * -1);
    padding: 0;
    overflow: hidden;
    cursor: grab;
}

@media (min-width: 768px) {
    .rd-reviews .reviews__slider {
        margin-inline: calc(var(--rd-gutter-desktop) * -1);
    }
}

.rd-reviews .reviews__slider:active,
.rd-reviews .reviews__slider.is-dragging {
    cursor: grabbing;
}

/* Старый правый градиентный fade (::after) — отключаем, не нужен */
.rd-reviews .reviews__slider::after {
    display: none;
}

.rd-reviews .reviews__track {
    display: flex;
    gap: 20px;
    padding-inline: var(--rd-gutter-mobile);
    transition: transform 0.3s var(--rd-ease-out);
    will-change: transform;
}

@media (min-width: 768px) {
    .rd-reviews .reviews__track {
        padding-inline: var(--rd-gutter-desktop);
    }
}

.rd-reviews .reviews__track.is-dragging {
    transition: none;
}

/* ---------- 13.2. Карточка отзыва ---------- */
.rd-reviews .reviews__card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-width: min(340px, calc(100% - 48px));
    max-width: min(340px, calc(100% - 48px));
    min-height: 380px;
    padding: 32px;
    background-color: var(--rd-surface);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-md);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    user-select: none;
    transition: border-color var(--rd-duration-base) var(--rd-ease-out),
                background-color var(--rd-duration-base) var(--rd-ease-out),
                transform var(--rd-duration-base) var(--rd-ease-out);
}

.rd-reviews .reviews__card:hover {
    border-color: var(--rd-border-strong);
    background-color: var(--rd-surface-hover);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    transform: translateY(-2px);
}

.rd-reviews .reviews__card:focus-visible {
    outline: 2px solid var(--rd-accent);
    outline-offset: 2px;
    border-color: var(--rd-border-strong);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    transform: none;
}

.rd-reviews .reviews__card-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ---------- 13.3. Аватар ---------- */
.rd-reviews .reviews__avatar-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--rd-border-strong);
    overflow: hidden;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.rd-reviews .reviews__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ---------- 13.4. Имя автора и текст ---------- */
.rd-reviews .reviews__author {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--rd-text);
}

.rd-reviews .reviews__text {
    flex: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--rd-text-secondary);
}

/* Bold-акцент в начале отзыва — белый, не оранжевый (BLOCKS §8).
   Чуть крупнее основного текста — даёт визуальную иерархию: первая фраза
   как «лид» отзыва, остальное — пояснение. */
.rd-reviews .reviews__text-strong {
    display: inline;
    font-size: 16px;
    color: var(--rd-text);
    font-weight: 600;
}

/* ---------- 13.5. Ссылка "Go to author's page" ---------- */
.rd-reviews .reviews__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 0;
    border-top: none;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    position: relative;
    z-index: 5;
    transition: color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-reviews .reviews__link-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--rd-text-muted);
    transition: color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-reviews .reviews__link-icon {
    color: var(--rd-text-muted);
    flex-shrink: 0;
    transition: color var(--rd-duration-base) var(--rd-ease-out);
}

/* Hover — белый текст с подчёркиванием, без оранжевого (BLOCKS §8) */
.rd-reviews .reviews__link:hover .reviews__link-text,
.rd-reviews .reviews__link:focus-visible .reviews__link-text {
    color: var(--rd-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rd-reviews .reviews__link:hover .reviews__link-icon,
.rd-reviews .reviews__link:focus-visible .reviews__link-icon {
    color: var(--rd-text);
}

.rd-reviews .reviews__link:focus-visible {
    outline: 2px solid var(--rd-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ---------- 13.6. Подсказка "Drag to explore" ---------- */
.rd-reviews .reviews__scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
    font-size: 13px;
    font-weight: 400;
    color: var(--rd-text-subtle);
    opacity: 0.7;
    transition: opacity var(--rd-duration-slow) var(--rd-ease-out);
}

.rd-reviews .reviews__scroll-hint.is-hidden {
    opacity: 0;
}

.rd-reviews .reviews__scroll-hint-icon {
    color: var(--rd-text-subtle);
}

/* ============================================================
   14. FOOTER (сессия 9, БЛОК 9)
   ============================================================
   Гибрид-паттерн: классы footer__* и id #scroll-to-top зафиксированы JS
   (current-site/script.js initScrollToTop). Здесь — только CSS-перебивка
   через scope .rd-footer. */

.rd-footer {
    position: relative;
    background-color: var(--rd-bg);
    border-top: var(--rd-border-1);
    padding-block: var(--rd-space-10);
    margin-top: 0;
}

.rd-footer .footer__container {
    max-width: var(--rd-container-max);
    margin: 0 auto;
    padding: 0 var(--rd-gutter-mobile);
}

@media (min-width: 768px) {
    .rd-footer .footer__container {
        padding: 0 var(--rd-gutter-desktop);
    }
}

/* ---------- 14.1. Полосы (logo / contacts / legal) ---------- */
.rd-footer .footer__band {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--rd-space-5);
    border-bottom: var(--rd-border-1);
}

/* ---------- 14.2. Лого ---------- */
.rd-footer .footer__logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rd-footer .footer__logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.rd-footer .footer__logo-text {
    font-family: var(--rd-font-sans);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--rd-text);
}

/* ---------- 14.3. Соцсети — унифицированные иконки без плашки ---------- */
.rd-footer .footer__socials {
    display: flex;
    gap: var(--rd-space-4);
}

.rd-footer .footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--rd-text-muted);
    transition: color var(--rd-duration-base) var(--rd-ease-out),
                transform var(--rd-duration-base) var(--rd-ease-out);
}

.rd-footer .footer__social-link:hover {
    color: var(--rd-text);
    border-color: transparent;
    background: transparent;
    transform: translateY(-1px);
    text-decoration: none;
}

.rd-footer .footer__social-link:focus-visible {
    outline: 2px solid var(--rd-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ---------- 14.4. Контакты ---------- */
.rd-footer .footer__contacts-row {
    display: flex;
    align-items: center;
    gap: var(--rd-space-4);
    flex-wrap: wrap;
}

.rd-footer .footer__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--rd-text-muted);
    text-decoration: none;
    transition: color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-footer .footer__contact-link:hover,
.rd-footer .footer__contact-link:focus-visible {
    color: var(--rd-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Telegram — без оранжевого hover (правило BLOCKS §8/§дизайн-система) */
.rd-footer .footer__contact-link--tg:hover {
    color: var(--rd-text);
}

.rd-footer .footer__contact-dot {
    color: var(--rd-text-subtle);
    font-size: 14px;
    line-height: 1;
    user-select: none;
}

/* ---------- 14.5. Платёжные бейджи (как в Pricing) ---------- */
.rd-footer .rd-footer__payments {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--rd-space-2);
}

.rd-footer .rd-footer__payment-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rd-text-muted);
    background-color: transparent;
    border: var(--rd-border-1);
    border-radius: var(--rd-radius-xs);
}

/* ---------- 14.6. Низ — копирайт и legal ---------- */
.rd-footer .footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rd-space-3);
    padding-top: var(--rd-space-5);
    border-bottom: none;
}

.rd-footer .footer__copyright {
    font-size: 13px;
    color: var(--rd-text-subtle);
    margin: 0;
}

.rd-footer .footer__legal {
    display: flex;
    align-items: center;
    gap: var(--rd-space-3);
    flex-wrap: wrap;
}

.rd-footer .footer__legal-link {
    font-size: 13px;
    color: var(--rd-text-subtle);
    text-decoration: none;
    transition: color var(--rd-duration-base) var(--rd-ease-out);
}

.rd-footer .footer__legal-link:hover,
.rd-footer .footer__legal-link:focus-visible {
    color: var(--rd-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rd-footer .footer__legal-separator {
    color: var(--rd-text-subtle);
    opacity: 0.4;
}

/* ---------- 14.7. Scroll-to-top — нейтральная (без оранжевого) ---------- */
/* JS (initScrollToTop) добавляет .visible при скролле > 400px.
   Цвет — нейтральный согласно правилу "оранжевый только Start Rendering". */
.rd-footer .footer__scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rd-surface);
    background-image: none;
    border: var(--rd-border-1);
    border-radius: 50%;
    color: var(--rd-text);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--rd-duration-slow) var(--rd-ease-out),
                visibility var(--rd-duration-slow) var(--rd-ease-out),
                transform var(--rd-duration-base) var(--rd-ease-out),
                background-color var(--rd-duration-base) var(--rd-ease-out),
                border-color var(--rd-duration-base) var(--rd-ease-out);
    z-index: var(--rd-z-sticky, 200);
}

.rd-footer .footer__scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rd-footer .footer__scroll-top:hover {
    background-color: var(--rd-surface-hover);
    border-color: var(--rd-border-strong);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.rd-footer .footer__scroll-top:active {
    transform: translateY(0);
}

.rd-footer .footer__scroll-top:focus-visible {
    outline: 2px solid var(--rd-accent);
    outline-offset: 2px;
}

/* ---------- 14.8. Мобила ---------- */
@media (max-width: 640px) {
    .rd-footer {
        padding-block: var(--rd-space-8);
    }

    .rd-footer .footer__band {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rd-space-4);
    }

    .rd-footer .footer__contacts-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rd-space-2);
    }

    .rd-footer .footer__contact-dot {
        display: none;
    }

    .rd-footer .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rd-space-2);
    }

    .rd-footer .footer__legal {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rd-space-1);
    }

    .rd-footer .footer__legal-separator {
        display: none;
    }

    .rd-footer .footer__scroll-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

/* ============================================================
   Scroll-reveal animations (rd-animations.js)
   ============================================================ */
.rd-animate {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rd-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Картинка приложения — длиннее и мягче */
.rd-app__stage.rd-animate {
    transform: translateY(24px);
    transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rd-app__stage.rd-animate.is-visible {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .rd-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
}



/* ============================================================
   LEGAL PAGES (terms_of_service / privacy_policy / cookie-policy / imprint)
   Общая разметка контейнера + типографика для четырёх юридических страниц.
   ============================================================ */
.legal-page {
    padding-top: 60px;
    padding-bottom: 80px;
    min-height: 100vh;
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
    color: var(--color-text);
}

.legal-content h1 {
    color: #ffffff;
    margin-bottom: 40px;
}

.legal-content h2 {
    color: var(--color-accent-beige);
    margin-top: 40px;
    margin-bottom: 20px;
}

.legal-content h3 {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 12px;
}

.legal-content p {
    margin-bottom: 16px;
    line-height: 1.6;
}

.legal-content ul {
    margin-bottom: 16px;
    padding-left: 20px;
}

.legal-content li {
    margin-bottom: 8px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.legal-content a {
    color: var(--color-primary, #6ea8fe);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.legal-content a:hover {
    color: #ffffff;
}

/* Cookie policy — таблица куки */
.cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 0.875rem;
}

.cookie-table th {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cookie-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-text-muted);
    vertical-align: top;
}

.cookie-table tr:last-child td {
    border-bottom: none;
}

.cookie-table code {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-family: monospace;
    color: var(--color-accent-beige);
}

.cookie-category {
    margin-bottom: 32px;
}

.cookie-category h3 {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Privacy policy — Usercentrics embed overrides */
.uc-privacy-policy {
    font-family: var(--font-sans);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.uc-privacy-policy h1,
.uc-privacy-policy h2,
.uc-privacy-policy h3 {
    color: #ffffff !important;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.uc-privacy-policy > h1:first-child {
    display: none;
}

.uc-privacy-policy p,
.uc-privacy-policy li,
.uc-privacy-policy td {
    color: var(--color-text-muted) !important;
    margin-bottom: 1rem;
}

.uc-privacy-policy a {
    color: var(--color-primary) !important;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.uc-privacy-policy a:hover {
    color: #ffffff !important;
}

.uc-privacy-policy img,
.uc-privacy-policy table {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   NDA PAGE
   ============================================================ */
.nda-hero {
    background: #0a0a0a;
    padding: 80px 0 64px;
    text-align: center;
}

.nda-hero__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 32px;
}

.nda-hero .rd-eyebrow {
    display: block;
    margin-bottom: 14px;
}

.nda-hero .rd-subtitle {
    max-width: 560px;
    margin: 12px auto 0;
}

.nda-main {
    background: #0a0a0a;
}

.nda-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 32px 64px;
}

.nda-card {
    background: #111111;
    border: 1px solid #1f1f1f;
    border-radius: 10px;
    padding: 48px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.nda-card__p {
    margin: 0 0 24px;
}

.nda-card__h {
    font-size: 13px;
    font-weight: 600;
    color: #f5f5f5;
    margin: 0 0 16px;
    letter-spacing: -0.005em;
}

.nda-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nda-list__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.nda-list__icon {
    flex-shrink: 0;
    color: #f97316;
    margin-top: 5px;
}

.nda-list__text {
    margin: 0;
    flex: 1;
}

.nda-divider {
    border: 0;
    border-top: 1px solid #1f1f1f;
    margin: 32px 0;
}

.nda-instruction {
    background: #0a0a0a;
    border: 1px solid #1f1f1f;
    border-radius: 10px;
    padding: 24px 28px;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nda-instruction__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nda-instruction__row--divided {
    border-top: 1px solid #1f1f1f;
    padding-top: 16px;
}

.nda-instruction__icon {
    color: #a3a3a3;
    flex-shrink: 0;
}

.nda-instruction__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nda-instruction__label {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: #6b6b6b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nda-instruction__email {
    display: inline-block;
    margin-top: 2px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #f5f5f5;
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: color 160ms ease;
}

.nda-instruction__email:hover {
    color: #f97316;
}

.nda-instruction__subject {
    display: block;
    margin-top: 2px;
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 14px;
    line-height: 1.4;
    color: #f5f5f5;
}

.nda-followup {
    margin: 12px 0 0;
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
    color: #4a4a4a;
}

@media (max-width: 640px) {
    .nda-hero {
        padding: 96px 0 48px;
    }

    .nda-card {
        padding: 32px 24px;
    }

    .nda-wrap {
        padding: 0 20px 48px;
    }
}


/* ============================================================
   THANK-YOU PAGE
   ============================================================ */
.ty-main {
    background: #0a0a0a;
    min-height: calc(100vh - var(--rd-header-h-mobile));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 0 64px;
}

@media (min-width: 1024px) {
    .ty-main {
        min-height: calc(100vh - var(--rd-header-h-desktop));
        padding: 80px 0 64px;
    }
}

.ty-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
}

.ty-icon {
    display: block;
    margin: 0 auto 32px;
    filter: drop-shadow(0 0 16px rgba(34, 197, 94, 0.25));
}

.ty-eyebrow {
    display: block;
    margin-bottom: 16px;
}

.ty-title {
    font-size: 28px;
    margin-bottom: 16px;
    white-space: nowrap;
}

.ty-subtitle {
    margin: 0 auto 40px;
}

.ty-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.ty-help {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.ty-help__card {
    background: #111111;
    border: 1px solid #1f1f1f;
    border-radius: 10px;
    padding: 16px 24px;
    display: inline-block;
    font-size: 12px;
    line-height: 1.6;
    color: #6b6b6b;
}

.ty-help__link {
    color: #f5f5f5;
    text-decoration: none;
    transition: text-decoration-color 160ms ease;
}

.ty-help__link:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .ty-main {
        padding: 80px 0 48px;
    }

    .ty-wrap {
        padding: 0 20px;
    }

    .ty-help__card {
        padding: 14px 20px;
    }
}

@media (max-width: 560px) {
    .ty-title {
        font-size: 22px;
    }
}

/* ===========================================================
   .rd-soon — disabled nav item with "Soon" pill.
   Used for upcoming pages (FAQ, Status, Plugin Guide etc).
   =========================================================== */
.rd-soon {
    color: #525252;
    cursor: not-allowed;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.rd-soon:hover {
    color: #525252;
}
.rd-soon__pill {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #737373;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid #262626;
    line-height: 1;
}
/* For article cards inside mega-menu — pill sits next to the title */
.rd-mega__article.rd-soon {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.rd-mega__article.rd-soon .rd-soon__pill {
    margin-top: 4px;
}