/* ═══════════════════════════════════════════════════════════════════════════
   PullBinder — the design language. One file. Every page links it.

   The landing page, the explore page, the contact page and eventually the app
   all read their colours, type and primitives from here. If a token changes, it
   changes everywhere, once. Four separate copies of a palette is how a product
   ends up with three different blues.

   TWO RULES, and they are the whole system:

   1. THE ACCENT IS A SCALPEL.
      Blue (--accent) lands on exactly three things: the primary button, a live
      number, and — at most — one word in a headline. Everything else is white
      on near-black. A gradient across a headline reads as decorated. Restraint
      reads as confident.

      Green (--green) means one thing only: a value we stand behind. Never
      decoration, never "up". Red is reserved for a real loss or a real error.

   2. NUMBERS ARE TABULAR AND HONEST.
      Every figure on this site uses tabular-nums so columns line up and a price
      doesn't jitter when it updates. And no figure appears anywhere — marketing
      included — that the product cannot defend. There is no illustrative
      "+18.3%" on this site.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* surfaces — near-black, four steps, never pure #000 */
  --bg:       #0B0E14;
  --bg2:      #0d1018;
  --surface:  #12161f;
  --surface2: #171c27;
  --border:   #212837;
  --border2:  #2d3650;

  /* type */
  --text:     #F8F9FA;
  --text2:    #8a96b4;
  --muted:    #566080;

  /* the scalpel */
  --accent:   #2D5BFF;
  --accent-h: #3f6bff;
  --accent-d: rgba(45,91,255,0.10);

  /* meaning, not decoration */
  --green:    #00e5b0;   /* a value we stand behind */
  /* #e63946 -> #ff5470. Same green (#00e5b0), different red — and on this background
     that mattered: e63946 is a brick red that sits DARKER than the surface it prints on,
     so a loss read as muted while a gain read as lit. A percentage column where one
     direction shouts and the other mumbles is not neutral reporting; it flatters the
     portfolio. ff5470 carries the same weight as the green, so -20.7% and +20.7% land
     with equal force. */
  --red:      #ff5470;   /* a real loss, or an error */

  --radius:   16px;
  --shell:    1140px;
  --gutter:   clamp(20px, 5vw, 40px);

  --font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display:  'Space Grotesk', 'Inter', sans-serif;

  /* one shadow, used everywhere something floats */
  --lift: 0 40px 90px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.02) inset;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* Always reserve the scrollbar gutter. Without this, a page that scrolls centres
     its shell ~7px left of a page that doesn't, and the wordmark visibly jumps when
     you navigate between them. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  letter-spacing: -0.035em;
  line-height: 1.03;
  margin: 0;
  font-weight: 700;
}

/* Every number on this site. Prices don't jitter, columns line up. */
.num, .price, .tile-num, .range, .tick { font-variant-numeric: tabular-nums; }

.shell   { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }
.accent  { color: var(--accent); }
.value   { color: var(--green); }


/* ── the footer stays put ──────────────────────────────────────────────────────
   A footer that follows the content sits mid-screen on a short page and far below
   on a long one. Navigate between them and it lurches. Pin it: the page is a column
   at least one viewport tall, the content takes the slack, the footer takes what is
   left. On a long page nothing changes. On a short page the footer is at the bottom
   of the window, where a footer belongs. */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* margin-top:auto on the LAST flex item eats all the leftover space above it.
   No flex-grow needed on anything else, so no layout is fought. */
.site-foot { margin-top: auto; flex-shrink: 0; }

/* ── the wordmark ────────────────────────────────────────────────────────── */
.wordmark {
  /* inline-flex + line-height:1 so the mark's box is exactly its cap height and does
     NOT inherit whatever line-height the page happens to set. An inline <a> centred
     in a 68px nav lands at a different y on every page otherwise. */
  display: inline-flex; align-items: center; line-height: 1;
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: 0.14em;
}
.wordmark span { color: var(--accent); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: 10px;
  font-family: var(--font); font-size: 14.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--border2); color: var(--text);
  background: transparent; cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.btn:hover  { background: rgba(255,255,255,0.04); border-color: #3a4560; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 6px 24px -8px rgba(45,91,255,0.7);
}
.btn-primary:hover { background: var(--accent-h); border-color: var(--accent-h); transform: translateY(-1px); }

.btn-ghost  { border-color: transparent; color: var(--text2); }
/* border stays transparent on hover — ghost nav links shade, they never outline
   (matches the signed-in app header). Without this, .btn:hover's border wins. */
.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,0.04); border-color: transparent; }
.btn-lg     { height: 50px; padding: 0 26px; font-size: 15.5px; }

/* ── the surfaces things sit on ──────────────────────────────────────────── */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.panel-raised {
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--lift);
}

/* ── small type ──────────────────────────────────────────────────────────── */
.eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border2); color: var(--text2);
}

/* ── nav, shared by every page ───────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(11,14,20,0.72);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-in { display: flex; align-items: center; gap: 14px; height: 68px; }
.nav-in .wordmark { margin-right: auto; }

/* ── footer, shared by every page ────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--border); padding: 34px 0; }
.foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.foot .wordmark { font-size: 15px; }
.foot nav { display: flex; gap: 22px; font-size: 13.5px; color: var(--muted); }
.foot nav a:hover { color: var(--text); }
.disclaim { color: var(--muted); font-size: 12px; margin-top: 18px; max-width: 62em; line-height: 1.65; }

/* The footer states its own metrics. It must not inherit them, because it lives on
   four pages with different body line-heights and different <p> resets:

     landing  body line-height 1.6   → nav line box 21.59px, p margin-bottom 12px
     app      body line-height normal → nav line box 16.50px, p margin-bottom 0

   17.09px of difference, entirely inherited. A shared component that depends on its
   parent is not shared. */
.site-foot .foot nav { line-height: 1.6; }
.site-foot .disclaim { margin-bottom: 0; }


/* Not three designs — one page that reflows. */
@media (max-width: 640px) {
  .nav-in { height: 60px; }
  .nav .btn-ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
}