/* Twisk: home (protótipo 2, 2026-10-28). Direção: escuro + glassmorphism + bordas neon em gradiente.
   Referências estudadas: designmvstudio.com.br, wuzi.com.br, sinnapse.com, agenciaraizes.com.br
   Tokens da marca: clientes/twisk/marca/twisk/tokens.css */
:root {
  --cor-marinho: #190F3D;
  --cor-preto: #0C0A16;
  --cor-fundo: #0E0A1F;
  --cor-berinjela: #432060;
  --cor-roxo: #7A16A3;
  --cor-branco: #F7F7F7;
  --cor-acao: #25D366;
  --cor-lilas: #B98AE0;
  --cor-lilas-claro: #C9A3EE;
  --neon-pink: #FF4FD8;
  --neon-lilas: #C86BFF;

  --grad-neon: linear-gradient(120deg, var(--neon-pink), var(--neon-lilas) 45%, rgba(201, 163, 238, .35));
  --grad-roxo: linear-gradient(135deg, #2A1258 0%, #5B1F8F 55%, #9B5BD6 100%);
  --grad-texto: linear-gradient(90deg, var(--cor-lilas-claro), var(--neon-pink));

  --vidro-fundo: rgba(255, 255, 255, .045);
  --vidro-borda: rgba(255, 255, 255, .09);

  --fonte-titulo: "Archivo", "Open Sans", sans-serif;
  --titulo-largura: 108%;
  --fonte-destaque: "Instrument Serif", Georgia, serif;
  --fonte-texto: "Open Sans", sans-serif;

  --raio: 24px;
  --largura: 1200px;
  --respiro: clamp(80px, 11vw, 140px);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-branco);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
main, section, footer { position: relative; }

.container { width: min(var(--largura), 100% - 40px); margin-inline: auto; position: relative; z-index: 1; }
.centro { text-align: center; }

/* Fundo: grade sutil (estilo Wuzi/Designmv) */
.fundo-grade {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}

/* Orbes de luz (gradiente roxo escuro → claro) */
.orbe { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.orbe--1 { width: 620px; height: 620px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(155, 91, 214, .55), transparent 65%); }
.orbe--2 { width: 480px; height: 480px; right: 240px; top: 260px; background: radial-gradient(circle, rgba(255, 79, 216, .28), transparent 65%); }
.orbe--3 { width: 700px; height: 420px; left: 50%; top: 10%; translate: -50% 0; background: radial-gradient(circle, rgba(91, 31, 143, .55), transparent 70%); }

/* Vidro (glassmorphism) */
.vidro {
  background: var(--vidro-fundo);
  border: 1px solid var(--vidro-borda);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Borda neon em gradiente (máscara) */
.borda-neon { position: relative; border-color: transparent; }
.borda-neon::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--grad-neon);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Tipografia */
.h1, .h2, .h3, .prova__numeros strong, .pilar__num, .processo__num, .servico__num {
  font-family: var(--fonte-titulo);
  font-stretch: var(--titulo-largura);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.h1 { font-size: clamp(40px, 5.4vw, 76px); font-weight: 900; }
.h2 { font-size: clamp(32px, 4.2vw, 58px); margin-bottom: 18px; }
.h3 { font-size: clamp(20px, 1.9vw, 24px); letter-spacing: -0.02em; margin-bottom: 10px; }
.serif {
  font-family: var(--fonte-destaque); font-style: italic; font-weight: 400;
  letter-spacing: 0; font-stretch: normal;
  background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em; font-size: 1.1em; line-height: .95;
}
.gradiente { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.texto { font-size: 18px; max-width: 620px; color: rgba(247, 247, 247, .72); }
.etiqueta {
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cor-lilas); margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.etiqueta::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--grad-neon); }
.cabeca { margin-bottom: 48px; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: 999px;
  font-family: var(--fonte-texto); font-weight: 600; font-size: 16px; white-space: nowrap;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
/* Botão de ação (verde): gradiente, brilho que pulsa, reflexo que passa e seta que anda */
.btn--acao {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #5CF29A 0%, var(--cor-acao) 45%, #13B556 100%);
  color: var(--cor-marinho);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 -3px 8px rgba(0, 0, 0, .15) inset, 0 10px 30px rgba(37, 211, 102, .35);
  animation: pulsar-acao 2.8s ease-in-out infinite;
}
.btn--acao::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  translate: -120% 0; animation: reflexo 3.6s ease-in-out infinite;
}
.btn--acao span { display: inline-block; transition: transform .25s ease; }
.btn--acao:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 16px 44px rgba(37, 211, 102, .55), 0 0 60px rgba(37, 211, 102, .35); }
.btn--acao:hover span { transform: translateX(5px); }
@keyframes pulsar-acao { 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 -3px 8px rgba(0, 0, 0, .15) inset, 0 10px 40px rgba(37, 211, 102, .55), 0 0 0 6px rgba(37, 211, 102, .12); } }
@keyframes reflexo { 0%, 55% { translate: -120% 0; } 85%, 100% { translate: 120% 0; } }
.btn--vidro {
  color: var(--cor-branco); background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(12px);
}
.btn--vidro:hover { background: rgba(255, 255, 255, .12); border-color: var(--cor-lilas); }
.btn--pequeno { min-height: 44px; padding: 0 20px; font-size: 14px; }
.botoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.botoes--centro { justify-content: center; }
.link { color: var(--cor-lilas-claro); font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; transition: gap .2s ease; }
.link:hover { gap: 14px; }

/* Nav flutuante em vidro */
.nav { position: sticky; top: 14px; z-index: 20; padding-inline: 20px; }
.nav__inner {
  width: min(var(--largura), 100%); margin-inline: auto; display: flex; align-items: center; gap: 32px;
  min-height: 66px; padding: 0 12px 0 24px; border-radius: 999px;
  background: rgba(14, 10, 31, .55);
}
.nav__logo img { width: 150px; }
.nav__links { display: flex; gap: 30px; margin-left: auto; }
.nav__links a { text-decoration: none; font-size: 15px; color: rgba(247, 247, 247, .75); transition: color .2s; }
.nav__links a:hover { color: var(--cor-branco); }

/* 1. Hero */
.hero { padding-top: clamp(60px, 9vw, 120px); padding-bottom: 60px; }
.hero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; min-height: 600px; }
.selo { display: inline-flex; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--cor-lilas-claro); margin-bottom: 28px; }
.hero__apoio { font-size: 20px; color: rgba(247, 247, 247, .72); max-width: 540px; margin-top: 28px; }
.hero__visual { position: relative; height: 560px; }
.hero__anel {
  position: absolute; inset: 40px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--neon-pink), var(--neon-lilas), transparent 70%);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 66%, transparent 67%);
  mask: radial-gradient(circle, transparent 64%, #000 65%, #000 66%, transparent 67%);
  animation: girar 14s linear infinite; opacity: .9;
}
.hero__disco {
  position: absolute; left: 50%; top: 50%; width: 270px; height: 270px; translate: -50% -50%;
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 60%);
  box-shadow: inset 0 0 60px rgba(200, 107, 255, .25), 0 30px 80px rgba(0, 0, 0, .45);
}
.hero__raio { width: 130px; filter: drop-shadow(0 0 16px rgba(200, 107, 255, .95)) drop-shadow(0 0 48px rgba(255, 79, 216, .6)); }
/* Tags de impacto */
.chip { position: absolute; z-index: 4; display: grid; padding: 14px 20px; border-radius: 18px; font-size: 13px; line-height: 1.3; color: rgba(247, 247, 247, .8); animation: flutuar 7s ease-in-out infinite; }
.chip strong { font-family: var(--fonte-titulo); font-stretch: var(--titulo-largura); font-size: 38px; line-height: 1; color: var(--cor-branco); letter-spacing: -0.03em; margin-bottom: 4px; }
.chip strong.serif { font-family: var(--fonte-destaque); font-stretch: normal; font-size: 36px; letter-spacing: 0; }
.chip--1 { left: -10px; top: 60px; }
.chip--2 { right: -20px; top: 220px; animation-delay: -2.5s; }
.chip--3 { left: 20px; bottom: 40px; animation-delay: -5s; }
@keyframes girar { to { rotate: 360deg; } }
@keyframes flutuar { 50% { translate: 0 -12px; } }

/* Pílulas em loop */
.pilulas { overflow: hidden; padding-block: 8px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pilulas__trilho { display: flex; gap: 14px; width: max-content; animation: deslizar 36s linear infinite; }
.pilula { padding: 12px 22px; border-radius: 999px; font-size: 15px; color: rgba(247, 247, 247, .78); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.pilula::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-neon); box-shadow: 0 0 10px var(--neon-pink); }
@keyframes deslizar { to { transform: translateX(calc(-50% - 7px)); } }

/* 2. Prova (linha com divisores, estilo Raízes) */
.prova { padding-block: var(--respiro) calc(var(--respiro) * .7); }
.prova__numeros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.prova__numeros li { padding: 8px 28px; border-left: 1px solid rgba(255, 255, 255, .1); }
.prova__numeros li:first-child { border-left: 0; padding-left: 0; }
.prova__numeros strong { display: block; font-size: clamp(38px, 4.4vw, 60px); margin-bottom: 8px; }
.prova__numeros li:last-child strong { font-size: clamp(26px, 2.6vw, 36px); padding-block: 10px; }
.prova__numeros li > span { color: rgba(247, 247, 247, .6); font-size: 15px; }
.prova__frase { margin-top: 56px; font-family: var(--fonte-titulo); font-stretch: var(--titulo-largura); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(24px, 3vw, 40px); line-height: 1.15; max-width: 940px; }

/* 3. Quem somos */
.quem { padding-block: var(--respiro); }
.quem__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: center; }
.quem__foto { border-radius: var(--raio); overflow: hidden; max-width: 440px; box-shadow: 0 40px 100px rgba(155, 91, 214, .25); }
.assinatura { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; padding: 14px 20px; border-radius: 999px; font-size: 15px; color: rgba(247, 247, 247, .75); }
.assinatura strong { color: var(--cor-branco); }

/* 4. Serviços */
.servicos { padding-block: var(--respiro); }
.servicos__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.servico { padding: 36px; border-radius: var(--raio); transition: transform .3s ease, background .3s ease; }
.servico:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .07); }
.servico--grande { padding: 44px; background: linear-gradient(150deg, rgba(91, 31, 143, .35), rgba(255, 255, 255, .03)); }
.servico__num { display: block; font-size: 15px; color: var(--cor-lilas); margin-bottom: 28px; letter-spacing: .05em; }
.servico p { color: rgba(247, 247, 247, .7); }
.servico__preco { margin-top: 20px; font-size: 15px; }
.servico__preco strong { color: var(--cor-branco); }
.servico .link { margin-top: 22px; }
.combo { margin-top: 20px; padding: 24px 32px; border-radius: var(--raio); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; font-size: 18px; background: linear-gradient(90deg, rgba(255, 79, 216, .1), rgba(155, 91, 214, .08)); }

/* 5. Diferenciais (quebra clara) */
.claro { background: var(--cor-branco); color: var(--cor-marinho); }
.claro .etiqueta { color: var(--cor-roxo); }
.claro .serif { background: linear-gradient(90deg, var(--cor-roxo), #C2338F); -webkit-background-clip: text; background-clip: text; }
.diferenciais { padding-block: var(--respiro); }
.diferenciais__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.pilar { padding: 40px; border-radius: var(--raio); background: #fff; border: 1px solid rgba(25, 15, 61, .08); box-shadow: 0 24px 60px rgba(25, 15, 61, .07); }
.pilar p { color: #4a4366; }
.pilar__num { display: block; font-size: 72px; margin-bottom: 28px; background: linear-gradient(135deg, var(--cor-roxo), #C2338F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pilar--destaque { background: var(--grad-roxo); color: var(--cor-branco); border: 0; translate: 0 -24px; box-shadow: 0 30px 80px rgba(91, 31, 143, .35); }
.pilar--destaque p { color: rgba(247, 247, 247, .85); }
.pilar--destaque .pilar__num { background: linear-gradient(135deg, #fff, var(--cor-lilas-claro)); -webkit-background-clip: text; background-clip: text; }

/* 6. Projetos (logo sobre palco de clima, estilo Sinnapse) */
.projetos { padding-block: var(--respiro); }
.projetos__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 56px; }
.projeto { position: relative; display: block; text-decoration: none; border-radius: var(--raio); overflow: hidden; aspect-ratio: 3 / 4; isolation: isolate; }
.projeto__palco {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 18% 18% 42%;
  background: var(--palco); transition: transform .6s ease;
}
.projeto__palco::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(200, 107, 255, .28), transparent 60%); }
.projeto__logo { position: relative; z-index: 1; width: 100%; max-height: 180px; object-fit: contain; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .35)); }
/* Todos os cards no mesmo palco roxo escuro (padrão Twisk, sem as cores dos clientes) */
.projeto { --palco: radial-gradient(circle at 50% 22%, #4A1E7E 0%, #2A1258 42%, #120A26 100%); }
.projeto__palco { padding: 10% 14% 58%; }
.projeto__logo { max-height: 140px; }
.projeto--forever .projeto__palco { padding-inline: 8%; }
.projeto__info { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 45%; display: flex; flex-direction: column; padding: 22px 24px; border-radius: 18px; background: rgba(10, 8, 22, .45); transition: background .3s ease; }
.projeto__ver { margin-top: auto !important; padding-top: 14px; }
.projeto__info p { color: rgba(247, 247, 247, .78); font-size: 15px; line-height: 1.5; }
.projeto__tag { font-size: 11px !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cor-lilas-claro) !important; margin-bottom: 8px; }
.projeto__ver { display: inline-flex; gap: 6px; margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--cor-branco); }
.projeto:hover .projeto__palco { transform: scale(1.06); }
.projeto:hover .projeto__info { background: rgba(10, 8, 22, .65); }

/* 7. Processo (linha neon com a rolagem) */
.processo { padding-block: var(--respiro); }
.processo__etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.processo__etapas::before, .processo__etapas::after { content: ""; position: absolute; top: 34px; left: 34px; right: 34px; height: 2px; border-radius: 2px; }
.processo__etapas::before { background: rgba(255, 255, 255, .1); }
.processo__etapas::after {
  background: var(--grad-neon); box-shadow: 0 0 16px var(--neon-pink);
  transform-origin: left; transform: scaleX(var(--progresso, 0)); transition: transform .15s linear;
}
.processo__etapas li { position: relative; z-index: 1; }
.processo__num {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; font-size: 26px;
  background: rgba(14, 10, 31, .9); color: var(--cor-lilas-claro);
  border: 1px solid rgba(200, 107, 255, .5); box-shadow: 0 0 24px rgba(200, 107, 255, .25); margin-bottom: 24px;
}
.processo__etapas p { color: rgba(247, 247, 247, .7); }

/* 9. Depoimentos */
.depoimentos { padding-block: var(--respiro); }
.depoimentos__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.depoimentos__pilha { position: relative; min-height: 330px; }
.depoimento { position: absolute; inset: 0 auto auto 0; width: 100%; margin: 0; padding: 44px; border-radius: var(--raio); transition: transform .5s ease, opacity .5s ease; background: linear-gradient(150deg, rgba(91, 31, 143, .3), rgba(255, 255, 255, .03)); }
.depoimento p { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; }
.depoimento footer { margin-top: 28px; display: grid; gap: 2px; }
.depoimento footer span { color: var(--cor-lilas); font-size: 14px; }
.depoimento[data-pos="0"] { z-index: 3; opacity: 1; }
.depoimento[data-pos="1"] { z-index: 2; transform: translate(24px, 22px) scale(.96); opacity: .5; }
.depoimento[data-pos="2"] { z-index: 1; transform: translate(48px, 44px) scale(.92); opacity: .22; }
.depoimento:not([data-pos="0"]) > * { visibility: hidden; }
.depoimentos__setas { display: flex; gap: 12px; margin-top: 32px; }
.seta { width: 54px; height: 54px; border-radius: 50%; cursor: pointer; color: var(--cor-branco); font-size: 20px; }
.seta:hover { border-color: var(--cor-lilas); }

/* 8. FAQ */
.faq { padding-block: calc(var(--respiro) * .8) var(--respiro); }
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq__lista { display: grid; gap: 12px; }
.faq details { border-radius: 18px; padding: 0 24px; transition: background .2s; }
.faq details[open] { background: rgba(255, 255, 255, .07); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font-weight: 600; font-size: 17px; display: flex; gap: 16px; }
.faq summary span { color: var(--cor-lilas); font-size: 14px; padding-top: 2px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font-size: 24px; color: var(--cor-lilas); transition: rotate .2s ease; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 0 22px 36px; color: rgba(247, 247, 247, .72); }

/* 10. CTA final: painel em gradiente roxo com vidro */
.cta { padding-block: 0 var(--respiro); }
.cta__painel {
  position: relative; overflow: hidden; text-align: center; border-radius: 36px;
  padding: clamp(56px, 8vw, 110px) clamp(24px, 6vw, 80px);
  background: var(--grad-roxo);
  box-shadow: 0 40px 120px rgba(155, 91, 214, .35);
}
.cta__painel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgba(255, 79, 216, .45), transparent 50%), radial-gradient(circle at 10% 100%, rgba(14, 10, 31, .6), transparent 55%); pointer-events: none; }
.cta__painel > * { position: relative; z-index: 1; }
.cta__raio { position: absolute !important; z-index: 0 !important; right: -40px; top: -40px; width: 340px; opacity: .08; }
.cta__titulo { font-size: clamp(36px, 5vw, 68px); }
.cta__titulo .serif { background: linear-gradient(90deg, #fff, var(--cor-lilas-claro)); -webkit-background-clip: text; background-clip: text; }
.cta .texto { margin: 0 auto; color: rgba(247, 247, 247, .85); }

/* 11. Rodapé */
.rodape { padding: 56px 0 48px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 15px; color: rgba(247, 247, 247, .6); }
.rodape__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.rodape__grid img { width: 140px; margin-bottom: 16px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--cor-lilas-claro); }

/* Responsivo */
@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__inner .btn { margin-left: auto; }
  .hero__grid, .quem__grid, .depoimentos__grid, .faq__grid { grid-template-columns: 1fr; }
  .hero__grid { min-height: 0; }
  .hero__visual { height: 460px; max-width: 560px; width: 100%; margin-inline: auto; }
  .prova__numeros { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .prova__numeros li:nth-child(3) { border-left: 0; padding-left: 0; }
  .diferenciais__grade, .projetos__grade { grid-template-columns: 1fr; }
  .pilar--destaque { translate: 0; }
  .projeto { aspect-ratio: auto; background: rgba(255, 255, 255, .03); }
  .projeto__palco { position: relative; height: 280px; padding: 48px 20%; }
  .projeto__info { position: relative; left: auto; right: auto; bottom: auto; margin: -36px 14px 14px; }
  .processo__etapas { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .processo__etapas::before, .processo__etapas::after { display: none; }
  .depoimentos__grid, .faq__grid { gap: 8px; }
  .rodape__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .nav { top: 10px; padding-inline: 12px; }
  .nav__inner { gap: 12px; padding: 0 8px 0 16px; min-height: 58px; }
  .nav__logo img { width: 110px; }
  .nav__inner .btn { padding: 0 14px; font-size: 13px; min-height: 40px; }
  .hero__visual { height: 380px; }
  .hero__anel { inset: 10px; }
  .hero__disco { width: 200px; height: 200px; }
  .hero__raio { width: 96px; }
  .chip { padding: 10px 14px; font-size: 11px; }
  .chip strong { font-size: 26px; }
  .chip strong.serif { font-size: 26px; }
  .chip--1 { left: 0; top: 10px; }
  .chip--2 { right: 0; top: 150px; }
  .chip--3 { left: 0; bottom: 10px; }
  .botoes .btn { width: 100%; }
  .prova__numeros li { padding-inline: 16px; }
  .servicos__grade { grid-template-columns: 1fr; }
  .servico, .servico--grande { padding: 30px; }
  .processo__etapas { grid-template-columns: 1fr; }
  .depoimentos__pilha { min-height: 470px; }
  .depoimento { padding: 30px; }
  .depoimento[data-pos="1"] { transform: translate(10px, 14px) scale(.97); }
  .depoimento[data-pos="2"] { transform: translate(20px, 28px) scale(.94); }
  .cta__painel { border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Borda neon por cima do palco nos cards de projeto */
.projeto.borda-neon::before { z-index: 2; }
.projeto--matilha .projeto__logo { max-height: 170px; }
@media (max-width: 980px) { .projeto__info { height: auto; min-height: 200px; } }

/* Telas grandes: o conteúdo cresce junto, em vez de ficar uma ilha no meio */
@media (min-width: 1680px) {
  :root { --largura: 1320px; }
  body { zoom: 1.12; }
}
@media (min-width: 2200px) {
  :root { --largura: 1400px; }
  body { zoom: 1.35; }
}
@media (min-width: 3000px) {
  body { zoom: 1.75; }
}

/* Fade in na rolagem */
.revelar { opacity: 0; translate: 0 34px; filter: blur(6px); transition: opacity .8s ease, translate .8s cubic-bezier(.2, .7, .2, 1), filter .8s ease; transition-delay: var(--atraso, 0ms); }
.revelar.visivel { opacity: 1; translate: 0 0; filter: none; }

/* Cursor: bolinha roxa com rastro */
.cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s ease, width .2s ease, height .2s ease; will-change: transform; }
.com-cursor .cursor { opacity: 1; }
.cursor--ponta { width: 12px; height: 12px; background: var(--neon-lilas); box-shadow: 0 0 12px var(--neon-lilas), 0 0 24px rgba(255, 79, 216, .6); }
.cursor--rastro {
  width: calc(12px - var(--i) * .6px); height: calc(12px - var(--i) * .6px);
  background: rgba(200, 107, 255, calc(.55 - var(--i) * .035));
  filter: blur(calc(var(--i) * .25px));
}
.cursor-sobre-link .cursor--ponta { width: 34px; height: 34px; background: rgba(200, 107, 255, .25); border: 1px solid var(--neon-lilas); }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; translate: none; filter: none; }
}

/* ============ Página de projeto (case) ============ */
.caso-hero { padding-top: clamp(56px, 8vw, 110px); }
.caso-voltar { display: inline-flex; gap: 8px; margin-bottom: 36px; color: rgba(247, 247, 247, .65); text-decoration: none; font-size: 15px; }
.caso-voltar:hover { color: var(--cor-lilas-claro); }
.caso-hero .h1 { font-size: clamp(44px, 6.4vw, 92px); }
.caso-lead { margin-top: 22px; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; max-width: 900px; }
.caso-lead .serif { font-size: 1em; }
.caso-meta { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, .1); }
.caso-meta li { padding: 22px 24px 0 0; display: grid; gap: 4px; }
.caso-meta span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cor-lilas); }
.caso-meta strong, .caso-meta a { font-weight: 600; color: var(--cor-branco); text-decoration: none; }
.caso-meta a:hover { color: var(--cor-lilas-claro); }

.caso-palco {
  margin-top: 56px; border-radius: 36px; overflow: hidden; aspect-ratio: 16 / 7; display: grid; place-items: center; padding: 6% 18%;
  background: radial-gradient(circle at 50% 30%, rgba(200, 107, 255, .3), transparent 55%), radial-gradient(circle at 50% 22%, #4A1E7E 0%, #2A1258 42%, #120A26 100%);
  box-shadow: 0 40px 120px rgba(91, 31, 143, .35);
}
.caso-palco img { width: 100%; max-width: 640px; height: clamp(150px, 22vw, 320px); object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .45)); }

.caso-secao { padding-block: clamp(64px, 9vw, 120px) 0; }
.caso-bloco { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.caso-bloco .texto + .texto { margin-top: 18px; }

.caso-pontos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 8px; }
.caso-ponto { padding: 30px; border-radius: var(--raio); }
.caso-ponto span { display: block; font-family: var(--fonte-titulo); font-stretch: var(--titulo-largura); font-weight: 800; color: var(--cor-lilas); margin-bottom: 18px; }
.caso-ponto p { color: rgba(247, 247, 247, .75); }

.caso-cores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.caso-cor { border-radius: var(--raio); overflow: hidden; }
.caso-cor__amostra { height: 150px; background: var(--amostra); }
.caso-cor__info { padding: 18px 22px; display: grid; gap: 2px; }
.caso-cor__info strong { font-size: 16px; }
.caso-cor__info span { font-size: 14px; color: rgba(247, 247, 247, .6); }
.caso-cor__info p { font-size: 14px; color: rgba(247, 247, 247, .72); margin-top: 8px; }

.caso-fontes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.caso-fonte { padding: 30px; border-radius: var(--raio); }
.caso-fonte__nome { font-family: var(--fonte-titulo); font-stretch: var(--titulo-largura); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.caso-fonte__uso { font-size: 14px; color: var(--cor-lilas); margin: 4px 0 12px; }
.caso-fonte p { color: rgba(247, 247, 247, .72); font-size: 15px; }

.caso-galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: start; }
.caso-galeria figure { margin: 0; border-radius: var(--raio); overflow: hidden; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.caso-galeria figure.largo { grid-column: 1 / -1; }
.caso-galeria img { width: 100%; height: auto; object-fit: contain; transition: transform .6s ease; }
.caso-galeria figure:hover img { transform: scale(1.03); }
.caso-galeria figcaption { padding: 14px 20px; font-size: 14px; color: rgba(247, 247, 247, .65); }

.caso-site { padding: clamp(32px, 5vw, 56px); border-radius: 32px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; background: linear-gradient(150deg, rgba(91, 31, 143, .35), rgba(255, 255, 255, .03)); }
.caso-site ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.caso-site li { display: flex; gap: 12px; color: rgba(247, 247, 247, .8); }
.caso-site li::before { content: ""; flex: 0 0 8px; height: 8px; margin-top: 10px; border-radius: 50%; background: var(--grad-neon); box-shadow: 0 0 10px var(--neon-pink); }

.caso-depoimento { padding: clamp(32px, 5vw, 56px); border-radius: 32px; max-width: 980px; }
.caso-depoimento p { font-size: clamp(20px, 2vw, 26px); line-height: 1.5; }
.caso-depoimento footer { margin-top: 26px; display: grid; gap: 2px; }
.caso-depoimento footer span { color: var(--cor-lilas); font-size: 14px; }

.caso-proximo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 40px; border-radius: 32px; text-decoration: none; transition: transform .3s ease; }
.caso-proximo:hover { transform: translateY(-4px); }
.caso-proximo span { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--cor-lilas); }
.caso-proximo strong { display: block; font-family: var(--fonte-titulo); font-stretch: var(--titulo-largura); font-weight: 800; font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -0.03em; }
.caso-proximo__seta { font-size: 40px; color: var(--cor-lilas-claro); }

@media (max-width: 980px) {
  .caso-meta { grid-template-columns: repeat(2, 1fr); }
  .caso-bloco, .caso-site { grid-template-columns: 1fr; gap: 20px; }
  .caso-palco { aspect-ratio: 4 / 3; padding: 10%; }
}
@media (max-width: 600px) {
  .caso-galeria { grid-template-columns: 1fr; }
  .caso-proximo { padding: 28px; }
}
/* Pranchas e logos com fundo transparente: fundo claro e imagem inteira (sem corte) */
.caso-galeria figure.transparente { background: #fff; }
.caso-galeria figure.transparente img { object-fit: contain; padding: clamp(16px, 3vw, 40px); max-height: 640px; }
.caso-galeria figure.transparente figcaption { background: rgba(14, 10, 31, .92); }
.caso-galeria figure.transparente:hover img { transform: none; }

/* Página de texto (política de privacidade) */
.politica { max-width: 820px; }
.politica .h3 { margin: 48px 0 14px; font-size: clamp(22px, 2.2vw, 28px); }
.politica .h3:first-child { margin-top: 0; }
.politica p, .politica li { color: rgba(247, 247, 247, .78); }
.politica p + p { margin-top: 14px; }
.politica ul { margin: 14px 0; padding-left: 22px; display: grid; gap: 8px; }
.politica strong { color: var(--cor-branco); }