.hero-milestone__title { letter-spacing: -0.02em; }

.hero-milestone__copy > * { opacity: 0; transform: translateY(1.25rem); animation: hero-milestone-rise 800ms cubic-bezier(.2, .8, .2, 1) forwards; }
.hero-milestone__copy > *:nth-child(2) { animation-delay: 100ms; }
.hero-milestone__copy > *:nth-child(3) { animation-delay: 200ms; }
.hero-milestone__copy > *:nth-child(4) { animation-delay: 300ms; }

.hero-milestone__panel { opacity: 0; transform: translateY(2rem); transition: opacity 800ms ease, transform 800ms cubic-bezier(.2, .8, .2, 1); }
.hero-milestone__panel.is-visible { opacity: 1; transform: none; }

.hero-milestone__stage { height: 16rem; }
.hero-milestone__chart { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-milestone__chart [data-line] { transition: stroke-dashoffset 2200ms cubic-bezier(.45, .05, .35, 1) 300ms; }
.hero-milestone__chart [data-area] { transition: opacity 900ms ease 1800ms; }
.hero-milestone__panel.is-visible .hero-milestone__chart [data-area] { opacity: .16; }

.hero-milestone__pin { transform: translate(-50%, calc(-100% + .625rem)); }
.hero-milestone__tip { white-space: nowrap; opacity: 0; transform: translateY(.5rem) scale(.8); transform-origin: bottom center; transition: opacity 400ms ease, transform 500ms cubic-bezier(.34, 1.56, .64, 1); }
.hero-milestone__dot { width: 1.25rem; height: 1.25rem; transform: scale(0); transition: transform 450ms cubic-bezier(.34, 1.56, .64, 1); }
.hero-milestone__pin.is-on .hero-milestone__tip { opacity: 1; transform: none; transition-delay: 120ms; }
.hero-milestone__pin.is-on .hero-milestone__dot { transform: scale(1); }
.hero-milestone__micro { font-size: .75rem; line-height: 1rem; }

.hero-milestone__icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.hero-milestone__icon + * { min-width: 0; overflow-wrap: anywhere; }
.hero-milestone__badge { opacity: 0; transform: translateY(1rem); transition: opacity 500ms ease, transform 500ms ease; }
.hero-milestone.is-done .hero-milestone__badge { opacity: 1; transform: none; }
.hero-milestone.is-done li:nth-child(2) > .hero-milestone__badge { transition-delay: 100ms; }
.hero-milestone.is-done li:nth-child(3) > .hero-milestone__badge { transition-delay: 200ms; }
.hero-milestone.is-done li:nth-child(4) > .hero-milestone__badge { transition-delay: 300ms; }

@keyframes hero-milestone-rise { to { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
    .hero-milestone__stage { height: 12rem; }
    .hero-milestone__tip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-milestone__copy > * { animation: none; opacity: 1; transform: none; }
    .hero-milestone__panel, .hero-milestone__badge, .hero-milestone__tip, .hero-milestone__dot,
    .hero-milestone__chart [data-line], .hero-milestone__chart [data-area] { transition: none; opacity: 1; transform: none; }
}

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

/* vault-story — centered statement, pulsing badge, sticky phone mockup + scroll-story services */
.vault-story {
    overflow-x: clip;
}

.vault-story__eyebrow {
    letter-spacing: 0.12em;
}

.vault-story__heading {
    letter-spacing: -0.02em;
}

/* Pulsing concentric badge */
.vault-story__badge {
    width: 7.5rem;
    height: 7.5rem;
}

.vault-story__badge-core {
    width: 4.5rem;
    height: 4.5rem;
}

.vault-story__pulse {
    animation: vault-story-pulse 2.4s ease-out infinite;
}

@keyframes vault-story-pulse {
    0% {
        transform: scale(0.85);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

.vault-story__guide {
    width: 0;
    height: 5rem;
}

.vault-story .vault-story__guide {
    border-left-style: dashed !important;
}

/* Phone stage + rings */
.vault-story__stage {
    min-height: 34rem;
}

.vault-story__ring--outer {
    width: 40rem;
    height: 40rem;
}

.vault-story__ring--middle {
    width: 30rem;
    height: 30rem;
}

.vault-story__ring--inner {
    width: 21rem;
    height: 21rem;
}

.vault-story__phone {
    width: 16rem;
    aspect-ratio: 9 / 19;
    padding: 0.55rem;
    border-radius: 2.75rem;
    margin: 0;
}

.vault-story__screen {
    border-radius: 2.25rem;
}

.vault-story__notch {
    width: 5.5rem;
    height: 1.4rem;
}

.vault-story__status {
    font-size: 0.75rem;
}

.vault-story__status i {
    margin-left: 0.2rem;
    font-size: 0.65rem;
}

.vault-story__coin {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.7rem;
}

.vault-story__micro {
    font-size: 0.7rem;
    line-height: 1.2;
}

.vault-story__chart {
    min-height: 7rem;
    overflow: visible;
}

.vault-story__chart-svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 7rem;
    overflow: visible;
}

.vault-story__chart-fill {
    transform-origin: center bottom;
    animation: vault-story-chart-fill 4.2s ease-in-out infinite;
}

.vault-story__chart-line {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: vault-story-chart-draw 4.2s ease-in-out infinite;
}

.vault-story__chart-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: vault-story-chart-dot 4.2s ease-in-out infinite;
}

@keyframes vault-story-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 vault-story-chart-draw {
    0% { stroke-dashoffset: 420; opacity: 0.35; }
    38% { stroke-dashoffset: 0; opacity: 1; }
    72% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 420; opacity: 0.35; }
}

@keyframes vault-story-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); }
}

.vault-story__periods {
    margin: 0;
    list-style: none;
}

/* Progress rail */
.vault-story__track {
    width: 2.75rem;
    min-height: 18rem;
    margin: 0;
    list-style: none;
}

.vault-story__mark {
    width: 2.25rem;
    height: 2.25rem;
}

.vault-story__mark-dot {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 250ms ease, transform 250ms ease;
}

.vault-story__mark.is-active .vault-story__mark-dot {
    opacity: 1;
    transform: scale(1);
}

.vault-story__step {
    transition: opacity 300ms ease;
}

.vault-story__stage {
    position: relative;
}

@media (min-width: 1024px) {
    .vault-story__phone {
        width: 18rem;
    }

    .vault-story .vault-story__stage {
        position: sticky;
        top: 6rem;
        min-height: calc(100vh - 8rem);
    }

    .vault-story__rail {
        position: sticky;
        top: 35vh;
    }

    .vault-story__step {
        min-height: 75vh;
    }

    .vault-story.is-ready .vault-story__step {
        opacity: 0.3;
    }

    .vault-story.is-ready .vault-story__step.is-active {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-story__pulse,
    .vault-story__chart-fill,
    .vault-story__chart-line,
    .vault-story__chart-dot {
        animation: none;
    }

    .vault-story__chart-fill,
    .vault-story__chart-dot {
        opacity: 1;
        transform: none;
    }

    .vault-story__chart-line {
        opacity: 1;
        stroke-dashoffset: 0;
    }

    .vault-story__step,
    .vault-story__mark-dot {
        transition: none;
    }
}

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


.process__hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process__hover-lift:hover {
    transform: scale(1.04);
}

.process__step-group:hover .process__badge-rise,
.process__step-group:hover .process__icon-rise {
    transform: scale(1.08);
}

/* Менш «важка» анімація (soft / fluid варіанти) */
.process--hover-soft .process__hover-lift:hover,
.process--hover-fluid .process__hover-lift:hover {
    transform: translateY(-3px);
}

.process--hover-soft .process__step-group:hover .process__badge-rise,
.process--hover-soft .process__step-group:hover .process__icon-rise,
.process--hover-fluid .process__step-group:hover .process__badge-rise {
    transform: scale(1.025);
}

.process--hover-fluid .process__hover-lift {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.process--hover-fluid .process__badge-rise,
.process--hover-fluid .process__deco-rise {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
}

.process.process--timeline-compact .process__hover-lift:hover {
    transform: translateY(-2px);
}

/* process--timeline-compact: один відступ від осі лінії (TW/BS); картка на всю ширину ряду */
.process.process--timeline-compact .process__step {
    padding-left: 5rem;
}

@media (min-width: 768px) {
    .process.process--timeline-compact .process__step {
        padding-left: 5.5rem;
    }
}

.process.process--timeline-compact .process__card {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}


/* Лише тінь на картці, без scale (soft) */
.process--hover-soft .process__card.process__hover-lift:hover {
    transform: none;
}

/* Контраст цифр на світлому / градієнті */
.process__num-pop {
    box-shadow:
        0 0 0 3px var(--bs-body-bg, #fff),
        0 4px 14px rgba(0, 0, 0, 0.18);
}

.process__meta-on-primary {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Вертикальна лінія: видима ширина (BS) + центр під колом w-12 (3rem) */
.process__vline--through-12 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.5rem;
    width: 0.25rem;
    margin-left: -0.125rem;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
}

/* Центр під колом w-16 (4rem) — v2 таймлайн */
.process__vline--through-16 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2rem;
    width: 0.25rem;
    margin-left: -0.125rem;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
}

/* Вузол w-8, left 1.25rem → центр 2.25rem */
.process__vline--through-node-sm {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2.25rem;
    width: 0.25rem;
    margin-left: -0.125rem;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
}

/* Горизонтальна лінія таймлайну (v19) */
.process__hline--bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 0.25rem;
    top: 1.5rem;
    margin-top: -0.125rem;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
}

/* v3: номер над карточкою (BS/TW) */
.process__float-num-fix {
    top: -1.5rem;
}

.process__float--lifted {
    top: -1.35rem;
    left: 0.75rem;
}

/* Легкий блюр + темний шар (білий заголовок на світлому фото) */
.process__overlay-blur {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background-color: rgba(15, 23, 42, 0.62);
}

.process__head-glass {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Відступ під «літаючий» номер (BS часто потребує більше) */
.process__card--float-gap {
    padding-top: 6.75rem;
}

/* v6: центральна вісь на всю висоту */
.process__vline--center-md {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0.25rem;
    margin-left: -0.125rem;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 768px) {
    .process__step-row > .process__dot--center-line {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.process__badge-rise,
.process__icon-rise {
    transition: transform 0.3s ease;
}

.process__decor-dot {
    opacity: 0.45;
    transition: opacity 0.3s ease;
}

.process__step-group:hover .process__decor-dot {
    opacity: 1;
}

.process__decor-dot--subtle {
    opacity: 0.28;
}

.process__step-group:hover .process__decor-dot--subtle {
    opacity: 0.7;
}

.process__step-group:hover .process__deco-rise {
    opacity: 0.45;
}

.process__deco-rise {
    transition: opacity 0.3s ease;
}

/* Кола з цифрами — синхрон з Tailwind w-* h-* */
.process__num-fixed--8 {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    box-sizing: border-box;
    flex-shrink: 0;
}

.process__num-fixed--10 {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    box-sizing: border-box;
    flex-shrink: 0;
}

.process__num-fixed--12 {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    box-sizing: border-box;
    flex-shrink: 0;
}

.process__num-fixed--16 {
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    min-height: 4rem;
    box-sizing: border-box;
    flex-shrink: 0;
}

.process__num-fixed--20 {
    width: 5rem;
    height: 5rem;
    min-width: 5rem;
    min-height: 5rem;
    box-sizing: border-box;
    flex-shrink: 0;
}

.process__num-fixed--24 {
    width: 6rem;
    height: 6rem;
    min-width: 6rem;
    min-height: 6rem;
    box-sizing: border-box;
    flex-shrink: 0;
}

.process__num-fixed--32 {
    width: 8rem;
    height: 8rem;
    min-width: 8rem;
    min-height: 8rem;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* v2 аватар: квадратне поле + cover → рівне коло з rounded-circle */
.process__avatar-img {
    width: 6rem;
    height: 6rem;
    min-width: 6rem;
    min-height: 6rem;
    object-fit: cover;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* v1 @ifRandom декор: якір + розмір (щоб не «літав» у BS) */
.process__decor-blob-fix {
    position: absolute;
    width: 10rem;
    height: 10rem;
    top: -2.5rem;
    right: 1rem;
    z-index: -1;
    pointer-events: none;
}

/* v5 декор тло */
.process__decor-faint-fix {
    position: absolute;
    width: 6rem;
    height: 6rem;
    top: 25%;
    left: 0;
    z-index: -1;
    pointer-events: none;
}

/* v14 glow */
.process__glow-fix {
    position: absolute;
    width: 16rem;
    height: 16rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .process__hover-lift,
    .process__badge-rise,
    .process__icon-rise,
    .process__decor-dot,
    .process__decor-dot--subtle,
    .process__deco-rise {
        transition: none;
    }

    .process__hover-lift:hover,
    .process--hover-soft .process__hover-lift:hover,
    .process--hover-fluid .process__hover-lift:hover,
    .process.process--timeline-compact .process__hover-lift:hover {
        transform: none;
    }

    .process__step-group:hover .process__badge-rise,
    .process__step-group:hover .process__icon-rise {
        transform: none;
    }

    .process__step-group:hover .process__decor-dot,
    .process__step-group:hover .process__decor-dot--subtle,
    .process__step-group:hover .process__deco-rise {
        opacity: unset;
    }
}

.faq-reader__tab, .faq-reader__step { appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; }
.faq-reader__tab { transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease; }
.faq-reader__tab:hover { transform: translateX(.25rem); }
.faq-reader__arrow { opacity: 0; transform: translateX(-.5rem); transition: opacity 250ms ease, transform 250ms ease; }
.faq-reader__tab.is-active .faq-reader__arrow { opacity: 1; transform: none; }
.faq-reader__q { min-width: 0; }

.faq-reader__seg { height: .375rem; }
.faq-reader__fill { width: 0; }
.faq-reader__step { width: 2.75rem; height: 2.75rem; }
.faq-reader__bulb { width: 2.25rem; height: 2.25rem; }

.faq-reader__stage { min-height: 16rem; }
@keyframes faq-reader-in { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: none; } }
.faq-reader__panel.is-current { animation: faq-reader-in 500ms cubic-bezier(.2, .8, .2, 1) both; }

@media (min-width: 992px) {
    .faq-reader__stage { min-height: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
    .faq-reader__tab, .faq-reader__arrow { transition: none; }
    .faq-reader__tab:hover { transform: none; }
    .faq-reader__panel.is-current { animation: none; }
}

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

/* Production builds compile the sem classes after the utility layer, so the toggled utilities cannot restyle the active tab; give it its own ring. */
.faq-reader__tab.is-active { outline: 2px solid; outline-offset: -2px; }