/* =========================================================
   Ynthegrare — Bootstrap 5 Custom Theme (no SCSS)
   Load AFTER bootstrap.min.css
   ========================================================= */

/* ---------- Brand & System Variables ---------- */
:root {
    /* Brand palette (from logo) */
    --yn-blue:   #1F4E79; /* primary */
    --yn-green:  #7FBF3F; /* secondary */
    --yn-orange: #F59E3D; /* warning / learning */
    --yn-cyan:   #2FB8C6; /* digital / info */

    /* Neutrals */
    --yn-ink:    #0b1220;
    --yn-text:   #4B5563;
    --yn-muted:  #6B7280;
    --yn-border: #E5E7EB;
    --yn-bg:     #F9FAFB;

    /* Semantic aliases */
    --brand: var(--yn-blue);
    --bg-soft: #f6f9ff;

    /* Bootstrap overrides */
    --bs-primary:   var(--yn-blue);
    --bs-secondary: var(--yn-green);
    --bs-warning:   var(--yn-orange);
    --bs-info:      var(--yn-cyan);
    --bs-success:   var(--yn-cyan);

    --bs-dark:        var(--yn-ink);
    --bs-body-color:  var(--yn-text);
    --bs-body-bg:     var(--yn-bg);
    --bs-border-color: var(--yn-border);

    /* Effects */
    --card-shadow: 0 10px 30px rgba(2, 32, 71, .08);
}

/* ---------- Base ---------- */
body {
    color: var(--yn-text);
    background: var(--yn-bg);
}

a {
    color: var(--brand);
    text-decoration: none;
}
a:hover {
    color: #163a5a; /* safe darken for broad browser support */
}

/* ---------- Navbar ---------- */
.navbar {
    min-height: 80px;
    backdrop-filter: blur(8px);
}

.navbar-logo {
    max-height: 80px;
    width: auto;
    height: auto;
    display: block;
}

/* ---------- Hero ---------- */
.hero {
    background:
            radial-gradient(
                    1200px 500px at 20% 20%,
                    rgba(31, 78, 121, 0.18),
                    transparent 60%
            ),
            radial-gradient(
                    900px 400px at 80% 10%,
                    rgba(127, 191, 63, 0.14),
                    transparent 55%
            ),
            linear-gradient(
                    180deg,
                    #ffffff 0%,
                    var(--bg-soft) 100%
            );
}

/* ---------- Cards & Sections ---------- */
.feature-card {
    border: 0;
    border-radius: 1rem;
    box-shadow: var(--card-shadow);
}

.section-title {
    letter-spacing: .2px;
}

.bg-soft {
    background: var(--bg-soft);
}

/* ---------- Badges ---------- */
.badge-soft {
    background: rgba(31, 78, 121, 0.10);
    color: var(--brand);
    border: 1px solid rgba(31, 78, 121, 0.18);
    font-weight: 500;
}

/* ---------- Icons ---------- */
.icon-circle {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(31, 78, 121, 0.12);
    border: 1px solid rgba(31, 78, 121, 0.18);
}

/* ---------- Dividers ---------- */
.divider {
    height: 1px;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(31, 78, 121, 0.35),
            transparent
    );
}

/* ---------- CTA Band ---------- */
.cta-band {
    background:
            radial-gradient(
                    900px 300px at 20% 0%,
                    rgba(31, 78, 121, 0.25),
                    transparent 60%
            ),
            linear-gradient(
                    180deg,
                    #0b2a63 0%,
                    #0b1f44 100%
            );
    color: #ffffff;
    border-radius: 1.25rem;
}

.cta-band a {
    color: #ffffff;
}

/* ---------- Footer ---------- */
.footer {
    background: #0b1f44;
    color: rgba(255, 255, 255, 0.85);
}

.footer a {
    color: rgba(255, 255, 255, 0.85);
}
.footer a:hover {
    text-decoration: underline;
}

/* ---------- Utilities ---------- */
.small-muted {
    color: var(--yn-muted);
}