:root {
  --color-bg: #08090b;
  --color-bg-soft: #0d0f13;
  --color-surface: #111318;
  --color-surface-2: #151821;
  --color-border: #262a33;
  --color-text: #f7f7f8;
  --color-muted: #9aa1ad;
  --color-accent: #f5c542;
  --color-accent-ink: #151100;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-soft: 0 24px 70px rgba(0, 0, 0, .38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: #ffe082; }

.site-header {
  background: rgba(8, 9, 11, .92);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
}

.brand-mark { display: inline-flex; align-items: center; gap: .6rem; font-weight: 750; letter-spacing: -.02em; }
.brand-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-accent);
  font-weight: 800;
}

.navbar-dark .navbar-nav .nav-link { color: var(--color-muted); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active { color: var(--color-text); }
.navbar-toggler { border-color: var(--color-border); border-radius: var(--radius-sm); }

.btn { border-radius: var(--radius-sm); font-weight: 700; letter-spacing: -.01em; }
.btn-lg { padding: .85rem 1.15rem; font-size: 1rem; }
.btn-accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn-accent:hover, .btn-accent:focus { background: #ffd75d; border-color: #ffd75d; color: var(--color-accent-ink); }
.btn-outline-light { border-color: var(--color-border); color: var(--color-text); }
.btn-outline-light:hover { background: var(--color-surface-2); border-color: #3a4050; color: var(--color-text); }

.hero-section { padding: 96px 0 56px; border-bottom: 1px solid var(--color-border); }
.eyebrow {
  margin-bottom: .75rem;
  color: var(--color-accent);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h1, .page-title { font-size: clamp(2.15rem, 6vw, 4.75rem); line-height: .96; letter-spacing: -.07em; margin: 0 0 1rem; }
h2 { letter-spacing: -.04em; }
.hero-copy, .muted-copy { color: var(--color-muted); max-width: 690px; }
.hero-copy { font-size: 1.1rem; }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-width: 560px;
  background: var(--color-border);
}
.metric-strip div { background: var(--color-surface); padding: 1rem; }
.metric-strip dt { color: var(--color-text); font-size: 1.35rem; font-weight: 800; }
.metric-strip dd { color: var(--color-muted); margin: 0; font-size: .84rem; }

.status-card, .info-card, .answer-panel, .history-card, .chat-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.status-card { padding: 1.25rem; }
.panel-label { display: block; color: var(--color-muted); font-size: .78rem; margin-bottom: .25rem; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(245,197,66,.13); }
.feature-checklist { list-style: none; padding: 0; margin: 1rem 0; }
.feature-checklist li { padding: .7rem 0 .7rem 1.65rem; border-top: 1px solid var(--color-border); color: var(--color-muted); position: relative; }
.feature-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: 900; }
.card-link { display: inline-flex; font-weight: 700; }

.section-block { padding: 72px 0; }
.border-top-subtle { border-top: 1px solid var(--color-border); }
.section-heading { max-width: 720px; margin-bottom: 1.4rem; }
.section-heading h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.info-card { padding: 1.1rem; box-shadow: none; }
.info-kicker { color: var(--color-text); font-weight: 800; display: block; margin-bottom: .65rem; }
.info-card p { color: var(--color-muted); margin: 0; }

.guide-list { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.guide-list div { display: grid; gap: .3rem; padding: 1rem; border-bottom: 1px solid var(--color-border); }
.guide-list div:last-child { border-bottom: 0; }
.guide-list span { color: var(--color-muted); }

.chat-form { padding: 1rem; box-shadow: none; }
.form-control {
  background: #0b0d11;
  border-color: var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius-sm);
}
.form-control:focus { background: #0b0d11; border-color: var(--color-accent); color: var(--color-text); box-shadow: 0 0 0 .2rem rgba(245,197,66,.14); }
.form-label { color: var(--color-text); font-weight: 650; }
.form-text, small, .text-secondary { color: var(--color-muted) !important; }

.compact-alert { border-radius: var(--radius-md); border-width: 1px; }
.alert-success { background: rgba(40, 167, 69, .12); border-color: rgba(40, 167, 69, .28); color: #d5ffe2; }
.alert-danger { background: rgba(220, 53, 69, .12); border-color: rgba(220, 53, 69, .28); color: #ffd8dd; }
.answer-panel { padding: 1.2rem; }
.empty-panel { background: var(--color-bg-soft); box-shadow: none; }
.intent-pill { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 999px; padding: .28rem .65rem; color: var(--color-accent); font-size: .78rem; font-weight: 800; }
.history-card { padding: 1rem; box-shadow: none; }
.history-list { border-radius: var(--radius-md); overflow: hidden; }
.history-list .list-group-item { background: transparent; border-color: var(--color-border); color: var(--color-text); padding: 1rem 0; }
.history-list .list-group-item:hover { background: var(--color-surface-2); }
.history-list span { color: var(--color-muted); display: block; margin-top: .25rem; }
.empty-state { color: var(--color-muted); padding: 1rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.narrow-container { max-width: 820px; }

.site-footer { padding: 28px 0; border-top: 1px solid var(--color-border); color: var(--color-muted); background: #07080a; font-size: .9rem; }
.site-footer a { color: var(--color-muted); }
.site-footer a:hover { color: var(--color-accent); }

@media (max-width: 767px) {
  .hero-section { padding: 56px 0 40px; }
  .section-block { padding: 48px 0; }
  .metric-strip { grid-template-columns: 1fr; }
}