/* rust-app.com
   Tokens are lifted directly from the Craft Bind Maker's own theme.rs, so the
   site and the tool are visibly one product rather than a marketing wrapper
   around something that looks different.

   Theme is dark-locked on purpose: the tool itself is dark-only (it matches the
   game's UI), and a light landing page handing off to a dark app reads as two
   different products. */

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #12100e;
  --bg-panel: #1b1815;
  --bg-panel-hi: #232019;
  --bg-input: #0e0c0b;

  --line: #2e2a25;
  --line-strong: #3d3730;

  --text: #efe9e2;
  --text-dim: #9c9188;
  --text-faint: #6b625a;

  --accent: #d45a28;
  --accent-hover: #e86b34;
  --accent-press: #b84a1e;
  --accent-soft: rgba(212, 90, 40, 0.13);

  /* One radius system: 6px controls, 12px surfaces. Nothing else. */
  --r-ctl: 6px;
  --r-surface: 12px;

  --shell: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- nav: one line, 64px ---------- */

.nav {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(18, 16, 14, 0.86);
  backdrop-filter: blur(10px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  font-size: 15px;
}

.wordmark .mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--accent);
  display: grid;
  place-items: center;
  color: #fff6f1;
  font-size: 12px;
  font-weight: 700;
  font-family: "Geist Mono", ui-monospace, monospace;
}

.nav-spacer { flex: 1; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 11px 18px;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
    transform 0.1s var(--ease), color 0.15s var(--ease);
}

.btn-primary {
  background: var(--accent);
  color: #fff6f1;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-dim);
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-faint); background: var(--bg-panel-hi); }
.btn-ghost:active { transform: translateY(1px); }

.btn-sm { padding: 8px 14px; font-size: 14px; }

.arrow {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-top: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s var(--ease);
  flex: none;
}
.btn:hover .arrow { transform: rotate(45deg) translate(2px, -2px); }

:where(a, button):focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
  border-radius: var(--r-ctl);
}

/* ---------- hero: asymmetric split ---------- */

.hero {
  padding-top: 72px;
  padding-bottom: 64px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}

h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4.6vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 600;
}

h1 .muted { color: var(--text-dim); }

/* The tool panel: the one thing this page exists to get people into. */
.tool-panel {
  margin-top: 32px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  padding: 20px;
  display: grid;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s var(--ease);
}
.tool-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}
.tool-panel:hover { border-color: var(--line-strong); }

.tool-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.tool-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tool-host {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--text-faint);
}
.tool-desc {
  margin: 0;
  color: var(--text-dim);
  font-size: 14.5px;
  max-width: 48ch;
}
.tool-panel .btn { justify-self: start; }

/* Screenshot: a real capture of the tool, not a mock. */
.shot {
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  overflow: hidden;
  background: var(--bg-panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot-bar {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel-hi);
}
.shot-url {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--text-faint);
  background: var(--bg-input);
  border-radius: 4px;
  padding: 2px 10px;
  border: 1px solid var(--line);
}

/* ---------- stat strip, under the hero ---------- */

.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.stats ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  color: var(--text-dim);
  font-size: 14px;
}
.stats b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- output section ---------- */

section { padding: 84px 0; }

h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.output {
  margin-top: 34px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  padding: 22px 24px;
  overflow-x: auto;
}
.output code {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}
.t-cmd { color: var(--accent); }
.t-key { color: var(--accent-hover); }
.t-verb { color: var(--text); }
.t-arg { color: var(--text-dim); }
.t-sep { color: var(--text-faint); }

.output-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--text-faint);
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
  color: var(--text-faint);
  font-size: 13.5px;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
footer p { margin: 0 0 6px; max-width: 56ch; }
footer a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: var(--text); }

/* ---------- motion ----------
   There are no entrance animations on this page, on purpose.

   The first draft faded the hero in from opacity 0. That delays LCP on the
   largest text and, worse, means any condition where the animation does not
   complete leaves the hero blank. A page whose entire message can fail to
   appear is not worth a 0.5s flourish.

   Motion here is limited to hover and press feedback, which acknowledges a
   user action and cannot hide content. Those live on the components above. */

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero { padding-top: 44px; padding-bottom: 44px; }
  section { padding: 60px 0; }
  .shot { order: 2; }
}

@media (max-width: 560px) {
  .shell { padding-inline: 18px; }
  .stats ul { gap: 10px 26px; font-size: 13.5px; }
  .output { padding: 18px 16px; }
  .output code { font-size: 12.5px; }
}