.hero-v27-block {
    max-width: 48rem;
}

.hero-v27-media {
    max-width: 64rem;
}

.hero-v27-glow {
    top: -1rem;
    left: 4rem;
    right: 4rem;
    height: 6rem;
    filter: blur(48px);
}

/* -- Button hover states -- */
.hero-btn-primary {
    transition: filter 0.2s ease, transform 0.15s ease;
}
.hero-btn-primary:hover,
.hero-btn-primary:focus {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.hero-btn-outline-secondary {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.hero-btn-outline-secondary:hover,
.hero-btn-outline-secondary:focus {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
    border-color: var(--bs-secondary) !important;
    transform: translateY(-1px);
}

.hero-btn-outline-primary-light {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.hero-btn-outline-primary-light:hover,
.hero-btn-outline-primary-light:focus {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
    transform: translateY(-1px);
}
/* proof-band — centered heading + three soft giant-number cards */
.proof-band__eyebrow {
    letter-spacing: 0.14em;
}

.proof-band__heading {
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.proof-band__card {
    padding: 1.75rem;
    min-height: 100%;
}

.proof-band__rule {
    height: 0;
    width: 3rem;
}

.proof-band__figure {
    letter-spacing: -0.035em;
}

.proof-band__number {
    font-variant-numeric: tabular-nums;
}

.proof-band__suffix {
    top: 0;
    margin-top: 0.15em;
    vertical-align: baseline;
}

/* intro — ledger rail: photo-left stack with bar chart */
.intro-ledger__eyebrow {
    letter-spacing: 0.12em;
}

.intro-ledger__title {
    letter-spacing: -0.03em;
}

.intro-ledger__mark {
    height: 0.2em;
    margin-top: 0.15em;
}

.intro-ledger__stack {
    padding-left: 0.75rem;
}

.intro-ledger__avatar {
    width: 2.75rem;
    height: 2.75rem;
    margin-left: -0.7rem;
    line-height: 1;
}

.intro-ledger__rule {
    height: 0;
    border-top-style: solid !important;
}

.intro-ledger__photo {
    min-height: 22rem;
}

.intro-ledger__photo-img {
    object-fit: cover;
}

.intro-ledger__card {
    padding: 1.25rem;
}

.intro-ledger__caption {
    font-size: 0.75rem;
    line-height: 1rem;
}

.intro-ledger__bars {
    height: 5.5rem;
}

.intro-ledger__bar {
    transform-origin: center bottom;
    animation: intro-ledger-bar 3.6s ease-in-out infinite;
}

.intro-ledger__bar--b1 { height: 45%; }
.intro-ledger__bar--b2 { animation-delay: 0.2s; height: 55%; }
.intro-ledger__bar--b3 { animation-delay: 0.4s; height: 85%; }
.intro-ledger__bar--b4 { animation-delay: 0.6s; height: 40%; }
.intro-ledger__bar--b5 { animation-delay: 0.8s; height: 70%; }

@keyframes intro-ledger-bar {
    0%, 100% {
        transform: scaleY(0.55);
        opacity: 0.55;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@media (min-width: 1024px) {
    .intro-ledger__photo {
        min-height: 36rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-ledger__bar {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* short stat captions sit in narrow columns on phones: long words break instead of spilling over */
.intro-ledger__caption { min-width: 0; overflow-wrap: anywhere; }

/* benefits reel — autoplay carousel, layout/motion only (no colors) */
.benefits-reel { --reel-duration: 5200ms; }
.benefits-reel__count { font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }

.benefits-reel__ctrl { appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; width: 3rem; height: 3rem; padding: 0; }

.benefits-reel__track {
    position: relative;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.benefits-reel__track::-webkit-scrollbar { display: none; }

.benefits-reel__slide { width: 85%; scroll-snap-align: start; }
@media (min-width: 576px) { .benefits-reel__slide { width: 22rem; } }
@media (min-width: 1200px) { .benefits-reel__slide { width: 24rem; } }

.benefits-reel__card { transition: transform 400ms ease, box-shadow 400ms ease, opacity 400ms ease; opacity: .72; }
.benefits-reel__slide.is-active .benefits-reel__card { transform: translateY(-.5rem); opacity: 1; }
.benefits-reel__card:hover { opacity: 1; }

.benefits-reel__edge { height: .25rem; transform: scaleX(0); transform-origin: left center; transition: transform 500ms ease; }
.benefits-reel__slide.is-active .benefits-reel__edge { transform: scaleX(1); }

.benefits-reel__ring { width: 4rem; height: 4rem; }
.benefits-reel__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.benefits-reel__arc { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .35; }
.benefits-reel__slide.is-active .benefits-reel__arc { opacity: 1; animation: benefits-reel-fill var(--reel-duration) linear forwards; }
.benefits-reel.is-paused .benefits-reel__slide.is-active .benefits-reel__arc { animation-play-state: paused; }
.benefits-reel.is-static .benefits-reel__arc { animation: none; stroke-dashoffset: 0; }

.benefits-reel__dot { display: block; width: .5rem; height: .5rem; opacity: .3; transition: width 300ms ease, opacity 300ms ease; }
.benefits-reel__dot.is-active { width: 2rem; opacity: 1; }

@keyframes benefits-reel-fill { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .benefits-reel__track { scroll-behavior: auto; }
    .benefits-reel__card, .benefits-reel__edge, .benefits-reel__dot { transition: none; }
    .benefits-reel__slide.is-active .benefits-reel__arc { animation: none; stroke-dashoffset: 0; }
}

/* wpg-hidden: utility classes are renamed in production builds, so hidden states must not rely on .hidden / .d-none alone */
.benefits-reel[hidden], .benefits-reel [hidden], .benefits-reel .hidden.d-none { display: none !important; }

/* CTA band: the button group may shrink and wrap so long labels never run past the band */
.benefits-reel :has(> a[href] + a[href]) { flex-shrink: 1 !important; min-width: 0; max-width: 100%; }
.benefits-reel :has(> a[href] + a[href]) > a { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.benefits-reel :has(+ :has(> a[href] + a[href])) { min-width: 0; }

/* folio-rail — mirror sticky phone + scroll-story services */
.folio-rail {
    overflow-x: clip;
}

.folio-rail__eyebrow {
    letter-spacing: 0.14em;
}

.folio-rail__heading {
    letter-spacing: -0.025em;
}

.folio-rail__blob {
    width: 18rem;
    height: 18rem;
    filter: blur(48px);
}

.folio-rail__blob--a {
    transform: translate(-20%, -10%);
}

.folio-rail__blob--b {
    width: 14rem;
    height: 14rem;
    transform: translate(70%, 40%);
}

.folio-rail__dots {
    margin: 0;
    list-style: none;
}

.folio-rail__dot {
    width: 0.55rem;
    height: 0.55rem;
    opacity: 0.35;
    transition: opacity 250ms ease, transform 250ms ease;
}

.folio-rail__dot.is-active {
    opacity: 1;
    transform: scale(1.35);
}

.folio-rail__stage {
    position: relative;
    min-height: 32rem;
    align-self: flex-start;
}

.folio-rail__phone {
    width: 15.5rem;
    aspect-ratio: 9 / 19;
    padding: 0.5rem;
    border-radius: 2.6rem;
    margin: 0;
}

.folio-rail__screen {
    border-radius: 2.15rem;
}

.folio-rail__notch {
    width: 5.25rem;
    height: 1.3rem;
}

.folio-rail__status {
    font-size: 0.75rem;
}

.folio-rail__status i {
    margin-left: 0.2rem;
    font-size: 0.65rem;
}

.folio-rail__coin {
    width: 1.45rem;
    height: 1.45rem;
    font-size: 0.65rem;
}

.folio-rail__micro {
    font-size: 0.68rem;
    line-height: 1.2;
}

.folio-rail__chart {
    min-height: 6.5rem;
    overflow: visible;
}

.folio-rail__chart-svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 6.5rem;
    overflow: visible;
}

.folio-rail__chart-fill {
    transform-origin: center bottom;
    animation: folio-rail-chart-fill 4.2s ease-in-out infinite;
}

.folio-rail__chart-line {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: folio-rail-chart-draw 4.2s ease-in-out infinite;
}

.folio-rail__chart-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: folio-rail-chart-dot 4.2s ease-in-out infinite;
}

@keyframes folio-rail-chart-fill {
    0%, 12% { opacity: 0; transform: scaleY(0.55); }
    40%, 72% { opacity: 1; transform: scaleY(1); }
    88%, 100% { opacity: 0; transform: scaleY(0.55); }
}

@keyframes folio-rail-chart-draw {
    0% { stroke-dashoffset: 400; opacity: 0.35; }
    38% { stroke-dashoffset: 0; opacity: 1; }
    72% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 400; opacity: 0.35; }
}

@keyframes folio-rail-chart-dot {
    0%, 28% { opacity: 0; transform: translateY(6px) scale(0.6); }
    42%, 72% { opacity: 1; transform: translateY(0) scale(1); }
    88%, 100% { opacity: 0; transform: translateY(6px) scale(0.6); }
}

.folio-rail__step {
    transition: opacity 300ms ease;
}

@media (min-width: 1024px) {
    .folio-rail__phone {
        width: 17.5rem;
    }

    .folio-rail .folio-rail__stage {
        position: sticky;
        top: 6rem;
        min-height: auto;
        width: 100%;
    }

    .folio-rail .folio-rail__stage .folio-rail__phone {
        margin-inline: auto;
    }

    .folio-rail__step {
        min-height: 70vh;
    }

    .folio-rail.is-ready .folio-rail__step {
        opacity: 0.3;
    }

    .folio-rail.is-ready .folio-rail__step.is-active {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .folio-rail__chart-fill,
    .folio-rail__chart-line,
    .folio-rail__chart-dot {
        animation: none;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }

    .folio-rail__step,
    .folio-rail__dot {
        transition: none;
    }
}

/* time-range chips inside the phone mock: never spill out of the frame; extra chips scroll sideways */
ul:has(> li.folio-rail__micro) { overflow-x: auto; scrollbar-width: none; }
ul:has(> li.folio-rail__micro)::-webkit-scrollbar { display: none; }
li.folio-rail__micro { flex-shrink: 0; white-space: nowrap; }

/* testimonials — strip pass: single horizontal filmstrip marquee */
.strip-pass__eyebrow {
    letter-spacing: 0.14em;
}

.strip-pass__title {
    letter-spacing: -0.02em;
}

.strip-pass__row {
    width: 100%;
}

.strip-pass__track {
    width: max-content;
    animation: strip-pass-left 65s linear infinite;
    will-change: transform;
}

.strip-pass__row:hover .strip-pass__track,
.strip-pass__row:focus-within .strip-pass__track {
    animation-play-state: paused;
}

.strip-pass__list {
    gap: 1rem;
    padding-right: 1rem;
}

.strip-pass__card {
    width: 22rem;
    min-height: 15rem;
}

.strip-pass__avatar {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
}

.strip-pass__rating {
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .strip-pass__card {
        width: 28rem;
        min-height: 16rem;
    }
}

@keyframes strip-pass-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .strip-pass__track {
        animation: none;
        transform: none;
    }

    .strip-pass__row {
        overflow-x: auto;
    }
}

/* Лише layout / рух; кольори теми — у Blade */
.socialproof-card-hover {
    transition:
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.socialproof__stat-value,
.socialproof__stat-label {
    transition: transform 0.3s ease, color 0.2s ease;
}

@media (hover: hover) {
    .socialproof-card-hover:hover {
        box-shadow: 0 22px 44px -18px rgba(15, 23, 42, 0.2);
    }

    .dark .socialproof-card-hover:hover {
        box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.5);
    }

    .socialproof-card-hover:hover .socialproof__stat-value {
        transform: scale(1.08);
    }
}

@media (hover: hover) and (min-width: 640px) {
    .socialproof-card-hover--lift:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .socialproof-card-hover,
    .socialproof__stat-value,
    .socialproof__stat-label {
        transition: none;
    }

    .socialproof-card-hover:hover,
    .socialproof-card-hover:hover .socialproof__stat-value,
    .socialproof-card-hover--lift:hover,
    .socialproof__cta-link:hover {
        transform: none;
    }
}

.socialproof__min-shrink {
    min-width: 0;
}

.socialproof__cta-link {
    transition: transform 0.2s ease;
}

@media (hover: hover) {
    .socialproof__cta-link:hover {
        transform: scale(1.05);
    }
}

.ledger-rail__img { object-fit: cover; height: 16rem; }
.ledger-rail__bars { height: 8rem; }
.ledger-rail__bar {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    transform-origin: bottom center;
    animation: ledger-rail-bar 2.8s ease-in-out infinite;
}
.ledger-rail__bar--1 { height: 35%; opacity: 0.22; }
.ledger-rail__bar--2 { height: 50%; opacity: 0.34; animation-delay: 0.2s; }
.ledger-rail__bar--3 { height: 64%; opacity: 0.46; animation-delay: 0.4s; }
.ledger-rail__bar--4 { height: 82%; opacity: 0.6; animation-delay: 0.6s; }
.ledger-rail__bar--5 { height: 100%; opacity: 1; animation-delay: 0.8s; }
@keyframes ledger-rail-bar {
    0%, 100% { transform: scaleY(0.45); }
    50% { transform: scaleY(1); }
}
.ledger-rail__avatars { margin: 0; padding: 0; list-style: none; }
.ledger-rail__avatar { width: 2.75rem; height: 2.75rem; }
.ledger-rail__avatar + .ledger-rail__avatar { margin-left: -0.75rem; }
@media (prefers-reduced-motion: reduce) {
    .ledger-rail__bar { animation: none; }
}