/* Landing DropPilot — storytelling com scroll. Um notebook com o painel do
 * DropPilot fica preso na tela e a história do pedido passa por ele conforme
 * a rolagem: fornecedor → anúncio → venda → envio → lucro. Cartões de vidro
 * flutuam em volta de cada etapa. Sem framework; o home.js só calcula o
 * progresso da rolagem e aplica opacidades/transforms.
 * Com prefers-reduced-motion, a história vira uma lista estática. */

:root {
  --bg: #05040c;
  --bg-2: #0a0818;
  --ink: #f4f3fb;
  --muted: rgba(226, 224, 245, 0.66);
  --subtle: rgba(226, 224, 245, 0.42);
  --line: rgba(167, 139, 250, 0.14);
  --line-2: rgba(167, 139, 250, 0.28);
  /* "gold" ficou como nome do acento (robots.css e partner.css usam) — agora é o violeta da marca */
  --gold: #8b5cf6;
  --gold-hi: #a78bfa;
  --gold-lo: #4f46e5;
  --violet: #8b5cf6;
  --blue: #3b6dfb;
  --grad: linear-gradient(90deg, #b45cf6 0%, #8b5cf6 38%, #5b5bf6 70%, #3b82f6 100%);
  --grad-btn: linear-gradient(90deg, #8b3cf7 0%, #6d3df5 55%, #5b4af2 100%);
  --ok: #34d399;
  --red: #f87171;
  --font-d: 'Sora', system-ui, sans-serif;
  --font-b: 'Manrope', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip no html e no body: no celular, conteúdo que passa da largura (planeta, brilhos)
 * não pode alargar a página — hidden sozinho no body não basta no Safari/Chrome mobile. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scrollbar-width: thin; scrollbar-color: #6d3df5 #05040c; }
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: #05040c; }
html::-webkit-scrollbar-thumb { border-radius: 8px; background: linear-gradient(180deg, #8b5cf6, #4f46e5); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 16px/1.6 var(--font-b); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--violet); color: #fff; font-weight: 800; }
.skip:focus { top: 12px; }
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 22px; }
@media (min-width: 900px) { .container { padding: 0 48px; } }

/* textura de grão sobre tudo (bem sutil) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0.03; transform: translateZ(0);
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- tipografia ---------- */
.t-hero { margin: 0; font-family: var(--font-d); font-weight: 700; font-size: clamp(2.3rem, min(3.7vw, 7.4vh), 3.6rem); line-height: 1.04; letter-spacing: -0.035em; }
.t-h2 { margin: 0; font-family: var(--font-d); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 3.1rem); line-height: 1.08; letter-spacing: -0.03em; }
.t-h3 { margin: 0; font-family: var(--font-d); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.9rem); line-height: 1.08; letter-spacing: -0.03em; }
.t-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; font: 600 12px/1 var(--font-d); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); }
.t-kicker b { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; color: #fff; background: var(--grad-btn); letter-spacing: 0; box-shadow: 0 0 24px -4px rgba(139, 92, 246, 0.8); }
.t-lead { margin: 22px 0 0; max-width: 520px; color: var(--muted); font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.65; }
.hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 9px 16px; border-radius: 999px; font: 600 11px/1 var(--font-d); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(226, 224, 245, 0.85); background: rgba(20, 16, 44, 0.6); border: 1px solid var(--line-2); }
.pill i { width: 7px; height: 7px; border-radius: 999px; background: var(--gold-hi); box-shadow: 0 0 10px var(--violet); }

/* ---------- botões ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; padding: 0 26px; border-radius: 12px; font: 700 15px/1 var(--font-b); white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.3s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.btn-main { color: #fff; background: var(--grad-btn); box-shadow: 0 14px 40px -14px rgba(139, 92, 246, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -14px rgba(139, 92, 246, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-main:active { transform: scale(0.97); }
.btn-ico { display: grid; place-items: center; transition: transform 0.35s var(--ease); }
.btn:hover .btn-ico { transform: translateX(4px); }
.btn-line { color: var(--ink); background: rgba(10, 8, 24, 0.5); border: 1px solid rgba(226, 224, 245, 0.2); }
.btn-line:hover { border-color: var(--gold-hi); }
.play { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid rgba(226, 224, 245, 0.7); padding-left: 2px; }

/* ---------- topo ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 100; transition: background-color 0.3s ease, backdrop-filter 0.3s ease; }
.top.scrolled { background: rgba(5, 4, 12, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
/* linha roxa que nasce no centro e esmaece até as laterais (com glow), só com o topo preenchido */
.top::before, .top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.25) 18%, #a78bfa 50%, rgba(139, 92, 246, 0.25) 82%, transparent 100%); transform: scaleX(0); opacity: 0; transition: transform 0.9s var(--ease), opacity 0.4s ease; }
.top::after { height: 1px; }
.top::before { bottom: -3px; height: 7px; filter: blur(6px); }
.top.scrolled::before, .top.scrolled::after { transform: scaleX(1); opacity: 1; }
.top-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 84px; transition: height 0.3s ease; }
.top.scrolled .top-bar { height: 70px; }
.top-logo img { height: 36px; width: auto; }
.top-nav { display: none; align-items: center; gap: 2px; }
.top-nav > a, .top-nav .dd-btn { padding: 9px 13px; border-radius: 10px; font-size: 14px; font-weight: 600; color: rgba(226, 224, 245, 0.82); transition: color 0.2s ease, background-color 0.2s ease; }
.top-nav > a:hover, .top-nav .dd-btn:hover { color: #fff; background: rgba(167, 139, 250, 0.1); }
.top-act { display: flex; align-items: center; gap: 10px; }
.top-login { display: none; align-items: center; height: 46px; padding: 0 22px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ink); border: 1px solid rgba(226, 224, 245, 0.2); background: rgba(5, 4, 12, 0.4); transition: border-color 0.2s ease; }
.top-login:hover { border-color: var(--gold-hi); }
.top-cta { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 10px; font-weight: 700; font-size: 14px; color: #fff; background: var(--grad-btn); box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.9); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.top-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -10px rgba(139, 92, 246, 1); }
.burger { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: rgba(167, 139, 250, 0.1); border: 1px solid var(--line); }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.3s var(--ease), background-color 0.2s ease; }
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
.burger span::before { transform: translateY(-6px); }
.burger span::after { transform: translateY(6px); }
.menu-open .burger span { background: transparent; }
.menu-open .burger span::before { transform: rotate(45deg); }
.menu-open .burger span::after { transform: rotate(-45deg); }
.sheet {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 100px 28px 40px; overflow-y: auto;
  background: radial-gradient(120% 60% at 100% 0%, rgba(91, 33, 182, 0.35), transparent 60%), rgba(5, 4, 12, 0.98); clip-path: circle(0% at calc(100% - 50px) 42px); transition: clip-path 0.6s var(--ease);
}
.sheet a { font: 600 clamp(1.5rem, 6.5vw, 2.2rem)/1.2 var(--font-d); letter-spacing: -0.03em; padding: 5px 0; }
.sheet a:hover { color: var(--gold-hi); }
.sheet .btn { margin-top: 24px; align-self: flex-start; font-size: 15px; }
.menu-open .sheet { clip-path: circle(150% at calc(100% - 50px) 42px); }
@media (max-width: 480px) { .top-cta { display: none; } }
@media (min-width: 1180px) { .top-nav, .top-login { display: flex; } .burger, .sheet { display: none; } }

/* =========================================================
   HISTÓRIA (seção alta + palco preso na tela)
   ========================================================= */
.story { position: relative; height: 620vh; overflow-x: clip; }
.stage { --lw: clamp(320px, min(39.5vw, 78vh), 700px); position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* céu: estrelas, planeta com borda iluminada e relevo no chão */
.sky { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 78% 18%, rgba(76, 29, 149, 0.32), transparent 65%), radial-gradient(60% 50% at 0% 100%, rgba(30, 27, 75, 0.45), transparent 70%), var(--bg); }
.stars { position: absolute; inset: -10%; opacity: 0.55; background-image:
  radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.8), transparent),
  radial-gradient(1.5px 1.5px at 200px 160px, #c4b5fd, transparent), radial-gradient(1px 1px at 280px 40px, #fff, transparent),
  radial-gradient(1px 1px at 60px 220px, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1px 1px at 330px 260px, #fff, transparent);
  background-size: 360px 300px; animation: twinkle 6s ease-in-out infinite alternate; }
.stars-2 { background-size: 520px 430px; opacity: 0.35; animation-duration: 9s; animation-delay: -3s; transform: rotate(12deg); }
@keyframes twinkle { from { opacity: 0.25; } to { opacity: 0.6; } }
.planet {
  position: absolute; right: -16vw; top: -58vw; width: 78vw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 78%, #1c1446 0%, #0b0822 45%, #05040c 70%);
  box-shadow: inset 26px -34px 60px -24px rgba(167, 139, 250, 0.75), inset 60px -80px 140px -60px rgba(91, 91, 246, 0.55), 0 0 140px 6px rgba(124, 58, 237, 0.35);
  transform: translate3d(var(--px, 0), var(--py, 0), 0); will-change: transform;
}
.glow-floor { position: absolute; left: 70%; top: 66%; width: 70vw; height: 30vh; margin: -15vh 0 0 -35vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 58, 237, 0.4), transparent); mix-blend-mode: screen; }
.stars { transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -6px), 0); }
.ground {
  position: absolute; left: -60%; right: -60%; top: 58%; height: 90vh; transform-origin: 50% 0; transform: perspective(520px) rotateX(64deg);
  background: url("/landing/img/terreno.webp") center top / 900px auto repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  filter: saturate(1.15) brightness(0.8) contrast(1.1);
}
.horizon { position: absolute; left: 0; right: 0; top: calc(58% - 70px); height: 140px; background: radial-gradient(60% 50% at 70% 50%, rgba(139, 92, 246, 0.35), transparent 70%); filter: blur(10px); }
.sky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, transparent, var(--bg)); }

/* trilho 01–05: linha que se preenche com a rolagem, bolinhas centradas nela, nome da etapa atual */
.rail { --dot: 18px; position: absolute; z-index: 5; right: 30px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 22px; }
.rail::before, .rail::after { content: ''; position: absolute; right: calc(var(--dot) / 2 - 1px); top: calc(var(--dot) / 2); bottom: calc(var(--dot) / 2); width: 2px; border-radius: 2px; }
.rail::before { background: rgba(167, 139, 250, 0.16); }
.rail::after { background: linear-gradient(180deg, #c4b5fd, #8b5cf6 50%, #4f7cf6); box-shadow: 0 0 10px rgba(139, 92, 246, 0.8); transform-origin: 50% 0; transform: scaleY(var(--rp, 0)); }
.rail button { position: relative; z-index: 1; display: flex; flex-direction: row-reverse; align-items: center; gap: 14px; height: var(--dot); }
.rail button i { position: relative; display: grid; place-items: center; flex-shrink: 0; width: var(--dot); height: var(--dot); border-radius: 999px; }
.rail button i::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: rgba(226, 224, 245, 0.28); box-shadow: 0 0 0 4px var(--bg); transition: all 0.35s var(--ease); }
.rail button i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid transparent; transform: scale(0.4); opacity: 0; transition: all 0.45s var(--ease); }
.rail button.done i::before { background: var(--gold-hi); }
.rail button:hover i::before { background: #fff; }
.rail button.on i::before { width: 8px; height: 8px; background: #fff; box-shadow: 0 0 0 4px var(--bg), 0 0 14px 2px rgba(167, 139, 250, 0.9); }
.rail button.on i::after { border-color: rgba(167, 139, 250, 0.9); background: rgba(139, 92, 246, 0.18); transform: scale(1); opacity: 1; animation: rail-pulse 2.4s ease-in-out infinite; }
@keyframes rail-pulse { 50% { box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.12); } }
.rail button span { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--font-d); letter-spacing: 0.08em; color: var(--subtle); white-space: nowrap; transition: color 0.3s ease; }
.rail button span::after { content: attr(data-name); max-width: 0; overflow: hidden; opacity: 0; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); transition: max-width 0.5s var(--ease), opacity 0.3s ease; }
.rail button[data-go="0"] span::after { margin-left: -8px; }
.rail button:hover span { color: var(--ink); }
.rail button:hover span::after, .rail button.on span::after { max-width: 120px; opacity: 1; }
.rail button.on span { color: #fff; }
.rail button.on span::after { color: #fff; }
@media (min-width: 1180px) { .rail { display: flex; } }

/* textos dos capítulos (empilhados; só o atual aparece) */
.chapters { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.chapter {
  position: absolute; left: 0; right: 0; top: 96px; bottom: 56px; display: flex; align-items: center;
  opacity: 0; visibility: hidden; transform: translate3d(0, var(--ty, 0px), 0); will-change: opacity, transform;
}
.chapter.on { opacity: 1; visibility: visible; pointer-events: auto; }
.chapter .container > * { max-width: 540px; }
.chapter.hero .container > .chapter-text { max-width: 640px; }
.chapter .container { transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 4px), 0); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.perks { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 34px 0 0; padding: 0; list-style: none; }
.perks li { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.perk-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; color: var(--gold-hi); background: rgba(139, 92, 246, 0.12); border: 1px solid var(--line-2); }
.perk-ico svg { width: 17px; height: 17px; }
.scroll-hint { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--muted); }
.scroll-hint i { position: relative; width: 22px; height: 34px; border-radius: 999px; border: 1.5px solid rgba(226, 224, 245, 0.55); }
.scroll-hint i::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 4px; background: var(--gold-hi); animation: wheel 1.6s ease-in-out infinite; }
@media (max-height: 760px) { .scroll-hint { display: none; } }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(12px); opacity: 0; } }

/* ---------- notebook ---------- */
/* brilho e sombra do notebook ficam no fundo (fora do espaço 3D, senão cortam a base) */
.laptop-anchor { position: absolute; left: 50%; top: 50%; }
@media (min-width: 900px) { .laptop-anchor { left: 70%; top: 46%; } }
.laptop-glow { position: absolute; left: calc(var(--lw) * -0.6); top: calc(var(--lw) * -0.5); width: calc(var(--lw) * 1.2); height: calc(var(--lw) * 0.8); border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 58, 237, 0.45), transparent); filter: blur(30px); }
.laptop-shadow { position: absolute; left: calc(var(--lw) * -0.62); top: calc(var(--lw) * 0.27); width: calc(var(--lw) * 1.24); height: calc(var(--lw) * 0.22); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4) 55%, transparent); filter: blur(6px); }
.scene { position: absolute; z-index: 2; left: 50%; top: 50%; width: 0; height: 0; perspective: 2600px; }
@media (min-width: 900px) { .scene { left: 70%; top: 46%; } }
.rig {
  position: absolute; left: calc(var(--lw) / -2); top: calc(var(--lw) * -0.4); width: var(--lw);
  transform-style: preserve-3d; transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -16deg)) rotateZ(var(--rz, 1deg)) translateY(var(--bob, 0px)); will-change: transform;
}
/* tampa: caixa fina com frente de vidro, traseira e bordas (dá espessura ao girar) */
.rig { --th: calc(var(--lw) * 0.012); --dth: calc(var(--lw) * 0.018); --dd: calc(var(--lw) * 0.58); }
.lid {
  position: relative; width: 100%; aspect-ratio: 16 / 10.2; padding: 1.3% 1.3% 2.1%; border-radius: calc(var(--lw) * 0.024);
  transform-style: preserve-3d; transform-origin: 50% 100%; transform: rotateX(10deg);
  background: linear-gradient(160deg, #1a1830 0%, #07060f 22%, #07060f 80%, #1c1838 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 2px rgba(0, 0, 0, 0.8);
}
.lid::after { content: ''; position: absolute; left: 50%; top: 0.55%; width: 0.9%; aspect-ratio: 1; margin-left: -0.45%; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #3b3a5c, #0b0a16 60%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); transform: translateZ(1px); }
.lid-back { position: absolute; inset: 0; border-radius: inherit; transform: translateZ(calc(var(--th) * -1)); background: linear-gradient(160deg, #3a3560, #1a1733 60%, #2a2550); }
.lid-side { position: absolute; background: linear-gradient(180deg, #8c7cf0 0%, #4a4380 30%, #23203f 100%); }
.ls-l { left: 0; top: 2%; bottom: 2%; width: var(--th); transform-origin: 0 50%; transform: rotateY(90deg); }
.ls-r { right: 0; top: 2%; bottom: 2%; width: var(--th); transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(180deg, #b9a8ff 0%, #6d5fc0 25%, #2c2852 100%); }
.ls-t { top: 0; left: 2%; right: 2%; height: var(--th); transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(90deg, #4a4380, #a594ff 60%, #5a4fa0); }
.hinge { position: absolute; left: 14%; right: 14%; top: calc(100% - var(--lw) * 0.006); height: calc(var(--lw) * 0.016); border-radius: 0 0 calc(var(--lw) * 0.01) calc(var(--lw) * 0.01); background: linear-gradient(180deg, #050409 0%, #2b2848 45%, #5b5290 55%, #0d0c18 100%); transform: translateZ(calc(var(--th) * -0.5)); }

/* base: tampo de alumínio, borda frontal com espessura, teclado retroiluminado */
.deck {
  position: absolute; left: 0; right: 0; top: 100%; height: var(--dd); transform-origin: 50% 0; transform: rotateX(90deg); outline: 1px solid transparent;
  border-radius: calc(var(--lw) * 0.008) calc(var(--lw) * 0.008) calc(var(--lw) * 0.018) calc(var(--lw) * 0.018);
  background: radial-gradient(70% 90% at 85% 0%, rgba(167, 139, 250, 0.28), transparent 60%), linear-gradient(180deg, #2c2a45 0%, #1f1d36 45%, #1b1934 90%, #2e2958 100%);
}
.deck-front { position: absolute; left: 0; right: 0; top: 100%; height: var(--dth); transform: translateZ(var(--dd)); border-radius: 0 0 calc(var(--lw) * 0.018) calc(var(--lw) * 0.018); background: linear-gradient(180deg, #7d6fd6 0%, #4a4386 30%, #1a1830 100%); outline: 1px solid transparent; }
.deck-side { position: absolute; top: 100%; width: var(--dd); height: var(--dth); transform-origin: 0 0; transform: rotateY(-90deg); border-radius: 0 0 calc(var(--lw) * 0.018) 0; background: linear-gradient(180deg, #7d6fd6 0%, #4a4386 30%, #1a1830 100%); outline: 1px solid transparent; }
.ds-l { left: 0; }
.ds-r { left: 100%; }
.deck-front::after { content: ''; position: absolute; left: 44%; right: 44%; top: 0; height: 40%; border-radius: 0 0 6px 6px; background: rgba(0, 0, 0, 0.35); }
.keys {
  position: absolute; left: 13%; right: 13%; top: 7%; height: 44%; border-radius: 6px;
  background: repeating-linear-gradient(90deg, #0b0a16 0 calc(100% / 14 - 3px), transparent calc(100% / 14 - 3px) calc(100% / 14));
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 calc(100% / 6 - 3px), transparent calc(100% / 6 - 3px) calc(100% / 6));
  mask-image: repeating-linear-gradient(180deg, #000 0 calc(100% / 6 - 3px), transparent calc(100% / 6 - 3px) calc(100% / 6));
}
/* luz roxa do teclado aparecendo entre as teclas */
.deck::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 6.5%; height: 45%; border-radius: 8px; background: rgba(139, 92, 246, 0.45); filter: blur(3px); }
.speaker { position: absolute; top: 7%; width: 7%; height: 44%; background: radial-gradient(circle, rgba(0, 0, 0, 0.75) 0 1px, transparent 1.6px) 0 0 / 6px 6px; }
.sp-l { left: 4%; }
.sp-r { right: 4%; }
.pad { position: absolute; left: 34%; right: 34%; top: 59%; height: 30%; border-radius: 10px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12); }

.screen {
  position: relative; transform: translateZ(0.5px); display: grid; grid-template-columns: 21% 1fr; width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(var(--lw) * 0.01); font-size: calc(var(--lw) / 64); line-height: 1.35; color: var(--ink);
  background: radial-gradient(110% 80% at 85% 0%, #1d1747 0%, #0c0a1d 55%, #08071a 100%);
}
.screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 46%, transparent 70%, rgba(255, 255, 255, 0.035) 84%, transparent 100%); }
.scr-side { padding: 1.4em 0.8em; border-right: 1px solid rgba(255, 255, 255, 0.06); background: rgba(6, 5, 16, 0.55); }
.scr-brand { display: flex; align-items: center; gap: 0.5em; padding: 0 0.4em 1.2em; font: 700 1.25em/1 var(--font-d); letter-spacing: -0.03em; }
.scr-brand img { width: 1.35em; height: auto; }
.scr-brand span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scr-nav { display: grid; gap: 0.25em; margin: 0; padding: 0; list-style: none; }
.scr-nav li { display: flex; align-items: center; gap: 0.65em; padding: 0.6em 0.7em; border-radius: 0.6em; font-size: 0.92em; font-weight: 600; color: rgba(226, 224, 245, 0.6); transition: background-color 0.35s ease, color 0.35s ease; }
.scr-nav li.on { color: #fff; background: linear-gradient(90deg, rgba(139, 92, 246, 0.55), rgba(91, 91, 246, 0.3)); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.45); }
.ic { width: 1em; height: 1em; flex-shrink: 0; border-radius: 0.25em; border: 1.5px solid currentColor; opacity: 0.85; }
.ic-box, .ic-cart { border-radius: 0.2em 0.2em 0.35em 0.35em; }
.ic-coin, .ic-bot { border-radius: 50%; }
.ic-chart { border-width: 0 0 1.5px 1.5px; border-radius: 0; }
.scr-main { display: flex; flex-direction: column; min-width: 0; padding: 1.2em 1.4em; }
.scr-top { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.scr-search { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 1em; border-radius: 0.7em; font-size: 0.85em; color: rgba(226, 224, 245, 0.45); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.scr-search i { width: 0.8em; height: 0.8em; border-radius: 50%; border: 1.5px solid currentColor; }
.scr-user { display: flex; align-items: center; gap: 0.6em; }
.scr-user > i { width: 2em; height: 2em; border-radius: 50%; background: linear-gradient(135deg, #f0abfc, #8b5cf6 55%, #3b82f6); }
.scr-user b { display: block; font-size: 0.9em; }
.scr-user small { display: block; font-size: 0.72em; color: var(--subtle); }
.scr-body { position: relative; flex: 1; margin-top: 1.3em; }
.view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translate3d(0, var(--vy, 0px), 0); }
.view[data-v="0"] { opacity: 1; visibility: visible; }
.v-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; margin-bottom: 1.1em; }
.v-head h4 { margin: 0; font: 700 1.75em/1.1 var(--font-d); letter-spacing: -0.03em; }
.v-head p { margin: 0.35em 0 0; font-size: 0.9em; color: var(--muted); }
.chip { flex-shrink: 0; padding: 0.45em 0.9em; border-radius: 0.6em; font-size: 0.78em; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.chip.ok { color: var(--ok); border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.08); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; }
.kpi { position: relative; padding: 0.9em 0.9em 0; border-radius: 0.8em; background: linear-gradient(170deg, rgba(139, 92, 246, 0.12), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(167, 139, 250, 0.18); overflow: hidden; }
.kpi small { display: block; font-size: 0.75em; color: var(--muted); }
.kpi b { display: block; margin-top: 0.35em; font: 700 1.3em/1.1 var(--font-d); letter-spacing: -0.02em; }
.kpi em { display: block; margin-top: 0.3em; font-style: normal; font-size: 0.75em; font-weight: 700; color: var(--ok); }
.kpi svg { width: calc(100% + 1.8em); height: 3.2em; margin: 0.4em -0.9em 0; }
.kpi .ln { fill: none; stroke: #a855f7; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.kpi .ln.b { stroke: #5b7cfa; }
.kpi .area { fill: rgba(168, 85, 247, 0.22); }
.kpi .area.b { fill: rgba(91, 124, 250, 0.2); }
.v-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.8em; margin-top: 0.8em; }
.mini-card { display: flex; flex-direction: column; gap: 0.5em; padding: 0.8em 0.9em; border-radius: 0.8em; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); }
.mini-card small { font-size: 0.75em; color: var(--muted); }
.mini-card b { font: 700 1.1em/1 var(--font-d); }
.bars { display: flex; align-items: flex-end; gap: 0.3em; height: 2.2em; }
.bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 0.2em 0.2em 0 0; background: linear-gradient(180deg, #a855f7, rgba(91, 91, 246, 0.35)); }
.logos { display: flex; gap: 0.45em; }
.logos img { width: 2.1em; height: 2.1em; border-radius: 0.5em; }
.cat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; }
.prod { position: relative; display: flex; flex-direction: column; gap: 0.15em; padding: 0.6em; border-radius: 0.8em; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); }
.prod.hot { border-color: rgba(167, 139, 250, 0.55); box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.3), 0 0 30px -8px rgba(139, 92, 246, 0.7); }
.prod .ph { display: block; height: 4.6em; margin-bottom: 0.4em; border-radius: 0.55em; overflow: hidden; background: linear-gradient(135deg, #2b2260, #121030); }
.prod .ph img { width: 100%; height: 100%; object-fit: cover; }
.ph.p2 { background: radial-gradient(circle at 50% 40%, #fde68a 0 18%, transparent 19%), linear-gradient(135deg, #3a2a63, #141130); }
.ph.p3 { background: radial-gradient(ellipse at 50% 50%, #f9a8d4 0 22%, transparent 23%), linear-gradient(135deg, #3b2457, #141130); }
.ph.p4 { background: linear-gradient(90deg, transparent 40%, #93c5fd 40% 60%, transparent 60%), linear-gradient(135deg, #20305f, #10132f); }
.ph.p5 { background: radial-gradient(circle at 35% 55%, #c4b5fd 0 14%, transparent 15%), radial-gradient(circle at 65% 55%, #c4b5fd 0 14%, transparent 15%), linear-gradient(135deg, #2d2660, #121030); }
.ph.p6 { background: repeating-linear-gradient(135deg, #34d39955 0 8%, transparent 8% 16%), linear-gradient(135deg, #1d3a44, #0f1a2a); }
.prod b { font-size: 0.82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod small { font-size: 0.72em; color: var(--muted); }
.prod em { position: absolute; right: 0.6em; top: 0.6em; padding: 0.3em 0.6em; border-radius: 0.5em; font-style: normal; font-size: 0.7em; font-weight: 800; color: #fff; background: var(--grad-btn); }
.pub { display: grid; gap: 0.55em; margin: 0; padding: 0; list-style: none; }
.pub li { display: grid; grid-template-columns: 2em 7.5em 1fr 6.5em; align-items: center; gap: 0.8em; padding: 0.6em 0.8em; border-radius: 0.7em; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); }
.pub img { width: 2em; height: 2em; border-radius: 0.45em; }
.pub b { font-size: 0.9em; }
.pub .bar { height: 0.45em; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.pub .bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.pub em { font-style: normal; font-size: 0.78em; font-weight: 700; color: var(--ok); opacity: var(--done, 0); }
.orders { display: grid; gap: 0.5em; margin: 0; padding: 0; list-style: none; }
.orders li { display: grid; grid-template-columns: 5.5em 1fr 6em 6.5em; align-items: center; gap: 0.8em; padding: 0.75em 0.9em; border-radius: 0.7em; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.9em; }
.orders li.new { border-color: rgba(167, 139, 250, 0.6); background: linear-gradient(90deg, rgba(139, 92, 246, 0.2), rgba(255, 255, 255, 0.03)); box-shadow: 0 0 30px -10px rgba(139, 92, 246, 0.8); }
.orders span { color: var(--subtle); font-weight: 700; }
.orders em { font-style: normal; font-weight: 700; }
.st { justify-self: end; padding: 0.3em 0.7em; border-radius: 999px; font-style: normal; font-size: 0.8em; font-weight: 800; color: #c4b5fd; background: rgba(139, 92, 246, 0.18); }
.st.done { color: var(--ok); background: rgba(52, 211, 153, 0.12); }
.st.go { color: #93c5fd; background: rgba(59, 130, 246, 0.18); }
.fin { display: grid; gap: 1.2em; }
.fin small { font-size: 0.85em; color: var(--muted); }
.fin b { display: block; margin-top: 0.2em; font: 700 2.6em/1 var(--font-d); letter-spacing: -0.03em; }
.fin em { display: inline-block; margin-top: 0.6em; padding: 0.35em 0.8em; border-radius: 999px; font-style: normal; font-size: 0.85em; font-weight: 800; color: var(--ok); background: rgba(52, 211, 153, 0.1); }
.bars.big { height: 9em; gap: 0.7em; }

/* ---------- cartões flutuantes (vidro) ---------- */
.glass {
  background: linear-gradient(160deg, rgba(42, 31, 96, 0.9), rgba(13, 10, 30, 0.95));
  border: 1px solid rgba(167, 139, 250, 0.32); border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95), 0 0 50px -14px rgba(124, 58, 237, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.fx { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; will-change: opacity; }
.fx-anchor { position: absolute; left: 50%; top: 50%; }
@media (min-width: 900px) { .fx-anchor { left: 70%; top: 46%; } }
.fx .glass { position: absolute; transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--fd, 0px) + var(--my, 0) * -12px), 0) scale(calc(0.92 + var(--t, 0) * 0.08)); }

/* 0 — abertura: IA, produto publicando e checklist */
.ai-card { left: calc(var(--lw) * 0.04); top: max(calc(var(--lw) * -0.5), calc(104px - 50vh)); display: flex; align-items: center; gap: 14px; width: clamp(310px, calc(var(--lw) * 0.6), 390px); padding: 14px 18px; }
.ai-card b { display: block; font: 600 14px/1.2 var(--font-d); }
.ai-card small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.ai-card svg { flex-shrink: 0; width: 96px; height: 40px; fill: none; stroke: #a78bfa; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px #8b5cf6); animation: ai-wave 1.8s ease-in-out infinite alternate; }
@keyframes ai-wave { from { opacity: 0.45; transform: scaleY(0.7); } to { opacity: 1; transform: scaleY(1.1); } }
.ai-dot { flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; background: radial-gradient(circle, #fff 0 25%, #a78bfa 30%, rgba(139, 92, 246, 0.2) 70%); animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot { 50% { transform: scale(1.2); opacity: 0.7; } }
.pub-card { left: calc(var(--lw) * -0.58); top: calc(var(--lw) * 0.2); display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; width: clamp(270px, calc(var(--lw) * 0.44), 320px); padding: 14px; }
.pub-card .ph { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #fff; }
.pub-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.pub-card small { display: block; font-size: 12px; color: var(--muted); }
.pub-card b { display: block; margin: 2px 0; font: 700 18px/1.1 var(--font-d); }
.pub-card em { font-style: normal; font-weight: 800; color: var(--ok); }
.pub-run { grid-column: 1 / -1; position: relative; display: block; padding: 10px 12px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; text-align: center; background: rgba(139, 92, 246, 0.18); border: 1px solid rgba(167, 139, 250, 0.35); overflow: hidden; }
.pub-run i { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.pub-run i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--grad); transform-origin: 0 50%; animation: fill-bar 3.2s var(--ease) infinite; }
@keyframes fill-bar { from { transform: scaleX(0); } 80%, to { transform: scaleX(1); } }
.check-card { left: min(calc(var(--lw) * 0.05), calc(30vw - 380px)); top: calc(var(--lw) * 0.06); display: grid; gap: 3px; width: max-content; margin: 0; padding: 10px; list-style: none; }
.check-card li { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 6px 7px; border-radius: 9px; font-size: 11.5px; white-space: nowrap; font-weight: 600; background: rgba(255, 255, 255, 0.03); }
.check-card li::before { content: ''; order: -1; width: 18px; height: 18px; flex-shrink: 0; border-radius: 7px; background: linear-gradient(135deg, #8b5cf6, #5b5bf6); box-shadow: 0 0 12px -2px rgba(139, 92, 246, 0.9); }
.check-card li { justify-content: flex-start; }
.check-card i { order: 2; margin-left: auto; width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid rgba(226, 224, 245, 0.3); position: relative; }
.fx.on .check-card i { animation: tick 5s steps(1) infinite; animation-delay: calc(var(--i) * 0.6s); }
.check-card i::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.fx.on .check-card i::after { animation: tick-mark 5s steps(1) infinite; animation-delay: calc(var(--i) * 0.6s); }
@keyframes tick { 0% { background: transparent; border-color: rgba(226, 224, 245, 0.3); } 10%, 92% { background: #6d5bf6; border-color: #a78bfa; box-shadow: 0 0 10px #8b5cf6; } }
@keyframes tick-mark { 0% { opacity: 0; } 10%, 92% { opacity: 1; } }

/* 1 — fornecedor */
.sup-card { left: calc(var(--lw) * -0.48); top: calc(var(--lw) * 0.24); display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; white-space: nowrap; }
.sup-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--ok); background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.35); }
.sup-ico svg { width: 22px; height: 22px; }
.sup-card b { display: block; font: 600 15px/1.2 var(--font-d); }
.sup-card small { font-size: 12.5px; color: var(--muted); }
.stock-card { left: calc(var(--lw) * 0.16); top: calc(var(--lw) * 0.26); padding: 16px 20px; white-space: nowrap; }
.stock-card small { display: block; font-size: 12px; color: var(--muted); }
.stock-card b { display: block; margin-top: 2px; font: 700 28px/1.1 var(--font-d); }
.stock-card span { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--gold-hi); }

/* 2 — anúncios publicados */
.listing { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; white-space: nowrap; }
.listing img { width: 36px; height: 36px; border-radius: 10px; }
.listing b { display: block; font-size: 14px; }
.listing small { display: block; font-size: 12px; color: var(--ok); font-weight: 700; }
.listing em { font-style: normal; margin-left: 6px; font: 700 15px/1 var(--font-d); color: #fff; }
.l1 { left: calc(var(--lw) * -0.5); top: calc(var(--lw) * -0.42); }
.l2 { left: calc(var(--lw) * 0.1); top: calc(var(--lw) * -0.08); }
.l3 { left: calc(var(--lw) * -0.42); top: calc(var(--lw) * 0.2); }

/* 3 — notificação de venda */
.toast { left: calc(var(--lw) * -0.3); top: calc(var(--lw) * 0.16); display: flex; align-items: center; gap: 14px; width: max-content; max-width: 380px; padding: 16px 18px 16px 16px; }
.toast-ico { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: var(--grad-btn); box-shadow: 0 0 24px -4px rgba(139, 92, 246, 0.9); }
.toast-ico svg { width: 22px; height: 22px; }
.toast b { display: block; font: 700 16px/1.2 var(--font-d); letter-spacing: -0.02em; }
.toast span span { font-size: 13px; color: var(--muted); }
.toast em { font-style: normal; font-weight: 800; color: #fff; }
.pulse-ring { position: absolute; left: calc(var(--lw) * -0.35); top: calc(var(--lw) * -0.35); width: calc(var(--lw) * 0.7); height: calc(var(--lw) * 0.7); border-radius: 50%; border: 2px solid rgba(167, 139, 250, 0.8); opacity: 0; }
.fx.on .pulse-ring { animation: ring 1.8s var(--ease) infinite; }
.fx.on .pulse-ring + .pulse-ring { animation-delay: 0.9s; }
@keyframes ring { from { transform: scale(0.6); opacity: 0.7; } to { transform: scale(1.6); opacity: 0; } }

/* 4 — rastreio */
.route { left: calc(var(--lw) * -0.46); top: calc(var(--lw) * 0.2); width: calc(var(--lw) * 0.92); padding: 18px 22px 20px; }
.route-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.route-head b { font: 700 15px/1 var(--font-d); }
.route-head small { font-size: 12px; color: var(--muted); }
.route-line { position: relative; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(226, 224, 245, 0.2) 0 10px, transparent 10px 18px); }
.route-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--route, 0)); border-radius: 4px; background: var(--grad); box-shadow: 0 0 16px rgba(139, 92, 246, 0.8); }
.route-dot { position: absolute; left: 0; right: 0; top: -7px; height: 18px; transform: translateX(calc(var(--route, 0) * 100%)); }
.route-dot::before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin-left: -9px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.35), 0 0 20px #8b5cf6; }
.stops { display: flex; justify-content: space-between; margin-top: 16px; }
.stop { display: grid; gap: 3px; font-size: 12px; color: var(--subtle); text-align: center; }
.stop:first-child { text-align: left; }
.stop:last-child { text-align: right; }
.stop b { font: 600 13px/1.2 var(--font-d); color: var(--ink); }
.stop.done b { color: var(--gold-hi); }

/* 5 — lucro */
.profit { left: calc(var(--lw) * -0.36); top: calc(var(--lw) * 0.14); width: calc(var(--lw) * 0.72); padding: 22px 24px; text-align: center; }
.profit small { display: block; font: 600 11px/1 var(--font-d); letter-spacing: 0.2em; color: var(--muted); }
.profit b { display: block; margin-top: 10px; font: 700 clamp(2.2rem, 4.2vw, 3.6rem)/1 var(--font-d); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(139, 92, 246, 0.6)); }
.profit span { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* celular: notebook no alto, texto embaixo */
@media (max-width: 899px) {
  .stage { --lw: min(84vw, 430px); --box: min(100svh, 780px); --off: calc((100svh - var(--box)) / 2); }
  .scene, .fx-anchor, .laptop-anchor { top: calc(var(--off) + var(--box) * 0.3); }
  .rig { transform: rotateX(-9deg) rotateY(-10deg) translateY(var(--bob, 0px)); }
  .chapter { top: auto; bottom: calc(var(--off) + var(--box) * 0.04); align-items: flex-end; }
  .chapter .t-h3 { font-size: 1.6rem; }
  .chapter .t-lead { margin-top: 12px; font-size: 0.95rem; }
  .chapter .t-kicker { margin-bottom: 12px; }
  .chapter.hero .pill { display: none; }
  .chapter.hero .t-hero { font-size: clamp(2rem, 9vw, 2.8rem); }
  .chapter.hero .t-lead { display: none; }
  .chapter.hero .hero-ctas { margin-top: 18px; }
  .chapter.hero .hero-ctas .btn { height: 50px; padding: 0 20px; }
  .scroll-hint, .perks, .check-card, .stock-card, .ai-card svg { display: none; }
  .glass { border-radius: 14px; }
  .ai-card { left: calc(var(--lw) * -0.2); top: calc(var(--lw) * -0.52); width: calc(var(--lw) * 0.7); padding: 10px 12px; }
  .pub-card { left: calc(var(--lw) * -0.48); top: calc(var(--lw) * 0.08); width: calc(var(--lw) * 0.78); padding: 10px; gap: 8px 10px; }
  .pub-card .ph { width: 48px; height: 48px; }
  .pub-card b { font-size: 15px; }
  .sup-card { left: calc(var(--lw) * -0.48); top: calc(var(--lw) * 0.16); }
  .listing { gap: 8px; padding: 8px 12px 8px 8px; }
  .listing img { width: 28px; height: 28px; }
  .listing b { font-size: 12px; }
  .listing em { display: none; }
  .l1 { left: calc(var(--lw) * -0.5); top: calc(var(--lw) * -0.5); }
  .l2 { left: calc(var(--lw) * 0.02); top: calc(var(--lw) * -0.2); }
  .l3 { left: calc(var(--lw) * -0.46); top: calc(var(--lw) * 0.18); }
  .toast { left: calc(var(--lw) * -0.48); top: calc(var(--lw) * 0.18); max-width: calc(var(--lw) * 0.96); padding: 12px; }
  .route { left: calc(var(--lw) * -0.5); top: calc(var(--lw) * 0.16); width: var(--lw); padding: 14px 16px; }
  .profit { left: calc(var(--lw) * -0.45); top: calc(var(--lw) * 0.1); width: calc(var(--lw) * 0.9); padding: 16px; }
  .planet { right: -60vw; top: -90vw; width: 150vw; }
  .ground { top: calc(var(--off) + var(--box) * 0.42); }
  .horizon { top: calc(var(--off) + var(--box) * 0.42 - 70px); }
  .glow-floor { left: 50%; top: calc(var(--off) + var(--box) * 0.45); }
  .stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(5, 4, 12, 0.94) 42%); }
}

/* entrada ao carregar a página */
.js .hero .chapter-text > *, .js .hero .t-lead, .js .hero .hero-ctas, .js .hero .perks { animation: rise 0.9s var(--ease) both; }
.js .hero .chapter-text > :nth-child(2) { animation-delay: 0.08s; }
.js .hero .t-lead { animation-delay: 0.16s; }
.js .hero .hero-ctas { animation-delay: 0.24s; }
.js .hero .perks { animation-delay: 0.32s; }
.js .scene { animation: rise-scene 1.4s 0.15s var(--ease) both; }
.js .fx[data-fx="0"] .fx-anchor { animation: rise 1.1s 0.6s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes rise-scene { from { opacity: 0; transform: translateY(70px) scale(0.94); } }

/* =========================================================
   SEÇÕES DEPOIS DA HISTÓRIA
   ========================================================= */
.block { position: relative; padding: clamp(90px, 11vw, 150px) 0; }
.block-head { display: grid; gap: 18px; margin-bottom: clamp(44px, 6vw, 72px); }
@media (min-width: 900px) { .block-head { grid-template-columns: 1.7fr 1fr; align-items: end; gap: 60px; } .block-head .t-lead { justify-self: end; margin: 0; } }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
/* brilho de fundo suave em cada bloco */
.block::before { content: ''; position: absolute; left: 50%; top: 0; width: min(1100px, 100vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--line-2), transparent); }

/* do produto à entrega */
.flow { overflow: hidden; background: radial-gradient(60% 50% at 50% 100%, rgba(76, 29, 149, 0.28), transparent 70%); }
.flow::before { display: none; }
.flow-head { display: grid; gap: 26px; margin-bottom: clamp(36px, 5vw, 56px); }
@media (min-width: 900px) { .flow-head { grid-template-columns: 1.6fr 1fr; align-items: end; gap: 60px; } }
.flow-head .pill { margin-bottom: 22px; }
.flow-head .t-lead { max-width: 560px; }
.flow-aside { margin: 0; padding-left: 20px; border-left: 1px solid var(--line-2); color: var(--muted); font-size: 15px; line-height: 1.6; }
.steps { position: relative; z-index: 2; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 40px; } }
.steps li { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: start; align-content: start; gap: 14px 16px; padding: 22px; border-radius: 18px; background: linear-gradient(170deg, rgba(30, 24, 66, 0.7), rgba(10, 8, 24, 0.85)); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: transform 0.4s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease; }
.steps li:hover { transform: translateY(-4px); border-color: rgba(167, 139, 250, 0.55); box-shadow: 0 20px 50px -20px rgba(139, 92, 246, 0.6); }
@media (min-width: 900px) {
  .steps li::after { content: '→'; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--subtle); }
  .steps li:last-child::after { display: none; }
}
.step-n { grid-column: 1 / -1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; font: 700 14px/1 var(--font-d); background: rgba(139, 92, 246, 0.16); border: 1px solid rgba(167, 139, 250, 0.55); box-shadow: 0 0 16px -4px rgba(139, 92, 246, 0.9); }
.step-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: #fff; }
.step-ico svg { width: 22px; height: 22px; }
.step-ico.s1 { background: linear-gradient(135deg, #60a5fa, #3b5bfd); box-shadow: 0 8px 24px -8px #3b5bfd; }
.step-ico.s2 { background: linear-gradient(135deg, #c084fc, #7c3aed); box-shadow: 0 8px 24px -8px #7c3aed; }
.step-ico.s3 { background: linear-gradient(135deg, #fb923c, #ea580c); box-shadow: 0 8px 24px -8px #ea580c; }
.step-ico.s4 { background: linear-gradient(135deg, #4ade80, #16a34a); box-shadow: 0 8px 24px -8px #16a34a; }
.steps h3 { margin: 0; font: 600 15px/1.25 var(--font-d); letter-spacing: -0.01em; }
.steps p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

.wave { position: relative; height: 300px; margin-top: 10px; }
.wave-svg { position: absolute; left: -6%; top: 40px; width: 112%; height: 160px; overflow: visible; }
.wave-svg path { stroke-linecap: round; }
.wave-glow { filter: blur(6px); }
.wave-node { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translate(-50%, -9px); }
.wave-node::before { content: ''; width: 14px; height: 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.4), 0 0 18px 2px #a855f7; }
.wave-node img, .wave-node .plus { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(167, 139, 250, 0.25); transition: transform 0.4s var(--ease); }
.wave-node:hover img { transform: translateY(-4px) rotate(-6deg); }
.wave-node .plus { display: grid; place-items: center; border-radius: 999px; font: 300 30px/1 var(--font-d); color: var(--ink); background: rgba(20, 16, 44, 0.8); border: 1px solid var(--line-2); }
.wave-node b { font: 600 12px/1 var(--font-d); color: var(--muted); white-space: nowrap; }
@media (max-width: 899px) {
  .wave { height: 260px; }
  .wave-node img, .wave-node .plus { width: 40px; height: 40px; border-radius: 12px; }
  .wave-node b { display: none; }
  .wave-node:nth-child(odd) { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 9px)); }
}

/* recursos — painéis que expandem */
.panels { display: grid; gap: 12px; }
@media (min-width: 1000px) { .panels { display: flex; height: 520px; } }
.panel {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  min-height: 260px; padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(170deg, rgba(22, 18, 48, 0.8), rgba(9, 8, 20, 0.9)); cursor: pointer; outline: none;
  transition: flex-grow 0.7s var(--ease), background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
@media (min-width: 1000px) { .panel { flex: 1 1 0; min-width: 0; } .panel.on { flex-grow: 3.4; } }
.panel.on { background: radial-gradient(90% 70% at 100% 0%, rgba(139, 92, 246, 0.3), transparent 65%), linear-gradient(170deg, #17123a, #0a0918 60%); border-color: rgba(167, 139, 250, 0.5); box-shadow: 0 30px 80px -40px rgba(139, 92, 246, 0.7); }
.panel-n { font: 700 13px/1 var(--font-d); color: var(--gold-hi); letter-spacing: 0.1em; }
.panel h3 { margin: 0; font: 600 clamp(1.15rem, 1.6vw, 1.5rem)/1.15 var(--font-d); letter-spacing: -0.02em; }
@media (min-width: 1000px) {
  .panel:not(.on) h3 { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; align-self: flex-start; font-size: 1rem; }
  .panel:not(.on) .panel-body { opacity: 0; visibility: hidden; }
}
.panel-body { display: grid; gap: 22px; transition: opacity 0.5s ease 0.15s; }
.panel-body p { margin: 0; max-width: 460px; color: var(--muted); }
.panel-big { font: 700 clamp(3rem, 6vw, 5.2rem)/0.9 var(--font-d); letter-spacing: -0.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel-big small { display: block; margin-top: 12px; font: 600 11px/1 var(--font-d); letter-spacing: 0.2em; color: var(--subtle); -webkit-text-fill-color: var(--subtle); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid var(--line-2); background: rgba(139, 92, 246, 0.08); }
.chips li b { color: var(--gold-hi); }

/* simulador — calculadora */
.calc { display: grid; border-radius: 26px; border: 1px solid var(--line-2); background: linear-gradient(170deg, rgba(20, 16, 44, 0.85), rgba(8, 7, 18, 0.92)); overflow: hidden; box-shadow: 0 40px 120px -60px rgba(139, 92, 246, 0.6); }
@media (min-width: 1000px) { .calc { grid-template-columns: 1.25fr 1fr; } }
.calc-in { padding: clamp(22px, 3.4vw, 44px); display: grid; gap: 34px; align-content: center; }
.calc-lbl { display: block; font: 600 11px/1.3 var(--font-d); letter-spacing: 0.14em; text-transform: uppercase; color: var(--subtle); }
.calc-lbl em { font-style: normal; letter-spacing: 0.04em; text-transform: none; font-family: var(--font-b); font-weight: 600; }
.channels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
@media (min-width: 640px) { .channels { grid-template-columns: repeat(4, 1fr); } }
.channels button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 10px; border-radius: 12px; font-size: 13px; font-weight: 700; white-space: nowrap; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); transition: all 0.25s var(--ease); }
.channels button img { width: 22px; height: 22px; border-radius: 6px; }
.channels button:hover { border-color: rgba(167, 139, 250, 0.6); }
.channels button[aria-checked='true'] { border-color: var(--gold-hi); background: rgba(139, 92, 246, 0.16); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18); }
.calc-grid { display: grid; gap: 26px 28px; }
@media (min-width: 640px) { .calc-grid { grid-template-columns: 1fr 1fr; } }
.money-in { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); transition: border-color 0.2s ease; }
.money-in:focus-within { border-color: var(--gold-hi); }
.money-in span { font: 600 1rem/1 var(--font-d); color: var(--subtle); }
.money-in input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 700 clamp(1.7rem, 3vw, 2.2rem)/1.1 var(--font-d); letter-spacing: -0.03em; -moz-appearance: textfield; }
.money-in input::-webkit-outer-spin-button, .money-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.money-in input.short { width: 3ch; flex: none; }
.money-in input.short + span { margin-right: auto; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin-top: 8px; background: transparent; cursor: pointer; }
.slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #8b5cf6, #5b6cf6 var(--p, 50%), rgba(226, 224, 245, 0.1) var(--p, 50%)); }
.slider::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(226, 224, 245, 0.1); }
.slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--violet); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 999px; background: #fff; border: 4px solid var(--violet); box-shadow: 0 0 16px rgba(139, 92, 246, 0.8); transition: transform 0.15s ease; }
.slider:active::-webkit-slider-thumb { transform: scale(1.2); }
.slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 999px; background: #fff; border: 4px solid var(--violet); }

.calc-out { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 3.4vw, 44px); background: radial-gradient(90% 70% at 100% 0%, rgba(139, 92, 246, 0.26), transparent 70%), #0d0a22; border-top: 1px solid var(--line); }
@media (min-width: 1000px) { .calc-out { border-top: 0; border-left: 1px solid var(--line); } }
.calc-total { margin-top: 10px; font: 700 clamp(2.6rem, 5.4vw, 4.2rem)/1 var(--font-d); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-year { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.calc-year b { color: var(--ink); }
.split { display: flex; height: 14px; margin-top: 28px; border-radius: 999px; overflow: hidden; background: rgba(226, 224, 245, 0.08); }
.split span { height: 100%; transition: width 0.45s var(--ease); }
.sp-cost, .lg-cost { background: #5b5a72; }
.sp-fee, .lg-fee { background: #3b82f6; }
.sp-profit, .lg-profit { background: #a855f7; }
.legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.legend li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 7px; row-gap: 4px; font-size: 12px; color: var(--subtle); }
.legend li i { width: 8px; height: 8px; border-radius: 3px; }
.legend li b { grid-column: 1 / -1; }
.legend b { font: 600 15px/1.1 var(--font-d); color: var(--ink); font-variant-numeric: tabular-nums; }
.per-sale { margin: 10px 0 0; font-size: 12px; color: var(--subtle); }
.per-sale b { color: var(--muted); }
.health { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 14px; border-radius: 12px; font-size: 13px; color: var(--muted); border: 1px solid; transition: all 0.3s ease; }
.health b { font: 700 18px/1 var(--font-d); }
.health.good { border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.07); }
.health.good b { color: var(--ok); }
.health.mid { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.07); }
.health.mid b { color: #fbbf24; }
.health.bad { border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.08); }
.health.bad b { color: var(--red); }
.calc.loss .calc-total { background: none; color: var(--red); -webkit-text-fill-color: var(--red); }
.calc-cta { margin-top: 24px; justify-content: space-between; }
.calc-note { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--subtle); }

/* comece grátis — faixa */
.trial { position: relative; overflow: hidden; contain: paint; padding: clamp(80px, 10vw, 130px) 0; color: #fff; background: radial-gradient(80% 120% at 85% 0%, rgba(59, 130, 246, 0.55), transparent 60%), linear-gradient(110deg, #5b21b6 0%, #6d28d9 40%, #4338ca 100%); }
.trial::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 120%, rgba(255, 255, 255, 0.12), transparent 40%); }
.trial-marquee { display: flex; gap: 40px; width: max-content; font: 700 clamp(3rem, 9vw, 8rem)/1 var(--font-d); letter-spacing: -0.04em; white-space: nowrap; animation: slide 22s linear infinite; }
.trial-marquee span { display: inline-flex; align-items: center; gap: 40px; }
.trial-marquee i { display: inline-block; width: 0.4em; height: 0.4em; border-radius: 999px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 30px rgba(255, 255, 255, 0.7); }
@keyframes slide { to { transform: translateX(-50%); } }
.trial-body { position: relative; z-index: 1; display: grid; gap: 28px; align-items: center; margin-top: 50px; }
@media (min-width: 900px) { .trial-body { grid-template-columns: 1fr auto; } }
.trial-body p { margin: 0; max-width: 620px; font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 600; }
.trial-body ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.trial-body li { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; }
.btn-dark { color: #4c1d95; background: #fff; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.6); }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -14px rgba(0, 0, 0, 0.7); }

/* planos */
.plans { display: grid; gap: 16px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .plans.single { max-width: 460px; margin: 0 auto; } }
.plan { position: relative; display: flex; flex-direction: column; padding: 34px 30px; border-radius: 24px; border: 1px solid var(--line-2); background: linear-gradient(170deg, rgba(22, 18, 48, 0.85), rgba(9, 8, 20, 0.92)); transition: transform 0.4s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease; }
.plan:hover { transform: translateY(-6px); border-color: rgba(167, 139, 250, 0.5); }
.plan.star { border-color: rgba(167, 139, 250, 0.7); background: radial-gradient(100% 60% at 50% 0%, rgba(139, 92, 246, 0.35), transparent 70%), linear-gradient(170deg, #1b1442, #0b0920); box-shadow: 0 40px 100px -40px rgba(139, 92, 246, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.plan-flag { position: absolute; right: 22px; top: 22px; padding: 6px 12px; border-radius: 999px; font: 700 10px/1 var(--font-d); letter-spacing: 0.12em; color: #fff; background: var(--grad-btn); box-shadow: 0 0 20px -4px rgba(139, 92, 246, 0.9); }
.plan-per { font: 600 11px/1 var(--font-d); letter-spacing: 0.18em; color: var(--subtle); }
.plan h3 { margin: 10px 0 0; font: 700 1.6rem/1 var(--font-d); letter-spacing: -0.03em; }
.plan-val { margin-top: 26px; font: 700 3rem/1 var(--font-d); letter-spacing: -0.04em; }
.plan-val span { font: 600 15px/1 var(--font-b); letter-spacing: 0; color: var(--subtle); }
.plan-desc { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.plan ul { display: grid; gap: 12px; margin: 26px 0 30px; padding: 0; list-style: none; font-size: 14px; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: '✓'; flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(139, 92, 246, 0.35); }
.plan .btn { margin-top: auto; justify-content: space-between; }
.plan:not(.star) .btn-main { background: rgba(139, 92, 246, 0.14); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.45); }
.plans-wait { color: var(--subtle); }
.plans-empty { display: grid; gap: 24px; align-items: center; padding: clamp(28px, 4vw, 44px); border-radius: 24px; border: 1px dashed rgba(167, 139, 250, 0.5); background: rgba(139, 92, 246, 0.05); }
@media (min-width: 900px) { .plans-empty { grid-template-columns: 1fr auto; } }
.plans-empty h3 { margin: 0; font: 700 1.6rem/1.1 var(--font-d); letter-spacing: -0.03em; }
.plans-empty p { margin: 10px 0 0; color: var(--muted); }

/* faq — lista numerada */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: grid; grid-template-columns: 56px 1fr 40px; align-items: center; gap: 12px; padding: 26px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { font: 600 13px/1 var(--font-d); color: var(--subtle); transition: color 0.3s ease; }
.faq summary h3 { margin: 0; font: 600 clamp(1.05rem, 1.8vw, 1.4rem)/1.3 var(--font-d); letter-spacing: -0.02em; transition: color 0.3s ease; }
.faq summary i { position: relative; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-2); transition: transform 0.5s var(--ease), background-color 0.3s ease, border-color 0.3s ease; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--ink); }
.faq summary i::after { transform: rotate(90deg); }
.faq summary:hover h3, .faq details[open] summary h3 { color: var(--gold-hi); }
.faq details[open] summary span { color: var(--gold-hi); }
.faq details[open] summary i { transform: rotate(135deg); background: var(--grad-btn); border-color: transparent; box-shadow: 0 0 20px -4px rgba(139, 92, 246, 0.9); }
.faq-a { padding: 0 52px 28px 68px; color: var(--muted); font-size: 16px; animation: drop 0.5s var(--ease); }
.faq-a p { margin: 0; max-width: 720px; }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }
@media (max-width: 640px) { .faq summary { grid-template-columns: 34px 1fr 36px; } .faq-a { padding: 0 0 24px 46px; } }

/* cta final */
.end { position: relative; overflow: hidden; padding: clamp(110px, 14vw, 190px) 0; text-align: center; }
.end::before { content: ''; position: absolute; left: 50%; top: 50%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 58, 237, 0.3), rgba(59, 130, 246, 0.08) 60%, transparent); }
.end .container { position: relative; }
.end h2 { margin: 0 auto; max-width: 1000px; font: 700 clamp(2.4rem, 6.4vw, 5.6rem)/1.02 var(--font-d); letter-spacing: -0.04em; }
.end p { margin: 26px auto 0; max-width: 520px; color: var(--muted); }
.end .btn { margin-top: 40px; }
.end-icon { width: 96px; height: 96px; margin: 0 auto 36px; border-radius: 24px; box-shadow: 0 0 60px -6px rgba(139, 92, 246, 0.9); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-3deg); } }

/* rodapé */
.foot { padding: 70px 0 30px; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(76, 29, 149, 0.12)); }
.foot-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.5fr repeat(3, 1fr); } }
.foot-grid img { height: 32px; width: auto; }
.foot-grid > div p { margin: 16px 0 0; max-width: 300px; color: var(--muted); font-size: 14px; }
.foot h2 { margin: 0 0 16px; font: 600 11px/1 var(--font-d); letter-spacing: 0.18em; color: var(--subtle); }
.foot ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.foot ul a { font-size: 14px; color: var(--muted); transition: color 0.2s ease; }
.foot ul a:hover { color: var(--gold-hi); }
.foot-word { margin-top: 60px; font: 800 clamp(4rem, 17vw, 15rem)/0.8 var(--font-d); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px rgba(167, 139, 250, 0.16); text-align: center; user-select: none; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 30px; font: 600 11px/1 var(--font-d); letter-spacing: 0.14em; color: var(--subtle); }

/* ---------- movimento reduzido: história vira lista estática ---------- */
.static .story { height: auto; }
.static .stage { position: relative; height: auto; overflow: visible; }
.static .scene, .static .fx, .static .rail, .static .stage::after, .static .scroll-hint { display: none; }
.static .chapters { position: static; }
.static .chapter { position: static; transform: none; opacity: 1; visibility: visible; padding: 90px 0; border-bottom: 1px solid var(--line); }
.static .chapter.hero { padding-top: 140px; }
.static .chapter .container > * { transform: none; }
.static .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* utilitários */
.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; }
.story-mark { position: absolute; left: 0; width: 1px; height: 1px; }

/* importado × droppilot — tabela tipográfica */
.versus { border-radius: 24px; border: 1px solid var(--line-2); background: linear-gradient(170deg, rgba(20, 16, 44, 0.7), rgba(8, 7, 18, 0.85)); overflow: hidden; }
.vs-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 20px 22px; border-bottom: 1px solid var(--line); transition: background-color 0.3s ease; }
.vs-row:last-child { border-bottom: 0; }
.vs-row:not(.vs-head):hover { background: rgba(139, 92, 246, 0.06); }
.vs-row span:first-child { font: 600 11px/1.4 var(--font-d); letter-spacing: 0.16em; text-transform: uppercase; color: var(--subtle); }
.vs-row span:nth-child(2) { font-size: 1.05rem; color: rgba(226, 224, 245, 0.42); text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, 0.6); }
.vs-row span:nth-child(3) { font: 600 clamp(1.15rem, 2vw, 1.55rem)/1.15 var(--font-d); letter-spacing: -0.02em; }
.vs-head { display: none; }
@media (min-width: 800px) {
  .vs-row { grid-template-columns: 1.1fr 1fr 1.2fr; align-items: center; gap: 24px; padding: 24px 30px; }
  .vs-head { display: grid; background: rgba(139, 92, 246, 0.06); }
  .vs-head span { font: 600 11px/1 var(--font-d) !important; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none !important; color: var(--subtle); }
}
.vs-row span:nth-child(3)::before { content: '✓'; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 999px; font-size: 12px; font-weight: 800; vertical-align: 3px; color: #fff; background: var(--grad-btn); }
.vs-head span:nth-child(3)::before { display: none; }

/* Lenis (rolagem suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* progresso da história */
.story-progress { position: absolute; z-index: 5; left: max(22px, calc((100vw - 1280px) / 2 + 48px)); bottom: 26px; display: flex; align-items: center; gap: 14px; font: 600 11px/1 var(--font-d); letter-spacing: 0.16em; color: var(--subtle); pointer-events: none; }
.story-progress i { position: relative; display: block; width: 160px; height: 2px; border-radius: 2px; background: rgba(226, 224, 245, 0.12); overflow: hidden; }
.story-progress b { position: absolute; inset: 0; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.story-progress span { min-width: 54px; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .story-progress { display: none; } }

/* =========================================================
   CELULAR — ajustes finos
   ========================================================= */
@media (max-width: 640px) {
  /* recursos viram sanfona (um aberto por vez) */
  .panels { gap: 8px; }
  .panel { min-height: 0; padding: 18px 20px; gap: 0; border-radius: 18px; }
  .panel > .panel-n { position: absolute; right: 20px; top: 20px; }
  .panel h3 { padding-right: 34px; font-size: 1.05rem; }
  .panel:not(.on) .panel-body { display: none; }
  .panel.on .panel-body { margin-top: 18px; animation: drop 0.4s var(--ease); }
  .panel-big { font-size: 2.6rem; }

  .trial-body ul { gap: 6px; }
  .trial-body li { padding: 6px 10px; font-size: 10px; }
  .trial-body .btn { width: 100%; justify-content: space-between; }

  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .foot-word { margin-top: 40px; }
  .foot-bottom { justify-content: center; text-align: center; line-height: 1.8; }

  .block { padding: 76px 0; }
  .block-head { margin-bottom: 36px; }
  .plan { padding: 28px 22px; }
  .end h2 { font-size: clamp(2rem, 10vw, 3rem); }
}
.only-mob { display: none; }
@media (max-width: 640px) { .only-mob { display: inline; } .only-desk { display: none; } }

/* FAQ: 2 por linha no desktop (no celular continua uma abaixo da outra) */
@media (min-width: 900px) {
  .faq { grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; border-top: 0; }
  .faq details:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .faq summary { grid-template-columns: 44px 1fr 40px; }
  .faq summary h3 { font-size: clamp(1rem, 1.3vw, 1.15rem); }
  .faq-a { padding: 0 52px 26px 56px; }
}

/* ---------- robôs: preço das ferramentas da Loja ---------- */
.tool-price { font-size: 13px; font-weight: 800; color: var(--ink); }
.tool-price:empty { display: none; }
.tool-price small { font-weight: 600; color: var(--subtle); }