/* ----------------------
   Brand Color System
------------------------*/
:root {
    --brand-primary: #2563eb;
    --brand-primary-dark: #1d4ed8;
    --brand-soft: #e0e7ff;

    --bg-light: #ffffff;
    --bg-muted: #f8fafc;
    --bg-dark: #020617;

    --text-dark: #020617;
    --text-muted: #475569;
    --text-light: #e5e7eb;
}

/* ----------------------
   Body & Hero
------------------------*/
body {
    background: linear-gradient(180deg, var(--bg-muted), var(--bg-light));
    color: var(--text-dark);
    transition: background 0.3s ease, color 0.3s ease;
}

.hero {
    padding: 110px 0;
    background: radial-gradient(
        circle at top,
        rgba(37, 99, 235, 0.12),
        transparent 60%
    );
}

/* ----------------------
   Badge
------------------------*/
.badge-api {
    background: var(--brand-soft);
    color: var(--brand-primary);
    font-weight: 500;
}

/* ----------------------
   Feature Icons
------------------------*/
.feature-icon {
    font-size: 3rem;
    color: var(--brand-primary);
    margin-bottom: 1rem;
    transition: transform 0.25s ease, color 0.25s ease;
}

.feature-icon:hover {
    transform: translateY(-6px) scale(1.05);
    color: var(--brand-primary-dark);
}

/* ----------------------
   CTA Box
------------------------*/
.cta-box {
    background: linear-gradient(
        135deg,
        #020617,
        #0f172a
    );
    color: #ffffff;
    border-radius: 14px;
}

.cta-box p.text-muted {
    color: #ffffff!important;
}
/* ----------------------
   Buttons
------------------------*/
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-primary:hover {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}

/* ----------------------
   Navbar
------------------------*/
.navbar {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.navbar .navbar-brand {
    font-weight: 700;
    color: var(--text-dark);
    transition: color 0.3s ease;
}

body.dark .navbar {
    background: var(--bg-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important
}

body.dark .navbar .navbar-brand {
    color: var(--text-light);
    text-shadow: 0 0 10px rgba(37, 99, 235, 0.35);
}

/* ----------------------
   Theme Toggle Button
------------------------*/
#toggleTheme {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

body.dark #toggleTheme {
    background-color: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.4);
    color: #93c5fd;
}

body.dark #toggleTheme:hover {
    background-color: rgba(37, 99, 235, 0.25);
    border-color: rgba(37, 99, 235, 0.6);
}

/* Toggle icon hover */
#toggleTheme i {
    transition: transform 0.2s ease;
}

#toggleTheme:hover i {
    transform: rotate(-15deg) scale(1.1);
}

/* ----------------------
   Dark Mode
------------------------*/
body.dark {
    background: var(--bg-dark);
    color: var(--text-light);
}

body.dark .text-muted {
    color: #94a3b8 !important;
}

body.dark .badge-api {
    background: rgba(37, 99, 235, 0.15);
    color: #93c5fd;
}