/* The Belvic "control room" hero shared by every page: night-blue grid, teal glow,
   radar on the homepage. Always dark, in light and dark mode; the content below it
   keeps each page's own light/dark tokens. */
.hero{--h-ink:#e8f1f5;--h-dim:#93a9b6;--h-teal:#2fd3c6;--h-sky:#7be0ff;--h-red:#ff7b6b;--h-line:rgba(143,166,180,.26);
  position:relative;overflow:hidden;color:var(--h-ink);color-scheme:dark;
  background:
    radial-gradient(900px 520px at 80% 38%, rgba(47,211,198,.15), transparent 60%),
    radial-gradient(700px 420px at 8% 0%, rgba(47,120,211,.14), transparent 60%),
    linear-gradient(rgba(110,200,210,.07) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(110,200,210,.07) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(180deg, #07131d, #0c1f2c)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:64px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero-in{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:18px 16px 76px;display:grid;gap:20px}
.hero .top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.hero .brand{display:inline-flex;align-items:center;gap:10px;font:800 1.08rem var(--display);letter-spacing:.02em;color:var(--h-ink);text-decoration:none}
.hero .brand svg{width:30px;height:30px;flex:none}
.hero .brand span{color:var(--h-teal)}
.hero .tag{font:600 .8rem var(--body);letter-spacing:0;text-transform:none;color:var(--h-dim);display:flex;flex-wrap:wrap;gap:6px 16px}
.hero .tag a{color:var(--h-dim);text-decoration:none}
.hero .tag a:hover{color:var(--h-ink)}
.hero .tag a.hot{color:var(--h-red)}

/* Tool chips */
.hero .suite .k{color:var(--h-dim)}
.hero .suite a{color:var(--h-dim);background:rgba(255,255,255,.04);border:1px solid var(--h-line);backdrop-filter:blur(4px)}
.hero .suite a:hover{color:var(--h-ink);border-color:var(--h-teal)}
.hero .suite a[aria-current="page"]{color:#04242a;background:var(--h-teal);border-color:var(--h-teal)}
.hero .suite a.urgent{color:var(--h-red);border-color:rgba(255,123,107,.55)}
.hero .suite a.urgent[aria-current="page"]{color:#fff;background:#c4302a;border-color:#c4302a}

.hero .kicker{font:600 .74rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--h-teal);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.hero .kicker i{width:8px;height:8px;border-radius:50%;background:var(--h-teal);animation:h-ping 2s infinite}
.hero .kicker.alert{color:var(--h-red)} .hero .kicker.alert i{background:var(--h-red)}
@keyframes h-ping{0%{box-shadow:0 0 0 0 rgba(47,211,198,.65)}70%,100%{box-shadow:0 0 0 10px rgba(47,211,198,0)}}
.hero h1{color:var(--h-ink);font:900 clamp(2rem,5vw,3.3rem)/1.04 var(--display);letter-spacing:-.02em;margin:0;text-wrap:balance}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--h-teal),var(--h-sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{color:var(--h-dim);font-size:1.1rem;max-width:58ch;margin-top:12px}
.hero .lede b{color:var(--h-ink)}

/* Forms in the hero: glass input, glowing button */
.hero form{max-width:640px}
.hero form .tag,.hero form label{color:var(--h-dim)}
.hero form input{background:rgba(255,255,255,.06)!important;border:1px solid var(--h-line)!important;color:var(--h-ink)!important;border-radius:10px!important;backdrop-filter:blur(8px)}
.hero form input::placeholder{color:#62798a}
.hero form input:focus-visible{outline:2px solid var(--h-teal)!important;outline-offset:1px;border-color:var(--h-teal)!important}
.hero form button{color:#04242a!important;background:linear-gradient(135deg,var(--h-teal),var(--h-sky))!important;border-radius:10px!important;font-weight:800;box-shadow:0 10px 26px -10px rgba(47,211,198,.7)}
.hero form button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero .hint{color:var(--h-dim)}
.hero .trust{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font:500 .8rem var(--mono);color:var(--h-dim)}
.hero .trust b{color:var(--h-ink);font-weight:600}

/* Homepage: copy on the left, live radar on the right */
.hero-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px;align-items:center;margin-top:12px}
.radar{position:relative;width:100%;max-width:440px;aspect-ratio:1;justify-self:center}
.radar svg{width:100%;height:100%;overflow:visible;display:block}
.radar .rl{font:600 9.5px var(--mono);letter-spacing:.1em;fill:var(--h-dim);text-transform:uppercase}
.radar .c-sub{font:600 10px var(--mono);letter-spacing:.14em;fill:var(--h-teal)}
.radar .c-dom{font:600 14px var(--mono);fill:var(--h-ink)}
.radar .sweep{transform-origin:230px 230px;animation:h-spin 2.6s linear infinite;opacity:0;transition:opacity .3s}
.radar.scanning .sweep{opacity:1}
.radar .arc{transition:stroke .5s ease, filter .5s ease}
.radar .blip{animation:h-blip 1.6s ease-out infinite}
@keyframes h-spin{to{transform:rotate(360deg)}}
@keyframes h-blip{0%{r:3;opacity:1}100%{r:14;opacity:0}}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font:500 .76rem var(--mono);color:var(--h-dim);margin-top:6px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:50%}

@media (max-width:860px){
  .hero-split{grid-template-columns:1fr}
  .radar{max-width:320px}
}
@media (prefers-reduced-motion:reduce){.radar .sweep,.radar .blip,.hero .kicker i{animation:none}}
@media print{.hero{background:#fff;color:#000}.hero::after{display:none}.hero h1,.hero .lede,.hero .brand{color:#000}.hero .suite,.hero .tag{display:none}}