:root { --career-orange: #ff3d0a; --career-ink: #071020; --career-muted: #556276; --career-line: #e7edf5; --career-soft: #fff3ee; }

.careers-page { background: #fff; color: var(--career-ink); }
.careers-container { width: min(1320px, calc(100% - 64px)); margin: 0 auto; }
.careers-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr); gap: 34px; align-items: center; padding: 42px 0 22px; }
.breadcrumb { color: #647084; font-size: 13px; margin-bottom: 30px; }
.breadcrumb span { color: var(--career-orange); }
.careers-copy h1 { margin: 0; max-width: 640px; font-size: clamp(42px, 4.6vw, 68px); line-height: 1.02; text-transform: uppercase; font-weight: 900; letter-spacing: 0; }
.careers-copy h1 span { color: var(--career-orange); }
.careers-copy h2 { margin: 20px 0 14px; font-size: 27px; letter-spacing: 0; }
.careers-copy p { max-width: 610px; margin: 0; color: var(--career-muted); font-size: 18px; line-height: 1.75; }
.careers-actions { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 32px; }
.careers-actions .btn { min-width: 220px; justify-content: center; }
.careers-actions span { display: inline-grid; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; background: var(--career-orange); color: #fff; place-items: center; font-size: 11px; }
.careers-visual { min-height: 410px; border-radius: 10px; overflow: hidden; position: relative; }
.careers-visual::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.18) 14%, rgba(255,255,255,0) 36%), linear-gradient(180deg, rgba(255,255,255,0) 70%, #fff 100%); }
.careers-visual img { width: 100%; height: 100%; min-height: 410px; object-fit: cover; display: block; }

.career-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 20px 0; }
.career-stats div, .values-panel, .jobs-panel, .join-panel, .testimonial, .careers-cta { border: 1px solid var(--career-line); border-radius: 9px; background: #fff; box-shadow: 0 14px 32px rgba(15,23,42,.05); }
.career-stats div { display: flex; align-items: center; gap: 16px; padding: 22px; min-height: 105px; min-width: 0; }
.career-stats strong { display: block; font-size: 30px; line-height: 1; }
.career-stats p { margin: 4px 0 0; color: var(--career-ink); line-height: 1.2; }

.career-icon, .job-icon { width: 54px; height: 54px; border-radius: 16px; display: inline-grid; place-items: center; color: var(--career-orange); background: #fff1eb; position: relative; flex: 0 0 auto; }
.career-icon::before, .job-icon::before { content: ""; width: 26px; height: 26px; border: 3px solid currentColor; border-radius: 7px; display: block; }
.career-icon.users::before { border-radius: 50%; box-shadow: 16px 4px 0 -10px currentColor, -16px 4px 0 -10px currentColor; }
.career-icon.globe::before { border-radius: 50%; box-shadow: inset 8px 0 0 -6px currentColor, inset -8px 0 0 -6px currentColor; }
.career-icon.office::before { border-radius: 3px; box-shadow: inset 0 9px 0 -6px currentColor; }
.career-icon.rocket::before, .job-icon.target::before { border-radius: 50% 50% 50% 8px; transform: rotate(45deg); }
.career-icon.smile::before { border-radius: 50%; }
.career-icon.light::before { border-radius: 50%; box-shadow: 0 15px 0 -10px currentColor; }
.career-icon.shield::before { clip-path: polygon(50% 0,100% 18%,88% 78%,50% 100%,12% 78%,0 18%); border-radius: 12px; }
.career-icon.customer::before { border-radius: 50%; box-shadow: 0 13px 0 -8px currentColor; }
.career-icon.growth::before, .job-icon.growth::before { border-radius: 3px; transform: skew(-8deg); }
.career-icon.money::before { border-radius: 50%; }
.career-icon.calendar::before { border-radius: 4px; box-shadow: inset 0 8px 0 -5px currentColor; }
.career-icon.cert::before { border-radius: 4px; }
.career-icon.heart::before { transform: rotate(45deg); border-radius: 50% 50% 0 50%; }
.career-icon.send::before { clip-path: polygon(0 45%, 100% 0, 62% 100%, 45% 61%); background: currentColor; border: 0; border-radius: 0; }
.job-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--career-orange); color: #fff; }
.job-icon::before { width: 20px; height: 20px; border-width: 2px; }
.job-icon.cloud::before { border-radius: 50%; box-shadow: -8px 6px 0 -4px currentColor, 8px 6px 0 -4px currentColor; }
.job-icon.support::before { border-radius: 50% 50% 8px 8px; border-bottom-color: transparent; }

.values-panel { padding: 28px 36px 36px; margin-top: 6px; }
.values-panel h2 { text-align: center; margin: 0 0 22px; color: var(--career-orange); text-transform: uppercase; letter-spacing: 0; }
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.values-grid article { text-align: center; padding: 22px 26px; border-right: 1px solid var(--career-line); }
.values-grid article:last-child { border-right: 0; }
.values-grid .career-icon { margin: 0 auto 14px; background: transparent; }
.values-grid h3 { margin: 0 0 10px; font-size: 18px; }
.values-grid p { margin: 0; color: var(--career-muted); line-height: 1.65; }

.jobs-layout { display: grid; grid-template-columns: 1fr 390px; gap: 22px; margin-top: 22px; }
.jobs-panel, .join-panel { padding: 24px; }
.jobs-panel h2, .join-panel h2, .life-copy h2 { margin: 0 0 20px; color: var(--career-orange); text-transform: uppercase; letter-spacing: 0; }
.job-list { display: grid; }
.job-list div { display: grid; grid-template-columns: 54px 1fr 150px 100px 104px; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--career-line); }
.job-list strong { display: block; font-size: 16px; }
.job-list small { display: block; margin-top: 5px; color: var(--career-muted); font-weight: 500; }
.job-list span { color: var(--career-muted); }
.job-list b { justify-self: start; font-size: 13px; background: #f4f6fa; border-radius: 6px; padding: 8px 15px; }
.job-list a { color: var(--career-orange); border: 1px solid rgba(255,61,10,.45); padding: 10px 15px; text-decoration: none; border-radius: 6px; font-weight: 800; text-align: center; }
.submit-resume { display: flex; justify-content: center; width: min(280px, 100%); margin: 22px auto 0; background: var(--career-orange); color: #fff; text-decoration: none; border-radius: 7px; padding: 14px 20px; font-weight: 800; box-shadow: 0 16px 30px rgba(255,61,10,.22); }
.join-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.join-panel li { display: flex; gap: 16px; align-items: center; color: var(--career-muted); line-height: 1.5; }
.join-panel .career-icon { width: 40px; height: 40px; border-radius: 12px; }
.join-panel .career-icon::before { width: 18px; height: 18px; border-width: 2px; }

.life-section { display: grid; grid-template-columns: .95fr repeat(3, 1fr) 1.25fr; gap: 16px; margin-top: 30px; align-items: stretch; }
.life-copy { padding-right: 14px; }
.life-copy p { color: var(--career-muted); line-height: 1.65; }
.life-copy ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.life-copy li { color: #273247; font-size: 14px; }
.life-copy li::before { content: "\2713"; color: var(--career-orange); margin-right: 8px; }
.life-section figure { margin: 0; }
.life-section img { width: 100%; aspect-ratio: 1.08; object-fit: cover; border-radius: 7px; display: block; box-shadow: 0 12px 26px rgba(15,23,42,.08); }
.life-section figcaption { margin-top: 12px; color: #273247; line-height: 1.5; text-align: center; }
.testimonial { padding: 28px; background: linear-gradient(135deg, #fff3ee, #fff); }
.testimonial > div:first-child { color: var(--career-orange); font-size: 64px; line-height: .6; font-weight: 900; }
.testimonial p { color: var(--career-ink); font-size: 18px; line-height: 1.55; }
.person { display: flex; gap: 14px; align-items: center; }
.person img { width: 58px; height: 58px; border-radius: 50%; }
.person strong, .person small { display: block; }
.person small { color: var(--career-muted); }
.dots { display: block; margin-top: 18px; color: var(--career-orange); letter-spacing: 6px; }

.careers-cta { margin: 28px auto 42px; display: grid; grid-template-columns: 76px 1fr auto; gap: 22px; align-items: center; padding: 26px 90px; background: linear-gradient(90deg, #fff3ee, #fff); }
.careers-cta h2 { margin: 0 0 5px; color: var(--career-orange); text-transform: uppercase; letter-spacing: 0; }
.careers-cta p { margin: 0; color: var(--career-muted); }
.careers-cta .career-icon { width: 68px; height: 68px; border-radius: 50%; background: var(--career-orange); color: #fff; }
.careers-cta .btn { min-width: 220px; justify-content: center; }

@media (max-width: 1180px) {
 .careers-hero, .jobs-layout, .life-section, .careers-cta { grid-template-columns: 1fr; }
 .career-stats, .values-grid { grid-template-columns: repeat(2, 1fr); }
 .values-grid article { border-right: 0; }
 .job-list div { grid-template-columns: 54px 1fr; }
 .job-list div > span, .job-list b, .job-list a { grid-column: 2; justify-self: start; }
 .careers-cta { padding: 26px; }
}

@media (max-width: 700px) {
 .careers-container { width: min(100% - 32px, 1320px); }
 .career-stats, .values-grid { grid-template-columns: 1fr; }
 .careers-visual, .careers-visual img { min-height: 310px; }
 .careers-actions { flex-direction: column; align-items: stretch; }
}