/* Alpha canvas and a feathered fallback blend into the hero with no rectangular edge. */
.hero{background:radial-gradient(ellipse at 78% 48%,#1458ff 0%,#0846ff 54%)}
.hero-art{max-width:650px}
.phone-stage{position:relative;width:100%;aspect-ratio:1.08;isolation:isolate}
.phone-stage::before{content:"";position:absolute;inset:12% 3% 10%;background:radial-gradient(ellipse,#76b8ff36,transparent 67%);z-index:-1}
.phone-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .55s ease-out;pointer-events:none}
.phone-stage.is-3d canvas{opacity:1}
.phone-loading,.phone-unavailable{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;text-align:center;color:#e5edff;font-size:13px;letter-spacing:.01em}
.phone-loading-ring{width:42px;height:42px;border:2px solid #ffffff30;border-top-color:#fff;border-radius:50%;animation:phone-loading-spin 1s linear infinite}
.phone-stage.is-3d .phone-loading{display:none}
.phone-stage[data-scene-state="unavailable"] .phone-loading-ring{display:none}
@keyframes phone-loading-spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.hero-grid{gap:18px}.phone-stage{aspect-ratio:.95}}
@media(max-width:650px){.hero-grid{gap:0}.hero-art{width:100%;max-width:390px;margin-top:16px}.phone-stage{aspect-ratio:1.1}.scene-controls{gap:8px;margin-top:0}.scene-controls button{font-size:11px}.scene-controls span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.phone-stage canvas{transition:none}.phone-loading-ring{animation:none}}