/* 3D phone layer */
.phone-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

/* glass surfaces so the phone shows through softly */
.card,
.shot__frame,
.faq__item {
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
}

/* living gradients on accented words */
.hero__line-inner--accent,
.section-title em,
.hero__title em {
  background: var(--grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: grad-flow 6s ease-in-out infinite;
}

/* hero: text on the left, phone on the right */
@media (min-width: 900px) {
  .hero {
    align-items: flex-start;
    text-align: left;
    padding-left: 8vw;
    padding-right: 46vw;
  }

  .hero__title {
    font-size: clamp(42px, 6.2vw, 92px);
  }

  .hero__actions {
    justify-content: flex-start;
  }

  .hero__scroll {
    left: 8vw;
    transform: none;
  }

  .about__grid {
    margin-left: 36%;
  }

  .features__head {
    max-width: 46%;
  }

  .features__grid {
    max-width: 52%;
    grid-template-columns: repeat(2, 1fr);
  }

  .download {
    text-align: center;
  }
}

/* subtle glow ring that follows the phone section */
.hero::after {
  content: '';
  position: absolute;
  right: 14vw;
  top: 50%;
  width: 34vw;
  height: 34vw;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 93, 181, 0.22), rgba(124, 76, 196, 0.1) 45%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 899px) {
  .hero::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__line-inner--accent,
  .section-title em,
  .hero__title em {
    animation: none;
  }
}