/* ToneMorph — site de apresentação. Cores e medidas vêm de src/constants/theme.ts do app.
   Layout: no celular, uma coluna; no computador, as cenas da história em duas colunas (texto e desenho)
   e as seções de conteúdo numa grade de 1120 px. */

/* Inter variável: pesos 100–900 e tamanho óptico (os títulos grandes usam o desenho "display" sozinhos) */
@font-face {
  font-family: Inter; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url(../fonts/inter-var-latin.woff2) format('woff2-variations'), url(../fonts/inter-var-latin.woff2) format('woff2');
}

:root {
  --bg: #080A0F;
  --card: #0E131A;
  --surface: #11161F;
  --raised: #151C26;
  --line: #1F2836;
  --border: #243245;
  --divider: #19202A;
  --dot: #1E2530;
  --cable: #7E8B9B;
  --joint: #A0ACB9;
  --led: #30D158;
  --led-glow: #54E879;
  --accent: #FFCC00;
  --accent-bg: #2A2207;
  --accent-border: #5E4B0C;
  --on-accent: #191919;
  --text: #F0F4F8;
  --text-2: #8795A6;
  --text-3: #6F7D8D;
  --nam: #00E5FF;

  --r-control: 10px;
  --r-card: 14px;
  --r-sheet: 20px;
  --gutter: 16px;
  --wrap: 1120px;
  --vh: 100vh;
  --nav-h: 60px;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }
@media (min-width: 768px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 10px 10px, var(--dot) 1.1px, transparent 1.25px);
  background-size: 20px 20px;
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { font-weight: 600; line-height: 1.05; margin: 0; letter-spacing: 0; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 10vw, 6.4rem); line-height: 1; }
h2 { font-size: clamp(2.2rem, 6.4vw, 4.4rem); }
h3 { font-size: 1.15rem; line-height: 1.25; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.lead { color: var(--text-2); font-size: clamp(1.05rem, 2.2vw, 1.28rem); line-height: 1.5; max-width: 32em; text-wrap: pretty; }
.fine { color: var(--text-3); font-size: .85rem; }
.kicker { color: var(--accent); font-weight: 500; font-size: .88rem; margin-bottom: 14px; }
.eyebrow { color: var(--text-2); font-weight: 500; font-size: .95rem; margin-bottom: 16px; }
.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; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: var(--r-control); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 820px; }
.section { padding: clamp(80px, 12vw, 160px) 0; position: relative; }
.section h2 { margin-bottom: 18px; max-width: 16em; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px; border-radius: 999px; border: 0;
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: #FFD633; }
.btn-sm { min-height: 36px; padding: 0 16px; font-size: .88rem; }
.btn-lg { min-height: 58px; padding: 0 32px; font-size: 1.08rem; }
.btn-ghost { background: var(--raised); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent-border); }
.link { color: var(--accent); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }
.badge {
  display: inline-block; vertical-align: middle; font-size: .7rem; font-weight: 600; line-height: 1;
  color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border);
  padding: 5px 8px; border-radius: 999px;
}
.store-badge { display: inline-block; height: 52px; }
.store-badge img { height: 100%; width: auto; }

/* ---------- Cabeçalho ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  height: calc(var(--nav-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--gutter) 0;
  background: rgba(8, 10, 15, .72);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--divider); background: rgba(8, 10, 15, .8); }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.nav-logo { width: 28px; height: 28px; fill: var(--accent); }
.nav-links { display: none; gap: 26px; margin: 0 auto; }
.nav-links a { color: var(--text-2); text-decoration: none; font-weight: 500; font-size: .92rem; }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lang-btn {
  min-width: 44px; height: 38px; border-radius: var(--r-control); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-weight: 600; font-size: .82rem; cursor: pointer;
}
.lang-btn:hover { color: var(--text); }
/* Seletor de idioma (EN · PT · ES): o select nativo do sistema, no estilo do botão */
.lang-pick { display: inline-flex; }
.lang-select {
  appearance: none; -webkit-appearance: none; height: 38px; padding: 0 26px 0 12px;
  border-radius: var(--r-control); border: 1px solid var(--border); color: var(--text-2);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238795A6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 9px 6px;
  font: 600 .82rem Inter, -apple-system, sans-serif; cursor: pointer;
}
.lang-select:hover { color: var(--text); }
.lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 900px) { .nav-links { display: flex; } .nav-actions { margin-left: 0; } }

/* ---------- A borboleta: uma só, presa à tela ---------- */
.bf-layer { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.bf-holder { position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; }
.bf-holder .bfly { width: 100%; height: 100%; }
.no-js .bf-layer, .rm .bf-layer { display: none; }

/* ---------- O palco da história ---------- */
:root { --side: var(--gutter); }
@media (min-width: 1000px) { :root { --side: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); } }
.story { position: relative; }
.stage { position: relative; height: var(--vh); min-height: 600px; overflow: hidden; }
.vz {
  position: absolute; left: var(--gutter); right: var(--gutter);
  top: calc(var(--nav-h) + env(safe-area-inset-top) + 52px); height: calc(var(--vh) * .56 - var(--nav-h) - 52px);
  container-type: size;
}
.tz { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--vh) * .56 + 16px); bottom: calc(24px + env(safe-area-inset-bottom)); pointer-events: none; }
.ch { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; pointer-events: auto; }
.ch h2 { font-size: clamp(2rem, 7.6vw, 4.4rem); line-height: 1.02; max-width: 12em; }
.ch .lead { font-size: clamp(1rem, 2.2vw, 1.3rem); }
.ch-hero h1 { max-width: 9em; }
.ch-hero .lead { max-width: 26em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; }
.cta-note { color: var(--text-3); font-size: .88rem; font-weight: 500; }
.ch-hero .cta-row { flex-direction: column; gap: 10px; }
.scroll-hint { display: none !important; }
@media (min-width: 1000px) { .ch-hero .cta-row { flex-direction: row; justify-content: flex-start; gap: 18px; } .scroll-hint { display: flex !important; } }
.hl { color: var(--accent); }
.ch-text { color: var(--text-2); max-width: 30em; }
.raw-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.raw-lines li { color: var(--text-2); font-size: clamp(1.05rem, 2.4vw, 1.4rem); font-weight: 500; }
.raw-lines .strong { color: var(--text); font-weight: 600; margin-top: 6px; }
.chain-captions { position: relative; width: 100%; max-width: 30em; height: 76px; }
.chain-cap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: inherit; gap: 4px; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.ch[data-ch="chain"] { align-items: center; }
.chain-cap.is-on { opacity: 1; transform: none; }
.chain-cap b { color: var(--c); font-weight: 600; font-size: 1.1rem; }
.chain-cap span { color: var(--text-2); font-size: 1rem; line-height: 1.4; }
.scroll-hint {
  position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-3); font-size: .74rem; font-weight: 500; text-decoration: none;
}
.scroll-hint i { width: 2px; height: 24px; border-radius: 2px; background: linear-gradient(var(--cable), transparent); animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%, 100% { transform: translateY(-4px); opacity: .4; } 50% { transform: translateY(4px); opacity: 1; } }
@media (max-height: 720px) { .ch-hero .lead, .ch-hero .eyebrow, .raw-lines li:nth-child(3) { display: none; } .ch h2 { font-size: clamp(1.8rem, 7vw, 3rem); } }

/* Celular e janelas estreitas: o texto da história divide a tela com os desenhos, então o tamanho das letras
   segue a menor das duas medidas (largura ou altura) e a coluna não passa de 640 px */
@media (max-width: 999px) {
  .tz { left: max(var(--gutter), calc(50% - 320px)); right: max(var(--gutter), calc(50% - 320px)); }
  .ch-hero h1 { font-size: clamp(2.4rem, min(12.4vw, calc(var(--vh) * .056)), 4rem); }
  .ch h2 { font-size: clamp(1.8rem, min(8.6vw, calc(var(--vh) * .04)), 3.2rem); }
  .ch .lead, .raw-lines li { font-size: clamp(.98rem, min(2.2vw, calc(var(--vh) * .024)), 1.15rem); }
}
@media (min-width: 1000px) {
  .vz { left: 48%; right: var(--side); top: calc(var(--nav-h) + 64px); bottom: 48px; height: auto; }
  .tz { left: var(--side); width: min(42%, 560px); top: 0; bottom: 0; }
  .ch-hero h1 { font-size: clamp(3rem, 5.4vw, 5.2rem); }
  .ch { justify-content: center; align-items: flex-start; text-align: left; gap: 18px; }
  .ch[data-ch="chain"] { align-items: flex-start; }
  .ch h2 { font-size: clamp(3rem, 4.8vw, 4.8rem); }
}

/* Lugares da borboleta em cada capítulo (quadrados do tamanho do desenho inteiro; o JS lê a posição) */
.spot { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.spot-hero { width: min(100cqw / .40, 100cqh / .60); }
.spot-small { top: 0; width: min(25cqh / .56, 30cqw / .36); transform: translate(-50%, -23%); }
.spot-big { width: min(100cqw / .70, 96cqh / .55); }
.spot-scenes { top: 0; width: min(100cqw / .72, 70cqh / .55); transform: translate(-50%, -22%); }
@media (min-width: 1000px) {
  .spot-hero { width: min(52cqw / .40, 78cqh / .60); }
}

/* Os cabos embolados e o equipamento */
.tangle { position: absolute; left: 0; top: 32%; width: 100%; height: 66%; overflow: visible; }
.tangle path { fill: none; stroke: #2B3542; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.gears { position: absolute; inset: 0; }
.gear { position: absolute; left: 0; top: 0; color: #5B6876; transition: color .45s ease; will-change: transform; }
.gear .gear-art { width: 100%; height: auto; overflow: visible; }
.gear .g-led { fill: #2A3340; transition: fill .3s ease; }
.gear.is-lit { color: var(--c); }
.gear.is-lit .g-led { fill: var(--led); }

/* O sinal (osciloscópio) — só no computador */
/* --clear: faixa da zona visual coberta pela coluna de texto no desktop (o JS mede) */
.scope { position: absolute; left: var(--clear, 0px); right: 0; top: 26%; height: 12%; display: none; }
.scope svg { width: 100%; height: 100%; overflow: visible; }
.scope-mid { stroke: var(--divider); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.scope-wave { fill: none; stroke: #5B6876; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.scope-glow { fill: none; stroke: #5B6876; stroke-width: 9; opacity: .14; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.scope-tag { position: absolute; left: 0; top: -18px; font-size: .72rem; font-weight: 500; color: var(--text-3); }
@media (min-width: 1000px) { .scope { display: block; } }

/* O telefone da história */
.phone-wrap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: min(100cqw, 46cqh * 2.093); filter: drop-shadow(0 28px 50px rgba(0, 0, 0, .55)); }
.device { display: block; width: 100%; height: auto; }
.cb-block .cb-full { opacity: 0; transition: opacity .25s ease; }
.cb-block .cb-slot { transition: opacity .25s ease; }
.cb-block.is-on .cb-full { opacity: 1; }
.cb-block.is-on .cb-slot { opacity: 0; }

/* Cenas: os pedais ligados embaixo da borboleta e os botões A–D */
.stomps { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: flex-end; align-content: flex-end; }
@media (min-width: 1000px) { .stomps { top: 70%; bottom: auto; align-items: flex-start; align-content: flex-start; } }
.stomp {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 10px;
  background: var(--card); color: var(--text-3); font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  transition: background-color .25s ease, color .25s ease;
}
.stomp svg { width: 16px; height: 16px; fill: none; stroke: #4B5869; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease; }
.stomp::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; border-radius: 2px; background: transparent; transition: background-color .25s ease; }
.stomp.is-on { background: #161E29; color: var(--text); }
.stomp.is-on svg { stroke: var(--c); }
.stomp.is-on::after { background: var(--c); }
.pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(100%, 520px); margin-top: 4px; }
.pad {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  aspect-ratio: 1 / .78; border: 0; border-radius: 20px; background: #131922; cursor: pointer;
  transition: background-color .2s ease, transform .12s ease;
}
.pad:active { transform: scale(.96); }
.pad b { font-size: clamp(1.7rem, 5.6vw, 2.6rem); line-height: 1; font-weight: 700; color: #5E6B7C; }
.pad span { font-size: .78rem; font-weight: 600; color: var(--text-2); }
.pad.is-on { background: var(--sc); }
.pad.is-on b, .pad.is-on span { color: #0A0D12; }
.ch[data-ch="scenes"] .lead { display: none; }
@media (min-width: 1000px) { .ch[data-ch="scenes"] .lead { display: block; } }

/* Duas asas: série × paralelo */
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.seg-opt { padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: .88rem; color: var(--text-3); transition: background-color .25s ease, color .25s ease; }
.seg-opt.is-on { background: var(--accent-bg); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-border); }

/* Como ligar: os passos no capítulo (no celular, só o passo atual; no computador, a lista) */
.plug-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; justify-items: center; }
.plug-steps li { display: none; color: var(--text); font-weight: 600; font-size: clamp(1rem, 2.4vw, 1.25rem); line-height: 1.35; }
.plug-steps li.is-on { display: block; }
.plug-steps li span { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 8px; }
.plug-steps li b { font-weight: 600; }
.plug-steps li em { display: block; font-style: normal; color: var(--text-2); font-weight: 500; font-size: .9em; }
@media (min-width: 1000px) {
  .plug-steps { justify-items: start; gap: 14px; }
  .plug-steps li, .plug-steps li.is-on { display: flex; align-items: baseline; gap: 10px; color: var(--text-3); transition: color .25s ease; }
  .plug-steps li span { color: var(--text-3); margin-right: 0; transition: color .25s ease; }
  .plug-steps li.is-on, .plug-steps li.is-done { color: var(--text); }
  .plug-steps li.is-on span, .plug-steps li.is-done span { color: var(--accent); }
  .plug-steps li em { display: none; }
}

/* Como ligar: a cena 2,5D. Câmera = escala e posição; inclinação e giro em elementos separados (órbita) */
.plug-view { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 50% 35%; pointer-events: none; visibility: hidden; }
@media (max-width: 999px) { .plug-view { -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); } }
.pv-cam { position: absolute; left: 50%; top: 60%; width: 0; height: 0; transform-style: preserve-3d; }
.pv-tilt, .pv-world { position: absolute; transform-style: preserve-3d; }
.pv-tilt { left: 0; top: 0; }
.pv-world { left: -410px; top: -300px; width: 820px; height: 600px; transform-origin: 410px 300px; }
.pv-floor {
  position: absolute; left: -420px; top: -360px; width: 1660px; height: 1320px;
  background-image: radial-gradient(circle at 10px 10px, #232B37 1.3px, transparent 1.5px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
}
.pv-shade { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); transform: translateZ(.5px); }
.pv-box { position: absolute; transform-style: preserve-3d; }
.pv-f { position: absolute; left: 0; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: 0 0; }
.pv-light { position: absolute; left: -140px; top: -120px; width: 1100px; height: 860px; border-radius: 50%; background: radial-gradient(closest-side, rgba(135, 160, 195, .13), rgba(135, 160, 195, .05) 55%, transparent 100%); transform: translateZ(.2px); }
/* Peças em 3D (guitarra, fone, knobs): camadas soltas no espaço, paredes em pé e cilindros de discos empilhados */
.pv-guitar { position: absolute; width: 0; height: 0; transform-style: preserve-3d; transform-origin: 0 0; }
.pv-gl { position: absolute; }
.pv-gl svg, .pv-guitar .pv-f > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pv-gshadow { filter: blur(5px); opacity: .62; }
.pv-gshadow svg { fill: #000; }
.pv-wall { background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .55)); }
.pv-gwall { background-image: linear-gradient(180deg, rgba(255, 236, 205, .16), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .62)); }
.pv-gneck .pv-front, .pv-gneck .pv-back, .pv-gneck .pv-left { background: linear-gradient(180deg, #E6D8BF 0 .8px, #7A583E .8px, #3E2B1D 45%, #140E0A); }
.pv-gneck .pv-right { background: linear-gradient(180deg, #5A4030, #241810); }
.pv-gneck .pv-top { background: #21170F; }
.pv-gpu .pv-front, .pv-gpu .pv-back, .pv-gpu .pv-left, .pv-gpu .pv-right { background: linear-gradient(180deg, #353D48, #08090C 70%); }
.pv-gbr .pv-front, .pv-gbr .pv-back, .pv-gbr .pv-left, .pv-gbr .pv-right { background: linear-gradient(180deg, #E3E9F0, #7D8896 60%, #3A4452); }
.pv-gplug .pv-top, .pv-gplug .pv-front, .pv-gplug .pv-back {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .42)),
              linear-gradient(90deg, #8D97A6 0, #DCE3EB 22%, #8D97A6 30%, #161B22 31%, #2A313B 100%);
}
.pv-gplug .pv-top { border-radius: 1.5px; }
.pv-gplug .pv-right { background: #0B0E12; border-radius: 2px; }
.pv-gplug .pv-left { display: none; }
.pv-cyl { border-radius: 50%; background: linear-gradient(var(--la), #05070A 18%, #343C48); }
.pv-cyl.knurl { background: linear-gradient(var(--la), rgba(0, 0, 0, .72) 15%, rgba(255, 255, 255, .07)), repeating-conic-gradient(#4A5462 0 4deg, #12161C 4deg 8deg); }
.pv-cyl.gk { background: linear-gradient(var(--la), #030405 20%, #2E343D); }
.pv-cyl.metal { background: linear-gradient(var(--la), #5B6876, #E3E9F0); }
.pv-gk { border-radius: 50%; background: radial-gradient(circle at 42% 36%, #F2F5F8 0, #9AA4B1 28%, #2A313B 31%, #14181E 72%); box-shadow: inset 0 0 0 .6px rgba(255, 255, 255, .16); }
.pv-gtip { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFFFF, #8D97A6); }
.pv-cap { position: absolute; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #5A6472, #262D37 60%, #171C23); box-shadow: inset 0 0 0 .7px rgba(255, 255, 255, .12); }
.pv-cap::after { content: ''; position: absolute; left: 50%; top: 10%; width: 2px; height: 32%; margin-left: -1px; border-radius: 1px; background: #C4CFDD; transform-origin: 50% 125%; transform: rotate(var(--r, 0deg)); }
.pv-cap.big { background: radial-gradient(circle, #1F252E 0 52%, rgba(0, 0, 0, .5) 54%, transparent 57%), radial-gradient(circle at 36% 28%, #6E7886, #2A313B 62%, #161B22); }
.pv-cap.big::after { top: 6%; height: 22%; width: 2.6px; margin-left: -1.3px; transform-origin: 50% 200%; }
.pv-kshadow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); transform: scale(1.3); }
.pv-kshadow.sq { border-radius: 4px; transform: scale(1.25); }
.pv-btn3 .pv-top { background: linear-gradient(180deg, #3A4450, #1E252F); border-radius: 2px; box-shadow: inset 0 .7px 0 rgba(255, 255, 255, .16); }
.pv-btn3 .pv-front { background: linear-gradient(180deg, #1A2029, #0B0E12); }
.pv-btn3 .pv-back, .pv-btn3 .pv-left, .pv-btn3 .pv-right { background: #0C1015; }
.pv-btn3 .pv-top i { position: absolute; right: 2px; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: #2A2614; transition: background-color .2s ease, box-shadow .2s ease; }
.pv-btn3 .pv-top.is-on i { background: var(--accent); box-shadow: 0 0 5px rgba(255, 204, 0, .8); }
.pv-hp-pad { border-radius: 48%; background: linear-gradient(var(--la), #020304 22%, #20252C); }
.pv-hp-shell { border-radius: 48%; background: linear-gradient(var(--la), #06080B 15%, #3E4856); }
.pv-hp-sl .pv-f { background: linear-gradient(180deg, #E3E9F0, #6F7D8D); }
.pv-hp-sr .pv-f { background: linear-gradient(180deg, #232A34, #0A0D11); }
/* Tampo em alumínio escovado, com chanfro claro em cima e escuro embaixo */
.pv-iface .pv-top {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    linear-gradient(155deg, #343E4C 0%, #202833 50%, #171D26 100%);
  border-radius: 9px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .16), inset 0 -1.5px 0 rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.pv-meter { position: absolute; display: flex; flex-direction: column; gap: 2px; }
.pv-meter i { width: 4px; height: 3px; border-radius: 1px; background: #18211C; }
.pv-meter i:first-child { background: #2A1A1A; }
.pv-meter i:nth-child(2) { background: #2A2614; }
.pv-meter.is-on i:nth-child(n+3) { background: var(--led); box-shadow: 0 0 4px var(--led-glow); animation: pvmeter 1.1s ease-in-out infinite; }
.pv-meter.is-on i:nth-child(3) { animation-delay: .35s; }
.pv-meter.is-on i:nth-child(2) { background: var(--accent); box-shadow: 0 0 4px rgba(255, 204, 0, .6); animation: pvmeter 1.1s .6s ease-in-out infinite; }
@keyframes pvmeter { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pv-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255, 204, 0, 0); transition: border-color .3s ease, box-shadow .3s ease; }
.pv-ring.is-on { border-color: rgba(255, 204, 0, .55); box-shadow: 0 0 12px rgba(255, 204, 0, .25); }
.pv-screw { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6F7D8D, #2A313B 70%); box-shadow: 0 0 0 .5px #0A0D12; }
.pv-combo { position: absolute; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, #0B0E13 60%, #262E39 62%, #151A21 100%); box-shadow: 0 0 0 1px #2C394B; }
.pv-combo i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #05070A; }
.pv-combo i:nth-child(1) { left: 6px; top: 7px; } .pv-combo i:nth-child(2) { right: 6px; top: 7px; } .pv-combo i:nth-child(3) { left: 14.5px; bottom: 4px; }.pv-iface .pv-front { background: linear-gradient(180deg, #1C232D, #11161D); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.pv-iface .pv-right { background: linear-gradient(90deg, #141A22, #0D1117); }
.pv-iface .pv-left { background: #121820; }
.pv-iface .pv-back { background: #0B0F14; }
.pv-halo { position: absolute; border-radius: 50%; border: 2px solid #1C2A22; transition: border-color .2s ease, box-shadow .2s ease; }
.pv-halo.is-on { border-color: var(--led); box-shadow: 0 0 10px var(--led-glow), inset 0 0 6px rgba(84, 232, 121, .4); }
.pv-engrave { position: absolute; font-size: 7px; font-weight: 700; letter-spacing: .16em; color: #5B6876; }
.pv-jack { position: absolute; border-radius: 50%; background: radial-gradient(circle, #05070A 0 38%, #2B3441 40%, #1A212B 62%, #0F141A 64%); box-shadow: 0 0 0 1px #2C394B; }
.pv-led { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #1C2A22; transition: background-color .2s ease, box-shadow .2s ease; }
.pv-led.is-on { background: var(--accent); box-shadow: 0 0 8px rgba(255, 204, 0, .8); }
.pv-port { position: absolute; border-radius: 4px; background: #05070A; box-shadow: 0 0 0 1.5px #3A4452; }
.pv-plug { --tip: 30%; }
.pv-plug .pv-top, .pv-plug .pv-left, .pv-plug .pv-right {
  background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(255, 255, 255, .1) 50%, rgba(0, 0, 0, .38)),
              linear-gradient(180deg, #C3CCD8 0, #8D97A6 var(--tip), #1B2029 var(--tip), #262D37 100%);
}
.pv-plug .pv-top { border-radius: 2px; }
.pv-plug .pv-front { background: #12161C; }
.pv-plug .pv-back { background: #A7B1BE; }
.pv-plug.pv-usb { --tip: 22%; }
.pv-ripple { position: absolute; border-radius: 50%; border: 2px solid var(--led); opacity: 0; }
.pv-ripple.amber { border-color: var(--accent); }
.pv-phone { position: absolute; transform-style: preserve-3d; }
.pv-ph-layer { position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(135deg, #4A525E, #1E242C 35%, #39414C 65%, #171B21); box-shadow: inset 0 0 0 1px #4A5361; }
.pv-ph-btn { position: absolute; width: 3px; border-radius: 1.5px; background: linear-gradient(90deg, #59626F, #2A313B); }
.pv-ph-land { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; }
.pv-ph-land svg { display: block; width: 100%; height: 100%; }
.pv-ph-glare { position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .04)); pointer-events: none; }
.pv-ph-face { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; }
.pv-ph-face svg { display: block; width: 100%; height: 100%; }
.pv-ph-dark { position: absolute; left: 3.5%; right: 3.5%; top: 1.7%; bottom: 1.7%; border-radius: 19px; background: #000; }
.pv-ph-splash { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: 0; }
.pv-phones { position: absolute; transform-style: preserve-3d; transform: translateZ(.6px); }
.pv-cables { position: absolute; left: 0; top: 0; width: 820px; height: 600px; overflow: visible; transform: translateZ(1px); }
.pv-cable { fill: none; stroke: #0B0E13; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.pv-cable-hi { fill: none; stroke: #2F3845; stroke-width: 2.2; stroke-linecap: round; transform: translate(-1px, -1px); }
.pv-flow { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 16; opacity: 0; transition: opacity .3s ease; }
.pv-flow.is-on { opacity: 1; animation: pvflow .9s linear infinite; }
.pv-flow.raw { stroke: #C4CFDD; }
.pv-flow.tm { stroke: var(--accent); }
@keyframes pvflow { to { stroke-dashoffset: -18; } }

.trail { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.trail i { position: absolute; left: 0; top: 0; width: 7px; border-radius: 7px; opacity: 0; }
.bf-static { display: none; }

/* ---------- iPhone e iPad ---------- */
.device-show { position: relative; margin: 56px auto 0; max-width: 1040px; padding-bottom: 6%; }
.ds-pad { width: 88%; filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .6)); }
.ds-phone { position: absolute; right: 0; bottom: 0; width: 25%; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .7)); }

/* ---------- Os números ---------- */
.stats { padding-top: 0; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--divider); }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 28px 16px 28px 0; border-bottom: 1px solid var(--divider); }
.stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--divider); }
.stat b { font-size: clamp(3rem, 10vw, 6.4rem); font-weight: 600; line-height: .95; letter-spacing: 0; }
.stat b i { font-style: normal; color: var(--accent); font-size: .42em; margin-left: 6px; vertical-align: .9em; }
.stat span { color: var(--text-2); font-size: .98rem; }
@media (min-width: 900px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stat, .stat:nth-child(even) { padding: 44px 24px 44px 0; border-left: 0; }
  .stat + .stat { padding-left: 24px; border-left: 1px solid var(--divider); }
}

/* Qualidade do som: o cartão do NAM A2 e as especificações */
.nam-card {
  display: grid; gap: 28px; align-items: center; margin-top: 40px;
  padding: clamp(26px, 4.5vw, 56px); border-radius: var(--r-sheet); border: 1px solid var(--line);
  background: radial-gradient(110% 140% at 0% 0%, rgba(0, 229, 255, .11), transparent 55%), var(--card);
}
.nam-mark { display: flex; flex-direction: column; gap: 4px; }
.nam-tag { color: var(--nam); font-size: .82rem; font-weight: 600; letter-spacing: .16em; }
.nam-gen { color: var(--nam); font-size: clamp(6rem, 22vw, 11rem); font-weight: 600; line-height: .8; }
.nam-copy h3 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.1; margin-bottom: 12px; }
.nam-copy p { color: var(--text-2); max-width: 34em; font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.55; }
.nam-gens { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nam-gens li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); font-size: .85rem; font-weight: 600; }
.nam-gens .is-new { color: var(--nam); border-color: rgba(0, 229, 255, .45); background: rgba(0, 229, 255, .08); }
.spec-grid { display: grid; margin-top: 44px; border-top: 1px solid var(--divider); }
.spec { padding: 26px 0; border-bottom: 1px solid var(--divider); }
.spec::before { content: ''; display: block; width: 22px; height: 4px; border-radius: 2px; background: var(--c); margin-bottom: 14px; }
.spec h3 { margin-bottom: 6px; }
.spec p { color: var(--text-2); max-width: 30em; }
@media (min-width: 700px) { .spec-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (min-width: 800px) { .nam-card { grid-template-columns: auto 1fr; gap: 56px; } }
@media (min-width: 1000px) { .spec-grid { grid-template-columns: repeat(3, 1fr); } }

/* Ouvir */
.listen-wrap { display: grid; gap: 32px; align-items: center; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 22px; }
.tab {
  min-height: 40px; padding: 0 14px; border-radius: var(--r-control); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-weight: 600; font-size: .9rem; cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }
.player { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.play-btn { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--accent); cursor: pointer; display: grid; place-items: center; }
.play-btn svg { width: 24px; height: 24px; fill: var(--on-accent); }
.play-btn .i-pause { display: none; }
.play-btn.is-playing .i-play { display: none; }
.play-btn.is-playing .i-pause { display: inline; }
.ab { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.ab button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--text-3); font-weight: 600; cursor: pointer; }
.ab button.is-on { background: var(--raised); color: var(--text); }
.ab button[data-ab="tm"].is-on { background: var(--accent-bg); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-border); }
.listen-status { min-height: 1.5em; margin: 14px 0 6px; color: var(--text-2); font-size: .9rem; }
.listen-viz { display: grid; place-items: center; }
.listen-viz .bfly { width: min(80vw, 440px); }
.listen-viz .bf-bar { transition: fill .35s ease; }
.listen-viz.is-raw .bf-bar { fill: #4A5566 !important; }
@media (min-width: 900px) { .listen-wrap { grid-template-columns: 1.1fr 1fr; } }

/* Efeitos: notas e o rack */
.rack { list-style: none; margin: 36px 0 0; padding: 0; display: grid; border-top: 1px solid var(--divider); }
.rk {
  position: relative; display: grid; grid-template-columns: 8px 40px minmax(0, 1fr) auto; align-items: start; gap: 4px 14px;
  padding: 16px 6px 16px 4px; border-bottom: 1px solid var(--divider);
  transition: background-color .25s ease;
}
.rk-led { width: 8px; height: 8px; margin-top: 16px; border-radius: 50%; background: #2A3340; transition: background-color .2s ease, box-shadow .2s ease; }
.rk-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #0B0F15; border: 2px solid color-mix(in srgb, var(--c) 55%, #0B0F15); transition: border-color .25s ease; }
.rk-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; transition: opacity .25s ease; }
.rk-name { font-weight: 600; font-size: 1.02rem; line-height: 1.25; margin-top: 2px; }
.rk-models { grid-column: 3 / 5; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--text-3); font-size: .84rem; transition: color .25s ease; }
.rk-count { margin-top: 3px; color: var(--text-2); font-size: .85rem; font-weight: 600; }
.rk-note { grid-column: 3 / 5; margin: 0; color: var(--c); font-size: .84rem; font-weight: 600; }
.rk.is-on, .rk:hover { background: rgba(255, 255, 255, .015); }
.rk.is-on .rk-led, .rk:hover .rk-led { background: var(--led); box-shadow: 0 0 8px var(--led-glow); }
.rk.is-on .rk-icon, .rk:hover .rk-icon { border-color: var(--c); }
.rk.is-on .rk-icon svg, .rk:hover .rk-icon svg { opacity: 1; }
.rk.is-on .rk-models, .rk:hover .rk-models { color: #C4CFDD; }
@media (min-width: 768px) { .fx-notes { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (min-width: 900px) { .rack { grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; } .rk:nth-child(-n+2) { border-top: 1px solid var(--divider); } }

/* Funcionalidades */
.feat-grid { display: grid; gap: 36px 28px; margin-top: 36px; }
.feat h3 { margin: 18px 0 6px; }
.feat p { color: var(--text-2); max-width: 30em; }
.feat-media { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-sheet); background: var(--card); border: 1px solid var(--line); overflow: hidden; object-fit: cover; }
@media (min-width: 768px) { .feat-grid { grid-template-columns: 1fr 1fr; } }

.live-demo { display: flex; flex-direction: column; padding: 14px; gap: 10px; }
.live-top { display: flex; flex-direction: column; align-items: center; }
.live-slot { color: var(--text-2); font-weight: 700; letter-spacing: .12em; font-size: .78rem; }
.live-name { font-weight: 700; font-size: 1.15rem; }
.live-pads { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lpad { border: 0; border-radius: 14px; background: #131922; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; transition: background-color .2s ease; }
.lpad b { font-size: 1.9rem; line-height: 1; font-weight: 700; color: #5E6B7C; }
.lpad span { font-size: .7rem; font-weight: 600; color: var(--text-2); }
.lpad.is-on { background: var(--sc); }
.lpad.is-on b, .lpad.is-on span { color: #0A0D12; }

/* Afinador e metrônomo: as folhas do app, redesenhadas */
.feat-grid .feat-media { aspect-ratio: auto; height: 310px; }
.sheet-demo { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 18px 20px; }
.sheet-head { display: flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; }
.sheet-head svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sheet-row { display: flex; justify-content: space-between; color: var(--text-2); font-size: .82rem; font-weight: 500; }
.sheet-row .num { color: var(--text); font-weight: 600; }
.sheet-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; background: #0B0F15; font-size: .8rem; font-weight: 600; text-align: center; }
.sheet-seg.four { grid-template-columns: repeat(4, 1fr); }
.sheet-seg span { padding: 7px 0; border-radius: 9px; color: var(--text-2); }
.sheet-seg .is-on { background: var(--raised); color: var(--text); }
.tn-note { display: flex; justify-content: center; align-items: flex-end; gap: 4px; line-height: .9; }
.tn-note b { font-size: 3.6rem; font-weight: 700; }
.tn-note sub { font-size: 1.2rem; font-weight: 600; color: var(--text-3); vertical-align: baseline; }
.tn-hz { text-align: center; color: var(--text-2); font-size: .82rem; margin-top: -4px; }
.tn-scale { position: relative; display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 4px; }
.tn-scale i { width: 2px; height: 16px; border-radius: 1px; background: #2C394B; }
.tn-scale i.mid { height: 26px; background: #5B6876; }
.tn-needle {
  position: absolute; top: 2px; left: calc(50% + var(--x, 0) * 46%); width: 6px; height: 30px; margin-left: -3px; border-radius: 3px;
  background: var(--tn, var(--led)); transition: left .09s linear, background-color .2s ease;
}
.tn-cents { text-align: center; font-size: .9rem; font-weight: 700; color: var(--tn, var(--led)); }
.tuner-demo[data-state="ok"] { --tn: var(--led); }
.tuner-demo[data-state="near"] { --tn: var(--accent); }
.tuner-demo[data-state="off"] { --tn: #FF5C5C; }
.mt-bpm { display: flex; align-items: center; justify-content: center; gap: 22px; }
.mt-bpm b { font-size: 3.2rem; font-weight: 700; line-height: 1; min-width: 3ch; text-align: center; }
.mt-step { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--raised); color: var(--text-2); font-size: 1.2rem; }
.mt-label { text-align: center; color: var(--text-2); font-size: .7rem; font-weight: 700; letter-spacing: .16em; margin-top: -4px; }
.mt-beats { display: flex; justify-content: center; gap: 10px; }
.mt-beats i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #2C394B; transition: background-color .08s ease, border-color .08s ease; }
.mt-beats i:first-child { border-color: var(--accent-border); }
.mt-beats i.is-on { background: var(--accent); border-color: var(--accent); }
.mt-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.mt-row .tap-btn { width: 100%; }
.mt-play { border-radius: 12px; background: var(--accent); display: grid; place-items: center; }
.mt-play i { width: 13px; height: 13px; border: 2.5px solid #191919; border-radius: 2px; }
.tap-btn { width: 84px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.tap-btn:active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.live-top { position: relative; }
.live-lock { position: absolute; right: 2px; top: 2px; color: var(--accent); }
.live-lock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.more-title { margin: 72px 0 20px; font-size: 1.3rem; }
.more-grid { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--divider); }
.more-grid li { display: grid; gap: 4px; align-content: start; padding: 20px 0; border-bottom: 1px solid var(--divider); }
.more-grid b { font-weight: 600; }
.more-grid span { color: var(--text-2); font-size: .95rem; max-width: 30em; }
@media (min-width: 700px) { .more-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (min-width: 1000px) { .more-grid { grid-template-columns: repeat(4, 1fr); column-gap: 32px; } }

.midi-demo { display: flex; align-items: center; justify-content: center; padding: 16px; }
.midi-pedal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; border-radius: 14px; background: #131922; border: 1px solid var(--border); }
.fs { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3C4450, #1B2028 70%, #101318); border: 1px solid #333C48; position: relative; }
.fs i { position: absolute; top: -8px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2A3340; }
.fs.is-on i { background: var(--led); box-shadow: 0 0 8px var(--led-glow); }
.midi-cable { width: 44px; height: 2px; background: var(--cable); }
.midi-screen { width: 92px; height: 132px; border-radius: 18px; border: 2px solid #283243; display: grid; place-items: center; background: var(--bg); }
.midi-scene { width: 62px; height: 62px; border-radius: 14px; display: grid; place-items: center; font-size: 2rem; font-weight: 700; background: var(--sc); color: #0A0D12; transition: background-color .2s ease; }

.diag-demo { display: flex; flex-direction: column; justify-content: center; padding: 14px 18px; gap: 14px; aspect-ratio: auto; min-height: 210px; }
.diag { margin: 0; display: grid; }
.diag div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--divider); font-size: .9rem; }
.diag dt { color: var(--text-2); font-weight: 500; }
.diag dd { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.diag dd.ok i { width: 8px; height: 8px; border-radius: 50%; background: var(--led); box-shadow: 0 0 8px var(--led-glow); }
.dsp { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: .78rem; font-weight: 600; }
.dsp-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--raised); overflow: hidden; }
.dsp-bar i { display: block; height: 100%; width: 31%; background: var(--led); border-radius: 6px; }

/* Vídeos */
.vid-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; margin: 32px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none;
}
.vid-grid::-webkit-scrollbar { display: none; }
.vid-grid .vid { scroll-snap-align: start; }
@media (min-width: 768px) {
  .vid-grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 32px 0 0; padding: 0; overflow: visible; }
}
.vid { display: flex; flex-direction: column; gap: 10px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.vid-poster { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; }
.vid-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-poster .vid-mark { width: 64px; fill: #1F2836; }
.vid-play { position: absolute; width: 52px; height: 52px; border-radius: 50%; background: rgba(8, 10, 15, .72); display: grid; place-items: center; border: 1px solid var(--border); }
.vid-play svg { width: 20px; height: 20px; fill: var(--text); margin-left: 3px; }
.vid-dur { position: absolute; right: 10px; bottom: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(8, 10, 15, .8); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vid-title { font-weight: 600; font-size: .98rem; }
.vid-sub { color: var(--text-3); font-size: .82rem; }
.vid-dialog { width: min(96vw, 1100px); padding: 0; border: 1px solid var(--border); border-radius: 18px; background: #000; color: var(--text); overflow: hidden; }
.vid-dialog::backdrop { background: rgba(4, 5, 8, .86); }
.vid-frame { width: 100%; aspect-ratio: 16 / 9; }
.vid-frame iframe, .vid-frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.vid-frame.is-vertical { aspect-ratio: 9 / 16; max-height: 82vh; margin: 0 auto; width: auto; }
.vid-close { position: absolute; top: 10px; right: 10px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: rgba(8, 10, 15, .85); font-weight: 600; cursor: pointer; }

/* Planos */
.plans { display: grid; gap: 14px; margin-top: 36px; }
.plan { padding: 26px; border-radius: var(--r-sheet); background: var(--card); border: 1px solid var(--line); }
.plan-pro { background: var(--accent-bg); border-color: var(--accent-border); }
.plan-pro h3 { color: var(--accent); }
.price { margin: 10px 0 18px; }
.price b { font-size: 2.2rem; font-weight: 600; }
.checks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 28px; }
.checks li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--led); border-bottom: 2px solid var(--led); transform: rotate(-45deg); }
.checks li.no { color: var(--text-3); }
.checks li.no::before { width: 12px; height: 0; top: .75em; border: 0; border-top: 2px solid var(--text-3); transform: none; }
.packs { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--divider); display: grid; gap: 18px; }
.packs h3 { margin-bottom: 8px; }
.packs p { color: var(--text-2); max-width: 32em; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: 8px; }
.chips li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.plans-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
@media (min-width: 768px) { .plans { grid-template-columns: 1fr 1fr; } .packs { grid-template-columns: 1.2fr 1fr; align-items: center; } }

/* Hardware */
.more-card {
  display: grid; gap: 28px; align-items: center; padding: clamp(26px, 4.5vw, 56px);
  border-radius: var(--r-sheet); border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 204, 0, .08), transparent 55%), var(--card);
}
.more-card h2 { margin-bottom: 14px; }
.news { display: grid; gap: 10px; }
.news-label { font-weight: 600; }
.news-mail .btn { justify-self: start; }
.price-per { font-size: .95rem; font-weight: 500; color: var(--text-2); margin-left: 4px; }
@media (min-width: 900px) { .more-card { grid-template-columns: 1.1fr 1fr; gap: 56px; } }

/* Perguntas */
.faq { margin-top: 30px; border-top: 1px solid var(--divider); }
.faq details { border-bottom: 1px solid var(--divider); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { color: var(--text-2); padding: 0 0 22px; max-width: 46em; }

/* O voo: o fim da página */
.finale { position: relative; }
.finale-inner {
  position: relative; height: var(--vh); min-height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 40px) var(--gutter) calc(28px + env(safe-area-inset-bottom)); text-align: center;
}
.icon-spot { width: 104px; height: 104px; margin-bottom: 18px; flex: none; }
.fly-cta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(100%, 560px); }
.fly-cta h2 { font-size: clamp(2.2rem, 7vw, 4rem); }
.store-slot:empty { display: none; }
.icon-still { display: block; width: 100%; height: 100%; }
.get-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; }
.get-actions.has-badge > .btn { display: none; }
.get-facts { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; color: var(--text-3); font-size: .86rem; font-weight: 500; }
.get-facts li { display: inline-flex; align-items: center; gap: 8px; }
.get-facts li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--led); }
.wl-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-row input {
  flex: 1 1 220px; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit;
}
.wl-row input::placeholder { color: var(--text-3); }
.wl-row .btn { flex: 1 1 auto; min-height: 52px; }
.wl-msg { min-height: 1.4em; font-weight: 600; }
.wl-msg.ok { color: var(--led); }
.wl-msg.err { color: #FF5C5C; }
.hp { position: absolute; left: -9999px; }
@media (max-height: 720px) { .fly-cta .lead { display: none; } .icon-spot { width: 80px; height: 80px; } }

/* Rodapé */
.footer { border-top: 1px solid var(--divider); padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); background: var(--bg); }
.footer-in { display: grid; gap: 18px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.footer-links a { color: var(--text-2); text-decoration: none; font-weight: 500; font-size: .92rem; }
.footer-links a:hover { color: var(--text); }

/* Borboleta */
.bfly { overflow: visible; }
.bfly .bf-bar { fill: var(--accent); }

/* Movimento reduzido ou sem JavaScript: a história vira uma página parada, com tudo pronto */
.rm .scroll-hint i { animation: none; }
.rm .stage, .no-js .stage { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; gap: 40px; padding: calc(var(--nav-h) + 40px) var(--gutter) 24px; }
.rm .vz, .no-js .vz { position: relative; inset: auto; height: auto; container-type: normal; display: grid; justify-items: center; gap: 28px; }
.rm .tz, .no-js .tz { position: static; display: grid; gap: 64px; pointer-events: auto; }
.rm .ch, .no-js .ch { position: static; }
.rm .spot, .rm .tangle, .rm .gears, .rm .scope, .rm .trail, .rm .scroll-hint, .rm .stomps,
.no-js .spot, .no-js .tangle, .no-js .gears, .no-js .scope, .no-js .trail, .no-js .scroll-hint, .no-js .stomps { display: none; }
.rm .bf-static, .no-js .bf-static { display: block; order: -1; width: min(80vw, 420px); }
.rm .phone-wrap, .no-js .phone-wrap { position: static; width: min(100%, 760px); }
.rm .plug-view { position: relative; inset: auto; width: min(100%, 620px); height: 340px; visibility: visible; justify-self: center; }
.rm .pv-cam { top: 55%; }
.rm .plug-view { -webkit-mask-image: none; mask-image: none; }
.rm .pv-flow.is-on { animation: none; }
.no-js .plug-view { display: none; }
.rm .plug-steps li, .no-js .plug-steps li { display: block; color: var(--text); }
.rm .plug-steps li span, .no-js .plug-steps li span { color: var(--accent); margin-right: 10px; }

/* Páginas de texto (privacidade, termos, suporte) */
.doc { max-width: 760px; margin: 0 auto; padding: 116px var(--gutter) 80px; }
.doc h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); margin-bottom: 18px; }
.doc .lead { margin-bottom: 28px; }
.doc h2 { font-size: 1.25rem; margin: 36px 0 12px; }
.doc p, .doc li { color: var(--text-2); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 20px; display: grid; gap: 10px; margin: 0; }
.doc b { color: var(--text); font-weight: 600; }
.doc a { color: var(--accent); }
img.nav-logo { display: block; }