/* ===== Дизайн-система: "Диагностика" =====
   Идея: сайт говорит на языке диагностического заключения —
   статус, показания, заключение — что логично продолжает роль Агента диагноста.
*/

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Courier+Prime:wght@400;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#14213D;
  --ink-soft:#2B3245;
  --paper:#F6F3EC;
  --paper-2:#FFFFFF;
  --copper:#B8763E;
  --copper-dark:#8F5A2C;
  --slate:#5B7380;
  --line:#DDD6C7;
  --danger:#A8433A;
  --ok:#3D7A5C;
  --radius:14px;
  --maxw:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:'Inter',sans-serif;
  font-size:17px;
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Instrument Serif',serif;
  color:var(--ink);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:400;
}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.4rem,2.6vw,2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
a{color:var(--copper-dark)}
a:hover{color:var(--copper)}
.mono{font-family:'JetBrains Mono',monospace}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---- Шапка ---- */
header.site{
  border-bottom:1px solid var(--line);
  background:var(--paper-2);
  position:sticky;top:0;z-index:50;
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:'Instrument Serif',serif;font-weight:600;font-size:1.3rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--copper);display:inline-block}
nav.main{display:flex;gap:28px;align-items:center}
nav.main a{color:var(--ink-soft);text-decoration:none;font-size:.95rem;font-weight:500}
nav.main a:hover{color:var(--copper-dark)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;
  padding:11px 20px;border-radius:999px;
  text-decoration:none;font-weight:600;font-size:.92rem;
  border:none;cursor:pointer;
}
.btn:hover{background:var(--copper-dark);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}

/* ---- Статус-чип (сигнатурный элемент) ---- */
.status-chip{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px 8px 10px;
  font-family:'JetBrains Mono',monospace;font-size:.82rem;
  color:var(--slate);margin-bottom:22px;
}
.status-chip .pulse{width:8px;height:8px;border-radius:50%;background:var(--danger);position:relative}
.status-chip .pulse::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--danger);opacity:.5;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}}

/* ---- Hero ---- */
.hero{padding:64px 0 56px;border-bottom:1px solid var(--line)}
.hero .lead{font-size:1.15rem;color:var(--slate);max-width:640px;margin-bottom:28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

.trustbar{display:flex;gap:36px;flex-wrap:wrap;padding:28px 0;border-bottom:1px solid var(--line)}
.trustbar .item{display:flex;align-items:baseline;gap:10px;font-size:.92rem;color:var(--slate)}
.trustbar .item b{font-family:'Instrument Serif',serif;color:var(--ink);font-size:1.05rem}

/* ---- Секции ---- */
section{padding:56px 0}
section.tint{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- Диагностическая шкала (шаги воронки) ---- */
.steps{display:grid;gap:14px;margin-top:28px}
.step{
  display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:start;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;
}
.step .num{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:1.4rem;color:var(--copper);}
.step .num small{display:block;font-size:.6rem;color:var(--slate);font-weight:500;letter-spacing:.06em}
.step h3{margin:0 0 4px}
.step p{margin:0;color:var(--slate);font-size:.95rem}
.step .price{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--ink);white-space:nowrap;padding-top:4px}
.step.free .price{color:var(--ok)}

/* ---- Карточки услуг / банков ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:24px}
.card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;text-decoration:none;color:inherit;display:block;
  transition:transform .15s, border-color .15s;
}
.card:hover{transform:translateY(-2px);border-color:var(--copper)}
.card .tag{font-family:'Courier Prime',monospace;font-weight:700;font-size:.72rem;color:var(--slate);text-transform:uppercase;letter-spacing:.06em}
.card h3{margin:8px 0 6px;font-size:1.05rem}
.card p{color:var(--slate);font-size:.88rem;margin:0}

.banklist{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.banklist a{
  background:var(--paper-2);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;text-decoration:none;color:var(--ink-soft);font-size:.9rem;font-weight:500;
}
.banklist a:hover{border-color:var(--copper);color:var(--copper-dark)}

.bank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:20px}
.bank-badge{
  display:flex;align-items:center;gap:14px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:.94rem;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.bank-badge:hover{transform:translateY(-2px);border-color:var(--copper);box-shadow:0 10px 22px rgba(0,0,0,.08)}
.bank-badge.more{color:var(--copper-dark);justify-content:center;background:transparent;border-style:dashed}
.mono-badge{
  width:38px;height:38px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Instrument Serif',serif;font-size:1.15rem;
}

/* ---- FAQ ---- */
.faq-item{border-bottom:1px solid var(--line);padding:20px 0}
.faq-item summary{cursor:pointer;font-family:'Instrument Serif',serif;font-size:1.05rem;color:var(--ink);font-weight:600;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:'+ ';color:var(--copper)}
.faq-item[open] summary::before{content:'– '}
.faq-item p{margin:12px 0 0;color:var(--slate)}

/* ---- Виджет Агента диагноста ---- */
.agent-widget{
  position:fixed;right:24px;bottom:24px;z-index:100;
  background:var(--ink);color:#fff;border-radius:999px;
  padding:14px 22px 14px 16px;display:flex;align-items:center;gap:10px;
  box-shadow:0 8px 24px rgba(20,33,61,.25);cursor:pointer;
  font-weight:600;font-size:.92rem;border:none;
}
.agent-widget .dot2{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.agent-widget:hover{background:var(--copper-dark)}

/* ---- Футер ---- */
footer.site{background:var(--ink);color:#C9CFDD;padding:44px 0 30px;margin-top:40px}
footer.site a{color:#E4E8F1}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:28px}
footer.site h4{color:#fff;font-family:'Instrument Serif',serif;font-size:1rem;margin:0 0 12px}
footer.site .small{font-size:.82rem;color:#8B93A7}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.9rem}

.breadcrumbs{font-size:.85rem;color:var(--slate);padding:18px 0 0}
.breadcrumbs a{color:var(--slate);text-decoration:none}
.breadcrumbs a:hover{color:var(--copper-dark)}

@media(max-width:720px){
  nav.main{display:none}
  .step{grid-template-columns:40px 1fr;}
  .step .price{grid-column:2}
  footer.site .cols{grid-template-columns:1fr}
}