/* Cube41ERP marketing homepage — structural port of the Axiom Research
   reference site (axiom.peppermint.id): same section shapes, spacing,
   typography and imagery, with Cube41ERP's own copy. Ported by hand from
   the site's compiled CSS/JS (tokens/*.css, components/**, ui_kits/website/**)
   since there is no React/Tailwind build here — every var below is copied
   from tokens/typography.css, tokens/spacing.css, tokens/layout.css verbatim.
   No custom webfont binaries are shipped; --font-display/--font-mono fall
   back to system faces at the exact same sizes/tracking/weights. */

:root {
  --ax-black: #0c0c0d;
  --ax-paper: #f2f2f2;
  --ax-white: #ffffff;
  --ax-signal: #da840a;
  --ax-yellow: #f5e100;
  --ax-alert: #ff3c2b;
  --ax-confirm: #2bff9c;
  --ax-white-a10: rgba(255,255,255,0.1);
  --ax-white-a16: rgba(255,255,255,0.16);
  --ax-white-a20: rgba(255,255,255,0.2);
  --ax-black-a23: rgba(12,12,13,0.23);
  --ax-op-quiet: 0.4;
  --ax-op-label: 0.6;
  --ax-op-body: 0.8;

  --font-display: "Funnel Display", Arial, Helvetica, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fw-bold: 700;

  --type-hero-size: 164px;      --type-hero-track: -6.56px;
  --type-hero-size-lg: 120px;   --type-hero-track-lg: -4.8px;
  --type-hero-size-sm: 80px;    --type-hero-track-sm: -3.2px;
  --type-wordmark-size: 120px;  --type-wordmark-track: -4.8px;
  --type-wordmark-size-sm: 56px;--type-wordmark-track-sm: -2.24px;
  --type-statement-size: 48px;  --type-statement-track: -1.44px;
  --type-statement-size-sm: 32px; --type-statement-track-sm: -0.96px;
  --type-heading-size: 40px;    --type-heading-track: -1.2px;
  --type-heading-size-sm: 28px; --type-heading-track-sm: -0.84px;
  --type-lead-size: 16px;
  --type-meta-size: 12px;
  --type-meta-track: -0.36px;
  --lh-display: 0.79;
  --lh-tight: 1;
  --lh-meta: 1.2;

  --hairline: 1px;
  --control-h: 30px;
  --card-w: 650px;
  --card-h: 534px;
  --footer-h: 660px;
  --gutter-page: 40px;
  --gutter-page-sm: 20px;
  --dur-fast: 150ms;
  --dur-slide: 300ms;
  --ease-standard: cubic-bezier(0.4,0,0.2,1);
}

html { scroll-behavior: smooth; }
.ax-home, .ax-home * { box-sizing: border-box; }
.ax-home #modules, .ax-home #conditions, .ax-home #contact { scroll-margin-top: 110px; }
.ax-home {
  margin: 0;
  background: var(--ax-black);
  color: var(--ax-white);
  font-family: var(--font-mono);
  overflow-x: hidden;
}
.ax-home a { color: inherit; text-decoration: none; }
.ax-home ::selection { background: var(--ax-yellow); color: var(--ax-black); }

/* ---------- fixed attractor field ---------- */
#ax-field { position: fixed; inset: 0; z-index: 0; }
#ax-attractor { display: block; width: 100%; height: 100%; }
main { position: relative; z-index: 1; }

/* ---------- fixed chrome header ---------- */
.ax-chrome {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 9000;
  padding: 30px var(--gutter-page) 0; pointer-events: none;
  color: var(--ax-white); transition: color 250ms ease;
}
.ax-chrome.ax-tone-light { color: var(--ax-black); }
.ax-chrome-row { display: flex; align-items: center; justify-content: space-between; width: 100%; pointer-events: auto; }
.ax-wordmark { display: flex; align-items: center; gap: 10px; flex-shrink: 0; width: 455px; }
.ax-wordmark img { width: 28px; height: 28px; display: block; }
.ax-wordmark span { font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.3px; }
.ax-clock { font-family: var(--font-mono); font-size: var(--type-meta-size); letter-spacing: var(--type-meta-track); line-height: var(--lh-meta); text-transform: uppercase; flex-shrink: 0; }
.ax-chrome-right { display: flex; gap: 80px; align-items: center; flex-shrink: 0; }
.ax-telemetry { font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--lh-meta); text-transform: uppercase; }
.ax-telemetry p { margin: 0; }
.ax-telemetry .op-label { opacity: var(--ax-op-label); }
.ax-navstack { display: flex; flex-direction: column; gap: 0; font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--lh-meta); text-transform: uppercase; }
.ax-navstack a { transition: opacity var(--dur-fast) var(--ease-standard); }
.ax-navstack a:hover { opacity: 0.6; }

@media (max-width: 850px) {
  .ax-telemetry { display: none; }
  .ax-wordmark { width: auto; }
  .ax-chrome-right { gap: 24px; }
}
@media (max-width: 450px) {
  .ax-chrome { padding: 20px var(--gutter-page-sm) 0; }
  .ax-clock { display: none; }
  .ax-wordmark span { display: none; }
}

/* ---------- shared section label / display statement ---------- */
.ax-section-label { font-family: var(--font-mono); font-size: var(--type-lead-size); line-height: var(--lh-meta); text-transform: uppercase; margin: 0; white-space: nowrap; }
.ax-display { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); text-wrap: pretty; margin: 0; }
.ax-display p { font: inherit; letter-spacing: inherit; margin: 0; }

/* ---------- hero ---------- */
.ax-hero { position: relative; height: 900px; width: 100%; overflow: hidden; padding: 30px var(--gutter-page) 0; display: flex; flex-direction: column; }
.ax-hero-spacer { height: 40px; flex-shrink: 0; }
.ax-hero-row { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 60px; }
.ax-scrollhint { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.ax-scrollhint img { flex-shrink: 0; }
.ax-scrollhint p { margin: 0; font-family: var(--font-mono); font-size: var(--type-meta-size); letter-spacing: var(--type-meta-track); line-height: var(--lh-meta); text-transform: uppercase; opacity: var(--ax-op-label); white-space: pre; width: 129px; }
.ax-hero-title-wrap { display: flex; flex-direction: column; gap: 48px; align-items: flex-end; width: 725px; max-width: 100%; flex-shrink: 0; }
.ax-hero-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 13vw, var(--type-hero-size)); line-height: var(--lh-display); letter-spacing: -0.04em; color: var(--ax-white); text-align: right; margin: 0; overflow-wrap: break-word; }
.ax-hero-tag { margin: 0; font-family: var(--font-mono); font-size: var(--type-lead-size); line-height: var(--lh-meta); text-transform: uppercase; color: var(--ax-white); width: 391px; max-width: 100%; text-align: right; }
@media (max-width: 450px) {
  .ax-hero { padding: 20px var(--gutter-page-sm) 0; }
  .ax-hero-row { flex-direction: column; align-items: flex-start; gap: 60px; }
  .ax-hero-title-wrap { align-items: flex-start; width: 100%; }
  .ax-hero-title, .ax-hero-tag { text-align: left; }
}

/* ---------- statement ---------- */
.ax-statement { position: relative; min-height: 500px; width: 100%; display: flex; align-items: center; justify-content: flex-end; padding: 100px var(--gutter-page); }
.ax-statement-inner { display: flex; flex-direction: column; gap: 48px; align-items: flex-start; width: 645px; max-width: 100%; }
.ax-statement .ax-display { font-size: var(--type-statement-size); letter-spacing: var(--type-statement-track); }
.ax-statement .ax-display p:first-child { margin-bottom: 20px; }
@media (max-width: 450px) { .ax-statement .ax-display { font-size: var(--type-statement-size-sm); letter-spacing: var(--type-statement-track-sm); } }

/* ---------- about ---------- */
.ax-about { position: relative; min-height: 640px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 80px var(--gutter-page); }
.ax-about-inner { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; width: 620px; max-width: 100%; }
.ax-about .ax-display { font-size: var(--type-statement-size); letter-spacing: var(--type-statement-track); }
.ax-about-copy { font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--lh-meta); text-transform: uppercase; }
.ax-about-copy p { margin: 0 0 12px; }
.ax-about-copy p:last-child { margin-bottom: 0; }
.ax-observation-list { display: flex; gap: 20px; align-items: center; margin-top: 40px; }
.ax-observation-list img { flex-shrink: 0; }
.ax-observation-list ul { margin: 0; padding-left: 20px; list-style: disc; font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: 1.9; text-transform: uppercase; }
@media (max-width: 450px) { .ax-about .ax-display { font-size: var(--type-statement-size-sm); letter-spacing: var(--type-statement-track-sm); } }

/* ---------- archive / modules ---------- */
.ax-archive { position: relative; padding: 140px 0 80px; }
.ax-archive-label { padding: 0 var(--gutter-page); margin-bottom: 60px; }
.ax-archive-track { display: flex; gap: 60px; overflow-x: auto; padding: 0 var(--gutter-page) 20px; scroll-snap-type: x proximity; }
.ax-archive-card {
  background: var(--ax-paper); color: var(--ax-black);
  display: flex; flex-direction: column; gap: 20px;
  padding: 10px 10px 20px; width: var(--card-w); height: var(--card-h);
  flex-shrink: 0; scroll-snap-align: start;
}
.ax-archive-card-media { flex: 1; min-height: 0; background: var(--ax-white); position: relative; overflow: hidden; }
.ax-archive-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ax-archive-card-id { position: absolute; top: 0; left: 0; background: var(--ax-paper); padding: 10px; font-size: var(--type-lead-size); letter-spacing: var(--type-meta-track); line-height: var(--lh-meta); text-transform: uppercase; }
.ax-archive-card-body { flex-shrink: 0; padding: 0 10px; display: flex; flex-direction: column; gap: 24px; }
.ax-archive-card-body h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--type-heading-size); line-height: var(--lh-tight); letter-spacing: var(--type-heading-track); white-space: pre-line; }
.ax-archive-card-cols { display: flex; gap: 20px; font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--lh-meta); text-transform: uppercase; }
.ax-archive-card-cols p { margin: 0; flex: 1; opacity: var(--ax-op-body); }
@media (max-width: 700px) {
  .ax-archive-card { width: 86vw; height: auto; min-height: 420px; }
  .ax-archive-card-media { aspect-ratio: 4/3; flex: none; }
}

/* ---------- conditions / system conditions (light section) ---------- */
.ax-conditions { background: var(--ax-paper); color: var(--ax-black); position: relative; z-index: 10; padding: 120px var(--gutter-page) 160px; margin-top: 40px; }
.ax-conditions-head { display: flex; gap: 60px; align-items: baseline; flex-wrap: wrap; margin-bottom: 100px; }
.ax-conditions-head .ax-section-label { flex: 1; min-width: 160px; }
.ax-conditions-statement { width: 725px; max-width: 100%; }
.ax-conditions-statement .ax-display { color: var(--ax-black); font-size: var(--type-heading-size); letter-spacing: var(--type-heading-track); }
.ax-conditions-statement .ax-display p:first-child { margin-bottom: 48px; }
.ax-conditions-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.ax-condition-col { flex: 1; min-width: 260px; border-left: var(--hairline) solid var(--ax-black-a23); padding-left: 20px; display: flex; flex-direction: column; gap: 40px; }
.ax-condition-col-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--lh-meta); text-transform: uppercase; }
.ax-condition-col-meta span { opacity: var(--ax-op-body); }
.ax-condition-col h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--type-statement-size); line-height: var(--lh-tight); letter-spacing: var(--type-statement-track); white-space: pre-line; }
.ax-condition-col-media { position: relative; width: 100%; aspect-ratio: 393/237; overflow: hidden; }
.ax-condition-col-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ax-condition-col-text { display: flex; flex-direction: column; gap: 12px; font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--lh-meta); text-transform: uppercase; }
.ax-condition-col-text p { margin: 0; opacity: var(--ax-op-body); }
@media (max-width: 450px) {
  .ax-condition-col h3 { font-size: var(--type-statement-size-sm); letter-spacing: var(--type-statement-track-sm); }
  .ax-conditions-statement .ax-display { font-size: var(--type-heading-size-sm); letter-spacing: var(--type-heading-track-sm); }
}

/* ---------- manifesto (closing statement) ---------- */
.ax-manifesto { border-bottom: var(--hairline) solid var(--ax-white-a16); padding: 100px var(--gutter-page); }
.ax-manifesto .ax-display { font-size: var(--type-heading-size); letter-spacing: var(--type-heading-track); }
.ax-manifesto .ax-display p { margin-bottom: 20px; }
.ax-manifesto .ax-display p:last-child { margin-bottom: 0; }
@media (max-width: 450px) { .ax-manifesto .ax-display { font-size: var(--type-heading-size-sm); letter-spacing: var(--type-heading-track-sm); } }

/* ---------- footer ---------- */
.ax-footer-full { min-height: var(--footer-h); display: flex; flex-direction: column; justify-content: space-between; padding: 80px var(--gutter-page) 30px; gap: 60px; }
.ax-footer-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; gap: 40px; flex-wrap: wrap; }
.ax-footer-icon { width: 64px; height: 64px; flex-shrink: 0; }
.ax-footer-right { display: flex; flex-direction: column; gap: 40px; width: 585px; max-width: 100%; }
.ax-footer-word { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 10vw, var(--type-wordmark-size)); line-height: var(--lh-display); letter-spacing: -0.04em; overflow-wrap: break-word; }
.ax-footer-copy { font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--lh-meta); text-transform: uppercase; }
.ax-footer-copy p { margin: 0 0 12px; }
.ax-footer-copy p:last-child { margin-bottom: 0; }
.ax-footer-form { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.ax-footer-input {
  height: var(--control-h); width: 100%; padding: 0 20px; display: flex; align-items: center;
  background: var(--ax-white-a10); border: 0; color: var(--ax-white);
  font-family: var(--font-mono); font-size: var(--type-meta-size); text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-standard); outline: none;
}
.ax-footer-input:hover, .ax-footer-input:focus { background: var(--ax-white-a20); }
.ax-footer-input.ax-input-error { background: rgba(255,60,43,0.2); }
.ax-status-note { display: flex; align-items: center; gap: 4px; height: var(--control-h); font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--lh-meta); text-transform: uppercase; }
.ax-status-note.ax-status-ok { color: var(--ax-confirm); font-weight: var(--fw-bold); }
.ax-status-note.ax-status-error { color: var(--ax-alert); opacity: var(--ax-op-body); }
.ax-status-note img { width: 20px; height: 20px; flex-shrink: 0; }

.ax-btn2 {
  position: relative; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  height: var(--control-h); background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ax-white); font-family: var(--font-mono); font-weight: var(--fw-bold);
  font-size: var(--type-meta-size); text-transform: uppercase;
}
.ax-btn2 .ax-arrow { width: 20px; height: 20px; display: inline-block; transition: transform var(--dur-slide) var(--ease-standard); }
.ax-btn2:hover .ax-arrow, .ax-btn2:focus-visible .ax-arrow { transform: translateX(6px); }
.ax-btn2:focus-visible { outline: 1px solid var(--ax-yellow); outline-offset: 4px; }

.ax-footer-bottom { font-family: var(--font-mono); font-size: var(--type-meta-size); letter-spacing: var(--type-meta-track); line-height: var(--lh-meta); text-transform: uppercase; opacity: var(--ax-op-quiet); margin: 0; }

@media (max-width: 450px) {
  .ax-footer-full { padding: 60px var(--gutter-page-sm) 20px; }
}