/* Arena — sports lighting theme. Night-stadium palette, condensed display type. */
:root {
  --ax-bg: #070b12;
  --ax-bg-2: #0b111b;
  --ax-panel: #0e1622;
  --ax-panel-2: #131d2b;
  --ax-line: rgba(214, 226, 244, .12);
  --ax-line-2: rgba(214, 226, 244, .22);
  --ax-text: #eef2f8;
  --ax-mute: #93a0b3;
  --ax-dim: #64728a;
  --ax-signal: #d4ff3a;
  --ax-signal-2: #b8e81c;
  --ax-ink: #0a0e04;
  --ax-disp: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --ax-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --ax-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ax-gut: 32px;
  --ax-max: 1320px;
  --ax-r: 2px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ax-bg); color: var(--ax-text); font: 400 17px/1.6 var(--ax-body); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ax-signal); outline-offset: 3px; }

.ax-skip { position: absolute; left: -9999px; top: 8px; background: var(--ax-signal); color: var(--ax-ink); padding: 8px 14px; z-index: 100; }
.ax-skip:focus { left: 8px; }
.ax-wrap { width: 100%; max-width: var(--ax-max); margin: 0 auto; padding: 0 var(--ax-gut); }

/* ---------- type ---------- */
.ax-kicker { font: 600 13px/1.2 var(--ax-disp); letter-spacing: .18em; text-transform: uppercase; color: var(--ax-signal); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ax-kicker::before { content: ""; width: 28px; height: 2px; background: var(--ax-signal); flex: none; }
.ax-h2 { font: 700 clamp(30px, 3.6vw, 52px)/1 var(--ax-disp); text-transform: uppercase; letter-spacing: .005em; }
.ax-h3 { font: 700 22px/1.1 var(--ax-disp); text-transform: uppercase; margin: 32px 0 14px; }
.ax-lead { font-size: 19px; line-height: 1.6; color: #c6d0de; max-width: 62ch; }
.ax-num { font: 500 13px/1 var(--ax-mono); color: var(--ax-signal); letter-spacing: .05em; }
.ax-arrow { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--ax-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ax-text); padding: 6px 0; border-bottom: 1px solid var(--ax-signal); white-space: nowrap; }
.ax-arrow span { transition: transform .2s; color: var(--ax-signal); }
a:hover .ax-arrow span, .ax-arrow:hover span { transform: translateX(4px); }

/* ---------- buttons ---------- */
.ax-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 24px; font: 700 15px/1 var(--ax-disp); letter-spacing: .12em; text-transform: uppercase; border: 1px solid transparent; border-radius: var(--ax-r); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; white-space: nowrap; }
.ax-btn span { transition: transform .2s; }
.ax-btn:hover span { transform: translateX(4px); }
.ax-btn--signal { background: var(--ax-signal); color: var(--ax-ink); }
.ax-btn--signal:hover { background: #e6ff7a; }
.ax-btn--ghost { border-color: var(--ax-line-2); color: var(--ax-text); }
.ax-btn--ghost:hover { border-color: var(--ax-text); }
.ax-btn--ink { background: var(--ax-ink); color: var(--ax-signal); }
.ax-btn--ink:hover { background: #1b2208; }
.ax-btn--lg { min-height: 58px; padding: 0 30px; font-size: 16px; }

/* ---------- header ---------- */
.ax-top { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .25s, border-color .25s; border-bottom: 1px solid transparent; }
.ax-inner .ax-top, .ax-top.is-solid { background: rgba(7, 11, 18, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--ax-line); }
.ax-top__row { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.ax-logo { display: flex; align-items: center; gap: 12px; flex: none; }
.ax-mark { width: 34px; height: 34px; color: var(--ax-text); }
.ax-logo__word { font: 800 25px/0.9 var(--ax-disp); letter-spacing: .06em; display: flex; flex-direction: column; }
.ax-logo__word small { font: 500 10.5px/1.4 var(--ax-disp); letter-spacing: .32em; color: var(--ax-mute); text-transform: uppercase; margin-top: 3px; }
.ax-nav { display: flex; align-items: center; gap: 28px; }
.ax-nav ul { list-style: none; display: flex; gap: 26px; }
.ax-nav ul a { font: 600 15px/1 var(--ax-disp); letter-spacing: .12em; text-transform: uppercase; color: #c9d3e1; padding: 8px 0; position: relative; }
.ax-nav ul a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--ax-signal); transition: right .25s; }
.ax-nav ul a:hover, .ax-nav ul a[aria-current] { color: #fff; }
.ax-nav ul a:hover::after, .ax-nav ul a[aria-current]::after { right: 0; }
.ax-nav__cta { min-height: 42px; padding: 0 18px; font-size: 14px; }
.ax-burger { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--ax-line-2); border-radius: var(--ax-r); cursor: pointer; position: relative; }
.ax-burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ax-text); transition: transform .25s, top .25s; }
.ax-burger span:first-child { top: 16px; } .ax-burger span:last-child { top: 25px; }
.ax-burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.ax-burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- hero ---------- */
.ax-hero { position: relative; min-height: max(720px, 100vh); display: flex; flex-direction: column; justify-content: flex-end; padding: 140px 0 0; overflow: hidden; isolation: isolate; }
.ax-hero__art, .ax-404__art { position: absolute; inset: 0; z-index: -2; }
.ax-hero__art svg, .ax-404__art svg { width: 100%; height: 100%; }
.ax-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,11,18,.92) 0%, rgba(7,11,18,.55) 45%, rgba(7,11,18,.1) 100%), linear-gradient(0deg, var(--ax-bg) 0%, rgba(7,11,18,0) 42%); }
.ax-hero__in { padding-bottom: 56px; }
.ax-hero__title { font: 800 clamp(52px, 8.6vw, 132px)/.88 var(--ax-disp); text-transform: uppercase; letter-spacing: -.005em; max-width: 12ch; }
.ax-hero__title span { display: block; }
.ax-hero__title span:last-child { color: var(--ax-signal); }
.ax-hero__lead { margin-top: 28px; font-size: 20px; line-height: 1.55; max-width: 54ch; color: #cdd6e3; }
.ax-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.ax-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ax-line-2); margin: 0 0 0; }
.ax-stat { padding: 26px 24px 30px 0; border-right: 1px solid var(--ax-line); margin-right: 24px; }
.ax-stat:last-child { border-right: 0; margin-right: 0; }
.ax-stat dt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ax-stat__v { font: 700 clamp(34px, 3.6vw, 52px)/1 var(--ax-disp); }
.ax-stat__u { font: 600 18px/1 var(--ax-disp); color: var(--ax-signal); letter-spacing: .06em; }
.ax-stat dd { margin: 10px 0 0; color: var(--ax-mute); font-size: 14.5px; line-height: 1.45; }
.ax-stats--page { margin-top: -1px; }

/* ---------- sections ---------- */
.ax-sec { padding: 112px 0; }
.ax-sec--tight { padding: 72px 0; }
.ax-sec--panel { background: var(--ax-panel); border-top: 1px solid var(--ax-line); border-bottom: 1px solid var(--ax-line); }
.ax-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.ax-split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: end; }
.ax-split--top { align-items: start; }
.ax-narrowcol { max-width: 860px; }

.ax-pillars { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 72px; border-top: 1px solid var(--ax-line-2); }
.ax-pillars li { padding: 28px 28px 0 0; }
.ax-pillars li + li { padding-left: 28px; border-left: 1px solid var(--ax-line); }
.ax-pillars h3 { font: 700 24px/1.05 var(--ax-disp); text-transform: uppercase; margin: 18px 0 12px; }
.ax-pillars p { color: var(--ax-mute); font-size: 15.5px; }

/* visual container */
.ax-visual { position: relative; overflow: hidden; background: #050910; }
.ax-visual svg, .ax-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
a:hover > .ax-visual svg, a:hover > .ax-visual img { transform: scale(1.04); }

/* sports grid */
.ax-sports { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 2px; background: var(--ax-line); border: 1px solid var(--ax-line); }
.ax-sport { position: relative; display: block; overflow: hidden; isolation: isolate; }
.ax-sport--lead { grid-column: span 2; grid-row: span 2; }
.ax-sport--wide { grid-column: span 2; }
.ax-sport .ax-visual { position: absolute; inset: 0; z-index: -1; }
.ax-sport::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,8,14,.95) 0%, rgba(5,8,14,.2) 65%); }
.ax-sport__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; }
.ax-sport__k { font: 600 12px/1 var(--ax-disp); letter-spacing: .2em; text-transform: uppercase; color: var(--ax-signal); }
.ax-sport h3 { font: 700 28px/1 var(--ax-disp); text-transform: uppercase; margin-top: 10px; }
.ax-sport--lead h3 { font-size: clamp(36px, 4vw, 56px); }
.ax-sport__f { display: block; margin-top: 10px; font: 400 12.5px/1.3 var(--ax-mono); color: #b9c4d4; }
.ax-sport:hover h3 { color: var(--ax-signal); }

/* luminaire families */
.ax-families { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ax-family { display: flex; flex-direction: column; background: var(--ax-panel); border: 1px solid var(--ax-line); transition: border-color .25s, transform .25s; }
.ax-family:hover { border-color: var(--ax-signal); transform: translateY(-3px); }
.ax-family__fig { position: relative; aspect-ratio: 4 / 3; color: #c9d4e4; background-image: linear-gradient(var(--ax-line) 1px, transparent 1px), linear-gradient(90deg, var(--ax-line) 1px, transparent 1px); background-size: 24px 24px; background-position: center; border-bottom: 1px solid var(--ax-line); padding: 18px; }
.ax-family__fig svg { width: 100%; height: 100%; }
.ax-family__txt { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ax-family__n { font: 500 12px/1 var(--ax-mono); color: var(--ax-signal); text-transform: uppercase; letter-spacing: .06em; }
.ax-family h3 { font: 700 30px/1 var(--ax-disp); text-transform: uppercase; }
.ax-family__use { font: 600 13px/1.4 var(--ax-disp); letter-spacing: .1em; text-transform: uppercase; color: #c3cddb; }
.ax-family p:not(.ax-family__use) { color: var(--ax-mute); font-size: 15.5px; flex: 1; }
.ax-family .ax-arrow { align-self: flex-start; margin-top: 8px; }

/* steps */
.ax-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: s; position: relative; }
.ax-steps::before { content: ""; position: absolute; top: 23px; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, var(--ax-signal), var(--ax-line-2)); }
.ax-steps li { position: relative; }
.ax-steps__n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ax-bg); border: 1px solid var(--ax-signal); color: var(--ax-signal); font: 700 18px/1 var(--ax-disp); position: relative; }
.ax-steps h3 { font: 700 24px/1.05 var(--ax-disp); text-transform: uppercase; margin: 24px 0 10px; }
.ax-steps p { color: var(--ax-mute); font-size: 15.5px; }

/* project cards */
.ax-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ax-proj { display: flex; flex-direction: column; background: var(--ax-panel); border: 1px solid var(--ax-line); transition: border-color .25s; }
.ax-proj:hover { border-color: var(--ax-line-2); }
.ax-proj .ax-visual { aspect-ratio: 16 / 10; }
.ax-proj__txt { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ax-proj__meta { font: 400 12.5px/1.3 var(--ax-mono); color: var(--ax-mute); }
.ax-proj h3 { font: 700 25px/1.05 var(--ax-disp); text-transform: uppercase; }
.ax-proj p { color: var(--ax-mute); font-size: 15.5px; }
.ax-proj:hover h3 { color: var(--ax-signal); }
.ax-cards3--all .ax-proj--wide { grid-column: span 2; grid-row: span 2; }
.ax-cards3--all .ax-proj--wide .ax-visual { aspect-ratio: auto; flex: 1; min-height: 300px; }
.ax-cards3--all .ax-proj--wide h3 { font-size: clamp(30px, 3vw, 42px); }
.ax-demo { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--ax-mono); letter-spacing: .04em; color: var(--ax-mute); border: 1px dashed var(--ax-line-2); padding: 5px 8px; border-radius: 99px; }
.ax-demo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ax-dim); }

/* standards strip */
.ax-standards { border-top: 1px solid var(--ax-line); border-bottom: 1px solid var(--ax-line); padding: 34px 0; background: var(--ax-bg-2); }
.ax-standards__row { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.ax-standards__t { font: 600 13px/1.3 var(--ax-disp); letter-spacing: .18em; text-transform: uppercase; color: var(--ax-mute); }
.ax-standards ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 34px; }
.ax-standards li { font: 700 22px/1 var(--ax-disp); text-transform: uppercase; letter-spacing: .04em; color: #d9e1ec; }
.ax-standards__note { margin-top: 16px; font-size: 13px; color: var(--ax-dim); }

/* list rows */
.ax-rows { list-style: none; border-top: 1px solid var(--ax-line-2); }
.ax-rows li { border-bottom: 1px solid var(--ax-line); }
.ax-rows a { display: grid; grid-template-columns: 120px 1fr 1.2fr 32px; gap: 28px; align-items: baseline; padding: 26px 0; transition: background .2s, padding .2s; }
.ax-rows a:hover { background: var(--ax-panel); padding-left: 16px; padding-right: 16px; }
.ax-rows time { font: 400 13px/1 var(--ax-mono); color: var(--ax-mute); }
.ax-rows__t { font: 700 25px/1.1 var(--ax-disp); text-transform: uppercase; }
.ax-rows__s { color: var(--ax-mute); font-size: 15.5px; }
.ax-rows__a { color: var(--ax-signal); font-size: 20px; }
.ax-rows a:hover .ax-rows__t { color: var(--ax-signal); }

/* CTA band */
.ax-cta { background: var(--ax-signal); color: var(--ax-ink); padding: 84px 0; position: relative; overflow: hidden; }
.ax-cta::before { content: ""; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; background: repeating-linear-gradient(115deg, rgba(10,14,4,.06) 0 2px, transparent 2px 22px); }
.ax-cta__row { display: flex; align-items: center; justify-content: space-between; gap: 40px; position: relative; }
.ax-cta__kick { font: 700 13px/1 var(--ax-disp); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px; }
.ax-cta__title { font: 800 clamp(34px, 4.6vw, 64px)/.95 var(--ax-disp); text-transform: uppercase; max-width: 18ch; }
.ax-cta__body { margin-top: 16px; font-size: 18px; max-width: 56ch; color: #222a10; }

/* footer */
.ax-foot { background: #04070c; border-top: 1px solid var(--ax-line); padding: 80px 0 32px; color: var(--ax-mute); font-size: 15px; }
.ax-foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.ax-foot__brand p { margin: 22px 0; max-width: 38ch; }
.ax-foot h3 { font: 600 13px/1 var(--ax-disp); letter-spacing: .2em; text-transform: uppercase; color: var(--ax-text); margin-bottom: 20px; }
.ax-foot ul { list-style: none; display: grid; gap: 10px; }
.ax-foot a:hover { color: var(--ax-signal); }
.ax-foot__contact a { color: var(--ax-text); }
.ax-foot__base { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--ax-line); font-size: 13px; color: var(--ax-dim); }

/* ---------- inner page header ---------- */
.ax-ph { position: relative; padding: 168px 0 72px; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--ax-line); }
.ax-ph__art { position: absolute; inset: 0; z-index: -2; opacity: .55; }
.ax-ph__art svg { width: 100%; height: 100%; }
.ax-ph__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ax-bg) 10%, rgba(7,11,18,.6) 60%, rgba(7,11,18,.3)), linear-gradient(0deg, var(--ax-bg), transparent 60%); }
.ax-ph__beam { position: absolute; z-index: -1; top: -30%; right: 4%; width: 46%; height: 160%; background: conic-gradient(from 200deg at 80% 0%, transparent 0deg, rgba(255,250,225,.07) 14deg, rgba(212,255,58,.05) 22deg, transparent 34deg); pointer-events: none; }
.ax-ph__title { font: 800 clamp(44px, 6.4vw, 96px)/.9 var(--ax-disp); text-transform: uppercase; max-width: 16ch; }
.ax-ph__title--md { font-size: clamp(38px, 5vw, 72px); max-width: 20ch; }
.ax-ph__lead { margin-top: 24px; font-size: 19.5px; line-height: 1.55; color: #c6d0de; max-width: 60ch; }
.ax-ph__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.ax-ph__fix { color: #c9d4e4; aspect-ratio: 4 / 3; border: 1px solid var(--ax-line); background-image: linear-gradient(var(--ax-line) 1px, transparent 1px), linear-gradient(90deg, var(--ax-line) 1px, transparent 1px); background-size: 24px 24px; padding: 20px; }
.ax-ph__fix svg { width: 100%; height: 100%; }
.ax-ph .ax-demo, .ax-pjhead .ax-demo { margin-top: 22px; }

.ax-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 400 12.5px/1.4 var(--ax-mono); color: var(--ax-dim); margin-bottom: 28px; }
.ax-crumbs a { color: var(--ax-mute); }
.ax-crumbs a:hover { color: var(--ax-signal); }
.ax-crumbs [aria-current] { color: #c6d0de; }

/* category head on products overview */
.ax-cathead { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; margin-bottom: 56px; }
.ax-cathead__fig { color: #c9d4e4; aspect-ratio: 4 / 3; border: 1px solid var(--ax-line); background-image: linear-gradient(var(--ax-line) 1px, transparent 1px), linear-gradient(90deg, var(--ax-line) 1px, transparent 1px); background-size: 24px 24px; padding: 18px; }
.ax-cathead__fig svg { width: 100%; height: 100%; }
.ax-cathead .ax-lead { margin: 20px 0 28px; }

/* product cards */
.ax-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ax-pcard { display: flex; flex-direction: column; background: var(--ax-bg-2); border: 1px solid var(--ax-line); transition: border-color .25s, transform .25s; }
.ax-sec--panel .ax-pcard { background: var(--ax-bg); }
.ax-pcard:hover { border-color: var(--ax-signal); transform: translateY(-3px); }
.ax-pcard__fig { position: relative; aspect-ratio: 4 / 3; color: #b9c5d6; padding: 14px; border-bottom: 1px solid var(--ax-line); background: radial-gradient(circle at 50% 45%, rgba(212,255,58,.06), transparent 65%); }
.ax-pcard__fig svg, .ax-pcard__fig img { width: 100%; height: 100%; object-fit: contain; }
.ax-pcard__model { position: absolute; left: 12px; top: 12px; font: 500 11.5px/1 var(--ax-mono); color: var(--ax-signal); background: rgba(7,11,18,.8); border: 1px solid var(--ax-line-2); padding: 5px 7px; }
.ax-pcard__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.ax-pcard h3 { font: 700 22px/1.05 var(--ax-disp); text-transform: uppercase; }
.ax-pcard__specs { display: grid; gap: 6px; margin: 0; flex: 1; }
.ax-pcard__specs div { display: grid; grid-template-columns: 62px 1fr; gap: 10px; font-size: 13.5px; border-top: 1px solid var(--ax-line); padding-top: 6px; }
.ax-pcard__specs dt { color: var(--ax-dim); font: 500 11px/1.8 var(--ax-mono); text-transform: uppercase; }
.ax-pcard__specs dd { margin: 0; color: #cfd8e5; }
.ax-pcard .ax-arrow { align-self: flex-start; font-size: 13px; }

/* product page */
.ax-prod { position: relative; padding: 140px 0 88px; overflow: hidden; isolation: isolate; }
.ax-prod__grid { display: grid; grid-template-columns: 6fr 6fr; gap: 64px; align-items: start; }
.ax-prod__fig { position: sticky; top: 100px; aspect-ratio: 1 / 1; color: #d0dae7; border: 1px solid var(--ax-line-2); padding: 48px 32px; background-color: var(--ax-bg-2); background-image: radial-gradient(circle at 50% 45%, rgba(212,255,58,.08), transparent 60%), linear-gradient(var(--ax-line) 1px, transparent 1px), linear-gradient(90deg, var(--ax-line) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; display: grid; place-items: center; }
.ax-prod__fig svg, .ax-prod__fig img { width: 100%; height: 100%; object-fit: contain; }
.ax-prod__tag { position: absolute; left: 16px; top: 16px; font: 600 12px/1 var(--ax-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--ax-mute); }
.ax-prod__model { position: absolute; right: 16px; bottom: 16px; font: 500 14px/1 var(--ax-mono); color: var(--ax-signal); }
.ax-prod__title { font: 800 clamp(42px, 5vw, 76px)/.92 var(--ax-disp); text-transform: uppercase; }
.ax-prod__code { margin: 18px 0 22px; font: 400 14px/1.4 var(--ax-mono); color: var(--ax-mute); display: flex; gap: 10px; flex-wrap: wrap; }
.ax-prod__code strong { color: var(--ax-signal); font-weight: 500; }
.ax-ticks { list-style: none; display: grid; gap: 12px; margin: 30px 0 34px; border-top: 1px solid var(--ax-line); padding-top: 26px; }
.ax-ticks li { position: relative; padding-left: 30px; color: #d3dbe6; font-size: 16px; }
.ax-ticks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 16px; height: 2px; background: var(--ax-signal); }
.ax-prod__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ax-prod__war { margin-top: 18px; font: 400 13px/1.4 var(--ax-mono); color: var(--ax-mute); }

.ax-prodspec { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.ax-prodspec .ax-h2 { margin-bottom: 28px; }
.ax-spec { width: 100%; border-collapse: collapse; font-size: 15px; }
.ax-spec th, .ax-spec td { text-align: left; vertical-align: top; padding: 13px 0; border-bottom: 1px solid var(--ax-line); }
.ax-spec th { width: 40%; padding-right: 16px; font: 500 12px/1.6 var(--ax-mono); text-transform: uppercase; color: var(--ax-mute); letter-spacing: .03em; }
.ax-spec td { color: #e2e8f1; }
.ax-spec tr:first-child th, .ax-spec tr:first-child td { border-top: 1px solid var(--ax-line-2); }
.ax-tablewrap { overflow-x: auto; border: 1px solid var(--ax-line-2); }
.ax-var { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 480px; }
.ax-var th { text-align: left; font: 600 12.5px/1.2 var(--ax-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ax-ink); background: var(--ax-signal); padding: 12px 14px; }
.ax-var td { padding: 12px 14px; border-top: 1px solid var(--ax-line); color: #dbe2ec; white-space: pre-line; }
.ax-var tbody tr:hover td { background: rgba(212,255,58,.05); }
.ax-var td:first-child { font-family: var(--ax-mono); font-size: 13.5px; color: var(--ax-signal); }
.ax-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ax-chips li { font: 500 13px/1 var(--ax-body); border: 1px solid var(--ax-line-2); padding: 8px 12px; border-radius: 99px; color: #d3dbe6; }

.ax-pager { display: flex; justify-content: space-between; gap: 20px; padding-top: 0; padding-bottom: 96px; }
.ax-pager a { display: flex; flex-direction: column; gap: 6px; font: 700 22px/1.1 var(--ax-disp); text-transform: uppercase; max-width: 48%; }
.ax-pager a span { font: 400 12px/1 var(--ax-mono); color: var(--ax-mute); text-transform: none; }
.ax-pager__n { text-align: right; align-items: flex-end; }
.ax-pager a:hover { color: var(--ax-signal); }

/* prose */
.ax-prose { font-size: 17.5px; line-height: 1.72; color: #d0d8e4; }
.ax-prose > * + * { margin-top: 1.1em; }
.ax-prose h2 { font: 700 34px/1.05 var(--ax-disp); text-transform: uppercase; color: var(--ax-text); margin-top: 1.9em; }
.ax-prose h3 { font: 700 24px/1.1 var(--ax-disp); text-transform: uppercase; color: var(--ax-text); margin-top: 1.7em; }
.ax-prose > h2:first-child, .ax-prose > h3:first-child { margin-top: 0; }
.ax-prose a { color: var(--ax-signal); border-bottom: 1px solid; }
.ax-prose strong { color: var(--ax-text); font-weight: 600; }
.ax-prose ul, .ax-prose ol { padding-left: 0; list-style: none; display: grid; gap: .6em; }
.ax-prose ul li { position: relative; padding-left: 28px; }
.ax-prose ul li::before { content: ""; position: absolute; left: 0; top: .78em; width: 14px; height: 2px; background: var(--ax-signal); }
.ax-prose ol { counter-reset: o; }
.ax-prose ol li { counter-increment: o; position: relative; padding-left: 40px; }
.ax-prose ol li::before { content: counter(o, decimal-leading-zero); position: absolute; left: 0; top: .2em; font: 500 13px/1.5 var(--ax-mono); color: var(--ax-signal); }
.ax-prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.ax-prose th { text-align: left; font: 600 12.5px/1.3 var(--ax-disp); letter-spacing: .1em; text-transform: uppercase; color: var(--ax-ink); background: var(--ax-signal); padding: 11px 14px; white-space: nowrap; }
.ax-prose td { padding: 11px 14px; border-bottom: 1px solid var(--ax-line); vertical-align: top; }
.ax-prose em { color: #e8edf5; }
.ax-prose--cards h2 { border-top: 1px solid var(--ax-line-2); padding-top: 28px; font-size: 28px; }
.ax-prose--cards h2::before { content: ""; display: block; width: 28px; height: 3px; background: var(--ax-signal); margin-bottom: 16px; }

/* article layout + sidebar */
.ax-article { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; }
.ax-article .ax-prose { max-width: 760px; }
.ax-side { display: grid; gap: 18px; position: sticky; top: 100px; }
.ax-box { border: 1px solid var(--ax-line-2); padding: 24px; background: var(--ax-bg-2); }
.ax-box__t { font: 700 20px/1.1 var(--ax-disp); text-transform: uppercase; margin-bottom: 16px; }
.ax-box__note { font-size: 13px; color: var(--ax-dim); margin-top: 14px; line-height: 1.5; }
.ax-box > .ax-box__note:only-child { margin-top: 0; }
.ax-box--signal { background: var(--ax-signal); color: var(--ax-ink); border-color: var(--ax-signal); }
.ax-box--signal p { margin-bottom: 18px; font-size: 15px; color: #253010; }
.ax-spec--side th { width: 52%; }
.ax-links { list-style: none; display: grid; gap: 2px; }
.ax-links a { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--ax-line); font-weight: 500; }
.ax-links a span { font: 400 11.5px/1 var(--ax-mono); color: var(--ax-signal); }
.ax-links a:hover { color: var(--ax-signal); }
.ax-links--plain li { padding: 6px 0; }
.ax-banner { margin-top: -1px; }
.ax-visual--banner { aspect-ratio: 21 / 8; border: 1px solid var(--ax-line); border-top: 0; }

/* solutions list */
.ax-sollist { display: grid; gap: 28px; }
.ax-solrow { display: grid; grid-template-columns: 6fr 5fr; background: var(--ax-panel); border: 1px solid var(--ax-line); transition: border-color .25s; }
.ax-solrow:nth-child(even) { grid-template-columns: 5fr 6fr; }
.ax-solrow:nth-child(even) .ax-solrow__vis { order: 2; }
.ax-solrow:hover { border-color: var(--ax-line-2); }
.ax-solrow__vis { min-height: 340px; }
.ax-solrow__txt { padding: 40px 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.ax-solrow__txt .ax-num { margin-bottom: 22px; }
.ax-solrow__txt .ax-kicker { margin-bottom: 12px; }
.ax-solrow__txt > p { color: var(--ax-mute); margin: 16px 0 24px; }
.ax-solrow:hover .ax-h2 { color: var(--ax-signal); }
.ax-mini { display: grid; gap: 0; width: 100%; margin: 0 0 28px; }
.ax-mini div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--ax-line); font-size: 14px; }
.ax-mini dt { color: var(--ax-mute); }
.ax-mini dd { margin: 0; font-family: var(--ax-mono); font-size: 13px; color: var(--ax-text); text-align: right; }

/* project detail */
.ax-pjhead { position: relative; min-height: 640px; display: flex; align-items: flex-end; padding: 160px 0 64px; isolation: isolate; overflow: hidden; }
.ax-pjhead__art { position: absolute; inset: 0; z-index: -2; }
.ax-pjhead__art svg, .ax-pjhead__art img { width: 100%; height: 100%; object-fit: cover; }
.ax-pjhead__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--ax-bg) 0%, rgba(7,11,18,.55) 55%, rgba(7,11,18,.35)); }
.ax-factbar { border-top: 1px solid var(--ax-line-2); border-bottom: 1px solid var(--ax-line); background: var(--ax-bg-2); }
.ax-factbar dl { display: flex; flex-wrap: wrap; margin-top: 0; margin-bottom: 0; }
.ax-factbar div { padding: 22px 32px 22px 0; margin-right: 32px; border-right: 1px solid var(--ax-line); }
.ax-factbar div:last-child { border-right: 0; }
.ax-factbar dt { font: 500 11px/1 var(--ax-mono); text-transform: uppercase; color: var(--ax-dim); letter-spacing: .06em; }
.ax-factbar dd { margin: 8px 0 0; font: 700 22px/1 var(--ax-disp); text-transform: uppercase; }

/* article index feature */
.ax-feature { display: grid; grid-template-columns: 7fr 5fr; border: 1px solid var(--ax-line); background: var(--ax-panel); margin-bottom: 56px; }
.ax-feature .ax-visual { min-height: 380px; }
.ax-feature__txt { padding: 44px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; justify-content: flex-end; }
.ax-feature time { font: 400 13px/1 var(--ax-mono); color: var(--ax-mute); }
.ax-feature p { color: var(--ax-mute); }
.ax-feature:hover .ax-h2 { color: var(--ax-signal); }

/* technology page */
.ax-techgrid { display: grid; grid-template-columns: 4fr 7fr; gap: 72px; align-items: start; }
.ax-techgrid__fig { display: grid; gap: 20px; position: sticky; top: 100px; }
.ax-techgrid__fig figure { margin: 0; border: 1px solid var(--ax-line); color: #c9d4e4; padding: 18px 18px 14px; background-image: linear-gradient(var(--ax-line) 1px, transparent 1px), linear-gradient(90deg, var(--ax-line) 1px, transparent 1px); background-size: 22px 22px; }
.ax-techgrid__fig figcaption { font: 600 13px/1 var(--ax-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--ax-mute); margin-top: 10px; }

/* contact & form */
.ax-contact { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.ax-contact__side { display: grid; gap: 18px; }
.ax-checklist { list-style: none; counter-reset: c; display: grid; gap: 14px; }
.ax-checklist li { counter-increment: c; position: relative; padding-left: 38px; color: var(--ax-mute); font-size: 15px; }
.ax-checklist li::before { content: counter(c, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: 500 12.5px/1.4 var(--ax-mono); color: var(--ax-signal); }
.ax-checklist strong { color: var(--ax-text); font-weight: 600; }
.ax-form { background: var(--ax-bg-2); border: 1px solid var(--ax-line-2); padding: 36px; }
.ax-sec--panel .ax-form { background: var(--ax-bg); }
.ax-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ax-field { display: flex; flex-direction: column; gap: 8px; }
.ax-field--full { grid-column: 1 / -1; }
.ax-field span { font: 600 12.5px/1 var(--ax-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ax-mute); }
.ax-field input, .ax-field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ax-line-2); padding: 10px 0; font-size: 16px; border-radius: 0; transition: border-color .2s; }
.ax-field textarea { resize: vertical; border: 1px solid var(--ax-line-2); padding: 12px; }
.ax-field input:focus, .ax-field textarea:focus { outline: none; border-color: var(--ax-signal); }
.ax-field .is-bad { border-color: #ff6b5b; }
.ax-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ax-form__ref { margin-top: 18px; font: 400 13px/1.4 var(--ax-mono); color: var(--ax-mute); }
.ax-form__ref strong { color: var(--ax-signal); font-weight: 500; }
.ax-form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 26px; }
.ax-form__msg { font-size: 14.5px; color: var(--ax-mute); }
.ax-form__msg.is-ok { color: var(--ax-signal); }
.ax-form__msg.is-err { color: #ff8a7a; }
.ax-form.is-sent .ax-form__grid { opacity: .4; pointer-events: none; }

/* 404 */
.ax-404 { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding: 140px 0 96px; isolation: isolate; overflow: hidden; }

/* reveal */
.ax-js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.ax-js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } .ax-js [data-reveal] { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .ax-nav ul { gap: 18px; }
  .ax-nav ul a { font-size: 14px; }
  .ax-pgrid { grid-template-columns: repeat(3, 1fr); }
  .ax-article { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
}
@media (max-width: 1040px) {
  :root { --ax-gut: 24px; }
  .ax-burger { display: block; }
  .ax-nav { position: fixed; inset: 76px 0 0 0; background: var(--ax-bg); flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--ax-gut) 32px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; overflow-y: auto; border-top: 1px solid var(--ax-line); }
  .ax-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
  .ax-nav ul { flex-direction: column; gap: 0; }
  .ax-nav ul a { display: block; font-size: 26px; padding: 16px 0; border-bottom: 1px solid var(--ax-line); color: var(--ax-text); }
  .ax-nav ul a::after { display: none; }
  .ax-nav__cta { margin-top: 28px; min-height: 54px; }
  body.ax-lock { overflow: hidden; }
  .ax-top.is-open { background: var(--ax-bg); }
  .ax-stats { grid-template-columns: repeat(2, 1fr); }
  .ax-stat:nth-child(2) { border-right: 0; margin-right: 0; }
  .ax-stat:nth-child(n+3) { border-top: 1px solid var(--ax-line); }
  .ax-split, .ax-cathead, .ax-prodspec, .ax-ph__grid, .ax-techgrid, .ax-contact { grid-template-columns: 1fr; gap: 40px; }
  .ax-pillars { grid-template-columns: repeat(2, 1fr); }
  .ax-pillars li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ax-pillars li:nth-child(n+3) { margin-top: 32px; }
  .ax-families, .ax-cards3 { grid-template-columns: repeat(2, 1fr); }
  .ax-sports { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .ax-sport--lead { grid-row: span 1; }
  .ax-pgrid { grid-template-columns: repeat(2, 1fr); }
  .ax-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .ax-steps::before { display: none; }
  .ax-article { grid-template-columns: 1fr; }
  .ax-side, .ax-techgrid__fig, .ax-prod__fig { position: static; }
  .ax-techgrid__fig { grid-template-columns: repeat(3, 1fr); }
  .ax-prod__grid { grid-template-columns: 1fr; gap: 40px; }
  .ax-prod__fig { max-width: 560px; }
  .ax-rows a { grid-template-columns: 110px 1fr 28px; }
  .ax-rows__s { display: none; }
  .ax-foot__grid { grid-template-columns: 1fr 1fr; }
  .ax-solrow, .ax-solrow:nth-child(even) { grid-template-columns: 1fr; }
  .ax-solrow:nth-child(even) .ax-solrow__vis { order: 0; }
  .ax-solrow__vis { min-height: 0; aspect-ratio: 16 / 8; }
  .ax-feature { grid-template-columns: 1fr; }
  .ax-feature .ax-visual { min-height: 0; aspect-ratio: 16 / 8; }
  .ax-cards3--all .ax-proj--wide { grid-column: span 2; grid-row: auto; }
  .ax-cards3--all .ax-proj--wide .ax-visual { aspect-ratio: 16 / 8; min-height: 0; }
  .ax-cta__row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 680px) {
  :root { --ax-gut: 16px; }
  body { font-size: 16px; }
  .ax-top__row { height: 64px; }
  .ax-nav { inset: 64px 0 0 0; }
  .ax-logo__word { font-size: 21px; }
  .ax-logo__word small { font-size: 9px; letter-spacing: .26em; }
  .ax-mark { width: 30px; height: 30px; }
  .ax-hero { min-height: 0; padding-top: 120px; }
  .ax-hero__art svg { height: 100%; }
  .ax-hero__shade { background: linear-gradient(0deg, var(--ax-bg) 8%, rgba(7,11,18,.7) 55%, rgba(7,11,18,.35) 100%); }
  .ax-hero__title { font-size: clamp(46px, 13.5vw, 68px); }
  .ax-hero__lead { font-size: 17px; }
  .ax-hero__cta .ax-btn { width: 100%; }
  .ax-btn { white-space: normal; text-align: center; }
  .ax-stat { padding: 20px 14px 22px 0; margin-right: 14px; }
  .ax-stat__v { font-size: 32px; }
  .ax-stat dd { font-size: 13px; }
  .ax-sec { padding: 72px 0; }
  .ax-sec--tight { padding: 48px 0; }
  .ax-sechead { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .ax-lead { font-size: 17px; }
  .ax-pillars { grid-template-columns: 1fr; margin-top: 48px; }
  .ax-pillars li, .ax-pillars li + li { padding: 24px 0 0; border-left: 0; margin-top: 0; }
  .ax-pillars li + li { border-top: 1px solid var(--ax-line); margin-top: 24px; }
  .ax-sports { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; }
  .ax-sport--lead { grid-column: span 2; grid-row: span 1; }
  .ax-sport--lead h3 { font-size: 36px; }
  .ax-sport h3 { font-size: 22px; }
  .ax-sport__txt { padding: 16px; }
  .ax-sport:not(.ax-sport--lead) .ax-sport__f { display: none; }
  .ax-families, .ax-cards3, .ax-pgrid { grid-template-columns: 1fr; }
  .ax-cards3--all .ax-proj--wide { grid-column: auto; }
  .ax-steps { grid-template-columns: 1fr; }
  .ax-rows a { grid-template-columns: 1fr 24px; gap: 8px 16px; padding: 20px 0; }
  .ax-rows time { grid-column: 1 / -1; }
  .ax-rows__t { font-size: 21px; }
  .ax-cta { padding: 64px 0; }
  .ax-cta .ax-btn { width: 100%; }
  .ax-foot__grid { grid-template-columns: 1fr; gap: 32px; }
  .ax-ph { padding: 120px 0 52px; }
  .ax-ph__title { font-size: clamp(40px, 12vw, 60px); }
  .ax-ph__title--md { font-size: clamp(34px, 9.5vw, 48px); }
  .ax-ph__lead { font-size: 17px; }
  .ax-prod { padding: 104px 0 64px; }
  .ax-prod__fig { padding: 28px 16px; }
  .ax-prod__title { font-size: clamp(38px, 11vw, 56px); }
  .ax-prod__cta .ax-btn { width: 100%; }
  .ax-spec th { width: 42%; }
  .ax-solrow__txt { padding: 28px 20px; }
  .ax-feature__txt { padding: 28px 20px; }
  .ax-form { padding: 22px 18px; }
  .ax-form__grid { grid-template-columns: 1fr; }
  .ax-form__foot .ax-btn { width: 100%; }
  .ax-factbar div { padding: 16px 20px 16px 0; margin-right: 20px; }
  .ax-factbar dd { font-size: 19px; }
  .ax-pjhead { min-height: 520px; padding: 120px 0 44px; }
  .ax-techgrid__fig { grid-template-columns: 1fr; }
  .ax-pager { flex-direction: column; }
  .ax-pager a { max-width: none; }
  .ax-standards li { font-size: 18px; }
  .ax-visual--banner { aspect-ratio: 16 / 9; }
  .ax-prose h2 { font-size: 28px; }
}

/* grid children must be allowed to shrink (wide tables scroll inside .ax-tablewrap) */
.ax-prodspec > *, .ax-split > *, .ax-article > *, .ax-contact > *, .ax-techgrid > *, .ax-prod__grid > * { min-width: 0; }