/* works-with section (Aurix design, Aurix `#integrations-1`)
   Values from outline/integrations-1@1440|1024|390 + styles/integrations-1@*.json.
   ≥1200: pt 153 · 810–1199: pt 120 (same 600px stage) · ≤809: pt 120, gap 100, 350px stage. */

.ax-works__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding-top: 153px;
}

/* header block (max 980, gap 32) = .ax-head (max 740, gap 16) + "See all" link */
.ax-works__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: 980px;
}
.ax-works__head { width: 100%; max-width: 740px; }
.ax-works .ax-h2 { text-wrap: balance; } /* Aurix h2: text-wrap balance */

.ax-works__link {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  overflow: hidden;
  color: rgb(255, 255, 255);
  transition: opacity var(--ax-hover);
}
.ax-works__link:hover { opacity: 0.6; }
.ax-works__link-label { font-size: 16px; font-weight: 500; line-height: 19.2px; text-align: right; white-space: pre; }
.ax-works__link svg { flex: none; width: 16px; height: 16px; }

/* ---------------------------------------------------------------- stage */
.ax-works__stage { display: flex; align-items: center; justify-content: center; width: 100%; }

.ax-works__orbit {
  --tile: 75px;
  --tile-r: 20px;
  --near: 75px;   /* diagonal slots: 75 / 450 from the stage edge */
  --far: 450px;
  --edge: 525px;  /* side slots */
  position: relative;
  flex: none;
  width: 600px;
  aspect-ratio: 1 / 1;
}

/* dashed orbit, 534px (89% of stage), 2px dashed white/.1 */
.ax-works__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 534px;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  transform: translate(-50%, -50%);
}
.ax-works__circle::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  pointer-events: none;
}

/* 3 pulsing discs — recorded loop: 2000ms linear, scale 1 → 4|3|2, opacity 1 → 0, in sync */
.ax-works__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 115px;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  filter: blur(2px);
  overflow: hidden;
  transform: translate(-50%, -50%);
  will-change: transform;
  animation: ax-pulse 2000ms linear infinite;
}

/* tri-colour glow behind the centre tile: 125px box, blur 25, three 75px discs */
.ax-works__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 125px;
  height: 125px;
  transform: translate(-50%, -50%);
  filter: blur(25px);
  overflow: hidden;
}
.ax-works__glow > span { position: absolute; width: 75px; height: 75px; border-radius: 100%; overflow: hidden; }
.ax-works__glow-blue { top: 50px; left: 62.5px; background-color: rgb(71, 185, 255); transform: translateX(-50%); }
.ax-works__glow-pink { left: 50px; bottom: 50px; background-color: rgb(255, 202, 226); }
.ax-works__glow-green { right: 50px; bottom: 50px; background-color: rgb(129, 140, 248); }

/* dot field: 80% of the orbit, ratio 1.02632, masked radial .4 → 0. Aurix paints it with a bitmap at
   background-size 321px (≤809: 214px) → dot pitch 5.944px (3.963px), dot radius ≈1.41px (0.94px),
   dot colour rgb(216,216,216) at alpha .10/.29/.60 on ~50% of grid points; rebuilt as CSS dot grids. */
.ax-works__dots {
  --p: 5.944px;
  --r: 1.41px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  aspect-ratio: 1.02632 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-image:
    radial-gradient(circle at calc(var(--p) / 2) calc(var(--p) / 2), rgba(216, 216, 216, 0.6) var(--r), rgba(216, 216, 216, 0) calc(var(--r) + 0.5px)),
    radial-gradient(circle at calc(var(--p) / 2) calc(var(--p) / 2), rgba(216, 216, 216, 0.29) var(--r), rgba(216, 216, 216, 0) calc(var(--r) + 0.5px)),
    radial-gradient(circle at calc(var(--p) / 2) calc(var(--p) / 2), rgba(216, 216, 216, 0.12) var(--r), rgba(216, 216, 216, 0) calc(var(--r) + 0.5px));
  background-size: calc(var(--p) * 5) calc(var(--p) * 5), calc(var(--p) * 2) calc(var(--p) * 2), var(--p) var(--p);
  background-position: calc(var(--p) * 2) calc(var(--p) * 3), var(--p) 0, 0 0;
  -webkit-mask-image: radial-gradient(50% 50%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(50% 50%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

/* "+" marker in the bottom slot: 75px r20 clip, 60px blurred disc with 2px dashed white/.15 ring,
   two 4×24 green bars with a 32px green glow (the glow, clipped by the disc, tints it green) */
.ax-works__plus {
  position: absolute;
  top: 525px;
  left: 50%;
  width: 75px;
  height: 75px;
  border-radius: 20px;
  overflow: hidden;
  transform: translateX(-50%);
}
.ax-works__plus-ring {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  overflow: hidden;
}
.ax-works__plus-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 100%;
}
.ax-works__plus-cross { position: absolute; top: 18.3906px; left: 18.3906px; width: 24px; height: 24px; }
.ax-works__plus-cross > span {
  position: absolute;
  top: 0;
  left: 10px;
  width: 4px;
  height: 24px;
  border-radius: 10px;
  background-color: var(--ax-accent);
  box-shadow: var(--ax-accent) 0px 0px 32px 0px;
}
.ax-works__plus-cross > span + span { transform: rotate(90deg); }

/* ---------------------------------------------------------------- tiles */
.ax-works__slot { position: absolute; width: var(--tile); height: var(--tile); }
.ax-works__slot--top { top: 0; left: 50%; transform: translateX(-50%); }
.ax-works__slot--top-right { top: var(--near); left: var(--far); }
.ax-works__slot--right { top: 50%; left: var(--edge); transform: translateY(-50%); }
.ax-works__slot--bottom-right { top: var(--far); left: var(--far); }
.ax-works__slot--bottom-left { top: var(--far); left: var(--near); }
.ax-works__slot--left { top: 50%; left: 0; transform: translateY(-50%); }
.ax-works__slot--top-left { top: var(--near); left: var(--near); }
.ax-works__slot--center { top: 50%; left: 50%; width: 115px; height: 115px; transform: translate(-50%, -50%); }

/* tile: r20, white/.25 40px glow, inset top highlight white/.6 (Aurix); WiseCord's dark tile + white glyph */
.ax-works__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--tile-r);
  background: rgb(18, 21, 28);
  box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 40px 0px;
  overflow: hidden;
  color: rgb(255, 255, 255);
}
.ax-works__tile svg { width: 38px; height: 38px; opacity: 0.9; }
.ax-works__tile-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: rgba(255, 255, 255, 0.6) 0px 2px 6px 1px inset;
  pointer-events: none;
}
.ax-works__tile--center { border-radius: 32px; background: none; }
.ax-works__tile--center img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* ---------------------------------------------------------------- ranges */
@media (max-width: 1199px) {
  .ax-works__inner { padding-top: 120px; }
}
@media (max-width: 809px) {
  .ax-works__inner { gap: 100px; }

  .ax-works__orbit {
    --tile: 50px;
    --tile-r: 12px;
    --near: 40px;
    --far: 260px;
    --edge: 300px;
    width: 350px;
    max-width: 350px;
  }
  .ax-works__circle { width: 311.5px; }
  .ax-works__pulse { width: 62.2969px; filter: blur(1px); }
  .ax-works__dots { --p: 3.963px; --r: 0.94px; }

  .ax-works__plus { top: 300px; width: 50px; height: 50px; }
  .ax-works__plus-ring { top: 0.5px; left: 0; width: 50px; height: 50px; }
  .ax-works__plus-cross { top: 17.5px; left: 17.5px; width: 16px; height: 16px; }
  .ax-works__plus-cross > span { top: -1px; left: 6.5px; width: 3px; height: 18px; }

  .ax-works__tile svg { width: 25px; height: 25px; }
  .ax-works__slot--center { width: 80px; height: 80px; }
  .ax-works__tile--center { border-radius: 20px; }
}