/* SP Galahad — celular 3D com a tela real do app */
.gx-stage{--rx:8deg;--ry:-22deg;--w:300px;position:relative;width:100%;max-width:460px;height:calc(var(--w)*2.05 + 70px);margin:0 auto;perspective:1700px;perspective-origin:50% 40%}
.gx-badge{top:0!important;z-index:30!important}
.gx-floor{position:absolute;left:50%;bottom:6px;width:72%;height:46px;border-radius:50%;translate:-50% 0;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0));filter:blur(4px);animation:gx-shadow 7s ease-in-out infinite}
.gx-floor::after{content:"";position:absolute;inset:-40% 5%;border-radius:50%;background:radial-gradient(closest-side,rgba(70,160,255,.28),rgba(124,92,255,.12) 50%,transparent);}
.gx-rig{position:absolute;left:50%;top:34px;width:var(--w);height:calc(var(--w)*2.05);translate:-50% 0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.7,.2,1);animation:gx-float 7s ease-in-out infinite}
.gx-stage.is-hover .gx-rig{animation-play-state:paused}
@keyframes gx-float{50%{translate:-50% -14px}}
@keyframes gx-shadow{50%{transform:scale(.88);opacity:.75}}

.gx-phone{position:absolute;inset:0;transform-style:preserve-3d}
.gx-edge{position:absolute;inset:0;transform-style:preserve-3d}
.gx-edge i{position:absolute;inset:0;border-radius:46px;background:linear-gradient(135deg,#6d7690,#262b3d 40%,#8a93ad 55%,#2a3043);transform:translateZ(calc(var(--z)*-1px))}
.gx-edge i:nth-child(1){--z:1}.gx-edge i:nth-child(2){--z:2}.gx-edge i:nth-child(3){--z:3}.gx-edge i:nth-child(4){--z:4}.gx-edge i:nth-child(5){--z:5}
.gx-edge i:nth-child(6){--z:6}.gx-edge i:nth-child(7){--z:7}.gx-edge i:nth-child(8){--z:8}.gx-edge i:nth-child(9){--z:9}
.gx-edge i:nth-child(10){--z:10;background:#141826;box-shadow:0 40px 80px rgba(0,0,0,.55)}
.gx-body{position:absolute;inset:0;padding:11px;border-radius:46px;background:linear-gradient(145deg,#9aa3bd 0%,#3a4157 18%,#1b1f2d 50%,#454c64 82%,#a2abc4 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),inset 0 0 0 3px #0b0d15,0 0 60px rgba(90,120,255,.18);transform:translateZ(1px)}
.gx-btn{position:absolute;width:4px;border-radius:3px;background:linear-gradient(90deg,#2a2f42,#9aa3bd)}
.gx-btn--power{right:-3px;top:26%;height:70px}
.gx-btn--vol{left:-3px;top:20%;height:48px;box-shadow:0 64px 0 #5a6178}
.gx-screen{position:relative;height:100%;overflow:hidden;border-radius:36px;background:#060710;display:flex;flex-direction:column}
.gx-screen img{display:block;width:100%;flex:1;min-height:0;object-fit:cover;object-position:top center}
.gx-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:34px;flex:0 0 34px;padding:0 20px 0 26px;background:#04070f;color:#fff;font:700 12px/1 Manrope,sans-serif}
.gx-island{position:absolute;left:50%;top:8px;width:84px;height:22px;border-radius:14px;background:#000;translate:-50% 0;box-shadow:inset 0 0 0 1px #151826}
.gx-island::after{content:"";position:absolute;right:10px;top:7px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3a4a8a,#05060c 70%)}
.gx-icons{display:flex;align-items:flex-end;gap:2px}
.gx-icons i{width:3px;background:#fff;border-radius:1px}
.gx-icons i:nth-child(1){height:5px}.gx-icons i:nth-child(2){height:8px}
.gx-icons em{width:20px;height:10px;margin-left:5px;border:1.5px solid rgba(255,255,255,.8);border-radius:3px;background:linear-gradient(90deg,#fff 70%,transparent 70%) content-box;padding:1px}
.gx-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.14) 44%,rgba(255,255,255,0) 56%);background-size:250% 100%;background-position:var(--gx-glare,80%) 0;mix-blend-mode:screen;transition:background-position .5s}

/* cartões e notificação flutuando em 3D */
.gx-chip,.gx-notify{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:linear-gradient(145deg,rgba(30,34,64,.82),rgba(12,15,32,.78));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 22px 44px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1);color:#fff;white-space:nowrap;pointer-events:none}
.gx-chip img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.gx-chip small,.gx-notify small{display:block;color:#9fb0d6;font-size:8.5px;font-weight:800;letter-spacing:.9px}
.gx-chip b{display:block;margin-top:2px;font-size:12.5px}
.gx-chip--install{left:-38%;top:17%;transform:translateZ(90px);animation:gx-bob 6s ease-in-out infinite}
.gx-chip--play{right:-40%;top:44%;transform:translateZ(120px);animation:gx-bob 7s ease-in-out -2s infinite}
.gx-chip--merlin{left:-30%;bottom:13%;transform:translateZ(70px);animation:gx-bob 6.5s ease-in-out -4s infinite}
.gx-ok{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#29c96f;font-size:11px;font-weight:900;box-shadow:0 0 12px rgba(41,201,111,.6)}
@keyframes gx-bob{50%{translate:0 -9px}}
.gx-notify{left:8%;right:8%;top:6.5%;padding:9px 11px;border-radius:16px;background:rgba(245,246,255,.94);color:#1a2340;white-space:normal;transform:translateZ(40px) translateY(-24px);opacity:0;transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.25,1.2)}
.gx-notify.is-in{opacity:1;transform:translateZ(40px) translateY(0)}
.gx-notify span{display:grid;flex:0 0 30px;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#ff5a24,#ff8a4c);color:#fff;font-size:10px;font-weight:900}
.gx-notify b{display:block;font-size:11.5px}
.gx-notify small{color:#6c7593;letter-spacing:0;font-weight:700;font-size:10px}

@media (max-width:1050px){.gx-stage{max-width:520px}}
@media (max-width:640px){
  .gx-stage{--w:240px;--ry:-16deg}
  .gx-chip{padding:8px 10px;gap:8px}
  .gx-chip img{width:26px;height:26px}
  .gx-chip b{font-size:11px}
  .gx-chip--install{left:-22%}
  .gx-chip--play{right:-24%}
  .gx-chip--merlin{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gx-rig,.gx-floor,.gx-chip{animation:none!important}
  .gx-notify{opacity:1;transform:translateZ(40px)}
}