/* ==========================================================================
   Hero (v4, Qore layout) — the logo horizon (a grand sibling of the CTA dome) rising behind a
   hairline-framed headline, tagline row, Vercel CTAs, trusted-by marquee. All selectors scoped to #hero.
   ========================================================================== */
#hero { position: relative; overflow: clip; isolation: isolate; }

/* ---------- backdrop: the logo horizon (inline SVG, see hero.html) ----------
   --hz (px from the top of #hero) is where the horizon sits: on the hairline under the headline block on desktop,
   just above the headline on phones. hero.js measures it; the fallback matches 1440x900.
   The SVG is 1600x1100 units with the horizon 800 units down, so the stage's top is --hz minus half its width. */
#hero .hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#hero .hero-stage {
  --art-w: max(1320px, 111vw);
  position: absolute; left: 50%; top: calc(var(--hz, 730px) - var(--art-w) / 2);
  width: var(--art-w); margin-left: calc(var(--art-w) / -2); aspect-ratio: 1600 / 1100;
  /* no CSS mask here (Chrome mis-paints masked non-scaling strokes): the top/bottom fade is the .hb-fade rect */
}
#hero .hero-art { --sink: 0; --spin: 0deg; display: block; width: 100%; height: 100%; overflow: visible; }
#hero .hero-art * { transform-box: view-box; }
#hero .hb-fade { pointer-events: none; }
/* with motion, the art waits for its intro (hero.js reveals it in the same frame the intro sets its start state) */
.js-anim #hero .hero-art { opacity: 0; }
#hero .hb-rise { transform: translateY(calc(var(--sink) * 1px)); }

/* line work: neutral white-alpha hairlines; one red signal, the hot point */
#hero .hb-arc { fill: none; stroke: #fff; stroke-opacity: .5; vector-effect: non-scaling-stroke; }
#hero .hb-arc-r { stroke: #ff6a52; stroke-opacity: .95; stroke-width: 1.4; }
#hero .hb-dash { fill: none; stroke: #fff; stroke-opacity: .16; stroke-dasharray: 1 7; vector-effect: non-scaling-stroke; }
#hero .hb-dial-s { transform-origin: 800px 700px; transform: rotate(var(--spin)); }
#hero .hb-dial { transform-origin: 800px 700px; animation: hb-turn 220s linear infinite; }
#hero .hb-dial path { stroke: #fff; stroke-opacity: .13; vector-effect: non-scaling-stroke; }
#hero .hb-dial path.mj { stroke-opacity: .34; }
/* fine counter-turning scale: a dashed thick stroke that scales with the art (no gradient, so no stale paint) */
#hero .hb-fine { fill: none; stroke: #fff; stroke-opacity: .09; stroke-width: 7; stroke-dasharray: 1.2 8.7; transform-origin: 800px 700px; animation: hb-turn 300s linear infinite reverse; }
@keyframes hb-turn { to { transform: rotate(360deg); } }
#hero .hb-cap { fill: rgba(255,255,255,.025); stroke: #fff; stroke-opacity: .32; vector-effect: non-scaling-stroke; }
#hero .hb-mol { animation: hb-bob 9s var(--ease-in-out) infinite alternate; }
#hero .hb-mol path { fill: none; stroke: #fff; stroke-opacity: .2; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
#hero .hb-mol circle { fill: #050506; stroke: #fff; stroke-opacity: .3; vector-effect: non-scaling-stroke; }
#hero .hb-mol .hb-mol-c { fill: #ededed; fill-opacity: .7; stroke: none; }
@keyframes hb-bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
/* nodes travel the arcs: "swing" ones sweep between the horizon ends, "orbit" ones go all the way round (the
   lower half hides under the horizon) */
#hero .hb-node { transform-origin: 800px 700px; animation: var(--d) var(--ease-in-out) var(--o, 0s) infinite alternate both hb-swing; }
#hero .hb-node.orbit { animation: var(--d) linear var(--o, 0s) infinite hb-orbit; }
#hero .hb-node.orbit.rev { animation-direction: reverse; }
#hero .hb-node circle { fill: #ededed; }
#hero .hb-node .hb-node-o { fill: none; stroke: #fff; stroke-opacity: .32; vector-effect: non-scaling-stroke; }
@keyframes hb-swing { from { transform: rotate(-14deg); } to { transform: rotate(-166deg); } }
@keyframes hb-orbit { to { transform: rotate(-360deg); } }
#hero .hb-floor path { fill: none; stroke: #fff; stroke-opacity: .09; vector-effect: non-scaling-stroke; }
#hero .hb-refl path { fill: none; stroke: #fff; stroke-opacity: .1; vector-effect: non-scaling-stroke; }
#hero .hb-hz { fill: none; stroke: #fff; stroke-opacity: .5; vector-effect: non-scaling-stroke; }
/* a white glint runs along the horizon every few seconds */
#hero .hb-sweep { opacity: 0; animation: hb-sweep 9s var(--ease-in-out) 2.6s infinite; }
@keyframes hb-sweep {
  0% { transform: translateX(-760px); opacity: 0; }
  8% { opacity: .9; }
  42% { opacity: .9; }
  50%, 100% { transform: translateX(760px); opacity: 0; }
}
#hero .hb-ping { fill: none; stroke: #ff6a52; stroke-opacity: .6; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: 50% 50%; animation: hb-ping 3.4s var(--ease-out) infinite; }
@keyframes hb-ping { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }

/* idle loops stop while the hero is off screen (hero.js toggles .is-off) */
#hero.is-off .hero-art * { animation-play-state: paused; }

/* ---------- frame rows ---------- */
#hero .hero-navspace { height: var(--nav-h); }
#hero .hero-tagline { position: relative; }
#hero .hero-tagline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
#hero .hero-tagline .shell { height: 80px; display: flex; align-items: center; justify-content: center; }
#hero .hero-tagline .eyebrow { color: var(--text); }

/* ---------- headline block ---------- */
#hero .hero-content {
  min-height: max(420px, calc(100svh - var(--nav-h) - 44px - 80px - 170px));
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 22px;
  padding: 56px var(--pad) 72px;
}
/* scrim: keeps the headline, lead and buttons clear of the arcs that rise behind them (follows the block's size) */
#hero .hero-content::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: -4%; right: -4%; top: 14%; bottom: 6%;
  background: radial-gradient(closest-side, rgba(5,5,6,.9), rgba(5,5,6,.72) 46%, rgba(5,5,6,.32) 76%, transparent);
}
#hero .hero-title { font-weight: 500; letter-spacing: -0.055em; line-height: 1.04; }
#hero .hero-line { display: block; white-space: nowrap; }
#hero .w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
#hero .w > span { display: inline-block; will-change: transform; }
#hero .hero-mark > span { vertical-align: -0.06em; }
/* no glow filter on the mark: the word mask (.w, overflow clip) cut it into a visible box; the hot point is the red signal */
#hero .hero-mark svg { width: .92em; height: auto; color: var(--text); }
#hero .hero-rot { display: inline-block; text-align: left; }
#hero .hero-sub { max-width: 560px; color: #d4d4d4; }
#hero .hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }

/* ---------- trusted by ---------- */
/* the full-bleed hairline under the headline block is the dome's horizon (it stays put while the copy drifts) */
#hero .hero-trusted { padding: 44px 0 8px; border-top: 1px solid var(--line); }
#hero .hero-trusted-label { text-align: center; color: var(--text-2); }
#hero .hero-trusted-label b { color: var(--text); font-weight: 500; }
#hero .hero-logos { margin-top: 18px; }
#hero .logo-item {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 clamp(28px, 3.4vw, 52px); height: 80px;
  font-size: 19px; font-weight: 600; letter-spacing: -0.045em; color: rgba(237,237,237,.42); transition: color .3s;
}
#hero .logo-item svg { width: 20px; height: 20px; }
#hero .logo-item:hover { color: var(--text); }
#hero .glyph-strip { border-top: 1px solid var(--line); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  #hero .hero-line { white-space: normal; }
}
@media (max-width: 767px) {
  #hero .hero-tagline .shell { height: 64px; }
  #hero .hero-content { min-height: 0; padding: 200px 4px 48px; gap: 18px; }
  #hero .hero-title { font-size: clamp(36px, 10.4vw, 46px); }
  #hero .hero-ctas { width: 100%; }
  #hero .hero-ctas .btn { flex: 1 1 100%; }
  #hero .hero-trusted { padding-top: 32px; }
  #hero .logo-item { height: 64px; font-size: 17px; }
  /* phones: the horizon sits just above the headline and the dome fills the space over it */
  #hero .hero-stage { --art-w: max(700px, 180vw); }
  #hero .hero-content::before { top: 180px; bottom: 0; left: -8%; right: -8%; }
  #hero .hb-caps { display: none; }  /* they would sit cut off on the left rail */
  #hero .hb-nodes { mask: none; }  /* the copy sits below the horizon here, nothing to dim */
}

/* tablets: the molecule's outer atom would be cut by the right edge; tuck it in (translate composes with the bob) */
@media (min-width: 768px) and (max-width: 1199px) { #hero .hb-mol { translate: -70px 10px; } }

@media (prefers-reduced-motion: reduce) {
  #hero .hero-art * { animation: none !important; }
  #hero .hb-node { transform: rotate(var(--rm, -60deg)); }  /* parked on their arcs */
  #hero .hb-sweep, #hero .hb-ping { display: none; }
}