/* ── STAUF · ligação dos tokens e elementos vivos (Claude stauf-f3, 29/09) ──
   Arquivo separado de propósito: o styles.css é do Grok e não foi editado. Depende de /tokens/stauf-tokens.css e
   /tokens/stauf-vivos.css. Brilhos só no tema escuro. */

/* o único style="" do index saiu (a CSP do site é style-src 'self' e bloquearia o atributo) */
.opcional { color: var(--dim); }

/* águia do topo: a nova (API 4, 2460×846, recortada apertada) ocupa a metade direita inteira */
.hero .eagle { inset: 6% 0 6% max(48%, calc(var(--gutter) + min(640px, 48vw) + 32px)); }  /* começa depois do texto + 32 px */

/* ── PORTAL DE LUZ atrás da águia. Referência: BenjaminUIX (portal branco + raios), espelhada: a abertura fica à
   direita, atrás da ave que voa para a esquerda, e a luz puxa para o vermelho (carmesim do olho #ab0f15, medido na v133,
   e o cobre da marca #c65e43). Camadas como na referência: abertura, raios com desfoque em plus-lighter, núcleo. */
.hero .portal {
  position: absolute; z-index: 0; inset: 0 0 0 30%; pointer-events: none;
  background: radial-gradient(ellipse 34% 40% at 68% 52%,
    rgba(255, 226, 214, .16) 0%, rgba(214, 64, 48, .26) 22%, rgba(171, 15, 21, .14) 46%, transparent 72%);
}
/* (a abertura dura em ::before saiu: recortada, ela não aceita desfoque; o brilho da abertura é o .raios::after) */
/* os raios: o desfoque fica no <i> de fora e o recorte no pseudo de dentro. No mesmo elemento o clip-path corta
   DEPOIS do filter e a borda sai dura (medido na 1ª captura); assim o desfoque amacia o recorte, como na referência */
.hero .portal .raios {
  position: absolute; inset: 8% -4% 8% 0; filter: blur(22px); mix-blend-mode: plus-lighter;
  animation: portal-respira calc(var(--dur-respira) * 4) ease-in-out infinite alternate;
}
.hero .portal .raios::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(243, 140, 112, .6) 0%, rgba(214, 64, 48, .32) 28%,
    rgba(171, 15, 21, .12) 62%, transparent 90%);
  clip-path: polygon(100% 26%, 100% 74%, 0 100%, 0 0);
}
/* a abertura também ganha borda macia: um segundo desfoque no próprio .portal seria caro; basta o brilho por cima */
.hero .portal .raios::after {
  content: ""; position: absolute; right: 0; top: 24%; bottom: 24%; width: 14%;
  background: linear-gradient(270deg, rgba(255, 233, 226, .9), rgba(243, 154, 130, .4) 60%, transparent);
}
@keyframes portal-respira { from { opacity: .72; } to { opacity: 1; } }

/* tema claro: sem brilho nenhum (a luz aditiva vira mancha no papel) */
[data-theme="light"] .hero .portal,
[data-theme="light"] .v-foco::before,
[data-theme="light"] .v-fenda::after { display: none; }

/* cartões em vidro (vídeo odanielnr1), só no escuro */
html:not([data-theme="light"]) .card {
  /* topo escuro (onde fica o rótulo .reg, 11 px cobre): #100a10 dá 4,74:1 (calculado, fórmula WCAG); o degradê do vídeo invertido, claro embaixo */
  background: linear-gradient(180deg, var(--vidro-1) 0%, var(--vidro-1) 30%, var(--vidro-2) 65%, var(--vidro-3) 100%);
}

/* "O sistema" subiu para o quadro vazio ao lado da sentinela, nas linhas finas do original (29/09: «igual ta no
   axis.tail essa parte de baixo, ta mais sutil»); a faixa do morro fica só com a arte, sem nada tapando */
.wall-copy { width: min(560px, 44vw); }
.wall-copy .steps { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
.system { min-height: clamp(260px, 30vw, 480px); padding: 0;
  background: linear-gradient(180deg, rgba(7, 7, 8, .05), rgba(7, 7, 8, .3)), url("/marca/field.png") right center / 72% auto no-repeat; }
[data-theme="light"] .system {
  background: linear-gradient(180deg, rgba(244, 243, 239, .2), rgba(244, 243, 239, .55)), url("/marca/field.png") right center / 72% auto no-repeat; }

@media (max-width: 980px) {
  .hero .eagle { inset: auto; }
  .hero .portal { inset: 0; }
  .wall-copy { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hero .portal .raios { animation: none; } }

/* ── VERSÃO 5 (29/09) ── */
/* cabeçalho, lado direito: links em mono como os rótulos; seletor PT/EN separado por um fio; CTA no mesmo corpo */
.site-nav { gap: 28px; }
.site-nav > a:not(.go) { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding: 7px 0; border-bottom: 1px solid transparent; transition: color .2s var(--ez), border-color .2s var(--ez); }
.site-nav > a:not(.go):hover { color: var(--ink); border-bottom-color: var(--accent-text); }
.site-nav .lang { display: inline-flex; align-items: center; gap: 12px; padding-left: 24px; border-left: 1px solid var(--line); }
.site-nav .lang a { font: 500 12px/1 var(--mono); letter-spacing: .14em; color: var(--dim); text-decoration: none; padding: 7px 0; }
.site-nav .lang a[aria-current="true"] { color: var(--ink); }
.site-nav .lang a:hover { color: var(--ink); }
.site-nav a.go { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 12px 16px; }
@media (max-width: 980px) {
  .site-nav .lang { padding: 12px 0; border-left: 0; }
  .site-nav > a:not(.go) { padding: 12px 0; border-bottom: 0; }
}
/* ofícios: um cartão só, inteiro */
.cards.one { grid-template-columns: 1fr; }
.cards.one .card p { max-width: 72ch; }
/* texto e posição em 1920 (medido: h1 em 4 linhas com «muda.» sozinho; h2 do sistema em 3 linhas). Só no desktop:
   sem o @media estas regras venceriam as do celular (mesma especificidade, arquivo carregado depois) */
@media (min-width: 981px) {
  .hero-copy { width: min(760px, 46vw); }
  .hero .eagle { inset: 6% 0 6% max(48%, calc(var(--gutter) + min(760px, 46vw) + 32px)); }
  .wall-copy { width: min(720px, 44vw); }
}
/* killspy: os dois style="" viraram classe (a CSP style-src 'self' bloqueava) */
.nota-apk { margin-top: 16px; }
.ks-cards { padding: 24px 0 0; }
/* inglês: «The model changes.» é mais longo que «O modelo muda.»; medido em 4 linhas no h1 em 1366–1920 → fonte menor só em /en/ */
@media (min-width: 981px) { :lang(en) .hero h1 { font-size: clamp(44px, 5vw, 76px); } }

/* v6 (29/09): «essa narrativa enfatizando mt o Ads n a legal. ele é um subproduto... o Axis q é o foco da empresa, Axis +
   fornecer serviço pra clientes». O cartão do Ads saiu; o do Axis ocupa a largura; o Ads vira uma linha discreta. */
#produtos .cards { grid-template-columns: 1fr; }
#produtos .card p { max-width: 72ch; }
.tambem { margin: 20px 0 0; color: var(--dim); font-size: 14px; }
.tambem a { color: var(--muted); text-underline-offset: 3px; }
.tambem a:hover { color: var(--ink); }


/* v8 (29/09): «a montanha na area da sentinela ainda ta exposto que é uma imagem cortada.. criar um elemento animado foda de
   fundo» → canvas /fundo-pontos.js (horizonte de pontos, pin 864339353532191818) atrás da sentinela, bordas por máscara.
   «esses titulos q tao meio laranjados precisam estar mais vermelhos» → #c65e43 (matiz 12,4°) vira #e5484d (358°,
   contraste 4,86 sobre #101012, medido); borda e hover vão para #b3262d. */
:root { --accent-text: #e5484d; --accent: #b3262d; --accent-deep: #8a1c22; --cobre-texto: #e5484d; --cobre: #b3262d; }
.wall .pontos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 66% 62%, #000 35%, transparent 82%); /* breker-ok: raw-color (máscara) */
          mask-image: radial-gradient(ellipse 70% 80% at 66% 62%, #000 35%, transparent 82%); /* breker-ok: raw-color */ }
.wall .eagle { z-index: 1; }
.wall-copy { z-index: 2; }

/* ── v9 (29/09): PRODUTO = eixo + órbita, centralizado; OFÍCIO no eixo; ESTEIRA vermelha até o fim da página ── */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes orb-gira { to { transform: rotate(1turn); } }
@keyframes orb-contra { to { transform: rotate(-1turn); } }
@keyframes orb-fluxo { to { stroke-dashoffset: -60; } }
@keyframes orb-pulso { 50% { opacity: .6; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes desce { from { transform: translateY(-40%); } to { transform: translateY(260%); } }

/* produto: tudo no eixo central */
.produto-eixo { position: relative; display: grid; justify-items: center; text-align: center; padding-top: 96px; overflow-x: clip; }
.produto-eixo::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--line-strong) 10%, var(--line-strong) 90%, transparent); }
.produto-eixo::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; width: 3px; height: 26%; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, transparent, var(--accent-text), transparent); filter: blur(1px); animation: desce 7s linear infinite; }
.px-orbita { --orb-raio: min(21vw, 250px); position: relative; z-index: 2; width: min(620px, 92vw); aspect-ratio: 1; }
.orb-luz { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(229,72,77,.45), rgba(171,15,21,.12) 45%, transparent 70%); animation: orb-pulso 5s ease-in-out infinite; }
.orb-anel { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid var(--line); }
.orb-anel.r1 { width: 32%; aspect-ratio: 1; border-color: var(--line-strong); }
.orb-anel.r2 { width: 62%; aspect-ratio: 1; }
.orb-anel.r3 { width: 84%; aspect-ratio: 1; border-style: dashed; }
.orb-giro { position: absolute; inset: 0; animation: orb-gira 80s linear infinite; }
.orb-linhas { position: absolute; inset: 7%; width: 86%; height: 86%; overflow: visible; }
.orb-linhas line { stroke: var(--accent-text); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 3 9; animation: orb-fluxo 2.4s linear infinite; }
.orb-no { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.orb-no.o1 { transform: rotate(-90deg) translate(var(--orb-raio)) rotate(90deg); }
.orb-no.o2 { transform: rotate(-18deg) translate(var(--orb-raio)) rotate(18deg); }
.orb-no.o3 { transform: rotate(54deg) translate(var(--orb-raio)) rotate(-54deg); }
.orb-no.o4 { transform: rotate(126deg) translate(var(--orb-raio)) rotate(-126deg); }
.orb-no.o5 { transform: rotate(198deg) translate(var(--orb-raio)) rotate(-198deg); }
.orb-no b { position: absolute; display: grid; place-items: center; width: 56px; height: 56px; transform: translate(-50%, -50%); border-radius: 50%;
  color: var(--ink); border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--bg) 86%, transparent);
  box-shadow: 0 0 22px rgba(229,72,77,.12); animation: orb-contra 80s linear infinite; }
.orb-no b svg { width: 26px; height: 26px; }
.orb-a { position: absolute; left: 50%; top: 50%; width: 30%; transform: translate(-50%, -50%); filter: drop-shadow(0 0 30px rgba(229,72,77,.35)); }
.px-texto { position: relative; z-index: 2; margin-top: 8px; max-width: 760px; padding: 0 16px; background: radial-gradient(closest-side, var(--bg) 60%, transparent); }
.px-texto h2 { margin: 0 0 18px; font: 600 clamp(64px, 8vw, 132px)/.9 var(--display); letter-spacing: -.05em; }
.px-texto p { margin: 0 auto; max-width: 52ch; color: var(--muted); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; }
.px-texto .door, .eixo-texto .door { display: inline-block; margin-top: 26px; padding: 12px 0; font: 500 12px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--accent-text); }
.px-texto .door:hover, .eixo-texto .door:hover { color: var(--accent-text); }
.px-texto .tambem { margin-top: 40px; }

/* ofício: pendurado à direita do mesmo eixo */
#oficios { overflow-x: clip; }
.eixo-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; align-items: center; overflow: hidden; }
.eixo-item::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--line-strong) 15%, var(--line-strong) 85%, transparent); }
.eixo-item::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; width: 3px; height: 40%; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, transparent, var(--accent-text), transparent); filter: blur(1px); animation: desce 6s linear infinite; }
.eixo-no { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%) rotate(45deg); z-index: 2;
  background: var(--bg); border: 1px solid var(--accent-text); box-shadow: 0 0 24px rgba(229,72,77,.55); }
.eixo-item.lado-d .eixo-texto { grid-column: 2; padding-left: 72px; }
.eixo-texto .reg { display: block; color: var(--accent-text); font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eixo-texto h3 { margin: 12px 0 14px; font: 600 clamp(56px, 6vw, 108px)/.92 var(--display); letter-spacing: -.05em; }
.eixo-texto p { color: var(--muted); font-size: clamp(17px, 1.3vw, 20px); max-width: 44ch; }
.eixo-texto .meta { display: block; margin: 18px 0 0; color: var(--dim); font: 500 12px/1.4 var(--mono); }

/* esteira: nasce atrás da sentinela, mais luminosa na origem, abre e apaga até o fim da página; o topo entra por máscara */
body { position: relative; }
.esteira { position: absolute; left: 0; right: 0; top: 60%; bottom: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 360px at 66% 260px, rgba(229,72,77,.30), rgba(200,40,45,.12) 45%, transparent 100%),
    radial-gradient(ellipse 62% 100% at 66% 260px, rgba(200,40,45,.14), rgba(171,15,21,.06) 45%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 220px); /* breker-ok: raw-color (máscara) */
          mask-image: linear-gradient(180deg, transparent 0, #000 220px); /* breker-ok: raw-color */ }
main > *, .site-footer { position: relative; z-index: 1; }
.wall .pontos {
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 66% 50%, #000 30%, transparent 78%); /* breker-ok: raw-color (máscara) */
          mask-image: radial-gradient(ellipse 70% 55% at 66% 50%, #000 30%, transparent 78%); /* breker-ok: raw-color */ }

@media (max-width: 980px) {
  .px-orbita { --orb-raio: 34vw; }
  .orb-no b { width: 42px; height: 42px; } .orb-no b svg { width: 20px; height: 20px; }
  .eixo-item::after, .eixo-item::before { left: 24px; }
  .eixo-item { grid-template-columns: 1fr; min-height: 0; padding: 24px 0; }
  .eixo-item .eixo-texto { grid-column: 1 !important; padding: 0 0 0 40px !important; }
  .eixo-no { left: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb-giro, .orb-no b, .orb-linhas line, .orb-luz, .produto-eixo::before, .eixo-item::before { animation: none !important; }
}

/* v9.1 (29/09): «um elemento visual sutil pra deixar do lado esquerdo do ofício… evidenciando que o nosso serviço é fornecido
   com a ferramenta de ponta que é o Axis». O A do Axis, pequeno e esmaecido, com uma linha tracejada fluindo até o nó do eixo. */
@keyframes com-fluxo { to { background-position: 24px 0; } }
@keyframes com-respira { 50% { filter: drop-shadow(0 0 26px rgba(229,72,77,.45)); opacity: .9; } }
.eixo-com { grid-column: 1; grid-row: 1; justify-self: end; align-self: center; display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.eixo-com-rot { font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); text-align: right; white-space: nowrap; }
.eixo-com-a { width: 88px; height: 88px; opacity: .7; filter: drop-shadow(0 0 16px rgba(229,72,77,.25)); animation: com-respira 5s ease-in-out infinite; }
.eixo-com-fio { width: clamp(60px, 9vw, 160px); height: 1px; margin-right: 6px;
  background: repeating-linear-gradient(90deg, var(--accent-text) 0 3px, transparent 3px 12px); opacity: .7; animation: com-fluxo 1.2s linear infinite; }
/* v9.1: «a águia com a cabeça levemente menos encostada nessa linha superior» → a sentinela desce 44 px (só no desktop) */
@media (min-width: 981px) { .wall .eagle { inset: 44px -1% auto 55%; height: calc(100% - 44px); } }
@media (max-width: 980px) { .eixo-com { display: none; } }
@media (prefers-reduced-motion: reduce) { .eixo-com-a, .eixo-com-fio { animation: none; } }