/* Approved old composition in one coordinate system. All dimensions use --hero-u. */
.hero .hero-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:50px; }
.hero .hero-phones { width:calc(100% + clamp(0px,calc(100vw - 1280px),102px)); max-width:720px; justify-self:center; height:auto; min-height:0; aspect-ratio:605 / 626; container-type:inline-size; isolation:isolate; pointer-events:none; }
.hero-scene { --hero-u:calc(100cqw / 605); position:relative; width:100%; height:100%; animation:none; }
.hero-phones-halo { position:absolute; left:calc(16 * var(--hero-u)); top:calc(16 * var(--hero-u)); width:calc(573 * var(--hero-u)); height:calc(560 * var(--hero-u)); z-index:0; }
.hero-phones-halo::before, .hero-phones-halo::after { content:""; position:absolute; aspect-ratio:1; border-radius:50%; }
.hero-phones-halo::before { width:86%; top:18%; left:0; background:var(--fz-sky-a08); }
.hero-phones-halo::after { width:74%; top:6%; right:0; background:var(--fz-sky-a12); }
.hero-device { position:absolute; width:calc(395 * var(--hero-u)); transform-origin:center; }
.hero-device img { display:block; width:100%; height:auto; filter:drop-shadow(0 calc(20 * var(--hero-u)) calc(16 * var(--hero-u)) rgba(7,39,62,.16)); user-select:none; }
/* Owner image normalized to the accepted visible phone height, with natural2:3ratio. */
.hero-device-front { z-index:2; left:calc(46.09135 * var(--hero-u)); top:calc(34.587275 * var(--hero-u)); width:calc(380.7697 * var(--hero-u)); animation:none; }
.hero-device-front img { transform:rotate(3deg); }
.hero-device-back { z-index:1; left:calc(135.399964 * var(--hero-u)); top:calc(-30.799546 * var(--hero-u)); width:calc(430.55 * var(--hero-u)); animation:none; }
.hero-device-back img { transform:rotate(-3deg); }
.hero-phone-note { position:absolute; z-index:4; width:calc(112 * var(--hero-u)); color:var(--teal-deep); text-align:center; font-size:calc(17 * var(--hero-u)); font-weight:800; line-height:1.55; }
.hero-phone-note svg { display:block; width:calc(86 * var(--hero-u)); height:calc(50 * var(--hero-u)); margin:0 auto calc(4 * var(--hero-u)); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hero-phone-note p { margin:0; }
.hero-phone-note p span { display:block; }
.hero-phone-note-chat { left:calc(16 * var(--hero-u)); top:calc(234.4 * var(--hero-u)); transform:rotate(-5deg); }
.hero-phone-note-services { left:calc(477 * var(--hero-u)); top:calc(335.2 * var(--hero-u)); transform:rotate(5deg); }
.hero-scene .fchip { bottom:auto; height:auto; min-height:0; animation:none; padding:calc(10 * var(--hero-u)) calc(13 * var(--hero-u)); border-width:calc(1 * var(--hero-u)); border-radius:calc(16 * var(--hero-u)); gap:calc(10 * var(--hero-u)); backdrop-filter:blur(calc(10 * var(--hero-u))); box-shadow:0 calc(14 * var(--hero-u)) calc(30 * var(--hero-u)) calc(-10 * var(--hero-u)) rgba(0,80,95,.22); }
.hero-scene .fc-ic { width:calc(38 * var(--hero-u)); height:calc(38 * var(--hero-u)); font-size:calc(18 * var(--hero-u)); }
.hero-scene .cu-text-xs-dim { font-size:calc(11 * var(--hero-u)); }
.hero-scene .cu-text-sm-bold { font-size:calc(13 * var(--hero-u)); }
.hero-scene .fc-rating { left:calc(16 * var(--hero-u)); top:calc(21.6 * var(--hero-u)); }
.hero-scene .fc-arrive { left:calc(4.54 * var(--hero-u)); top:calc(416.4 * var(--hero-u)); max-width:calc(230 * var(--hero-u)); }
.hero-scene .fc-paid { left:auto; right:calc(16 * var(--hero-u)); top:calc(497.4 * var(--hero-u)); }
@media (max-width:920px) {
  .hero .hero-grid { grid-template-columns:minmax(0,1fr); gap:22px; }
  .hero .hero-phones { display:block; width:calc(100% + 24px); max-width:720px; margin:0 -12px; }
}
/* Each phone and its note share a timeline; cards use separate timelines. */
.hero-device-front, .hero-phone-note-chat { --hero-rise:calc(10 * var(--hero-u)); animation:heroIndependentFloat 8s ease-in-out -1s infinite; }
.hero-device-back, .hero-phone-note-services { --hero-rise:calc(8 * var(--hero-u)); animation:heroIndependentFloat 10s ease-in-out -4s infinite; }
.hero-scene .fc-rating { --hero-rise:calc(4 * var(--hero-u)); animation:heroIndependentFloat 5.5s ease-in-out -.8s infinite; }
.hero-scene .fc-arrive { --hero-rise:calc(5 * var(--hero-u)); animation:heroIndependentFloat 6.5s ease-in-out -2.1s infinite; }
.hero-scene .fc-paid { --hero-rise:calc(4.5 * var(--hero-u)); animation:heroIndependentFloat 7.5s ease-in-out -3.7s infinite; }
@keyframes heroIndependentFloat {
  0%,100% { translate:0 0; }
  50% { translate:0 calc(-1 * var(--hero-rise)); }
}
@media (prefers-reduced-motion:reduce) {
  .hero-device-front, .hero-device-back, .hero-phone-note-chat, .hero-phone-note-services, .hero-scene .fchip { animation:none; translate:0 0; }
}