:root{
  --navy:#ffffff;            /* базовый светлый фон */
  --navy-2:#f7f8fb;          /* светлый разделительный фон (бывший тёмный) */
  --accent:#b41aa9;          /* акцентный цвет */
  --purple:#8b5cf6;          /* доп. акцент (если понадобится) */
  --text:#222;               /* основной текст */
  --muted:#6b7280;           /* вторичный текст */
  --card:#ffffff;            /* фон карточек */
  --card-2:#ffffff;          /* альтернативный фон карточек */
  --soft:#f9fafb;            /* мягкий фон секций */
  --white:#fff;
  --container:1200px;
  --radius:18px;
  --shadow:0 8px 28px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background-color:var(--white)}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:50px 0}
.section.dark{background:var(--navy-2)}
.section.soft{background:var(--soft)}
.h1{font-size:48px;line-height:1.1;margin:0 0 16px;color:var(--text)}
.h2{font-size:36px;margin:0 0 14px;color:var(--text)}
.p{color:var(--muted);font-size:18px;line-height:1.7;margin:0}

a.btn,button.btn{display:inline-flex;gap:10px;align-items:center;border:1px solid transparent;cursor:pointer;background:var(--accent);color:#111;padding:14px 22px;border-radius:12px;font-weight:700;text-decoration:none;transition:.25s}
a.btn:hover,button.btn:hover{transform:translateY(-1px);filter:brightness(1.02)}
.btn.outline{background:#fff;border:1px solid #e5e7eb;color:#111}
.badge{display:inline-block;padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:#fff}

/* ========= HEADER ========= */
.header {
  position: sticky; /* вместо fixed */
  top: 0;
  height: 70px;
  display: flex;
  align-items: center;
  z-index: 50;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
}
.logo .mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #b41aa9);
  box-shadow: 0 2px 16px rgb(173, 111, 216);
}

.logo img {
  height: 60px;
  width: auto;
  display: block;
}

.nav a {
  color: var(--text);
  text-decoration: none;
  margin-left: 20px;
  opacity: .8;
}
.nav a:hover {
  opacity: 1;
}

/* ========= HERO ========= */
.hero{display: flex;justify-content: center;flex-direction: column;align-content: center;position:relative;min-height:70vh;}
.hero::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,0.6)}
.hero-content{position:relative;z-index:1;text-align:center;top:50%;padding:0 16px}
.hero h1{font-size:48px;margin-bottom:16px;color:#111}
.hero p{font-size:20px;max-width:640px;margin:0 auto;color:#333}

/* ========= USP ICONS ========= */
.usp{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.usp .card{background:var(--card);padding:18px;border-radius:14px;border:1px solid #e5e7eb;box-shadow:var(--shadow)}
.usp .title{font-weight:700;margin-bottom:6px;color:#111}
.usp .muted{color:var(--muted);font-size:14px}

/* ========= SERVICES ========= */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;padding:25px 20px;max-width:1200px;margin:auto}
.service{position:relative;overflow:hidden;height:300px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow);background:#fff;border:1px solid #e5e7eb}
.service img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease;display:block}
.service:hover img{transform:scale(1.06)}
.service-overlay{position:absolute;inset:0;background:rgba(255,255,255,0.85);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;opacity:0;transition:opacity .1s ease;color:#111}
.service:hover .service-overlay{opacity:1}
.service-overlay h3{font-size:22px;margin-bottom:10px;color:#111}
.service-overlay p{font-size:16px;color:#444}

/* ========= ABOUT TILES ========= */
.about .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.tile{background:var(--card);border:1px solid #e5e7eb;border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.tile h4{margin:0 0 8px;color:#111}
.tile p{margin:0;color:var(--muted)}
.about-photo{border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.about-info{
display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;margin-bottom:26px
}
/* ========= STATS ========= */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.stat{background:var(--card-2);text-align:center;border-radius:14px;padding:22px;border:1px solid #e5e7eb;box-shadow:var(--shadow)}
.stat .num{font-size:28px;font-weight:800;color:#111}
.stat .cap{color:var(--muted);font-size:13px}

/* ========= CLIENTS MARQUEE ========= */
.clients{display:flex;gap:30px;overflow:auto;padding:10px;text-align: center;}
.client{flex:0 0 250px;height:200px;border-radius:12px;background:#fff;display:grid;place-items:center;border:1px solid #e5e7eb;box-shadow:var(--shadow)}
.client img{max-width:170px;opacity:.85;}
.client:hover img{filter:none}
.client p{display:none;margin: 0px;}
.client:hover p{display:block;font-size:16px;color:#444}

/* ========= CERTIFICATES SLIDER ========= */
.slider{position:relative}
.track{display:flex;gap:18px;overflow:hidden;scroll-behavior:smooth}
.slide{flex:0 0 280px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;color:#111;box-shadow:var(--shadow);overflow:hidden}
.slide img{width:100%;height:180px;object-fit:contain;display:block}
.slide .cap{padding:12px;font-weight:600}
.ctrl{display:flex;gap:10px}
.ctrl .btn{padding:8px 12px;border-radius:10px;background:#fff;color:#111;border:1px solid #e5e7eb;box-shadow:var(--shadow)}

/* ========= FORM ========= */
.lead{background:linear-gradient(180deg,#ffffff,#f7f8fb)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#fff;padding:24px;border-radius:18px;border:1px solid #e5e7eb;box-shadow:var(--shadow)}
.form input,.form textarea{width:100%;padding:14px;border-radius:10px;border:1px solid #d1d5db;background:#fff;color:#111}
.form input::placeholder,.form textarea::placeholder{color:#9ca3af}
.form textarea{min-height:120px;grid-column:1/-1;resize: none;}
.form .btn{grid-column:1/-1}
.note{color:var(--muted);font-size:12px;margin-top:8px}

/* ========= CONTACTS ========= */
.contacts .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
.card{background:var(--card-2);border:1px solid #e5e7eb;border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.map{border:0;width:100%;height:320px;border-radius:12px;filter:grayscale(20%) contrast(1.02)}

/* ========= FOOTER ========= */
.footer{background:#f3f4f6;color:var(--muted)}
.footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.footer a{color:#374151;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer .copy{border-top:1px solid #e5e7eb;margin-top:20px;padding-top:16px;font-size:13px}

/* ========= RESPONSIVE ========= */
@media (max-width: 860px){
  .h1{font-size:36px}
  .hero{min-height:78vh}
  .contacts .grid,.form{grid-template-columns:1fr}
  .nav a{margin-left:14px}
  .stats{display: none;}
  .about-info{
	display:flex;flex-direction: column;
  }
}

/* Mobile menu */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 28px;
  height: 24px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }
  .nav {
    width: 100%;
    flex-direction: column;
    display: none;
    margin-top: 8px;
  }
  .nav a {
    margin: 6px 0;
  }
  .nav.open {
    display: flex;
  }
  .hero h1 {
    font-size: 32px;
  }
  .hero p {
    font-size: 16px;
  }
  .stats{display: none;}
    .about-info{
	display:flex;flex-direction: column;
  }
}