/* GIRO — bloco "no celular": dois aparelhos com leve perspectiva, segurando
   PRINTS REAIS do app rodando a loja de demonstração.

   O rgnt remontava as telas em CSS aqui. Aqui não: remontar em CSS uma tela que
   existe é desenhar o produto que a gente gostaria de ter. O que entra é o que
   o Playwright fotografou rodando. */

.appmock{padding:110px 0;border-top:1px solid var(--line-soft);position:relative;z-index:2}
.appmock-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.appmock-copy .arg-num{margin-bottom:16px}
.appmock-copy h2{font-family:var(--display);font-weight:var(--fw-display);font-size:clamp(30px,4.2vw,48px);line-height:1.04;letter-spacing:-.025em;color:var(--ink);margin:0 0 18px}
.appmock-copy p{font-weight:var(--fw-body);font-size:18px;color:var(--ink-dim);max-width:46ch;margin:0 0 26px}
.appmock-badges{display:flex;gap:12px;flex-wrap:wrap}
.appmock-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px}
.appmock-badge svg{width:15px;height:15px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- palco: dois aparelhos, o da frente com rotação leve ---- */
.appmock-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:560px;
  perspective:1600px}
.appmock-stage::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(126,217,168,.16),transparent 68%);filter:blur(30px);z-index:0}

.phone{position:relative;width:270px;border-radius:38px;background:#0a0d0c;
  border:1px solid rgba(126,217,168,.22);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 8px #131917,0 0 0 9px rgba(126,217,168,.14);
  padding:10px;z-index:2}
.phone::after{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:98px;height:22px;background:#131917;border-radius:999px;z-index:5} /* notch */
.phone-screen{position:relative;border-radius:30px;overflow:hidden;background:var(--bg);height:544px}
.phone-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.phone.back{position:absolute;left:-2%;top:50%;transform:translateY(-46%) rotateY(24deg) scale(.86);
  transform-origin:center center;opacity:.72;z-index:1;filter:brightness(.82)}
.phone.front{transform:rotateY(-12deg) translateX(18%);transform-origin:center center;z-index:2}

@media(max-width:900px){
  .appmock-in{grid-template-columns:1fr;gap:44px}
  .appmock-stage{min-height:520px}
  .phone{width:236px}
  .phone-screen{height:478px}
  .phone.front{transform:rotateY(-8deg) translateX(12%)}
  .phone.back{transform:translateY(-46%) rotateY(20deg) scale(.84)}
}
@media(max-width:560px){
  .appmock{padding:78px 0}
  .phone{width:206px;padding:8px;border-radius:32px}
  .phone-screen{height:418px;border-radius:26px}
  .phone.back{left:-6%;transform:translateY(-46%) rotateY(18deg) scale(.8)}
  .phone.front{transform:rotateY(-6deg) translateX(16%)}
}