.home-page {
    --primary-color: #0f2c63;
    --secondary-color: #1f4ea3;
    --accent-color: #f28a2e;
    --text-color: #1e293b;
    --light-bg: #f5f7fb;
    background:
        radial-gradient(circle at 6% 2%, rgba(31, 78, 163, 0.08) 0, transparent 30%),
        radial-gradient(circle at 95% 0, rgba(242, 138, 46, 0.08) 0, transparent 28%),
        #f5f7fb;
    color: var(--text-color);
    font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
}

.home-page > header {
    --header-deep: #f5f9ff;
    --header-deep-2: #fff9f1;
    --header-line: #dbe5f3;
    --header-link: #27364a;
    --header-link-active: #f28a2e;
    --header-surface: #ffffff;
    --header-login-start: #0f172a;
    --header-login-end: #1f3658;
    --header-soft-blue: #edf3ff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.home-page .top-bar {
    background: linear-gradient(100deg, #f6f9ff 0%, #fff8ee 100%);
    color: #334155;
    border-bottom: 1px solid #e3ebf6;
    padding: 11px 0;
}

.home-page .top-bar .container {
    justify-content: flex-start;
    gap: 14px;
}

.home-page .top-links {
    gap: 10px;
}

.home-page .top-links > a {
    color: #334155;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #d6e2f0;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 10px rgba(15, 23, 42, 0.04);
}

.home-page .top-links > a i {
    color: #f28a2e;
    margin-right: 6px;
}

.home-page .top-links > a:hover {
    color: #0f2c63;
    background: #f3f7ff;
    border-color: #c9d9ec;
}

.home-page .top-links > #menu-btn {
    color: #b45309;
    border-color: #f4cda6;
    background: #fff7ed;
}

.home-page .top-links > #menu-btn:hover {
    color: #9a3412;
    border-color: #f2b577;
    background: #ffedd5;
}

.home-page .top-links .user-profile-btn {
    border: 0;
    background: transparent;
    padding: 0 4px !important;
}

.home-page .user-profile-btn {
    color: #334155 !important;
}

.home-page .user-profile-btn i {
    color: #1f4ea3 !important;
}

.home-page .user-profile-btn:hover {
    color: #1f4ea3 !important;
}

.home-page .btn-login {
    background: linear-gradient(135deg, #0f172a 0%, #1f3658 100%) !important;
    color: #ffffff !important;
    border: 1px solid #0f172a !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22);
}

.home-page .btn-login:hover {
    background: linear-gradient(135deg, #1e293b 0%, #2a4669 100%) !important;
    border-color: #1e293b !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.26);
}

.home-page .social-icons {
    display: none;
}

.home-page .user-dropdown {
    background: #ffffff;
    border: 1px solid #dbe4f2;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
}

.home-page .user-dropdown a {
    color: #334155 !important;
    border-bottom: 1px solid #edf2f8 !important;
}

.home-page .user-dropdown a:hover {
    background: #f5f8ff !important;
    color: #1f4ea3 !important;
}

.home-page .main-header {
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    border-top: 1px solid #edf2f8;
    border-bottom: 1px solid #e6eef8;
    padding: 15px 0 17px;
}

.home-page .logo h2 {
    color: #0f2c63;
    font-family: var(--font-brand);
    font-size: clamp(1rem, 2vw, 1.55rem);
    letter-spacing: 0.25px;
}

.home-page .logo span {
    color: #f28a2e;
    font-family: var(--font-ui);
    letter-spacing: 0.05em;
}

.home-page .navbar a {
    font-family: var(--font-ui);
    color: #1f2937;
    font-weight: 700;
    font-size: 14px;
    border-radius: 12px;
}

.home-page .navbar > ul > li > a::after {
    background: #1f4ea3;
    bottom: -3px;
    height: 2px;
}

.home-page .navbar > ul > li > a:hover,
.home-page .navbar > ul > li > a.active {
    color: #1f4ea3;
    background: #eef3ff;
}

.home-page .navbar .dropdown-menu {
    border: 1px solid #dbe4f2;
    border-top: 3px solid #f28a2e;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
}

.home-page .navbar .dropdown-menu a {
    color: #334155;
}

.home-page .navbar .dropdown-menu a:hover {
    color: #1f4ea3;
    background: #f5f8ff;
}

.home-page .mobile-menu-icon {
    color: #1f4ea3;
}

.home-page footer {
    margin-top: 0;
    background: linear-gradient(145deg, #0f2c63 0%, #0f172a 100%);
}

.home-page footer::before {
    background:
        radial-gradient(circle at 10% 22%, rgba(242, 138, 46, 0.2), transparent 42%),
        radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.1), transparent 35%),
        radial-gradient(circle at 52% 85%, rgba(31, 78, 163, 0.36), transparent 46%);
}

.home-page .footer-cta {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.home-page .btn-footer-cta {
    background: #f28a2e;
    color: #0f172a;
}

.home-page .btn-footer-cta:hover {
    background: #ffaa57;
}

.home-page .footer-col h3 span,
.home-page .footer-links a::before {
    color: #f28a2e;
}

.home-page .footer-social a:hover {
    color: #0f2c63;
}

@media (max-width: 1024px) {
    .home-page .top-bar .container {
        justify-content: flex-start;
    }

    .home-page .user-dropdown {
        left: 0;
        right: auto;
        width: min(320px, calc(100vw - 28px));
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .home-page .main-header {
        padding: 14px 0;
    }

    .home-page .main-header .container {
        justify-content: flex-start;
        gap: 8px;
    }

    .home-page .logo {
        flex: 1 1 auto;
        margin-right: auto;
        min-width: 0;
    }

    .home-page .logo .brand-wordmark {
        display: flex;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(0.78rem, 2.8vw, 0.95rem);
        letter-spacing: 0.03em;
        gap: 8px;
    }

    .home-page .logo .brand-wordmark::before {
        width: 20px;
        height: 20px;
    }

    .home-page .logo h2 {
        font-size: 1rem;
    }

    .home-page .mobile-login-btn {
        background: #0f172a !important;
        border-color: #0f172a !important;
        color: #ffffff !important;
        margin-left: auto;
        order: 2;
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 7px 12px !important;
        font-size: 12px;
    }

    .home-page .mobile-menu-icon {
        order: 3;
    }

    .home-page .navbar {
        border-color: #dbe4f2;
    }

    .home-page .navbar .dropdown-menu {
        background: #f5f8ff;
    }

    .home-page footer {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 480px) {
    .home-page .logo .brand-wordmark {
        font-size: clamp(0.72rem, 2.7vw, 0.86rem);
    }

    .home-page .mobile-login-btn {
        padding: 6px 10px !important;
        font-size: 11px;
    }
}