/* ---------------------------------------------------------------
   AudioBot — LP
   A hero reproduz o key visual 1672x941: todas as medidas dela derivam
   de --px (1 pixel do render), então a composição escala sem perder o
   registro com a imagem. O resto da página estende essa linguagem com
   os tokens do design system.
   --------------------------------------------------------------- */

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

:root {
  --black: #000000;
  --ink: #f3f2f3;          /* texto */
  --lime: #b6ec00;         /* lime da headline */
  --lime-bright: #e8fa04;  /* lime-amarelo: onda e tag, ganha luz no corpo pequeno */
  --ease-out: cubic-bezier(.22, .7, .2, 1);

  /* página — design system */
  --bg: #090c14;
  --card: #161f2f;
  --line: #2a3547;
  --txt: #b8c1d1;
  /* o #7b8598 do design system dá 4.45:1 sobre os cards — 1% de luz a mais passa em 4.62:1 */
  --txt-mute: #7e889a;

  /* seção do gravador: o tom casa com o fundo dos renders de estúdio */
  --light: #f1f1f1;
  --light-ink: #0b0e14;
  --light-txt: #4b5260;
  /* neon não sobrevive no claro; este é o lime que passa contraste sobre #f1f1f1 */
  --lime-deep: #5a7800;
}

html { background: var(--black); }

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =============== estrutura =============== */

.hero {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  background: var(--black);
}

.hero__stage { position: relative; }

/* o <picture> some da caixa: quem posiciona e escala é sempre o <img> */
picture { display: contents; }

.hero__render {
  display: block;
  width: 100%;
  height: auto;
}

.hero__brand img { display: block; height: 34px; width: auto; }

.eyebrow {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}

.eyebrow__wave { display: block; flex: none; }
.eyebrow__wave rect {
  fill: var(--lime-bright);
  transform-box: fill-box;
  transform-origin: center;
}

.headline { margin: 0; font-weight: 700; text-transform: uppercase; }
.headline__part { display: block; }
.headline__line { display: block; overflow: hidden; }
.headline__line > span { display: block; }
.headline__part--accent { color: var(--lime); }

/* etiqueta técnica: Light, do jeito que hardware premium assina o modelo */
.spec { margin: 0; font-weight: 300; }
.spec > span { display: block; }
.spec__tag { color: var(--lime-bright); }

/* =============== mobile (base) =============== */

/* empilha na mesma ordem de leitura do key visual: marca, copy, produto */
.hero__stage {
  display: flex;
  flex-direction: column;
}
.hero__brand  { order: 1; }
.hero__copy   { order: 2; }
.hero__render { order: 3; }

.hero__copy {
  padding: 0 24px 40px;
  max-width: 34rem;
}

.hero__brand {
  padding: 28px 24px 0;
  margin-bottom: 44px;
}

.eyebrow {
  gap: 7px;
  font-size: 1.125rem;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.eyebrow__wave { width: 22px; height: 24px; }

.headline {
  font-size: clamp(2rem, 9.5vw, 3.25rem);
  line-height: 1.19;
  letter-spacing: -.0115em;
  margin-bottom: 26px;
}

.spec {
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: .005em;
}

.hero__render {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 62% 50%;
}

/* =============== desktop: reprodução exata do key visual =============== */

@media (min-width: 900px) {
  .hero__stage {
    --px: calc(100cqw / 1672);
    aspect-ratio: 1672 / 941;
    display: block;
  }

  .hero__render {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }

  .hero__brand {
    position: absolute;
    left: calc(69 * var(--px));
    top: calc(77 * var(--px));
    height: calc(47 * var(--px));
    padding: 0;
    margin: 0;
  }
  .hero__brand img { height: 100%; }

  .hero__copy {
    position: absolute;
    inset: 0;
    padding: 0;
    max-width: none;
  }

  .eyebrow {
    position: absolute;
    left: calc(74.4 * var(--px));
    top: calc(225.4 * var(--px));
    gap: calc(7 * var(--px));
    font-size: calc(25 * var(--px));
    line-height: 1;
    letter-spacing: calc(-.5 * var(--px));
    margin: 0;
  }
  .eyebrow__wave {
    width: calc(29 * var(--px));
    height: calc(32 * var(--px));
  }

  .headline {
    position: absolute;
    left: calc(72.4 * var(--px));
    top: calc(277.6 * var(--px));
    font-size: calc(43.6 * var(--px));
    line-height: calc(52 * var(--px));
    letter-spacing: calc(-.5 * var(--px));
  }

  .spec {
    position: absolute;
    left: calc(73.7 * var(--px));
    top: calc(520.5 * var(--px));
    font-size: calc(20.5 * var(--px));
    line-height: calc(25 * var(--px));
    letter-spacing: 0;
  }
}

/* =============== entrada =============== */

@keyframes plate-in { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes rise-in  { from { transform: translateY(110%); }        to { transform: none; } }
@keyframes fade-up  { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }

/* a onda do lockup respira: o produto está ouvindo */
@keyframes pulse-bar { 0%, 100% { transform: scaleY(.72); } 50% { transform: scaleY(1); } }

.hero__render { animation: plate-in 1100ms var(--ease-out) both; }
.hero__brand  { animation: fade-up 700ms 220ms var(--ease-out) both; }
.eyebrow      { animation: fade-up 700ms 400ms var(--ease-out) both; }
.spec         { animation: fade-up 800ms 1020ms var(--ease-out) both; }

.headline__line > span { animation: rise-in 760ms var(--ease-out) both; }
.headline__line:nth-child(1) > span { animation-delay: 500ms; }
.headline__line:nth-child(2) > span { animation-delay: 590ms; }
.headline__part--accent .headline__line:nth-child(1) > span { animation-delay: 680ms; }
.headline__part--accent .headline__line:nth-child(2) > span { animation-delay: 770ms; }

.eyebrow__wave rect { animation: pulse-bar 2.4s ease-in-out infinite; }
.eyebrow__wave rect:nth-child(1) { animation-delay: -1.90s; }
.eyebrow__wave rect:nth-child(2) { animation-delay: -1.45s; }
.eyebrow__wave rect:nth-child(3) { animation-delay: -1.05s; }
.eyebrow__wave rect:nth-child(4) { animation-delay: -.70s; }
.eyebrow__wave rect:nth-child(5) { animation-delay: -.35s; }
.eyebrow__wave rect:nth-child(6) { animation-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .hero__render, .hero__brand, .eyebrow, .spec,
  .headline__line > span, .eyebrow__wave rect {
    animation: none;
  }
}


/* ===============================================================
   PÁGINA
   Ritmo por elevação, não por alternância claro/escuro: preto na
   hero e no fecho, --bg no corpo, cards acima. A única quebra clara
   é a seção do gravador — o objeto é físico e vive na luz.
   =============================================================== */

.s { position: relative; padding: clamp(88px, 11vw, 152px) 0; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 48px);
}

/* --------------- tipografia da página --------------- */

.label {
  margin: 0 0 20px;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime-bright);
}
.label--dark { color: var(--lime-deep); }

.display {
  margin: 0;
  font-size: clamp(2.15rem, 4.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--ink);
}
.display--sm { font-size: clamp(1.9rem, 3.5vw, 2.7rem); }

.lime { color: var(--lime); }
.lime-dark { color: var(--lime-deep); }

.lead {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 300;
  line-height: 1.62;
  color: var(--txt);
}
.lead--accent { color: var(--ink); }
.lead--dark { color: var(--light-txt); max-width: 46ch; }

.head { margin-bottom: clamp(48px, 6vw, 76px); }
.head .lead { margin-top: 24px; }

.kicker {
  margin: clamp(44px, 5vw, 64px) 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 68ch;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--txt-mute);
}
.kicker strong { color: var(--ink); font-weight: 500; }

/* --------------- 2 · a tese --------------- */

/* passa o preto da hero para o fundo da página sem costura */
.s--tese { background: linear-gradient(180deg, var(--black) 0%, var(--bg) 100%); }
/* declaração no alto à esquerda, desdobramento embaixo à direita: o olho corre na diagonal */
.tese__body {
  margin: clamp(40px, 5vw, 60px) 0 0 auto;
  display: grid;
  gap: 24px;
  max-width: 54ch;
}

/* --------------- 3 · como funciona --------------- */

.s--como { background: var(--bg); }

.path {
  --path-gap: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--path-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.path__step { position: relative; }
/* a linha é o próprio caminho do áudio, e termina no último passo — não fica pendurada */
.path__step::after {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: calc(100% + var(--path-gap));
  height: 1px;
  background: var(--line);
}
.path__step:last-child::after { display: none; }
.path__n {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 18px;
  padding-right: 14px;
  background: var(--bg);
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--lime);
}
.path__t {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
}
.path__d {
  margin: 0;
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--txt);
}

/* --------------- 4 · as lentes --------------- */

.s--lentes { background: var(--bg); }

.lens {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  overflow: hidden;
}

.lens__tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.lens__tab {
  flex: 1;
  padding: 18px 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--txt-mute);
  cursor: pointer;
  transition: color 150ms ease-out, background-color 150ms ease-out;
}
.lens__tab:last-child { border-right: 0; }
.lens__tab:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.lens__tab[aria-selected="true"] {
  color: var(--lime);
  background: rgba(182, 236, 0, .12);
}
.lens__tab:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}

/* os 4 painéis dividem a mesma célula: a caixa fica na altura do maior e
   trocar de lente não empurra a página. visibility (e não display) porque
   o painel escondido tem que sair do leitor de tela, mas ficar no layout. */
.lens__panels {
  display: grid;
  padding: clamp(28px, 4vw, 44px);
}
.lens__panel { grid-area: 1 / 1; }
.lens__panel[hidden] { display: block; visibility: hidden; }
.lens__q {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
}
.lens__where {
  margin: 0 0 28px;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: .8125rem;
  color: var(--txt-mute);
}
.lens__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.lens__list li {
  position: relative;
  padding-left: 22px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--txt);
}
.lens__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 2px;
  border-radius: 1px;
  background: var(--lime);
}

.lens__out {
  padding: 24px clamp(28px, 4vw, 44px) 28px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .25);
}
.lens__outlabel {
  margin: 0 0 8px;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-mute);
}
.lens__outtext {
  margin: 0;
  max-width: 72ch;
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--txt);
}
.kicker--own { border-top: 0; padding-top: 0; }

/* --------------- 5 · o gravador --------------- */

.s--device {
  background: var(--light);
  color: var(--light-ink);
}
.s--device .display { color: var(--light-ink); }

.device {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.device__copy .display { margin-bottom: 28px; }

.specs { margin: 44px 0 0; }
.specs__row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid rgba(11, 14, 20, .12);
}
.specs__row:last-child { border-bottom: 1px solid rgba(11, 14, 20, .12); }
.specs dt {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lime-deep);
  padding-top: .2em;
}
.specs dd {
  margin: 0;
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--light-txt);
}

.device__shot { margin: 0; }
.device__shot img { display: block; width: 100%; height: auto; }

/* --------------- 6 · privacidade --------------- */

.s--privacidade { background: var(--bg); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.card--own { border-color: rgba(182, 236, 0, .3); }
.card__t {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
}
.card--own .card__t { color: var(--lime); }
.card__d {
  margin: 0;
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--txt);
}

/* --------------- 7 · limites --------------- */

.s--limites { background: var(--bg); }

.nots {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.nots__i {
  display: grid;
  grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.nots__t {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
}
.nots__d {
  margin: 0;
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--txt-mute);
}

/* --------------- 8 · fecho --------------- */

.s--fim {
  background: var(--black);
  text-align: center;
}
.fim__wave {
  display: block;
  width: 29px;
  height: 32px;
  margin: 0 auto 32px;
}
.fim__wave rect { fill: var(--lime-bright); }
.fim .display { margin-inline: auto; }
.fim__cta { margin: clamp(40px, 5vw, 56px) 0 0; }

.btn {
  display: inline-block;
  height: 48px;
  padding: 0 28px;
  border-radius: 12px;
  background: var(--lime);
  color: #101010;
  font-size: 1rem;
  font-weight: 600;
  line-height: 48px;
  text-decoration: none;
  transition: filter 150ms ease-out;
}
.btn:hover { filter: brightness(105%); }
.btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.fim__foot {
  margin: clamp(72px, 9vw, 104px) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--txt-mute);
  font-size: .8125rem;
  font-weight: 300;
}
.fim__foot img { height: 22px; width: auto; opacity: .85; }

/* --------------- reveal --------------- */

.js .rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}
.js .rv.in { opacity: 1; transform: none; }
/* irmãos que entram juntos (passos, cards, limites) escalonam até o 6º */
.js .rv:nth-child(2) { transition-delay: 55ms; }
.js .rv:nth-child(3) { transition-delay: 110ms; }
.js .rv:nth-child(4) { transition-delay: 165ms; }
.js .rv:nth-child(5) { transition-delay: 220ms; }
.js .rv:nth-child(6) { transition-delay: 275ms; }

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

@media (max-width: 900px) {
  .path { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .path::before { display: none; }
  .path__n { padding-right: 0; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .device { grid-template-columns: 1fr; gap: 48px; }
  .device__shot { order: -1; max-width: 460px; }
}

@media (max-width: 640px) {
  .path { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
  .lens__tabs { flex-wrap: wrap; }
  .lens__tab { flex: 1 0 50%; border-bottom: 1px solid var(--line); }
  .lens__tab:nth-child(2n) { border-right: 0; }
  .nots__i { grid-template-columns: 1fr; gap: 8px; }
  .specs__row { grid-template-columns: 1fr; gap: 6px; }
  .fim__foot { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
}