/* ════════════════════════════════════════════════════════════
   KLYRO LABS — folha de estilo principal
     1. Tokens             6. Cards
     2. Base / tipografia  7. Portfólio · stats · processo
     3. Botões             8. Planos · FAQ · CTA · rodapé
     4. Nav                9. Motion (reveal, tilt, cursor)
     5. Hero + fundo      10. Responsivo · acessibilidade
   ════════════════════════════════════════════════════════════ */

/* ═══ 1. TOKENS ═══ */
:root{
  --bg:        #070B14;
  --bg-2:      #0A101C;
  --card:      #0D1524;
  --card-2:    #111B2E;

  --txt:       #EEF2F8;
  --txt-2:     #A8B3C4;
  --txt-3:     #6B7789;
  --txt-4:     #414C5E;

  --blue:      #2563EB;
  --blue-lt:   #5B8DF7;
  --blue-gl:   rgba(37,99,235,.16);
  --green:     #34D399;

  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.13);

  --h:         'Plus Jakarta Sans', system-ui, sans-serif;
  --b:         'Inter', system-ui, sans-serif;

  --pad:       clamp(20px, 5vw, 80px);
  --sec:       clamp(72px, 10vw, 130px);
  --r:         14px;
  --e:         cubic-bezier(.22,.61,.36,1);

  /* ponteiro normalizado em -1..1, suavizado — escrito pelo JS */
  --px: 0;
  --py: 0;
}

/* ═══ 2. BASE ═══ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--b); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
img{ max-width:100%; display:block; }
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:2px solid var(--blue-lt); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--pad); }

h1,h2,h3,h4{ font-family:var(--h); letter-spacing:-.03em; line-height:1.08; font-weight:700; }
.h1{ font-size:clamp(34px,5.4vw,62px); font-weight:800; letter-spacing:-.038em; }
.h2{ font-size:clamp(27px,3.9vw,46px); font-weight:700; }
.h3{ font-size:clamp(19px,1.9vw,23px); font-weight:700; letter-spacing:-.025em; }

/* degradê com brilho que varre o texto */
.grad{
  background:linear-gradient(100deg,var(--blue-lt) 6%,#C3D7FF 30%,#9CC0FF 48%,var(--blue-lt) 72%);
  background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheen 7.5s var(--e) infinite;
}
@keyframes sheen{ 0%,100%{ background-position:0% 0 } 50%{ background-position:100% 0 } }

.lead{ font-size:clamp(15px,1.2vw,18px); color:var(--txt-2); line-height:1.68; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 11px;
  border:1px solid var(--line-2); border-radius:99px;
  font-size:12px; font-weight:500; color:var(--txt-2);
  background:rgba(255,255,255,.025);
}
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 0 rgba(52,211,153,.55);
  animation:blip 2.4s infinite;
}
@keyframes blip{
  0%{ box-shadow:0 0 0 0 rgba(52,211,153,.5) }
  70%{ box-shadow:0 0 0 8px rgba(52,211,153,0) }
  100%{ box-shadow:0 0 0 0 rgba(52,211,153,0) }
}

/* ═══ 3. BOTÕES ═══ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 27px; border-radius:11px;
  font-family:var(--h); font-weight:600; font-size:15px; letter-spacing:-.01em;
  background:linear-gradient(180deg,#3B7BF5,var(--blue));
  color:#fff; overflow:hidden;
  box-shadow:0 8px 24px -10px rgba(37,99,235,.9), inset 0 1px 0 rgba(255,255,255,.22);
  transition:box-shadow .35s var(--e);
}
.btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .8s var(--e);
}
.btn:hover{ box-shadow:0 14px 34px -10px rgba(37,99,235,1), inset 0 1px 0 rgba(255,255,255,.28); }
.btn:hover::after{ transform:translateX(130%); }
.btn svg{ transition:transform .35s var(--e); }
.btn:hover svg{ transform:translateX(3px); }

.btn-2{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 27px; border-radius:11px;
  font-family:var(--h); font-weight:600; font-size:15px;
  border:1px solid var(--line-2); color:var(--txt);
  background:rgba(255,255,255,.02);
  transition:border-color .35s var(--e), background .35s var(--e);
}
.btn-2:hover{ border-color:rgba(91,141,247,.55); background:rgba(37,99,235,.1); }

/* magnetismo: o JS escreve --tx/--ty, o CSS só compõe */
.mag{
  transform:translate3d(var(--tx,0px), calc(var(--ty,0px) + var(--lift,0px)), 0);
  transition:transform .45s var(--e);
  will-change:transform;
}
.mag:hover{ --lift:-2px; }
.mag.grabbed{ transition:transform .08s linear; }

/* ═══ 4. NAV ═══ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:16px 0; transition:padding .4s var(--e), background .4s var(--e), border-color .4s var(--e);
  border-bottom:1px solid transparent;
}
.nav.on{
  padding:10px 0; background:rgba(7,11,20,.82);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border-bottom-color:var(--line);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

/* barra de progresso da leitura */
.prog{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:101;
  transform:scaleX(var(--p,0)); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue),var(--blue-lt),#9CC0FF);
  box-shadow:0 0 12px rgba(91,141,247,.7);
  pointer-events:none;
}

.logo{ display:flex; align-items:center; gap:11px; perspective:500px; }
.logo .mark{
  width:40px; height:40px; flex:none;
  transition:transform .55s var(--e), filter .55s var(--e);
}
.logo:hover .mark{
  transform:rotateY(26deg) rotateX(-9deg) scale(1.07);
  filter:drop-shadow(0 6px 18px rgba(37,99,235,.6));
}
.logo .tx{ display:flex; flex-direction:column; line-height:1; }
.logo .n{ font-family:var(--h); font-weight:800; font-size:16.5px; letter-spacing:-.02em; }
.logo .s{ font-size:9px; letter-spacing:.28em; color:var(--txt-3); margin-top:3px; font-weight:500; }

.nav-l{ display:flex; align-items:center; gap:30px; }
.nav-l a{ position:relative; font-size:14px; color:var(--txt-2); font-weight:400; transition:color .3s; }
.nav-l a::after{
  content:''; position:absolute; left:0; right:0; bottom:-7px; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-lt));
  transform:scaleX(0); transform-origin:right; transition:transform .42s var(--e);
}
.nav-l a:hover{ color:var(--txt); }
.nav-l a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-l a.active{ color:var(--txt); }
.nav-l a.active::after{ transform:scaleX(1); transform-origin:left; }

.nav-btn{
  padding:11px 20px; border-radius:9px; font-size:14px; font-weight:600;
  font-family:var(--h);
  background:linear-gradient(180deg,#3B7BF5,var(--blue)); color:#fff;
  box-shadow:0 6px 18px -8px rgba(37,99,235,.9);
  transition:box-shadow .3s var(--e);
}
.nav-btn:hover{ box-shadow:0 11px 26px -8px rgba(37,99,235,1); }

.burger{ display:none; flex-direction:column; gap:5px; padding:6px; }
.burger span{ width:22px; height:2px; background:var(--txt); border-radius:2px; transition:transform .4s var(--e), opacity .3s; }
.burger.x span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.x span:nth-child(2){ opacity:0; }
.burger.x span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mob{
  position:fixed; inset:0 0 0 auto; width:min(84vw,340px); z-index:99;
  background:var(--bg-2); border-left:1px solid var(--line);
  padding:96px 30px 30px;
  transform:translateX(100%); transition:transform .5s var(--e);
  display:flex; flex-direction:column; gap:5px;
}
.mob.on{ transform:none; }
.mob a{
  padding:14px 0; font-family:var(--h); font-weight:600; font-size:19px;
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateX(24px);
  transition:opacity .5s var(--e), transform .5s var(--e);
}
.mob.on a{ opacity:1; transform:none; }
.mob.on a:nth-child(1){ transition-delay:.06s } .mob.on a:nth-child(2){ transition-delay:.11s }
.mob.on a:nth-child(3){ transition-delay:.16s } .mob.on a:nth-child(4){ transition-delay:.21s }
.mob.on a:nth-child(5){ transition-delay:.26s } .mob.on a:nth-child(6){ transition-delay:.31s }
.mob .btn{ margin-top:22px; }

/* ═══ 5. HERO ═══ */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(118px,15vh,164px) 0 clamp(76px,10vh,116px);
  min-height:min(88vh,840px);
  display:flex; align-items:center;
}
/* o conteúdo desliza levemente contra o fundo — dá profundidade ao paralaxe */
.hero-in{
  position:relative; z-index:2; text-align:center;
  transform:translate3d(calc(var(--px) * -7px), calc(var(--py) * -5px), 0);
}
.hero h1{ margin:24px auto 0; max-width:17ch; }
.hero .lead{ margin:22px auto 0; max-width:56ch; }

/* ── máquina de escrever ── */
.tw{ display:inline; }
.tw .t{
  background:linear-gradient(100deg,var(--blue-lt) 10%,#9CC0FF 55%,var(--blue-lt));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tw .c{
  display:inline-block; width:.06em; min-width:3px;
  height:.86em; margin-left:.06em; vertical-align:-.06em;
  background:linear-gradient(180deg,var(--blue-lt),var(--blue));
  border-radius:2px;
  box-shadow:0 0 12px rgba(91,141,247,.85);
  animation:caret 1.05s steps(1) infinite;
}
@keyframes caret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
.tw.typing .c{ animation:none; opacity:1; }

/* ── FUNDO ANIMADO ──────────────────────────────────────────
   Camadas, do fundo para a frente:
     aurora   → faixas de luz girando devagar
     grid     → malha em perspectiva, inclina com o mouse
     canvas   → campo de partículas com paralaxe e teia no cursor
     halo     → brilho que acompanha o ponteiro
     beams    → feixes verticais
     noise    → grão
     vig/fade → vinheta e fusão com a seção seguinte
   Tudo que se move com o mouse lê --px / --py.
   ──────────────────────────────────────────────────────────── */
.fx{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.fx canvas{ position:absolute; inset:0; width:100%; height:100%; }

.fx-aurora{
  position:absolute; left:50%; top:-46%;
  width:150vmax; aspect-ratio:1; margin-left:-75vmax;
  background:conic-gradient(from 0deg,
    transparent 0 14%,
    rgba(37,99,235,.24) 24%,
    transparent 36% 58%,
    rgba(91,141,247,.18) 70%,
    transparent 82%);
  filter:blur(90px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0 30%, transparent 66%);
          mask-image:radial-gradient(circle at 50% 50%, #000 0 30%, transparent 66%);
  animation:aurora 52s linear infinite;
  opacity:.9;
}
@keyframes aurora{ to{ transform:rotate(360deg) } }

.fx-grid{
  position:absolute; inset:-25% -10% 0;
  background-image:
    linear-gradient(rgba(91,141,247,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,141,247,.10) 1px, transparent 1px);
  background-size:56px 56px;
  transform:
    perspective(620px)
    rotateX(calc(62deg + var(--py) * 3deg))
    rotateZ(calc(var(--px) * -1.4deg))
    scale(1.6)
    translate3d(calc(var(--px) * -26px), 0, 0);
  transform-origin:50% 100%;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 45%, #000 10%, transparent 72%);
          mask-image:radial-gradient(ellipse 70% 55% at 50% 45%, #000 10%, transparent 72%);
  animation:gridpan 22s linear infinite;
  opacity:.75;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
@keyframes gridpan{ to{ background-position:0 56px, 56px 0 } }

.fx-orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.fx-orb.o1{
  width:min(720px,80vw); aspect-ratio:1; top:-26%; left:50%; margin-left:min(-360px,-40vw);
  background:radial-gradient(circle, rgba(37,99,235,.55), transparent 66%);
  animation:drift1 19s var(--e) infinite alternate;
  translate:calc(var(--px) * 42px) calc(var(--py) * 26px);
  transition:translate .6s cubic-bezier(.2,.8,.3,1);
}
.fx-orb.o2{
  width:min(480px,60vw); aspect-ratio:1; bottom:-16%; left:8%;
  background:radial-gradient(circle, rgba(91,141,247,.34), transparent 66%);
  animation:drift2 24s var(--e) infinite alternate;
  translate:calc(var(--px) * -30px) calc(var(--py) * -20px);
  transition:translate .75s cubic-bezier(.2,.8,.3,1);
}
.fx-orb.o3{
  width:min(420px,54vw); aspect-ratio:1; top:14%; right:2%;
  background:radial-gradient(circle, rgba(52,211,153,.16), transparent 66%);
  animation:drift1 27s var(--e) infinite alternate-reverse;
  translate:calc(var(--px) * -54px) calc(var(--py) * 34px);
  transition:translate .9s cubic-bezier(.2,.8,.3,1);
}
@keyframes drift1{ to{ transform:translate3d(6%,7%,0) scale(1.14) } }
@keyframes drift2{ to{ transform:translate3d(12%,-9%,0) scale(1.08) } }

/* halo colado no cursor — o JS posiciona por --hx/--hy em px */
.fx-halo{
  position:absolute; top:0; left:0; width:620px; height:620px; margin:-310px 0 0 -310px;
  background:radial-gradient(circle,
    rgba(91,141,247,.20) 0%,
    rgba(37,99,235,.11) 32%,
    transparent 68%);
  translate:var(--hx,50vw) var(--hy,40vh);
  opacity:0; transition:opacity .6s var(--e);
  mix-blend-mode:screen;
}
.fx-halo.on{ opacity:1; }

.fx-beam{
  position:absolute; top:-30%; height:150%; width:var(--w,120px);
  left:var(--l,50%);
  background:linear-gradient(180deg, rgba(91,141,247,.13), rgba(91,141,247,.03) 46%, transparent 74%);
  filter:blur(26px);
  transform:rotate(var(--r,10deg));
  transform-origin:50% 0;
  animation:beam var(--d,13s) ease-in-out infinite alternate;
  opacity:.7;
}
@keyframes beam{
  from{ opacity:.35; transform:rotate(var(--r,10deg)) scaleX(.85) }
  to  { opacity:.8;  transform:rotate(calc(var(--r,10deg) + 4deg)) scaleX(1.15) }
}

.fx-noise{
  position:absolute; inset:-100px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.045; mix-blend-mode:overlay;
  animation:grain 1.1s steps(5) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0) }      20%{ transform:translate(-14px,7px) }
  40%{ transform:translate(9px,-12px) } 60%{ transform:translate(-7px,-9px) }
  80%{ transform:translate(12px,10px) } 100%{ transform:translate(0,0) }
}

.fx-fade{
  position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(180deg, transparent, var(--bg));
}
.fx-vig{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 82% 68% at 50% 42%, transparent 40%, rgba(7,11,20,.72));
}

.hero-act{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px; }
.hero-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px;
  margin-top:34px; font-size:13.5px; color:var(--txt-3);
}
.hero-trust span{ display:flex; align-items:center; gap:8px; }
.hero-trust svg{ flex:none; }

/* seta de rolagem */
.scroll-hint{
  position:absolute; left:50%; bottom:26px; z-index:2;
  translate:-50% 0;
  width:24px; height:38px; border:1.5px solid var(--line-2); border-radius:99px;
  display:grid; place-items:start center; padding-top:7px;
  opacity:.75;
}
.scroll-hint i{
  width:3px; height:7px; border-radius:2px; background:var(--blue-lt);
  animation:hint 1.9s var(--e) infinite;
}
@keyframes hint{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 100%{opacity:0;transform:translateY(13px)} }

/* ═══ MARQUEE ═══ */
.mq{ border-block:1px solid var(--line); padding:15px 0; overflow:hidden; background:rgba(255,255,255,.012); }
.mq-t{
  display:flex; width:max-content; animation:mq 38s linear infinite;
  transform:skewX(var(--skew,0deg));
  transition:transform .45s var(--e);
}
.mq:hover .mq-t{ animation-play-state:paused; }
@keyframes mq{ to{ transform:translateX(-50%) } }
.mq-i{ display:flex; align-items:center; gap:20px; padding-inline:20px; font-size:14px; color:var(--txt-3); white-space:nowrap; }
.mq-i b{ color:var(--txt-2); font-weight:500; transition:color .3s; }
.mq-i:hover b{ color:var(--blue-lt); }
.mq-i em{ font-style:normal; color:var(--blue-lt); font-size:9px; }

/* ═══ SEÇÕES ═══ */
.sec{ padding-block:var(--sec); position:relative; }
.sec-h{ text-align:center; max-width:760px; margin:0 auto clamp(40px,5vw,66px); }
.sec-h .h2{ margin-top:18px; }
.sec-h .lead{ margin-top:16px; }
.sec-tag{ font-size:13px; font-weight:600; color:var(--blue-lt); font-family:var(--h); letter-spacing:.02em; }

/* ═══ 6. CARDS ═══ */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.6vw,20px); }

.card{
  position:relative; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--card),rgba(13,21,36,.55));
  padding:clamp(24px,2.6vw,34px);
  overflow:hidden;
  transition:border-color .45s var(--e), background .45s var(--e);
}
/* holofote que segue o mouse dentro do card */
.card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%), var(--blue-gl), transparent 62%);
  opacity:0; transition:opacity .45s var(--e);
}
/* borda que acende no lado onde o mouse está */
.card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%), rgba(91,141,247,.75), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--e);
}
.card:hover{ border-color:rgba(91,141,247,.22); }
.card:hover::before, .card:hover::after{ opacity:1; }
.card > *{ position:relative; z-index:1; }

.ico{
  width:44px; height:44px; border-radius:11px;
  display:grid; place-items:center; margin-bottom:20px;
  background:linear-gradient(160deg,rgba(37,99,235,.24),rgba(37,99,235,.06));
  border:1px solid rgba(91,141,247,.24);
  transition:transform .5s var(--e), border-color .5s var(--e);
}
.card:hover .ico{ transform:translateY(-3px) rotate(-6deg) scale(1.05); border-color:rgba(91,141,247,.45); }
.card p{ color:var(--txt-2); font-size:14.8px; line-height:1.66; margin-top:11px; }

.prob .ico{ background:linear-gradient(160deg,rgba(239,68,68,.18),rgba(239,68,68,.04)); border-color:rgba(248,113,113,.24); }
.prob:hover .ico{ border-color:rgba(248,113,113,.45); }

.svc{ display:flex; flex-direction:column; }
.svc .badge{
  display:inline-flex; align-self:flex-start; padding:5px 12px; border-radius:99px;
  font-size:11.5px; font-weight:600; font-family:var(--h);
  background:rgba(37,99,235,.16); color:var(--blue-lt);
  border:1px solid rgba(91,141,247,.26); margin-bottom:18px;
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.chips span{
  padding:7px 13px; border-radius:8px; font-size:12.5px; color:var(--txt-2);
  border:1px solid var(--line); background:rgba(255,255,255,.022);
  transition:border-color .35s var(--e), color .35s var(--e), transform .35s var(--e);
}
.chips span:hover{ border-color:rgba(91,141,247,.4); color:var(--txt); transform:translateY(-2px); }
.svc .foot{
  margin-top:auto; padding-top:22px; border-top:1px solid var(--line);
  font-size:13px; color:var(--txt-3);
}

/* ═══ 7. PORTFÓLIO ═══ */
.pf{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,26px); }
.pf-card{
  position:relative; display:block;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--card);
  transition:border-color .45s var(--e), box-shadow .45s var(--e);
}
.pf-card:hover{ border-color:rgba(91,141,247,.34); box-shadow:0 26px 60px -30px rgba(37,99,235,.75); }

.pf-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.018); }
.pf-bar i{ width:9px; height:9px; border-radius:50%; background:#2C374A; flex:none; transition:background .4s var(--e); }
.pf-card:hover .pf-bar i:nth-child(1){ background:#F87171; }
.pf-card:hover .pf-bar i:nth-child(2){ background:#FBBF24; }
.pf-card:hover .pf-bar i:nth-child(3){ background:#34D399; }
.pf-bar .u{
  flex:1; margin-left:10px; padding:6px 12px; border:1px solid var(--line);
  border-radius:6px; font-size:11.5px; color:var(--txt-3);
  font-family:ui-monospace,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pf-view{ aspect-ratio:16/10; position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:#0A0D12; }
.pf-shot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .9s var(--e);
}
.pf-card:hover .pf-shot{ transform:scale(1.05); }
/* reflexo que atravessa a captura no hover */
.pf-view::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(104deg, transparent 34%, rgba(255,255,255,.16) 48%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .95s var(--e);
}
.pf-card:hover .pf-view::after{ transform:translateX(120%); }
.pf-live{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px 5px 9px; border-radius:99px;
  font-size:11px; font-weight:600; font-family:var(--h); letter-spacing:.02em;
  color:#EAF3EC; background:rgba(7,11,20,.62); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.pf-live::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(52,211,153,.55); animation:blip 2.4s infinite;
}
.pf-body{ padding:22px clamp(20px,2vw,28px) 24px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.pf-body .t{ font-family:var(--h); font-weight:700; font-size:19px; letter-spacing:-.025em; }
.pf-body .s{ font-size:13px; color:var(--txt-3); margin-top:5px; }
.pf-go{
  flex:none; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line-2); display:grid; place-items:center;
  color:var(--txt-2);
  transition:background .4s var(--e), border-color .4s var(--e), color .4s var(--e), transform .4s var(--e);
}
.pf-card:hover .pf-go{ background:var(--blue); border-color:var(--blue); color:#fff; transform:rotate(45deg); }
.pf-card:hover .pf-go svg{ transform:rotate(-45deg); }
.pf-go svg{ transition:transform .4s var(--e); }

/* ═══ STATS ═══ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.stat{ background:var(--bg); padding:clamp(24px,2.6vw,34px); transition:background .45s var(--e); }
.stat:hover{ background:var(--card); }
.stat .n{ font-family:var(--h); font-weight:800; font-size:clamp(30px,3.6vw,46px); letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
.stat .n em{ font-style:normal; color:var(--blue-lt); }
.stat .l{ font-size:13.5px; color:var(--txt-3); margin-top:10px; line-height:1.5; }
.stat .n.done{ animation:pop .6s var(--e); }
@keyframes pop{ 40%{ transform:scale(1.08); text-shadow:0 0 24px rgba(91,141,247,.55) } }

/* ═══ SOBRE ═══ */
.about{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:center; }
.ticks{ display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.ticks li{ display:flex; gap:12px; font-size:15px; color:var(--txt-2); line-height:1.55; list-style:none; }
.ticks svg{ flex:none; margin-top:3px; }

/* ═══ PROCESSO ═══ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px); position:relative; }
.step{ position:relative; padding-top:30px; }
.step::before{
  content:''; position:absolute; top:8px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,var(--blue),transparent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .9s var(--e) .1s;
}
.step.in::before{ transform:scaleX(1); }
.step .n{
  position:absolute; top:0; left:0;
  width:17px; height:17px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.16);
}
.step.in .n{ animation:node .8s var(--e); }
@keyframes node{ 0%{ transform:scale(0); box-shadow:0 0 0 0 rgba(37,99,235,.4) } 60%{ transform:scale(1.25) } 100%{ transform:scale(1) } }
.step .k{ font-size:12px; font-weight:600; color:var(--blue-lt); font-family:var(--h); letter-spacing:.06em; }
.step .t{ font-family:var(--h); font-weight:700; font-size:18px; letter-spacing:-.025em; margin:8px 0 9px; }
.step .d{ font-size:14.2px; color:var(--txt-2); line-height:1.62; }

/* ═══ 8. PLANOS ═══ */
.plans{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px); max-width:900px; margin-inline:auto; }
.plan{
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--card),rgba(13,21,36,.5));
  padding:clamp(26px,2.8vw,38px); display:flex; flex-direction:column;
  position:relative; transition:border-color .45s var(--e), box-shadow .45s var(--e);
}
.plan:hover{ box-shadow:0 26px 60px -34px rgba(37,99,235,.8); }
.plan.top{
  border-color:rgba(91,141,247,.42);
  background:linear-gradient(180deg,rgba(37,99,235,.12),rgba(13,21,36,.6));
}
.plan .rec{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  padding:5px 15px; border-radius:99px;
  background:linear-gradient(180deg,#3B7BF5,var(--blue)); color:#fff;
  font-size:11.5px; font-weight:700; font-family:var(--h);
  box-shadow:0 6px 18px -8px rgba(37,99,235,.9); white-space:nowrap;
}
.plan .nm{ font-family:var(--h); font-weight:700; font-size:20px; letter-spacing:-.025em; }
.plan .ds{ font-size:14px; color:var(--txt-3); margin-top:7px; }
.plan .pr{ display:flex; align-items:baseline; gap:5px; margin:24px 0 4px; }
.plan .pr .c{ font-size:19px; color:var(--txt-2); font-family:var(--h); font-weight:600; }
.plan .pr .v{ font-family:var(--h); font-weight:800; font-size:clamp(38px,4.6vw,54px); letter-spacing:-.05em; line-height:1; }
.plan .pr .p{ font-size:14px; color:var(--txt-3); }
.plan .note{ font-size:13px; color:var(--txt-3); margin-bottom:26px; }
.plan ul{ list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.plan li{ display:flex; gap:11px; font-size:14.5px; color:var(--txt-2); line-height:1.5; }
.plan li svg{ flex:none; margin-top:3px; }
.plan .go{ margin-top:auto; }
.plan .btn, .plan .btn-2{ width:100%; }

/* ═══ DEPOIMENTO ═══ */
.quote{
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--card),rgba(13,21,36,.5));
  padding:clamp(26px,3vw,42px);
}
.quote .mk{ font-family:Georgia,serif; font-size:52px; color:var(--blue-lt); line-height:.6; opacity:.5; }
.quote p{ font-size:clamp(15px,1.4vw,18px); line-height:1.66; color:var(--txt); margin:14px 0 22px; }
.quote .who{ display:flex; align-items:center; gap:13px; }
.quote .av{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:linear-gradient(150deg,var(--blue),#1E3A8A);
  display:grid; place-items:center;
  font-family:var(--h); font-weight:700; font-size:15px; color:#fff;
}
.quote .av.ph{ object-fit:cover; }
.quote .nm{ font-family:var(--h); font-weight:600; font-size:15px; }
.quote .rl{ font-size:13px; color:var(--txt-3); }

/* ═══ FAQ ═══ */
.faq{ max-width:860px; margin-inline:auto; }
.q{ border-bottom:1px solid var(--line); }
.q button{ width:100%; display:flex; align-items:flex-start; gap:16px; padding:22px 0; text-align:left; }
.q .num{ font-size:12.5px; color:var(--blue-lt); font-family:var(--h); font-weight:600; padding-top:3px; flex:none; }
.q .qt{ flex:1; font-family:var(--h); font-weight:600; font-size:clamp(15.5px,1.5vw,18px); letter-spacing:-.02em; line-height:1.42; transition:color .3s; }
.q button:hover .qt{ color:var(--blue-lt); }
.q .ic{ flex:none; width:22px; height:22px; position:relative; margin-top:2px; }
.q .ic::before, .q .ic::after{
  content:''; position:absolute; top:50%; left:50%; background:var(--txt-2);
  transform:translate(-50%,-50%); transition:transform .4s var(--e), background .4s;
}
.q .ic::before{ width:13px; height:1.6px; }
.q .ic::after{ width:1.6px; height:13px; }
.q.open .ic::after{ transform:translate(-50%,-50%) rotate(90deg); }
.q.open .ic::before, .q.open .ic::after{ background:var(--blue-lt); }
.q .ans{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--e); }
.q.open .ans{ grid-template-rows:1fr; }
.q .ans > div{ overflow:hidden; }
.q .ans p{
  padding:0 38px 24px 38px; font-size:14.8px; color:var(--txt-2); line-height:1.7;
  opacity:0; transform:translateY(-6px); transition:opacity .45s var(--e) .08s, transform .45s var(--e) .08s;
}
.q.open .ans p{ opacity:1; transform:none; }

/* ═══ CTA ═══ */
.cta{
  position:relative; overflow:hidden;
  border:1px solid rgba(91,141,247,.26); border-radius:20px;
  background:linear-gradient(165deg,rgba(37,99,235,.16),rgba(13,21,36,.7));
  padding:clamp(38px,5.4vw,72px) clamp(24px,4vw,56px);
  text-align:center;
}
.cta::before{
  content:''; position:absolute; top:-60%; left:50%;
  width:700px; height:700px; margin-left:-350px;
  background:radial-gradient(circle,rgba(37,99,235,.25),transparent 62%);
  pointer-events:none;
  translate:calc(var(--px) * 34px) calc(var(--py) * 22px);
  transition:translate .8s cubic-bezier(.2,.8,.3,1);
}
.cta > *{ position:relative; z-index:1; }
.cta .h2{ max-width:18ch; margin:16px auto 0; }
.cta .lead{ margin:18px auto 0; max-width:52ch; }
.cta-act{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
.cta .fine{ font-size:13px; color:var(--txt-3); margin-top:22px; }

/* ═══ RODAPÉ ═══ */
.foot{ border-top:1px solid var(--line); padding-block:clamp(40px,5vw,60px) 26px; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(26px,4vw,60px); }
.foot p{ font-size:14px; color:var(--txt-3); line-height:1.65; margin-top:16px; max-width:38ch; }
.foot h4{ font-family:var(--h); font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--txt); margin-bottom:14px; }
.foot ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.foot ul a{ font-size:14px; color:var(--txt-3); transition:color .3s, padding-left .3s var(--e); }
.foot ul a:hover{ color:var(--blue-lt); padding-left:4px; }
/* bloco de contato: WhatsApp e Instagram com icone */
.foot-con{ gap:12px; margin-top:2px; }
.foot-con a{
  display:flex; align-items:center; gap:11px;
  width:fit-content; color:var(--txt-3);
}
.foot-con a:hover{ padding-left:0; }
.foot-con .ic{
  flex:none; width:36px; height:36px; border-radius:11px;
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--bg-2);
  transition:transform .35s var(--e), border-color .3s, background .3s;
}
.foot-con .ic.wa{ color:#25D366; }
.foot-con .ic.ig{ color:#E1306C; }
.foot-con a:hover .ic{ transform:translateY(-2px); }
.foot-con a:hover .ic.wa{ border-color:rgba(37,211,102,.45); background:rgba(37,211,102,.10); }
.foot-con a:hover .ic.ig{ border-color:rgba(225,48,108,.45); background:rgba(225,48,108,.10); }
.foot-con .tx{ display:flex; flex-direction:column; gap:2px; line-height:1.25; }
.foot-con .tx b{
  font-family:var(--h); font-size:13.5px; font-weight:600;
  color:var(--txt); transition:color .3s;
}
.foot-con .tx em{ font-style:normal; font-size:12.5px; color:var(--txt-3); }
.foot-con a:hover .tx b{ color:var(--blue-lt); }
.foot .foot-note{ margin-top:18px; font-size:12.5px; color:var(--txt-4); }

/* ═══ 404 ═══ */
.nf{
  position:relative; overflow:hidden;
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:clamp(48px,8vh,80px) 0;
}
.nf-in{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
.nf .logo{ margin-bottom:clamp(40px,6vh,64px); }
.nf .eyebrow{ margin-bottom:22px; }
.eyebrow.err::before{ background:var(--txt-3); animation:none; box-shadow:none; }
.nf-num{
  font-family:var(--h); font-weight:800; letter-spacing:-.05em; line-height:1;
  font-size:clamp(84px,15vw,164px); color:var(--txt);
}
.nf-h2{ margin-top:6px; max-width:16ch; }
.nf .lead{ margin-top:18px; max-width:44ch; }
.nf-act{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; }
.nf-foot{
  display:flex; flex-wrap:wrap; gap:26px; justify-content:center;
  margin-top:clamp(46px,7vh,72px); padding-top:24px; border-top:1px solid var(--line);
  width:100%; max-width:520px;
}
.nf-foot a{ font-size:13.5px; color:var(--txt-3); transition:color .3s; }
.nf-foot a:hover{ color:var(--blue-lt); }


.foot-bot{
  margin-top:clamp(30px,4vw,48px); padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--txt-4);
}

/* ═══ WHATSAPP FLUTUANTE ═══ */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transform:scale(0); transition:transform .5s var(--e);
}
.wa.on{ transform:scale(1); }
.wa:hover{ transform:scale(1.09); }
.wa::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.6);
  animation:ring 2.6s var(--e) infinite;
}
@keyframes ring{ 0%{ transform:scale(1); opacity:.8 } 100%{ transform:scale(1.65); opacity:0 } }

/* ═══ 9. MOTION ═══ */

/* reveal ao entrar na tela */
.rv{
  opacity:0; transform:translateY(26px);
  filter:blur(6px);
  transition:opacity .85s var(--e), transform .85s var(--e), filter .85s var(--e);
}
.rv.in{ opacity:1; transform:none; filter:none; }
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}

/* títulos que sobem palavra por palavra */
.sp{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.sp > i{
  display:inline-block; font-style:normal;
  transform:translateY(112%) rotate(3deg); opacity:0;
  transition:transform .85s var(--e), opacity .6s var(--e);
  transition-delay:calc(var(--i,0) * 48ms);
}
.split.in .sp > i{ transform:none; opacity:1; }

/* inclinação 3D em cards e planos */
.tilt{
  transform:
    perspective(900px)
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg))
    translate3d(0, var(--up,0px), 0);
  transition:transform .5s var(--e);
  transform-style:preserve-3d;
  will-change:transform;
}
.tilt.live{ transition:transform .12s linear; }

/* cursor personalizado (só em ponteiro fino) */
.cur, .cur-r{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; opacity:0; transition:opacity .3s var(--e);
  mix-blend-mode:screen;
}
.cur{
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  background:var(--blue-lt); box-shadow:0 0 14px rgba(91,141,247,.9);
}
.cur-r{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(91,141,247,.55);
  transition:opacity .3s var(--e), width .35s var(--e), height .35s var(--e),
             margin .35s var(--e), border-color .35s var(--e), background .35s var(--e);
}
.cur.on, .cur-r.on{ opacity:1; }
.cur-r.hot{
  width:56px; height:56px; margin:-28px 0 0 -28px;
  border-color:rgba(91,141,247,.9); background:rgba(37,99,235,.12);
}

/* ═══ 10. RESPONSIVO ═══ */
@media (max-width:1000px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2, .pf, .plans{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .about{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .nav-l{ display:none; }
  .nav .nav-btn{ display:none; }
  .burger{ display:flex; }
  .steps{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-act .btn, .hero-act .btn-2{ width:100%; }
  .nf-act{ flex-direction:column; width:100%; }
  .nf-act .btn, .nf-act .btn-2{ width:100%; }
  .hero{ min-height:auto; padding-bottom:clamp(58px,8vh,84px); }
  .hero h1{ max-width:none; }
  .fx-grid{ background-size:42px 42px; }
  .scroll-hint{ display:none; }
}

/* em telas de toque não há mouse a seguir: nada de cursor nem paralaxe */
@media (hover:none), (pointer:coarse){
  .cur, .cur-r, .fx-halo{ display:none; }
  .hero-in{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; filter:none; }
  .sp > i{ opacity:1; transform:none; }
  .fx-noise, .fx-halo, .cur, .cur-r{ display:none; }
  .tw .c{ animation:none !important; opacity:1; }
  .hero-in{ transform:none; }
}