/* JobVsem — Flat Design. Сгенерировано generate.py */
:root{
  --bg:#f6fafe; --surface:#ffffff; --surface-2:#eef6fd;
  --text:#0c3a57; --heading:#0c4a6e; --muted:#475569;
  --primary:#0369a1; --primary-600:#0284c7; --accent:#0ea5e9;
  --cta:#15803d; --cta-600:#166534;
  --tg:#229ed9; --tg-600:#1e8bc0;
  --border:#dbeafe; --border-2:#e2e8f0;
  --ring:#0ea5e9;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(12,74,110,.06);
  --shadow-hover:0 8px 24px rgba(3,105,161,.12);
  --maxw:1120px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b1220; --surface:#111a2b; --surface-2:#16223a;
    --text:#dbe7f3; --heading:#eaf2fb; --muted:#9fb3c8;
    --primary:#38bdf8; --primary-600:#7dd3fc; --accent:#38bdf8;
    --cta:#22c55e; --cta-600:#16a34a;
    --tg:#2aa3dd; --tg-600:#2493cb;
    --border:#1e2d44; --border-2:#1e293b;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-hover:0 10px 28px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:hidden; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); overflow-x:hidden; max-width:100%;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Manrope",system-ui,sans-serif; color:var(--heading); line-height:1.15; letter-spacing:-.01em; margin:0 0 .5em}
h1{font-size:clamp(28px,5vw,46px); font-weight:700}
h2{font-size:clamp(23px,3.4vw,32px); font-weight:600}
h3{font-size:19px; font-weight:600}
p{margin:0 0 1em}
a{color:var(--primary-600); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}

/* фокус для клавиатуры */
:focus-visible{outline:3px solid var(--ring); outline-offset:2px; border-radius:6px}

/* skip-link */
.skip{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip:focus{position:fixed; left:12px; top:12px; width:auto; height:auto; clip:auto; padding:10px 16px; background:var(--primary); color:#fff; z-index:60; border-radius:8px}

/* SVG-иконки */
svg{width:1.25em; height:1.25em; display:inline-block; vertical-align:middle}

/* header */
.site-header{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:9px; font-family:"Manrope",sans-serif; font-weight:700; font-size:20px; color:var(--heading)}
.brand:hover{text-decoration:none}
.brand .mark{display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; background:var(--primary); color:#fff; border-radius:9px}
.brand .mark svg{width:18px;height:18px}
.nav-links{display:flex; gap:6px; margin-left:auto; align-items:center}
.nav-links a{color:var(--text); padding:8px 12px; border-radius:10px; font-weight:500}
.nav-links a:hover{background:var(--surface-2); text-decoration:none}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:"Manrope",sans-serif; font-weight:600; font-size:16px; padding:12px 20px; border-radius:12px; border:1px solid transparent; cursor:pointer; transition:background-color .18s ease,border-color .18s ease,color .18s ease; min-height:46px}
.btn:hover{text-decoration:none}
.btn svg{width:18px;height:18px}
.btn-tg{background:var(--tg); color:#fff}
.btn-tg:hover{background:var(--tg-600); color:#fff}
.btn-cta{background:var(--cta); color:#fff}
.btn-cta:hover{background:var(--cta-600); color:#fff}
.btn-ghost{background:transparent; color:var(--primary-600); border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-lg{padding:15px 26px; font-size:17px; min-height:52px}
.btn-nav{padding:9px 16px; min-height:40px}
.lbl-short{display:none}

/* hero */
.hero{padding:56px 0 36px; text-align:center}
.hero .eyebrow{display:inline-flex; align-items:center; gap:7px; color:var(--primary-600); background:var(--surface-2); border:1px solid var(--border); padding:6px 14px; border-radius:999px; font-weight:600; font-size:14px; margin-bottom:18px}
.hero p.lead{font-size:clamp(17px,2.2vw,20px); color:var(--muted); max-width:680px; margin:0 auto 26px}

/* search */
.search-wrap{max-width:560px; margin:0 auto}
.search-box{display:flex; align-items:center; gap:10px; background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:6px 6px 6px 16px; box-shadow:var(--shadow)}
.search-box:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.search-box .ic{color:var(--muted); display:inline-flex}
.search-box input{flex:1; border:0; background:transparent; color:var(--text); font:inherit; font-size:17px; padding:10px 0; min-width:0}
.search-box input:focus{outline:none}
.search-box input::placeholder{color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px}
.chip{font:inherit; font-size:14px; font-weight:500; color:var(--text); background:var(--surface); border:1px solid var(--border); padding:7px 14px; border-radius:999px; cursor:pointer; transition:background-color .18s,border-color .18s}
.chip:hover{background:var(--surface-2); border-color:var(--accent)}

/* sections */
section{padding:44px 0}
.section-head{text-align:center; max-width:680px; margin:0 auto 30px}
.section-head p{color:var(--muted); margin:0}

/* cities grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.city-card{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; color:var(--heading); cursor:pointer; box-shadow:var(--shadow); transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.city-card:hover{border-color:var(--accent); box-shadow:var(--shadow-hover); text-decoration:none; background:var(--surface)}
.city-card .pin{display:inline-flex; width:40px; height:40px; flex:0 0 40px; align-items:center; justify-content:center; background:var(--surface-2); color:var(--primary); border-radius:11px}
.city-card .pin svg{width:20px;height:20px}
.city-card .ct{display:flex; flex-direction:column; min-width:0}
.city-card .ct b{font-family:"Manrope",sans-serif; font-weight:600; font-size:17px}
.city-card .ct span{font-size:13px; color:var(--muted)}
.city-card .go{margin-left:auto; color:var(--muted); display:inline-flex}
.city-card:hover .go{color:var(--accent)}
.empty{text-align:center; color:var(--muted); padding:30px 0; display:none}

/* features */
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.feature{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px}
.feature .fi{display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center; background:var(--surface-2); color:var(--primary); border-radius:12px; margin-bottom:14px}
.feature h3{margin-bottom:6px}
.feature p{margin:0; color:var(--muted); font-size:16px}

/* how-to steps */
.how-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:16px}
.how-col{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow)}
.how-col h3{display:flex; align-items:center; gap:11px; margin-bottom:18px}
.how-col h3 .fi{display:inline-flex; width:38px; height:38px; flex:0 0 38px; align-items:center; justify-content:center; background:var(--surface-2); color:var(--primary); border-radius:10px}
.how-col h3 .fi svg{width:20px;height:20px}
ol.steps{counter-reset:s; list-style:none; padding:0; margin:0}
ol.steps li{counter-increment:s; position:relative; padding-left:42px; margin-bottom:15px; color:var(--text)}
ol.steps li:last-child{margin-bottom:0}
ol.steps li::before{content:counter(s); position:absolute; left:0; top:-1px; width:27px; height:27px; display:inline-flex; align-items:center; justify-content:center; background:var(--primary); color:#fff; border-radius:50%; font-family:"Manrope",sans-serif; font-weight:700; font-size:14px}
ol.steps b{color:var(--heading)}
.kbd{display:inline-block; background:var(--surface-2); border:1px solid var(--border); border-radius:7px; padding:1px 8px; font-size:15px; font-weight:600; color:var(--heading); white-space:nowrap}

/* cta band */
.cta-band{background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:40px; text-align:center; box-shadow:var(--shadow)}
.cta-band h2{margin-bottom:8px}
.cta-band p{color:var(--muted); max-width:560px; margin:0 auto 22px}
.cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* faq */
.faq{max-width:760px; margin:0 auto}
.faq details{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 18px; margin-bottom:10px}
.faq summary{cursor:pointer; font-family:"Manrope",sans-serif; font-weight:600; color:var(--heading); padding:14px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:22px; color:var(--accent); font-weight:400; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 14px; color:var(--muted)}

/* city page hero */
.city-hero{padding:48px 0 30px}
.breadcrumbs{font-size:14px; color:var(--muted); margin-bottom:18px}
.breadcrumbs a{color:var(--muted)}
.city-hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
.prose{max-width:760px}
.prose h2{margin-top:36px}
.prose ul{padding-left:0; list-style:none; margin:0 0 1em}
.prose li{position:relative; padding-left:30px; margin-bottom:10px; color:var(--text)}
.prose li svg{position:absolute; left:0; top:3px; width:18px; height:18px; color:var(--cta)}

/* legal documents */
.doc{max-width:820px}
.doc .meta{color:var(--muted); font-size:15px; margin:-8px 0 26px}
.doc h2{font-size:21px; margin:30px 0 10px}
.doc h3{font-size:17px; margin:18px 0 6px}
.doc p{margin:0 0 12px; color:var(--text)}
.doc ul,.doc ol{padding-left:22px; margin:0 0 14px}
.doc li{margin-bottom:7px; color:var(--text)}
.doc a{word-break:break-word}
.req{background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:18px 22px; margin:6px 0 22px}
.req p{margin:0 0 6px}
.req p:last-child{margin:0}
.req b{color:var(--heading)}

/* other cities */
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:15px; color:var(--text); background:var(--surface); border:1px solid var(--border); padding:8px 14px; border-radius:999px; transition:border-color .18s,background-color .18s}
.tag:hover{border-color:var(--accent); background:var(--surface-2); text-decoration:none}
.tag svg{width:15px;height:15px;color:var(--primary)}

/* footer */
.site-footer{border-top:1px solid var(--border); margin-top:30px; padding:34px 0; color:var(--muted); font-size:15px}
.footer-grid{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between}
.footer-links{display:flex; gap:16px; flex-wrap:wrap}
.footer-links a{color:var(--muted)}
.disclaimer{margin-top:16px; font-size:13px; color:var(--muted); opacity:.85; max-width:760px}

/* === АНИМАЦИИ === */
/* свечение-аврора в фоне hero */
.hero{position:relative; overflow:hidden}
.hero>.container{position:relative; z-index:1}
.hero::before,.hero::after{content:""; position:absolute; z-index:0; border-radius:50%; filter:blur(70px); opacity:.4; pointer-events:none}
.hero::before{width:360px; height:360px; background:radial-gradient(circle,var(--accent),transparent 70%); top:-130px; left:-70px}
.hero::after{width:320px; height:320px; background:radial-gradient(circle,#22c55e,transparent 70%); top:-90px; right:-60px}
/* тень шапки при скролле */
.site-header{transition:box-shadow .25s ease, background-color .25s ease}
.site-header.scrolled{box-shadow:0 6px 22px rgba(3,105,161,.10)}
/* лифт карточек и кнопок */
.city-card,.feature,.how-col,.tag{transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease}
.city-card:hover,.feature:hover,.tag:hover{transform:translateY(-3px)}
.btn{transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .15s ease}
.btn-lg:hover{transform:translateY(-2px)}
.chip{transition:background-color .18s, border-color .18s, transform .15s}
.chip:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:no-preference){
  /* появление блоков при скролле (только если активен JS) */
  html.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.65,.25,1), transform .6s cubic-bezier(.2,.65,.25,1)}
  html.js .reveal.in{opacity:1; transform:none}
  /* вход hero */
  html.js .reveal-hero{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
  html.js .reveal-hero.in{opacity:1; transform:none}
  html.js .hero .reveal-hero:nth-child(2){transition-delay:.08s}
  html.js .hero .reveal-hero:nth-child(3){transition-delay:.16s}
  html.js .hero .reveal-hero:nth-child(4){transition-delay:.24s}
  /* лёгкое движение свечения и пульс значка */
  .hero::before{animation:floatA 15s ease-in-out infinite}
  .hero::after{animation:floatB 18s ease-in-out infinite}
  .hero .eyebrow svg{animation:pulse 2.4s ease-in-out infinite}
}
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,28px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,34px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

@media (max-width:640px){
  body{font-size:16px}
  .nav{gap:10px}
  .brand{font-size:18px}
  .nav-links a.hide-sm{display:none}
  .nav-links .btn-nav{padding:9px 13px; font-size:14px}
  .lbl-full{display:none}
  .lbl-short{display:inline}
  .hero{padding:38px 0 26px}
  .hero h1{overflow-wrap:anywhere}
  .cta-band{padding:28px 20px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}