:root {
    --primary-color: #4f46e5;
    --primary-dark: #4338ca;
    --accent-color: #f59e0b;
    --light-gray-bg: #f8f9fc;
    --accent-secondary: #eef2ff;
    --text-dark: #1e2432;
    --text-light: #6b7280;
    --card-border-color: #eef0f4;
    --card-shadow: 0 4px 16px rgba(17, 24, 39, 0.06);
    --card-hover-shadow: 0 14px 30px rgba(79, 70, 229, 0.14);
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-dark);
}

.section-padding {
    padding: 80px 0;
}

.section-heading {
    margin-bottom: 56px;
    text-align: center;
}

.section-eyebrow {
    display: inline-block;
    background: var(--accent-secondary);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.section-heading h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.section-heading p {
    font-size: 16px;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.btn-primary-custom {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    padding: 12px 34px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
}

.btn-primary-custom:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.32);
}

/* Hero Section */
.hero-section {
    position: relative;
    background: #f4f5fb;
    padding: 110px 0 40px;
    color: var(--text-dark);
    overflow: hidden;
}

.hero-photo-col {
    position: relative;
    z-index: 1;
}

.hero-photo-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(30, 27, 75, 0.16);
    border: 6px solid #fff;
}

.hero-photo-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 55%, rgba(15, 23, 42, 0.35) 100%);
    pointer-events: none;
}

.hero-photo-frame img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.hero-badge {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.16);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
    max-width: calc(100% - 24px);
}

.hero-badge .icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.hero-badge .num {
    display: block;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    color: var(--text-dark);
}

.hero-badge .label {
    display: block;
    font-size: 11px;
    color: var(--text-light);
    white-space: nowrap;
}

.hero-badge-top {
    top: 22px;
    right: 22px;
}

.hero-badge-top .icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.hero-badge-bottom {
    bottom: -22px;
    left: 24px;
}

.hero-badge-bottom .icon {
    background: linear-gradient(135deg, var(--primary-color), #6366f1);
}

.hero-text-col {
    position: relative;
    z-index: 1;
    text-align: left;
}

.hero-text-col h1 {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
    color: var(--text-dark);
}

.hero-text-col h1 .accent {
    color: var(--accent-color);
}

.hero-text-col p.hero-lead {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 22px;
    max-width: 480px;
    font-weight: 400;
}

.hero-meta-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--primary-color);
    background: var(--accent-secondary);
    border-radius: 999px;
    padding: 8px 16px 8px 12px;
    margin-bottom: 20px;
}

.hero-meta-line i {
    width: 22px;
    height: 22px;
    min-width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
}

.hero-search-bar {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--card-border-color);
    border-radius: 999px;
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.08), 0 20px 40px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    margin-bottom: 18px;
    padding: 5px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.hero-search-bar:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--accent-secondary), 0 20px 40px rgba(15, 23, 42, 0.12);
}

.hero-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    /* Was flex:1 (flex-basis 0%), which lost a width fight against the location segment's 190px
       basis and could shrink to near-nothing at in-between widths — visually merging the search
       icon and location pin together with no gap, so it looked like one field instead of two and
       people ended up typing their keyword into the location input by mistake. A real basis plus a
       floor stops that regardless of viewport width. */
    flex: 1.3 1 200px;
    min-width: 140px;
}

.hero-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: 3px;
    border-radius: 50%;
    background: var(--accent-secondary);
    color: var(--primary-color);
    font-size: 14px;
    flex-shrink: 0;
}

.hero-search-bar input[type="text"] {
    border: none;
    background: transparent;
    padding: 12px 34px 12px 14px;
    flex: 1;
    outline: none;
    font-size: 14.5px;
    min-width: 0;
}

.hero-search-clear {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-light);
    font-size: 12px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.hero-search-clear:hover {
    background: var(--card-border-color);
    color: var(--text-dark);
}

.hero-search-clear.show {
    display: flex;
}

.hero-search-bar select {
    border: none;
    border-left: 1px solid var(--card-border-color);
    padding: 12px 16px;
    background: #fff;
    font-size: 14px;
    outline: none;
    color: var(--text-light);
    cursor: pointer;
}

.hero-search-location-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 190px;
    min-width: 130px;
    border-left: 1px solid var(--card-border-color);
}

.hero-location-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    color: var(--text-light);
    font-size: 13px;
    flex-shrink: 0;
    padding-left: 14px;
}

.hero-search-bar input[type="text"]#heroLocationInput {
    padding-left: 6px;
}

.hero-location-suggestions {
    display: none;
    /* Fixed (not absolute) and positioned via JS from the location input's own live screen
       coordinates (top AND left). This box lives outside <form class="hero-search-bar">, which
       clips overflow to keep the pill's rounded corners, so this also isn't invisibly clipped —
       but "top: 100%" would still be relative to the whole .hero-search-wrap, not just the
       location segment, which on mobile (fields stacked into separate rows) put it below the
       entire form and button instead of right under the location field, same as the keyword
       suggestions panel had. */
    position: fixed;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(17, 24, 39, 0.08), 0 12px 28px rgba(17, 24, 39, 0.12);
    overflow-y: auto;
    max-height: 260px;
    z-index: 1000;
}

.hero-location-suggestions.show {
    display: block;
}

.hls-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-dark);
    transition: background-color 100ms ease;
}

.hls-item:hover {
    background: var(--light-gray-bg, #f4f5fb);
}

.hls-item i {
    color: var(--text-light);
    font-size: 12px;
    width: 14px;
    flex-shrink: 0;
}

.hls-item.hls-remote {
    color: var(--primary-color);
    font-weight: 600;
}

.hls-item.hls-remote i { color: var(--primary-color); }

.hero-search-bar button {
    border: none;
    border-radius: 50%;
    background: linear-gradient(120deg, var(--accent-color), #fbbf24);
    color: #fff;
    width: 46px;
    height: 46px;
    min-width: 46px;
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(245, 158, 11, 0.35);
    transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.hero-search-bar button:hover {
    opacity: 0.96;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(245, 158, 11, 0.45);
}

.hero-popular {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
}

.hero-popular-label {
    color: var(--text-light);
    font-weight: 600;
    margin-right: 2px;
}

.hero-popular-tag {
    display: inline-block;
    color: var(--primary-color);
    background: var(--accent-secondary);
    font-weight: 600;
    font-size: 12.5px;
    padding: 5px 13px;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.hero-popular-tag:hover {
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
}

.hero-search-wrap {
    position: relative;
}

.hero-search-suggestions {
    display: none;
    /* Fixed (not absolute) and positioned via JS from the keyword input's own live screen
       coordinates — absolute-relative-to-the-whole-search-wrap put this below the entire form
       (button included), which is fine on desktop (one row) but on mobile, where the fields stack
       vertically, pushed the panel down below the button and into whatever page content follows
       instead of sitting right under the field being typed into. */
    position: fixed;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(17, 24, 39, 0.08), 0 12px 28px rgba(17, 24, 39, 0.12);
    overflow-y: auto;
    max-height: 340px;
    z-index: 1000;
}

.hero-search-suggestions.show {
    display: block;
}

.hss-group-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    padding: 12px 20px 4px;
}

.hss-item {
    display: block;
    padding: 13px 20px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color 100ms ease;
}

.hss-item:hover,
.hss-item.active {
    background: var(--light-gray-bg, #f4f5fb);
    text-decoration: none;
    color: inherit;
}

.hss-item-title {
    display: block;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hss-item-sub {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hss-empty {
    padding: 16px 20px;
    font-size: 13.5px;
    color: var(--text-light);
    text-align: center;
}

@media (max-width: 991px) {
    .hero-text-col {
        text-align: center;
        margin-top: 60px;
    }
    .hero-text-col p.hero-lead {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-badge-top {
        right: 16px;
    }
    .hero-badge-bottom {
        left: 16px;
        bottom: -18px;
    }
}

/* Between this and the 575px full-stack breakpoint, min-width floors on the keyword/location
   segments would otherwise force the bar wider than its container (or squeeze back toward
   invisible-gap territory) — wrapping keyword onto its own row here keeps every field readable
   without waiting for full mobile stacking. */
@media (max-width: 860px) {
    .hero-search-bar {
        flex-wrap: wrap;
        border-radius: 20px;
    }
    .hero-search-input-wrap {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media (max-width: 575px) {
    .hero-search-bar {
        flex-wrap: wrap;
        border-radius: 20px;
    }
    .hero-search-input-wrap {
        flex: 1 1 100%;
        width: 100%;
    }
    .hero-search-location-wrap {
        flex: 1 1 100%;
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--card-border-color);
        margin-top: 4px;
    }
    .hero-search-bar button {
        width: 100%;
        height: 46px;
        border-radius: 14px;
        justify-content: center;
        margin-left: 0;
        margin-top: 4px;
    }
}

/* Category Section */
.category-card {
    border: 1px solid var(--card-border-color);
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
    background-color: #fff;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--card-hover-shadow);
    border-color: transparent;
}

.category-card .icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-secondary), #e0e7ff);
    font-size: 26px;
    color: var(--primary-color);
}

.category-card h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
}

/* Featured Jobs Section */
.featured-jobs-section {
    background-color: var(--light-gray-bg);
}

.featured-jobs-section .section-heading h2 span {
    color: var(--primary-color);
}

.job-card {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--card-border-color);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-hover-shadow);
    border-color: transparent;
}

.job-card .new-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent-color);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px 4px 16px;
    border-bottom-left-radius: 12px;
}

.job-card .company-logo {
    width: 60px;
    height: 60px;
    min-width: 60px;
    margin-right: 20px;
    border-radius: 10px;
    object-fit: cover;
}

.job-card .job-details {
    flex-grow: 1;
    min-width: 0;
}

.job-card .job-title {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-dark);
}

.job-card .job-info {
    color: var(--text-light);
    font-size: 13.5px;
}
.job-card .job-info span {
    margin-right: 15px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.job-card .job-salary {
    display: block;
    margin-top: 8px;
    color: #059669;
    font-weight: 700;
    font-size: 14px;
}

.job-card .job-actions {
    text-align: right;
}

.job-type-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}
.badge-full-time { background-color: var(--accent-secondary); color: var(--primary-color); }
.badge-part-time { background-color: rgba(245, 158, 11, 0.1); color: #d97706; }
.badge-freelance { background-color: rgba(16, 185, 129, 0.1); color: #059669; }
.badge-internship { background-color: rgba(139, 92, 246, 0.1); color: #7c3aed; }
.badge-contract { background-color: rgba(220, 38, 38, 0.1); color: #dc2626; }

.category-card .count {
    display: block;
    font-size: 13px;
    color: var(--text-light);
    margin-top: 4px;
}

.company-logo-card {
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.company-logo-card .company-name-fallback {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
}

.company-logo-card .company-job-count {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 6px;
}

.hub-empty-state {
    text-align: center;
    color: var(--text-light);
    padding: 20px;
    width: 100%;
}

.hub-ribbon-link {
    position: fixed;
    right: 15px;
    top: 90px;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    text-decoration: none;
}

.hub-ribbon-link:hover {
    background: var(--primary-dark);
    color: #fff;
    text-decoration: none;
}

.hub-ribbon-link .hub-ribbon-tooltip {
    position: absolute;
    right: 54px;
    top: 50%;
    transform: translateY(-50%);
    background: #212529;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
}

/* How It Works Section */
.how-it-works-section {
    background-color: #fff;
}
.step-card {
    text-align: center;
    padding: 20px;
}
.step-card .step-icon {
    width: 80px;
    height: 80px;
    background-color: var(--accent-secondary);
    color: var(--primary-color);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 32px;
    position: relative;
}
.step-card .step-number {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--primary-color);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid #fff;
}
.step-card h5 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.step-card p {
    color: var(--text-light);
    font-size: 15px;
}

/* Top Companies Section */
.company-logo-card {
    background: #fff;
    padding: 30px;
    border: 1px solid var(--card-border-color);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    height: 120px;
}
.company-logo-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-hover-shadow);
    border-color: transparent;
}
.company-logo-card img {
    max-width: 100%;
    max-height: 50px;
}

/* Employer CTA Banner */
.hub-cta-section {
    background: linear-gradient(120deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
    padding: 60px 0;
    text-align: center;
    color: #fff;
}

.hub-cta-section h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 10px;
}

.hub-cta-section p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    margin-bottom: 26px;
}

.hub-cta-section .btn-cta {
    display: inline-block;
    background: #fff;
    color: var(--primary-color);
    padding: 12px 34px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.hub-cta-section .btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    color: var(--primary-dark);
    text-decoration: none;
}

@media (max-width: 991px) {
    .job-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .job-card .company-logo {
        margin-bottom: 14px;
    }
    .job-card .job-actions {
        width: 100%;
        text-align: left;
        margin-top: 15px;
    }
}

@media (max-width: 767px) {
    .hero-section { padding: 85px 0 30px; }
    .hero-text-col h1 { font-size: 30px; }
    .hero-text-col p.hero-lead { font-size: 15px; margin-bottom: 18px; }
    .hero-photo-frame img { height: 300px; }
    .section-padding { padding: 56px 0; }
    .section-heading { margin-bottom: 36px; }
    .section-heading h2 { font-size: 28px; }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInOverlay 0.3s ease-out;
}

.modal-content {
    background: #fff;
    border-radius: 12px;
    width: 80%;
    max-width: 800px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: fadeInModal 0.3s ease-out;
    color: var(--text-dark);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid var(--card-border-color);
}

.modal-header h4 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.modal-body {
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-body .category-list {
    list-style: none;
    padding: 0;
    column-count: 3;
    column-gap: 20px;
}

.modal-body .category-list li {
    margin-bottom: 15px;
}

.modal-body .category-list a:hover {
    color: var(--primary-color);
}

.btn-close {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
    padding: 0.5rem 1rem;
}
.btn-close:hover {
    opacity: 1;
}

@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInModal { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 767px) {
    .modal-body .category-list { column-count: 2; }
}

@media (max-width: 575px) {
    .modal-body .category-list { column-count: 1; }
}