/* ════════════════ DEVICE — built in container units so it scales as one object ════════════════ */
.device { position: relative; z-index: 2; container-type: inline-size; width: max(240px, min(clamp(272px, 27vw, 344px), calc((100svh - 190px) * .462))); transform-style: preserve-3d; transition: transform 1.2s var(--ease); }
.phone {
  position: relative; width: 100%; aspect-ratio: 390 / 844; border-radius: 15cqw; padding: 2.4cqw;
  background: linear-gradient(150deg, #3a403c 0%, #121614 22%, #0a0d0b 60%, #262b28 100%);
  box-shadow:
    inset 0 0 0 .5cqw rgba(255,255,255,.07),
    0 0 0 1px rgba(0,0,0,.6),
    0 70px 120px -50px rgba(0,0,0,.95),
    0 40px 100px -40px rgba(31,92,64,.7);
}
.screen { position: relative; width: 100%; height: 100%; border-radius: 12.8cqw; overflow: hidden; background: var(--canvas); color: #fff; font-family: var(--sans); isolation: isolate; }
.screen::after { /* glass reflection */
  content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 32%);
}
.island { position: absolute; z-index: 30; top: 2.8cqw; left: 50%; width: 29cqw; height: 8.4cqw; margin-left: -14.5cqw; border-radius: 99px; background: #000; }
.sbar { position: absolute; z-index: 29; top: 4.6cqw; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 7.6cqw 0 9.4cqw; font: 600 4cqw/1 var(--sans); letter-spacing: -.01em; }
.sbar .sb-r { display: flex; align-items: center; gap: 1.4cqw; }
.sbar svg { height: 3cqw; width: auto; fill: #fff; }
.sbar .batt { display: inline-grid; place-items: center; min-width: 6.6cqw; height: 3.4cqw; padding: 0 .8cqw; border-radius: 1cqw; background: #FFD60A; color: #000; font: 700 2.4cqw/1 var(--sans); }