/* ============================================================
   AI4 — ai4.com.br · Design system: brand/DESIGN-SYSTEM.md
   Regra de ouro: laranja nunca é decoração — laranja é ação.
   Sem JS: todo o conteúdo é visível. html.motion = coreografia
   completa (desktop) · html.lite = reveals leves (mobile/reduced).
   ============================================================ */

:root {
  --bg-0: #0A0A0B;
  --bg-1: #121214;
  --bg-2: #1A1A1E;
  --border: #2E2E36;
  --text-1: #F5F5F4;
  --text-2: #A8A8B0;
  --text-3: #6E6E78;
  --orange-300: #FFB380;
  --orange-400: #FF8A4D;
  --orange-500: #FF6A00;
  --orange-600: #E85D00;
  --orange-700: #C24E00;
  --ok: #22C55E;
  --warn: #EAB308;
  --err: #EF4444;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  --pad-x: clamp(20px, 5vw, 72px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.motion { scroll-behavior: auto; } /* Lenis assume */

body {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--orange-500); color: var(--bg-0); }

:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 3px; border-radius: 2px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--bg-2); border-radius: 5px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

.mono { font-family: var(--font-mono); }
.dim { color: var(--text-3); }
.dot { color: var(--orange-500); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 300;
  background: var(--orange-500); color: var(--bg-0);
  font: 600 13px var(--font-ui); padding: 10px 16px; border-radius: 6px;
  text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }

/* fundo limpo: preto profundo, sem textura (grain removido a pedido) */
main > section, .footer { position: relative; z-index: 2; }

/* ============================================================
   ORANGE — o protagonista
   ============================================================ */
#orange {
  position: fixed; left: 0; top: 0;
  width: 260px; height: 260px; /* grande de nascença: escala ≤1 = sempre nítido */
  z-index: 1; /* atrás do conteúdo — o Orange espia, nunca atropela */
  pointer-events: none;
  display: none; will-change: transform;
}
html.motion #orange { display: block; }
#orange.front { z-index: 60; } /* só no momento da selada */

.o-halo {
  position: absolute; inset: -24%;
  background: radial-gradient(circle, rgba(255,106,0,.13), transparent 66%);
}
.o-breather { position: absolute; inset: 0; animation: breath 3.4s ease-in-out infinite alternate; }
.o-core {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, var(--orange-300) 0%, var(--orange-500) 45%, var(--orange-700) 78%, #7A3100 100%);
  box-shadow: 0 0 90px rgba(255,106,0,.30), inset 0 -10px 26px rgba(0,0,0,.30);
}
.o-ring {
  position: absolute; inset: -14%; border-radius: 50%;
  border: 2px solid rgba(234,179,8,.8); opacity: 0;
}
#orange.paused .o-ring { opacity: 1; animation: ringpulse 1.1s ease-out infinite; }
#orange.paused .o-breather { animation-play-state: paused; }
#orange.refusing .o-breather { animation: wiggle .6s ease-in-out infinite; }

@keyframes breath { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes ringpulse { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes wiggle { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.orange-anchor { position: absolute; width: 0; height: 0; }

/* encaixe do Orange ao lado do CTA final (esfera estática nos modos lite/sem-JS) */
.cta-slot {
  width: 72px; height: 72px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 32%, var(--orange-300), var(--orange-500) 48%, var(--orange-700) 85%);
  box-shadow: 0 0 34px rgba(255,106,0,.35);
}
html.motion .cta-slot { background: none; box-shadow: none; }

/* ============================================================
   01 · NAVEGAÇÃO
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px var(--pad-x);
  background: rgba(10,10,11,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(46,46,54,.6);
  transition: padding .3s ease;
}
.nav.scrolled { padding: 12px var(--pad-x); }

.brand {
  font-weight: 900; font-size: 1.35rem; letter-spacing: -.03em;
  color: var(--text-1); text-decoration: none;
}

.nav-links { display: flex; gap: clamp(16px, 2.6vw, 34px); }
.nav-links a {
  color: var(--text-2); text-decoration: none;
  font-size: .84rem; font-weight: 600; letter-spacing: .01em;
  position: relative; padding: 4px 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--orange-500);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.nav-links a:hover { color: var(--text-1); }
.nav-links a:hover::after { transform: scaleX(1); }

/* -------- botões -------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 100px;
  font: 700 .9rem var(--font-ui); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  will-change: transform;
}
.btn-solid { background: var(--orange-500); color: var(--bg-0); }
.btn-solid:hover { background: var(--orange-400); box-shadow: 0 8px 30px rgba(255,106,0,.35); transform: translateY(-1px); }
.btn-ghost { border: 1px solid rgba(245,245,244,.25); color: var(--text-1); background: transparent; font-weight: 600; }
.btn-ghost:hover { border-color: rgba(245,245,244,.6); background: rgba(245,245,244,.05); transform: translateY(-1px); }
.btn-big { padding: 16px 30px; font-size: 1rem; }
.btn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-0); flex: none;
  animation: dotpulse 1.6s ease-in-out infinite;
}
.nav-cta { padding: 10px 18px; font-size: .82rem; }

@keyframes dotpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* ============================================================
   02 · HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-content: center; justify-items: center;
  text-align: center;
  padding: 120px var(--pad-x) 80px;
  overflow: clip;
}
.particles { position: absolute; inset: 0; pointer-events: none; }
.particles .p {
  position: absolute; left: 0; top: 0; /* base explícita: transform = coordenada local */
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, var(--orange-300), var(--orange-500));
  will-change: transform, opacity;
}

.hero-core { max-width: 920px; }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .3em;
  color: var(--orange-500);
}

.hero-h1 {
  margin-top: 24px;
  font-size: clamp(1.9rem, 3.3vw, 3.1rem);
  font-weight: 900; line-height: 1.15; letter-spacing: -.026em;
}
@media (min-width: 960px) { .hero-h1 { white-space: nowrap; } }
.hero-h1 em { font-style: normal; color: var(--orange-500); }
.hline { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hline-in { display: inline-block; will-change: transform; }

/* o ponto final da frase é o Orange — a mesma entidade do logo AI4. */
.h1-dot {
  display: inline-block; width: .42em; height: .42em; margin-left: .18em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, var(--orange-300), var(--orange-500) 48%, var(--orange-700) 88%);
  box-shadow: 0 0 18px rgba(255,106,0,.45);
}
html.motion .h1-dot { visibility: hidden; } /* o roamer assume o lugar */

.hero-sub {
  margin-top: 24px; max-width: 52ch; margin-inline: auto;
  color: var(--text-2); font-size: 1.05rem;
}

.ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; justify-content: center; align-items: center; }

.hero-proof {
  margin-top: 34px; font-size: 11.5px; letter-spacing: .04em;
  color: var(--text-3);
}
.hero-proof b { color: var(--text-1); font-weight: 700; }

.bubble {
  max-width: 85%;
  padding: 9px 13px; border-radius: 13px;
  font-size: .86rem; line-height: 1.45;
}
.bubble.in { background: var(--bg-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.out { background: #16301F; align-self: flex-end; border-bottom-right-radius: 4px; }

.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .28em; color: var(--text-3);
  text-transform: uppercase;
}

/* ============================================================
   03 · CONSTELAÇÃO
   ============================================================ */
.constellation { padding: clamp(60px, 8vh, 100px) var(--pad-x); }

.sec-label {
  text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: .3em; color: var(--text-3);
}

.const-stage {
  position: relative; max-width: 1200px; margin: 40px auto 0;
  height: clamp(360px, 42vw, 480px);
}
.const-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.const-svg path {
  stroke: rgba(255,106,0,.35); stroke-width: 1.5;
  stroke-dasharray: 3 8; fill: none;
}

.const-node {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: clamp(110px, 12vw, 168px); height: 62px;
  display: grid; place-items: center;
}
.const-node img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
  filter: grayscale(1) invert(1) brightness(1.55) contrast(.85);
  opacity: .4;
  transition: opacity .5s ease, filter .5s ease, transform .5s ease;
}
.const-node.lit img {
  opacity: 1;
  filter: grayscale(1) invert(1) brightness(2) contrast(.9) drop-shadow(0 0 16px rgba(255,106,0,.35));
  transform: scale(1.04);
}

/* ============================================================
   04/06/10 · INTERLÚDIOS
   ============================================================ */
.interlude {
  min-height: 70svh;
  display: grid; place-content: center; text-align: center;
  padding: 90px var(--pad-x); gap: 6px;
}
.int-line {
  font-size: clamp(2.7rem, 8.4vw, 7rem);
  font-weight: 900; line-height: 1.02; letter-spacing: -.035em;
}
.int-line .accent { color: var(--orange-500); }
.iw { display: inline-block; will-change: transform, opacity; }

/* ============================================================
   05 · OS QUATRO ATOS
   ============================================================ */
.acts { position: relative; }
html.motion .acts-pin {
  height: 100svh; overflow: clip;
  display: flex; flex-direction: column;
}

.acts-head {
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 108px var(--pad-x) 0;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.acts-head .sec-label { text-align: left; }
.acts-op { font-size: 11.5px; font-weight: 700; letter-spacing: .25em; color: var(--text-3); }
.acts-op b { color: var(--orange-500); font-weight: 700; }
.acts-progress { display: flex; gap: 9px; list-style: none; }
.acts-progress li {
  width: 27px; height: 27px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 50%;
  transition: color .3s, border-color .3s;
}
.acts-progress li.on { color: var(--orange-500); border-color: var(--orange-500); }

.acts-stage {
  position: relative; flex: 1;
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 34px var(--pad-x) 60px;
}
.acts-stage .orange-anchor { left: 3%; top: 68%; }

.act {
  display: grid;
  grid-template-columns: 1.5fr .85fr;
  grid-template-areas: "claim claim" "main notes" "sign sign";
  gap: 20px clamp(28px, 4vw, 60px);
  align-items: start; align-content: start;
}
.act-claim {
  grid-area: claim;
  font-size: clamp(1.35rem, 2.4vw, 2.05rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.22;
  max-width: 34ch; margin-bottom: 6px;
}
.act-claim em { font-style: normal; color: var(--orange-500); }
html.motion .act {
  position: absolute; inset: 34px var(--pad-x) 60px;
  opacity: 0; visibility: hidden;
  align-content: center;
}
html.motion .act.is-on { opacity: 1; visibility: visible; }
html:not(.motion) .act { padding: 56px 0; border-bottom: 1px dashed var(--border); }
html:not(.motion) .acts-stage .act:last-child { border-bottom: none; }

.act-main { grid-area: main; padding-left: clamp(0px, 4vw, 56px); }
.act-notes {
  grid-area: notes;
  border-left: 1px solid var(--border); padding-left: 20px;
  font-size: 11.5px; line-height: 2; color: var(--text-3);
  letter-spacing: .02em; align-self: center;
}
.act-notes b { color: var(--text-2); font-weight: 500; }
.note-strong {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--border);
  color: var(--text-2);
}
.act-sign {
  grid-area: sign; justify-self: end;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem);
  font-weight: 600; color: var(--text-2); letter-spacing: -.01em;
}
.act-sign b { color: var(--text-1); font-weight: 800; }

/* ATO I */
.thread { max-width: 430px; display: flex; flex-direction: column; gap: 10px; }
.approval {
  border: 1px solid rgba(234,179,8,.45); border-radius: 12px;
  background: rgba(234,179,8,.05);
  padding: 13px 15px; margin-top: 4px;
}
.appr-label { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; color: var(--warn); }
.appr-desc { margin-top: 6px; font-size: .95rem; color: var(--text-1); }
.appr-actions { margin-top: 8px; font-size: 12px; display: flex; gap: 12px; }
.appr-actions button {
  background: none; border: none; cursor: default;
  font: 700 12px var(--font-mono); letter-spacing: .04em; padding: 0;
}
.appr-yes { color: var(--orange-500); }
.appr-no { color: var(--text-3); }
.appr-ok { margin-top: 9px; font-size: 10.5px; color: var(--ok); letter-spacing: .05em; }
html.motion .appr-ok { opacity: 0; }

/* ATO II */
.question-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; max-width: 470px;
}
.q-id { font-size: 9.5px; font-weight: 700; letter-spacing: .18em; color: var(--orange-500); }
.q-text { margin-top: 8px; font-size: .98rem; color: var(--text-1); }
.q-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--orange-400);
  border: 1px solid rgba(255,106,0,.45); border-radius: 5px;
  padding: 3px 8px; will-change: transform, opacity;
}
.q-verdict { margin-top: 12px; font-size: 11px; letter-spacing: .03em; color: var(--text-2); }
.q-verdict .q-x { color: var(--err); font-weight: 700; margin-right: 4px; }
.q-verdict b { color: var(--text-1); font-weight: 700; }
.q-foot {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 9.5px; letter-spacing: .04em; color: var(--text-3);
}

.frag-map { margin-top: 20px; max-width: 470px; font-size: 12px; color: var(--text-3); }
.frag-label { letter-spacing: .06em; margin-bottom: 10px; }
.frag-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.frag-name { width: 170px; flex: none; }
.frag-bar { flex: 1; height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; }
.frag-bar i {
  display: block; height: 100%; width: var(--v);
  background: linear-gradient(90deg, var(--orange-400), var(--orange-500));
  border-radius: 3px; transform-origin: left; will-change: transform;
}
.frag-next { margin-top: 12px; color: var(--text-2); }
.frag-next b { color: var(--text-1); font-weight: 700; }

/* ATO III */
.ev-steps {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  margin-bottom: 28px;
}
.ev-steps li {
  position: relative; display: flex; align-items: center; gap: 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  color: var(--text-3); padding: 6px 0; margin-right: 44px;
}
.ev-steps li::after {
  content: ""; position: absolute; right: -32px; top: 50%;
  width: 20px; height: 1px; background: var(--border);
}
.ev-steps li:last-child::after { display: none; }
.ev-steps li:last-child { margin-right: 0; }
.ev-steps li.done { color: var(--text-2); }
.ev-steps li.done::before { content: "✓"; color: var(--ok); font-weight: 700; }
.ev-steps li.now {
  color: var(--orange-500);
  border: 1px solid rgba(255,106,0,.5); border-radius: 5px;
  padding: 6px 11px;
}
.ev-row { display: flex; gap: clamp(20px, 3vw, 44px); align-items: center; flex-wrap: wrap; }
.badge-card {
  width: 212px; flex: none;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px; text-align: center;
}
.badge-name { font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
.badge-role { margin-top: 3px; font-size: 9.5px; letter-spacing: .18em; color: var(--text-3); }
.badge-qr {
  width: 74px; height: 74px; margin: 16px auto 0;
  background-color: var(--text-1);
  background-image:
    repeating-linear-gradient(0deg, var(--bg-0) 0 5px, transparent 5px 12px),
    repeating-linear-gradient(90deg, var(--bg-0) 0 6px, transparent 6px 13px);
  border-radius: 6px; border: 4px solid var(--text-1);
  opacity: .92;
}
.badge-in { margin-top: 14px; font-size: 10.5px; letter-spacing: .06em; color: var(--ok); }
.net-svg { flex: 1; min-width: 220px; height: auto; }
.net-l { stroke: rgba(255,106,0,.4); stroke-width: 1.3; }
.net-n { fill: var(--orange-500); }

/* ATO IV */
.chart-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; max-width: 470px;
}
.chart-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em; color: var(--text-3);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.warn-tag {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  color: var(--warn); border: 1px solid rgba(234,179,8,.5);
  padding: 2px 7px; border-radius: 4px;
}
.chart-svg { width: 100%; height: auto; margin-top: 12px; }
.ch-a { fill: none; stroke: var(--orange-500); stroke-width: 2; }
.ch-b { fill: none; stroke: var(--border); stroke-width: 2; }
.alert-card {
  margin-top: 16px; max-width: 470px;
  border-left: 2px solid var(--warn);
  background: rgba(234,179,8,.045);
  padding: 12px 16px; font-size: 12px; line-height: 1.9; color: var(--text-2);
}
.alert-card .warn { color: var(--warn); }
.alert-card b { color: var(--text-1); font-weight: 700; }

/* ============================================================
   07 · O CONTRATO DO NÚCLEO
   ============================================================ */
.contract { padding: clamp(110px, 14vh, 170px) var(--pad-x); }
html.motion .contract {
  min-height: 100svh;
  padding-top: 86px; padding-bottom: 40px;
  display: flex; flex-direction: column; justify-content: center;
}
html.motion .contract .doc { margin-top: 30px; }

.doc {
  max-width: 760px; margin: 54px auto 0;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 10px;
  padding: clamp(24px, 4vw, 40px) clamp(22px, 4.5vw, 44px) clamp(20px, 3vw, 30px);
  box-shadow: 0 40px 100px rgba(0,0,0,.55);
}
.doc-head {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 10px; font-weight: 700; letter-spacing: .22em; color: var(--text-1);
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.doc-serial { color: var(--text-3); letter-spacing: .08em; font-weight: 500; }

.clause { margin-top: 28px; }
.clause h3 {
  font-size: clamp(1.02rem, 1.7vw, 1.28rem);
  font-weight: 800; letter-spacing: -.01em;
}
.cnum { color: var(--orange-500); font-weight: 700; font-size: .82em; margin-right: 8px; }
.cbody { margin-top: 7px; color: var(--text-2); font-size: .95rem; max-width: 58ch; }
.mech { margin-top: 7px; font-size: 10px; letter-spacing: .06em; color: var(--text-3); }

.doc-foot {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
}
.doc-sign { font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; }
.doc-place { margin-top: 4px; font-size: 9.5px; letter-spacing: .05em; color: var(--text-3); }

.seal-slot { position: relative; width: 86px; height: 86px; flex: none; }
.seal-slot .orange-anchor { left: 50%; top: 50%; }
.seal { position: absolute; inset: 0; }
html.motion .seal { opacity: 0; transform: scale(.55); }
.seal-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px dashed rgba(255,106,0,.6);
}
.seal-core {
  position: absolute; inset: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, var(--orange-300), var(--orange-500) 45%, var(--orange-700) 80%);
  box-shadow: 0 0 26px rgba(255,106,0,.5), inset 0 -4px 10px rgba(0,0,0,.3);
}
.seal-ink {
  position: absolute; inset: -18px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,0,.35), transparent 60%);
  opacity: 0; transform: scale(.4);
}

.caption {
  text-align: center; margin-top: 26px;
  font-size: 10px; letter-spacing: .14em; color: var(--text-3);
}

/* ============================================================
   08 · DIÁRIO DE OPERAÇÃO
   ============================================================ */
.diary { padding: clamp(110px, 14vh, 170px) var(--pad-x); }

.diary-head {
  max-width: 1100px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em; color: var(--text-1);
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.diary-head .dim { font-weight: 500; letter-spacing: .05em; }

.diary-grid {
  max-width: 1100px; margin: 30px auto 0;
  display: grid; grid-template-columns: 1.55fr .75fr;
  gap: clamp(28px, 4vw, 56px);
}

.log {
  position: relative; max-height: 430px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent);
}
.log-track { display: flex; flex-direction: column; gap: 15px; padding: 16px 0; }
.log-track.rolling { animation: logroll 34s linear infinite; }
@keyframes logroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.log-line {
  position: relative;
  display: flex; align-items: baseline; gap: 11px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; line-height: 1.7;
  color: var(--text-3); padding-right: 104px;
}
.log-line .t { font-size: 10.5px; opacity: .65; min-width: 62px; flex: none; }
.log-line .st {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  transform: translateY(-2px);
}
.st.ok { background: var(--ok); }
.st.org { background: var(--orange-500); }
.st.warn { background: var(--warn); }
.log-line b { color: var(--text-2); font-weight: 500; }
.log-line .cref { color: var(--orange-500); font-weight: 700; }
.log-line.milestone .txt { color: var(--text-1); }
.log-line.milestone b { color: var(--text-1); }

.stamp {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  border: 1.5px solid var(--orange-500); color: var(--orange-500);
  font: 700 8.5px var(--font-mono); letter-spacing: .14em;
  padding: 3px 7px; border-radius: 4px; white-space: nowrap;
}
.log-line:nth-of-type(9) .stamp { transform: translateY(-50%) rotate(3deg); }

.totals { border-left: 1px solid var(--border); padding-left: clamp(20px, 3vw, 34px); }
.totals-label { font-size: 9.5px; font-weight: 700; letter-spacing: .26em; color: var(--text-3); }
.total { margin-top: 24px; }
.tnum {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  letter-spacing: -.02em; color: var(--text-1); line-height: 1.1;
}
.tnum .unit { font-size: .5em; color: var(--text-3); margin-left: 2px; }
.total.zero .tnum { color: var(--orange-500); }
.tlabel { margin-top: 3px; font-size: 9px; letter-spacing: .2em; color: var(--text-3); }

.diary .caption { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* ============================================================
   09 · CONVERGE → AGENTOS
   ============================================================ */
.converge { padding: clamp(120px, 15vh, 180px) var(--pad-x) 120px; text-align: center; }
.converge .eyebrow { display: block; text-align: center; }

.conv-stage {
  position: relative; max-width: 880px;
  height: clamp(280px, 34vw, 380px);
  margin: 34px auto 8px;
}
.conv-stage .orange-anchor { left: 50%; top: 52%; }
.sat {
  position: absolute;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 10px 15px;
  text-align: left; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  will-change: transform, opacity;
}
.sat b { display: block; font-size: .88rem; font-weight: 800; letter-spacing: -.01em; }
.sat span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--text-3); }
.sat[data-sat="1"] { left: 5%;  top: 16%; }
.sat[data-sat="2"] { right: 6%; top: 10%; }
.sat[data-sat="3"] { left: 12%; bottom: 14%; }
.sat[data-sat="4"] { right: 12%; bottom: 20%; }
.sat[data-sat="5"] { left: 44%; top: 2%; }

.conv-title {
  max-width: 820px; margin: 18px auto 0;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  font-weight: 900; letter-spacing: -.02em; line-height: 1.15;
}
.conv-sub { margin-top: 12px; color: var(--text-2); }
.conv-sub .warn-tag { margin-left: 8px; }
.conv-cta { margin-top: 30px; }

/* ============================================================
   11 · CTA FINAL
   ============================================================ */
.finale {
  position: relative; min-height: 84svh;
  display: grid; place-content: center; justify-items: center;
  text-align: center; gap: 16px;
  padding: 120px var(--pad-x);
}
.finale-h {
  font-size: clamp(2.1rem, 5vw, 3.9rem);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.08;
  max-width: 16ch;
}
.finale-h em { font-style: normal; color: var(--orange-500); }
.finale-sub { color: var(--text-2); font-size: 1.05rem; }
.finale .ctas { justify-content: center; margin-top: 10px; }

/* ============================================================
   12 · RODAPÉ
   ============================================================ */
.footer {
  border-top: 1px solid var(--border);
  padding: 52px var(--pad-x) 42px;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between; align-items: start;
  gap: 28px;
  max-width: 1400px; margin: 0 auto;
}
.foot-brand .brand { font-size: 1.15rem; }
.foot-brand .mono { margin-top: 5px; font-size: 10px; letter-spacing: .08em; }
.foot-products, .foot-contact { display: flex; gap: 20px; flex-wrap: wrap; font-size: 11.5px; letter-spacing: .04em; padding-top: 6px; }
.foot-products a, .foot-contact a { color: var(--text-2); text-decoration: none; transition: color .25s; }
.foot-products a:hover, .foot-contact a:hover { color: var(--orange-500); }
.foot-products span { color: var(--text-3); }
.foot-line {
  grid-column: 1 / -1;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 10px; letter-spacing: .08em;
}

/* ============================================================
   REVEALS (modo lite) — nada é escondido sem JS
   ============================================================ */
html.lite [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s ease, transform .8s ease;
}
html.lite [data-reveal].in { opacity: 1; transform: none; }
html.lite .hline-in { transition: transform .9s cubic-bezier(.19,1,.22,1); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1080px) {
  .act-main { padding-left: 0; }
}

@media (max-width: 960px) {
  .hero { padding-top: 110px; }
  .act-claim { max-width: none; }

  .const-stage { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 44px; margin-top: 44px; }
  .const-svg { display: none; }
  .const-node { position: static; transform: none; width: 120px; }
  .const-node img { opacity: .75; }

  .act { grid-template-columns: 1fr; grid-template-areas: "claim" "main" "notes" "sign"; }
  .act-notes { border-left: none; border-top: 1px solid var(--border); padding: 16px 0 0; }
  .act-sign { justify-self: start; }

  .diary-grid { grid-template-columns: 1fr; }
  .totals { border-left: none; border-top: 1px solid var(--border); padding: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 40px; }
  .totals-label { width: 100%; }
  .total { margin-top: 10px; }

  .footer { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .hero { padding-top: 110px; }
  .hero-proof { line-height: 2.2; }
  .int-line { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .log-line { padding-right: 0; padding-bottom: 20px; }
  .stamp { top: auto; bottom: 0; transform: rotate(-3deg); }
  .conv-stage { height: auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
  .sat { position: static; }
  .btn-big { padding: 14px 22px; font-size: .95rem; }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-dot, .o-breather,
  .log-track.rolling, .scroll-hint { animation: none !important; }
  html.lite [data-reveal] { opacity: 1; transform: none; transition: none; }
}