/* ============================================================
   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 */
/* PriceMonk picto is a tight-bounded SVG; pad it so it optically matches the PNG pictos */

/* ========================= 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; }
/* Overview video, ported from the product sites' .video in shared/base.css
   onto this site's tokens. */
.section--video { padding: 0 0 90px; scroll-margin-top: 80px; }
.video__frame {
  max-width: 1000px; margin: 0 auto; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.6);
}
.video__frame video { display: block; width: 100%; height: auto; background: var(--bg); }
.video__title {
  max-width: 1000px; margin: 40px auto 22px; text-align: center;
  font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--ink); text-wrap: balance;
}
.chapters {
  display: grid; grid-template-columns: repeat(3, minmax(0, 250px)); justify-content: center;
  gap: 10px; margin: 0 auto 26px;
}
.chapter {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-align: left;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .2s;
}
.chapter::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.chapter:hover, .chapter:focus-visible { border-color: var(--c); }
.chapter__t { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 400; color: var(--dim); }
@media (max-width: 760px) { .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .chapters { grid-template-columns: 1fr; } }
.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; }
/* The deck's own cover headline, kept as a sub-line under Lucia's short name
   (her proposal, 2026-09-22: the short name is what you scan, the headline
   stays). The body is a 13px-gap flex column, so this pulls up to sit with the
   title as one unit rather than floating between title and lede. */
.deck__sub {
  margin-top: -7px; font-size: 14.5px; line-height: 1.35;
  color: var(--ink); text-wrap: pretty;
}
.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);
  /* Anna, 2026-09-22: "jen pokud by to šlo nějak vizuálně zlepšit - nějak
     trochu probarvit?" The band was the one monochrome block on a page that
     colour-codes everything else. Two corner washes in the suite's own colours,
     the same radial color-mix technique .feat__media uses: ScrapeMonk violet
     where the pipeline starts, PriceMonk cyan where it ends. Kept low so it
     reads as a tint rather than a second CTA competing with the band below. */
  /* The wash is one number, because it has to differ by viewport. On a phone
     the band fills the screen, so the colour reads as ambient background and
     45% looks right — Anna's words, "na mobilu je i gradient a vypada to uplne
     super". On desktop you see the band as an object on a near-black page, and
     the same 45% makes it the loudest thing there. So it eases off at exactly
     the width where the options go two-column and the band stops being a
     full-screen stack. */
  --wash: 45%;
  background:
    radial-gradient(120% 130% at 4% 0%, color-mix(in srgb, var(--scrape) var(--wash), transparent), transparent 62%),
    radial-gradient(120% 130% at 98% 100%, color-mix(in srgb, var(--price) var(--wash), transparent), transparent 64%),
    var(--panel-2);

  /* The wash lightens what the body text sits on, so the muted step moves up
     inside this band only. At 45% the strongest corner is #265a68 and --muted
     would read 2.9:1; #c5c9cf reads 4.60:1 there and 5.02:1 in the violet
     corner, while staying 1.5:1 below --ink so the heading still leads.
     Redefined as a token rather than per rule, so anything muted added here
     later inherits the corrected value instead of quietly failing. */
  --muted: #c5c9cf;
}
.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. */
/* With twelve names listed the band is a stack, not two columns: the body on
   top, the picker under it, the address row last. */
.deckreq { flex-direction: column; align-items: stretch; }
.deckreq__act { width: 100%; }
.deckreq__pick { border: 0; padding: 0; margin: 0 0 18px; }
.deckreq__pick legend {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--price-2); padding: 0; margin-bottom: 12px;
}
.deckreq__opts { display: grid; grid-template-columns: 1fr; gap: 8px 26px; }
@media (min-width: 720px) { .deckreq__opts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .deckreq { --wash: 33%; } }
.deckreq__opt {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  font-size: 14px; line-height: 1.45; color: var(--ink); cursor: pointer;
}
/* Twelve browser-default checkboxes rendered as solid white squares, which is
   what made the block read as a form bolted onto the page. Custom control in
   the accent instead; the tick is drawn, not a glyph, so it inherits nothing
   from the font. */
.deckreq__opt input {
  appearance: none; -webkit-appearance: none;
  margin: 2px 0 0; width: 16px; height: 16px; border-radius: 5px; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--price-2) 42%, transparent);
  background: color-mix(in srgb, var(--price-2) 7%, transparent);
  display: grid; place-content: center;
  transition: background .18s, border-color .18s;
}
.deckreq__opt:hover input { border-color: color-mix(in srgb, var(--price-2) 75%, transparent); }
.deckreq__opt input:checked { background: var(--price-2); border-color: var(--price-2); }
.deckreq__opt input:checked::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg);
  transform: rotate(-45deg);
}
.deckreq__opt:hover span { color: #fff; }
/* The whole label is the target, but a one-line option is only 20px tall, which
   is a poor tap. Grow it on touch pointers only, so the desktop list stays tight. */
@media (pointer: coarse) { .deckreq__opt { min-height: 44px; } }
.deckreq__opt input:focus-visible { outline: 2px solid var(--price-2); outline-offset: 2px; }
.deckreq__row { 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; }
            .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; }
}