.hero { position: relative; isolation: isolate; color: var(--color-dark-text); background: var(--color-dark); overflow: hidden; }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--color-dark) 92%, transparent), color-mix(in srgb, var(--color-dark) 40%, transparent) 55%, transparent 78%); }
.hero__inner { min-height: min(640px, 78vh); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-4); padding-block: var(--space-9); }
.hero__title { max-width: 16ch; font-size: var(--text-4xl); line-height: var(--line-tight); }
.hero__lead { max-width: 46ch; opacity: .9; }
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero__features { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); padding-block: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--color-dark-text) 18%, transparent); }
.hero__feature { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.hero--job .hero__inner { min-height: min(520px, 70vh); }
.direction-card { color: inherit; text-decoration: none; }
.direction-card__body { flex-direction: row; align-items: center; }
.direction-card__title { font-size: var(--text-lg); }
.direction-card .icon--lg { color: var(--color-icon); }
.direction-card__text { font-size: var(--text-sm); color: var(--color-muted); }
.direction-card__arrow { margin-left: auto; }
.vacancy-card__title { font-size: var(--text-md); line-height: var(--line-tight); min-height: 2.4em; }
.vacancy-card__salary { font-weight: var(--weight-bold); color: var(--color-accent); }
.vacancy-card__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }
.vacancy-card__btn { margin-top: auto; }
.feature-card__body { position: relative; padding-top: var(--space-7); }
.feature-card__icon { position: absolute; top: 0; transform: translateY(-50%); display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-accent); box-shadow: var(--shadow-sm); }
.feature-card__text { font-size: var(--text-sm); color: var(--color-muted); }
.stats-band { position: relative; isolation: isolate; color: var(--color-dark-text); background: var(--color-dark); }
.stats-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.stats-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--color-dark), color-mix(in srgb, var(--color-dark) 55%, transparent) 70%); }
.stats-band__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-7); padding-block: var(--space-9); align-items: center; }
.stats-band__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 46ch; }
.stats-band__title { font-size: var(--text-3xl); line-height: var(--line-tight); }
.stats-band__list { display: grid; gap: var(--space-5); }
.stats-band__item { display: flex; align-items: center; gap: var(--space-4); }
.stats-band__item strong { display: block; font-size: var(--text-xl); }
.stats-band__item span { font-size: var(--text-sm); opacity: .8; }
.steps { background: var(--color-surface); }
.steps__inner { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: center; }
.steps__media { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: var(--color-dark); box-shadow: 0 24px 60px rgba(7, 34, 53, .22); }
.steps__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .8s var(--ease); }
.steps__media:hover img { transform: scale(1.04); }
.steps__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, transparent 70%, color-mix(in srgb, var(--color-dark) 45%, transparent)); pointer-events: none; }
.steps__badge { position: absolute; left: var(--space-5); top: var(--space-5); z-index: 1; padding-right: var(--space-5); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-dark) 55%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--color-dark-text); font-size: var(--text-sm); }
.steps__badge strong { display: block; font-size: var(--text-xl); line-height: var(--line-tight); }
.steps__badge-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-primary-text); }
.steps__eyebrow { display: inline-block; margin-bottom: var(--space-4); padding: 6px 14px; border-radius: var(--radius-pill); background: var(--color-dark); color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase; }
.steps__list { position: relative; display: grid; gap: var(--space-3); margin: var(--space-6) 0; }
.steps__list::before { content: ""; position: absolute; left: 41px; top: var(--space-6); bottom: var(--space-6); width: 2px; background: linear-gradient(var(--color-primary), color-mix(in srgb, var(--color-dark) 25%, transparent)); }
.steps__item { position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 2px solid color-mix(in srgb, var(--color-dark) 12%, transparent); border-radius: var(--radius-lg); background: var(--color-bg); transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.steps__item:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg)); }
.steps__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--color-dark); color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .04em; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.steps__item:first-child .steps__num, .steps__item:hover .steps__num { background: var(--color-primary); color: var(--color-primary-text); }
.steps__title { font-size: var(--text-md); line-height: var(--line-tight); }
.steps__text { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-muted); }
.steps__icon { width: 28px; height: 28px; color: var(--color-icon); opacity: .3; transition: opacity var(--dur-fast) var(--ease); }
.steps__item:hover .steps__icon { opacity: 1; }
.steps__btn { height: 56px; padding-inline: var(--space-6); font-size: var(--text-md); }
.job-summary__inner, .offer-card, .duties__copy, .requirements__card { display: flex; flex-direction: column; gap: var(--space-3); }
.job-summary__inner { display: grid; gap: var(--space-6); }
.job-summary__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.job-summary__fact { display: grid; gap: var(--space-1); padding: var(--card-pad); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.job-summary__fact .icon, .offer-card__icon, .job-summary__list .icon { color: var(--color-accent); }
.job-summary__fact span, .vacancy-card__meta { color: var(--color-muted); }
.job-summary__fact span { font-size: var(--text-xs); }
.job-summary__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); }
.job-summary__list li { display: flex; gap: var(--space-2); }
.job-summary__highlight { padding: var(--space-4) var(--space-5); border-left: 4px solid var(--color-primary); background: var(--color-surface); }
.offer-card { padding: var(--space-5); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.offer-card__text, .requirements__text, .duties__summary, .requirements__note { color: var(--color-muted); font-size: var(--text-sm); }
.duties__list { display: grid; gap: var(--space-7); }
.duties__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.duties__row:nth-child(even) .duties__img { order: 2; }
.duties__img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius-lg); background: var(--color-dark); }
.duties__num { color: var(--color-accent); font-weight: var(--weight-bold); }
.duties__title { font-size: var(--text-2xl); line-height: var(--line-tight); }
.duties__summary, .requirements__note { margin-top: var(--space-6); max-width: 72ch; }
.requirements__card { flex-direction: row; gap: var(--space-4); padding: var(--space-5); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.requirements__card--must { box-shadow: inset 4px 0 0 var(--color-primary); }
.requirements__icon { color: var(--color-accent); }
.gallery__track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: max(var(--container-pad), calc((100vw - var(--container)) / 2)); padding-bottom: var(--space-3); }
.gallery__item { flex: 0 0 min(480px, 80vw); scroll-snap-align: start; }
.gallery__item img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius-lg); background: var(--color-dark); }
.gallery__item figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }
.reviews__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.reviews__card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.reviews__top { display: flex; gap: var(--space-3); align-items: center; }
.reviews__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-dark); color: var(--color-dark-text); font-weight: var(--weight-bold); }
.reviews__avatar--2 { background: var(--color-accent); }
.reviews__avatar--3 { background: var(--color-muted); }
.reviews__info { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.reviews__text { font-size: var(--text-sm); }
.reviews__status { display: flex; gap: var(--space-2); margin-top: var(--space-5); color: var(--color-accent); font-size: var(--text-sm); }
@media (max-width: 900px) {
    .hero__title { font-size: var(--text-3xl); }
    .hero__features, .stats-band__inner, .job-summary__facts, .duties__row, .reviews__list { grid-template-columns: 1fr 1fr; }
    .steps__inner { grid-template-columns: 1fr; gap: var(--space-6); }
    .steps__media { aspect-ratio: 4 / 3; order: 2; }
    .steps__icon { display: none; }
    .steps__item { grid-template-columns: 48px 1fr; }
    .stats-band__inner, .duties__row, .reviews__list, .job-summary__list { grid-template-columns: 1fr; }
    .duties__row:nth-child(even) .duties__img { order: 0; }
    .hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--color-dark) 88%, transparent), transparent 45%, color-mix(in srgb, var(--color-dark) 75%, transparent)); }
}