/* =============================================================================
   Sun Stack — small companion layer for the ThemeForest "Jobs Portal" theme
   (assets/css/tpl-theme.css, ported verbatim from the template's main.css).
   Only classes that the template stylesheet does not itself define are added
   here, matched to the template's values. Content/logic are unchanged.
   ============================================================================= */

/* =============================================================================
   Hero visual — clean CSS mockup instead of the composite hero-image.png.
   The old banner PNG shipped with its own blank card placeholders baked in,
   which overlapped the illustration once the HTML floating cards were drawn on
   top. The mockup below is built from real markup so nothing overlaps; the two
   floating cards are the only cards and are anchored to the mockup's corners.
   ============================================================================= */
.hero-visual {
    position: relative;
    padding: 28px 22px 40px 0;
}

/* "Browser window" mockup holding a workplace photo. */
.hero-mockup {
    position: relative;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}
.hero-mockup__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 18px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}
.hero-mockup__bar span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #cbd5e1;
}
.hero-mockup__bar span:first-child { background: #f87171; }
.hero-mockup__bar span:nth-child(2) { background: #fbbf24; }
.hero-mockup__bar span:nth-child(3) { background: #34d399; }
.hero-mockup__body {
    position: relative;
    aspect-ratio: 16 / 11;
    background: linear-gradient(160deg, #eff6ff 0%, #ecfdf5 55%, #ffffff 100%);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hero-mockup__search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #94a3b8;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.hero-mockup__search i { color: #2563eb; }
.hero-mockup__cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}
.hero-mockup__job {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.09);
}
.hero-mockup__job-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #dcfce7;
    color: #16a34a;
    flex: 0 0 36px;
}
.hero-mockup__job-logo--amber { background: #fef3c7; color: #d97706; }
.hero-mockup__job-logo--violet { background: #ede9fe; color: #7c3aed; }
.hero-mockup__job-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.hero-mockup__job-text strong { font-size: 0.85rem; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-mockup__job-text small { font-size: 0.72rem; color: #64748b; }
.hero-mockup__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(37, 99, 235, 0.95);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}
.hero-mockup__chip--alt {
    background: rgba(34, 197, 94, 0.95);
    box-shadow: 0 8px 18px rgba(34, 197, 94, 0.28);
}
.hero-mockup__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

/* Floating information cards — anchored to the mockup corners, never on top of
   the illustration's subject. */
.hero-visual .hero-floating-card {
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
}
.hero-floating-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #dbeafe;
    color: #2563eb;
    font-size: 1rem;
    flex: 0 0 42px;
}
.hero-floating-card__icon--green { background: #dcfce7; color: #16a34a; }
.hero-floating-card__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.hero-floating-card .card-label { font-size: 0.95rem; }
.hero-floating-card .card-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.hero-card-top { top: -8px; left: -18px; bottom: auto; right: auto; }
.hero-card-bottom { bottom: 8px; right: -14px; top: auto; left: auto; }

/* Legacy alias kept so any earlier markup still maps to the illustration. */
.hero-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

/* Job card (template .jobint equivalent, extended with salary/tag row). */
.job-card-tpl {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid #fff;
    transition: 0.4s ease-in-out;
    height: 100%;
}
.job-card-tpl:hover {
    border-bottom-color: #263bd6;
    box-shadow: 0 10px 30px rgba(38, 59, 214, 0.14);
}
.job-card-head {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.job-card-cta { margin-left: auto; }
.job-logo {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f6f6f6;
    overflow: hidden;
    font-weight: 700;
    color: #263bd6;
}
.job-logo img { width: 100%; height: 100%; object-fit: contain; }
.job-card-info { min-width: 0; }
.job-card-info h5 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; }
.job-card-info h5 a { color: #0f172a; }
.job-card-info h5 a:hover { color: #263bd6; }
.job-card-info .job-company { color: #666; font-size: 0.9rem; margin-bottom: 4px; }
.job-card-info .job-loc { color: #999; font-size: 0.82rem; }
.job-type {
    display: inline-block;
    background: #eaf1ff;
    color: #263bd6;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
}
.job-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}
.job-tag {
    background: #f6f6f6;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}
.job-salary { color: #263bd6; font-size: 0.82rem; font-weight: 600; }
.job-card-tpl--compact .job-card-head { align-items: center; }

/* Template outline "Apply Now" button equivalent. */
.applybtn-tpl {
    background: #fff;
    color: #263bd6;
    font-weight: 600;
    padding: 9px 15px;
    border: 1px solid #263bd6;
    border-radius: 999px;
    white-space: nowrap;
}
.applybtn-tpl:hover { background: #263bd6; color: #fff; }

/* Ensure the public shell never inherits the old glass/gradient atmosphere. */
.tpl-header ~ * { box-sizing: border-box; }
body.public-body { background: #fff !important; background-image: none !important; }

/* The template's mobile menu toggles .mobile-menu via its script; give the
   panel a sane default so it works even before JS runs. */
@media (max-width: 991.98px) {
    .main-navbar .mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        max-width: 85vw;
        height: 100vh;
        padding: 24px;
        background: #fff;
        box-shadow: -10px 0 30px rgba(15, 23, 42, 0.12);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        z-index: 1050;
    }
    .main-navbar .mobile-menu.show { transform: translateX(0); }
    .mobile-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 1040; }
    .mobile-menu-overlay.show { display: block; }
}/* Hero responsive behaviour — keep the floating cards clear of the mockup so
   nothing overlaps when the hero stacks on smaller screens. */
@media (max-width: 991.98px) {
    .hero-visual {
        padding: 26px 0 34px;
        max-width: 460px;
        margin: 40px auto 0;
    }
    .hero-visual .hero-floating-card {
        left: auto;
        right: auto;
        transform: none;
    }
    .hero-card-top { top: -14px; left: -6px; }
    .hero-card-bottom { bottom: -14px; right: -6px; }
}
@media (max-width: 575.98px) {
    .hero-visual { padding: 18px 0 22px; }
    .hero-visual .hero-floating-card {
        padding: 12px 15px;
        gap: 10px;
        border-radius: 16px;
    }
    .hero-floating-card__icon { width: 36px; height: 36px; flex-basis: 36px; }
    .hero-floating-card .card-label { font-size: 0.85rem; }
    .hero-floating-card .card-value { font-size: 0.72rem; }
    .hero-card-top { top: -10px; left: -2px; }
    .hero-card-bottom { bottom: -10px; right: -2px; }
}/* =============================================================================
   Sun Stack additions
   (a) top action bar in the public header
   (b) large Categories media cards
   (c) a restrained red accent layered over the template's indigo palette
   ============================================================================= */

/*----
   (a) TOP ACTION BAR — employer registration / job seeker registration / find jobs
----*/
.tpl-header .tp-topbar {
    background: #0f172a;
    color: #cbd5e1;
    font-size: 0.82rem;
}
.tpl-header .tp-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    flex-wrap: wrap;
}
.tpl-header .tp-topbar__contact,
.tpl-header .tp-topbar__meta {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.tpl-header .tp-topbar a {
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color 0.2s ease;
}
.tpl-header .tp-topbar a i { color: var(--jp-red); }
.tpl-header .tp-topbar a:hover { color: #ffffff; }
.tpl-header .tp-topbar a:hover i { color: #ff6b5e; }
@media (max-width: 767.98px) {
    .tpl-header .tp-topbar { display: none; }
}

/*----
   (b) CATEGORIES — large media cards (photo fills the card top)
----*/
.category-card .category-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #f1f5f9;
}
.category-card .category-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.category-card:hover .category-media img { transform: scale(1.06); }
.category-card .category-media__tag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.category-card .category-body { text-align: left; }
.category-card .category-body h5 { margin-bottom: 8px; }
.category-card .category-body p { color: #666; font-size: 0.92rem; margin-bottom: 14px; }
.category-card .category-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--jp-red);
    font-size: 0.9rem;
}
.category-card .category-count i { color: var(--jp-red); transition: transform 0.2s ease; }
.category-card:hover .category-count i { transform: translateX(4px); }

/*----
   (c) RED ACCENT — a light touch over the template's indigo language.
   Defined once here and applied where it reads best, never overwhelming.
----*/
:root,
html[data-theme="red"],
html[data-theme="blue"] {
    --jp-red: #d42a1f;
    --jp-red-dark: #b02219;
    --jp-red-soft: rgba(212, 42, 31, 0.10);
    --jp-red-glow: rgba(212, 42, 31, 0.24);
}

/* Section eyebrows: the small uppercase line above every section heading. */
.titleTop .subtitle { color: var(--jp-red); }

/* Heading accent word (template uses indigo <span>). */
.titleTop h3 span { color: var(--jp-red); font-weight: 600; }

/* Primary buttons: red fill instead of the flat blue. */
.btn-primary,
.btn-jp,
body .experience-public .portal-btn--primary,
.portal-btn--primary {
    background: var(--jp-red) !important;
    background-image: none !important;
    border-color: var(--jp-red) !important;
    box-shadow: 0 10px 22px var(--jp-red-glow) !important;
}
.btn-primary:hover,
.btn-jp:hover,
body .experience-public .portal-btn--primary:hover,
.portal-btn--primary:hover {
    background: var(--jp-red-dark) !important;
    border-color: var(--jp-red-dark) !important;
}

/* Outline / ghost buttons pick up the red accent. */
.btn-outline,
.btn-outline-primary,
.applybtn-tpl,
.portal-btn--ghost {
    border-color: var(--jp-red) !important;
    color: var(--jp-red) !important;
}
.btn-outline:hover,
.btn-outline-primary:hover,
.applybtn-tpl:hover,
.portal-btn--ghost:hover {
    background: var(--jp-red) !important;
    border-color: var(--jp-red) !important;
    color: #fff !important;
}

/* Links + arrows (template indigo stays; only call-to-action arrows go red). */
.link-arrow,
.hero-link { color: var(--jp-red); }
.link-arrow i,
.hero-link i { color: var(--jp-red); }
.link-arrow:hover,
.hero-link:hover { color: var(--jp-red-dark); }

/* Hero: badge + search button + stat value. */
.hero-badge { color: var(--jp-red) !important; background: var(--jp-red-soft) !important; }
.hero-badge i { color: var(--jp-red); }
.hero-submit {
    background: var(--jp-red) !important;
    border-color: var(--jp-red) !important;
    box-shadow: 0 12px 25px var(--jp-red-glow) !important;
}
.hero-submit:hover { background: var(--jp-red-dark) !important; border-color: var(--jp-red-dark) !important; }
.hero-stat { box-shadow: inset 0 0 0 1px var(--jp-red-soft) !important; }
.stat-value { color: var(--jp-red) !important; }

/* Cards: red hover border + red job-type pill + red salary. */
.job-card-tpl:hover { border-bottom-color: var(--jp-red); box-shadow: 0 10px 30px var(--jp-red-glow); }
.job-type { background: var(--jp-red-soft); color: var(--jp-red); }
.job-salary { color: var(--jp-red); }
.job-logo { color: var(--jp-red); }

/* Category cards. */
.category-card:hover { border-color: var(--jp-red); }
.category-media__tag i { color: #ff8e76; }

/* Active nav emphasis. */
.main-navbar .main-menu .nav-link:hover,
.main-navbar .main-menu .nav-link.active { color: var(--jp-red) !important; }

/* Subscribe / CTA band — proper card, no red top rule. */
.subscribe-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    background: #ffffff;
    border: 1px solid rgba(59, 110, 246, 0.16);
    border-radius: 22px;
    padding: 36px 40px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
}
.subscribe-box h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
}
.subscribe-box p { color: #5b6472; margin: 0; }
.subscribe-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767.98px) {
    .subscribe-box { padding: 26px 22px; border-radius: 18px; }
    .subscribe-box h3 { font-size: 1.5rem; }
    .subscribe-actions { width: 100%; }
    .subscribe-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* Footer link hover. */
.footerWrap .quicklinks a:hover,
.footerWrap .social a:hover { color: var(--jp-red) !important; border-color: var(--jp-red); }

/* =============================================================================
   Sun Stack — homepage refinements
   (d) How It Works cards
   (e) footer recolour (lighter, readable, theme-consistent)
   (f) lighter glassy blue palette
   (g) Popular Industries pill section
   ============================================================================= */

/*----
   (d) HOW IT WORKS — real card view with a step badge
----*/
.howit-section { background: linear-gradient(90deg, #f8fafc 0%, #fff7f6 100%); }
.howit-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 40px 28px 32px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
}
.howit-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--jp-red), #ff8e76);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.howit-card:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(15, 23, 42, 0.12); border-color: rgba(212, 42, 31, 0.22); }
.howit-card:hover::after { opacity: 1; }
.howit-card .howit-step {
    position: absolute;
    top: 18px;
    right: 22px;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(212, 42, 31, 0.10);
}
.howit-card .howit-icon {
    width: 92px;
    height: 92px;
    border-radius: 22px;
    background: linear-gradient(145deg, #fff2f1 0%, #ffe7e5 100%);
    box-shadow: 0 12px 26px rgba(212, 42, 31, 0.16);
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.howit-card .howit-icon i { font-size: 38px; color: var(--jp-red); }
.howit-card h4 { font-size: 1.25rem; font-weight: 700; color: #0f172a; }
.howit-card p { color: #5b6472; }
.howit-card .howit-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-weight: 600;
    color: var(--jp-red);
    text-decoration: none;
}
.howit-card .howit-link i { transition: transform 0.2s ease; }
.howit-card:hover .howit-link i { transform: translateX(4px); }

/*----
   (e) FOOTER — clean white surface with dark, readable text
----*/
.footerWrap {
    background: #ffffff;
    border-top: 4px solid var(--jp-red);
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.05);
}
.footerWrap h5 { color: #0f172a; letter-spacing: 0.01em; }
.footerWrap p { color: #5b6472; }
.footerWrap .quicklinks li a { color: #5b6472; }
.footerWrap .quicklinks li a::before { color: var(--jp-red); }
.footerWrap .quicklinks li a:hover { color: var(--jp-red); }
.footerWrap .social a { color: #64748b; }
.footerWrap .social a:hover { color: var(--jp-red); }
.footerWrap .ft-logo img { max-height: 42px; width: auto; }
.copyright {
    background: #f6f8fc;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.copyright .bttxt { color: #5b6472; }

/* The footer also lists the information and policy pages, which makes the
   "Account & Policies" column the longest one. Spacing only: the grid and
   colours above are unchanged. */
.footerWrap .quicklinks { margin-bottom: 0; }
@media (max-width: 767.98px) {
    .footerWrap .quicklinks li a { padding: 6px 0; }
}

/*----
   (f) LIGHTER GLASSY BLUE — public-surface touches
   (The blue token remap lives in assets/css/red-accent.css so it applies to the
   candidate/employer and admin panels too; here we only add public-page glass.)
----*/
.hero-stat {
    background: rgba(236, 244, 255, 0.75) !important;
    box-shadow: inset 0 0 0 1px rgba(59, 110, 246, 0.22) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.stat-value { color: #2f5fdc !important; }
.hero-submit { background: #3b6ef6 !important; border-color: #3b6ef6 !important; box-shadow: 0 12px 25px rgba(59, 110, 246, 0.30) !important; }
.hero-submit:hover { background: #2f5fdc !important; border-color: #2f5fdc !important; }

/*----
   (g) POPULAR INDUSTRIES — pill row (icon circle + label + count)
----*/
.industry-section { background: #ffffff; }
.industry-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 18px;
    margin-top: 8px;
}
.industry-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #eef3fd 0%, #f3f7fe 100%);
    border: 1px solid rgba(59, 110, 246, 0.10);
    border-radius: 999px;
    padding: 12px 26px 12px 12px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.industry-pill:hover {
    transform: translateY(-3px);
    background: #ffffff;
    border-color: rgba(212, 42, 31, 0.35);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}
.industry-pill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    color: #2563eb;
    font-size: 1.05rem;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.16);
    flex: 0 0 48px;
    transition: color 0.2s ease, background 0.2s ease;
}
.industry-pill:hover .industry-pill__icon { color: #ffffff; background: var(--jp-red); }
.industry-pill__label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #1e3a8a;
    font-size: 0.98rem;
    white-space: nowrap;
}
.industry-pill__label span { color: #2563eb; }
.industry-pill:hover .industry-pill__label { color: #0f172a; }

@media (max-width: 575.98px) {
    .industry-pill { padding: 10px 18px 10px 10px; gap: 10px; }
    .industry-pill__icon { width: 40px; height: 40px; flex-basis: 40px; font-size: 0.95rem; }
    .industry-pill__label { font-size: 0.9rem; }
}/* =============================================================================
   Sun Stack — homepage CTA duo + home quick bar + registration accents
   ============================================================================= */

/*---- (h) CTA DUO — two big rounded promo cards under the hero -------------*/
.cta-duo-section { padding: 0 0 10px; background: #ffffff; }
.cta-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: -6px;
}
.cta-duo__card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 150px;
    padding: 30px 40px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-duo__card:hover { transform: translateY(-4px); }
.cta-duo__card--blue {
    background: linear-gradient(135deg, #3b6ef6 0%, #2f5fdc 100%);
    box-shadow: 0 20px 45px rgba(59, 110, 246, 0.30);
}
.cta-duo__card--red {
    background: #d62828;
    background-image: none;
    box-shadow: 0 20px 45px rgba(214, 40, 40, 0.30);
}
.cta-duo__card--red:hover {
    background: #c01f1f;
    background-image: none;
}
.cta-duo__copy h3 {
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
}
.cta-duo__copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}
.cta-duo__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.9rem;
    transition: background 0.25s ease, transform 0.25s ease;
}
.cta-duo__card:hover .cta-duo__icon { background: rgba(255, 255, 255, 0.28); transform: scale(1.06); }
@media (max-width: 767.98px) {
    .cta-duo { grid-template-columns: 1fr; gap: 18px; margin-top: 8px; }
    .cta-duo__card { border-radius: 26px; padding: 24px 26px; min-height: 0; }
    .cta-duo__copy h3 { font-size: 1.35rem; }
    .cta-duo__icon { width: 60px; height: 60px; font-size: 1.5rem; }
}

/*---- (i) HOME QUICK BAR — top ribbon, lit from the upper side.
   Sits at the very top of the homepage hero as a bright, glowing bar so the
   top of the page no longer reads as empty. Themed (white surface + red icons),
   never black. -------------------------------------------------------------*/
.hero-section { position: relative; overflow: hidden; }
/* Bright, upper-side-lit band: light washes down from the top edge. */
.hero-section {
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, #f4f8ff 0%, #f6fbff 42%, #ffffff 100%) !important;
    padding-top: 96px;
}
/* Upper-side light: a soft glow washing down from the top edge. */
.hero-section::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -220px;
    width: min(1100px, 120vw);
    height: 420px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
    z-index: 0;
}
.hero-section .container { position: relative; z-index: 1; }

.hero-section .home-quickbar {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px 14px;
    margin: 0 auto 42px;
    padding: 16px 22px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 110, 246, 0.18);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 14px 34px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 1180px;
    width: 100%;
}
/* SunStack brand lockup, pinned to the left of the ribbon. */
.hero-section .home-quickbar__brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding-right: 16px;
    margin-right: 4px;
    text-decoration: none;
    border-right: 1px solid rgba(15, 23, 42, 0.10);
    flex: 0 0 auto;
}
.hero-section .home-quickbar__brand .ssx-brand__mark { width: 2.6rem; height: 2.6rem; }
.hero-section .home-quickbar__brand .ssx-brand__mark svg { width: 62%; height: 62%; }
.hero-section .home-quickbar__brand-text {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #17201e;
    line-height: 1;
}
.hero-section .home-quickbar__brand-text span { color: var(--jp-red, #d42a1f); }
.hero-section .home-quickbar__main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}
.hero-section .home-quickbar__links {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}
/* The bright highlight along the top edge — the "lit from above" cue. */
.hero-section .home-quickbar::before {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    top: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--jp-red), #ff8e76, var(--jp-red), transparent);
    opacity: 0.9;
}
/* Small label so the ribbon reads as a prompt, not a stray row. */
.hero-section .home-quickbar__label {
    width: 100%;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a94a6;
    margin: 0 0 2px;
}
.hero-section .home-quickbar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.1;
    white-space: nowrap;
    flex: 0 0 auto;
    color: #2f5fdc;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid rgba(59, 110, 246, 0.18);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-section .home-quickbar__item i {
    color: var(--jp-red);
    width: 16px;
    text-align: center;
}
/* Hover keeps the white pill — no solid red fill. Just a soft red ring and a
   gentle lift, so the buttons stay consistent with their resting look. */
.hero-section .home-quickbar__item:hover,
.hero-section .home-quickbar__item:focus-visible {
    background: #ffffff;
    border-color: rgba(212, 42, 31, 0.55);
    color: #2f5fdc;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(212, 42, 31, 0.14);
}
.hero-section .home-quickbar__item:hover i,
.hero-section .home-quickbar__item:focus-visible i { color: var(--jp-red); }
.hero-section .home-quickbar__item--muted { color: #5b6472; border-color: #e2e8f0; }
.hero-section .home-quickbar__dropdown { position: relative; }
.hero-section .home-quickbar__dropdown > .home-quickbar__item::after {
    display: inline-block;
    margin-left: .35rem;
    vertical-align: .18em;
    content: "";
    border-top: .3em solid currentColor;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
.hero-section .home-quickbar__dropdown .dropdown-menu {
    min-width: 190px;
    margin-top: .55rem;
    padding: .45rem 0;
    border: 1px solid rgba(59, 110, 246, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .16);
}
.hero-section .home-quickbar__dropdown .dropdown-item {
    padding: .55rem 1rem;
    color: #334155;
    font-size: .86rem;
    font-weight: 650;
}
.hero-section .home-quickbar__dropdown .dropdown-item:hover,
.hero-section .home-quickbar__dropdown .dropdown-item:focus {
    color: #1d4ed8;
    background: rgba(59, 110, 246, .09);
}
@media (max-width: 991.98px) {
    .hero-section .home-quickbar__brand { border-right: 0; padding-right: 0; margin-right: 0; }
    .hero-section .home-quickbar__label { text-align: left; }
    /* One row that scrolls sideways rather than wrapping onto a second line. */
    .hero-section .home-quickbar { flex-wrap: nowrap; }
    .hero-section .home-quickbar__main {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .hero-section .home-quickbar__main::-webkit-scrollbar { display: none; }
}
@media (max-width: 767.98px) {
    .hero-section .home-quickbar {
        border-radius: 26px;
        margin-bottom: 30px;
        padding: 12px 14px;
        justify-content: flex-start;
    }
    .hero-section .home-quickbar__brand .ssx-brand__mark { width: 2.1rem; height: 2.1rem; }
    .hero-section .home-quickbar__brand-text { font-size: 1.1rem; }
    .hero-section .home-quickbar__item { font-size: 0.78rem; padding: 8px 12px; gap: 5px; }
    .hero-section .home-quickbar__item i { width: 14px; }
}