/* ============================================================
   APLS.ai — Base layer: tokens, reset, type, nav, preloader, footer
   ============================================================ */

:root {
  /* ---- Palette (6 named tokens) — apls.ai cool slate + emerald ---- */
  --ink:        #15171C; /* cool slate base — dark chapters */
  --ink-raise:  #1C1F26; /* raised panels on dark */
  --ink-line:   #2C3039; /* hairline borders on dark */
  --paper:      #F2F3F5; /* cool off-white — light chapters */
  --paper-raise:#E6E8EC; /* raised panels on light */
  --amber:      #16C794; /* apls emerald — the one accent */

  /* ---- Derived text neutrals ---- */
  --mist:       #939AA4; /* muted text on dark */
  --mist-dim:   #646B74; /* dimmer text on dark */
  --graphite:   #3B404A; /* muted text on light */
  --amber-deep: #0E9E76; /* emerald deep — for light backgrounds */

  /* ---- Type ---- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Spacing scale (8px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 192px;

  /* ---- Layout ---- */
  --maxw: 1360px;
  --gutter: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* long expo */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--amber); color: var(--ink); }

/* ---- Display type ---- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ---- Mono utility layer (indices, eyebrows, metrics) ---- */
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

.chapter { position: relative; padding-block: clamp(80px, 12vh, 160px); }
.chapter--dark  { background: var(--ink);   color: var(--paper); }
.chapter--light { background: var(--paper); color: var(--ink); }

/* Chapter header block */
.ch-head { display: grid; grid-template-columns: 1fr; gap: var(--s5); margin-bottom: clamp(40px, 6vw, 88px); }
.ch-meta { display: flex; align-items: baseline; gap: var(--s5); flex-wrap: wrap; }
.ch-index {
  font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  letter-spacing: 0.1em; color: var(--amber);
}
.ch-rule { height: 1px; flex: 1 1 60px; min-width: 40px; background: currentColor; opacity: 0.18; align-self: center; }
.ch-eyebrow { color: var(--mist); }
.chapter--light .ch-eyebrow { color: var(--graphite); }
.ch-title {
  font-family: var(--font-display); font-weight: 800; font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase; line-height: 0.94; letter-spacing: -0.02em;
  font-size: clamp(36px, 6vw, 92px); max-width: 16ch;
}

/* ============================================================
   PRELOADER  (hidden by default; JS adds .is-loading to <body>)
   ============================================================ */
#preloader { display: none; }
body.is-loading { overflow: hidden; }
body.is-loading #preloader {
  display: flex; position: fixed; inset: 0; z-index: 1000;
  background: var(--ink); color: var(--paper);
  flex-direction: column; justify-content: flex-end;
  padding: var(--gutter);
  transition: transform 0.9s var(--ease), opacity 0.6s ease;
}
#preloader.is-done { transform: translateY(-101%); }
.pl-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); }
.pl-count {
  font-family: var(--font-display); font-weight: 800; font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-size: clamp(80px, 22vw, 300px); line-height: 0.8; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pl-count sup { font-size: 0.28em; vertical-align: super; color: var(--amber); font-family: var(--font-mono); }
.pl-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--mist); text-transform: uppercase; padding-bottom: 0.8em; text-align: right; }
.pl-bar { height: 2px; width: 100%; background: var(--ink-line); margin-top: var(--s5); position: relative; overflow: hidden; }
.pl-bar i { position: absolute; inset: 0 100% 0 0; background: var(--amber); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
  mix-blend-mode: normal;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--ink-line);
  padding-block: 12px;
}
.nav.on-light { color: var(--ink); }
.nav.on-light.is-stuck { background: color-mix(in srgb, var(--paper) 82%, transparent); border-bottom-color: rgba(21,23,28,0.12); }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo { height: 30px; width: auto; display: block; flex-shrink: 0; max-width: none; }
.brand-logo--dark { display: none; }
.nav.on-light .brand-logo--light { display: none; }
.nav.on-light .brand-logo--dark { display: block; }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.nav-link {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em;
  position: relative; padding-block: 6px; text-transform: uppercase; color: inherit; opacity: 0.82;
  transition: opacity 0.3s var(--ease);
}
.nav-link:hover { opacity: 1; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease);
}
.nav-link:hover::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }

.nav-cta {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--amber); color: var(--ink); padding: 11px 18px; border-radius: 2px; font-weight: 600;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
  white-space: nowrap;
}
.nav-cta:hover { transform: translateY(-2px); background: #23DDA8; }

.nav-burger { display: none; }

/* ---- Mega menu ---- */
.has-mega { position: relative; }
.mega {
  position: fixed; left: 0; right: 0; top: 0;
  background: var(--ink-raise); color: var(--paper);
  border-bottom: 1px solid var(--ink-line);
  padding: clamp(76px, 9vh, 96px) var(--gutter) clamp(28px, 4vh, 48px);
  display: grid; grid-template-columns: 0.6fr 2fr; gap: clamp(28px, 4vw, var(--s8));
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform 0.6s var(--ease), opacity 0.4s ease;
  z-index: 150;
  max-height: 100dvh; overflow-y: auto; align-content: start;
}
.mega.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mega-aside { border-right: 1px solid var(--ink-line); padding-right: var(--s7); }
.mega-aside h4 { font-family: var(--font-display); font-stretch:125%; font-variation-settings:"wdth" 125; text-transform: uppercase; font-size: 28px; line-height: 0.96; margin-bottom: var(--s4); }
.mega-aside p { color: var(--mist); font-size: 15px; max-width: 26ch; }
.mega-all { display: inline-block; margin-top: var(--s5); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.mega-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.mega-strip { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: var(--s5); align-items: center; border-top: 1px solid var(--ink-line); margin-top: var(--s4); padding-top: var(--s5); }
.mega-strip .ms-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist-dim); padding-right: var(--s5); }
.mega-strip a { display: block; padding: 10px 12px; margin: -10px 0; border-radius: 2px; transition: background 0.3s var(--ease); }
.mega-strip a:hover { background: rgba(255,255,255,0.04); }
.mega-strip .ms-name { font-family: var(--font-display); font-stretch: 115%; font-variation-settings: "wdth" 115; font-weight: 700; text-transform: uppercase; font-size: 16px; }
.mega-strip .ms-name .arr { color: var(--amber); }
.mega-strip .ms-desc { color: var(--mist); font-size: 13px; margin-top: 3px; }
/* Products / Solutions split footer in mega-menu */
.mega-foot { grid-column: 1 / -1; display: flex; gap: clamp(32px,5vw,80px); border-top: 1px solid var(--ink-line); margin-top: var(--s4); padding-top: var(--s5); flex-wrap: wrap; }
.mega-group { flex: 1; min-width: 220px; }
.mega-group.is-solutions { flex: 2.1; }
.mg-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist-dim); display: block; margin-bottom: var(--s4); }
.mg-items { display: grid; gap: 4px; }
.mega-group.is-solutions .mg-items { grid-template-columns: 1fr 1fr; gap: var(--s5); }
.mg-link { display: block; padding: 9px 0; }
.mg-link .mgl-name { font-family: var(--font-display); font-stretch: 115%; font-variation-settings: "wdth" 115; font-weight: 700; text-transform: uppercase; font-size: 16px; }
.mg-link .mgl-name .arr { color: var(--amber); transition: transform 0.35s var(--ease); display: inline-block; }
.mg-link:hover .mgl-name { color: var(--amber); }
.mg-link:hover .mgl-name .arr { transform: translateX(5px); }
.mg-link .mgl-desc { color: var(--mist); font-size: 13px; margin-top: 4px; max-width: 38ch; }
@media (max-width: 1024px) {
  .mega-foot { gap: var(--s5); }
  .mega-group.is-solutions .mg-items { grid-template-columns: 1fr; gap: var(--s3); }
}
@media (max-width: 1024px) {
  .mega-strip { grid-template-columns: 1fr; gap: var(--s4); }
  .mega-strip .ms-label { padding: 0; }
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--ink-line); border: 1px solid var(--ink-line); }
.mega-item { display: block; background: var(--ink-raise); padding: clamp(16px,2vh,24px) var(--s5) clamp(20px,2.6vh,28px); transition: background 0.3s var(--ease); }
.mega-item:hover { background: #232730; }
.mega-item .mi-idx { font-family: var(--font-mono); font-size: 12px; color: var(--amber); letter-spacing: 0.1em; }
.mega-item .mi-name { font-family: var(--font-display); font-stretch:115%; font-variation-settings:"wdth" 115; text-transform: uppercase; font-weight: 700; font-size: 20px; margin-top: 6px; }
.mega-item .mi-desc { color: var(--mist); font-size: 14px; margin-top: 6px; max-width: 32ch; }
.mega-item .mi-arrow { color: var(--amber); font-family: var(--font-mono); margin-top: 10px; display: inline-block; transform: translateX(0); transition: transform 0.35s var(--ease); }
.mega-item:hover .mi-arrow { transform: translateX(6px); }
.mega-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 140; }
.mega-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
  padding: 16px 24px; border-radius: 2px;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn .arr { transition: transform 0.4s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }
.btn--primary { background: var(--amber); color: var(--ink); }
.btn--primary:hover { transform: translateY(-2px); background: #23DDA8; }
.btn--ghost { border: 1px solid currentColor; color: inherit; }
.btn--ghost:hover { background: currentColor; }
.chapter--dark .btn--ghost:hover { color: var(--ink); }
.chapter--light .btn--ghost:hover { color: var(--paper); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #101216; color: var(--paper); padding-block: var(--s9) var(--s6); border-top: 1px solid var(--ink-line); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s7); padding-bottom: var(--s8); border-bottom: 1px solid var(--ink-line); }
.footer-brand .brand { font-size: 30px; margin-bottom: var(--s4); }
.footer-logo img { height: 40px; width: auto; display: block; margin-bottom: var(--s5); }
.footer-brand p { color: var(--mist); max-width: 34ch; font-size: 15px; }
.footer-social { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin-top: var(--s5); }
.footer-social a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); transition: color 0.3s; }
.footer-social a:hover { color: var(--amber); }
.footer-col h5 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist-dim); margin-bottom: var(--s4); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 15px; color: var(--paper); opacity: 0.82; transition: color 0.3s, opacity 0.3s; }
.footer-col a:hover { color: var(--amber); opacity: 1; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding-top: var(--s6); flex-wrap: wrap; }
.footer-bottom p { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--mist-dim); }

/* ============================================================
   Reduced motion — the brand owner has opted into full motion for all
   visitors, so we no longer suppress transitions/animations here. The
   preloader/overflow safeguards are retained.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.is-loading #preloader { display: none !important; }
  body.is-loading { overflow: auto !important; }
}