/* Landing da Mahiru — página escura contínua, cinematográfica.
   Só esta página usa este arquivo; /docs/ e o 404 continuam no site.css.
   Sem framework e sem fonte externa em runtime: as duas famílias variáveis
   são self-hosted em /assets/fonts (Bricolage Grotesque para display,
   Instrument Sans para texto). O acento teal→esmeralda vem da hélice do
   logo e aparece pouco de propósito: núcleo, uma palavra do H1, CTA. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg0: #06100d;          /* fundo mais profundo (hero, cta) */
  --bg1: #0c1915;          /* superfície da marca — seções intermediárias */
  --ink: #f2f7f4;
  --muted: #9fb5aa;
  --dim: #70877c;
  --line: rgb(159 181 170 / 13%);
  --teal: #0aa89e;
  --verde: #16c784;
  --grad: linear-gradient(92deg, var(--teal), var(--verde));
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --texto: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --larg: 1160px;
  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--texto);
  font-size: 16.5px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: rgb(10 168 158 / 25%); }

.faixa { max-width: var(--larg); margin: 0 auto; padding-inline: var(--pad); }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  padding: 10px 16px; background: var(--ink); color: var(--bg0); border-radius: 0 0 8px 0;
}
.pular:focus { left: 0; }

/* tipografia base ------------------------------------------------------- */

.olho {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 5.4vw, 4rem); }
section > .faixa > h2 + p,
p { margin: 0; }

/* revelação no scroll --------------------------------------------------- */

.rv {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity .9s cubic-bezier(.2,.6,.2,1),
    transform .9s cubic-bezier(.2,.6,.2,1),
    filter .9s cubic-bezier(.2,.6,.2,1);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.rv.in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; filter: none; transition: none; }
  .caos-nuvem span { animation: none !important; }
  .eco-halo { animation: none !important; }
  .eco-marca { animation: none !important; }
}

/* navegação ------------------------------------------------------------- */

.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.solida {
  background: rgb(6 16 13 / 72%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-faixa {
  max-width: var(--larg); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px var(--pad);
}
.nav-logo img { width: 108px; }
.nav nav { display: flex; align-items: center; gap: 4px; }
.nav nav a {
  padding: 8px 13px; border-radius: 9px;
  font-size: 14.5px; color: var(--muted); text-decoration: none;
  transition: color .25s, background .25s;
}
.nav nav a:hover { color: var(--ink); background: rgb(255 255 255 / 6%); }
@media (max-width: 760px) {
  .nav nav a:not(.botao) { display: none; }  /* mobile: logo + botão Console; âncoras vivem no scroll */
}

/* botões ---------------------------------------------------------------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 22px; border-radius: 12px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
  transition: transform .25s cubic-bezier(.2,.6,.2,1), box-shadow .25s, background .25s, border-color .25s, filter .25s;
}
.botao:active { transform: translateY(1px) scale(.985); }
.botao-cheio {
  background: var(--grad);
  color: #04140f;
  box-shadow: 0 0 0 0 rgb(10 168 158 / 0%);
}
.botao-cheio:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 8px 32px -8px rgb(10 168 158 / 45%);
}
.botao-borda {
  border-color: rgb(159 181 170 / 28%);
  color: var(--ink);
  background: rgb(255 255 255 / 4%);
}
.botao-borda:hover {
  transform: translateY(-1px);
  border-color: rgb(159 181 170 / 55%);
  background: rgb(255 255 255 / 8%);
}
.acoes { display: flex; flex-wrap: wrap; gap: 14px; }

a:focus-visible, .botao:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 10px;
}

/* ======================================================== hero ========= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px var(--pad) 0;
  isolation: isolate;
}
#nucleo-canvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
}
.hero::after {          /* vinheta que assenta o canvas sob o texto */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 30% 45%, rgb(6 16 13 / 55%) 0%, transparent 55%),
    linear-gradient(to bottom, rgb(6 16 13 / 65%), transparent 30%, transparent 70%, var(--bg0) 98%);
  pointer-events: none;
}
.hero-conteudo { max-width: var(--larg); margin-inline: auto; width: 100%; }
.hero h1 {
  font-size: clamp(2.7rem, 9vw, 7rem);
  font-weight: 800;
}
.nowrap { white-space: nowrap; }
.hero h1 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  margin-top: 28px;
  max-width: 44ch;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.6;
  color: var(--muted);
}
.hero .acoes { margin-top: 40px; }

.hero-prova {
  max-width: var(--larg); margin: auto auto 0; width: 100%;
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim);
}
@media (max-height: 700px) { .hero { min-height: 110svh; } }

/* ======================================================== caos ========= */

.caos {
  position: relative;
  padding: clamp(110px, 16vh, 200px) 0;
  background: var(--bg0);
  overflow: hidden;
}
.caos .faixa { position: relative; z-index: 1; }
.caos h2 { max-width: 14ch; }
.caos-texto {
  margin-top: 26px; max-width: 52ch;
  color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.15rem);
}
.caos-nuvem { position: absolute; inset: 0; pointer-events: none; }
.caos-nuvem span {
  position: absolute; left: var(--x); top: var(--y);
  font-family: var(--mono); font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: .08em; white-space: nowrap;
  color: var(--dim);
  opacity: .5;
  animation: deriva var(--t) ease-in-out infinite alternate;
}
@keyframes deriva {
  from { transform: translate(0, 0) rotate(-1deg); }
  to   { transform: translate(22px, -16px) rotate(1.5deg); }
}
@media (max-width: 760px) {
  .caos-nuvem span:nth-child(even) { display: none; } /* mobile: menos ruído decorativo */
  .caos-nuvem span { opacity: .35; }
}

/* ======================================================== núcleo ======= */

.nucleo {
  padding: clamp(110px, 16vh, 200px) 0;
  background: var(--bg1);
  border-block: 1px solid var(--line);
}
.nucleo-grade {
  display: grid; gap: clamp(40px, 6vw, 88px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
}
@media (max-width: 900px) { .nucleo-grade { grid-template-columns: 1fr; } }
.nucleo-grade h2 { max-width: 14ch; }
.nucleo-grade p { margin-top: 24px; max-width: 46ch; color: var(--muted); }

.nucleo-diagrama { margin: 0; }
.nucleo-diagrama svg { width: 100%; height: auto; display: block; }
.tr-caos path {
  fill: none; stroke: var(--dim); stroke-width: 1.5; opacity: .7;
  stroke-dasharray: 340; stroke-dashoffset: 340;
  transition: stroke-dashoffset 1.4s cubic-bezier(.3,.5,.2,1);
}
.tr-ordem path {
  fill: none; stroke: url(#gm); stroke-width: 2.4;
  stroke-dasharray: 240; stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.2s cubic-bezier(.3,.5,.2,1) .9s;
}
.tr-anel {
  fill: none; stroke: rgb(159 181 170 / 35%); stroke-width: 1.5;
}
.tr-anel-int {
  fill: rgb(10 168 158 / 5%);
  stroke: url(#gm); stroke-width: 1.5;
}
.nucleo-diagrama.in .tr-caos path,
.nucleo-diagrama.in .tr-ordem path { stroke-dashoffset: 0; }
.tr-caos path:nth-child(2) { transition-delay: .15s; }
.tr-caos path:nth-child(3) { transition-delay: .3s; }
.tr-caos path:nth-child(4) { transition-delay: .45s; }
.tr-ordem path:nth-child(2) { transition-delay: 1.05s; }
.tr-ordem path:nth-child(3) { transition-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) {
  .tr-caos path, .tr-ordem path { stroke-dashoffset: 0; transition: none; }
}
.nucleo-diagrama figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 14px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.dg-nucleo { color: var(--teal); }

/* ======================================================== como ========= */

.como { padding: clamp(110px, 16vh, 200px) 0; background: var(--bg0); }
.atos {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; gap: clamp(36px, 5vw, 64px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .atos { grid-template-columns: 1fr; max-width: 560px; } }
.atos li { border-top: 1px solid var(--line); padding-top: 26px; }
.ato-n {
  display: block; margin-bottom: 20px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .2em;
  color: var(--dim);
}
.atos h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -.015em; }
.atos p { margin-top: 14px; color: var(--muted); font-size: 15.5px; }

/* ======================================================== ecossistema == */

.eco {
  padding: clamp(110px, 16vh, 200px) 0 clamp(80px, 10vh, 140px);
  background: var(--bg1);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.eco h2 { max-width: 16ch; }
.eco-mapa { margin: clamp(28px, 5vh, 64px) auto 0; max-width: 1040px; padding-inline: var(--pad); }
.eco-mapa svg { width: 100%; height: auto; display: block; }
.eco-linhas path {
  fill: none; stroke: rgb(159 181 170 / 30%); stroke-width: 1.2;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  transition: stroke-dashoffset 1.6s cubic-bezier(.3,.5,.2,1);
}
.eco-mapa.in .eco-linhas path { stroke-dashoffset: 0; }
.eco-linhas path:nth-child(2) { transition-delay: .1s; }
.eco-linhas path:nth-child(3) { transition-delay: .2s; }
.eco-linhas path:nth-child(4) { transition-delay: .3s; }
.eco-linhas path:nth-child(5) { transition-delay: .4s; }
.eco-linhas path:nth-child(6) { transition-delay: .5s; }
.eco-linhas path:nth-child(7) { transition-delay: .6s; }
.eco-linhas path:nth-child(8) { transition-delay: .7s; }
.eco-nos circle { fill: var(--muted); }
.eco-nos text {
  fill: var(--muted);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; text-anchor: middle;
}
.eco-centro .eco-disco { fill: var(--bg0); stroke: url(#ge); stroke-width: 1.6; }
/* O símbolo no lugar da inicial: a hélice é o núcleo do mapa, e ela gira devagar — o eixo que
   mantém as áreas em volta girando juntas. 30s é lento o bastante para não competir com a leitura
   (o pulso do halo é que dá o ritmo); `transform-box: fill-box` porque em SVG a origem padrão é o
   canto do viewBox, não o do elemento. */
.eco-marca {
  transform-origin: center; transform-box: fill-box;
  animation: girar 30s linear infinite;
}
@keyframes girar {
  to { transform: rotate(360deg); }
}
.eco-halo {
  fill: none; stroke: rgb(10 168 158 / 25%); stroke-width: 1;
  transform-origin: center; transform-box: fill-box;
  animation: pulso 4.5s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.18); opacity: .15; }
}
.eco-mapa figcaption {
  margin: clamp(24px, 4vh, 44px) auto 0; max-width: 56ch;
  text-align: center; color: var(--muted); font-size: 15.5px;
}
@media (max-width: 640px) {
  .eco-nos text { font-size: 20px; }   /* o viewBox encolhe junto — compensa a legibilidade */
  .eco-marca { width: 48px; height: 48px; x: -24px; y: -24px; }  /* o viewBox encolhe junto */
}

/* ======================================================== inteligência = */

.intel { padding: clamp(110px, 16vh, 200px) 0; background: var(--bg0); }
.intel-grade {
  display: grid; gap: clamp(44px, 6vw, 96px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
}
@media (max-width: 940px) { .intel-grade { grid-template-columns: 1fr; } }
.intel-texto h2 { max-width: 13ch; }
.intel-texto > p { margin-top: 24px; max-width: 46ch; color: var(--muted); }
.intel-nota {
  margin-top: 20px !important;
  padding-left: 16px; border-left: 2px solid;
  border-image: var(--grad) 1;
  font-size: 14.5px; color: var(--dim) !important;
}

.conversa {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1.5%));
  box-shadow: 0 30px 80px -40px rgb(0 0 0 / 70%);
  overflow: hidden;
}
.conversa-topo {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 18px; border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--dim);
}
.conversa-topo b { margin-left: 8px; font-weight: 600; color: var(--muted); }
.conversa-topo .pt { width: 9px; height: 9px; border-radius: 50%; background: rgb(159 181 170 / 25%); }
.conversa-corpo { padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 14px; }

.msg { display: flex; }
.msg span {
  max-width: 88%;
  padding: 11px 15px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.55;
}
.msg.voce { justify-content: flex-end; }
.msg.voce span {
  background: rgb(10 168 158 / 12%);
  border: 1px solid rgb(10 168 158 / 22%);
  border-bottom-right-radius: 5px;
}
.msg.mahiru span {
  background: rgb(255 255 255 / 5%);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  color: var(--muted);
}
.msg.mahiru b { color: var(--ink); font-weight: 600; }
.msg.acao span {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--verde);
  background: rgb(22 199 132 / 8%);
  border: 1px dashed rgb(22 199 132 / 35%);
}
/* as mensagens entram uma a uma quando a conversa aparece */
.conversa .msg {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1);
  transition-delay: calc(var(--m, 0) * .55s);
}
.conversa.rodando .msg { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .conversa .msg { opacity: 1; transform: none; transition: none; }
}

/* ======================================================== automação ==== */

.auto {
  padding: clamp(110px, 16vh, 200px) 0;
  background: var(--bg1);
  border-block: 1px solid var(--line);
}
.auto h2 { max-width: 14ch; }
.trilho {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; gap: 2px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: passo;
}
@media (max-width: 860px) { .trilho { grid-template-columns: repeat(2, 1fr); gap: 2px; } }
@media (max-width: 480px) { .trilho { grid-template-columns: 1fr; } }
.trilho li {
  position: relative;
  padding: 24px 22px 26px;
  background: rgb(255 255 255 / 3%);
  border: 1px solid var(--line);
}
.trilho li:first-child { border-radius: 14px 0 0 14px; }
.trilho li:last-child { border-radius: 0 14px 14px 0; }
@media (max-width: 860px) { .trilho li { border-radius: 10px !important; } }
.trilho b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.01em;
}
.trilho li:nth-child(3) b { color: var(--verde); } /* o passo humano é o destaque */
.trilho span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--dim); }
.trilho li::after {
  content: "→"; position: absolute; right: -7px; top: 50%;
  transform: translateY(-50%); z-index: 1;
  color: var(--dim); font-size: 14px;
}
.trilho li:last-child::after { content: none; }
@media (max-width: 860px) { .trilho li::after { content: none; } }

.auto-garantia {
  margin-top: 36px; max-width: 52ch;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--ink);
}
.auto-lista {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.auto-lista li {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; color: var(--muted);
  background: rgb(255 255 255 / 2.5%);
  transition: border-color .3s, color .3s;
}
.auto-lista li:hover { border-color: rgb(10 168 158 / 40%); color: var(--ink); }

/* ======================================================== confiança ==== */

.prova { padding: clamp(110px, 16vh, 200px) 0; background: var(--bg0); }
.prova-grade {
  margin: 40px 0 0; display: grid; gap: clamp(36px, 5vw, 24px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px) { .prova-grade { grid-template-columns: repeat(2, 1fr); gap: 44px 32px; } }
@media (max-width: 520px) { .prova-grade { grid-template-columns: 1fr; } }
.prova-grade > div { border-top: 1px solid var(--line); padding-top: 22px; }
.prova-grade dt {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prova-grade dd { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); max-width: 30ch; }

/* ======================================================== CTA ========== */

.cta {
  position: relative;
  padding: clamp(130px, 20vh, 240px) 0;
  text-align: center;
  overflow: hidden;
  background: var(--bg1);
  border-top: 1px solid var(--line);
}
.cta::before {           /* eco do núcleo, só CSS */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 60% at 50% 118%, rgb(10 168 158 / 14%), transparent 65%),
    radial-gradient(30% 42% at 50% 122%, rgb(22 199 132 / 10%), transparent 60%);
}
.cta .faixa { position: relative; }
.cta h2 { font-size: clamp(2.6rem, 7.5vw, 5.5rem); font-weight: 800; }
.cta p { margin: 22px auto 0; max-width: 42ch; color: var(--muted); }
.cta .acoes { margin-top: 40px; justify-content: center; }

/* ======================================================== rodapé ======= */

footer {
  padding: 34px 0;
  border-top: 1px solid var(--line);
  background: var(--bg0);
  font-size: 14px; color: var(--dim);
}
.pe { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.pe nav { display: flex; flex-wrap: wrap; gap: 22px; }
.pe a { text-decoration: none; color: var(--dim); transition: color .25s; }
.pe a:hover { color: var(--ink); }