.hero>.hero-camera{position:absolute;left:max(16.4%,400px);top:64%;width:clamp(126px,10vw,270px);height:auto;max-height:21%;object-fit:contain;z-index:2;pointer-events:none;user-select:none;filter:drop-shadow(0 12px 16px rgba(0,0,0,.3));animation:hero-camera-float 5.8s ease-in-out infinite}
@keyframes hero-camera-float{0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}50%{transform:translate3d(3px,-7px,0) rotate(-6deg)}}
@media(min-width:701px) and (max-width:1699px){.hero>.hero-camera{left:24%;top:67%;width:120px;max-height:16%}}
@media(max-width:700px){.hero>.hero-camera{left:auto;right:7%;top:660px;width:90px;max-height:none}}

/* Keep the statement above decorative ribbon with an opaque local reading surface. */
.hero .hero-top>p{position:relative;z-index:6;isolation:isolate;padding:15px 20px;border-radius:12px;background:rgba(27,24,22,.52);backdrop-filter:blur(11px);box-shadow:0 8px 30px rgba(0,0,0,.2);max-width:320px}
.hero .hero-top{z-index:6}
@media(max-width:700px){.hero .hero-top>p{padding:10px 12px;max-width:220px;box-shadow:0 0 20px 8px #252221}}
@media(prefers-reduced-motion:reduce){.hero>.hero-camera{animation:none}}