/* Palco do hero: ChatGPT para macOS, notificações do WhatsApp no iOS e o app do Claude num
 * iPhone 18 Pro (71,9 × 150 mm; tela 402 × 874 pt; Dynamic Island ~81 × 37 pt). Desenho próprio
 * em HTML e CSS, inspirado nas interfaces reais. Dados fictícios. */
.hero-luz{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(55% 60% at 74% 44%,rgba(90,120,255,.26),transparent 70%),
  radial-gradient(30% 34% at 86% 78%,rgba(230,79,24,.16),transparent 70%),
  radial-gradient(80% 50% at 50% 120%,rgba(30,58,138,.35),transparent 70%),
  linear-gradient(180deg,#040a16,#081329 55%,#050c18)}
.chao{position:absolute;left:40%;right:-10%;bottom:4%;height:22%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.75),transparent 70%);filter:blur(24px)}

/* Uma só perspectiva, no palco. O mouse gira .giro e a rolagem move .telas, sem perspectiva própria:
 * perspectivas empilhadas deformam a cena. */
.cena{position:absolute;inset:0;perspective:2200px;perspective-origin:62% 46%}
.giro{position:absolute;inset:0;transform-style:preserve-3d}
.telas{--w:min(50vw,820px);position:absolute;z-index:1;left:47%;top:50%;width:var(--w);margin-top:calc(var(--w) * -.31);
  transform-style:preserve-3d;will-change:transform}
.gpt,.iphone,.notif{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:0;line-height:1.45}
.telas b{font-weight:600}
.telas svg{display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- ChatGPT para macOS, tema escuro ---------- */
.gpt{position:relative;display:grid;grid-template-columns:24% 1fr;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#212121;color:#ECECEC;
  box-shadow:0 0 0 .5px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.08),0 70px 140px -30px rgba(0,0,0,.85),0 30px 60px -30px rgba(0,0,0,.6),0 0 120px -20px rgba(90,120,255,.28);
  font-size:calc(var(--w) * .0142)}
.gpt-lado{position:relative;background:#181818;padding:1.1em .8em 1em;display:flex;flex-direction:column;gap:.1em;color:#D9D9D9;overflow:hidden;border-right:1px solid rgba(255,255,255,.04)}
.mac-luzes{display:flex;gap:.55em;padding:.1em .2em 1.5em}
.mac-luzes i{width:.85em;height:.85em;border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2)}
.mac-luzes i:nth-child(2){background:#FEBC2E}.mac-luzes i:nth-child(3){background:#28C840}
.gpt-lado p{padding:.45em .7em;border-radius:.6em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gpt-lado p.on{background:#2A2A2A;color:#fff}
.gpt-item{display:flex;align-items:center;gap:.6em}
.gpt-item svg{width:1.15em;height:1.15em;flex:none}
.gpt-sec{margin-top:1em;font-size:.86em;color:#8F8F8F}
.gpt-conta{margin-top:auto;display:flex;align-items:center;gap:.6em;padding:.5em .6em;font-size:.95em}
.gpt-conta span{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:#C2410C;color:#fff;font-size:.72em;font-weight:600}
.gpt-main{display:flex;flex-direction:column;min-width:0}
.gpt-topo{display:flex;align-items:center;gap:.35em;padding:1em 1.3em;font-size:1.12em;color:#fff}
.chev{display:inline-block;width:.42em;height:.42em;border-right:1.5px solid #9B9B9B;border-bottom:1.5px solid #9B9B9B;transform:rotate(45deg) translateY(-.15em);margin-left:.2em}
.gpt-acoes{margin-left:auto;color:#BDBDBD}.gpt-acoes svg{width:1.1em;height:1.1em}
.gpt-conversa{flex:1;display:flex;flex-direction:column;gap:1.05em;width:min(100%,40em);margin:0 auto;padding:1.2em 2em 0;overflow:hidden}
.gpt-voce{align-self:flex-end;max-width:75%;padding:.62em 1.1em;border-radius:1.5em;background:#303030;color:#fff}
.gpt-ferr{display:flex;align-items:center;gap:.45em;color:#AFAFAF;font-size:.92em}
.gpt-ferr b{color:#ECECEC}
.gpt-ferr-ico{width:1em;height:1em;border-radius:.28em;background:linear-gradient(135deg,#F06A2A,#C2410C);position:relative;flex:none}
.gpt-ferr-ico::after{content:"";position:absolute;right:.2em;bottom:.2em;width:.22em;height:.22em;border-radius:50%;background:#fff}
.gpt-ia{display:grid;gap:.7em}
.gpt-ia ol{margin:0;padding-left:1.3em;display:grid;gap:.35em}
.gpt-ia b{color:#fff}
.gpt-comp{display:flex;align-items:center;gap:.8em;width:min(calc(100% - 3em),40em);margin:1em auto 1.4em;padding:.65em .7em .65em 1.1em;border-radius:1.9em;background:#303030;color:#9B9B9B;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.gpt-comp .mais{font-size:1.35em;line-height:1;color:#D6D6D6}
.gpt-comp p{flex:1}
.gpt-comp .mic{width:1.15em;height:1.15em;color:#D6D6D6}
.gpt-comp .voz{width:2.1em;height:2.1em;border-radius:50%;background:#fff;position:relative}
.gpt-comp .voz::before{content:"";position:absolute;inset:32% 30%;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px);clip-path:polygon(0 35%,100% 20%,100% 80%,0 65%)}

/* ---------- Notificações do WhatsApp no iOS (comunicação: foto + selo do app) ---------- */
.notif{position:absolute;width:30%;font-size:calc(var(--w) * .0128);color:#111;will-change:transform,opacity}
.n1{left:3%;top:9%}.n2{left:63%;top:5%}.n3{left:55%;top:66%}
.nf{display:flex;gap:.75em;align-items:center;padding:.85em 1em;border-radius:1.55em;
  background:rgba(246,246,248,.86);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7),0 24px 50px -16px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.18);animation:flutua 5.5s ease-in-out infinite alternate}
.n2 .nf{animation-delay:-2s}.n3 .nf{animation-delay:-3.6s}
@keyframes flutua{from{transform:translateY(-6px)}to{transform:translateY(8px)}}
.notif .av{position:relative;flex:none;display:grid;place-items:center;width:2.8em;height:2.8em;border-radius:50%;
  background:linear-gradient(180deg,#A8AEBA,#80869A);color:#fff;font-weight:600;font-size:.92em;letter-spacing:.02em}
.notif .av-2{background:linear-gradient(180deg,#9AA9C9,#6E7FA6)}.notif .av-3{background:linear-gradient(180deg,#B3A39A,#8D7B70)}
.notif .wa{position:absolute;right:-.28em;bottom:-.22em;width:1.25em;height:1.25em;border-radius:.34em;background:#25D366;box-shadow:0 0 0 .14em rgba(246,246,248,.95)}
.notif .wa::before{content:"";position:absolute;inset:.24em;border:.11em solid #fff;border-radius:50%;border-bottom-left-radius:.1em}
.notif .nt{flex:1;min-width:0}
.notif .nt p{margin:0;line-height:1.3}
.notif .nt p:first-child{display:flex;justify-content:space-between;gap:.6em;margin-bottom:.1em}
.notif time{font-size:.85em;color:#7A7A80;white-space:nowrap}

/* ---------- iPhone 18 Pro ---------- */
/* iPhone 18 Pro (71,9 × 150 mm): aro de alumínio fino, bisel preto uniforme (~1,4 mm),
 * raio externo ~12,5 mm. Proporções em % da largura (horizontal) e da altura (vertical). */
.iphone{position:absolute;right:-4%;bottom:-22%;width:26%;aspect-ratio:71.9/150;padding:.9%;border-radius:17.4% / 8.35%;
  background:linear-gradient(90deg,#F08A52 0%,#C9592A 7%,#A9481F 50%,#C9592A 93%,#F08A52 100%);   /* Laranja Cósmico (17 Pro) */
  box-shadow:inset 0 0 0 .6px rgba(255,214,190,.5),0 50px 90px -24px rgba(0,0,0,.8),0 16px 30px -12px rgba(0,0,0,.55);
  font-size:calc(var(--w) * .0108);color:#ECECEC}
.bt{position:absolute;width:.7%;background:#B9512A;border-radius:1px}
.bt-acao{left:-.7%;top:16%;height:4.6%}.bt-vol1{left:-.7%;top:23.5%;height:8%}.bt-vol2{left:-.7%;top:33%;height:8%}
.bt-lado{right:-.7%;top:26%;height:12.5%}
.bt-cam{right:-.5%;top:60%;height:6%;width:.5%;background:#8E3D1A}
.iphone-vidro{height:100%;padding:2.6%;border-radius:16.6% / 7.95%;background:#050505;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.iphone-tela{position:relative;height:100%;border-radius:14.4% / 6.9%;overflow:hidden;background:#0D0D0D;display:flex;flex-direction:column}
.iphone-tela::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.07) 0%,transparent 34%)}
.ios-status{position:relative;display:flex;justify-content:space-between;align-items:center;height:6.4%;padding:0 8.5% 0 12%;font-size:1.15em;flex:none;color:#fff}
.ios-status b{font-weight:600;letter-spacing:.01em}
.ilha{position:absolute;left:50%;top:24%;width:24%;height:50%;transform:translateX(-50%);border-radius:999px;background:#000}
.ios-icones{display:flex;align-items:center;gap:.35em}
.ios-icones svg{height:.8em;width:auto;fill:#fff;stroke:none}
.ios-icones svg:nth-child(2){fill:none;stroke:#fff;stroke-width:1.6}
.bat{position:relative;width:1.9em;height:.88em;border-radius:.28em;border:1px solid rgba(255,255,255,.45);padding:1px}
.bat i{display:block;height:100%;width:78%;border-radius:.15em;background:#fff}
.bat::after{content:"";position:absolute;right:-.2em;top:30%;height:40%;width:.12em;border-radius:0 1px 1px 0;background:rgba(255,255,255,.45)}
.ios-home{position:absolute;left:50%;bottom:1.1%;width:35%;height:.42%;border-radius:9px;background:#fff;transform:translateX(-50%)}

/* App do ChatGPT no iOS, tema escuro: a conversa do computador continua aqui */
.cg-topo{display:flex;align-items:center;justify-content:space-between;padding:.7em 1.3em;font-size:1.1em;flex:none}
.cg-topo b{display:flex;align-items:center;gap:.35em}
.cg-menu{width:1.15em;height:.7em;border-top:1.5px solid #ECECEC;border-bottom:1.5px solid #ECECEC}
.cg-novo{width:1.15em;height:1.15em;border:1.5px solid #ECECEC;border-radius:.3em}
.cg-conversa{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:1em;padding:1em 1.3em;overflow:hidden;line-height:1.5}
.cg-antes{margin:0;color:#B4B4B4}
.cg-voce{align-self:flex-end;max-width:80%;padding:.6em 1em;border-radius:1.4em;background:#303030}
.cg-ia{display:grid;gap:.6em}
.cg-ia .cit{margin:0;padding-left:.8em;border-left:2px solid #E64F18;color:#D9D9D9}
.cg-ia p{margin:0}
.cg-comp{display:flex;align-items:center;gap:.7em;margin:0 .8em 2.4em;padding:.75em .9em;border-radius:1.6em;background:#2A2A2A;color:#9B9B9B;flex:none}
.cg-comp span{font-size:1.3em;line-height:1;color:#ECECEC}
.cg-comp p{flex:1;margin:0}
.cg-comp i{width:1.9em;height:1.9em;border-radius:50%;background:#fff}

/* Reflexo fixo no vidro (sem animar: repintar a janela inteira a cada quadro pesa na rolagem) */
.gpt::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.045) 0%,transparent 30%)}

/* Streaming: palavras que aparecem (o JS cria .pw) */
.motion .telas .q{opacity:0}
.motion .telas .pw,.motion .iphone .cit{opacity:0}
.motion .gpt-ia li{opacity:0}

.hero-nota{position:absolute;z-index:2;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(26px + env(safe-area-inset-bottom,0px));font-size:.74rem;color:var(--fog);letter-spacing:.04em}

@media (max-width:820px){
  .cena{perspective:1200px;perspective-origin:50% 70%}
  .telas{--w:min(150vw,640px);left:0;right:0;top:auto;bottom:0;width:auto;margin:0}
  .gpt,.notif,.hero-nota,.chao,.dica-rolar{display:none}
  .iphone{position:relative;right:auto;bottom:auto;width:62%;margin:0 auto;font-size:calc(var(--w) * .0195)}
}
.no-motion .cena,.no-motion .giro{position:relative;inset:auto}
.no-motion .telas{position:relative;left:auto;top:auto;margin:48px auto 0;transform:none}
.no-motion .notif{display:none}
@media (min-width:821px){.no-motion .hero-palco{height:auto;min-height:100vh;padding-block:120px 160px;flex-direction:column;align-items:stretch;gap:40px}.no-motion .telas{width:min(92vw,960px);--w:min(92vw,960px)}.no-motion .iphone{right:-3%;bottom:-16%}}