/* ============================================================
   FOKAL COMPANY — Landing Page
   Conceito: "O Ponto de Foco" — viewfinder / lente
   Dark premium · alto contraste · azul de conversão
   ============================================================ */

:root{
  /* Surfaces (escala tonal — tema claro) */
  --bg:        #f3f3f3;
  --surface-0: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f1f2f5;

  /* Texto */
  --text:    #15161A;
  --muted:   rgba(21,22,26,.64);
  --faint:   rgba(21,22,26,.42);

  /* Azul de conversão + variações */
  --blue:        #0051C5;
  --blue-bright: #1F6BFF;
  --blue-soft:   rgba(46,123,255,.12);
  --blue-glow:   rgba(0,81,197,.30);

  /* Linhas / bordas */
  --line:      rgba(21,22,26,.10);
  --line-2:    rgba(21,22,26,.16);

  /* Tipografia */
  --display: "Clash Display", "Manrope", system-ui, sans-serif;
  --body:    "Manrope", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Geometria */
  --radius:  18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --maxw: 1180px;

  /* Sombras */
  --shadow-blue: 0 16px 44px -14px rgba(0,81,197,.32);
  --shadow-card: 0 14px 34px -18px rgba(20,24,40,.20);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--blue); color:#fff; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

/* ============================================================
   ATMOSFERA — grão + cursor focal
   ============================================================ */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.focal-cursor{
  position:fixed; top:0; left:0; z-index:9999; width:34px; height:34px;
  margin:-17px 0 0 -17px; border-radius:50%; pointer-events:none;
  border:1px solid rgba(46,123,255,.7);
  box-shadow:0 0 12px rgba(46,123,255,.5), inset 0 0 8px rgba(46,123,255,.25);
  opacity:0; transform:scale(.6);
  transition:opacity .25s, transform .12s ease-out, width .2s, height .2s;
}
.focal-cursor::before{
  content:""; position:absolute; inset:0; margin:auto; width:3px; height:3px;
  background:var(--blue-bright); border-radius:50%;
}
.focal-cursor.is-active{ opacity:1; }
.focal-cursor.is-hover{ width:54px; height:54px; margin:-27px 0 0 -27px; border-color:var(--blue-bright); }
@media (hover:none){ .focal-cursor{ display:none; } }

/* ============================================================
   ELEMENTOS COMPARTILHADOS
   ============================================================ */
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background:var(--blue-bright);
  box-shadow:0 0 0 4px var(--blue-soft); flex:none;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px var(--blue-soft);} 50%{ box-shadow:0 0 0 7px transparent;} }

.hl{
  color:var(--blue-bright); -webkit-text-fill-color:var(--blue-bright);
  background:linear-gradient(180deg, transparent 62%, var(--blue-soft) 62%);
  padding-inline:2px;
  text-shadow:0 0 28px rgba(46,123,255,.45);
}
.blur-word{ color:var(--faint); -webkit-text-fill-color:var(--faint); filter:blur(.6px); font-style:italic; }
.muted-title{ color:var(--muted); -webkit-text-fill-color:var(--muted); }

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

.section{ position:relative; padding:clamp(72px,11vw,140px) 0; z-index:2; }
.section__head{ max-width:760px; margin:0 auto clamp(48px,7vw,80px); text-align:center; }
.section__head--left{ margin-inline:0; text-align:left; }
.section__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(30px,4.6vw,56px); line-height:1.05; letter-spacing:-.02em;
  background:linear-gradient(180deg,#15161A 30%, rgba(21,22,26,.66));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section__lead{ color:var(--muted); font-size:clamp(16px,1.8vw,19px); margin-top:22px; }
.section__lead strong{ color:var(--text); font-weight:600; }
.section__cta{ display:flex; justify-content:center; margin-top:clamp(40px,6vw,64px); }

/* ---------- Botões ---------- */
.btn{
  --bg-btn:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:15px; letter-spacing:-.01em;
  padding:14px 24px; border-radius:var(--radius-pill);
  border:1px solid transparent; position:relative; isolation:isolate;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-color .25s, border-color .25s, color .25s;
  will-change:transform;
}
.btn svg{ flex:none; }
.btn--lg{ padding:17px 30px; font-size:16px; }
.btn--sm{ padding:9px 18px; font-size:13.5px; }
.btn--block{ width:100%; }

.btn--primary{
  background:var(--blue); color:#fff; overflow:hidden;
  box-shadow:0 8px 24px -8px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue)); opacity:0; transition:opacity .25s;
}
.btn--primary::before{
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent);
  transform:skewX(-18deg); transition:left .7s cubic-bezier(.2,.65,.3,.9);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -10px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,.25); }
.btn--primary:hover::after{ opacity:1; }
.btn--primary:hover::before{ left:125%; }

.btn--ghost{
  background:rgba(21,22,26,.02); color:var(--text); border-color:var(--line-2);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ border-color:var(--blue-bright); color:var(--blue); background:rgba(46,123,255,.10); transform:translateY(-2px); }

.dot-live{
  width:7px; height:7px; border-radius:50%; display:inline-block;
  background:#3ddc84; box-shadow:0 0 0 0 rgba(61,220,132,.5); animation:live 2s infinite;
}
@keyframes live{ 0%{ box-shadow:0 0 0 0 rgba(61,220,132,.5);} 70%{ box-shadow:0 0 0 7px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }

/* ---------- Reveal (scroll-in) — timing cinematográfico ---------- */
.reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity 1.2s cubic-bezier(.2,.65,.3,.9), transform 1.2s cubic-bezier(.2,.65,.3,.9);
  transition-delay:var(--d,0s);
}
.reveal.in{ opacity:1; transform:none; }

/* Variante "focar": entra desfocado e fica nítido (conceito Fokal) */
.reveal--focus{
  transform:translateY(28px) scale(.985); filter:blur(16px);
  transition:opacity 1.5s cubic-bezier(.2,.65,.3,.9), transform 1.5s cubic-bezier(.2,.65,.3,.9), filter 1.3s cubic-bezier(.2,.65,.3,.9);
  transition-delay:var(--d,0s);
}
.reveal--focus.in{ filter:blur(0); }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(255,255,255,.78); backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0%;
  background:linear-gradient(90deg,var(--blue),var(--blue-bright));
  box-shadow:0 0 14px var(--blue-glow);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.01em; }
.brand__mark{ color:var(--blue-bright); display:grid; place-items:center; }
.brand__word{ color:var(--text); }
.nav__links{ display:flex; gap:30px; margin-left:auto; }
.nav__links a{ font-size:14.5px; color:var(--muted); position:relative; padding:6px 0; transition:color .2s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--blue-bright); transition:width .25s; }
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ margin-left:8px; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.nav__burger span{ width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s, opacity .25s; }
.nav__burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2){ transform:translateY(-0px) rotate(-45deg); }
.nav__mobile{
  display:none; flex-direction:column; gap:6px; padding:16px 24px 26px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--line);
}
.nav__mobile a{ padding:13px 4px; color:var(--muted); border-bottom:1px solid var(--line); font-size:16px; }
.nav__mobile a:last-child{ border:0; margin-top:8px; }
.nav__mobile.open{ display:flex; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:128px; padding-bottom:0; overflow:hidden; z-index:2; }
.hero__bg{ position:absolute; inset:0; z-index:-1; }
.hero__glow{
  position:absolute; top:-180px; left:50%; transform:translateX(-50%);
  width:900px; height:700px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(46,123,255,.22), rgba(0,81,197,.08) 38%, transparent 65%);
  filter:blur(20px);
  transition:transform 1.1s cubic-bezier(.2,.65,.3,.9);
}
.hero__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(circle at 60% 30%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 60% 30%, #000 0%, transparent 70%);
  opacity:.5;
}
.hero__weave{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__weave canvas{ display:block; width:100%!important; height:100%!important; }
.hero__scrim{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(120% 92% at 50% 44%, rgba(243,243,243,.82) 0%, rgba(243,243,243,.45) 36%, transparent 68%),
    linear-gradient(0deg, var(--bg) 2%, transparent 28%),
    linear-gradient(180deg, rgba(243,243,243,.55) 0%, transparent 20%);
}
.hero__inner{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:48px;
  min-height:calc(100vh - 200px); padding-bottom:60px;
}
/* Hero centralizado (solo) */
.hero__inner--solo{ grid-template-columns:1fr; justify-items:center; text-align:center; min-height:calc(100vh - 150px); }
.hero__inner--solo .hero__copy{ max-width:760px; display:flex; flex-direction:column; align-items:center; }
.hero__inner--solo .eyebrow{ justify-content:center; }
.hero__inner--solo .hero__sub{ margin-inline:auto; }
.hero__inner--solo .hero__actions{ justify-content:center; }
.hero__inner--solo .hero__micro{ justify-content:center; }
.hero__copy{ max-width:600px; }

/* Eyebrow em chip (somente no hero) */
.eyebrow--chip{
  background:rgba(255,255,255,.04); border:1px solid var(--line-2);
  padding:9px 16px 9px 14px; border-radius:var(--radius-pill);
  backdrop-filter:blur(8px); margin-bottom:30px;
}

.hero__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(46px,7.4vw,88px); line-height:1.0; letter-spacing:-.035em; margin-bottom:24px;
  background:linear-gradient(180deg,#15161A 35%, rgba(21,22,26,.62));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__title .blur-word{ font-weight:500; }
.hero__sub{ color:var(--muted); font-size:clamp(17px,2vw,21px); max-width:540px; margin-bottom:36px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__actions--center{ justify-content:center; }
.hero__micro{ font-family:var(--mono); font-size:12.5px; color:var(--faint); margin-top:24px; display:flex; align-items:center; gap:10px; letter-spacing:.02em; }

/* ---------- Scope (viewfinder) ---------- */
.hero__viz{ display:grid; place-items:center; }
.scope{ position:relative; width:min(440px,80vw); aspect-ratio:1; }
.scope__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.scope__ring{ fill:none; stroke:var(--line-2); stroke-width:1; }
.scope__ring--out{ stroke-dasharray:4 8; transform-origin:200px 200px; animation:spin 60s linear infinite; }
.scope__ring--mid{ stroke:rgba(46,123,255,.35); transform-origin:200px 200px; animation:spin 44s linear infinite reverse; }
.scope__cross{ stroke:var(--line-2); stroke-width:1; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* Lente com vídeo */
.scope__lens{
  position:absolute; inset:11%; border-radius:50%; overflow:hidden;
  border:1.5px solid rgba(46,123,255,.55);
  box-shadow:0 0 0 8px rgba(7,7,8,.6), 0 24px 60px -16px var(--blue-glow), inset 0 0 40px rgba(0,0,0,.6);
  animation:lensBreathe 6s ease-in-out infinite;
}
@keyframes lensBreathe{ 0%,100%{ box-shadow:0 0 0 8px rgba(7,7,8,.6), 0 18px 50px -18px var(--blue-glow), inset 0 0 40px rgba(0,0,0,.6);} 50%{ box-shadow:0 0 0 8px rgba(7,7,8,.6), 0 26px 70px -14px var(--blue-glow), inset 0 0 40px rgba(0,0,0,.5);} }
.scope__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.1) brightness(.92); }
.scope__lens-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 40%, rgba(7,7,8,.55) 100%),
             linear-gradient(180deg, rgba(0,81,197,.10), transparent 40%);
  mix-blend-mode:multiply;
}
.scope__scan{
  position:absolute; left:0; right:0; height:34%; top:-34%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(46,123,255,.18), transparent);
  animation:scan 5s ease-in-out infinite;
}
@keyframes scan{ 0%{ top:-34%;} 100%{ top:100%;} }

.scope__dot-live{
  position:absolute; top:13%; left:13%; z-index:3; width:9px; height:9px; border-radius:50%;
  background:#ff4d4d; box-shadow:0 0 0 0 rgba(255,77,77,.6), 0 0 10px rgba(255,77,77,.8);
  animation:live 1.8s infinite;
}

.scope__ticks{
  position:absolute; inset:0; border-radius:50%;
  background:
    conic-gradient(from 0deg, transparent 0 1deg, rgba(255,255,255,.18) 1deg 1.4deg, transparent 1.4deg 5deg);
  -webkit-mask:radial-gradient(circle, transparent 47%, #000 47.5%, #000 50%, transparent 50.5%);
  mask:radial-gradient(circle, transparent 47%, #000 47.5%, #000 50%, transparent 50.5%);
}
.scope__tag{
  position:absolute; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--muted); background:var(--surface-2); border:1px solid var(--line);
  padding:6px 11px; border-radius:var(--radius-pill); white-space:nowrap;
  box-shadow:var(--shadow-card);
}
.scope__tag--1{ top:8%; right:-6%; animation:float 6s ease-in-out infinite; }
.scope__tag--2{ bottom:18%; left:-12%; animation:float 6s ease-in-out infinite .8s; }
.scope__tag--3{ bottom:-2%; right:8%; animation:float 6s ease-in-out infinite 1.6s; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }

/* ---------- Marquee ---------- */
.marquee{
  border-block:1px solid var(--line); background:var(--surface-0);
  overflow:hidden; padding:18px 0; position:relative; z-index:2;
}
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; }
.marquee::before{ left:0; background:linear-gradient(90deg,var(--surface-0),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--surface-0),transparent); }
.marquee__track{ display:flex; align-items:center; gap:28px; white-space:nowrap; width:max-content; animation:scroll 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-family:var(--mono); font-size:14px; color:var(--muted); letter-spacing:.02em; }
.marquee__sep{ color:var(--blue-bright); }
@keyframes scroll{ to{ transform:translateX(-50%);} }

/* ============================================================
   PROBLEMA
   ============================================================ */
.pains{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pain{
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; position:relative; overflow:hidden;
  transition:border-color .3s, transform .3s, background-color .3s;
}
.pain::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%), var(--blue-soft), transparent 60%);
}
.pain:hover{ transform:translateY(-4px); border-color:var(--line-2); background:var(--surface-2); }
.pain:hover::before{ opacity:1; }
.pain__no{ font-family:var(--mono); font-size:13px; color:var(--blue-bright); display:block; margin-bottom:16px; }
.pain h3{ font-family:var(--display); font-weight:500; font-size:19px; line-height:1.2; margin-bottom:9px; letter-spacing:-.01em; }
.pain p{ color:var(--muted); font-size:15px; }
.turn{
  text-align:center; font-family:var(--display); font-weight:500;
  font-size:clamp(22px,3.2vw,34px); margin-top:clamp(44px,6vw,64px); letter-spacing:-.01em;
}

/* ============================================================
   MÉTODO
   ============================================================ */
.section--method{ background:var(--surface-0); border-block:1px solid var(--line); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step; position:relative; }
@media (min-width:981px){
  /* Linha de fluxo conectando as etapas (aparece nos vãos entre cards) */
  .steps::before{
    content:""; position:absolute; left:30px; right:30px; top:53px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(46,123,255,.45) 15%, rgba(46,123,255,.45) 85%, transparent);
  }
  .step{ z-index:1; }
}
.step{
  background:linear-gradient(180deg,var(--surface-2),var(--surface-1));
  border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px 34px;
  position:relative; transition:transform .3s, border-color .3s, box-shadow .3s;
}
.step:hover{ transform:translateY(-6px); border-color:rgba(46,123,255,.4); box-shadow:var(--shadow-blue); }
.step__no{
  font-family:var(--mono); font-size:14px; color:var(--blue-bright);
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(46,123,255,.4); background:var(--blue-soft); margin-bottom:22px;
}
.step h3{ font-family:var(--display); font-weight:600; font-size:21px; margin-bottom:12px; letter-spacing:-.01em; }
.step p{ color:var(--muted); font-size:15px; }

/* ============================================================
   SERVIÇOS
   ============================================================ */
.services{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.svc{
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; transition:transform .3s, border-color .3s, background-color .3s;
  position:relative;
}
/* Spotlight compartilhado: brilho azul que segue o mouse */
.svc::before,.step::before,.pillar::before{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
  transition:opacity .4s; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(46,123,255,.10), transparent 60%);
}
.svc:hover::before,.step:hover::before,.pillar:hover::before{ opacity:1; }
.svc:hover{ transform:translateY(-5px); border-color:var(--line-2); background:var(--surface-2); }
.svc__icon{
  display:inline-grid; place-items:center; width:50px; height:50px; border-radius:14px;
  background:var(--blue-soft); color:var(--blue-bright); border:1px solid rgba(46,123,255,.25);
  margin-bottom:20px; transition:transform .3s;
}
.svc__icon svg{ width:24px; height:24px; }
.svc:hover .svc__icon{ transform:scale(1.08) rotate(-4deg); }
.svc h3{ font-family:var(--display); font-weight:500; font-size:18px; line-height:1.2; margin-bottom:8px; letter-spacing:-.01em; }
.svc p{ color:var(--muted); font-size:14.5px; }

/* ============================================================
   SOBRE
   ============================================================ */
.section--about{ background:var(--surface-0); border-block:1px solid var(--line); }
.about{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,72px); align-items:center; }
.about .section__title{ text-align:left; }
.about .section__lead{ text-align:left; }
.pillars{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pillar{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; transition:transform .3s, border-color .3s;
  position:relative;
}
.pillar:hover{ transform:translateY(-4px); border-color:rgba(46,123,255,.4); }
.pillar__k{ font-family:var(--display); font-weight:600; font-size:22px; color:var(--blue-bright); display:block; margin-bottom:10px; }
.pillar p{ color:var(--muted); font-size:14.5px; }

/* ============================================================
   COMPARAÇÃO
   ============================================================ */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto; }
.compare__col{ border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px; position:relative; }
.compare__col--bad{ background:var(--surface-1); }
.compare__col--good{
  background:linear-gradient(180deg, rgba(46,123,255,.10), var(--surface-2));
  border-color:rgba(46,123,255,.5); box-shadow:var(--shadow-blue);
}
.compare__badge{
  position:absolute; top:-12px; left:30px; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  background:var(--blue); color:#fff; padding:5px 12px; border-radius:var(--radius-pill);
}
.compare__h{ font-family:var(--display); font-weight:600; font-size:18px; margin-bottom:24px; letter-spacing:-.01em; }
.compare__col--bad .compare__h{ color:var(--muted); }
.compare ul{ display:flex; flex-direction:column; gap:15px; }
.compare li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--text); }
.compare__col--bad li{ color:var(--muted); }
.ic{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; margin-top:1px; }
.ic--x{ background:rgba(21,22,26,.07); color:var(--faint); }
.ic--check{ background:var(--blue); color:#fff; }
.compare__result{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:14.5px; color:var(--muted); }
.compare__result strong{ font-family:var(--display); font-weight:600; }
.compare__col--good .compare__result{ color:var(--text); }
.compare__col--good .compare__result strong{ color:var(--blue-bright); }

/* ============================================================
   SOLUÇÕES (PRODUTOS)
   ============================================================ */
.section--solutions{ background:var(--surface-0); border-block:1px solid var(--line); }
.solutions{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.solution{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--surface-2),var(--surface-1));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; position:relative; overflow:hidden;
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.solution::before{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
  transition:opacity .4s; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(46,123,255,.10), transparent 60%);
}
.solution:hover{ transform:translateY(-6px); border-color:rgba(46,123,255,.4); box-shadow:var(--shadow-blue); }
.solution:hover::before{ opacity:1; }
.solution__head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.solution__tag{
  font-family:var(--mono); font-size:13px; color:var(--blue-bright);
  border:1px solid rgba(46,123,255,.4); background:var(--blue-soft);
  border-radius:var(--radius-pill); padding:4px 11px;
}
.solution__name{ font-family:var(--display); font-weight:600; font-size:24px; letter-spacing:-.01em; }
.solution__desc{ color:var(--muted); font-size:15px; margin-bottom:22px; }
.solution__list{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.solution__list li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--text); }
.solution__list li::before{
  content:"✓"; flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--blue); color:#fff; font-size:11px; display:grid; place-items:center; margin-top:1px;
}
.solution__foot{
  margin-top:auto; display:flex; flex-direction:column; gap:16px; align-items:flex-start;
  padding-top:22px; border-top:1px solid var(--line);
}
.solution__dur{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--blue-bright); text-transform:uppercase;
}

/* ============================================================
   RESULTADOS
   ============================================================ */
.section--results{ background:var(--surface-0); border-block:1px solid var(--line); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:clamp(48px,7vw,72px); }
.stat{
  text-align:center; padding:44px 24px; border:1px solid var(--line); border-radius:var(--radius);
  background:radial-gradient(120% 120% at 50% 0%, var(--blue-soft), transparent 60%), var(--surface-1);
  position:relative; overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.65,.3,.9), border-color .5s;
}
.stat:hover{ transform:translateY(-4px); border-color:rgba(46,123,255,.35); }
.stat::after{
  content:""; position:absolute; top:-70px; right:-70px; width:180px; height:180px;
  border:1px solid rgba(46,123,255,.18); border-radius:50%; pointer-events:none;
}
.stat__num{
  font-family:var(--display); font-weight:700; font-size:clamp(44px,6vw,68px);
  line-height:1; color:var(--blue); display:block; letter-spacing:-.03em;
  text-shadow:0 2px 24px rgba(0,81,197,.18);
}
.stat__label{ display:block; margin-top:12px; color:var(--muted); font-size:15px; }

.quote{ max-width:760px; margin:0 auto; text-align:center; position:relative; padding:0 20px; }
.quote__mark{ font-family:var(--display); font-size:90px; line-height:.6; color:var(--blue); opacity:.5; }
.quote blockquote{ font-family:var(--display); font-weight:500; font-size:clamp(20px,2.8vw,28px); line-height:1.3; letter-spacing:-.01em; margin:8px 0 20px; }
.quote figcaption{ color:var(--muted); font-size:14.5px; }
.quote__edit{ color:var(--faint); font-family:var(--mono); font-size:11px; }

.logos{ margin-top:clamp(48px,7vw,72px); text-align:center; }
.logos__label{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:24px; }
.logos__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 28px; }
.logo-ph{
  font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:.04em;
  color:var(--faint); border:1px dashed var(--line-2); padding:14px 26px; border-radius:var(--radius-sm);
  transition:color .3s, border-color .3s;
}
.logo-ph:hover{ color:var(--text); border-color:var(--blue-bright); }

/* ============================================================
   FORMULÁRIO
   ============================================================ */
.section--form{ position:relative; overflow:hidden; }
.form-glow{
  position:absolute; bottom:-200px; left:50%; transform:translateX(-50%);
  width:900px; height:600px; border-radius:50%;
  background:radial-gradient(circle, var(--blue-soft), transparent 65%); filter:blur(30px); z-index:-1;
}
.form-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,64px); align-items:start; }
.form-intro .section__title{ text-align:left; }
.form-intro .section__lead{ text-align:left; }
.wa-card{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:32px; padding:20px 24px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface-1);
}
.wa-card strong{ display:block; font-family:var(--display); font-weight:600; font-size:16px; }
.wa-card span{ color:var(--muted); font-size:14px; }

.form-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface-1));
  border:1px solid var(--line-2); border-radius:var(--radius);
  padding:clamp(26px,3vw,38px); box-shadow:var(--shadow-card);
}
.field{ margin-bottom:18px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ display:block; font-size:13.5px; color:var(--muted); margin-bottom:8px; font-weight:500; }
.field input,.field select,.field textarea{
  width:100%; background:var(--surface-0); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px 16px; color:var(--text); font-family:var(--body); font-size:15px;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.field textarea{ resize:vertical; min-height:84px; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }
.field input::placeholder,.field textarea::placeholder{ color:var(--faint); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue-bright); background:var(--surface-1);
  box-shadow:0 0 0 3px var(--blue-soft);
}
.field input:invalid:not(:placeholder-shown){ border-color:rgba(255,90,90,.6); }
.form-micro{ font-family:var(--mono); font-size:12px; color:var(--faint); margin-top:16px; display:flex; align-items:center; gap:8px; }
.form-success{ margin-top:16px; color:#3ddc84; font-size:14.5px; font-weight:600; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{ text-align:center; position:relative; overflow:hidden; }
.cta-final::before{
  content:""; position:absolute; left:50%; top:50%; width:1200px; height:1200px;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle, rgba(0,81,197,.14), transparent 52%),
    repeating-radial-gradient(circle at center, rgba(46,123,255,.09) 0 1px, transparent 1px 92px);
  -webkit-mask-image:radial-gradient(circle at center, #000 28%, transparent 64%);
  mask-image:radial-gradient(circle at center, #000 28%, transparent 64%);
  animation:ctaPulse 9s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100%{ opacity:.65; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.05); }
}
.cta-final__inner{ max-width:820px; position:relative; z-index:1; }
.cta-final__title{
  font-family:var(--display); font-weight:600; font-size:clamp(30px,5vw,58px); line-height:1.05; letter-spacing:-.025em;
  background:linear-gradient(180deg,#FFFFFF 30%, rgba(242,242,242,.62));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cta-final__sub{ color:var(--muted); font-size:clamp(16px,1.9vw,19px); margin:22px auto 38px; max-width:520px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,5vw,64px); align-items:start; }
.faq{ display:flex; flex-direction:column; gap:12px; }
.faq__item{
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; transition:border-color .3s, background-color .3s;
}
.faq__item[open]{ border-color:rgba(46,123,255,.4); background:var(--surface-2); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:20px 24px; font-family:var(--display); font-weight:500;
  font-size:17px; display:flex; align-items:center; justify-content:space-between; gap:16px; letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__plus{ position:relative; width:18px; height:18px; flex:none; }
.faq__plus::before,.faq__plus::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--blue-bright); transition:transform .3s; }
.faq__plus::before{ width:14px; height:2px; }
.faq__plus::after{ width:2px; height:14px; }
.faq__item[open] .faq__plus::after{ transform:scaleY(0); }
.faq__body{ overflow:hidden; max-height:0; transition:max-height .35s ease, padding .35s ease; }
.faq__item[open] .faq__body{ max-height:240px; }
.faq__body p{ padding:0 24px 22px; color:var(--muted); font-size:15px; }

/* ============================================================
   RODAPÉ
   ============================================================ */
.footer{ border-top:1px solid var(--line); background:var(--surface-0); padding-top:56px; position:relative; z-index:2; }
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1.4fr; gap:32px; align-items:start; padding-bottom:40px; }
.footer__tag{ font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-top:14px; letter-spacing:.04em; }
.footer__links{ display:flex; flex-direction:column; gap:12px; }
.footer__links a{ color:var(--muted); font-size:14.5px; transition:color .2s; }
.footer__links a:hover{ color:var(--text); }
.footer__contact{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.footer__contact a:not(.btn){ color:var(--muted); font-size:14.5px; transition:color .2s; }
.footer__contact a:not(.btn):hover{ color:var(--blue-bright); }
.footer__legal{ border-top:1px solid var(--line); padding-block:24px; }
.footer__legal span{ font-size:13px; color:var(--faint); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:980px){
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .hero__inner{ grid-template-columns:1fr; min-height:auto; text-align:left; padding-top:20px; gap:36px; }
  .hero__viz{ order:-1; }
  .scope{ width:min(320px,72vw); }
  .scope__tag{ font-size:10px; }
  .pains,.services{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .solutions{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .about,.form-wrap,.faq-wrap{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .container{ padding-inline:18px; }
  .pains,.services,.steps,.stats,.compare,.pillars{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .hero__actions .btn{ width:100%; }
  .footer__inner{ grid-template-columns:1fr; }
  .scope__tag--2{ left:0; }
}

/* ============================================================
   TEMA CLARO — profundidade dos cards
   ============================================================ */
.pain,.svc,.step,.pillar,.solution,.stat,.compare__col,.faq__item,.form-card,.wa-card{
  box-shadow:var(--shadow-card);
}

/* ============================================================
   ACESSIBILIDADE — motion reduzido
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; filter:none; }
  .focal-cursor{ display:none; }
}