/* Landing — uses tokens from design-kit.css (load design-kit.css first) */

:root {
  --landing-max: 75rem;
  --landing-header-h: 4rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-header: 0 1px 0 rgba(0, 9, 18, 0.06);
  --shadow-float: 0 12px 40px rgba(0, 9, 18, 0.08);
  --shadow-mockup: 0 24px 48px rgba(0, 9, 18, 0.12);
}

@keyframes hero-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hero-icon-drift-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-6deg) scale(1);
  }
  30% {
    transform: translate3d(8px, -22px, 0) rotate(5deg) scale(1.05);
  }
  65% {
    transform: translate3d(-6px, -10px, 0) rotate(-4deg) scale(0.96);
  }
}

@keyframes hero-icon-drift-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(4deg);
  }
  22% {
    transform: translate3d(-14px, -16px, 0) rotate(-8deg);
  }
  48% {
    transform: translate3d(10px, -8px, 0) rotate(3deg);
  }
  72% {
    transform: translate3d(-4px, -24px, 0) rotate(-5deg);
  }
}

@keyframes hero-icon-drift-c {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  25% {
    transform: translate3d(10px, -14px, 0) scale(1.07) rotate(7deg);
  }
  50% {
    transform: translate3d(-8px, -22px, 0) scale(0.94) rotate(-6deg);
  }
  78% {
    transform: translate3d(6px, -6px, 0) scale(1.02) rotate(2deg);
  }
}

@keyframes hero-icon-drift-d {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  18% {
    transform: translate3d(14px, -12px, 0) rotate(10deg);
  }
  40% {
    transform: translate3d(-10px, -26px, 0) rotate(-8deg);
  }
  62% {
    transform: translate3d(12px, -18px, 0) rotate(6deg);
  }
  85% {
    transform: translate3d(-6px, -8px, 0) rotate(-3deg);
  }
}

@keyframes hero-icon-drift-e {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate3d(-16px, -18px, 0) rotate(-9deg) scale(1.04);
  }
  66% {
    transform: translate3d(12px, -12px, 0) rotate(6deg) scale(0.97);
  }
}

@keyframes hero-icon-drift-f {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  20% {
    transform: translate3d(-8px, -20px, 0) rotate(6deg) scale(1.06);
  }
  45% {
    transform: translate3d(14px, -14px, 0) rotate(-5deg) scale(0.95);
  }
  70% {
    transform: translate3d(4px, -28px, 0) rotate(4deg) scale(1.03);
  }
}

@keyframes hero-pulse-ring {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.12;
    transform: scale(1.04);
  }
}

.landing-body {
  position: relative;
  margin: 0;
  padding-top: var(--landing-header-h);
}

.landing-container {
  width: 100%;
  max-width: var(--landing-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.landing-top-target {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.landing-scroll-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--color-text-primary);
  background: var(--color-bg-block);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.25s var(--ease-out), visibility 0.25s, transform 0.25s var(--ease-out),
    background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.landing-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.landing-scroll-top:hover {
  background: var(--color-btn-secondary-pressed-bg);
  border-color: rgba(0, 9, 18, 0.22);
}

.landing-scroll-top:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.landing-scroll-top svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 960px) {
  .landing-scroll-top {
    right: max(1.5rem, env(safe-area-inset-right, 0px));
    bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  }
}

/* -----------------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--landing-header-h);
  display: flex;
  align-items: center;
  background-color: rgba(239, 239, 239, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast),
    background-color 200ms ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-header);
  border-bottom-color: var(--color-border-subtle);
  background-color: rgba(255, 255, 255, 0.92);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--landing-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-bold);
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.site-logo:hover {
  opacity: 0.8;
}

.site-logo__mark {
  width: 2rem;
  height: 2rem;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-radius: var(--radius-md);
  padding: 0.35rem;
}

.site-logo__img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

.site-logo__wordmark {
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.site-nav__link {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-nav__link:hover {
  color: var(--color-text-primary);
}

.site-header__cta .dk-btn {
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-caption);
  width: auto;
  min-width: 0;
}

@media (min-width: 768px) {
  .site-nav {
    display: flex;
  }
}

/* -----------------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--space-10) var(--space-12);
  overflow-x: clip;
  overflow-y: visible;
}

.hero__bg {
  position: absolute;
  inset: -30% -20% auto;
  height: 85%;
  background: radial-gradient(ellipse 70% 55% at 70% 10%, rgba(0, 9, 18, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 20% 60%, rgba(0, 9, 18, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: var(--space-8) var(--space-12);
  }
}

.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: min(34rem, 82vw);
  perspective: 900px;
}

.hero__visual-inner {
  position: relative;
  width: min(24rem, 92vw);
  aspect-ratio: 1;
  max-width: 100%;
}

.hero__orbit {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  border: 1px dashed rgba(0, 9, 18, 0.12);
  animation: hero-orbit-spin 48s linear infinite;
  pointer-events: none;
}

.hero__orbit::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(0, 9, 18, 0.08);
  animation: hero-orbit-spin 32s linear infinite reverse;
}

.hero__pulse {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px solid rgba(0, 9, 18, 0.1);
  animation: hero-pulse-ring 4s ease-in-out infinite;
  pointer-events: none;
}

.hero__float-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.25rem, 14vw, 5rem);
  height: clamp(3.25rem, 14vw, 5rem);
  padding: 0.15rem;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: none;
  z-index: 3;
  transition: transform 80ms linear;
  pointer-events: none;
}

.hero__float-icon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform-origin: 50% 60%;
  will-change: transform;
}

.hero__float-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0, 9, 18, 0.16))
    drop-shadow(0 3px 6px rgba(0, 9, 18, 0.07));
}

/* Dollar — крупнее */
.hero__float-icon--a {
  top: 0%;
  left: -4%;
  width: clamp(4rem, 17vw, 6.25rem);
  height: clamp(4rem, 17vw, 6.25rem);
}

.hero__float-icon--a .hero__float-icon-inner {
  animation: hero-icon-drift-a 5.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: 0.1s;
}

/* Step */
.hero__float-icon--b {
  bottom: 6%;
  right: -6%;
  width: clamp(3.5rem, 15vw, 5.5rem);
  height: clamp(3.5rem, 15vw, 5.5rem);
}

.hero__float-icon--b .hero__float-icon-inner {
  animation: hero-icon-drift-b 6.8s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  animation-delay: 0.65s;
}

/* r — компактнее */
.hero__float-icon--c {
  top: 32%;
  left: -10%;
  width: clamp(2.85rem, 12vw, 4.25rem);
  height: clamp(2.85rem, 12vw, 4.25rem);
}

.hero__float-icon--c .hero__float-icon-inner {
  animation: hero-icon-drift-c 4.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.4s;
}

/* Watch */
.hero__float-icon--d {
  top: 4%;
  right: -5%;
  width: clamp(3.75rem, 15.5vw, 5.75rem);
  height: clamp(3.75rem, 15.5vw, 5.75rem);
}

.hero__float-icon--d .hero__float-icon-inner {
  animation: hero-icon-drift-d 5.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  animation-delay: 0.2s;
}

/* Lock */
.hero__float-icon--e {
  bottom: 24%;
  left: -8%;
  width: clamp(3.4rem, 14.5vw, 5.35rem);
  height: clamp(3.4rem, 14.5vw, 5.35rem);
}

.hero__float-icon--e .hero__float-icon-inner {
  animation: hero-icon-drift-e 7.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  animation-delay: 1.1s;
}

/* Hand */
.hero__float-icon--f {
  top: 48%;
  right: -12%;
  width: clamp(3.6rem, 15vw, 5.6rem);
  height: clamp(3.6rem, 15vw, 5.6rem);
}

.hero__float-icon--f .hero__float-icon-inner {
  animation: hero-icon-drift-f 6.1s cubic-bezier(0.44, 0, 0.56, 1) infinite;
  animation-delay: 0.85s;
}

.hero__phone-wrap {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.hero__phone {
  --hero-phone-r-outer: 2.75rem;
  --hero-phone-bezel: 0.48rem;
  --hero-phone-r-inner: calc(var(--hero-phone-r-outer) - var(--hero-phone-bezel));
  position: relative;
  width: min(17.5rem, 76vw);
  transform: rotateY(-6deg) rotateX(4deg);
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
  filter: drop-shadow(0 20px 40px rgba(0, 9, 18, 0.16));
}

.hero__visual:hover .hero__phone {
  transform: rotateY(-2deg) rotateX(1deg);
  filter: drop-shadow(0 28px 52px rgba(0, 9, 18, 0.2));
}

.hero__phone-mockup {
  border-radius: var(--hero-phone-r-outer);
  padding: var(--hero-phone-bezel);
  background: linear-gradient(
    152deg,
    #5c5c5e 0%,
    #3a3a3c 18%,
    #1d1d1f 42%,
    #2e2e30 58%,
    #252527 78%,
    #1c1c1e 100%
  );
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 1px rgba(0, 0, 0, 0.5);
}

.hero__phone-screen {
  position: relative;
  aspect-ratio: 430 / 932;
  border-radius: var(--hero-phone-r-inner);
  overflow: hidden;
  background: #000;
}

.hero__phone-island {
  position: absolute;
  top: 0.58rem;
  left: 50%;
  z-index: 3;
  width: min(34%, 5.5rem);
  height: 1.65rem;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transform: translateX(-50%);
  pointer-events: none;
}

.hero__phone-screen-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: cover;
  object-position: top center;
  background: #000;
}

@media (max-width: 959px) {
  .hero {
    padding-block: var(--space-8) var(--space-10);
  }

  .hero__grid {
    gap: var(--space-8);
    align-items: stretch;
  }

  .hero__copy {
    order: -1;
    position: relative;
    z-index: 2;
    max-width: 100%;
  }

  .hero__visual {
    order: 1;
    min-height: 0;
    perspective: 800px;
  }

  .hero__visual-inner {
    aspect-ratio: unset;
    width: 100%;
    max-width: min(18.5rem, 100%);
    margin-inline: auto;
    min-height: min(17.5rem, 50vw);
  }

  .hero__phone {
    width: min(14rem, 86%);
    --hero-phone-r-outer: 2.35rem;
    --hero-phone-bezel: 0.4rem;
    --hero-phone-r-inner: calc(var(--hero-phone-r-outer) - var(--hero-phone-bezel));
    transform: rotateY(-4deg) rotateX(2deg);
  }

  .hero__visual:hover .hero__phone {
    transform: rotateY(-2deg) rotateX(1deg);
  }

  .hero__phone-island {
    top: 0.5rem;
    height: 1.3rem;
    width: min(36%, 4.25rem);
  }

  .hero__float-icon--a {
    left: -1%;
    top: 1%;
  }

  .hero__float-icon--b {
    right: -3%;
  }

  .hero__float-icon--c {
    left: -5%;
  }

  .hero__float-icon--d {
    right: -2%;
  }

  .hero__float-icon--e {
    left: -4%;
  }

  .hero__float-icon--f {
    right: -6%;
  }
}

@media (max-width: 699px) {
  .hero__grid {
    gap: var(--space-6);
  }

  .hero__visual-inner {
    max-width: min(17rem, 100%);
    min-height: min(16rem, 46vw);
  }

  .hero__phone {
    width: min(12.5rem, 85%);
    --hero-phone-r-outer: 2.05rem;
    --hero-phone-bezel: 0.34rem;
    --hero-phone-r-inner: calc(var(--hero-phone-r-outer) - var(--hero-phone-bezel));
  }

  .hero__phone-island {
    top: 0.42rem;
    height: 1.2rem;
    width: min(38%, 3.75rem);
  }

  .hero__title {
    font-size: clamp(1.5rem, 5.5vw + 0.35rem, 2.1rem);
  }
}

.hero__kicker {
  margin: 0 0 var(--space-3);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.hero__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.75rem, 5vw + 0.5rem, 2.75rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.hero__lead {
  margin: 0 0 var(--space-6);
  font-size: 1.0625rem;
  line-height: var(--line-relaxed);
  color: var(--color-text-secondary);
  max-width: 36rem;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

@media (min-width: 420px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .hero__actions .dk-btn {
    width: auto;
    min-width: 10rem;
  }
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.hero__trust-item svg {
  flex-shrink: 0;
  color: var(--color-accent);
}

/* -----------------------------------------------------------------------------
   Social proof bar
   ----------------------------------------------------------------------------- */

.social-bar {
  padding-block: var(--space-8);
  background-color: var(--color-bg-block);
  border-block: 1px solid var(--color-border-subtle);
}

.social-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  text-align: center;
}

@media (min-width: 640px) {
  .social-bar__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.social-bar__value {
  margin: 0 0 var(--space-1);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.social-bar__label {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: var(--line-body);
}

/* -----------------------------------------------------------------------------
   Section common
   ----------------------------------------------------------------------------- */

.section {
  padding-block: var(--space-12);
}

.section--tight {
  padding-block: var(--space-10);
}

#how-it-works {
  position: relative;
  z-index: 2;
}

.section__head {
  margin-bottom: var(--space-10);
}

.section__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.section__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-tight);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.section__lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: var(--line-relaxed);
  color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------------------
   How it works — process track
   ----------------------------------------------------------------------------- */

.process {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: var(--space-2);
}

.process::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 2.5rem;
  bottom: 2.5rem;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--color-accent) 0%,
    var(--color-border-subtle) 35%,
    var(--color-border-subtle) 100%
  );
  border-radius: 1px;
  pointer-events: none;
}

@media (min-width: 900px) {
  .process {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    padding-left: 0;
    gap: 0;
  }

  .process::before {
    left: 0;
    right: 0;
    top: 2.25rem;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(
      90deg,
      var(--color-accent) 0%,
      var(--color-border-subtle) 22%,
      var(--color-border-subtle) 100%
    );
  }
}

.process-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-6) 0 var(--space-6) 0;
  padding-left: 0;
}

@media (min-width: 900px) {
  .process-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-4) var(--space-2) var(--space-6);
    gap: var(--space-4);
  }
}

.process-step__marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  color: var(--color-accent);
  background: var(--color-bg-block);
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--color-bg-main);
}

.process-step__body {
  min-width: 0;
  padding-bottom: var(--space-2);
}

@media (min-width: 900px) {
  .process-step__body {
    padding-bottom: 0;
  }
}

.process-step__icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
}

@media (min-width: 900px) {
  .process-step__icon {
    margin-inline: auto;
  }
}

.process-step__title {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.process-step__text {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--line-relaxed);
  color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------------------
   Carousel — 3D cover flow (Vev-style)
   ----------------------------------------------------------------------------- */

.preview {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, var(--color-bg-main) 100%);
  isolation: isolate;
}

.preview .section__head {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.carousel-showcase {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 100%;
}

.carousel-showcase--coverflow {
  container-type: inline-size;
  container-name: carousel-showcase;
  /* Vev-like cover flow: strong perspective, center pulled on Z, soft floor */
  --cs-perspective: 980px;
  --cs-slide-w-num: 19.5rem;
  --cs-slide-w: min(82%, var(--cs-slide-w-num));
  --cs-spread: 58%;
  --cs-z-pull: 3.25rem;
  --cs-z-step: 2.95rem;
  --cs-rotate: 48deg;
  --cs-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cs-dur: 0.88s;
  --cs-viewport-pad: 2.5rem;
  --cs-viewport-h: calc(var(--cs-slide-w-num) * 932 / 430 + var(--cs-viewport-pad));
  /* iPhone 14 Pro Max–style chassis */
  --phone-r-outer: 2.75rem;
  --phone-bezel: 0.48rem;
  --phone-r-inner: calc(var(--phone-r-outer) - var(--phone-bezel));
}

@supports (width: 1cqw) {
  .carousel-showcase--coverflow {
    --cs-slide-w: min(min(82cqw, 82%), var(--cs-slide-w-num));
  }
}

.carousel-showcase__viewport-3d {
  position: relative;
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  height: min(var(--cs-viewport-h), 78vh);
  min-height: min(var(--cs-viewport-h), 78vh);
  perspective: var(--cs-perspective);
  perspective-origin: 50% 50%;
  overflow: visible;
  touch-action: pan-y pinch-zoom;
}

.carousel-showcase__ambient {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  width: min(92%, 44rem);
  height: 32%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 52% 38% at 50% 55%,
    rgba(0, 9, 18, 0.16) 0%,
    rgba(0, 9, 18, 0.05) 42%,
    transparent 70%
  );
  filter: blur(22px);
  opacity: 0.9;
}

@media (max-width: 699px) {
  .carousel-showcase--coverflow {
    --cs-slide-w-num: 13.75rem;
    --cs-slide-w: min(90%, var(--cs-slide-w-num));
    --cs-spread: 44%;
    --cs-z-pull: 2.35rem;
    --cs-z-step: 2.35rem;
    --cs-rotate: 32deg;
    --cs-perspective: 720px;
    --cs-viewport-pad: 2rem;
    --cs-viewport-h: calc(var(--cs-slide-w-num) * 932 / 430 + var(--cs-viewport-pad));
    --phone-r-outer: 2.2rem;
    --phone-bezel: 0.38rem;
  }

  @supports (width: 1cqw) {
    .carousel-showcase--coverflow {
      --cs-slide-w: min(min(90cqw, 90%), var(--cs-slide-w-num));
    }
  }

  .carousel-showcase__viewport-3d {
    max-width: 100%;
    height: min(var(--cs-viewport-h), 72vh);
    min-height: min(var(--cs-viewport-h), 72vh);
    margin-inline: 0;
    perspective-origin: 50% 50%;
  }

  .carousel-showcase__ambient {
    width: 92%;
    height: 30%;
    filter: blur(16px);
  }

  .carousel-showcase__phone-island {
    top: 0.5rem;
    height: 1.35rem;
    width: min(36%, 4.5rem);
  }

  .carousel-showcase__nav-row {
    margin-top: var(--space-5);
    padding-inline: 0;
  }

  .preview {
    overflow-x: clip;
  }

  @supports not (overflow: clip) {
    .preview {
      overflow-x: hidden;
    }
  }
}

.carousel-showcase__track-3d {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  transform-style: preserve-3d;
  z-index: 1;
}

.carousel-showcase__slide-3d {
  --delta: 0;
  --ad: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cs-slide-w);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  transform-origin: center center;
  transform: translate3d(-50%, -50%, 0)
    translateX(calc(var(--delta) * var(--cs-spread)))
    translateZ(calc(var(--cs-z-pull) - var(--ad) * var(--cs-z-step)))
    rotateY(calc(var(--delta) * -1 * var(--cs-rotate)))
    scale(calc(1 - 0.11 * min(2, var(--ad))));
  opacity: calc(1 - 0.38 * min(2, var(--ad)));
  filter: blur(calc(min(2, var(--ad)) * 1.85px))
    brightness(calc(1 - 0.07 * min(2, var(--ad))))
    saturate(calc(1 - 0.14 * min(2, var(--ad))));
  transition: transform var(--cs-dur) var(--cs-ease), opacity 0.62s var(--cs-ease),
    filter 0.62s var(--cs-ease), box-shadow 0.55s ease;
  z-index: calc(45 - var(--ad) * 12);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.carousel-showcase__slide-3d[data-ad="1"] {
  cursor: pointer;
}

.carousel-showcase__slide-3d[data-ad="2"] {
  pointer-events: none;
}

.carousel-showcase__slide-3d:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
}

.carousel-showcase__slide-3d[data-ad="0"] {
  filter: none;
  cursor: default;
}

.carousel-showcase__slide-3d-inner {
  position: relative;
  border-radius: var(--phone-r-outer);
  overflow: hidden;
  background: transparent;
  box-shadow: 0 24px 56px rgba(0, 9, 18, 0.12), 0 0 0 1px rgba(0, 9, 18, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.45) inset;
  transition: box-shadow 0.55s var(--cs-ease), transform 0.5s var(--cs-ease);
}

.carousel-showcase__phone-mockup {
  border-radius: var(--phone-r-outer);
  padding: var(--phone-bezel);
  background: linear-gradient(
    152deg,
    #5c5c5e 0%,
    #3a3a3c 18%,
    #1d1d1f 42%,
    #2e2e30 58%,
    #252527 78%,
    #1c1c1e 100%
  );
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 1px rgba(0, 0, 0, 0.5);
}

.carousel-showcase__phone-screen {
  position: relative;
  aspect-ratio: 430 / 932;
  border-radius: var(--phone-r-inner);
  overflow: hidden;
  background: #000;
}

.carousel-showcase__phone-island {
  position: absolute;
  top: 0.62rem;
  left: 50%;
  z-index: 3;
  width: min(34%, 5.75rem);
  height: 1.7rem;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transform: translateX(-50%);
}

.carousel-showcase__phone-screen-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: cover;
  object-position: top center;
  background: #000;
}

.carousel-showcase__slide-3d-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(0.22 + 0.28 * min(2, var(--ad)));
  background: linear-gradient(
    115deg,
    rgba(0, 9, 18, 0.18) 0%,
    transparent 42%,
    transparent 58%,
    rgba(0, 9, 18, 0.12) 100%
  );
  transition: opacity 0.55s var(--cs-ease);
}

.carousel-showcase__slide-3d[data-ad="0"] .carousel-showcase__slide-3d-inner::after {
  opacity: 0;
}

.carousel-showcase__slide-3d[data-ad="0"] .carousel-showcase__slide-3d-inner {
  box-shadow: 0 36px 80px rgba(0, 9, 18, 0.2), 0 0 0 1px rgba(0, 9, 18, 0.09),
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.carousel-showcase__slide-3d[data-ad="1"]:hover .carousel-showcase__slide-3d-inner {
  box-shadow: 0 28px 64px rgba(0, 9, 18, 0.22), 0 0 0 1px rgba(0, 9, 18, 0.11),
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
  transform: scale(1.025);
}

.carousel-showcase__nav-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  flex-wrap: wrap;
}

.carousel-showcase__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--color-text-primary);
  background: var(--color-bg-block);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast);
}

.carousel-showcase__btn:hover:not(:disabled) {
  background: var(--color-btn-secondary-pressed-bg);
  border-color: rgba(0, 9, 18, 0.22);
}

.carousel-showcase__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.carousel-showcase__btn:active:not(:disabled) {
  transform: scale(0.96);
}

.carousel-showcase__dots {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.carousel-showcase__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-border-subtle);
  cursor: pointer;
  transition: background-color 200ms ease, width 200ms ease;
}

.carousel-showcase__dot[aria-current="true"] {
  background: var(--color-accent);
  width: 1.25rem;
}

.carousel-showcase__dot:hover {
  background: rgba(0, 9, 18, 0.35);
}

/* -----------------------------------------------------------------------------
   Feature grid & purposes
   ----------------------------------------------------------------------------- */

.feature-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  padding: var(--space-6);
  background: var(--color-bg-block);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}

.feature-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-4);
  color: var(--color-accent);
}

.feature-card__title {
  margin: 0 0 var(--space-2);
  font-size: 1.0625rem;
  font-weight: var(--font-weight-semibold);
}

.feature-card__text {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--line-relaxed);
  color: var(--color-text-secondary);
}

.purpose-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-inline: auto;
}

@media (min-width: 640px) {
  .purpose-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    gap: var(--space-4);
  }

  .purpose-bento__item--featured {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 7.5rem;
  }

  .purpose-bento__item--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .purpose-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: minmax(9rem, auto) minmax(7rem, auto);
  }

  .purpose-bento__item--featured {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    min-height: 0;
  }

  .purpose-bento__item--a {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .purpose-bento__item--b {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }

  .purpose-bento__item--c {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }

  .purpose-bento__item--d {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
  }

  .purpose-bento__item--wide {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: var(--space-6);
  }
}

.purpose-bento__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5);
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--color-bg-block);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid transparent;
  overflow: hidden;
  opacity: 0;
  transform: translateY(1.25rem) scale(0.98);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out),
    box-shadow 0.25s ease, border-color 0.25s ease;
}

.purpose-bento__item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.purpose-bento__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 9, 18, 0.03) 0%, transparent 45%);
  pointer-events: none;
}

.purpose-bento__item:hover {
  box-shadow: var(--shadow-float);
  border-color: var(--color-border-subtle);
}

.purpose-bento__item--featured {
  background: var(--color-accent);
  color: var(--color-on-accent);
  justify-content: flex-end;
  min-height: 11rem;
}

.purpose-bento__item--featured::before {
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 50%
  );
}

.purpose-bento__item--featured .purpose-bento__label {
  color: var(--color-on-accent);
}

.purpose-bento__item--featured .purpose-bento__icon {
  color: var(--color-on-accent);
  opacity: 0.95;
}

.purpose-bento__item--featured .purpose-bento__hint {
  color: rgba(255, 255, 255, 0.78);
}

.purpose-bento__icon {
  width: 2rem;
  height: 2rem;
  color: var(--color-accent);
  position: relative;
  z-index: 1;
}

.purpose-bento__label {
  position: relative;
  z-index: 1;
  font-size: 1.0625rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.purpose-bento__item:not(.purpose-bento__item--featured) .purpose-bento__label {
  font-size: var(--text-body);
}

.purpose-bento__hint {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--line-body);
  color: var(--color-text-secondary);
}

.purpose-bento__item--featured .purpose-bento__hint {
  max-width: 16rem;
}

.purpose-bento__chev {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0.9;
}

.purpose-bento__item--wide .purpose-bento__chev {
  margin-top: 0;
}

@media (max-width: 899px) {
  .purpose-bento__item--wide {
    flex-direction: column;
    align-items: flex-start;
  }

  .purpose-bento__item--wide .purpose-bento__chev {
    margin-top: var(--space-3);
  }
}

.store-badge__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.store-badge__apple {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.store-badge__arrow {
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* -----------------------------------------------------------------------------
   FAQ
   ----------------------------------------------------------------------------- */

.section--faq .section__head {
  max-width: none;
}

.faq {
  width: 100%;
  max-width: none;
  background: var(--color-bg-block);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-card);
  padding-inline: var(--space-4);
}

@media (min-width: 640px) {
  .faq {
    padding-inline: var(--space-8);
  }
}

.faq__item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  text-align: left;
  color: var(--color-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq__trigger:hover {
  color: var(--color-text-secondary);
}

.faq__trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.faq__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-accent);
  transition: transform 280ms var(--ease-out);
}

.faq__item.is-open .faq__icon {
  transform: rotate(180deg);
}

.faq__panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 380ms var(--ease-out), opacity 240ms ease,
    visibility 0s linear 380ms;
}

.faq__item.is-open .faq__panel {
  max-height: 28rem;
  opacity: 1;
  visibility: visible;
  transition: max-height 380ms var(--ease-out), opacity 280ms ease 40ms,
    visibility 0s linear 0s;
}

.faq__answer {
  margin: 0;
  padding-bottom: var(--space-5);
  font-size: var(--text-caption);
  line-height: var(--line-relaxed);
  color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------------------
   CTA band
   ----------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  padding-block: var(--space-12);
  overflow: hidden;
  background: linear-gradient(145deg, #000912 0%, #0f1720 42%, #151d28 100%);
  color: #ffffff;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% 20% auto -20%;
  height: 90%;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.09) 0%, transparent 55%);
  pointer-events: none;
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: auto -10% -50% 40%;
  height: 70%;
  background: radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.cta-band .landing-container {
  position: relative;
  z-index: 1;
}

.cta-band__inner {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

.cta-band__title,
.cta-band h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-tight);
  letter-spacing: -0.02em;
  color: #ffffff !important;
}

.cta-band__lead,
.cta-band p {
  margin: 0 0 var(--space-8);
  font-size: 1.0625rem;
  line-height: var(--line-relaxed);
  color: rgba(255, 255, 255, 0.88) !important;
}

.cta-band__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (min-width: 480px) {
  .cta-band__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
}

.cta-band__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: #ffffff !important;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cta-band__secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.75);
}

.cta-band__secondary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.store-badges {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  max-width: 22rem;
  margin-inline: auto;
}

@media (min-width: 480px) {
  .store-badges {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    max-width: none;
    align-items: stretch;
  }
}

.store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent) !important;
  background: #ffffff;
  border-radius: var(--radius-btn);
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out),
    background-color 0.2s ease;
}

.store-badge:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  background: #f7f7f7;
}

.store-badge:active {
  transform: translateY(-1px) scale(1.01);
}

.store-badge:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   Disclosures & footer
   ----------------------------------------------------------------------------- */

.disclosures {
  padding-block: var(--space-12);
  background: var(--color-bg-block);
  border-top: 1px solid var(--color-border-subtle);
}

.disclosures__inner {
  margin-inline: auto;
}

.disclosures__title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-tight);
  color: var(--color-text-primary);
}

.disclosures__text {
  margin: 0 0 var(--space-4);
  font-size: var(--text-small);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.disclosures__text:last-child {
  margin-bottom: 0;
}

.disclosures__list {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
  font-size: var(--text-small);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.disclosures__list li {
  margin-bottom: var(--space-2);
}

.disclosures__list li:last-child {
  margin-bottom: 0;
}

.site-footer {
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border-subtle);
}

.site-footer__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .site-footer__grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.site-footer__links a {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__links a:hover {
  color: var(--color-text-primary);
}

.site-footer__copy {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------------------
   Scroll reveal
   ----------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 80ms;
}

.reveal-delay-2 {
  transition-delay: 140ms;
}

.reveal-delay-3 {
  transition-delay: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__phone {
    transform: none;
    transition: none;
  }

  .hero__visual:hover .hero__phone {
    transform: none;
  }

  .hero__orbit,
  .hero__pulse,
  .hero__float-icon-inner {
    animation: none;
  }

  .carousel-showcase__slide-3d {
    transition-duration: 0.01ms;
    filter: none !important;
    transform: translate3d(-50%, -50%, 0)
      translateX(calc(var(--delta) * 58%))
      scale(calc(0.94 - 0.05 * min(2, var(--ad))));
  }

  .carousel-showcase__ambient {
    display: none;
  }

  .purpose-bento__item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .faq__panel {
    transition: none;
  }

  .feature-card:hover,
  .store-badge:hover {
    transform: none;
  }
}