/* === Brand tokens === */
:root{
  --brand-50:#EEF2FF;--brand-100:#E0E7FF;--brand-200:#C7D2FE;--brand-300:#A5B4FC;--brand-400:#818CF8;
  --brand-500:#6366F1;--brand-600:#3860D9;--brand-700:#2F4EB7;--brand-800:#263F97;--brand-900:#22357F;
}
html{scroll-behavior:smooth}
body{background:#fff;color:#1f2937;font-family:Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* === Layout === */
.container-std{max-width:1200px;margin-inline:auto;padding-inline:1rem}
.section{padding-block:5rem}
.section-muted{padding-block:5rem;background:#F9FAFB}

/* === Type === */
.subheading{text-transform:uppercase;letter-spacing:.08em;font-size:.875rem;font-weight:600;color:var(--brand-600)}
.h1{font-weight:700;color:#111827;font-size:2rem;line-height:1.2}
@media (min-width:640px){.h1{font-size:2.25rem}}
.h2{font-weight:600;color:#111827;font-size:1.5rem;line-height:1.3}
@media (min-width:640px){.h2{font-size:1.875rem}}
.lead{font-size:1.125rem;color:#4b5563;line-height:1.6}

/* === Buttons & Links === */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:.75rem;padding:.625rem 1.25rem;font-weight:500;transition:background-color .2s,color .2s,box-shadow .2s,border-color .2s}
.btn-primary{background:var(--brand-600);color:#fff}
.btn-primary:hover{background:var(--brand-700)}
.btn-secondary{background:#F3F4F6;color:#111827;border:1px solid #E5E7EB}
.btn-secondary:hover{background:#EDEFF2}
.btn-ghost{background:transparent;color:var(--brand-600);border:1px solid var(--brand-200)}
.btn-ghost:hover{background:var(--brand-50);border-color:var(--brand-300)}
.btn-header{background: #eaf5ff; color: #111827; }
.btn-header:hover{ background: #D1E9FF; }
.btn[disabled],.btn.disabled{opacity:.6;cursor:not-allowed}
.btn-icon-right{display:inline-flex;align-items:center;gap:.5rem}
.link{color:var(--brand-600);display:inline-flex;align-items:center;gap:.25rem}
.link:hover{color:var(--brand-700)}
.btn:focus-visible,.link:focus-visible,.nav-link:focus-visible,.form-control:focus-visible,summary:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}

/* === Inputs === */
.form-control{display:block;width:100%;background:#fff;color:#111827;border:1px solid #D1D5DB;border-radius:.75rem;padding:.625rem .875rem;font-size:1rem;line-height:1.5;transition:border-color .2s,box-shadow .2s,background-color .2s;appearance:none}
.form-control::placeholder{color:#9CA3AF}
.form-control:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px rgba(56,96,217,.2);outline:none}
.form-control:disabled{background:#F9FAFB;color:#9CA3AF;cursor:not-allowed}
select.form-control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236B7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;padding-right:2.25rem}

/* === Cards, Icons, KPI, Nav === */
.card{background:#fff;border-radius:.75rem;border:1px solid #e5e7eb;box-shadow:0 1px 2px rgba(0,0,0,.05);padding:1.5rem}
.icon{width:2.5rem;height:2.5rem;border-radius:9999px;background:var(--brand-50);color:var(--brand-600);display:inline-flex;align-items:center;justify-content:center}
.kpi{border:1px solid #e5e7eb;border-radius:.75rem;padding:1.5rem;text-align:center}
.tag{display:inline-flex;align-items:center;padding:.25rem .625rem;background:#F3F4F6;color:#374151;border-radius:9999px;font-size:.75rem;font-weight:500}
.nav-link{color:#374151;font-size:.875rem;padding:.5rem .75rem;border-radius:.5rem}
.nav-link:hover{color:#111827}

/* === Logo grid === */
.logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:center}
@media (min-width:640px){.logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.logo-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.logo-item{display:flex;align-items:center;justify-content:center;height:3rem;filter:grayscale(1);opacity:.7;transition:opacity .2s}
.logo-item:hover{opacity:1;filter:grayscale(0)}

/* === Process steps === */
.step{display:flex;align-items:flex-start;gap:1rem}
.step-num{width:2.25rem;height:2.25rem;border-radius:9999px;background:var(--brand-600);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}

/* === Team === */
.team-grid{display:grid;gap:1.5rem}
@media (min-width:640px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.team-card{display:flex;align-items:center;gap:1rem}
.team-card .avatar{width:4rem;height:4rem;border-radius:9999px;object-fit:cover;flex-shrink:0}
@media (min-width:640px){.team-card .avatar{width:5rem;height:5rem}}

/* === FAQ === */
.faq-grid{display:grid;gap:1rem}
@media (min-width:768px){.faq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.faq-item{border:1px solid #e5e7eb;border-radius:.75rem;background:#fff;padding:1rem 1.25rem}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-weight:600;color:#111827}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:#6b7280;font-weight:600;font-size:1.25rem;line-height:1;margin-left:1rem}
.faq-item[open] summary::after{content:"−";color:var(--brand-600)}
.faq-item .content{margin-top:.75rem;color:#4b5563;line-height:1.6}

/* === Helpers === */
.cta-inline{display:flex;gap:.5rem;flex-wrap:wrap}

/* --- Blog/Vacancies helpers --- */
.ratio-16x12 {aspect-ratio:16 / 12;background:#E5E7EB;}
.ratio-16x9 {aspect-ratio:16 / 9;background:#E5E7EB;border-bottom:1px solid #E5E7EB}
.img-cover {width:100%;height:100%;object-fit:cover}
.post-meta {display:flex;align-items:center;gap:.5rem;color:#6B7280;font-size:.875rem}
.jobs-grid{display:grid;gap:1.5rem}
@media (min-width:768px){.jobs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Breadcrumbs, job pages, prose --- */
.breadcrumbs{display:flex;align-items:center;gap:.5rem;color:#6B7280;font-size:.875rem}
.breadcrumbs a{color:inherit}
.breadcrumbs a:hover{color:#111827;text-decoration:underline}
.job-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;color:#6B7280;font-size:.875rem}
.job-layout{display:grid;gap:2rem}
@media (min-width:1024px){.job-layout{grid-template-columns:1fr 320px}}
.job-aside .section-title{font-weight:600;color:#111827;margin-bottom:.5rem}
.job-aside .list{margin-top:.25rem;color:#4B5563;font-size:.9375rem}
.job-aside .list li+li{margin-top:.25rem}
.prose h2{font-size:1.25rem;font-weight:600;color:#111827;margin-top:1.25rem}
.prose h3{font-size:1.0625rem;font-weight:600;color:#111827;margin-top:1rem}
.prose p{color:#4B5563;margin-top:.75rem;line-height:1.7}
.prose ul{margin-top:.5rem;padding-left:1.25rem;color:#4B5563;list-style:disc}
.prose li+li{margin-top:.25rem}
.prose a:not(.btn){color:var(--brand-600)}
.prose a:not(.btn):hover{color:var(--brand-700)}

/* --- Blog list, pagination, related --- */
.post-list{display:grid;gap:1.5rem}
@media (min-width:768px){.post-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.post-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pagination{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}
.page-link{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 .5rem;border:1px solid #E5E7EB;border-radius:.5rem;color:#374151}
.page-link:hover{background:#F3F4F6}
.page-link.is-active{background:var(--brand-600);color:#fff;border-color:var(--brand-600)}
.page-prev,.page-next{padding:0 .75rem}
.tag-list{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.related-grid{display:grid;gap:1rem}
@media (min-width:768px){.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post-hero{border-radius:.75rem;overflow:hidden;border:1px solid #E5E7EB}

/* — inline-иконки — */
.i{width:1rem;height:1rem;stroke:currentColor;stroke-width:2;fill:none;flex-shrink:0}
.i-lg{width:1.25rem;height:1.25rem}
.i-muted{color:#6B7280}
.with-ico{display:inline-flex;align-items:center;gap:.375rem}
.row-ico{display:flex;align-items:center;gap:.5rem}

.nav-dd{position:relative}
.nav-dd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.375rem}
.nav-dd>summary::-webkit-details-marker{display:none}
.nav-dd .caret{transition:transform .2s}
.nav-dd[open] .caret{transform:rotate(180deg)}
.dd-panel{
  position:absolute; inset-block-start:100%; inset-inline-start:0;
  margin-top:.5rem; z-index:50;
  background:#fff; border:1px solid #E5E7EB; border-radius:.75rem;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  padding:.75rem; display:grid; gap:.5rem;
  grid-auto-rows:minmax(min-content,max-content);
  top:100%;
  left:50%; transform:translateX(-50%);
  width:min(calc(100% - 2rem), 1200px);   /* 2rem = паддинги контейнера (1rem слева/справа) */
  max-width:calc(100vw - 2rem);
  max-height:min(70vh, 520px);
  overflow:auto;
  z-index:50;
}

/* Сетки мегаменю: 1 кол. на мобилке, 2 — по умолч., 3 — на lg+ */
.mega{grid-template-columns:1fr}
@media (min-width:640px){.mega{grid-template-columns:repeat(2,minmax(240px,1fr))}}
@media (min-width:1024px){.mega{grid-template-columns:repeat(3,minmax(220px,1fr))}}
.dd-item{
  display:grid; grid-template-columns:24px 1fr; align-items:start;
  gap:.5rem; padding:.5rem .625rem; border-radius:.5rem;
  color:#374151; white-space:normal;
}
.dd-item:hover{background:#F3F4F6;color:#111827}
.dd-item svg{width:1.25rem; height:1.25rem; margin-top:.1rem}
.dd-item .title{font-weight:600; color:#111827; line-height:1.25}
.dd-item .desc{font-size:.875rem; color:#6B7280; line-height:1.4; margin-top:.125rem}
header .container-std{position:relative}
header .nav-dd.mega{position:static}
header .nav-dd.mega > .dd-panel{
  position:absolute; top:100%; margin-top:.5rem;
  left:50%; transform:translateX(-50%);
  width:min(calc(100% - 2rem), 1200px);
  max-width:calc(100vw - 2rem);
  max-height:min(70vh, 520px); overflow:auto;
}
header .nav-dd:not(.mega){position:relative}
header .nav-dd:not(.mega) > .dd-panel{
  position:absolute; top:100%; margin-top:.5rem;
  left:0; right:auto; transform:none;
  width:max(260px, 22rem);           /* базовая ширина ~352px */
  max-width:min(28rem, calc(100vw - 2rem)); /* верхняя граница */
  grid-template-columns:1fr;         /* один столбец */
}


header details.mobile-dd{ position: relative; }
header details.mobile-dd > summary{ position: relative; z-index: 60; }
header details.mobile-dd > .m-panel{
  position: absolute;
  top: calc(100% + .5rem);
  inset-inline-end: .75rem;      /* прижать к правому краю кнопки */
  inset-inline-start: auto;
  width: min(20rem, calc(100vw - 1.5rem)); /* не шире экрана минус отступы */
  max-height: min(70vh, 480px);
  overflow: auto;
  z-index: 50;
  bottom: auto;
  right: .75rem;                /* прижать к правому краю кнопки */
  left: auto;
  transform: none;

}
header details.mobile-dd[open]::before{
  content:""; position: fixed; inset: 0; background: rgba(17,24,39,.2); z-index: 40;
}
@media (min-width: 768px){
  header details.mobile-dd > .m-panel{ display: none; }
}

@media (max-width: 767px){
  .header-cta{ display: none; }
}

header details.mobile-dd > summary{
  min-height: 44px;
  display: inline-flex; align-items: center; gap: .5rem;
}
header details.mobile-dd[open] > summary{
  background: #EDEFF2; border-color: #D1D5DB;
}


@media (max-width: 360px){
  .menu-text{ display: none; } /* оставим только иконку на супер‑узких */
}

.sticky-header{
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(8px);
}
.sticky-header .container-std{
  padding-inline: max(1rem, env(safe-area-inset-left), 12px);
}




/* Footer newsletter + socials */
.newsletter{display:flex;flex-direction:column;gap:.5rem}
@media(min-width:640px){.newsletter{flex-direction:row}}
.newsletter .form-control{flex:1}
.social{display:flex;gap:.5rem}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border:1px solid #E5E7EB;border-radius:.5rem;color:#6B7280
}
.social a:hover{color:#111827;background:#F3F4F6}