/* Every size is written against the 1024px design and scaled with --u,
   so the desktop page keeps the proportions of the mockup. */
:root {
  --u: calc(min(100vw, 1440px) / 1024);
  --blue: #0a6ff0;
  --blue-dark: #0657c6;
  --yellow: #fcb91a;
  --black: #05070b;
  --ink: #1a1d24;
  --line: #d5dae3;
  --red: #d92626;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--ink); font-family: "Noto Sans", Arial, sans-serif; line-height: 1.3; overflow-x: hidden; }
img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 600; transition: background .15s;
}
.btn:hover { background: var(--blue-dark); }

/* Header */
.site-header {
  position: relative; z-index: 5;
  display: flex; align-items: center;
  height: calc(85 * var(--u));
  padding: 0 calc(36 * var(--u)) 0 calc(290 * var(--u));
  background: var(--black);
}
.logo { position: absolute; left: calc(40 * var(--u)); top: calc(3 * var(--u)); width: calc(165 * var(--u)); }
.main-nav { display: flex; gap: calc(35 * var(--u)); font-size: calc(15.5 * var(--u)); font-weight: 500; color: #fff; }
.main-nav a { position: relative; padding: calc(6 * var(--u)) 0; color: #e4e7ec; }
.main-nav a:hover, .main-nav a.active { color: #fff; }
.main-nav a.active { font-weight: 600; }
.main-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(3 * var(--u)); background: var(--blue); }
.btn-contact {
  margin-left: auto; gap: calc(14 * var(--u));
  width: calc(150 * var(--u)); height: calc(46 * var(--u));
  border-radius: calc(7 * var(--u)); font-size: calc(15 * var(--u));
}
.btn-contact i { font-size: calc(20 * var(--u)); }
.nav-toggle { display: none; }

/* Hero */
.hero { position: relative; height: calc(580 * var(--u)); background: #000; color: #fff; overflow: hidden; }
.hero-photo {
  position: absolute; top: 0; right: 0; height: 100%; width: calc(559 * var(--u)); max-width: none; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.hero-content { position: relative; padding: calc(64 * var(--u)) 0 0 calc(45 * var(--u)); }
h1 { font-weight: 400; text-transform: uppercase; }
.h1-main, .h1-jobs { display: block; width: fit-content; line-height: 1; }
.h1-main {
  font-family: "Anton", Impact, sans-serif; font-size: calc(68 * var(--u));
  transform: scaleX(1.18); transform-origin: left; letter-spacing: -.005em;
  background: linear-gradient(#fff 45%, #bfc3ca); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h1-jobs {
  margin-top: calc(-10 * var(--u)); padding-right: .1em;
  font-family: "Barlow", Arial, sans-serif; font-weight: 900; font-style: italic; font-size: calc(112 * var(--u));
  line-height: .86; letter-spacing: -.01em;
  background: linear-gradient(#2c92ff 15%, #0a62e0 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brush {
  position: relative; display: block;
  width: calc(410 * var(--u)); height: calc(84 * var(--u));
  margin: calc(-28 * var(--u)) 0 0 calc(-23 * var(--u));
}
.brush svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.brush-text {
  position: absolute; left: calc(36 * var(--u)); bottom: calc(10 * var(--u));
  display: flex; gap: calc(6 * var(--u)); white-space: nowrap;
  font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 800; font-style: italic;
  font-size: calc(39.5 * var(--u)); line-height: 1;
  transform: rotate(-1.6deg); transform-origin: left bottom;
}
.brush-text b { color: #0a0a0a; font-weight: 800; margin-right: calc(8 * var(--u)); }
.brush-text i { color: #fff; }
.brush-text em { color: var(--yellow); }
.hero-lead { width: calc(350 * var(--u)); margin: calc(4 * var(--u)) 0 0 calc(3 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.38; }

.benefits { display: flex; margin: calc(18 * var(--u)) 0 0 calc(-5 * var(--u)); text-align: center; font-size: calc(14 * var(--u)); line-height: 1.28; }
.benefits li { padding: 0 calc(10 * var(--u)); border-left: 1px solid #3a3f48; }
.benefits li:first-child { border: 0; width: calc(92 * var(--u)); padding: 0; }
.benefits li:nth-child(2) { width: calc(96 * var(--u)); }
.benefits li:nth-child(3) { width: calc(124 * var(--u)); padding: 0 calc(8 * var(--u)); }
.benefits li:nth-child(4) { width: calc(92 * var(--u)); }
.benefits small { display: block; font-size: calc(13 * var(--u)); }
.ring {
  display: flex; align-items: center; justify-content: center;
  width: calc(52 * var(--u)); height: calc(52 * var(--u)); margin: 0 auto calc(8 * var(--u));
  border: 2px solid var(--blue); border-radius: 50%; color: #2b8cff; font-size: calc(24 * var(--u));
}
.btn-apply {
  gap: calc(18 * var(--u)); width: calc(235 * var(--u)); height: calc(52 * var(--u)); margin-top: calc(7 * var(--u));
  border-radius: calc(9 * var(--u)); font-size: calc(22 * var(--u)); text-transform: uppercase;
}

/* Application form */
.apply { background: #f8fafd; padding: calc(16 * var(--u)) calc(54 * var(--u)) calc(9 * var(--u)); }
.apply h2 {
  display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--u));
  font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: calc(37 * var(--u));
  text-transform: uppercase; line-height: 1.1;
}
.apply h2 strong { color: var(--blue); font-weight: 700; }
.apply h2::before, .apply h2::after { content: ""; width: calc(84 * var(--u)); height: 2px; }
.apply h2::before { background: linear-gradient(90deg, transparent, var(--blue)); }
.apply h2::after { background: linear-gradient(90deg, var(--blue), transparent); }
.apply-sub { margin-top: calc(3 * var(--u)); text-align: center; font-size: calc(14.5 * var(--u)); color: #3b3f47; }

form { margin-top: calc(9 * var(--u)); }
.row { display: grid; column-gap: calc(22 * var(--u)); }
.row-3 { grid-template-columns: 314fr 293fr 266fr; }
.row-cities { grid-template-columns: 314fr 581fr; }
.row-2 { grid-template-columns: 448fr 441fr; column-gap: calc(27 * var(--u)); }
.field { border: 0; margin: 0 0 calc(9 * var(--u)); padding: 0; min-width: 0; }
.field > label, legend { display: block; padding: 0; margin-bottom: calc(5 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 500; color: var(--ink); }
.req { color: var(--red); margin-left: 2px; }
.opt { font-weight: 400; }

.control {
  position: relative; display: flex; align-items: center;
  height: calc(37 * var(--u)); padding-left: calc(16 * var(--u));
  background: #fff; border: 1px solid var(--line); border-radius: calc(3 * var(--u));
}
.control:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(10, 111, 240, .15); }
.control > i { flex: none; width: calc(18 * var(--u)); text-align: center; font-size: calc(16 * var(--u)); color: #15181f; }
.control input, .control select {
  flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0 calc(14 * var(--u)) 0 calc(17 * var(--u));
  border: 0; background: none; outline: 0; font: inherit; font-size: calc(13.5 * var(--u)); color: var(--ink);
}
.control ::placeholder { color: #6d7380; opacity: 1; }
.select::after {
  content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; right: calc(12 * var(--u)); font-size: calc(10 * var(--u)); color: #15181f; pointer-events: none;
}
.control select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-left: calc(10 * var(--u)); padding-right: calc(30 * var(--u)); }
.control select:invalid { color: #6d7380; }

.radios { display: flex; gap: calc(38 * var(--u)); padding: calc(1 * var(--u)) 0 calc(2 * var(--u)) calc(4 * var(--u)); }
.radios label { display: flex; align-items: center; gap: calc(16 * var(--u)); font-size: calc(14.5 * var(--u)); color: #3b3f47; cursor: pointer; }
.radios input {
  appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
  width: calc(21 * var(--u)); height: calc(21 * var(--u));
  border: 1.5px solid #4c515c; border-radius: 50%; background: #fff;
}
.radios input:checked { border: 2px solid var(--blue); background: radial-gradient(circle, var(--blue) 0 52%, #fff 56%); }

.skills { display: grid; grid-template-columns: 305fr 288fr 280fr; gap: calc(8 * var(--u)) calc(21 * var(--u)); }
.skill {
  display: flex; align-items: center; height: calc(36 * var(--u)); padding-left: calc(12 * var(--u));
  background: #fff; border: 1px solid var(--line); border-radius: calc(3 * var(--u));
  font-size: calc(12 * var(--u)); cursor: pointer;
}
.skill:has(input:checked) { border-color: var(--blue); background: #eff6ff; }
.skill input {
  appearance: none; -webkit-appearance: none; margin: 0 calc(24 * var(--u)) 0 0; cursor: pointer; flex: none;
  position: relative; width: calc(18 * var(--u)); height: calc(18 * var(--u));
  border: 1px solid #b4bac5; border-radius: calc(3 * var(--u)); background: #fff;
}
.skill input:checked { background: var(--blue); border-color: var(--blue); }
.skill input:checked::after {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: calc(11 * var(--u));
}
.skill > i, .dots { flex: none; width: calc(24 * var(--u)); margin-right: calc(16 * var(--u)); text-align: center; font-size: calc(17 * var(--u)); color: #15181f; }
.dots { width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: 0 calc(19 * var(--u)) 0 calc(3 * var(--u)); display: grid; place-items: center; background: #15181f; color: #fff; border-radius: 50%; font-size: calc(10 * var(--u)); }

.control-tall { height: calc(44 * var(--u)); }
.control-file > div { flex: 1; min-width: 0; padding-left: calc(15 * var(--u)); }
.control-file input { display: block; height: auto; padding: 0; font-size: calc(13 * var(--u)); color: #5a606c; }
.control-file input::file-selector-button {
  height: calc(24 * var(--u)); margin-right: calc(9 * var(--u)); padding: 0 calc(9 * var(--u));
  background: #ececee; border: 1px solid #c9ccd2; border-radius: calc(3 * var(--u));
  font: inherit; font-size: calc(13 * var(--u)); color: #1a1d24; cursor: pointer;
}
.control-file small { display: block; font-size: calc(10.5 * var(--u)); color: #4b505b; }

.hp { position: absolute; left: -9999px; }

.btn-submit {
  gap: calc(16 * var(--u)); width: 100%; height: calc(50 * var(--u)); margin-top: calc(1 * var(--u));
  border-radius: calc(5 * var(--u)); font-size: calc(18.5 * var(--u)); text-transform: uppercase;
}
.btn-submit i { font-size: calc(30 * var(--u)); }
.btn-submit[disabled] { opacity: .7; cursor: wait; }

.field.invalid .control, .field.invalid .skill { border-color: var(--red); }
.err { display: block; margin-top: calc(3 * var(--u)); font-size: calc(12 * var(--u)); color: var(--red); }
.form-message { margin: calc(4 * var(--u)) 0 calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); background: #fdecec; border: 1px solid #f5bcbc; border-radius: calc(4 * var(--u)); color: #a31515; font-size: calc(14 * var(--u)); }

.form-success { padding: calc(50 * var(--u)) 0 calc(60 * var(--u)); text-align: center; outline: 0; }
.form-success i { font-size: calc(56 * var(--u)); color: #17a34a; }
.form-success h3 { margin-top: calc(14 * var(--u)); font-size: calc(24 * var(--u)); }
.form-success p { margin-top: calc(6 * var(--u)); font-size: calc(16 * var(--u)); color: #3b3f47; }

/* Trust strip */
.trust { display: flex; height: calc(88 * var(--u)); padding: calc(16 * var(--u)) 0; background: #060a12; color: #fff; }
.trust-item { display: flex; align-items: center; gap: calc(17 * var(--u)); padding-left: calc(27 * var(--u)); border-left: 1px solid #333945; }
.trust-item:nth-child(1) { width: calc(285 * var(--u)); padding-left: calc(53 * var(--u)); border: 0; }
.trust-item:nth-child(2) { width: calc(229 * var(--u)); padding-left: calc(25 * var(--u)); }
.trust-item:nth-child(3) { width: calc(246 * var(--u)); padding-left: calc(32 * var(--u)); }
.trust-item:nth-child(4) { flex: 1; padding-left: calc(33 * var(--u)); }
.trust h3 { font-size: calc(13.5 * var(--u)); font-weight: 600; text-transform: uppercase; }
.trust p { margin-top: calc(3 * var(--u)); font-size: calc(12.5 * var(--u)); color: #dfe3e9; line-height: 1.32; }
.trust-item > i { flex: none; font-size: calc(46 * var(--u)); color: var(--blue); }
.trust-item:nth-child(3) p, .trust-item:nth-child(4) p { max-width: calc(120 * var(--u)); }
.trust-shield { flex: none; width: calc(43 * var(--u)); height: calc(52 * var(--u)); fill: none; stroke: var(--blue); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.free {
  flex: none; display: grid; place-items: center; width: calc(54 * var(--u)); height: calc(54 * var(--u));
  border: calc(3 * var(--u)) solid var(--blue); border-radius: 50%;
  font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: calc(21 * var(--u));
}

/* Footer */
.site-footer { background: #05080e; color: #fff; }
.footer-main { position: relative; display: flex; height: calc(136 * var(--u)); border-top: 1px solid #1a2230; overflow: hidden; }
.footer-logo { position: absolute; left: calc(35 * var(--u)); top: calc(6 * var(--u)); width: calc(165 * var(--u)); }
.footer-car { position: absolute; right: 0; bottom: 0; width: calc(254 * var(--u)); }
.footer-col { position: relative; z-index: 1; padding: calc(13 * var(--u)) 0 0 calc(50 * var(--u)); margin-top: calc(14 * var(--u)); margin-bottom: calc(14 * var(--u)); border-left: 1px solid #333945; }
.footer-col:nth-of-type(1) { margin-left: calc(267 * var(--u)); width: calc(245 * var(--u)); }
.footer-col:nth-of-type(2) { padding-left: calc(41 * var(--u)); }
.footer-col h4 { margin-top: calc(-13 * var(--u)); font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; font-size: calc(19 * var(--u)); color: #2b8cff; }
.footer-col li { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); }
.footer-col li a:hover, .legal a:hover, .footer-site:hover { color: #6db2ff; }
.footer-site { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(9 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; }
.footer-site i { font-size: calc(23 * var(--u)); }
.socials { display: flex; gap: calc(14 * var(--u)); margin-top: calc(14 * var(--u)); }
.socials a { display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border: 1.5px solid #fff; border-radius: 50%; font-size: calc(15 * var(--u)); }
.socials a:hover { background: var(--blue); border-color: var(--blue); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; height: calc(44 * var(--u)); padding: 0 calc(44 * var(--u)); background: #0b4aa2; font-size: calc(12.5 * var(--u)); }
.legal { display: flex; gap: calc(30 * var(--u)); }

/* Tablet and phone: stacked layout, sizes in real pixels */
@media (max-width: 899px) {
  :root { --u: 1px; }
  .site-header { height: 72px; padding: 0 16px 0 112px; justify-content: flex-end; }
  .logo { left: 16px; top: 4px; width: 86px; }
  .btn-contact { display: none; }
  .nav-toggle { display: block; padding: 8px 10px; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    padding: 8px 16px 12px; background: var(--black); font-size: 16px;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 10px 0; }
  .main-nav a.active::after { display: none; }
  .main-nav a.active { color: #5aa8ff; }

  .hero { --u: min(100vw / 480, 1.4px); height: auto; padding-bottom: 24px; }
  .hero-photo { width: 100%; opacity: .3; object-position: 60% 0; -webkit-mask-image: none; mask-image: none; }
  .hero-content { padding: 32px 16px 0; }
  .brush { margin-left: -6px; }
  .hero-lead { width: auto; max-width: 420px; margin-left: 0; font-size: 18px; }
  .benefits { flex-wrap: wrap; margin: 20px 0 0; font-size: 14px; }
  .benefits li, .benefits li:first-child, .benefits li:nth-child(n) { flex: 1 1 50%; width: auto; padding: 0 8px 14px; border: 0; }
  .benefits small { font-size: 13px; }
  .btn-apply { width: 100%; max-width: 320px; margin-top: 6px; font-size: 20px; height: 52px; }

  .apply { padding: 28px 16px 20px; }
  .apply h2 { font-size: 30px; text-align: center; }
  .apply h2::before, .apply h2::after { display: none; }
  .apply-sub { font-size: 15px; }
  form { margin-top: 18px; }
  .row-3, .row-cities, .row-2 { grid-template-columns: 1fr; }
  .field { margin-bottom: 14px; }
  .field > label, legend { font-size: 14px; }
  .control { height: 46px; }
  .control input, .control select { font-size: 16px; }
  .radios { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .skills { grid-template-columns: 1fr; }
  .skill { height: 44px; font-size: 14px; }
  .control-tall { height: auto; min-height: 58px; padding-top: 6px; padding-bottom: 6px; }
  .control-file input { font-size: 14px; }
  .control-file small { font-size: 12px; margin-top: 4px; }
  .btn-submit { height: 52px; font-size: 17px; }
  .btn-submit i { font-size: 22px; }
  .err { font-size: 13px; }

  .trust { display: grid; grid-template-columns: 1fr; gap: 18px; height: auto; padding: 24px 16px; }
  .trust-item, .trust-item:nth-child(n) { width: auto; padding: 0; border: 0; }
  .trust-item:nth-child(n) p { max-width: none; }
  .trust-item > i, .trust-shield, .free { width: 54px; text-align: center; }
  .trust h3 { font-size: 14px; }
  .trust p { font-size: 13px; }

  .footer-main { flex-direction: column; height: auto; padding: 20px 16px 0; gap: 20px; }
  .footer-logo { position: static; width: 150px; }
  .footer-col, .footer-col:nth-of-type(1), .footer-col:nth-of-type(2) { width: auto; margin: 0; padding: 0; border: 0; }
  .footer-col h4 { margin-top: 0; margin-bottom: 6px; font-size: 20px; }
  .footer-car { position: static; align-self: flex-end; width: 220px; margin: -20px -16px 0 0; }
  .footer-bottom { flex-direction: column; gap: 6px; height: auto; padding: 12px 16px; text-align: center; }
}