/* base.css */
:root {
  /* Premium Layered Dark Theme Colors (Enterprise Midnight Blue-Black) */
  --bg-primary: #05070C; /* Deep near-black navy base */
  --bg-secondary: #0A0D14; /* Secondary elevation */
  --bg-tertiary: #10141D; /* Higher elevation */
  --bg-surface: rgba(10, 13, 20, 0.15); /* Translucent dark anchored cards */
  --bg-surface-hover: rgba(15, 18, 26, 0.2);
  
  --text-primary: #F4F4F5; /* Soft white */
  --text-secondary: #94A3B8; /* Cool blue-gray */
  /* rodada 22 — era #64748B, que da 4.23:1 sobre o --bg-primary e reprova AA
     (o minimo e 4.5:1 para texto normal). #6A798E da 4.54:1. E o mesmo cinza,
     um degrau mais claro: pega os 9 .roster-eyebrow da home e todo o resto. */
  --text-muted: #6A798E;
  
  --border-subtle: rgba(255, 255, 255, 0.03);
  --border-light: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  
  --accent-color: #6366F1; /* Subtle electric blue/violet */
  --accent-glow: rgba(99, 102, 241, 0.037);
  
  --success-color: #10B981;
  --warning-color: #F59E0B;
  --danger-color: #EF4444;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Spacing (Math-based scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 128px;

  /* ── SISTEMA ESPACIAL — a regra completa em docs/LAYOUT.md ───────────────
     Ate a r39 a pagina tinha 10 larguras de container e 9 margens esquerdas
     diferentes. Isto e a regua. Largura: UMA coluna. Respiro: QUATRO degraus,
     subconjunto nomeado da --space acima (so os multiplos de 8). */

  /* estrutura */
  /* r46: 64 -> 76px. Medido em 1440, o recuo vertical dentro da barra:
     Linear 20 acima / 21 abaixo (barra de 73) · Stripe 18/18 (76) ·
     Scale AI 24/24 (88). A pagina tinha 14/15 numa barra de 64 — o conteudo
     encostava nas bordas. 22/22 em volta da caixa de 32px da fila da direita
     da 76, a altura exata da Stripe e no meio da faixa das tres. */
  --navbar-h: 76px;

  /* largura */
  --container-max: 1344px;   /* moldura — r41: era 1200 */
  --gutter: var(--space-5);  /* 24px — recuo lateral */
  --content: calc(var(--container-max) - 2 * var(--gutter));  /* 1296 — A COLUNA */
  --container-wide: 1520px;  /* EXCECAO: objeto visual autocontido (LAYOUT.md 2.4) */

  /* ── A REGUA, VISTA DE DENTRO DE UM OBJECTO QUE SANGRA (r135) ─────────────
     A COLUNA e a mesma coisa que o utilizador ve no menu: a marca comeca nela
     e o botao Start Trial acaba nela. A 1440 isso e 72 -> 1368.

     Um OBJECTO pode sair da coluna -- o `V-05` do SPEC ate exige que varios
     saiam. O TEXTO de uma seccao, nao: quando o cabecalho mora DENTRO de uma
     caixa que sangrou (sobreposto, ou dentro de um cartao), ele herda a borda
     da caixa e nao a coluna, e a pagina passa a ter tantas margens esquerdas
     quantas seccoes -- que foi exactamente o defeito de doze seccoes.

     Estes dois recuos poem a tipografia de volta na coluna a partir de dentro,
     e HOJE VALEM O MESMO — 32 — porque so ha uma gama de sangramento.
     Num cartao com moldura, desconta-se a borda: `calc(var(--rail-in-64) - 1px)`.

     ⚠️ **O SANGRAMENTO COMPLETO FOI ABOLIDO, e o `--rail-in-64` desceu com ele.**
     O founder mediu o site contra duas linhas verticais — o inicio do wordmark
     (64) e o fim do Start Trial (1360) — e disse que o que passa
     significativamente delas le como amadorismo. As duas gamas da casa
     separavam-se EXACTAMENTE nos dois exemplos que ele deu: a de -32 aprovada
     (`ar-class`, pinta ate 1386), a de -64 reprovada (`sb-upkeep`, pinta ate
     1424). As 33 regras de -64 passaram a -32, e o recuo que as compensa por
     dentro teve de passar de 64 para 32 — senao o texto que estava na coluna
     saltava 32px para dentro dela.

     O NOME fica: renomear o token em catorze folhas por causa de uma constante
     e risco sem retorno. Fica dito aqui que ele ja nao vale 64.
     Ver `docs/100 - homepage_build/runs/calha-vertical/inventario.md`.

     ⚠️ NAO se mede pela LARGURA do objecto, mede-se pelo LEFT do texto. Um head
     dentro de um sangramento pode ter a largura certa e comecar no sitio errado
     -- e um teste de largura passa na mesma. */
  --rail-in-64: 0px;
  --rail-in-32: 0px;

  /* ── MEDIDA DE TEXTO ─────────────────────────────────────────────────────
     Nomeadas pelo PAPEL, nao pelo tamanho: qual usar depende do que o bloco e,
     nao de quao largo ficou bonito. A regra-mae: a coluna cresce, a LEITURA
     nao. Linha de leitura larga e ilegivel por mais espaco que sobre.
     Sempre CENTRADA dentro do container. Ver docs/LAYOUT.md 2.2. */
  --measure-title: 1000px;   /* titulo grande (h2 56px) — acompanha a coluna */
  --measure-block: 760px;    /* bloco estreito que NAO e leitura corrida */
  --measure-read: 640px;     /* TEXTO CORRIDO — 60 a 75 caracteres. NAO cresce. */

  /* respiro vertical — quatro degraus, cada um o dobro do anterior */
  --stack-xs: var(--space-4);    /* 16  */
  --stack-sm: var(--space-6);    /* 32  */
  --stack-md: var(--space-10);   /* 64  */
  --stack-lg: var(--space-16);   /* 128 — padding vertical de secao */

  /* da base da navbar ao topo do titulo do heroi (Linear 199, Stripe 172) */
  --hero-lede: 160px;

  /* r49 — QUANTO O APARELHO DO HEROI PASSA DA COLUNA, por lado.
     Medido na Linear em 1920: coluna 1282 (o h1 e a navbar ocupam exatamente
     ela), moldura do dashboard 1320 — folga de 17,5 a esquerda e 20,5 a
     direita. E uma folga PEQUENA, SIMETRICA e CONSTANTE: o aparelho continua
     ancorado no container, nao sangra pela tela. 20 = 2,5 x 8. */
  --hero-bleed: 20px;
}

/* 128 numa tela de 375 e metade da viewport: os dois degraus maiores encolhem */
@media (max-width: 768px) {
  :root {
    --gutter: var(--space-4);    /* 16 */
    --stack-md: var(--space-8);  /* 48 */
    --stack-lg: 80px;
    --hero-lede: 96px;
    /* no telefone a coluna ja e a tela inteira menos a goteira: passar dela
       encostaria o aparelho na borda. A folga zera e a cena alinha com o
       titulo, exatamente. */
    --hero-bleed: 0px;
  }
}

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

html {
  overflow-x: hidden;
}

/* Premium Dark Scrollbar (Linear/Scale AI style) */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: var(--bg-primary);
}

::-webkit-scrollbar-track {
  background-color: var(--bg-primary);
  border-left: 1px solid rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  border: 4px solid var(--bg-primary);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}


body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  /* Linear-style cinematic ambient glow (Surgical Purple / Indigo) */
  background-image: radial-gradient(100% 100% at 50% 0%, rgba(94, 106, 210, 0.013) 0%, rgba(0, 0, 0, 0) 80%);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* r41: o body NAO carrega overflow-x nem scrollbar-gutter. Com os dois, ele
     virava um container de rolagem proprio e reservava 16px do lado de dentro:
     o conteudo passava a medir 1888 enquanto a .navbar (fixed, contra o ICB)
     media 1904. Resultado — o logo caia 8px a direita da coluna e o botao 8px
     a esquerda dela, na pagina inteira. Quem barra o scroll horizontal e o
     `html { overflow-x: hidden }` la em cima, que basta. */
  position: relative;
  min-height: 100vh;
}

/* Linear-style subtle noise texture */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 9999;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em; /* Tighter tracking for premium feel */
  color: var(--text-primary);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Base structural utilities */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* a UNICA largura acima do container. Ver LAYOUT.md 2.4 antes de usar. */
.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ==========================================================================
   PREMIUM ATMOSPHERE OVERRIDES (Apple / Stripe / Linear style)
   ========================================================================== */

body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -20%, rgba(99, 102, 241, 0.03), transparent 50%),
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") !important;
  z-index: 9999;
}

#app {
  position: relative;
  z-index: 10;
}

/* Section Atmosphere Glows */
section {
  position: relative; /* ensure absolute pseudo-elements stay contained */
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto 0;
  height: 800px;
  background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.01), transparent 50%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

.self-improving-ai-section::before {
  content: "";
  position: absolute;
  inset: -10% 0 auto 0;
  height: 800px;
  background: radial-gradient(circle at 50% 20%, rgba(16, 185, 129, 0.02), transparent 45%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

.asymmetric-infrastructure-section {
  background: transparent !important;
}

.asymmetric-infrastructure-section::before {
  content: "";
  position: absolute;
  inset: -10% 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(99, 102, 241, 0.03), transparent 42%),
    radial-gradient(circle at 80% 60%, rgba(16, 185, 129, 0.02), transparent 34%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

.human-node-section::before {
  content: "";
  position: absolute;
  inset: -10% 0 auto 0;
  height: 800px;
  background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.02), transparent 50%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

.elastic-capacity-section::before {
  content: "";
  position: absolute;
  inset: -10% 0 auto 0;
  height: 800px;
  background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.02), transparent 50%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

.positioning-matrix-section::before {
  content: "";
  position: absolute;
  inset: -10% 0 auto 0;
  height: 800px;
  background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.02), transparent 50%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

.retention-thesis-section::before {
  content: "";
  position: absolute;
  inset: -10% 0 auto 0;
  height: 800px;
  background: radial-gradient(circle at 50% 20%, rgba(99, 102, 241, 0.025), transparent 45%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

/* ════════════════════════════════════════════════════════════════════════════
   A CALHA — o recolhimento das secções que nunca estiveram na coluna
   ════════════════════════════════════════════════════════════════════════════

   ⚠️ Estas não sangravam: **nunca tiveram container**. São filhas directas do
   `.main-content` com largura total, portanto pintavam de 0 a 1424 sem nenhuma
   margem negativa envolvida — a varredura que abaixou 33 regras de −64 para −32
   não lhes tocou, e foi por isso que ficaram para trás.

   O recolhimento é o mesmo alvo das outras: **1360 centrado**, que é a gama que
   o founder aprovou (32 → 1392). Faz-se na BANDA PINTADA, não na secção: a
   secção pode continuar a ocupar a largura toda; o que não pode é pintar nela.

   Cada linha aqui corresponde a uma secção do inventário
   (`runs/calha-vertical/inventario.md`).

   ⚠️ A `.roi-section .rl-slab` ESTEVE nesta lista e saiu: travá-la dava +8px de
   transbordo horizontal da página a 900. A `/mint` fica como excepção
   declarada — não se troca calha por barra de rolagem. */

/* ⚠️ As bandas do GRUPO A sairam deste travao e passaram a `.rail-bleed`:
   a largura delas E o argumento. Ver `runs/calha-vertical/excepcoes-candidatas.md`. */
.bz-noop-placeholder {
  /* ⚠️ 1360 -> 1296: a COLUNA, nao a gama de sangramento. 1360 centrado punha a
     banda em 32 -> 1392, que continua a cruzar as duas linhas. 1296 centrado
     assenta exactamente em 64 -> 1360. */
  width: min(1296px, calc(100vw - 128px));
  margin-inline: auto;
}

/* Os dois ultimos envolucros que assentavam na CAIXA do container (40 → 1384)
   em vez de na sua COLUNA (64 → 1360). Um envolucro sem padding proprio dentro
   de uma seccao que nao e `.container` herda a caixa, e a caixa tem 1344. */
.ecx-bleed,
.ecx-slabwrap,
.dep,
.dep-head {
  width: min(1296px, calc(100vw - 128px));
  margin-inline: auto;
}


/* ════════════════════════════════════════════════════════════════════════════
   `.rail-bleed` — A EXCEPÇÃO DECLARADA À CALHA
   ════════════════════════════════════════════════════════════════════════════

   O founder, depois da compressão total: *"secções onde o visual era
   fundamental e expandiam na tela toda — essas não tem problema deixar como
   excepção, porque algumas tu fez a regra mas aí perdeu o impacto."*

   O critério não é gosto: é **o que o objecto é**. Um objecto cuja carga é
   EXTENSÃO — uma banda, um campo, uma população, uma corrida temporal — perde o
   argumento quando encolhe. Um objecto cuja carga é COMPOSIÇÃO — um painel, um
   registo, um par de corpos — não perde nada.

   ⚠️ ESTA CLASSE FAZ AS DUAS COISAS, e é por isso que existe em vez de uma
   margem solta. Quem volta a sangrar precisa do recuo da tipografia de volta a
   64 — senão o head fica 64px fora do sítio, que foi exactamente o defeito que
   o founder apanhou na `/synapse`. O token é redeclarado NO ESCOPO da caixa,
   portanto só vale para dentro dela e não mexe em mais nada. */
.rail-bleed {
  width: auto;
  margin-inline: -64px;
  --rail-in-64: 64px;
  --rail-in-32: 64px;
}

@media (max-width: 1439px) {
  .rail-bleed {
    margin-inline: 0;
    --rail-in-64: 0px;
    --rail-in-32: 0px;
  }
}

/* GRUPO A da calha: bandas cuja largura E o argumento — voltam a bordo a bordo.
   Ver `runs/calha-vertical/excepcoes-candidatas.md`. */
/* ⚠️ `100%`, NUNCA `100vw`: o `100vw` inclui a barra de rolagem, por isso numa
   janela de 1280 com barra ele mede 1280 onde so ha 1265 utilizaveis — e a
   banda passava a empurrar a pagina de lado 15px em todas as larguras com
   barra. Estas bandas nao tem container, logo o pai ja e a largura util. */
.bz-day-band, .bz-qual-band, .bz-mass-fig, .il-field-band {
  width: min(1424px, 100%);
  margin-inline: auto;
}