/* 03-secoes.css — Parceria, seções, rastreio (layout), vantagens, público, chamada final e rodapé.
   Os arquivos css/ são carregados em ordem numérica pelo index.html: a ordem importa (cascata). */
/* ---------- Parceria Sindaruc (destaque) ---------- */
.partner {
  background: var(--green-950);
  color: var(--paper);
  padding: 4.5rem 0;
  position: relative;
  overflow: hidden;
}
.partner::before {
  content: '';
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 130, 210, 0.22), transparent 70%);
  top: -200px;
  left: -140px;
  pointer-events: none;
}
.partner-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
  position: relative;
}
/* --- Cartão da parceria ---
   .partner-stage faz a entrada; .partner-card é o cartão branco que flutua. As classes
   .pc-anim (vai animar) e .is-signed (seção apareceu) vêm do JS: sem JS, ou com
   "reduzir movimento", o cartão aparece pronto e parado. */
.partner-stage {
  perspective: 900px;
}
.partner-card {
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 2.4rem 2rem;
  display: grid;
  place-items: center;
  box-shadow: calc(var(--sx, 0) * 1px) calc(24px + var(--sy, 0) * 1px) 55px -18px
    rgba(0, 0, 0, 0.45);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-1.2deg);
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.6s ease;
}
/* reflexo dourado de "credencial plastificada" */
.partner-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 32%,
    rgba(214, 178, 74, 0.2) 44%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(214, 178, 74, 0.2) 56%,
    rgba(255, 255, 255, 0) 68%
  );
  background-size: 260% 100%;
  background-position: var(--gx, 110%) 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.partner-logo {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 381.8 / 159;
}
.partner-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* entrada: estado inicial só quando o JS vai animar */
.pc-anim .partner-card {
  opacity: 0;
  transform: translateY(40px) rotate(-9deg) scale(0.92);
}
.pc-anim .pl-azul {
  opacity: 0;
  transform: translateY(12px);
}
.pc-anim .pl-ouro,
.pc-anim .pl-parana {
  clip-path: inset(0 100% 0 0);
}
.pc-anim .partner-seal {
  opacity: 0;
  transform: scale(1.8) rotate(-10deg);
}
.pc-anim.is-signed .partner-card {
  opacity: 1;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-1.2deg);
  transition:
    opacity 0.5s ease,
    transform 0.9s cubic-bezier(0.34, 1.3, 0.64, 1),
    box-shadow 0.6s ease;
}
.pc-anim.is-signed .pl-azul {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease 0.45s,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}
/* ordem: "Sindaruc" sobe, depois arco + "PR" se desenham, por último "Paraná" */
.pc-anim.is-signed .pl-ouro {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
}
.pc-anim.is-signed .pl-parana {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1) 1.3s;
}
.pc-anim.is-signed .partner-seal {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.2s ease 1.95s,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.95s;
}
/* depois da entrada: o cartão flutua devagar e o reflexo passa de tempos em tempos */
.pc-anim.is-signed .partner-card {
  animation: pcFloat 8s ease-in-out 2.6s infinite;
}
.pc-anim.is-signed .partner-card::after {
  animation: pcGlintLoop 7s ease-in-out 2.5s infinite;
}
@keyframes pcFloat {
  0%,
  100% {
    transform: rotateX(0deg) rotateY(0deg) rotate(-1.2deg);
  }
  33% {
    transform: rotateX(4deg) rotateY(-6deg) rotate(-1.2deg) translateY(-4px);
  }
  66% {
    transform: rotateX(-3deg) rotateY(5deg) rotate(-1.2deg) translateY(2px);
  }
}
@keyframes pcGlintLoop {
  0% {
    opacity: 1;
    background-position: 110% 0;
  }
  20%,
  100% {
    opacity: 1;
    background-position: -10% 0;
  }
}
.partner-seal {
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #004587;
  border: 1.5px solid #b38601;
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
}
.partner h2 {
  color: var(--paper);
}
.partner .kicker {
  color: #aec4f2;
}
.partner p {
  color: rgba(251, 250, 246, 0.78);
  font-size: 1.02rem;
  margin-bottom: 1rem;
}
.partner p strong {
  color: #f5d06a;
}
.partner-points {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
.partner-points span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: rgba(251, 250, 246, 0.9);
}
.partner-points svg {
  color: #f5d06a;
  flex: none;
}
@media (max-width: 960px) {
  .partner-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .partner-card {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* ---------- Sections ---------- */
section {
  padding: 5.5rem 0;
}
.section-head {
  max-width: 44rem;
  margin-bottom: 3.2rem;
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}
.kicker {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kicker);
  display: block;
  margin-bottom: 0.8rem;
}
h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--heading);
  margin-bottom: 1rem;
}
.section-head p {
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* Como funciona */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.5rem;
  position: relative;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.step-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-deep);
  letter-spacing: 0.06em;
  margin-bottom: 1.1rem;
  display: block;
}
.step-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--chip-bg);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  color: var(--chip-text);
}
.step h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 0.5rem;
}
.step p {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* --- Linha do tempo dos passos ---
   Computador: linha horizontal acima dos cartões, ligando o centro do 1º ao do 4º;
   um marcador por passo, no topo do cartão. Tablet/celular: linha vertical à
   esquerda. --steps-p (0 a 1) vem do JS pela rolagem; .is-on acende o passo.
   Sem JS (ou com "reduzir movimento") a linha aparece cheia e todos acesos. */
.steps {
  position: relative;
  padding-top: 2.6rem;
  --steps-p: 1;
}
.steps-line {
  position: absolute;
  top: 0.55rem;
  left: calc((100% - 3 * 1.4rem) / 8);
  right: calc((100% - 3 * 1.4rem) / 8);
  height: 3px;
  border-radius: 3px;
  background: var(--line-strong);
  opacity: 0.6;
}
.steps-line i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--green-700);
  transform-origin: left center;
  transform: scaleX(var(--steps-p));
}
/* marcador do passo, no eixo da linha */
.step::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(-2.6rem + 0.55rem + 1.5px - 1px); /* -1px: o top conta de dentro da borda do cartão */
  box-sizing: border-box;
  width: 21px;
  height: 21px;
  margin: -10.5px 0 0 -10.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--line-strong);
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.25s ease;
}
/* o cartão sobe no hover; o marcador desce o mesmo tanto e fica na linha */
.step:hover::before {
  transform: translateY(6px);
}
.step.is-on::before {
  background: var(--green-700);
  border-color: var(--green-700);
  box-shadow: 0 0 0 5px rgba(31, 107, 67, 0.16);
}
.step .step-icon {
  transition:
    background 0.35s ease,
    color 0.35s ease;
}
.step.is-on .step-icon {
  background: var(--green-700);
  color: #fff;
}
.steps.js-steps .step {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.35s ease;
}
.steps.js-steps .step.is-on {
  border-color: rgba(31, 107, 67, 0.35);
}

/* ---------- Rastreio (signature) ---------- */
.track {
  background: var(--green-950);
  color: var(--paper);
}
.track .kicker {
  color: #aec4f2;
}
.track h2 {
  color: var(--paper);
}
.track .section-head p {
  color: rgba(251, 250, 246, 0.72);
}
.track-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3.5rem;
  align-items: center;
}
.track-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 2rem;
}
.track-points li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.track-points .tp-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(251, 250, 246, 0.1);
  display: grid;
  place-items: center;
  color: #aec4f2;
}
.track-points strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 0.15rem;
}
.track-points p {
  font-size: 0.88rem;
  color: rgba(251, 250, 246, 0.68);
}

.feed {
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line);
  overflow: hidden;
}

@keyframes feedIn {
  to {
    opacity: 1;
    transform: none;
  }
}

.status {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.status.ok {
  background: var(--status-ok-bg);
  color: var(--status-ok-tx);
}
.status.wait {
  background: var(--status-wait-bg);
  color: var(--status-wait-tx);
}
.status.back {
  background: var(--status-back-bg);
  color: var(--status-back-tx);
}

/* ---------- Features ---------- */
.features {
  background: var(--kraft);
  position: relative;
}
.features::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg, transparent 0 34px, var(--stripe) 34px 35px);
}
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  position: relative;
}
.feat {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.6rem;
  border: 1px solid var(--line);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.feat:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--green-950);
  color: #bfd2f7;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}
.feat h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 0.5rem;
}
.feat p {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* --- Mosaico das vantagens ---
   4 colunas: preço ocupa 2x2 (cartão de destaque, verde-escuro), rastreio e equipe
   à direita dele, garantia larga embaixo deles, compre e parceria na última linha. */
.feat-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    'preco preco rastreio equipe'
    'preco preco garantia garantia'
    'compre compre parceria parceria';
}
.feat--preco {
  grid-area: preco;
}
.feat--garantia {
  grid-area: garantia;
}
.feat--rastreio {
  grid-area: rastreio;
}
.feat--equipe {
  grid-area: equipe;
}
.feat--compre {
  grid-area: compre;
}
.feat--parceria {
  grid-area: parceria;
}
.feat--preco {
  display: flex;
  flex-direction: column;
  background: var(--green-950);
  border-color: var(--green-950);
  padding: 2.4rem 2.2rem 0;
  overflow: hidden;
}
.feat--preco .feat-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  color: #7fd49b;
}
.feat--preco .feat-icon svg {
  width: 26px;
  height: 26px;
}
.feat--preco h3 {
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--paper);
}
.feat--preco p {
  font-size: 1rem;
  max-width: 30ch;
  color: rgba(251, 250, 246, 0.75);
}
/* linha de "cotação" encostada no pé do cartão */
.feat-chart {
  display: block;
  width: calc(100% + 4.4rem);
  max-width: none; /* a regra geral de svg (max-width: 100%) cortaria a sangria */
  height: 170px;
  margin: auto -2.2rem 0;
  flex: none;
}
.fc-area {
  fill: rgba(127, 212, 155, 0.12);
}
.fc-line {
  fill: none;
  stroke: #7fd49b;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.fc-dot {
  fill: #7fd49b;
  transform-box: fill-box;
  transform-origin: center;
}
/* garantia: o segundo destaque, com borda na cor da marca */
.feat--garantia {
  border-color: rgba(31, 107, 67, 0.35);
}
.feat--garantia h3 {
  font-size: 1.3rem;
}

/* --- Ícones que se desenham ---
   .js-draw (posto pelo JS) esconde os traços; .is-drawing desenha um traço após o
   outro. O JS reinicia .is-drawing ao passar o mouse. Sem JS os ícones ficam prontos. */
.fi-notif {
  fill: #7fd49b;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
}
.js-draw .feat-icon [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js-draw .fi-notif {
  transform: scale(0);
}
.js-draw .fc-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js-draw .fc-area,
.js-draw .fc-dot {
  opacity: 0;
}
.feat.is-drawing .feat-icon [pathLength] {
  animation: featDraw 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.feat.is-drawing .feat-icon [pathLength]:nth-child(2) {
  animation-delay: 0.3s;
}
.feat.is-drawing .feat-icon [pathLength]:nth-child(3) {
  animation-delay: 0.5s;
}
.feat.is-drawing .feat-icon [pathLength]:nth-child(4) {
  animation-delay: 0.65s;
}
.feat.is-drawing .fi-notif {
  animation: featPop 0.45s cubic-bezier(0.34, 1.7, 0.64, 1) 0.75s forwards;
}
/* joinha da parceria dá um aceno depois de desenhado */
.feat--parceria.is-drawing .feat-icon svg {
  transform-origin: 30% 80%;
  animation: featNod 0.6s ease-in-out 0.8s;
}
.feat.is-drawing .fc-line {
  animation: featDraw 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.4s forwards;
}
.feat.is-drawing .fc-area {
  animation: featFade 0.8s ease 1.4s forwards;
}
.feat.is-drawing .fc-dot {
  animation:
    featFade 0.2s ease 1.9s forwards,
    featPulse 2.4s ease-in-out 2.1s infinite;
}
@keyframes featDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes featPop {
  to {
    transform: scale(1);
  }
}
@keyframes featFade {
  to {
    opacity: 1;
  }
}
@keyframes featNod {
  0%,
  100% {
    transform: rotate(0);
  }
  35% {
    transform: rotate(-14deg);
  }
  70% {
    transform: rotate(6deg);
  }
}
@keyframes featPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

/* ---------- Público ---------- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.aud {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  border: 1.5px dashed var(--kraft-deep);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem;
  text-align: center;
  background: var(--surface);
  transition:
    border-color 0.2s,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.aud:hover {
  border-color: var(--accent);
  border-style: solid;
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
/* destaque ao passar o mouse: ícone na cor de destaque e o "Chamar no WhatsApp"
   vira um botão verde, deixando claro que o cartão inteiro é clicável */
.aud .aud-icon {
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
.aud:hover .aud-icon,
.aud:focus-visible .aud-icon {
  background: var(--accent);
  color: #fff;
}
.aud:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.aud-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--green-950);
  color: #bfd2f7;
  display: grid;
  place-items: center;
  margin: 0 auto 0.8rem;
}
.aud h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
}
.aud p {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}
.aud-cta {
  display: inline-block;
  align-self: center;
  margin-top: auto;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
/* o espaço acima do botão era o padding-top; agora vem de um respiro no cartão */
.aud p {
  margin-bottom: 0.6rem;
}
.aud:hover .aud-cta,
.aud:focus-visible .aud-cta {
  background: #1f9d55;
  color: #fff;
}
.aud-note {
  text-align: center;
  margin-top: 1.6rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.aud-note a {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- CTA final ---------- */
.cta {
  padding: 6rem 0;
}
.cta-card {
  background: linear-gradient(135deg, var(--green-950) 0%, var(--green-700) 100%);
  border-radius: calc(var(--radius-lg) + 8px);
  padding: 4rem 3rem;
  text-align: center;
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 130, 210, 0.35), transparent 70%);
  top: -180px;
  right: -120px;
}
.cta-card h2 {
  color: var(--paper);
  max-width: 36rem;
  margin-inline: auto;
}
.cta-card p {
  color: rgba(251, 250, 246, 0.78);
  max-width: 32rem;
  margin: 0 auto 2.2rem;
  font-size: 1.05rem;
}
.cta-ctas {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
}
/* Lista, e nao um paragrafo unico com "·" no meio do texto: como paragrafo, a
   quebra no mobile partia as frases ao meio e deixava o separador pendurado no
   fim da linha. Cada item agora quebra inteiro. O "·" e ::after (vem DEPOIS do
   item), nunca ::before — assim ele jamais abre uma linha. */
.cta-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  color: rgba(251, 250, 246, 0.6);
}
.cta-note li {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.cta-note li:not(:last-child)::after {
  content: '·';
  opacity: 0.5;
}
@media (max-width: 560px) {
  /* empilhado no celular: em uma coluna o separador nao faz sentido */
  .cta-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .cta-note li:not(:last-child)::after {
    display: none;
  }
}

/* ---------- CTA final: convite + prévia de conversa ---------- */
.cta-card {
  text-align: left;
}
.cta-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  position: relative;
}
.cta-card h2 {
  margin-inline: 0;
  max-width: none;
}
.cta-card .cta-lead {
  margin: 0 0 1.8rem;
  max-width: none;
}
.cta-steps {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2.2rem;
}
.cta-steps div {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.92rem;
  color: rgba(251, 250, 246, 0.85);
}
.cta-steps b {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(251, 250, 246, 0.14);
  color: #f5d06a;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.cta-ctas {
  justify-content: flex-start;
}

@keyframes msgIn {
  to {
    opacity: 1;
    transform: none;
  }
}

.typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border: 1px solid rgba(14, 58, 38, 0.1);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  opacity: 0;
}
.reveal.visible .typing {
  animation: msgIn 0.3s ease 4.85s forwards;
}
.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(24, 36, 32, 0.4);
  animation: blink 1.2s infinite;
}
.typing i:nth-child(2) {
  animation-delay: 0.2s;
}
.typing i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes blink {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

@media (max-width: 960px) {
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--green-950);
  color: rgba(251, 250, 246, 0.72);
  padding: 4.2rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-700), var(--accent), var(--green-700));
}
.footer::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 130, 210, 0.16), transparent 70%);
  bottom: -220px;
  right: -140px;
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: 2.8rem;
  position: relative;
}
.footer-brand .logo {
  color: var(--paper);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.footer-brand .logo-chip {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 5px;
  flex: none;
}
.footer-brand p {
  font-size: 0.88rem;
  line-height: 1.65;
  max-width: 26rem;
  margin-bottom: 1.4rem;
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #aec4f2;
  margin-bottom: 1.1rem;
}
.footer-col a {
  display: block;
  padding: 0.32rem 0;
  font-size: 0.9rem;
  color: rgba(251, 250, 246, 0.72);
  transition:
    color 0.18s,
    transform 0.18s;
}
.footer-col a:hover {
  color: var(--paper);
  transform: translateX(4px);
}
.footer-social {
  display: flex;
  gap: 0.6rem;
}
.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(251, 250, 246, 0.28);
  color: var(--paper);
  transition:
    transform 0.18s ease,
    background 0.18s,
    color 0.18s,
    border-color 0.18s;
}
.social-link:hover {
  transform: translateY(-3px);
  background: var(--paper);
  color: var(--green-950);
  border-color: var(--paper);
}
.footer-partner-chip {
  background: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: block;
  max-width: 230px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.footer-partner-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.4);
}
.footer-partner-chip img {
  width: 100%;
  height: auto;
  display: block;
}
.footer-partner-links {
  margin-top: 0.9rem;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(251, 250, 246, 0.12);
  margin-top: 3.2rem;
  padding-top: 1.5rem;
  position: relative;
}
.footer-bottom small {
  font-size: 0.78rem;
  color: rgba(251, 250, 246, 0.5);
}
@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
}