/* ============================================================
   MonkSuite — dark visual system
   Fonts: Hanken Grotesk (body) · Space Mono (mono/labels)
   Product colors: scrape #a088c4 · tidy #728cc9 · match #ff6d89 · price #3dadc7
   ============================================================ */

:root {
  --bg:        #0F1014;
  --panel:     #191B21;
  --panel-2:   #14161B;
  --footer-bg: #16181D;
  --ink:       #F4F5F6;
  --muted:     #9AA1AB;
  --dim:       #8A9199;
  /* --dimmer is the floor of the text ramp: the footer column headings, the
     copyright line, the legal-page stamp, the deck-request note and (through
     --gray-600 below) the "EUR" units, the separator dot and the
     "(Representative UI.)" aside in the case-study lightbox. All of it small.

     At #6B7079 it failed AA on every surface it lands on — 3.82:1 on --bg,
     3.64:1 on --panel-2, 3.57:1 on --footer-bg and 3.46:1 on --panel, against
     a 4.5:1 minimum. #80858E is the same hue (218.6deg) lifted until the WORST
     of those clears: 4.64:1 on --panel, 4.79:1 on --footer-bg, 4.88:1 on
     --panel-2, 5.13:1 on --bg. Measured in the browser, not by eye.

     Solve against --panel, not --footer-bg: the mock table inside the
     lightbox is the lightest thing this colour sits on, and fixing only the
     footer leaves those units failing. The step down from --dim is 1.16:1,
     close to the 1.22:1 step above it — the ramp tightens at the bottom, but
     that is the cost of the old value having been too far down to read. The
     hero dot overlays are not solved against: they are 1.5-1.7px specks on a
     26px grid, decoration behind the text rather than its background. */
  --dimmer:    #80858E;
  --line:      rgba(255,255,255,0.10);
  --line-soft: rgba(255,255,255,0.08);

  --scrape: #a088c4;
  --tidy:   #728cc9;
  --match:  #ff6d89;
  --price:  #3dadc7;
  /* lightest in-palette shades for the sub-product variant cards */
  --scrape-2: #e2c2ff;
  --price-2:  #d4fafe;
  /* Last survivor of the pre-redesign gray scale (--gray-100..600), kept
     because three inline styles in app.js still name it. It was a second copy
     of --dimmer's hex, so the AA lift above had to be made twice or the two
     would drift; point it at the token instead. */
  --gray-600: var(--dimmer);

  --maxw: 1180px;
  --pad: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--ink); color: #16181D; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: 'Space Mono', ui-monospace, monospace; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ============================ NAV ============================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15,16,20,0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav__inner {
  height: 70px; display: flex; align-items: center; justify-content: space-between;
}
.brandmark { display: flex; align-items: center; cursor: pointer; }
.brandmark-logo { height: 20px; width: auto; }
.brandmark-logo--footer { height: 24px; }
.nav__links { display: flex; align-items: center; gap: 34px; font-size: 14.5px; font-weight: 500; }
.nav__links a { color: var(--muted); transition: color .2s; }
.nav__links a:hover { color: var(--ink); }
.nav__toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 10px; margin-right: -10px;
  background: none; border: 0; cursor: pointer;
}
.nav__toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav.open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================ HERO =========================== */
.hero { position: relative; overflow: hidden; padding: 96px 0 84px; }
.hero__dots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__dots span { position: absolute; inset: 0; }
.hero__dots .d-base {
  background-image: radial-gradient(rgba(255,255,255,0.16) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.38) 58%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.38) 58%, transparent 100%);
}
.hero__dots .d-tl {
  background-image: radial-gradient(rgba(255,255,255,0.44) 1.7px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle 440px at 15% 10%, #000, transparent 68%);
          mask-image: radial-gradient(circle 440px at 15% 10%, #000, transparent 68%);
}
.hero__dots .d-br {
  background-image: radial-gradient(rgba(255,255,255,0.34) 1.7px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle 480px at 87% 66%, #000, transparent 72%);
          mask-image: radial-gradient(circle 480px at 87% 66%, #000, transparent 72%);
}
.hub { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__eyebrow {
  font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(40px, 6vw, 68px); font-weight: 800; line-height: 1.04;
  letter-spacing: -.025em; max-width: 15ch; margin-bottom: 26px;
}
.hero h1 .u {
  background-repeat: no-repeat; background-size: 100% 4px; background-position: 0 86%;
}
.hero h1 .u--scrape { background-image: linear-gradient(var(--scrape), var(--scrape)); }
.hero h1 .u--tidy   { background-image: linear-gradient(var(--tidy),   var(--tidy)); }
.hero h1 .u--match  { background-image: linear-gradient(var(--match),  var(--match)); }
.hero h1 .u--price  { background-image: linear-gradient(var(--price),  var(--price)); }
.hub-sub {
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--muted);
  max-width: 52ch; margin-bottom: 34px; text-wrap: pretty;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 66px; }
.btn-pill {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px;
  padding: 14px 26px; border-radius: 999px; transition: transform .2s, border-color .2s, filter .2s;
}
.btn-pill--solid { background: var(--ink); color: #16181D; }
.btn-pill--solid:hover { transform: translateY(-2px); }
.btn-pill--ghost { border: 1px solid rgba(255,255,255,0.22); color: var(--ink); padding: 14px 24px; }
.btn-pill--ghost:hover { border-color: var(--ink); }

/* Pipeline */
.pipeline { display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pipe-step {
  display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1); background: none; border: 0;
}
.pipe-step:hover { transform: translateY(-10px); }
.pipe-step img { width: 76px; height: 76px; object-fit: contain; animation: floaty 3.4s ease-in-out infinite; }
/* PriceMonk picto is a tight-bounded SVG; pad it so it optically matches the PNG pictos */
.pipe-step:nth-child(7) img { padding: 6px; }
.pipe-step:nth-child(3) img { animation-delay: .4s; }
.pipe-step:nth-child(5) img { animation-delay: .8s; }
.pipe-step:nth-child(7) img { animation-delay: 1.2s; }
.pipe-step span {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.pipe-arrow { font-family: 'Space Mono', monospace; font-size: 20px; color: #C4C9CF; margin-top: 24px; }

/* ========================= SECTIONS ========================== */
.section { padding: 84px 0 90px; }
.section--products { padding: 40px 0 90px; border-top: 1px solid var(--line-soft); scroll-margin-top: 80px; }
.section--cases { scroll-margin-top: 80px; }
.section__head { text-align: center; margin: 40px auto 46px; max-width: 620px; }
.section__head p { font-size: 18px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.tag {
  display: inline-flex; align-items: center; gap: 9px; font-family: 'Space Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 16px;
}
.tag::before { content: ""; width: 22px; height: 1px; background: var(--ink); }

/* ========================= PRODUCTS ========================== */
.products { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 620px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .products { grid-template-columns: repeat(3, 1fr); } }
.pcard {
  position: relative; display: flex; flex-direction: column; padding: 26px; border-radius: 22px;
  border: 1px solid var(--line); background: var(--panel); overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.pcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c); }
.pcard:hover { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--c) 55%, transparent); }
.pcard__ic {
  width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; padding: 11px;
  background: color-mix(in srgb, var(--c) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); margin-bottom: 22px;
}
.pcard__ic img { width: 100%; height: 100%; object-fit: contain; }
.pcard h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 12px; }
.pcard__logo { height: 66px; display: flex; align-items: center; margin-bottom: 22px; }
.pcard__logo img { height: 34px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; }
.pcard__logo--commodity img { height: 44px; }
.pcard__logo--dashboards img { height: 42px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pcard__desc { color: var(--muted); font-size: 14.5px; line-height: 1.6; flex: 1; }
.pcard__foot { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.pcard__visit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600;
  font-size: 14px; color: #16181D; background: var(--c); padding: 11px 16px; border-radius: 999px;
  border: 0; cursor: pointer; transition: filter .2s; font-family: inherit;
}
.pcard__visit:hover { filter: brightness(1.08); }
.pcard__cs {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px;
  font-weight: 600; color: var(--muted); padding: 9px; transition: color .2s;
}
.pcard__cs:hover { color: var(--c); }

/* ========================== CASES ============================ */
.cases__head { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-bottom: 40px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.chip {
  font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: all .2s;
  background: transparent; color: var(--muted); border: 1px solid rgba(255,255,255,0.16);
}
.chip:hover { color: var(--ink); border-color: rgba(255,255,255,0.4); }
.chip.active { background: var(--cc, var(--ink)); color: #0F1014; border-color: var(--cc, var(--ink)); }

.cases__grid { display: flex; flex-direction: column; gap: 22px; }

/* Featured */
.feat {
  position: relative; display: flex; flex-direction: column; border-radius: 24px;
  border: 1px solid var(--line); background: var(--panel); overflow: hidden;
  transition: border-color .3s; cursor: pointer;
}
.feat:hover { border-color: var(--c); }
.feat__media { position: relative; min-height: 230px; overflow: hidden; display: grid; place-items: center; transition: background .5s ease;
  background: radial-gradient(120% 120% at 82% 12%, color-mix(in srgb, var(--c) 32%, transparent), transparent 60%), var(--panel-2); }
.feat__media::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.1) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 75% 25%, #000, transparent 70%);
          mask-image: radial-gradient(circle at 75% 25%, #000, transparent 70%);
}
.feat__pic { position: relative; }
.feat__pic img { width: 110px; height: 110px; object-fit: contain; animation: floaty 3.6s ease-in-out infinite; }
.feat__badge {
  position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.feat__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.feat__body { padding: 28px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.feat__ind { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.feat__title { font-size: 27px; font-weight: 700; line-height: 1.14; letter-spacing: -.02em; }
.feat__teaser { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 62ch; }
.feat__metric { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.feat__metric .v { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--c); }
.feat__metric .k { font-size: 13px; color: var(--muted); }
.feat__foot {
  display: flex; align-items: center; justify-content: space-between; margin-top: auto;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.feat__open { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--c); }
.feat__meta { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--dim); }

/* Featured — full-width, media beside body on desktop */
@media (min-width: 760px) {
  .feat { flex-direction: row; }
  .feat__media { width: 320px; flex: 0 0 320px; min-height: 300px; }
  .feat__body { padding: 34px; }
  .feat__title { font-size: 30px; }
}

/* Paged 3-card row */
.casepage { display: flex; flex-direction: column; gap: 16px; }
.casepage__hd {
  display: flex; align-items: center; justify-content: space-between; font-family: 'Space Mono', monospace;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: 0 2px;
}
.casegrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .casegrid { grid-template-columns: repeat(3, 1fr); } }
.casecard {
  display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.casecard:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--c) 55%, transparent); }
.casecard__ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; padding: 9px; margin-bottom: 4px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.casecard__ic img { width: 100%; height: 100%; object-fit: contain; }
.casecard__tag { font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.casecard__title { font-size: 16px; font-weight: 700; line-height: 1.28; letter-spacing: -.01em; flex: 1; }
.casecard__co { font-size: 11.5px; color: var(--dim); }

/* Pager */
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; }
.pager__btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: border-color .2s, opacity .2s;
}
.pager__btn:hover:not(:disabled) { border-color: var(--ink); }
.pager__btn:disabled { opacity: .3; cursor: default; }
.pager__dots { display: flex; gap: 8px; }
.pager__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,0.22); cursor: pointer; transition: background .2s, transform .2s; }
.pager__dot.active { background: var(--ink); transform: scale(1.3); }

/* ========================== DECKS ============================
   Downloadable PDF one-pagers, below the case-study hub. The cards are
   deliberately quiet: no rotation, no lightbox, no per-card accent. The
   only colour comes from the cover image (each deck's own branded header
   band) and the suite chips, so the section reads as documents rather
   than as a second hub — and so nothing here has to be recoloured when a
   product palette moves.
   ============================================================= */
.section--decks { padding: 40px 0 90px; border-top: 1px solid var(--line-soft); scroll-margin-top: 80px; }
.decks { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .decks { grid-template-columns: repeat(3, 1fr); } }

.deck {
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.deck:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.28); box-shadow: 0 18px 40px -22px rgba(0,0,0,0.6); }

/* The cover is the deck's own header band. It repeats the title, which is
   the point of a document preview — the h3 below is the readable, indexable
   copy. aria-hidden + tabindex -1 keep it out of the tab order and off the
   screen reader, which reaches the same PDF through the Download link. */
.deck__cover { display: block; position: relative; background: var(--panel-2); }
.deck__cover img { width: 100%; height: auto; }
.deck__cover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background: linear-gradient(transparent, var(--panel));
}
.deck__body { padding: 24px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.deck__ind {
  font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
}
.deck__title { font-size: 19px; font-weight: 700; line-height: 1.24; letter-spacing: -.01em; }
.deck__lede { color: var(--muted); font-size: 14px; line-height: 1.6; flex: 1; text-wrap: pretty; }
.deck__chain { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.deck__tool {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--t);
  background: color-mix(in srgb, var(--t) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--t) 30%, transparent);
}
.deck__sink { font-size: 11.5px; color: var(--dim); }
.deck__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.deck__dl {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px;
  color: #16181D; background: var(--ink); padding: 10px 18px; border-radius: 999px;
  transition: transform .2s, filter .2s;
}
.deck__dl:hover { transform: translateY(-2px); }
.deck__meta { font-family: 'Space Mono', monospace; font-size: 10.5px; color: var(--dim); letter-spacing: .04em; }

/* Request band — a mailto in step 1, an inline form in step 2 (WI5-27). */
.deckreq {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
  margin-top: 18px; padding: 28px 32px; border-radius: 22px;
  border: 1px solid var(--line); background: var(--panel-2);
}
.deckreq__body { max-width: 62ch; }
.deckreq h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.deckreq p { color: var(--muted); font-size: 14.5px; line-height: 1.6; text-wrap: pretty; }

/* Deck-request form (WI5-27). The band is a flex row, so the form is the right
   half and the note and status lines stack under it. Below 760px the band
   already wraps, and the input goes full width so the button never squeezes it
   to nothing. */
.deckreq__act { flex: 1 1 320px; min-width: 260px; }
.deckreq__form { display: flex; flex-wrap: wrap; gap: 10px; }
.deckreq__input {
  flex: 1 1 200px; min-width: 0; padding: 13px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font: inherit; font-size: 15px;
}
.deckreq__input::placeholder { color: var(--dim); } /* --dimmer cleared AA on the input when it was lifted; the placeholder stays a step brighter by choice */
.deckreq__input:focus-visible { outline: 2px solid var(--price-2); outline-offset: 2px; border-color: transparent; }
.deckreq__input:user-invalid { border-color: #ff6d89; }
.deckreq__form button { flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; }
.deckreq__form button[disabled] { opacity: .6; cursor: default; transform: none; }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.deckreq__pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.deckreq__note { margin-top: 12px; font-size: 12.5px; color: var(--dimmer); line-height: 1.5; }
.deckreq__note a { text-decoration: underline; }
.deckreq__status { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.deckreq__status--ok { color: var(--price-2); }
.deckreq__status--err { color: #ff6d89; }
.deckreq__status a { text-decoration: underline; }
.deckreq [hidden] { display: none; }

/* ========================== FOOTER =========================== */
.footer { background: var(--footer-bg); color: var(--ink); padding: 66px 0 40px; margin-top: 16px; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer__brand p { color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 300px; text-wrap: pretty; margin-top: 18px; }
.footer__col h5 {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dimmer); margin-bottom: 18px; font-weight: 700;
}
.footer__col a { display: block; color: #C4C9CF; font-size: 14px; margin-bottom: 12px; transition: color .2s; cursor: pointer; }
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding-top: 28px; border-top: 1px solid var(--line);
  font-family: 'Space Mono', monospace; font-size: 11.5px; color: var(--dimmer); letter-spacing: .04em;
}
.footer__bottom .sec { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); transition: color .2s; }
a.sec:hover { color: var(--ink); }
.footer__bottom .sec svg { width: 14px; height: 14px; }

/* ========================= LIGHTBOX ========================== */
.lb {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  padding: 24px; background: rgba(5,6,9,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lb.open { display: flex; }
.lb__shell {
  width: min(980px, 100%); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
}
.lb__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.lb__bar-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.lb__title { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.lb__close {
  background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 10px;
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; transition: border-color .2s, background .2s;
}
.lb__close:hover { border-color: var(--ink); background: rgba(255,255,255,0.05); }
.lb__stage { overflow: hidden; flex: 1; }
.lb__track { display: flex; height: 100%; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.lb__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line); }
.lb__dots { display: flex; gap: 8px; }
.lb__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.22); cursor: pointer; transition: background .2s, transform .2s; }
.lb__dots button.active { background: var(--c); transform: scale(1.3); }
.lb__nav { display: flex; align-items: center; gap: 14px; }
.lb__btn { background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 10px; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; transition: border-color .2s, opacity .2s; }
.lb__btn:hover { border-color: var(--ink); }
.lb__btn:disabled { opacity: .3; cursor: default; }
.pg { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--dim); }

/* Slides */
.slide {
  position: relative; flex: 0 0 100%; width: 100%; padding: 40px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.slide__bg { position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,0.07) 1.4px, transparent 1.4px),
    radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%);
  background-size: 22px 22px, cover;
  -webkit-mask-image: radial-gradient(circle at 82% 8%, #000, rgba(0,0,0,0.55) 55%, transparent 90%);
          mask-image: radial-gradient(circle at 82% 8%, #000, rgba(0,0,0,0.55) 55%, transparent 90%);
}
.slide > *:not(.slide__bg) { position: relative; }
.slide__kicker { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.slide__kicker .n { color: var(--dim); }
.slide h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.slide .lead { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.slide .body { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.slide__list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.slide__list .it { display: flex; gap: 12px; align-items: flex-start; }
.slide__list .dot { flex: 0 0 auto; width: 22px; height: 22px; color: var(--c); }
.slide__list .dot svg { width: 100%; height: 100%; }
.slide__list p { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.slide__list p b { color: var(--ink); }
.slide__cols { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 720px) { .slide__cols { grid-template-columns: 1fr 1.1fr; } }
.slide__labels { display: flex; gap: 10px; flex-wrap: wrap; }
.slide__stats { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 6px; }
@media (min-width: 640px) { .slide__stats { grid-template-columns: repeat(3, 1fr); } }
.statbox { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: var(--panel); }
.statbox .v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--c); }
.statbox .k { font-size: 13.5px; font-weight: 600; margin-top: 6px; }
.statbox .d { font-size: 12px; color: var(--dim); margin-top: 4px; }

.slide--cover { align-items: flex-start; justify-content: center; }
.cover-glyph { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 22px;
  background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.cover-glyph img { width: 64px; height: 64px; object-fit: contain; }
.slide--cover h2 { font-size: clamp(26px, 4vw, 40px); }
.client { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.client b { color: var(--ink); }

.slide--quote { align-items: center; justify-content: center; text-align: center; }
.slide--quote .mark { font-size: 64px; line-height: .5; color: var(--c); font-family: Georgia, serif; }
.slide--quote blockquote { font-size: clamp(22px, 3.4vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; max-width: 22ch; }
.slide--quote .cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; border: 0; font-family: inherit; }
.btn--primary { background: var(--c); color: #0F1014; }
.btn--primary .arrow { width: 18px; height: 18px; display: inline-flex; }
.btn--primary .arrow svg { width: 100%; height: 100%; }
.btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }

/* Mock UI (in-action slide) */
.mock { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); font-size: 12.5px; }
.mock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.mock__bar .t { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--dim); margin-left: 8px; }
.mock__body { padding: 6px 0; }
.mock__row { display: grid; grid-template-columns: 1.4fr 1.4fr .8fr .8fr; gap: 10px; align-items: center; padding: 9px 14px; }
.mock__row.head { color: var(--dim); font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.mock__row b { color: var(--ink); font-weight: 600; }
.mock__row span { color: var(--muted); }
.mbar { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; }
.mbar i { display: block; height: 100%; background: var(--c); border-radius: 4px; }
.chip-mini { display: inline-flex; align-items: center; justify-content: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.chip-mini.ok { background: color-mix(in srgb, var(--price) 16%, transparent); color: var(--price); }
.chip-mini.warn { background: color-mix(in srgb, var(--match) 16%, transparent); color: var(--match); }
.chip-mini.bad { background: color-mix(in srgb, var(--match) 20%, transparent); color: var(--match); }

.label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.label--tool { color: var(--ink); }

/* ======================= LEGAL PAGES ========================= */
.legal-hero { position: relative; overflow: hidden; padding: 84px 0 40px; text-align: center; }
.legal-hero .hero__dots { z-index: 0; }
.legal-hero .container { position: relative; z-index: 1; }
.legal-hero h1 { font-size: clamp(36px, 6vw, 62px); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; margin-bottom: 20px; }
.legal-hero .lead { max-width: 60ch; margin: 0 auto; font-size: 18px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.legal-hero .stamp { margin-top: 22px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dimmer); }

.legal { max-width: 820px; margin: 0 auto; padding: 40px var(--pad) 40px; color: var(--muted); line-height: 1.7; }
.legal section { margin-bottom: 48px; }
.legal h2 {
  display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink); margin-bottom: 18px;
}
.legal h2::before { content: ""; width: 6px; height: 26px; border-radius: 999px; background: var(--accent, var(--scrape)); flex: 0 0 auto; }
.legal h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 22px 0 10px; }
.legal p { margin-bottom: 14px; }
.legal p:last-child { margin-bottom: 0; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--accent, var(--tidy)); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent, var(--tidy)) 45%, transparent); transition: color .2s; }
.legal a:hover { color: var(--ink); }
.legal ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.legal ul li { display: flex; gap: 12px; align-items: flex-start; }
.legal ul li::before { content: ""; margin-top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--scrape)); flex: 0 0 auto; }
.legal .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.legal thead th { text-align: left; padding: 12px 16px; font-weight: 700; color: var(--ink); background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--line); }
.legal tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.legal tbody tr:last-child td { border-bottom: 0; }

/* ======================== ABOUT ============================= */
.about { max-width: 980px; margin: 0 auto; padding: 20px var(--pad) 24px; }
.about section { margin-bottom: 64px; }
.about h2 {
  display: flex; align-items: center; gap: 14px; font-size: 26px; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); margin-bottom: 24px;
}
.about h2::before { content: ""; width: 6px; height: 28px; border-radius: 999px; background: var(--accent, var(--price)); flex: 0 0 auto; }
.about p { color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
.about p:last-child { margin-bottom: 0; }
.about a.inline { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent, var(--price)) 45%, transparent); transition: color .2s; }
.about a.inline:hover { color: var(--accent, var(--price)); }
.about-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: stretch; }
@media (min-width: 760px) { .about-grid { grid-template-columns: 1.2fr 1fr; } }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.stat-card .big { font-size: 44px; font-weight: 800; color: var(--accent, var(--price)); letter-spacing: -.02em; line-height: 1; }
.stat-card .lab { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.stat-card img { height: 22px; margin-top: 24px; opacity: .55; }
.mission { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 36px; overflow: hidden; }
.mission::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 80% at 90% 0%, color-mix(in srgb, var(--accent, var(--price)) 12%, transparent), transparent 60%); }
.mission > * { position: relative; }
.mission .quote { font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; font-style: italic; color: var(--ink); line-height: 1.35; text-align: center; margin-bottom: 22px; }
.contact { text-align: center; padding: 72px 0 8px; border-top: 1px solid var(--line); }
.contact h2 { justify-content: center; font-size: clamp(30px, 5vw, 44px); font-weight: 800; margin-bottom: 16px; }
.contact h2::before { display: none; }
.contact .sub { color: var(--muted); font-size: 18px; margin-bottom: 36px; }
.contact__email { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(22px, 4vw, 36px); font-weight: 800; color: var(--accent, var(--price)); transition: gap .2s; }
.contact__email:hover { gap: 22px; }
.contact__email .u { text-decoration: underline; text-underline-offset: 8px; text-decoration-color: color-mix(in srgb, var(--accent, var(--price)) 40%, transparent); }

/* ======================= RESPONSIVE ========================== */
@media (max-width: 620px) {
  :root { --pad: 20px; }
  .hero { padding: 64px 0 60px; }
  .pipe-arrow { display: none; }
  .pipeline { gap: 6px; flex-wrap: nowrap; }
  .pipe-step { flex: 1 1 0; min-width: 0; gap: 9px; }
  .pipe-step img { width: 50px; height: 50px; }
  .pipe-step span { font-size: 9.5px; letter-spacing: .08em; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(15,16,20,0.97);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line); padding: 6px 0;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s;
  }
  .nav.open .nav__links { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links a { padding: 14px var(--pad); font-size: 15px; }
  .feat__media { min-height: 190px; }
  .slide { padding: 26px; }
  .deckreq { padding: 24px var(--pad); }
  .deckreq .btn-pill { width: 100%; justify-content: center; }
}