/* The app presentation is scoped to the first home slide. */
.home-app-slide .home-hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.home-app-slide .home-hero-content { padding: 62px 0 92px; }
.hero-app-eyebrow { display: block; margin-bottom: 22px; color: #9edcd9; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.home-app-slide h1 { font-size: clamp(3rem, 5.5vw, 5.2rem); line-height: 1.04; letter-spacing: -.045em; }
.home-app-slide h1 span { color: #ff8990; }
.hero-app-how { margin-top: 24px; }
.hero-app-demo { --hero-tilt-x: 0deg; --hero-tilt-y: 0deg; --hero-shift-x: 0px; --hero-shift-y: 0px; position: relative; min-width: 0; padding: 30px 0 68px; }
.hero-app-scene { position: relative; height: 510px; display: grid; place-items: center; perspective: 1200px; isolation: isolate; }
.hero-app-scene::before { content: ''; position: absolute; width: 94%; height: 70%; border-radius: 50%; background: radial-gradient(ellipse, rgba(58, 175, 196, .22), transparent 68%); pointer-events: none; }
.hero-app-phone { appearance: none; cursor: pointer; text-align: start; position: relative; width: 230px; padding: 7px; border-radius: 37px; border: 1px solid #a1b7c9; background: linear-gradient(135deg, #dfebf4, #607a95 18%, #152033 47%, #8da6bc 85%, #e2e9ef); box-shadow: 20px 30px 60px rgba(0, 0, 0, .38), inset 0 0 0 2px #283b50; transform: rotateX(var(--hero-tilt-x)) rotateY(calc(-9deg + var(--hero-tilt-y))) rotateZ(3deg); transition: transform .35s ease-out; z-index: 2; }
.hero-app-screen { display: block; position: relative; overflow: hidden; aspect-ratio: 1170 / 2532; border-radius: 30px; background: #f1fbfb; }
.hero-app-screen img, .hero-app-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-app-video { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.hero-app-demo.is-playing .hero-app-video, .hero-app-demo.has-played .hero-app-video { opacity: 1; }
.hero-app-demo.has-error .hero-app-video { opacity: 0; }
.hero-app-transition { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .32s ease; }
.hero-app-demo.is-switching .hero-app-transition { opacity: 1; transition: none; }
.hero-app-landscape { position: absolute; inset: -65px -145px -48px; pointer-events: none; z-index: 0; }
.hero-app-landscape img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-app-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; max-width: 195px; padding: 14px 17px; border: 1px solid rgba(178, 209, 230, .28); border-radius: 18px; background: linear-gradient(135deg, #233e5e, #142941); box-shadow: 0 16px 32px rgba(0, 0, 0, .22); color: #fff; font-size: .86rem; line-height: 1.35; font-weight: 700; transform: translate(var(--hero-shift-x), var(--hero-shift-y)); transition: transform .4s ease-out; }
.hero-app-float-category { top: 75px; left: -4px; }
.hero-app-float-map { bottom: 78px; right: -4px; }
.hero-app-float-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: #ffa6ab; border-radius: 12px; background: rgba(252, 91, 98, .12); font-size: 1rem; }
.hero-app-float-map .hero-app-float-icon { color: #93e3dd; background: rgba(20, 184, 166, .12); }
.hero-app-float small { display: block; color: #aec7d9; font-size: .7rem; margin-top: 4px; letter-spacing: .12em; text-transform: uppercase; }
.hero-app-chapters { display: flex; justify-content: center; gap: 8px; position: relative; z-index: 4; margin-top: 8px; }
.hero-app-chapters[hidden] { display: none; }
.hero-app-chapters button { display: flex; align-items: center; gap: 7px; padding: 10px 11px; min-height: 44px; border: 1px solid rgba(183, 206, 234, .2); border-radius: 12px; background: rgba(12, 27, 47, .65); color: #c5d5e6; font: inherit; font-size: .78rem; line-height: 1.3; transition: background .2s, color .2s, border-color .2s; }
.hero-app-chapters button span { color: #9db7ce; font-size: .7rem; }
.hero-app-chapters button[aria-pressed="true"] { color: #fff; border-color: rgba(255, 137, 144, .65); background: rgba(252, 91, 98, .13); }
.hero-app-chapters button[aria-pressed="true"] span { color: #ffa3a9; }
.hero-app-chapters button:hover { color: #fff; background: #233e5e; }
#homeHeroCarousel > .carousel-indicators { z-index: 6; }
#homeHeroCarousel > .carousel-indicators button { position: relative; width: 28px; height: 28px; margin: 0; background: transparent; opacity: 1; }
#homeHeroCarousel > .carousel-indicators button::after { content: ''; position: absolute; width: 10px; height: 10px; left: 9px; top: 9px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
#homeHeroCarousel > .carousel-indicators button.active::after { background: var(--iw-primary); }
.hero-app-chapters button:focus-visible, .hero-app-phone:focus-visible { outline: 3px solid #9ee5df; outline-offset: 4px; }
@media (min-width: 1400px) { .hero-app-phone { width: 242px; } .hero-app-float-category { left: 12px; } .hero-app-float-map { right: 12px; } }
@media (max-width: 1199px) and (min-width: 992px) { .home-app-slide .home-hero-grid { gap: 24px; } .hero-app-float { max-width: 165px; padding: 12px; } .hero-app-float-category { left: -6px; top: 52px; } .hero-app-float-map { right: -6px; bottom: 58px; } }
@media (max-width: 991px) {
    .home-app-slide .home-hero-grid { grid-template-columns: 1fr; gap: 10px; padding: 48px 0 82px; }
    .home-app-slide .home-hero-content { padding: 0; }
    .hero-app-eyebrow { margin-bottom: 16px; }
    .home-app-slide h1 { font-size: clamp(2.6rem, 7.5vw, 4.5rem); margin-bottom: 18px; }
    .home-app-slide .hero-store-badges { justify-content: center; }
    .home-app-slide .hero-app-how { align-items: center; justify-content: center; }
    .hero-app-demo { padding: 12px 0 0; max-width: 460px; width: 100%; margin: auto; }
    .hero-app-scene { height: 440px; }
    .hero-app-landscape { inset: -38px -85px; opacity: .8; }
    .hero-app-phone { width: 195px; }
    .hero-app-float { max-width: 160px; padding: 12px; text-align: left; }
    .hero-app-float-category { top: 48px; left: 0; }
    .hero-app-float-map { bottom: 58px; right: 0; }

}
@media (max-width: 575px) {
    .home-app-slide .home-hero-grid { padding-top: 32px; padding-bottom: 80px; }
    .home-app-slide h1 { font-size: clamp(2.5rem, 10vw, 3.7rem); }
    .hero-app-eyebrow { font-size: .73rem; }
    .hero-app-scene { height: 405px; }
    .hero-app-landscape { inset: -24px -62px; opacity: .7; }
    .hero-app-phone { width: 178px; border-radius: 31px; padding: 6px; }
    .hero-app-screen { border-radius: 25px; }
    .hero-app-float { max-width: 140px; gap: 8px; padding: 10px; font-size: .75rem; border-radius: 14px; }
    .hero-app-float-icon { width: 29px; height: 29px; flex-basis: 29px; font-size: .85rem; border-radius: 9px; }
    .hero-app-float-category { top: 28px; }
    .hero-app-float-map { bottom: 30px; }
    .hero-app-chapters { gap: 6px; }
    .hero-app-chapters button { padding: 9px 8px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
    #homeHeroCarousel .carousel-item { transition: none; }
    .hero-app-phone { transform: none; transition: none; }
    .hero-app-float { transform: none; transition: none; }
    .hero-app-video, .hero-app-transition, .hero-app-chapters button { transition: none; }
}