/* ==========================================================================
   Next Scale — landing
   Identidade visual de 28/07/2026, variante escura (padrão da marca).
   Tudo deriva de --u: a razão 1 : 2 : 4 que gera o símbolo governa os
   espaçamentos. O âmbar aparece UMA vez, no CTA — o próximo passo.
   Sem webfont e sem requisição externa: nada na página sai desta origem.
   ========================================================================== */

:root {
  --ink:    #05080F;   /* mais fundo que o ink da marca: dá profundidade real */
  --surface:#0B1220;
  --slate:  #111A2B;
  --line:   #1E2A40;
  --line-2: #2A3A57;
  --signal: #4F6BFF;
  --signal-2:#7B92FF;
  --amber:  #FFB020;
  --mist:   #8494B0;
  --paper:  #FFFFFF;
  --body:   #DCE4F2;

  --u:  8px;  --u2: 16px; --u3: 24px; --u4: 32px;
  --u6: 48px; --u8: 64px; --u12: 88px; --u16: 104px; --u24: 128px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Liberation Sans", sans-serif;
  --cond: "Arial Narrow", "Helvetica Neue Condensed", "Nimbus Sans Narrow",
          "Liberation Sans Narrow", var(--sans);

  --maxw: 1140px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { color: var(--paper); margin: 0; }
p { margin: 0; }
a { color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--u4); }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink);
  padding: var(--u2) var(--u4); z-index: 60; text-decoration: none; font-weight: 600;
}
.skip:focus { left: var(--u2); top: var(--u2); }

/* Texto com o degradê da marca: só nas linhas de ênfase dos títulos. */
.grad {
  background: linear-gradient(100deg, var(--signal-2) 0%, var(--signal) 55%, #3D53D6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.eyebrow {
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mist); margin-bottom: var(--u3); font-weight: 600;
}

.lead {
  font-size: clamp(1.05rem, 1.55vw, 1.32rem);
  color: var(--body); max-width: 60ch; line-height: 1.65;
}
.lead--narrow { max-width: 52ch; }

/* ── cabeçalho fixo com vidro ─────────────────────────────────────────── */
.site {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--u4); padding: var(--u3) var(--u4);
  background: rgba(5, 8, 15, .72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.site.stuck { border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: var(--u2); text-decoration: none; }
.brand-mark { height: 22px; width: auto; }
/* O terceiro quadrado NUNCA é preenchido (regra 01). Um seletor CSS vence o
   atributo fill="none" do SVG, então a exclusão é obrigatória. */
.brand-mark rect:not(.third) { fill: var(--signal); }
.brand-mark .third { fill: none; stroke: var(--signal); }
.brand-word {
  font-family: var(--cond); font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--paper); font-size: .88rem;
  white-space: nowrap;
}
.site nav { display: flex; align-items: center; gap: var(--u4); }
.site nav a {
  color: var(--mist); text-decoration: none; font-size: .92rem;
  transition: color .2s var(--ease);
}
.site nav a:hover { color: var(--paper); }
.nav-cta {
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 9px 18px; color: var(--paper) !important; white-space: nowrap;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nav-cta:hover { border-color: var(--signal); background: rgba(79, 107, 255, .12); }
@media (max-width: 900px) { .site nav a:not(.nav-cta) { display: none; } }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 96px);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--u12) 0 var(--u8);
}
.hero > .wrap { position: relative; z-index: 1; width: 100%; }
/* Luz difusa índigo: profundidade sem pesar a página. */
.hero-glow {
  position: absolute; inset: -40% -20% -20% -20%; height: auto;
  background:
    radial-gradient(55% 45% at 22% 30%, rgba(79, 107, 255, .30), transparent 70%),
    radial-gradient(40% 40% at 78% 18%, rgba(123, 146, 255, .16), transparent 72%);
  filter: blur(30px); pointer-events: none; z-index: 0;
}
/* A marca em escala monumental, atrás do conteúdo. */
.hero-mark {
  position: absolute; right: max(-4vw, -80px); top: 14%;
  width: min(600px, 46vw); height: auto; opacity: .09; z-index: 0;
  pointer-events: none;
}
.hero-mark rect:not(.third) { fill: var(--signal); }
.hero-mark .third { fill: none; stroke: var(--signal); }

.hero-inner { position: relative; z-index: 1; }

h1 {
  font-size: clamp(1.7rem, 6vw, 4.25rem);
  line-height: 1.03; letter-spacing: -.035em; font-weight: 700;
  margin-bottom: var(--u4);
}
h1 .line { display: block; }

.hero .lead { margin-bottom: var(--u6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--u2) var(--u3); align-items: center; }

/* Único ponto de âmbar da página: o próximo passo. */
.cta {
  display: inline-flex; align-items: center; gap: var(--u2);
  padding: 16px 28px; border-radius: 999px;
  background: var(--amber); color: #1A1204;
  text-decoration: none; font-weight: 700; font-size: 1rem;
  box-shadow: 0 8px 30px rgba(255, 176, 32, .22);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(255, 176, 32, .34); }
.cta-mark { height: 15px; width: auto; }
.cta-mark rect:not(.third) { fill: currentColor; }
.cta-mark .third { fill: none; stroke: currentColor; }

.ghost {
  display: inline-flex; align-items: center;
  padding: 16px 26px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--paper);
  text-decoration: none; font-weight: 600;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.ghost:hover { border-color: var(--signal); background: rgba(79, 107, 255, .10); }

.hero-stats {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: var(--u8);
  margin-top: var(--u8); padding-top: var(--u6);
  border-top: 1px solid var(--line);
}
.hero-stats b {
  display: block; font-size: clamp(1.8rem, 2.8vw, 2.4rem); font-weight: 700;
  color: var(--paper); letter-spacing: -.03em; line-height: 1;
}
.hero-stats span { display: block; margin-top: 8px; color: var(--mist); font-size: .9rem; }

/* ── seções ───────────────────────────────────────────────────────────── */
.band { position: relative; padding: var(--u24) 0; }
.band--alt { background: var(--surface); border-block: 1px solid var(--line); }
.band--close { padding-bottom: var(--u16); }

h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.1; letter-spacing: -.03em; font-weight: 700;
  margin-bottom: var(--u4);
}
h2.big { font-size: clamp(1.75rem, 4.4vw, 3.1rem); }
.band .lead { margin-bottom: var(--u4); }

/* ── cartões ──────────────────────────────────────────────────────────── */
.grid {
  display: grid; gap: var(--u3);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: var(--u8);
}
.card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  border: 1px solid var(--line); border-radius: 18px;
  padding: var(--u6) var(--u4) var(--u4);
  transition: transform .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}
/* Linha de luz no topo, que acende no hover. */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  opacity: .35; transition: opacity .35s var(--ease);
}
.card:hover {
  transform: translateY(-4px); border-color: var(--line-2);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
}
.card:hover::before { opacity: 1; }
.card-n {
  display: block; font-family: var(--cond);
  font-size: .85rem; letter-spacing: .2em; color: var(--signal);
  margin-bottom: var(--u3); font-weight: 700;
}
.card h3 { font-size: 1.35rem; letter-spacing: -.015em; margin-bottom: var(--u2); }
.card p { color: var(--body); font-size: .97rem; }
/* Com 5 cartoes num grid de 3 colunas, o quinto ocupa duas para fechar a
   segunda linha ao lado do quarto, em vez de sobrar sozinho numa terceira. */
@media (min-width: 1010px) {
  .card--wide { grid-column: span 2; }
  .card--wide p { max-width: 64ch; }
}

/* ── setores ──────────────────────────────────────────────────────────── */
.sectors {
  list-style: none; padding: 0; margin: var(--u8) 0 0;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.sectors li { border-top: 1px solid var(--line); }
.sectors li span {
  display: block; padding: var(--u4) var(--u2) var(--u4) 0;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600;
  color: var(--paper); letter-spacing: -.02em;
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.sectors li:hover span { color: var(--signal-2); padding-left: var(--u2); }

/* ── método ───────────────────────────────────────────────────────────── */
.rules { margin-top: var(--u8); display: grid; gap: var(--u2); }
.rule {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--u4);
  align-items: start; padding: var(--u6) 0; border-top: 1px solid var(--line);
}
.rule-n {
  font-family: var(--cond); font-size: 1.6rem; font-weight: 700;
  color: var(--signal); letter-spacing: .08em; line-height: 1.2;
}
.rule h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.02em; margin-bottom: var(--u2); }
.rule p { max-width: 66ch; }
@media (max-width: 700px) { .rule { grid-template-columns: 1fr; gap: var(--u2); } }

/* ── produto ──────────────────────────────────────────────────────────── */
.band--product { overflow: hidden; background: var(--surface); border-block: 1px solid var(--line); }
.product-glow {
  position: absolute; inset: auto -20% -60% 10%; height: 120%;
  background: radial-gradient(48% 42% at 50% 50%, rgba(79, 107, 255, .22), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.band--product .wrap { position: relative; z-index: 1; }
.product-title {
  font-size: clamp(2.6rem, 6.5vw, 4.8rem);
  letter-spacing: -.045em; margin-bottom: var(--u4); line-height: 1.02;
  background: linear-gradient(100deg, #FFFFFF 0%, var(--signal-2) 70%, var(--signal) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.note { color: var(--mist); font-size: .97rem; margin: var(--u4) 0 var(--u6); max-width: 52ch; }
.link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px;
  border: 1px solid var(--signal); color: var(--paper);
  text-decoration: none; font-weight: 600;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.link:hover { background: rgba(79, 107, 255, .16); transform: translateY(-2px); }

/* ── contato ──────────────────────────────────────────────────────────── */
.mail {
  display: inline-block; margin-top: var(--u8);
  font-size: clamp(1.15rem, 3.1vw, 2.1rem); font-weight: 700;
  color: var(--paper); text-decoration: none; letter-spacing: -.025em;
  border-bottom: 2px solid var(--line-2);
  padding-bottom: 6px; overflow-wrap: anywhere;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.mail:hover { border-bottom-color: var(--signal); color: var(--signal-2); }

/* ── rodapé ───────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--line); padding: var(--u6) 0 var(--u8); }
.foot-inner {
  display: flex; justify-content: space-between; gap: var(--u4);
  flex-wrap: wrap; font-size: .82rem;
}
.foot-brand {
  font-family: var(--cond); font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--paper); margin-right: var(--u2);
}
.foot-meta { color: var(--mist); }

/* ── WhatsApp flutuante ───────────────────────────────────────────────────
   Verde oficial: elemento funcional de terceiro, com reconhecimento
   universal. Não compete com o âmbar, que segue sendo o único acento DA
   MARCA e aparece uma única vez, no CTA.                                  */
.wa {
  position: fixed; right: var(--u4); bottom: var(--u4); z-index: 55;
  display: inline-flex; align-items: center; gap: 0;
  height: 58px; padding: 0 16px; border-radius: 29px;
  background: #25D366; color: #06210F;
  text-decoration: none; font-weight: 700; font-size: .9rem;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .3);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), gap .25s var(--ease);
}
.wa svg { width: 27px; height: 27px; flex: none; fill: currentColor; }
.wa-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
            transition: max-width .3s var(--ease), opacity .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .wa:hover, .wa:focus-visible {
    gap: 10px; transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(37, 211, 102, .42);
  }
  .wa:hover .wa-label, .wa:focus-visible .wa-label { max-width: 180px; opacity: 1; }
}
@media (hover: none) { .wa { padding: 0; width: 58px; justify-content: center; } }

/* ── entrada em cena ──────────────────────────────────────────────────────
   O hero entra no load; o resto entra quando o IntersectionObserver marca
   .in. Sem JS a classe .js nunca é aplicada e tudo fica visível.          */
.rise { opacity: 0; transform: translateY(22px); animation: rise .9s var(--ease) forwards; }
.rise.d1 { animation-delay: .10s; }
.rise.d2 { animation-delay: .20s; }
.rise.d3 { animation-delay: .30s; }
.rise.d4 { animation-delay: .42s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .js .reveal, .js .reveal.in {
    opacity: 1 !important; transform: none !important;
    animation: none !important; transition: none !important;
  }
  .card:hover, .cta:hover, .ghost:hover, .link:hover, .wa:hover { transform: none; }
}

/* ── responsivo ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --u24: 112px; --u16: 80px; --u12: 64px; }
  .hero { min-height: auto; padding: var(--u12) var(--u4) var(--u8); }
  .hero-mark { right: -18%; top: auto; bottom: 4%; width: 76vw; opacity: .07; }
  .hero-stats { gap: var(--u6); margin-top: var(--u12); }
}
@media (max-width: 720px) {
  .wrap { padding: 0 var(--u3); }
  .site { padding: var(--u2) var(--u3); gap: var(--u2); }
  /* Em telas estreitas a marca e o CTA precisam caber lado a lado sem quebrar. */
  .brand-word { font-size: .74rem; letter-spacing: .15em; }
  .brand-mark { height: 18px; }
  .nav-cta { padding: 8px 14px; font-size: .82rem; }
  .hero { padding: var(--u8) var(--u3) var(--u8); }
  .wa { right: var(--u2); bottom: var(--u2); }
  .hero-actions { gap: var(--u2); }
  /* Os botoes NAO ocupam 100%: com largura total eles chegam ate o canto
     inferior direito e ficam por baixo do botao flutuante do WhatsApp. */
  .cta, .ghost { width: auto; }
  .cta { padding: 14px 22px; font-size: .94rem; }
  .ghost { padding: 14px 20px; font-size: .94rem; }
  /* Respiro no fim da pagina para o flutuante nao cobrir o rodape. */
  .site-foot { padding-bottom: calc(var(--u8) + 58px); }
}