/* ==========================================================================
   zkkTools — camada visual compartilhada (efeitos da home nas demais páginas)
   Entra DEPOIS do CSS de cada página e só adiciona: fundo vivo, barra de
   progresso, letras animadas no título, revelação ao rolar, brilho nos cards,
   botões com shine e o par "Baixar Free / Comprar Premium".
   - Nada fica escondido sem o JS (.fx-js só é aplicado após o JS registrar tudo).
   - prefers-reduced-motion: sem movimento.
   ========================================================================== */
/* Fonte de exibição hospedada no próprio site (SIL OFL 1.1 — ver assets/fonts/UNBOUNDED-OFL.txt).
   Subconjunto latino cobre português e inglês; sem pedido a terceiros, sem depender do aceite de cookies. */
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/assets/fonts/unbounded-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@property --fx-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --fx-flow { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --fx-ease: cubic-bezier(.16, 1, .3, 1);
  --fx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fx-display: "Unbounded", "Space Grotesk", "Bahnschrift", "Segoe UI Variable Display", Inter, system-ui, sans-serif;
  --fx-grad: linear-gradient(90deg, #ffd6ff, #d56cff, #9b32ff, #d56cff, #ffd6ff);
  --fx-line: rgba(255, 255, 255, .09);
}
html[data-theme="light"] { --fx-grad: linear-gradient(90deg, #c28bf5, #9a3ce0, #6614bb, #9a3ce0, #c28bf5); --fx-line: rgba(20, 10, 30, .1); }

/* ---------- Fundo vivo + barra de progresso (injetados pelo JS) ---------- */
.fx-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-bg i { position: absolute; width: 56vmax; height: 56vmax; border-radius: 50%; filter: blur(90px); opacity: .62; will-change: transform; animation: fx-drift 28s ease-in-out infinite alternate; }
.fx-bg i:nth-child(1) { top: -24vmax; left: -16vmax; background: radial-gradient(circle, rgba(155, 50, 255, .55), transparent 65%); }
.fx-bg i:nth-child(2) { right: -22vmax; top: 22vh; background: radial-gradient(circle, rgba(79, 139, 255, .3), transparent 65%); animation-duration: 34s; animation-delay: -9s; }
.fx-bg i:nth-child(3) { left: 16vw; bottom: -32vmax; background: radial-gradient(circle, rgba(213, 108, 255, .28), transparent 65%); animation-duration: 40s; animation-delay: -16s; }
.fx-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 14%, rgba(155, 50, 255, .22), transparent 32%), radial-gradient(circle at 10% 12%, rgba(180, 120, 255, .14), transparent 28%), linear-gradient(180deg, rgba(155, 90, 255, .12), transparent 50%); }
.fx-bg b { position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(var(--fx-line) 1px, transparent 1px), linear-gradient(90deg, var(--fx-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 18%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 18%, #000, transparent 75%); }
html[data-theme="light"] .fx-bg i { opacity: .3; }
html[data-theme="light"] .fx-bg::before { opacity: .6; }
@keyframes fx-drift { to { transform: translate3d(7vmax, 5vmax, 0) scale(1.12); } }
.fx-progress { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #9b32ff, #d56cff, #4f8bff); box-shadow: 0 0 12px rgba(155, 50, 255, .6); pointer-events: none; }

/* ---------- Revelação ao rolar ---------- */
.fx-js [data-fx] { opacity: 0; transform: translate3d(0, 38px, 0); transition: opacity .85s var(--fx-ease), transform .85s var(--fx-ease); transition-delay: var(--d, 0ms); }
.fx-js [data-fx="zoom"] { transform: scale(.94); }
.fx-js [data-fx].is-in { opacity: 1; transform: none; }

/* ---------- Título com letras personalizadas ---------- */
.fx-h1 { perspective: 900px; }
.fx-w { display: inline-block; white-space: nowrap; max-width: 100%; overflow-wrap: anywhere; }
.fx-ch { display: inline-block; transform-origin: 50% 100%; }
.fx-js .fx-h1 .fx-ch { opacity: 0; transform: translate3d(0, .85em, 0) rotateX(-80deg) scale(.9); filter: blur(8px); transition: opacity .7s var(--fx-ease), transform .9s var(--fx-spring), filter .7s var(--fx-ease); transition-delay: calc(var(--base, 80ms) + var(--i) * 28ms); }
.fx-js .fx-h1.is-in .fx-ch { opacity: 1; transform: none; filter: none; }
.fx-js .fx-h1.is-done .fx-ch { transition: transform .5s var(--fx-spring), text-shadow .35s ease; transition-delay: 0s; }
@media (hover: hover) { .fx-h1.is-done .fx-ch:hover { transform: translate3d(0, -.12em, 0) rotate(-4deg) scale(1.08); text-shadow: 0 0 .5em rgba(213, 108, 255, .75); } }
/* gradiente fluido: cada letra mostra o trecho correspondente (--t = posição, --n = total) */
.fx-h1 { --fx-flow: 0; animation: fx-flow 8s ease-in-out infinite alternate; background: none !important; -webkit-text-fill-color: initial !important; }
.fx-h1 .fx-ch { color: #bc5cff; background: var(--fx-grad); background-repeat: repeat-x; background-size: calc(var(--n, 1) * 100%) 100%; background-position: calc((var(--t, 0) + var(--fx-flow)) * 100%) 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@keyframes fx-flow { from { --fx-flow: 0; } to { --fx-flow: .6; } }
.fx-h1.is-in .fx-ch { animation: fx-wave 7s var(--fx-ease) infinite; animation-delay: calc(3s + var(--i) * 60ms); }
@keyframes fx-wave { 0%, 28%, 100% { transform: none; } 12% { transform: translate3d(0, -.07em, 0); filter: drop-shadow(0 0 .35em rgba(226, 160, 255, .9)); } }
.fx-title { font-family: var(--fx-display) !important; letter-spacing: -.03em; text-wrap: balance; }

/* ---------- Cards: brilho que segue o cursor + elevação ---------- */
.fx-card { transition: transform .5s var(--fx-ease), border-color .3s ease, box-shadow .45s ease, background-color .3s ease; }
@media (hover: hover) { .fx-card:hover { border-color: rgba(188, 92, 255, .55); } }

/* ---------- Botões principais: shine + elevação (mesmo visual da home) ---------- */
.fx-btn { position: relative; isolation: isolate; overflow: hidden; transition: transform .45s var(--fx-spring), box-shadow .35s ease, filter .3s ease; }
.fx-btn::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -45%; width: 30%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-22deg); animation: fx-shine 4.4s ease-in-out infinite; }
.fx-btn:hover { transform: translate3d(0, -3px, 0) scale(1.02); box-shadow: 0 16px 44px rgba(193, 59, 234, .5); }
@keyframes fx-shine { 0%, 55% { left: -45%; } 100% { left: 130%; } }

/* ---------- Par "Baixar Free / Comprar Premium" ---------- */
.fx-cta { position: relative; max-width: 1100px; margin: 80px auto 40px; padding: clamp(44px, 7vw, 76px) clamp(20px, 5vw, 56px); border: 1px solid rgba(188, 92, 255, .4); border-radius: 30px; text-align: center; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 0%, rgba(155, 50, 255, .28), transparent 62%), rgba(12, 10, 20, .72); backdrop-filter: blur(10px); }
html[data-theme="light"] .fx-cta { background: radial-gradient(ellipse at 50% 0%, rgba(155, 50, 255, .16), transparent 62%), rgba(255, 255, 255, .8); }
.fx-cta h2 { margin: 0 0 14px; font-family: var(--fx-display); font-size: clamp(24px, 3.6vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; color: #fff; text-wrap: balance; }
html[data-theme="light"] .fx-cta h2 { color: #14101c; }
.fx-cta p { margin: 0 auto 30px; max-width: 560px; color: #a3a3ad; font-size: 16px; line-height: 1.7; }
html[data-theme="light"] .fx-cta p { color: #4a4453; }
.fx-cta .fx-ring { position: absolute; z-index: -1; left: 50%; top: 50%; width: 760px; height: 760px; border: 1px dashed rgba(188, 92, 255, .22); border-radius: 50%; translate: -50% -50%; animation: fx-rot 22s linear infinite; }
@keyframes fx-rot { to { rotate: 360deg; } }
.cta-section .fx-choice { margin: 6px auto 0; }

.fx-choice { position: relative; isolation: isolate; display: flex; gap: 4px; width: min(100%, 560px); margin: 0 auto; padding: 4px; border-radius: 26px; background: rgba(15, 12, 22, .78); box-shadow: 0 22px 60px rgba(0, 0, 0, .4), 0 0 46px rgba(145, 45, 255, .22); text-align: left; }
html[data-theme="light"] .fx-choice { background: rgba(255, 255, 255, .85); box-shadow: 0 18px 50px rgba(80, 30, 140, .2); }
.fx-choice::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--fx-ang), transparent 0 60%, #e2a0ff 80%, #4f8bff 92%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: fx-spin 6s linear infinite; }
@keyframes fx-spin { to { --fx-ang: 360deg; } }
.fx-choice__glow { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); overflow: hidden; border-radius: 22px; background: linear-gradient(125deg, #8e22f4, #c13bea 62%, #ff4f9a); box-shadow: 0 10px 30px rgba(155, 50, 255, .5); transform: translateX(calc(100% + 4px)); transition: transform .44s var(--fx-ease); }
.fx-choice__glow::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 32%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-22deg); animation: fx-shine 4.2s ease-in-out infinite; }
.fx-choice:has(.fx-choice__free:hover) .fx-choice__glow, .fx-choice:has(.fx-choice__free:focus-visible) .fx-choice__glow { transform: translateX(0); }
.fx-choice:has(.fx-choice__premium:hover) .fx-choice__glow, .fx-choice:has(.fx-choice__premium:focus-visible) .fx-choice__glow { transform: translateX(calc(100% + 4px)); }
.fx-choice a { display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex: 1; min-width: 0; min-height: 78px; padding: 10px 20px; border-radius: 22px; color: #fff !important; text-decoration: none !important; transition: transform .36s var(--fx-ease); }
.fx-choice a:hover { transform: translate3d(0, -2px, 0); }
.fx-choice a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fx-choice__free { color: #fff; }
html[data-theme="light"] .fx-choice__free { color: #14101c !important; }
.fx-choice__ico { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 13px; background: rgba(255, 255, 255, .14); font-size: 19px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 14px rgba(0, 0, 0, .18); }
html[data-theme="light"] .fx-choice__free .fx-choice__ico { background: rgba(124, 31, 214, .1); }
.fx-choice__premium .fx-choice__ico { animation: fx-pulse 2.8s ease-in-out infinite; }
@keyframes fx-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 0 rgba(255, 255, 255, .35); } 60% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 9px rgba(255, 255, 255, 0); } }
.fx-choice__txt { display: flex; flex-direction: column; min-width: 0; }
.fx-choice strong { font-family: var(--fx-display); font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; }
.fx-choice small { margin-top: 4px; font-size: 11.5px; line-height: 1.2; white-space: nowrap; color: rgba(255, 255, 255, .78); }
.fx-choice__free small { color: #a3a3ad; }
html[data-theme="light"] .fx-choice__free small { color: #4a4453; }

@media (max-width: 640px) {
  .fx-choice { flex-direction: column; }
  .fx-choice__glow { display: none; }
  .fx-choice__premium { background: linear-gradient(125deg, #8e22f4, #c13bea 62%, #ff4f9a); }
  .fx-cta .fx-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-bg i, .fx-h1, .fx-h1 .fx-ch, .fx-btn::after, .fx-choice::after, .fx-choice__glow::after, .fx-choice__premium .fx-choice__ico, .fx-cta .fx-ring { animation: none !important; }
  .fx-progress { display: none; }
}

/* Identificadores/caminhos longos em <code> (Patch Notes etc.) quebram linha em vez de alargar a página no celular */
li code, p code, td code, dd code { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.changes-list li { overflow-wrap: anywhere; }

/* ==========================================================================
   Acabamento visual compartilhado (todas as páginas, exceto a home)
   ========================================================================== */
::selection { background: rgba(155, 50, 255, .45); color: #fff; }
html { scrollbar-color: rgba(155, 50, 255, .6) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 10px; background: linear-gradient(180deg, #9b32ff, #6510b9); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #bc5cff; outline-offset: 3px; border-radius: 8px; }

/* Títulos de seção ganham uma barra de acento */
.section-title::after { content: ""; display: block; width: 64px; height: 4px; margin: 16px auto 0; border-radius: 4px; background: linear-gradient(90deg, #9b32ff, #d56cff, #4f8bff); box-shadow: 0 0 18px rgba(155, 50, 255, .55); }

/* Cards: relevo sutil e elevação ao passar o mouse */
.fx-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px rgba(0, 0, 0, .2); }
@media (hover: hover) { .fx-card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 56px rgba(120, 30, 210, .22); } }
html[data-theme="light"] .fx-card { box-shadow: 0 10px 30px rgba(60, 20, 100, .1); }
.fx-card .feature-icon, .fx-card .card-icon { box-shadow: 0 0 0 1px rgba(188, 92, 255, .25), 0 10px 26px rgba(155, 50, 255, .25); transition: transform .5s var(--fx-spring); }
.fx-card:hover .feature-icon, .fx-card:hover .card-icon { transform: translate3d(0, -3px, 0) rotate(-3deg) scale(1.05); }

/* Tabela de comparação: moldura, coluna Premium em destaque e linhas interativas */
.comparison-table { border-collapse: separate !important; border-spacing: 0; overflow: hidden; border-radius: 18px; border: 1px solid rgba(155, 50, 255, .28); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.comparison-table th:last-child, .comparison-table td:last-child { background: linear-gradient(180deg, rgba(155, 50, 255, .14), rgba(155, 50, 255, .05)); }
.comparison-table th:last-child { color: #e2b8ff; box-shadow: inset 0 2px 0 #bc5cff; }
.comparison-table tbody tr { transition: background-color .25s ease; }
.comparison-table tbody tr:hover td { background-color: rgba(155, 50, 255, .1); }
.comparison-table .checkmark { transition: transform .35s var(--fx-spring); }
.comparison-table tr:hover .checkmark { transform: scale(1.3); }
html[data-theme="light"] .comparison-table th:last-child { color: #6614bb; }

/* Páginas legais: leitura confortável e títulos com marca lateral */
[data-fx-page="eula"] h2, [data-fx-page="terms"] h2, [data-fx-page="privacy"] h2, [data-fx-page="license"] h2, [data-fx-page="refund-policy"] h2 { position: relative; padding-left: 16px; text-align: left; }
[data-fx-page="eula"] h2::before, [data-fx-page="terms"] h2::before, [data-fx-page="privacy"] h2::before, [data-fx-page="license"] h2::before, [data-fx-page="refund-policy"] h2::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #d56cff, #6510b9); }
[data-fx-page="eula"] p, [data-fx-page="terms"] p, [data-fx-page="privacy"] p, [data-fx-page="license"] p, [data-fx-page="refund-policy"] p, [data-fx-page="eula"] li, [data-fx-page="terms"] li, [data-fx-page="privacy"] li, [data-fx-page="license"] li, [data-fx-page="refund-policy"] li { line-height: 1.8; }

/* FAQ: itens com resposta mais legível e destaque ao interagir */
.faq-item { transition: border-color .3s ease, background-color .3s ease, transform .4s var(--fx-ease); }
.faq-question { transition: color .25s ease; }
.faq-item:hover .faq-question-text { color: #e2b8ff; }
.faq-toggle { transition: transform .4s var(--fx-spring), color .25s ease; }

/* Rodapé: linha de luz no topo */
.zkk-footer { position: relative; }
.zkk-footer::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(188, 92, 255, .7), transparent); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .fx-card .feature-icon, .fx-card .card-icon, .comparison-table .checkmark { transition: none; }
}

/* ---------- Responsividade: rede de segurança contra rolagem horizontal ---------- */
html { overflow-x: clip; }
body.zkk .premium-sales-hero h1 { font-size: clamp(29px, 8.6vw, 70px); overflow-wrap: anywhere; }
body.zkk .premium-sales-hero { padding-inline: clamp(18px, 4vw, 32px); }
body.thanks-page .thanks-card { box-sizing: border-box; max-width: 100%; }
body.thanks-page .thanks-card h1, body.thanks-page .thanks-copy { overflow-wrap: anywhere; }
.account-main .account-sidebar, .account-main .container > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 420px) {
  .account-main .sidebar-nav { grid-template-columns: 1fr 1fr; }
}