/* =============================================================================
   Code House Systems — homepage
   Tokens e regras vêm de DESIGN.md. Dois sinais: violeta = decisão e fronteira,
   teal = ação confirmada. Sem glow, sem sombra estruturando container.
   ========================================================================== */

/* ------------------------------------------------------------------ fontes */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-stretch: 94% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --bg: #07080C;
  --panel: #0C0E14;
  --panel-2: #121521;
  --line: #292A36;
  --line-soft: #1B1D28;
  --ink: #F3F2F8;
  --ink-2: #A6A8B3;
  --ink-3: #686C7A;      /* só linhas e bordas: reprova AA como texto */
  --ink-label: #8A8D99;  /* rótulos e metadados; 5,56:1 sobre --panel-2 */
  --violet: #8B7CFF;
  --violet-deep: #5F50D4;
  --teal: #31D6A0;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --shell: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 4px;

  /* ritmo em múltiplos de 8 */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 48px;  --s-6: 64px;  --s-7: 96px;  --s-8: 128px;

  --t-fast: 160ms;
  --t-slow: 240ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-stretch: 100%;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-stretch: 94%; font-weight: 500; margin: 0; }
p, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--violet); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

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

::selection { background: var(--violet-deep); color: var(--ink); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--s-2); top: var(--s-2);
  z-index: 100;
  padding: 10px 16px;
  background: var(--violet);
  color: var(--bg);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}
.skip:focus { transform: translateY(0); color: var(--bg); }

/* ------------------------------------------------------------------ tipos */
.eyebrow,
.core__label,
.rail__index,
.method__n,
.steps__n,
.form__note,
.io__k,
.site-footer__legal {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-label);
}

.prose {
  color: var(--ink-2);
  max-width: 68ch;
}

.section__title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 20ch;
}
.section__title em { font-style: normal; color: var(--violet); }

/* ------------------------------------------------------------------ botões */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn--lg { min-height: 52px; padding: 14px 24px; font-size: 1rem; }

.btn--primary {
  background: var(--violet);
  border-color: var(--violet);
  color: #0B0A18;
}
.btn--primary:hover { background: #A296FF; border-color: #A296FF; color: #0B0A18; }
.btn--primary:active { background: var(--violet-deep); border-color: var(--violet-deep); color: var(--ink); }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-3); color: var(--ink); }

.btn__arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* opaco de propósito: a Instrument Glass Rule do DESIGN.md só admite desfoque
     quando ele comunica estado ou camada, e uma barra fixa não comunica nada */
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 72px;
}
.site-header__logo { display: block; margin-right: auto; }
.site-header__full { width: 267px; height: 24px; }
.site-header__mark { display: none; width: 28px; height: 28px; }

.site-nav ul { display: flex; gap: var(--s-4); }
.site-nav a {
  color: var(--ink-2);
  font-size: .9375rem;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.site-nav a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ hero */
.hero { padding-block: clamp(var(--s-5), 5vw, var(--s-7)) var(--s-7); }

.hero .eyebrow { margin-bottom: var(--s-3); }

/* Headline e lead lado a lado: a direção aprovada exige que a composição
   Nested Core e a faixa de prova ainda caibam no primeiro viewport. */
.hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr);
  gap: var(--s-6);
  align-items: end;
}

.hero__title {
  /* a escala Display do DESIGN.md vai a 5.75rem, mas essa headline tem 60
     caracteres: no topo da escala ela vira quatro linhas e empurra o mecanismo
     para fora do viewport. Instância mais contida, mesma família de tamanhos. */
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.028em;
  max-width: 20ch;
}
.hero__title em { font-style: normal; color: var(--violet); display: block; }

.hero__lead {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 1.0625rem;
  padding-bottom: 6px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* --------------------------------------------------- mecanismo Nested Core */
.core {
  margin: var(--s-6) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(208px, 240px);
  column-gap: 48px;
  align-items: center;
}

.core__frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 2fr) minmax(0, .72fr);
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-6) var(--s-4) var(--s-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.core__label {
  position: absolute;
  top: var(--s-2);
  left: var(--s-3);
  margin: 0;
}
.core__label--agent { color: var(--violet); }
.core__label--action { position: static; color: var(--teal); }

.core__io { display: grid; gap: var(--s-1); }
.core__io li {
  padding: var(--s-2);
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  display: grid;
  gap: 2px;
}
.io__k { display: block; font-size: .625rem; letter-spacing: .1em; }
.io__v { display: block; font-size: .875rem; color: var(--ink-2); }

/* camada de agente — a fronteira interna */
.agent {
  position: relative;
  padding: var(--s-6) var(--s-4) var(--s-4);
  background: var(--panel-2);
  border: 1px solid var(--violet-deep);
  border-radius: var(--radius);
}
/* cantos marcados, no lugar de chanfro */
.agent::before, .agent::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--violet);
}
.agent::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.agent::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.agent__rows { display: grid; gap: var(--s-2); }
.agent__row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--s-2);
  align-items: baseline;
  padding: var(--s-2) var(--s-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.agent__k {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--violet);
}
.agent__v { font-size: .875rem; line-height: 1.55; color: var(--ink-2); }

/* o nó onde a ação atravessa a fronteira do sistema */
.core__cross {
  position: absolute;
  right: -4px;
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  background: var(--teal);
  border-radius: 1px;
}

.core__action {
  position: relative;
  align-self: center;
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4);
  background: var(--panel);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
}
/* o único traço que sai da fronteira */
.core__action::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 48px;
  height: 1px;
  background: var(--teal);
  transform-origin: left center;
}
.core__action-body { font-size: .875rem; line-height: 1.55; color: var(--ink-2); }

.core__caption {
  margin-top: var(--s-3);
  grid-column: 1 / -1;
  font-size: .8125rem;
  color: var(--ink-label);
  max-width: 78ch;
}

/* sequência: contexto → ferramentas → limites → ação registrada */
@keyframes chs-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes chs-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes chs-pop {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: none; }
}

/* O escalonamento vem do CSS, não de style="--step" no HTML: atributo de
   estilo inline exigiria 'unsafe-inline' em style-src e enfraqueceria o CSP. */
.agent__row { animation: chs-rise 300ms var(--ease) both; }
.agent__row:nth-child(1) { animation-delay: 300ms; }
.agent__row:nth-child(2) { animation-delay: 440ms; }
.agent__row:nth-child(3) { animation-delay: 580ms; }
.core__cross { animation: chs-pop 200ms var(--ease) both; animation-delay: 660ms; }
.core__action::before { animation: chs-draw 260ms var(--ease) both; animation-delay: 780ms; }
.core__action { animation: chs-rise 300ms var(--ease) both; animation-delay: 980ms; }

/* Impressão não roda animação: sem isto o fill-mode deixaria o mecanismo
   invisível no papel. */
@media print {
  .agent__row, .core__action, .core__cross { animation: none; opacity: 1; transform: none; }
  .core__action::before { animation: none; transform: none; }
}

/* ------------------------------------------------------------------ prova */
.proof {
  border-block: 1px solid var(--line-soft);
  background: var(--panel);
}
.proof__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  padding-block: var(--s-4);
}
.proof__list li {
  display: grid;
  gap: 2px;
  padding-left: var(--s-3);
  border-left: 1px solid var(--line);
}
.proof__list strong {
  font-stretch: 94%;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.proof__list span { font-size: .8125rem; color: var(--ink-label); }

/* ------------------------------------------------------------------ seções */
.section { padding-block: clamp(var(--s-7), 11vw, 160px); }
.section + .section { border-top: 1px solid var(--line-soft); }
.section__intro { margin-top: var(--s-3); }

/* soluções — faixa herdada do Execution Rail, sem cards */
.rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.rail__index { color: var(--violet); }
.rail__title {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-size: 1.5rem;
  line-height: 1.2;
}
.rail__body { margin-top: var(--s-2); font-size: .9375rem; color: var(--ink-2); }

/* tese de IA */
.thesis {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--s-6);
  align-items: start;
}
.thesis__lead .prose { margin-top: var(--s-4); }
.steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.steps li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--s-2);
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.steps__n { color: var(--violet); }
.steps__t { font-stretch: 94%; font-size: 1.125rem; }

/* método */
.method {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.method li { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.method__n { color: var(--violet); }
.method__t { margin-top: var(--s-2); font-size: 1.375rem; line-height: 1.2; }
.method__b { margin-top: var(--s-1); font-size: .9375rem; color: var(--ink-2); }

/* desafios */
.problems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.problem { padding: var(--s-4) var(--s-5) var(--s-5) 0; border-bottom: 1px solid var(--line); }
.problem:nth-child(even) { padding-inline: var(--s-5) 0; border-left: 1px solid var(--line); }
.problem__t { font-size: 1.25rem; line-height: 1.25; max-width: 24ch; }
.problem__b { margin-top: var(--s-2); font-size: .9375rem; color: var(--ink-2); }

/* sobre */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

/* ------------------------------------------------------------------ cta */
.cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}
.cta .prose { margin-top: var(--s-4); }

.form { display: grid; gap: var(--s-3); }
.form__row { display: grid; gap: var(--s-1); }
.form label { font-size: .875rem; color: var(--ink-2); }
.form input, .form textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px var(--s-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--t-fast) var(--ease);
}
.form textarea { resize: vertical; }
.form input:hover, .form textarea:hover { border-color: var(--ink-3); }
.form input:focus, .form textarea:focus { border-color: var(--violet); }
.form__actions { margin-top: var(--s-1); }
.form__note { text-transform: none; letter-spacing: 0; font-size: .75rem; }

/* ------------------------------------------------------------------ rodapé */
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--panel);
  padding-block: var(--s-5);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: start;
}
.site-footer__brand { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-2); align-items: center; }
.site-footer__brand p { font-size: .875rem; color: var(--ink-2); max-width: 34ch; }
.site-footer__nav ul { display: grid; gap: var(--s-1); }
.site-footer__nav a { color: var(--ink-2); font-size: .875rem; text-decoration: none; }
.site-footer__nav a:hover { color: var(--ink); }
.site-footer__legal { display: grid; gap: 4px; text-align: right; }

/* ------------------------------------------------------------------ telas estreitas
   As fronteiras deixam de ser concêntricas e viram camadas registradas em
   sequência, preservando a ordem sistema → agente → ação. */
@media (max-width: 1100px) {
  /* a ação registrada desce para baixo da fronteira; o traço que a liga gira
     junto, para continuar sendo a mesma saída atravessando o mesmo limite */
  .core { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); }
  .core__cross { right: 50%; top: auto; bottom: -4px; margin: 0 -3.5px 0 0; }
  .core__action::before {
    right: auto; left: 50%; top: auto; bottom: 100%;
    width: 1px; height: var(--s-4);
    transform-origin: center bottom;
  }
  @keyframes chs-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .site-header__cta { display: none; }
}

@media (max-width: 900px) {
  .hero__head { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: start; }
  .hero__lead { padding-bottom: 0; max-width: 62ch; }
  /* fronteiras deixam de ser concêntricas e viram camadas em sequência */
  .core__frame { grid-template-columns: minmax(0, 1fr); }
  .thesis, .about, .cta__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .method { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
  .proof__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .site-footer__legal { text-align: left; }
}

@media (max-width: 720px) {
  .site-nav { display: none; }
  .site-header__cta { display: inline-flex; padding: 10px 16px; font-size: .875rem; }
  .site-header__inner { gap: var(--s-2); min-height: 64px; }
  .site-header__full { display: none; }
  .site-header__mark { display: block; }
  .core__frame { grid-template-columns: minmax(0, 1fr); }
  .rail, .problems { grid-template-columns: minmax(0, 1fr); }
  .rail { gap: var(--s-4); }
  .agent__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hero__title { font-size: clamp(2.25rem, 9vw, 3rem); }
}

@media (max-width: 480px) {
  .method, .proof__list { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ movimento reduzido
   O estado final estático é o conteúdo; a sequência é só demonstração. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .agent__row, .core__action, .core__cross { opacity: 1; transform: none; }
  .core__action::before { transform: none; }
}