/* TERZU product device. Add device-stage-3d to an existing device-stage. */
.device-stage.device-stage-3d{
  --device-width:254px;
  --device-angle:rotateX(5deg) rotateY(-24deg) rotateZ(7deg);
  --device-radius:35px;
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:27px;min-width:0;width:100%;padding:28px 42px 39px;
  perspective:1100px;perspective-origin:50% 42%;isolation:isolate;
  background:radial-gradient(ellipse at 53% 34%,#d3f0f6 0,transparent 65%),linear-gradient(135deg,#ecf5fc,#e2eff8);
  border:1px solid #d6e6ef;border-radius:24px;overflow:clip;
}
.device-stage.device-stage-3d:before{
  content:"";position:absolute;z-index:-1;inset:7% 3% 15%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,#8ddbe638,transparent 65%);
}
.device-stage.device-stage-3d:after{
  content:"";position:absolute;z-index:-1;left:23%;right:14%;bottom:74px;height:27px;
  background:#1239543d;filter:blur(13px);border-radius:50%;transform:rotate(-8deg);pointer-events:none;
}
.page-visual>.device-stage.device-stage-3d{
  padding:26px 30px 33px;border:0;border-radius:19px;
  background:radial-gradient(ellipse at 53% 35%,#c3e9f83b,transparent 70%);
}
.device-stage.device-stage-3d>.device-phone{
  position:relative;display:block;flex:0 0 auto;width:min(var(--device-width),82%);max-width:100%;min-width:0;
  margin:0;padding:10px 7px 9px;border:1px solid #779bb1;border-radius:var(--device-radius);
  background:linear-gradient(110deg,#486578 0%,#172a3c 2%,#0b1726 48%,#284c64 98%,#89a6b7 100%);
  box-shadow:1px 1px 0 #bcdae780,4px 1px 0 #24435b,7px 3px 0 #10283d,9px 4px 0 #7596ab,
    11px 5px 0 #183349,16px 19px 28px #0e314727;
  transform:var(--device-angle);transform-origin:50% 50%;transform-style:preserve-3d;
  backface-visibility:hidden;overflow:visible;
}
.device-stage.device-stage-3d>.device-phone img{
  position:relative;z-index:1;display:block;width:100%;height:auto;max-width:100%;
  border:1px solid #070f18;border-radius:calc(var(--device-radius) - 9px);
  background:#101820;box-shadow:0 0 0 1px #ffffff10;image-rendering:auto;
}
/* Camera pill and a thin reflected edge sit above the image, never over controls. */
.device-stage.device-stage-3d>.device-phone:before{
  content:"";position:absolute;z-index:4;top:8px;left:42%;width:16%;height:7px;
  border-radius:0 0 8px 8px;background:#07121d;box-shadow:inset 0 -1px 1px #82b0c727;
  pointer-events:none;
}
.device-stage.device-stage-3d>.device-phone:after{
  content:"";position:absolute;z-index:3;inset:8px 6px 7px;border-radius:calc(var(--device-radius) - 7px);
  background:linear-gradient(113deg,#ffffff0a 0%,#e5faff12 13%,transparent 25%,transparent 76%,#e0f7ff0a 94%,transparent);
  box-shadow:inset 1px 0 0 #e5f5ff3b,inset -1px 0 0 #07203380;pointer-events:none;
}
.device-stage-3d .device-side-key{
  position:absolute;z-index:0;display:block;width:4px;border:1px solid #4d728b;border-radius:3px;
  background:linear-gradient(90deg,#14344c,#7294aa 48%,#213c51);pointer-events:none;
}
.device-stage-3d .device-side-key.volume{left:-4px;top:21%;height:40px;box-shadow:0 49px 0 -1px #33566e}
.device-stage-3d .device-side-key.power{right:-8px;top:29%;height:49px;transform:translateZ(-5px)}
.device-stage.device-stage-3d>.device-caption{
  position:relative;z-index:2;max-width:265px;padding-top:8px;margin:0;text-align:center;
  font:400 11px/1.6 'DM Sans',system-ui,sans-serif;color:#50738b;
}
/* Optional copy-free stage for the home hero. */
.device-stage.device-stage-3d.device-stage-hero{--device-width:265px;padding-block:29px 35px;min-height:0}
.device-stage.device-stage-3d.device-stage-hero:after{bottom:40px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .device-stage.device-stage-3d>.device-phone{transition:transform .65s cubic-bezier(.2,.7,.2,1)}
  .device-stage.device-stage-3d:hover>.device-phone{transform:rotateX(3deg) rotateY(-18deg) rotateZ(5deg)}
}
@media(max-width:900px){
  .device-stage.device-stage-3d{--device-width:245px;max-width:620px;margin-inline:auto;padding-inline:38px}
  .device-stage.device-stage-3d.device-stage-hero{--device-width:250px}
}
@media(max-width:600px){
  .device-stage.device-stage-3d{--device-width:229px;--device-radius:31px;--device-angle:rotateX(3deg) rotateY(-19deg) rotateZ(5deg);gap:22px;padding:25px 28px 28px;border-radius:18px;perspective:950px}
  .page-visual>.device-stage.device-stage-3d{padding:22px 18px 23px}
  .device-stage.device-stage-3d>.device-phone{width:min(var(--device-width),85%);padding:8px 6px 7px;
    box-shadow:1px 1px 0 #bcdae780,3px 1px 0 #24435b,5px 2px 0 #10283d,7px 3px 0 #7596ab,9px 4px 0 #183349,12px 15px 23px #0e314727}
  .device-stage.device-stage-3d>.device-phone:before{top:6px;height:6px}
  .device-stage.device-stage-3d>.device-phone:after{inset:7px 5px 6px}
  .device-stage-3d .device-side-key.volume{top:21%;height:33px;box-shadow:0 41px 0 -1px #33566e}
  .device-stage-3d .device-side-key.power{right:-6px;height:41px}
  .device-stage.device-stage-3d>.device-caption{font-size:10px;max-width:235px;padding-top:3px}
  .device-stage.device-stage-3d:after{left:21%;right:12%;bottom:59px;height:23px;filter:blur(10px)}
  .device-stage.device-stage-3d.device-stage-hero{--device-width:235px;padding-block:22px 29px}
}
@media(max-width:365px){
  .device-stage.device-stage-3d{--device-width:215px;--device-radius:28px;padding-inline:20px}
  .page-visual>.device-stage.device-stage-3d{padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){
  .device-stage.device-stage-3d>.device-phone{transition:none;animation:none}
}
/* Live home demonstration inside the same phone frame. */
.device-stage.device-stage-3d.home-device-stage{
  --device-width:340px;--device-radius:38px;--device-angle:rotateX(3deg) rotateY(-20deg) rotateZ(5deg);
  padding:27px 28px 32px;gap:24px;border:0;border-radius:0;background:none;
}
/* Color stays around the device: cool light at the left, blue depth and a warm rim. */
.device-stage.device-stage-3d.home-device-stage:before{
  inset:3% 0 13%;border-radius:50%;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at center,#000 78%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at center,#000 78%,transparent 100%);
  background:
    radial-gradient(ellipse 45% 48% at 80% 30%,#ffcb9add 0,#ffdec099 38%,transparent 73%),
    radial-gradient(ellipse 43% 60% at 25% 55%,#45cce8ad 0,#8cdef46b 45%,transparent 78%),
    radial-gradient(ellipse 52% 52% at 80% 72%,#2c79deb8 0,#6eb5ed99 50%,transparent 80%);
}
.device-stage.device-stage-3d.home-device-stage:after{left:21%;right:12%;bottom:62px}
.device-stage.device-stage-3d>.device-phone.home-demo-phone{width:min(var(--device-width),calc(100% - 12px));padding:21px 7px 9px}
.device-stage.device-stage-3d>.device-phone.home-demo-phone:before{top:8px;width:21%;height:6px;left:39.5%;border-radius:8px}
.device-stage.device-stage-3d>.device-phone.home-demo-phone:after{inset:20px 6px 8px;border-radius:calc(var(--device-radius) - 10px)}
.home-demo-phone .product-demo{width:100%;max-width:none;min-width:0;padding:18px 16px 14px;border:0;border-radius:calc(var(--device-radius) - 10px);box-shadow:none;background:radial-gradient(ellipse at 100% 0%,#1b4f6859,transparent 65%),linear-gradient(160deg,#142d47,#102039 85%)}
.home-demo-phone .pd-top{flex-direction:column;align-items:stretch;gap:12px;min-height:0}
.home-demo-phone .pd-brand{font-size:14px;gap:9px;min-height:26px}.home-demo-phone .pd-brand svg{width:24px;height:22px}
.home-demo-phone .pd-view-switch{width:100%;margin:0;padding:3px;justify-content:stretch;gap:4px}
.home-demo-phone .pd-view-switch button{flex:1;min-height:44px;font-size:12px;padding:9px 8px}
.home-demo-phone .pd-currencies{margin-top:13px;gap:6px}
.home-demo-phone .pd-currencies button{flex:1;min-width:0;justify-content:center;min-height:44px;font-size:12px;padding:8px 7px;gap:6px}
.home-demo-phone .pd-currencies button>svg{width:20px;height:15px;flex-basis:20px}
.home-demo-phone .pd-currencies button[data-demo-currency=USDT]>svg{height:20px}
.home-demo-phone .pd-currencies button small{font-size:10px}
.home-demo-phone .pd-balance{padding:17px 0 15px;gap:3px}
.home-demo-phone .pd-balance>span{font-size:12px}
.home-demo-phone .pd-balance>strong{font-size:37px;line-height:45px;min-height:45px;letter-spacing:-1.4px}
.home-demo-phone .product-demo.pd-ves .pd-balance>strong{font-size:32px;letter-spacing:-1.2px}
.home-demo-phone .pd-account-strip,.home-demo-phone .product-demo.pd-ves .pd-account-strip{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:16px}
.home-demo-phone .pd-account-strip>span{flex-direction:column;align-items:flex-start;gap:4px}
.home-demo-phone .product-demo.pd-ves .pd-account-strip>span{gap:4px}
.home-demo-phone .pd-account-strip i{font-size:11px;line-height:1.45}
.home-demo-phone .pd-account-strip b{font-size:12px}
.home-demo-phone .pd-chart-heading{align-items:flex-start;gap:8px;margin:17px 0 10px;font-size:12px}
.home-demo-phone .pd-legend{gap:9px;font-size:10px}.home-demo-phone .pd-legend>span{gap:4px}
.home-demo-phone .pd-legend i{width:6px;height:6px}.home-demo-phone .pd-chart-svg{height:auto;aspect-ratio:520/145}
.home-demo-phone .pd-days{font-size:10px;margin-top:5px}.home-demo-phone .pd-totals{gap:14px;margin-top:16px}
.home-demo-phone .pd-totals>span{flex-direction:column;align-items:flex-start;gap:5px;font-size:11px}
.home-demo-phone .pd-totals strong{font-size:14px}.home-demo-phone .pd-foot{gap:10px;margin-top:18px;padding-top:10px;min-height:49px;font-size:10px}
.home-demo-phone .product-demo .pd-playback{font-size:11px;min-width:99px;min-height:44px;gap:5px;padding:6px;margin:-3px -5px -4px 0}
.home-demo-phone .pd-playback svg{width:15px;height:15px}
.home-demo-phone .pd-transactions{min-height:0}
.home-demo-phone .pd-transactions>p{font-size:12px;margin:0 0 9px}
.home-demo-phone .pd-transactions li{gap:8px;min-height:54px;padding:10px 0}
.home-demo-phone .pd-tx-icon{flex-basis:25px;height:27px;font-size:15px}
.home-demo-phone .pd-tx-detail b{font-size:12px;line-height:1.4}.home-demo-phone .pd-tx-detail small{font-size:10px;line-height:1.4}
.home-demo-phone .pd-transactions li>strong{font-size:12px}
.home-demo-phone .pd-progress{left:18px;right:18px}
@media(max-width:900px){
  .device-stage.device-stage-3d.home-device-stage{max-width:460px;--device-width:325px;margin-inline:auto}
}
@media(max-width:600px){
  .device-stage.device-stage-3d.home-device-stage{--device-width:300px;--device-radius:33px;--device-angle:rotateX(2deg) rotateY(-15deg) rotateZ(4deg);padding:22px 16px 28px;gap:20px}
  .device-stage.device-stage-3d>.device-phone.home-demo-phone{padding:19px 6px 8px;width:min(var(--device-width),calc(100% - 6px))}
  .device-stage.device-stage-3d>.device-phone.home-demo-phone:before{top:7px;height:6px}
  .device-stage.device-stage-3d>.device-phone.home-demo-phone:after{inset:18px 5px 7px}
  .home-demo-phone .product-demo{padding:16px 13px 12px}
  .home-demo-phone .pd-balance>strong{font-size:35px}
  .home-demo-phone .product-demo.pd-ves .pd-balance>strong{font-size:29px}
  .home-demo-phone .pd-currencies button{padding-inline:5px;font-size:12px;gap:5px}
  .home-demo-phone .pd-currencies button>svg{width:18px;height:14px;flex-basis:18px}
  .home-demo-phone .pd-currencies button[data-demo-currency=USDT]>svg{height:18px}
  .home-demo-phone .pd-chart-heading{flex-wrap:wrap}.home-demo-phone .pd-legend{gap:8px}
  .home-demo-phone .pd-transactions li>strong{font-size:11px}.home-demo-phone .pd-tx-detail b{font-size:11px}
  .home-demo-phone .pd-account-strip b{font-size:11px}.home-demo-phone .pd-totals strong{font-size:13px}
}
@media(max-width:365px){
  .device-stage.device-stage-3d.home-device-stage{padding-inline:10px;--device-angle:rotateX(2deg) rotateY(-12deg) rotateZ(2deg);overflow:visible}
  .home-demo-phone .product-demo{padding-inline:11px}
  .home-demo-phone .pd-currencies button{gap:4px;font-size:11px;padding-inline:4px}
  .home-demo-phone .pd-currencies button small{font-size:9px}
  .home-demo-phone .pd-currencies button>svg{width:16px;flex-basis:16px}
  .home-demo-phone .pd-balance>strong{font-size:32px}
  .home-demo-phone .product-demo.pd-ves .pd-balance>strong{font-size:27px}
}