:root { --blue: #356dcc; --blue-dark: #254f9d; --ink: #263448; --muted: #66758a; --line: #e3e8ef; --sky: #edf4ff; --gold: #f7b84b; --mint: #38af91; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: #fff; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } a { color: inherit; text-decoration: none; } button, input { font: inherit; }
.site-header { position: sticky; z-index: 30; top: 0; display: flex; min-height: 71px; padding: 0 max(20px, calc((100vw - 1438px) / 2)); align-items: center; gap: 30px; border-top: 1px solid #373d45; border-bottom: 1px solid #e5e8ed; background: rgba(255,255,255,.99); box-shadow: 0 1px 5px rgba(23, 43, 70, .035); }.brand { position: relative; display: inline-flex; min-height: 70px; padding-bottom: 3px; align-items: center; color: #174381; font-family: "Arial Narrow", Arial, sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -.075em; white-space: nowrap; }.brand::after { content: ""; position: absolute; right: 7px; bottom: 7px; width: 70px; height: 7px; border-bottom: 3px solid #ec6e2f; border-radius: 0 0 75% 45%; transform: skewX(27deg); }.main-nav { display: flex; align-self: stretch; align-items: stretch; gap: 28px; }.main-nav a { position: relative; display: flex; align-items: center; color: #58616e; font-size: 16px; font-weight: 500; white-space: nowrap; }.main-nav a:hover, .main-nav a.active { color: #25436f; font-weight: 700; }.main-nav a.active::after { content: ""; position: absolute; right: 0; bottom: 8px; left: 0; height: 3px; border-radius: 3px; background: #19467f; }.header-actions { display: flex; margin-left: auto; align-items: center; gap: 17px; }.recruiters { color: #5d6672; font-size: 16px; font-weight: 500; white-space: nowrap; }.recruiters:hover { color: #174381; }.login, .employer { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; border-radius: 999px; font-size: 16px; font-weight: 750; white-space: nowrap; }.login { min-width: 119px; padding: 0 25px; color: #21487f; border: 1.5px solid #2f5d9d; }.login:hover { color: #fff; background: #21487f; }.employer { min-width: 152px; padding: 0 27px; color: #fff; border: 1px solid #17417d; background: #17417d; box-shadow: 0 4px 8px rgba(21,61,118,.13); }.employer:hover { border-color: #0f3465; background: #0f3465; }.menu-button { display: none; padding: 6px 0; border: 0; background: none; }.menu-button i { display: block; width: 22px; height: 2px; margin: 4px; background: #526477; }.mobile-menu { position: fixed; z-index: 29; top: 71px; right: 14px; left: 14px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 14px 34px rgba(22,46,75,.16); }.mobile-menu a { display: block; padding: 12px; border-radius: 7px; color: #435467; font-size: 14px; font-weight: 650; }.mobile-menu a:hover { color: var(--blue); background: #f0f5ff; }
.hero { position: relative; min-height: 535px; overflow: hidden; color: #fff; background: linear-gradient(119deg, #254b92, #356dcc 56%, #608ee0); isolation: isolate; }.hero-mesh { position: absolute; z-index: -1; inset: 0; overflow: hidden; }.hero-mesh::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 17% 5%, rgba(165,206,255,.46), transparent 26%), radial-gradient(circle at 91% 93%, rgba(21,43,117,.54), transparent 34%); }.hero-mesh span { position: absolute; display: block; width: 400px; height: 400px; border: 1px solid rgba(255,255,255,.16); border-radius: 48% 52% 42% 58%; }.hero-mesh span:nth-child(1) { top: -212px; right: -56px; }.hero-mesh span:nth-child(2) { right: 17%; bottom: -285px; width: 520px; height: 520px; }.hero-mesh span:nth-child(3) { top: 68px; left: -250px; width: 430px; height: 430px; }.hero-mesh span:nth-child(4) { top: 70px; right: 8%; width: 214px; height: 214px; border-color: rgba(255,255,255,.1); }.hero-content { width: min(92%, 1115px); margin: 0 auto; padding: clamp(65px, 8vw, 105px) 0 83px; }.eyebrow { margin: 0 0 12px; color: #c9e2ff; font-size: 10px; font-weight: 800; letter-spacing: .15em; }.hero h1 { max-width: 650px; margin: 0; font-size: clamp(37px, 4.8vw, 64px); line-height: .99; letter-spacing: -.065em; }.hero-copy { max-width: 580px; margin: 16px 0 27px; color: rgba(255,255,255,.84); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.45; }.job-search { display: grid; max-width: 895px; padding: 8px; grid-template-columns: 1.1fr .83fr auto; gap: 8px; border-radius: 9px; background: #fff; box-shadow: 0 17px 35px rgba(13,37,91,.25); }.job-search label { display: flex; min-height: 48px; padding: 0 12px; align-items: center; gap: 8px; border-right: 1px solid #e5eaf0; }.field-icon { color: #8a9ab0; font-size: 20px; }.job-search input { width: 100%; min-width: 0; color: var(--ink); border: 0; outline: 0; font-size: 13px; }.job-search input::placeholder { color: #8a98a9; }.job-search button { min-width: 140px; color: #fff; border: 0; border-radius: 6px; background: #ee7654; font-size: 14px; font-weight: 750; cursor: pointer; }.job-search button:hover { background: #e56440; }.popular-searches { display: flex; margin-top: 15px; align-items: center; flex-wrap: wrap; gap: 6px 12px; color: rgba(255,255,255,.76); font-size: 11px; }.popular-searches a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }.hero-panel { position: absolute; right: max(5vw, calc((100vw - 1230px) / 2)); bottom: 40px; width: 350px; height: 365px; }.profile-orb { position: absolute; top: 7px; left: 73px; display: grid; width: 184px; height: 184px; place-items: center; border: 13px solid rgba(255,255,255,.15); border-radius: 50%; background: linear-gradient(145deg, #f4f8ff, #bed6fa); box-shadow: 0 20px 36px rgba(12,36,91,.2); }.profile-orb span { display: grid; width: 111px; height: 111px; place-items: center; color: #fff; border-radius: 34% 66% 60% 40%; background: #4a78c7; font-size: 35px; font-weight: 800; letter-spacing: -.09em; }.floating-card { position: absolute; display: flex; padding: 14px 15px; flex-direction: column; border: 1px solid rgba(255,255,255,.62); border-radius: 10px; background: rgba(255,255,255,.93); box-shadow: 0 16px 30px rgba(7,28,71,.17); backdrop-filter: blur(8px); }.floating-card small { color: #778596; font-size: 10px; }.floating-card b { margin: 4px 0; color: #344961; font-size: 13px; }.floating-card span { color: #63758a; font-size: 10px; }.floating-card.first { top: 80px; left: -15px; width: 168px; }.floating-card.second { top: 178px; right: -18px; width: 164px; }.floating-card.third { bottom: -1px; left: 35px; width: 221px; padding-left: 45px; }.floating-card .check { position: absolute; top: 19px; left: 14px; display: grid; width: 22px; height: 22px; place-items: center; color: #fff; border-radius: 50%; background: var(--mint); font-size: 12px; font-weight: 800; }
.jobs-section, .locations-section { max-width: 1220px; margin: 0 auto; padding: clamp(55px, 7.3vw, 95px) clamp(20px, 5vw, 56px); }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 27px; }.section-heading p, .companies-section > div > p, .help-head p, .salary-copy p, .locations-section > p { margin: 0 0 8px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .13em; }.section-heading h2, .companies-section h2, .help-head h2, .salary-copy h2, .locations-section h2 { margin: 0; font-size: clamp(27px, 3.2vw, 40px); letter-spacing: -.055em; }.all-link { padding-bottom: 4px; color: var(--blue); font-size: 13px; font-weight: 750; white-space: nowrap; }.all-link span { margin-left: 4px; font-size: 18px; }.job-layout { display: grid; grid-template-columns: 245px 1fr; gap: 24px; }.job-filters { padding: 18px; align-self: start; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.job-filters h3 { margin: 0 0 10px; font-size: 14px; }.job-filters a { display: flex; padding: 11px 0; justify-content: space-between; color: #637284; border-top: 1px solid #eef1f4; font-size: 12px; }.job-filters a:hover { color: var(--blue); }.job-filters span { color: #9aa6b4; }.job-filters .filter-more { display: block; color: var(--blue); font-weight: 700; }.job-list { display: grid; gap: 11px; }.job-card { display: flex; min-height: 143px; padding: 20px; align-items: center; gap: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 5px 14px rgba(24,49,76,.035); transition: transform .2s ease, box-shadow .2s ease; }.job-card:hover { box-shadow: 0 12px 24px rgba(25,85,165,.11); transform: translateY(-2px); }.job-mark { display: grid; width: 44px; height: 44px; flex: none; place-items: center; color: #fff; border-radius: 10px; font-size: 19px; font-weight: 800; }.mark-a { background: #496a99; }.mark-b { background: #f0a041; }.mark-c { background: #3e9d91; }.job-detail { min-width: 0; flex: 1; }.job-detail > span { display: inline-block; padding: 3px 6px; border-radius: 3px; font-size: 9px; font-weight: 800; }.urgent { color: #c85d37; background: #fff0ea; }.featured { color: #8d659d; background: #f6edfb; }.remote { color: #2d8a75; background: #e9f8f4; }.job-detail h3 { margin: 7px 0 3px; color: #273b50; font-size: 15px; }.job-detail p { margin: 0 0 8px; color: #68788a; font-size: 12px; }.job-detail div { display: flex; flex-wrap: wrap; gap: 5px 14px; color: #718296; font-size: 11px; }.job-detail small { display: block; margin-top: 8px; color: #98a5b2; font-size: 10px; }.apply-button { min-width: 78px; padding: 10px; color: var(--blue); border: 1px solid #b9d1f2; border-radius: 5px; font-size: 12px; font-weight: 750; text-align: center; }.apply-button:hover { color: #fff; background: var(--blue); }
.companies-section { display: grid; padding: clamp(55px, 7vw, 91px) max(5vw, calc((100vw - 1108px) / 2)); grid-template-columns: .93fr 1.07fr; align-items: center; gap: clamp(33px, 7vw, 105px); background: #f2f6fc; }.companies-section h2 { max-width: 440px; line-height: 1.06; }.companies-section h2 b { color: var(--blue); }.companies-section > div > span { display: block; max-width: 440px; margin-top: 15px; color: var(--muted); font-size: 14px; line-height: 1.55; }.soft-button, .light-button { display: inline-flex; min-height: 43px; margin-top: 25px; padding: 0 16px; align-items: center; gap: 8px; color: var(--blue); border: 1px solid #b9d1f2; border-radius: 6px; background: #fff; font-size: 13px; font-weight: 750; }.soft-button:hover { background: #f8fbff; }.company-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.company-grid article { display: flex; min-height: 130px; padding: 18px; flex-direction: column; border: 1px solid #e0e7f0; border-radius: 9px; background: #fff; }.company-logo { display: grid; width: 31px; height: 31px; margin-bottom: 12px; place-items: center; color: #fff; border-radius: 7px; font-style: normal; font-size: 14px; font-weight: 800; }.logo-a { background: #e4384a; }.logo-b { background: #389b6c; }.logo-c { background: #eea23d; }.logo-d { background: #5373a4; }.company-grid b { margin-bottom: 5px; color: #35485c; font-size: 12px; }.company-grid span, .company-grid small { color: #7a8999; font-size: 10px; }.company-grid small { margin-top: auto; color: var(--blue); font-weight: 700; }
.help-section { display: grid; max-width: 1220px; margin: 0 auto; padding: clamp(55px, 7vw, 95px) clamp(20px, 5vw, 56px); grid-template-columns: .82fr 1.18fr; gap: clamp(35px, 8vw, 118px); }.help-head h2 { line-height: 1.06; }.help-head > span { display: block; max-width: 340px; margin-top: 15px; color: var(--muted); font-size: 14px; line-height: 1.52; }.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }.help-grid article { min-height: 230px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.help-grid i { display: grid; width: 30px; height: 30px; margin-bottom: 22px; place-items: center; color: var(--blue); border-radius: 50%; background: #eaf2ff; font-size: 10px; font-style: normal; font-weight: 800; }.help-grid h3 { margin: 0 0 8px; font-size: 14px; }.help-grid p { min-height: 57px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.help-grid a { color: var(--blue); font-size: 11px; font-weight: 750; }
.salary-section { display: flex; min-height: 332px; padding: 55px max(5vw, calc((100vw - 1108px) / 2)); align-items: center; justify-content: space-between; gap: 50px; overflow: hidden; color: #fff; background: linear-gradient(115deg, #263f77, #386dca); }.salary-copy { max-width: 460px; }.salary-copy p { color: #b9d7ff; }.salary-copy h2 { color: #fff; line-height: 1.03; }.salary-copy > span { display: block; margin-top: 14px; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.5; }.light-button { color: #355fae; border: 0; }.salary-chart { width: min(460px, 43vw); padding: 24px; border: 1px solid rgba(255,255,255,.3); border-radius: 13px; background: rgba(255,255,255,.12); backdrop-filter: blur(9px); }.chart-heading { display: flex; margin-bottom: 21px; flex-direction: column; gap: 4px; }.chart-heading span { color: #c7dcff; font-size: 11px; }.chart-heading b { font-size: 16px; }.bar-row { display: grid; margin: 14px 0; grid-template-columns: 56px 1fr 60px; align-items: center; gap: 12px; color: #d4e4fd; font-size: 11px; }.bar-row i { position: relative; display: block; height: 8px; border-radius: 8px; background: rgba(255,255,255,.18); }.bar-row i::after { content: ""; position: absolute; width: var(--bar); height: 100%; border-radius: inherit; background: #b8dcff; }.bar-row.main i::after { background: #fff; }.bar-row b { color: #fff; font-size: 11px; }
.locations-section { text-align: center; }.locations-section > span { display: block; max-width: 560px; margin: 14px auto 32px; color: var(--muted); font-size: 14px; }.location-columns { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 17px; text-align: left; }.location-columns > div { padding: 21px; border: 1px solid var(--line); border-radius: 10px; }.location-columns h3 { margin: 0 0 12px; color: #35485b; font-size: 14px; }.location-columns a:not(.app-mini a) { display: block; padding: 8px 0; color: #657688; border-top: 1px solid #eef1f4; font-size: 12px; }.location-columns a:hover { color: var(--blue); }.app-mini { display: flex; align-items: center; gap: 13px; background: #edf5ff; }.ct-mark { display: grid; width: 44px; height: 44px; flex: none; place-items: center; color: #fff; border-radius: 12px; background: var(--blue); font-size: 17px; font-weight: 800; letter-spacing: -.08em; }.app-mini div { display: flex; flex: 1; flex-direction: column; gap: 4px; }.app-mini b { color: #35495f; font-size: 14px; line-height: 1.1; }.app-mini small { color: #718397; font-size: 10px; }.app-mini a { color: var(--blue); font-size: 11px; font-weight: 750; white-space: nowrap; }
.site-footer { display: grid; padding: 43px max(5vw, calc((100vw - 1108px) / 2)) 24px; grid-template-columns: 2.1fr 1fr 1fr 1fr; gap: 35px; color: #aebac8; background: #27384d; }.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }.footer-brand img { width: 29px; height: 29px; border-radius: 8px; }.footer-brand b { color: #fff; font-size: 20px; letter-spacing: -.06em; }.footer-brand span { font-size: 12px; }.site-footer h3 { margin: 0 0 13px; color: #fff; font-size: 12px; }.site-footer > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 8px; }.site-footer > div:not(.footer-brand) a { color: #b7c4d1; font-size: 11px; }.site-footer a:hover { color: #fff; }.copyright { grid-column: 1 / -1; margin: 0; padding-top: 19px; color: #93a4b4; border-top: 1px solid rgba(255,255,255,.13); font-size: 11px; }
@media (max-width: 1050px) { .main-nav { gap: 16px; }.main-nav a { font-size: 11px; }.hero-panel { right: -40px; opacity: .55; }.help-section { gap: 42px; }.help-grid { grid-template-columns: 1fr; }.help-grid article { min-height: 0; }.help-grid p { min-height: 0; }.company-grid { grid-template-columns: 1fr 1fr; }.salary-chart { width: 45%; } }
@media (max-width: 730px) { .site-header { min-height: 62px; padding-inline: 19px; }.main-nav, .header-actions { display: none; }.menu-button { display: block; margin-left: auto; }.mobile-menu { top: 62px; }.hero { min-height: 600px; }.hero-content { width: calc(100% - 40px); padding-top: 62px; }.hero h1 { font-size: clamp(39px, 11vw, 55px); }.job-search { grid-template-columns: 1fr; padding: 8px; }.job-search label { min-height: 43px; border-right: 0; border-bottom: 1px solid #edf0f4; }.job-search button { min-height: 43px; }.popular-searches { max-width: 330px; }.hero-panel { right: -95px; bottom: -26px; transform: scale(.75); transform-origin: right bottom; }.job-layout, .companies-section, .help-section { grid-template-columns: 1fr; }.job-filters { display: none; }.job-card { min-height: 0; padding: 15px; align-items: flex-start; }.job-mark { width: 37px; height: 37px; font-size: 15px; }.apply-button { min-width: 62px; }.companies-section { padding: 53px 22px; gap: 30px; }.company-grid { grid-template-columns: 1fr 1fr; }.company-grid article { min-height: 117px; padding: 14px; }.help-section { padding-inline: 22px; gap: 30px; }.help-grid { grid-template-columns: 1fr; }.salary-section { padding: 49px 22px; align-items: flex-start; flex-direction: column; gap: 27px; }.salary-chart { width: 100%; }.locations-section { padding-inline: 22px; }.location-columns { grid-template-columns: 1fr; }.site-footer { padding: 37px 22px 24px; grid-template-columns: 1fr 1fr; gap: 29px; }.footer-brand { grid-column: 1 / -1; }.copyright { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }