/* Original web compositions: real app screens, separate light and depth layers. */
.hero-stage {
  width: min(1120px, calc(100% - 32px));
  margin: 52px auto 0;
}
.store-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.store-slide {
  overflow: hidden;
  border-radius: 28px;
  background: #061524;
  box-shadow: 0 30px 70px #0008;
}
.store-slide img {
  width: 100%;
}
.store-controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.store-controls[hidden] { display: none; }
.store-controls button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  background: #25292f;
  color: #fff;
  font: inherit;
}
.store-controls button:disabled { opacity: .3; }
.store-dots {
  display: flex;
  padding: 0 8px;
  border-radius: 30px;
  background: #25292f;
}
.store-dots span {
  width: 7px;
  height: 7px;
  border-radius: 10px;
  background: #89949f;
  transition: width .25s;
}
.store-dots [aria-current] span { width: 24px; background: #fff; }
.product-scene {
  position: relative;
  overflow: clip;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  background: radial-gradient(ellipse at 50% 45%, #07334d 0%, #041422 46%, #08090b 76%);
}
.scene-hero {
  height: 680px;
  gap: 38px;
  border-radius: 36px;
}
.product-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: repeating-linear-gradient(125deg, transparent 0 12px, #007fbd08 13px 14px);
  mask-image: radial-gradient(ellipse, black, transparent 75%);
  pointer-events: none;
}
.scene-orb {
  position: absolute;
  width: 72%;
  aspect-ratio: 1.9;
  border-radius: 50%;
  transform: rotate(-24deg);
  background: radial-gradient(ellipse at 40% 20%, #07233f 15%, #012059 56%, #045fe7 85%);
  box-shadow: inset 3px 7px 6px #00ffe0, inset -5px -7px 12px #006aff,
    0 -12px 38px #00ecc365, 0 22px 55px #005eff30;
  z-index: -1;
  pointer-events: none;
}
.phone {
  position: relative;
  flex: 0 0 auto;
  width: 236px;
  padding: 6px;
  border: 1px solid #a1b6c4;
  border-radius: 33px;
  background: linear-gradient(115deg, #e0e5e8, #37424a 9%, #020508 23%, #13191c 70%, #aabac8);
  box-shadow: -5px 4px 0 #48535b, -8px 5px 0 #10171b, 0 32px 50px #000b;
  transform-origin: center;
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 27px;
}
.phone::after {
  content: "";
  position: absolute;
  top: 22%;
  left: -7px;
  width: 3px;
  height: 10%;
  border-radius: 2px;
  background: linear-gradient(#becbd3, #47515b);
}
.phone-left { transform: perspective(1200px) rotateY(12deg) rotate(-13deg); }
.phone-right { transform: perspective(1200px) rotateY(-12deg) rotate(13deg); }
.scene-caption {
  position: absolute;
  bottom: 12px;
  color: #a4bbcb;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
svg.scene-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .8;
  mask-image: radial-gradient(ellipse, black 35%, transparent 75%);
}
.scene-pin {
  position: absolute;
  width: 70px;
  height: 90px;
  color: #00efd6;
  filter: drop-shadow(0 0 18px #00d9d9);
  z-index: 0;
  right: 15%;
  top: 26%;
}
svg.scene-shield {
  position: absolute;
  width: 54%;
  height: 65%;
  top: 5%;
  right: 0;
  color: #00efdb;
  filter: drop-shadow(0 0 16px #00dbdc);
  z-index: -1;
}
.highlight-grid {
  display: flex;
  align-items: stretch;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  scrollbar-width: none;
  padding: 8px 2px 24px;
}
.highlight-grid::-webkit-scrollbar { display: none; }
.highlight-card {
  flex: 0 0 64%;
  border-radius: 30px;
  background: #041321;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: .95fr 1fr;
  align-items: center;
  min-height: 580px;
  isolation: isolate;
}
.card-copy { padding: 32px 0 36px 32px; z-index: 2; }
.card-kicker {
  color: #54d9d5;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .13em;
  margin-bottom: 22px;
}
.card-copy h3 { font-size: clamp(27px, 2.6vw, 38px); line-height: 1.1; }
.card-copy > p:last-child { color: #a7becb; font-size: 15px; margin-top: 22px; max-width: 24ch; }
.highlight-card .product-scene { height: 580px; background: none; }
.highlight-card .phone { width: 178px; border-radius: 26px; padding: 5px; }
.highlight-card .phone img { border-radius: 21px; }
.highlight-card .scene-orb { width: 125%; aspect-ratio: 1.2; right: 0; }
.highlight-card svg.scene-shield { width: 75%; top: 0; right: 0; }
.highlight-card .scene-pin { top: 12%; right: 14%; width: 50px; height: 65px; }
.highlight-card svg.scene-map { width: 190%; left: -70%; max-width: none; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.gallery-controls[hidden] { display: none; }
.gallery-controls button {
  border: 0;
  background: #25292f;
  color: white;
  min-height: 44px;
  min-width: 44px;
  border-radius: 50%;
  cursor: pointer;
  font: inherit;
}
.gallery-controls button:disabled { opacity: .3; cursor: default; }
.gallery-dots { display: flex; padding: 0 8px; border-radius: 30px; background: #25292f; }
.gallery-dots button { display: grid; place-items: center; }
.gallery-dots span { width: 7px; height: 7px; border-radius: 10px; background: #89949f; transition: width .25s; }
.gallery-dots [aria-current] span { width: 24px; background: #fff; }
.product-panel { width: 100%; overflow: visible; border-radius: 0; }
.product-panel .product-scene { height: 650px; border-radius: 36px; }
.product-panel .phone { width: 224px; }
.product-panel .phone img { width: 100%; height: auto; }
.product-panel .scene-orb { width: 94%; aspect-ratio: 1.1; }
.safe-section { background: #07121a; }
.safe-visual { min-height: 510px; background: radial-gradient(ellipse, #053349, transparent 72%); }
.safe-visual svg.scene-map { z-index: -1; opacity: 1; }
.safe-visual .scene-pin { top: 40%; left: calc(50% - 30px); width: 60px; height: 80px; }
.area-pulse { position: absolute; inset: 22% 18%; border: 1px solid #00e6c8; border-radius: 50%; box-shadow: 0 0 35px #00dfce40; }
.safe-label { z-index: 2; background: #042d3e; border: 1px solid #2df9de50; }
.safe-label.inside { top: 69%; left: 22%; }
.safe-label.outside { top: 14%; right: 3%; }
.coming-soon img { filter: invert(1); }
.privacy-section { background: radial-gradient(ellipse at 50% 30%, #00394755, transparent 65%); }
.lock-icon { filter: drop-shadow(0 0 22px #00e1d666); }
.is-visible { animation-duration: .85s; }
.scroll-reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .9s ease-out, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}
@media (min-width: 1001px) {
  .routine-layout { align-items: start; }
  .routine-layout .product-panel { position: sticky; top: 100px; }
  .routine-details { padding-block: 110px; }
}
@media (max-width: 1000px) {
  .scene-hero { height: 590px; gap: 30px; }
  .scene-hero .phone { width: 205px; }
  .highlight-card { flex-basis: 86%; }
  .product-panel .product-scene { height: 550px; }
  .product-panel .phone { width: 184px; }
}
@media (max-width: 700px) {
  .hero-stage { width: 100%; margin-top: 24px; }
  .store-showcase {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 8vw;
  }
  .store-showcase::-webkit-scrollbar { display: none; }
  .store-slide {
    flex: 0 0 84vw;
    border-radius: 22px;
    scroll-snap-align: center;
    opacity: .42;
    transform: scale(.965);
    transition: opacity .45s ease, transform .45s ease;
  }
  .store-slide.is-active { opacity: 1; transform: scale(1); }
  .store-controls { display: flex; }
  .scene-hero { height: 108vw; min-height: 320px; max-height: 590px; gap: 4vw; border-radius: 0; }
  .scene-hero .phone { width: 31vw; max-width: 185px; padding: 3px; border-radius: 5vw; }
  .scene-hero .phone img { border-radius: 4.2vw; }
  .scene-caption { font-size: 9px; letter-spacing: .08em; }
  .phone::after { left: -5px; width: 2px; }
  .highlight-grid { margin-right: -24px; padding-right: 24px; gap: 16px; }
  .highlight-card { flex-basis: 86vw; max-width: none; grid-template-columns: 1fr; min-height: 640px; align-content: start; }
  .card-copy { padding: 28px 28px 0; }
  .card-copy h3 { font-size: 31px; }
  .card-copy > p:last-child { font-size: 14px; max-width: 28ch; margin-top: 16px; }
  .card-kicker { margin-bottom: 16px; }
  .highlight-card .product-scene { height: 410px; }
  .highlight-card .phone { width: 142px; border-radius: 22px; padding: 4px; }
  .highlight-card .phone img { border-radius: 18px; }
  .highlight-card .scene-orb { width: 80%; right: 10%; aspect-ratio: 1.3; }
  .highlight-card svg.scene-map { left: 0; width: 100%; }
  .highlight-card svg.scene-shield { width: 52%; top: -6%; }
  .product-panel .product-scene { height: 530px; }
  .product-panel .phone { width: 176px; border-radius: 27px; }
  .product-panel .phone img { border-radius: 21px; }
  .safe-visual { min-height: 360px; }
  .safe-visual .scene-pin { width: 45px; height: 60px; left: calc(50% - 22px); }
  .safe-label { font-size: 10px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .highlight-grid { scroll-behavior: auto; }
  .gallery-dots span,
  .store-dots span { transition: none; }
  .store-slide { transition: none; }
  .scroll-reveal,
  .scroll-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Native scroll timelines keep the static composition intact on older browsers. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-motion] { view-timeline: --scene block; }
    [data-motion] .phone {
      animation: phone-depth linear both;
      animation-timeline: --scene;
      animation-range: entry 0% exit 100%;
    }
    [data-motion] .phone-right { animation-name: phone-depth-right; }
    [data-motion] .scene-orb,
    [data-motion] .area-pulse {
      animation: light-depth linear both;
      animation-timeline: --scene;
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes phone-depth {
  from { transform: perspective(1200px) translateY(22px) rotateY(18deg) rotate(-16deg) scale(.94); }
  to { transform: perspective(1200px) translateY(-22px) rotateY(4deg) rotate(-8deg); }
}
@keyframes phone-depth-right {
  from { transform: perspective(1200px) translateY(-22px) rotateY(-18deg) rotate(16deg) scale(.94); }
  to { transform: perspective(1200px) translateY(22px) rotateY(-4deg) rotate(8deg); }
}
@keyframes light-depth {
  from { scale: .88; opacity: .65; }
  to { scale: 1.06; opacity: 1; }
}