.hero { padding-top: 64px; padding-bottom: 56px; gap: 64px; }
.hero-right { width: 100%; max-width: 500px; height: 570px; padding: 0; display: block; perspective: 1200px; }
.hero-right::before { inset: 70px -30px 110px; background: radial-gradient(ellipse at 60% 55%, #dfeaff, #f4f7fd 48%, transparent 72%); border-radius: 0; }
.hero-right .iphone { position: absolute; left: calc(50% - 80px); top: 24px; margin: 0; width: 228px; height: 490px; transform: rotate(-7deg) rotateY(-15deg); background: #18202c; box-shadow: inset 0 0 0 2px #a8b1bf, inset -7px 0 5px #080e19, 16px 32px 48px #17253b30; }
.iphone-inner { inset: 7px; background: #fafbff; }
.iphone-di { width: 76px; height: 22px; margin-top: 10px; border-radius: 16px; }
.iphone-content { padding: 22px 17px; }
.mock-photo { width: 65px; height: 65px; background: #dce7fd; border: 0; margin-bottom: 15px; }
.mock-photo svg { color: #2454ac; }
.mock-name { color: #14233c; font-size: 19px; letter-spacing: -.03em; }
.mock-title { color: #576780; font-size: 10px; margin-top: 8px; }
.mock-buttons { margin-top: 23px; gap: 9px; }
.mock-btn { padding: 13px 12px; font-size: 11px; border-radius: 9px; }
.mock-btn-dark { background: #245cdb; color: white; }
.mock-btn-light { background: #edf1f9; color: #203553; }
.tap-status { background: #e6f1ec; color: #216347; padding: 10px 5px; margin-top: 20px; font-size: 10px; }
.tap-status span { color: #38604d; font-size: 10px; }
.iphone-home-bar { background: #192338; }
.iphone-back { border-color: #525d6e; background: linear-gradient(120deg, #6c7685 0%, #343e4d 33%, #202937 65%, #566273 100%); box-shadow: inset 0 0 0 1px #a7b0be, inset 8px 0 12px #ffffff16; }
.camera-island { background: #384352; box-shadow: 0 6px 9px #060c1650, inset 0 1px 1px #adb5c2; }
.phone-back-mark { color: #c6ceda; font-size: 20px; }
.phone-back-mark span { color: #b0bdcf; }
.hero-right .physical-card { left: 0; top: 330px; width: 225px; height: 140px; padding: 18px; transform: rotate(-15deg) rotateY(12deg); border: 0; border-radius: 12px; background: linear-gradient(125deg, #3b414c, #151a23 42%, #0b1018 80%, #323e51); box-shadow: inset 0 1px 0 #9ba6ba, inset 0 -2px 0 #496495, 8px 22px 28px #12244040; }
.physical-card-logo { width: 57%; }
.card-sheen { position: absolute; inset: -70% -100%; pointer-events: none; background: linear-gradient(105deg, transparent 43%, #d6e5ff35 50%, transparent 57%); transform: translateX(-65%); }
.signal-waves { position: absolute; z-index: 3; width: 130px; height: 130px; pointer-events: none; }
.signal-waves i { position: absolute; inset: 0; border: 2px solid #3979ef; border-radius: 50%; opacity: 0; }
.tap-caption { bottom: 0; font-size: 13px; }
.tap-phase { display: block; font-size: 15px; font-weight: 600; color: #18365f; min-height: 24px; }
@media (max-width: 900px) { .hero { gap: 36px; } .hero-right { width: min(100%, 440px); margin: 0 auto; } }
@media (max-width: 480px) {
 .hero-right { height: 545px; }
 .hero-right .iphone { left: calc(50% - 82px); width: 208px; height: 460px; top: 20px; }
 .hero-right .physical-card { width: 180px; height: 112px; top: 326px; left: 0; }
 .iphone-content { padding: 16px 12px; }
 .mock-buttons { margin-top: 16px; }
 .tap-status { margin-top: 14px; }
 .hero-right::before { inset: 55px -16px 140px; }
}
@media (prefers-reduced-motion: reduce) { .hero-right .iphone, .hero-right .physical-card { transform: none; } }

/* Rest beside the screen; the full-size card only crosses it during the tap. */
.hero-right .iphone { transform: rotate(0deg); }
.hero-right .physical-card { left: calc(50% - 248.5px); transform: rotate(-75deg) scale(.45); }
@media (max-width: 480px) {
 .hero-right .physical-card { left: calc(50% - 228px); }
}