:root {
    --site-ink: #12302e;
    --site-ink-2: #16403a;
    --site-teal: #0f8b81;
    --site-teal-deep: #0a6e66;
    --site-fill: #2fbf88;
}

body {
    color: #12302e;
    font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
}

h1, h2, h3, .navbar-brand {
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    letter-spacing: -0.015em;
}

.navbar-brand .brand-word {
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.navbar-brand .brand-suffix { color: var(--site-fill); }

/* Realinhar o "success" do Bootstrap ao teal da marca */
.text-success { color: var(--site-teal) !important; }

.btn-success {
    --bs-btn-bg: var(--site-teal);
    --bs-btn-border-color: var(--site-teal);
    --bs-btn-hover-bg: var(--site-teal-deep);
    --bs-btn-hover-border-color: var(--site-teal-deep);
    --bs-btn-active-bg: var(--site-teal-deep);
}

.text-bg-success { background-color: var(--site-teal) !important; }

.text-bg-warning { background-color: var(--site-fill) !important; color: #0a3d2e !important; }

.site-nav {
    background-color: rgba(18, 48, 46, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.hero {
    background:
        radial-gradient(1000px 460px at 88% -10%, rgba(47, 191, 136, 0.22), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(15, 139, 129, 0.28), transparent 55%),
        var(--site-ink);
    color: #fff;
}

.hero .badge.text-bg-success {
    background-color: var(--site-fill) !important;
    color: #0a3d2e !important;
}

.hero .text-light-emphasis {
    color: #a9b6b3 !important;
}

.hero-card {
    background: #fff;
    color: #12302e;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}

.hero-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.9rem;
    border: 1px solid #e2e8e6;
    border-radius: 12px;
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
}

.hero-slot:last-child { margin-bottom: 0; }

.feature-card {
    background: #fff;
    border: 1px solid #e2e8e6;
    border-radius: 18px;
    padding: 1.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(18, 48, 46, 0.22);
}

.feature-icon {
    font-size: 2.25rem;
    color: var(--site-teal);
}

.cta-section {
    background:
        radial-gradient(700px 300px at 80% 0, rgba(47, 191, 136, 0.2), transparent 60%),
        linear-gradient(135deg, var(--site-ink-2), var(--site-ink));
}