/* ============================================================================
   Instant Zero band 1 — hero. Figma 934:24602 (1512 x 946).
   Base fill #0F0F0F (dark), unlike the home hero's photo background.
   ========================================================================= */

.afxiz-hero { position: relative; min-height: 946px; overflow: hidden; background: #0F0F0F; }

/* 934:24608/09/11/12/14/15/17/18 — a cluster of soft white rectangles,
   rotated ~-15deg, blurred, opacity .04-.32, sitting off the top-left edge.
   Approximated as one soft radial wash per the speed rules — a pixel match
   on eight overlapping blurred rectangles is not worth the tokens. */
.afxiz-hero__bg {
  position: absolute; left: -10%; top: -60%; width: 90%; height: 220%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 45%, rgba(255,255,255,0) 70%);
  transform: rotate(-15deg);
  pointer-events: none;
}

/* 934:24624 "Ellipse 473" — dark teal blob, blend hard-light, layer-blur 516 */
.afxiz-hero__glow {
  position: absolute; left: 50%; top: 68px;
  width: 1400px; height: 800px; margin-left: -700px;
  background: #051F1D; border-radius: 50%;
  filter: blur(200px);
  mix-blend-mode: hard-light;
  pointer-events: none;
}

/* 934:24623 "Overlay" — horizontal teal wash, same pattern as the home hero */
.afxiz-hero__overlay {
  position: absolute; left: 0; top: 56px; width: 100%; height: 900px;
  background: linear-gradient(89.8deg, rgba(5,63,59,.62) 0%, rgba(194,213,213,0) 21.36%,
                                        rgba(194,213,213,0) 83.19%, rgba(5,63,59,.4) 100%);
  pointer-events: none;
}

/* 934:24622 — bottom fade to blend into the next band */
.afxiz-hero__fade {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 148px;
  background: linear-gradient(180deg, rgba(15,15,15,0) 0%, #0F0F0F 100%);
  pointer-events: none;
}

/* Centred 1512 anchor for everything below that uses raw left:Npx figures
   from Figma. .afxiz-hero itself is full-bleed (spans the viewport), so an
   absolutely-positioned child measures left:Npx from the viewport edge, not
   the 1512 stage's edge — correct only when viewport = 1512. This stays
   centred at any width, same principle as the home hero's centred glow. */
.afxiz-hero__stage {
  position: absolute; left: 50%; top: 0; width: 1512px; height: 100%;
  margin-left: -756px; pointer-events: none;
}
.afxiz-hero__stage > * { pointer-events: auto; }
.afxiz-hero__stage--live { z-index: 3; }

/* 934:24619 "Mask group" — circular masked photo, 995x995 at x=717 y=179,
   bleeds off the right edge of the 1512 frame. */
.afxiz-hero__photo {
  position: absolute; left: 717px; top: 179px; width: 995px; height: 995px;
  border-radius: 50%; object-fit: cover; opacity: .9;
  pointer-events: none;
}

.afxiz-hero__inner { position: relative; z-index: 2; }

/* content column mirrors .afx-page (1432 wide, 40px gutters) */
.afxiz-hero__body { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0; box-sizing: border-box; }
@media (max-width: 1512px) { .afxiz-hero__body { padding: 0 var(--gutter); } }

/* 934:24741 — DM Sans 500 / 14 / 21px, margin-top 121 from navbar bottom (125 + 121 ~ 243 total) */
.afxiz-hero__eyebrow {
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; color: var(--af-white);
  margin: 121px 0 0; padding: 0;
}

/* 934:24742 — SF Pro 510 / 108 / 108px, max width 1076 */
.afxiz-hero__h1 {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 108px; line-height: 108px; letter-spacing: -3.24px;
  margin: 32px 0 0; color: var(--af-white); max-width: 1076px;
}

/* 934:24743 — DM Sans 500 / 18 / 27px, max width 640 */
.afxiz-hero__lead {
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; letter-spacing: -.36px;
  margin: 32px 0 0; color: var(--af-white); opacity: .8; max-width: 640px;
}

.afxiz-hero__ctas { display: flex; flex-direction: row; gap: 12px; align-items: center; margin-top: 32px; }

/* stat strip reuses .afx-stat from the home hero, three columns instead of two */
.afxiz-hero__stats { max-width: 1076px; margin-top: 76px; height: auto; }

/* ---- 934:24660 — live activity card, 314x378 at x=1118 y=418, inside the
   centred stage above (not the raw hero edge) ------------------------------ */
.afxiz-live { position: absolute; left: 1118px; top: 418px; width: 314px; }
.afxiz-live__card {
  padding: 16px; border-radius: var(--r-20);
  background: rgba(89,118,116,.16);
}
.afxiz-live__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.afxiz-live__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: var(--w-semi);
  font-size: 16px; line-height: 24px; color: var(--af-white);
}
.afxiz-live__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--af-lime); display: block; }
.afxiz-live__count {
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; color: var(--af-white);
}
.afxiz-live__rows { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.afxiz-live__row {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  height: 60px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.04);
}
.afxiz-live__who { display: flex; align-items: center; gap: 12px; }
.afxiz-live__avatar { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; display: block; flex: none; }
.afxiz-live__lines { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.afxiz-live__name {
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; color: var(--af-white);
}
.afxiz-live__sub {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; color: var(--af-white); opacity: .6;
}
.afxiz-live__flag { width: 12px; height: 12px; border-radius: 50%; display: block; }
.afxiz-live__status {
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 12px; line-height: 14px; color: #7CB1AC;
}
.afxiz-live__metric { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.afxiz-live__tag {
  display: inline-block; padding: 4px 8px; border-radius: 20px; background: rgba(255,255,255,.08);
  font-family: var(--font-ui); font-weight: 510; font-size: 10px; line-height: 12px; color: #A4E4DE;
  white-space: nowrap;
}
.afxiz-live__value {
  font-family: var(--font-ui); font-weight: var(--w-semi);
  font-size: 20px; line-height: 24px; color: var(--af-white); white-space: nowrap;
}
.afxiz-live__foot {
  margin-top: -33px; position: relative; z-index: -1;
  height: 67px; border-radius: var(--r-20); background: rgba(34,54,52,.24);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
}
.afxiz-live__foot a {
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 14px; color: var(--af-white); text-decoration: none;
}

@media (max-width: 1180px) {
  .afxiz-hero__h1 { font-size: 72px; line-height: 76px; letter-spacing: -2.16px; }
  .afxiz-hero__stage { position: static; width: auto; left: auto; margin-left: 0; height: 0; }
  /* The --live stage holds the live-activity card, which becomes a real flow
     child here. Collapsing it to 0 like the decorative stages left the card
     overflowing the hero, and .afxiz-hero clips: at 393 the bottom 330px of the
     card, three of its four rows, were sliced off. */
  .afxiz-hero__stage--live { height: auto; }
  .afxiz-live { position: static; margin: 40px auto 0; }
  .afxiz-hero__photo { display: none; }
}
@media (max-width: 760px) {
  .afxiz-hero { min-height: 0; padding-bottom: 48px; }
  .afxiz-hero__h1 { font-size: 44px; line-height: 46px; letter-spacing: -1.32px; }
  .afxiz-hero__ctas { flex-direction: column; align-items: stretch; }
  .afxiz-hero__stats.afx-stats { flex-direction: column; align-items: stretch; gap: 24px; }
}


/* ---- motion -------------------------------------------------------------
   The two hero CTAs are .afx-btn-lime / .afx-btn-ghost and already carry press
   and hover from atlas-hero.css; what was missing on this page was a focus
   ring and any acknowledgement on the live-activity card's link. The rows
   themselves are divs, not links, so they deliberately get no hover - a hover
   state on something unclickable is a promise the page cannot keep. */
.afxiz-live a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--t-base) var(--e-out), opacity var(--t-fast) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .afxiz-live a:hover { background-size: 100% 1px; }
}
.afxiz-live a:active { opacity: .7; }
.afxiz-hero a:focus-visible {
  outline: 2px solid var(--af-lime); outline-offset: 4px; border-radius: var(--r-pill);
}