/* ===========================================================
   GRIFO AI · base compartilhada das páginas do GRIFO AI
   Tokens e movimento vêm do Sistema Grifo (setor BIM).
   Tema único e escuro, como o site: sem versão clara.
   =========================================================== */

:root {
  color-scheme: dark;

  --bg: #07080a;
  --bg-elev: #0c0e12;
  --fg: #eceef2;
  --fg-muted: #9aa1ac;
  --fg-faint: #858c97; /* era #6b727d (4.1:1); agora 5.9:1 sobre --bg */
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.14);
  --glass: rgb(255 255 255 / 0.045);
  --card-ativo: rgb(13 15 19 / 0.94);
  --vidro-topo: rgb(255 255 255 / 0.09);
  --vidro-base: rgb(0 0 0 / 0.25);
  --sombra-cartao: 0 24px 60px -30px rgb(0 0 0 / 0.9);

  /* acento GRIFO AI */
  --a1: #17c8c8;
  --a2: #2b6bf0;
  --a3: #6b2bd9;
  --accent: #2b6bf0;
  --accent-soft: rgb(43 107 240 / 0.18);
  --accent-line: rgb(43 107 240 / 0.4);
  --accent-texto: #5b8cff;
  --grad: linear-gradient(100deg, var(--a1), var(--a2) 45%, var(--a3));
  /* CTA sem o ciano: com texto branco o ciano dá 2:1; aqui todo ponto passa de 4.5:1 */
  --grad-cta: linear-gradient(100deg, #2b6bf0, #4a4de6 50%, #6b2bd9);

  --aurora-op: 0.28;
  --aurora-fria: #1b3a6b;

  --display: "Cormorant Garamond", ui-serif, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, "SFMono-Regular", monospace;

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --mx: 50vw;
  --my: 30vh;
}

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

/* Sem isto, um display:flex no componente vence o atributo hidden e o campo aparece. */
[hidden] { display: none !important; }

/* trava de segurança: nada pode fazer a página rolar de lado no celular.
   clip (e não hidden) para não quebrar os elementos grudados no topo. */
html { background: var(--bg); scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }

.palco { position: relative; z-index: 1; }

.interno { width: min(100% - 3rem, 72rem); margin-inline: auto; }

.eyebrow {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* O destaque da marca: palavra em Cormorant, no azul do setor. */
.destaque {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  color: var(--accent-texto);
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--accent-texto);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------ assinatura */

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--fg);
}

.marca-grifo {
  width: 1.6rem;
  aspect-ratio: 170 / 205;
  background: var(--grad);
  -webkit-mask: url("grifo-mask.png") center / contain no-repeat;
  mask: url("grifo-mask.png") center / contain no-repeat;
  flex: none;
}

.marca-fio { width: 1px; align-self: stretch; background: var(--line-strong); }

.wordmark { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.wordmark-nome {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}
.wordmark-fio { height: 1px; width: 100%; background: var(--line-strong); margin-top: 0.25rem; }
.wordmark-sub {
  margin-top: 0.32rem;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--accent-texto);
}

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

.btn {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1.5rem;
  font: 600 0.9rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.35s var(--curva), box-shadow 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

.btn-grad {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 12px 40px -14px rgb(43 107 240 / 0.75);
}
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -12px rgb(43 107 240 / 0.95); }

.btn-vidro {
  background: var(--glass);
  border: 1px solid var(--line);
  color: var(--fg);
  font-weight: 500;
}
.btn-vidro:hover { border-color: var(--line-strong); background: rgb(255 255 255 / 0.07); }

.btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn svg { width: 1.05rem; height: 1.05rem; }

/* ------------------------------------------------------ vidro */

.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow:
    inset 0 1px 0 0 var(--vidro-topo),
    inset 0 -1px 0 0 var(--vidro-base),
    var(--sombra-cartao);
  transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.5s var(--curva);
}

/* glass-spot: realce preso ao ponteiro; o JS só escreve --sx e --sy */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--sx, 50%) var(--sy, 50%), var(--accent-soft), transparent 68%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.glass:hover::before { opacity: 1; }
.glass.vivo:hover { background: var(--card-ativo); border-color: var(--line-strong); transform: scale(1.02); }

/* ------------------------------------------------ feixe de borda */

@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.beam {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent calc(360deg - var(--beam-arc, 72deg)),
    var(--a1) calc(360deg - var(--beam-arc, 72deg) * 0.66),
    var(--a2) calc(360deg - var(--beam-arc, 72deg) * 0.33),
    var(--a3) 359.9deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude;
  animation: beam-spin var(--beam-duration, 8s) linear infinite;
  animation-delay: var(--beam-delay, 0s);
}

@keyframes beam-spin { to { --beam-angle: 360deg; } }

/* ------------------------------------------------ CursorField */

.campo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}

.campo-aurora {
  position: absolute;
  top: -38%;
  left: 50%;
  width: 82vw;
  height: 72vh;
  border-radius: 50%;
  background: var(--grad);
  filter: blur(120px);
  opacity: var(--aurora-op);
  translate: calc(-50% + var(--px, 0px)) var(--py, 0px);
}

.campo-fria {
  position: absolute;
  bottom: -32%;
  left: -12%;
  width: 62vw;
  height: 62vh;
  border-radius: 50%;
  background: var(--aurora-fria);
  filter: blur(140px);
  opacity: 0.55;
  translate: calc(var(--px, 0px) * -0.6) calc(var(--py, 0px) * -0.6);
}

/* Desenho do setor: trilhas de placa de circuito. É o mesmo arquivo do site
   da Grifo (public/fundos/circuito.svg); entra como máscara, então a cor é a
   daqui. A segunda máscara apaga o desenho para baixo. */
.campo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(143 178 255);
  opacity: 0.2;
  -webkit-mask: url("fundo-circuito.svg") 50% 0 / 840px repeat, linear-gradient(to bottom, #000 10%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask: url("fundo-circuito.svg") 50% 0 / 840px repeat, linear-gradient(to bottom, #000 10%, transparent 92%);
  mask-composite: intersect;
}

/* Trilhas acesas em volta do cursor. É o mesmo circuito do fundo, mais claro,
   recortado por um círculo preso ao ponteiro: só o caminho das trilhas dentro
   do raio acende, em vez de um clarão redondo.

   O halo fica no pai e o recorte no filho. Filtro e máscara no mesmo elemento
   não serve: a máscara é aplicada depois e cortaria o halo junto com a trilha. */
.campo-malha {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 5px rgb(110 150 255 / 0.85));
}
.campo-malha::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(196 214 255);
  -webkit-mask:
    url("fundo-circuito.svg") 50% 0 / 840px repeat,
    radial-gradient(300px circle at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.6) 42%, transparent 74%);
  -webkit-mask-composite: source-in;
  mask:
    url("fundo-circuito.svg") 50% 0 / 840px repeat,
    radial-gradient(300px circle at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.6) 42%, transparent 74%);
  mask-composite: intersect;
}

/* O clarão redondo saiu: quem acende agora são as trilhas. */
.campo-brilho { display: none; }

/* No celular o circuito sai: numa tela estreita ele fica atrás do texto o
   tempo todo e polui a leitura. Sobram a cor e as auroras do fundo. */
@media (max-width: 52rem) {
  .campo::after,
  .campo-malha { display: none; }
}

/* ------------------------------------------------------ nav */

.nav {
  position: fixed;
  top: 0.9rem;
  left: 50%;
  translate: -50% 0;
  z-index: 50;
  width: min(100% - 1.5rem, 64rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.55rem 0.5rem 1.1rem;
  border-radius: 999px;
  animation: nav-entra 0.6s var(--curva) both;
}
@keyframes nav-entra { from { transform: translateY(-24px); opacity: 0; } }

.nav .glass-fundo { border-radius: inherit; }
.nav-links { display: flex; gap: 1.4rem; margin-left: auto; font-size: 0.85rem; }
.nav-links a { text-decoration: none; color: var(--fg-muted); transition: color 0.3s ease; }
.nav-links a:hover { color: var(--fg); }
.nav-links a[aria-current="location"],
.nav-links a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -1px 0 var(--accent-texto); }

/* Volta para o site da Grifo: dentro do GRIFO AI as abas sao so as do app. */
.nav-links .nav-voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-right: 1.4rem;
  border-right: 1px solid var(--line-strong);
}
.nav-voltar svg { width: 0.95rem; height: 0.95rem; flex: none; }
.nav-voltar-curto { display: none; }

/* A nav fixa não pode cobrir o título da seção ao seguir uma âncora. */
section[id], main[id] { scroll-margin-top: 6rem; }
[tabindex="-1"]:focus { outline: none; }

.pular {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  color: #07080a;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.3s var(--curva);
}
.pular:focus { top: 1rem; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nav .btn { padding: 0.6rem 1.15rem; font-size: 0.82rem; }
.nav-acoes { display: flex; gap: 0.4rem; align-items: center; }

/* No celular as tres abas descem para uma segunda linha em vez de sumir:
   agora sao a navegacao do site, e sem elas nao haveria como chegar em
   Atualizacoes e Download. */
@media (max-width: 52rem) {
  .nav { flex-wrap: wrap; row-gap: 0.2rem; border-radius: 1.6rem; }
  .nav-links { order: 3; width: 100%; justify-content: center; margin-left: 0; gap: 0.95rem; padding: 0.15rem 0 0.35rem; font-size: 0.82rem; }
  .nav-links .nav-voltar { padding-right: 0.95rem; }
  .nav-voltar-longo { display: none; }
  .nav-voltar-curto { display: inline; }
  .nav-acoes { margin-left: auto; }
  section[id], main[id] { scroll-margin-top: 8.5rem; }
}

/* --------------------------------------------------- reveal */

[data-reveal] {
  transition:
    opacity 0.7s var(--curva),
    transform 0.7s var(--curva),
    filter 0.7s var(--curva);
}
[data-reveal="esq"], [data-reveal="dir"] { transition-duration: 0.85s; }

[data-reveal].oculto { opacity: 0; transform: translateY(18px); filter: blur(6px); }
[data-reveal="esq"].oculto { transform: translateX(-64px); }
[data-reveal="dir"].oculto { transform: translateX(64px); }

/* entrada da primeira dobra, no carregamento */
.entra { animation: entra 0.7s var(--curva) both; animation-delay: var(--d, 0s); }
@keyframes entra { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

/* --------------------------------------------------- cortina */

.cortina {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  pointer-events: none;
  transform-origin: top;
  animation: cortina-abre 0.45s var(--curva) 0.05s both;
}
.cortina::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--grad);
}
.cortina.fecha {
  transform-origin: bottom;
  animation: cortina-fecha 0.28s cubic-bezier(0.7, 0, 0.84, 0) both;
}
@keyframes cortina-abre { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes cortina-fecha { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Movimento reduzido encurta, não desliga (regra do Sistema Grifo). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal="esq"], [data-reveal="dir"] { transition-duration: 0.4s; }
  [data-reveal="esq"].oculto, [data-reveal="dir"].oculto { transform: translateY(18px); }
  .entra { animation-duration: 0.4s; }
  .cortina { animation-duration: 0.2s; }
  .cortina.fecha { animation-duration: 0.16s; }
  .beam { animation-duration: calc(var(--beam-duration, 8s) * 1.8); }
}