/* ============================================================
   HOME — hero "instrumento" (a versão do /radar de antes dos GIFs):
   tinta roxa profunda, aurora, grade blueprint, radar SVG com
   varredura e rostos reais, readout HUD, marquee de fatos.
   Carrega DEPOIS do home.css e só toca o hero. Preto é proibido:
   toda sombra/fundo é roxo escuro.
   ============================================================ */
:root {
    --hr-ink: #120B26; --hr-ink-2: #1A1133;
    --hr-lilac: #C4B5FD; --hr-lilac-2: #A78BFA; --hr-live: #7EE8FA;
    --hr-line: rgba(196,181,253,.16); --hr-line-2: rgba(196,181,253,.32);
    --hr-text-2: #BDB4DC; --hr-text-3: #7F73A8;
}
.hero--dark {
    display: flex; flex-direction: column; justify-content: center;
    background: radial-gradient(1100px 640px at 80% 30%, rgba(91,33,182,.42) 0%, transparent 60%), radial-gradient(700px 500px at 10% 90%, rgba(124,58,237,.18) 0%, transparent 60%), var(--hr-ink);
    overflow: hidden;
}
.hero--dark::before { background: none; }
.hero--dark::after { background: linear-gradient(to top, rgba(18,11,38,.9) 4%, transparent); }
.hero--dark .hero-grid-bg {
    background-image: linear-gradient(var(--hr-line) 1px, transparent 1px), linear-gradient(90deg, var(--hr-line) 1px, transparent 1px);
    background-size: 64px 64px; opacity: .55;
    -webkit-mask-image: radial-gradient(75% 75% at 70% 45%, #120B26 10%, transparent 100%); mask-image: radial-gradient(75% 75% at 70% 45%, #120B26 10%, transparent 100%);
}
.hr-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hr-aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; mix-blend-mode: screen; animation: hrAurora 24s ease-in-out infinite alternate; }
.hr-aurora i:nth-child(1) { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; right: -10%; top: -20%; background: radial-gradient(circle at 40% 40%, #7C3AED, transparent 62%); }
.hr-aurora i:nth-child(2) { width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; right: 10%; top: 35%; background: radial-gradient(circle, #4C1D95, transparent 62%); animation-delay: -8s; animation-duration: 30s; }
.hr-aurora i:nth-child(3) { width: 34vw; height: 34vw; max-width: 500px; max-height: 500px; left: -8%; bottom: -12%; background: radial-gradient(circle, rgba(126,232,250,.5), transparent 62%); opacity: .25; animation-delay: -15s; }
@keyframes hrAurora { 50% { transform: translate3d(-6%, 5%, 0) scale(1.08); } 100% { transform: translate3d(4%, -4%, 0) scale(.96); } }
.hr-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hr-stars i { position: absolute; width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%; background: #fff; opacity: .35; animation: hrTwinkle 5s ease-in-out var(--d, 0s) infinite; }
@keyframes hrTwinkle { 50% { opacity: .9; transform: scale(1.4); } }
.hero--dark .hero-container { position: relative; z-index: 1; width: 100%; flex: 1 0 auto; align-content: center; }
.hero--dark .hero-eyebrow { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hr-text-2); border: 0; padding: 0; }
.hero--dark .hero-eyebrow .dot { background: var(--hr-live); box-shadow: 0 0 0 0 rgba(126,232,250,.5); animation: hrBlip 2.4s ease-out infinite; }
@keyframes hrBlip { 70% { box-shadow: 0 0 0 10px rgba(126,232,250,0); } 100% { box-shadow: 0 0 0 0 rgba(126,232,250,0); } }
.hero--dark h1 .gradient-text { background: linear-gradient(100deg, #E9E3FF 0%, var(--hr-lilac) 45%, var(--hr-lilac-2) 100%); -webkit-background-clip: text; background-clip: text; }
.hero--dark .lead { color: var(--hr-text-2); }
.hero--dark .hero-proof { color: var(--hr-text-3); }
.hero--dark .btn-primary { background: linear-gradient(135deg, #F4F1FF 0%, #D9CFFF 100%); color: var(--hr-ink); border: 1px solid rgba(255,255,255,.45); box-shadow: 0 0 0 1px rgba(124,58,237,.25), 0 18px 46px -18px rgba(124,58,237,.7); }
.hero--dark .btn-primary:hover { background: #fff; color: var(--hr-ink); box-shadow: 0 0 0 1px rgba(196,181,253,.6), 0 24px 60px -18px rgba(124,58,237,.9); }

/* instrumento */
.hr-radar { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin-inline: auto; }
.hr-radar::before, .hr-radar::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1px solid var(--hr-line-2); pointer-events: none; }
.hr-radar::before { left: -6px; top: -6px; border-width: 1px 0 0 1px; } .hr-radar::after { right: -6px; bottom: -6px; border-width: 0 1px 1px 0; }
.hr-radar-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hr-rings circle, .hr-rings line { fill: none; stroke: var(--hr-line); stroke-width: 1; }
.hr-rings circle:first-child { stroke: var(--hr-line-2); }
.hr-rings .hr-diag { stroke: rgba(196,181,253,.08); stroke-dasharray: 2 8; }
.hr-ticks line { stroke: rgba(196,181,253,.45); stroke-width: 1; }
.hr-sweep { transform-origin: 260px 260px; animation: hrSweep 7s linear infinite; }
@keyframes hrSweep { to { transform: rotate(360deg); } }
.hr-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 14%; filter: drop-shadow(0 10px 36px rgba(139,92,246,.7)); animation: hrFloat 7s ease-in-out infinite; }
.hr-core img { width: 100%; height: auto; display: block; }
@keyframes hrFloat { 50% { translate: -50% calc(-50% - 6px); } }
.hr-blip { position: absolute; left: calc(50% + sin(var(--ang)) * var(--r)); top: calc(50% - cos(var(--ang)) * var(--r)); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; animation: hrBlipIn 7s ease-out var(--d) infinite; }
.hr-blip img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 0 0 5px rgba(196,181,253,.08), 0 14px 30px -10px rgba(18,11,38,.9); }
.hr-score { font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .06em; color: var(--hr-ink); background: var(--hr-lilac); padding: 2px 7px; border-radius: 3px; }
@keyframes hrBlipIn { 0% { opacity: 0; scale: .7; } 4% { opacity: 1; scale: 1.06; } 8% { scale: 1; } 82% { opacity: 1; } 96% { opacity: .1; } 100% { opacity: 0; } }
.hr-readout { position: absolute; left: -2%; bottom: 2%; background: rgba(18,11,38,.72); border: 1px solid var(--hr-line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: .75rem .95rem; border-radius: 4px; font-family: var(--font-mono); font-size: .66rem; color: #EDE8F8; line-height: 1.75; min-width: 200px; display: grid; }
.hr-readout > div { display: flex; gap: .6rem; }
.hr-readout-k { color: var(--hr-text-3); width: 84px; flex: none; text-transform: uppercase; letter-spacing: .12em; font-size: .58rem; padding-top: .12rem; }

/* marquee de fatos no pé do hero */
.hr-foot { position: relative; z-index: 1; width: 100%; flex: none; border-top: 1px solid var(--hr-line); background: rgba(18,11,38,.6); margin-top: clamp(1.5rem, 4vw, 3rem); }
.hr-marquee { overflow: hidden; padding: .8rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #120B26 8%, #120B26 92%, transparent); mask-image: linear-gradient(90deg, transparent, #120B26 8%, #120B26 92%, transparent); }
.hr-marquee-track { display: flex; gap: 2.4rem; width: max-content; animation: hrMarquee 46s linear infinite; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hr-text-3); }
.hr-marquee-track i { color: var(--hr-lilac); font-style: normal; font-size: .55rem; }
@keyframes hrMarquee { to { transform: translateX(-50%); } }

@media (max-width: 767px) {
    .hr-radar { margin-bottom: 4.5rem; }
    .hr-readout { left: 0; bottom: -4rem; min-width: 0; font-size: .6rem; padding: .5rem .7rem; }
    .hr-blip img { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .hr-aurora i, .hr-stars i, .hr-sweep, .hr-core, .hr-blip, .hr-marquee-track, .hero--dark .hero-eyebrow .dot { animation: none !important; }
    .hr-blip { opacity: 1; }
}