/* ============================================================
   OVERBUILD v3 — style.css (mobile-first)
   DNA: bio.nithael.com.br → dark quente âmbar, editorial + holográfico
   v3: corredor de projetos — intro idle (brasas) · dots + leader lines
   · info cards na faixa central · portal escuro (dark-to-dark)
   ============================================================ */

:root {
  /* superfícies */
  --surface-base: oklch(0.15 0.006 65);
  --surface-1: oklch(0.19 0.008 65);
  --surface-2: oklch(0.23 0.010 66);
  --surface-inset: oklch(0.12 0.006 62);
  /* texto */
  --text-primary: oklch(0.94 0.012 78);
  --text-secondary: oklch(0.84 0.012 76);
  --text-muted: oklch(0.66 0.012 72);
  --text-on-accent: oklch(0.17 0.010 55);
  /* acento âmbar — fonte única #F37E35 = oklch(0.714 0.166 49).
     Toda a rampa abaixo é esse mesmo tom em outras luminosidades; nada de
     âmbar deve aparecer hardcoded fora daqui. O tom novo é ~30% mais croma
     que o anterior, então os alfas de glow desceram na mesma medida pra não
     estourar sobre o #0d0b09. */
  --accent: #F37E35;
  --accent-hot: oklch(0.790 0.125 49);   /* texto quente sobre botão */
  --accent-flare: oklch(0.895 0.075 58); /* estouro do fio de solda */
  --accent-hover: oklch(0.755 0.160 49);
  --accent-mid: oklch(0.630 0.142 49);
  --accent-muted: oklch(0.610 0.126 49);
  --accent-line: oklch(0.560 0.116 49);  /* fios, bordas, grade */
  --accent-dim: oklch(0.450 0.065 49);   /* trecho apagado do contorno */
  --accent-wash: oklch(0.350 0.058 49);
  --accent-glow: oklch(0.714 0.166 49 / 0.30);
  /* bordas */
  --border-subtle: oklch(0.28 0.008 66);
  --border-default: oklch(0.34 0.010 66);
  --border-accent: var(--accent-line);
  --focus-ring: oklch(0.790 0.165 49);
  --success: oklch(0.72 0.105 150);
  /* raios */
  --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  /* canto reto dos botões Forge Line + fundo frio de onde a solda parte */
  --radius-forge: 4px;
  --forge-bg: oklch(0.14 0.006 63);
  /* sombras/glow */
  --shadow-lg: 0 16px 48px -12px oklch(0.06 0.02 50 / 0.6);
  --glow-amber: 0 0 0 1px var(--accent-muted), 0 10px 36px -10px var(--accent-glow);
  /* fontes */
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* motion */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-card: cubic-bezier(.25, 1, .5, 1);
  --dur-micro: 0.2s; --dur-panel: 0.45s; --dur-enter: 0.75s;
  /* v3: faixa central onde os info cards assentam */
  --ph-card-y: 54%;

  /* ---- lado CLARO (a seção Projetos, a única light do site) ----
     Nada de #fff puro no fundo: papel quente da mesma família do âmbar.
     --accent-deep é o mesmo tom do acento rebaixado só o suficiente pra
     ficar legível sobre o papel. */
  --light-paper: #FFFFFF;
  --light-1: #FAF7F3;
  --light-ink: #0d0b09;
  --light-ink-2: oklch(0.38 0.010 62);
  --light-ink-3: oklch(0.52 0.010 62);
  --light-rule: oklch(0.86 0.010 68);
  --accent-deep: oklch(0.500 0.135 49);

  /* altura do trilho de scrub (240 frames) */
  --rail: 600vh;
}

/* SEM MOLDURA: nada de frame/borda/inset em volta do viewport.
   O hero encosta nas 4 bordas da tela; a navbar é o único elemento
   fixo no topo. Não reintroduzir padding no body nem barras fixas. */

/* ---------- reset/base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent-wash); color: var(--text-primary); }
:where(a, button, input, textarea):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* barra de rolagem discreta */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--surface-inset); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 999px; border: 2px solid var(--surface-inset); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-muted); }

/* ---------- ambiente (glow + grade) ---------- */
.ambient { position: fixed; inset: 0; pointer-events: none; }
.ambient-glow {
  z-index: -2;
  background: radial-gradient(70% 110% at 50% 0%, var(--accent-glow), transparent 70%);
  filter: blur(30px);
  opacity: .65;
}
.ambient-grid {
  z-index: -1;
  background-image:
    linear-gradient(oklch(from var(--accent-line) l c h / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, oklch(from var(--accent-line) l c h / 0.07) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(95% 65% at 50% 12%, #000 40%, transparent 85%);
  mask-image: radial-gradient(95% 65% at 50% 12%, #000 40%, transparent 85%);
}

/* ---------- átomos da marca ---------- */
.sq {
  display: inline-block; width: 0.4em; height: 0.4em;
  background: var(--accent); flex: none;
}
/* ---------- logo oficial (bitmap com alfa) + cursor piscante ----------
   O arquivo é recortado com 8,07% de folga acima e abaixo do glifo
   (glifo = 83,87% da altura). `--logo-h` é a altura do ARQUIVO; o ponto
   usa essa folga pra assentar exatamente na base das letras. */
.brand {
  display: inline-flex; align-items: flex-end; gap: 0.28em;
  color: var(--text-primary);
  --logo-h: 1.28rem;
}
.brand-logo {
  height: var(--logo-h); width: auto; display: block;
  /* o bitmap é largo (9:1): sem isto o flex do header o esmaga na horizontal */
  flex: none;
  /* o bitmap é fosco: o glow âmbar da casa vem daqui */
  filter: drop-shadow(0 0 14px oklch(from var(--accent) l c h / 0.24));
}
.brand-dot {
  width: calc(var(--logo-h) * 0.145);
  height: calc(var(--logo-h) * 0.145);
  margin-bottom: calc(var(--logo-h) * 0.081);   /* = folga sob o glifo */
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 1px var(--accent-glow);
  flex: none;
  animation: brand-blink 1.5s ease-in-out infinite;
}
@keyframes brand-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.16; transform: scale(0.88); }
}
/* no header estreito a marca cede altura antes de brigar com o CTA */
@media (max-width: 480px) { .brand-sm { --logo-h: 1.06rem; } }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem clamp(1.1rem, 5vw, 1.75rem);
  background: oklch(0.12 0.006 62 / 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.header-actions { display: flex; align-items: center; gap: 0.6rem; }

.site-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  display: none; flex-direction: column; align-items: stretch;
  padding: 0.5rem clamp(1.1rem, 5vw, 1.75rem) 1.1rem;
  background: oklch(0.12 0.006 62 / 0.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header.nav-open .site-nav { display: flex; }
/* ---------- menu · DOUBLE SLASH ----------
   O item é um comando de terminal em caixa baixa e as duas barras são o
   cursor da linha: paradas e apagadas em repouso, acendem em âmbar no
   hover e deslizam pra fora — a segunda um tiquinho depois da primeira.
   Mesma linguagem das tags "// serviços" dos cards do corredor.
   Label e barras são spans irmãos com a mesma métrica: `align-items:
   center` já casa as baselines e a linha continua centrada na altura de
   toque de 46px do menu mobile. */
.nav-link {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 0.1em;
  min-height: 46px; padding: 0.65rem 0.15rem;
  font-family: var(--font-mono); font-size: 0.95rem; font-weight: 400;
  text-transform: lowercase; letter-spacing: 0.01em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  transition: color var(--dur-micro) var(--ease-spring);
}
.nav-link:last-child { border-bottom: 0; }
/* highlight "selecionado": é a MESMA peça do botão Orçamento (Forge
   Line) no hover, não um tom próprio — mesmo fundo quente
   (oklch(0.19 0.020 55)), mesmo anel de 1px em --accent-line/0.85,
   mesmo halo âmbar e o mesmo canto reto de 4px (--radius-forge).
   O que fica de fora é só a solda animada, que continua exclusiva do
   botão. (A pill anterior usava --accent a 10% e canto de 10px: era o
   laranja destoante que o cliente apontou — não reintroduzir.)
   z-index -1 + isolation pra ficar ATRÁS do texto sem furar o header. */
.nav-link::before {
  content: ""; position: absolute; inset: 0.25rem -0.5rem; z-index: -1;
  border-radius: var(--radius-forge);
  background: oklch(0.19 0.020 55);
  box-shadow: 0 0 0 1px oklch(from var(--accent-line) l c h / 0.85) inset,
              0 10px 34px -14px var(--accent-glow);
  opacity: 0; transform: scale(0.94);
  transition: opacity 0.26s var(--ease-card), transform 0.34s var(--ease-spring);
  pointer-events: none;
}
.nav-link:hover::before,
.nav-link:focus-visible::before,
.nav-link:active::before { opacity: 1; transform: scale(1); }
.nav-slash { display: inline-flex; }
.nav-slash i {
  font-style: normal; color: var(--accent-dim);
  transition: color var(--dur-micro) var(--ease-card),
              text-shadow var(--dur-micro) var(--ease-card),
              transform 0.34s var(--ease-spring);
}
.nav-slash i:nth-child(2) { transition-delay: 0.05s; }
.footer-cta { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--border-accent); }
.footer-cta:hover { color: var(--text-primary); }
/* mesmo texto do botão no hover: #fff puro, com as barras no âmbar da solda */
.nav-link:hover, .nav-link:focus-visible, .nav-link:active { color: #fff; }
.nav-link:hover .nav-slash i,
.nav-link:focus-visible .nav-slash i,
.nav-link:active .nav-slash i {
  color: var(--accent);
  text-shadow: 0 0 12px oklch(from var(--accent) l c h / 0.55);
}
.nav-link:hover .nav-slash i:nth-child(1),
.nav-link:focus-visible .nav-slash i:nth-child(1),
.nav-link:active .nav-slash i:nth-child(1) { transform: translateX(2px); }
.nav-link:hover .nav-slash i:nth-child(2),
.nav-link:focus-visible .nav-slash i:nth-child(2),
.nav-link:active .nav-slash i:nth-child(2) { transform: translateX(5px); }
.nav-toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 42px; height: 42px; flex: none;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  transition: border-color var(--dur-micro) var(--ease-spring);
}
.nav-toggle:hover { border-color: var(--border-accent); }
.nav-toggle i {
  display: block; width: 17px; height: 2px;
  background: var(--text-primary); border-radius: 999px;
  transition: transform var(--dur-micro) var(--ease-spring), opacity var(--dur-micro) var(--ease-spring);
}
.site-header.nav-open .nav-toggle i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle i:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- botões · FORGE LINE ----------
   Solda: uma luz âmbar corre sozinha pelo perímetro (gradiente cônico girando
   sob uma máscara que só revela a faixa de 1,5px do contorno). No hover a volta
   se fecha inteira, acelera e o fundo esquenta. Canto reto, tracking largo. */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  padding: 0.85rem 1.6rem; min-height: 48px;
  border: 0; border-radius: var(--radius-forge);
  background: var(--forge-bg); color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border-default) inset;
  text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-micro) var(--ease-spring),
              transform var(--dur-micro) var(--ease-spring),
              box-shadow var(--dur-micro) var(--ease-spring),
              color var(--dur-micro) var(--ease-spring);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ang, 0deg),
    oklch(from var(--accent-dim) l c h / 0.5) 0deg,
    oklch(from var(--accent-dim) l c h / 0.5) 186deg,
    oklch(from var(--accent-mid) l c h / 0.85) 246deg,
    var(--accent-flare) 288deg,
    var(--accent-hot) 306deg,
    oklch(from var(--accent-mid) l c h / 0.85) 344deg,
    oklch(from var(--accent-dim) l c h / 0.5) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 5px oklch(from var(--accent) l c h / 0.6));
  animation: forge-run 3s linear infinite;
}
@keyframes forge-run { to { --ang: 360deg; } }

.btn:hover, .btn:focus-visible {
  background: oklch(0.19 0.020 55);
  box-shadow: 0 0 0 1px oklch(from var(--accent-line) l c h / 0.85) inset, 0 10px 34px -14px var(--accent-glow);
  transform: translateY(-2px);
}
/* no hover o contorno "completa": a faixa vira volta inteira e acelera */
.btn:hover::before, .btn:focus-visible::before {
  background: conic-gradient(from var(--ang, 0deg),
    oklch(from var(--accent-line) l c h / 0.5) 0deg,
    var(--accent-hot) 90deg,
    oklch(from var(--accent-mid) l c h / 0.8) 180deg,
    var(--accent-hot) 270deg,
    oklch(from var(--accent-line) l c h / 0.5) 360deg);
  animation-duration: 1.5s;
}
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.btn:active { transform: translateY(0) scale(0.972); }
.btn[disabled], .btn.is-disabled { pointer-events: none; opacity: 0.38; filter: saturate(0.45); }
.btn .arrow { display: inline-block; transition: transform var(--dur-micro) var(--ease-card); }
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(4px); }

/* hierarquia: primário fala em âmbar, secundário em cinza com o fio a meia-luz */
.btn-primary { width: 100%; color: var(--accent-hot); }
.btn-primary:hover, .btn-primary:focus-visible { color: #fff; }
@media (min-width: 560px) { .btn-primary { width: auto; } }

.btn-secondary { width: 100%; color: var(--text-muted); }
.btn-secondary::before { opacity: 0.45; }
.btn-secondary:hover, .btn-secondary:focus-visible { color: var(--text-primary); }
.btn-secondary:hover::before, .btn-secondary:focus-visible::before { opacity: 1; }
@media (min-width: 560px) { .btn-secondary { width: auto; } }

.btn-header {
  padding: 0.55rem 1.1rem; min-height: 40px;
  font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--accent-hot);
}
.btn-header:hover, .btn-header:focus-visible { color: #fff; }

.hero-cta-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.8rem;
  width: 100%;
}
@media (min-width: 560px) { .hero-cta-row { flex-direction: row; justify-content: center; align-items: center; width: auto; } }

.microcopy {
  font-family: var(--font-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); margin-top: 0.75rem;
}

/* ---------- hero v3 (scroll-scrub + camadas) ---------- */
/* trilho alto: o scroll dele vira índice de frame no canvas.
   Fundo preto puro: os frames finais do vídeo já são preto, então a
   saída do corredor é uma emenda escuro→escuro, sem costura visível. */
.hero-scroll { position: relative; height: var(--rail); background: oklch(0 0 0); }
.hero-scroll.no-frames { height: auto; }
.hero-scroll.no-frames .hero { position: relative; }

/* A primeira seção ocupa a viewport INTEIRA antes de qualquer scroll:
   nada da seção seguinte pode espiar. dvh acompanha a barra do
   navegador no mobile (svh como fallback pra browsers antigos). */
.hero {
  position: sticky; top: 0;
  height: 100svh;
  height: 100dvh;
  display: grid; place-items: center;
  overflow: hidden;
  background: oklch(0.055 0.004 62);
}
.hero-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  background: oklch(0.055 0.004 62);
}
/* véu de legibilidade leve sobre o vídeo (o corredor já é escuro) */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, oklch(0.12 0.006 62 / 0.5), transparent 22%),
    linear-gradient(0deg, oklch(0.12 0.006 62 / 0.45), transparent 26%);
}

/* ---------- intro idle (tela preta viva) ----------
   Opaca no topo da página; --intro-fade (1 → 0) vem do rAF no 1º scroll:
   brasas + névoa + conteúdo dissolvem pro frame 0 do vídeo (escuro→escuro). */
.intro {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  padding: clamp(5.5rem, 14vh, 8rem) clamp(1.1rem, 5vw, 1.75rem) clamp(3rem, 8vh, 5rem);
  background: oklch(0.10 0.006 62);
  opacity: var(--intro-fade, 1);
}
.intro.is-gone { visibility: hidden; }

/* névoa âmbar respirando devagar (2 massas, fases opostas) */
.intro-mist {
  position: absolute; pointer-events: none;
  width: 130vmax; height: 130vmax; border-radius: 50%;
  filter: blur(60px);
  will-change: transform, opacity;
}
.intro-mist-a {
  left: -40vmax; top: -55vmax;
  background: radial-gradient(closest-side, oklch(from var(--accent-line) l c h / 0.12), transparent 70%);
  animation: mist-breathe 11s ease-in-out infinite;
}
.intro-mist-b {
  right: -50vmax; bottom: -60vmax;
  background: radial-gradient(closest-side, oklch(from var(--accent-wash) l c h / 0.14), transparent 70%);
  animation: mist-breathe 14s ease-in-out infinite reverse;
}
@keyframes mist-breathe {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: .7; }
  50% { transform: scale(1.14) translate(3vmax, 2vmax); opacity: 1; }
}

/* campo de partículas (canvas): constelação âmbar sobre o marrom-café.
   Substitui as brasas em CSS — mesma temperatura, mais vida: as
   partículas derivam devagar, se ligam por proximidade e reagem ao
   ponteiro. Fundo transparente: a névoa continua respirando por trás. */
.intro-particles {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 3;
  max-width: 44rem; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
  text-align: center;
}
/* ---------- chip de disponibilidade ----------
   Vidro sobre o campo de partículas: o blur é o que garante a leitura do
   texto por cima da constelação. O ponto é status ao vivo — núcleo fixo e
   um anel de brasa que abre e some. */
.status-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.42rem 0.9rem 0.42rem 0.72rem;
  margin-bottom: -0.45rem;          /* encosta um pouco mais na headline */
  border-radius: var(--radius-pill);
  background: oklch(0.22 0.012 60 / 0.38);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 0 0 1px oklch(from var(--accent-line) l c h / 0.30) inset,
              0 6px 22px -12px oklch(0.02 0 0 / 0.9);
  font-family: var(--font-mono); font-size: clamp(0.56rem, 1.9vw, 0.63rem);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--text-secondary); white-space: nowrap;
}
.status-dot {
  position: relative; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px var(--accent-glow);
}
.status-dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: var(--accent);
  animation: status-pulse 2.4s var(--ease-card) infinite;
}
@keyframes status-pulse {
  0%        { transform: scale(1);   opacity: 0.5; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}

/* headline: exatamente 2 linhas, quebra controlada — o navegador
   nunca decide onde quebrar (cada linha é um bloco nowrap). */
.hero-h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 8.2vw, 3.4rem);
  line-height: 1.06; letter-spacing: -0.005em;
}
.hero-h1 .hl-line { display: block; white-space: nowrap; }
.hero-h1 em {
  font-style: italic; color: var(--accent);
  text-shadow: 0 0 32px var(--accent-glow);
}
/* "constrói": o acento âmbar da headline — só cor + glow contido.
   O itálico do display já dá a inflexão; nada de sublinhado. */
.hero-h1 .hl-accent {
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 26px oklch(from var(--accent) l c h / 0.38);
}
.hero-sub {
  font-size: 1.02rem; color: var(--text-secondary);
  text-wrap: balance; max-width: 30rem;
}
.hero-cta { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* convite pro corredor */
.scroll-hint {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--text-muted);
}
.scroll-hint-chevron {
  width: 9px; height: 9px;
  border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
  animation: hint-dip 2.2s var(--ease-spring) infinite;
}
@keyframes hint-dip {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .55; }
  50% { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* scanline (vive só na intro) */
.scan {
  position: absolute; left: 0; right: 0; height: 42%;
  top: -120%;
  background: linear-gradient(180deg, transparent, oklch(.7 .128 47 / .07) 50%, transparent);
  animation: scan 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scan {
  0% { top: -120%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 300%; opacity: 0; }
}

/* ============================================================
   HERO CLARO — oficial (aprovado a partir do preview hero-branco.html)
   A intro deixou de ser a "tela preta viva": virou papel branco. O
   escopo é travado em #intro de propósito — o corredor (scrub), as
   seções seguintes e o HEADER/NAV continuam exatamente como estavam.
   O acento segue sendo #F37E35 (var --accent): nenhum tom novo entrou.
   As regras acima (bloco .intro) ficam de pé como base; aqui só o que
   o branco exige é reescrito, com a especificidade do id.
   ============================================================ */
#intro {
  --hl-paper: #FFFFFF;
  --hl-paper-warm: #FBF7F2;
  --hl-ink: #100D0A;
  --hl-ink-2: oklch(0.40 0.014 62);
  --hl-ink-3: oklch(0.52 0.012 62);

  isolation: isolate;
  /* papel: branco liso. As lavagens âmbar (radial-gradients) foram
     removidas a pedido do cliente — nada de mancha laranja no fundo. */
  background: var(--hl-paper);
}

/* névoa âmbar: era a maior mancha de blur laranja da tela — fora.
   (As brasas do canvas continuam intactas.) */
#intro .intro-mist-a,
#intro .intro-mist-b { display: none; }

/* scanline: no branco virava um borrão laranja passeando — fora */
#intro .scan { display: none; }

/* chip de disponibilidade: vidro CLARO (papel translúcido + blur),
   fio de 1px NEUTRO (sem anel âmbar, sem sombra quente) e o ponto
   pulsante intacto */
#intro .status-chip {
  background: oklch(1 0 0 / 0.62);
  box-shadow: 0 0 0 1px oklch(0.90 0.003 62) inset;
  color: var(--hl-ink-2);
}
#intro .status-dot {
  background: var(--accent);
  box-shadow: none;              /* glow âmbar removido; o pulso fica */
}

/* headline: tinta quase-preta e "constrói" no #F37E35 de sempre —
   cor pura, sem halo (o text-shadow âmbar do dark é anulado aqui). */
#intro .hero-h1 { color: var(--hl-ink); text-shadow: none; }
#intro .hero-h1 em,
#intro .hero-h1 .hl-accent {
  color: var(--accent);
  text-shadow: none;
}

#intro .hero-sub { color: var(--hl-ink-2); }
#intro .microcopy { color: var(--hl-ink-3); }

/* FORGE LINE: os botões seguem escuros de propósito — é a peça de
   identidade da casa e no papel branco eles viram o ponto de mais
   contraste da tela. O contorno animado fica; as sombras/halos
   quentes por baixo saíram (o escuro já assenta sozinho no branco). */
#intro .btn {
  box-shadow: 0 0 0 1px var(--border-default) inset;
}
#intro .btn:hover,
#intro .btn:focus-visible {
  box-shadow: 0 0 0 1px oklch(from var(--accent-line) l c h / 0.85) inset;
}
/* halo âmbar em volta do fio da forja: fora no claro (o fio fica) */
#intro .btn::before { filter: none; }
/* "Ver projetos": único botão que inverte — papel branco por dentro,
   tipografia em tinta preta. O fio da forja (::before) fica exatamente
   como estava; o par com "Fazer orçamento" (escuro) vira contraste
   cheio/vazio em vez de dois blocos iguais. */
#intro .btn-secondary {
  background: var(--hl-paper);
  color: var(--hl-ink);
  box-shadow: 0 0 0 1px oklch(from var(--hl-ink) l c h / 0.14) inset;
}
#intro .btn-secondary::before { opacity: 0.6; }
/* hover: o branco só esquenta um fio e o contorno fecha (base .btn);
   a tinta continua preta — nada de escurecer o fundo aqui. */
#intro .btn-secondary:hover,
#intro .btn-secondary:focus-visible {
  background: var(--hl-paper-warm);
  color: var(--hl-ink);
  box-shadow: 0 0 0 1px oklch(from var(--accent) l c h / 0.42) inset;
}
#intro .btn-secondary:hover::before,
#intro .btn-secondary:focus-visible::before { opacity: 1; }

/* convite pro corredor: cinza escuro + chevron no âmbar rebaixado,
   que é o tom do acento que sobrevive no claro */
#intro .scroll-hint { color: var(--hl-ink-2); }
#intro .scroll-hint-chevron {
  border-right-color: var(--accent-deep);
  border-bottom-color: var(--accent-deep);
}

#intro ::selection { background: oklch(from var(--accent) l c h / 0.26); color: var(--hl-ink); }

/* ---- emenda hero → corredor ----
   O corredor continua escuro. Em vez de um corte branco→preto, o pé
   do hero já escurece: quando a intro dissolve (primeiros 5% do
   trilho) a base dela e o frame 0 do vídeo já estão no mesmo tom.
   z-index 2 = acima das partículas (1), abaixo do conteúdo (3). */
#intro::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 22vh; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    oklch(0.34 0.045 52 / 0.05) 42%,
    oklch(0.24 0.040 50 / 0.15) 72%,
    oklch(0.16 0.028 48 / 0.32) 90%,
    oklch(0.10 0.018 48 / 0.50) 100%);
}

/* cascata de entrada */
.cascade {
  opacity: 0;
  animation: rise var(--dur-enter) var(--ease-spring) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- fases: dot + leader line + info card ---------- */
.phases { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ph { position: absolute; inset: 0; visibility: hidden; }
.ph.is-live { visibility: visible; }

.ph-dot {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 2px var(--accent-glow);
  will-change: opacity;
}
.ph-dot::before {
  /* anel de pulso contínuo */
  content: ""; position: absolute; inset: -3px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  animation: dot-pulse 2s var(--ease-spring) infinite;
}
@keyframes dot-pulse {
  0% { transform: scale(.6); opacity: .9; }
  70% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

.ph-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ph-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  opacity: .85;
  filter: drop-shadow(0 0 6px oklch(from var(--accent) l c h / 0.34));
}
.ph-line-mask { fill: none; stroke: #fff; stroke-width: 4; }

/* card na faixa central escura do corredor */
.ph-card {
  position: absolute; left: 50%; top: var(--ph-card-y);
  transform: translate(-50%, -50%);
  width: min(19.5rem, 82vw);
}
/* scrim extra atrás do card pra legibilidade sobre o vídeo */
.ph-card::before {
  content: ""; position: absolute; inset: -3rem -3.5rem;
  background: radial-gradient(closest-side, oklch(0.10 0.006 62 / 0.62), transparent 78%);
  z-index: -1;
}
.ph-card-in {
  display: flex; flex-direction: column; gap: 0.45rem;
  text-align: center; align-items: center;
  background: oklch(0.12 0.006 62 / 0.66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.3rem 1.25rem;
  box-shadow: 0 0 0 1px oklch(from var(--accent-muted) l c h / 0.25), 0 18px 48px -18px oklch(0.05 0.02 50 / 0.8);
  will-change: opacity, transform;
  position: relative; overflow: hidden;
}
.ph-card-in::before {
  /* hairline âmbar que acende no topo */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-muted), transparent);
}
.ph-tag {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent);
}
.ph-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 4.6vw, 1.5rem); letter-spacing: -0.01em; line-height: 1.15;
  text-wrap: balance;
}
.ph-text { font-size: 0.9rem; color: var(--text-secondary); text-wrap: balance; }

/* ---------- atmosfera do portal (o preto do fim do corredor) ----------
   Três camadas finíssimas atrás da frase: aura âmbar respirando, brasas
   (canvas) e grain. A opacidade do conjunto é escrita pelo scrub com a
   mesma curva da tagline — 0 fora do portal, 0 na emenda. Tudo está
   ABAIXO da tagline (z-index 4 < 5): a frase nunca perde contraste.
   As animações ficam pausadas enquanto a camada está apagada. */
.portal-fx {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.portal-aura {
  position: absolute; inset: 0;
  background:
    radial-gradient(54% 38% at 50% 46%, oklch(from var(--accent) l c h / 0.13), transparent 76%),
    radial-gradient(86% 62% at 50% 52%, oklch(from var(--accent-wash) l c h / 0.11), transparent 80%);
  filter: blur(26px);
  transform-origin: 50% 46%;
  animation: portal-breathe 7.5s ease-in-out infinite;
  animation-play-state: paused;
}
.portal-embers { position: absolute; inset: 0; width: 100%; height: 100%; }
/* grain: ruído dessaturado em 4,5% — dá pele ao preto sem virar textura */
.portal-grain {
  position: absolute; inset: -12%;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: portal-grain 0.9s steps(4) infinite;
  animation-play-state: paused;
}
.portal-fx.is-on .portal-aura,
.portal-fx.is-on .portal-grain { animation-play-state: running; }
@keyframes portal-breathe {
  0%, 100% { opacity: 0.62; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
@keyframes portal-grain {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-3%, 2%, 0); }
  50%  { transform: translate3d(2%, -3%, 0); }
  75%  { transform: translate3d(-2%, -2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* tagline do portal (trecho escuro, depois do último card) */
.portal-tagline {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  z-index: 5; pointer-events: none;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.45rem, 5.4vw, 2.85rem);
  line-height: 1.14;
  color: var(--text-primary);
  text-shadow: 0 0 44px oklch(from var(--accent) l c h / 0.46);
  /* a frase é longa: quebra equilibrada em vez de nowrap (que estourava
     a viewport no mobile). Largura presa à tela, nunca ao texto. */
  width: min(38rem, 84vw);
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  will-change: opacity, transform;
  /* texto puro sobre o preto: fundo transparente, sem máscara, sem clip,
     sem caixa. (A oclusão pelo vão da porta foi testada e rejeitada — a
     borda da máscara aparecia. Não reintroduzir.) */
  background: none;
}

/* ---------- fallback reduced-motion (cards estáticos) ---------- */
.ph-fallback { display: none; }

/* ============================================================
   DIVISA + SEÇÃO CLARA (a única light do site, de propósito)

   A faixa marquee É a divisa. Acima dela o fundo é o MESMO preto que
   sai do portal (#0d0b09 → oklch(0 0 0) do trilho), então a emenda
   escuro→escuro do fim do corredor continua invisível; abaixo dela o
   claro começa numa borda deliberada, marcada por um fio âmbar e um
   halo curto que morre em 90px — o papel nunca bate de cara.
   Na saída, o fio âmbar se repete e o ticker (escuro) fecha a seção:
   mesma gramática nas duas pontas.
   ============================================================ */
.seam { position: relative; background: oklch(0 0 0); }
.seam::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.75;
}
/* a faixa que fecha a seção clara usa o fio âmbar em CIMA: a borda
   fica sempre virada pro lado do papel. */
.seam-flip::after { top: 0; bottom: auto; }
.mq { overflow: hidden; padding: 0.95rem 0; }
/* loop infinito sem emenda: a sequência é DUPLICADA e o trilho anda
   -50%; quando a segunda cópia ocupa o lugar da primeira a animação
   reinicia no mesmo pixel. ~43 px/s — elegante, não frenético. */
.mq-track { display: flex; width: max-content; animation: mq-run 46s linear infinite; will-change: transform; }
.mq-seq { display: flex; align-items: center; gap: 1.9rem; padding-right: 1.9rem; flex: none; }
.mq-i {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--text-secondary); white-space: nowrap;
}
.mq-d { font-style: normal; color: var(--accent); font-size: 0.6rem; text-shadow: 0 0 10px var(--accent-glow); }
@keyframes mq-run { to { transform: translateX(-50%); } }

.light-section {
  position: relative;
  background: var(--light-1); color: var(--light-ink);
  padding: clamp(3rem, 8vh, 5rem) clamp(1.1rem, 5vw, 2rem) clamp(3.5rem, 9vh, 5.5rem);
}
.light-section::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px;
  background: linear-gradient(180deg, oklch(from var(--accent) l c h / 0.13), transparent 78%);
  pointer-events: none;
}
/* (a borda de baixo não precisa de fio próprio: a faixa .seam-flip que
   fecha a seção já traz o dela, virado pro lado do papel.) */
.light-in { position: relative; max-width: 72rem; margin-inline: auto; }

/* cabeçalho da seção */
.sec-head { text-align: center; max-width: 46rem; margin-inline: auto; }
.sec-kicker {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.24em; color: var(--accent-deep);
}
.sec-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 6.4vw, 3.4rem); line-height: 1.04;
  letter-spacing: -0.025em; margin-top: 0.8rem; text-wrap: balance;
}
.sec-title em { font-style: normal; display: block; color: var(--accent-deep); }
.sec-sub { margin-top: 1rem; color: var(--light-ink-2); font-size: 1rem; text-wrap: balance; }
.sec-cta { margin-top: 1.7rem; display: flex; justify-content: center; }

/* ---------- botões GHOST (só borda e conteúdo têm cor) ----------
   Nada de fundo preenchido em estado nenhum — nem no hover. O que
   acende é o contorno e o texto, que saem do escuro pro âmbar. */
.btn-ghost {
  /* a tinta é token: no papel é o preto da casa, no escuro é o texto
     claro — o botão é o mesmo nos dois lados do site. */
  --ghost-ink: var(--light-ink);
  --ghost-hot: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  padding: 0.85rem 1.6rem; min-height: 48px;
  border: 1px solid oklch(from var(--ghost-ink) l c h / 0.30);
  border-radius: var(--radius-forge);
  background: transparent; color: var(--ghost-ink);
  white-space: nowrap;
  transition: border-color 0.28s var(--ease-card), color 0.28s var(--ease-card),
              box-shadow 0.28s var(--ease-card), transform var(--dur-micro) var(--ease-spring);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: transparent;
  border-color: var(--accent);
  color: var(--ghost-hot);
  box-shadow: 0 0 0 1px oklch(from var(--accent) l c h / 0.35),
              0 10px 30px -18px oklch(from var(--accent) l c h / 0.55);
  transform: translateY(-2px);
}
.btn-ghost:active { transform: translateY(0) scale(0.985); background: transparent; }
.btn-ghost .arrow { display: inline-block; color: var(--ghost-hot); transition: transform var(--dur-micro) var(--ease-card); }
.btn-ghost:hover .arrow, .btn-ghost:focus-visible .arrow { transform: translateX(4px); }
.btn-ghost-sm {
  font-size: 0.68rem; letter-spacing: 0.14em;
  padding: 0.7rem 1.05rem; min-height: 44px;
}

/* ---------- os 6 cards (estilo A · minimal editorial) ----------
   Sem caixa e sem sombra: o card é um bloco de texto respirando dentro
   de um fio de 1px, canto reto. No hover o fio vira âmbar e o fundo
   levanta pro papel branco. */
.lg-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: clamp(2.2rem, 6vh, 3.4rem); }
.lg-card {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3.4vw, 2rem);
  background: transparent;
  border: 1px solid var(--light-rule); border-radius: 0;
  transition: border-color 0.3s var(--ease-card), background 0.3s var(--ease-card);
}
.lg-card:hover { border-color: oklch(from var(--accent) l c h / 0.55); background: var(--light-paper); }
.lg-tag {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-deep);
}
.lg-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.015em;
  margin-top: 0.7rem; text-wrap: balance;
}
.lg-desc { margin-top: 0.65rem; color: var(--light-ink-2); font-size: 0.92rem; }
.lg-list { list-style: none; margin-top: 1.05rem; display: flex; flex-direction: column; gap: 0.45rem; }
.lg-list li {
  position: relative; padding-left: 1.05rem;
  font-family: var(--font-mono); font-size: 0.73rem; color: var(--light-ink-3);
}
.lg-list li::before { content: "›"; position: absolute; left: 0; color: var(--accent); font-weight: 500; }
.lg-cta { margin-top: auto; padding-top: 1.4rem; }

/* ============================================================
   POR QUE NÓS (estudo C · split manifesto)

   Duas colunas no desktop: o manifesto fica preso na tela (sticky)
   enquanto os seis diferenciais rolam ao lado. No hover a linha ganha
   um fio âmbar na lateral, o número acende e o fundo esquenta de leve —
   mesma gramática discreta do resto do escuro. No mobile vira uma
   coluna só, manifesto em cima.
   ============================================================ */
.why-split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vh, 3rem); }
.why-manifesto { align-self: start; }
.eyebrow, .why-kicker {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.24em; color: var(--accent);
}
.why-manifesto .section-title { margin-top: 0.7rem; text-align: left; }
.why-manifesto .section-title em { font-style: normal; display: block; color: var(--accent); }
.why-lede { color: var(--text-muted); margin-top: 0.9rem; font-size: 0.96rem; max-width: 44ch; }
.why-rule { height: 1px; background: linear-gradient(90deg, var(--accent), transparent); margin-top: 1.4rem; }

.why-items { display: flex; flex-direction: column; }
.why-item {
  position: relative;
  padding: 1.25rem 1rem 1.35rem;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.32s var(--ease-card);
}
.why-item:first-child { border-top: 1px solid var(--border-subtle); }
.why-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.42s var(--ease-spring);
}
.why-item:hover { background: oklch(from var(--accent) l c h / 0.045); }
.why-item:hover::before { transform: scaleY(1); }
.why-n {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.14em; color: var(--text-muted);
  transition: color 0.3s var(--ease-card);
}
.why-item:hover .why-n { color: var(--accent); }
.why-item-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.14rem; line-height: 1.2; letter-spacing: -0.012em; margin-top: 0.35rem;
}
.why-item-desc { color: var(--text-muted); font-size: 0.92rem; margin-top: 0.35rem; }
@media (min-width: 900px) {
  .why-split { grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 4vw, 3.5rem); }
  .why-manifesto { position: sticky; top: 6rem; }
}

/* ============================================================
   PROJETOS ENTREGUES (vitrine real, no escuro)

   Mesma gramática da seção clara: fio de 1px, canto reto, fundo
   transparente e o âmbar só no hover. A thumb é um screenshot real da
   home do projeto; em repouso ela fica um pouco recuada (saturação e
   brilho baixos) e ganha cor quando o card acende — o texto nunca
   disputa com a imagem. Grade pronta pra crescer: é só duplicar um
   .work-card.
   ============================================================ */
.section-wide {
  max-width: 72rem; margin-inline: auto;
  padding: clamp(3.2rem, 9vh, 5.5rem) clamp(1.1rem, 5vw, 1.75rem);
}
.section-wide .section-title, .section-wide .section-sub, .section-wide .ruler { max-width: 44rem; }
.section-wide > .ruler, .section-wide > .section-title, .section-wide > .section-sub { margin-inline: auto; }

/* ---------- vitrine: cards de projeto (seção CLARA) ----------
   A peça é a THUMB: screenshot grande em moldura de papel, cantos
   suaves. Em repouso a imagem fica um tiquinho recuada; no hover o
   card sobe, a borda vira âmbar e a foto ganha cor cheia. Mesma
   gramática do resto do claro — fio fino, zero bloco chapado. */
.work-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin-top: clamp(2.4rem, 6vh, 3.4rem); }
.work-card {
  display: flex; flex-direction: column;
  padding: 0.7rem;
  background: var(--light-paper);
  border: 1px solid var(--light-rule); border-radius: 20px;
  box-shadow: 0 1px 2px oklch(0.3 0.01 60 / 0.05), 0 16px 34px -28px oklch(0.28 0.03 55 / 0.5);
  transition: transform 0.46s var(--ease-spring), border-color 0.34s var(--ease-card),
              box-shadow 0.46s var(--ease-card);
}
.work-card:hover {
  transform: translateY(-6px);
  border-color: oklch(from var(--accent) l c h / 0.5);
  box-shadow: 0 2px 4px oklch(0.3 0.01 60 / 0.06), 0 30px 58px -34px oklch(from var(--accent) l c h / 0.45);
}
.work-shot { position: relative; border-radius: 14px; overflow: hidden; background: var(--light-1); }
.work-shot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px oklch(from var(--light-ink) l c h / 0.08) inset;
}
.work-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  filter: saturate(0.9) brightness(0.97);
  transition: transform 0.7s var(--ease-card), filter 0.5s var(--ease-card);
}
.work-card:hover .work-shot img { transform: scale(1.045); filter: saturate(1) brightness(1); }

.work-body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 0.9rem 0.9rem; }
.work-tag {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent-deep);
}
.work-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.02em;
  margin-top: 0.6rem; color: var(--light-ink);
}
.work-desc { margin-top: 0.65rem; color: var(--light-ink-2); font-size: 0.92rem; }
.work-foot { margin-top: auto; padding-top: 1.5rem; }
.work-foot .btn-ghost { --ghost-ink: var(--light-ink); --ghost-hot: var(--accent-deep); }
/* selo dos projetos sem link público */
.work-private {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--light-ink-3);
  padding: 0.62rem 0.95rem; min-height: 44px;
  border: 1px dashed oklch(from var(--light-ink) l c h / 0.28); border-radius: var(--radius-forge);
}
.work-lock { width: 13px; height: 13px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.work-note {
  margin-top: 2rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--light-ink-3);
}
.work-note-cta { color: var(--accent-deep); border-bottom: 1px solid oklch(from var(--accent) l c h / 0.5); }
.work-note-cta:hover { color: var(--light-ink); border-color: var(--light-ink); }
@media (min-width: 760px) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .work-grid { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } }

/* ============================================================
   PROCESSO — quatro passos com conector

   O fio liga um passo ao outro: vertical no mobile (ao lado dos
   números) e horizontal a partir de 860px (atravessando a linha de
   números). Nasce âmbar no passo e morre no cinza da grade, então a
   leitura ganha direção. No hover o número acende.
   ============================================================ */
.section-wide > .eyebrow, .section-wide > .section-title, .section-wide > .section-sub { text-align: center; }
.steps { list-style: none; display: grid; grid-template-columns: 1fr; margin-top: clamp(2.4rem, 6vh, 3.4rem); }
.step { position: relative; padding: 0 0 2rem 3.6rem; }
.step:last-child { padding-bottom: 0; }
.step-n {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--accent); background: var(--surface-inset);
  border: 1px solid var(--border-default); border-radius: var(--radius-forge);
  transition: border-color 0.3s var(--ease-card), box-shadow 0.3s var(--ease-card), color 0.3s var(--ease-card);
}
.step:hover .step-n {
  border-color: var(--accent); color: var(--accent-hot);
  box-shadow: 0 0 0 1px oklch(from var(--accent) l c h / 0.3), 0 8px 24px -14px var(--accent-glow);
}
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 1.2rem; top: 2.8rem; bottom: 0.6rem; width: 1px;
  background: linear-gradient(180deg, oklch(from var(--accent) l c h / 0.55), var(--border-subtle));
}
.step-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.12rem; line-height: 1.2; letter-spacing: -0.012em; padding-top: 0.35rem;
}
.step-desc { color: var(--text-muted); font-size: 0.92rem; margin-top: 0.45rem; max-width: 34ch; }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.6vw, 2rem); }
  .step { padding: 3.6rem 0 0; }
  .step:not(:last-child)::before {
    left: 2.9rem; right: calc(clamp(1.2rem, 2.6vw, 2rem) * -1); top: 1.2rem; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(90deg, oklch(from var(--accent) l c h / 0.55), var(--border-subtle));
  }
  .step-title { padding-top: 0; }
}

/* ---------- voltar ao topo ----------
   Outline discreto no canto: fundo transparente, fio na cor da grade e
   seta apagada. No hover o fio e a seta acendem no âmbar da casa — a
   mesma gramática dos botões ghost da seção clara. Nasce fora de tela e
   só entra depois que o corredor fica pra trás (classe .is-in). */
.to-top {
  position: fixed; right: clamp(0.9rem, 2.5vw, 1.6rem); bottom: clamp(0.9rem, 2.5vw, 1.6rem);
  z-index: 40;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border-default); border-radius: var(--radius-forge);
  background: oklch(0.12 0.006 62 / 0.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text-muted);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.32s var(--ease-card), transform 0.42s var(--ease-spring),
              visibility 0s linear 0.32s,
              border-color var(--dur-micro) var(--ease-card), color var(--dur-micro) var(--ease-card),
              box-shadow var(--dur-micro) var(--ease-card);
}
.to-top.is-in { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover, .to-top:focus-visible {
  color: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 1px oklch(from var(--accent) l c h / 0.35), 0 10px 30px -18px var(--accent-glow);
  transform: translateY(-2px);
}
.to-top:active { transform: translateY(0) scale(0.94); }

/* ---------- seções ---------- */
.section {
  max-width: 33rem; margin-inline: auto;
  padding: clamp(4rem, 10vh, 6.5rem) clamp(1.1rem, 5vw, 1.75rem) 0;
}
.section-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  line-height: 1.12; letter-spacing: -0.01em;
  text-wrap: balance;
  margin-top: 1.4rem;
}
.section-title em {
  font-style: italic; color: var(--accent);
  text-shadow: 0 0 26px var(--accent-glow);
}
.section-sub { color: var(--text-muted); font-size: 0.95rem; margin-top: 0.6rem; }

/* régua editorial */
.ruler {
  display: flex; align-items: center; gap: 0.85rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--text-muted);
}
.ruler::before, .ruler::after { content: ""; height: 1px; flex: 1; background: var(--border-subtle); }
/* (a numeração das seções saiu a pedido do cliente: o rótulo agora é só
   o nome, entre os dois fios. Não reintroduzir .ruler-num.) */

/* ---------- cards de serviço ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 2.2rem; }
.card {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-inset));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: transform var(--dur-micro) var(--ease-card), border-color var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-spring);
}
.card:hover { transform: translateY(-3px); border-color: var(--border-accent); box-shadow: var(--glow-amber); }
.card-tag {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-muted);
}
.card-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.28rem; letter-spacing: -0.01em; line-height: 1.2;
}
.card-desc { font-size: 0.95rem; color: var(--text-muted); }

/* ============================================================
   FAQ — seção clara + accordion exclusivo

   Mesma pele da seção #projetos (papel quente, tinta escura, âmbar só
   no detalhe). Cada pergunta é um <button> e a resposta um painel em
   grid: 0fr → 1fr anima a altura de verdade, sem max-height chutado e
   sem medir nada no JS. O ícone é um "+" que vira "−" girando.
   Exclusivo: abrir um fecha o outro (a troca fica no script.js).
   ============================================================ */
/* borda deliberada nas duas pontas: o claro nunca encosta no escuro sem aviso */
.light-edge::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}
.light-edge::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.45;
}

.faq-list {
  max-width: 46rem; margin: clamp(2.2rem, 6vh, 3.2rem) auto 0;
  border-top: 1px solid var(--light-rule);
}
.faq-item { border-bottom: 1px solid var(--light-rule); }
.faq-q { margin: 0; }
.faq-btn {
  width: 100%; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  min-height: 56px; padding: 1.15rem 0.35rem;
  background: none; border: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 2.6vw, 1.12rem); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--light-ink);
  transition: color 0.24s var(--ease-card);
}
.faq-btn:hover { color: var(--accent-deep); }
.faq-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ícone +/−: duas barras, a vertical some ao abrir e o conjunto gira */
.faq-ico {
  position: relative; flex: none; width: 20px; height: 20px;
  border: 1px solid oklch(from var(--light-ink) l c h / 0.22); border-radius: 50%;
  transition: transform 0.42s var(--ease-spring), border-color 0.3s var(--ease-card),
              background 0.3s var(--ease-card);
}
.faq-ico::before, .faq-ico::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--accent);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s var(--ease-card), background 0.3s var(--ease-card);
}
.faq-ico::before { width: 9px; height: 1.5px; }
.faq-ico::after { width: 1.5px; height: 9px; }
.faq-btn:hover .faq-ico { border-color: oklch(from var(--accent) l c h / 0.6); }
.faq-item.is-open .faq-ico { transform: rotate(180deg); border-color: var(--accent); background: oklch(from var(--accent) l c h / 0.10); }
.faq-item.is-open .faq-ico::after { opacity: 0; }

.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.44s var(--ease-card); }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-panel-in { overflow: hidden; }
.faq-answer {
  padding: 0 3rem 1.35rem 0.35rem;
  font-size: 0.95rem; color: var(--light-ink-2); max-width: 62ch;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.3s var(--ease-card), transform 0.36s var(--ease-card);
}
.faq-item.is-open .faq-answer { opacity: 1; transform: none; transition-delay: 0.08s; }

/* ============================================================
   QUIZ / BRIEFING — estudo C "dark elevada" (escolhido em quiz.html)

   O card flutua sobre uma atmosfera leve (glow âmbar + grain) e a barra
   de progresso É a borda de cima dele. Nada de bloco chapado em lugar
   nenhum: o que marca estado é fio, anel e a solda do botão.
   ============================================================ */
/* respiro generoso antes do FAQ: o formulário não encosta na próxima
   seção (estava grudado) e a virada dark→claro fica limpa. */
.quiz-section { position: relative; padding-bottom: clamp(4rem, 12vh, 7rem); overflow: hidden; }
.quiz-grain { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.quiz-grain { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.quiz-grain {
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.quiz-section > .ruler, .quiz-card { position: relative; z-index: 1; }

.quiz-card {
  margin-top: 2.2rem;
  background: linear-gradient(180deg, oklch(0.155 0.007 64), oklch(0.122 0.006 62));
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 0 clamp(1.15rem, 4vw, 1.7rem) clamp(1.3rem, 4vw, 1.7rem);
  /* sombra neutra e curta: nada de halo âmbar desfocado em volta */
  box-shadow: 0 24px 56px -40px oklch(0.05 0.02 50 / 0.85);
  position: relative; overflow: hidden;
}
.quiz-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: clamp(1.25rem, 4vw, 1.6rem) 0 1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.brand-quiz { --logo-h: 1.08rem; }
.quiz-progress-label {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-muted); white-space: nowrap;
}
.quiz-progress-label b { color: var(--accent); font-weight: 500; }
/* o progresso é a borda de cima do card */
.quiz-progress {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: 2px; margin: 0; overflow: hidden;
  background: oklch(1 0 0 / 0.06);
  border-radius: 20px 20px 0 0;
}
.quiz-progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-mid), var(--accent-flare));
  box-shadow: 0 0 14px -2px var(--accent-glow);
  transition: width var(--dur-panel) var(--ease-spring);
}

.q-screen { padding-top: 1.4rem; }
.q-screen.anim { opacity: 0; transform: translateY(10px); }
.q-screen.is-in { opacity: 1; transform: translateY(0); transition: opacity var(--dur-panel) var(--ease-spring), transform var(--dur-panel) var(--ease-spring); }
.q-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 5vw, 1.45rem); letter-spacing: 0.01em; line-height: 1.2;
  text-wrap: balance;
}
.q-sub { color: var(--text-muted); font-size: 0.92rem; margin-top: 0.5rem; }

.q-options { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.2rem; }
.q-opt {
  display: flex; align-items: flex-start; gap: 0.8rem;
  text-align: left; width: 100%;
  min-height: 48px;
  background: oklch(1 0 0 / 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.8rem 0.95rem;
  transition: transform var(--dur-micro) var(--ease-card), border-color var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-spring), background var(--dur-micro) var(--ease-spring);
}
.q-opt:hover { transform: translateY(-2px); border-color: var(--border-accent); }
.q-opt-check {
  flex: none; width: 1rem; height: 1rem; margin-top: 0.2rem;
  border: 1px solid var(--border-default); border-radius: 3px;
  transition: background var(--dur-micro) var(--ease-spring), border-color var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-spring);
}
.q-opt-radio { border-radius: 50%; }
.q-opt-body { display: flex; flex-direction: column; gap: 0.15rem; }
.q-opt-body b { font-weight: 600; font-size: 0.98rem; color: var(--text-primary); }
.q-opt-body small { font-size: 0.82rem; color: var(--text-muted); }
.q-opt.is-selected {
  border-color: var(--accent);
  background: oklch(from var(--accent) l c h / 0.08);
  box-shadow: 0 0 0 1px oklch(from var(--accent) l c h / 0.2);
}
.q-opt.is-selected .q-opt-check {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.q-fields { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; }
.q-label {
  display: flex; flex-direction: column; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-muted);
}
.q-opt-note { font-style: normal; color: var(--accent-muted); letter-spacing: 0.1em; }
.q-field {
  width: 100%;
  font-family: var(--font-sans); font-size: 1rem;
  color: var(--text-primary);
  background: oklch(1 0 0 / 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  min-height: 48px;
  transition: border-color var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-spring);
}
.q-field::placeholder { color: var(--text-muted); opacity: 0.7; }
.q-field:focus { outline: none; border-color: var(--border-accent); box-shadow: 0 0 0 1px var(--accent-muted), 0 0 18px -6px var(--accent-glow); }
.q-field.is-invalid { border-color: oklch(0.6 0.15 30); }
.q-textarea { margin-top: 1.2rem; resize: vertical; min-height: 7rem; line-height: 1.55; }

.q-error { font-size: 0.85rem; color: oklch(0.75 0.13 40); margin-top: 0.8rem; font-family: var(--font-sans); text-transform: none; letter-spacing: normal; }
.q-label .q-error { margin-top: 0.1rem; }

.q-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem;
  margin-top: 1.6rem;
}
.q-nav-center { justify-content: center; }
.q-back {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 0.6rem 0.2rem; min-height: 44px;
  transition: color var(--dur-micro) var(--ease-spring);
  white-space: nowrap;
}
.q-back:hover { color: var(--accent); }
.q-nav .btn { flex: 1; }
@media (min-width: 560px) { .q-nav .btn { flex: none; } }

.q-success { text-align: center; }
/* selo: anel fino com check — substitui o quadrado laranja reprovado */
.q-seal {
  width: 46px; height: 46px; margin: 0.2rem auto 1.1rem;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid oklch(from var(--accent) l c h / 0.5);
  background: oklch(from var(--accent) l c h / 0.07);
  box-shadow: 0 0 26px -10px var(--accent-glow);
}
.q-seal svg {
  width: 20px; height: 20px; fill: none; stroke: var(--accent);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.q-success .q-flag { margin-top: 1rem; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-enter) var(--ease-spring), transform var(--dur-enter) var(--ease-spring);
  transition-delay: var(--d, 0s);
}

/* ---------- rodapé ----------
   Cinco colunas no desktop (marca mais larga + quatro listas), tudo
   alinhado pelo topo e empilhando na ordem no mobile. Cada coluna tem
   um título mono e uma lista com um link por linha. */
.site-footer {
  max-width: 72rem; margin-inline: auto;
  padding: clamp(3rem, 8vh, 4.5rem) clamp(1.1rem, 5vw, 1.75rem) clamp(1.8rem, 5vh, 2.4rem);
  border-top: 1px solid var(--border-subtle);
}
.footer-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 5vh, 2.8rem) clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}
.footer-col-brand { max-width: 24rem; }
.site-footer .brand { --logo-h: 1.5rem; }
.footer-tagline {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.05rem; color: var(--text-secondary); margin-top: 0.85rem;
}
.footer-about { color: var(--text-muted); font-size: 0.88rem; margin-top: 0.7rem; max-width: 34ch; }
.footer-h {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--text-secondary);
  margin-bottom: 0.9rem;
}
.footer-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-list a {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  font-size: 0.88rem; color: var(--text-muted);
  transition: color var(--dur-micro) var(--ease-card);
}
.footer-list a:hover { color: var(--accent); }
.footer-at { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--text-muted); opacity: 0.72; }
.footer-list a:hover .footer-at { color: var(--accent); opacity: 1; }
.footer-cta { color: var(--accent); border-bottom: 1px solid var(--border-accent); }
.footer-cta:hover { color: var(--text-primary); border-color: var(--text-primary); }
.footer-cta .arrow { transition: transform var(--dur-micro) var(--ease-card); }
.footer-cta:hover .arrow { transform: translateX(3px); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem;
  align-items: center; justify-content: space-between;
  margin-top: clamp(2.2rem, 6vh, 3rem);
  border-top: 1px solid var(--border-subtle); padding-top: 1.2rem;
}
.footer-legal {
  font-family: var(--font-mono); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.26em; color: var(--text-muted);
}
.footer-top-link {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted);
  transition: color var(--dur-micro) var(--ease-card);
}
.footer-top-link:hover { color: var(--accent); }
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col-brand { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
  .footer-col-brand { grid-column: auto; }
}

/* ---------- desktop expansions ---------- */
@media (min-width: 720px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .lg-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  .section { max-width: 44rem; }
  .quiz-card { padding: 2rem 2.2rem 2.2rem; }
  .quiz-section .quiz-card { max-width: 33rem; margin-inline: auto; }
  :root { --ph-card-y: 52%; }
}

@media (min-width: 880px) {
  .nav-toggle { display: none; }
  /* o menu não fica mais boiando no meio: a logo segura a esquerda
     sozinha (margin-right: auto) e links + Orçamento viram UM grupo
     encostado na direita — os itens respiram entre si e um respiro
     maior separa o último link do botão. */
  .brand { margin-right: auto; }
  .site-nav {
    position: static; display: flex; flex-direction: row; align-items: center;
    gap: 0.15rem;
    margin-right: clamp(0.5rem, 1.6vw, 1.1rem);
    padding: 0; background: none; border-bottom: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav-link { min-height: 0; padding: 0.42rem 0.72rem; font-size: 0.82rem; border-bottom: 0; }
  .nav-link::before { inset: 0; }
  html { scroll-padding-top: 6.5rem; }
}
@media (min-width: 1040px) {
  .lg-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
}
@media (min-width: 1024px) {
  .hero-h1 { font-size: clamp(3rem, 5.2vw, 4.4rem); }
  .section { max-width: 48rem; }
}

/* ---------- reduced motion: frame estático + cards sem animação ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll { height: auto; }
  .hero { position: relative; }
  .intro { position: relative; background: transparent; opacity: 1; }
  .intro-mist, .intro-particles, .scan { display: none; }
  .phases, .portal-tagline, .portal-fx { display: none; }
  .ph-fallback { display: block; }
  .mq-track { animation: none; }
  .scroll-hint-chevron { animation: none; }
  /* a solda para de correr e o cursor para de piscar (sem 0.01ms em loop) */
  .btn::before { animation: none; }
  .brand-dot { animation: none; opacity: 1; }
  .status-dot::after { animation: none; opacity: 0; }
  .cascade { animation: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .q-screen.anim { opacity: 1; transform: none; }
  .faq-panel { transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ============================================================
   SELO OVERBUILD — a assinatura que vai no rodapé de todo projeto
   entregue pela casa. Aqui é o uso real, no nosso próprio rodapé.
   O bloco é idêntico ao snippet de assinatura.html (autossuficiente:
   não usa nenhum token do site) — mexeu aqui, mexe lá também.
   ============================================================ */
.ob-seal{
  --ob-h:16px;              /* altura do wordmark — todo o resto deriva daqui */
  --ob-ink:#F7F0DF;         /* o "OVER" */
  --ob-text:#9A928A;        /* o "Construído por" */
  --ob-accent:#F37E35;      /* o "BUILD" e o ponto */
  --ob-glow:drop-shadow(0 0 calc(var(--ob-h) * .55) rgba(243,126,53,.22));
  display:inline-flex;align-items:baseline;
  padding:5px 0;
  font:400 11px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.015em;color:var(--ob-text);text-decoration:none;
  -webkit-font-smoothing:antialiased;
  transition:color .22s cubic-bezier(.25,1,.5,1);
}
.ob-seal--light{--ob-ink:#0D0B09;--ob-text:#6F6862;--ob-glow:none}
.ob-seal__logo{
  height:var(--ob-h);width:auto;flex:none;
  /* o wordmark oficial tem 7,5% de folga sob o glifo: a margem negativa
     assenta o pé das letras exatamente na linha de base do texto */
  margin:0 0 calc(var(--ob-h) * -.075) .45em;
  filter:var(--ob-glow);
  transition:filter .22s cubic-bezier(.25,1,.5,1);
}
.ob-seal__w{fill:var(--ob-ink)}
.ob-seal__b,.ob-seal__dot{fill:var(--ob-accent)}
/* o ponto mora DENTRO do svg: trava na base das letras em qualquer navegador */
.ob-seal__dot{animation:ob-blink 1.5s ease-in-out infinite}
.ob-seal:hover{--ob-text:var(--ob-accent);--ob-glow:drop-shadow(0 0 calc(var(--ob-h) * .6) rgba(243,126,53,.5))}
.ob-seal--light:hover{--ob-glow:drop-shadow(0 0 calc(var(--ob-h) * .5) rgba(243,126,53,.45))}
.ob-seal:focus-visible{outline:2px solid var(--ob-accent);outline-offset:3px;border-radius:2px}
@keyframes ob-blink{0%,100%{opacity:1}50%{opacity:.16}}
@media (prefers-reduced-motion:reduce){.ob-seal__dot{animation:none}}
/* no rodapé da casa o selo fica no meio da faixa inferior */
.footer-bottom .ob-seal{margin-inline:auto}
@media (max-width:679px){.footer-bottom .ob-seal{margin-inline:0}}