/* ============================================================
   NOX hero A1 — adapted from hero-section-1.

   What carried across: the centred column, the pill announcement with the
   sliding arrow, the framed primary button, the blur-and-rise entrance, the
   diagonal light streaks, and the radial fade into the page below.

   What did NOT: the customer logo wall and the app-screenshot frame. NOX has
   no clients to name yet and no product screenshot, and inventing either is the
   one thing a page like this cannot survive being caught doing.

   Loaded after nox-v3.css and after the page's own inline <style>, so these
   rules win on specificity of source order for the hero only.
   ============================================================ */

/* ---- layout: centred column ---- */
.hero-a1{position:relative;overflow:hidden;padding:56px 0 96px}
.hero-a1 .wrap{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* The back link is navigation, not hero copy, so it stays left where the eye
   looks for it rather than being swept into the centred stack. */
.hero-a1 .back-link{align-self:flex-start;margin-bottom:26px}

.hero-a1 h1{
  max-width:18ch;margin:26px auto 20px;
  font-size:clamp(38px,6.2vw,76px);line-height:1.02;letter-spacing:-.02em;
}
.hero-a1 .lead{
  max-width:58ch;margin:0 auto 34px;font-size:18px;line-height:1.65;
  color:var(--fg-muted);text-wrap:balance;
}
.hero-a1 .cta-micro{max-width:56ch;margin:18px auto 0}
.hero-a1 .hero-ctas{justify-content:center}

/* ---- pill announcement ----
   Rounded-full, padded left, divider, then a circular arrow whose track holds
   two arrows and slides one width on hover, so the arrow appears to fly out
   and be replaced. */
.pill-link{
  display:inline-flex;align-items:center;gap:12px;
  padding:5px 5px 5px 16px;border-radius:var(--r-pill);
  border:1px solid var(--glass-brd);background:var(--glass);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.10);
  text-decoration:none;color:var(--fg);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.pill-link:hover{
  border-color:rgba(255,42,42,.34);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.14),
             0 0 0 1px rgba(255,42,42,.10);
}
.pill-link .pl-text{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-muted);white-space:nowrap;
}
.pill-link:hover .pl-text{color:var(--fg)}
.pill-link .pl-div{width:1px;height:15px;background:var(--glass-brd);flex:none}
.pill-link .pl-arrow{
  width:26px;height:26px;border-radius:var(--r-pill);flex:none;overflow:hidden;
  background:rgba(255,42,42,.14);border:1px solid rgba(255,42,42,.24);
  position:relative;
}
/* Two arrows on one rail: the visible one slides out to the right and its twin
   follows it in from the left, so the arrow reads as moving with the click.

   Everything is a percentage of the button's padding box on purpose. box-sizing
   is border-box here, so a 26px button with a 1px border has a 24px interior -
   the previous version hardcoded a 52px rail and centred it with place-items,
   which stacked grid centring on top of a percentage transform and left the
   glyph sitting 12px left of the button. */
.pill-link .pl-track{
  position:absolute;top:50%;left:0;
  display:flex;align-items:center;width:200%;
  transform:translate(-50%,-50%);
  transition:transform .5s var(--ease);
}
.pill-link:hover .pl-track{transform:translate(0,-50%)}
.pill-link .pl-track svg{
  width:50%;height:14px;flex:none;stroke:var(--red);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---- framed primary button ----
   The component nests the button inside a tinted, bordered shell one radius
   larger. It reads as a key sitting in a slot. */
.btn-frame{
  display:inline-block;padding:4px;border-radius:calc(var(--r-pill));
  background:rgba(255,255,255,.05);border:1px solid var(--glass-brd);
}
.btn-frame .btn{margin:0}

/* ---- diagonal light streaks ----
   Three long rotated blooms, in red rather than the original's neutral white,
   and only on wide screens: at phone width they sit under the copy and just
   muddy it. */
.hero-glows{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.5;display:none;
}
@media (min-width:1024px){ .hero-glows{display:block} }
.hero-glows span{position:absolute;left:0;top:0;display:block;transform-origin:top left}
.hero-glows span:nth-child(1){
  width:35rem;height:80rem;transform:translateY(-350px) rotate(-45deg);border-radius:var(--r-pill);
  background:radial-gradient(68% 68% at 55% 31%, rgba(255,42,42,.075) 0, rgba(255,42,42,.02) 50%, transparent 80%);
}
.hero-glows span:nth-child(2){
  width:14rem;height:80rem;transform:translate(5%,-50%) rotate(-45deg);border-radius:var(--r-pill);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.05) 0, rgba(255,42,42,.02) 80%, transparent 100%);
}
.hero-glows span:nth-child(3){
  width:14rem;height:80rem;transform:translateY(-350px) rotate(-45deg);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,42,42,.04) 0, rgba(255,255,255,.015) 80%, transparent 100%);
}

/* Fade the hero into whatever follows, so the streaks and the particle field
   do not stop on a hard edge. */
.hero-fade{
  position:absolute;left:0;right:0;bottom:0;height:220px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg) 88%);
}

/* ---- entrance: blur and rise, staggered ----
   The original springs each child in with a blur. Done in CSS here, delayed by
   position, so it costs no JavaScript. */
@keyframes heroIn{
  from{opacity:0;filter:blur(12px);transform:translateY(14px)}
  to{opacity:1;filter:blur(0);transform:none}
}
.hero-a1 .wrap > *{opacity:0;animation:heroIn 1.05s var(--ease) forwards}
.hero-a1 .wrap > :nth-child(1){animation-delay:.05s}
.hero-a1 .wrap > :nth-child(2){animation-delay:.16s}
.hero-a1 .wrap > :nth-child(3){animation-delay:.28s}
.hero-a1 .wrap > :nth-child(4){animation-delay:.40s}
.hero-a1 .wrap > :nth-child(5){animation-delay:.52s}
.hero-a1 .wrap > :nth-child(6){animation-delay:.62s}

@media (max-width:680px){
  .hero-a1{padding:36px 0 64px}
  .hero-a1 h1{max-width:14ch}
  .hero-a1 .pill-link .pl-text{font-size:10.5px;letter-spacing:.1em;white-space:normal;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .hero-a1 .wrap > *{opacity:1;animation:none}
  .pill-link .pl-track{transition:none}
}