/* ==========================================================================
   Univercode — landing page
   Mobile-first. Tokens → base → componentes → seções.
   ========================================================================== */

:root {
  --bg: #050309;
  --ink: #f4eff8;
  --muted: #9d9da9;
  --violet: #9a71ff;      /* marca: decoração, bordas, glows */
  --accent: #8857ff;      /* texto em destaque (contraste ≥ 4.5:1 sobre o fundo) */
  --btn: #7a4de8;         /* fundo de botão (branco sobre ele ≥ 4.5:1) */
  --line: #2e283d;
  --rule: rgba(58, 55, 81, 0.55);
  --card-dark: #06040a;
  --pain-wash: linear-gradient(180deg, rgba(154, 113, 255, 0.05) calc(100% - 16.0rem), rgba(154, 113, 255, 0.0486) calc(100% - 14.4rem), rgba(154, 113, 255, 0.0448) calc(100% - 12.8rem), rgba(154, 113, 255, 0.0392) calc(100% - 11.2rem), rgba(154, 113, 255, 0.0324) calc(100% - 9.6rem), rgba(154, 113, 255, 0.025) calc(100% - 8.0rem), rgba(154, 113, 255, 0.0176) calc(100% - 6.4rem), rgba(154, 113, 255, 0.0108) calc(100% - 4.8rem), rgba(154, 113, 255, 0.0052) calc(100% - 3.2rem), rgba(154, 113, 255, 0.0014) calc(100% - 1.6rem), rgba(154, 113, 255, 0.0) calc(100% - 0.0rem));   /* tom da seção "Quanto custa": some suavemente nos últimos 16rem (sem borda com a seção seguinte) */
  --pain-tint: rgba(154, 113, 255, .05);   /* mesmo tom na seção "Quanto custa" e no interior da aba */
  /* Toda luz do site usa estas quedas: valor tende a 0 antes da borda, então não existe "parede" */
  --halo: rgba(154, 113, 255, .55) 0%, rgba(154, 113, 255, .38) 14%, rgba(154, 113, 255, .22) 30%, rgba(154, 113, 255, .1) 50%, rgba(154, 113, 255, .035) 70%, rgba(154, 113, 255, .008) 88%, rgba(154, 113, 255, 0) 100%;
  /* lavado violeta das laterais: platô uniforme (sem ponto quente) e queda suave só depois da seta */
  --halo-wash: rgba(102, 39, 255, .24) 0%, rgba(102, 39, 255, .235) 30%, rgba(102, 39, 255, .19) 52%, rgba(102, 39, 255, .11) 68%, rgba(102, 39, 255, .045) 82%, rgba(102, 39, 255, .01) 93%, rgba(102, 39, 255, 0) 100%;
  --grid: linear-gradient(rgba(154, 113, 255, .05) 1px, transparent 1px) 0 0 / 3px 3px, linear-gradient(90deg, rgba(154, 113, 255, .05) 1px, transparent 1px) 0 0 / 3px 3px;

  --font-display: "Zalando Sans Expanded", "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "Pixelify Sans", ui-monospace, monospace;

  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }

:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .6rem 1rem; background: #fff; color: #000; font-weight: 700; border-radius: .5rem;
}
.skip-link:focus { top: 1rem; }

.container--narrow { --container: 64.2rem; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; position: relative; z-index: 1; }
.center { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3.5rem); }
.section { position: relative; padding-block: var(--section-y); }

/* ---------- Tipografia ---------- */
.h2, .h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.h2 { font-size: clamp(1.375rem, 1rem + 1.6vw, 1.75rem); text-align: center; max-width: 46rem; margin-inline: auto; }
.h2--left { text-align: left; margin-inline: 0; font-size: clamp(1.625rem, 1.1rem + 2vw, 2rem); font-weight: 800; line-height: 1.15; }
.h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); }
.hl { color: var(--accent); }
.hl-violet { color: var(--violet); }
.hl.u { text-decoration: underline; text-underline-offset: .2em; }

/* Gradiente nas fontes (como no design): trechos em destaque vão do violeta profundo ao lavanda, linha a linha
   (box-decoration-break: clone); o branco dos títulos também tem um leve degradê para lavanda. A cor sólida
   continua como reserva (e como cor do sublinhado) para navegadores sem background-clip: text. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hl, .hl-violet {
    background-image: linear-gradient(90deg, #7a52e0 0%, #9a7bf2 55%, #b3a0fa 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .hero__title, .h2 {
    background-image: linear-gradient(90deg, #ffffff 0%, #f1ecfc 55%, #dcd2f5 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .light .h2 { background-image: none; -webkit-text-fill-color: currentColor; }
  .light .hl-violet { background-image: linear-gradient(90deg, #6d3fdc 0%, #8a63ee 100%); }
}

/* ---------- Botão ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3.125rem; padding: .85rem 1.75rem;
  border: 0; border-radius: 2rem; cursor: pointer; text-decoration: none;
  background: var(--btn); color: #fff;
  font-weight: 700; font-size: .875rem; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase;
  box-shadow: 0 0 0 4px rgba(154, 113, 255, .17), 0 8px 32px rgba(122, 77, 232, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(154, 113, 255, .25), 0 10px 40px rgba(122, 77, 232, .55); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.btn--block { width: 100%; border-radius: 1rem; font-size: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  margin-bottom: calc(-1 * var(--header-h));   /* o conteúdo começa sob o menu: o fundo do hero se estende até o topo da página */
  /* no topo da página o menu é transparente; ao descer (.is-stuck) ganha o fundo escuro com desfoque */
  background: rgba(5, 3, 9, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  border-bottom: 1px solid transparent; transition: background-color .3s, backdrop-filter .3s, -webkit-backdrop-filter .3s, border-color .3s;
}
.site-header.is-stuck { background: rgba(5, 3, 9, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--rule); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo__img { width: 8.5rem; height: auto; aspect-ratio: 136 / 24; flex: none; }

.nav { display: flex; gap: clamp(1rem, 3vw, 2.25rem); }
.nav a {
  position: relative; display: inline-block; padding: .5rem 0; text-decoration: none;
  font-size: .8125rem; font-weight: 500; color: var(--ink);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px; background: #c6afff;
  box-shadow: 0 -3px 10px var(--violet), 0 -8px 14px var(--violet); transform: scaleX(0); transition: transform .25s ease;
}
.nav a:hover, .nav a[aria-current="true"] { color: #ac8bff; }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }

/* ---------- Decoração compartilhada ---------- */
.blob {
  position: absolute; width: 46rem; height: 36rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--halo-wash));
}
.blob--l { left: -26rem; top: 6rem; }
.blob--r { right: -26rem; top: 6rem; }

/* Setas neon laterais: um único par que acompanha a logo (posição/encaixe via JS, ver "Logo de fundo") */
.bg-chevs { display: none; }
/* a caixa tem 6,25rem de folga em volta do traço (o desenho em si mede 11,4×23,9rem) para o brilho nunca ser cortado */
.chev { position: absolute; top: -6.25rem; width: 23.875rem; height: 36.4375rem; overflow: visible; }
.chev--l { left: -6.25rem; }
.chev--r { right: -6.25rem; transform: scaleX(-1); }

.glow-rule { position: absolute; left: 50%; top: 0; width: min(1084px, 90%); height: 3px; transform: translateX(-50%); pointer-events: none; }
.glow-rule::before {
  content: ""; position: absolute; left: -6%; right: -6%; top: 50%; height: 7rem; transform: translateY(-50%);
  background: radial-gradient(closest-side, var(--halo)); opacity: .7;
}
.glow-rule::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--violet) 51%, transparent); }

/* Silhueta do símbolo (SVG 387×611) */
.figure { display: block; width: min(100%, 24rem); height: auto; aspect-ratio: 387 / 611; flex: none; overflow: visible; }

/* Trecho "code" do logo em escala gigante (mesmo SVG do menu, recortado) */
.big-mark { position: absolute; display: none; width: 25.6rem; height: auto; aspect-ratio: 50 / 18.2; --tf: rotate(-15deg); transform: var(--tf); transform-origin: top left; pointer-events: none; filter: blur(5px); }
.big-mark--r { right: 2.3rem; top: 15.6rem; }
.big-mark--l { left: -7.6rem; top: calc(100% - .2rem); opacity: .42; }

/* Nó luminoso: triângulo 78×42 apontando para baixo */
.node { position: absolute; display: none; width: 4.875rem; height: 2.625rem; pointer-events: none; }
.node::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 17rem; height: 13rem; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--halo)); opacity: .95;
}
.node::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 42'%3E%3Cpath d='M8 1H70Q77 1 73.5 7L42.5 39Q39 42 35.5 39L4.5 7Q1 1 8 1Z' fill='%239A71FF'/%3E%3C/svg%3E") center / contain no-repeat;
}
.node--hero { left: 50%; top: calc(-1 * min(70.5rem, 100cqw) * 56 / 1128); transform: translateX(-50%); }

/* Aba arredondada entre o hero e "Quanto custa" */
.tab { position: absolute; display: none; left: 50%; bottom: 100%; width: min(70.5rem, 100%); height: auto; transform: translateX(-50%); margin-bottom: -1px; pointer-events: none; }
.tab__fill { fill: var(--pain-tint); }
.pain { container-type: inline-size; }
/* linha de base só FORA da aba: nasce na borda da tela e termina no canto da aba */
.pain::before, .pain::after {
  content: ""; position: absolute; top: 0; height: 1px; width: calc((100% - min(70.5rem, 100%)) / 2);
  background: rgba(154, 113, 255, .7); pointer-events: none;
}
.pain::before { left: 0; }
.pain::after { right: 0; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
/* O hero ocupa 99% da altura da primeira tela (≈15–20% mais alto que só o conteúdo). A sobra de altura é dividida 3:7 entre
   topo e base do conteúdo: ele fica um pouco acima do centro e a base abriga a aba da próxima seção */
.hero { position: relative; overflow-x: clip; display: flex; flex-direction: column; min-height: 99vh; min-height: 99svh; padding: calc(clamp(2rem, 5.3vw, 5rem) + var(--header-h)) 0 var(--section-y); text-align: center; }
.hero::before, .hero::after { content: ""; flex: 3 1 0; }
.hero::after { flex-grow: 7; }
.hero__bg { position: absolute; inset: var(--header-h) 0 0; pointer-events: none; }
.hero__inner { display: flex; flex-direction: column; align-items: center; max-width: 64rem; }
.hero__title { max-width: 52rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.625rem, 1rem + 1.5vw, 2.25rem); line-height: 1.2; text-wrap: balance; }   /* até 3 linhas em telas largas */
.hero__lead { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 46rem; font-weight: 500; font-size: clamp(1.0625rem, .9rem + .8vw, 1.5rem); line-height: 1.45; }
.hero__sub { margin-top: clamp(1.25rem, 2.5vw, 2rem); max-width: 42rem; font-size: .9375rem; font-weight: 500; }
.hero__inner .btn { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ---------- Problema ---------- */
.pain__title { max-width: 45rem; }
.pain__grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 2rem; justify-items: center; }
.legacy { position: relative; display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.legacy__tag::after { content: ""; position: absolute; left: 50%; top: calc(100% + .3rem); transform: translateX(-50%); border: .3rem solid transparent; border-top: .4rem solid var(--violet); border-bottom: 0; }
.legacy__tag {
  position: relative; padding: .1rem .6rem; border: 1px solid var(--violet); background: rgba(20, 14, 33, .5);
  font-family: var(--font-pixel); font-weight: 700; font-size: 1rem; color: var(--violet); letter-spacing: .02em;
}
.pc { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; }
.pc__screen { position: relative; width: 6.75rem; height: 4.8rem; padding: .2rem; background: #171717; border: 3px solid var(--violet); }
.pc__neck { width: 2rem; height: .55rem; background: #171717; border: 3px solid var(--violet); border-top: 0; }
.pc__base { width: 6.25rem; height: .6rem; background: #171717; border: 3px solid var(--violet); }

.chips { display: grid; gap: .65rem; width: 100%; max-width: 34rem; }
.chip {
  padding: .65rem 1rem; border-radius: 1.5rem; outline: 1px solid var(--line); outline-offset: -1px;
  background: rgba(24, 24, 24, .45); backdrop-filter: blur(3px);
  font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--ink);
}
.chip { display: flex; align-items: center; gap: .6rem; position: relative; }
.chip__x { width: 1rem; height: 1rem; flex: none; color: #d8d0ee; }
.chip--small { font-size: .8125rem; }
.chip--strong { background: var(--line); outline-color: var(--violet); }
.pain__outcome { margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; display: grid; gap: .75rem; max-width: 34rem; }
.pain__outcome .chip--small { width: fit-content; }

/* ---------- Sobre ---------- */
.about { overflow-x: clip; }
.about__bg { position: absolute; inset: 0; pointer-events: none; }
.about__bg .blob { top: 20%; }
.about__grid { margin-top: clamp(2rem, 5vw, 4rem); display: grid; gap: 2rem; justify-items: center; }
.about__text { position: relative; max-width: 23.75rem; padding-top: 1.1rem; }
.about__text::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--violet); }
.about__text--left .node { right: 6.7rem; top: calc(100% + 1.4rem); }
.about__text--right .node { left: 8.4rem; top: calc(100% + 1.1rem); }
.about .logo-slot { width: min(60%, 13rem); }

/* ---------- Serviços ---------- */
.services { padding-block: calc(var(--section-y) * .75) calc(var(--section-y) * .5); overflow-x: clip; }
.services__wrap > .cards, .services__wrap > .center { position: relative; z-index: 1; }
.services__glow {
  position: absolute; left: 50%; bottom: 4.4rem; width: 90rem; height: 30rem; --tf: translateX(-50%); transform: var(--tf); pointer-events: none;
  background: radial-gradient(closest-side, var(--halo)); opacity: .8;
}
.figure--line { display: none; position: absolute; left: -10rem; top: 7.25rem; width: 24.2rem; z-index: 0; filter: blur(.8px); }
.cards { display: grid; gap: 1.25rem; justify-items: center; }
.card { width: min(100%, 24.4rem);
  position: relative; border-radius: 24px; box-sizing: border-box;
  border: 1px solid #262020; background: #fff; color: #4d4d4d;
}
/* A arte é desenhada na grade do design (390×270) e escala com a largura do card: 1u = 1px do design */
.card__link { --u: calc(100cqw / 390); position: relative; display: block; height: 100%; text-decoration: none; container-type: inline-size; }
.card__art { position: relative; aspect-ratio: 390 / 270; overflow: hidden; isolation: isolate; border-radius: 23px 23px 0 0; }
.card__art img { position: absolute; display: block; max-width: none; }

/* SaaS / TMS: captura em três camadas (fundo suave, intermediária desfocada, frente nítida) */
.shot { object-fit: cover; }
.shot--bg { left: calc(var(--u) * -61); top: calc(var(--u) * -8); width: calc(var(--u) * 486); height: calc(var(--u) * 273); }
.shot--mid {
  left: calc(var(--u) * -158); top: calc(var(--u) * -53); width: calc(var(--u) * 365); height: calc(var(--u) * 205);
  border-radius: calc(var(--u) * 17); filter: blur(1.5px);
}
.shot--front {
  left: calc(var(--u) * 163); top: calc(var(--u) * 109); width: calc(var(--u) * 246); height: calc(var(--u) * 138);
  border-radius: calc(var(--u) * 7);
}

/* Animação automática e contínua (igual em SaaS e TMS), conforme o movimento do Figma — ciclo de 4s:
   camada do meio (nó 2:237): x -170 → -228 → -170 · camada da frente (nó 2:238): x 163 → 294 → 163 · fundo parado.
   Os valores do Figma são posições (unidades do design); aqui viram deslocamentos a partir de left -158 / 163.
   O fim do ciclo volta ao início (-170) para o laço não dar salto. Pausa quando o card sai da tela. */
.shot { will-change: transform; }
.shot--mid { animation: shot-mid 4s infinite; }
.shot--front { animation: shot-front 4s infinite; }
.js .card--light:not(.is-playing) .shot { animation-play-state: paused; }
@keyframes shot-mid {
  0%   { transform: translate3d(calc(var(--u) * -12), 0, 0); animation-timing-function: linear; }
  50%  { transform: translate3d(calc(var(--u) * -70), 0, 0); animation-timing-function: cubic-bezier(.68, .12, .14, 1.02); }
  100% { transform: translate3d(calc(var(--u) * -12), 0, 0); }
}
@keyframes shot-front {
  0%   { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.678, .115, .139, 1.024); }
  50%  { transform: translate3d(calc(var(--u) * 131), 0, 0); animation-timing-function: cubic-bezier(.837, .053, .269, .923); }
  100% { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .shot--mid, .shot--front { animation: none; } }

/* Estrutura do Figma (390×471): arte 0–270 · título top 276 (32/39) · texto top 326 (16/20, largura 318) */
.card__body { padding: calc(var(--u) * 6) calc(var(--u) * 54) calc(var(--u) * 25) calc(var(--u) * 18); min-height: calc(var(--u) * 201); }
.card__title { margin: 0 0 calc(var(--u) * 11) calc(var(--u) * 1); font-family: var(--font-body); font-weight: 700; font-size: 32px; line-height: 39px; color: #171717; }
.card__body p { font-size: 16px; font-weight: 500; line-height: 20px; }
.card__body p + p { margin-top: 20px; }
.cards .card:nth-child(3) .card__body { padding-right: calc(var(--u) * 19); }
.card__body p strong { font-weight: 700; }
.card__arrow {
  position: absolute; left: calc(var(--u) * 349); top: calc(var(--u) * 273); width: calc(var(--u) * 21.52); height: calc(var(--u) * 33.98);
  color: #898989; transition: transform .2s ease, color .2s ease;
}
.card__link:hover .card__arrow, .card__link:focus-visible .card__arrow { transform: translateY(-3px); color: var(--btn); }
/* ---------- Card "Sob demanda" ----------
   Fonte de luz: canto superior direito do ícone (282, 66 no grid do design).
   A luz SOMA-SE ao que está por baixo (mix-blend-mode: screen) em vez de cobrir com um disco, tem
   núcleo pequeno + brilho + halo largo (queda gaussiana) e também reflete na borda e no fundo do card. */
.card--demand {
  --lx: 282; --ly: 66;                                   /* posição da luz (unidades do design) */
  border-color: #683bd8; color: #fff;
  background:
    radial-gradient(ellipse 72% 52% at 72% 14%, rgba(110, 70, 230, 0.200) 0%, rgba(110, 70, 230, 0.189) 13%, rgba(110, 70, 230, 0.160) 26%, rgba(110, 70, 230, 0.122) 39%, rgba(110, 70, 230, 0.083) 53%, rgba(110, 70, 230, 0.050) 66%, rgba(110, 70, 230, 0.027) 79%, rgba(110, 70, 230, 0.013) 92%, rgba(110, 70, 230, 0) 100%),
    linear-gradient(201.76deg, rgba(21, 21, 21, 0) 5.96%, #151515 94.04%);
}
.demand__piece { will-change: transform; }
.demand__piece--l { left: 0; top: calc(var(--u) * 129); width: calc(var(--u) * 121); height: calc(var(--u) * 136); }
.demand__piece--r { left: calc(var(--u) * 260); top: calc(var(--u) * 22); width: calc(var(--u) * 130); height: calc(var(--u) * 143); }
.demand__piece--m { left: calc(var(--u) * 99); top: calc(var(--u) * 57); width: calc(var(--u) * 190); height: calc(var(--u) * 190); transform-origin: 50% 50%; }
/* Animação automática e contínua, conforme o movimento do Figma — ciclo de 4s (posições do design → deslocamentos):
   esquerda (2:245): x -15 fixo, y 129 → 64 → 129 · direita (2:246): x 260 fixo, y 22 → 76 → 22 · meio (2:247): x 99 fixo, y 57 → 46 → 57.
   Pausa quando o card sai da tela (.is-playing, main.js). */
.demand__piece--l { animation: demand-l 4s infinite; }
.demand__piece--r { animation: demand-r 4s infinite; }
.demand__piece--m { animation: demand-m 4s infinite; }
.js .card--demand:not(.is-playing) .demand__piece { animation-play-state: paused; }
@keyframes demand-l {
  0%   { transform: translate3d(calc(var(--u) * -15), 0, 0); animation-timing-function: cubic-bezier(.68, .12, .14, 1.02); }
  50%  { transform: translate3d(calc(var(--u) * -15), calc(var(--u) * -65), 0); animation-timing-function: cubic-bezier(.68, .12, .14, 1.02); }
  100% { transform: translate3d(calc(var(--u) * -15), 0, 0); }
}
@keyframes demand-r {
  0%      { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.68, .12, .14, 1.02); }
  49.888% { transform: translate3d(0, calc(var(--u) * 54), 0); animation-timing-function: cubic-bezier(.68, .12, .14, 1.02); }
  100%    { transform: translate3d(0, 0, 0); }
}
@keyframes demand-m {
  0%    { transform: translate3d(0, 0, 0); }
  49.7% { transform: translate3d(0, calc(var(--u) * -11), 0); }
  100%  { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .demand__piece { animation: none; } }

.demand__light { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; transition: opacity .6s ease; opacity: .92; }
.demand__haze  { --r: 150; background: radial-gradient(closest-side, rgba(140, 100, 245, 0.240) 0%, rgba(140, 100, 245, 0.227) 13%, rgba(140, 100, 245, 0.192) 26%, rgba(140, 100, 245, 0.146) 39%, rgba(140, 100, 245, 0.099) 53%, rgba(140, 100, 245, 0.060) 66%, rgba(140, 100, 245, 0.033) 79%, rgba(140, 100, 245, 0.016) 92%, rgba(140, 100, 245, 0) 100%); }
.demand__bloom { --r: 95;  background: radial-gradient(closest-side, rgba(190, 165, 255, 0.420) 0%, rgba(190, 165, 255, 0.397) 13%, rgba(190, 165, 255, 0.337) 26%, rgba(190, 165, 255, 0.255) 39%, rgba(190, 165, 255, 0.173) 53%, rgba(190, 165, 255, 0.105) 66%, rgba(190, 165, 255, 0.057) 79%, rgba(190, 165, 255, 0.028) 92%, rgba(190, 165, 255, 0) 100%); }
.demand__core  { --r: 38;  background: radial-gradient(closest-side, rgba(240, 232, 255, 0.500) 0%, rgba(240, 232, 255, 0.473) 13%, rgba(240, 232, 255, 0.401) 26%, rgba(240, 232, 255, 0.304) 39%, rgba(240, 232, 255, 0.206) 53%, rgba(240, 232, 255, 0.126) 66%, rgba(240, 232, 255, 0.068) 79%, rgba(240, 232, 255, 0.033) 92%, rgba(240, 232, 255, 0) 100%); }
.demand__haze, .demand__bloom, .demand__core {
  left: calc(var(--u) * (var(--lx) - var(--r))); top: calc(var(--u) * (var(--ly) - var(--r)));
  width: calc(var(--u) * var(--r) * 2); height: calc(var(--u) * var(--r) * 2);
}
.card--demand:hover .demand__light, .card__link:focus-visible .demand__light, .card--demand.is-active .demand__light { opacity: 1; }

/* reflexo da luz na borda do card (anel de 1px iluminado só perto da fonte) */
.demand__rim {
  position: absolute; inset: -1px; border: 1px solid transparent; border-radius: 24px; pointer-events: none;
  background: radial-gradient(circle calc(var(--u) * 170) at calc(var(--u) * var(--lx)) 0, rgba(205, 185, 255, 0.950) 0%, rgba(205, 185, 255, 0.899) 13%, rgba(205, 185, 255, 0.762) 26%, rgba(205, 185, 255, 0.578) 39%, rgba(205, 185, 255, 0.392) 53%, rgba(205, 185, 255, 0.239) 66%, rgba(205, 185, 255, 0.130) 79%, rgba(205, 185, 255, 0.063) 92%, rgba(205, 185, 255, 0) 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box; -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box; mask-composite: exclude;
}
.card--demand .card__body { position: relative; z-index: 1; text-align: center; padding-inline: calc(var(--u) * 26) calc(var(--u) * 27); }
.card--demand .card__title { color: #fff; text-align: center; margin-left: 0; }
.card--demand .card__body p { font-weight: 700; }
.card { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 60px rgba(122, 77, 232, .25); }
.card__link:focus-visible { outline-offset: -4px; }

/* ---------- Depoimentos ---------- */
.testimonials { padding-block: calc(var(--section-y) * .5) calc(var(--section-y) * .8); overflow-x: clip; }
.carousel { position: relative; margin-top: clamp(2rem, 4vw, 3rem); overflow-x: auto; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; gap: 1.1rem; width: max-content; padding: 1rem var(--gutter); }
/* com JS: esteira arrastável em laço (drag & drop) + movimento automático */
.js .carousel { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.js .carousel.is-dragging { cursor: grabbing; }
.js .carousel.is-dragging .t-card__play { pointer-events: none; }
.js .carousel__track { padding-inline: 0; will-change: transform; }
.carousel__track img, .carousel__track svg { -webkit-user-drag: none; }
.t-card {
  position: relative; flex: 0 0 min(76vw, 24.5rem); aspect-ratio: 392 / 526;
  border-radius: 1.375rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem;
  border: 1px solid rgba(154, 113, 255, .35);
}
.t-card--a { background: radial-gradient(120% 80% at 20% 0%, #3b2a7a, #14102a 70%); }
.t-card--b { background: radial-gradient(120% 80% at 80% 0%, #4a2fa8, #120d26 70%); }
.t-card--c { background: radial-gradient(120% 80% at 50% 0%, #2c2160, #0e0b1f 70%); }
.t-card__play {
  position: absolute; left: 50%; top: 42%; width: 4.25rem; height: 4.25rem; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); color: #fff; cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.t-card__play:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(154, 113, 255, .55); }
.t-card__play svg { width: 1.6rem; height: 1.6rem; margin-left: .15rem; }
.t-card__who { display: grid; gap: .1rem; }
.t-card__who strong { font-weight: 700; }
.t-card__who span { font-size: .8125rem; color: #cfc6e6; }

/* ---------- Garantias (seção clara) ---------- */
/* z-index: o fundo branco fica acima das decorações da seção anterior (o .container delas tem z-index 1), que não devem invadi-lo */
.light { z-index: 2; background: #fff; color: #06040a; }
.light .h2 { color: #06040a; }
/* 1u = 1px do design (container de 1206px a 1440px de largura): em telas largas tudo escala com o container */
.guarantees__wrap { --container: 75.375rem; container-type: inline-size; }
.guarantees__grid { --u: calc(100cqw / 1206); margin-top: clamp(2rem, 4vw, 3.8rem); display: grid; gap: .55rem; }
.guarantees__main { display: grid; gap: .55rem; align-content: start; }
.guarantees__side { display: grid; gap: .55rem; align-content: start; }

/* Cards escuros: brilho violeta que nasce na esquerda (atrás do ícone) e some suavemente; sem círculos gigantes */
.gcard {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: clamp(1rem, .6rem + 1.4vw, 1.7rem);
  padding: 1.5rem clamp(1.1rem, .6rem + 1.4vw, 1.8rem); min-height: 9rem; border-radius: 1.35rem;
  background: radial-gradient(ellipse 52% 150% at 0% 28%, rgba(124, 84, 238, 0.62) 0%, rgba(124, 84, 238, 0.603) 10%, rgba(124, 84, 238, 0.556) 20%, rgba(124, 84, 238, 0.486) 30%, rgba(124, 84, 238, 0.402) 40%, rgba(124, 84, 238, 0.31) 50%, rgba(124, 84, 238, 0.218) 60%, rgba(124, 84, 238, 0.134) 70%, rgba(124, 84, 238, 0.064) 80%, rgba(124, 84, 238, 0.017) 90%, rgba(124, 84, 238, 0.0) 100%), #06040a;
}
.gcard:nth-child(1) { background: radial-gradient(ellipse 52% 150% at 0% 28%, rgba(124, 84, 238, 0.62) 0%, rgba(124, 84, 238, 0.603) 10%, rgba(124, 84, 238, 0.556) 20%, rgba(124, 84, 238, 0.486) 30%, rgba(124, 84, 238, 0.402) 40%, rgba(124, 84, 238, 0.31) 50%, rgba(124, 84, 238, 0.218) 60%, rgba(124, 84, 238, 0.134) 70%, rgba(124, 84, 238, 0.064) 80%, rgba(124, 84, 238, 0.017) 90%, rgba(124, 84, 238, 0.0) 100%), radial-gradient(ellipse 26% 70% at 100% 100%, rgba(124, 84, 238, 0.42) 0%, rgba(124, 84, 238, 0.408) 10%, rgba(124, 84, 238, 0.376) 20%, rgba(124, 84, 238, 0.329) 30%, rgba(124, 84, 238, 0.272) 40%, rgba(124, 84, 238, 0.21) 50%, rgba(124, 84, 238, 0.148) 60%, rgba(124, 84, 238, 0.091) 70%, rgba(124, 84, 238, 0.044) 80%, rgba(124, 84, 238, 0.012) 90%, rgba(124, 84, 238, 0.0) 100%), #06040a; }
.gcard:nth-child(2) { background: radial-gradient(ellipse 50% 150% at 0% 62%, rgba(124, 84, 238, 0.5) 0%, rgba(124, 84, 238, 0.486) 10%, rgba(124, 84, 238, 0.448) 20%, rgba(124, 84, 238, 0.392) 30%, rgba(124, 84, 238, 0.324) 40%, rgba(124, 84, 238, 0.25) 50%, rgba(124, 84, 238, 0.176) 60%, rgba(124, 84, 238, 0.108) 70%, rgba(124, 84, 238, 0.052) 80%, rgba(124, 84, 238, 0.014) 90%, rgba(124, 84, 238, 0.0) 100%), radial-gradient(ellipse 30% 80% at 100% 100%, rgba(124, 84, 238, 0.26) 0%, rgba(124, 84, 238, 0.253) 10%, rgba(124, 84, 238, 0.233) 20%, rgba(124, 84, 238, 0.204) 30%, rgba(124, 84, 238, 0.168) 40%, rgba(124, 84, 238, 0.13) 50%, rgba(124, 84, 238, 0.092) 60%, rgba(124, 84, 238, 0.056) 70%, rgba(124, 84, 238, 0.027) 80%, rgba(124, 84, 238, 0.007) 90%, rgba(124, 84, 238, 0.0) 100%), #06040a; }
.gcard:nth-child(3) { background: radial-gradient(ellipse 52% 150% at 0% 80%, rgba(124, 84, 238, 0.55) 0%, rgba(124, 84, 238, 0.535) 10%, rgba(124, 84, 238, 0.493) 20%, rgba(124, 84, 238, 0.431) 30%, rgba(124, 84, 238, 0.356) 40%, rgba(124, 84, 238, 0.275) 50%, rgba(124, 84, 238, 0.194) 60%, rgba(124, 84, 238, 0.119) 70%, rgba(124, 84, 238, 0.057) 80%, rgba(124, 84, 238, 0.015) 90%, rgba(124, 84, 238, 0.0) 100%), #06040a; }
.gcard > * { position: relative; z-index: 1; }
.gcard h3 { font-size: clamp(1.2rem, .95rem + .9vw, 1.45rem); font-weight: 700; line-height: 1.3; color: #f6f7fc; }
.gcard p { margin-top: .5rem; max-width: 29rem; font-size: clamp(.9375rem, .8rem + .45vw, 1.0625rem); line-height: 1.45; font-weight: 400; color: #b1b5c9; }
.gcard__icon, .scard__icon {
  flex: none; display: grid; place-items: center; width: clamp(4rem, 3rem + 3vw, 5.85rem); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(154, 113, 255, .3); color: #d9ccff;
  background: radial-gradient(circle closest-side, rgba(154, 113, 255, .2), rgba(154, 113, 255, .08) 70%, rgba(154, 113, 255, .03));
}
.gcard__icon svg, .scard__icon svg { width: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); height: auto; aspect-ratio: 1; stroke-width: 1.2; }

.scard { position: relative; display: block; overflow: hidden; border-radius: 1.35rem; padding: 2rem 1.75rem; text-decoration: none; }
.scard--light { background: #eef2fc; border: 1px solid rgba(154, 113, 255, .75); text-align: center; display: grid; justify-items: center; align-content: center; gap: .75rem; padding: 1.4rem 1.5rem; min-height: 14rem; }
.scard--light .scard__icon { color: var(--violet); border-color: var(--violet); background: rgba(154, 113, 255, .06); }
.scard--light .scard__icon svg { width: clamp(1.7rem, 1.2rem + 1vw, 2.2rem); }
.scard--light h3 { font-size: clamp(1.25rem, 1rem + .9vw, 1.45rem); font-weight: 700; color: #171b2f; line-height: 1.3; margin-top: .35rem; }
.scard--light p { font-size: 1rem; line-height: 1.45; font-weight: 400; color: #555f75; max-width: 19rem; }
.scard--violet {
  background: #9a71ff; color: #fff; min-height: 11.5rem; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.1rem 1.4rem 1.2rem; transition: transform .25s ease, box-shadow .25s ease;
}
.scard--violet > * { position: relative; z-index: 1; }
.scard--violet .scard__deco { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; }
.scard--violet:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(122, 77, 232, .45); }
.scard__kicker { position: absolute !important; left: 1.4rem; top: 1.1rem; font-weight: 400; font-size: 1rem; line-height: 1.3; }
.scard__text { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 700; line-height: 1.2; }
.scard__text strong { display: block; font-size: clamp(2.4rem, 1.8rem + 1.8vw, 3.1rem); font-weight: 800; line-height: .98; letter-spacing: -.01em; }
.scard__arrow { position: absolute !important; right: 1.4rem; top: 1rem; width: 1.2rem; height: auto; aspect-ratio: 16.1 / 23.6; color: #fff; }
.scard__tri { position: absolute !important; right: 1.7rem; bottom: 4.4rem; width: 3.7rem; height: auto; max-width: none; }

/* ---------- Processo ---------- */
.process { overflow-x: clip; background: var(--grid); }
/* névoa violeta do bloco "processo": sobe devagar, tem o pico perto do botão e some antes do próximo bloco */
.process::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -9rem; pointer-events: none;
  background: linear-gradient(180deg, rgba(154, 113, 255, 0) 18%, rgba(154, 113, 255, .02) 32%, rgba(154, 113, 255, .07) 46%, rgba(154, 113, 255, .15) 60%, rgba(154, 113, 255, .26) 74%, rgba(154, 113, 255, .3) 84%, rgba(154, 113, 255, .14) 93%, rgba(154, 113, 255, 0) 100%);
}
.process__bg { position: absolute; inset: 0; pointer-events: none; }
.figure--corner { display: none; position: absolute; right: -13rem; top: 10.6rem; width: 32.4rem; --tf: rotate(-4deg); transform: var(--tf); transform-origin: top left; }
.process__inner { text-align: center; }
.process__lead { margin: 1.5rem auto 0; max-width: 48rem; color: var(--muted); line-height: 1.8; }
.process__strong { margin-top: 1.5rem; font-weight: 700; }
.process__note { margin-top: clamp(2rem, 4vw, 3rem); color: #cdc6dc; line-height: 1.8; }

.timeline {
  position: relative; margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 72.5rem; text-align: left;
  display: grid; gap: 1.5rem; padding-left: 1.5rem;
}
.timeline li { position: relative; display: grid; gap: .25rem; }
.timeline li:nth-child(1) { --i: 0; } .timeline li:nth-child(2) { --i: 1; } .timeline li:nth-child(3) { --i: 2; }
.timeline li:nth-child(4) { --i: 3; } .timeline li:nth-child(5) { --i: 4; } .timeline li:nth-child(6) { --i: 5; }

/* trilho tênue + trecho brilhante que avança de uma etapa à outra (4,2s no total, 0,7s por etapa) */
.timeline::before, .timeline::after { content: ""; position: absolute; left: 0; top: .8rem; bottom: 0; width: 1px; }
.timeline::before { background: rgba(154, 113, 255, .2); }
.timeline::after { background: linear-gradient(180deg, rgba(166, 125, 255, .35), #a67dff 90%, #efe7ff); transform-origin: top; }
.timeline li::before {
  content: ""; position: absolute; left: calc(-1.5rem - 4px); top: .35rem; width: 9px; height: 9px; border-radius: 50%;
  background: #a67dff; box-shadow: 0 0 12px #a67dff;
}
.js .timeline:not(.is-visible)::after { transform: scaleY(0); }
.js .timeline:not(.is-visible) li::before { background: rgba(166, 125, 255, .35); box-shadow: none; }
.js .timeline:not(.is-visible) li > span { opacity: .35; }
.js .timeline.is-visible::after { animation: tl-line-y 4.2s linear both; }
.js .timeline.is-visible li::before { animation: tl-dot .5s ease both; animation-delay: calc(var(--i) * .7s); }
.js .timeline.is-visible li > span { animation: tl-text .6s ease both; animation-delay: calc(var(--i) * .7s); }
@keyframes tl-line-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tl-line-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tl-dot {
  from { background: rgba(166, 125, 255, .35); box-shadow: 0 0 0 rgba(166, 125, 255, 0); transform: scale(.7); }
  60% { transform: scale(1.35); }
  to { background: #a67dff; box-shadow: 0 0 12px #a67dff; transform: scale(1); }
}
@keyframes tl-text { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.timeline__n { font-weight: 700; font-size: .7rem; color: #c3a6ff; line-height: 1.2; }
.timeline__t { font-weight: 700; font-size: .875rem; line-height: 1.4; color: #fafafd; max-width: 8rem; }

/* ---------- Números ---------- */
.stats { padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 6vw, 4rem); }
.stats__grid { display: grid; gap: 2rem; }
.stat { display: grid; gap: .5rem; align-content: start; position: relative; }
.stat dt { font-weight: 800; font-size: clamp(2.25rem, 1.6rem + 2.5vw, 2.6rem); line-height: 1.2; color: #a67dff; }
.stat dt.stat__text { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2rem); }
.stat dd { font-size: .875rem; line-height: 1.6; color: #fff; max-width: 22rem; }
.stat--ruled::before { content: ""; position: absolute; left: 0; top: -1.1rem; width: min(100%, 22rem); height: 1px; background: var(--violet); }

/* ---------- Contato ---------- */
.contact { overflow-x: clip; padding-top: clamp(4.5rem, 8vw, 7rem); border-top: 1px solid rgba(224, 184, 255, .85); }
/* névoa violeta bem tênue acima da linha: mais forte colada nela e esmaecendo para cima (sem borda) */
.contact::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: 4.1rem; pointer-events: none;
  background: linear-gradient(0deg, rgba(154, 113, 255, .2) 0%, rgba(154, 113, 255, .14) 25%, rgba(154, 113, 255, .075) 52%, rgba(154, 113, 255, .025) 78%, rgba(154, 113, 255, 0) 100%);
}
.node--c1 { left: calc(50% - 23rem); top: -2px; }   /* 1px da borda + 1px de margem interna do triângulo: o topo encosta na linha */
.node--c2 { left: calc(50% - 22rem); bottom: 9.6rem; transform: rotate(-90deg); }
.contact__bg { position: absolute; inset: 0; pointer-events: none; }
.contact__grid { display: grid; gap: 2.5rem; align-items: start; }
.contact__copy { display: grid; gap: 1.1rem; max-width: 28rem; padding-top: 1.5rem; }
.contact__copy .h2--left { text-wrap: wrap; line-height: 1; margin-bottom: 1.6rem; }
.contact__copy p { line-height: 1.8; }
.contact__ok { font-weight: 700; font-size: 1.25rem; line-height: 1.4 !important; }
.contact__strong { font-weight: 700; color: #b69aff; line-height: 1.5 !important; }

.form-card { background: #fff; color: #3b3b3b; border-radius: 17px; padding: clamp(1.25rem, 3vw, 1.5rem); width: 100%; max-width: 29.2rem; justify-self: center; }
.form-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1.2; color: #434343; margin-bottom: 1.25rem; }
.field { display: grid; gap: .5rem; margin-bottom: 1.15rem; }
.field label { font-size: .75rem; font-weight: 700; line-height: 1.2; color: #3b3b3b; }
.field input, .field textarea {
  width: 100%; border: 0; border-radius: 20px; background: #d3d3d3; color: #1b1b1f;
  font: inherit; font-size: 1rem; transition: box-shadow .2s, background .2s;
}
.field input { height: 2.5rem; padding: 0 1rem; }
.field textarea { padding: .65rem 1rem; resize: vertical; min-height: 6.25rem; }
.field input::placeholder { color: #6b6b6b; }
.field input:focus, .field textarea:focus { outline: none; background: #e3e3e3; box-shadow: 0 0 0 3px rgba(122, 77, 232, .4); }
.field input[aria-invalid="true"] { background: #f3dcdc; box-shadow: 0 0 0 2px #c4262e; }
.form-card .btn { box-shadow: none; border-radius: 27px; min-height: 3.375rem; font-size: 1rem; }
.form-card .btn:hover:not([disabled]) { box-shadow: none; transform: translateY(-1px); }
.field__error { min-height: 0; font-size: .75rem; font-weight: 500; color: #b3202a; }
.field__error:empty { display: none; }
/* Mensagens geradas pelo script do PipeGrid dentro do cartão: estado do envio (.pg-status, + --erro) e sucesso (.pg-sucesso, irmão do formulário) */
/* Depois do envio o script esconde o formulário e põe .pg-sucesso ao lado dele. Os dois dividem a mesma célula da grade e o
   formulário continua ocupando espaço (só invisível), então o cartão mantém a altura e a mensagem fica centralizada nele. */
.form-card { display: grid; }
.form-card > * { grid-area: 1 / 1; min-width: 0; }
.form-card > form[hidden] { display: block; visibility: hidden; pointer-events: none; }
.form-card > .pg-sucesso { align-self: center; }
.pg-status { margin-top: .85rem; font-size: .875rem; font-weight: 500; text-align: center; color: #3b3b3b; }
.pg-status[hidden], .pg-status:empty { display: none; }
.pg-status--erro { color: #b3202a; }
.pg-sucesso {
  display: grid; justify-items: center; gap: 1rem; padding: 2rem 0; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; line-height: 1.35; color: #171b2f;
}
.pg-sucesso::before {
  content: ""; width: 3rem; height: 3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%239A71FF'/%3E%3Cpath d='m7.5 12.5 3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding-block: 1.75rem; position: relative; z-index: 1; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; font-size: .75rem; color: var(--muted); }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 40em) {
  .chips { max-width: 32rem; }
  .stats__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .stat--ruled::before { top: -2rem; }
}

@media (min-width: 48em) {
  .t-card { flex-basis: 24.5rem; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .timeline { grid-template-columns: repeat(6, 1fr); gap: 1rem; padding-left: 0; }
  .timeline::before, .timeline::after { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .timeline::after { background: linear-gradient(90deg, rgba(166, 125, 255, .35), #a67dff 92%, #efe7ff); transform-origin: left; }
  .js .timeline:not(.is-visible)::after { transform: scaleX(0); }
  .js .timeline.is-visible::after { animation-name: tl-line-x; }
  .timeline li { padding-top: 1.6rem; }
  .timeline li::before { left: 0; top: -4px; }
}

@media (min-width: 64em) {
  .about__grid { grid-template-columns: 1fr 24.2rem 1fr; align-items: start; justify-items: stretch; gap: 2.2rem; }
  .about .logo-slot { width: 100%; justify-self: center; }
  .about__text--left { justify-self: end; text-align: right; margin-top: 9rem; }
  .about__text--right { justify-self: start; margin-top: 17rem; max-width: 22.6rem; }
  .node, .big-mark--r, .figure--line { display: block; }
  .bg-chevs { display: block; position: absolute; left: 0; right: 0; top: 6.05rem; height: 23.9rem; z-index: 0; pointer-events: none; overflow-x: clip; }
  .js .bg-chevs { position: fixed; top: 0; }
  .js .bg-chevs.is-docked { position: absolute; }
  /* o brilho lateral do hero fica na mesma altura das setas: centro = centro da silhueta flutuante (topo 82px, altura = largura × 611/387);
     10px = 82px − header (a camada .hero__bg começa abaixo do menu); 18rem = metade da altura do brilho */
  .hero .blob { top: calc(10px + min(12.1rem, 40vw) * 611 / 387 - 18rem); }
  /* ===== Garantias: medidas do Figma (1u = 1px do design; container de 1206px) ===== */
  .guarantees__grid { margin-top: calc(var(--u) * 64); grid-template-columns: 775fr 421fr; column-gap: calc(var(--u) * 10); row-gap: 0; align-items: start; }
  .guarantees__main { gap: 0; margin-top: calc(var(--u) * 1); }
  .guarantees__side { gap: calc(var(--u) * 15); }
  .gcard { display: block; height: calc(var(--u) * 189); min-height: 0; padding: 0; border-radius: calc(var(--u) * 29); }
  .gcard + .gcard { margin-top: calc(var(--u) * 9); }
  .gcard:nth-child(3) { margin-top: calc(var(--u) * 12); }
  .gcard:nth-child(1) { background: radial-gradient(circle calc(var(--u) * 319.5) at calc(var(--u) * -18.5) calc(var(--u) * 79.5), rgba(154, 113, 255, .72) 0%, rgba(154, 113, 255, .22) 38%, rgba(154, 113, 255, 0) 100%), radial-gradient(circle calc(var(--u) * 319.5) at calc(var(--u) * 782.5) calc(var(--u) * 200.5), rgba(154, 113, 255, .72) 0%, rgba(154, 113, 255, .22) 38%, rgba(154, 113, 255, 0) 100%), radial-gradient(circle calc(var(--u) * 160) at calc(var(--u) * 85.5) calc(var(--u) * 138.5), rgba(154, 113, 255, .72) 0%, rgba(154, 113, 255, .22) 38%, rgba(154, 113, 255, 0) 100%), #06040a; }
  .gcard:nth-child(2), .gcard:nth-child(3) { background: radial-gradient(circle calc(var(--u) * 160) at calc(var(--u) * 91) calc(var(--u) * 87), rgba(154, 113, 255, .72) 0%, rgba(154, 113, 255, .22) 38%, rgba(154, 113, 255, 0) 100%), radial-gradient(circle calc(var(--u) * 319.5) at calc(var(--u) * 754.5) calc(var(--u) * 246.5), rgba(154, 113, 255, .72) 0%, rgba(154, 113, 255, .22) 38%, rgba(154, 113, 255, 0) 100%), radial-gradient(circle calc(var(--u) * 319.5) at calc(var(--u) * -44.5) calc(var(--u) * 92.5), rgba(154, 113, 255, .72) 0%, rgba(154, 113, 255, .22) 38%, rgba(154, 113, 255, 0) 100%), #06040a; }
  .gcard__icon { position: absolute; left: calc(var(--u) * 35); top: calc(var(--u) * 37); width: calc(var(--u) * 112); height: calc(var(--u) * 112); margin: 0; background: none; color: #e7dbff; border: 1px solid rgba(154, 113, 255, .2); }
  .gcard__icon::before, .gcard__icon::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(154, 113, 255, .2); }
  .gcard__icon::after { transform: translateY(calc(var(--u) * 2)); }
  .gcard__icon svg { width: calc(var(--u) * 68); stroke-width: 1.06; }
  .gcard__text { position: absolute; left: calc(var(--u) * 179); top: calc(var(--u) * 33); right: calc(var(--u) * 24); }
  .gcard h3 { font-size: calc(var(--u) * 29); line-height: calc(var(--u) * 38); }
  .gcard p { margin-top: calc(var(--u) * 22); font-size: calc(var(--u) * 21); line-height: calc(var(--u) * 27); max-width: calc(var(--u) * 473); }
  .gcard:nth-child(1) p { max-width: calc(var(--u) * 567); }

  .scard--light { position: relative; display: block; height: calc(var(--u) * 340); min-height: 0; padding: 0; border-radius: calc(var(--u) * 41); }
  .scard--light .scard__icon { position: absolute; left: 50%; top: calc(var(--u) * 39); transform: translateX(-50%); width: calc(var(--u) * 112); height: calc(var(--u) * 112); background: none; border: 1px solid var(--violet); }
  .scard--light .scard__icon svg { width: calc(var(--u) * 68); stroke-width: 1.6; }
  .scard--light h3 { position: absolute; left: 0; right: 0; top: calc(var(--u) * 170); margin: 0; font-size: calc(var(--u) * 29); line-height: calc(var(--u) * 38); }
  .scard--light p { position: absolute; left: 50%; top: calc(var(--u) * 227); width: calc(var(--u) * 357); max-width: none; transform: translateX(-50%); font-size: calc(var(--u) * 21); line-height: calc(var(--u) * 27); }

  .scard--violet { display: block; height: calc(var(--u) * 234); min-height: 0; padding: 0; border-radius: calc(var(--u) * 41); }
  .scard__kicker { left: calc(var(--u) * 31); top: calc(var(--u) * 24); font-size: calc(var(--u) * 21); line-height: calc(var(--u) * 27); }
  .scard__text { position: absolute; left: calc(var(--u) * 31); top: calc(var(--u) * 108); font-size: calc(var(--u) * 29); line-height: calc(var(--u) * 38); font-weight: 700; }
  .scard__text strong { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 64); line-height: calc(var(--u) * 38); font-weight: 700; letter-spacing: 0; }
  .scard__arrow { left: calc(var(--u) * 373); right: auto; top: calc(var(--u) * 21); width: calc(var(--u) * 21.5); height: calc(var(--u) * 34); }
  .scard__tri { left: calc(var(--u) * 305); right: auto; bottom: auto; top: calc(var(--u) * 99); width: calc(var(--u) * 68); height: calc(var(--u) * 36); }
  .contact__grid { grid-template-columns: 1fr minmax(0, 29.2rem); gap: 5rem; }
  .form-card { justify-self: end; }
}

@media (min-width: 80em) {
  .blob--l { left: -22rem; }
  .blob--r { right: -22rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Linha do "sistema atual": nasce na borda da tela e entra no monitor (grade fixa p/ calcular o comprimento) */
@media (min-width: 56em) {
  .pain__grid { grid-template-columns: 12rem minmax(0, 32rem); justify-content: center; align-items: center; column-gap: 5rem; }
  .pain__outcome { max-width: 32rem; margin-left: calc(50% - 7.5rem); }
  .chips { position: relative; }
  .chips::before { content: ""; position: absolute; left: -3.2rem; top: 1.3rem; bottom: 1.3rem; width: 1px; background: var(--violet); }
  .chips .chip::before { content: ""; position: absolute; right: 100%; top: 50%; width: 3.2rem; height: 1px; background: var(--violet); }
  .chips .chip::after { content: ""; position: absolute; left: -.3rem; top: 50%; width: .45rem; height: .45rem; background: var(--violet); transform: translate(0, -50%) rotate(45deg); }
  .pc::after { content: ""; position: absolute; left: calc(50% + 3.5rem); top: 2.4rem; width: 4.3rem; height: 1px; background: var(--violet); }
  .pain__outcome { display: block; }
  .pain__outcome .chip--small { margin-left: -17rem; width: 22.5rem; }
  .pain__outcome .chip--strong { margin-top: -.15rem; width: max-content; max-width: 27rem; }
  .pc::before { content: ""; position: absolute; z-index: -1; right: 50%; top: 2.4rem; width: calc(50vw - 18.5rem); height: 1px; background: #2c2148; }
  .pc__cap { display: block; position: absolute; z-index: -1; right: calc(50% + 50vw - 18.5rem - 6px); top: calc(2.4rem - 1px); width: 6px; height: 3px; background: var(--violet); }
  .pc__packet { display: block; }
}

@media (min-width: 90em) {
  .figure--corner, .big-mark--l { display: block; }
}

/* Textura de grade fina + lavagem violeta, como no Figma */
.hero { background: radial-gradient(ellipse 90% 65% at 50% 15%, rgba(102, 39, 255, .16) 0%, rgba(102, 39, 255, .11) 22%, rgba(102, 39, 255, .06) 42%, rgba(102, 39, 255, .022) 62%, rgba(102, 39, 255, .005) 80%, rgba(102, 39, 255, 0) 92%), var(--grid); }
.pain { background: var(--grid), var(--pain-wash); }
.about, .services, .testimonials, .stats, .contact { background: var(--grid); }
@media (min-width: 56em) {
  .tab, .node--hero { display: block; }
}

@media (max-width: 55.99em) {
  .pain { border-top: 1px solid rgba(154, 113, 255, .7); }
}

/* ---------- Logo de fundo (flutua → encaixa → acende) ---------- */
main { position: relative; }
.logo-slot { aspect-ratio: 387 / 611; }
.slot-fallback { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 60px rgba(92, 68, 153, .55)); }
.js .slot-fallback { display: none; }

.bg-logo { display: none; }
.js .bg-logo {
  display: block; position: fixed; top: 82px; left: 0; z-index: 0; width: min(24.2rem, 80vw);
  pointer-events: none; contain: layout style;
}
.bg-logo.is-docked { position: absolute; }
.bg-logo__svg {
  display: block; width: 100%; height: auto; aspect-ratio: 387 / 611; overflow: visible;
  animation: logo-float 7s ease-in-out infinite;
}
.bg-logo__lit { opacity: 0; transition: opacity 1.2s ease; }
.bg-logo.is-lit .bg-logo__lit { opacity: 1; }
.bg-logo::before {
  content: ""; position: absolute; left: -45%; top: -12%; width: 190%; height: 124%; pointer-events: none;
  background: radial-gradient(closest-side, var(--halo)); opacity: 0; transition: opacity 1.2s ease;
}
.bg-logo.is-lit::before { opacity: .55; }

/* --amp (1 → 0) é reduzido pelo JS conforme a logo se aproxima do encaixe, para não "pular" ao parar */
@keyframes logo-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, calc(var(--amp, 1) * -18px), 0) rotate(calc(var(--amp, 1) * 1.4deg)); }
}
/* as setas neon laterais ficam paradas: só a logo (U) flutua */

/* Elementos decorativos de fundo ([data-parallax]) têm vida própria, exceto a logo (U). O JS usa só `translate` (parallax da rolagem);
   o resto usa propriedades que se compõem a ele e rodam no compositor (GPU), sem recalcular estilo a cada quadro:
   - bg-float: sobe/desce (`transform`) e balança (`rotate`);
   - bg-breathe: "respira" (`scale`), com ciclo de outra duração, para o conjunto não repetir o mesmo padrão a cada volta;
   - bg-pulse (só brilhos): a intensidade (`opacity`) pulsa.
   Easing senoidal, sem arranque/freada bruscos. Cada elemento ajusta --float-y/--float-rot/--float-dur/--float-delay,
   --breathe/--breathe-dur e --pulse-min/--pulse-max. --tf é o transform estático do elemento, preservado na animação. */
@keyframes bg-float {
  0%, 100% { transform: translate3d(0, 0, 0) var(--tf, scale(1)); rotate: 0deg; }
  50% { transform: translate3d(0, calc(-1 * var(--float-y, 28px)), 0) var(--tf, scale(1)); rotate: var(--float-rot, 0deg); }
}
@keyframes bg-breathe {
  0%, 100% { scale: 1; }
  50% { scale: var(--breathe, 1.05); }
}
@keyframes bg-pulse {
  0%, 100% { opacity: var(--pulse-max, 1); }
  50% { opacity: var(--pulse-min, .6); }
}
.js [data-parallax] {
  --ease: cubic-bezier(.37, 0, .63, 1);
  animation:
    bg-float var(--float-dur, 12s) var(--ease) var(--float-delay, 0s) infinite,
    bg-breathe var(--breathe-dur, 17s) var(--ease) var(--breathe-delay, 0s) infinite;
  will-change: transform, rotate, scale;
}
.js .blob[data-parallax], .js .services__glow[data-parallax] {
  animation:
    bg-float var(--float-dur, 12s) var(--ease) var(--float-delay, 0s) infinite,
    bg-breathe var(--breathe-dur, 17s) var(--ease) var(--breathe-delay, 0s) infinite,
    bg-pulse var(--pulse-dur, 8s) var(--ease) var(--pulse-delay, 0s) infinite;
  will-change: transform, rotate, scale, opacity;
}
.hero .blob { --float-dur: 9s; --float-y: 30px; --breathe: 1.1; --breathe-dur: 13s; --pulse-dur: 7s; --pulse-min: .55; }
.about .blob { --float-dur: 12s; --float-y: 40px; --float-delay: -4s; --breathe: 1.12; --breathe-dur: 16s; --breathe-delay: -5s; --pulse-dur: 9s; --pulse-delay: -3s; --pulse-min: .5; }
.services__glow { --float-dur: 13s; --float-y: 30px; --float-delay: -6s; --breathe: 1.1; --breathe-dur: 18s; --breathe-delay: -9s; --pulse-dur: 10s; --pulse-delay: -5s; --pulse-max: .9; --pulse-min: .5; }
/* os "code" já nascem girados -15° em torno do canto superior esquerdo; o balanço precisa ter o MESMO sentido (negativo),
   senão ele cancela a subida e a palavra parece parada */
.big-mark--r { --float-dur: 11s; --float-y: 26px; --float-rot: -2.5deg; --float-delay: -2s; --breathe: 1.06; --breathe-dur: 15s; }
.big-mark--l { --float-dur: 11s; --float-y: 24px; --float-rot: -2.5deg; --float-delay: -7s; --breathe: 1.06; --breathe-dur: 16s; --breathe-delay: -6s; }
.figure--line { --float-dur: 10s; --float-y: 28px; --float-rot: 2deg; --float-delay: -3s; --breathe: 1.05; --breathe-dur: 14s; --breathe-delay: -4s; }
.figure--corner { --float-dur: 10s; --float-y: 32px; --float-rot: -2.2deg; --float-delay: -5s; --breathe: 1.05; --breathe-dur: 15s; --breathe-delay: -8s; }
@media (prefers-reduced-motion: reduce) {
  .bg-logo__svg, .js [data-parallax], .js .blob[data-parallax], .js .services__glow[data-parallax] { animation: none; }
}

/* ==========================================================================
   Sequência "o sistema atual não aguenta a demanda": pacotes chegam → monitor treme e falha →
   EXPLODE (flash, estrela em pixel-art, anéis, detritos) → onda de choque liga os itens, um a um.
   Estado padrão = FINAL (sem JS / movimento reduzido); o estado inicial só existe com JS.
   `.is-boom` = a sequência inteira, sozinha e uma única vez: o monitor explode e a onda de choque acende todos os itens de uma vez.
   Linha do tempo (s): pacotes 0,1–2,2 · tremor 0,3–2,3 · BOOM 2,3 · linhas 2,35–3,0 · itens 2,7 → 3,5 · frases 4,1 / 4,5
   ========================================================================== */
.pc__unit { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 70%; transform: rotate(-2deg) translateY(2px); }
.pc__screen { background: #1b0e1a; overflow: hidden; }
.pc__ui { display: block; opacity: .3; }
.pc__crack { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc__fx { position: absolute; left: 50%; top: 2.4rem; width: 0; height: 0; z-index: 3; pointer-events: none; }
.pc__fx > * { position: absolute; opacity: 0; }
.pc__flash { left: -5rem; top: -5rem; width: 10rem; height: 10rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 247, 214, .95), rgba(255, 226, 122, .55) 22%, rgba(255, 176, 46, .22) 48%, rgba(255, 106, 26, .07) 72%, rgba(255, 106, 26, 0)); }
.pc__ring { left: -1rem; top: -1rem; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid #ffcf3d; }
.pc__ring--2 { border-color: var(--violet); }
.pc__boom { left: -6.75rem; top: -6.75rem; width: 13.5rem; height: 13.5rem; max-width: none; shape-rendering: crispEdges; }
.pc__debris { left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); background: var(--c); }
.pc__smoke { left: -1.1rem; top: -.6rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(175, 160, 220, .34), rgba(175, 160, 220, .12) 55%, rgba(175, 160, 220, 0)); }
.pc__cap, .pc__packet { display: none; }
.pc__packet { position: absolute; z-index: 1; top: calc(2.4rem - 4px); right: 50%; width: 8px; height: 8px; background: var(--c); opacity: 0; }
.pc__packet::before { content: ""; position: absolute; left: -12px; top: -12px; width: 32px; height: 32px;
  background: radial-gradient(closest-side, rgba(255, 190, 70, .55), rgba(255, 190, 70, .18) 55%, rgba(255, 190, 70, 0)); }

/* ----- estado inicial (só com JS, antes de a seção entrar na tela) ----- */
.js .pain:not(.is-boom) .pc__unit { transform: none; }
.js .pain:not(.is-boom) .pc__screen { background: #171717; }
.js .pain:not(.is-boom) .pc__ui { opacity: 1; }
.js .pain:not(.is-boom) .pc__crack { opacity: 0; }
.js .pain:not(.is-boom) .chips .chip,
.js .pain:not(.is-boom) .pain__outcome .chip { opacity: 0; transform: translateX(-2rem) scale(.9); }
.js .pain:not(.is-boom) .chips::before { transform: scaleY(0); }
.js .pain:not(.is-boom) .chips .chip::before, .js .pain:not(.is-boom) .pc::after { transform: scaleX(0); }
.js .pain:not(.is-boom) .chips .chip::after { transform: translate(0, -50%) rotate(45deg) scale(0); }
.chips::before { transform-origin: top; }
.chips .chip::before, .pc::after { transform-origin: left; }
.chips .chip:nth-child(1) { --i: 0; } .chips .chip:nth-child(2) { --i: 1; } .chips .chip:nth-child(3) { --i: 2; } .chips .chip:nth-child(4) { --i: 3; }

/* ----- sequência ----- */
.pain.is-boom .legacy__tag { animation: tag-alert .3s steps(1) 4 1.2s; }
.pain.is-boom .pc__packet { animation: packet-in .85s cubic-bezier(.5, 0, .9, .6) both; animation-delay: calc(.1s + var(--k) * .17s); }
.pain.is-boom .pc__unit { animation: pc-unit 2.6s linear .3s both; }
.pain.is-boom .pc__ui { animation: ui-glitch 1.2s steps(1) 1.1s both; }
.pain.is-boom .pc__screen { animation: screen-fail .2s steps(1) 2.3s both; }
.pain.is-boom .pc__crack { animation: crack-in .2s steps(2) 2.3s both; }
.pain.is-boom .pc__flash { animation: flash .6s ease-out 2.3s both; }
.pain.is-boom .pc__boom { animation: boom 1.1s steps(7) 2.3s forwards; }
.pain.is-boom .pc__ring { animation: ring .9s ease-out 2.3s forwards; }
.pain.is-boom .pc__ring--2 { animation-delay: 2.45s; }
.pain.is-boom .pc__debris { animation: debris 1.15s cubic-bezier(.15, .7, .3, 1) forwards; animation-delay: calc(2.3s + var(--d)); }
.pain.is-boom .pc__smoke { animation: smoke 3.6s ease-out infinite; animation-delay: calc(2.6s + var(--k) * 1.2s); }
.pain.is-boom .pc::after { animation: draw-x .35s ease-out 2.35s both; }
.pain.is-boom .chips::before { animation: draw-y .35s ease-out 2.45s both; }
.pain.is-boom .chips .chip { animation: chip-pop .6s cubic-bezier(.2, .9, .3, 1) 2.7s both; }
.pain.is-boom .chips .chip::before { animation: draw-x .25s ease-out 2.55s both; }
.pain.is-boom .chips .chip::after { animation: dia-pop .45s ease-out 2.8s both; }
.pain.is-boom .pain__outcome .chip--small { animation: chip-pop .6s cubic-bezier(.2, .9, .3, 1) 2.9s both; }
.pain.is-boom .pain__outcome .chip--strong { animation: chip-pop .6s cubic-bezier(.2, .9, .3, 1) 2.9s both, strong-flash 1.2s ease 3.1s both; }

@keyframes tag-alert { 0%, 100% { color: var(--violet); border-color: var(--violet); } 50% { color: #ffb02e; border-color: #ffb02e; } }
@keyframes packet-in {
  0% { transform: translateX(calc(-1 * (50vw - 18.5rem))); opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(-3.4rem) scale(.3); opacity: 0; }
}
@keyframes pc-unit {
  0% { transform: none; }
  6% { transform: translate(1px, 0); }            12% { transform: translate(-1px, 1px) rotate(-.4deg); }
  20% { transform: translate(2px, -1px) rotate(.5deg); } 28% { transform: translate(-2px, 1px) rotate(-.7deg); }
  36% { transform: translate(2px, 2px) rotate(.8deg); }  44% { transform: translate(-3px, -1px) rotate(-1deg); }
  52% { transform: translate(3px, 1px) rotate(1.2deg); } 60% { transform: translate(-3px, 2px) rotate(-1.4deg); }
  68% { transform: translate(4px, -2px) rotate(1.6deg); } 74% { transform: translate(-4px, 2px) rotate(-1.8deg); }
  77% { transform: scale(1.14) rotate(4deg); }
  83% { transform: scale(.94) rotate(-4deg) translateY(3px); }
  91% { transform: scale(1.02) rotate(-1deg) translateY(1px); }
  100% { transform: rotate(-2deg) translateY(2px); }
}
@keyframes ui-glitch {
  0% { opacity: 1; transform: translateX(0); } 10% { opacity: .5; transform: translateX(3px); } 20% { opacity: 1; transform: translateX(-2px) skewX(6deg); }
  35% { opacity: .6; transform: translateX(2px); } 50% { opacity: 1; transform: translateX(-3px); } 62% { opacity: .4; transform: translateX(0) skewX(-8deg); }
  75% { opacity: 1; transform: translateX(2px); } 88% { opacity: .5; transform: translateX(-2px); } 100% { opacity: .3; transform: none; }
}
@keyframes screen-fail { from { background: #171717; } to { background: #1b0e1a; } }
@keyframes crack-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes flash { 0% { transform: scale(.3); opacity: 0; } 14% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes boom { 0% { transform: scale(.15); opacity: 1; } 42% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1.22); opacity: 0; } }
@keyframes ring { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(10); opacity: 0; } }
@keyframes debris {
  0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  55% { transform: translate(calc(var(--dx) * .8), calc(var(--dy) * .8)) rotate(calc(var(--rot) * .6)); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 3rem)) rotate(var(--rot)) scale(.5); opacity: 0; }
}
@keyframes smoke { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 18% { opacity: 1; } 100% { transform: translate(var(--sx), -4.5rem) scale(2.4); opacity: 0; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes draw-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes chip-pop {
  0% { opacity: 0; transform: translateX(-2.2rem) scale(.88); }
  60% { opacity: 1; transform: translateX(.35rem) scale(1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes dia-pop {
  0% { transform: translate(0, -50%) rotate(45deg) scale(0); }
  60% { transform: translate(0, -50%) rotate(45deg) scale(1.9); }
  100% { transform: translate(0, -50%) rotate(45deg) scale(1); }
}
@keyframes strong-flash { 0%, 100% { outline-color: var(--violet); } 40% { outline-color: #e7dbff; } }

@media (prefers-reduced-motion: reduce) {
  .pain.is-boom *, .pain.is-boom *::before, .pain.is-boom *::after { animation-delay: 0s !important; }
  .pc__smoke, .pc__packet { animation: none !important; }
}

@media (min-width: 56em) {
  .pc__cap, .pc__packet { display: block; }
}

/* ==========================================================================
   "Quanto custa continuar…" → rolagem fixa: a seção fica presa sob o menu e a rolagem CONDUZ a sequência da
   primeira parte, a troca para a segunda ("Sua empresa enfrenta algum desses cenários?") e a entrada dos
   itens, um a um (ver painScroll em main.js). Em telas pequenas/baixas, ou sem JS, as duas partes ficam
   empilhadas, sem fixar.
   ========================================================================== */
.pain__slide--2 { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.pain2 { display: grid; justify-items: center; text-align: center; }
.pain2__title { max-width: 42rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); line-height: 1.2; color: var(--ink); text-wrap: balance; }
.pain2__list { margin-top: 1.75rem; display: grid; justify-items: center; gap: .875rem; width: 100%; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem; max-width: 100%;
  padding: .625rem .9375rem; min-height: 2.625rem; border-radius: 23.5px;
  background: rgba(23, 23, 23, .45); border: 1px solid #4a0c01; backdrop-filter: blur(2.9px);
  font-weight: 700; font-size: 1rem; line-height: 1.25; color: #fff; text-align: left;
}
.pill__x { width: 1rem; height: 1rem; flex: none; color: #ff5356; }
.pain2__cta {
  margin-top: 2.2rem; width: min(100%, 40.25rem); padding: .875rem clamp(1.25rem, 6vw, 4.2rem);
  background: var(--line); border: 1px solid var(--violet); border-radius: 23.5px; backdrop-filter: blur(2.9px);
  font-weight: 700; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.2; color: #fff;
}

/* O progresso da troca entre as partes (0 → 1) é uma propriedade registrada para poder ser interpolada pela transition */
@property --cut { syntax: "<number>"; inherits: true; initial-value: 0; }
.pain__scan { display: none; }

@media (min-width: 56em) and (min-height: 46em) {
  /* a seção mantém o tamanho/aparência de sempre: ela só fica presa (sticky) sob o menu enquanto o
     contêiner transparente .pain-wrap, mais alto que ela, é rolado. O fundo passa para o contêiner para
     não existir vão nem emenda quando a seção está presa. */
  .js .pain-wrap { position: relative; background: var(--grid), var(--pain-wash); }
  .js .pain-wrap::after { content: ""; display: block; height: 440px; }   /* rolagem extra enquanto ela fica presa: curta (a troca ocorre com ~140px e depois da pausa sobram ~300px até soltar); precisa estar no conteúdo do pai: o sticky não conta padding */
  .js .pain { position: sticky; top: calc(var(--header-h) - 1px); background: none; }   /* -1px: a linha do topo da seção fica sob o menu */

  /* TROCA "SISTEMA ANTIGO → NOVO": a rolagem só dispara (.is-second); a varredura tem tempo próprio.
     Uma linha de varredura de pixels desce pela seção: acima dela já está a parte nova (entra nítida e assenta),
     abaixo ainda a antiga, que treme em glitch, desfoca e cai. Voltar a rolar faz a varredura subir. */
  .js .pain { --cut: 0; --bell: calc(1 - (2 * var(--cut) - 1) * (2 * var(--cut) - 1));
    /* folgas do recorte (só nas pontas: no meio da varredura o corte é exato, sem sobreposição) */
    --ra: calc((1 - var(--cut)) * (1 - var(--cut))); --rb: calc(var(--cut) * var(--cut));
    --ea: calc(var(--ra) * var(--ra) * 3rem); --eb: calc(var(--rb) * var(--rb) * 3rem);
    transition: --cut 1.4s cubic-bezier(.65, 0, .25, 1); }
  .js .pain.is-second { --cut: 1; }
  .js .pain__slides { position: relative; display: grid; }   /* as duas partes ocupam o mesmo lugar; a seção mantém a altura da primeira */
  .js .pain__slide { grid-area: 1 / 1; display: grid; align-content: center; margin: 0; }
  .js .pain__slide--1 {
    clip-path: inset(calc(var(--cut) * 100% - var(--ea)) -100vw calc(var(--ea) * -1) -100vw);
    filter: blur(calc(var(--cut) * 3px)); opacity: calc(1 - var(--cut) * .45);
    translate: calc(sin(var(--cut) * 38) * var(--bell) * 9px) calc(var(--cut) * 1.75rem);
  }
  .js .pain__slide--2 {
    contain: size;   /* a altura vem só da primeira parte: o recorte das duas coincide */
    clip-path: inset(calc(var(--eb) * -1) -100vw calc((1 - var(--cut)) * 100% - var(--eb)) -100vw);
    filter: blur(calc((1 - var(--cut)) * 4px)); translate: 0 calc((1 - var(--cut)) * -1.75rem);
  }
  .js .pain__scan {
    display: block; position: absolute; left: 0; right: 0; top: calc(var(--cut) * 100%); height: 0; z-index: 3;
    pointer-events: none; opacity: var(--bell);
  }
  .js .pain__scan::before {   /* núcleo da linha */
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background: linear-gradient(90deg, transparent, #bda3ff 14%, #fff 50%, #bda3ff 86%, transparent);
  }
  .js .pain__scan::after {   /* brilho: queda suave nos dois sentidos, sem borda */
    content: ""; position: absolute; left: 0; right: 0; top: -7rem; height: 14rem;
    background: radial-gradient(closest-side, var(--halo)); opacity: .55;
  }
  .js .pain__scan i, .js .pain__scan i::before {   /* fileiras de "pixels" abaixo e acima do núcleo */
    content: ""; position: absolute; left: 0; right: 0; height: 6px; top: 3px;
    background: repeating-linear-gradient(90deg, rgba(154, 113, 255, .95) 0 6px, transparent 6px 14px);
    -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    animation: scan-px .3s steps(2) infinite;
  }
  .js .pain__scan i::before { top: -15px; background-position: 7px 0; opacity: .6; }
}
@keyframes scan-px { from { background-position-x: 0; } to { background-position-x: 14px; } }
@media (min-width: 56em) and (min-height: 46em) and (prefers-reduced-motion: reduce) {
  .js .pain { transition: none; }
  .js .pain__scan { display: none; }
}
.pill:nth-child(1) { --i: 0; } .pill:nth-child(2) { --i: 1; } .pill:nth-child(3) { --i: 2; }
.pill:nth-child(4) { --i: 3; } .pill:nth-child(5) { --i: 4; } .pill:nth-child(6) { --i: 5; }