/* ==========================================================================
   Trace Finance — marketing site styles (dark direction)
   Built strictly on assets/trace-tokens.css (Trace Design System)
   ========================================================================== */

:root {
  --site-bg: var(--t-surface-0);          /* #121212 */
  --site-panel: var(--t-surface-1);       /* #1b1b1b */
  --site-panel-2: var(--t-surface-2);     /* #2a2a2a */
  --site-border: #2a2a2a;
  --site-border-soft: #222222;
  --site-fg: var(--t-white);
  --site-fg-2: var(--t-slate-400);
  --site-fg-3: var(--t-slate-500);
  --accent: var(--t-brand-green);
  --accent-hover: var(--t-brand-green-200);
  --maxw: 1140px;
}

/* Offset anchor jumps so the sticky 64px header doesn't clip the section title. */
html { scroll-padding-top: 80px; }

body {
  background: var(--site-bg);
  color: var(--site-fg);
  font-family: var(--t-font-sans);
  font-size: 16px;
  line-height: var(--t-lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(0,242,177,.28); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 56px; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18,18,18,.92);
  border-bottom: 1px solid var(--site-border-soft);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 32px;
  height: 64px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-img { height: 18px; width: auto; display: block; }
/* The wordmark's chevron mark sits high in the SVG, so the "trace finance"
   text reads ~2px lower than the nav items. Nudge the header logo up to
   optically align it with the nav row (footer logo is intentionally left). */
.site-header .logo-img { transform: translateY(-2px); }
.logo .dot {
  width: 26px; height: 26px; border-radius: 7px; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--t-font-display); font-weight: 700; font-size: 16px; color: var(--t-ink);
}
.logo .word {
  font-family: var(--t-font-display); font-weight: 600; font-size: 20px;
  letter-spacing: -0.01em; color: var(--site-fg);
}
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-links a {
  white-space: nowrap;
  font-size: 14px; font-weight: 500; color: var(--site-fg-2);
  text-decoration: none; padding: 8px 12px; border-radius: var(--t-radius-md);
  transition: color var(--t-dur-base) var(--t-ease-standard), background var(--t-dur-base) var(--t-ease-standard);
}
.nav-links a:hover { color: var(--site-fg); background: var(--site-panel-2); }
.nav-links a.active { color: var(--site-fg); font-weight: 600; }
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* Language switcher */
.lang {
  display: flex; border: 1px solid var(--site-border); border-radius: var(--t-radius-md);
  overflow: hidden; font-size: 12px; font-weight: 600;
}
.lang button {
  background: transparent; border: 0; color: var(--site-fg-3); padding: 5px 10px;
  font: inherit; cursor: pointer; letter-spacing: .04em;
  transition: background var(--t-dur-fast) var(--t-ease-standard);
}
.lang button.on { background: var(--site-panel-2); color: var(--site-fg); }
.lang button:not(.on):hover { color: var(--site-fg-2); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--t-font-sans); font-weight: 500; font-size: 14px; line-height: 1.3;
  padding: 10px 18px; border-radius: var(--t-radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--t-dur-base) var(--t-ease-standard), border-color var(--t-dur-base) var(--t-ease-standard);
}
.btn:focus-visible { outline: none; box-shadow: var(--t-shadow-focus); }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-brand { background: var(--accent); color: var(--t-ink); }
.btn-brand:hover { background: var(--accent-hover); }
.btn-outline { background: transparent; color: var(--site-fg); border-color: var(--site-border); }
.btn-outline:hover { background: var(--site-panel-2); }
.btn-ghost { background: transparent; color: var(--site-fg-2); }
.btn-ghost:hover { color: var(--site-fg); background: var(--site-panel-2); }
.btn-lg { padding: 13px 24px; font-size: 15px; }

/* ===== Type helpers (dark overrides) ===== */
h1, h2, h3 { color: var(--site-fg); margin: 0; }
.eyebrow {
  font-family: var(--t-font-sans); font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
.section-sub { font-size: 17px; color: var(--site-fg-2); max-width: 560px; text-wrap: pretty; margin: 0; }

/* ===== Sections ===== */
.section { padding: 104px 0; }
.section + .section { border-top: 1px solid var(--site-border-soft); }
.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px; }
.section-head h2 {
  font-family: var(--t-font-display); font-weight: 500;
  font-size: var(--t-fs-1000); line-height: var(--t-lh-display); letter-spacing: -0.01em;
  max-width: 640px; text-wrap: pretty;
}
.section-head.split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
.section-head.split > div { display: flex; flex-direction: column; gap: 16px; }

/* ===== Cards ===== */
.card {
  background: var(--site-panel); border: 1px solid var(--site-border);
  border-radius: var(--t-radius-lg); padding: 32px;
  transition: border-color var(--t-dur-base) var(--t-ease-standard);
}
.card:hover { border-color: #3a3a3a; }
.card h3 { font-family: var(--t-font-display); font-weight: 500; font-size: 20px; line-height: var(--t-lh-ui); }
.card p { font-size: 14.5px; color: var(--site-fg-2); margin: 0; text-wrap: pretty; }
.card .num {
  font-family: var(--t-font-mono); font-size: 12px; color: var(--site-fg-3); letter-spacing: .06em;
}
.icon-tile {
  width: 40px; height: 40px; border-radius: var(--t-radius-md);
  background: var(--site-panel-2); border: 1px solid var(--site-border);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.icon-tile svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Chips / status ===== */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; white-space: nowrap;
  font-size: 12px; font-weight: 500; border-radius: var(--t-radius-sm);
  border: 1px solid var(--site-border); background: var(--site-panel-2); color: var(--site-fg-2);
}
.chip .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--site-fg-3); }
.chip.ok { border-color: rgba(0,242,177,.4); background: rgba(0,242,177,.08); color: var(--accent); }
.chip.ok .pip { background: var(--accent); }

/* ===== Image-slot placeholders (dark theme) ===== */
image-slot {
  --slot-fg: var(--t-slate-400);
  --slot-fg-dim: rgba(255,255,255,.3);
  --slot-fg-strong: rgba(255,255,255,.85);
  --slot-bg: rgba(255,255,255,.04);
  --slot-ring: #3f3f3f;
}

/* ===== Mono numbers ===== */
.mono { font-family: var(--t-font-mono); }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--site-border-soft); padding: 64px 0 48px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.footer-col h4 {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--site-fg-3); margin: 0 0 16px;
}
.footer-col a {
  display: block; font-size: 14px; color: var(--site-fg-2); text-decoration: none; padding: 5px 0;
  transition: color var(--t-dur-base) var(--t-ease-standard);
}
.footer-col a:hover { color: var(--site-fg); }
.footer-legal {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--site-border-soft);
  font-size: 12px; line-height: 1.6; color: var(--site-fg-3); max-width: 820px; text-wrap: pretty;
}

/* ===== Reveal on scroll ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--t-ease-standard), transform .5s var(--t-ease-standard); }
  .reveal.in { opacity: 1; transform: none; }
}

/* ===== Page transitions (native cross-document view transitions) =====
   Pure CSS, no client router: on full-page navigations (Product, Developers,
   Contact) the page CONTENT cross-fades with a slight lift. The persistent
   chrome at the top (the injected .topbar announcement and the sticky header) is
   given its own transition name so it stays put instead of fading and jiggling
   with the content. scrollbar-gutter keeps width constant so a scrollbar
   appearing/disappearing between pages can't shift the layout. Unsupported
   browsers just navigate. */
@view-transition { navigation: auto; }
html { scrollbar-gutter: stable; }
.topbar { view-transition-name: topbar; }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .26s var(--t-ease-standard) both; }
  ::view-transition-new(root) { animation: vt-in .34s var(--t-ease-standard) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .wrap { padding: 0 28px; }
  .nav-links { display: none; }
  .section { padding: 64px 0; }
  .section-head h2 { font-size: var(--t-fs-800); }
  .section-head.split { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}