/* Hero option A: product-truth phone UI. Motion: Corporate personality.
   enter 300ms cubic-bezier(.2,0,0,1); exit 200ms ease-in; hold >= 2.2s per step; 14s loop. */
.home-hero{overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-3;background:radial-gradient(120% 90% at 80% 20%,#0f2a24 0%,#07080c 60%);pointer-events:none}
.pa{max-width:380px;margin:0 auto;position:relative}
.pa-phone{border:1px solid #2a3140;border-radius:36px;background:#0c0f15;padding:18px 14px 22px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pa-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:#c9d0db;padding:0 8px 12px}
.pa-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#0b0d12;background:#9ae8ff;border-radius:4px;padding:3px 7px;margin:0 0 12px 8px}
.pa-c{border:1px solid #2a3140;background:#141923;border-radius:16px;padding:12px 14px;margin:0 0 10px;color:#eef2f7}
.pa-c b{display:block;font-size:15px}
.pa-c small{display:block;font-size:13px;color:#c9d0db;margin-top:2px}
.pa-k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9ae8ff;margin-bottom:4px}
.pa-miss .pa-k{color:#ff9b8f}
.pa-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5ff2b4;margin-right:6px;vertical-align:middle}
.pa-sms{background:#1d3a32;border-color:#2f6b5a;border-radius:16px 16px 4px 16px}
.pa-cap{font-family:var(--mono);font-size:12px;color:#c9d0db;text-align:center;margin:0 0 12px}
@media (prefers-reduced-motion:no-preference){
 .pa-c{opacity:0;animation:pa 14s infinite both}
 .pa-miss{animation-name:pa1}.pa-ans{animation-name:pa2}.pa-cal{animation-name:pa3}.pa-sms{animation-name:pa4}
 .pa-live{animation:pulse 1.6s ease-in-out infinite}
}
/* each card enters at its step, dims when the next arrives, all exit at loop end */
@keyframes pa1{0%{opacity:0;transform:translateY(8px)}2%{opacity:1;transform:none}20%{opacity:1}23%{opacity:.75}93%{opacity:.75}97%,100%{opacity:0}}
@keyframes pa2{0%,21%{opacity:0;transform:translateY(8px)}23.5%{opacity:1;transform:none}44%{opacity:1}47%{opacity:.75}93%{opacity:.75}97%,100%{opacity:0}}
@keyframes pa3{0%,45%{opacity:0;transform:translateY(8px)}47.5%{opacity:1;transform:none}68%{opacity:1}71%{opacity:.75}93%{opacity:.75}97%,100%{opacity:0}}
@keyframes pa4{0%,69%{opacity:0;transform:translateY(8px)}71.5%{opacity:1;transform:none}93%{opacity:1}97%,100%{opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:1023px){.pa{margin-top:28px}}