/* HerdrGUI homepage. Flat: no shadows, no gradients, no blur. Depth is the gray ramp only. */

:root {
  --accent: #8b7cf6;
  --brand: #5b35d5;
  --on-accent: #0d0d0d;
  --background: #060606;
  --shell: #0d0d0d;
  --card: #0e0e0e;
  --raised: #343438;
  --text: #e8e8ea;
  --muted: #a9a9ae;
  --faint: #85858a;
  --line: rgba(255, 255, 255, 0.09);
  --ok: #34d399;
  --wait: #facc15;
  --err: #f87171;
  --radius: 12px;
  --font: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

:root[data-theme="light"] {
  --accent: #5b43e8;
  --on-accent: #ffffff;
  --background: #ffffff;
  --shell: #f3f3f5;
  --card: #ffffff;
  --raised: #ededf0;
  --text: #303035;
  --muted: #62626a;
  --faint: #797981;
  --line: rgba(0, 0, 0, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.faint { color: var(--faint); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap.wide { max-width: 1360px; }

/* Topbar */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--background); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 1360px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: 20px; margin: 0 auto; }
.nav a { color: var(--muted); font-size: 14px; }
.nav a:hover { color: var(--text); text-decoration: none; }
.links { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.links a { color: var(--muted); }
.links a:hover { color: var(--text); text-decoration: none; }
.chip { background: var(--raised); color: var(--text) !important; padding: 2px 9px; border-radius: 999px; font-family: var(--mono); font-size: 12px; }
.toggle { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.toggle:hover { background: var(--raised); color: var(--text); }

/* Hero */
.hero { padding: 88px 0 72px; }
.eyebrow { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
h1 { margin: 0; font-size: clamp(34px, 6vw, 60px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; }
.brand-word { color: var(--accent); }
.lede { max-width: 680px; margin: 24px 0 0; color: var(--muted); font-size: 18px; }
.cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line); color: var(--text); font-weight: 550; font-size: 15px; }
.btn:hover { background: var(--raised); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.08); }
.note { max-width: 680px; margin: 16px 0 0; color: var(--faint); font-size: 14px; }
.note strong { color: var(--muted); font-weight: 600; }

/* Screenshot frames */
.shot { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.shot img { width: 100%; height: auto; }
.hero-shot { margin-top: 56px; }
.shot.flush { border-radius: 8px; }
.placeholder { display: grid; place-items: center; min-height: 380px; border-style: dashed; color: var(--faint); text-align: center; }
.placeholder.tall { min-height: 260px; }
.hero-shot.placeholder { min-height: 480px; }
.placeholder span { font-weight: 600; color: var(--muted); }
.placeholder small { display: block; margin-top: 6px; font-weight: 400; color: var(--faint); }

/* Sections */
section { padding: 72px 0; }
.band { background: var(--shell); }
h2 { margin: 0; font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -0.02em; line-height: 1.15; }
h3 { margin: 44px 0 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 600; }
h4 { margin: 0 0 6px; font-size: 16px; }
.sub { max-width: 680px; margin: 12px 0 0; color: var(--muted); font-size: 17px; }
.meta { color: var(--faint); font-size: 13px; margin: 10px 0 0; }

/* Comparison */
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: start; margin-top: 40px; }
.pane { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; min-width: 0; }
.pane-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.cells { margin: 0; background: var(--background); border: 1px solid var(--line); border-radius: 8px; padding: 14px; font: 12.5px/1.55 var(--mono); color: var(--muted); overflow-x: auto; min-height: 220px; }
.cap { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.arrow { align-self: center; color: var(--accent); font-size: 26px; }
.points { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 10px; color: var(--muted); }
.points li { display: flex; align-items: center; gap: 10px; }
.dot { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.dot.ok { background: var(--ok); }
.dot.wait { background: var(--wait); }
.dot.err { background: var(--err); }

/* Cards */
.grid { display: grid; gap: 14px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.card:hover { background: var(--raised); }

/* Refinement walk */
.walk { list-style: none; counter-reset: step; margin: 40px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.walk li { counter-increment: step; display: grid; grid-template-columns: 56px 160px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.walk li::before { content: counter(step, decimal-leading-zero); color: var(--accent); font: 13px var(--mono); }
.walk h4 { margin: 0; }
.walk p { margin: 0; color: var(--muted); }

/* Roadmap */
.two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.table th { width: 38%; font-weight: 600; }
.table td { color: var(--muted); }
.plain { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 8px; }
.plain li::marker { color: var(--faint); }

/* Spec strip */
.spec { padding: 40px 0; }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.big { display: block; font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
.small { color: var(--muted); font-size: 14px; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 36px 0 56px; color: var(--muted); font-size: 14px; }
.foot-in p { margin: 10px 0 0; }
.small-brand { font-size: 15px; }

@media (max-width: 880px) {
  .nav { display: none; }
  .links a:not(.chip) { display: none; }
  .topbar-in { justify-content: space-between; }
  .compare { grid-template-columns: 1fr; }
  .arrow { transform: rotate(90deg); justify-self: center; }
  .grid.three, .grid.four, .two, .strip { grid-template-columns: 1fr 1fr; }
  .two { grid-template-columns: 1fr; }
  .walk li { grid-template-columns: 40px 1fr; }
  .walk li p { grid-column: 2; }
}
@media (max-width: 560px) {
  .grid.three, .grid.four, .strip { grid-template-columns: 1fr; }
  .hero { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Comparison table: words | Herdr shot | HerdrGUI shot */
.cmp { width: 100%; margin-top: 40px; border-collapse: separate; border-spacing: 0 14px; table-layout: fixed; }
.cmp thead th { text-align: left; padding: 0 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 600; }
.cmp thead th:nth-child(2), .cmp thead th:nth-child(3) { padding-left: 14px; }
.cmp thead th:nth-child(1) { width: 30%; }
.cmp tbody th, .cmp tbody td { vertical-align: top; }
.cmp tbody th { text-align: left; padding: 6px 20px 0 4px; font-weight: 400; }
.cmp tbody td { padding: 0 0 0 14px; }
.what { display: block; font-size: 16px; font-weight: 650; color: var(--text); }
.why { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.shot.blank { min-height: 220px; border-style: dashed; background: var(--card); }
@media (max-width: 880px) {
  .cmp, .cmp thead, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp thead { display: none; }
  .cmp tbody tr { margin-bottom: 28px; }
  .cmp tbody th { padding: 0 0 10px; }
  .cmp tbody td { padding: 0 0 10px; }
}

/* Icon links in the top bar */
.icon-link { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--muted) !important; }
.icon-link:hover { background: var(--raised); color: var(--text) !important; text-decoration: none; }
.icon-link img { border-radius: 5px; }

/* Hero: the turning logo on the left, wide text on the right */
.hero-grid { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 64px; align-items: start; }
.logo-stage { display: grid; place-items: center; padding-top: 24px; }
.logo-spin { width: min(100%, 260px); height: auto; border-radius: 22%; }
.hero-text .lede { max-width: 860px; }
.hero-text .note { max-width: 860px; }
.hero-shot { margin-top: 64px; }
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .logo-stage { justify-items: start; padding-top: 0; }
  .logo-spin { width: 96px; }
}

/* Bigger comparison shots */
.cmp thead th:nth-child(1) { width: 22%; }
.shot.blank { min-height: 0; aspect-ratio: 16 / 10; }

/* Five main features, text beside a shot, alternating */
.features { display: grid; gap: 72px; margin-top: 48px; }
.feature { display: grid; grid-template-columns: minmax(280px, 0.8fr) 1.4fr; gap: 56px; align-items: center; }
.feature:nth-child(even) .feature-text { order: 2; }
.feature-text h3 { margin: 6px 0 12px; text-transform: none; letter-spacing: -0.01em; font-size: 24px; color: var(--text); font-weight: 650; }
.feature-text p { margin: 0; color: var(--muted); font-size: 16.5px; }
.feature-text .meta { margin-top: 12px; }
.num { font: 13px var(--mono); color: var(--accent); }
.more { margin: 56px 0 0; }
.group { margin-top: 44px; }
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; gap: 20px; }
  .feature:nth-child(even) .feature-text { order: 0; }
}

/* No one-word last lines ("in.") */
.sub, .lede, .note, .feature-text p, .why, .card p { text-wrap: pretty; }
.sub { max-width: 760px; text-wrap: balance; }

/* Spec strip below the first shot */
.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 56px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hint { margin: 14px 0 0; color: var(--faint); font-size: 14px; }
.hint::before { content: "on demand"; margin-right: 10px; padding: 1px 8px; border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 12px; }
.hint { text-wrap: pretty; }
@media (max-width: 880px) { .strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .strip { grid-template-columns: 1fr; } }

/* Zeron and Rust, said out loud */
.rust { color: var(--accent); font-weight: 700; }
.built { max-width: 860px; margin: 18px 0 0; color: var(--muted); font-size: 17px; text-wrap: pretty; }
.built a { font-weight: 600; }

/* Theme-matched screenshots: each figure carries both variants. */
:root[data-theme="light"] .shot img.d { display: none; }
:root[data-theme="dark"] .shot img.l { display: none; }

/* Screenshots of the real app (tools/shots): shown at their own size at most, centred in the frame
   and never stretched. A comparison row is cut to one pixel size for both faces, so the two
   come out the same size whatever the column width. The hero is the whole window, full width. */
.shot { display: grid; place-items: center; }
.shot img { display: block; width: auto; max-width: 100%; height: auto; }
.hero-shot img { width: 100%; }