/* Primeira tela: promessa + preço + pilha 3D (Código → Design → No ar) */

.hero-sec { background: radial-gradient(90% 70% at 72% 38%, #1A2840 0%, var(--ink) 68%); }
.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 72px; }
.hero-texto { min-width: 0; }

/* Etapas: as quatro camadas, em linha acima do título */
.steps { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 0.78rem/1 var(--mono); color: #fff; margin-bottom: 26px; }
.steps span { display: inline-flex; align-items: center; gap: 8px; }
.steps span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }

/* min(): em 320px com texto ampliado o título não estoura a largura */
.hero h1 { font-weight: 800; font-size: min(clamp(2.5rem, 1.2rem + 4vw, 4.375rem), 12.5vw); line-height: 1.03; letter-spacing: -0.035em; color: #fff; text-wrap: balance; overflow-wrap: break-word; }
.hero h1 em { white-space: nowrap; font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: -0.01em; color: var(--sky); }
.lede { margin-top: 22px; font-size: 1.125rem; line-height: 1.6; max-width: 33em; color: var(--text-soft); text-wrap: pretty; }
.ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

.offer { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: 500 0.8125rem/1.4 var(--mono); color: var(--text-faint); }
.offer strong { font: 800 1.75rem/1 var(--sans); color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.offer .sep { width: 1px; height: 30px; background: var(--line); }

/* ---------- Palco 3D: a pilha montada, parada ----------
   O movimento das camadas acontece na seção "Como funciona", com a rolagem.
   Aqui ela só aparece junto com o texto. */
.stage { position: relative; height: 560px; perspective: 1900px; animation: palco-entra 600ms ease 120ms both; }
@keyframes palco-entra { from { opacity: 0; } }
.stack { position: absolute; left: 35%; top: 58%; width: 420px; height: 316px; margin: -158px 0 0 -210px; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-36deg) scale(0.88); }
.layer { position: absolute; inset: 0; border-radius: 14px; }

/* Chave à direita da pilha: liga os cantos das 4 camadas ao "Apenas 4 etapas".
   Medida dos cantos: 240px à direita do centro da pilha, de 144px a 327px. */
.chave { position: absolute; left: calc(35% + 250px); top: 138px; width: 20px; height: 196px; overflow: visible; fill: none; stroke: var(--mint); stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
.chave path { vector-effect: non-scaling-stroke; }
.stage-nota { position: absolute; left: calc(35% + 280px); top: 236px; transform: translateY(-50%); display: grid; gap: 4px; font: 500 12px/1 var(--mono); color: var(--text-soft); white-space: nowrap; }
.stage-nota b { font: 800 1.25rem/1 var(--sans); letter-spacing: -0.02em; color: #fff; }
@media (max-width: 1179px) {
  .chave, .stage-nota { display: none; }
}
.layer.l1 { transform: translateZ(70px); }
.layer.l2 { transform: translateZ(140px); }
.layer.l3 { transform: translateZ(210px); }

/* ---------- Conteúdo das camadas (usado aqui e em "Como funciona") ----------
   --p é o progresso da camada (0 a 1). Fora da rolagem vale 1: tudo montado.
   .revela aparece depois da placa, a partir do limiar --t. */
.layer, .camada { --p: 1; --e: 1; }
.revela { opacity: clamp(0, calc((var(--p) - var(--t, 0)) * 4), 1); }

/* Camada 0: estudo do negócio */
.l0 { background: #0F1828; box-shadow: 0 0 0 1px rgba(127, 216, 176, 0.28), 0 30px 60px -20px rgba(0, 0, 0, 0.7); overflow: hidden; }
.l0-corpo { display: grid; grid-template-columns: 128px 1fr; gap: 18px; padding: 16px; }
.perfil { font: 500 10.5px/1.3 var(--mono); color: rgba(233, 237, 243, 0.72); }
.perfil .av { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F3C58C, #8A4A2A); margin-bottom: 8px; }
.perfil b { display: block; color: #fff; font-weight: 600; }
.posts { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.posts i { aspect-ratio: 1; border-radius: 2px; background: #1E2A3E; }
.posts i:nth-child(3n+1) { background: #3A2C22; }
.notas { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; font: 400 11.5px/1.35 var(--mono); color: rgba(233, 237, 243, 0.72); }
.notas li { display: grid; grid-template-columns: 14px 1fr; gap: 9px; align-items: start; }
.notas b { color: #fff; font-weight: 500; }
.chk { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(127, 216, 176, 0.5); position: relative; }
.chk::after { content: ""; position: absolute; inset: 3px; border-radius: 2px; background: var(--mint); opacity: clamp(0, calc((var(--p) - var(--t, 0) - 0.08) * 4), 1); }

/* Camada 1: código */
.l1 { background: #111A2A; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 60px -20px rgba(0, 0, 0, 0.7); overflow: hidden; }
.code-bar { display: flex; align-items: center; gap: 14px; height: 32px; padding: 0 14px; font: 500 11px/1 var(--mono); color: rgba(233, 237, 243, 0.72); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.code-bar b { color: var(--text); font-weight: 500; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--mint); }
.l1 pre { padding: 14px 0; font: 400 12.5px/1.8 var(--mono); color: #C9D3E3; counter-reset: ln; white-space: pre; }
.l1 pre .l { display: block; --t: calc(0.25 + var(--n) * 0.07); }
.l1 pre .l::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 40px; padding-right: 14px; text-align: right; color: rgba(233, 237, 243, 0.55); }
.l1 .t { color: #8FB4FF; }
.l1 .a { color: var(--mint); }
.l1 .s { color: #F2C879; }
.l1 .c { color: rgba(233, 237, 243, 0.6); }

/* Camada 2: identidade visual */
.l2 { background: rgba(38, 54, 77, 0.6); box-shadow: inset 0 0 0 1px rgba(169, 196, 255, 0.25); }
.l2 .ty { position: absolute; left: 22px; top: 18px; font: italic 300 64px/1 var(--serif); color: rgba(255, 255, 255, 0.9); }
.l2 .ty small { display: block; margin-top: 6px; font: normal 500 11px/1 var(--mono); color: rgba(233, 237, 243, 0.72); }
.l2 .sw { position: absolute; bottom: 22px; width: 44px; height: 44px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.l2 .grid { position: absolute; right: 22px; top: 22px; width: 150px; height: 120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.l2 .grid i { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(169, 196, 255, 0.3); }

/* Camada 3: o site do cliente, no ar */
.l3 { overflow: hidden; box-shadow: 0 50px 80px -24px rgba(0, 0, 0, 0.75); }
.browser { height: 100%; background: #fff; color: #2A211B; border-radius: 14px; overflow: hidden; }
.bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: #F1EFEC; border-bottom: 1px solid #E4E0DA; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #D9D4CD; }
.url { margin-left: 8px; flex: 1; height: 20px; border-radius: 5px; background: #fff; font: 500 11px/20px var(--sans); color: #6B625A; padding-left: 10px; box-shadow: inset 0 0 0 1px #E4E0DA; }
.url b { color: #2A211B; font-weight: 600; }
.live { display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px/1 var(--mono); color: #0B5A37; background: #CFF3E1; padding: 5px 8px; border-radius: 5px; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-nav { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; font-size: 11px; }
.s-logo { font: italic 300 19px/1 var(--serif); }
.s-hero { margin: 0 12px; border-radius: 9px; height: 150px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(120% 120% at 80% 10%, #F3C58C 0%, #D98A4E 38%, #8A4A2A 100%); color: #fff; }
.s-titulo { font: italic 300 26px/1 var(--serif); }
.s-hero span { margin-top: 10px; align-self: flex-start; font-size: 11px; font-weight: 700; background: #fff; color: #8A4A2A; padding: 7px 11px; border-radius: 999px; }
.s-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 12px; }
.s-grid div { height: 52px; border-radius: 7px; background: #F4ECE4; }
.s-grid div:nth-child(2) { background: #EFE3D6; }

/* Entrada do texto: o título lidera, o resto vem atrás com passos menores */
.rise { animation: rise 700ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
.steps.rise { --d: 0ms; --y: 0px; }
.hero h1.rise { --d: 40ms; --y: 14px; }
.lede.rise { --d: 120ms; --y: 10px; }
.ctas.rise { --d: 190ms; --y: 8px; }
.offer.rise { --d: 250ms; --y: 6px; }
@keyframes rise { from { opacity: 0; transform: translateY(var(--y, 12px)); } }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: fade 250ms ease both; animation-delay: 0ms; }
  @keyframes fade { from { opacity: 0; } }
}

/* Celular: a pilha desce para baixo do texto, menor. O topo projetado da
   pilha sobe além do centro, por isso o centro fica abaixo do meio do palco. */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 8px; padding-top: 16px; padding-bottom: 32px; }
  .stage { height: 456px; }
  .stack { left: 50%; top: 63%; transform: rotateX(56deg) rotateZ(-36deg) scale(0.72); }
}
@media (max-width: 420px) {
  .stage { height: 420px; }
  .stack { top: 65%; transform: rotateX(56deg) rotateZ(-36deg) scale(0.6); }
}
@media (max-width: 359px) {
  .offer .sep { display: none; }
  .stage { height: 400px; }
  .stack { top: 66%; transform: rotateX(56deg) rotateZ(-36deg) scale(0.54); }
}