.careers-hero {
padding: 140px 0 80px; position: relative; overflow: hidden;
}
.careers-hero-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 55% 60% at 5% 15%, rgba(6,37,156,.06), transparent),
radial-gradient(ellipse 45% 50% at 95% 85%, rgba(255,145,76,.05), transparent),
linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%);
}
.careers-hero-inner {
display: grid; grid-template-columns: 1fr 1fr;
gap: 4rem; align-items: center; position: relative; z-index: 1;
}
.careers-hero-title {
font-family: var(--font-display); font-size: clamp(2.5rem,5vw,4rem);
font-weight: 800; line-height: 1.1; color: var(--text); margin-bottom: 1.25rem;
}
.careers-hero-desc { font-size: 1.05rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 2rem; }
.careers-hero-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.careers-pill {
display: flex; align-items: center; gap: .4rem;
padding: .4rem 1rem; border-radius: var(--radius-full);
background: var(--surface); border: 1.5px solid var(--border);
font-size: .8rem; font-weight: 600; color: var(--text-muted);
}
.careers-pill svg { color: var(--primary); flex-shrink: 0; }
[data-theme="dark"] .careers-pill svg { color: var(--accent); }
.careers-hero-visual {
border-radius: var(--radius-2xl); overflow: hidden;
background: var(--surface); border: 1px solid var(--border);
box-shadow: var(--shadow-xl); position: relative;
}
.careers-hero-visual::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--primary), var(--accent));
}
.roles-section { background: var(--bg-secondary); }
.dept-filter {
display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2.5rem;
}
.dept-btn {
padding: .5rem 1.1rem; border-radius: var(--radius-full);
border: 1.5px solid var(--border); background: var(--surface);
font-size: .82rem; font-weight: 600; color: var(--text-muted);
cursor: pointer; transition: all .2s; font-family: inherit;
}
.dept-btn.active, .dept-btn:hover {
background: var(--primary); color: white; border-color: var(--primary);
}
[data-theme="dark"] .dept-btn.active, [data-theme="dark"] .dept-btn:hover {
background: var(--accent); border-color: var(--accent); color: white;
}
.roles-grid { display: flex; flex-direction: column; gap: 1rem; }
.role-card {
background: var(--surface); border: 1.5px solid var(--border);
border-radius: var(--radius-xl); padding: 1.5rem 1.75rem;
display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
transition: all .25s; text-decoration: none; color: inherit;
cursor: pointer;
}
.role-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateX(4px); }
[data-theme="dark"] .role-card:hover { border-color: var(--accent); }
.role-icon {
width: 48px; height: 48px; border-radius: var(--radius-md); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.role-info { flex: 1; min-width: 180px; }
.role-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .3rem; }
.role-dept { font-size: .78rem; font-weight: 600; color: var(--primary); }
[data-theme="dark"] .role-dept { color: var(--accent); }
.role-meta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .35rem; }
.role-tag {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .72rem; font-weight: 600; padding: .2rem .6rem;
border-radius: var(--radius-full); background: var(--bg-secondary);
border: 1px solid var(--border); color: var(--text-muted);
}
.role-salary { font-size: .85rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.role-arrow {
width: 36px; height: 36px; border-radius: var(--radius-sm);
background: var(--bg-secondary); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
color: var(--text-muted); flex-shrink: 0; transition: all .2s;
}
.role-card:hover .role-arrow { background: var(--primary); color: white; border-color: var(--primary); }
[data-theme="dark"] .role-card:hover .role-arrow { background: var(--accent); border-color: var(--accent); }
.roles-empty { text-align: center; padding: 3rem; color: var(--text-muted); font-size: .9rem; display: none; }
.perks-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem;
}
.perk-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-xl); padding: 1.75rem;
transition: all .3s var(--ease-spring);
}
.perk-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); border-color: var(--primary); }
[data-theme="dark"] .perk-card:hover { border-color: var(--accent); }
.perk-icon {
width: 48px; height: 48px; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.perk-title { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: .4rem; }
.perk-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.65; }
@media (max-width: 900px) { .perks-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .perks-grid { grid-template-columns: 1fr; } }
.process-strip { background: var(--bg-secondary); }
.hiring-steps {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 0; margin-top: 3rem; position: relative;
}
.hiring-steps::before {
content: ''; position: absolute; top: 24px; left: 10%; right: 10%;
height: 2px; background: linear-gradient(90deg, var(--primary), var(--accent));
opacity: .2; z-index: 0;
}
.hiring-step { text-align: center; padding: 0 .5rem; position: relative; z-index: 1; }
.hiring-step-num {
width: 48px; height: 48px; border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: white; font-family: var(--font-display); font-size: .85rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1rem; box-shadow: var(--shadow-md);
}
.hiring-step-title { font-size: .85rem; font-weight: 700; color: var(--text); margin-bottom: .3rem; }
.hiring-step-desc { font-size: .75rem; color: var(--text-muted); line-height: 1.55; }
@media (max-width: 700px) {
.hiring-steps { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.hiring-steps::before { display: none; }
}
.culture-bar {
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
padding: 3rem 0; text-align: center;
}
.culture-bar-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: white; margin-bottom: .75rem; }
.culture-bar-sub { font-size: .95rem; color: rgba(255,255,255,.72); line-height: 1.7; max-width: 580px; margin: 0 auto 1.5rem; }
.culture-stats { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.culture-stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: white; }
.culture-stat-label { font-size: .78rem; color: rgba(255,255,255,.6); margin-top: .15rem; }
.role-modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.5);
backdrop-filter: blur(6px); z-index: 10000;
display: flex; align-items: center; justify-content: center;
padding: 1.5rem; opacity: 0; pointer-events: none;
transition: opacity .3s;
}
.role-modal-overlay.open { opacity: 1; pointer-events: auto; }
.role-modal {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-2xl); max-width: 640px; width: 100%;
max-height: 90vh; overflow-y: auto;
box-shadow: var(--shadow-xl); position: relative;
transform: scale(.95) translateY(20px); transition: transform .3s var(--ease-spring);
}
.role-modal-overlay.open .role-modal { transform: none; }
.role-modal-header {
padding: 1.75rem 1.75rem 1rem; border-bottom: 1px solid var(--border);
position: sticky; top: 0; background: var(--surface); z-index: 1;
display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.role-modal-close {
width: 36px; height: 36px; border-radius: var(--radius-sm);
background: var(--bg-secondary); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--text-muted); flex-shrink: 0;
transition: all .2s;
}
.role-modal-close:hover { background: var(--primary); color: white; border-color: var(--primary); }
.role-modal-body { padding: 1.5rem 1.75rem 1.75rem; }
.role-modal-body h3 { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--text); margin: 1.25rem 0 .6rem; }
.role-modal-body p, .role-modal-body li { font-size: .88rem; color: var(--text-muted); line-height: 1.75; }
.role-modal-body ul { padding-left: 1.25rem; margin: .4rem 0; }
.role-modal-body li { margin-bottom: .3rem; }
@media (max-width: 900px) { .careers-hero-inner { grid-template-columns: 1fr; } .careers-hero-visual { display: none; } }