:root{
  --bg:#F7FAFC;
  --bg-weak:#EDF2F7;
  --surface:#FFFFFF;
  --ink:#1F2937;
  --muted:#6B7280;
  --primary:#155E9A;   /* глубокий синий */
  --accent:#11A1C3;    /* бирюзовый акцент */
  --stroke:#E5E7EB;
  --success:#22C55E;
  --radius:14px;
  --shadow:0 8px 24px rgba(16,24,40,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{color:#0d4a79}
.container{width:min(1160px,100% - 32px);margin-inline:auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--stroke);
}
.header-wrap{display:flex;align-items:center;gap:24px;padding:12px 0}
.logo img{display:block}

.nav{margin-left:auto}
.nav__toggle{
  display:none;
  background:var(--primary);color:#fff;border:0;border-radius:10px;
  padding:10px 12px;cursor:pointer
}
.nav__list{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.nav__list a{padding:10px 8px;border-radius:8px;color:var(--ink);font-weight:600}
.nav__list a.active, .nav__list a:hover{color:var(--primary);background:var(--bg-weak)}

/* Hero */
.hero{
  background:
    radial-gradient(1200px 450px at 80% -20%, rgba(17,161,195,.18), transparent),
    linear-gradient(180deg, #fff 0%, #f8fbff 60%, #f4f9ff 100%);
  border-bottom:1px solid var(--stroke);
}
.hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:48px 0}
.hero__content h1{margin:0 0 12px;font-size:40px;line-height:1.15;letter-spacing:-.02em}
.lead{color:var(--muted);font-size:18px;margin:0 0 24px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;border:1px solid var(--stroke);font-weight:700}
.btn--primary{background:var(--primary);color:#fff;border-color:transparent;box-shadow:var(--shadow)}
.btn--primary:hover{background:#0f4e81}
.btn--ghost{background:#fff}
.hero__media{min-height:260px}
.hero__placeholder{
  height:260px;border-radius:16px;background:
  linear-gradient(135deg, rgba(21,94,154,.12), rgba(17,161,195,.12));
  display:grid;place-items:center;color:var(--muted);border:1px dashed var(--stroke)
}

/* Sections */
.section{padding:56px 0}
.section--alt{background:var(--surface)}
.section__header h2{margin:0 0 8px;font-size:28px;letter-spacing:-.01em}
.section__header p{margin:0;color:var(--muted)}

.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}

.card{
  background:#fff;border:1px solid var(--stroke);border-radius:var(--radius);
  padding:20px;box-shadow:0 1px 0 rgba(16,24,40,.02)
}
.card--stroke{background:linear-gradient(#fff,#fff) padding-box, linear-gradient(180deg,#e8eef6,#ffffff) border-box;border:1px solid transparent}

.bullets{margin:0;padding:0 0 0 18px}
.bullets li{margin:6px 0}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--bg);border:1px solid var(--stroke);border-radius:12px;padding:12px}
.stat__num{display:block;font-size:20px;font-weight:800;color:var(--primary)}
.stat__desc{color:var(--muted);font-size:13px}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery img{border-radius:12px;border:1px solid var(--stroke)}

/* Lists */
.list{margin:10px 0 0;padding:0 0 0 18px}
.list li{margin:6px 0}

/* Badges */
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge{padding:8px 12px;border-radius:999px;border:1px solid var(--stroke);background:var(--bg-weak);font-weight:700;color:#0f2b46}

/* Contacts */
.contacts{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.contact-card{background:#fff;border:1px solid var(--stroke);border-radius:var(--radius);padding:20px}
.contact-row{display:flex;gap:16px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--stroke)}
.contact-row:last-child{border-bottom:0}
.label{min-width:90px;color:var(--muted)}
.value{font-weight:700}
.map-embed .map-placeholder{height:220px;border-radius:12px;border:1px dashed var(--stroke);display:grid;place-items:center;color:var(--muted);background:var(--bg)}

/* Footer */
.site-footer{border-top:1px solid var(--stroke);background:#fff}
.footer-wrap{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.footer-right a{color:var(--muted)}
.footer-right a:hover{color:var(--primary)}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr 1fr}
  .contacts{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav__toggle{display:inline-flex;align-items:center}
  .nav__list{display:none;position:absolute;right:16px;top:64px;background:#fff;border:1px solid var(--stroke);border-radius:12px;box-shadow:var(--shadow);padding:10px}
  .nav__list.show{display:flex;flex-direction:column;min-width:240px}
  .grid--2,.grid--3{grid-template-columns:1fr}
}

/* Smooth scroll offset for sticky header */
:target{scroll-margin-top:84px}





/* Topbar */
.topbar{background:var(--primary);color:#fff;font-size:13px}
.topbar__inner{display:flex;align-items:center;gap:12px;padding:6px 0}
.topbar a{color:#fff;text-underline-offset:2px}
.topbar .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.6)}
.topbar .spacer{margin-left:auto}

/* Scroll progress */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--accent),var(--primary));
  box-shadow:0 1px 0 rgba(0,0,0,.06)
}

/* Hover акцент для карточек */
.card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:rgba(17,161,195,.35)}

/* Таймлайн */
.timeline{
  list-style:none;margin:20px 0 0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(4,1fr)
}
.step{position:relative;background:#fff;border:1px solid var(--stroke);border-radius:var(--radius);padding:20px}
.step:not(:last-child)::after{
  content:"";position:absolute;top:36px;right:-8px;width:16px;height:2px;background:var(--stroke)
}
.step__num{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:800;margin-bottom:8px
}
.step h3{margin:4px 0 6px}

/* Партнёры */
.partners{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:14px;align-items:center}
.partner{
  background:#fff;border:1px solid var(--stroke);border-radius:12px;padding:16px;text-align:center;
  color:#4B5563;font-weight:700;filter:grayscale(1);opacity:.75;transition:filter .2s ease, opacity .2s ease
}
.partner:hover{filter:none;opacity:1}

/* Кнопка «Наверх» */
.to-top{
  position:fixed;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--stroke);background:var(--primary);color:#fff;font-size:18px;
  display:none;align-items:center;justify-content:center;box-shadow:var(--shadow);cursor:pointer
}
.to-top.show{display:flex}

/* Reveal-анимации */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
  .card,.partner{transition:none}
}

/* Адаптив */
@media (max-width: 980px){
  .timeline{grid-template-columns:1fr}
  .step:not(:last-child)::after{display:none}
  .partners{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 720px){
  .partners{grid-template-columns:repeat(2,1fr)}
}




/* Gallery Mosaic - компактная мозаика */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 120px);
  gap: 8px;
  margin-top: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  z-index: 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.gallery-item:hover img {
  transform: scale(1.03);
}

/* Макет мозаики */
.gallery-item:nth-child(1) {
  /* Большое фото слева */
  grid-column: 1 / 4;
  grid-row: 1 / 4;
}

.gallery-item:nth-child(2) {
  /* Маленькое внизу справа */
  grid-column: 4 / 6;
  grid-row: 3 / 4;
}

.gallery-item:nth-child(3) {
  /* Маленькое рядом внизу */
  grid-column: 6 / 7;
  grid-row: 3 / 4;
}

.gallery-item:nth-child(4) {
  /* Среднее выше */
  grid-column: 4 / 6;
  grid-row: 1 / 3;
}

.gallery-item:nth-child(5) {
  /* Вертикальное справа */
  grid-column: 6 / 7;
  grid-row: 1 / 3;
}

.gallery-item:nth-child(6) {
  /* Широкое внизу */
  grid-column: 1 / 4;
  grid-row: 4 / 5;
}

/* Адаптив для мозаики */
@media (max-width: 980px) {
  .gallery-mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 140px);
  }

  .gallery-item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .gallery-item:nth-child(2) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .gallery-item:nth-child(3) {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }

  .gallery-item:nth-child(4) {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
  }

  .gallery-item:nth-child(5) {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }

  .gallery-item:nth-child(6) {
    grid-column: 3 / 5;
    grid-row: 3 / 4;
  }
}

@media (max-width: 720px) {
  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 180px);
  }

  .gallery-item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .gallery-item:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .gallery-item:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .gallery-item:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }

  .gallery-item:nth-child(5) {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }

  .gallery-item:nth-child(6) {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
}




/* Дополнительные стили */
.advantages {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--stroke);
}

.advantages h4 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--primary);
  font-weight: 700;
}

.quality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.contact-cta {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-weak);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
}

.contact-cta p {
  margin: 0 0 8px;
}

.contact-cta p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* Адаптив для новых блоков */
@media (max-width: 720px) {
  .quality-grid {
    grid-template-columns: 1fr;
  }
}




/* Hero */
.hero{
  background:
    radial-gradient(1200px 450px at 80% -20%, rgba(17,161,195,.18), transparent),
    linear-gradient(180deg, #fff 0%, #f8fbff 60%, #f4f9ff 100%);
  border-bottom:1px solid var(--stroke);
}
.hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:48px 0}
.hero__content h1{margin:0 0 12px;font-size:40px;line-height:1.15;letter-spacing:-.02em}
.lead{color:var(--muted);font-size:18px;margin:0 0 24px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;border:1px solid var(--stroke);font-weight:700}
.btn--primary{background:var(--primary);color:#fff;border-color:transparent;box-shadow:var(--shadow)}
.btn--primary:hover{background:#0f4e81}
.btn--ghost{background:#fff}
.btn--ghost:hover{background:var(--bg-weak)}

.hero__media{
  position: relative;
  min-height:280px;
}

.hero__image{
  position: relative;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  box-shadow: 0 8px 32px rgba(21, 94, 154, 0.12);
  background: linear-gradient(135deg, rgba(21,94,154,.08), rgba(17,161,195,.08));
}

.hero__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hero__image:hover img{
  transform: scale(1.02);
}

.hero__badge{
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(21, 94, 154, 0.2);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.badge-text{
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.badge-company{
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 1px;
}

/* Fallback для случая отсутствия изображения */
.hero__placeholder{
  height:280px;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(21,94,154,.12), rgba(17,161,195,.12));
  display:grid;
  place-items:center;
  color:var(--muted);
  border:1px dashed var(--stroke);
  font-weight: 600;
}

/* Адаптив для Hero */
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
  .hero__media{min-height: 240px}
  .hero__image{height: 240px}
}

@media (max-width: 720px){
  .hero__image{height: 200px}
  .hero__badge{
    top: 12px;
    left: 12px;
    padding: 6px 10px;
  }
  .badge-text{font-size: 10px}
  .badge-company{font-size: 13px}
}