:root { --green:#087a42; --dark:#183124; --yellow:#dcea39; --soft:#f4f7f4; --line:#dfe6df; }
* { box-sizing:border-box; }
html, body { max-width:100%; overflow-x:clip; }
body { background:var(--soft); color:#202620; font-family:"Noto Sans Georgian",Inter,system-ui,sans-serif; margin:0; }
.shell { margin:auto; max-width:1120px; padding-left:16px; padding-right:16px; }
header { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.header-row { align-items:center; display:flex; justify-content:space-between; min-height:80px; }
.brand { align-items:center; color:var(--green); display:flex; font-size:28px; font-weight:900; text-decoration:none; }
.brand b { color:#e4b91f; }
.brand i { background:var(--yellow); border-radius:50%; height:8px; margin-left:5px; width:8px; }
nav { display:flex; gap:34px; }
nav a { color:#3c493f; font-weight:650; text-decoration:none; }
nav a.active, nav a:hover { color:var(--green); }
main { min-height:calc(100vh - 160px); padding-bottom:70px; }
.hero { padding:52px 0 38px; }
.hero > span { color:var(--green); font-size:12px; font-weight:850; letter-spacing:.16em; }
.hero h1 { font-size:42px; line-height:1.12; margin:10px 0 12px; }
.hero p { color:#667069; font-size:18px; margin:0; max-width:700px; overflow-wrap:anywhere; }
.vacancy-list { display:grid; gap:18px; min-width:0; }
.vacancy { min-width:0; background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:0 8px 30px #173d2710; }
.vacancy-top { align-items:flex-start; display:flex; gap:20px; justify-content:space-between; }
.vacancy h2 { font-size:24px; margin:0 0 10px; }
.meta { color:#69736c; display:flex; flex-wrap:wrap; gap:10px; }
.meta span { background:#f0f4f1; border-radius:99px; padding:7px 11px; }
.vacancy-body { color:#465047; line-height:1.75; margin-top:22px; overflow-wrap:anywhere; white-space:pre-line; }
.requirements { border-top:1px solid var(--line); margin-top:18px; padding-top:18px; }
.requirements h3 { color:var(--dark); font-size:16px; margin:0 0 7px; }
.apply { background:var(--green); border-radius:10px; color:#fff; display:inline-flex; font-weight:750; padding:12px 18px; text-decoration:none; }
button.apply { border:0; cursor:pointer; font:inherit; }
.application-dialog { background:transparent; border:0; margin:auto; max-height:calc(100vh - 32px); max-width:680px; padding:0; width:calc(100% - 32px); }
.application-dialog::backdrop { background:#0c2116a8; backdrop-filter:blur(3px); }
.application-form { background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 70px #0b26175c; display:grid; gap:16px; max-height:calc(100vh - 32px); overflow:auto; padding:30px; position:relative; }
.dialog-close { align-items:center; background:#f1f5f2; border:0; border-radius:50%; color:#405047; cursor:pointer; display:flex; font-size:28px; height:40px; justify-content:center; line-height:1; position:absolute; right:20px; top:20px; width:40px; }
.form-kicker { color:var(--green); font-size:11px; font-weight:850; letter-spacing:.16em; padding-right:48px; }
.application-form h2 { color:var(--dark); font-size:28px; margin:0; padding-right:48px; }
.application-vacancy { color:#657068; margin:-8px 0 4px; }
.application-form label { color:#2e3a31; display:grid; font-size:14px; font-weight:700; gap:7px; }
.application-form input, .application-form textarea { background:#fff; border:1px solid #ccd7cf; border-radius:10px; color:#202620; font:inherit; outline:none; padding:12px 14px; width:100%; }
.application-form input:focus, .application-form textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px #087a4218; }
.form-grid { display:grid; gap:14px; grid-template-columns:1fr 1fr; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; }
.button-primary, .button-secondary { border:0; border-radius:10px; cursor:pointer; font:inherit; font-weight:750; padding:12px 18px; }
.button-primary { background:var(--green); color:#fff; }
.button-primary:disabled { cursor:wait; opacity:.65; }
.button-secondary { background:#eef3ef; color:#344239; }
.application-status { border-radius:10px; display:none; line-height:1.5; margin:0; padding:11px 13px; }
.application-status.show { display:block; }
.application-status.success { background:#e6f6ec; color:#086c3b; }
.application-status.error { background:#fff0ee; color:#a52b1f; }
.honeypot { height:0; left:-10000px; overflow:hidden; position:absolute; width:0; }
.state { min-width:0; max-width:100%; background:#fff; border:1px dashed #cdd7cf; border-radius:16px; color:#69736c; overflow-wrap:anywhere; padding:50px; text-align:center; white-space:normal; word-break:break-word; }
footer { background:#fff; border-top:1px solid var(--line); }
footer .shell { align-items:center; display:flex; justify-content:space-between; min-height:80px; }
footer a { color:var(--green); text-decoration:none; }

@media (max-width:720px) {
  .shell { padding-left:16px; padding-right:16px; }
  .header-row { align-items:flex-start; flex-direction:column; padding-bottom:14px; padding-top:14px; }
  .header-row nav { gap:16px; margin-top:12px; overflow:auto; width:100%; }
  .hero { padding:34px 0 28px; }
  .hero h1 { font-size:34px; }
  .state { padding:32px 20px; }
  .vacancy { padding:20px; }
  .vacancy-top { align-items:stretch; flex-direction:column; }
  .apply { justify-content:center; text-align:center; }
  .application-form { padding:24px 18px 20px; }
  .form-grid { grid-template-columns:1fr; }
  .form-actions { flex-direction:column-reverse; }
  .button-primary, .button-secondary { width:100%; }
}