/* ==========================================================================
   IDA Tech-Solutions — theme stylesheet
   Palette, type scale and component metrics extracted from
   softy-solutions.cmsmasters.studio/light-demo (see DESIGN-TOKENS.md)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette — greys and neutrals from the reference theme's Elementor kit;
     the three brand colours sampled from the logo artwork (2026-08-31).
     The system runs on navy -> blue: navy is the gradient's deep end, blue
     carries links, icons and hovers. Red is the arc's colour and is used
     sparingly, on small accents only -- it is loud at UI scale and reads as
     an error state when spread across buttons.
     The token NAMES are legacy (they predate the rebrand); --ax-purple is the
     dominant accent slot and is now blue, --ax-blue is the gradient's start
     and is now navy. Renaming them would touch ~45 rules for no visual gain. */
  --ax-purple:      #004AED;   /* logo blue  — links, icons, hovers, accents */
  --ax-blue:        #00143E;   /* logo navy  — gradient start (deep end) */
  --ax-navy:        #00143E;   /* alias, for rules that mean navy explicitly */
  --ax-red:         #FA0314;   /* logo arc red — sparing accent only */
  --ax-ink:         #292827;
  --ax-text:        #595958;
  --ax-muted:       #787673;
  --ax-bg:          #F6F5F3;
  --ax-surface:     #FFFFFF;
  --ax-border:      #EAE9E7;
  --ax-accent:      #ADAB8F;
  --ax-amber:       #FFA42D;
  --ax-orange:      #FF5816;

  --ax-gradient:        linear-gradient(70deg, var(--ax-blue) 0%, var(--ax-purple) 70%);
  --ax-gradient-soft:   linear-gradient(70deg, rgba(0, 20, 62,.10) 0%, rgba(0, 74, 237,.10) 70%);
  --ax-gradient-text:   linear-gradient(70deg, var(--ax-blue) 0%, var(--ax-purple) 70%);

  /* Type */
  /* One family portal-wide (2026-08-31). Headings were Roboto Serif, which
     left the logo name reading as a different brand beside the all-Manrope
     nav. The Aigency reference is likewise Manrope-led. Kept as its own
     token so display type can be split off again without touching every
     rule that uses it. */
  --ax-font-head: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ax-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ax-h1: 82px;  --ax-h2: 62px;  --ax-h3: 48px;
  --ax-h4: 32px;  --ax-h5: 24px;  --ax-h6: 17px;
  --ax-body: 18px;
  --ax-btn: 16px;
  --ax-quote: 30px;

  /* Metrics */
  --ax-radius:       10px;
  --ax-radius-card:  20px;
  --ax-radius-pill:  999px;
  --ax-container:    1280px;
  /* Applied as padding-block, so adjacent sections stack DOUBLE this
     between them. 112px meant 224px of dead air per seam. */
  --ax-section-y:    78px;

  --ax-shadow-sm: 0 2px 8px rgba(41, 40, 39, .05);
  --ax-shadow:    0 10px 40px rgba(41, 40, 39, .07);
  --ax-shadow-lg: 0 24px 70px rgba(41, 40, 39, .12);

  --ax-ease: cubic-bezier(.22, .61, .36, 1);

  /* Bootstrap overrides */
  --bs-body-font-family: var(--ax-font-body);
  --bs-body-color: var(--ax-text);
  --bs-body-bg: var(--ax-surface);
  --bs-primary: var(--ax-purple);
  --bs-border-color: var(--ax-border);
  --bs-link-color: var(--ax-purple);
  --bs-link-hover-color: var(--ax-blue);
}

@media (max-width: 1180px) {
  :root {
    --ax-h1: 60px; --ax-h2: 48px; --ax-h3: 36px;
    --ax-h4: 28px; --ax-h5: 22px; --ax-h6: 16px;
    --ax-body: 17px; --ax-btn: 15px; --ax-quote: 28px;
    --ax-container: 1024px;
    --ax-section-y: 62px;
  }
}

@media (max-width: 767px) {
  :root {
    --ax-h1: 42px; --ax-h2: 36px; --ax-h3: 28px;
    --ax-h4: 24px; --ax-h5: 18px; --ax-h6: 15px;
    --ax-body: 16px; --ax-btn: 14px; --ax-quote: 22px;
    --ax-container: 767px;
    --ax-section-y: 46px;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--ax-font-body);
  font-size: var(--ax-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ax-text);
  background: var(--ax-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .ax-h1, .ax-h2, .ax-h3, .ax-h4, .ax-h5 {
  font-family: var(--ax-font-head);
  font-weight: 700;
  color: var(--ax-ink);
  margin: 0 0 .5em;
}

h1, .ax-h1 { font-size: var(--ax-h1); line-height: 1.05; letter-spacing: -2px; }
h2, .ax-h2 { font-size: var(--ax-h2); line-height: 1.10; letter-spacing: -2px; }
h3, .ax-h3 { font-size: var(--ax-h3); line-height: 1.15; letter-spacing: -1px; }
h4, .ax-h4 { font-size: var(--ax-h4); line-height: 1.25; letter-spacing: -1px; }
h5, .ax-h5 { font-size: var(--ax-h5); line-height: 1.35; letter-spacing: -1px; }
h6, .ax-h6 { font-size: var(--ax-h6); line-height: 1.65; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ax-purple); text-decoration: none; transition: color .25s var(--ax-ease); }
a:hover { color: var(--ax-blue); }

img, svg { max-width: 100%; height: auto; }

::selection { background: rgba(0, 74, 237, .16); color: var(--ax-ink); }

:focus-visible {
  outline: 2px solid var(--ax-purple);
  outline-offset: 3px;
  border-radius: 4px;
}

.ax-skip {
  position: absolute; left: 16px; top: -60px; z-index: 2000;
  background: var(--ax-ink); color: #fff; padding: 12px 20px;
  border-radius: var(--ax-radius); font-weight: 700; font-size: 15px;
  transition: top .2s var(--ax-ease);
}
.ax-skip:focus { top: 16px; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.ax-container { max-width: var(--ax-container); margin-inline: auto; padding-inline: 24px; }
.ax-section   { padding-block: var(--ax-section-y); position: relative; }
.ax-section--tight { padding-block: calc(var(--ax-section-y) * .62); }
.ax-bg-soft   { background: var(--ax-bg); }
.ax-bg-ink    { background: var(--ax-ink); color: rgba(255,255,255,.72); }
.ax-bg-ink h1, .ax-bg-ink h2, .ax-bg-ink h3, .ax-bg-ink h4, .ax-bg-ink h5, .ax-bg-ink h6 { color: #fff; }

.ax-lede { font-size: clamp(18px, 1.35vw, 22px); line-height: 1.55; color: var(--ax-muted); }
.ax-measure { max-width: 68ch; }
.ax-measure-sm { max-width: 54ch; }

/* Eyebrow — the theme's "taxonomy" type style */
.ax-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; line-height: 1.55;
  color: var(--ax-purple); margin-bottom: 18px;
}
.ax-eyebrow::before {
  /* The one deliberate use of the logo's red: a 28x2px rule ahead of every
     section label. Small enough to stay an accent, repeated often enough that
     the arc's colour is present throughout the site. */
  content: ""; width: 28px; height: 2px; border-radius: 2px;
  background: var(--ax-red); flex: none;
}
.ax-bg-ink .ax-eyebrow { color: #fff; }

.ax-gradient-text {
  background: var(--ax-gradient-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.ax-section-head { max-width: 760px; margin-bottom: 40px; }
.ax-section-head.text-center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Buttons — radius 10px, padding 13px 30px, gradient → ink on hover
   -------------------------------------------------------------------------- */
.ax-btn {
  --_bg: var(--ax-gradient);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ax-font-body); font-size: var(--ax-btn); font-weight: 700;
  line-height: 1.65; text-align: center; white-space: nowrap;
  padding: 13px 30px; border: 0; border-radius: var(--ax-radius);
  color: #fff; background-image: var(--_bg); background-color: transparent;
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: transform .3s var(--ax-ease), box-shadow .3s var(--ax-ease), color .3s var(--ax-ease);
}
.ax-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ax-ink); opacity: 0;
  transition: opacity .3s var(--ax-ease);
}
.ax-btn:hover, .ax-btn:focus-visible {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(41, 40, 39, .18);
}
.ax-btn:hover::after, .ax-btn:focus-visible::after { opacity: 1; }
.ax-btn i { font-size: 1.05em; transition: transform .3s var(--ax-ease); }
.ax-btn:hover i { transform: translateX(3px); }

.ax-btn--outline {
  background-image: none; color: var(--ax-ink);
  box-shadow: inset 0 0 0 1.5px var(--ax-border);
}
.ax-btn--outline:hover { box-shadow: 0 12px 28px rgba(41, 40, 39, .18); }

.ax-btn--light {
  background-image: none; background-color: #fff; color: var(--ax-ink);
}
.ax-btn--light::after { background: var(--ax-gradient); }
.ax-btn--light:hover { color: #fff; }

.ax-btn--ghost {
  background-image: none; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28);
}
.ax-btn--ghost::after { background: #fff; }
.ax-btn--ghost:hover { color: var(--ax-ink); }

.ax-btn--sm { padding: 9px 20px; font-size: 14px; }
.ax-btn--lg { padding: 16px 36px; }

/* Inline text link with arrow */
.ax-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: var(--ax-ink);
}
.ax-link i { transition: transform .3s var(--ax-ease); color: var(--ax-purple); }
.ax-link:hover { color: var(--ax-purple); }
.ax-link:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Header & navigation
   -------------------------------------------------------------------------- */
.ax-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ax-ease), border-color .3s var(--ax-ease), background .3s var(--ax-ease);
}
.ax-header.is-stuck {
  border-bottom-color: var(--ax-border);
  box-shadow: var(--ax-shadow-sm);
  background: rgba(255,255,255,.96);
}

.ax-header__inner {
  display: flex; align-items: center; gap: 32px;
  min-height: 84px;
}
@media (max-width: 1180px) { .ax-header__inner { min-height: 72px; } }

/* Logo
   Lockup = the IDA mark (arc + monogram, img/logo.png) followed by the company
   name and brand descriptor set as live text. The name and tagline are text
   rather than part of the artwork so they stay crisp at any size, reflow on
   narrow screens, and are readable by search engines -- the earlier all-in-one
   image rendered its type at ~2px in an 84px header.
   width/height on the img are its intrinsic 138x128; they only pin the aspect
   ratio so the header does not reflow while it loads. nginx serves
   img/logo.png.webp automatically to browsers that accept webp. */
.ax-logo { display: inline-flex; align-items: center; gap: 14px; flex: none; }
.ax-logo__img {
  height: 58px; width: auto; display: block; flex: none;
  transition: opacity .25s var(--ax-ease);
}
.ax-logo:hover .ax-logo__img { opacity: .78; }

/* align-items: stretch (the default) is load-bearing -- it makes both rows the
   width of the widest, which is the name, so the descriptor below can justify
   itself to exactly that width. */
.ax-logo__lockup { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ax-logo__name {
  font-family: var(--ax-font-head); font-size: 20px; line-height: 1;
  font-weight: 700; letter-spacing: -.3px; color: var(--ax-ink); white-space: nowrap;
}
/* The descriptor spans the full width of the name above it. Every character is
   its own flex item and space-between shares the slack out between them, so
   the line tracks out evenly to whatever the name measures. Distributing by
   word instead would put all that slack into the two inter-word gaps and leave
   the words themselves untracked; distributing with a fixed letter-spacing
   would only line up at one exact font size. letter-spacing is therefore 0
   here -- space-between is doing the tracking. */
.ax-logo__tagline {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--ax-font-body); font-size: 8.5px; line-height: 1;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0;
  color: var(--ax-muted);
}
.ax-logo__tagline > span { white-space: nowrap; }
/* Word breaks: a little extra air so words stay legible as words once every
   character has been pushed apart. */
.ax-logo__sp { width: .32em; flex: none; }

/* Header shrinks to 72px below 1180px; scale the lockup to match. */
@media (max-width: 1180px) {
  .ax-logo { gap: 11px; }
  .ax-logo__img { height: 48px; }
  .ax-logo__name { font-size: 18px; }
  .ax-logo__tagline { font-size: 7.5px; }
}
/* Narrow phones: the tagline competes with the hamburger for width, and the
   name alone still identifies the site. */
@media (max-width: 400px) {
  .ax-logo__tagline { display: none; }
}
/* Drawer head sits beside a 40px close button; keep that row compact. */
.ax-logo__img--drawer { height: 44px; }

/* Desktop nav */
.ax-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
@media (max-width: 1180px) { .ax-nav { display: none; } }

.ax-nav__item { position: relative; }
.ax-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 15px; border-radius: var(--ax-radius);
  font-size: 16px; font-weight: 700; color: var(--ax-ink);
  transition: background .25s var(--ax-ease), color .25s var(--ax-ease);
}
.ax-nav__link i { font-size: 12px; opacity: .5; transition: transform .3s var(--ax-ease); }
.ax-nav__link:hover, .ax-nav__item.is-open > .ax-nav__link { background: var(--ax-bg); color: var(--ax-purple); }
.ax-nav__item.is-open > .ax-nav__link i { transform: rotate(180deg); }
.ax-nav__link.is-active { color: var(--ax-purple); }

/* Mega dropdown */
.ax-mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translate(-50%, 10px);
  width: min(760px, calc(100vw - 48px));
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-card);
  box-shadow: var(--ax-shadow-lg);
  padding: 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ax-ease), transform .25s var(--ax-ease), visibility .25s;
}
.ax-nav__item.is-open > .ax-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.ax-mega--narrow { width: min(420px, calc(100vw - 48px)); }
.ax-mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.ax-mega--narrow .ax-mega__grid { grid-template-columns: 1fr; }

.ax-mega__link {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 14px; border-radius: 12px;
  transition: background .25s var(--ax-ease);
}
.ax-mega__link:hover { background: var(--ax-bg); }
.ax-mega__icon {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 17px;
  background: var(--ax-gradient-soft); color: var(--ax-purple);
  transition: background .25s var(--ax-ease), color .25s var(--ax-ease);
}
.ax-mega__link:hover .ax-mega__icon { background: var(--ax-gradient); color: #fff; }
.ax-mega__title { font-size: 15.5px; font-weight: 700; color: var(--ax-ink); line-height: 1.35; }
.ax-mega__desc  { font-size: 13.5px; color: var(--ax-muted); line-height: 1.5; margin-top: 3px; }

.ax-mega__foot {
  margin-top: 8px; padding: 14px 16px; border-radius: 12px;
  background: var(--ax-bg);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ax-mega__foot span { font-size: 14px; color: var(--ax-muted); }

.ax-header__actions { display: flex; align-items: center; gap: 12px; flex: none; }
@media (max-width: 1180px) { .ax-header__actions .ax-btn { display: none; } }

/* Mobile toggle */
.ax-burger {
  display: none; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--ax-border); border-radius: var(--ax-radius);
  background: var(--ax-surface); color: var(--ax-ink);
  align-items: center; justify-content: center; font-size: 20px;
  cursor: pointer;
}
@media (max-width: 1180px) { .ax-burger { display: inline-flex; } }

/* Mobile drawer */
.ax-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 1050;
  width: min(420px, 92vw); background: var(--ax-surface);
  box-shadow: -20px 0 60px rgba(41,40,39,.16);
  transform: translateX(100%);
  /* visibility (not just transform) so closed-drawer links leave the tab order */
  visibility: hidden;
  transition: transform .35s var(--ax-ease), visibility .35s;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.ax-drawer.is-open { transform: translateX(0); visibility: visible; }
.ax-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--ax-border);
  position: sticky; top: 0; background: var(--ax-surface); z-index: 2;
}
.ax-drawer__body { padding: 14px 16px 32px; }
.ax-drawer__close {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ax-border);
  background: transparent; color: var(--ax-ink); font-size: 18px; cursor: pointer;
}

.ax-acc__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 12px; background: none; border: 0;
  border-bottom: 1px solid var(--ax-border);
  font-family: var(--ax-font-body); font-size: 17px; font-weight: 700;
  color: var(--ax-ink); text-align: left; cursor: pointer;
}
.ax-acc__trigger i { font-size: 13px; color: var(--ax-muted); transition: transform .3s var(--ax-ease); }
.ax-acc__trigger[aria-expanded="true"] { color: var(--ax-purple); }
.ax-acc__trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.ax-acc__panel { display: none; padding: 6px 12px 14px; }
.ax-acc__panel a {
  display: block; padding: 10px 12px; border-radius: 9px;
  font-size: 15.5px; font-weight: 600; color: var(--ax-text);
}
.ax-acc__panel a:hover { background: var(--ax-bg); color: var(--ax-purple); }

.ax-scrim {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(41, 40, 39, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ax-ease), visibility .3s;
}
.ax-scrim.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.ax-hero { position: relative; overflow: hidden; background: var(--ax-bg); }
.ax-hero__blob {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  pointer-events: none;
}
.ax-hero__blob--a { width: 620px; height: 620px; top: -220px; right: -140px; background: rgba(0, 74, 237,.30); }
.ax-hero__blob--b { width: 520px; height: 520px; bottom: -260px; left: -160px; background: rgba(0, 20, 62,.28); }
.ax-hero__blob--c { width: 340px; height: 340px; top: 40%; left: 44%; background: rgba(255,164,45,.16); }

/* Fill the first screen exactly: viewport less the sticky header, with the
   slide centred in whatever is left. svh (not vh) so mobile browsers measure
   the visible area rather than the taller pre-scroll one, which is what makes
   a 100vh hero overflow on phones. The vh line is the fallback for engines
   without svh; the padding is the floor when content exceeds the screen. */
.ax-hero__inner {
  position: relative; z-index: 1;
  padding-block: 56px 48px;
  min-height: calc(100vh - 84px);
  min-height: calc(100svh - 84px);
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 1180px) {
  .ax-hero__inner { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); }
}
/* Below 992px the slide stacks to one column and is genuinely taller than the
   screen, so pinning it to the viewport would only force a scroll mid-slide. */
@media (max-width: 991px) {
  .ax-hero__inner { padding-block: 52px 46px; min-height: 0; display: block; }
}

.ax-hero__title { font-size: var(--ax-h1); line-height: 1.05; letter-spacing: -2px; margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Split-text heading reveal
   Letters flip up from the baseline on a 800px perspective, staggered. The
   hiding rules are gated behind .is-animated, which only the script adds, so
   a heading stays fully legible if the JS never runs.
   -------------------------------------------------------------------------- */
.ax-split__word { display: inline-block; perspective: 800px; }
.ax-split__letter { display: inline-block; }

.ax-split.is-animated .ax-split__letter {
  opacity: 0;
  transform: rotateX(90deg);
  transform-origin: 50% 100%;
}
.ax-split.is-animated.is-playing .ax-split__letter {
  animation: ax-letter-fade .3s cubic-bezier(.26, -.14, 0, 1.01) forwards,
             ax-letter-flip .7s cubic-bezier(.26, -.14, 0, 1.01) forwards;
}
@keyframes ax-letter-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ax-letter-flip { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

/* A transformed letter paints its own background, so the gradient cannot be
   clipped from an ancestor. Each letter carries the full gradient instead and
   the script offsets background-position so the phrase reads continuously. */
.ax-split__letter--grad {
  background-image: var(--ax-gradient-text);
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .ax-split.is-animated .ax-split__letter { opacity: 1; transform: none; animation: none !important; }
}

/* Hero practice slider: reserve height so slides of different length don't jump */
.ax-hero__slides { position: relative; }
@media (min-width: 992px) { .ax-hero__slides { min-height: 430px; } }
.ax-hero .ax-dots { margin-top: 26px; }
.ax-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.ax-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 9px; border-radius: var(--ax-radius-pill);
  background: var(--ax-surface); border: 1px solid var(--ax-border);
  font-size: 14px; font-weight: 600; color: var(--ax-text);
  box-shadow: var(--ax-shadow-sm);
}
.ax-pill b {
  display: inline-flex; align-items: center; padding: 3px 11px;
  border-radius: var(--ax-radius-pill); background: var(--ax-gradient);
  color: #fff; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}

.ax-hero__art { position: relative; }
.ax-hero__art img {
  width: 100%; border-radius: var(--ax-radius-card);
  box-shadow: var(--ax-shadow-lg);
}

/* Floating stat card over hero art */
.ax-float {
  position: absolute; background: var(--ax-surface);
  border: 1px solid var(--ax-border); border-radius: 14px;
  padding: 14px 18px; box-shadow: var(--ax-shadow);
  display: flex; align-items: center; gap: 12px;
}
.ax-float__val { font-family: var(--ax-font-head); font-size: 26px; font-weight: 700; line-height: 1; color: var(--ax-ink); }
.ax-float__lab { font-size: 12.5px; color: var(--ax-muted); line-height: 1.35; max-width: 120px; }
.ax-float--a { left: -26px;  bottom: 56px; }
.ax-float--b { right: -18px; top: 48px; }
@media (max-width: 991px) { .ax-float { display: none; } }

/* Page hero (interior pages) */
.ax-phero { position: relative; overflow: hidden; background: var(--ax-bg); }
.ax-phero__inner { position: relative; z-index: 1; padding-block: 62px 56px; }
@media (max-width: 767px) { .ax-phero__inner { padding-block: 44px 38px; } }

.ax-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 22px; }
.ax-crumbs a { color: var(--ax-muted); font-weight: 600; }
.ax-crumbs a:hover { color: var(--ax-purple); }
.ax-crumbs span { color: var(--ax-ink); font-weight: 700; }
.ax-crumbs i { font-size: 10px; color: var(--ax-accent); }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.ax-card {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-card);
  padding: 32px;
  transition: transform .35s var(--ax-ease), box-shadow .35s var(--ax-ease), border-color .35s var(--ax-ease);
}
.ax-card:hover { transform: translateY(-6px); box-shadow: var(--ax-shadow); border-color: transparent; }
.ax-card__icon {
  width: 54px; height: 54px; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-size: 23px;
  background: var(--ax-gradient-soft); color: var(--ax-purple);
  margin-bottom: 22px;
  transition: background .35s var(--ax-ease), color .35s var(--ax-ease);
}
.ax-card:hover .ax-card__icon { background: var(--ax-gradient); color: #fff; }
.ax-card__title { font-size: var(--ax-h5); line-height: 1.3; letter-spacing: -1px; margin-bottom: 12px; }
.ax-card__body  { color: var(--ax-muted); font-size: 16px; line-height: 1.6; margin-bottom: 20px; }
.ax-card__foot  { margin-top: auto; }

.ax-card--flat { padding: 28px; }
.ax-card--flat:hover { transform: none; box-shadow: var(--ax-shadow-sm); border-color: var(--ax-border); }

/* Numbered card */
.ax-card__num {
  font-family: var(--ax-font-head); font-size: 40px; font-weight: 800; line-height: 1;
  letter-spacing: -2px; margin-bottom: 18px;
  background: var(--ax-gradient-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Media card (blog / case) */
.ax-mcard {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ax-surface); border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-card);
  transition: transform .35s var(--ax-ease), box-shadow .35s var(--ax-ease);
}
.ax-mcard:hover { transform: translateY(-6px); box-shadow: var(--ax-shadow); }
.ax-mcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ax-bg); }
.ax-mcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ax-ease); }
.ax-mcard:hover .ax-mcard__media img { transform: scale(1.05); }
.ax-mcard__body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.ax-mcard__title { font-size: 22px; line-height: 1.3; letter-spacing: -1px; margin-bottom: 12px; }
.ax-mcard__title a { color: var(--ax-ink); }
.ax-mcard__title a:hover { color: var(--ax-purple); }
.ax-mcard__excerpt { font-size: 15.5px; color: var(--ax-muted); line-height: 1.6; margin-bottom: 20px; }
.ax-mcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.ax-tag {
  display: inline-flex; align-items: center; padding: 5px 13px;
  border-radius: var(--ax-radius-pill);
  background: var(--ax-gradient-soft); color: var(--ax-purple);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.ax-tag--solid { background: var(--ax-gradient); color: #fff; }
.ax-tag--plain { background: var(--ax-bg); color: var(--ax-muted); }

.ax-meta { font-size: 13.5px; color: var(--ax-muted); font-weight: 600; }

/* Industry tile */
.ax-tile {
  position: relative; display: block; overflow: hidden; height: 100%;
  border-radius: var(--ax-radius-card); min-height: 260px;
  background: var(--ax-ink);
  transition: transform .35s var(--ax-ease), box-shadow .35s var(--ax-ease);
}
.ax-tile:hover { transform: translateY(-6px); box-shadow: var(--ax-shadow-lg); }
.ax-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: transform .6s var(--ax-ease), opacity .35s var(--ax-ease); }
.ax-tile:hover img { transform: scale(1.06); opacity: .62; }
.ax-tile__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(41,40,39,0) 30%, rgba(41,40,39,.88) 100%); }
.ax-tile__body { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }
.ax-tile__icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); color: #fff; font-size: 19px; margin-bottom: 14px; }
.ax-tile__title { color: #fff; font-size: 26px; line-height: 1.2; letter-spacing: -1px; margin-bottom: 8px; }
.ax-tile__desc { color: rgba(255,255,255,.78); font-size: 14.5px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   8. Stats & counters
   -------------------------------------------------------------------------- */
.ax-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ax-border); border: 1px solid var(--ax-border); border-radius: var(--ax-radius-card); overflow: hidden; }
@media (max-width: 767px) { .ax-stats { grid-template-columns: repeat(2, 1fr); } }
.ax-stat { background: var(--ax-surface); padding: 34px 28px; text-align: center; }
.ax-bg-soft .ax-stat { background: var(--ax-bg); }
.ax-stat__val {
  font-family: var(--ax-font-head); font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 800; line-height: 1; letter-spacing: -2px; margin-bottom: 10px;
  background: var(--ax-gradient-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ax-stat__lab { font-size: 14.5px; color: var(--ax-muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   9. Logo marquee
   -------------------------------------------------------------------------- */
.ax-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ax-marquee__track { display: flex; width: max-content; animation: ax-scroll 38s linear infinite; }
.ax-marquee:hover .ax-marquee__track { animation-play-state: paused; }
.ax-marquee__item {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 34px; font-family: var(--ax-font-head); font-size: 24px;
  font-weight: 600; letter-spacing: -1px; color: var(--ax-accent); white-space: nowrap;
}
.ax-marquee__item i { font-size: 20px; opacity: .7; }
@keyframes ax-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ax-marquee__track { animation: none; } }

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
.ax-quote { position: relative; }
.ax-quote__mark { font-family: var(--ax-font-head); font-size: 92px; font-weight: 800; line-height: .6; color: var(--ax-purple); opacity: .18; display: block; margin-bottom: 10px; }
.ax-quote__text { font-family: var(--ax-font-head); font-size: var(--ax-quote); font-weight: 500; line-height: 1.35; letter-spacing: -1px; color: var(--ax-ink); margin-bottom: 28px; }
.ax-quote__who { display: flex; align-items: center; gap: 14px; }
.ax-quote__avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--ax-gradient);
  color: #fff; font-family: var(--ax-font-head); font-size: 19px; font-weight: 700; letter-spacing: -1px;
}
.ax-quote__name { font-weight: 700; color: var(--ax-ink); font-size: 16px; }
.ax-quote__role { font-size: 14px; color: var(--ax-muted); }

.ax-slider__panel { display: none; }
.ax-slider__panel.is-active { display: block; animation: ax-fade .5s var(--ax-ease); }
@keyframes ax-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ax-dots { display: flex; gap: 9px; margin-top: 34px; }
.ax-dots button {
  width: 30px; height: 5px; border: 0; border-radius: 3px; padding: 0;
  background: var(--ax-border); cursor: pointer;
  transition: background .3s var(--ax-ease), width .3s var(--ax-ease);
}
.ax-dots button.is-active { width: 46px; background: var(--ax-gradient); }

/* --------------------------------------------------------------------------
   11. Accordion / list blocks
   -------------------------------------------------------------------------- */
.ax-list { list-style: none; margin: 0; padding: 0; }
.ax-list li {
  position: relative; padding-left: 34px; margin-bottom: 15px;
  font-size: 16.5px; line-height: 1.6; color: var(--ax-text);
}
.ax-list li:last-child { margin-bottom: 0; }
.ax-list li::before {
  content: "\F26E"; font-family: "bootstrap-icons"; font-size: 15px;
  position: absolute; left: 0; top: 2px; color: var(--ax-purple);
}
.ax-bg-ink .ax-list li { color: rgba(255,255,255,.78); }
.ax-bg-ink .ax-list li::before { color: #fff; }

/* Timeline */
.ax-timeline { position: relative; padding-left: 42px; }
.ax-timeline::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--ax-blue), var(--ax-purple), transparent);
}
.ax-tl { position: relative; padding-bottom: 38px; }
.ax-tl:last-child { padding-bottom: 0; }
.ax-tl::before {
  content: ""; position: absolute; left: -37px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ax-surface); box-shadow: 0 0 0 3px var(--ax-purple);
}
.ax-tl__year { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ax-purple); margin-bottom: 6px; }
.ax-tl__title { font-size: var(--ax-h5); line-height: 1.3; letter-spacing: -1px; margin-bottom: 8px; }
.ax-tl__body { color: var(--ax-muted); font-size: 16px; }

/* Person */
.ax-person {
  text-align: center; padding: 30px 22px;
  background: var(--ax-surface); border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-card); height: 100%;
  transition: transform .35s var(--ax-ease), box-shadow .35s var(--ax-ease);
}
.ax-person:hover { transform: translateY(-5px); box-shadow: var(--ax-shadow); }
.ax-person__avatar {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; background: var(--ax-gradient);
  color: #fff; font-family: var(--ax-font-head); font-size: 27px; font-weight: 700; letter-spacing: -1px;
}
.ax-person__name { font-size: 19px; line-height: 1.3; letter-spacing: -.5px; margin-bottom: 6px; }
.ax-person__role { font-size: 14px; color: var(--ax-muted); line-height: 1.5; }

/* Job row */
.ax-job {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 24px 28px; background: var(--ax-surface);
  border: 1px solid var(--ax-border); border-radius: var(--ax-radius-card);
  margin-bottom: 14px;
  transition: transform .3s var(--ax-ease), box-shadow .3s var(--ax-ease);
}
.ax-job:hover { transform: translateX(5px); box-shadow: var(--ax-shadow-sm); }
.ax-job__main { flex: 1 1 320px; min-width: 0; }
.ax-job__title { font-size: 21px; line-height: 1.3; letter-spacing: -.5px; margin-bottom: 8px; }
.ax-job__meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--ax-muted); }
.ax-job__meta span { display: inline-flex; align-items: center; gap: 6px; }

.ax-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.ax-chip {
  padding: 9px 20px; border-radius: var(--ax-radius-pill);
  border: 1px solid var(--ax-border); background: var(--ax-surface);
  font-size: 14.5px; font-weight: 700; color: var(--ax-text);
  cursor: pointer; transition: all .25s var(--ax-ease);
}
.ax-chip:hover { border-color: var(--ax-purple); color: var(--ax-purple); }
.ax-chip.is-active { background: var(--ax-gradient); border-color: transparent; color: #fff; }

/* --------------------------------------------------------------------------
   12. Article body
   -------------------------------------------------------------------------- */
.ax-prose { font-size: 18.5px; line-height: 1.72; color: var(--ax-text); }
.ax-prose > p { margin-bottom: 1.5em; }
.ax-prose > p:first-of-type { font-size: 21px; line-height: 1.6; color: var(--ax-ink); }
.ax-prose h2 { font-size: var(--ax-h4); margin: 1.6em 0 .55em; }
.ax-prose h3 { font-size: var(--ax-h5); margin: 1.5em 0 .5em; }
@media (max-width: 767px) { .ax-prose { font-size: 17px; } .ax-prose > p:first-of-type { font-size: 19px; } }

.ax-share { display: flex; align-items: center; gap: 10px; }
.ax-share a {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px;
  border: 1px solid var(--ax-border); color: var(--ax-muted);
  transition: all .25s var(--ax-ease);
}
.ax-share a:hover { background: var(--ax-gradient); border-color: transparent; color: #fff; }

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */
.ax-cta {
  position: relative; overflow: hidden;
  border-radius: var(--ax-radius-card);
  background: var(--ax-ink); color: rgba(255,255,255,.74);
  padding: 54px 52px;
}
@media (max-width: 767px) { .ax-cta { padding: 44px 28px; } }
.ax-cta h2, .ax-cta h3 { color: #fff; }
.ax-cta__blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ax-cta__blob--a { width: 420px; height: 420px; top: -180px; right: -60px; background: rgba(0, 74, 237,.55); }
.ax-cta__blob--b { width: 360px; height: 360px; bottom: -200px; left: -80px; background: rgba(0, 20, 62,.45); }
.ax-cta__inner { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.ax-field { margin-bottom: 20px; }
.ax-label {
  display: block; font-size: 14px; font-weight: 700;
  color: var(--ax-ink); margin-bottom: 8px;
}
.ax-label .req { color: var(--ax-orange); }
.ax-input, .ax-select, .ax-textarea {
  width: 100%; font-family: var(--ax-font-body); font-size: 16px;
  color: var(--ax-ink); background: var(--ax-surface);
  border: 1px solid var(--ax-border); border-radius: var(--ax-radius);
  padding: 13px 16px; line-height: 1.5;
  transition: border-color .25s var(--ax-ease), box-shadow .25s var(--ax-ease);
}
.ax-textarea { min-height: 150px; resize: vertical; }
.ax-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23787673'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  padding-right: 40px;
}
.ax-input:focus, .ax-select:focus, .ax-textarea:focus {
  outline: none; border-color: var(--ax-purple);
  box-shadow: 0 0 0 4px rgba(0, 74, 237, .12);
}
.ax-input::placeholder, .ax-textarea::placeholder { color: #A9A7A4; }
.ax-input.is-invalid, .ax-select.is-invalid, .ax-textarea.is-invalid { border-color: var(--ax-orange); }
.ax-error { display: block; font-size: 13.5px; color: var(--ax-orange); margin-top: 7px; font-weight: 600; }

.ax-check { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--ax-muted); line-height: 1.55; }
.ax-check input { width: 19px; height: 19px; margin-top: 2px; flex: none; accent-color: var(--ax-purple); }

.ax-alert {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 20px; border-radius: var(--ax-radius);
  font-size: 15.5px; margin-bottom: 24px;
}
.ax-alert--ok   { background: rgba(0, 20, 62,.09); color: #1a5f96; border: 1px solid rgba(0, 20, 62,.24); }
.ax-alert--err  { background: rgba(255,88,22,.08);  color: #a33200; border: 1px solid rgba(255,88,22,.22); }
.ax-alert i { font-size: 19px; flex: none; margin-top: 1px; }

/* Office card */
.ax-office {
  height: 100%; padding: 28px; background: var(--ax-surface);
  border: 1px solid var(--ax-border); border-radius: var(--ax-radius-card);
  transition: transform .3s var(--ax-ease), box-shadow .3s var(--ax-ease);
}
.ax-office:hover { transform: translateY(-4px); box-shadow: var(--ax-shadow); }
.ax-office__flag { font-size: 26px; line-height: 1; margin-bottom: 14px; }
.ax-office__city { font-size: 21px; line-height: 1.3; letter-spacing: -.5px; margin-bottom: 4px; }
.ax-office__country { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ax-purple); margin-bottom: 14px; }
.ax-office__addr { font-size: 15px; color: var(--ax-muted); line-height: 1.6; margin-bottom: 14px; }
.ax-office__contact { font-size: 15px; font-weight: 600; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.ax-footer { background: var(--ax-ink); color: rgba(255,255,255,.62); padding-top: 64px; }
.ax-footer h6 {
  color: #fff; font-family: var(--ax-font-body); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 22px;
}
.ax-footer a { color: rgba(255,255,255,.62); font-size: 15.5px; }
.ax-footer .ax-logo__name { color: #fff; }
.ax-footer .ax-logo__tagline { color: rgba(255,255,255,.55); }
.ax-footer a:hover { color: #fff; }
.ax-footer__links { list-style: none; margin: 0; padding: 0; }
.ax-footer__links li { margin-bottom: 12px; }
.ax-footer__blurb { font-size: 15.5px; line-height: 1.65; margin: 22px 0 26px; max-width: 34ch; }

.ax-social { display: flex; gap: 10px; }
.ax-social a {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.72);
  transition: all .25s var(--ax-ease);
}
.ax-social a:hover { background: var(--ax-gradient); color: #fff; transform: translateY(-3px); }

.ax-footer__badges { display: flex; flex-wrap: wrap; gap: 12px; }
.ax-badge {
  padding: 12px 18px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
}
.ax-badge b { display: block; color: #fff; font-size: 14.5px; font-weight: 700; }
.ax-badge span { font-size: 12.5px; color: rgba(255,255,255,.5); }

.ax-footer__bar {
  margin-top: 68px; padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 14.5px;
}
.ax-footer__legal { display: flex; flex-wrap: wrap; gap: 22px; }

/* --------------------------------------------------------------------------
   16. Utilities & motion
   -------------------------------------------------------------------------- */
.ax-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ax-ease), transform .7s var(--ax-ease); }
.ax-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ax-reveal { opacity: 1; transform: none; transition: none; }
  .ax-btn, .ax-card, .ax-mcard, .ax-tile, .ax-person, .ax-job { transition: none !important; }
}

.ax-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 1020;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--ax-gradient); color: #fff; font-size: 19px;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 26px rgba(41,40,39,.24);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: all .3s var(--ax-ease);
}
.ax-top.is-in { opacity: 1; visibility: visible; transform: none; }

.ax-divider { height: 1px; background: var(--ax-border); border: 0; margin: 0; }
.ax-bg-ink .ax-divider { background: rgba(255,255,255,.1); }

.ax-frame {
  border-radius: var(--ax-radius-card); overflow: hidden;
  border: 1px solid var(--ax-border); background: var(--ax-bg);
}
.ax-frame img { display: block; width: 100%; }

.ax-sticky { position: sticky; top: 116px; }
@media (max-width: 991px) { .ax-sticky { position: static; } }