/* ============================================================
   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;
  --brand:     #2fd2be;  /* guide Primary */
  --brand-2:   #cafbf0;  /* guide Light; declared for the palette, not currently used */
  --muted:     #9AA1AB;
  --dim:       #8A9199;
  /* --dimmer is the floor of the text ramp: the footer column headings, the
     copyright line, the legal-page stamp 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.

     www.monksuite.io runs the same neutral ramp and took the same lift in
     ce64648. The two stylesheets are not shared, so keep them in step by
     hand. */
  --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(--brand); color: #0d2f2e; }

.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(--brand); 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(--brand); color: #0d2f2e; }
.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(--brand); margin-bottom: 16px;
}
.tag::before { content: ""; width: 22px; height: 1px; background: var(--brand); }

/* ========================= 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(--brand)); color: #0d2f2e; border-color: var(--cc, var(--brand)); }

.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); }

/* ========================== 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; }
}