/* =========================================================
   TS-Web Main CSS — финальная редакция
   Переменные, сетки, без лишней синевы; отзывы с белой плашкой.
   ========================================================= */

/* ---------- Variables & Base ---------- */
:root{
  /* Цвета */
  --c-brand:#ff5970;       /* акцент */
  --c-dark:#212166;        /* фирменный тёмно-синий (не заливаем им всё подряд) */
  --c-gray:#e2e2e2;        /* светло-серый */
  --c-ink:#0b0b12;         /* базовый текст */
  --c-ink-2:#222;          /* тёмный текст 2 */
  --c-muted:rgba(0,0,0,.6);
  --c-white:#ffffff;

  /* Layout */
  --container:1200px;
  --header-h:72px;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);

  /* Typo */
  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  --fz:16px;
  --lh:1.55;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--c-ink);
  background:#fff;
  font:var(--fz)/var(--lh) var(--ff);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;height:auto}
a{color:#111;text-decoration:none}
a:hover{opacity:.9}
.container{max-width:var(--container);margin-inline:auto;padding:0 20px}
section{padding:64px 0;scroll-margin-top:calc(var(--header-h) + 20px)}
h1,h2,h3{margin:0 0 .4em}
h2{font-size:clamp(22px,3.2vw,32px)}
h3{font-size:clamp(18px,2.4vw,20px)}
.muted{color:#555}

/* ---------- Grid ---------- */
.grid{display:grid;gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid.cols-3{grid-template-columns:1fr}}
.faq-grid{gap:14px;margin-top:18px}
.brief-grid{grid-template-columns:1fr 1fr;gap:12px}
.contacts-grid{grid-template-columns:1.2fr .8fr}
@media (max-width:900px){
  .brief-grid{grid-template-columns:1fr}
  .contacts-grid{grid-template-columns:1fr}
}

/* ---------- Header ---------- */
header.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--c-gray);
}
.nav{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{width:28px;height:28px}
.topnav{margin-left:auto;display:flex;gap:8px;align-items:center}
.topnav a{padding:8px 10px;border-radius:10px}
.topnav a:hover{background:var(--c-gray)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:12px;font-weight:600;
  box-shadow:var(--shadow);transition:transform .2s, box-shadow .2s
}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.1)}
.btn--primary{background:var(--c-brand);color:#fff}
.btn--ghost{border:1px solid #111;color:#111;background:#fff}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--c-gray);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)
}
.card h3{margin:.2em 0 .4em}

/* ---------- Hero ---------- */
.hero{
  padding:80px 0;
  background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%);
}
.hero-grid{display:grid;gap:28px;align-items:center;grid-template-columns:1.2fr .8fr}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.15;margin:0 0 12px}
.hero .lead{font-size:clamp(16px,2.2vw,20px);color:#333;margin:0 0 26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.badge{
  display:inline-block;font-size:12px;background:#e2e2e2;color:#111;
  border-radius:999px;padding:4px 10px
}
.hero-media img{border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.06)}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{
  background:#fff;border:1px solid var(--c-gray);border-radius:14px;
  padding:18px;text-align:center
}
.kpi strong{display:block;font-size:28px;color:#111}

/* ---------- Services ---------- */
#services .card h3 i{margin-right:8px;color:var(--c-brand);opacity:.95}

/* ---------- Cases ---------- */
#cases .card img{border-radius:10px}

/* ---------- Reviews ---------- */
#reviews .card p{
  font-size:15px;color:var(--c-ink-2);margin:0 0 12px
}
#reviews footer{
  display:flex;align-items:center;gap:8px;
  font-size:14px;color:var(--c-muted);
  background:#ffffff;          /* белая подложка, как просил */
  padding:6px 10px;
  border-radius:8px;
}
#reviews footer i{font-size:16px;color:var(--c-brand)}

/* ---------- FAQ ---------- */
#faq .card {
  padding: 18px 20px;
}
#faq summary {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  list-style: none;
  color: #111;
}
#faq summary i {
  color: var(--c-brand);
  font-size: 16px;
}
#faq summary::-webkit-details-marker {
  display: none;
}
#faq details[open] summary {
  margin-bottom: 10px;
}
#faq p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- Forms ---------- */
form{display:grid;gap:12px}
label{font-weight:600;font-size:14px}
input,textarea,select{
  width:100%;padding:12px 14px;border:1px solid var(--c-gray);
  border-radius:12px;font:inherit;background:#fff
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--c-brand);
  box-shadow:0 0 0 3px rgba(255,89,112,.15)
}
.agree{display:flex;gap:10px;align-items:flex-start}
.privacy{font-size:12px;color:#666}
.form-status{font-size:14px;color:#555}
.form-status.ok{color:#1a7f37}     /* зелёный успех */
.form-status.err{color:#b00020}    /* ошибка */
.hidden{display:none!important}

/* ---------- Footer ---------- */
footer{
  background:#212166; /* фирменный синий для футера */
  color:#fff;padding:40px 0
}
footer a{color:#fff;opacity:.9}
.footer-grid{display:grid;gap:24px;grid-template-columns:2fr 1fr 1fr}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}
.footer-grid .brand{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.footer-grid .about{opacity:.9;max-width:46ch}
.fine{font-size:12px;opacity:.8;margin-top:16px}
.links{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}

/* ---------- Utilities ---------- */
.hidden{display:none !important}
.center{display:grid;place-items:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-16{margin-top:16px}.mb-16{margin-bottom:16px}

/* ---------- Media tweaks ---------- */
@media (max-width:600px){
  .topnav a.btn{padding:10px 14px}
  .btn{padding:11px 16px}
}

/* ---------- Prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* ---------- Print ---------- */
@media print{
  header,footer,.hero-cta{display:none !important}
  a[href]::after{content:" (" attr(href) ")";font-size:12px;color:#666}
}

/* ---------- Safety net ---------- */
/* Если кто-то опять решит залить фон var(--c-dark) где не надо */
[class*="bg-dark"], [style*="background: var(--c-dark)"]{
  background:#fff !important;
}
/* --- Form validation state --- */
.is-invalid{
  border-color:#b00020 !important;
  box-shadow:0 0 0 3px rgba(176,0,32,.12) !important;
}
.is-valid{
  border-color:#1a7f37 !important;
  box-shadow:0 0 0 3px rgba(26,127,55,.12) !important;
}
.field-error{
  font-size:12px;
  color:#b00020;
  margin-top:6px;
}
.form-status{font-size:14px;color:#555}
.form-status.ok{color:#1a7f37}
.form-status.err{color:#b00020}