/* ============ Página de funcionalidades ============ */
.fx-hero { position: relative; padding: 56px 0 8px; overflow: hidden; }
.fx-hero::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 700px; z-index: -1;
  background: radial-gradient(45% 50% at 80% 30%, rgba(143,130,255,.25), transparent 70%),
              radial-gradient(35% 40% at 5% 0%, rgba(255,195,166,.3), transparent 70%);
}
.fx-hero h1 { font-size: clamp(42px, 6.4vw, 84px); letter-spacing: -.045em; line-height: .98; margin: 6px 0 22px; max-width: 14ch; }
.fx-hero .lead { margin-bottom: 0; }
.fx-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.fx-filter button {
  height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  font: 600 14px var(--font); color: var(--ink-2); cursor: pointer; transition: all .2s var(--ease);
}
.fx-filter button:hover { border-color: var(--lav); }
.fx-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.fx-count { margin-left: 8px; font-size: 14px; color: var(--muted); }

.fx-body { padding-bottom: 120px; }
.fx-group { margin-top: 64px; }
.fx-group[hidden] { display: none; }
.fx-gtitle { display: flex; align-items: baseline; gap: 14px; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.fx-gtitle span { font: italic 400 22px var(--serif); color: var(--violet); }
.fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fx {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 22px 22px; box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s;
}
.fx[hidden] { display: none; }
.fx:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.fx-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fx-n { font: italic 400 18px var(--serif); color: var(--muted); margin-right: auto; }
.pl { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.fx h3 { font-size: 20px; letter-spacing: -.015em; margin: 16px 0 8px; line-height: 1.2; }
.fx p { font-size: 15px; color: var(--ink-2); }
.fx p kbd { font-size: .78em; }
.fx-empty { text-align: center; color: var(--muted); padding: 60px 0; }

/* ---------- Primitivos das animações ---------- */
.vz {
  --d: 5s;
  position: relative; margin-top: auto; height: 200px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, #F1EEFF, #E4DEFF); display: grid; place-items: center;
}
.fx > p { margin-bottom: 22px; }
.vz *, .vz *::before, .vz *::after { animation-duration: var(--d); animation-iteration-count: infinite; animation-timing-function: var(--ease); }
.mf {
  --c: var(--k-txt);
  display: inline-block; width: 30px; height: 38px; border-radius: 5px; background: #fff; border: 1.5px solid #D6D0EE; position: relative; flex: none;
  clip-path: polygon(0 0, 68% 0, 100% 24%, 100% 100%, 0 100%); box-shadow: 0 4px 10px -4px rgba(23,20,43,.3);
}
.mf::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 6px; height: 6px; border-radius: 2px; background: var(--c); }
.kc {
  display: inline-grid; place-items: center; min-width: 44px; height: 42px; padding: 0 12px; border-radius: 10px;
  background: #fff; font: 600 14px var(--font); color: var(--ink); box-shadow: 0 4px 0 #CFC8EE, 0 0 0 1px rgba(23,20,43,.06);
}
.pn { background: #fff; border-radius: 14px; box-shadow: 0 10px 30px -12px rgba(67,48,174,.35), 0 0 0 1px rgba(23,20,43,.05); }
.cur { width: 22px; height: 22px; position: absolute; }
@keyframes press { 0%, 8%, 30%, 100% { transform: none; box-shadow: 0 4px 0 #CFC8EE, 0 0 0 1px rgba(23,20,43,.06); } 12%, 24% { transform: translateY(3px); box-shadow: 0 1px 0 #CFC8EE, 0 0 0 2px var(--violet); } }

/* #01 atalho */
.vz-hotkey { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.vz-hotkey .keys { display: flex; gap: 8px; }
.vz-hotkey .kc { animation-name: press; }
.vz-hotkey .kc:nth-child(2) { animation-delay: .15s; }
.vz-hotkey .kc:nth-child(3) { animation-delay: .3s; }
.vz-hotkey .pop { display: flex; gap: 8px; padding: 12px 16px; animation-name: popin; }
@keyframes popin { 0%, 28% { opacity: 0; transform: translateY(12px) scale(.9); } 38%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px) scale(.96); } }

/* #02 arrastar para dentro */
.vz-dragin .target { position: absolute; right: 9%; top: 18%; width: 42%; height: 64%; border: 2px dashed var(--lav); box-shadow: none; background: rgba(255,255,255,.6); display: grid; place-items: center; animation-name: glow; }
.vz-dragin .landed { animation-name: landed; }
.vz-dragin .mover { position: absolute; animation-name: dragin; }
.vz-dragin .mover .cur { left: 18px; top: 26px; }
@keyframes dragin { 0% { left: 8%; top: 30%; opacity: 0; } 10% { left: 8%; top: 30%; opacity: 1; } 48% { left: 68%; top: 40%; opacity: 1; } 52%, 100% { left: 68%; top: 40%; opacity: 0; } }
@keyframes glow { 0%, 38%, 62%, 100% { border-color: var(--lav); background: rgba(255,255,255,.6); } 45%, 55% { border-color: var(--violet); background: rgba(231,227,255,.9); } }
@keyframes landed { 0%, 50% { opacity: 0; transform: translateY(-20px) scale(.8); } 60%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* #03 colar */
.vz-paste { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.vz-paste .keys { display: flex; gap: 8px; }
.vz-paste .kc { animation-name: press; }
.vz-paste .kc:nth-child(2) { animation-delay: .15s; }
.vz-paste .note { width: 70%; padding: 12px 14px; display: grid; gap: 7px; animation-name: popin; }
.vz-paste .note b { font-size: 12px; color: var(--violet); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-paste .note i { height: 7px; border-radius: 4px; background: var(--paper-2); }
.vz-paste .note i:last-child { width: 60%; }

/* #04 menu de contexto */
.vz-context .menu { width: 64%; padding: 8px; display: grid; gap: 4px; }
.vz-context .menu > i { height: 26px; border-radius: 8px; background: linear-gradient(90deg, var(--paper-2) 60%, transparent 60%); background-size: 100% 8px; background-repeat: no-repeat; background-position: 10px 50%; }
.vz-context .hit { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; animation-name: hit; }
.vz-context .hit svg { width: 16px; height: 16px; flex: none; }
.vz-context .hit em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-context .cur { animation-name: ctxcur; left: 20%; top: 85%; }
@keyframes hit { 0%, 40%, 85%, 100% { background: transparent; color: var(--ink); } 48%, 78% { background: var(--violet); color: #fff; } }
@keyframes ctxcur { 0%, 10% { left: 18%; top: 88%; } 42%, 80% { left: 55%; top: 50%; } 100% { left: 18%; top: 88%; } }

/* #05 Gmail */
.vz-gmail .mail { position: absolute; left: 8%; top: 14%; width: 60%; padding: 14px; display: grid; gap: 8px; }
.vz-gmail .mail i { height: 7px; border-radius: 4px; background: var(--paper-2); }
.vz-gmail .mail .l1 { width: 50%; background: #E0DBF5; }
.vz-gmail .mail .l3 { width: 70%; }
.att { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 6px 10px 6px 6px; border-radius: 9px; background: #fff; border: 1px solid var(--line); font-size: 11.5px; font-weight: 500; }
.att b { font-size: 9px; color: #fff; background: var(--k-pdf); padding: 3px 5px; border-radius: 4px; }
.vz-gmail .fly { position: absolute; left: calc(8% + 14px); top: calc(14% + 72px); animation-name: gfly; box-shadow: 0 8px 20px -8px rgba(23,20,43,.4); }
.vz-gmail .tray { position: absolute; right: 8%; bottom: 12%; width: 56px; height: 56px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); animation-name: trayhit; }
.vz-gmail .tray svg { width: 36px; height: 36px; }
@keyframes gfly { 0%, 20% { transform: none; opacity: 0; } 25% { opacity: 1; transform: none; } 60% { transform: translate(120px, 60px) scale(.5); opacity: 1; } 66%, 100% { transform: translate(120px, 60px) scale(.3); opacity: 0; } }
@keyframes trayhit { 0%, 58%, 76%, 100% { transform: none; } 64% { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(106,85,230,.2); } }

/* #06 compartilhar iPhone */
.vz-share { place-items: end center; }
.vz-share .sheet { width: 78%; height: 78%; background: #F7F6FB; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px -14px rgba(67,48,174,.4); padding: 18px 16px; }
.vz-share .apps { display: flex; justify-content: space-between; align-items: flex-start; }
.vz-share .apps > i { width: 42px; height: 42px; border-radius: 11px; background: #DAD5EE; }
.vz-share .pouso { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; animation-name: bounce; }
.vz-share .pouso svg { width: 42px; height: 42px; border-radius: 11px; }
.vz-share .pouso em { font-style: normal; }
.vz-share .rows { margin-top: 18px; display: grid; gap: 8px; }
.vz-share .rows i { height: 30px; border-radius: 9px; background: #fff; }
@keyframes bounce { 0%, 30%, 60%, 100% { transform: none; } 40% { transform: translateY(-8px); } 50% { transform: translateY(0) scale(.94); filter: drop-shadow(0 0 0 transparent); } 52% { filter: drop-shadow(0 0 8px var(--violet)); } }

/* #07 prateleiras */
.vz-shelves { grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; place-items: stretch; }
.vz-shelves .col { background: #fff; border-radius: 14px; padding: 10px; box-shadow: var(--shadow); }
.vz-shelves .col b { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-shelves .col b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.vz-shelves .col div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vz-shelves .moving { position: absolute; animation-name: shelfmove; }
@keyframes shelfmove { 0%, 15% { left: 22%; top: 66%; transform: none; } 50% { top: 36%; transform: rotate(8deg) scale(1.08); } 75%, 100% { left: 70%; top: 58%; transform: none; } }

/* #08 busca */
.vz-search .pn { width: 82%; padding: 10px; display: grid; gap: 6px; }
.vz-search .q { height: 34px; border-radius: 9px; box-shadow: inset 0 0 0 2px var(--violet); display: flex; align-items: center; padding: 0 12px; font-size: 13px; }
.vz-search .q span { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; animation-name: typing6; animation-timing-function: steps(6); }
.vz-search .q::after { content: ""; width: 2px; height: 16px; background: var(--violet); margin-left: 1px; }
@keyframes typing6 { 0%, 10% { width: 0; } 40%, 90% { width: var(--len, 6ch); } 100% { width: 0; } }
.vz-search .r { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; font-size: 12px; }
.vz-search .r .mf { width: 20px; height: 25px; }
.vz-search .r .mf::after { bottom: 4px; height: 4px; left: 3px; right: 3px; }
.vz-search .r b { font-weight: 500; }
.vz-search .hit { animation-name: rowhit; }
.vz-search .f1, .vz-search .f2 { animation-name: rowfade; }
@keyframes rowhit { 0%, 40%, 95%, 100% { background: transparent; } 48%, 88% { background: var(--violet-soft); } }
@keyframes rowfade { 0%, 36%, 96%, 100% { opacity: 1; max-height: 40px; } 46%, 90% { opacity: 0; max-height: 0; padding-block: 0; } }

/* #09 OCR */
.vz-ocr .receipt { position: relative; width: 46%; height: 82%; background: #fff; border-radius: 6px; padding: 14px 12px; display: grid; gap: 8px; align-content: start; box-shadow: var(--shadow); transform: rotate(-3deg); overflow: hidden; }
.vz-ocr .receipt i { height: 6px; border-radius: 3px; background: #D9D5E8; width: 80%; }
.vz-ocr .receipt i.w { width: 100%; }
.vz-ocr .receipt i:first-child { width: 55%; height: 9px; background: #BDB6DA; }
.vz-ocr .hl { position: absolute; left: 0; right: 0; top: 0; height: 0; background: rgba(143,130,255,.18); animation-name: ocrhl; }
.vz-ocr .scan { position: absolute; left: -10%; right: -10%; height: 3px; top: 0; background: var(--violet); box-shadow: 0 0 14px 3px rgba(106,85,230,.6); animation-name: ocrscan; }
@keyframes ocrscan { 0% { top: 0; opacity: 0; } 5% { opacity: 1; } 60% { top: 100%; opacity: 1; } 65%, 100% { top: 100%; opacity: 0; } }
@keyframes ocrhl { 0% { height: 0; } 60%, 88% { height: 100%; } 100% { height: 100%; opacity: 0; } }

/* #10 regra */
.vz-rule { align-content: center; gap: 8px; }
.vz-rule .mv { display: flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 6px 10px; border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.vz-rule .mv svg { width: 13px; height: 13px; color: var(--muted); }
.vz-rule .mv b { font-weight: 600; color: #C46D1C; }
.vz-rule .m1 { animation-name: mv1; }
.vz-rule .m2 { animation-name: mv2; }
.vz-rule .ask { position: absolute; bottom: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 14px; font-size: 12.5px; animation-name: askin; }
.vz-rule .ask div { display: flex; gap: 6px; }
.vz-rule .ask span { font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 7px; }
.vz-rule .ask .no { background: var(--paper-2); }
.vz-rule .ask .yes { background: var(--violet); color: #fff; }
@keyframes mv1 { 0%, 5% { opacity: 0; transform: translateY(8px); } 12%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes mv2 { 0%, 25% { opacity: 0; transform: translateY(8px); } 32%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes askin { 0%, 45% { opacity: 0; transform: translateY(14px); } 53%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* #11 painel compacto */
.vz-compact { background: linear-gradient(160deg, #F6C8B5 0%, #B6A6FF 60%, #7D6BF2 100%); }
.vz-compact .strip { position: absolute; right: 10px; top: 50%; translate: 0 -50%; width: 10px; height: 70px; border-radius: 8px; background: rgba(255,255,255,.85); box-shadow: 0 10px 30px -10px rgba(23,20,43,.45); display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; animation-name: expand; }
.vz-compact .strip .mf { opacity: 0; animation-name: fadeinout; }
.vz-compact .cur { animation-name: compcur; }
@keyframes expand { 0%, 30% { width: 10px; height: 70px; border-radius: 8px; } 42%, 80% { width: 130px; height: 110px; border-radius: 18px; } 92%, 100% { width: 10px; height: 70px; border-radius: 8px; } }
@keyframes fadeinout { 0%, 40% { opacity: 0; } 48%, 76% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes compcur { 0%, 5% { left: 20%; top: 70%; } 35%, 80% { left: 84%; top: 52%; } 100% { left: 20%; top: 70%; } }

/* #12 carrossel */
.vz-carousel { overflow: hidden; }
.vz-carousel .track { display: flex; gap: 12px; align-items: center; animation-name: slide; animation-duration: 6s; position: absolute; left: calc(50% - 40px); }
.vz-carousel .track i { width: 80px; height: 104px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); flex: none; }
.vz-carousel .c1 { background: linear-gradient(170deg, #ffd6b3 0 34%, #86c7ff 34% 62%, #3b82d8 62%) !important; }
.vz-carousel .c2 { box-shadow: inset 0 -30px 0 #FDECEC, var(--shadow) !important; }
.vz-carousel .c3 { background: linear-gradient(160deg, #c9f0d6 0 40%, #5bbf8a 40%) !important; }
.vz-carousel .c4 { box-shadow: inset 0 -30px 0 var(--violet-soft), var(--shadow) !important; }
.vz-carousel .fingers { position: absolute; bottom: 14px; left: 50%; display: flex; gap: 6px; animation-name: swipe; animation-duration: 2s; }
.vz-carousel .fingers i { width: 14px; height: 14px; border-radius: 50%; background: rgba(106,85,230,.5); box-shadow: 0 0 0 4px rgba(106,85,230,.15); }
@keyframes slide { 0%, 20% { transform: translateX(0); } 30%, 50% { transform: translateX(-92px); } 60%, 80% { transform: translateX(-184px); } 90%, 100% { transform: translateX(0); } }
@keyframes swipe { 0% { transform: translateX(20px); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateX(-40px); opacity: 1; } 100% { transform: translateX(-50px); opacity: 0; } }

/* #13 prévia */
.vz-preview { display: flex; flex-direction: column; justify-content: center; }
.vz-preview .space { min-width: 150px; position: absolute; bottom: 16px; animation-name: press; }
.vz-preview .big { position: absolute; top: 14px; width: 58%; height: 58%; border-radius: 12px; background: #fff; padding: 6px; box-shadow: 0 20px 40px -16px rgba(23,20,43,.5); animation-name: zoomin; }
.vz-preview .big i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(170deg, #ffd6b3 0 34%, #86c7ff 34% 62%, #3b82d8 62%); }
@keyframes zoomin { 0%, 18% { opacity: 0; transform: scale(.3) translateY(60px); } 30%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.9); } }

/* #14 áudio */
.vz-audio .player { width: 84%; padding: 16px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.vz-audio .play { width: 38px; height: 38px; border-radius: 50%; background: var(--violet); position: relative; }
.vz-audio .play::after { content: ""; position: absolute; left: 14px; top: 11px; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.vz-audio .wave { display: flex; align-items: center; gap: 4px; height: 38px; }
.vz-audio .wave i { flex: 1; height: 30%; border-radius: 3px; background: var(--lav); animation-name: eq; animation-duration: 1.2s; }
.vz-audio .wave i:nth-child(3n) { animation-delay: -.3s; }
.vz-audio .wave i:nth-child(3n+1) { animation-delay: -.7s; }
.vz-audio .wave i:nth-child(4n) { animation-delay: -.5s; background: var(--violet-hi); }
.vz-audio .bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.vz-audio .bar i { display: block; height: 100%; width: 0; background: var(--violet); animation-name: fill; animation-duration: 8s; animation-timing-function: linear; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 95%; } }
@keyframes fill { to { width: 100%; } }

/* #15 enviar */
.vz-send .picker { width: 84%; padding: 12px; display: grid; gap: 7px; }
.vz-send small { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vz-send .row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); font-size: 11.5px; font-weight: 500; }
.vz-send .row svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.vz-send .row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-send .r1 { animation-name: sel1; }
.vz-send .r2 { animation-name: sel2; }
.vz-send .go { text-align: center; padding: 8px; border-radius: 10px; background: var(--violet); color: #fff; font-size: 12px; font-weight: 600; animation-name: gopulse; }
@keyframes sel1 { 0%, 45% { border-color: var(--line); box-shadow: none; } 50%, 100% { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); } }
@keyframes sel2 { 0%, 10% { border-color: var(--line); box-shadow: none; } 15%, 45% { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); } 50%, 100% { border-color: var(--line); box-shadow: none; } }
@keyframes gopulse { 0%, 70%, 90%, 100% { transform: none; } 78% { transform: scale(.95); } 82% { transform: scale(1.03); } }

/* #16 arrastar para fora */
.vz-dragout .shelf { position: absolute; left: 7%; top: 22%; padding: 12px; display: grid; grid-template-columns: repeat(3, auto); gap: 8px; }
.vz-dragout .ghost { animation-name: ghost; }
.vz-dragout .folder { position: absolute; right: 12%; top: 38%; width: 64px; height: 54px; animation-name: folderhit; }
.vz-dragout .mover { position: absolute; animation-name: dragout; }
.vz-dragout .mover .cur { left: 18px; top: 26px; }
@keyframes ghost { 0%, 12%, 95%, 100% { opacity: 1; } 18%, 90% { opacity: .3; } }
@keyframes dragout { 0%, 12% { left: calc(7% + 50px); top: calc(22% + 12px); opacity: 0; } 16% { opacity: 1; } 55% { left: 74%; top: 36%; opacity: 1; transform: none; } 62%, 100% { left: 74%; top: 44%; opacity: 0; transform: scale(.5); } }
@keyframes folderhit { 0%, 55%, 72%, 100% { transform: none; } 62% { transform: scale(1.14); } }

/* #17 links */
.vz-link { align-content: center; }
.vz-link .lrow { position: absolute; width: 84%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; }
.vz-link .lk { font: 12px ui-monospace, Consolas, monospace; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-link .off .lk { text-decoration: line-through; opacity: .5; }
.vz-link .st.ok { color: #16804F; background: rgba(47,182,124,.14); }
.vz-link .on { animation-name: linkon; }
.vz-link .off { animation-name: linkoff; }
@keyframes linkon { 0%, 45% { opacity: 1; transform: none; } 52%, 95% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; } }
@keyframes linkoff { 0%, 45% { opacity: 0; transform: translateY(8px); } 52%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* #18 AirDrop */
.vz-airdrop .dev { position: absolute; width: 56px; height: 56px; color: var(--violet-deep); top: calc(50% - 28px); }
.vz-airdrop .dev.l { left: 12%; }
.vz-airdrop .dev.r { right: 12%; }
.vz-airdrop .rings { position: absolute; left: calc(12% + 28px); top: 50%; }
.vz-airdrop .rings i { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid var(--violet-hi); animation-name: ring; animation-duration: 2.4s; animation-timing-function: ease-out; }
.vz-airdrop .rings i:nth-child(2) { animation-delay: .8s; }
.vz-airdrop .rings i:nth-child(3) { animation-delay: 1.6s; }
.vz-airdrop .fly { position: absolute; animation-name: adfly; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(9); opacity: 0; } }
@keyframes adfly { 0%, 20% { left: 22%; top: 34%; opacity: 0; } 25% { opacity: 1; } 50% { top: 20%; } 75% { left: 70%; top: 36%; opacity: 1; } 80%, 100% { left: 70%; top: 36%; opacity: 0; } }

/* #19 scanner */
.vz-scanner { grid-template-columns: 1fr auto; gap: 18px; padding: 0 22px; justify-content: center; }
.vz-scanner .cam { position: relative; justify-self: stretch; width: 100%; max-width: 200px; height: 150px; border-radius: 14px; background: #2A2540; display: grid; place-items: center; }
.vz-scanner .page { width: 58%; height: 76%; background: #fff; border-radius: 3px; padding: 10px; display: grid; gap: 7px; align-content: start; transform: rotate(-4deg); animation-name: snap; }
.vz-scanner .page i { height: 5px; border-radius: 3px; background: #D9D5E8; }
.vz-scanner .page i:first-child { width: 60%; height: 8px; background: #BDB6DA; }
.vz-scanner .c { position: absolute; width: 16px; height: 16px; border: 3px solid var(--violet-hi); }
.vz-scanner .tl { left: 16%; top: 8%; border-right: 0; border-bottom: 0; }
.vz-scanner .tr { right: 16%; top: 8%; border-left: 0; border-bottom: 0; }
.vz-scanner .bl { left: 16%; bottom: 8%; border-right: 0; border-top: 0; }
.vz-scanner .br { right: 16%; bottom: 8%; border-left: 0; border-top: 0; }
.vz-scanner .stack { position: relative; width: 64px; height: 80px; }
.vz-scanner .stack i { position: absolute; inset: 0; background: #fff; border-radius: 5px; box-shadow: var(--shadow); opacity: 0; }
.vz-scanner .p1 { animation-name: pg1; }
.vz-scanner .p2 { animation-name: pg2; }
.vz-scanner .p3 { animation-name: pg3; }
.vz-scanner .stack b { position: absolute; left: 50%; bottom: -8px; translate: -50% 0; font-size: 10px; color: #fff; background: var(--k-pdf); padding: 3px 7px; border-radius: 5px; animation-name: pdfin; }
@keyframes snap { 0%, 18%, 100% { filter: none; } 20% { filter: brightness(2.5); } 24% { filter: none; } 38% { filter: brightness(2.5); } 42% { filter: none; } 56% { filter: brightness(2.5); } 60% { filter: none; } }
@keyframes pg1 { 0%, 20% { opacity: 0; transform: translateY(-10px); } 26%, 95% { opacity: 1; transform: rotate(-6deg); } 100% { opacity: 0; } }
@keyframes pg2 { 0%, 38% { opacity: 0; transform: translateY(-10px); } 44%, 95% { opacity: 1; transform: rotate(3deg); } 100% { opacity: 0; } }
@keyframes pg3 { 0%, 56% { opacity: 0; transform: translateY(-10px); } 62%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pdfin { 0%, 68% { opacity: 0; transform: scale(.6); } 74%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* #20 envios que retomam */
.vz-resume .up { width: 86%; padding: 14px; display: flex; align-items: center; gap: 12px; position: relative; }
.vz-resume .info { flex: 1; min-width: 0; display: grid; gap: 8px; }
.vz-resume .info b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-resume .bar { height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.vz-resume .bar i { display: block; height: 100%; background: var(--violet); animation-name: upload; animation-duration: 6s; }
.vz-resume .off { position: absolute; right: 12px; top: -12px; font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: #FFE8D6; color: #B4561B; animation-name: offline; animation-duration: 6s; }
.vz-resume .done { width: 26px; height: 26px; border-radius: 50%; background: var(--mint); color: #fff; display: grid; place-items: center; flex: none; animation-name: donein; animation-duration: 6s; }
.vz-resume .done svg { width: 16px; height: 16px; }
@keyframes upload { 0% { width: 0; } 30%, 55% { width: 45%; } 85%, 100% { width: 100%; } }
@keyframes offline { 0%, 30% { opacity: 0; transform: translateY(4px); } 33%, 52% { opacity: 1; transform: none; } 56%, 100% { opacity: 0; } }
@keyframes donein { 0%, 84% { opacity: 0; transform: scale(.5); } 90%, 100% { opacity: 1; transform: none; } }

/* #21 SSD */
.vz-ssd { grid-template-columns: auto 1fr auto; gap: 10px; padding: 0 30px; }
.vz-ssd .folder { width: 64px; height: 54px; }
.vz-ssd .dots { display: flex; justify-content: space-between; }
.vz-ssd .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); opacity: .2; animation-name: dot; animation-duration: 1.6s; }
.vz-ssd .dots i:nth-child(2) { animation-delay: .2s; } .vz-ssd .dots i:nth-child(3) { animation-delay: .4s; }
.vz-ssd .dots i:nth-child(4) { animation-delay: .6s; } .vz-ssd .dots i:nth-child(5) { animation-delay: .8s; }
.vz-ssd .drive { width: 76px; height: 96px; border-radius: 14px; background: linear-gradient(160deg, #3A3452, #1E1A30); position: relative; box-shadow: var(--shadow); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; }
.vz-ssd .drive em { font-style: normal; font-size: 9px; color: #C9C3E6; font-weight: 600; text-align: center; }
.vz-ssd .led { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); animation-name: blink2; animation-duration: 1.2s; }
@keyframes dot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes blink2 { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* #22 backup */
.vz-backup { grid-template-columns: auto auto; gap: 22px; justify-content: center; }
.vz-backup .box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vz-backup .box svg { width: 70px; height: 70px; border-radius: 18px; box-shadow: var(--shadow-lg); }
.vz-backup .box em { font: 600 11px ui-monospace, Consolas, monospace; font-style: normal; color: var(--ink-2); }
.vz-backup .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vz-backup .checks li { display: flex; align-items: center; gap: 8px; }
.vz-backup .checks svg { width: 20px; height: 20px; border-radius: 50%; padding: 3px; background: var(--mint); color: #fff; opacity: 0; animation-name: tick; }
.vz-backup .checks i { width: 80px; height: 7px; border-radius: 4px; background: #fff; }
.vz-backup .checks li:nth-child(2) svg { animation-delay: .5s; }
.vz-backup .checks li:nth-child(3) svg { animation-delay: 1s; }
@keyframes tick { 0%, 20% { opacity: 0; transform: scale(.4); } 28%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* #23 temas */
.vz-themes .win { width: 78%; height: 74%; border-radius: 12px; overflow: hidden; animation-name: themebg; animation-duration: 6s; box-shadow: var(--shadow-lg); }
.vz-themes .tb { height: 30px; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; animation-name: themetb; animation-duration: 6s; }
.vz-themes .tog { width: 32px; height: 18px; border-radius: 999px; background: var(--lav); position: relative; animation-name: togbg; animation-duration: 6s; }
.vz-themes .tog i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; animation-name: knob; animation-duration: 6s; }
.vz-themes .gr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
.vz-themes .gr i { height: 36px; border-radius: 8px; animation-name: themetile; animation-duration: 6s; }
@keyframes themebg { 0%, 42% { background: #F6F6FA; } 50%, 92% { background: #1B1830; } 100% { background: #F6F6FA; } }
@keyframes themetb { 0%, 42% { background: #fff; } 50%, 92% { background: #25213D; } 100% { background: #fff; } }
@keyframes themetile { 0%, 42% { background: #fff; } 50%, 92% { background: #332E52; } 100% { background: #fff; } }
@keyframes togbg { 0%, 42% { background: var(--lav); } 50%, 92% { background: var(--violet); } 100% { background: var(--lav); } }
@keyframes knob { 0%, 42% { transform: none; } 50%, 92% { transform: translateX(14px); } 100% { transform: none; } }

/* #24 acessibilidade */
.vz-a11y { grid-template-columns: auto auto; gap: 28px; justify-content: center; }
.vz-a11y .aa { font: 400 48px var(--serif); color: var(--violet-deep); animation-name: typegrow; display: inline-block; width: 90px; text-align: center; }
.vz-a11y .btns { position: relative; display: grid; gap: 10px; }
.vz-a11y .btns i { width: 100px; height: 26px; border-radius: 8px; background: #fff; }
.vz-a11y .ring { position: absolute; left: -4px; top: -4px; width: 108px; height: 34px; border-radius: 11px; border: 3px solid var(--violet); animation-name: focusmove; }
@keyframes typegrow { 0%, 10%, 90%, 100% { transform: scale(.8); } 40%, 60% { transform: scale(1.35); } }
@keyframes focusmove { 0%, 25% { transform: translateY(0); } 33%, 58% { transform: translateY(36px); } 66%, 92% { transform: translateY(72px); } 100% { transform: translateY(0); } }

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) { .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .fx-grid { grid-template-columns: 1fr; }
  .fx-hero { padding-top: 32px; }
  /* Filtros ficam presos abaixo do cabeçalho enquanto a pessoa rola a página */
  .fx-filter {
    position: sticky; top: 72px; z-index: 20; margin-inline: -16px; padding: 10px 16px;
    background: rgba(248,247,252,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .fx-filter::-webkit-scrollbar { display: none; }
  .fx-filter button { flex: none; }
  .fx-count { flex: none; white-space: nowrap; }
  .fx-group { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .vz * { animation: none !important; }
  .vz-hotkey .pop, .vz-paste .note, .vz-rule .mv, .vz-rule .ask, .vz-preview .big, .vz-link .on, .vz-dragin .landed, .vz-backup .checks svg, .vz-scanner .stack i, .vz-scanner .stack b { opacity: 1 !important; }
  .vz-link .off, .vz-resume .off, .vz-gmail .fly, .vz-dragin .mover, .vz-dragout .mover, .vz-airdrop .fly { display: none; }
}