/* ---------- base & tokens ---------- */
:root {
    --brand: #0d6efd; /* primary */
    --brand-600: #0b5ed7;
    --ink: #0f172a; /* slate-900-ish */
    --muted: #6b7280; /* slate-500 */
    --bg: #ffffff;
    --bg-soft: #f7f7fb;
    --ring: rgba(13, 110, 253, 0.35);
    --radius: 14px;
    --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-soft: 0 2px 10px rgba(15, 23, 42, 0.06);

    --container: 72rem; /* ~1152px */
}

html {
    scroll-behavior: smooth;
}
body {
    font-size: 18px; /* ↑ readable */
    line-height: 1.75;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: var(--container);
}

.section-padding {
    padding: 4.5rem 0;
}
.hero-section {
    padding: 6rem 0 3.5rem;
}

/* ---------- hero ---------- */
.hero-section {
    background:
        radial-gradient(
            1200px 600px at 50% -200px,
            rgba(13, 110, 253, 0.12),
            transparent 60%
        ),
        linear-gradient(180deg, #fff, var(--bg-soft));
}
.hero-section .display-5 {
    letter-spacing: -0.01em;
}

.hero-section .tagline {
    font-size: 1.1rem; /* ≈ 17–18px */
    font-weight: 500;
    color: #4b5563; /* slightly darker than muted */
}

/* ---------- cards ---------- */
.card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}
.card .card-title {
    font-weight: 700;
}
.card .card-text {
    color: var(--muted);
}

/* ---------- feature icons ---------- */
.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    background: rgba(13, 110, 253, 0.08);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.12);
    font-size: 1.25rem;
}
.feature-icon i {
    line-height: 1;
}

/* ---------- buttons ---------- */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    border-radius: 12px;
    padding: 0.75rem 1.15rem;
    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.25);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: rgba(15, 23, 42, 0.16);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: rgba(15, 23, 42, 0.28);
    border-radius: 12px;
    padding: 0.75rem 1.15rem;
}

/* ---------- typography tweaks ---------- */
.lead {
    color: #374151;
}
h1,
h2,
h3,
h4,
h5 {
    color: var(--ink);
}
h2 {
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* ---------- “supported by” strip ---------- */
section.py-5 {
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ---------- cta band ---------- */
section#cta {
    background:
        radial-gradient(
            800px 400px at 80% -120px,
            rgba(255, 255, 255, 0.12),
            transparent 60%
        ),
        linear-gradient(90deg, #0b5ed7, #084298); /* darker blue tones */
}
section#cta .btn {
    box-shadow: 0 8px 22px rgba(255, 255, 255, 0.25);
}

section#cta,
section#cta h2,
section#cta p,
section#cta .lead {
    color: #fff !important;
}

/* ---------- utilities ---------- */
img {
    max-width: 100%;
    height: auto;
}
.shadow-sm {
    box-shadow: var(--shadow) !important;
}
.text-muted {
    color: var(--muted) !important;
}

/* focus rings for a11y */
a:focus,
button:focus,
.btn:focus,
[href]:focus {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
}

/* ---------- blog hero ---------- */
.blog-hero {
    padding-top: 4rem;
    padding-bottom: 2rem;
    background:
        radial-gradient(
            900px 420px at 20% -160px,
            rgba(13, 110, 253, 0.1),
            transparent 55%
        ),
        linear-gradient(180deg, #fff, var(--bg-soft));
}

/* ---------- blog cards (index) ---------- */
.blog-card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--radius);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
    box-shadow: var(--shadow-soft);
    background: #fff;
}
.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: rgba(15, 23, 42, 0.12);
}
.blog-card .blog-date {
    font-size: 0.9rem;
    color: var(--muted);
}
.blog-card .blog-title {
    margin: 0.25rem 0 0.5rem;
}
.blog-card .blog-excerpt {
    color: #4b5563;
}

/* ---------- blog article (post) ---------- */
.blog-article .post-meta {
    font-size: 0.95rem;
}

/* ---------- typographic 'prose' for post bodies ---------- */
.prose {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.8;
}
.prose p {
    margin: 0 0 1.1rem;
}
.prose h2,
.prose h3,
.prose h4 {
    margin-top: 2.2rem;
    margin-bottom: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.prose h2 {
    font-size: 1.6rem;
}
.prose h3 {
    font-size: 1.35rem;
}
.prose h4 {
    font-size: 1.15rem;
}

.prose ul,
.prose ol {
    padding-left: 1.25rem;
    margin: 0 0 1.2rem;
}
.prose li {
    margin: 0.3rem 0;
}
.prose a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose blockquote {
    border-left: 4px solid rgba(13, 110, 253, 0.35);
    padding: 0.6rem 1rem;
    margin: 1.5rem 0;
    color: #374151;
    background: rgba(13, 110, 253, 0.04);
    border-radius: 6px;
}
.prose code {
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
        monospace;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 6px;
    padding: 0.15rem 0.35rem;
    font-size: 0.95em;
}
.prose pre code {
    display: block;
    padding: 1rem;
    border-radius: 10px;
    overflow-x: auto;
}
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.95rem;
}
.prose th,
.prose td {
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 0.6rem 0.75rem;
}
.prose th {
    background: rgba(15, 23, 42, 0.04);
    font-weight: 600;
}
.prose img {
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    margin: 1rem 0;
}

/* small screens */
@media (max-width: 576px) {
    .prose {
        font-size: 17px;
        line-height: 1.75;
    }
}

/* ----- blog article body ----- */
.blog-article {
    margin-bottom: 3rem;
}

/* Contain the prose text */
.blog-article .prose {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem 2rem; /* breathing room inside */
    box-shadow: var(--shadow-soft);
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
    max-width: 65ch; /* keep line length readable */
    margin-left: auto;
    margin-right: auto;
}

/* -- BLOG POST BODY CONTAINER -- */
.post-body {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    max-width: 75ch; /* or drop entirely */
    margin: 1.5rem 0 2.5rem 0;
}

.post-body p {
    margin: 0 0 1.1rem;
}
.post-body h2,
.post-body h3,
.post-body h4 {
    margin-top: 2.2rem;
    margin-bottom: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.post-body h2 {
    font-size: 1.6rem;
}
.post-body h3 {
    font-size: 1.35rem;
}
.post-body h4 {
    font-size: 1.15rem;
}
.post-body ul,
.post-body ol {
    padding-left: 1.25rem;
    margin: 0 0 1.2rem;
}
.post-body li {
    margin: 0.3rem 0;
}
.post-body a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.post-body blockquote {
    border-left: 4px solid rgba(13, 110, 253, 0.35);
    padding: 0.6rem 1rem;
    margin: 1.5rem 0;
    color: #374151;
    background: rgba(13, 110, 253, 0.04);
    border-radius: 6px;
}
.post-body code {
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
        monospace;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 6px;
    padding: 0.15rem 0.35rem;
    font-size: 0.95em;
}
.post-body pre code {
    display: block;
    padding: 1rem;
    border-radius: 10px;
    overflow-x: auto;
}
.post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.95rem;
}
.post-body th,
.post-body td {
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 0.6rem 0.75rem;
}
.post-body th {
    background: rgba(15, 23, 42, 0.04);
    font-weight: 600;
}
.post-body img {
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    margin: 1rem 0;
}

@media (max-width: 576px) {
    .post-body {
        font-size: 17px;
        line-height: 1.75;
        padding: 1.75rem 1.25rem;
    }
}