.page-mobile-app {
  --mobile-app-accent: rgba(97, 177, 188, 0.18);
  --mobile-app-accent-line: rgba(97, 177, 188, 0.28);
  --mobile-app-glow: rgba(97, 177, 188, 0.3);
  background:
    radial-gradient(ellipse 64% 46% at 86% 6%, var(--mobile-app-accent), transparent 58%),
    radial-gradient(ellipse 40% 36% at 6% 68%, rgba(7, 40, 64, 0.58), transparent 64%),
    linear-gradient(180deg, #03101f 0%, var(--bg, #030f1e) 42%, #01080f 100%);
  overflow-x: clip;
}

/* ——— Hero ——— */
.mobile-app-hero {
  position: relative;
  z-index: 0;
  isolation: isolate;
  padding: clamp(88px, 10vw, 112px) 0 clamp(36px, 5vw, 56px);
  overflow: clip;
}

.mobile-app-hero-glow {
  position: absolute;
  inset: 4% -10% auto 48%;
  height: 78%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 34%, var(--mobile-app-glow), transparent 56%),
    radial-gradient(circle at 70% 60%, rgba(20, 78, 112, 0.4), transparent 58%);
  filter: blur(36px);
  pointer-events: none;
  animation: mobile-app-glow 11s ease-in-out infinite alternate;
}

.mobile-app-hero-orbit {
  position: absolute;
  width: min(58vw, 680px);
  height: min(58vw, 680px);
  right: -2%;
  top: 14%;
  border-radius: 50%;
  border: 1px solid rgba(97, 177, 188, 0.12);
  box-shadow:
    inset 0 0 80px rgba(97, 177, 188, 0.05),
    0 0 60px rgba(97, 177, 188, 0.04);
  pointer-events: none;
  animation: mobile-app-orbit 22s linear infinite;
}

.mobile-app-hero-orbit::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px dashed rgba(97, 177, 188, 0.1);
}

@keyframes mobile-app-glow {
  from { opacity: 0.7; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 1; transform: translate3d(-3%, 4%, 0) scale(1.05); }
}

@keyframes mobile-app-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.mobile-app-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.mobile-app-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 36rem;
}

.mobile-app-hero-copy .eyebrow {
  display: inline-block;
  margin-top: 18px;
}

.mobile-app-hero h1 {
  margin: 14px 0 16px;
  font-size: clamp(32px, 4.2vw, 56px);
  letter-spacing: -0.034em;
  line-height: 0.98;
  text-wrap: balance;
}

.mobile-app-hero .lede,
.mobile-app-split .lede,
.mobile-app-download .lede {
  max-width: 44ch;
}

.mobile-app-hero-note {
  max-width: 48ch;
  margin: 22px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}

.mobile-app-hero-stage {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  perspective: 1600px;
}

.mobile-app-hero-device {
  position: relative;
  width: min(100%, 220px);
  /* réserve la place du mockup (frame absolute + scale) pour ne pas chevaucher la suite */
  min-height: 420px;
  margin-inline: auto;
  animation: mobile-app-float 7s ease-in-out infinite;
}

@keyframes mobile-app-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -14px, 0); }
}

/* ——— Split feature sections ——— */
.mobile-app-split {
  position: relative;
  z-index: 0;
  isolation: isolate;
  padding-block: clamp(40px, 5.5vw, 72px);
  border-top: 1px solid var(--hairline);
  /* clip : les mockups absolute/scale ne doivent pas peindre sur le download / hub */
  overflow: clip;
}

.mobile-app-split-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.78fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}

.mobile-app-split-grid--landscape {
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
}

.mobile-app-split--reversed .mobile-app-split-grid {
  grid-template-columns: minmax(300px, 1.1fr) minmax(0, 0.9fr);
}

.mobile-app-split--reversed .mobile-app-split-copy {
  order: 2;
}

.mobile-app-split--reversed .mobile-app-split-device {
  order: 1;
}

.mobile-app-split-copy {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

.mobile-app-split h2,
.mobile-app-download h2 {
  margin: 14px 0 16px;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}

.mobile-app-split-device {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  place-items: center;
}

.mobile-app-split-device--portrait {
  max-width: 220px;
  margin-inline: auto;
  width: 100%;
  min-height: 420px;
}

.mobile-app-split-device--landscape {
  max-width: 480px;
  margin-inline: auto;
  width: 100%;
  min-height: 260px;
  padding-block: 8px;
}

.mobile-app-split-glow {
  position: absolute;
  inset: 8% 4% 8% 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(97, 177, 188, 0.16), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

.mobile-app-split-glow--wide {
  inset: 18% -8% 18% -8%;
  background: radial-gradient(ellipse at center, rgba(97, 177, 188, 0.2), transparent 70%);
}

.mobile-app-split-device [data-device-mockup] {
  position: relative;
  z-index: 1;
}

/* ——— Download band ——— */
.mobile-app-download {
  position: relative;
  z-index: 2;
  isolation: isolate;
  margin-block: clamp(24px, 4vw, 48px);
  padding-block: clamp(36px, 5vw, 64px);
  overflow: clip;
  border-block: 1px solid var(--mobile-app-accent-line);
  background:
    linear-gradient(118deg, rgba(97, 177, 188, 0.12), transparent 48%),
    linear-gradient(180deg, rgba(7, 24, 43, 0.62), rgba(3, 15, 30, 0.18));
}

.mobile-app-download::before {
  content: "";
  position: absolute;
  inset: auto -12% -48% 28%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(97, 177, 188, 0.18), transparent 68%);
  pointer-events: none;
  animation: mobile-app-glow 10s ease-in-out infinite alternate;
}

.mobile-app-download-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: clamp(16px, 3vw, 28px);
  max-width: 48rem;
}

.mobile-app-download-copy {
  max-width: 40rem;
}

/* FAQ + hub : au-dessus des éventuels overflows mockups, sous le header sticky */
.page-mobile-app .mobile-app-faq,
.page-mobile-app .section:has(.hub) {
  position: relative;
  z-index: 2;
  isolation: isolate;
}

.page-mobile-app .hub,
.page-mobile-app .hub-card[data-reveal] {
  position: relative;
  z-index: 0;
}

/* ——— FAQ ——— */
.mobile-app-faq {
  padding-block: clamp(32px, 5vw, 56px);
}

.mobile-app-faq-list {
  width: min(100%, 920px);
  margin-inline: auto;
  border-top: 1px solid var(--hairline);
}

.mobile-app-faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
}

.mobile-app-faq summary {
  color: var(--text);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 650;
  cursor: pointer;
}

.mobile-app-faq details p {
  max-width: 72ch;
  margin: 16px 0 0;
  color: var(--text-2);
  line-height: 1.75;
}

/* ——— Responsive ——— */
@media (max-width: 980px) {
  .mobile-app-hero-grid,
  .mobile-app-split-grid,
  .mobile-app-split-grid--landscape,
  .mobile-app-split--reversed .mobile-app-split-grid {
    grid-template-columns: 1fr;
  }

  .mobile-app-hero-stage {
    margin-top: 8px;
  }

  .mobile-app-hero-device {
    width: min(72%, 220px);
  }

  .mobile-app-split--reversed .mobile-app-split-copy,
  .mobile-app-split--reversed .mobile-app-split-device {
    order: unset;
  }

  .mobile-app-split-device--portrait {
    max-width: 220px;
  }

  .mobile-app-split-device--landscape {
    max-width: min(100%, 480px);
  }
}

@media (max-width: 719px) {
  .mobile-app-hero {
    padding-top: 88px;
  }

  .mobile-app-hero-grid,
  .mobile-app-split-grid {
    gap: 24px;
  }

  .mobile-app-split {
    padding-block: 40px;
  }

  .mobile-app-hero-orbit {
    opacity: 0.4;
  }

  .mobile-app-hero-device {
    width: min(68%, 200px);
  }

  .mobile-app-download {
    margin-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-app-hero-glow,
  .mobile-app-hero-orbit,
  .mobile-app-download::before,
  .mobile-app-hero-device {
    animation: none;
  }
}