body { min-height: 100%; width: 100vw; background: #080b14; overflow-x: hidden; margin: 0; padding: 0; }
[data-theme="light"] body { background: #fafbff; }
.grid-bg, .glow-orb { display: none; }

main.page-frame {
  background: rgba(10,14,28,.48) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] main.page-frame { background: transparent !important; }
[data-theme="light"] .about-side-rack { opacity: .18; }
main.page-frame::before { left: 0 !important; right: 0 !important; }

#hero-nav {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

#careerSubtitle {
  white-space: nowrap;
  max-width: min(1440px, calc(100vw - 80px));
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
}

.ct-heading {
  text-align: center;
  padding-top: 8px !important;
  padding-bottom: 20px !important;
  position: relative; z-index: 1;
  width: 100%; max-width: 1100px; margin: 0 auto;
  box-sizing: border-box;
}
.ct-heading h1 {
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -1.5px; margin: 0 0 10px;
}
.ct-heading h1 .grad {
  background: linear-gradient(90deg, #00bcef, #00dbfd, #733cfc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ct-heading-sub {
  font-size: 16px; color: var(--muted); max-width: 560px;
  margin: 0 auto; line-height: 1.6;
}

[data-theme="light"] .ct-heading h1 .grad {
  background: linear-gradient(90deg, #6132f2, #733cfc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="light"] .cr-card,
[data-theme="light"] .cr-vacancy,
[data-theme="light"] .cr-cta {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(0,20,60,.12) !important;
}
[data-theme="light"] .cr-section-title { color: var(--accent-text); }
[data-theme="light"] .cr-section-title::before { background: var(--accent-text); }
[data-theme="light"] .cr-vacancy-tag { color: var(--accent-text); background: rgba(97,50,242,.1); }
[data-theme="light"] .cr-benefit-icon { color: var(--accent-text); border-color: rgba(97,50,242,.25); background: rgba(97,50,242,.08); }

.cr-wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 1100px; margin: 0 auto;
  padding: 0 40px 48px !important;
  box-sizing: border-box;
}

/* layout.css даёт всем section padding: 80px — сбрасываем внутри карьеры */
main.page-frame > .ct-heading,
main.page-frame > .cr-wrap {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
main.page-frame .cr-section,
main.page-frame .cr-cta {
  padding: 0 !important;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* layout.css сбрасывает section padding — возвращаем внутренние отступы карточки */
main.page-frame .cr-cta {
  padding: 28px 24px 32px !important;
}

.cr-section { margin-bottom: 24px; }
.cr-section:last-of-type { margin-bottom: 20px; }
.cr-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.cr-section-title::before {
  content: ''; display: block; width: 20px; height: 1px; background: var(--accent);
}

.cr-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.cr-card {
  background: rgba(14,19,36,.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(0,212,255,.15);
  border-radius: 20px;
  padding: 20px 20px;
}
.cr-benefit-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,212,255,.08);
  border: 1px solid rgba(0,212,255,.18);
  color: var(--accent);
  margin-bottom: 12px;
}
.cr-card h3 {
  font-size: 17px; font-weight: 800; color: var(--text);
  margin: 0 0 10px; line-height: 1.3;
}
.cr-card p {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted);
}

.cr-vacancies { display: flex; flex-direction: column; gap: 12px; }
.cr-vacancy {
  background: rgba(14,19,36,.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 24px;
  align-items: center;
}
.cr-vacancy-main { min-width: 0; }
.cr-vacancy h3 {
  margin: 0 0 8px;
  font-size: 20px; font-weight: 800; color: var(--text);
}
.cr-vacancy-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.cr-vacancy-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  color: var(--accent);
  background: rgba(0,212,255,.1);
  border: 1px solid rgba(0,212,255,.2);
}
.cr-vacancy p {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted);
}
.cr-vacancy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 12px; white-space: nowrap;
  font-weight: 800; font-size: 14px; text-decoration: none;
  background: var(--cta-bg);
  color: #fff;
  border: 1px solid var(--cta-border);
  box-shadow: var(--cta-shadow);
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
  transition: transform .2s, box-shadow .2s;
}
.cr-vacancy-btn:hover {
  transform: translateY(-1px);
  background: var(--cta-bg-hover);
  box-shadow: var(--cta-shadow-hover);
}

.cr-cta {
  text-align: center;
  background: rgba(14,19,36,.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(0,212,255,.15);
  border-radius: 20px;
  padding: 28px 24px;
  margin-top: 4px;
}
.cr-cta h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 900; color: var(--text);
}
.cr-cta p {
  margin: 0 auto 20px;
  max-width: 520px;
  font-size: 15px; line-height: 1.6; color: var(--muted);
}
.cr-cta a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 12px;
  font-weight: 800; font-size: 15px; text-decoration: none;
  background: var(--cta-bg);
  color: #fff;
  border: 1px solid var(--cta-border);
  box-shadow: var(--cta-shadow);
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
}
.cr-cta a:hover { background: var(--cta-bg-hover); transform: translateY(-1px); box-shadow: var(--cta-shadow-hover); }

.about-side-rack {
  position: fixed; top: 0; height: 100vh; width: 340px;
  pointer-events: none; z-index: 0; opacity: .9;
}
.about-side-rack-left  { left: 0; }
.about-side-rack-right { right: 0; }
.about-side-rack canvas { display: block; width: 340px; height: 100%; }
.about-side-rack-left canvas {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 45%);
  mask-image: linear-gradient(to right, transparent 0%, black 45%);
}
.about-side-rack-right canvas {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 45%);
  mask-image: linear-gradient(to left, transparent 0%, black 45%);
}
@media (max-width: 1480px) { .about-side-rack { opacity: .65; } }
@media (max-width: 1240px) { .about-side-rack { display: none; } }

@media (max-width: 900px) {
  #careerSubtitle {
    max-width: calc(100vw - 28px);
    font-size: 14px;
  }
  main.page-frame > .ct-heading,
  main.page-frame > .cr-wrap { padding-left: 24px !important; padding-right: 24px !important; }
  .cr-wrap { padding-bottom: 40px !important; }
  .ct-heading { padding-top: 16px !important; padding-bottom: 16px !important; }
  .cr-benefits { grid-template-columns: 1fr; }
  .cr-vacancy { grid-template-columns: 1fr; }
  .cr-vacancy-btn { width: 100%; }
}
@media (max-width: 560px) {
  #careerSubtitle { font-size: 11px; }
  main.page-frame > .ct-heading,
  main.page-frame > .cr-wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .ct-heading { padding-top: 12px !important; padding-bottom: 12px !important; }
  .cr-wrap { padding-bottom: 32px !important; }
  .cr-card, .cr-vacancy { padding: 18px 16px; }
  main.page-frame .cr-cta { padding: 18px 16px 24px !important; }
}