:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E7E5E4;
  --line-soft: #F5F5F4;
  --accent: #EA580C;
  --accent-deep: #C2410C;
  --warn: #DC2626;
  --max: 1200px;
  --pad-x: 24px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
button { font: inherit; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Type scale */
h1, h2, h3, h4 { margin: 0; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(36px, 5.2vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.4vw, 36px); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; line-height: 1.25; }
h4 { font-size: 16px; font-weight: 600; line-height: 1.3; }
p { margin: 0; }

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
}
.muted { color: var(--muted); }

/* Section */
section { padding: 96px 0; }
@media (max-width: 768px) {
  section { padding: 64px 0; }
}

/* Reveal-on-scroll — default visible; .pending is added by JS only to below-fold elements */
.reveal { opacity: 1; transform: none; }
.reveal.pending {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.pending.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal.pending { opacity: 1; transform: none; transition: none; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { background: #fff; border-color: var(--ink); color: var(--ink); }
.btn-warn { background: var(--warn); color: #fff; border-color: var(--warn); }
.btn-warn:hover { background: #c2410c; border-color: #c2410c; color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.5); color: #fff; }
.btn .arr { transition: transform 0.15s ease; }
.btn:hover .arr { transform: translateX(2px); }

/* Inline link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}
.link-arrow .arr { transition: transform 0.15s ease; }
.link-arrow:hover .arr { transform: translateX(3px); }

/* Header */
header.site {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--line);
  transition: backdrop-filter 0.2s ease, background 0.2s ease;
}
header.site.scrolled { backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); background: rgba(255,255,255,0.85); }
header.site .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: inline-flex; align-items: center; height: 40px; color: var(--ink); }
.logo img { display: block; height: 32px; width: auto; }
@media (max-width: 480px) { .logo img { height: 28px; } }

nav.primary { display: flex; gap: 28px; }
nav.primary a { color: var(--ink); font-size: 14.5px; font-weight: 500; }
nav.primary a:hover { color: var(--accent); }
nav.primary a.active { color: var(--accent); }

.header-right { display: flex; align-items: center; gap: 18px; }
.header-right .phone { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.header-right .phone:hover { color: var(--ink); }

.burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
  position: relative;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: #fff;
  z-index: 99;
  padding: 24px;
  border-top: 1px solid var(--line);
}
.mobile-menu.open { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu nav a {
  color: var(--ink);
  font-size: 18px; font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu .mobile-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 1024px) {
  nav.primary { display: none; }
  .header-right .phone { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 768px) {
  .header-right .btn { display: none; }
}

/* Hero (home) — full-bleed photo background with gradient overlay */
.hero {
  position: relative;
  background: #0F172A url('/assets/backm.jpg') center / cover no-repeat;
  color: #fff;
  padding: 132px 0 120px;
  overflow: hidden;
  border-bottom: 1px solid #1F2937;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(15, 23, 42, 0.94) 0%,
    rgba(15, 23, 42, 0.85) 30%,
    rgba(15, 23, 42, 0.65) 65%,
    rgba(15, 23, 42, 0.52) 100%
  );
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-content { max-width: 720px; }
.hero .eyebrow { color: #FDBA74; }
.hero h1 { color: #fff; margin-top: 16px; max-width: 18ch; }
.hero .lead { color: #D1D5DB; margin-top: 22px; max-width: 58ch; font-size: 19px; }
.hero .cta-row {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .hero { padding: 100px 0 88px; }
  .hero::before {
    background: linear-gradient(
      135deg,
      rgba(15, 23, 42, 0.92) 0%,
      rgba(15, 23, 42, 0.82) 50%,
      rgba(15, 23, 42, 0.68) 100%
    );
  }
}
@media (max-width: 768px) {
  .hero { padding: 80px 0 72px; }
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.86) 0%,
      rgba(15, 23, 42, 0.78) 60%,
      rgba(15, 23, 42, 0.7) 100%
    );
  }
  .hero .lead { font-size: 17px; }
}

/* Section header */
.sec-head { max-width: 720px; }
.sec-head .eyebrow { margin-bottom: 14px; display: block; }
.sec-head h2 + p { margin-top: 16px; color: var(--muted); font-size: 17px; line-height: 1.6; }

/* Two directions */
.two-cards {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) { .two-cards { grid-template-columns: 1fr; } }
.dir-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dir-card:hover { border-color: #d1d5db; box-shadow: var(--shadow-card); }
.dir-card .ico-wrap {
  width: 56px; height: 56px;
  background: #F3F4F6;
  border-radius: 10px;
  display: grid; place-items: center;
  margin-bottom: 24px;
  color: var(--ink);
}
.dir-card h3 { font-size: 22px; }
.dir-card p { color: var(--muted); margin-top: 12px; flex: 1; }
.dir-card .link-arrow { margin-top: 24px; }

/* Product grid */
.prod-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) { .prod-grid { grid-template-columns: 1fr; } }
.prod-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: border-color 0.2s ease;
}
.prod-card:hover { border-color: #d1d5db; }
.prod-card .ico-wrap {
  width: 48px; height: 48px;
  background: #F3F4F6;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--ink);
}
.prod-card .body { flex: 1; min-width: 0; }
.prod-card .head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.prod-card h3 { font-size: 18px; }
.tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: #F3F4F6;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.prod-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.prod-card .link-arrow { margin-top: 14px; font-size: 13px; }

/* Services */
.svc-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  transition: border-color 0.2s ease;
}
.svc-card:hover { border-color: #d1d5db; }
.svc-card .ico-wrap {
  width: 44px; height: 44px;
  background: #F3F4F6;
  border-radius: 8px;
  display: grid; place-items: center;
  margin-bottom: 20px;
  color: var(--ink);
}
.svc-card h3 { font-size: 18px; }
.svc-card p { color: var(--muted); font-size: 14.5px; margin-top: 10px; line-height: 1.55; }

/* Sectors */
.sectors {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 1024px) { .sectors { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .sectors { grid-template-columns: 1fr; } }
.sector {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}
.sector .ico { width: 28px; height: 28px; margin-bottom: 16px; color: var(--ink); }
.sector h3 { font-size: 17px; }
.sector p { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* Manufacturing */
.mfg-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 1024px) { .mfg-grid { grid-template-columns: 1fr; gap: 40px; } }
.mfg-grid .lead { font-size: 17px; }
.mfg-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
}
@media (max-width: 480px) { .mfg-stats { grid-template-columns: 1fr; } }
.stat { border-top: 1px solid var(--line); padding-top: 16px; }
.stat .num { font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.stat .lbl { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* Vakansii teaser (dark band on home) */
.vakansii-teaser {
  background: #111827;
  color: #fff;
}
.vakansii-teaser .eyebrow { color: #9CA3AF; }
.vakansii-teaser h2 { color: #fff; }
.vakansii-teaser .lead { color: #D1D5DB; }
.vac-chips {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vac-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid #374151;
  border-radius: 8px;
  background: transparent;
  color: #E5E7EB;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  cursor: default;
}
.vac-chip:hover { border-color: #6B7280; background: #1F2937; color: #fff; }
.vakansii-teaser .cta-row {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.vakansii-teaser .hr-phone { color: #9CA3AF; font-size: 14px; }
.vakansii-teaser .hr-phone a { color: #fff; }

/* Contacts */
.contacts-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 768px) { .contacts-grid { grid-template-columns: 1fr; gap: 24px; } }
.contact-col { border-top: 1px solid var(--ink); padding-top: 18px; }
.contact-col h3 { font-size: 16px; }
.contact-col a { display: block; margin-top: 10px; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.contact-col a + a { margin-top: 4px; color: var(--muted); }
.contact-col a:hover { color: var(--accent); }
.legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* Footer */
footer.site {
  background: #111827;
  color: #D1D5DB;
  padding: 64px 0 28px;
}
footer.site .ftop {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 768px) { footer.site .ftop { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { footer.site .ftop { grid-template-columns: 1fr; } }
footer.site .descr { margin-top: 14px; font-size: 14px; color: #9CA3AF; max-width: 36ch; line-height: 1.55; }
footer.site h4 { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
footer.site ul a { color: #D1D5DB; font-size: 14px; }
footer.site ul a:hover { color: #fff; }
footer.site .copyright {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid #374151;
  font-size: 13px;
  color: #9CA3AF;
}

/* ============================================ */
/*  VAKANSII PAGE                                */
/* ============================================ */

/* Page hero (dark band) */
.vh-hero {
  position: relative;
  background: #111827 url('/assets/vakansii-hero.jpg') center / cover no-repeat;
  color: #fff;
  padding: 88px 0 80px;
  overflow: hidden;
  border-bottom: 1px solid #1F2937;
}
.vh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(17, 24, 39, 0.97) 0%,
    rgba(17, 24, 39, 0.9) 35%,
    rgba(17, 24, 39, 0.72) 63%,
    rgba(17, 24, 39, 0.58) 100%
  );
  pointer-events: none;
}
.vh-hero .wrap { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .vh-hero {
    padding: 56px 0 56px;
    background-position: 58% center;
  }
  .vh-hero::before {
    background: linear-gradient(
      180deg,
      rgba(17, 24, 39, 0.91) 0%,
      rgba(17, 24, 39, 0.84) 56%,
      rgba(17, 24, 39, 0.78) 100%
    );
  }
}
.vh-hero .crumbs { font-size: 13px; color: #9CA3AF; margin-bottom: 18px; }
.vh-hero .crumbs a { color: #9CA3AF; }
.vh-hero .crumbs a:hover { color: #fff; }
.vh-hero .crumbs .sep { margin: 0 8px; opacity: 0.6; }
.vh-hero .eyebrow { color: #FDBA74; font-weight: 600; }
.vh-hero h1 { color: #fff; margin-top: 14px; max-width: 22ch; }
.vh-hero .lead { color: #D1D5DB; margin-top: 22px; max-width: 64ch; }
.vh-hero .hero-stats {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 56px;
}
@media (max-width: 640px) { .vh-hero .hero-stats { grid-template-columns: 1fr 1fr; gap: 28px; } }
.vh-hero .hero-stats > div {
  border-top: 1px solid #374151;
  padding-top: 16px;
  min-width: 110px;
}
.vh-hero .hero-stats strong {
  display: block;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.vh-hero .hero-stats span {
  display: block;
  margin-top: 4px;
  color: #9CA3AF;
  font-size: 13.5px;
}
.vh-hero .cta-row {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.vh-hero .updated {
  margin-top: 24px;
  font-size: 13px;
  color: #9CA3AF;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vh-hero .updated::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}
@media (max-width: 768px) {
  .vh-hero h1 { max-width: 11ch; }
  .vh-hero .lead { max-width: 32ch; }
  .vh-hero .cta-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .vh-hero .cta-row .btn {
    width: 100%;
    max-width: 260px;
    justify-content: center;
  }
}

/* Why us */
.why-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 40px;
}
@media (max-width: 1024px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } }
.why-item .ico-wrap {
  width: 44px; height: 44px;
  background: #F3F4F6;
  border-radius: 8px;
  display: grid; place-items: center;
  margin-bottom: 16px;
  color: var(--ink);
}
.why-item h3 { font-size: 17px; }
.why-item p { color: var(--muted); font-size: 14.5px; margin-top: 8px; line-height: 1.6; }

/* Vacancies accordion */
.vacancies-section { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vac-list { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.vac {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  scroll-margin-top: 88px;
}
.vac[open] { border-color: #d1d5db; box-shadow: var(--shadow-card); }
.vac:hover:not([open]) { border-color: #d1d5db; }
.vac > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.vac > summary::-webkit-details-marker { display: none; }
.vac-title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vac-title h3 { font-size: 18px; font-weight: 600; }
.vac-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.vac-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: #F3F4F6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.vac-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  flex-shrink: 0;
}
.vac-toggle::before { content: "Деталі"; }
.vac[open] .vac-toggle::before { content: "Згорнути"; }
.vac-toggle::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s ease;
}
.vac[open] .vac-toggle::after { transform: rotate(-135deg) translate(-1px, -1px); }
.vac-body { padding: 4px 28px 28px; border-top: 1px solid var(--line-soft); margin-top: -1px; padding-top: 24px; }
.vac-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 768px) { .vac-cols { grid-template-columns: 1fr; gap: 24px; } }
.vac-body h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.vac-body h4:not(:first-child) { margin-top: 24px; }
.vac-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vac-body ul li {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
}
.vac-body ul li::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--muted);
  border-radius: 50%;
  position: absolute;
  left: 4px; top: 9px;
}
.vac-body .vac-cta { margin-top: 24px; }
@media (max-width: 640px) {
  .vac > summary { padding: 18px 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .vac-toggle { align-self: flex-start; }
  .vac-body { padding: 22px 20px 22px; }
}

.no-match {
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #FAFAFA;
  font-size: 14.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.no-match strong { color: var(--ink); font-weight: 600; }

/* Hiring process steps */
.steps {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
}
@media (max-width: 768px) { .steps { grid-template-columns: 1fr; gap: 16px; } }
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  position: relative;
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  background: var(--ink);
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 17px; }
.step p { color: var(--muted); font-size: 14.5px; margin-top: 8px; line-height: 1.6; }

/* FAQ */
.faq-section { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-list {
  margin-top: 36px;
  border-top: 1px solid var(--line);
  max-width: 880px;
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--muted);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details > div {
  padding: 0 0 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 75ch;
}

/* Apply section */
.apply { padding-bottom: 96px; }
.apply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1024px) { .apply-grid { grid-template-columns: 1fr; gap: 40px; } }
.apply-text .lead { margin-top: 16px; max-width: 50ch; }
.apply-contacts {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apply-contact {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.15s ease;
}
.apply-contact:hover { border-color: var(--ink); color: var(--ink); box-shadow: var(--shadow-card); }
.apply-contact .ico-wrap {
  width: 38px; height: 38px;
  background: #F3F4F6;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--ink);
}
.apply-contact .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apply-contact strong {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.apply-contact span { font-size: 13px; color: var(--muted); }

/* Application form */
.apply-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 480px) { .apply-form { padding: 24px; } }
.apply-form h3 { font-size: 20px; margin-bottom: 4px; }
.apply-form .form-sub { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.apply-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apply-form label > span {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.apply-form label > span em {
  color: var(--warn);
  font-style: normal;
  margin-left: 2px;
}
.apply-form input,
.apply-form select,
.apply-form textarea {
  font: inherit;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.apply-form select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236B7280' stroke-width='1.5'><path d='M1 1.5l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.apply-form textarea { resize: vertical; min-height: 84px; }
.apply-form button { margin-top: 4px; align-self: flex-start; }
.apply-form .form-note {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 4px;
}
.apply-form .form-success {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
  display: none;
}
.apply-form.is-sent .form-success { display: block; }
.apply-form.is-sent label,
.apply-form.is-sent button,
.apply-form.is-sent .form-note,
.apply-form.is-sent .form-sub { display: none; }

.apply-form .form-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
  display: none;
}
.apply-form.is-failed .form-error { display: block; }