/* edwin.chat marketing site — brand variables mirror the console
   (app/views/layout/header.php). Keep these in sync if the console palette
   changes. No console layout is imported; this file is self-contained. */

:root {
    --edwin-accent: #2563eb;
    --edwin-accent-dark: #1d4ed8;
    --edwin-accent-tint: #eff6ff;
    --edwin-sidebar: #1e293b;
    /* Re-point Bootstrap's primary at the brand blue. */
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color-rgb: 29, 78, 216;
}

.btn-primary {
    --bs-btn-bg: #2563eb; --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1d4ed8;
    --bs-btn-active-bg: #1e40af; --bs-btn-active-border-color: #1e40af;
    --bs-btn-disabled-bg: #2563eb; --bs-btn-disabled-border-color: #2563eb;
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-outline-primary {
    --bs-btn-color: #2563eb; --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #2563eb; --bs-btn-hover-border-color: #2563eb;
    --bs-btn-active-bg: #1e40af; --bs-btn-active-border-color: #1e40af;
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
}

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

/* Smooth in-page anchor scrolling, offset for the sticky navbar. */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 70px; }

/* --- Navbar --------------------------------------------------------------- */
.site-nav {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.site-nav .navbar-brand {
    font-weight: 700;
    color: var(--edwin-sidebar);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.site-nav .navbar-brand img { border-radius: 50%; }
.site-nav .nav-link { color: #475569; font-weight: 500; }
.site-nav .nav-link:hover { color: var(--edwin-accent); }

/* --- Hero ----------------------------------------------------------------- */
.hero {
    background:
        radial-gradient(1200px 400px at 80% -10%, rgba(37, 99, 235, .12), transparent 60%),
        var(--edwin-accent-tint);
}
.hero h1 { font-weight: 800; letter-spacing: -.02em; }
.hero-art {
    max-width: 360px; width: 100%;
    filter: drop-shadow(0 18px 40px rgba(30, 41, 59, .18));
}
.trust-line { color: #64748b; font-size: .9rem; }
.trial-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; border: 1px solid var(--edwin-accent);
    color: var(--edwin-accent-dark); font-weight: 600; font-size: .85rem;
    padding: .3rem .8rem; border-radius: 999px;
}

/* --- Generic section rhythm ---------------------------------------------- */
.section { padding: 5rem 0; }
.section-tint { background: var(--edwin-accent-tint); }
.section-dark { background: var(--edwin-sidebar); color: #e2e8f0; }
.section h2 { font-weight: 700; letter-spacing: -.01em; }
.eyebrow {
    text-transform: uppercase; letter-spacing: .08em; font-size: .8rem;
    font-weight: 700; color: var(--edwin-accent-dark);
}

/* Feature / step / use-case cards */
.brand-card {
    background: #fff; border: 1px solid #e8edf3; border-radius: .9rem;
    height: 100%; transition: transform .15s ease, box-shadow .15s ease;
}
.brand-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(30, 41, 59, .1); }
.icon-badge {
    width: 48px; height: 48px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--edwin-accent-tint); color: var(--edwin-accent-dark);
    font-size: 1.4rem;
}

/* Code snippet (mirrors the console's dark snippet look) */
.snippet {
    display: block; white-space: pre-wrap; word-break: break-all;
    background: #0f172a; color: #e2e8f0; padding: 1rem 1.1rem;
    border-radius: .6rem; font-size: .85rem; line-height: 1.5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Pricing -------------------------------------------------------------- */
.price-card .display-6 { font-weight: 800; }
.price-card.featured { border-color: var(--edwin-accent); border-width: 2px; }
.price-card .feature-list { list-style: none; padding: 0; margin: 0; }
.price-card .feature-list li { padding: .35rem 0; color: #475569; }
.price-card .feature-list i { color: var(--edwin-accent); margin-right: .5rem; }

/* --- Legal / content pages ------------------------------------------------ */
.legal { padding: 3.5rem 0 4.5rem; }
.legal .legal-body { max-width: 820px; }
.legal h1 { font-weight: 800; letter-spacing: -.02em; }
.legal h2 { font-weight: 700; font-size: 1.35rem; margin-top: 2.5rem; }
.legal h3 { font-weight: 600; font-size: 1.08rem; margin-top: 1.6rem; }
.legal p, .legal li { color: #334155; line-height: 1.7; }
.legal .updated { color: #64748b; font-size: .9rem; }
.legal .lead-tint {
    background: var(--edwin-accent-tint); border: 1px solid #dbe6fb;
    border-radius: .75rem; padding: 1rem 1.25rem;
}
.legal .lead-tint p:last-child { margin-bottom: 0; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--edwin-sidebar); color: #cbd5e1; }
.site-footer a { color: #cbd5e1; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-brand { color: #fff; font-weight: 700; }