/* ============================================================
   Cesar Zanini — design system compartilhado
   ============================================================ */

:root{
  --bg:#09090a;
  --bg-2:#111113;
  --surface:#141417;
  --surface-2:#1b1b1f;
  --line: rgba(237,231,217,.10);
  --line-strong: rgba(237,231,217,.18);
  --text:#ede7d9;
  --text-dim: rgba(237,231,217,.64);
  --text-faint: rgba(237,231,217,.38);
  --accent:#de4a1e;
  --accent-2:#ff7a45;
  --accent-dim: rgba(222,74,30,.14);
  --green:#3fae6a;
  --radius: 16px;
  --radius-sm: 10px;
  --max: 1220px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:auto;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope', sans-serif;
  font-size:16px;
  line-height:1.5;
  max-width:100vw;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* overflow-x:hidden no body/html quebra position:sticky em qualquer
   navegador (o vídeo do hero pararia de "grudar" na tela ao rolar).
   Uso max-width:100vw acima pra evitar barra de rolagem horizontal
   sem tocar em overflow. */
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

h1,h2,h3{
  font-family:'Anton', sans-serif;
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.03;
  text-transform:uppercase;
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
  display:block;
}

/* ---------- Textured background (fixed, cheap) ---------- */
.bg-fx{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
}
.bg-fx .smoke{
  position:absolute; inset:-6%;
  background-image:url('../img/bg-smoke.png');
  background-size:cover;
  background-position:center 30%;
  opacity:.6;
  will-change:transform;
  animation: smokeDrift 48s ease-in-out infinite alternate;
}
@keyframes smokeDrift{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.09) translate(-1.5%, -2.5%); }
}
.bg-fx .glow{
  position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width:1400px; height:900px;
  background: radial-gradient(circle, rgba(222,74,30,.14), transparent 62%);
  filter: blur(10px);
}
.bg-fx .grain{
  position:absolute; inset:-100px; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){
  .bg-fx .smoke{ animation:none; }
}
main, header, footer{position:relative; z-index:1;}

/* ---------- Scroll Cinema (vídeo amarrado ao scroll) ---------- */
.sc-hero{ position:relative; height:460vh; padding:0; }
.sc-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
/* Máscara fixa só na borda de baixo (não mexe no resto da imagem, não
   depende do scroll): os últimos ~12% do vídeo e do overlay viram
   transparentes, revelando a mesma fumaça de fundo que já fica atrás
   da página inteira o tempo todo — em vez de cortar seco na divisão
   com a próxima seção. */
.sc-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .8s ease;
  background:var(--bg);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}
.sc-video.is-ready{opacity:.9;}
/* Em telas mais largas que o vídeo, object-fit:cover não sobra corte
   horizontal pra deslocar (a largura já bate certinho), então o assunto
   fica sempre centralizado atrás do texto. Dando um zoom e empurrando
   pra direita, sobra corte suficiente pra tirar o assunto de trás do
   texto sem deixar vazio na borda. Origem do zoom ancorada embaixo
   (não no centro) pra não empurrar a máscara do degradê de baixo pra
   fora da área visível — senão o zoom escala tudo, inclusive a faixa
   onde o vídeo já devia sumir suavemente, e o corte de baixo fica seco. */
.sc-video.is-shift-right{ transform: scale(1.3) translateX(12%); transform-origin: 50% 100%; }
.sc-loader{
  position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  background:var(--bg); transition:opacity .6s ease;
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-faint);
}
.sc-loader.is-gone{opacity:0; pointer-events:none;}
.sc-overlay{
  position:absolute; inset:0; z-index:2;
  background: linear-gradient(90deg, rgba(6,6,7,.94) 0%, rgba(6,6,7,.82) 38%, rgba(6,6,7,.35) 62%, rgba(6,6,7,.12) 100%);
  display:flex; align-items:center;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}
.sc-content h1, .sc-content p{ text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.sc-content{position:relative; z-index:3; width:100%;}

/* ---------- NAV ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:72px;
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
header.nav.scrolled{
  background:rgba(9,9,10,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav-inner{
  width:100%; max-width:var(--max); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:'Anton', sans-serif;
  font-size:19px;
  letter-spacing:.02em;
}
.logo span{color:var(--accent);}
nav.links{display:flex; align-items:center; gap:28px;}
nav.links a{
  font-size:14px; font-weight:600; color:var(--text-dim);
  transition:color .2s ease;
}
nav.links a:hover, nav.links a.active{color:var(--text);}

.nav-burger{ display:none; }
@media (max-width:900px){
  .nav-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0;
    flex-shrink:0; order:3; margin-left:12px;
  }
  .nav-burger span{
    display:block; width:100%; height:2px; background:var(--text); border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  header.nav.is-open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  header.nav.is-open .nav-burger span:nth-child(2){ opacity:0; }
  header.nav.is-open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  header.nav.is-open{ background:var(--bg); border-bottom-color:var(--line); }

  /* header.nav.scrolled usa backdrop-filter, que vira "containing
     block" pra filhos position:fixed — bottom:0 acabaria resolvendo
     contra a altura de 72px do header, não da tela. Por isso a altura
     é explícita em vh, não bottom:0. */
  nav.links{
    display:none;
    position:fixed; top:72px; left:0; right:0; height:calc(100vh - 72px);
    background:var(--bg); z-index:99;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 24px 24px; overflow-y:auto;
  }
  header.nav.is-open nav.links{ display:flex; }
  nav.links a{
    width:100%; padding:18px 0; font-size:18px; color:var(--text);
    border-bottom:1px solid var(--line);
  }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:#0b0b0c;
  font-weight:700; font-size:14px;
  padding:12px 22px; border-radius:999px;
  border:none;
  transition:transform .25s cubic-bezier(.16,1,.3,1), background .25s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); background:var(--accent-2);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--line-strong);
}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--text-faint);}
.btn-block{width:100%;}

/* A Hotmart injeta o próprio CSS no botão de checkout (gradiente verde
   padrão deles), que bate por cima do visual do site. Reforça aqui pra
   manter o botão igual aos outros do site, não o padrão da Hotmart. */
a.hotmart-fb.hotmart__button-checkout.btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:var(--accent) !important; background-image:none !important;
  color:#0b0b0c !important;
  font-family:'Manrope', sans-serif !important; font-weight:700 !important; font-size:14px !important;
  padding:12px 22px !important; border-radius:999px !important;
  border:none !important; box-shadow:none !important; text-shadow:none !important;
  text-transform:none !important; text-decoration:none !important; letter-spacing:normal !important;
  height:auto !important; line-height:normal !important;
}
a.hotmart-fb.hotmart__button-checkout.btn:hover{ background:var(--accent-2) !important; }
a.hotmart-fb.hotmart__button-checkout.btn.btn-block{ width:100% !important; display:flex !important; padding:16px 24px !important; font-size:16px !important; }

/* ---------- Diagnóstico: quiz pergunta a pergunta ---------- */
.quiz-shell{
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:20px; padding:40px 32px; position:relative; overflow:hidden;
}
.quiz-progress-wrap{ margin-bottom:28px; }
.quiz-progress{ height:4px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin-bottom:10px; }
.quiz-progress-fill{ height:100%; width:0%; background:var(--accent); border-radius:999px; transition:width .45s cubic-bezier(.16,1,.3,1); }
.quiz-step-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }

.quiz-step{ display:none; }
.quiz-step.active{ display:block; animation:quizStepIn .4s ease; }
@keyframes quizStepIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

.quiz-question{ font-size:clamp(22px,3.4vw,30px); margin-bottom:18px; line-height:1.1; }
.quiz-btn-next{ margin-top:8px; }

.quiz-options{ display:flex; flex-direction:column; gap:12px; }
.quiz-option{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  padding:16px 18px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--text); font-family:'Manrope', sans-serif; font-size:15px; font-weight:600;
  cursor:pointer; transition:border-color .2s ease, transform .15s ease, background .2s ease;
}
.quiz-option-ico{ font-size:20px; flex-shrink:0; }
.quiz-option:hover{ border-color:var(--accent); transform:translateX(4px); }
.quiz-option.selected{ background:var(--accent); border-color:var(--accent); color:#0b0b0c; animation:quizSelectPop .3s ease; }
@keyframes quizSelectPop{ 0%{transform:scale(1);} 45%{transform:scale(1.03);} 100%{transform:scale(1);} }

@keyframes quizShake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
.quiz-shake{ animation:quizShake .35s ease; border-color:var(--accent) !important; }

#quizLoadingStep{ text-align:center; padding:24px 0; }
.quiz-loading-ring{
  width:64px; height:64px; margin:0 auto 24px; border-radius:50%;
  background:conic-gradient(var(--accent) 0deg, transparent 300deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation:quizSpin 1s linear infinite;
}
@keyframes quizSpin{ to{transform:rotate(360deg);} }
.quiz-loading-text{ font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:.04em; color:var(--text-dim); margin-bottom:24px; min-height:18px; }
.quiz-loading-checklist{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; }
.quiz-check-item{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-faint); padding:6px 0; transition:color .3s ease; }
.quiz-check-dot{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); flex-shrink:0; transition:background .3s ease, box-shadow .3s ease; }
.quiz-check-item.done{ color:var(--text); }
.quiz-check-item.done .quiz-check-dot{ background:var(--accent); box-shadow:0 0 8px var(--accent); }

@keyframes quizResultPulse{
  0%{ box-shadow:0 0 0 0 var(--accent-dim); }
  70%{ box-shadow:0 0 0 40px rgba(0,0,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,0,0,0); }
}
#diagResult.active{ animation:quizStepIn .5s ease, quizResultPulse 1.2s ease; }

@media (prefers-reduced-motion: reduce){
  .quiz-step.active, #diagResult.active, .quiz-loading-ring, .quiz-option.selected{ animation:none !important; }
}
@media (max-width:520px){
  .quiz-shell{ padding:28px 20px; }
}

/* ---------- Hero rotator (fundo fixo alternando entre vídeos, no
   lugar da fumaça .bg-fx nas páginas que usam) ---------- */
.hero-bg-video{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-bg-layer{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-bg-layer.is-active{ opacity:.5; }
.hero-bg-overlay{
  position:absolute; inset:0;
  background:rgba(6,6,7,.72);
}
@media (prefers-reduced-motion: reduce){
  .hero-bg-layer{ transition:none; }
}

/* ---------- HERO (shared skeleton, pages customize inner) ---------- */
.hero{
  min-height:92dvh;
  display:flex; align-items:center;
  padding-top:96px;
  padding-bottom:56px;
  position:relative;
  overflow:hidden;
}
.hero-canvas{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  opacity:.85;
}

/* ---------- SECTION BASE ---------- */
section{padding:104px 0; position:relative;}
.section-tight{padding:80px 0;}
h2{font-size:clamp(28px, 3.8vw, 46px); margin-bottom:18px;}
.section-head{max-width:680px; margin-bottom:56px;}
.section-head p{font-size:16px; color:var(--text-dim); max-width:56ch;}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Stagger grid (entrada em sequência) ---------- */
/* Fallback (JS liga a classe .in via IntersectionObserver) */
.stagger-grid > *{
  opacity:0;
  transform:translateY(48px) scale(.94);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.stagger-grid.in > *{opacity:1; transform:translateY(0) scale(1);}
.stagger-grid.in > *:nth-child(1){transition-delay:0s;}
.stagger-grid.in > *:nth-child(2){transition-delay:.12s;}
.stagger-grid.in > *:nth-child(3){transition-delay:.24s;}
.stagger-grid.in > *:nth-child(4){transition-delay:.36s;}
.stagger-grid.in > *:nth-child(5){transition-delay:.48s;}
.stagger-grid.in > *:nth-child(6){transition-delay:.6s;}
@media (prefers-reduced-motion: reduce){
  .stagger-grid > *{opacity:1; transform:none; transition:none;}
}

/* ---------- Pin Zoom (seção presa na tela, itens dão zoom no scroll) ---------- */
.pin-zoom{ position:relative; height:280vh; }
.pin-zoom-sticky{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center; overflow:hidden;
}
.pin-zoom-sticky .problema-grid img{ max-height:38vh; object-fit:cover; }

/* ---------- Sticky Stack (cards de serviço empilhando no scroll) ---------- */
.stack-wrap{ position:relative; }
.stack-card{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  will-change:transform, opacity;
}
.stack-card img{
  width:100%; max-width:1000px; max-height:82vh;
  object-fit:contain;
  border-radius:var(--radius); border:1px solid var(--line-strong);
  box-shadow:0 40px 100px rgba(0,0,0,.55);
}
@media (prefers-reduced-motion: reduce){
  .stack-card{ position:relative; height:auto; padding:40px 24px; }
}
@media (max-width:900px){
  .stack-card{ padding:16px; }
  /* max-height removido: a imagem tinha height fixo no HTML e sem
     height:auto esticava (era isso que parecia "moldura gigante",
     não o efeito de pilha em si, que continua ativo no celular). */
  .stack-card img{ max-height:none; width:100%; height:auto; }
}
.scroll-zoom{
  transform:scale(.75);
  opacity:.35;
  will-change:transform, opacity;
}
@media (prefers-reduced-motion: reduce){
  .pin-zoom{height:auto;}
  .pin-zoom-sticky{position:relative; top:auto; min-height:0;}
  .scroll-zoom{transform:none !important; opacity:1 !important;}
}

/* ---------- Service cards grid (home) ---------- */
.services-grid{
  display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:auto auto; gap:20px;
}
.svc-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:280px;
  position:relative; overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.svc-card:hover{border-color:var(--line-strong); transform:translateY(-3px);}
.svc-card.is-lg{grid-row:span 2;}
.svc-tag{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:14px;
}
.svc-card h3{
  font-size:26px; text-transform:none; font-family:'Anton', sans-serif;
  margin-bottom:12px; text-transform:uppercase;
}
.svc-card p{color:var(--text-dim); font-size:15px; max-width:44ch; margin-bottom:20px;}
.svc-link{
  font-size:14px; font-weight:700; color:var(--text);
  display:inline-flex; align-items:center; gap:8px;
}
.svc-link .arrow{color:var(--accent); transition:transform .2s ease;}
.svc-card:hover .svc-link .arrow{transform:translateX(4px);}
.svc-glow{
  position:absolute; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, var(--accent-dim), transparent 70%);
  right:-80px; bottom:-80px; pointer-events:none;
}

/* ---------- Proof / screenshots ---------- */
.proof-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:20px;
}
.proof-shot{
  display:flex; flex-direction:column;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--accent);
  background:var(--surface);
}
.proof-shot img{width:100%; height:200px; object-fit:cover; display:block; flex-shrink:0;}
.proof-shot .cap{
  padding:14px 18px;
  font-family:'Manrope', sans-serif; font-size:13px; line-height:1.45; color:var(--text-dim);
  border-top:1px solid var(--line);
}
.proof-shot.is-tall{grid-row:span 2;}
.proof-shot.is-tall img{height:100%; flex:1;}

.phone-frame{
  max-width:280px; margin:0 auto; position:relative;
  padding:16px 14px; background:#0c0c0d;
  border-radius:42px; border:1px solid rgba(237,231,217,.14);
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 0 0 6px rgba(0,0,0,.6);
}
.phone-frame-notch{
  position:absolute; top:28px; left:50%; transform:translateX(-50%);
  width:64px; height:7px; border-radius:999px; background:#000; z-index:2;
}
.phone-frame video{
  width:100%; height:auto; display:block;
  border-radius:26px; margin-top:2px;
}

/* ---------- Bio strip (compact, replaces big "sobre" block) ---------- */
.bio-strip{
  display:flex; align-items:center; gap:24px;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 28px; background:var(--surface);
}
.bio-strip img{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  border:1px solid var(--line-strong); flex-shrink:0;
}
.bio-strip p{color:var(--text-dim); font-size:15px; max-width:64ch;}
.bio-strip strong{color:var(--text);}

/* ---------- Generic content blocks (subpages) ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.split.reverse{grid-template-columns:1fr 1fr;}
.split img{border-radius:var(--radius); border:1px solid var(--line);}
.prose p{color:var(--text-dim); font-size:16px; margin-bottom:16px; max-width:60ch;}
.prose strong{color:var(--text);}

.check-list{display:grid; gap:14px; margin:24px 0;}
.check-list li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:15px; color:var(--text-dim);
}
.check-list li .ico{
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; margin-top:2px;
}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:12px;
  background:var(--surface-2); border:1px solid var(--line);
  padding:8px 14px; border-radius:999px; color:var(--text-dim);
  margin-bottom:20px;
}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--green);}

.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:32px 0;}
.stat{border-top:1px solid var(--line); padding-top:14px;}
.stat b{
  display:block; font-family:'Anton', sans-serif; font-size:34px;
  color:var(--text);
}
.stat span{font-size:13px; color:var(--text-faint);}

/* ---------- Steps ---------- */
.steps-list{display:grid; gap:0;}
.step-item{
  display:grid; grid-template-columns:110px 1fr; gap:28px;
  padding:28px 0; border-top:1px solid var(--line);
  align-items:start;
}
.step-item:last-child{border-bottom:1px solid var(--line);}
.step-verb{
  font-family:'Anton', sans-serif;
  font-size:14px; color:var(--accent);
  letter-spacing:.04em;
  padding-top:4px;
}
.step-item h3{
  font-size:20px; text-transform:none; margin-bottom:6px;
  font-family:'Manrope', sans-serif; font-weight:800;
}
.step-item p{color:var(--text-dim); font-size:15px; max-width:58ch;}

/* ---------- FAQ ---------- */
.faq-list{max-width:780px;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; background:none; border:none; color:var(--text);
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 0; font-size:17px; font-weight:700; text-align:left;
}
.faq-q .plus{
  font-family:'JetBrains Mono', monospace; color:var(--accent);
  font-size:20px; flex-shrink:0; margin-left:20px;
  transition:transform .3s ease;
}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{color:var(--text-dim); font-size:15.5px; padding-bottom:24px; max-width:64ch;}

/* ---------- CTA band ---------- */
.cta-band{
  text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:28px;
  padding:64px;
  display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;
}
.cta-band h2{margin-bottom:14px;}
.cta-band p{color:var(--text-dim); font-size:17px; max-width:44ch;}

/* ---------- Video band (quadro com texto de um lado, vídeo do outro) ---------- */
.video-band{
  background:var(--surface); border:1px solid var(--line); border-radius:28px;
  padding:56px 64px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
.video-band .eyebrow{margin-bottom:14px;}
.video-band h2{margin-bottom:14px;}
.video-band p{color:var(--text-dim); font-size:16px; max-width:44ch;}
@media (max-width:760px){
  .video-band{grid-template-columns:1fr; padding:40px 26px; text-align:center;}
  .video-band p{margin:0 auto;}
}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:52px 0 36px;}
.footer-inner{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px;}
.footer-tag{color:var(--text-faint); font-size:14px; max-width:36ch; margin-top:10px;}
.footer-nav{display:flex; gap:22px; flex-wrap:wrap;}
.footer-nav a{font-size:14px; color:var(--text-dim); font-weight:600;}
.footer-nav a:hover{color:var(--text);}
.footer-copy{font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-faint); margin-top:28px;}

/* ============================================================
   LEAD MODAL
   ============================================================ */
.lead-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(6,6,7,.72);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.lead-overlay.open{opacity:1; pointer-events:auto;}
.lead-modal{
  width:100%; max-width:440px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:36px;
  transform:translateY(16px) scale(.98);
  transition:transform .25s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.lead-overlay.open .lead-modal{transform:translateY(0) scale(1);}
.lead-modal h3{
  font-size:24px; text-transform:none; font-family:'Anton', sans-serif;
  text-transform:uppercase; margin-bottom:8px;
}
.lead-modal .sub{color:var(--text-dim); font-size:14px; margin-bottom:24px;}
.lead-close{
  position:absolute; top:18px; right:18px;
  width:32px; height:32px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--text-dim); font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.field{margin-bottom:16px;}
.field label{
  display:block; font-size:12px; font-weight:700; color:var(--text-dim);
  margin-bottom:7px; text-transform:uppercase; letter-spacing:.04em;
}
.field input, .field select{
  width:100%; background:var(--bg-2); border:1px solid var(--line-strong);
  border-radius:10px; padding:13px 14px; color:var(--text); font-size:15px;
  font-family:inherit;
}
.field input::placeholder{color:var(--text-faint);}
.field input:focus, .field select:focus{outline:none; border-color:var(--accent);}
.lead-note{font-size:12px; color:var(--text-faint); margin-top:14px; text-align:center;}
.lead-success{display:none; text-align:center; padding:16px 0;}
.lead-success.show{display:block;}
.lead-success .ico-ok{
  width:52px; height:52px; border-radius:50%; background:var(--accent-dim);
  color:var(--accent); font-size:24px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
.lead-success h3{margin-bottom:10px;}
.lead-success p{color:var(--text-dim); font-size:14px;}

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .nav-inner .btn{padding:10px 16px; font-size:13px;}
  .services-grid{grid-template-columns:1fr !important;}
  .services-grid .svc-card{grid-column:span 1 !important;}
  .problema-grid{grid-template-columns:1fr !important;}
  .svc-card.is-lg{grid-row:auto;}
  /* Pin zoom (cards com efeito de scroll-zoom): em coluna única os 4
     itens empilhados ficam mais altos que a tela presa (100vh) e a
     máscara overflow:hidden corta o primeiro e o último. Em vez de
     desligar o efeito, encolhe a altura de cada imagem pra caber os
     4 dentro da tela presa sem cortar nada. */
  .pin-zoom-sticky .problema-grid img{ max-height:18vh; }
  .proof-grid{grid-template-columns:1fr;}
  .proof-shot.is-tall{grid-row:auto;}
  .split{grid-template-columns:1fr; gap:28px;}
  .bio-strip{flex-direction:column; align-items:flex-start; text-align:left;}
  .cta-band{grid-template-columns:1fr; padding:40px 26px;}
  .stat-row{grid-template-columns:1fr 1fr;}
  .step-item{grid-template-columns:1fr; gap:8px;}
  section{padding:72px 0;}
  .hero{min-height:auto; padding-top:110px;}
  /* Hero em vídeo centraliza o texto na tela toda (100vh), e em tela
     curta de celular o topo do texto pode ficar colado no menu fixo. */
  .sc-content{padding-top:80px;}
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}