:root {
  --bp-dark: #1b1f24;
  --bp-accent: #ffc107;     /* builder yellow */
  --bp-accent-2: #fd7e14;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #212529;
}

main { min-height: 60vh; }

/* Hero */
.hero {
  background: radial-gradient(1200px 400px at 50% -10%, #2c333b 0%, var(--bp-dark) 60%);
  color: #fff;
}
.hero h1 { font-weight: 800; letter-spacing: -0.5px; }
.hero .lead { color: #c9d1d9; }
.hero .accent { color: var(--bp-accent); }

/* Section rhythm */
.section { padding: 4rem 0; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bp-accent-2);
}

/* Cards */
.feature-card { border: 1px solid #e9ecef; border-radius: 0.75rem; height: 100%; transition: box-shadow .15s ease, transform .15s ease; }
.feature-card:hover { box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08); transform: translateY(-2px); }

/* Prompt / snippet blocks */
.code-block {
  position: relative;
  background: #0d1117;
  color: #e6edf3;
  border-radius: .5rem;
  padding: 1rem 1rem .75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.copy-btn {
  position: absolute; top: .5rem; right: .5rem;
  font-size: .72rem;
}

/* Stack badge row */
.stack-badge { font-weight: 600; }

/* HTMX loading indicator */
.htmx-indicator { opacity: 0; transition: opacity .2s ease; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Timeline (journey log) */
.timeline-item { border-left: 3px solid var(--bp-accent); padding-left: 1rem; margin-bottom: 1.5rem; }
.timeline-item .date { font-weight: 700; color: var(--bp-accent-2); }