/* ============================================================
   ttperf landing page
   Identity: a measurement instrument for a CLI.
   Display face is monospace (the tool's own type); accent amber
   is reserved for the nanosecond readout — boldness spent once.
   ============================================================ */

:root {
  --ink:        #0B0E11;   /* cool near-black background */
  --ink-2:      #11161B;   /* raised surfaces */
  --ink-3:      #161D24;   /* chips, inputs */
  --line:       #232C35;   /* hairlines */
  --line-2:     #2E3A45;
  --fg:         #E6EDF3;   /* primary text */
  --fg-dim:     #93A1AF;   /* secondary text */
  --fg-faint:   #5C6B79;   /* tertiary / captions */
  --amber:      #FFC061;   /* THE accent — measurement readout only */
  --amber-deep: #E8A33D;
  --blue:       #6BA8FF;   /* links only */
  --pass:       #5CD68A;   /* PASSED status */
  --radius:     10px;
  --maxw:       1120px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* faint instrument grid, like profiler graph paper */
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  background-position: -1px -1px;
  background-attachment: fixed;
}
/* dim the grid so it reads as texture, not content */
body::before {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(120% 80% at 70% -10%, transparent 0%, var(--ink) 70%);
  pointer-events: none; z-index: -1;
}

code { font-family: var(--mono); font-size: 0.92em; }
strong, b { color: var(--fg); font-weight: 600; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

.visually-hidden, .skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto;
  clip: auto; z-index: 100; background: var(--amber); color: var(--ink);
  padding: 10px 16px; border-radius: 8px; font-family: var(--mono); font-weight: 600;
}

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

/* ---------------------------- top bar ---------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-family: var(--mono); font-weight: 700; font-size: 19px;
  color: var(--fg); letter-spacing: -0.01em;
}
.wordmark:hover { text-decoration: none; }
.wordmark-prompt { color: var(--amber); margin-right: 2px; }
.topnav { display: flex; gap: 26px; align-items: center; font-family: var(--mono); font-size: 14.5px; }
.topnav a { color: var(--fg-dim); }
.topnav a:hover { color: var(--fg); text-decoration: none; }
.topnav-gh {
  border: 1px solid var(--line-2); padding: 6px 14px; border-radius: 8px;
  color: var(--fg) !important;
}
.topnav-gh:hover { border-color: var(--amber); }

/* ---------------------------- hero ---------------------------- */
.hero {
  max-width: var(--maxw); margin: 0 auto; padding: 88px 28px 72px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.eyebrow {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-faint); margin: 0 0 18px;
}
#hero-title {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(34px, 5.2vw, 62px); line-height: 1.04;
  letter-spacing: -0.03em; margin: 0 0 22px; color: var(--fg);
}
#hero-title .accent { color: var(--amber); }
.lede { font-size: 18.5px; color: var(--fg-dim); margin: 0 0 30px; max-width: 46ch; }
.lede code { color: var(--amber); }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  border-radius: var(--radius); padding: 13px 18px; cursor: pointer;
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: 12px;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--amber); color: #1a1205; border-color: var(--amber); }
.btn-primary:hover { background: var(--amber-deep); }
.btn-primary .btn-copy {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  background: rgba(0,0,0,.18); padding: 3px 8px; border-radius: 6px;
}
.btn-primary::before { content: "$"; opacity: .55; font-weight: 700; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--fg-dim); text-decoration: none; }

.hero-meta {
  list-style: none; display: flex; gap: 28px; padding: 30px 0 0; margin: 0;
  font-family: var(--mono); font-size: 14px; color: var(--fg-faint);
}
.hero-meta b { color: var(--amber); font-weight: 700; }

/* ---------------------------- terminal (signature) ---------------------------- */
.terminal {
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 14px;
  overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,192,97,.04);
  font-family: var(--mono);
}
.terminal-bar {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: #0d1318; border-bottom: 1px solid var(--line);
}
.terminal-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.terminal-bar .dot:nth-child(1) { background: #E5685C; }
.terminal-bar .dot:nth-child(2) { background: #E0B341; }
.terminal-bar .dot:nth-child(3) { background: #5CB85C; }
.terminal-title { margin-left: 10px; font-size: 12.5px; color: var(--fg-faint); }
.terminal-body { padding: 20px 20px 22px; font-size: 14.5px; line-height: 1.7; min-height: 360px; }
.prompt { color: var(--pass); margin-right: 8px; font-weight: 600; }
.typed { color: var(--fg); white-space: pre; }
.cursor { color: var(--amber); animation: blink 1.05s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.term-out { margin-top: 8px; }
.term-out .ln { color: var(--fg-dim); white-space: pre-wrap; }
.term-out .ln.dim { color: var(--fg-faint); }
.term-out .rule { color: var(--line-2); }
.term-out .hl { color: var(--amber); }
.term-out .pass { color: var(--pass); font-weight: 600; }
.term-out .readout { color: var(--fg); margin: 2px 0; }
.ns {
  color: var(--amber); font-weight: 700; font-size: 1.05em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(255,192,97,.35);
}
/* line-by-line reveal */
.term-out .ln { opacity: 0; transform: translateY(2px); }
.term-out.play .ln { animation: lineIn .26s ease forwards; }
@keyframes lineIn { to { opacity: 1; transform: none; } }

/* ---------------------------- bands & section titles ---------------------------- */
.band { position: relative; padding: 84px 0; border-top: 1px solid var(--line); }
.band-alt { background: color-mix(in srgb, var(--ink-2) 60%, transparent); }
.section-title {
  font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(24px, 3vw, 34px); margin: 0 0 36px; color: var(--fg);
}

/* ns-axis tick: structural device that says "this is a time axis" */
.tick {
  position: absolute; top: -1px; left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--line-2);
}
.tick-ns {
  position: absolute; top: -10px; left: 28px;
  background: var(--ink); padding: 0 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--amber-deep);
}
.band-alt .tick-ns { background: #0e1318; }

/* ---------------------------- before / after ---------------------------- */
.beforeafter { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; }
.ba-col { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; }
.ba-before { border-style: dashed; }
.ba-after { border-color: var(--amber-deep); box-shadow: 0 0 0 1px rgba(255,192,97,.12); }
.ba-label { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); margin: 0 0 16px; }
.ba-steps { margin: 0; padding-left: 20px; color: var(--fg-dim); font-size: 15.5px; }
.ba-steps li { margin: 9px 0; }
.ba-steps code { color: var(--fg); }
.ba-arrow { font-family: var(--mono); font-size: 28px; color: var(--amber); }
.ba-oneliner {
  font-family: var(--mono); font-size: 19px; color: var(--fg);
  background: var(--ink); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 16px 18px; margin-bottom: 14px;
}
.ba-note { color: var(--fg-dim); font-size: 15px; margin: 0; }

/* ---------------------------- features ---------------------------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; transition: border-color .15s ease, transform .12s ease;
}
.feature:hover { border-color: var(--line-2); transform: translateY(-2px); }
.feature h3 {
  font-family: var(--mono); font-weight: 600; font-size: 16px; margin: 0 0 8px; color: var(--fg);
}
.feature h3::before { content: "// "; color: var(--amber); }
.feature p { margin: 0; color: var(--fg-dim); font-size: 15px; }
.feature code { color: var(--amber); }

/* ---------------------------- pipeline ---------------------------- */
.pipeline { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.pipeline li {
  display: grid; grid-template-columns: 130px 1fr; gap: 22px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.pipeline li:last-child { border-bottom: 0; }
.step-k {
  font-family: var(--mono); font-weight: 600; color: var(--amber); font-size: 15px;
}
.step-k::before { content: "→ "; color: var(--fg-faint); }
.step-v { color: var(--fg-dim); font-size: 16px; }
.step-v code { color: var(--fg); }

/* ---------------------------- operations grid ---------------------------- */
.ops-head { margin-bottom: 26px; }
.ops-sub { color: var(--fg-dim); margin: 0; max-width: 60ch; }
.ops-sub code { color: var(--amber); }

.ops-controls { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.search { flex: 1 1 280px; min-width: 240px; }
#op-search {
  width: 100%; font-family: var(--mono); font-size: 15px; color: var(--fg);
  background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 12px 14px;
}
#op-search::placeholder { color: var(--fg-faint); }
#op-search:focus { outline: none; border-color: var(--amber); }

.op-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.op-filter {
  font-family: var(--mono); font-size: 13px; color: var(--fg-dim); cursor: pointer;
  background: var(--ink-3); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 13px; transition: all .12s ease;
}
.op-filter:hover { border-color: var(--line-2); color: var(--fg); }
.op-filter[aria-pressed="true"] { background: var(--amber); color: #1a1205; border-color: var(--amber); font-weight: 600; }
.op-filter .cnt { opacity: .6; margin-left: 5px; }

.ops-count { font-family: var(--mono); font-size: 13px; color: var(--fg-faint); margin: 0 0 16px; }
.ops-count b { color: var(--amber); }

.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.op-chip {
  font-family: var(--mono); text-align: left; cursor: pointer;
  background: var(--ink-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px; color: var(--fg); transition: all .12s ease; position: relative;
}
.op-chip:hover { border-color: var(--amber); background: #1b232b; }
.op-chip .op-name { font-size: 14px; font-weight: 500; }
.op-chip .op-cat { display: block; font-size: 11px; color: var(--fg-faint); margin-top: 3px; }
.op-chip[data-cat="Backward"] .op-cat { color: #B59BFF; }
.op-chip[data-cat="Binary"]   .op-cat { color: var(--blue); }
.op-chip[data-cat="Unary"]    .op-cat { color: var(--pass); }
.op-chip[data-cat="Reduction"].op-cat,
.op-chip[data-cat="Reduction"] .op-cat { color: var(--amber-deep); }
.op-chip[data-cat="Complex"]  .op-cat { color: #FF8FA3; }
.op-chip[data-cat="Ternary"]  .op-cat { color: #5BD6C8; }
.op-chip::after {
  content: "copy"; position: absolute; top: 10px; right: 11px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-faint); opacity: 0; transition: opacity .12s ease;
}
.op-chip:hover::after { opacity: .7; }
.op-chip.copied { border-color: var(--pass); }
.op-chip.copied::after { content: "copied"; color: var(--pass); opacity: 1; }
.ops-empty { font-family: var(--mono); color: var(--fg-faint); padding: 30px 0; }

/* ---------------------------- install ---------------------------- */
.install-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.install-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.install-k { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint); margin: 0 0 14px; }
.codecopy {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  font-family: var(--mono); text-align: left; cursor: pointer;
  background: var(--ink); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px; color: var(--fg); transition: border-color .12s ease;
}
.codecopy:last-child { margin-bottom: 0; }
.codecopy:hover { border-color: var(--amber); }
.codecopy code { color: var(--fg); }
.codecopy code::before { content: "$ "; color: var(--fg-faint); }
.codecopy .cc { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); }
.codecopy.copied { border-color: var(--pass); }
.codecopy.copied .cc { color: var(--pass); }
.install-note { color: var(--fg-dim); font-size: 14.5px; margin: 0; }
.install-note code { color: var(--amber); }

/* ---------------------------- footer ---------------------------- */
.footer { border-top: 1px solid var(--line); padding: 44px 0; margin-top: 0; }
.footer-wrap { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.footer-tag { color: var(--fg-faint); font-size: 13.5px; margin: 12px 0 0; max-width: 46ch; }
.footer-links { display: flex; gap: 22px; font-family: var(--mono); font-size: 14px; }
.footer-links a { color: var(--fg-dim); }
.footer-links a:hover { color: var(--fg); }

/* ---------------------------- toast ---------------------------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--amber); color: #1a1205; font-family: var(--mono); font-weight: 600;
  font-size: 14px; padding: 11px 18px; border-radius: 9px; z-index: 80;
  opacity: 0; transition: opacity .18s ease, transform .18s ease; pointer-events: none;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,.6);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------- responsive ---------------------------- */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .topnav { gap: 16px; }
  .topnav a:not(.topnav-gh) { display: none; }
  .hero { grid-template-columns: 1fr; padding: 56px 28px 56px; gap: 40px; }
  .terminal-body { min-height: 320px; }
  .beforeafter { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }
  .features { grid-template-columns: 1fr; }
  .pipeline li { grid-template-columns: 1fr; gap: 4px; }
  .install-cards { grid-template-columns: 1fr; }
}

/* ---------------------------- reduced motion ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .cursor { animation: none; }
  .term-out .ln { opacity: 1; transform: none; }
}