/* Home and download: the three-screen composition supplied for the site. */
.hero { padding-top: 96px; }
.hero .hero-content { width: 100%; max-width: 900px; }
.hero .hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #b794f4;
  font-size: clamp(10px, 2.3vw, 14px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.hero-eyebrow span { color: #9857f9; font-size: 1.2em; }
.hero .hero-title {
  margin: 0;
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1.8px;
}
.hero-title span { display: block; }
.hero .hero-showcase {
  display: block;
  position: relative;
  width: 100%;
  max-width: clamp(340px, calc(100svh - 320px), 580px);
  aspect-ratio: 940 / 740;
  margin: 18px auto 12px;
}
.hero-showcase .phone {
  display: block;
  position: absolute;
  width: 32.6%;
  padding: 0;
  border: 2px solid #8050b7;
  border-radius: clamp(12px, 2.8vw, 28px);
  overflow: hidden;
  background: #09090b;
  box-shadow: 0 20px 55px -28px rgba(0, 0, 0, .8);
}
.hero-showcase .phone img { border-radius: 0; }
.hero-showcase .phone-left {
  top: 4.8%;
  left: 3.2%;
  transform: rotate(-5deg);
  z-index: 1;
}
.hero-showcase .phone-center {
  top: 0;
  left: 32.8%;
  width: 34.4%;
  transform: none;
  z-index: 3;
  box-shadow: 0 25px 65px -32px rgba(0, 0, 0, .85);
}
.hero-showcase .phone-right {
  top: 4.8%;
  right: 3.2%;
  transform: rotate(5deg);
  z-index: 1;
}
.hero-showcase .hero-genie-box {
  position: absolute;
  left: calc(100% + 4px);
  bottom: 12px;
  width: 144px;
  height: auto;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 14px 24px rgba(124, 58, 237, .2));
}
.hero .hero-copy { max-width: 760px; margin: 0 auto 18px; font-size: 16px; }
.hero .hero-buttons { flex-direction: row; align-items: center; gap: 12px; }
.hero .store-apple,
.hero .store-play {
  min-width: 216px;
  min-height: 64px;
  justify-content: flex-start;
  gap: 13px;
  padding: 10px 18px;
  border: 1px solid #7352a2;
  border-radius: 14px;
  background: linear-gradient(135deg, #2b1942, #17111f);
  box-shadow: 0 8px 24px -12px rgba(139, 92, 246, .65), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #fff;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hero .store-apple > svg,
.hero .store-play > svg { width: 30px; height: 32px; flex-shrink: 0; }
.store-button-copy { display: flex; flex-direction: column; gap: 1px; }
.store-button-copy small { color: #d5c7eb; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .2px; }
.store-button-copy strong { color: #fff; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -.5px; }
.hero .store-apple:hover,
.hero .store-play:hover {
  border-color: #be9af4;
  box-shadow: 0 10px 28px -12px rgba(139, 92, 246, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.hero .hero-buttons > .btn-secondary {
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #c4b5d8;
  font-size: 13px;
}
.hero .hero-buttons > .btn-secondary:hover { color: #fff; background: rgba(167, 139, 250, .08); }
.hero .hero-gratuit { margin-top: 14px; }
.hero .platform-logos { flex-wrap: wrap; justify-content: center; }
@media (max-width: 1240px) {
  .hero .hero-showcase { width: calc(100% - 112px); transform: translateX(-56px); }
  .hero-showcase .hero-genie-box { left: calc(100% - 6px); width: clamp(80px, calc(100vw - 100% - 24px), 128px); }
}
@media (max-width: 600px) {
  .hero .hero-eyebrow { gap: 8px; letter-spacing: 2px; margin-bottom: 12px; }
  .hero .hero-title { font-size: clamp(23px, 7vw, 38px); letter-spacing: -1px; }
  .hero .hero-showcase { width: calc(100% - 68px); margin: 20px auto 12px; transform: translateX(-34px); }
  .hero-showcase .phone { border-width: 1.5px; }
  .hero-showcase .hero-genie-box { left: calc(100% - 6px); bottom: 0; width: 80px; }
  .hero .hero-copy { font-size: 15px; margin-bottom: 16px; }
  .hero .hero-buttons { gap: 8px; }
  .hero .store-apple, .hero .store-play { min-width: 216px; }
  .hero .hero-buttons > .btn-secondary { flex-basis: 100%; justify-content: center; }
}
@media (min-width: 601px) and (max-height: 700px) {
  .hero { padding-top: 88px; }
  .hero .hero-title { font-size: 42px; }
  .hero .hero-showcase { max-width: max(260px, calc(100svh - 330px)); margin-top: 14px; }
  .hero .hero-copy { max-width: 680px; font-size: 14px; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .store-apple, .hero .store-play { transition: none; }
}