/* ═══════════════════════════════════════════════════════
   abc. — Ads Bridge Company
   Design tokens extraídos da referência SalesHookAI.
   Estrutura e motion inspirados na TRIONN (adaptados
   para performance em celular de negócio local).
   ═══════════════════════════════════════════════════════ */

:root{
  /* superfícies */
  --bg-000:#0A0A0A;
  --bg-100:#050505;
  --bg-200:#141414;
  --bg-300:#1C1C1C;
  --bg-400:#2A2A2A;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);

  /* texto */
  --text-100:#FAFAFA;
  --text-200:#E5E5E5;
  --text-300:#A3A3A3;
  --text-400:#737373;
  --text-500:#525252;

  /* marca */
  --brand:#582A8E;
  --violet-300:#C4B5FD;
  --violet-400:#A78BFA;
  --violet-500:#8B5CF6;
  --violet-600:#7C3AED;
  --indigo-700:#4338CA;
  --grad:linear-gradient(135deg,#7C3AED 0%,#4338CA 100%);

  /* superfície clara (seção método) */
  --light-bg:#F4F4F5;
  --light-text:#0A0A0A;
  --light-muted:#52525B;
  --light-line:rgba(10,10,10,.12);

  /* escala de espaço */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --s-9:96px; --s-10:128px;

  /* tipografia — as fontes do template Creative Studio
     da Hirael: Outfit em tudo, JetBrains Mono nos rótulos. */
  --font-display:"Outfit","Outfit Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Outfit","Outfit Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;

  --radius:14px;
  --radius-sm:10px;
  --wrap:1180px;

  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.4s;

  color-scheme:dark;
}

/* ─── reset ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg-000);
  color:var(--text-200);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
em{font-style:normal}

::selection{background:var(--violet-600);color:#fff}

:focus-visible{
  outline:2px solid var(--violet-400);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:-9999px;top:var(--s-4);
  background:var(--violet-600);color:#fff;
  padding:var(--s-3) var(--s-5);border-radius:var(--radius-sm);
  z-index:200;font-weight:600;
}
.skip-link:focus{left:var(--s-4)}

/* ─── layout ────────────────────────────────────────── */
.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}
.wrap--narrow{max-width:820px}

.section{
  position:relative;
  padding-block:clamp(72px,11vw,150px);
  border-top:1px solid var(--line);
}
.section--alt{background:var(--bg-100)}

/* ─── tipografia ────────────────────────────────────── */
.label{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-400);
  margin-bottom:var(--s-5);
}

.hero__title,.h2,.card__title,.pillar__title,.step__title,
.acc__label,.guarantee h3,.logo__mark,.statement{
  font-family:var(--font-display);
}
.label__tick{
  width:22px;height:1px;background:var(--violet-500);
  display:inline-block;flex:none;
}

.h2{
  font-size:clamp(2rem,5.2vw,3.6rem);
  line-height:1.06;
  letter-spacing:-.035em;
  font-weight:600;
  color:var(--text-100);
  text-wrap:balance;
}
.h2 em{
  background:linear-gradient(120deg,var(--violet-400),var(--violet-600));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.lead{
  margin-top:var(--s-5);
  max-width:62ch;
  font-size:clamp(1.0625rem,1.6vw,1.1875rem);
  color:var(--text-300);
}

.statement{
  margin-top:clamp(48px,7vw,80px);
  font-size:clamp(1.5rem,3.6vw,2.4rem);
  line-height:1.2;
  letter-spacing:-.03em;
  font-weight:500;
  color:var(--text-100);
}
.statement em{color:var(--violet-400)}

.prose p{margin-top:var(--s-5);color:var(--text-300);max-width:60ch}
.prose strong{color:var(--text-100);font-weight:600}
.prose em{color:var(--violet-300)}

/* ─── botões ────────────────────────────────────────── */
.btn{
  --btn-pad:14px 24px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:var(--btn-pad);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-weight:600;font-size:.9375rem;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .18s var(--ease),background .25s,border-color .25s,opacity .25s;
  min-height:48px;
  text-align:center;
}
.btn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn--primary{
  background:var(--grad);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 24px -10px rgba(124,58,237,.7);
}
/* o deslocamento no hover fica por conta do efeito magnético
   (JS); definir transform aqui brigaria com o GSAP.        */
.btn--primary:hover{filter:brightness(1.08)}

.btn--ghost{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--text-200);
}
.btn--ghost:hover{border-color:var(--violet-500);color:var(--text-100)}

.btn--lg{--btn-pad:17px 30px;font-size:1rem;min-height:56px}
.btn--sm{--btn-pad:10px 18px;font-size:.875rem;min-height:42px}
.btn--block{width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--violet-400);font-weight:600;
  border-bottom:1px solid rgba(167,139,250,.35);
  padding-bottom:2px;
  transition:border-color .25s,color .25s;
}
.link-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.link-arrow:hover{color:var(--violet-300);border-color:var(--violet-300)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ─── decoração de fundo ────────────────────────────── */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.glow{
  position:fixed;top:-25vh;left:50%;
  width:min(1100px,150vw);height:min(1100px,150vw);
  transform:translateX(-50%);
  z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(124,58,237,.19) 0%,rgba(88,42,142,.08) 38%,transparent 66%);
}

/* ─── cursor custom (desktop) ───────────────────────── */
.cursor{
  position:fixed;top:0;left:0;z-index:150;pointer-events:none;
  display:none;
  will-change:transform;
}
.cursor__dot{
  display:block;width:28px;height:28px;margin:-14px 0 0 -14px;
  border:1px solid var(--violet-400);border-radius:50%;
  transition:transform .25s var(--ease),background .25s,border-color .25s;
}
/* sem preenchimento: o anel nunca cobre o que está embaixo */
.cursor.is-hot .cursor__dot{
  transform:scale(1.6);
  border-color:var(--violet-300);
}
@media (hover:hover) and (pointer:fine){
  .has-js .cursor{display:block}
}

/* ─── navegação ─────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:transform .4s var(--ease),border-color .3s,background .3s;
}
.nav.is-stuck{border-bottom-color:var(--line)}
.nav.is-hidden{transform:translateY(-100%)}

.nav__inner{
  display:flex;align-items:center;gap:var(--s-5);
  height:68px;
}
.logo{font-size:1.25rem;font-weight:700;letter-spacing:-.05em;color:var(--text-100)}
.logo__dot{color:var(--violet-500)}

.nav__links{
  display:flex;gap:var(--s-6);
  margin-left:auto;
  font-size:.9375rem;color:var(--text-300);
}
.nav__links a{transition:color .22s;position:relative}
.nav__links a:hover{color:var(--text-100)}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-6px;
  height:1px;background:var(--violet-500);
  transition:right .3s var(--ease);
}
.nav__links a:hover::after{right:0}

.nav__toggle{
  display:none;
  width:44px;height:44px;margin-left:auto;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
}
.nav__toggle span{
  width:22px;height:1.5px;background:var(--text-100);
  transition:transform .3s var(--ease),opacity .2s;
}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.nav__mobile{
  display:flex;flex-direction:column;gap:var(--s-4);
  padding:var(--s-5) clamp(20px,5vw,40px) var(--s-7);
  border-top:1px solid var(--line);
  background:var(--bg-000);
}
.nav__mobile a:not(.btn){
  font-size:1.25rem;font-weight:500;color:var(--text-200);
  padding-block:var(--s-2);
}

@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  /* no celular a dica de scroll colide com a lista de confiança */
  .hero__scroll{display:none}
}

/* ─── hero ──────────────────────────────────────────── */
.hero{
  position:relative;z-index:2;
  min-height:100svh;
  display:flex;align-items:center;
  padding-top:calc(68px + clamp(32px,5.5vw,72px));
  padding-bottom:clamp(56px,7vw,88px);
}
.hero__inner{width:100%}

/* Dimensionado para que o CTA principal caiba acima da
   dobra em notebook de 768px de altura.                 */
.hero__title{
  font-size:clamp(2.5rem,7.6vw,5.75rem);
  line-height:.97;
  letter-spacing:-.045em;
  font-weight:600;
  color:var(--text-100);
  margin-bottom:var(--s-6);
}
.hero__title em{
  background:linear-gradient(115deg,var(--violet-300),var(--violet-600) 70%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* As linhas não são mais mascaradas: agora sobem 20px com
   fade, no estilo da Vetra. Sem overflow, nada é cortado. */
.line{display:block;padding-bottom:.04em}
.line__in{display:block}
.has-js .hero__title .line__in{opacity:0;transform:translateY(20px)}

.hero__lead{
  max-width:52ch;
  font-size:clamp(1.0625rem,1.9vw,1.3125rem);
  color:var(--text-300);
}

.hero__actions{
  display:flex;flex-wrap:wrap;gap:var(--s-4);
  margin-top:var(--s-6);
}

.hero__trust{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);
  margin-top:var(--s-5);
  font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:.06em;
  color:var(--text-400);
}
.hero__trust li{display:flex;align-items:center;gap:var(--s-2)}
.hero__trust li::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--violet-500);flex:none;
}

.hero__scroll{
  position:absolute;bottom:var(--s-6);left:50%;
  transform:translateX(-50%);
  width:1px;height:56px;
  background:var(--line-strong);overflow:hidden;
}
.hero__scroll-line{
  display:block;width:100%;height:50%;
  background:var(--violet-500);
  animation:scrollHint 2.1s var(--ease) infinite;
}
@keyframes scrollHint{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(200%)}
}

/* ─── marquee ───────────────────────────────────────── */
.marquee{
  position:relative;z-index:2;
  overflow:hidden;
  border-block:1px solid var(--line);
  background:var(--bg-100);
  padding-block:var(--s-5);
}
.marquee__track{
  display:flex;align-items:center;gap:var(--s-6);
  width:max-content;
  animation:slide 34s linear infinite;
}
/* quando o JS assume, ele controla a posição e a direção */
.marquee__track.is-js{animation:none}
.marquee__track span{
  font-size:clamp(1.25rem,3vw,2rem);
  font-weight:600;letter-spacing:-.03em;
  color:var(--text-500);
  white-space:nowrap;
}
.marquee__track i{
  width:7px;height:7px;border-radius:50%;
  background:var(--violet-600);flex:none;
}
@keyframes slide{
  to{transform:translateX(-50%)}
}

/* ─── cards (problema) ──────────────────────────────── */
.cards{
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:clamp(48px,7vw,80px);
}
.card{
  padding:var(--s-6);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--bg-200),var(--bg-100));
  transition:border-color .35s,transform .35s var(--ease);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.card__num{
  font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:.14em;color:var(--violet-500);
}
.card__title{
  margin-top:var(--s-4);margin-bottom:var(--s-3);
  font-size:1.1875rem;line-height:1.3;letter-spacing:-.02em;
  font-weight:600;color:var(--text-100);
}
.card p{color:var(--text-400);font-size:.9375rem}

/* ─── pilares (a virada) ────────────────────────────── */
.pillars{
  display:grid;gap:var(--s-2);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  margin-top:clamp(48px,7vw,80px);
}
.pillar{
  padding:var(--s-6) var(--s-5);
  border-top:1px solid var(--line-strong);
  position:relative;
}
.pillar::before{
  content:"";position:absolute;top:-1px;left:0;right:100%;
  height:1px;background:var(--grad);
  transition:right .55s var(--ease);
}
.pillar:hover::before{right:0}
.pillar__num{
  font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:.14em;color:var(--text-500);
}
.pillar__title{
  margin-top:var(--s-4);
  font-size:clamp(1.75rem,3.4vw,2.4rem);
  line-height:1.05;letter-spacing:-.035em;
  font-weight:600;color:var(--text-100);
}
.pillar__desc{margin-top:var(--s-3);color:var(--text-400);font-size:.9375rem;max-width:32ch}
.pillar__tag{
  display:inline-block;margin-top:var(--s-5);
  padding:6px 13px;border-radius:100px;
  border:1px solid rgba(139,92,246,.32);
  background:rgba(124,58,237,.1);
  font-family:var(--font-mono);
  font-size:.6875rem;letter-spacing:.08em;
  color:var(--violet-300);
}

/* ─── acordeão ──────────────────────────────────────── */
.acc{margin-top:clamp(48px,7vw,80px);border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;
  display:flex;align-items:center;gap:var(--s-4);
  padding:clamp(20px,3vw,30px) 0;
  background:none;border:0;cursor:pointer;
  text-align:left;
  transition:color .25s;
}
.acc__label{
  flex:1;
  font-size:clamp(1.25rem,3vw,2rem);
  line-height:1.15;letter-spacing:-.035em;
  font-weight:500;color:var(--text-100);
  transition:color .25s;
}
.acc__btn:hover .acc__label{color:var(--violet-300)}
.acc__meta{
  font-family:var(--font-mono);
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-500);
  white-space:nowrap;
}
.acc__icon{
  position:relative;width:20px;height:20px;flex:none;
}
.acc__icon::before,.acc__icon::after{
  content:"";position:absolute;top:50%;left:50%;
  background:var(--violet-400);
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease),opacity .35s;
}
.acc__icon::before{width:15px;height:1.5px}
.acc__icon::after{width:1.5px;height:15px}
.acc__btn[aria-expanded="true"] .acc__icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

.acc__panel{overflow:hidden}
.acc__body{padding-bottom:var(--s-6);max-width:62ch}
.ticks li{
  position:relative;padding-left:26px;
  margin-bottom:var(--s-3);
  color:var(--text-300);font-size:.9375rem;
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:11px;height:6px;
  border-left:1.5px solid var(--violet-400);
  border-bottom:1.5px solid var(--violet-400);
  transform:rotate(-45deg);
}
.acc__price{
  margin-top:var(--s-5);padding-top:var(--s-4);
  border-top:1px solid var(--line);
  font-size:.875rem;color:var(--text-400);
}
.acc__price strong{color:var(--text-100);font-weight:600}
.acc--faq .acc__body p{color:var(--text-300);font-size:1rem}

@media (max-width:640px){
  .acc__meta{display:none}
}

/* ─── seção clara: método ───────────────────────────── */
/* As duas bordas desbotam para o escuro em 110px, então a
   troca de fundo vira transição e não corte.             */
.section--light{
  background:
    linear-gradient(180deg,var(--bg-000) 0,transparent 110px),
    linear-gradient(0deg,var(--bg-000) 0,transparent 110px),
    var(--light-bg);
  color:var(--light-text);
  border-top:0;
  padding-block:calc(clamp(72px,11vw,150px) + 56px);
  /* o scrub em initScrollDynamics escala a partir do topo,
     fazendo a seção clara "subir por cima" da anterior     */
  transform-origin:center top;
  will-change:transform;
}
.section--light .label{color:var(--light-muted)}
.section--light .h2{color:var(--light-text)}
.section--light .lead{color:var(--light-muted)}

.steps{
  margin-top:clamp(48px,7vw,80px);
  display:grid;gap:0;
}
.step{
  display:flex;gap:clamp(20px,4vw,56px);
  padding-block:clamp(28px,4vw,44px);
  border-top:1px solid var(--light-line);
  align-items:flex-start;
}
.step:last-child{border-bottom:1px solid var(--light-line)}
.step__num{
  font-family:var(--font-mono);
  font-size:.8125rem;letter-spacing:.12em;
  color:var(--violet-600);
  padding-top:.5em;flex:none;
}
.step__title{
  font-size:clamp(1.375rem,3vw,2rem);
  line-height:1.1;letter-spacing:-.035em;
  font-weight:600;color:var(--light-text);
  margin-bottom:var(--s-3);
}
.step__content p{color:var(--light-muted);max-width:56ch;font-size:1rem}

/* ─── garantias ─────────────────────────────────────── */
.guarantees{
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  margin-top:clamp(48px,7vw,80px);
}
.guarantee{
  padding:var(--s-6);
  border:1px solid rgba(139,92,246,.22);
  border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(124,58,237,.1),rgba(67,56,202,.04));
}
.guarantee h3{
  font-size:1.125rem;letter-spacing:-.02em;font-weight:600;
  color:var(--text-100);margin-bottom:var(--s-3);
}
.guarantee p{color:var(--text-300);font-size:.9375rem}

/* ─── formulário ────────────────────────────────────── */
.cta{background:var(--bg-100)}
.form{
  margin-top:clamp(40px,6vw,64px);
  padding:clamp(24px,4vw,44px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-000);
}
.field{margin-bottom:var(--s-5)}
.field label{
  display:block;margin-bottom:var(--s-2);
  font-size:.9375rem;font-weight:500;color:var(--text-200);
}
.req{color:var(--violet-400)}

.field input,.field select{
  width:100%;
  min-height:52px;
  padding:13px 16px;
  background:var(--bg-200);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  color:var(--text-100);
  font-size:1rem;
  transition:border-color .22s,background .22s;
}
.field input::placeholder{color:var(--text-500)}
.field input:focus,.field select:focus{
  border-color:var(--violet-500);
  background:var(--bg-300);
  outline:none;
}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A78BFA' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:18px;
  padding-right:46px;
}
.field__help{margin-top:var(--s-2);font-size:.8125rem;color:var(--text-500)}
.field__error{
  margin-top:var(--s-2);
  font-size:.8125rem;color:#FCA5A5;
  display:flex;align-items:center;gap:6px;
}
.field__error::before{content:"!";font-weight:700;font-size:.75rem}
.field.has-error input,.field.has-error select{border-color:#F87171}

.form__summary{
  margin-bottom:var(--s-5);
  padding:var(--s-4) var(--s-5);
  border:1px solid rgba(248,113,113,.4);
  border-radius:var(--radius-sm);
  background:rgba(248,113,113,.07);
}
.form__summary h3{font-size:.9375rem;color:#FCA5A5;margin-bottom:var(--s-2)}
.form__summary a{
  color:#FCA5A5;text-decoration:underline;
  font-size:.875rem;display:inline-block;padding-block:3px;
}
.form__micro{
  margin-top:var(--s-4);
  font-size:.8125rem;color:var(--text-500);text-align:center;
}

/* ─── rodapé ────────────────────────────────────────── */
.footer{
  position:relative;z-index:2;
  border-top:1px solid var(--line);
  padding-block:var(--s-8);
  padding-bottom:calc(var(--s-8) + env(safe-area-inset-bottom,0px));
}
.footer__inner{
  display:flex;flex-wrap:wrap;gap:var(--s-6);
  align-items:flex-start;justify-content:space-between;
}
.footer__brand{display:flex;flex-direction:column;gap:var(--s-3)}
.footer__brand .logo__mark{font-size:1.25rem;font-weight:700;letter-spacing:-.05em;color:var(--text-100)}
.footer__brand p{font-size:.875rem;color:var(--text-400);line-height:1.5}
.footer__brand span{color:var(--text-500)}
.footer__links{display:flex;flex-wrap:wrap;gap:var(--s-5);font-size:.9375rem;color:var(--text-300)}
.footer__links a{transition:color .22s}
.footer__links a:hover{color:var(--violet-300)}
.footer__copy{font-size:.8125rem;color:var(--text-500);line-height:1.7}
.footer__local{font-size:.8125rem;color:var(--text-500);margin-top:var(--s-2)}
.footer__cnpj{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--text-600,var(--text-500))}

/* ═══ ENTRADA ═══════════════════════════════════════ */
/* Só existe se o JS estiver vivo para removê-lo depois —
   sem isso, uma falha de JS deixaria a página coberta.   */
.loader{display:none}
.has-js .loader{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;
  background:var(--bg-100);
}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:var(--s-5)}
.loader__logo{
  font-family:var(--font-display);
  font-size:2rem;font-weight:700;letter-spacing:-.05em;
  color:var(--text-100);
}
.loader__bar{
  display:block;width:140px;height:1px;
  background:var(--line-strong);overflow:hidden;
}
.loader__bar i{
  display:block;height:100%;width:0;
  background:var(--grad);
}
.loader.is-done{pointer-events:none}

/* ═══ PROGRESSO DE LEITURA ══════════════════════════ */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  pointer-events:none;
}
/* escala em vez de largura: anima na GPU, sem reflow */
.progress i{
  display:block;height:100%;width:100%;
  background:var(--grad);
  transform:scaleX(0);
  transform-origin:left;
}

/* ═══ PALCO 3D DO HERO ══════════════════════════════ */
.hero__stage{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
}
.hero__stage canvas{
  width:100%;height:100%;display:block;
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.hero__stage.is-live canvas{opacity:1}

.hero__fallback{
  position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);
  width:100%;height:40%;
  display:none;
}
.hero__stage.is-fallback .hero__fallback{display:block}
.hero__stage.is-fallback canvas{display:none}

/* o conteúdo do hero fica acima do palco */
.hero__inner{position:relative;z-index:2}

/* legibilidade do texto sobre as partículas */
.hero__inner::before{
  content:"";position:absolute;
  inset:-8% -10% -12% -12%;
  background:radial-gradient(60% 60% at 30% 45%,rgba(10,10,10,.82) 0%,rgba(10,10,10,.45) 55%,transparent 100%);
  z-index:-1;pointer-events:none;
}

/* ═══ PILARES — cartões no estilo Vetra ═════════════ */
.pillar{
  border-radius:var(--radius);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.pillar:hover{background:rgba(255,255,255,.022)}
.pillar:hover .pillar__tag{
  border-color:rgba(167,139,250,.55);
  background:rgba(124,58,237,.18);
  color:#DDD6FE;
}
.pillar__tag{transition:border-color .4s,background .4s,color .4s}

/* ─── reveal (só com JS) ────────────────────────────── */
.has-js .reveal,
.has-js [data-stagger] > *{opacity:0}

/* ─── responsivo ────────────────────────────────────── */
@media (max-width:640px){
  body{font-size:16px}
  .hero__actions .btn{width:100%}
  .step{flex-direction:column;gap:var(--s-3)}
  .step__num{padding-top:0}
  .footer__inner{flex-direction:column}
}

/* ─── movimento reduzido ────────────────────────────── */
/* O seletor html:not(.force-motion) existe para que abrir a
   página com ?motion=on permita revisar as animações mesmo
   com o sistema pedindo movimento reduzido.               */
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  html:not(.force-motion) .has-js .reveal,
  html:not(.force-motion) .has-js [data-stagger] > *{opacity:1!important}
  html:not(.force-motion).has-js .reveal,
  html:not(.force-motion).has-js [data-stagger] > *{opacity:1!important}
  html:not(.force-motion) .line__in{transform:none!important;opacity:1!important}
  html:not(.force-motion) .marquee__track{animation:none}
  html:not(.force-motion) .cursor{display:none!important}
  html:not(.force-motion) .loader{display:none!important}
  html:not(.force-motion) .hero__stage canvas{opacity:1}
}

/* aviso de privacidade no formulário */
.form__privacy{margin-top:var(--s-3);color:var(--text-500);line-height:1.6}
.form__privacy a{color:var(--text-300);text-decoration:underline;text-underline-offset:3px;transition:color .22s}
.form__privacy a:hover{color:var(--violet-300)}