/*
 * Hero (Aurix #hero) + niche marquee strip.
 * Every value measured from aurix.framer.media — outline/hero@1440|1024|390.txt and
 * styles/hero@*.json (ranges: ≥1200 · 810–1199 · ≤809). The fixed nav overlays the top,
 * which is why the section starts at y=0 with a 180px (≤809: 120px) top padding.
 */
.ax-hero {
  /* play-button hover springs recorded on the original (easings.json E17 / E18 / E19) */
  --ax-hero-play-width: 709ms linear(0, 0.4353 9.48%, 0.5669 13.33%, 0.7396 20.44%, 0.85 28.32%, 0.9074 35.02%, 0.9272 38.38%, 0.9578 46.05%, 0.971 51.24%, 0.9923 69.13%, 0.9996);
  --ax-hero-play-inner: 654ms linear(0, 0.6712 10.28%, 0.7761 14.45%, 0.8189 16.93%, 0.8827 22.16%, 0.9375 30.71%, 0.9629 37.98%, 0.9762 44.37%, 0.9937 64.12%, 0.9996);
  --ax-hero-play-bg: 308ms linear(0, 0 5.72%, 0.4 27.56%, 0.6 36.43%, 0.66 41.7%, 0.74 47.09%, 0.74 52.81%, 0.8 58.76%, 0.8 70.98%, 0.9 77.58%, 0.9 94.15%, 1);
  --ax-hero-conic: conic-gradient(rgb(133, 184, 255) 36deg, rgb(255, 201, 226) 54.385deg, rgba(255, 255, 255, 0) 90deg, rgba(255, 255, 255, 0) 270deg, rgb(165, 180, 252) 307.365deg, rgb(255, 255, 255) 324.718deg, rgb(133, 184, 255) 360deg);
  --ax-hero-conic-white: conic-gradient(rgb(255, 255, 255) 36deg, rgb(255, 255, 255) 54.385deg, rgba(255, 255, 255, 0) 90deg, rgba(255, 255, 255, 0) 270deg, rgb(255, 255, 255) 323.582deg, rgb(255, 255, 255) 360deg);
  --ax-hero-glass-shadow: rgba(0, 0, 0, 0.5) 0px 20px 40px -10px, rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.05) 0px -1px 2px 0px inset;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 180px;
}

/* hero column: intro text block → product frame, 96px apart */
.ax-hero__main { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 96px; width: 100%; }
.ax-hero__intro { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; width: 100%; }

/* ---------------------------------------------------------------- badge */
.ax-hero__badge {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
.ax-hero__tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  border-radius: 12px;
  background: var(--ax-accent-deep);
  overflow: hidden;
}
.ax-hero__tag-text { display: block; font-size: 10px; font-weight: 500; line-height: 10px; color: rgb(255, 255, 255); text-align: center; white-space: pre; }
.ax-hero__badge-text { font-size: 14px; line-height: 18.2px; color: var(--ax-text-40); white-space: pre; }
/* measured: gradient clipped to the glyphs while the .4 white text colour still paints on top */
.ax-hero__badge-text span {
  display: inline-block;
  background-image: linear-gradient(90deg, rgb(165, 180, 252) 0%, rgb(255, 255, 255) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------------------------------------------------------------- title + subtitle */
.ax-hero__copy { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; width: 100%; }
/* measured: the original balances the heading (text-wrap: balance) — it has no forced break */
.ax-hero__title { max-width: 980px; font-size: 64px; font-weight: 500; line-height: 70.4px; letter-spacing: -3.2px; color: var(--ax-text); text-align: center; text-wrap: balance; }
.ax-hero__subtitle { max-width: 600px; font-size: 20px; line-height: 28px; color: var(--ax-text-60); text-align: center; }

/* ---------------------------------------------------------------- buttons (+ WiseCord note line) */
.ax-hero__cta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ax-hero__buttons { position: relative; display: flex; justify-content: center; align-items: center; gap: 16px; }
.ax-hero__button { position: relative; }
.ax-hero__note { font-size: 14px; line-height: 18.2px; color: var(--ax-text-40); text-align: center; }

/* ---------------------------------------------------------------- product frame + glows */
.ax-hero__visual { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1200px; }

/* conic glow stack, 2px proud of the frame on top/left/right, flush at the bottom */
.ax-hero__glow { position: absolute; top: -2px; left: -2px; right: -2px; bottom: 0; border-radius: 12px; pointer-events: none; }
.ax-hero__glow-layer { position: absolute; inset: 0; border-radius: 16px; background-image: var(--ax-hero-conic); mix-blend-mode: screen; }
.ax-hero__glow-layer--64 { opacity: 0.5; filter: blur(64px); }
.ax-hero__glow-layer--32 { opacity: 0.75; filter: blur(32px); }
.ax-hero__glow-layer--8 { filter: blur(8px); }
.ax-hero__glow-layer--2 { background-image: var(--ax-hero-conic-white); filter: blur(2px); }

/* dot field behind the frame, radially masked (5px pitch · 2.5px dots · alpha .094/.298/.584 as measured from the original tile) */
.ax-hero__dots {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 900px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50.8%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(50% 50% at 50% 50.8%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
}
.ax-hero__dots span {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='none' stroke='%23dcdcdc' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath stroke-opacity='.094' d='M1.25 1.25h0M6.25 1.25h0M21.25 1.25h0M26.25 1.25h0M31.25 1.25h0M36.25 1.25h0M41.25 1.25h0M46.25 1.25h0M51.25 1.25h0M56.25 1.25h0M66.25 1.25h0M71.25 1.25h0M76.25 1.25h0M1.25 6.25h0M11.25 6.25h0M46.25 6.25h0M51.25 6.25h0M56.25 6.25h0M1.25 11.25h0M6.25 11.25h0M16.25 11.25h0M21.25 11.25h0M41.25 11.25h0M46.25 11.25h0M51.25 11.25h0M61.25 11.25h0M71.25 11.25h0M76.25 11.25h0M16.25 16.25h0M26.25 16.25h0M31.25 16.25h0M36.25 16.25h0M46.25 16.25h0M51.25 16.25h0M71.25 16.25h0M76.25 16.25h0M1.25 21.25h0M6.25 21.25h0M16.25 21.25h0M21.25 21.25h0M26.25 21.25h0M36.25 21.25h0M46.25 21.25h0M51.25 21.25h0M56.25 21.25h0M61.25 21.25h0M66.25 21.25h0M71.25 21.25h0M76.25 21.25h0M1.25 26.25h0M6.25 26.25h0M16.25 26.25h0M21.25 26.25h0M41.25 26.25h0M46.25 26.25h0M51.25 26.25h0M61.25 26.25h0M1.25 31.25h0M6.25 31.25h0M11.25 31.25h0M26.25 31.25h0M31.25 31.25h0M41.25 31.25h0M51.25 31.25h0M56.25 31.25h0M61.25 31.25h0M66.25 31.25h0M71.25 31.25h0M76.25 31.25h0M1.25 36.25h0M6.25 36.25h0M11.25 36.25h0M21.25 36.25h0M31.25 36.25h0M36.25 36.25h0M46.25 36.25h0M51.25 36.25h0M56.25 36.25h0M66.25 36.25h0M71.25 36.25h0M76.25 36.25h0M1.25 41.25h0M11.25 41.25h0M16.25 41.25h0M26.25 41.25h0M41.25 41.25h0M51.25 41.25h0M66.25 41.25h0M76.25 41.25h0M1.25 46.25h0M11.25 46.25h0M26.25 46.25h0M31.25 46.25h0M36.25 46.25h0M41.25 46.25h0M46.25 46.25h0M51.25 46.25h0M71.25 46.25h0M76.25 46.25h0M6.25 51.25h0M11.25 51.25h0M31.25 51.25h0M36.25 51.25h0M46.25 51.25h0M51.25 51.25h0M56.25 51.25h0M61.25 51.25h0M66.25 51.25h0M71.25 51.25h0M6.25 56.25h0M11.25 56.25h0M36.25 56.25h0M41.25 56.25h0M46.25 56.25h0M61.25 56.25h0M66.25 56.25h0M1.25 61.25h0M6.25 61.25h0M11.25 61.25h0M26.25 61.25h0M31.25 61.25h0M36.25 61.25h0M41.25 61.25h0M46.25 61.25h0M51.25 61.25h0M56.25 61.25h0M61.25 61.25h0M66.25 61.25h0M76.25 61.25h0M1.25 66.25h0M6.25 66.25h0M11.25 66.25h0M16.25 66.25h0M21.25 66.25h0M26.25 66.25h0M31.25 66.25h0M36.25 66.25h0M46.25 66.25h0M51.25 66.25h0M66.25 66.25h0M71.25 66.25h0M76.25 66.25h0M1.25 71.25h0M11.25 71.25h0M21.25 71.25h0M36.25 71.25h0M46.25 71.25h0M51.25 71.25h0M56.25 71.25h0M61.25 71.25h0M71.25 71.25h0M21.25 76.25h0M36.25 76.25h0M51.25 76.25h0M56.25 76.25h0M61.25 76.25h0M66.25 76.25h0'/%3E%3Cpath stroke-opacity='.298' d='M11.25 1.25h0M6.25 6.25h0M16.25 6.25h0M26.25 6.25h0M31.25 6.25h0M66.25 6.25h0M71.25 6.25h0M76.25 6.25h0M11.25 11.25h0M26.25 11.25h0M36.25 11.25h0M56.25 11.25h0M1.25 16.25h0M6.25 16.25h0M11.25 16.25h0M21.25 16.25h0M61.25 16.25h0M41.25 21.25h0M11.25 26.25h0M26.25 26.25h0M31.25 26.25h0M56.25 26.25h0M71.25 26.25h0M76.25 26.25h0M16.25 31.25h0M21.25 31.25h0M36.25 31.25h0M46.25 31.25h0M41.25 36.25h0M61.25 36.25h0M6.25 41.25h0M21.25 41.25h0M31.25 41.25h0M46.25 41.25h0M56.25 41.25h0M61.25 41.25h0M6.25 46.25h0M21.25 46.25h0M56.25 46.25h0M61.25 46.25h0M66.25 46.25h0M1.25 51.25h0M16.25 51.25h0M21.25 51.25h0M26.25 51.25h0M41.25 51.25h0M76.25 51.25h0M1.25 56.25h0M16.25 56.25h0M26.25 56.25h0M31.25 56.25h0M51.25 56.25h0M56.25 56.25h0M76.25 56.25h0M16.25 61.25h0M71.25 61.25h0M56.25 66.25h0M61.25 66.25h0M6.25 71.25h0M16.25 71.25h0M26.25 71.25h0M41.25 71.25h0M76.25 71.25h0M6.25 76.25h0M11.25 76.25h0M26.25 76.25h0M31.25 76.25h0M41.25 76.25h0M46.25 76.25h0M71.25 76.25h0'/%3E%3Cpath stroke-opacity='.584' d='M16.25 1.25h0M61.25 1.25h0M21.25 6.25h0M36.25 6.25h0M41.25 6.25h0M61.25 6.25h0M31.25 11.25h0M66.25 11.25h0M41.25 16.25h0M56.25 16.25h0M66.25 16.25h0M11.25 21.25h0M31.25 21.25h0M36.25 26.25h0M66.25 26.25h0M16.25 36.25h0M26.25 36.25h0M36.25 41.25h0M71.25 41.25h0M16.25 46.25h0M21.25 56.25h0M71.25 56.25h0M21.25 61.25h0M41.25 66.25h0M31.25 71.25h0M66.25 71.25h0M1.25 76.25h0M16.25 76.25h0M76.25 76.25h0'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

.ax-hero__frame {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ax-bg);
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}
/* the original's screenshot fades out towards the bottom */
.ax-hero__shot {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
}
.ax-hero__shot img { width: 100%; height: 100%; object-fit: cover; }
.ax-hero__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* glass play button: 73px circle (8px ring + 57px core) that opens into a labelled pill on hover */
.ax-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 43px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: var(--ax-hero-glass-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  z-index: 1;
}
.ax-hero__play-pill {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 16px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: var(--ax-hero-glass-shadow);
  color: rgb(255, 255, 255);
  transition: gap var(--ax-hero-play-inner), background-color var(--ax-hero-play-bg);
}
.ax-hero__play-icon { width: 25px; height: 25px; flex: none; }
.ax-hero__play-label {
  display: grid;
  grid-template-columns: 0fr;
  opacity: 0;
  transition: grid-template-columns var(--ax-hero-play-width), opacity var(--ax-hero-play-inner);
}
.ax-hero__play-label span { overflow: hidden; font-size: 14px; line-height: 16.8px; color: rgb(255, 255, 255); white-space: pre; }
.ax-hero__play:hover .ax-hero__play-pill, .ax-hero__play:focus-visible .ax-hero__play-pill { gap: 10px; background-color: rgba(255, 255, 255, 0.15); }
.ax-hero__play:hover .ax-hero__play-label, .ax-hero__play:focus-visible .ax-hero__play-label { grid-template-columns: 1fr; opacity: 1; }

/* ---------------------------------------------------------------- strip: caption + niche marquee */
.ax-hero__strip { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; width: 100%; padding-top: 96px; }
.ax-hero__caption { max-width: 700px; font-size: 14px; line-height: 18.2px; color: var(--ax-text-25); text-align: center; white-space: pre-wrap; }
.ax-hero__marquee {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
}
/* items listed twice; the trailing 100px keeps the half-width loop seamless (motion.js drifts it right) */
.ax-hero__track { display: flex; flex: none; align-items: center; gap: 100px; width: max-content; padding-right: 100px; }
.ax-hero__niche { flex: none; height: 24px; font-size: 24px; font-weight: 500; line-height: 24px; color: rgb(255, 255, 255); white-space: nowrap; opacity: 0.25; }

/* ---------------------------------------------------------------- 810–1199 */
@media (max-width: 1199px) {
  .ax-hero__title { font-size: 48px; line-height: 52.8px; letter-spacing: -2.4px; }
  .ax-hero__subtitle { font-size: 16px; line-height: 22.4px; }
  .ax-hero__frame { border-radius: 8px; }
  .ax-hero__glow-layer { border-radius: 14px; }
  .ax-hero__dots { left: -7.5%; right: -7.5%; height: 600px; }
}

/* ---------------------------------------------------------------- ≤809 */
@media (max-width: 809px) {
  .ax-hero { padding-top: 120px; }
  .ax-hero__title { font-size: 40px; line-height: 44px; letter-spacing: -2px; }
  .ax-hero__title br { display: none; } /* the title_lines break matches the balanced wrap ≥810; on phones the heading flows and balances like the original */
  .ax-hero__buttons { flex-direction: column; }
  .ax-hero__frame { border-radius: 6px; }
  .ax-hero__glow { top: -1px; left: -1px; right: -1px; }
  .ax-hero__glow-layer { border-radius: 7px; }
  .ax-hero__dots {
    left: -12.5%;
    right: -12.5%;
    height: 500px;
    -webkit-mask-image: radial-gradient(50% 50% at 50% 50.8%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(50% 50% at 50% 50.8%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  }
}