:root{
    --phone-width: 250px; /* ajuste o tamanho do celular aqui */
    --r: 27px;            /* raio de borda do aparelho */
  } 
 
 .wrap{
    width:100%; max-width:1200px; padding:0px 20px; text-align:center;
  }
  h1{margin:0 0 10px; font-weight:800; letter-spacing:.3px}
  p.sub{margin:0 0 32px; color:#aab1c7}

  /* --- PHONE --- */
  .stage{
    width:100%; display:flex; justify-content:center; align-items:center;
    perspective: 1000px;
  }

  .phone{
    width:var(--phone-width);
    aspect-ratio: 9 / 19.5;   /* proporção aproximada de smartphones modernos */
    border-radius: var(--r);
    position:relative;
    transform-style: preserve-3d;
    transition: transform 200ms ease, box-shadow 200ms ease;
    will-change: transform;
  }

  /* corpo do aparelho */
  .shell{
    position:absolute; 
    inset: 6px;
    border-radius: var(--r);
    background: linear-gradient(145deg, #a8a59f, #a8a59f);
    box-shadow:
      0 30px 40px rgba(0,0,0,.45),
      inset 0 0 0 2px rgba(255,255,255,.04),
      inset 0 0 24px rgba(255,255,255,.05);
    transform: translateZ(0.1px);
  }

  /* aro metálico sutil */
  .bezel{
    position:absolute; inset:8px;
    border-radius: calc(var(--r));
    background: linear-gradient(180deg, #0c1020, #131a2c);
    box-shadow:
      inset 0 0 0 2px rgba(255,255,255,.06),
      inset 0 0 18px rgba(0,0,0,.35);
    transform: translateZ(0.2px);
  }

  /* NOTCH opcional */
  .notch{
    position:absolute; left:50%; top:10px; transform:translateX(-50%);
    width:45%; height:18px; background:#0b0f1a; border-bottom-left-radius:14px; border-bottom-right-radius:14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    opacity:.85; pointer-events:none; z-index:4;
  }

  /* TELA – coloque sua imagem ou vídeo do app aqui */
  .screen{
    position:absolute; inset:14px; border-radius: calc(var(--r) - 14px);
    overflow:hidden; background:#000; z-index:3;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    transform: translateZ(0.3px);
  }
  .screen img, .screen video{
    width:100%; height:100%; object-fit: cover; display:block;
  }

  /* SOMBRA projetada */
  .shadow{
    position:absolute; left:50%; top:105%;
    width: 70%; height: 18px; filter: blur(14px);
    background: rgba(0,0,0,.55); border-radius: 50%;
    transform: translateX(-50%) translateZ(0);
    transition: transform 200ms ease, opacity 200ms ease;
    opacity:.9;
  }



  /* Acessibilidade / motion */
  @media (prefers-reduced-motion: reduce){
    .phone{ transition:none !important; }
    .shadow{ transition:none !important; }
  }

  /* Em touch, desativamos o tilt para evitar conflito com scroll */
  @media (hover:none){
    .stage{ perspective: none; }
    .phone{ transform:none !important; }
    .shadow{ opacity:.6; }
  }