/* ─────────────────────────────────────────────────────────────────────
   pereezd-animations.css — премиум-стек для раздела
   «Переезд и обновление офиса». Подключается только на 11 страницах
   /pereezd-i-obnovlenie/*. Использует CSS-spec 2024–2026:
   scroll-driven animations, view-transitions, @starting-style,
   @property, OKLCH + color-mix, container queries, anchor positioning.
   Все эффекты уважают prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────────── */

/* 0. ── Тематические токены раздела ─────────────────────────────────── */
:root {
    /* Сохраняем sitewide blue/cyan, добавляем restrained акцент янтаря
       для маркера дефицита/срочности в stock-banner. */
    --pereezd-accent: oklch(0.78 0.15 70);            /* warm amber */
    --pereezd-accent-soft: oklch(0.78 0.15 70 / 0.18);
    --pereezd-blue: oklch(0.62 0.18 250);
    --pereezd-cyan: oklch(0.78 0.13 200);
    --pereezd-bg-dark: oklch(0.18 0.03 250);
    --pereezd-bg-panel: oklch(0.22 0.025 250 / 0.55);
    --pereezd-border: oklch(1 0 0 / 0.08);
    --pereezd-border-hover: oklch(0.62 0.18 250 / 0.4);
}

/* 1. ── Защита от horizontal overflow + fluid typography ─────────────── */
main h1, main h2, main h3 { text-wrap: balance; overflow-wrap: break-word; }
main p, main li { text-wrap: pretty; overflow-wrap: break-word; }

/* 2. ── Scroll-driven progress bar (CSS-native, без JS) ──────────────── */
.pereezd-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--pereezd-blue) 0%,
        var(--pereezd-cyan) 50%,
        var(--pereezd-accent) 100%);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 60;
    pointer-events: none;
    box-shadow: 0 0 12px color-mix(in oklab, var(--pereezd-cyan) 40%, transparent);
}
@supports (animation-timeline: scroll()) {
    .pereezd-progress {
        animation: pereezd-progress-grow linear;
        animation-timeline: scroll(root);
    }
}
@keyframes pereezd-progress-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* 3. ── Hero data-anim safety: элементы всегда видимы ────────────────── */
/* GSAP-анимация hero отключена в pereezd-animations.js. Атрибут data-anim
   сохранён как маркер для возможного будущего CSS @starting-style fade,
   но сейчас работает как обычный элемент со своим CSS. !important защищает
   от любых случайных inline opacity:0 / transform. */
[data-anim] {
    opacity: 1 !important;
    transform: none !important;
}

/* 3.1 ── Hero: kinetic reveal + gradient text ─────────────────────────── */
.pereezd-hero-gradient-text {
    background: linear-gradient(120deg,
        oklch(0.92 0.05 200) 0%,
        oklch(0.78 0.13 200) 35%,
        oklch(0.62 0.18 250) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-wrap: balance;
}

/* SplitText word-reveal (готовится JS — class .split-word, .is-revealed) */
.pereezd-split-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(40%);
    filter: blur(8px);
    will-change: transform, opacity, filter;
}
.pereezd-split-word.is-revealed {
    animation: pereezd-split-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes pereezd-split-in {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 4. ── @starting-style на главных карточках при появлении ───────────── */
.pereezd-card,
.pereezd-stock-banner,
.pereezd-scenario-card {
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@supports (transition-behavior: allow-discrete) {
    @starting-style {
        .pereezd-card,
        .pereezd-stock-banner,
        .pereezd-scenario-card {
            opacity: 0;
            transform: translateY(24px);
        }
    }
}

/* 5. ── Glass panels (общая поверхность для карточек раздела) ────────── */
.pereezd-glass {
    background: linear-gradient(135deg,
        oklch(1 0 0 / 0.04) 0%,
        oklch(1 0 0 / 0.01) 100%);
    border: 1px solid var(--pereezd-border);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition:
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pereezd-glass:hover {
    border-color: var(--pereezd-border-hover);
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--pereezd-blue) 8%, transparent) 0%,
        oklch(1 0 0 / 0.02) 100%);
    transform: translateY(-2px);
}

/* 6. ── Spotlight cursor (heroes & dark sections) ────────────────────── */
.pereezd-spotlight {
    position: relative;
    isolation: isolate;
}
.pereezd-spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        color-mix(in oklab, var(--pereezd-blue) 8%, transparent),
        transparent 40%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.pereezd-spotlight:hover::before { opacity: 1; }
.pereezd-spotlight > * { position: relative; z-index: 2; }

/* 7. ── 3D-tilt cards (catalog & scenarios) ──────────────────────────── */
.pereezd-tilt-grid { perspective: 1000px; }
.pereezd-tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.pereezd-tilt-card__inner {
    transform: translateZ(0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pereezd-tilt-card:hover .pereezd-tilt-card__inner {
    transform: translateZ(20px);
}
@media (hover: none) {
    .pereezd-tilt-card,
    .pereezd-tilt-card__inner { transform: none !important; }
}

/* 8. ── Magnetic CTA (JS добавляет translate3d через transform-vars) ─── */
.pereezd-magnetic {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* 9. ── Animated conic gradient border (premium primary CTA) ─────────── */
@property --pereezd-grad-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.pereezd-gradient-border {
    position: relative;
    z-index: 0;
    isolation: isolate;
}
.pereezd-gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--pereezd-grad-angle, 0deg),
        var(--pereezd-blue) 0%,
        var(--pereezd-cyan) 25%,
        var(--pereezd-accent) 50%,
        var(--pereezd-cyan) 75%,
        var(--pereezd-blue) 100%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: pereezd-grad-rotate 6s linear infinite;
    z-index: -1;
}
@keyframes pereezd-grad-rotate {
    to { --pereezd-grad-angle: 360deg; }
}
@supports not (background: paint(angle)) {
    .pereezd-gradient-border::before {
        animation: pereezd-grad-rotate-fb 6s linear infinite;
    }
}
@keyframes pereezd-grad-rotate-fb {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 10. ── Stock banner: pulsing amber dot + scarcity emphasis ─────────── */
.pereezd-stock-banner {
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--pereezd-accent) 12%, transparent) 0%,
        oklch(1 0 0 / 0.02) 100%);
    border: 1px solid color-mix(in oklab, var(--pereezd-accent) 35%, transparent);
}
.pereezd-stock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pereezd-accent);
    box-shadow: 0 0 0 0 var(--pereezd-accent-soft);
    animation: pereezd-stock-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pereezd-stock-pulse {
    0%   { box-shadow: 0 0 0 0 var(--pereezd-accent-soft); }
    70%  { box-shadow: 0 0 0 14px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* 11. ── Comparison «новая vs восстановленная» — split-card layout ────── */
/*    Две раздельные фотографии с цветовой кодировкой:
      cyan (новая) / amber (восстановленная) и полноширинная таблица паритета. */
.pereezd-cmp-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    align-items: stretch;
}
@media (max-width: 1023px) {
    .pereezd-cmp-grid { grid-template-columns: 1fr; }
}

.pereezd-cmp-card {
    --cmp-accent: var(--pereezd-cyan);
    --cmp-accent-soft: oklch(0.78 0.13 200 / 0.18);
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 1.4rem;
    overflow: hidden;
    background: linear-gradient(180deg,
        oklch(1 0 0 / 0.035) 0%,
        oklch(1 0 0 / 0.012) 100%);
    border: 1px solid var(--pereezd-border);
    isolation: isolate;
    transition:
        border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pereezd-cmp-card--refurb {
    --cmp-accent: var(--pereezd-accent);
    --cmp-accent-soft: var(--pereezd-accent-soft);
}
.pereezd-cmp-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--cmp-accent) 30%,
        var(--cmp-accent) 70%,
        transparent 100%);
    opacity: 0.85;
    z-index: 3;
}
.pereezd-cmp-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--cmp-accent) 35%, transparent);
    box-shadow: 0 16px 40px -20px color-mix(in oklab, var(--cmp-accent) 30%, transparent);
}

.pereezd-cmp-card__photo {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: oklch(0.16 0.02 250);
}
.pereezd-cmp-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.pereezd-cmp-card:hover .pereezd-cmp-card__photo img {
    transform: scale(1.035);
}
.pereezd-cmp-card__photo-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 55%,
        oklch(0.18 0.03 250 / 0.45) 100%);
    pointer-events: none;
}

/* Icon-fallback hero — для абстрактных сравнений без фото */
.pereezd-cmp-card__hero {
    position: relative;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center,
            color-mix(in oklab, var(--cmp-accent) 18%, transparent) 0%,
            transparent 65%),
        linear-gradient(180deg,
            oklch(0.20 0.025 250) 0%,
            oklch(0.16 0.025 250) 100%);
    overflow: hidden;
}
.pereezd-cmp-card__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right,
        color-mix(in oklab, var(--cmp-accent) 30%, transparent) 0%,
        transparent 50%);
    opacity: 0.5;
    pointer-events: none;
}
.pereezd-cmp-card__hero-icon {
    font-size: clamp(3.5rem, 2.5rem + 3vw, 5rem);
    color: var(--cmp-accent);
    filter: drop-shadow(0 0 28px color-mix(in oklab, var(--cmp-accent) 50%, transparent));
    opacity: 0.85;
    z-index: 1;
}

.pereezd-cmp-card__ribbon {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.4rem 0.65rem;
    border-radius: 0.55rem;
    background: oklch(0.16 0.025 250 / 0.85);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid color-mix(in oklab, var(--cmp-accent) 35%, transparent);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cmp-accent);
}
.pereezd-cmp-card__ribbon::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cmp-accent);
    box-shadow: 0 0 10px var(--cmp-accent);
}

.pereezd-cmp-card__body {
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1.25rem;
}
.pereezd-cmp-card__title {
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
    font-weight: 700;
    color: oklch(0.99 0 0);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.pereezd-cmp-card__caption {
    margin-top: 0.5rem;
    color: oklch(0.78 0.015 250);
    font-size: 0.92rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.pereezd-cmp-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: auto;
    list-style: none;
    padding: 0;
}
.pereezd-cmp-stats li {
    padding: 0.7rem 0.55rem;
    border-radius: 0.7rem;
    border: 1px solid oklch(1 0 0 / 0.06);
    background: oklch(1 0 0 / 0.018);
    text-align: center;
    transition:
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pereezd-cmp-stats__label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(0.78 0.015 250 / 0.6);
}
.pereezd-cmp-stats__value {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: oklch(0.97 0 0);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.pereezd-cmp-stats li.is-win {
    border-color: color-mix(in oklab, var(--pereezd-accent) 38%, transparent);
    background: color-mix(in oklab, var(--pereezd-accent) 10%, transparent);
}
.pereezd-cmp-stats li.is-win .pereezd-cmp-stats__label {
    color: color-mix(in oklab, var(--pereezd-accent) 75%, white);
}
.pereezd-cmp-stats li.is-win .pereezd-cmp-stats__value {
    color: var(--pereezd-accent);
    text-shadow: 0 0 16px color-mix(in oklab, var(--pereezd-accent) 35%, transparent);
}

/* Divider — вертикальный «vs» на десктопе, горизонтальный на мобиле */
.pereezd-cmp-divider {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 56px;
    padding: 1rem 0;
}
.pereezd-cmp-divider::before {
    content: '';
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--pereezd-border) 25%,
        var(--pereezd-border) 75%,
        transparent 100%);
    transform: translateX(-0.5px);
}
.pereezd-cmp-divider span {
    position: relative;
    z-index: 1;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: oklch(0.16 0.025 250);
    border: 1px solid var(--pereezd-border);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: oklch(0.78 0.015 250 / 0.7);
}
@media (max-width: 1023px) {
    .pereezd-cmp-divider { padding: 0.5rem 0; min-width: 0; }
    .pereezd-cmp-divider::before {
        top: 50%; left: 1rem; right: 1rem; bottom: auto;
        width: auto; height: 1px;
        transform: translateY(-0.5px);
        background: linear-gradient(90deg,
            transparent 0%,
            var(--pereezd-border) 25%,
            var(--pereezd-border) 75%,
            transparent 100%);
    }
}

/* Parity table */
.pereezd-cmp-table {
    background: linear-gradient(180deg,
        oklch(1 0 0 / 0.025) 0%,
        oklch(1 0 0 / 0.008) 100%);
    border: 1px solid var(--pereezd-border);
    border-radius: 1.4rem;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pereezd-cmp-table__head,
.pereezd-cmp-table__row {
    display: grid;
    grid-template-columns: 48px 200px 1fr 1fr;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    align-items: center;
}
.pereezd-cmp-table__head {
    background: oklch(1 0 0 / 0.025);
    border-bottom: 1px solid var(--pereezd-border);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.pereezd-cmp-table__num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    color: oklch(0.78 0.015 250 / 0.45);
    letter-spacing: 0.12em;
}
.pereezd-cmp-table__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(0.78 0.015 250 / 0.7);
}
.pereezd-cmp-table__col-head {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.pereezd-cmp-table__col-head--new { color: var(--pereezd-cyan); }
.pereezd-cmp-table__col-head--refurb { color: var(--pereezd-accent); }
.pereezd-cmp-table__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.pereezd-cmp-table__dot--new {
    background: var(--pereezd-cyan);
    box-shadow: 0 0 8px var(--pereezd-cyan);
}
.pereezd-cmp-table__dot--refurb {
    background: var(--pereezd-accent);
    box-shadow: 0 0 8px var(--pereezd-accent);
}
.pereezd-cmp-table__row {
    border-top: 1px solid oklch(1 0 0 / 0.04);
    transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pereezd-cmp-table__row:hover { background: oklch(1 0 0 / 0.022); }
.pereezd-cmp-table__value {
    font-size: 0.94rem;
    color: oklch(0.94 0 0);
    line-height: 1.45;
    text-wrap: pretty;
}
.pereezd-cmp-table__value--right {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 500;
}
.pereezd-cmp-table__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-top: 1px;
    font-size: 9px;
    flex-shrink: 0;
}
.pereezd-cmp-table__row[data-parity="true"] .pereezd-cmp-table__icon {
    background: color-mix(in oklab, oklch(0.78 0.18 145) 18%, transparent);
    color: oklch(0.85 0.18 145);
    border: 1px solid color-mix(in oklab, oklch(0.78 0.18 145) 30%, transparent);
}
.pereezd-cmp-table__row[data-parity="false"] .pereezd-cmp-table__icon {
    background: color-mix(in oklab, var(--pereezd-accent) 22%, transparent);
    color: var(--pereezd-accent);
    border: 1px solid color-mix(in oklab, var(--pereezd-accent) 38%, transparent);
}
.pereezd-cmp-table__row[data-parity="false"] .pereezd-cmp-table__value--right {
    color: oklch(0.92 0.06 70);
    font-weight: 600;
}

@media (max-width: 768px) {
    .pereezd-cmp-table__head,
    .pereezd-cmp-table__row {
        grid-template-columns: 110px 1fr 1fr;
        gap: 0.85rem;
        padding: 0.85rem 1rem;
    }
    .pereezd-cmp-table__num { display: none; }
    .pereezd-cmp-table__label { font-size: 10px; }
    .pereezd-cmp-table__value { font-size: 0.85rem; }
}

/* Summary */
.pereezd-cmp-summary {
    margin-top: 1.5rem;
    padding: 1.2rem 1.5rem;
    border-radius: 1.1rem;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--pereezd-accent) 14%, transparent) 0%,
        color-mix(in oklab, var(--pereezd-accent) 3%, transparent) 100%);
    border: 1px solid color-mix(in oklab, var(--pereezd-accent) 32%, transparent);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
}
.pereezd-cmp-summary__icon {
    width: 36px;
    height: 36px;
    border-radius: 0.7rem;
    display: grid;
    place-items: center;
    background: color-mix(in oklab, var(--pereezd-accent) 22%, transparent);
    color: var(--pereezd-accent);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.pereezd-cmp-summary__kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--pereezd-accent) 80%, white);
    margin-bottom: 0.35rem;
}
.pereezd-cmp-summary__text {
    font-size: 0.95rem;
    color: oklch(0.96 0 0);
    line-height: 1.55;
}

/* 11.5 ── Capacity-блок — честные production-ограничения вместо fake-stock ─ */
/*    Три карточки с цветовой кодировкой:
      cyan (бригады) / amber (склад) / emerald (очередь). */
.pereezd-cap-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.85rem, 1vw, 1.25rem);
}
@media (max-width: 1023px) { .pereezd-cap-grid { grid-template-columns: 1fr; } }

.pereezd-cap-card {
    --cap-accent: var(--pereezd-cyan);
    --cap-accent-soft: oklch(0.78 0.13 200 / 0.16);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
    border-radius: 1.4rem;
    overflow: hidden;
    background: linear-gradient(180deg,
        oklch(1 0 0 / 0.035) 0%,
        oklch(1 0 0 / 0.012) 100%);
    border: 1px solid var(--pereezd-border);
    isolation: isolate;
    transition:
        border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pereezd-cap-card--brigades {
    --cap-accent: var(--pereezd-cyan);
    --cap-accent-soft: oklch(0.78 0.13 200 / 0.18);
}
.pereezd-cap-card--stock {
    --cap-accent: var(--pereezd-accent);
    --cap-accent-soft: var(--pereezd-accent-soft);
}
.pereezd-cap-card--queue {
    --cap-accent: oklch(0.78 0.16 155);
    --cap-accent-soft: oklch(0.78 0.16 155 / 0.18);
}
.pereezd-cap-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--cap-accent) 30%,
        var(--cap-accent) 70%,
        transparent 100%);
    opacity: 0.85;
    z-index: 1;
}
.pereezd-cap-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--cap-accent) 35%, transparent);
    box-shadow: 0 16px 40px -20px color-mix(in oklab, var(--cap-accent) 28%, transparent);
}

.pereezd-cap-card__header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.pereezd-cap-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 0.65rem;
    display: grid;
    place-items: center;
    background: var(--cap-accent-soft);
    color: var(--cap-accent);
    border: 1px solid color-mix(in oklab, var(--cap-accent) 32%, transparent);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.pereezd-cap-card__kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cap-accent);
}

.pereezd-cap-card__metric {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.5rem 0;
    border-top: 1px solid oklch(1 0 0 / 0.05);
    border-bottom: 1px solid oklch(1 0 0 / 0.05);
}
.pereezd-cap-card__value {
    font-size: clamp(2.5rem, 1.8rem + 2vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    color: oklch(0.98 0 0);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    text-shadow: 0 0 24px color-mix(in oklab, var(--cap-accent) 22%, transparent);
}
.pereezd-cap-card__unit {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.15;
    color: oklch(0.78 0.015 250 / 0.7);
    text-transform: lowercase;
    letter-spacing: 0.01em;
}

/* Card list (used in all 3 cards) */
.pereezd-cap-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pereezd-cap-card__list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.55rem;
    background: oklch(1 0 0 / 0.025);
    border: 1px solid oklch(1 0 0 / 0.05);
}
.pereezd-cap-card__list-key {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(0.78 0.015 250 / 0.65);
}
.pereezd-cap-card__list-val {
    font-size: 0.88rem;
    font-weight: 600;
    color: oklch(0.95 0 0);
    text-align: right;
    line-height: 1.3;
}

.pereezd-cap-card__note {
    font-size: 0.85rem;
    line-height: 1.55;
    color: oklch(0.78 0.015 250 / 0.85);
    text-wrap: pretty;
    margin-top: auto;
    padding-top: 0.25rem;
}

/* Footer */
.pereezd-cap-footer {
    margin-top: 1.75rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.1rem 1.5rem;
    border-radius: 1.1rem;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--pereezd-accent) 12%, transparent) 0%,
        color-mix(in oklab, var(--pereezd-accent) 3%, transparent) 100%);
    border: 1px solid color-mix(in oklab, var(--pereezd-accent) 30%, transparent);
}
@media (max-width: 768px) {
    .pereezd-cap-footer { grid-template-columns: 1fr; }
}
.pereezd-cap-footer__note {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.pereezd-cap-footer__icon {
    color: var(--pereezd-accent);
    margin-top: 0.25rem;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.pereezd-cap-footer__note p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: oklch(0.96 0 0);
    text-wrap: pretty;
    margin: 0;
}
.pereezd-cap-footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.4rem;
    border-radius: 0.7rem;
    background: oklch(0.16 0.025 250);
    border: 1px solid color-mix(in oklab, var(--pereezd-accent) 45%, transparent);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(0.98 0 0);
    text-decoration: none;
    transition:
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
}
.pereezd-cap-footer__cta:hover {
    border-color: var(--pereezd-accent);
    background: color-mix(in oklab, var(--pereezd-accent) 10%, oklch(0.16 0.025 250));
    transform: translateY(-2px);
}
.pereezd-cap-footer__cta i {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pereezd-cap-footer__cta:hover i { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .pereezd-cap-card { transform: none !important; }
}

/* 12. ── Process timeline — компактный stepper для услуг раздела ─────── */
/*    Layout: 3×2 на десктопе, 2×3 на планшете, 1×6 на мобиле.
      Premium glass-card с large outlined-номером, иконкой и duration-chip. */
.pereezd-process {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1vw, 1.1rem);
    counter-reset: pereezd-process;
}
@media (max-width: 1023px) {
    .pereezd-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .pereezd-process { grid-template-columns: 1fr; }
}

.pereezd-process__step {
    --proc-accent: var(--pereezd-cyan);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
    border-radius: 1.2rem;
    background: linear-gradient(180deg,
        oklch(1 0 0 / 0.035) 0%,
        oklch(1 0 0 / 0.012) 100%);
    border: 1px solid var(--pereezd-border);
    overflow: hidden;
    isolation: isolate;
    transition:
        border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pereezd-process__step::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in oklab, var(--proc-accent) 55%, transparent) 50%,
        transparent 100%);
    opacity: 0.7;
    z-index: 1;
}
.pereezd-process__step:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--proc-accent) 32%, transparent);
    box-shadow: 0 16px 40px -22px color-mix(in oklab, var(--proc-accent) 28%, transparent);
}

.pereezd-process__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}
.pereezd-process__num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--proc-accent) 75%, white) 0%,
        color-mix(in oklab, var(--proc-accent) 35%, transparent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.pereezd-process__duration {
    flex-shrink: 0;
    margin-top: 0.25rem;
    padding: 0.32rem 0.65rem;
    border-radius: 0.45rem;
    background: color-mix(in oklab, var(--proc-accent) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--proc-accent) 28%, transparent);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--proc-accent) 85%, white);
    white-space: nowrap;
}

.pereezd-process__icon {
    width: 38px;
    height: 38px;
    border-radius: 0.65rem;
    display: grid;
    place-items: center;
    background: color-mix(in oklab, var(--proc-accent) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--proc-accent) 22%, transparent);
    color: var(--proc-accent);
    font-size: 0.95rem;
}
.pereezd-process__title {
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
    font-weight: 700;
    line-height: 1.25;
    color: oklch(0.98 0 0);
    text-wrap: balance;
    margin: 0;
}
.pereezd-process__desc {
    font-size: 0.86rem;
    line-height: 1.5;
    color: oklch(0.78 0.015 250 / 0.85);
    text-wrap: pretty;
    margin: 0;
    flex: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pereezd-process__step { transform: none !important; }
}

/* 12.5 ── Use-cases — 3 типа клиентов с фотографией кейсов ──────────── */
.pereezd-uc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.85rem, 1vw, 1.25rem);
}
@media (max-width: 1023px) { .pereezd-uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pereezd-uc-grid { grid-template-columns: 1fr; } }

.pereezd-uc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 1.4rem;
    overflow: hidden;
    background: linear-gradient(180deg,
        oklch(1 0 0 / 0.035) 0%,
        oklch(1 0 0 / 0.012) 100%);
    border: 1px solid var(--pereezd-border);
    isolation: isolate;
    transition:
        border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pereezd-uc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--pereezd-cyan) 30%,
        var(--pereezd-cyan) 70%,
        transparent 100%);
    opacity: 0.7;
    z-index: 3;
}
.pereezd-uc-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--pereezd-cyan) 32%, transparent);
    box-shadow: 0 16px 40px -22px color-mix(in oklab, var(--pereezd-cyan) 28%, transparent);
}

.pereezd-uc-card__photo {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: oklch(0.16 0.02 250);
}
.pereezd-uc-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.pereezd-uc-card:hover .pereezd-uc-card__photo img {
    transform: scale(1.04);
}
.pereezd-uc-card__photo-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        oklch(0.16 0.02 250 / 0.25) 0%,
        transparent 30%,
        transparent 60%,
        oklch(0.16 0.02 250 / 0.55) 100%);
    pointer-events: none;
}

.pereezd-uc-card__num {
    position: absolute;
    top: 0.85rem;
    left: 0.95rem;
    z-index: 2;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: oklch(0.98 0 0 / 0.85);
    text-shadow: 0 2px 8px oklch(0 0 0 / 0.6);
}
.pereezd-uc-card__chip {
    position: absolute;
    bottom: 0.85rem;
    left: 0.95rem;
    z-index: 2;
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    background: oklch(0.16 0.025 250 / 0.85);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid color-mix(in oklab, var(--pereezd-cyan) 35%, transparent);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pereezd-cyan);
}

.pereezd-uc-card__body {
    padding: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}
.pereezd-uc-card__title {
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
    font-weight: 700;
    line-height: 1.2;
    color: oklch(0.98 0 0);
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0;
}
.pereezd-uc-card__context {
    padding: 0.7rem 0.85rem;
    border-radius: 0.7rem;
    background: oklch(1 0 0 / 0.025);
    border: 1px solid oklch(1 0 0 / 0.06);
}
.pereezd-uc-card__context-label {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: oklch(0.78 0.13 70 / 0.8);
    margin-bottom: 0.3rem;
}
.pereezd-uc-card__context p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: oklch(0.86 0.01 250);
    text-wrap: pretty;
    margin: 0;
}
.pereezd-uc-card__message {
    font-size: 0.92rem;
    line-height: 1.55;
    color: oklch(0.95 0 0);
    text-wrap: pretty;
    margin: 0;
    flex: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pereezd-uc-card { transform: none !important; }
    .pereezd-uc-card__photo img { transition: none !important; }
}

/* 12.7 ── Why-us — двухуровневый: 3 prominent + 4 supporting chips ────── */
.pereezd-wu-tier1 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.85rem, 1vw, 1.25rem);
    margin-bottom: clamp(0.85rem, 1vw, 1.25rem);
}
@media (max-width: 1023px) { .pereezd-wu-tier1 { grid-template-columns: 1fr; } }

.pereezd-wu-card {
    --wu-accent: var(--pereezd-cyan);
    --wu-accent-soft: oklch(0.78 0.13 200 / 0.16);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem);
    border-radius: 1.4rem;
    overflow: hidden;
    background: linear-gradient(180deg,
        oklch(1 0 0 / 0.038) 0%,
        oklch(1 0 0 / 0.012) 100%);
    border: 1px solid var(--pereezd-border);
    isolation: isolate;
    transition:
        border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pereezd-wu-card--cyan {
    --wu-accent: var(--pereezd-cyan);
    --wu-accent-soft: oklch(0.78 0.13 200 / 0.18);
}
.pereezd-wu-card--blue {
    --wu-accent: var(--pereezd-blue);
    --wu-accent-soft: oklch(0.62 0.18 250 / 0.18);
}
.pereezd-wu-card--amber {
    --wu-accent: var(--pereezd-accent);
    --wu-accent-soft: var(--pereezd-accent-soft);
}
.pereezd-wu-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--wu-accent) 30%,
        var(--wu-accent) 70%,
        transparent 100%);
    opacity: 0.85;
    z-index: 1;
}
.pereezd-wu-card::after {
    content: '';
    position: absolute;
    inset: -1px -50% auto auto;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at top right,
        color-mix(in oklab, var(--wu-accent) 25%, transparent) 0%,
        transparent 60%);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 0;
}
.pereezd-wu-card:hover::after { opacity: 1; }
.pereezd-wu-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--wu-accent) 32%, transparent);
    box-shadow: 0 18px 44px -22px color-mix(in oklab, var(--wu-accent) 30%, transparent);
}

.pereezd-wu-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    position: relative;
    z-index: 1;
}
.pereezd-wu-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 0.8rem;
    display: grid;
    place-items: center;
    background: var(--wu-accent-soft);
    border: 1px solid color-mix(in oklab, var(--wu-accent) 28%, transparent);
    color: var(--wu-accent);
    font-size: 1.15rem;
    flex-shrink: 0;
}
.pereezd-wu-card__num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 2rem;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--wu-accent) 75%, white) 0%,
        color-mix(in oklab, var(--wu-accent) 30%, transparent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.pereezd-wu-card__title {
    font-size: clamp(1.15rem, 1rem + 0.4vw, 1.3rem);
    font-weight: 700;
    line-height: 1.2;
    color: oklch(0.98 0 0);
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0;
    position: relative;
    z-index: 1;
}
.pereezd-wu-card__text {
    font-size: 0.92rem;
    line-height: 1.55;
    color: oklch(0.86 0.01 250);
    text-wrap: pretty;
    margin: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* Tier 2: 4 supporting chips */
.pereezd-wu-tier2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.6rem, 0.8vw, 1rem);
}
@media (max-width: 1023px) { .pereezd-wu-tier2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .pereezd-wu-tier2 { grid-template-columns: 1fr; } }

.pereezd-wu-chip {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: clamp(0.95rem, 0.8rem + 0.4vw, 1.15rem);
    border-radius: 1rem;
    background: oklch(1 0 0 / 0.025);
    border: 1px solid oklch(1 0 0 / 0.06);
    transition:
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pereezd-wu-chip:hover {
    border-color: color-mix(in oklab, var(--pereezd-cyan) 28%, transparent);
    background: oklch(1 0 0 / 0.04);
    transform: translateY(-2px);
}
.pereezd-wu-chip__icon {
    width: 32px;
    height: 32px;
    border-radius: 0.55rem;
    display: grid;
    place-items: center;
    background: oklch(0.78 0.13 200 / 0.12);
    color: var(--pereezd-cyan);
    font-size: 0.78rem;
    flex-shrink: 0;
}
.pereezd-wu-chip__body { display: flex; flex-direction: column; gap: 0.3rem; }
.pereezd-wu-chip__title {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    color: oklch(0.98 0 0);
    margin: 0;
    text-wrap: balance;
}
.pereezd-wu-chip__text {
    font-size: 0.78rem;
    line-height: 1.45;
    color: oklch(0.78 0.015 250 / 0.85);
    text-wrap: pretty;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pereezd-wu-card,
    .pereezd-wu-chip { transform: none !important; }
    .pereezd-wu-card::after { display: none !important; }
}

/* 13. ── Sticky-CTA (мобильная нижняя панель) ────────────────────────── */
.pereezd-sticky-cta {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 50;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: oklch(0.18 0.03 250 / 0.92);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--pereezd-border);
    transform: translateY(120%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pereezd-sticky-cta.is-visible { transform: translateY(0); }
@media (min-width: 1024px) {
    .pereezd-sticky-cta { display: none; }
}

/* 14. ── Cross-section view-transitions (раздел → раздел) ────────────── */
@view-transition { navigation: auto; }
::view-transition-old(pereezd-root) {
    animation: pereezd-vt-out 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
::view-transition-new(pereezd-root) {
    animation: pereezd-vt-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes pereezd-vt-out {
    to { opacity: 0; transform: scale(0.99); }
}
@keyframes pereezd-vt-in {
    from { opacity: 0; transform: scale(1.01); }
}

/* 15. ── Anchor positioning для тултипов в comparison ────────────────── */
@supports (anchor-name: --any) {
    .pereezd-anchor-trigger { anchor-name: --pereezd-anchor; }
    .pereezd-anchor-tooltip {
        position: absolute;
        position-anchor: --pereezd-anchor;
        top: anchor(top);
        left: anchor(right);
        margin-left: 0.5rem;
    }
}

/* 16. ── Scroll-reveal stagger через scroll-driven (CSS-native) ───────── */
@supports (animation-timeline: view()) {
    .pereezd-reveal {
        animation: pereezd-reveal-in linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 30%;
    }
}
@keyframes pereezd-reveal-in {
    from {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 17. ── Field-sizing на форме раздела ────────────────────────────────── */
.pereezd-form textarea {
    field-sizing: content;
    min-block-size: 3lh;
    max-block-size: 12lh;
}

/* 18. ── prefers-reduced-motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pereezd-progress { display: none; }
    .pereezd-spotlight::before { display: none; }
    .pereezd-tilt-card,
    .pereezd-tilt-card__inner { transform: none !important; transition: none !important; }
    .pereezd-split-word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .pereezd-magnetic { transform: none !important; }
    .pereezd-gradient-border::before { animation: none !important; }
    .pereezd-stock-dot { animation: none !important; }
    .pereezd-reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    ::view-transition-old(pereezd-root),
    ::view-transition-new(pereezd-root) { animation: none !important; }
}