/* Hero cards scroll-scrub reveal (outcrowd.io-style: cards fly in from an
   offset, rotated position and settle as scroll progress advances). The
   transform itself is driven per-frame from js/hero-cards.js, matching
   how the original Webflow interaction also sets it directly rather than
   through a CSS @keyframes loop. */
.hero-cards {
    /* flex-flow: wrap; */
    column-gap: 20px;
    row-gap: 20px;
    /* justify-content: center; */
    align-items: center;
    /* perspective: 1600px; */
  max-width: 960px;
}
#format .hero-cards {
    max-width: 1200px;
}
.hero-cards .hero-card,
.hero-cards .stk-block-feature {
    background: rgba(255, 255, 255, 0.5);
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: relative;
    border-radius: 21px;
    padding: 0.1rem;
    overflow: hidden;
    margin-left: 0px;
    margin-right: 0px;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    -ms-border-radius: 21px;
    -o-border-radius: 21px;
}

.hero-cards { column-count: 2; column-gap: 20px; }               /* no perspective here */
.hero-cards > * {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;                            /* Safari still needs this */
  /* remove: transform-style, backface-visibility, will-change, perspective */
}
.hero-cards .hero-card__inner {
  perspective: 1600px;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Border glow — this is outcrowd's actual ".stats-card-gradient" technique
   (confirmed live via DevTools: a circular radial-gradient child, oversized
   relative to the card, continuously drifting position via translate3d
   through several waypoints on a loop). It's a blob whose fade-out color
   matches the card's own face color, so it reads as invisible across the
   middle and only shows as a glow where it pokes past the opaque inner
   content into the thin padding ring set above — not a border sweep on the
   card's own background (that was an invented approximation, replaced). */
.hero-cards .stk-block-feature .stk-container::before,
.hero-cards-wrp .stk-block-feature .stk-container::before {
    content: " " !important;
    position: absolute;
    z-index: 0;
    top: -10%;
    left: -25%;
    width: 110%;
    aspect-ratio: 2 / 3;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 35%);
    mix-blend-mode: hard-light;
    will-change: transform;
    animation: hero-cards-border-drift 7s ease-in-out infinite;
}

.hero-cards .stk-block-feature > .stk-content-align {
    position: relative;
    z-index: 1;
    /* background: #fff; */
    border-radius: inherit;
}

/* Core-group variant of the card (#format): there is no `.stk-container`
   child to hang the drifting highlight on, so it goes on the card's own
   ::before instead — same blob, same keyframes as the Stackable variant
   above. The `:not()` keeps this from double-painting on feature blocks,
   which already get the glow from their inner container. */
.hero-cards .hero-card:not(.stk-block-feature) {
    /* column-count layout has no row-gap, so the 20px rhythm between stacked
       cards has to come from a margin. The core group block computes to 0. */
    margin-bottom: 20px;
}

.hero-cards .hero-card:not(.stk-block-feature)::before {
    content: " ";
    position: absolute;
    z-index: 0;
    top: -10%;
    left: -25%;
    width: 110%;
    aspect-ratio: 2 / 3;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 35%);
    mix-blend-mode: hard-light;
    will-change: transform;
    animation: hero-cards-border-drift 7s ease-in-out infinite;
}

/* Lift the heading and accordion above the blob. */
.hero-cards .hero-card:not(.stk-block-feature) > * {
    position: relative;
    z-index: 1;
}

/* Stackable-columns variant (`.hero-cards-wrp`): the cards live inside the
   columns, one level down from `.stk-row`. The row keeps its own Stackable
   flex layout — no `column-count` override — so this only adds the card
   treatment (3D context, radius, glow) that the other variants get.

   Perspective belongs on the element whose children rotate, so each column
   gives its own cards an independent vanishing point. */
.hero-cards-wrp > .stk-row {
    perspective: none;
}

.hero-cards-wrp > .stk-row > .stk-block-column {
    perspective: 1600px;
}

/* The column is a plain layout wrapper — no card treatment, no glow. */
.hero-cards-wrp > .stk-row > .stk-block-column {
    overflow: visible;
    border-radius: 0;
    will-change: auto;
    transform-style: flat;
}

.hero-cards-wrp > .stk-row > .stk-block-column::before {
    content: none;
}

/* Card treatment on the actual cards. */
.hero-cards-wrp .stk-block-feature {
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
    border-radius: 21px;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    -ms-border-radius: 21px;
    -o-border-radius: 21px;
}

.hero-cards-wrp .stk-block-feature > .stk-content-align {
    position: relative;
    z-index: 1;
    border-radius: inherit;
}

/* The drift keyframes would otherwise run in sync on every card, which reads
   as mechanical. Negative delays start each one mid-cycle to desync them. */
.hero-cards-wrp .stk-block-feature:nth-child(2) .stk-container::before {
    animation-delay: -1.8s;
}

.hero-cards-wrp .stk-block-feature:nth-child(3) .stk-container::before {
    animation-delay: -3.4s;
}

@media (prefers-reduced-motion: reduce) {
    .hero-cards-wrp .stk-block-feature {
        transform: none !important;
    }
    .hero-cards-wrp .stk-block-feature .stk-container::before {
        animation: none !important;
    }
}

@keyframes hero-cards-border-drift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    28.57% {
        transform: translate3d(-55%, 45%, 0);
    }
    57.14% {
        transform: translate3d(80%, 25%, 0);
    }
    85.71% {
        transform: translate3d(45%, 70%, 0);
    }
    100% {
        transform: translate3d(-5%, 70%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
	.hero-cards .hero-card,
	.hero-cards .stk-block-feature {
		transform: none !important;
	}
	.hero-cards .hero-card::before,
	.hero-cards .stk-block-feature::before,
	.hero-cards .stk-block-feature .stk-container::before {
		animation: none !important;
	}
}

@media screen and (max-width: 767px) {
    .hero-cards {
		column-gap: 12px;
		row-gap: 12px;
    }
    .hero-cards .stk-block-text {
        display: none;
    }
    .hero-cards .wp-block-stackable-column {
        width: 100%;
        padding: 8px 8px 0 8px;
    }
    .hero-cards .stk-img-wrapper img {
        border-radius: 12px;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        -ms-border-radius: 12px;
        -o-border-radius: 12px;
    }
    .hero-cards .wp-block-group.has-global-padding {
        padding-bottom: 16px !important;
    }
}

@media screen and (max-width: 540px) {
	.hero-cards {
		column-count: 1;
	}
    .hero-cards h5.has-text-align-left {
        --stk-alignment-justify-content: center;
        --stk-alignment-text-align: center; 
        text-align: center;
    }
}