/* Optima Solutio — paleta "Minimalista Tecnológico", tema escuro
   O fundo é o Azul Abissal da marca (não preto): as camadas sobem em tons do próprio azul,
   e a hierarquia vem da luz (brilho azul, fio dourado), não de sombras. */
@font-face {
  /* fonte do logo (Cinzel Bold, SIL OFL — ver fonts/OFL-Cinzel.txt) */
  font-family: "Cinzel"; font-weight: 700; font-style: normal; font-display: swap;
  src: url(fonts/cinzel-latin-700-normal.woff2) format("woff2");
}
:root {
  --abissal: #0B132B;    /* fundo da página */
  --eletrico: #3A86FF;   /* primária (5,3:1 sobre o fundo) */
  --ardosia-clara: #A9B4C8; /* ardósia clareada: face de cima do cubo no escuro */
  --dourado: #E89A07;    /* acento, no lugar do lima: 7,9:1 no fundo e 7,9:1 com texto abissal por cima */
  --branco: #FFFFFF;
  --profundo: #070C1C;   /* contato e rodapé, um degrau abaixo do fundo */
  --superficie: #0F1834; /* faixa de Áreas, um degrau acima */
  --card: #152042;
  --linha: rgba(255,255,255,.08);
  --texto: #E6EAF2;      /* 15:1 */
  --texto-2: #A9B4C8;    /* 8,8:1 — substitui a ardósia nos parágrafos */
  --wrap: 1180px;
  --gutter: clamp(16px, 5vw, 48px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --marca: "Cinzel", "Trajan Pro", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
::selection { background: var(--dourado); color: var(--abissal); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--abissal); color: var(--texto);
  font-family: var(--fonte); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.08; font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--eletrico); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase;
  color: var(--eletrico); margin-bottom: 28px; display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--dourado); border-radius: 2px; box-shadow: 0 0 12px rgba(232,154,7,.55); }

.pular { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--dourado); color: var(--abissal); padding: 10px 16px; border-radius: 8px; }
.pular:focus { left: 8px; }

/* Botões: primário azul elétrico com texto abissal (5,3:1; o branco dava 3,5:1); hover dourado */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--eletrico); color: var(--abissal); font-weight: 600; font-size: 16px;
  padding: 15px 28px; border-radius: 999px;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn::after { content: "→"; transition: transform .3s var(--ease); }
.btn:hover { background: var(--dourado); transform: translateY(-2px); box-shadow: 0 10px 34px -8px rgba(232,154,7,.6); }
.btn:hover::after { transform: translateX(4px); }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-sm::after { display: none; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 64px;
  background: rgba(11,19,43,.66); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linha);
}
.topo-in { max-width: var(--wrap); height: 100%; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px; }
.marca { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; }
.marca-cubo { width: 30px; height: 30px; flex: none; }
.marca-nome { font-family: var(--marca); font-weight: 700; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; color: var(--branco); white-space: nowrap; }
.topo nav { display: flex; gap: 26px; }
.topo nav a, .idioma { font-size: 14px; text-decoration: none; color: var(--texto-2); transition: color .2s; }
.topo nav a:hover, .idioma:hover { color: var(--eletrico); }
.idioma { font-weight: 600; letter-spacing: .06em; border: 1px solid currentColor; border-radius: 6px; padding: 2px 7px; opacity: .85; }
/* cubo sobre fundo escuro: a face abissal vira branca e a ardósia clareia */
.face-top { fill: var(--ardosia-clara); }
.face-left { fill: var(--branco); }
.face-right { fill: var(--eletrico); }

/* ---------- Hero (palco fixo durante a rolagem) ---------- */
.hero { height: 620vh; position: relative; }
.hero .stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
  padding: 64px var(--gutter) 0; max-width: var(--wrap); margin: 0 auto;
}
.grade {
  position: absolute; inset: -40% -10%; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(30deg, transparent 49.5%, rgba(58,134,255,.16) 50%, transparent 50.5%),
    linear-gradient(-30deg, transparent 49.5%, rgba(58,134,255,.16) 50%, transparent 50.5%);
  background-size: 120px 70px;
  mask-image: radial-gradient(ellipse at 70% 50%, #000 10%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 10%, transparent 65%);
  transform: translate3d(0, calc(var(--p, 0) * -140px), 0);
}

.hero-cubo { grid-column: 2; grid-row: 1; z-index: 1; display: grid; place-items: center; position: relative; }
/* halo azul atrás do cubo: no escuro, a profundidade vem da luz */
.hero-cubo::before {
  content: ""; position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(58,134,255,.28) 0%, rgba(58,134,255,.08) 38%, transparent 68%);
}
.cubo-grande { width: min(36vw, 440px); overflow: visible; filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
.cubo-grande .face { will-change: transform; }

.hero-texto { grid-column: 1; grid-row: 1; z-index: 2; position: relative; }
.taglines { position: relative; min-height: 340px; }
.tagline { position: absolute; inset: 0 0 auto 0; }
.tagline h2 { font-size: clamp(36px, 5.2vw, 72px); max-width: 14ch; }
.tagline p { margin-top: 24px; font-size: clamp(17px, 1.5vw, 20px); color: var(--texto-2); max-width: 44ch; }
.js .tagline { opacity: 0; transform: translate3d(0, 40px, 0); filter: blur(8px); will-change: opacity, transform, filter; }
.hero-final { position: absolute; inset: 0 0 auto 0; }
.js .hero-final { opacity: 0; pointer-events: none; }
.js .hero-final.ativo { pointer-events: auto; }
.subtitulo { font-size: clamp(20px, 2vw, 26px); line-height: 1.45; max-width: 36ch; margin-bottom: 32px; }

.progresso { position: absolute; left: var(--gutter); bottom: 40px; display: flex; gap: 8px; z-index: 3; }
.dot { width: 28px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; position: relative; }
.dot::after { content: ""; position: absolute; inset: 0; background: var(--branco); transform: scaleX(var(--f, 0)); transform-origin: left; }
.dot.feito::after { background: var(--eletrico); }
.dica { position: absolute; right: var(--gutter); bottom: 36px; font-size: 13px; color: var(--texto-2); display: flex; align-items: center; gap: 10px; z-index: 3; }
.dica span { width: 1px; height: 28px; background: var(--texto-2); animation: desce 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes desce { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Quem somos ---------- */
.quem { padding: clamp(100px, 16vh, 180px) 0; }
.lead { font-size: clamp(28px, 3.6vw, 48px); font-weight: 650; line-height: 1.18; letter-spacing: -0.025em; max-width: 26ch; margin-bottom: clamp(64px, 10vh, 112px); }
.js .lead .w { opacity: .14; transition: opacity .25s linear; }
.js .lead .w.on { opacity: 1; }
.colunas { columns: 2 320px; column-gap: 56px; }
.colunas p { break-inside: avoid; margin-bottom: 24px; color: var(--texto-2); font-size: 18px; }

/* ---------- Áreas de atuação: grade 2×2 alinhada ao título ---------- */
.areas { background: var(--superficie); border-block: 1px solid var(--linha); padding: clamp(100px, 16vh, 180px) 0; }
.areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.area {
  background: linear-gradient(180deg, var(--card), var(--superficie)); border-radius: 28px; padding: clamp(28px, 3.4vw, 48px);
  display: flex; flex-direction: column; position: relative;
  box-shadow: inset 0 0 0 1px var(--linha);
  transition: box-shadow .5s var(--ease);
}
.area:hover { box-shadow: inset 0 0 0 1px rgba(58,134,255,.45), 0 30px 80px -40px rgba(58,134,255,.55); }
.area-n { position: absolute; top: 32px; right: 36px; font-size: 13px; font-weight: 700; background: var(--dourado); color: var(--abissal); border-radius: 999px; padding: 3px 10px; }
.area h3 { font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 16px; max-width: 18ch; }
.area p { color: var(--texto-2); font-size: 17px; }
.icone {
  display: block; width: 72px; height: 72px; background: var(--eletrico); margin-bottom: 36px; flex: none;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* ---------- Para quem trabalhamos ---------- */
.publico { padding: clamp(100px, 16vh, 180px) 0; }
.publico-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.publico-item p { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; letter-spacing: -0.015em; font-weight: 500; }
.publico-item + .publico-item { transition-delay: .15s; }

/* ---------- Contato ---------- */
.contato { background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(58,134,255,.22), transparent 70%), var(--profundo); color: var(--branco); padding: clamp(120px, 22vh, 240px) 0; text-align: center; overflow: hidden; }
.contato .eyebrow { color: var(--dourado); justify-content: center; }
.email { display: inline-block; margin-top: 8px; font-size: clamp(22px, 3.4vw, 44px); font-weight: 600; text-decoration: none; color: var(--branco); background: linear-gradient(var(--dourado), var(--dourado)) 0 100% / 0 3px no-repeat; padding-bottom: 6px; transition: background-size .5s var(--ease), color .3s; overflow-wrap: anywhere; }
.email:hover { background-size: 100% 3px; color: var(--dourado); }

/* ---------- Rodapé ---------- */
.rodape { background: var(--profundo); color: rgba(255,255,255,.6); border-top: 1px solid rgba(255,255,255,.08); padding: 40px 0; font-size: 14px; }
.rodape .wrap { display: flex; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; }
.razao { font-family: var(--marca); font-weight: 700; font-size: 18px; letter-spacing: .03em; text-transform: uppercase; color: var(--branco); }
.voltar { margin-left: auto; text-decoration: none; }
.voltar:hover { color: var(--dourado); }

/* ---------- Revelações ---------- */
.js .reveal { opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .area.reveal { transition: box-shadow .5s var(--ease), opacity 1s var(--ease), transform 1s var(--ease); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .topo nav { display: none; }
  .topo-in { gap: 14px; }
  .hero .stage { grid-template-columns: 1fr; }
  .hero-cubo { grid-column: 1; opacity: .10; }
  .cubo-grande { width: 88vw; }
  .hero-texto { grid-column: 1; }
  .taglines { min-height: 420px; }
  .areas-grid, .publico-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .marca-nome { display: none; }
  .taglines { min-height: 460px; }
  .dica { display: none; }
  .voltar { margin-left: 0; }
}

/* ---------- Sem animação ("reduzir movimento"): tudo estático e legível ---------- */
.estatico .hero { height: auto; }
.estatico .hero .stage { position: relative; height: auto; padding-top: 120px; padding-bottom: 80px; }
.estatico .taglines { min-height: 0; display: grid; gap: 48px; }
.estatico .tagline, .estatico .hero-final { position: static; transform: none; opacity: 1; filter: none; }
.estatico .hero-final { margin-top: 56px; pointer-events: auto; }
.estatico .progresso, .estatico .dica { display: none; }