/* Interações Marcelink: aprimoramento progressivo e movimento acessível. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
:focus-visible { outline: 3px solid #60a5fa; outline-offset: 5px; }
.hero-visual { position: relative; isolation: isolate; }
.hero-visual::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 10%), rgba(96,165,250,.25), transparent 65%); pointer-events: none; }
.hero-visual-badge i { animation: shield-glow 1.2s ease-in-out 3; }
@keyframes shield-glow { 50% { color: #86efac; filter: drop-shadow(0 0 8px #22c55e); } }
.hero-visual { animation: panel-arrive .85s ease-out both; }
@keyframes panel-arrive { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.benefit-card { transition: border-color .25s, box-shadow .25s; }
.benefit-card:hover { border-color: var(--secondary); box-shadow: 0 12px 32px rgba(59,130,246,.13); }
.motion-ready { opacity: 0; translate: 0 22px; transition: opacity .65s ease, translate .65s ease; }
.motion-ready.is-visible { opacity: 1; translate: 0 0; }
.quick-help { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.quick-help h4 { font-size: 17px; margin-bottom: 6px; }
.hero .quick-help p { font-size: 14px; margin: 0 0 14px; }
.issue-options { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.issue-option { font: inherit; font-size: 13px; color: #dbeafe; border: 1px solid rgba(96,165,250,.35); background: rgba(15,23,42,.5); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: background .2s, border-color .2s; }
.issue-option:hover, .issue-option[aria-pressed="true"] { background: #1e40af; border-color: #93c5fd; }
.issue-result { padding: 16px; background: rgba(15,23,42,.5); border-radius: 14px; }
.hero .issue-result p { margin-bottom: 12px; }
.issue-result a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #86efac; font-weight: 700; }
.issue-result.is-changing { animation: result-arrive .3s ease-out; }
@keyframes result-arrive { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.faq-q { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; font-weight: 700; gap: 16px; }
.faq-q i { transition: transform .3s; }
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .motion-ready { opacity: 1; translate: none; } }