/*
 * Aurix-design foundation for /aurix-preview (WiseCord content on the Aurix layout).
 * Every value below was measured from aurix.framer.media by motion-clone
 * (docs/research/aurix-framer-media-0974096e/root-8a5edab2/). Section styles live in
 * css/sections/*.css and only use these tokens + components. Prefix: ax-
 */

/* ---------------------------------------------------------------- tokens */
:root {
  --ax-bg: rgb(7, 9, 14);
  --ax-text: rgb(255, 255, 255);
  --ax-text-75: rgba(255, 255, 255, 0.75);
  --ax-text-60: rgba(255, 255, 255, 0.6);
  --ax-text-40: rgba(255, 255, 255, 0.4);
  --ax-text-25: rgba(255, 255, 255, 0.25);
  --ax-hairline: rgba(255, 255, 255, 0.1);

  /* accent: WiseCord indigo (was Aurix green). One place to re-skin the whole page. */
  --ax-accent: rgb(129, 140, 248);
  --ax-accent-deep: rgb(99, 102, 241);
  --ax-accent-ink: rgb(30, 27, 75);
  --ax-accent-ink-hover: rgb(49, 46, 129);
  --ax-accent-soft: rgb(165, 180, 252);
  --ax-accent-mist: rgb(238, 242, 255);
  --ax-accent-text: rgb(165, 180, 252);
  --ax-accent-wash: rgba(129, 140, 248, 0.03);

  --ax-surface-btn: rgb(20, 22, 26);
  --ax-card-shade: rgb(12, 14, 19);
  --ax-card-bg: conic-gradient(from 0deg at -8.4% -18.5%, rgb(12, 14, 19) 115.2deg, rgb(24, 28, 38) 144deg, rgb(12, 14, 19) 169.2deg);

  --ax-radius-btn: 12px;
  --ax-radius-card: 16px;
  --ax-radius-pill: 17px;

  --ax-font: 'Inter', 'Inter Placeholder', sans-serif;
  --ax-container: 1240px;
  --ax-gutter: 100px;

  /* hover transitions: Framer springs recorded from the original (see aurix-easings.css) */
  --ax-hover: 600ms var(--ease-hover-600);
}
/* measured section gutters: ≥1440 100px (1240 content) · 1200–1439 64px · 810–1199 40px · ≤809 20px */
@media (max-width: 1439px) { :root { --ax-gutter: 64px; } }
@media (max-width: 1199px) { :root { --ax-gutter: 40px; } }
@media (max-width: 809px) { :root { --ax-gutter: 20px; } }

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ax-bg);
  color: var(--ax-text);
  font-family: var(--ax-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Glows, dot fields and particle layers deliberately spill past their sections (as on the
   original). Clip them horizontally at the full-width <main> so they never widen the page —
   mobile browsers otherwise grow the layout viewport to fit them. Vertical spill is kept. */
main { display: block; overflow-x: clip; }

.ax-container {
  width: 100%;
  max-width: calc(var(--ax-container) + 2 * var(--ax-gutter));
  margin: 0 auto;
  padding: 0 var(--ax-gutter);
}

/* ---------------------------------------------------------------- buttons
   .ax-btn               shared shell: 12px 18px, r12, label 16/16
   .ax-btn--primary      white base + indigo gradient layer with inset glow (hero primary button)
   .ax-btn--white        white; indigo layer fades in on hover (nav CTA)
   .ax-btn--dark         rgb(20,22,26) + triple inset highlight; label at .6 → 1 on hover  */
.ax-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--ax-radius-btn);
  cursor: pointer;
  isolation: isolate; /* no overflow clip: the accent layer's outer 30px glow spills past the button (as on the original) */
  white-space: nowrap;
}
.ax-btn__layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(rgb(129, 140, 248) 0%, rgb(99, 102, 241) 100%);
  box-shadow: rgba(255, 255, 255, 0.75) 0px 0px 10px 1px inset, rgba(129, 140, 248, 0) 0px 0px 30px -10px;
  transition: box-shadow var(--ax-hover), opacity var(--ax-hover);
  z-index: -1;
}
.ax-btn__label {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  text-align: right;
  transition: color var(--ax-hover), opacity var(--ax-hover);
}
.ax-btn__label small { display: block; font-size: 11px; font-weight: 500; line-height: 13px; opacity: 0.75; margin-bottom: 3px; text-align: left; }

.ax-btn--primary { background: rgb(255, 255, 255); }
.ax-btn--primary .ax-btn__label { color: var(--ax-accent-ink); }
.ax-btn--primary:hover .ax-btn__layer { box-shadow: rgb(255, 255, 255) 0px 0px 10px 1px inset, rgb(129, 140, 248) 0px 0px 30px -10px; }
.ax-btn--primary:hover .ax-btn__label { color: var(--ax-accent-ink-hover); }

.ax-btn--white { background: rgb(255, 255, 255); }
.ax-btn--white .ax-btn__layer { opacity: 0; }
.ax-btn--white .ax-btn__label { color: rgb(0, 0, 0); }
.ax-btn--white:hover .ax-btn__layer { opacity: 1; box-shadow: rgb(255, 255, 255) 0px 0px 10px 1px inset, rgb(129, 140, 248) 0px 0px 30px -10px; }
.ax-btn--white:hover .ax-btn__label { color: var(--ax-accent-ink-hover); }

.ax-btn--dark {
  overflow: hidden; /* measured: the dark button clips, the accent ones don't */
  background: var(--ax-surface-btn);
  box-shadow: rgba(255, 255, 255, 0.235) 0px 0.602187px 3.01094px -1.66667px inset, rgba(255, 255, 255, 0.192) 0px 2.28853px 11.4427px -3.33333px inset, rgba(255, 255, 255, 0) 0px 10px 50px -5px inset;
}
.ax-btn--dark .ax-btn__label { color: rgb(255, 255, 255); font-weight: 500; line-height: 19.2px; opacity: 0.6; }
.ax-btn--dark:hover .ax-btn__label { opacity: 1; }

/* ---------------------------------------------------------------- section header
   eyebrow pill → h2 → description (features, benefits, works-with, testimonials, pricing) */
.ax-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ax-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--ax-radius-pill);
  background: var(--ax-accent-wash);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  overflow: hidden;
}
.ax-eyebrow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--ax-hairline); pointer-events: none; }
.ax-eyebrow__text {
  font-size: 14px;
  line-height: 18.2px;
  color: var(--ax-accent-text);
  background-image: linear-gradient(90deg, rgb(165, 180, 252) 0%, rgb(238, 242, 255) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ax-h2 { max-width: 600px; font-size: 48px; font-weight: 500; line-height: 52.8px; letter-spacing: -1.92px; color: var(--ax-text); }
.ax-lead { max-width: 600px; font-size: 16px; line-height: 20.8px; letter-spacing: -0.32px; color: var(--ax-text-60); white-space: pre-wrap; }

/* ---------------------------------------------------------------- card surface (features / benefits / testimonials / pricing) */
.ax-card { position: relative; border-radius: var(--ax-radius-card); background-image: var(--ax-card-bg); overflow: hidden; }
.ax-card__shade {
  position: absolute; inset: 0; border-radius: 17px; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0) 80%, rgb(12, 14, 19) 100%);
  box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.05) 0px -1px 2px 0px inset;
}

/* ---------------------------------------------------------------- motion hooks (see js/motion.js)
   Elements animated by the intro start at the recorded "from" state so there is no flash. */
.ax-js [data-appear] { opacity: 0.001; }
.ax-js [data-appear="rise"] { transform: translateY(10px); }
.ax-js [data-appear="unblur"] { opacity: 1; filter: blur(5px); }
.ax-js [data-split] { opacity: 1; }
.ax-js [data-split] .ax-word { opacity: 0.001; filter: blur(10px); }
.ax-word { display: inline-block; white-space: pre; }

@keyframes ax-pulse { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(-50%, -50%) scale(var(--ax-pulse-max, 2)); opacity: 0; } }
@keyframes ax-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* measured: ≥1200 48/52.8/-1.92 · 810–1199 36/39.6/-1.44 · ≤809 32/35.2/-1.28 */
@media (max-width: 1199px) { .ax-h2 { font-size: 36px; line-height: 39.6px; letter-spacing: -1.44px; } }
@media (max-width: 809px) { .ax-h2 { font-size: 32px; line-height: 35.2px; letter-spacing: -1.28px; max-width: 350px; } }

@media (prefers-reduced-motion: reduce) {
  .ax-js [data-appear], .ax-js [data-split] .ax-word { opacity: 1 !important; filter: none !important; transform: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}