/* ==========================================================================
   Closing call-to-action (partials/cta-tiles) — after the cruxlab.com hero:
   a short band fading from dark to Cloudi5 red, with frosted-glass tiles
   stacked like stairs in the bottom corner. Pointing at a tile lights it
   white, warms its neighbours (cta-tiles.js sets --lit from 0 to 1 by
   distance) and shows its reason on the left. Prefixed ct-.
   ========================================================================== */

.ct { position: relative; overflow: hidden; background: linear-gradient(180deg, #131313 0%, #1c0a0e 34%, #5c0408 70%, #b8060e 92%, #d80810 100%); color: #fff; isolation: isolate; }
.ct::before { content: ''; position: absolute; right: -10%; bottom: -30%; z-index: -1; width: 70%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 106, 112, .35), transparent); filter: blur(20px); pointer-events: none; }
.ct__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: end; gap: 2rem; width: calc(100% - 2 * clamp(1.25rem, 5.5vw, 5rem)); max-width: 80rem; min-height: 31rem; margin: 0 auto; padding-top: clamp(4rem, 6vw, 5rem); }
.ct__text { align-self: center; padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.ct__kicker { margin: 0 0 1rem; color: #ff8a8f; font-size: .85rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ct__h { max-width: 13ch; margin: 0; font-size: clamp(2.2rem, 3.8vw, 3.4rem); font-weight: 700; line-height: 1.06; letter-spacing: -.045em; }
.ct__reason { min-height: 6rem; margin: 1.5rem 0 2rem; }
.ct__reason-in { max-width: 30rem; margin: 0; transition: opacity .25s, transform .35s cubic-bezier(.22, 1, .36, 1); }
.ct__reason-in.is-swap { opacity: 0; transform: translateY(8px); }
.ct__reason-t { display: block; margin-bottom: .35rem; font-size: 1.2rem; font-weight: 600; }
.ct__reason-t:empty { display: none; }
.ct__reason-d { color: rgba(255, 255, 255, .78); font-size: 1.02rem; line-height: 1.6; }
.ct__btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.ct__btn { display: inline-flex; align-items: center; gap: .9rem; padding: .3rem .3rem .3rem 1.15rem; border: 1px solid #fff; border-radius: .4rem; background: #fff; color: #111; font-size: 1.02rem; font-weight: 600; text-decoration: none; transition: transform .3s, box-shadow .3s; }
.ct__btn i { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .3rem; background: #141414; color: #fff; transition: background .3s; }
.ct__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(255, 106, 112, .8); }
.ct__btn:hover i { background: var(--dbl-orange, #d80810); }
.ct__btn--ghost { padding: .3rem 1.3rem; min-height: 3.3rem; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ct__btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }

/* The staircase. Each tile is frosted glass; --lit warms it toward white. */
.ct__tiles { --s: clamp(5.5rem, 8.2vw, 8.4rem); display: grid; grid-template-columns: repeat(6, var(--s)); grid-template-rows: repeat(3, var(--s)); gap: .3rem; justify-content: end; align-self: end; }
.ct__tile { --lit: 0; position: relative; display: grid; place-items: center; overflow: hidden; padding: 0; border: 0; border-radius: 1.15rem; background: rgba(255, 255, 255, calc(.07 + var(--lit) * .42)); box-shadow: inset 0 0 1.5rem rgba(255, 255, 255, calc(.16 + var(--lit) * .45)), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 calc(var(--lit) * 2.2rem) rgba(255, 120, 126, calc(var(--lit) * .55)); color: rgba(255, 255, 255, calc(.45 + var(--lit) * .4)); font: inherit; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; transition: background .7s, box-shadow .7s, color .5s, transform .45s cubic-bezier(.34, 1.4, .64, 1); }
.ct__tile--plain { cursor: default; }
.ct__tile i { font-size: clamp(1.3rem, 2vw, 1.8rem); transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), color .3s; }
.ct__tile-t { position: absolute; left: .5rem; right: .5rem; bottom: .7rem; color: #8a050b; font-size: clamp(.6rem, .8vw, .74rem); font-weight: 700; line-height: 1.15; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s cubic-bezier(.22, 1, .36, 1); }
.ct__tile::before { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%); transform: translateX(-100%); pointer-events: none; }
.ct__tile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ct__tile.is-on { --lit: 1; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 2.8rem rgba(255, 110, 118, .85), 0 18px 34px -16px rgba(0, 0, 0, .6); color: #d80810; transform: translateY(-5px); transition-duration: .25s, .25s, .25s, .45s; }
.ct__tile.is-on i { transform: translateY(-.75rem) scale(1.08); }
.ct__tile.is-on .ct__tile-t { opacity: 1; transform: none; transition-delay: .08s; }
.ct__tile.is-on::before { animation: ct-shine .9s ease-out; }
@keyframes ct-shine { to { transform: translateX(100%); } }

@media (max-width: 1000px) {
    .ct__in { grid-template-columns: 1fr; min-height: 0; }
    .ct__text { padding-bottom: 0; }
    .ct__h { max-width: 18ch; }
    .ct__tiles { --s: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; justify-content: stretch; padding-bottom: 1rem; }
    .ct__tile { grid-area: auto !important; aspect-ratio: 1; }
    .ct__tile--plain { display: none; }
}
@media (max-width: 480px) {
    .ct__tile { border-radius: .8rem; }
    .ct__tile-t { bottom: .4rem; font-size: .56rem; }
    .ct__tile.is-on i { transform: translateY(-.55rem); }
}
@media (prefers-reduced-motion: reduce) {
    .ct__tile, .ct__tile i, .ct__tile-t, .ct__reason-in { transition: none; }
    .ct__tile.is-on { transform: none; }
    .ct__tile.is-on i { transform: none; }
    .ct__tile.is-on::before { animation: none; }
}