* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --brand: #2563eb;
    --nav-bg: #ffffff;
    --nav-text: #0f172a;
    --nav-hover: #2563eb;
    --nav-hover-bg: rgba(37, 99, 235, 0.08);
    --overlay-bg: rgba(0, 0, 0, 0.12);
    --mobile-panel-bg: #ffffff;
    --mobile-panel-text: #111827;
    --mobile-panel-desc-text: #475569;
    --mobile-panel-border: rgba(15, 23, 42, 0.08);
    --mobile-menu-width: 320px;
    --nav-border: rgba(15, 23, 42, 0.12);
    --btn-outline-text: #0f172a;

    /* LC design tokens (shared with Home) — retuned to the navy/blue theme */
    --lc-blue: #2563eb;
    --lc-violet: #1d4ed8;
    --lc-orange: #2563eb;
    --lc-ink: #0f1f3d;
    --lc-body: #475569;
    --lc-muted: #8a96a8;
    --lc-line: #e6eaf0;
    --lc-grad: #2563eb;
}

[data-bs-theme="dark"] {
    --mobile-panel-text: #ffffff;
    --mobile-panel-desc-text: rgba(255, 255, 255, 0.72);
    --nav-bg: #0f1724;
    --nav-text: #ffffff;
    --nav-hover: #cfe3ff;
    --nav-hover-bg: rgba(255, 255, 255, 0.08);
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --mobile-panel-bg: #111827;
    --mobile-panel-text: #ffffff;
    --mobile-panel-border: rgba(255, 255, 255, 0.12);
    --nav-border: rgba(255, 255, 255, 0.18);
    --btn-outline-text: #ffffff;
}

.site-navbar {
    background: var(--nav-bg);
}

.site-navbar .navbar-brand img {
    height: 40px;
}

.mobile-panel .navbar-brand img {
    height: 32px;
    width: auto;
    max-width: 100%;
}

.site-navbar .nav-link {
    color: var(--nav-text) !important;
    transition:
        color 0.15s ease,
        transform 0.12s ease;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: var(--nav-hover) !important;
    transform: translateY(-1px);
}

.site-navbar .dropdown-item {
    color: var(--nav-text) !important;
}

.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus {
    color: var(--nav-hover) !important;
    background: var(--nav-hover-bg);
}

.site-navbar .btn-outline-theme {
    color: var(--btn-outline-text);
    border-color: rgba(255, 255, 255, 0.65);
}

.site-navbar .theme-toggle {
    cursor: pointer;
}

.site-navbar .theme-toggle i {
    font-size: 1rem;
}

.nav-desktop {
    gap: 1rem;
    align-items: center;
}

.nav-mobile-only {
    display: none;
}

.mobile-overlay {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1040;
}

.mobile-overlay.visible {
    display: block;
}

.mobile-overlay .overlay-bg {
    position: absolute;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(2px);
}

.mobile-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(var(--mobile-menu-width), 92vw);
    max-width: 92vw;
    background: var(--mobile-panel-bg);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    transform: translateX(110%);
    transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-panel.open {
    transform: translateX(0);
}

.mobile-panel .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--mobile-panel-border);
}

.mobile-panel .panel-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-panel .nav-link {
    color: var(--mobile-panel-text);
    padding: 0.95rem 0;
    font-weight: 600;
}

.mobile-panel .nav-link:hover,
.mobile-panel .nav-link:focus {
    color: var(--nav-hover);
}

.mobile-panel .nav-link.small-desc {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--mobile-panel-desc-text);
}

.mobile-panel .nav-item + .nav-item {
    border-top: 1px solid var(--mobile-panel-border);
}

.mobile-panel-label {
    margin-top: 1rem;
    padding: 0.5rem 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mobile-panel-desc-text);
    border-top: 1px solid var(--mobile-panel-border);
}

.mobile-panel .nav-item + .mobile-panel-label {
    border-top: 1px solid var(--mobile-panel-border);
}

@media (max-width: 991.98px) {
    .desktop-nav {
        display: none !important;
    }

    .nav-mobile-only {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .desktop-nav {
        display: flex !important;
    }

    .nav-mobile-only {
        display: none !important;
    }

    .mobile-overlay {
        display: none !important;
    }

    .mobile-panel {
        display: none !important;
    }
}

.mobile-panel a:focus,
.site-navbar a:focus {
    outline: 3px solid rgba(13, 110, 253, 0.12);
    outline-offset: 2px;
}

.btn-hamburger {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--nav-text);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-hamburger:active {
    transform: scale(0.98);
}

.btn-outline-theme {
    border-radius: 40px;
    padding: 0.45rem 1rem;
    color: var(--nav-text);
    border-color: rgba(255, 255, 255, 0.65);
}

.theme-toggle {
    cursor: pointer;
}

.theme-toggle i {
    font-size: 1rem;
}

body {
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Helvetica,
        sans-serif;
    transition:
        background 0.3s ease,
        color 0.2s ease;
    scroll-behavior: smooth;
}

/* FULL PAGE SLIDER SECTION - Hero Slider */
.fullpage-slider {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.fullpage-swiper {
    width: 100%;
    height: 100%;
}

.fullpage-swiper .swiper-slide {
    background-size: cover;
    background-position: center;
    position: relative;
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 100%
    );
    z-index: 1;
}

[data-bs-theme="dark"] .slide-overlay {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.5) 100%
    );
}

.slide-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.slide-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    animation: fadeInUp 0.8s ease;
}

.slide-content p {
    font-size: 1.25rem;
    opacity: 0.95;
    margin-bottom: 2rem;
    animation: fadeInUp 0.8s ease 0.1s both;
}

.slide-content .btn {
    animation: fadeInUp 0.8s ease 0.2s both;
    border-radius: 50px;
    padding: 12px 32px;
    font-weight: 600;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Navigation & Pagination for fullpage slider */
.fullpage-swiper .swiper-button-next,
.fullpage-swiper .swiper-button-prev {
    color: white;
    background: rgba(255, 255, 255, 0.2);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: all 0.3s;
}

.fullpage-swiper .swiper-button-next:hover,
.fullpage-swiper .swiper-button-prev:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.fullpage-swiper .swiper-pagination-bullet {
    background: white;
    opacity: 0.6;
}

.fullpage-swiper .swiper-pagination-bullet-active {
    background: white;
    opacity: 1;
    width: 30px;
    border-radius: 10px;
}

/* Navbar styling (transparent over slider, solid on scroll) */
.navbar {
    transition: all 0.4s ease;
    background-color: transparent !important;
    backdrop-filter: blur(0px);
}

/* The Developer School: keep the main header solid white in every state */
#mainNavbar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
}

#mainNavbar.navbar-menu-right {
    --bs-navbar-padding-y: 0.25rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    overflow: visible;
    z-index: 1030;
}

#mainNavbar.navbar-menu-right .navbar-menu-container,
#mainNavbar.navbar-menu-right .navbar-menu-panel,
#mainNavbar.navbar-menu-right .navbar-menu-list {
    overflow: visible;
}

#mainNavbar.navbar-menu-right .nav-item.dropdown {
    position: relative;
}

#mainNavbar .navbar-nav .navbar-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 0.35rem;
    z-index: 1055;
    min-width: 11rem;
    padding: 0.35rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

#mainNavbar .navbar-user-dropdown {
    min-width: 200px;
    padding: 0.4rem;
    border-radius: 12px;
    border: 1.5px solid #e8edf5;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

#mainNavbar .navbar-dropdown-menu .dropdown-item {
    color: #212529;
    font-size: 0.88rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.5rem;
    white-space: nowrap;
}

#mainNavbar .navbar-dropdown-menu .dropdown-item:hover,
#mainNavbar .navbar-dropdown-menu .dropdown-item:focus,
#mainNavbar .navbar-dropdown-menu .dropdown-item:active {
    background-color: rgba(37, 99, 235, 0.08);
    color: #1e40af;
}

#mainNavbar .navbar-dropdown-menu .dropdown-item.text-danger:hover,
#mainNavbar .navbar-dropdown-menu .dropdown-item.text-danger:focus {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

#mainNavbar .navbar-dropdown-menu .dropdown-divider {
    margin: 0.35rem 0;
    border-color: #e8edf5;
}

#mainNavbar .navbar-dropdown-menu button.dropdown-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
}

#mainNavbar .nav-link.dropdown-toggle::after {
    margin-left: 0.35em;
    vertical-align: 0.2em;
}

#mainNavbar:not(.navbar-scrolled) .nav-link.dropdown-toggle::after {
    border-top-color: #212529;
}

body.page-inner #mainNavbar .nav-link.dropdown-toggle::after,
#mainNavbar.navbar-scrolled .nav-link.dropdown-toggle::after {
    border-top-color: #212529;
    filter: none;
}

[data-bs-theme="dark"] #mainNavbar .navbar-dropdown-menu {
    background-color: #2b3035;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] #mainNavbar .navbar-dropdown-menu .dropdown-item {
    color: #f8f9fa;
}

[data-bs-theme="dark"] #mainNavbar .navbar-dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] #mainNavbar .navbar-dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

[data-bs-theme="dark"] #mainNavbar .navbar-dropdown-menu .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"]
    body.page-inner
    #mainNavbar
    .nav-link.dropdown-toggle::after,
[data-bs-theme="dark"]
    #mainNavbar.navbar-scrolled
    .nav-link.dropdown-toggle::after {
    border-top-color: #f8f9fa;
}

#mainNavbar.navbar-menu-right .navbar-brand {
    margin-right: 0.5rem;
    padding: 0;
}

#mainNavbar.navbar-menu-right .navbar-brand img {
    height: 36px;
    width: auto;
}

#mainNavbar.navbar-menu-right .navbar-menu-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
}

#mainNavbar.navbar-menu-right .navbar-menu-panel {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

#mainNavbar.navbar-menu-right .navbar-menu-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.125rem 0.25rem;
    width: auto;
}

#mainNavbar.navbar-menu-right .navbar-menu-list .nav-item {
    width: auto;
    margin: 0;
}

#mainNavbar.navbar-menu-right .navbar-menu-list .nav-link {
    white-space: nowrap;
    padding: 0.25rem 0.4rem !important;
    font-size: 0.875rem;
    line-height: 1.2;
}

#mainNavbar.navbar-menu-right .navbar-menu-list .btn-sm {
    font-size: 0.8rem;
    line-height: 1.2;
}

#mainNavbar.navbar-menu-right .theme-toggle {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    line-height: 1.2;
}

.navbar-scrolled .theme-toggle.btn-outline-light,
body.page-inner #mainNavbar .theme-toggle.btn-outline-light,
#mainNavbar.navbar-solid .theme-toggle.btn-outline-light {
    --bs-btn-color: #212529;
    --bs-btn-border-color: rgba(33, 37, 41, 0.45);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: rgba(0, 0, 0, 0.06);
    --bs-btn-hover-border-color: #212529;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: rgba(0, 0, 0, 0.1);
    --bs-btn-active-border-color: #212529;
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
}

[data-bs-theme="dark"] .navbar-scrolled .theme-toggle.btn-outline-light,
[data-bs-theme="dark"]
    body.page-inner
    #mainNavbar
    .theme-toggle.btn-outline-light,
[data-bs-theme="dark"]
    #mainNavbar.navbar-solid
    .theme-toggle.btn-outline-light {
    --bs-btn-color: #f8f9fa;
    --bs-btn-border-color: rgba(255, 255, 255, 0.55);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.15);
    --bs-btn-active-border-color: #fff;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
}

@media (max-width: 575.98px) {
    #mainNavbar.navbar-menu-right .navbar-menu-list .nav-link {
        font-size: 0.8rem;
        padding: 0.2rem 0.3rem !important;
    }

    #mainNavbar.navbar-menu-right .theme-toggle #themeText {
        display: none;
    }
}

.navbar-scrolled,
body.page-inner #mainNavbar,
#mainNavbar.navbar-solid {
    background-color: #ffffff !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.1);
}

.navbar-scrolled .nav-link,
.navbar-scrolled .navbar-brand,
body.page-inner #mainNavbar .nav-link,
body.page-inner #mainNavbar .navbar-brand,
#mainNavbar.navbar-solid .nav-link,
#mainNavbar.navbar-solid .navbar-brand {
    color: #0f172a !important;
}

body.page-inner #mainNavbar .nav-link.dropdown-toggle::after,
#mainNavbar.navbar-scrolled .nav-link.dropdown-toggle::after {
    border-top-color: #212529;
    filter: none;
}

.navbar-scrolled .navbar-toggler,
body.page-inner #mainNavbar .navbar-toggler,
#mainNavbar.navbar-solid .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.15);
}

.navbar-scrolled .navbar-toggler-icon,
body.page-inner #mainNavbar .navbar-toggler-icon,
#mainNavbar.navbar-solid .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280,0,0,0.7%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

body.page-inner {
    padding-top: 64px;
}

.dropdown-menu:not(.navbar-dropdown-menu) {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.dropdown-menu:not(.navbar-dropdown-menu) .dropdown-item {
    color: #212529;
}

.dropdown-menu:not(.navbar-dropdown-menu) .dropdown-item:hover,
.dropdown-menu:not(.navbar-dropdown-menu) .dropdown-item:focus {
    background-color: rgba(0, 0, 0, 0.05);
    color: #212529;
}

[data-bs-theme="dark"] .navbar-scrolled,
[data-bs-theme="dark"] body.page-inner #mainNavbar,
[data-bs-theme="dark"] #mainNavbar.navbar-solid {
    background-color: rgba(33, 37, 41, 0.95) !important;
}

[data-bs-theme="dark"] .navbar-scrolled .nav-link,
[data-bs-theme="dark"] .navbar-scrolled .navbar-brand,
[data-bs-theme="dark"] body.page-inner #mainNavbar .nav-link,
[data-bs-theme="dark"] body.page-inner #mainNavbar .navbar-brand,
[data-bs-theme="dark"] #mainNavbar.navbar-solid .nav-link,
[data-bs-theme="dark"] #mainNavbar.navbar-solid .navbar-brand {
    color: #fff !important;
}

/* Rating cards */
.rating-card {
    border-radius: 1.5rem;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s;
    backdrop-filter: blur(2px);
    background: rgba(255, 255, 255, 0.7);
}

[data-bs-theme="dark"] .rating-card {
    background: rgba(30, 40, 55, 0.8);
    backdrop-filter: blur(4px);
}

.rating-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.1);
}

/* counter section */
.counter-box {
    border-radius: 2rem;
    padding: 1.5rem;
    background: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02);
    transition: all 0.2s;
}

[data-bs-theme="dark"] .counter-box {
    background: #1e2a3a;
}

.counter-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    color: #0d6efd;
}

/* Resume upload zone */
.upload-zone {
    border: 2px dashed #ced4da;
    border-radius: 2rem;
    padding: 2.5rem 1rem;
    transition: all 0.25s;
    cursor: pointer;
    background: rgba(13, 110, 253, 0.02);
}

.upload-zone:hover {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.05);
}

[data-bs-theme="dark"] .upload-zone {
    border-color: #3a4a5c;
}

[data-bs-theme="dark"] .upload-zone:hover {
    border-color: #6ea8fe;
}

.insight-card {
    border-radius: 1.5rem;
    transition: all 0.2s;
    border-left: 5px solid #0d6efd;
}

/* footer {
    background: #4d4f52 !important;
}
footer a {
    text-decoration: none;
    transition: opacity 0.2s;
}
footer a:hover {
    opacity: 0.8;
    text-decoration: underline;
} */

.site-footer {
    position: relative;
    margin-top: 100px;
    padding: 80px 0 30px;

    background: #ffffff;

    border-top: 1px solid #e2e8f0;

    box-shadow: 0 -20px 40px rgba(15, 23, 42, 0.05);

    overflow: hidden;
}

/* Gradient Separator */
.site-footer::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #2563eb;
}

/* Container */
.site-footer .container {
    position: relative;
    z-index: 2;
}

/* Logo */
.footer-logo img {
    max-height: 55px;
    width: auto;
}

/* Headings */
.site-footer h5 {
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* Text */
.site-footer p {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.9;
}

/* Quick Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 14px;
}

.footer-links a {
    color: #2563eb;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

.footer-links a:hover {
    color: #1d4ed8;
    padding-left: 6px;
}

.footer-links i {
    margin-right: 8px;
}

/* Social Icons */
.social-links {
    display: flex;
    gap: 14px;
}

.social-links a {
    width: 50px;
    height: 50px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    background: #2563eb;

    transition: all 0.3s ease;
}

.social-links a {
    transform: translateY(-4px);

    box-shadow: 0 15px 30px rgba(124, 58, 237, 0.25);
}

.social-links i {
    font-size: 1.2rem;
}

/* Subscribe Card */
.footer-subscribe {
    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 28px;

    padding: 32px;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.footer-subscribe .lc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px;

    border-radius: 999px;

    background: #eef2ff;

    color: #2563eb;

    font-weight: 600;
}

.footer-subscribe h5 {
    margin-top: 20px;
}

/* Form */
.footer-subscribe .form-control {
    min-height: 58px;

    border: 2px solid #dbeafe;

    border-radius: 16px 0 0 16px;

    font-size: 1rem;
}

.footer-subscribe .form-control {
    border-color: #2563eb;

    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

/* Subscribe Button */
.btn-subscribe {
    border: none;

    padding: 0 32px;

    color: #fff;

    font-weight: 700;

    border-radius: 0 16px 16px 0;

    background: #2563eb;

    transition: all 0.3s ease;
}

.btn-subscribe {
    color: #fff;

    transform: translateY(-1px);

    box-shadow: 0 12px 25px rgba(124, 58, 237, 0.25);
}

/* Divider */
.site-footer hr {
    border-color: #e2e8f0;
    margin: 50px 0 30px;
}

/* Footer Bottom */
.footer-bottom {
    color: #64748b;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .counter-number {
        font-size: 2.2rem;
    }

    .slide-content h1 {
        font-size: 2.2rem;
    }

    .slide-content p {
        font-size: 1rem;
    }

    .fullpage-swiper .swiper-button-next,
    .fullpage-swiper .swiper-button-prev {
        width: 35px;
        height: 35px;
    }
}

.btn-outline-theme {
    border-radius: 40px;
    padding: 0.5rem 1.2rem;
}

.theme-toggle {
    cursor: pointer;
}

section {
    scroll-margin-top: 70px;
}

/* ATS page styles */
.ats-hero {
    background: #0d3b66;
    border-radius: 0 0 2rem 2rem;
    padding: 4rem 0 3.5rem;
    color: white;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

[data-bs-theme="dark"] .ats-hero {
    background: #0a2a48;
}

.hero-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    padding: 0.3rem 1rem;
    border-radius: 40px;
    font-size: 0.9rem;
    display: inline-block;
}

.comparison-card {
    border-radius: 1.5rem;
    transition: all 0.3s;
    height: 100%;
    border: 1px solid rgba(13, 110, 253, 0.1);
}

.comparison-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.1);
    border-color: #0d6efd;
}

.feature-check {
    color: #0d6efd;
    font-weight: 600;
}

.importance-icon {
    font-size: 2.5rem;
    background: #ffffff;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .importance-icon {
    background: #1e2a3a;
}

.step-circle {
    width: 50px;
    height: 50px;
    background: #0d6efd;
    color: white;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.stat-box {
    background: var(--bs-body-bg);
    border-radius: 1.5rem;
    padding: 1.8rem;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.2s;
    border: 1px solid rgba(13, 110, 253, 0.1);
}

.stat-number {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0d6efd;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .stat-number {
        font-size: 2rem;
    }

    .ats-hero {
        padding: 2.5rem 0 2rem;
    }
}

.btn-outline-theme {
    border-radius: 40px;
    padding: 0.5rem 1.2rem;
}

/* MCQ challenge page styles */
.mcq-hero {
    background: #0b1f3a;
    border-radius: 0 0 2.5rem 2.5rem;
    padding: 4rem 0 3.5rem;
    color: white;
    margin-bottom: 2rem;
    position: relative;
}

[data-bs-theme="dark"] .mcq-hero {
    background: #0b1f3a;
}

.mcq-hero-copy {
    max-width: 700px;
}

.hero-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    padding: 0.4rem 1.2rem;
    border-radius: 60px;
    display: inline-block;
}

.category-card {
    border-radius: 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    background: var(--bs-body-bg);
    border: 1px solid rgba(13, 110, 253, 0.12);
    height: 100%;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 30px -12px rgba(13, 110, 253, 0.25);
    border-color: #0d6efd;
}

.category-icon {
    font-size: 2.5rem;
    background: #ffffff;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .category-icon {
    background: #1e2a3a;
}

.review-card {
    border-radius: 1.5rem;
    transition: all 0.2s;
    background: var(--bs-body-bg);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .review-card {
    border-color: rgba(255, 255, 255, 0.08);
}

.cert-option {
    border: 2px solid #dee2e6;
    border-radius: 1rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cert-option:hover,
.cert-option.selected {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.05);
}

.level-badge {
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 40px;
    padding: 0.5rem 1rem;
    text-align: center;
}

.level-badge:hover,
.level-badge.selected-level {
    background: #0d6efd;
    color: white;
}

.modal-content {
    border-radius: 1.5rem;
}

@media (max-width: 768px) {
    .mcq-hero {
        padding: 2.5rem 0 2rem;
    }

    .category-icon {
        width: 55px;
        height: 55px;
        font-size: 1.8rem;
    }
}

/* Mock page styles */
/* .mock-hero {
    background: #0b2b40;
    border-radius: 0 0 2.5rem 2.5rem;
    padding: 4rem 0 3.5rem;
    color: white;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

[data-bs-theme="dark"] .mock-hero {
    background: #06212e;
}

.mock-hero-copy {
    max-width: 700px;
}

.hero-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    padding: 0.4rem 1.2rem;
    border-radius: 60px;
    font-size: 0.9rem;
    display: inline-block;
}

.benefit-card,
.review-card,
.journey-card {
    border-radius: 1.5rem;
    transition: all 0.3s;
    background: var(--bs-body-bg);
    border: 1px solid rgba(13, 110, 253, 0.12);
}

.benefit-card:hover,
.journey-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.15);
    border-color: #0d6efd;
}

.benefit-icon {
    font-size: 2.8rem;
    background: #ffffff;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    margin-bottom: 1.2rem;
}

[data-bs-theme="dark"] .benefit-icon,
[data-bs-theme="dark"] .journey-card {
    background: #1e2a3a;
}

.rating-stars i {
    color: #ffc107;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .mock-hero {
        padding: 2.5rem 0 2rem;
    }

    .benefit-icon {
        width: 65px;
        height: 65px;
        font-size: 2rem;
    }
} */

.mock-hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0 100px;
    background: #0b1f3a;
}

.mock-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1rem;
}

.mock-hero h1 .lc-gradient-text {
    background: none;
    -webkit-text-fill-color: #7eb0ff;
    color: #7eb0ff;
}

.mock-hero-copy {
    max-width: 720px;
    color: #c7d4e6;
    font-size: 1.15rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.75rem 1.25rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.85);

    border: 1px solid rgba(37, 99, 235, 0.12);

    color: #2563eb;

    font-weight: 600;
}

/* Section Heading */

.mock-page .display-6 {
    color: #0f172a;
    font-weight: 700;
}

/* Benefit Cards */

.benefit-card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;

    background: rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(10px);

    transition: 0.35s ease;
}

.benefit-card {
    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

/* .benefit-icon {
    width: 80px;
    height: 80px;

    border-radius: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2rem;

    background: linear-gradient(135deg,
            rgba(37, 99, 235, .10),
            rgba(124, 58, 237, .10));

    margin-bottom: 1.25rem;

} */

/* Reviews */

#reviews {
    background: #ffffff !important;

    border-radius: 32px;
}

.review-card {
    height: 100%;

    border-radius: 24px;

    background: #fff;

    border: 1px solid #e2e8f0;

    transition: 0.3s ease;
}

.review-card {
    transform: translateY(-6px);

    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.rating-stars {
    color: #f59e0b;
    font-size: 1.1rem;
}

/* Journey Cards */

.journey-card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 28px !important;

    background: rgba(255, 255, 255, 0.95);

    transition: 0.35s ease;
}

.journey-card {
    transform: translateY(-8px);

    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.journey-icon {
    font-size: 3.5rem;
}

#mockJourneyCard .journey-icon {
    color: #2563eb !important;
}

#mcqJourneyCard .journey-icon {
    color: #10b981 !important;
}

/* Badges */

.badge {
    font-weight: 600;
}

/* Professional MCQ Test page styles */
.test-card {
    border-radius: 1.5rem;
    transition: all 0.3s;
    cursor: pointer;
    background: var(--bs-body-bg);
    border: 1px solid rgba(13, 110, 253, 0.15);
    height: 100%;
}

.test-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -12px rgba(13, 110, 253, 0.25);
    border-color: #0d6efd;
}

.quiz-container {
    background: var(--bs-body-bg);
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.timer-box {
    background: #2563eb;
    color: white;
    border-radius: 1rem;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    font-size: 1.5rem;
    font-family: monospace;
}

.question-number {
    color: #0d6efd;
    font-weight: 600;
}

.option-item {
    background: var(--bs-secondary-bg);
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.option-item:hover {
    background: rgba(13, 110, 253, 0.08);
    transform: translateX(5px);
}

.option-item.selected {
    background: rgba(13, 110, 253, 0.15);
    border-color: #0d6efd;
}

.nav-btn {
    border-radius: 2rem;
    padding: 0.6rem 1.8rem;
    font-weight: 600;
}

.result-card {
    background: #ffffff;
    border-radius: 1.5rem;
}

[data-bs-theme="dark"] .result-card {
    background: #1e2a3a;
}

.score-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.score-number {
    font-size: 3rem;
    font-weight: 800;
    color: white;
}

@media (max-width: 768px) {
    .timer-box {
        font-size: 1.2rem;
        padding: 0.5rem 1rem;
    }
}

/* lc-home design system (copied from resources/views/frontend/home.blade.php) */
.lc-home {
    --lc-blue: #2563eb;
    --lc-violet: #1d4ed8;
    --lc-orange: #2563eb;
    --lc-ink: #0f1f3d;
    --lc-body: #475569;
    --lc-muted: #8a96a8;
    --lc-line: #e6eaf0;
    --lc-grad: #2563eb;
    color: var(--lc-body);
    overflow-x: hidden;
}

.lc-home .lc-gradient-text,
.lc-gradient-text {
    background: var(--lc-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lc-home .lc-eyebrow,
.lc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--lc-blue);
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
}

.lc-home .lc-btn-grad,
.lc-btn-grad {
    background: var(--lc-grad);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.28);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.lc-home .lc-btn-grad:hover,
.lc-btn-grad:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(124, 58, 237, 0.35);
    color: #fff;
}

.lc-home .lc-btn-ghost,
.lc-btn-ghost {
    background: #fff;
    color: var(--lc-ink);
    border: 1.5px solid var(--lc-line);
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.lc-home .lc-btn-ghost:hover,
.lc-btn-ghost:hover {
    transform: translateY(-2px);
    border-color: var(--lc-blue);
    color: var(--lc-blue);
}

/* ---------- HERO ---------- */
.lc-hero {
    position: relative;
    padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
    background:
        radial-gradient(
            45% 45% at 50% 22%,
            rgba(236, 72, 153, 0.16),
            transparent 70%
        ),
        radial-gradient(
            40% 40% at 50% 28%,
            rgba(124, 58, 237, 0.12),
            transparent 70%
        ),
        #fafaff;
    overflow: hidden;
}

.lc-hero h1 {
    font-weight: 800;
    font-size: clamp(2.6rem, 7vw, 5rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--lc-ink);
}

.lc-hero .lead {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--lc-body);
    max-width: 40rem;
}

.lc-trust-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lc-trust-row .avatars {
    display: flex;
}

.lc-trust-row .avatars img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-left: -10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.lc-trust-row .avatars img:first-child {
    margin-left: 0;
}

/* hero mock card */
.lc-hero-card {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.14);
    padding: 1.5rem;
    position: relative;
}

.lc-score-ring {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--lc-blue) 0 95%, #eef2ff 95% 100%);
}

.lc-score-ring .inner {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
}

.lc-score-ring .inner b {
    font-size: 1.5rem;
    color: var(--lc-ink);
    line-height: 1;
}

.lc-bar {
    height: 8px;
    border-radius: 99px;
    background: #eef2ff;
    overflow: hidden;
}

.lc-bar > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--lc-grad);
}

.lc-chip {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lc-blue);
    background: rgba(37, 99, 235, 0.08);
    border-radius: 99px;
    padding: 0.25rem 0.6rem;
}

.lc-float {
    position: absolute;
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 14px;
    padding: 0.6rem 0.8rem;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--lc-ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lc-float.tl {
    top: -18px;
    left: -18px;
}

.lc-float.br {
    bottom: -18px;
    right: -14px;
}

/* ---------- JOURNEY STEPPER ---------- */
.lc-journey {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.lc-step {
    flex: 1 1 0;
    min-width: 130px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 16px;
    padding: 1rem 0.75rem;
    position: relative;
}

.lc-step .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    margin: 0 auto 0.6rem;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: #fff;
    background: var(--lc-grad);
}

.lc-step b {
    color: var(--lc-ink);
    display: block;
    font-size: 0.95rem;
}

.lc-step small {
    color: var(--lc-muted);
}

/* ---------- TRUST LOGOS ---------- */
.lc-logos {
    border-top: 1px solid var(--lc-line);
    border-bottom: 1px solid var(--lc-line);
}

.lc-logos span {
    font-weight: 800;
    font-size: 1.15rem;
    color: #b6c0d4;
    letter-spacing: -0.01em;
}

/* ---------- FEATURE SECTIONS ---------- */
.lc-feat {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.lc-feat .num {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--lc-orange);
}

.lc-feat h2 {
    font-weight: 800;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    color: var(--lc-ink);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.lc-feat p.lead {
    color: var(--lc-body);
    font-size: 1.05rem;
}

.lc-feat ul {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
}

.lc-feat ul li {
    margin-bottom: 0.6rem;
    color: var(--lc-body);
}

.lc-feat ul li i {
    color: var(--lc-blue);
    margin-right: 0.5rem;
}

.lc-mock {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1);
    padding: 1.4rem;
    height: 100%;
}

.lc-mock .mock-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--lc-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.lc-mock .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.lc-jobrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--lc-line);
    border-radius: 14px;
    margin-bottom: 0.6rem;
}

.lc-jobrow .logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    background: var(--lc-grad);
}

.lc-jobrow .match {
    margin-left: auto;
    font-weight: 700;
    color: #16a34a;
    font-size: 0.82rem;
    background: rgba(22, 163, 74, 0.1);
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
}

.lc-opt {
    border: 1.5px solid var(--lc-line);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
    color: var(--lc-ink);
}

.lc-opt.correct {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.07);
    color: #15803d;
}

.lc-opt .k {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: #eef2ff;
    color: var(--lc-blue);
}

/* ---------- COUNTERS ---------- */
.lc-stats {
    padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.lc-stat-box {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 18px;
    padding: 1.5rem 1rem;
    text-align: center;
    height: 100%;
}

.lc-stat-box .n {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--lc-ink);
}

.lc-stat-box .n .counter {
    background: var(--lc-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lc-stat-box i {
    font-size: 1.6rem;
    color: var(--lc-blue);
}

/* ---------- TESTIMONIALS ---------- */
.lc-quote {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 20px;
    padding: 1.6rem;
    height: 100%;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.lc-quote:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.12);
}

.lc-quote p {
    color: var(--lc-ink);
    font-size: 1.02rem;
}

/* ---------- FINAL CTA ---------- */
.lc-cta {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.lc-cta-card {
    background: var(--lc-grad);
    border-radius: 28px;
    padding: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(37, 99, 235, 0.3);
}

.lc-cta-card h2 {
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: -0.02em;
}

.lc-cta-card .btn-white {
    background: #fff;
    color: var(--lc-blue);
    font-weight: 700;
    padding: 0.85rem 2rem;
    border-radius: 999px;
    border: none;
    transition: transform 0.2s ease;
}

.lc-cta-card .btn-white:hover {
    transform: translateY(-2px);
    color: var(--lc-violet);
}

/* dark mode niceties */
[data-bs-theme="dark"] .lc-hero,
[data-bs-theme="dark"] .lc-home {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .lc-hero {
    background: #0b1120;
}

[data-bs-theme="dark"] .lc-home .lc-hero-card,
[data-bs-theme="dark"] .lc-home .lc-mock,
[data-bs-theme="dark"] .lc-home .lc-step,
[data-bs-theme="dark"] .lc-home .lc-stat-box,
[data-bs-theme="dark"] .lc-home .lc-quote {
    background: #151f33;
    border-color: #26344d;
}

[data-bs-theme="dark"] .lc-home h1,
[data-bs-theme="dark"] .lc-home h2,
[data-bs-theme="dark"] .lc-home .lc-step b,
[data-bs-theme="dark"] .lc-home .lc-quote p,
[data-bs-theme="dark"] .lc-home .lc-stat-box .n {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .lc-home .lc-btn-ghost,
[data-bs-theme="dark"] .lc-btn-ghost {
    background: #151f33;
    color: #f1f5f9;
    border-color: #26344d;
}

@media (max-width: 991px) {
    .lc-hero-card {
        margin-top: 2.5rem;
    }

    .lc-feat .lc-mock {
        margin-top: 1.5rem;
    }
}

/* About page styles */

/* About page components using LC design tokens */
.about-page {
    color: var(--lc-body);
}

/* Hero Section */
.about-hero {
    position: relative;
    padding: clamp(3.5rem, 9vw, 6rem) 0;
    background: #0b1f3a;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.about-hero h1 {
    font-weight: 800;
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.about-hero h1 .lc-gradient-text {
    background: none;
    -webkit-text-fill-color: #7eb0ff;
    color: #7eb0ff;
}

.about-hero .lead {
    color: #c7d4e6;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.6;
}

/* About hero children read light on the navy band */
.about-hero .badge-ai {
    background: rgba(255, 255, 255, 0.1);
    color: #cfe0ff;
    border-color: rgba(255, 255, 255, 0.18);
}
.about-hero .text-primary { color: #7eb0ff !important; }
.about-hero .lead,
.about-hero .text-secondary { color: #c7d4e6 !important; }

.about-hero-card {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.14);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.about-hero-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 90px rgba(15, 23, 42, 0.18);
}

/* About Section Spacing */
.about-section {
    padding: clamp(3rem, 7vw, 5rem) 0;
}

.about-section.bg-light {
    background: #f9fafb;
}

[data-bs-theme="dark"] .about-section.bg-light {
    background: #111827;
}

/* Mission/Vision Cards - Fixed Height & Compact */
.about-card {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 18px;
    padding: 1.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 280px;
}

.about-card h3 {
    font-weight: 700;
    color: var(--lc-ink);
    font-size: 1.1rem;
    line-height: 1.3;
}

.about-card p {
    font-size: 0.95rem;
    color: var(--lc-body);
    line-height: 1.6;
    flex: 1;
}

.about-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

.about-card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    border-radius: 14px;
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.about-card-icon--info {
    background: #0ea5e9;
}

[data-bs-theme="dark"] .about-card {
    background: #1a1f2e;
    border-color: #2d3e52;
}

[data-bs-theme="dark"] .about-card h3 {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .about-card p {
    color: #cbd5e1;
}

/* Feature Cards */
.about-feature-card {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.about-feature-card h3 {
    font-weight: 700;
    color: var(--lc-ink);
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.about-feature-card p {
    font-size: 0.95rem;
    color: var(--lc-body);
    line-height: 1.6;
}

.about-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

[data-bs-theme="dark"] .about-feature-card {
    background: #1a1f2e;
    border-color: #2d3e52;
}

[data-bs-theme="dark"] .about-feature-card h3 {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .about-feature-card p {
    color: #cbd5e1;
}

/* Feature Icon */
.feature-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.5rem;
    color: #fff;
    background: var(--lc-grad);
    margin-bottom: 1rem;
}

/* Stats Cards - Compact */
.about-stat-card {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 18px;
    padding: 2rem 1.5rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.about-stat-card .value {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--lc-ink);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.about-stat-card small {
    font-size: 0.85rem;
    color: var(--lc-body);
    font-weight: 500;
}

.about-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

[data-bs-theme="dark"] .about-stat-card {
    background: #1a1f2e;
    border-color: #2d3e52;
}

[data-bs-theme="dark"] .about-stat-card .value {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .about-stat-card small {
    color: #cbd5e1;
}

/* Plan Cards */
.about-plan-card {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition: all 0.2s ease;
    height: 100%;
}

.about-plan-card .plan-label {
    font-weight: 700;
    color: var(--lc-ink);
    font-size: 0.95rem;
}

.about-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

[data-bs-theme="dark"] .about-plan-card {
    background: #1a1f2e;
    border-color: #2d3e52;
}

[data-bs-theme="dark"] .about-plan-card .plan-label {
    color: #f1f5f9;
}

/* Value Cards */
.about-value-card {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition: all 0.2s ease;
}

.about-value-card h5 {
    font-weight: 700;
    color: var(--lc-ink);
    font-size: 1rem;
}

.about-value-card p {
    font-size: 0.9rem;
    color: var(--lc-body);
    line-height: 1.6;
}

.about-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

.value-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    border-radius: 12px;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .about-value-card {
    background: #1a1f2e;
    border-color: #2d3e52;
}

[data-bs-theme="dark"] .about-value-card h5 {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .about-value-card p {
    color: #cbd5e1;
}

/* Timeline Cards */
.about-timeline-card {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition: all 0.2s ease;
    text-align: center;
}

.about-timeline-card h5 {
    font-weight: 700;
    color: var(--lc-ink);
    font-size: 1rem;
}

.about-timeline-card p {
    font-size: 0.85rem;
    color: var(--lc-body);
    line-height: 1.5;
}

.about-timeline-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

[data-bs-theme="dark"] .about-timeline-card {
    background: #1a1f2e;
    border-color: #2d3e52;
}

[data-bs-theme="dark"] .about-timeline-card h5 {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .about-timeline-card p {
    color: #cbd5e1;
}

/* Team Cards */
.about-team-card {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 18px;
    padding: 1.5rem !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.about-team-card h5 {
    font-weight: 700;
    color: var(--lc-ink);
    font-size: 1rem;
    line-height: 1.2;
}

.about-team-card p {
    font-size: 0.85rem;
    line-height: 1.5;
}

.about-team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

[data-bs-theme="dark"] .about-team-card {
    background: #1a1f2e;
    border-color: #2d3e52;
}

[data-bs-theme="dark"] .about-team-card h5 {
    color: #f1f5f9;
}

/* Team Avatar */
.about-team-avatar {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    margin: 0 auto 1rem;
}

.about-team-avatar.primary {
    background: #2563eb;
}

.about-team-avatar.info {
    background: #0ea5e9;
}

.about-team-avatar.success {
    background: #16a34a;
}

.about-team-avatar.warning {
    background: #f59e0b;
}

/* Timeline Badge */
.timeline-badge {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    background: var(--lc-grad);
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Dark mode overrides */
[data-bs-theme="dark"] .about-hero {
    background: #0b1120;
}

[data-bs-theme="dark"] .about-hero h1 {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .about-hero .lead {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .about-hero-card {
    background: #1a1f2e;
    border-color: #2d3e52;
}

/* Responsive Improvements */
@media (max-width: 1024px) {
    .about-section {
        padding: clamp(2.5rem, 5vw, 3.5rem) 0;
    }

    .about-hero {
        padding: clamp(2.5rem, 5vw, 4rem) 0;
    }
}

@media (max-width: 768px) {
    .about-hero {
        padding: 2rem 0;
        margin-bottom: 1.5rem;
    }

    .about-hero h1 {
        font-size: 1.75rem;
    }

    .about-hero-card {
        padding: 1.25rem;
    }

    .about-section {
        padding: 2.5rem 0;
    }

    .about-card {
        min-height: auto;
        padding: 1.25rem;
    }

    .about-feature-card {
        padding: 1.25rem;
    }

    .about-stat-card {
        min-height: 160px;
        padding: 1.5rem 1.25rem;
    }

    .feature-icon {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
    }

    .value-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .about-team-avatar {
        width: 64px;
        height: 64px;
        font-size: 0.9rem;
    }

    .timeline-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.7rem;
    }
}

@media (max-width: 576px) {
    .about-hero {
        padding: 1.5rem 0;
        margin-bottom: 1rem;
    }

    .about-hero h1 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .about-hero .lead {
        font-size: 0.95rem;
    }

    .about-section {
        padding: 2rem 0;
    }

    .about-card {
        padding: 1rem;
        min-height: auto;
    }

    .about-feature-card {
        padding: 1rem;
    }

    .about-stat-card {
        min-height: 140px;
        padding: 1rem;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
}

/* Community page styles */
.community-page {
    color: var(--lc-body);
}

.community-hero {
    position: relative;
    padding: clamp(3.5rem, 9vw, 6rem) 0;
    background: #0b1f3a;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.community-hero .container {
    max-width: 100%;
}

.community-hero h1 {
    font-weight: 800;
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.community-hero h1 .lc-gradient-text {
    background: none;
    -webkit-text-fill-color: #7eb0ff;
    color: #7eb0ff;
}

.community-hero .lead {
    color: #c7d4e6;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.6;
    max-width: 40rem;
    margin-bottom: 1.5rem;
}

.community-hero-chips {
    margin-top: 0.25rem;
    max-width: 100%;
}

.community-chip {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
}

.community-chip--success {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
}

.community-chip--success i {
    color: #16a34a;
}

.community-section {
    padding: clamp(3rem, 7vw, 5rem) 0;
}

.community-section.bg-light {
    background: #f9fafb;
}

[data-bs-theme="dark"] .community-section.bg-light {
    background: #111827;
}

.community-category-card {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.community-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

.community-category-card h4 {
    color: var(--lc-ink);
    font-size: 1.05rem;
    line-height: 1.3;
}

.community-category-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    flex: 1;
}

.community-category-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.5rem;
    color: #fff;
    background: var(--lc-grad);
    margin-bottom: 1rem;
}

.community-category-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.community-category-meta .lc-chip {
    font-size: 0.72rem;
    padding: 0.25rem 0.6rem;
}

.community-benefits {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.community-benefit-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.community-benefit-item strong {
    color: var(--lc-ink);
    display: block;
    margin-bottom: 0.15rem;
}

.community-benefit-item p {
    font-size: 0.9rem;
    line-height: 1.5;
}

.community-benefit-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.25rem;
    color: #fff;
    background: var(--lc-grad);
}

.community-benefit-icon--success {
    background: #16a34a;
}

.community-benefit-icon--warning {
    background: #f59e0b;
}

.community-events-panel {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1);
    padding: 1.5rem;
    height: 100%;
}

.community-events-panel h4 {
    color: var(--lc-ink);
    font-size: 1.05rem;
}

.community-wa-icon {
    color: #16a34a;
}

.community-event-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--lc-line);
    border-radius: 14px;
    margin-bottom: 0.75rem;
    font-size: 0.92rem;
    color: var(--lc-body);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.community-event-item:last-child {
    margin-bottom: 0;
}

.community-event-item:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.community-event-item i {
    color: var(--lc-blue);
    font-size: 1.1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.community-event-item strong {
    color: var(--lc-ink);
}

.community-promo-note {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lc-blue);
}

.community-promo-note i {
    color: var(--lc-orange);
}

.community-cta-copy {
    opacity: 0.92;
    max-width: 38rem;
    margin-inline: auto;
}

.join-wa-group {
    background: linear-gradient(
        135deg,
        #25d366 0%,
        #1ebe5d 50%,
        #128c7e 100%
    ) !important;

    border: none !important;
    color: #fff !important;

    font-weight: 600;
    border-radius: 14px;

    transition: all 0.3s ease;
}

.join-wa-group:hover {
    background: linear-gradient(
        135deg,
        #2ee671 0%,
        #25d366 50%,
        #1ebe5d 100%
    ) !important;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow: 0 12px 25px rgba(37, 211, 102, 0.35);
}

.join-wa-group i {
    color: #fff;
}

[data-bs-theme="dark"] .community-hero {
    background: #0b1120;
}

[data-bs-theme="dark"] .community-hero h1 {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .community-hero .lead {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .community-category-card,
[data-bs-theme="dark"] .community-events-panel {
    background: #1a1f2e;
    border-color: #2d3e52;
}

[data-bs-theme="dark"] .community-category-card h4,
[data-bs-theme="dark"] .community-events-panel h4,
[data-bs-theme="dark"] .community-benefit-item strong,
[data-bs-theme="dark"] .community-event-item strong {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .community-category-card p,
[data-bs-theme="dark"] .community-event-item {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .community-event-item {
    border-color: #2d3e52;
}

[data-bs-theme="dark"] .community-promo-note {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

@media (max-width: 1024px) {
    .community-section {
        padding: clamp(2.5rem, 5vw, 3.5rem) 0;
    }

    .community-hero {
        padding: clamp(2.5rem, 5vw, 4rem) 0;
    }
}

@media (max-width: 768px) {
    .community-hero {
        padding: 2rem 0;
        margin-bottom: 1.5rem;
    }

    .community-hero h1 {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    .community-hero .lead {
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
    }

    .community-section {
        padding: 2.5rem 0;
    }

    .community-category-card {
        padding: 1.25rem;
    }

    .community-category-icon {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
    }

    .community-events-panel {
        padding: 1.25rem;
    }

    .community-benefit-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .community-hero {
        padding: 1.5rem 0;
        margin-bottom: 1rem;
    }

    .community-hero h1 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .community-hero .lead {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .community-section {
        padding: 2rem 0;
    }

    .community-category-card {
        padding: 1rem;
    }

    .community-category-icon {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }

    .community-category-meta {
        gap: 0.35rem;
    }
}

/* Badge variant for About/Contact pages */
.badge-ai {
    background: rgba(37, 99, 235, 0.08);
    color: var(--lc-blue);
    font-weight: 600;
    border-radius: 40px;
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    border: 1px solid rgba(37, 99, 235, 0.18);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

[data-bs-theme="dark"] .badge-ai {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

/* MCQ Tests index page (scoped under .mcq-page) */
.mcq-page {
    background: #f8faff;
    min-height: 100vh;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .mcq-page {
    background: var(--bs-body-bg);
}

.mcq-page .mcq-hero {
    background: #0b1f3a;
    padding: 110px 0 70px;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 0;
}

[data-bs-theme="dark"] .mcq-page .mcq-hero {
    background: #0b1f3a;
}

.mcq-page .mcq-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.mcq-page .mcq-hero .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.mcq-page .mcq-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
}

.mcq-page .mcq-hero .lead {
    font-size: 1.1rem;
    opacity: 0.8;
    max-width: 520px;
}

.mcq-page .cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.mcq-page .cat-chip {
    padding: 6px 16px;
    border-radius: 50px;
    border: 2px solid #e2e8f0;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

[data-bs-theme="dark"] .mcq-page .cat-chip {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

.mcq-page .cat-chip:hover,
.mcq-page .cat-chip.active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

[data-bs-theme="dark"] .mcq-page .cat-chip:hover,
[data-bs-theme="dark"] .mcq-page .cat-chip.active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

.mcq-page .test-card {
    background: #fff;
    border: 1.5px solid #e8edf5;
    border-radius: 16px;
    overflow: hidden;
    transition:
        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.22s;
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: default;
}

[data-bs-theme="dark"] .mcq-page .test-card {
    background: #1e293b;
    border-color: #334155;
}

.mcq-page .test-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12);
    border-color: #bfdbfe;
}

[data-bs-theme="dark"] .mcq-page .test-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    border-color: #3b82f6;
}

.mcq-page .card-accent {
    height: 4px;
}

.mcq-page .card-accent.beginner {
    background: #10b981;
}

.mcq-page .card-accent.intermediate {
    background: #f59e0b;
}

.mcq-page .card-accent.advanced {
    background: #ef4444;
}

.mcq-page .card-body-inner {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mcq-page .diff-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.mcq-page .diff-badge.beginner {
    background: #d1fae5;
    color: #065f46;
}

.mcq-page .diff-badge.intermediate {
    background: #fef3c7;
    color: #92400e;
}

.mcq-page .diff-badge.advanced {
    background: #fee2e2;
    color: #991b1b;
}

[data-bs-theme="dark"] .mcq-page .diff-badge.beginner {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

[data-bs-theme="dark"] .mcq-page .diff-badge.intermediate {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

[data-bs-theme="dark"] .mcq-page .diff-badge.advanced {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.mcq-page .cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

[data-bs-theme="dark"] .mcq-page .cert-badge {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.35);
}

.mcq-page .card-title-text {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin: 10px 0 6px;
}

[data-bs-theme="dark"] .mcq-page .card-title-text {
    color: #f1f5f9;
}

.mcq-page .card-desc {
    font-size: 0.83rem;
    color: #64748b;
    line-height: 1.55;
}

[data-bs-theme="dark"] .mcq-page .card-desc {
    color: #94a3b8;
}

.mcq-page .card-meta {
    display: flex;
    gap: 14px;
    margin: 14px 0 16px;
    flex-wrap: wrap;
}

.mcq-page .meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #64748b;
}

[data-bs-theme="dark"] .mcq-page .meta-item {
    color: #94a3b8;
}

.mcq-page .meta-item i {
    color: #94a3b8;
    font-size: 0.85rem;
}

.mcq-page .pass-rate-header {
    font-size: 0.72rem;
    color: #94a3b8;
}

.mcq-page .pass-rate-value {
    color: #0f172a;
    font-weight: 700;
}

[data-bs-theme="dark"] .mcq-page .pass-rate-value {
    color: #e2e8f0;
}

.mcq-page .pass-rate-track {
    height: 4px;
    background: #f1f5f9;
    border-radius: 99px;
    overflow: hidden;
}

[data-bs-theme="dark"] .mcq-page .pass-rate-track {
    background: #334155;
}

.mcq-page .pass-rate-fill {
    height: 100%;
    background: #10b981;
    border-radius: 99px;
    transition: width 0.6s;
}

.mcq-page .card-cta {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition:
        opacity 0.2s,
        transform 0.15s;
    margin-top: auto;
}

.mcq-page .card-cta:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #fff;
}

.mcq-page .empty-state {
    text-align: center;
    padding: 60px 20px;
}

.mcq-page .empty-state .icon {
    font-size: 3.5rem;
    color: #cbd5e1;
    margin-bottom: 16px;
}

[data-bs-theme="dark"] .mcq-page .empty-state .icon {
    color: #475569;
}

.mcq-page .empty-state h5 {
    color: #475569;
    font-weight: 700;
}

[data-bs-theme="dark"] .mcq-page .empty-state h5 {
    color: #e2e8f0;
}

.mcq-page .empty-state p {
    color: #94a3b8;
}

@media (max-width: 576px) {
    .mcq-page .mcq-hero {
        padding: 90px 0 50px;
    }
}

/* ==========================================================================
   GLOBAL THEME LAYER  —  light/dark design tokens + site-wide dark overrides
   Everything below is scoped to [data-bs-theme="dark"] so light mode is
   untouched.  Rules use !important where needed to override the hardcoded
   inline/per-page colors that pre-date this layer.
   ========================================================================== */

:root {
    --fmn-bg: #f4f7ff;
    --fmn-surface: #ffffff;
    --fmn-surface-2: #f8faff;
    --fmn-border: #e8edf5;
    --fmn-heading: #0f172a;
    --fmn-text: #475569;
    --fmn-muted: #94a3b8;
    --fmn-brand: #2563eb;
}

[data-bs-theme="dark"] {
    --fmn-bg: #0b1120;
    --fmn-surface: #151f33;
    --fmn-surface-2: #1b273f;
    --fmn-border: #26344d;
    --fmn-heading: #f1f5f9;
    --fmn-text: #cbd5e1;
    --fmn-muted: #94a3b8;
    --fmn-brand: #60a5fa;

    color-scheme: dark;
}

/* ---- Page background wrappers ---- */
[data-bs-theme="dark"] .ad,
[data-bs-theme="dark"] .ap-page,
[data-bs-theme="dark"] .ar,
[data-bs-theme="dark"] .ats,
[data-bs-theme="dark"] .ats-up,
[data-bs-theme="dark"] .bl,
[data-bs-theme="dark"] .blog-page,
[data-bs-theme="dark"] .cert-page,
[data-bs-theme="dark"] .conn-page,
[data-bs-theme="dark"] .dash-page,
[data-bs-theme="dark"] .edit-page,
[data-bs-theme="dark"] .hi-page,
[data-bs-theme="dark"] .jb-page,
[data-bs-theme="dark"] .jf-page,
[data-bs-theme="dark"] .js-page,
[data-bs-theme="dark"] .ma-page,
[data-bs-theme="dark"] .mcq-page,
[data-bs-theme="dark"] .mj-page,
[data-bs-theme="dark"] .pr,
[data-bs-theme="dark"] .prof-page,
[data-bs-theme="dark"] .pub-page,
[data-bs-theme="dark"] .quiz-wrap,
[data-bs-theme="dark"] .result-page {
    background: var(--fmn-bg) !important;
}

/* ---- Card / surface containers ---- */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .section-card,
[data-bs-theme="dark"] .ma-card,
[data-bs-theme="dark"] .js-card,
[data-bs-theme="dark"] .kpi,
[data-bs-theme="dark"] .plan,
[data-bs-theme="dark"] .post-card,
[data-bs-theme="dark"] .sidebar-card,
[data-bs-theme="dark"] .edit-card,
[data-bs-theme="dark"] .finding-card,
[data-bs-theme="dark"] .job-card,
[data-bs-theme="dark"] .job-row,
[data-bs-theme="dark"] .hi-card,
[data-bs-theme="dark"] .ap-card,
[data-bs-theme="dark"] .jf-card,
[data-bs-theme="dark"] .apply-box,
[data-bs-theme="dark"] .up-card,
[data-bs-theme="dark"] .job-item {
    background: var(--fmn-surface) !important;
    border-color: var(--fmn-border) !important;
    color: var(--fmn-text);
}

/* slightly recessed surfaces */
[data-bs-theme="dark"] .section-card[style*="background:#f8faff"],
[data-bs-theme="dark"] .timeline-edit-item,
[data-bs-theme="dark"] .stat-box,
[data-bs-theme="dark"] .person-card,
[data-bs-theme="dark"] .completeness-bar,
[data-bs-theme="dark"] .filter-bar,
[data-bs-theme="dark"] .edit-tabs,
[data-bs-theme="dark"] .role-card,
[data-bs-theme="dark"] .pro-feat,
[data-bs-theme="dark"] .scan-row {
    background: var(--fmn-surface-2) !important;
    border-color: var(--fmn-border) !important;
}

[data-bs-theme="dark"] .edit-card-header,
[data-bs-theme="dark"] .edit-card-body {
    background: var(--fmn-surface) !important;
    border-color: var(--fmn-border) !important;
}

/* ---- Headings & strong text (override near-black inline colors) ---- */
[data-bs-theme="dark"] .section-title,
[data-bs-theme="dark"] .edit-card-header,
[data-bs-theme="dark"] .finding-title,
[data-bs-theme="dark"] .job-title,
[data-bs-theme="dark"] .sc-name,
[data-bs-theme="dark"] .skill-name,
[data-bs-theme="dark"] .tl-company,
[data-bs-theme="dark"] .form-label-custom,
[data-bs-theme="dark"] .stat-box .n,
[data-bs-theme="dark"] [style*="color:#0f172a"],
[data-bs-theme="dark"] [style*="color:#0F172A"] {
    color: var(--fmn-heading) !important;
}

/* mid-tone body text that would be too dark on a dark surface
   (note: blue pill text like #1e40af is intentionally left alone — those pills
   keep their light background in dark mode and must stay readable) */
[data-bs-theme="dark"] [style*="color:#1e293b"],
[data-bs-theme="dark"] [style*="color:#334155"] {
    color: var(--fmn-text) !important;
}

/* ---- Form controls ---- */
[data-bs-theme="dark"] .form-control-custom,
[data-bs-theme="dark"] .fc,
[data-bs-theme="dark"] .jb-input,
[data-bs-theme="dark"] .ta,
[data-bs-theme="dark"] .st-select,
[data-bs-theme="dark"] .share-url {
    background: var(--fmn-surface-2) !important;
    border-color: var(--fmn-border) !important;
    color: var(--fmn-heading) !important;
}

[data-bs-theme="dark"] .form-control-custom::placeholder,
[data-bs-theme="dark"] .fc::placeholder,
[data-bs-theme="dark"] .jb-input::placeholder,
[data-bs-theme="dark"] .ta::placeholder {
    color: #64748b !important;
}

/* ---- Empty-state cards / dashed boxes ---- */
[data-bs-theme="dark"] .empty-ap,
[data-bs-theme="dark"] .empty-jb,
[data-bs-theme="dark"] .empty-ma,
[data-bs-theme="dark"] .empty-mj,
[data-bs-theme="dark"] .empty-hi {
    background: var(--fmn-surface) !important;
    border-color: var(--fmn-border) !important;
}

/* ---- Footer ---- */
/* [data-bs-theme="dark"] footer {
    background: #060b16 !important;
} */

/* subtle dividers inside dark surfaces */
[data-bs-theme="dark"] hr {
    border-color: var(--fmn-border) !important;
}

/* ==========================================================================
   RESPONSIVE SAFETY  —  global guards against overflow / cramped mobile layout
   ========================================================================== */
* {
    min-width: 0;
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

/* `clip` (not `hidden`) so body doesn't become its own scroll container —
   `overflow-x: hidden` forces overflow-y to `auto`, which produces a second
   vertical scrollbar on top of the page's. clip prevents horizontal scroll
   without creating a scroll context. */
body {
    overflow-x: clip;
    max-width: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

img.avatar-preview,
img.avatar-ring,
.logo-ring img,
.job-logo,
.ma-logo,
.js-logo,
.ap-avatar {
    height: auto;
}

pre,
code {
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 640px) {
    /* collapse two/three-column custom form grids to one column everywhere */
    .form-row-grid,
    .grid2,
    .grid3,
    .role-grid,
    .role-switch,
    .stat-grid {
        grid-template-columns: 1fr !important;
    }

    /* JD board search collapses to a stack */
    .jb-search {
        grid-template-columns: 1fr !important;
    }

    /* keep section paddings comfortable but not huge on phones */
    .section-card,
    .edit-card-body,
    .js-body,
    .jf-body,
    .reg-body {
        padding: 18px !important;
    }

    /* tame oversized hero headings */
    .ats-hero h1,
    .jb-hero h1,
    .edit-hero h1 {
        font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
    }
}

@media (max-width: 480px) {
    /* action button rows wrap instead of overflowing */
    .profile-actions,
    .btn-stack,
    .d-flex.gap-2 {
        flex-wrap: wrap;
    }
}

/* Register role selector */
.role-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.role-card {
    border: 2px solid #e8edf5;
    border-radius: 14px;
    padding: 16px 14px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    position: relative;
    background: #fff;
}

.role-card:hover {
    border-color: #bfdbfe;
    background: #f8faff;
}

.role-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.role-card .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 9px;
    font-size: 1.3rem;
    background: #eff6ff;
    color: #2563eb;
    transition: all 0.15s;
}

.role-card .rt {
    font-weight: 700;
    font-size: 0.85rem;
    color: #0f172a;
    line-height: 1.25;
}

.role-card .rd {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 3px;
    line-height: 1.3;
}

.role-card.selected {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.16);
}

.role-card.selected .ic {
    background: #2563eb;
    color: #fff;
}

.role-card .check {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #2563eb;
    opacity: 0;
    transition: opacity 0.15s;
}

.role-card.selected .check {
    opacity: 1;
}

.form-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
}

.field-err {
    color: #ef4444;
    font-size: 0.78rem;
    margin-top: 4px;
}

@media (max-width: 560px) {
    .role-grid {
        grid-template-columns: 1fr;
    }
}

[data-bs-theme="dark"] .role-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] .role-card:hover {
    background: #f8faff;
}

[data-bs-theme="dark"] .role-card.selected {
    background: #eff6ff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12);
}

@media (max-width: 768px) {
    .site-footer {
        text-align: center;
        padding-top: 60px;
    }

    .social-links {
        justify-content: center;
    }

    .footer-links a {
        display: inline-block;
    }

    .footer-bottom {
        text-align: center !important;
    }
}

@media (max-width: 991px) {
    .footer-subscribe {
        margin-top: 1rem;
    }
}

/* ==========================================================================
   JOB BOARD REDESIGN (Adopts Home & About Us Design System)
   ========================================================================== */

.jb-page {
    background: #f8faff;
    min-height: 100vh;
    padding-bottom: 60px;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .jb-page {
    background: var(--bs-body-bg);
}

/* Hero Section */
.jb-hero {
    position: relative;
    padding: clamp(3.5rem, 9vw, 6rem) 0;
    background: #0b1f3a;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

[data-bs-theme="dark"] .jb-hero {
    background: #0b1f3a;
}

.jb-hero h1 {
    font-weight: 800;
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .jb-hero h1 {
    color: #ffffff;
}

.jb-hero .lead {
    color: #c7d4e6;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.6;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.8rem;
}

[data-bs-theme="dark"] .jb-hero .lead {
    color: #c7d4e6;
}

/* Hero children read light on the navy band (matches home hero) */
.jb-hero .badge-ai {
    background: rgba(255, 255, 255, 0.1);
    color: #cfe0ff;
    border-color: rgba(255, 255, 255, 0.18);
}
.jb-hero .lc-gradient-text {
    background: none;
    -webkit-text-fill-color: #7eb0ff;
    color: #7eb0ff;
}

/* Search Box Container */
.jb-search-wrap {
    max-width: 920px;
    margin: 0 auto;
}

.jb-search {
    background: #fff;
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    display: grid;
    grid-template-columns: 2fr 1.4fr 1.2fr auto;
    gap: 12px;
    position: relative;
    border: 1px solid var(--lc-line);
}

[data-bs-theme="dark"] .jb-search {
    background: #1a1f2e;
    border-color: #2d3e52;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.jb-input {
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    width: 100%;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: all 0.2s;
}

[data-bs-theme="dark"] .jb-input {
    background-color: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

.jb-input:focus {
    outline: none;
    border-color: var(--lc-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Main Content Wrapper */
.jb-content-container {
    max-width: 1040px;
    margin-top: 1rem;
}

.jb-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.jb-counter {
    font-weight: 700;
    color: var(--lc-ink);
    font-size: 1.05rem;
}

[data-bs-theme="dark"] .jb-counter {
    color: #f1f5f9;
}

/* Card Styling */
.job-card {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 20px;
    padding: 1.5rem;
    transition: all 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
}

[data-bs-theme="dark"] .job-card {
    background: #1a1f2e;
    border-color: #2d3e52;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.job-card:hover {
    border-color: #bfdbfe;
    box-shadow: 0 20px 35px rgba(37, 99, 235, 0.08);
    transform: translateY(-4px);
}

[data-bs-theme="dark"] .job-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.4);
}

.job-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    border: 1.5px solid var(--lc-line);
    flex-shrink: 0;
}

[data-bs-theme="dark"] .job-logo {
    border-color: #2d3e52;
}

.job-title {
    font-weight: 800;
    color: var(--lc-ink);
    font-size: 1.1rem;
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.15s ease;
}

[data-bs-theme="dark"] .job-title {
    color: #f1f5f9;
}

.job-title:hover {
    color: var(--lc-blue);
}

.job-company {
    font-size: 0.85rem;
    color: var(--lc-muted);
    font-weight: 600;
    margin-top: 2px;
}

/* Chips inside Cards */
.jb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.04);
    color: var(--lc-body);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

[data-bs-theme="dark"] .jb-chip {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}

.jb-chip i {
    color: var(--lc-muted);
}

.jb-chip.blue {
    background: rgba(37, 99, 235, 0.08);
    color: var(--lc-blue);
}

.jb-chip.blue i {
    color: var(--lc-blue);
}

[data-bs-theme="dark"] .jb-chip.blue {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

[data-bs-theme="dark"] .jb-chip.blue i {
    color: #93c5fd;
}

.jb-chip.green {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}

.jb-chip.green i {
    color: #16a34a;
}

[data-bs-theme="dark"] .jb-chip.green {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

[data-bs-theme="dark"] .jb-chip.green i {
    color: #86efac;
}

.hiring-tag {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: inline-block;
    vertical-align: middle;
}

[data-bs-theme="dark"] .hiring-tag {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.job-desc {
    font-size: 0.88rem;
    color: var(--lc-body);
    line-height: 1.6;
    margin: 12px 0 16px;
}

[data-bs-theme="dark"] .job-desc {
    color: #cbd5e1;
}

.job-date {
    font-size: 0.75rem;
    color: var(--lc-muted);
}

.jb-link {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lc-blue);
    text-decoration: none;
    transition: color 0.15s ease;
}

.jb-link:hover {
    color: var(--lc-violet);
}

/* Empty State */
.empty-jb {
    background: #fff;
    border: 2px dashed var(--lc-line);
    border-radius: 20px;
    padding: 60px 20px;
    text-align: center;
    color: var(--lc-muted);
    max-width: 600px;
    margin: 40px auto;
}

[data-bs-theme="dark"] .empty-jb {
    background: #1a1f2e;
    border-color: #2d3e52;
}

.empty-jb i {
    font-size: 3rem;
    color: var(--lc-muted);
    opacity: 0.7;
}

.empty-jb h5 {
    color: var(--lc-ink);
    font-weight: 700;
    margin-top: 15px;
}

[data-bs-theme="dark"] .empty-jb h5 {
    color: #f1f5f9;
}

/* Responsiveness adjustments for search bar */
@media (max-width: 991px) {
    .jb-search {
        grid-template-columns: 1fr;
        border-radius: 16px;
        padding: 0.75rem;
        gap: 8px;
    }

    .jb-search .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================================================
   Shared frontend page system (home/jobs UI flow)
   Reused by: tests, contact, learn, donate, login, register
   =========================================================== */
.fp-card {
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
    height: 100%;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

[data-bs-theme="dark"] .fp-card {
    background: #1a1f2e;
    border-color: #2d3e52;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.fp-card-hover:hover {
    transform: translateY(-4px);
    border-color: #bfdbfe;
    box-shadow: 0 20px 35px rgba(37, 99, 235, 0.08);
}

[data-bs-theme="dark"] .fp-card-hover:hover {
    border-color: #3b82f6;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.4);
}

.fp-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    color: #fff;
    background: var(--lc-grad);
    flex-shrink: 0;
}

.fp-input {
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    width: 100%;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: all 0.2s;
}

.fp-input:focus {
    outline: none;
    border-color: var(--lc-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.fp-input.is-invalid {
    border-color: #ef4444;
}

[data-bs-theme="dark"] .fp-input {
    background-color: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

/* FAQ / accordion in the shared page flow */
.fp-accordion {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--lc-line);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
}

.fp-accordion .accordion-item {
    background: #fff;
    border: none;
    border-top: 1px solid var(--lc-line);
}

.fp-accordion .accordion-item:first-child {
    border-top: none;
}

.fp-accordion .accordion-button {
    font-weight: 700;
    color: var(--lc-ink);
    background: #fff;
    padding: 1.1rem 1.4rem;
    box-shadow: none;
}

.fp-accordion .accordion-button:not(.collapsed) {
    color: var(--lc-blue);
    background: rgba(37, 99, 235, 0.05);
}

.fp-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.fp-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%232563eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.fp-accordion .accordion-body {
    color: var(--lc-body);
    padding: 0 1.4rem 1.2rem;
    line-height: 1.6;
}

[data-bs-theme="dark"] .fp-accordion {
    border-color: #2d3e52;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .fp-accordion .accordion-item {
    background: #1a1f2e;
    border-top-color: #2d3e52;
}

[data-bs-theme="dark"] .fp-accordion .accordion-button {
    background: #1a1f2e;
    color: #f1f5f9;
}

[data-bs-theme="dark"] .fp-accordion .accordion-button:not(.collapsed) {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
}

[data-bs-theme="dark"] .fp-accordion .accordion-body {
    color: #cbd5e1;
}

.fp-empty {
    background: #fff;
    border: 2px dashed var(--lc-line);
    border-radius: 20px;
    padding: 60px 20px;
    text-align: center;
    color: var(--lc-muted);
    max-width: 600px;
    margin: 40px auto;
}

[data-bs-theme="dark"] .fp-empty {
    background: #1a1f2e;
    border-color: #2d3e52;
}

.fp-empty i {
    font-size: 3rem;
    opacity: 0.7;
}

.fp-empty h5 {
    color: var(--lc-ink);
    font-weight: 700;
    margin-top: 15px;
}

[data-bs-theme="dark"] .fp-empty h5 {
    color: #f1f5f9;
}

input[type="password"]::-ms-reveal {
    display: none !important;
}

/* ============================================================
   The Developer School — global site theme (navy header/footer +
   light canvas + blue accent). Applied to every frontend page.
   ============================================================ */
:root {
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: #2563eb;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1d4ed8;
    --bs-link-hover-color-rgb: 29, 78, 216;

    --fmn-ink: #0f1f3d;
    --fmn-body: #475569;
    --fmn-muted: #8a96a8;
    --fmn-line: #e6eaf0;
    --fmn-soft: #f4f7fb;
    --fmn-blue: #2563eb;
    --fmn-blue-d: #1d4ed8;
    --fmn-navy: #0b1f3a;
}

body {
    background: var(--fmn-soft);
    color: var(--fmn-body);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Headings adopt the navy ink (components that need other colors set it explicitly) */
h1, h2, h3, h4, h5, h6 {
    color: var(--fmn-ink);
}

/* Buttons / accents map to the brand blue site-wide */
.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: #1d4ed8;
    --bs-btn-active-border-color: #1d4ed8;
    --bs-btn-disabled-bg: #2563eb;
    --bs-btn-disabled-border-color: #2563eb;
}
.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: #1d4ed8;
    --bs-btn-active-border-color: #1d4ed8;
}
.text-primary { color: #2563eb !important; }
.bg-primary { background-color: #2563eb !important; }
.btn { border-radius: 10px; }

/* Consistent clean card surface across the site */
.card {
    border: 1px solid var(--fmn-line);
    border-radius: 14px;
}

/* Reusable navy hero band for inner pages (matches the home hero) */
.page-hero {
    background: #0b1f3a;
    color: #fff;
    padding: clamp(3rem, 7vw, 5rem) 0;
}
.page-hero h1, .page-hero h2, .page-hero h3 { color: #fff; }
.page-hero p { color: #c7d4e6; }
.page-hero .lead { color: #c7d4e6; }

/* ==========================================================================
   GLOBAL BUTTON HOVER FIX
   Problem:  Bootstrap 5.3 .btn uses --bs-btn-hover-bg internally. When a
             custom class (lc-btn-grad, btn-subscribe, btn-white …) is used
             alongside .btn WITHOUT a Bootstrap colour variant, the hover bg
             defaults to white/transparent — breaking the design.
   Solution: 1) Set --bs-btn-hover-* CSS vars on every custom button class so
                Bootstrap's own :hover mechanism uses the correct values.
             2) Add a global catch-all that prevents ANY .btn from flipping
                its background to white on hover.
             3) Apply consistent subtle hover effects (opacity, shadow,
                transition) site-wide.
   ========================================================================== */

/* ---- Global transition on every button ---- */
.btn,
button,
input[type="submit"],
input[type="button"] {
    transition: opacity 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease !important;
}

/* ---- Catch-all: prevent Bootstrap's .btn from ever going white on hover ---- */
.btn:hover,
.btn:focus,
.btn:active {
    --bs-btn-hover-bg: var(--bs-btn-bg, inherit) !important;
    --bs-btn-hover-color: var(--bs-btn-color, inherit) !important;
    --bs-btn-hover-border-color: var(--bs-btn-border-color, inherit) !important;
    opacity: 0.92;
    transition: opacity 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease !important;
}

/* ---- .btn-primary ---- */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
    opacity: 0.92;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3) !important;
}

/* ---- .btn-outline-primary ---- */
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: rgba(37, 99, 235, 0.08) !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
    opacity: 0.92;
}

/* ---- .btn-secondary ---- */
.btn-secondary:hover,
.btn-secondary:focus {
    opacity: 0.92;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ---- .btn-success ---- */
.btn-success:hover,
.btn-success:focus {
    opacity: 0.92;
    box-shadow: 0 6px 16px rgba(25, 135, 84, 0.3) !important;
}

/* ---- .btn-outline-secondary ---- */
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: rgba(108, 117, 125, 0.08) !important;
    opacity: 0.92;
}

/* ---- .btn-outline-theme ---- */
.btn-outline-theme:hover,
.btn-outline-theme:focus {
    background-color: transparent !important;
    color: var(--nav-text) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    opacity: 0.92;
}

/* ---- .btn-light ---- */
.btn-light:hover,
.btn-light:focus {
    opacity: 0.92;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* ---- .lc-btn-grad  (Login, Register, Search, Post Job, Contact, etc.) ---- */
.lc-btn-grad {
    --bs-btn-bg: var(--lc-grad);
    --bs-btn-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--lc-grad);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--lc-grad);
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: transparent;
}
.lc-btn-grad:hover,
.lc-btn-grad:focus,
.lc-btn-grad:active {
    background: var(--lc-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
    opacity: 0.92;
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.35) !important;
    transform: translateY(-1px);
}

/* ---- .lc-btn-ghost ---- */
.lc-btn-ghost {
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-color: var(--lc-blue);
    --bs-btn-hover-border-color: var(--lc-blue);
}
.lc-btn-ghost:hover,
.lc-btn-ghost:focus {
    background: #fff !important;
    border-color: var(--lc-blue) !important;
    color: var(--lc-blue) !important;
    opacity: 0.92;
    transform: translateY(-1px);
}

/* ---- .btn-subscribe ---- */
.btn-subscribe {
    --bs-btn-bg: #2563eb;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #2563eb;
    --bs-btn-hover-color: #fff;
}
.btn-subscribe:hover,
.btn-subscribe:focus {
    background: #2563eb !important;
    color: #fff !important;
    opacity: 0.92;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3) !important;
}

/* ---- .btn-apply ---- */
.btn-apply:hover,
.btn-apply:focus {
    background: #2563eb !important;
    color: #fff !important;
    opacity: 0.92;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3) !important;
}

/* ---- .btn-hamburger ---- */
.btn-hamburger:hover,
.btn-hamburger:focus {
    opacity: 0.88;
    background: transparent !important;
}

/* ---- .btn-white (CTA sections, community, contact) ---- */
.btn-white,
.lc-cta-card .btn-white {
    --bs-btn-bg: #fff;
    --bs-btn-color: var(--lc-blue);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-color: var(--lc-blue);
}
.btn-white:hover,
.btn-white:focus,
.lc-cta-card .btn-white:hover,
.lc-cta-card .btn-white:focus {
    background: #fff !important;
    color: var(--lc-blue) !important;
    opacity: 0.92;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-1px);
}

/* ---- .join-wa-group (Community WhatsApp) — keep gradient, no white ---- */
.join-wa-group:hover,
.join-wa-group:focus {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(37, 211, 102, 0.35) !important;
}

/* ---- MCQ card CTA ---- */
.mcq-page .card-cta:hover,
.mcq-page .card-cta:focus {
    background: #2563eb !important;
    color: #fff !important;
    opacity: 0.92;
    transform: translateY(-1px);
}

/* ---- Catch-all: any bare .btn or <button> element ---- */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    opacity: 0.92;
}

/* ---- Dark-mode safety: never let hover go white on a dark canvas ---- */
[data-bs-theme="dark"] .btn:hover,
[data-bs-theme="dark"] .btn:focus,
[data-bs-theme="dark"] .btn:active {
    --bs-btn-hover-bg: var(--bs-btn-bg, inherit) !important;
    --bs-btn-hover-color: var(--bs-btn-color, inherit) !important;
    --bs-btn-hover-border-color: var(--bs-btn-border-color, inherit) !important;
}
[data-bs-theme="dark"] .lc-btn-grad:hover,
[data-bs-theme="dark"] .lc-btn-grad:focus {
    background: var(--lc-grad) !important;
    color: #fff !important;
    opacity: 0.92;
}
[data-bs-theme="dark"] .lc-btn-ghost:hover,
[data-bs-theme="dark"] .lc-btn-ghost:focus {
    background: #151f33 !important;
    color: #f1f5f9 !important;
    border-color: #26344d !important;
    opacity: 0.92;
}