/* ==========================================================================
   MaxTAF — precision-engineering design system
   Charcoal ink on engineering paper, amber accent, mono annotations.
   No build step: this file + semantic HTML is the whole system.
   ========================================================================== */

:root {
  /* MaxTAF Brand Guidelines v1.2 — assets/css/tokens.css is the authoritative source
     (loaded first; defines the self-hosted Montserrat @font-face + --mt-* tokens).
     These legacy names are remapped onto the v1.2 palette so the whole sheet re-skins
     in one place. Burnt Orange is the MaxTAF signal; the AI Tester pages lean into it,
     and the Interpretos page overrides --amber to Sea Breeze Blue (sub-brand discipline). */
  --ink: #212121;              /* charcoal — headings / strong text */
  --ink-soft: #3a3a3a;         /* body text (mt-ink) */
  --ink-faint: #616161;        /* muted / captions (mt-graphite) */
  --paper: #fafafa;
  --paper-raised: #ffffff;
  --amber: #e25025;            /* Burnt Orange — the signal colour (mt-accent) */
  --amber-deep: #722a14;       /* Burnt Orange deep */
  --pass: #3e625f;             /* Teal deep */
  --rule: rgba(33, 33, 33, 0.14);
  --rule-strong: rgba(33, 33, 33, 0.32);
  --dark: #212121;             /* charcoal — the brand's dense surface */
  --dark-raised: #2a2a2a;
  --dark-rule: rgba(245, 245, 245, 0.14);
  --dark-text: #f5f5f5;
  --dark-text-soft: #bdbdbd;
  --sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Montserrat", ui-sans-serif, system-ui, sans-serif;     /* v1.2 has no mono; labels = Montserrat caps */
  --code: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; /* code / terminal only */
  --sea-blue: #299ed9;         /* Interpretos lead */
  --sea-blue-deep: #16506d;
  --teal: #7ac1bb;
  --plum: #662b7f;
  --container: 1200px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* faint grid-paper texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.12;
}

main { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--amber); color: var(--ink); }

/* ---------- type scale ---------- */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;            /* v1.2: Bold for display/H1/H2 */
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.25; font-weight: 300; letter-spacing: 0; } /* v1.2: H3 Light */

p.lede {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 38em;
}

.muted { color: var(--ink-faint); }

/* technical mono label, like a drawing annotation */
.spec {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.spec::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--amber);
  flex: none;
}
.spec .idx { color: var(--amber-deep); }
.dark .spec .idx, .ip-hero .spec .idx { color: var(--amber); } /* -deep is ~1.4:1 on charcoal (design-QC v2) */

/* ---------- layout primitives ---------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

section { padding: clamp(3rem, 6.5vw, 5.5rem) 0; }
section.tight { padding: clamp(2rem, 4vw, 3.25rem) 0; }

.section-head { max-width: 44em; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { margin: 1rem 0 1rem; }

.ruled-top { border-top: 1px solid var(--rule); }

/* ---------- header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 72px;
}

.brand img { height: 26px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

.nav-links > li { position: relative; }

.nav-links a {
  display: block;
  padding: 0.55rem 0.85rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-soft);
  border-radius: 2px;
}
.nav-links a:hover { color: var(--ink); background: rgba(29,29,27,0.05); }

.nav-links .has-menu > a::after { content: " ▾"; font-size: 0.7em; color: var(--ink-faint); }

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  box-shadow: 4px 4px 0 rgba(29,29,27,0.12);
  list-style: none;
  padding: 0.4rem;
  display: none;
}
.has-menu:hover .submenu, .has-menu:focus-within .submenu { display: block; }
.submenu a { white-space: nowrap; }
.submenu .submenu-sep { border-top: 1px solid var(--rule); margin: 0.4rem 0.85rem; }

.nav-cta {
  font-family: var(--mono);
  font-size: 0.82rem;
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  background: var(--ink);
  color: var(--paper) !important;
  border-radius: 2px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.nav-cta:hover { background: var(--amber-deep); color: var(--ink) !important; }

.nav-toggle { display: none; }
.nav-toggle-label { display: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border-radius: 2px;
  border: 1px solid var(--ink);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--amber); border-color: var(--amber); color: var(--ink); box-shadow: 4px 4px 0 rgba(29,29,27,0.25); transform: translate(-1px,-1px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.dark .btn-solid { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.dark .btn-solid:hover { background: var(--paper); border-color: var(--paper); box-shadow: 4px 4px 0 rgba(226,80,37,0.35); }
.dark .btn-ghost { color: var(--dark-text); border-color: var(--dark-text-soft); }
.dark .btn-ghost:hover { background: var(--dark-text); color: var(--dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- dark band ---------- */

.dark {
  background: var(--dark);
  color: var(--dark-text);
}
.dark .spec { color: var(--dark-text-soft); }
.dark p.lede, .dark .muted { color: var(--dark-text-soft); }
.dark::selection { background: var(--amber); }

/* ---------- hero ---------- */

.hero {
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(4.5rem, 9vw, 7rem);
  position: relative;
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.hero h1 .accent { color: var(--amber); }

/* C-TIGHT hero: light setup line stepped down, bold two-line payoff (chosen 2026-06-18) */
.hero h1 { margin-top: 0.4rem; line-height: 1.04; }
.hero .h-setup {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
  color: var(--dark-text-soft);
}
.hero .h-payoff { display: block; font-weight: 700; line-height: 1.04; text-wrap: balance; }
.hero .terminal { margin-top: 0.35rem; }
.hero p.lede { margin: 1.6rem 0 2.4rem; }

/* dimension-line decoration under hero heading */
.dim-line {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--dark-text-soft);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.6rem;
}
.dim-line::before, .dim-line::after {
  content: "";
  height: 1px;
  background: var(--dark-rule);
  flex: 1;
}

/* ---------- terminal window ---------- */

.terminal {
  background: #0d0d0c;
  border: 1px solid var(--dark-rule);
  border-radius: 6px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.35); /* neutral depth — tokens.css forbids colored glow */
  font-family: var(--code);
  font-size: 0.82rem;
  line-height: 1.75;
  overflow: hidden;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--dark-rule);
  color: var(--dark-text-soft);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.terminal-bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dark-rule);
  display: inline-block;
}
.terminal-bar i:first-child { background: var(--amber); }
.terminal-body { padding: 1.1rem 1.2rem 1.3rem; color: var(--dark-text); }
.terminal-body .ln { display: block; opacity: 0; animation: lnin 0.01s forwards; white-space: nowrap; overflow: hidden; }
.terminal-body .cmt { color: var(--dark-text-soft); }
.terminal-body .amber { color: var(--amber); }
.terminal-body .pass { color: #57d384; }
.terminal-body .cursor::after {
  content: "▋";
  color: var(--amber);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes lnin { to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
/* staggered "live run" timing — quick fill so the hero never looks empty */
.terminal-body .ln:nth-child(1)  { animation-delay: 0.15s; }
.terminal-body .ln:nth-child(2)  { animation-delay: 0.35s; }
.terminal-body .ln:nth-child(3)  { animation-delay: 0.52s; }
.terminal-body .ln:nth-child(4)  { animation-delay: 0.69s; }
.terminal-body .ln:nth-child(5)  { animation-delay: 0.86s; }
.terminal-body .ln:nth-child(6)  { animation-delay: 1.03s; }
.terminal-body .ln:nth-child(7)  { animation-delay: 1.20s; }
.terminal-body .ln:nth-child(8)  { animation-delay: 1.40s; }
.terminal-body .ln:nth-child(9)  { animation-delay: 1.60s; }
.terminal-body .ln:nth-child(10) { animation-delay: 1.78s; }

/* ---------- cards ---------- */

.grid { display: grid; gap: 1.25rem; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: 1.8rem 1.6rem 1.7rem;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease, background 0.25s ease;
}
.card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(29,29,27,0.14); }
.card:hover::before { transform: scaleX(1); background: var(--amber); }
.card .num {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--amber-deep);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 1rem;
}
.card h3 { margin-bottom: 0.7rem; }
.card p { font-size: 0.97rem; color: var(--ink-soft); }
.card .card-link {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--amber);
  padding-bottom: 1px;
}
.card .card-link:hover { color: var(--amber-deep); }

a.card { display: block; text-decoration: none; }

.dark .card { background: var(--dark-raised); border-color: var(--dark-rule); }
.dark .card p { color: var(--dark-text-soft); }
.dark .card h3 { color: var(--dark-text); }
.dark .card:hover { box-shadow: 6px 6px 0 rgba(0,0,0,0.5); }
.dark .card .card-link { color: var(--dark-text); }

/* ---------- announcement strip ---------- */

.announce {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.announce .num { margin: 0; white-space: nowrap; }
.announce .card-link { margin: 0; white-space: nowrap; }
@media (max-width: 700px) {
  .announce { grid-template-columns: 1fr; gap: 0.8rem; }
}

/* ---------- stats band ---------- */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--dark-rule); border: 1px solid var(--dark-rule); }
.stat { background: var(--dark); padding: 2.2rem 1.8rem; }
.stat b {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--amber);
  display: block;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat span { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-text-soft); display: block; margin-top: 0.8rem; }

/* ---------- big list (capability index) ---------- */

.index-list { list-style: none; border-top: 1px solid var(--rule-strong); }
.index-list li { border-bottom: 1px solid var(--rule-strong); }
.index-list a, .index-list .row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.6rem 0.4rem;
  text-decoration: none;
  transition: background 0.15s ease, padding-left 0.2s ease;
}
.index-list a:hover { background: rgba(226,80,37,0.10); padding-left: 1rem; }
.index-list .num { font-family: var(--mono); font-size: 0.8rem; color: var(--amber-deep); }
.index-list .name { font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 2.6vw, 1.9rem); letter-spacing: -0.01em; }
.index-list .hint { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); text-align: right; }

/* ---------- testimonial marquee ---------- */

.marquee { overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1.4rem 0; }
.marquee-track { display: flex; gap: 4rem; width: max-content; animation: marquee 56s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee q { font-family: var(--display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; quotes: "“" "”"; }
.marquee q cite { font-family: var(--mono); font-style: normal; font-weight: 400; font-size: 0.75rem; color: var(--ink-faint); margin-left: 0.9rem; }
.marquee q::after { content: "·"; color: var(--amber); margin-left: 4rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- timeline (about) ---------- */

.timeline { list-style: none; border-left: 2px solid var(--rule-strong); margin-left: 0.4rem; }
.timeline li { position: relative; padding: 0 0 2.4rem 2.2rem; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -7px; top: 0.45em;
  width: 12px; height: 12px;
  background: var(--paper);
  border: 2px solid var(--amber-deep);
  border-radius: 50%;
}
.timeline .year { font-family: var(--mono); font-size: 0.85rem; color: var(--amber); letter-spacing: 0.1em; display: block; margin-bottom: 0.3rem; }
.timeline h3 { margin-bottom: 0.4rem; }
.timeline p { color: var(--ink-soft); font-size: 0.98rem; max-width: 46em; }

/* ---------- team ---------- */

.person { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.person .role { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-deep); display: block; margin: 0.2rem 0 0.8rem; }
.person p { font-size: 0.93rem; color: var(--ink-soft); }

/* ---------- comparison table (AI tester) ---------- */

.compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.compare th, .compare td { border: 1px solid var(--rule-strong); padding: 0.85rem 1rem; text-align: left; vertical-align: top; }
.compare thead th { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--ink); color: var(--paper); }
.compare thead th.win { background: var(--amber); color: var(--ink); }
.compare tbody th { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; background: var(--paper-raised); }
.compare td.win { background: rgba(226,80,37,0.12); font-weight: 600; }

/* ---------- logo strip ---------- */

.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; opacity: 0.75; }
@media (max-width: 640px) { .logo-strip { gap: 1rem 1.8rem; } }
@media (max-width: 640px) { .terminal { font-size: 0.68rem; } }
.logo-strip img { height: 44px; width: auto; filter: grayscale(1) contrast(0.9); }
.logo-strip .word { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.02em; color: var(--ink-faint); }

/* ---------- forms ---------- */

.form { display: grid; gap: 1.1rem; max-width: 560px; }
.form label { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 0.4rem; }
.form input, .form textarea, .form select {
  width: 100%;
  font: inherit;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  border-radius: 2px;
  color: var(--ink);
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--amber); outline-offset: -1px; }

/* ---------- prose (blog posts, simple pages) ---------- */

.prose { max-width: 46em; }
.prose h2 { margin: 2.6rem 0 1rem; font-size: 1.7rem; }
.prose h3 { margin: 2rem 0 0.8rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.15rem; color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose strong { color: var(--ink); }
.prose blockquote { border-left: 3px solid var(--amber); padding: 0.3rem 0 0.3rem 1.3rem; font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--ink); margin: 1.8rem 0; }

.post-meta { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-faint); text-transform: uppercase; }

/* ---------- page hero (interior pages) ---------- */

.page-hero { padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--rule); }
.page-hero h1 { margin: 1rem 0 1.2rem; max-width: 16em; }
.page-hero p.lede { max-width: 36em; }

/* ---------- footer ---------- */

.site-footer { background: var(--dark); color: var(--dark-text-soft); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.site-footer img { height: 22px; width: auto; margin-bottom: 1.2rem; }
.site-footer h4 { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-text); margin-bottom: 1rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a { color: var(--dark-text-soft); text-decoration: none; font-size: 0.92rem; }
.site-footer a:hover { color: var(--amber); }
.footer-legal { border-top: 1px solid var(--dark-rule); padding-top: 1.5rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; }
.footer-badges { display: flex; gap: 1.2rem; align-items: center; margin-top: 1.5rem; }
.footer-badges img { height: 42px; margin: 0; opacity: 0.85; background: #fff; padding: 4px 6px; border-radius: 3px; }

/* ---------- icons + brand-accent system ---------- */

.ico {
  width: 30px; height: 30px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  display: block; flex: none;
}
.ico-sm { width: 20px; height: 20px; stroke-width: 1.7; }

/* Card icon takes the card's accent colour (falls back to the signal). */
.card .ico { margin-bottom: 1.1rem; color: var(--acc, var(--amber-deep)); }

/* in-card bullet list (feature benefits) */
.card-points { list-style: none; margin-top: 1rem; display: grid; gap: 0.6rem; }
.card-points li { position: relative; padding-left: 1.3rem; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; }
.card-points li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--acc-bright, var(--amber)); }
.dark .card-points li { color: var(--dark-text-soft); }

/* Per-item brand accent. Sub-brand discipline (C-020): Burnt Orange is the
   signal (AI Tester + CTAs); Sea Blue leads Interpretos/AI; Teal + Plum are the
   supporting hues. --acc = on-light (deep) value, --acc-bright = vivid value. */
.acc-teal   { --acc: #3E625F; --acc-bright: #7AC1BB; }
.acc-blue   { --acc: #16506D; --acc-bright: #299ED9; }
.acc-plum   { --acc: #662B7F; --acc-bright: #8E5BA6; }
.acc-orange { --acc: var(--amber-deep); --acc-bright: var(--amber); }
.acc-ink    { --acc: var(--ink); --acc-bright: #bdbdbd; }

.card[class*="acc-"] .num { color: var(--acc); }
.card[class*="acc-"]:hover::before { background: var(--acc-bright); }
/* on dark surfaces, icons use the vivid value for contrast */
.dark .card .ico, .dark .ico { color: var(--acc-bright, var(--dark-text-soft)); } /* plain dark cards: neutral; accent cards keep their bright hue (Opus design pass) */
.dark .card .num { color: var(--amber); } /* -deep is 1.41:1 on #2a2a2a */
.dark .card[class*="acc-"] .num { color: var(--acc-bright); } /* teal/blue/plum kickers legible on dark */

/* icon + label rows (e.g. a list with a leading glyph) */
.index-list .name { display: inline-flex; align-items: center; gap: 0.7rem; }
.index-list .name .ico { color: var(--acc, var(--amber-deep)); }

/* ---------- hero product quicklinks ---------- */
.hero-quicklinks {
  grid-column: 1 / -1;            /* full width under the hero's two columns */
  border-top: 1px solid var(--dark-rule);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2.2rem;
}
.qlink {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem; row-gap: 0.25rem;
  align-items: start;
  text-decoration: none;
  color: var(--dark-text);
}
.qlink .ico { grid-row: span 2; width: 24px; height: 24px; margin-top: 3px; color: var(--acc-bright, var(--amber)); }
.qlink .ql-name { font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.15; }
.qlink .ql-name::after { content: " →"; color: var(--acc-bright, var(--amber)); opacity: 0; transition: opacity 0.18s ease; }
.qlink .ql-strap { font-size: 0.84rem; line-height: 1.4; color: var(--dark-text-soft); }
.qlink:hover .ql-name { color: var(--acc-bright); }
.qlink:hover .ql-name::after { opacity: 1; }
.qlink:hover .ql-strap { color: var(--dark-text); }
@media (max-width: 860px) { .hero-quicklinks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hero-quicklinks { grid-template-columns: 1fr; } }

/* ---------- scroll reveal ---------- */

/* hidden state only applies once JS has tagged <html class="js"> — no-JS users see everything.
   NOTE: the .in rule must carry the same html.js prefix or it loses the specificity contest. */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease, transform 0.4s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .terminal-body .ln { animation-delay: 0s !important; }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; }
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr; }

  /* mobile nav */
  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0.6rem;
  }
  .nav-toggle-label i { width: 24px; height: 2px; background: var(--ink); display: block; transition: transform 0.2s ease, opacity 0.2s ease; }
  .nav-links {
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper-raised);
    border-bottom: 1px solid var(--rule-strong);
    padding: 0.8rem var(--pad) 1.4rem;
    display: none;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-toggle:checked ~ .nav-toggle-label i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label i:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-toggle-label i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .submenu { position: static; display: block; border: none; box-shadow: none; background: transparent; padding-left: 1rem; }
  .has-menu > a::after { content: ""; }
  .nav-links a { font-size: 0.95rem; padding: 0.7rem 0.85rem; }
  .nav-cta { margin: 0.8rem 0.85rem 0; text-align: center; }
}

@media (max-width: 600px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .index-list a, .index-list .row { grid-template-columns: 3rem 1fr; }
  .index-list .hint { display: none; }
  .compare { font-size: 0.85rem; }
  .compare th, .compare td { padding: 0.6rem 0.6rem; }
}