/* Home hero: the attack surface, followed to depth.
 *
 * Driven by custom properties rather than the inline styles the rest of the
 * page uses. The dark walk rewrites inline styles and SVG paint attributes and
 * never touches a stylesheet, so this section owns both themes outright. The
 * canvas is outside its reach either way and reads these same variables. */
.v-hero {
  --ground: #EDF0F6;  --panel: #FFFFFF;  --ink: #131E45;  --body: #5C6784;
  --line: #DCE4F2;    --acc: #2E63C8;    --acc-soft: #57A0F5;
  /* The accent lifts on dark so hairlines carry, but a button is not a
   * hairline: white on the lifted accent is 3.71:1. This is what it reads on. */
  --acc-solid: #2E63C8;
  --grid: rgba(22,37,94,.06);  --node: #A9B6D4;  --dead: rgba(22,37,94,.22);
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 700px; display: flex; flex-direction: column;
  background: var(--ground); border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .v-hero {
  --ground: #161616;  --panel: #1A1A1A;  --ink: #F2F4F8;  --body: #9AA3B6;
  --line: #2B2B2B;    --acc: #4C82E8;    --acc-soft: #7FB4F8;
  --acc-solid: #2E63C8;
  --grid: rgba(255,255,255,.045); --node: #4A5468; --dead: rgba(255,255,255,.16);
}

.v-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%;
                 display: block; z-index: 0 }
/* Keeps the headline legible over whatever the canvas is doing behind it. */.v-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg, var(--ground) 0%, var(--ground) 22%,
              color-mix(in srgb, var(--ground) 60%, transparent) 34%,
              transparent 44%) }

.v-hero-inner { position: relative; z-index: 2; flex: 1; display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center }
.v-hero-copy { padding: 78px 48px 72px; min-width: 0 }
.v-hero-eyebrow { display: flex; align-items: center; gap: 12px }
.v-hero-eyebrow i { width: 26px; height: 14px; background: var(--acc);
  display: block; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%) }
.v-hero-eyebrow span { font: 500 12px Jost; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--acc) }
.v-hero h1 { text-wrap: balance; margin: 22px 0 0; font: 500 58px/1.07 Jost;
  color: var(--ink); letter-spacing: -1px }
.v-hero-lede { margin: 22px 0 0; max-width: 480px; font: 400 17px/1.6 Jost;
  color: var(--body); text-wrap: pretty }
.v-hero-cta { display: flex; gap: 1px; margin-top: 34px; width: fit-content;
  background: var(--acc-solid); border: 1px solid var(--acc-solid) }
.v-hero-cta a { text-decoration: none; font: 500 15px Jost; padding: 14px 26px;
  display: block }
.v-hero-cta a:first-child { color: #fff; background: var(--acc-solid) }
.v-hero-cta a:last-child { color: var(--ink); background: var(--panel) }
.v-hero-trust { margin-top: 38px; padding: 22px 0 0;
  border-top: 1px solid var(--line); display: flex; gap: 26px; flex-wrap: wrap }
.v-hero-trust span { font: 600 12px 'Chakra Petch'; letter-spacing: 2.2px;
  color: var(--body) }
.v-hero-trust span:last-child { color: var(--acc) }

.v-hero-foot { position: relative; z-index: 2; display: flex;
  justify-content: space-between; align-items: center; gap: 20px;
  padding: 13px 48px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--ground) 86%, transparent) }
.v-hero-foot span { font: 600 11px 'Chakra Petch'; letter-spacing: 2.2px;
  color: var(--body) }
.v-hero-foot b { color: var(--acc); font-weight: 600 }
.v-hero-live { display: inline-flex; align-items: center; gap: 8px }
.v-hero-live i { width: 7px; height: 7px; border-radius: 50%;
  background: var(--acc); display: block;
  animation: vHeroPulse 2.4s ease-in-out infinite }
@keyframes vHeroPulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

@media (max-width: 1040px) {
  .v-hero { min-height: 0 }
  .v-hero-inner { grid-template-columns: 1fr }
  .v-hero-copy { padding: 56px 30px 44px }
  .v-hero h1 { font-size: 44px; letter-spacing: -.6px }
  .v-hero-scrim { background: linear-gradient(180deg, var(--ground) 0%,
                  color-mix(in srgb, var(--ground) 70%, transparent) 58%,
                  transparent 100%) }
  .v-hero-foot { padding: 12px 30px }
}
@media (prefers-reduced-motion: reduce) { .v-hero-live i { animation: none } }