.phone-showcase { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 28px; margin: 0 0 44px; padding: 30px 36px; border: 1px solid #e5ddd3; border-radius: 28px; background: #f8f3ec; overflow: hidden; }
.phone-showcase-copy { max-width: 420px; position: relative; z-index: 1; }
.phone-kicker { font: 10px/1.6 'IBM Plex Mono', monospace; letter-spacing: .12em; color: #a32454; }
.phone-showcase h3 { margin: 18px 0; font: 600 clamp(32px, 4vw, 52px)/1.04 'Gabarito', sans-serif; letter-spacing: -.035em; color: #3d3833; }
.phone-intro { max-width: 350px; font-size: 16px; line-height: 1.7; color: #6e655c; }
.phone-profile-link { display: inline-block; margin-top: 16px; padding-bottom: 5px; border-bottom: 1px solid #ca8ea6; font-size: 14px; font-weight: 600; color: #a32454; }
.phone-profile-link:focus-visible { outline: 2px solid #a32454; outline-offset: 5px; }
.phone-stage { position: relative; display: grid; place-items: center; min-width: 0; height: 540px; perspective: 1000px; }
.phone-halo { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f8d2e0, #efc4d440 65%, transparent 70%); }
.phone-star { position: absolute; z-index: 3; display: block; color: #e779a3; pointer-events: none; animation: phone-star-twinkle 5s ease-in-out infinite; }
.phone-star svg { display: block; width: 100%; height: 100%; }
.phone-star-1 { width: 28px; height: 28px; left: calc(50% + 120px); top: 18%; --star-angle: 12deg; }
.phone-star-2 { width: 20px; height: 20px; left: calc(50% - 146px); top: 68%; color: #d94f89; --star-angle: -10deg; animation-delay: -2.5s; }
.phone-float { position: relative; z-index: 2; animation: phone-float 7s ease-in-out infinite; }
.phone-device { --base-rotation: -4deg; position: relative; width: 228px; height: 490px; padding: 7px; border: 1px solid #99948e; border-radius: 38px; background: linear-gradient(130deg, #76716b, #252322 12%, #080808 50%, #5b5754); box-shadow: 16px 26px 38px #3d38332e, inset 0 0 0 2px #b9b4ac80; transform: rotate(var(--base-rotation)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .35s ease-out; }
.phone-volume, .phone-power { position: absolute; width: 3px; background: #6f6a65; border-radius: 2px; }
.phone-volume { left: -3px; top: 105px; height: 48px; }
.phone-power { right: -3px; top: 125px; height: 58px; }
.phone-device, .phone-device * { box-sizing: border-box; }
.phone-screen { position: relative; display: grid; grid-template-rows: 34px 43px minmax(0, 1fr) 38px 15px; height: 100%; overflow: hidden; isolation: isolate; border-radius: 30px; background: #fff; color: #151515; font-family: 'Figtree', sans-serif; text-align: left; }
.phone-status { position: relative; display: flex; justify-content: space-between; align-items: center; min-width: 0; padding: 5px 13px 0; font-size: 10px; line-height: 1; font-weight: 700; }
.phone-time { width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.phone-island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 64px; height: 18px; border-radius: 30px; background: #080808; }
.phone-signal { display: flex; align-items: center; gap: 3px; }
.phone-signal svg { display: block; width: 11px; height: 9px; }
.phone-signal .phone-battery { width: 18px; }
.phone-app-header { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 12px; border-bottom: 1px solid #eee; background: #fff; }
.phone-app-name { flex: 1; min-width: 0; font: 700 21px/1 'Gabarito', sans-serif; letter-spacing: -.9px; }
.phone-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 18px; color: #171717; }
.phone-icon svg { display: block; width: 100%; height: 100%; }
.phone-feed-window { min-height: 0; min-width: 0; overflow: hidden; }
.phone-feed-track { animation: phone-feed-scroll 42s linear infinite; will-change: transform; }
.phone-post { margin: 0; background: #fff; padding: 0 0 12px; border-bottom: 1px solid #f1f1f1; }
.phone-post-header { display: flex; align-items: center; gap: 7px; height: 40px; padding: 6px 10px; font-size: 9px; line-height: 1.2; font-weight: 700; }
.phone-avatar { display: block; flex: none; width: 23px; height: 23px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 1px solid #eee; }
.phone-username { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.phone-more { margin-left: auto; width: 14px; height: 14px; flex-basis: 14px; }
.phone-post-picture { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #ece7df; }
.phone-post-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone-post-actions { display: flex; align-items: center; gap: 10px; padding: 10px 10px 6px; }
.phone-post-actions .phone-icon:last-child { margin-left: auto; }
.phone-caption { margin: 0 10px; padding: 0; font-size: 9px; line-height: 1.5; color: #303030; overflow-wrap: anywhere; }
.phone-app-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-top: 1px solid #ececec; background: #fff; }
.phone-app-bottom .phone-icon:first-child svg { fill: currentColor; }
.phone-app-bottom .phone-avatar { width: 18px; height: 18px; }
.phone-safe-area { display: grid; place-items: center; padding-bottom: 2px; background: #fff; }
.phone-home-bar { display: block; width: 76px; height: 3px; background: #111; border-radius: 20px; }
.phone-polaroid { position: absolute; width: 146px; padding: 7px 7px 12px; background: #fffdf9; box-shadow: 0 12px 24px #613c4b24; border-radius: 4px; }
.phone-polaroid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.phone-polaroid span { display: block; text-align: center; padding-top: 7px; font: 15px/1.2 cursive; color: #69554e; }
.phone-polaroid-1 { left: -2px; top: 52px; transform: rotate(-14deg); }
.phone-polaroid-2 { right: -8px; bottom: 38px; transform: rotate(13deg); }
.phone-handwritten { position: absolute; top: 24px; right: -1px; transform: rotate(8deg); font: 21px/1.2 cursive; color: #a32454; }
.phone-showcase[data-phone-style="scrapbook"] { background: #f9e7ee; border-color: #edcfdb; }
.phone-showcase[data-phone-style="scrapbook"] .phone-device { --base-rotation: 5deg; }
.phone-showcase[data-phone-style="scrapbook"] .phone-halo { background: #f1c6d6; width: 330px; height: 330px; }
.phone-showcase[data-motion-paused] *, .phone-showcase[data-motion-paused] *::before { animation-play-state: paused !important; }
@keyframes phone-float { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-10px); } }
@keyframes phone-feed-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes phone-star-twinkle { 0%, 100% { opacity: .75; transform: rotate(var(--star-angle)) scale(.9); } 50% { opacity: 1; transform: rotate(var(--star-angle)) scale(1.08); } }
@media (max-width: 760px) {
  .phone-showcase { grid-template-columns: 1fr; gap: 8px; padding: 26px 20px; }
  .phone-showcase-copy { max-width: 460px; }
  .phone-showcase h3 { font-size: 36px; }
  .phone-stage { height: 535px; width: 100%; max-width: 420px; margin: auto; }
  .phone-polaroid { width: 125px; }
  .phone-polaroid-1 { left: 0; }
  .phone-polaroid-2 { right: 0; }
  .phone-handwritten { top: 10px; right: 0; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-float, .phone-feed-track, .phone-star { animation: none; will-change: auto; }
  .phone-device { transition: none; transform: rotate(var(--base-rotation)); }
  .phone-feed-window { overflow-y: auto; scrollbar-width: none; }
  .phone-feed-group[aria-hidden="true"] { display: none; }
}