/* ============================================================
   NextMe — Landing
   Implementação do artboard "Landing NextMe.dc.html" (NextMe Design System V2).
   Depende de tokens.css, que deve ser carregado ANTES deste arquivo.
   ============================================================ */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}

/* o header é sticky (72px): sem isto as âncoras param atrás dele */
html{scroll-behavior:smooth}
:target,main[id],section[id]{scroll-margin-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--nm-dark-canvas);
  color:var(--nm-neutral-0);
  font-family:var(--nm-font-body);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%}

a{color:var(--nm-coral-400);text-decoration:none}
a:hover{color:var(--nm-neutral-0)}

*:focus-visible{
  outline:2px solid var(--nm-coral-500);
  outline-offset:3px;
  border-radius:var(--nm-radius-1);
}

@keyframes nm-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- casca da página ---------- */
.nm-page{
  background:linear-gradient(180deg,#1B2145 0%,#141833 46%,#0E121B 100%);
  color:var(--nm-text-primary);
  font-family:var(--nm-font-body);
  min-height:100vh;
}

/* largura útil compartilhada por header, seções e footer */
.nm-wrap{width:min(1180px,92vw);margin:0 auto}

.nm-section{border-top:1px solid var(--nm-border-subtle)}
.nm-section > .nm-wrap{padding:88px 0}

/* revelação escalonada do hero — o atraso vem de --d no elemento */
.nm-reveal{animation:nm-enter var(--nm-dur-revelacao) var(--nm-ease) both;animation-delay:var(--d,0s)}

/* ---------- tipografia recorrente ---------- */
.nm-eyebrow{
  font-family:var(--nm-font-mono);
  font-size:var(--nm-text-mono);
  letter-spacing:var(--nm-tracking-mono);
  text-transform:uppercase;
  color:var(--nm-support-strong);
  margin:0 0 var(--nm-space-4);
}
.nm-eyebrow--accent{color:var(--nm-coral-400)}

.nm-h1{
  font-family:var(--nm-font-display);
  font-size:var(--nm-text-display);
  font-weight:600;
  line-height:var(--nm-leading-display);
  letter-spacing:var(--nm-tracking-display);
  text-wrap:balance;
  max-width:24ch;
  margin:0 0 28px;
}

.nm-h2{
  font-family:var(--nm-font-display);
  font-size:var(--nm-text-titulo);
  font-weight:600;
  letter-spacing:var(--nm-tracking-titulo);
  line-height:var(--nm-leading-titulo);
  margin:0 0 20px;
  max-width:28ch;
  text-wrap:balance;
}
.nm-h2--tight{max-width:24ch}
.nm-h2--flush{margin-bottom:0}

.nm-lead{
  font-size:var(--nm-text-apoio);
  line-height:var(--nm-leading-apoio);
  color:var(--nm-text-secondary);
  max-width:var(--nm-measure-apoio);
  margin:0 0 var(--nm-space-8);
  text-wrap:pretty;
}

.nm-section-lead{
  font-size:var(--nm-text-corpo);
  line-height:var(--nm-leading-corpo);
  color:var(--nm-text-secondary);
  max-width:var(--nm-measure-apoio);
  margin:0 0 var(--nm-space-12);
  text-wrap:pretty;
}

.nm-meta{
  font-family:var(--nm-font-mono);
  font-size:var(--nm-text-mono);
  letter-spacing:.06em;
  color:var(--nm-text-meta);
  margin:0;
}

/* ---------- pular para o conteúdo ---------- */
.nm-skip{
  position:absolute;
  left:-9999px;
  top:var(--nm-space-2);
  background:var(--nm-surface-panel);
  color:var(--nm-text-primary);
  padding:var(--nm-space-3) var(--nm-space-4);
  border-radius:var(--nm-radius-2);
  z-index:var(--nm-z-toast);
}
.nm-skip:focus{left:var(--nm-space-4)}

/* ---------- botões ---------- */
.nm-btn{
  --gap:12px;
  display:inline-flex;
  align-items:center;
  gap:var(--gap);
  min-height:56px;
  padding:0 var(--nm-space-8);
  border-radius:var(--nm-radius-pill);
  font-weight:600;
  font-size:1.05rem;
  transition:gap var(--nm-dur-micro) var(--nm-ease),
             transform var(--nm-dur-micro) var(--nm-ease),
             background-color var(--nm-dur-micro) var(--nm-ease),
             border-color var(--nm-dur-micro) var(--nm-ease);
}

.nm-btn--primary{
  background:var(--nm-accent);
  color:var(--nm-accent-fg);
  box-shadow:var(--nm-shadow-coral);
}
.nm-btn--primary:hover{
  --gap:18px;
  transform:translateY(var(--nm-state-hover-lift));
  background:var(--nm-coral-400);
  color:var(--nm-accent-fg);
}

.nm-btn--ghost{
  border:1px solid var(--nm-border-default);
  color:var(--nm-text-primary);
  padding:0 28px;
}
.nm-btn--ghost:hover{
  border-color:var(--nm-border-strong);
  background:rgba(255,255,255,.06);
  color:var(--nm-text-primary);
}

/* variante compacta do header */
.nm-btn--sm{min-height:var(--nm-touch-min);padding:0 var(--nm-space-6);font-size:.92rem;box-shadow:none}
.nm-btn--sm:hover{--gap:16px}

.nm-btn__icon{flex:none}

/* ---------- header ---------- */
.nm-header{
  position:sticky;
  top:0;
  z-index:var(--nm-z-sticky);
  background:rgba(20,24,51,.82);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--nm-border-subtle);
}
.nm-header__inner{
  display:flex;
  align-items:center;
  gap:var(--nm-space-6);
  min-height:72px;
  flex-wrap:wrap;
  padding:var(--nm-space-2) 0;
}
.nm-header__logo{display:flex;align-items:center;flex:none}
.nm-header__logo img{height:40px;width:auto;display:block}

.nm-nav{display:flex;gap:var(--nm-space-6);flex:1;font-size:.92rem;flex-wrap:wrap}
.nm-nav a{color:var(--nm-text-secondary)}
.nm-nav a:hover{color:var(--nm-text-primary)}

/* ---------- hero ---------- */
.nm-hero{position:relative;overflow:hidden}
.nm-hero__inner{position:relative;padding:112px 0 104px}

.nm-hero__glow,
.nm-hero__pathways,
.nm-cta__glow{position:absolute;inset:0;pointer-events:none}
.nm-hero__pathways{overflow:hidden}

/* Respiro do motif — ver BACKLOG DS-01.

   O componente tem vida própria (desenho progressivo, pulso da origem,
   piscar das pontas), e `animate="false"` desliga os três de uma vez: o
   tracejado que quebra a linha mora na mesma chave. Enquanto o conserto
   não vem do Claude Design, a respiração acontece aqui fora, no contêiner.

   Amplitude baixa e ciclo longo de propósito. O motif fica atrás do texto
   do herói: qualquer coisa mais forte disputa a leitura da frase que a
   pessoa veio ler, e um fundo que chama atenção para si é um fundo
   errado. O que se quer é a sensação de que a imagem está viva quando o
   olhar passa por ela — não um efeito que se note.

   Sem guarda própria de prefers-reduced-motion: a regra global no topo
   deste arquivo já desliga toda animação com !important. */
.nm-hero__pathways{animation:nm-respiro 12s ease-in-out infinite}

@keyframes nm-respiro{
  0%,100%{opacity:.86}
  50%{opacity:1}
}

.nm-hero__glow{
  background:
    radial-gradient(120% 90% at 8% 92%,rgba(116,141,225,.42) 0%,rgba(20,24,51,0) 62%),
    radial-gradient(80% 70% at 92% 4%,rgba(255,141,75,.2) 0%,rgba(20,24,51,0) 60%),
    linear-gradient(180deg,rgba(14,18,40,.5) 0%,rgba(20,24,51,.6) 70%,rgba(20,24,51,.72) 100%);
}

.nm-actions{display:flex;gap:var(--nm-space-4);flex-wrap:wrap;align-items:center}
.nm-hero__meta{margin-top:var(--nm-space-6)}

/* ---------- números ---------- */
.nm-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--nm-space-12);
  margin:0;
}
.nm-section--stats > .nm-wrap{padding:var(--nm-space-16) 0}

.nm-stat__label{
  font-family:var(--nm-font-mono);
  font-size:.68rem;
  letter-spacing:var(--nm-tracking-mono);
  text-transform:uppercase;
  color:var(--nm-text-meta);
  margin-bottom:10px;
}
.nm-stat__value{
  font-family:var(--nm-font-display);
  font-size:3rem;
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1;
  margin:0;
}

/* ---------- etapas ---------- */
.nm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}

.nm-card{
  background:var(--nm-surface-panel);
  border:1px solid var(--nm-border-subtle);
  border-radius:var(--nm-radius-4);
  padding:28px;
}
.nm-card__num{
  font-family:var(--nm-font-mono);
  font-size:var(--nm-text-mono);
  letter-spacing:var(--nm-tracking-mono);
  color:var(--nm-coral-400);
}
.nm-card__title{
  font-family:var(--nm-font-display);
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:var(--nm-tracking-titulo);
  margin:var(--nm-space-3) 0 10px;
}
.nm-card__text{font-size:.95rem;line-height:var(--nm-leading-corpo);color:var(--nm-text-secondary);margin:0}

/* ---------- trilhas (para quem é) ---------- */
.nm-tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--nm-space-6)}

.nm-track{
  border:1px solid var(--nm-border-subtle);
  border-radius:var(--nm-radius-4);
  padding:var(--nm-space-8);
  background:var(--nm-surface-panel);
  transition:border-color var(--nm-dur-micro) var(--nm-ease),
             transform var(--nm-dur-micro) var(--nm-ease);
}
.nm-track:hover{transform:translateY(var(--nm-state-hover-lift))}
.nm-track--teen:hover{border-color:var(--nm-coral-500)}
.nm-track--pro:hover{border-color:var(--nm-azul-400)}

.nm-track__kicker{
  font-family:var(--nm-font-mono);
  font-size:.68rem;
  letter-spacing:var(--nm-tracking-mono);
  text-transform:uppercase;
  margin:0 0 var(--nm-space-4);
}
.nm-track--teen .nm-track__kicker{color:var(--nm-coral-400)}
.nm-track--pro .nm-track__kicker{color:var(--nm-azul-300)}

.nm-track__title{
  font-family:var(--nm-font-display);
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:var(--nm-tracking-titulo);
  margin:0 0 var(--nm-space-3);
}
.nm-track__text{font-size:1rem;line-height:var(--nm-leading-corpo);color:var(--nm-text-secondary);margin:0 0 20px}

/* ---------- depoimentos ---------- */
.nm-quotes__head{
  display:flex;
  gap:var(--nm-space-6);
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:var(--nm-space-12);
}
/* os controles só aparecem depois que o JS os liga — sem JS o carrossel
   continua navegável por arrasto, e não sobram botões mortos na tela */
.nm-quotes__nav,.nm-dots{display:none}
[data-nm-ready] .nm-quotes__nav{display:flex;gap:var(--nm-space-3);align-items:center}

.nm-counter{
  font-family:var(--nm-font-mono);
  font-size:.7rem;
  letter-spacing:var(--nm-tracking-mono);
  color:var(--nm-text-meta);
  margin-right:var(--nm-space-2);
}

.nm-iconbtn{
  width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--nm-radius-pill);
  border:1px solid var(--nm-border-default);
  background:transparent;
  color:var(--nm-text-primary);
  cursor:pointer;
  transition:border-color var(--nm-dur-micro) var(--nm-ease),
             background-color var(--nm-dur-micro) var(--nm-ease);
}
.nm-iconbtn:hover{border-color:var(--nm-accent);background:rgba(255,255,255,.06)}

.nm-carousel{
  overflow:hidden;
  border:1px solid var(--nm-border-warm);
  border-radius:20px;
  background:var(--nm-surface-quote);
}
/* Uma coluna de 100% por slide — o número de depoimentos não entra na conta.
   É um contêiner de scroll com snap: sem JS o leitor ainda alcança todos os
   depoimentos arrastando; com JS os botões só dirigem esse mesmo scroll. */
.nm-carousel__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.nm-carousel__track::-webkit-scrollbar{display:none}
/* o .nm-carousel recorta, então o anel de foco cresce para dentro */
.nm-carousel__track:focus-visible{outline-offset:-4px;border-radius:20px}

.nm-quote{
  scroll-snap-align:start;
  margin:0;
  padding:var(--nm-space-12);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--nm-space-8);
  align-items:center;
}
.nm-quote__text{
  margin:0 0 var(--nm-space-6);
  font-family:var(--nm-font-display);
  font-size:clamp(1.2rem,2vw,1.6rem);
  font-weight:500;
  line-height:1.45;
  letter-spacing:var(--nm-tracking-titulo);
  color:var(--nm-text-primary);
  text-wrap:pretty;
}
.nm-quote__by{font-size:.95rem;color:var(--nm-text-secondary)}

/* avatar: placeholder com inicial até existir a foto.
   Para usar uma foto real, troque por <img class="nm-avatar" src="…" alt=""> */
.nm-avatar{
  width:132px;height:132px;flex:none;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--nm-surface-quote);
  border:1px solid var(--nm-border-warm);
  color:var(--nm-taupe-300);
  font-family:var(--nm-font-display);
  font-size:2.6rem;font-weight:600;letter-spacing:-.03em;
  object-fit:cover;
  overflow:hidden;
}

[data-nm-ready] .nm-dots{display:flex;gap:var(--nm-space-2);margin-top:20px}
.nm-dot{
  width:var(--nm-touch-min);height:var(--nm-touch-min);
  padding:0;border:none;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:flex-start;
}
.nm-dot span{
  display:block;width:28px;height:3px;
  border-radius:var(--nm-radius-pill);
  background:var(--nm-border-default);
  transition:background-color var(--nm-dur-micro) var(--nm-ease);
}
.nm-dot[aria-current="true"] span{background:var(--nm-accent)}

/* ---------- CTA final ---------- */
.nm-cta{position:relative;overflow:hidden}
.nm-cta__glow{background:radial-gradient(55% 90% at 78% 40%,rgba(255,141,75,.16),transparent 70%)}
.nm-cta__inner{position:relative;padding:var(--nm-space-24) 0 104px}
.nm-cta__title{
  font-family:var(--nm-font-display);
  font-size:clamp(2rem,4.4vw,3.4rem);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.02;
  margin:0 0 var(--nm-space-6);
  max-width:26ch;
  text-wrap:balance;
}

/* ---------- footer ---------- */
.nm-footer{border-top:1px solid var(--nm-border-subtle)}
.nm-footer__grid{
  padding:56px 0 var(--nm-space-12);
  display:grid;
  grid-template-columns:minmax(220px,1fr) 2fr;
  gap:var(--nm-space-12);
}
.nm-footer__logo{height:46px;width:auto;display:block;margin-bottom:18px}
.nm-footer__tagline{font-size:.9rem;line-height:var(--nm-leading-corpo);color:var(--nm-text-secondary);margin:0;max-width:32ch}

.nm-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--nm-space-8)}
.nm-footer__title{
  font-family:var(--nm-font-mono);
  font-size:.68rem;
  letter-spacing:var(--nm-tracking-mono);
  text-transform:uppercase;
  color:var(--nm-text-meta);
  margin:0 0 14px;
  font-weight:400;
}
.nm-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.9rem}
.nm-footer__list a{color:var(--nm-text-secondary)}
.nm-footer__list a:hover{color:var(--nm-text-primary)}

/* ============================================================
   Responsivo — o artboard é desenhado em desktop; abaixo estão as
   quebras necessárias para o mesmo layout caber em telas menores.
   ============================================================ */

@media (max-width:900px){
  .nm-section > .nm-wrap{padding:var(--nm-space-16) 0}
  .nm-hero__inner{padding:80px 0 72px}
  .nm-cta__inner{padding:72px 0 80px}

  .nm-quote{grid-template-columns:1fr;gap:var(--nm-space-6);padding:var(--nm-space-8)}
  .nm-avatar{width:96px;height:96px;font-size:2rem}

  .nm-footer__grid{grid-template-columns:1fr;gap:var(--nm-space-8)}
}

@media (max-width:640px){
  .nm-header__inner{min-height:0;gap:var(--nm-space-4);padding:var(--nm-space-3) 0}
  .nm-nav{order:3;flex-basis:100%;gap:var(--nm-space-4);font-size:.86rem}

  .nm-hero__inner{padding:64px 0 56px}
  .nm-section > .nm-wrap{padding:var(--nm-space-12) 0}

  .nm-stats{gap:var(--nm-space-8)}
  .nm-stat__value{font-size:2.4rem}

  .nm-actions{gap:var(--nm-space-3)}
  .nm-btn{width:100%;justify-content:center}
  .nm-btn--sm{width:auto}

  .nm-quotes__head{margin-bottom:var(--nm-space-8)}
}