/* SEO Injector — brand layer on top of Bootstrap 5 */
:root {
  --si-forest: #047857;
  --si-forest-700: #036249;
  --si-teal: #0f766e;
  --si-mint: #10b981;
  --si-bg: #ffffff;
  --si-surface: #f8fafc;
  --si-border: #e2e8f0;
  --si-ink: #0f172a;
  --si-muted: #475569;
  --si-radius: 8px;
  --si-shadow: 0 2px 4px rgba(4, 120, 87, 0.2);
  --si-shadow-lg: 0 10px 40px -10px rgba(16, 185, 129, 0.4);
}

html, body {
  background: var(--si-bg);
  color: var(--si-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Bootstrap brand overrides */
.btn-primary {
  --bs-btn-bg: var(--si-forest);
  --bs-btn-border-color: var(--si-forest);
  --bs-btn-hover-bg: var(--si-forest-700);
  --bs-btn-hover-border-color: var(--si-forest-700);
  --bs-btn-active-bg: var(--si-forest-700);
  --bs-btn-active-border-color: var(--si-forest-700);
  --bs-btn-focus-shadow-rgb: 4,120,87;
  border-radius: var(--si-radius);
  font-weight: 600;
  box-shadow: var(--si-shadow);
}

.btn-outline-primary {
  --bs-btn-color: var(--si-forest);
  --bs-btn-border-color: var(--si-forest);
  --bs-btn-hover-bg: var(--si-forest);
  --bs-btn-hover-border-color: var(--si-forest);
  --bs-btn-active-bg: var(--si-forest);
  border-radius: var(--si-radius);
  font-weight: 600;
}

a { color: var(--si-forest); text-decoration: none; }
a:hover { color: var(--si-forest-700); text-decoration: underline; }

.text-primary { color: var(--si-forest) !important; }
.bg-primary { background-color: var(--si-forest) !important; }
.text-muted { color: var(--si-muted) !important; }
.border { border-color: var(--si-border) !important; }

/* Display headings */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 800; }

.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--si-forest);
}

/* Navbar */
.si-nav {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--si-border);
}
.si-nav .nav-link { color: var(--si-muted); font-weight: 500; }
.si-nav .nav-link:hover { color: var(--si-ink); }

.logo-mark {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--si-radius);
  background: var(--si-forest);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.85rem;
}
.logo-word { font-weight: 800; letter-spacing: -0.02em; }
.logo-dot { color: var(--si-forest); }

/* Hero */
.si-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--si-border);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(16, 185, 129, 0.14), transparent 70%),
    var(--si-bg);
}
.si-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--si-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--si-border) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 70%);
          mask-image: radial-gradient(ellipse at center, black, transparent 70%);
  opacity: .55;
  pointer-events: none;
}
.si-hero .container { position: relative; }

.italic-accent { font-style: italic; color: var(--si-forest); font-family: 'Lora', Georgia, serif; }

/* Cards */
.si-card {
  border: 1px solid var(--si-border);
  border-radius: 14px;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.si-card:hover { border-color: rgba(4,120,87,.35); box-shadow: var(--si-shadow-lg); }

.icon-badge {
  width: 40px; height: 40px;
  border-radius: var(--si-radius);
  display: grid; place-items: center;
  background: rgba(4,120,87,.08);
  color: var(--si-forest);
  font-size: 1.1rem;
}

/* Pricing highlight */
.pricing-highlight {
  border-color: rgba(4,120,87,.4) !important;
  box-shadow: var(--si-shadow-lg);
  position: relative;
}
.pricing-badge {
  position: absolute; top: -12px; left: 24px;
  background: var(--si-forest); color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: .18em;
  padding: 4px 10px; border-radius: 999px;
}

/* Stack chips */
.stack-row { display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; justify-content:center; }
.stack-row span {
  font-weight: 700; letter-spacing: -0.01em;
  color: #94a3b8; font-size: 1.25rem;
  transition: color .2s;
}
.stack-row span:hover { color: var(--si-ink); }

/* Code blocks */
pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1rem 1.25rem;
  border-radius: var(--si-radius);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  overflow-x: auto;
}
code { font-family: 'JetBrains Mono', monospace; }
:not(pre) > code {
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--si-forest);
}

/* Footer */
.si-footer { background: var(--si-surface); border-top: 1px solid var(--si-border); }
.si-footer h6 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--si-ink);
}
.si-footer ul a { color: var(--si-muted); }
.si-footer ul a:hover { color: var(--si-ink); text-decoration: none; }

/* Docs layout */
.docs-shell { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; }
@media (max-width: 900px) { .docs-shell { grid-template-columns: 1fr; } }
.docs-sidebar {
  position: sticky; top: 100px; align-self: start;
  border-right: 1px solid var(--si-border); padding-right: 1.5rem;
}
.docs-sidebar h6 {
  font-family:'JetBrains Mono', monospace; font-size:.7rem;
  text-transform: uppercase; letter-spacing:.18em; color: var(--si-muted);
  margin-top: 1.5rem;
}
.docs-sidebar a {
  display:block; padding: .35rem 0; color: var(--si-muted); font-size:.92rem;
}
.docs-sidebar a:hover { color: var(--si-ink); text-decoration:none; }
.docs-sidebar a.active { color: var(--si-forest); font-weight: 600; }

.prose h1 { font-size: 2.4rem; margin-bottom: 1rem; }
.prose h2 { font-size: 1.6rem; margin-top: 2.5rem; margin-bottom: .75rem; }
.prose h3 { font-size: 1.2rem; margin-top: 2rem; margin-bottom: .5rem; }
.prose p, .prose li { color: #334155; line-height: 1.7; }
.prose ul { padding-left: 1.25rem; }
.prose hr { border-color: var(--si-border); margin: 2.5rem 0; }

.section { padding: 5rem 0; border-bottom: 1px solid var(--si-border); }
.section-tight { padding: 3rem 0; border-bottom: 1px solid var(--si-border); }