/* intro v23 — BAPE grunge wizard: film strip, giant numbers, clip-path wipe hover, height-expand step */

/* Full-width step photo — cinematic banner, object-fit has no BS utility */
.intro-grit__photo {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

/* Progress track height (no BS h-N utility) */
.intro-grit__track { height: 0.25rem; }

/* Clip-path reveal on hover: primary wipe grows from the corner */
.intro-grit__wipe {
    clip-path: circle(0% at 90% 10%);
    opacity: 0.12;
    transition: clip-path 420ms ease;
}
.intro-grit__card:hover .intro-grit__wipe {
    clip-path: circle(150% at 90% 10%);
}

/* Height-expand accordion-style step entrance */
.intro-grit__step {
    animation: intro-grit-expand 420ms ease;
    transform-origin: top;
}
@keyframes intro-grit-expand {
    from { opacity: 0; transform: scaleY(0.96) translateY(-0.5rem); }
    to   { opacity: 1; transform: scaleY(1) translateY(0); }
}

/* Progress bar transition */
.intro-grit__bar { transition: width 360ms ease; width: 0; }

/* Stepper dots — state via opacity, colour stays a Tailwind class */
.intro-grit__dot {
    width: 0.625rem;
    height: 0.625rem;
    opacity: 0.35;
    transition: opacity 200ms ease, transform 200ms ease;
}
.intro-grit__dot.is-active {
    opacity: 1;
    transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
    .intro-grit__step { animation: none; }
    .intro-grit__wipe { transition: none; }
}

/* Лише 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);
    }
}

/* benefits v20 — icon tile size (TW w-10 h-10 has no BS util) */
.benefits__icon-tile {
  width: 2.5rem;
  height: 2.5rem;
}

.steps-bg-timeline__card-col {
    max-width: 28rem;
}

.steps-bg-timeline__badge-circle {
    width: 4rem;
    height: 4rem;
}

.steps-bg-timeline__timeline-line {
    height: 1px;
}

/* Mobile: label stays in flow under the badge (no overlap between adjacent steps).
   From md up it detaches below the timeline line, centered on the badge. */
.steps-bg-timeline__badge-label {
    max-width: 8rem;
}

@media (min-width: 768px) {
    .steps-bg-timeline__badge-label {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 2rem;
        max-width: none;
        white-space: nowrap;
    }
}

/* Card hover: scale */
.portfolio-item-hover {
    transition: transform 0.3s ease;
}
.portfolio-item-hover:hover {
    transform: scale(1.05);
}


.nudge-beacon__section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.nudge-beacon__prompt--glow:hover { transform: scale(1.05); transition: transform .2s ease; }

.nudge-beacon__cards-bs {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

.nudge-beacon__cards-bs > div {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .nudge-beacon__cards-bs > div {
        flex: 1 1 calc((100% - 4rem) / 3);
        max-width: calc((100% - 4rem) / 3);
    }
}