/* Decorative Burgundy phone concept. The app remains a live, accessible iframe. */
.hero-preview{max-width:390px;padding-inline:4px}
.device-shell{
  --device-radius:54px;
  position:relative;width:100%;aspect-ratio:0.465;padding:9px;
  border-radius:var(--device-radius);
  border:1px solid #b57c8e;
  background:linear-gradient(104deg,#35131f 0%,#a9687e 1.2%,#5b2036 2.6%,#78354c 5%,#4a1a2d 23%,#371322 66%,#67283e 95%,#b6788d 98.4%,#36101f 100%);
  box-shadow:inset 0 0 0 1px #250913,inset 0 0 0 3px #b66e8338,0 0 0 1px #180910,0 28px 70px #0009,0 18px 55px #651d3738;
}
.device-shell:before{content:'';position:absolute;inset:3px;border:1px solid #edbcc44d;border-radius:calc(var(--device-radius) - 3px);pointer-events:none;z-index:2}
.device-shell:after{content:'';position:absolute;inset:0;border-radius:var(--device-radius);box-shadow:inset 3px 1px 2px #efbfcd32,inset -3px -1px 2px #16060c9c;pointer-events:none;z-index:2}
.device-shell .preview-wrap{
  display:flex;flex-direction:column;width:100%;height:100%;min-height:0;
  border:3px solid #050609;border-radius:calc(var(--device-radius) - 9px);
  background:#0C0E12;overflow:hidden;
  box-shadow:0 0 0 1px #270d19,inset 0 0 0 1px #ffffff0c;
}
.device-shell .preview-wrap iframe{flex:1;min-height:0;height:0;width:100%;border:0;background:#0C0E12}
.device-status{height:51px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:space-between;padding:8px 24px 0;color:#f5f5f7;pointer-events:none;font-family:var(--font-native)}
.device-time{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.03em;min-width:40px;text-align:center}
.dynamic-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:104px;height:29px;border-radius:999px;background:#020304;box-shadow:inset 0 0 0 1px #ffffff06}
.island-camera{position:absolute;right:11px;top:10px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#223645,#0b1424 36%,#020409 70%);box-shadow:0 0 0 2px #07090c}
.device-indicators{display:flex;align-items:center;gap:5px}
.device-indicators svg{width:14px;height:12px;fill:currentColor;display:block}
.device-indicators .device-wifi{width:15px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.device-wifi circle{fill:currentColor;stroke:none}
.device-battery{position:relative;display:block;width:20px;height:10px;border:1px solid #f5f5f780;border-radius:3px}
.device-battery:before{content:'';position:absolute;inset:1px;border-radius:1px;background:currentColor}
.device-battery:after{content:'';position:absolute;right:-3px;top:2px;width:1.5px;height:4px;border-radius:0 1px 1px 0;background:#f5f5f780}
.device-home{height:24px;flex-shrink:0;display:grid;place-items:center;pointer-events:none}
.device-home span{display:block;width:32%;height:4px;border-radius:99px;background:#f0f1f3}
.device-key{position:absolute;pointer-events:none;width:3px;left:-3px;border:1px solid #aa667b80;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#2d1020,#95516a);box-shadow:-1px 0 2px #0005}
.action-key{top:113px;height:24px}.volume-up{top:166px;height:46px}.volume-down{top:224px;height:46px}
.power-key,.camera-key{left:auto;right:-3px;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#95516a,#2d1020)}
.power-key{top:186px;height:67px}.camera-key{bottom:141px;height:34px;opacity:.8}
.device-caption{font-size:9px;line-height:1.6;color:var(--text-tertiary);text-align:center;margin:14px 0 0}
.preview-tools{margin-top:8px}
@media(max-width:600px){.device-shell{--device-radius:48px;padding:8px}.device-status{height:47px;padding:7px 19px 0}.dynamic-island{width:94px;height:27px;top:9px}.island-camera{top:9px}.device-time{font-size:11px}.device-indicators{gap:4px}.device-home{height:22px}.device-caption{font-size:8px}}
@media(max-width:360px){.device-shell{--device-radius:43px;padding:7px}.device-status{height:44px;padding:7px 15px 0}.dynamic-island{width:85px;height:25px;top:8px}.island-camera{width:7px;height:7px}.device-indicators svg{width:11px}.device-indicators .device-wifi{width:13px}.device-battery{width:17px;height:9px}.device-time{font-size:10px}.preview-tools{margin-top:4px}}

@media(pointer:coarse){.device-shell{box-shadow:inset 0 0 0 1px #250913,inset 0 0 0 3px #b66e8338,0 12px 28px #0006}}