/* ==========================================================================
   Armor Sandbox — landing
   As cores são as do próprio aplicativo (src/app/styles.css): o fundo quase
   preto azulado, o âmbar do fogo e o cinza-aço. O site não inventa paleta —
   ele é a moldura das capturas, e capturas de metal incandescente perdem força
   em cima de qualquer coisa clara.
   ========================================================================== */

:root {
  --bg:        #07090d;
  --bg-2:      #0b0e13;
  --panel:     #12161f;
  --panel-2:   #191f2b;
  --line:      #232b3a;
  --line-2:    #2f394b;
  --text:      #e9edf4;
  --dim:       #aeb7c6;
  --muted:     #7b8598;
  --amber:     #f59e0b;
  --amber-2:   #fb923c;
  --hot:       #ffd9a0;
  --sky:       #38bdf8;

  --f-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;

  --wrap: 1220px;
  --pad: clamp(1.15rem, 4vw, 2.75rem);
  --gap-sec: clamp(4.5rem, 11vh, 8.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* O cabeçalho é fixo: sem isso, uma âncora joga o título para debaixo dele. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--amber); color: #0b0e13; }

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

/* A poeira. Quase invisível de propósito: ela existe para tirar o aspecto de
   degradê digital limpo demais das áreas escuras, não para aparecer. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ tipografia */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { position: relative; padding-block: var(--gap-sec); }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .005em;
  margin: 0;
  text-wrap: balance;
}

/* O piso de 2,5rem não é estético: é a largura em que "ATIRE QUALQUER COISA"
   ainda cabe numa linha de celular. Meio ponto acima e a última palavra cai
   sozinha na linha seguinte, que é a pior coisa que acontece com um título. */
h1 { font-size: clamp(2.5rem, 9.2vw, 7.4rem); }
h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--amber) 0%, var(--hot) 45%, var(--amber-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h2 { font-size: clamp(2.25rem, 5.6vw, 4.25rem); }
h3 { font-size: clamp(1.5rem, 4vw, 1.9rem); }
h2 + p, h2 + .lede { margin-top: 1.5rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.1rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
}
.eyebrow.center { justify-content: center; }
.eyebrow .dot,
.chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(245, 158, 11, .6);
  animation: pulse 2.6s infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

p { margin: 0 0 1.15rem; color: var(--dim); }
.lede { font-size: clamp(1rem, 1.55vw, 1.16rem); max-width: 58ch; color: var(--dim); }
.lede.center { margin-inline: auto; text-align: center; }
.small { font-size: .9rem; color: var(--muted); }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

blockquote {
  margin: 1.8rem 0;
  padding: .2rem 0 .2rem 1.4rem;
  border-left: 2px solid var(--amber);
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.5;
  color: var(--text);
}

/* ---------------------------------------------------------------- botões */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.6rem;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 55%, var(--amber) 100%);
  color: #0b0e13;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 28px -12px rgba(245, 158, 11, .85);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* O brilho que atravessa o botão quando o ponteiro chega. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  transition: left .55s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 16px 38px -12px rgba(245,158,11,.95); }
.btn:hover::after { left: 120%; }
.btn:active { transform: translateY(0); }

.btn-sm { padding: .5rem 1rem; font-size: .92rem; }
.btn-lg { padding: 1.12rem 2.4rem; font-size: clamp(1.1rem, 2.4vw, 1.45rem); }
.btn-lg::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--amber), var(--amber-2));
  filter: blur(16px);
  opacity: .5;
  z-index: -1;
  animation: breathe 3.6s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }

/* ------------------------------------------------------------- cabeçalho */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--pad);
  transition: background .35s ease, backdrop-filter .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.site-head.scrolled {
  padding-block: .6rem;
  background: rgba(7, 9, 13, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
/* O símbolo é bem mais largo que alto (a seta sai do "S"). Altura fixa e
   largura livre: prender os dois lados achata o monograma. */
.brand img { height: 30px; width: auto; }
.brand-name {
  font-family: var(--f-display);
  font-size: 1.32rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dim);
}
.brand-name b { font-weight: 800; color: var(--text); }

.head-right { display: flex; align-items: center; gap: .85rem; }

.lang {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(18, 22, 31, .6);
}
.lang button {
  padding: .38rem .6rem;
  border: 0;
  background: transparent;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.lang button.on { background: var(--amber); color: #0b0e13; }
.lang button:not(.on):hover { color: var(--text); background: rgba(255, 255, 255, .05); }

/* ------------------------------------------------------------------ herói */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-media { position: absolute; inset: -4% 0 0; z-index: -3; will-change: transform; }
.hero-media .slide,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}
/* Três quadros reais se revezando enquanto não houver vídeo gravado. O corte de
   escala continua correndo escondido — é o que dá a sensação de câmera viva. */
.hero-media .slide { opacity: 0; animation: heroCycle 21s linear infinite; }
.s1 { background-image: url("img/hero-1.webp"); background-position: 58% center; animation-delay: 0s; }
.s2 { background-image: url("img/hero-2.webp"); background-position: 64% center; animation-delay: 7s; }
.s3 { background-image: url("img/hero-3.webp"); background-position: 62% center; animation-delay: 14s; }
@keyframes heroCycle {
  0%   { opacity: 0; transform: scale(1.05); }
  3%   { opacity: 1; }
  29%  { opacity: 1; }
  34%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.16); }
}
/* Quando o vídeo carrega, ele entra por cima e o revezamento some. */
.hero-media video { opacity: 0; transition: opacity 1.2s ease; z-index: 1; }

/* O arquivo de pé é mais largo que a tela de propósito: ele cobre toda a faixa
   por onde a ação passa, e quem escolhe o pedaço visível é uma animação de
   `transform`, em main.js. Por isso ele não usa `object-fit`: a borda esquerda
   fica no meio do cabeçalho e o deslocamento traz para o centro o ponto certo. */
.hero-media video.pan {
  inset: 0 auto 0 50%;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: fill;
  will-change: transform;
}
.hero.has-video .hero-media video { opacity: 1; }

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
  background-image:
    linear-gradient(rgba(126, 148, 184, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 148, 184, .09) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 90% at 60% 45%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 60% 45%, #000 20%, transparent 78%);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* O véu tem um trabalho só: deixar o texto legível sem apagar o quadro.
     Ele fecha quase por completo atrás do título e solta depressa para a
     direita, que é onde a cena tem de aparecer inteira. */
  /* O véu fecha sobre a coluna de texto e abre depressa logo depois dela.
     A pressa não é estética: medindo só o que é quente no vídeo (fogo e metal
     incandescente, não o casco cinza), a ação vive entre 30% e 56% da largura,
     com o grosso em 43%. O texto termina perto de 40%. Um véu que fosse
     clareando até a borda direita deixaria o impacto em meia-luz exatamente
     onde ele acontece. */
  background:
    linear-gradient(98deg, rgba(7,9,13,.97) 0%, rgba(7,9,13,.9) 22%, rgba(7,9,13,.62) 34%, rgba(7,9,13,.2) 48%, rgba(7,9,13,.06) 62%, rgba(7,9,13,.04) 100%),
    radial-gradient(130% 105% at 52% 54%, transparent 48%, rgba(7,9,13,.5) 100%),
    linear-gradient(to top, var(--bg) 0%, rgba(7,9,13,0) 30%);
}

.hero-body {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 7.5rem var(--pad) 6rem;
}
/* Com o véu mais aberto, o fim de uma linha pode cair em cima do clarão de uma
   explosão. A sombra não aparece sobre fundo escuro e salva a legibilidade nos
   poucos quadros em que o fundo estoura. */
.hero-body h1 { margin-bottom: 1.5rem; text-shadow: 0 2px 26px rgba(7, 9, 13, .9); }
.hero-body .lede { max-width: 46ch; text-shadow: 0 1px 3px rgba(7,9,13,.9), 0 2px 18px rgba(7, 9, 13, .98); }
.hero-body .eyebrow, .hero-body .cta-note { text-shadow: 0 1px 10px rgba(7, 9, 13, .9); }

.hero-cta { display: flex; flex-direction: column; gap: .85rem; align-items: flex-start; margin-top: 2.4rem; }
.cta-note {
  margin: 0;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  translate: -50% 0;
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, transparent, var(--line-2));
  overflow: hidden;
}
.scroll-cue span {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 16px;
  background: var(--amber);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0% { top: -16px; } 100% { top: 52px; } }

/* ----------------------------------------------------------------- números */

.stats {
  position: relative;
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}
.stats ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0 auto;
  padding: 0;
  max-width: var(--wrap);
  list-style: none;
}
.stats li {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  align-items: center;
  justify-content: center;
  padding: 1.7rem .6rem;
  text-align: center;
  border-left: 1px solid var(--line);
}
.stats li:first-child { border-left: 0; }
.stats b {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1;
  color: var(--text);
}
.stats span {
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.stats-note {
  max-width: 62ch;
  margin: 0 auto;
  padding: 1.4rem var(--pad) 1.9rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .92rem;
  color: var(--muted);
}

/* ----------------------------------------------------------------- trailer */

/* O pôster tem a proporção do player, para a página não pular quando o YouTube
   entra no clique. Deitado no computador; em pé no celular, no mesmo corte de
   860px das imagens do cabeçalho, e nunca mais alto que a tela. `wide-only` e
   `tall-only` são para quando só um dos dois vídeos existe (ver main.js). */
.trailer { text-align: center; padding-block: clamp(3.5rem, 9vh, 6.5rem); }
.trailer h2 { margin-bottom: clamp(1.6rem, 3.5vw, 2.5rem); }
.trailer-frame {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 34px 70px -40px rgba(0, 0, 0, .95);
}
.trailer-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.trailer-play picture, .trailer-play img { width: 100%; height: 100%; }
.trailer-play img { object-fit: cover; transition: transform .8s var(--ease), filter .8s var(--ease); }
.trailer-play:hover img { transform: scale(1.03); filter: brightness(1.08); }
.trailer-play:focus-visible { outline: 2px solid var(--amber); outline-offset: -3px; }
.trailer-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  color: #0b0e13;
  background: var(--amber);
  box-shadow: 0 0 0 10px rgba(245, 158, 11, .18), 0 18px 40px -12px rgba(245, 158, 11, .9);
  transition: transform .3s var(--ease);
}
.trailer-btn svg { margin-left: 4px; }
.trailer-play:hover .trailer-btn { transform: scale(1.08); }
.trailer.tall-only .trailer-frame { aspect-ratio: 9 / 16; width: min(100%, calc(80vh * 9 / 16)); }
@media (max-width: 860px) {
  .trailer-frame { aspect-ratio: 9 / 16; width: min(100%, calc(80vh * 9 / 16)); width: min(100%, calc(80svh * 9 / 16)); }
  .trailer.wide-only .trailer-frame { aspect-ratio: 16 / 9; width: 100%; }
}

/* ------------------------------------------------------- a ideia + a demo */

.two-col {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.physics { background:
  radial-gradient(90% 60% at 82% 12%, rgba(245, 158, 11, .07), transparent 62%), var(--bg); }

.demo-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  overflow: hidden;
  box-shadow: 0 34px 70px -40px rgba(0, 0, 0, .95);
}
.demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .7rem .95rem;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .25);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  color: var(--amber);
}
.readout { font-size: .68rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

.demo-canvas { position: relative; }
#demo { display: block; width: 100%; height: auto; aspect-ratio: 900 / 620; background: var(--bg-2); cursor: crosshair; touch-action: manipulation; }
.demo-hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  translate: -50% 0;
  margin: 0;
  padding: .4rem .85rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(7, 9, 13, .7);
  backdrop-filter: blur(6px);
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  pointer-events: none;
  transition: opacity .4s ease;
}
.demo-hint.hide { opacity: 0; }

/* O aviso de que isto é uma versão reduzida mora **dentro** do cartão, e não
   no parágrafo ao lado: quem chega pelo celular vê a animação antes de ler
   qualquer texto, e a comparação com o aplicativo tem de estar onde o olho
   já está. */
.demo-note {
  margin: 0;
  padding: .72rem .95rem;
  border-top: 1px solid var(--line);
  background: rgba(245, 158, 11, .05);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}
.demo-note b { color: var(--amber); font-weight: 600; }

.demo-controls { display: flex; gap: .5rem; padding: .8rem .95rem; border-top: 1px solid var(--line); }
.demo-controls button {
  flex: 1;
  padding: .55rem .5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: all .2s ease;
}
.demo-controls button:hover { color: var(--text); border-color: var(--line-2); }
.demo-controls button.on { background: rgba(245, 158, 11, .12); border-color: var(--amber); color: var(--amber); }

/* ----------------------------------------------------------------- editor */

/* Na coluna dupla invertida o cartão vai para a esquerda **só no desktop**.
   No celular a ordem do HTML manda, e ali o texto tem de vir antes: chegar
   numa animação sem saber o que se está vendo não explica nada. */
@media (min-width: 1001px) {
  /* A coluna larga vai para o cartão, não para o texto: ele carrega a paleta
     **e** a peça sendo desenhada, e com a proporção da seção anterior a peça
     ficava do tamanho de um selo. */
  .two-col.reverse { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
  .two-col.reverse .col-demo { order: 1; }
  .two-col.reverse .col-text { order: 2; }
}

.editor { background: radial-gradient(85% 60% at 18% 10%, rgba(56, 189, 248, .06), transparent 62%), var(--bg); }
.editor-body { display: grid; grid-template-columns: 158px minmax(0, 1fr); }
#editorCv { display: block; width: 100%; height: auto; aspect-ratio: 720 / 470; background: var(--bg-2); }

.palette {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: .5rem 0;
  list-style: none;
  border-right: 1px solid var(--line);
  background: rgba(0, 0, 0, .22);
  overflow: hidden;
}
.palette li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .24rem .6rem;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  transition: background .25s ease, color .25s ease;
}
/* A amostra é a cor de verdade do material, lida de src/sim/materials.ts. Um
   quadradinho inventado aqui seria a única coisa da página que não veio do
   simulador. */
.palette i {
  width: 12px; height: 12px;
  flex: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.palette li.on { background: rgba(245, 158, 11, .14); color: var(--text); }
.palette li.on i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 10px 1px currentColor; }

.editor-tools { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem .95rem; border-top: 1px solid var(--line); }
.editor-tools span {
  padding: .4rem .7rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------- veículos */

.vehicles { overflow: hidden; padding-bottom: 0; }
.veh-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("img/vehicles.webp") center right / cover no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(100deg, transparent 8%, #000 62%);
  mask-image: linear-gradient(100deg, transparent 8%, #000 62%);
}
.vehicles::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, var(--bg) 22%, rgba(7,9,13,.72) 55%, rgba(7,9,13,.55) 100%),
              linear-gradient(to bottom, var(--bg), transparent 22%, transparent 72%, var(--bg));
}
.veh-body { max-width: 900px; padding-bottom: clamp(3rem, 7vw, 5rem); }
.veh-body p { max-width: 54ch; }

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: .85rem;
  background: rgba(7, 9, 13, .6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: 2.6rem; width: max-content; animation: slide 42s linear infinite; }
.marquee-track span {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.marquee-track span::after { content: "·"; margin-left: 2.6rem; color: var(--amber); }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- download */

.download {
  text-align: center;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(245, 158, 11, .12), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  border-top: 1px solid var(--line);
}
.dl-body h2 { margin-bottom: 1.2rem; }

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.6rem;
}
.store {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 272px;
  padding: 1rem 1.3rem;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.store:hover {
  border-color: var(--amber);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(245, 158, 11, .8);
}
.store svg { flex: none; opacity: .92; }
.store-txt { display: flex; flex-direction: column; line-height: 1.15; }
.store-txt small {
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .2rem;
}
.store-txt b { font-family: var(--f-display); font-size: 1.4rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.soon {
  margin-left: auto;
  padding: .2rem .5rem;
  border: 1px solid rgba(245, 158, 11, .45);
  border-radius: 999px;
  background: rgba(245, 158, 11, .1);
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
}
.dl-foot { margin-top: 2rem; font-size: .88rem; color: var(--muted); }
.dl-foot a { color: var(--amber); text-underline-offset: 3px; }

/* ----------------------------------------------------------------- rodapé */

.site-foot { border-top: 1px solid var(--line); background: var(--bg); padding-block: 2.2rem; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.foot-brand { display: flex; align-items: center; gap: .55rem; font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.foot-legal { margin: 0; font-size: .8rem; color: var(--muted); }
.foot-legal p { margin: 0; }
/* A assinatura: menor e mais apagada que o resto do rodapé, com o coração na cor da marca batendo
   devagar — duas batidas e uma pausa longa, para chamar atenção só de quem já está olhando. */
.foot-made { margin-top: .3rem !important; font-size: .74rem; letter-spacing: .02em; opacity: .8; }
.heart { display: inline-block; margin: 0 .12em; color: var(--amber); animation: beat 2.6s ease-in-out infinite; }
@keyframes beat {
  0%, 40%, 100% { transform: scale(1); }
  8% { transform: scale(1.22); }
  16% { transform: scale(1); }
  24% { transform: scale(1.12); }
}
.foot-links { display: flex; gap: 1.4rem; font-size: .84rem; }
.foot-links a { color: var(--muted); text-decoration: none; transition: color .2s; }
.foot-links a:hover { color: var(--amber); }

/* ------------------------------------------------------------------ popup */

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1.25rem; }
.modal[hidden] { display: none; }
.modal-back { position: absolute; inset: 0; background: rgba(4, 6, 9, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade .3s ease; }
.modal-card {
  position: relative;
  width: min(100%, 430px);
  padding: 2.2rem 1.9rem 1.9rem;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--bg-2));
  box-shadow: 0 40px 90px -30px #000;
  text-align: center;
  animation: pop .42s var(--ease);
}
.modal-card img { margin: 0 auto .9rem; }
.modal-card h3 { margin-bottom: .8rem; }
.modal-card p { font-size: .95rem; margin-bottom: 1.6rem; }
.modal-x {
  position: absolute;
  top: .55rem; right: .75rem;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: transparent;
  font-size: 1.5rem; line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.modal-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); }

/* A lista de aviso: campo e botão na mesma linha, que empilham em tela estreita. Depois de
   inscrito, o formulário some e fica só a frase de confirmação. */
.notify { margin: 0; }
.notify-row { display: flex; gap: .5rem; }
.notify input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: .78rem .9rem;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: rgba(7, 9, 13, .6);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.notify input[type="email"]::placeholder { color: var(--muted); }
.notify input[type="email"]:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.notify .btn { flex: none; padding-inline: 1.2rem; }
.notify .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.modal-card .notify-fine { margin: .85rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--muted); }
.notify-fine a { color: var(--dim); text-underline-offset: 2px; }
.modal-card .notify-msg { margin: .9rem 0 0; font-size: .92rem; color: var(--dim); }
.modal-card .notify-msg:empty { display: none; }
.modal-card .notify-msg.ok { color: var(--text); }
.modal-card .notify-msg.err { color: #fca5a5; }
.notify.done .notify-row,
.notify.done .notify-fine { display: none; }
.notify.done .notify-msg { margin-top: 0; }
/* A isca de robô: fora da tela, sem sumir do formulário (robô ignora campo com display:none). */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 420px) {
  .notify-row { flex-direction: column; }
  .notify .btn { width: 100%; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* ------------------------------------------------------------- revelações */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(5px);
  transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ------------------------------------------------------------- responsivo */

@media (max-width: 1000px) {
  .two-col { grid-template-columns: 1fr; }
  .stats ul { grid-template-columns: repeat(3, 1fr); }
  .stats li:nth-child(4) { border-left: 0; }
  .stats li:nth-child(n+4) { border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 70px; }
  .brand-name { font-size: 1.1rem; }
  .brand img { height: 26px; width: auto; }
  .hero-body { padding-block: 8rem 5rem; }
  /* Em pé o véu é horizontal, e a faixa entre 45% e 72% é onde a ação aparece
     (o fogo vive em 61% da altura do quadro). Ela abre; o topo e o rodapé
     continuam fechados, que é onde ficam o cabeçalho e o botão. O texto que
     cruza essa faixa se defende com a própria sombra. */
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(7,9,13,.88) 0%, rgba(7,9,13,.5) 26%, rgba(7,9,13,.44) 58%, rgba(7,9,13,.66) 80%, var(--bg) 97%),
      radial-gradient(130% 60% at 50% 30%, transparent 28%, rgba(7,9,13,.5) 100%);
  }
  .s1 { background-image: url("img/hero-1-sm.webp"); }
  .s2 { background-image: url("img/hero-2-sm.webp"); }
  .s3 { background-image: url("img/hero-3-sm.webp"); }
  /* No celular o corte do tanque vira textura, não ilustração: em pé, o texto
     ocupa a largura toda e passa por cima do casco. Escurecer é o que mantém
     o parágrafo legível sem jogar a foto fora. */
  .veh-bg { background-image: url("img/vehicles-sm.webp"); opacity: .2; -webkit-mask-image: none; mask-image: none; }
  .vehicles::before { background: linear-gradient(180deg, var(--bg) 4%, rgba(7,9,13,.88) 40%, rgba(7,9,13,.92) 70%, var(--bg) 97%); }
  /* A paleta deita: em pé ela comeria metade da largura e a peça desenhada
     ficaria do tamanho de um selo. */
  .editor-body { grid-template-columns: 1fr; }
  .palette {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .7rem .8rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .palette li { padding: .22rem .45rem; border-radius: 3px; font-size: .58rem; }
  .foot-in { flex-direction: column; text-align: center; }
}

@media (max-width: 560px) {
  .head-right .btn-sm { display: none; }
  .stats ul { grid-template-columns: repeat(2, 1fr); }
  .stats li { border-left: 1px solid var(--line); }
  .stats li:nth-child(odd) { border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .store { min-width: 0; width: 100%; }
  .hero-cta { align-items: stretch; }
  .hero-cta .btn-lg { width: 100%; }
}

/* Quem pediu menos movimento recebe o mesmo site, parado. As capturas e o
   texto continuam lá — o que sai é o que se mexe sozinho. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .hero-media .slide { opacity: 0; }
  .hero-media .s1 { opacity: 1; }
  .scroll-cue { display: none; }
}