/* ==========================================================================
   ANVIXA.ai, editorial layout

   The page was ten sections of identical bordered cards in three-across grids,
   one radius, one rhythm. These are the alternative patterns that break that
   up: numbered cards, full-width pillar rows, borderless feature rows and
   softer section transitions. Loaded after sections.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero graphic
   -------------------------------------------------------------------------- */

.ax-heroart { width: 100%; height: auto; overflow: visible; }
.ax-heroart__pulse { transform-origin: 248px 180px; animation: axPulse 3.6s ease-out infinite; }
.ax-heroart__spark circle { opacity: 0; animation: axSpark 4.2s ease-in-out infinite; }
.ax-heroart__spark .s2 { animation-delay: 1.4s; }
.ax-heroart__spark .s3 { animation-delay: 2.6s; }

@keyframes axPulse {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes axSpark {
  0%, 100% { opacity: 0; }
  40%, 60% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Row list: numbered cards

   Borrows the hover language of .ax-card so the page reads as one system:
   the border takes the accent, a soft shadow appears and the card lifts 2px.
   -------------------------------------------------------------------------- */

.ax-rowlist { display: grid; gap: 16px; }
.ax-rowlist__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 18px;
  align-items: start;
  padding: 26px 28px;
  background: var(--ax-white);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-lg);
  transition: border-color var(--ax-dur) var(--ax-ease),
              box-shadow var(--ax-dur) var(--ax-ease),
              transform var(--ax-dur) var(--ax-ease);
}
.ax-rowlist__item:hover {
  border-color: var(--ax-accent);
  box-shadow: var(--ax-shadow-md);
  transform: translateY(-2px);
}
.ax-rowlist__n {
  font-family: var(--ax-font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ax-accent-deep);
  padding-top: 4px;
  transition: color var(--ax-dur) var(--ax-ease);
}
.ax-rowlist__item:hover .ax-rowlist__n { color: var(--ax-accent); }
.ax-rowlist__item h3 { margin-bottom: 6px; }
.ax-rowlist__item p { font-size: .9375rem; color: var(--ax-text-muted); margin: 0; max-width: 62ch; }

/* On a tinted ground the plain border disappears, so it warms up to match. */
.ax-section--tint .ax-rowlist__item,
.ax-section--stone .ax-rowlist__item { border-color: var(--ax-border-warm); }

.ax-section--ink .ax-rowlist__item {
  background: var(--ax-navy-panel);
  border-color: rgba(255, 255, 255, .1);
}
.ax-section--ink .ax-rowlist__item:hover { border-color: var(--ax-accent); }
.ax-section--ink .ax-rowlist__n { color: var(--ax-accent); }
.ax-section--ink .ax-rowlist__item p { color: var(--ax-text-on-dark-muted); }

/* Two columns on wide screens, so four cards do not run down a page */
@media (min-width: 900px) {
  .ax-rowlist--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   Pillars: full-width numbered rows

   These five entries carry a paragraph each, so a bento of unequal tiles left
   the lead card padded out with dead space. Rows size to their own content,
   read in one pass down the page and leave no orphan tile on the last line.
   -------------------------------------------------------------------------- */

.ax-pillars {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ax-border-warm);
}
.ax-pillar {
  display: grid;
  grid-template-columns: 46px 42px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 0 20px;
  padding: 24px 20px;
  margin: 0 -20px;
  border-bottom: 1px solid var(--ax-border-warm);
  border-radius: var(--ax-r-lg);
  text-decoration: none;
  color: inherit;
  transition: background var(--ax-dur) var(--ax-ease);
}
.ax-pillar:hover { background: var(--ax-white); }

.ax-pillar__n {
  font-family: var(--ax-font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ax-accent-deep);
}
/* The chip is vertically centred by the row, so it drops its stacked margin. */
.ax-pillar .ax-icon { margin-bottom: 0; }

.ax-pillar__body { display: block; }
.ax-pillar__title {
  display: block;
  font-family: var(--ax-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ax-ink);
  margin-bottom: 4px;
  transition: color var(--ax-dur) var(--ax-ease);
}
.ax-pillar:hover .ax-pillar__title { color: var(--ax-accent-deep); }
.ax-pillar__text {
  display: block;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ax-text-muted);
}

/* Wide screens: the title takes its own column so the row reads as a spec
   list and the paragraph fills the width instead of leaving a dead zone
   between the text and the arrow. */
@media (min-width: 1000px) {
  .ax-pillar { grid-template-columns: 46px 42px 268px minmax(0, 1fr) 40px; }
  .ax-pillar__body { display: contents; }
  .ax-pillar__title { margin-bottom: 0; align-self: center; padding-right: 20px; }
  .ax-pillar__text { align-self: center; }
}

.ax-pillar__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--ax-r-pill);
  background: var(--ax-white);
  border: 1px solid var(--ax-border);
  color: var(--ax-accent-deep);
  justify-self: end;
  transition: background var(--ax-dur) var(--ax-ease),
              border-color var(--ax-dur) var(--ax-ease),
              color var(--ax-dur) var(--ax-ease),
              transform var(--ax-dur) var(--ax-ease);
}
.ax-pillar__go .ax-i { width: 16px; height: 16px; }
.ax-pillar:hover .ax-pillar__go {
  background: var(--ax-accent);
  border-color: var(--ax-accent);
  color: var(--ax-white);
  transform: translateX(3px);
}

@media (max-width: 700px) {
  .ax-pillar {
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    gap: 0 14px;
    padding: 20px 16px;
    margin: 0 -16px;
    align-items: start;
  }
  /* The number joins the title line instead of taking a column of its own. */
  .ax-pillar__n { display: none; }
  .ax-pillar__title { font-size: 1.0625rem; }
  .ax-pillar__go { width: 30px; height: 30px; margin-top: 2px; }
}

/* --------------------------------------------------------------------------
   Soft cards: tint and spacing instead of a 1px box on every element
   -------------------------------------------------------------------------- */

.ax-card--soft {
  border: 0;
  background: var(--ax-n-10);
  border-radius: var(--ax-r-xl);
}
.ax-card--soft:hover { box-shadow: var(--ax-shadow-md); }
.ax-section--cream .ax-card--soft { background: rgba(255, 255, 255, .66); }
.ax-section--ink .ax-card--soft { background: rgba(255, 255, 255, .05); border: 0; }

/* Borderless feature row: icon beside text, no container at all */
.ax-features { display: grid; gap: 30px 44px; }
@media (min-width: 760px) { .ax-features--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ax-features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ax-feature { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0 18px; align-items: start; }
.ax-feature .ax-icon { margin-bottom: 0; background: transparent; border: 0; width: 42px; height: 42px; }
.ax-feature .ax-icon .ax-i { width: 22px; height: 22px; }
.ax-feature h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.ax-feature p { font-size: .9375rem; color: var(--ax-text-muted); margin: 0; }
.ax-section--ink .ax-feature p { color: var(--ax-text-on-dark-muted); }

@media (max-width: 640px) {
  .ax-features { gap: 22px; }
  .ax-feature { grid-template-columns: 34px minmax(0, 1fr); gap: 0 14px; }
  .ax-feature .ax-icon { width: 34px; height: 34px; }
  .ax-feature .ax-icon .ax-i { width: 19px; height: 19px; }
}

/* --------------------------------------------------------------------------
   Section transitions: a soft edge rather than a hard colour switch
   -------------------------------------------------------------------------- */

/* Keep an explicit background-color under the gradient. The `background`
   shorthand resets background-color to transparent, which left light text
   with no painted surface behind it if the gradient did not render. */
.ax-section--tint {
  background-color: var(--ax-mist);
  background-image: linear-gradient(180deg, var(--ax-white) 0%, var(--ax-mist) 22%, var(--ax-mist) 78%, var(--ax-white) 100%);
}
.ax-section--fade-ink {
  background-color: var(--ax-ink);
  background-image: linear-gradient(180deg, var(--ax-ink) 0%, var(--ax-ink) 82%, var(--ax-ink-dark) 100%);
}

/* An element that straddles the boundary between two sections */
.ax-overlap { margin-bottom: calc(var(--ax-section-y) * -1 - 24px); position: relative; z-index: 2; }
@media (max-width: 640px) { .ax-overlap { margin-bottom: 0; } }

/* --------------------------------------------------------------------------
   Industry pills: compact, no boxes, for long sector lists
   -------------------------------------------------------------------------- */

.ax-sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
@media (max-width: 900px) { .ax-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ax-sectors { grid-template-columns: minmax(0, 1fr); } }

.ax-sector {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--ax-r-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--ax-dur) var(--ax-ease);
}
.ax-sector:hover { background: var(--ax-mist); }
.ax-section--cream .ax-sector:hover { background: rgba(255, 255, 255, .7); }
.ax-sector .ax-icon { margin-bottom: 0; width: 38px; height: 38px; flex-shrink: 0; }
.ax-sector__body { min-width: 0; }
.ax-sector h3 { font-size: 1rem; margin-bottom: 3px; }
.ax-sector p {
  font-size: .8125rem;
  color: var(--ax-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ax-sector__go { margin-left: auto; color: var(--ax-n-40); flex-shrink: 0; transition: transform var(--ax-dur) var(--ax-ease), color var(--ax-dur) var(--ax-ease); }
.ax-sector__go .ax-i { width: 16px; height: 16px; }
.ax-sector:hover .ax-sector__go { color: var(--ax-accent-deep); transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Credentials: standards and compliance entries
   -------------------------------------------------------------------------- */

/* These used to be .ax-row--security, which put the icon, the title and the
   status badge in one wrapping flex line. Each title is a different length, so
   every row broke at a different point and nothing lined up down the column.
   The left cell is now a fixed stack, icon then title then status, so all three
   entries share the same shape however long the title runs. */
.ax-creds { display: grid; }

.ax-cred {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 10px 46px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--ax-border);
}
.ax-cred:last-child { border-bottom: 1px solid var(--ax-border); }

.ax-cred__head { display: grid; justify-items: start; gap: 12px; }
.ax-cred__head .ax-icon { margin-bottom: 0; }

.ax-cred__title { font-size: 1.0625rem; line-height: 1.35; margin: 0; }

.ax-cred__status {
  font-family: var(--ax-font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ax-accent-deep);
  padding: 5px 10px;
  border: 1px solid var(--ax-accent-alt);
  border-radius: 999px;
  line-height: 1.2;
}

.ax-cred__text {
  font-size: .9375rem;
  line-height: 1.68;
  color: var(--ax-text-muted);
  margin: 0;
  max-width: 68ch;
}

@media (max-width: 760px) {
  .ax-cred {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 24px 0;
  }
  .ax-cred__head { gap: 10px; }
}

/* Hero art column replaces the old bordered panel */
.ax-hero__art { position: relative; }
.ax-hero__art::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  background: radial-gradient(48% 48% at 55% 48%, rgba(25, 132, 199, .14), transparent 70%);
  pointer-events: none;
}
@media (max-width: 980px) { .ax-hero__art { max-width: 420px; margin-inline: auto; } }
@media (max-width: 640px) { .ax-hero__art { display: none; } }