/* ==========================================================
   Kevium Design System
   ========================================================== */

:root {

    /* Brand Colors */
    --color-primary: #0F766E;
    --color-primary-light: #14B8A6;
    --color-primary-hover: #0D5F59;

    /* Status Colors */
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #3B82F6;

    /* Neutrals */
    --color-white: #FFFFFF;
    --color-background: #F8FAFC;

    --color-surface-muted: #e6ebeb;

    --color-border: #E5E7EB;

    --color-text: #1F2937;
    --color-text-muted: #6B7280;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .08);

    /* Transition */
    --transition: .25s ease;

}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family: "Inter", sans-serif;

    background: var(--color-background);

    color: var(--color-text);

    line-height: 1.6;

    overflow-x: hidden;

    margin: 0;

    padding: 0;

}

a {

    text-decoration: none;

    color: inherit;

    transition: var(--transition);

}

img {

    max-width: 100%;

    display: block;

}

section {

    padding: 1.5rem 0;

}


.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);

    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
}

.text-primary {
    color: var(--color-primary) !important;
}

.btn-link {
    --bs-btn-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-primary-hover);
}

/* ==========================================================
   Logo
   ========================================================== */

.kevium-logo {
    color: var(--color-text);
    font-weight: 700;
}

.kevium-logo:hover {
    color: var(--color-primary);
}

.kevium-logo-image {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.kevium-logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}



/* ==========================================================
   Navbar
   ========================================================== */

.navbar {

    padding: 1rem 0;

    transition: var(--transition);

}

.navbar-nav {

    gap: 0.5rem;

}

.nav-link {

    color: var(--color-text);

    font-weight: 500;

    padding: .75rem 1rem !important;

    border-radius: var(--radius-md);

    transition: var(--transition);

}

.nav-link:hover {

    color: var(--color-primary);

    background: rgba(15, 118, 110, .08);

}

.navbar .btn-primary {

    padding-inline: 1.5rem;

    border-radius: var(--radius-md);

}

.navbar-toggler {

    border: none;

    box-shadow: none !important;

}

.navbar-toggler:focus {

    box-shadow: none;

}



/* ==========================================================
Site Footer
========================================================== */

.site-footer {
    padding: 4.5rem 0 1.5rem;

    background: var(--color-surface-muted);
    color: var(--color-text);

}

.footer-description {
    max-width: 320px;
    margin-top: 1.25rem;

    color: var(--color-text-muted);

    font-size: 0.9rem;
    line-height: 1.7;

}

.footer-heading {
    margin-bottom: 1.25rem;

    color: var(--color-text);

    font-size: 0.9rem;
    font-weight: 600;

}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;

    margin: 0;
    padding: 0;

    list-style: none;

}

.footer-links a {
    color: var(--color-text-muted);

    font-size: 0.85rem;

    text-decoration: none;

    transition: color 0.2s ease;

}

.footer-links a {
    color: var(--color-primary);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    color: var(--color-text-muted);

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;

}

.footer-social a {
    background: var(--color-primary);
    border-color: var(--color-primary);

    color: var(--color-white);

}

.footer-bottom {
    margin-top: 3.5rem;
    padding-top: 1.5rem;

    border-top: 1px solid var(--color-border);

    color: var(--color-text-muted);

    font-size: 0.8rem;

}