/* Datafew site — light canvas, brand indigo, dark panels for first-party evidence.
   Palette follows docs/investor/BRAND_SYSTEM.md: the light surface uses the wordmark
   blue as the single accent; the dark evidence panels use the brand `ink`/`signal`
   tokens so numbers read as verified rather than decorative. */

:root {
  color-scheme: light;

  --brand: #1d63ed;
  --brand-deep: #1450c8;
  --brand-press: #0f3fa0;
  --brand-tint: #eef3fe;

  --ink: #0e1626;
  --ink-2: #33415c;
  --mute: #647089;

  --canvas: #ffffff;
  --soft: #f6f8fc;
  --line: #e3e8f0;

  /* dark evidence panel (BRAND_SYSTEM ink / signal / control) */
  --dark: #0b1020;
  --dark-panel: #111a2e;
  --dark-line: #263656;
  --dark-text: #f5f7fb;
  --dark-mute: #a9b4c7;
  --signal: #46e6b0;
  --control: #7aa7ff;

  --shadow-1: 0 1px 2px rgba(14, 22, 38, 0.06);
  --shadow-2: 0 8px 24px rgba(14, 22, 38, 0.07), 0 2px 6px rgba(14, 22, 38, 0.04);
  --radius: 12px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.022em;
  line-height: 1.15;
  font-weight: 600;
}

p {
  margin: 0;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  color: var(--brand-deep);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: min(1200px, calc(100vw - 48px));
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 96px;
}

.topbar__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  /* pushes everything after it to the right, so pages without a nav (404) still
     anchor their action to the far edge */
  margin-right: auto;
}

.topbar__brand img {
  display: block;
  height: 52px;
  width: auto;
}

.topbar__nav {
  display: flex;
  gap: 32px;
  font-size: 16.5px;
}

.topbar__nav a {
  color: var(--ink-2);
  font-weight: 450;
}

.topbar__nav a:hover {
  color: var(--brand);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 550;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn--sm {
  padding: 10px 20px;
  font-size: 15px;
}

.btn--primary {
  background: var(--brand);
  color: #fff;
}

.btn--primary:hover {
  background: var(--brand-deep);
  color: #fff;
}

.btn--primary:active {
  background: var(--brand-press);
}

.btn--ghost {
  border-color: var(--line);
  background: var(--canvas);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ---------- Shared section furniture ---------- */

.eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}

.eyebrow--dark {
  color: var(--signal);
}

.section {
  padding: 92px 0;
  border-top: 1px solid var(--line);
}

.section--soft {
  background: var(--soft);
}

.section__title {
  font-size: clamp(28px, 3.4vw, 40px);
  max-width: 27ch;
}

.section__lead {
  margin-top: 20px;
  max-width: 68ch;
  font-size: 17px;
  color: var(--ink-2);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 108px 0 96px;
  background:
    radial-gradient(46% 62% at 8% 4%, rgba(29, 99, 237, 0.09), transparent 70%),
    radial-gradient(38% 54% at 88% 0%, rgba(70, 230, 176, 0.13), transparent 68%),
    var(--canvas);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 56px;
  align-items: center;
}

.hero__title {
  font-size: clamp(31px, 4.4vw, 64px);
  letter-spacing: -0.032em;
  line-height: 1.08;
}

.hero__lead {
  margin-top: 26px;
  max-width: 52ch;
  font-size: 18px;
  color: var(--ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero__note {
  margin-top: 30px;
  max-width: 48ch;
  font-size: 14.5px;
  color: var(--mute);
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

/* ---------- Hero write-path illustration ---------- */

.wpath {
  background: var(--dark);
  border: 1px solid var(--dark-line);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 44px rgba(11, 16, 32, 0.18);
}

.wpath__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--dark-mute);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dark-line);
}

.wpath__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  flex: 0 0 auto;
}

.wpath__steps {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.45;
}

.wpath__step {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  color: var(--dark-text);
}

.wpath__k {
  color: var(--control);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wpath__step--fail {
  color: #ff8f8f;
}

.wpath__step--ok {
  color: var(--signal);
}

.wpath__note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--dark-line);
  font-size: 12px;
  color: var(--dark-mute);
}

/* ---------- Grids and cards ---------- */

.grid {
  display: grid;
  gap: 20px;
  margin-top: 44px;
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--gap-lg {
  gap: 24px;
}

.card {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-1);
}

.card p {
  color: var(--ink-2);
  font-size: 15.5px;
}

.card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card--yes {
  border-top: 3px solid var(--brand);
}

.card--no {
  border-top: 3px solid var(--line);
}

.list {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 15.5px;
}

.list li + li {
  margin-top: 10px;
}

/* ---------- Architecture diagram ----------
   The shape carries the argument: the agent sits *inside* the plane, not beside
   it, and the only edge leaving the plane is the admitted write. Flat rows would
   say "between the model and the repo", which is the weaker (and wrong) claim. */

.arch {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 44px;
}

.arch__node {
  width: min(100%, 560px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
  padding: 16px 20px;
  text-align: center;
  box-shadow: var(--shadow-1);
}

.arch__node--outside {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.arch__node--repo {
  border-color: #ddd0b4;
  background: #fdfaf3;
}

.arch__layer {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

.arch__name {
  margin-top: 5px;
  font-size: 16.5px;
  font-weight: 550;
  color: var(--ink);
}

.arch__sub {
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--mute);
}

/* connector: hairline, pill label, arrowhead */
.arch__edge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
}

.arch__edge::before {
  content: "";
  width: 1px;
  height: 14px;
  background: var(--line);
}

.arch__edge::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--mute);
}

.arch__edge-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
}

.arch__edge--admit::before {
  background: var(--brand);
}

.arch__edge--admit::after {
  border-top-color: var(--brand);
}

.arch__edge--admit .arch__edge-label {
  color: var(--brand-deep);
  background: var(--brand-tint);
  border-color: var(--brand);
}

/* the plane itself: the container everything else runs inside */
.arch__plane {
  width: min(100%, 760px);
  border: 1.5px solid var(--brand);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--brand-tint) 0%, #fbfcff 62%);
  box-shadow: var(--shadow-2);
  padding: 20px 18px 18px;
}

.arch__plane-head {
  text-align: center;
  margin-bottom: 14px;
}

.arch__plane-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.arch__plane-sub {
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.arch__plane .arch__node {
  width: 100%;
  box-shadow: none;
}

.arch__cycle {
  margin-top: 12px;
  border: 1px dashed var(--brand);
  border-radius: 14px;
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.72);
}

.arch__cycle-label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 12px;
}

.arch__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.arch__step {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 12px;
  text-align: center;
}

.arch__step::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  color: var(--brand);
  font-size: 13px;
  line-height: 1;
}

.arch__step:last-child::after {
  content: none;
}

.arch__step-n {
  display: block;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute);
}

.arch__step-t {
  margin-top: 4px;
  font-size: 16px;
}

.arch__step-g {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--brand-deep);
}

.arch__loop {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--mute);
}

.arch__gates {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.arch__gates span {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--canvas);
  border: 1px solid var(--brand);
  color: var(--brand-deep);
}

.lifecycle__footer {
  margin-top: 30px;
  max-width: 74ch;
  font-size: 15.5px;
  color: var(--ink-2);
}

/* ---------- Dark evidence panel ---------- */

.section--dark {
  background: var(--dark);
  color: var(--dark-text);
  border-top-color: var(--dark);
}

.section--dark .section__lead {
  color: var(--dark-mute);
}

.stats {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 46px;
}

.stat {
  background: var(--dark-panel);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.stat__value {
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
  line-height: 1.1;
}

.stat__label {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 550;
  color: var(--dark-text);
}

.stat__sub {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--dark-mute);
}

.stats--light .stat {
  background: var(--soft);
  border-color: var(--line);
}

.stats--light .stat__value {
  color: var(--brand);
}

.stats--light .stat__label {
  color: var(--ink);
}

.stats--light .stat__sub {
  color: var(--mute);
}

.boundary {
  margin-top: 30px;
  max-width: 84ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dark-mute);
  border-left: 2px solid var(--dark-line);
  padding-left: 16px;
}

.boundary strong {
  color: var(--dark-text);
  font-weight: 600;
}

.boundary--light {
  color: var(--mute);
  border-left-color: var(--line);
}

.boundary--light strong {
  color: var(--ink);
}

/* ---------- CTA ---------- */

.section--cta {
  background: var(--soft);
}

.cta {
  text-align: center;
  padding: 12px 0;
}

.cta__title {
  font-size: clamp(26px, 3.2vw, 36px);
  max-width: 24ch;
  margin: 0 auto;
}

.cta__lead {
  margin: 20px auto 0;
  max-width: 58ch;
  font-size: 17px;
  color: var(--ink-2);
}

/* ---------- Contact card ----------
   Deliberately not a mailto button: hijacking the visitor's mail client is a
   worse first interaction than handing them an address they can copy. Styled to
   echo the hero write-path panel so the page opens and closes on the same note. */

.mailcard {
  margin: 36px auto 0;
  width: min(100%, 560px);
  text-align: left;
  background: var(--dark);
  border: 1px solid var(--dark-line);
  border-radius: 16px;
  padding: 20px 22px 18px;
  box-shadow: 0 18px 44px rgba(11, 16, 32, 0.18);
}

.mailcard__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--dark-mute);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dark-line);
}

.mailcard__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  flex: 0 0 auto;
}

.mailcard__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.mailcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* wraps on its own below ~360px instead of needing a breakpoint */
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 0;
}

.mailcard__row + .mailcard__row {
  border-top: 1px solid var(--dark-line);
}

.mailcard__addr {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: clamp(16px, 3.6vw, 22px);
  letter-spacing: -0.015em;
  color: var(--dark-text);
  overflow-wrap: anywhere;
  user-select: all;
}

.mailcard__copy {
  flex: 0 0 auto;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--control);
  background: transparent;
  border: 1px solid var(--dark-line);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mailcard__copy:hover {
  border-color: var(--control);
  background: rgba(122, 167, 255, 0.1);
}

.mailcard__copy.is-done {
  color: var(--signal);
  border-color: var(--signal);
  background: rgba(70, 230, 176, 0.1);
}

.mailcard__note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--dark-line);
  font-size: 13px;
  color: var(--dark-mute);
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 44px 0;
  background: var(--canvas);
}

.footer__inner {
  display: grid;
  gap: 14px;
}

.footer__mark {
  height: 34px;
  width: auto;
}

.footer__line {
  max-width: 76ch;
  font-size: 14px;
  color: var(--mute);
}

.footer__meta {
  font-size: 13.5px;
  color: var(--mute);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
}

@media (max-width: 900px) {
  .grid--3,
  .arch__steps,
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* two per row: only the left cell of each pair still points somewhere */
  .arch__steps .arch__step:nth-child(even)::after {
    content: none;
  }

  .topbar__nav {
    display: none;
  }

  .topbar__inner {
    justify-content: space-between;
  }
}

@media (max-width: 620px) {
  .section {
    padding: 64px 0;
  }

  .hero {
    padding: 72px 0 64px;
  }

  .grid--2,
  .grid--3,
  .arch__steps,
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .arch__step::after {
    content: none;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .mailcard {
    padding: 18px 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}