:root{
  --paper:#F5F4EF;
  --paper-2:#ECEAE2;
  --ink:#14161B;
  --muted:#666A5E;
  --muted-2:#8A8D80;
  --line:#D6D3C6;
  --signal:#1F5FEB;
  --signal-dim:#1F5FEB1a;
  --call:#FF5A36;
  --call-dim:#FF5A361a;
  --ok:#1C8A5A;
  --ident:#a6ca15;   /* фирменный цвет IDENT — кнопка на его карточке */
  --radius:2px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
@media(max-width:700px){.wrap{padding:0 20px;}}

/* blueprint grid backdrop */
.grid-bg{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  background-position:-1px -1px;
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(245,244,239,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-0.01em;font-family:'Space Grotesk',sans-serif;}
.logo-mark{
  width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;
  position:relative;flex:none;
}
.logo-mark::before{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--ink);
  transform:translate(-50%,-50%) rotate(45deg);
}
.logo-mark::after{
  content:"";position:absolute;left:6px;top:6px;width:5px;height:5px;border-radius:50%;background:var(--call);
}
nav{display:flex;gap:36px;}
@media(max-width:860px){nav{display:none;}}
nav a{
  font-size:14px;color:var(--muted);
  font-family:'JetBrains Mono',monospace;
  position:relative;
  padding:4px 0;
}
nav a:hover{color:var(--ink);}
.btn{
  font-family:'JetBrains Mono',monospace;font-size:13px;
  padding:12px 22px;border-radius:var(--radius);
  border:1px solid var(--ink);
  display:inline-flex;align-items:center;gap:8px;
  transition:all .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:var(--call);border-color:var(--call);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}

/* ---------- hero ---------- */
.hero{
  padding:96px 0 60px;
  position:relative;
  overflow:hidden;
}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--signal);
  display:flex;align-items:center;gap:10px;margin-bottom:24px;
}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--signal);border-radius:50%;
  box-shadow:0 0 0 3px var(--signal-dim);}
h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:clamp(38px,5.4vw,68px);
  letter-spacing:-0.03em;
  line-height:1.03;
  max-width:820px;
}
h1 em{font-style:normal;color:var(--signal);}
.hero-sub{
  margin-top:26px;max-width:540px;font-size:18px;color:var(--muted);
}
.hero-cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;}

/* signal diagram */
.signal-diagram{
  margin-top:80px;
  border:1px solid var(--line);
  background:#fff;
  padding:36px 28px 28px;
  position:relative;
}
.signal-diagram .tag{
  position:absolute;top:-11px;left:24px;background:var(--paper);
  padding:0 8px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);
  letter-spacing:.05em;text-transform:uppercase;
}
.nodes{display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:8px;}
@media(max-width:700px){.nodes{grid-template-columns:1fr;gap:28px;}}
.node{text-align:center;}
.node-icon{
  width:64px;height:64px;margin:0 auto 12px;
  border:1.5px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;position:relative;z-index:2;
}
.node-icon svg{width:28px;height:28px;stroke:var(--ink);}
.node.center .node-icon{border-color:var(--call);width:76px;height:76px;}
.node.center .node-icon svg{stroke:var(--call);}
.node-label{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;}
.node-sub{font-size:12px;color:var(--muted-2);margin-top:2px;}
.link-line{position:relative;height:2px;}
.link-line svg{width:100%;height:24px;display:block;overflow:visible;}
.link-line path{
  stroke:var(--line);stroke-width:2;fill:none;
}
.link-line path.active{
  stroke:var(--signal);stroke-dasharray:6 6;
  animation:dash 1.4s linear infinite;
}
@keyframes dash{to{stroke-dashoffset:-24;}}
@media(max-width:700px){.link-line{height:24px;}.link-line svg{transform:rotate(90deg);width:24px;margin:0 auto;}}

/* ---------- section shared ---------- */
section{padding:110px 0;border-bottom:1px solid var(--line);}
@media(max-width:700px){section{padding:64px 0;}}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px;
}
@media(max-width:700px){.section-head{flex-direction:column;align-items:flex-start;gap:16px;}}
.section-num{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted-2);
  display:block;margin-bottom:14px;
}
h2{
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(28px,3.4vw,42px);letter-spacing:-0.02em;max-width:560px;
}
.section-desc{max-width:380px;color:var(--muted);font-size:15px;}

/* ---------- about / features ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;}}
.about-copy p{color:var(--muted);font-size:16px;margin-bottom:18px;max-width:480px;}
.feature-list{display:flex;flex-direction:column;}
.feature-item{
  display:grid;grid-template-columns:60px 1fr;gap:20px;
  padding:24px 0;border-top:1px solid var(--line);
}
.feature-item:last-child{border-bottom:1px solid var(--line);}
.feature-num{font-family:'JetBrains Mono',monospace;color:var(--signal);font-size:14px;padding-top:2px;}
.feature-item h4{font-family:'Space Grotesk',sans-serif;font-size:18px;margin-bottom:6px;font-weight:600;}
.feature-item p{color:var(--muted);font-size:14.5px;}

/* ---------- integrations ---------- */
.tabs{display:flex;gap:8px;margin-bottom:40px;flex-wrap:wrap;}
.tab{
  font-family:'JetBrains Mono',monospace;font-size:13px;
  padding:10px 18px;border:1px solid var(--line);border-radius:100px;
  cursor:pointer;color:var(--muted);background:transparent;transition:all .15s ease;
}
.tab.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.tab:hover:not(.active){border-color:var(--ink);color:var(--ink);}

.integrations-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
@media(max-width:900px){.integrations-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.integrations-grid{grid-template-columns:1fr;}}
.integration-card{
  background:#fff;padding:28px 24px;
  display:flex;flex-direction:column;gap:14px;
  transition:background .15s ease;
  position:relative;
}
.integration-card::before{
  content:"";position:absolute;top:14px;right:14px;width:6px;height:6px;border-radius:50%;
  background:var(--line);
}
.integration-card:hover{background:var(--paper-2);}
.integration-card:hover::before{background:var(--ok);}
.integration-card img{width:44px;height:44px;object-fit:contain;border-radius:6px;background:#F2F1EA;padding:6px;}
.integration-card h5{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;}
.integration-card p{font-size:13px;color:var(--muted);}
.integration-card .price{
  margin-top:auto;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--signal);padding-top:8px;
}

/* Кнопка в карточке. Отдельно от .btn: тот рассчитан на шапку и герой,
   в карточке он занимает половину высоты. Кнопка есть только у CRM —
   у виртуальных АТС и коллтрекинга карточки пока без действия, поэтому
   .price с margin-top:auto прижимает низ карточки и без неё. */
.integration-card .card-cta{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);
  text-align:center;color:var(--muted);
  transition:all .15s ease;
}
.integration-card:hover .card-cta{border-color:var(--ink);color:var(--ink);}
.integration-card .card-cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* IDENT — единственная CRM, которую клиника подключает сама, поэтому его
   кнопка выделена фирменным цветом IDENT и не сереет вместе с соседними.
   Текст на заливке тёмный: #a6ca15 светлый, белый на нём не читается. */
.integration-card .card-cta.ident{border-color:var(--ident);color:#6E8A00;}
.integration-card:hover .card-cta.ident{border-color:var(--ident);color:#6E8A00;}
.integration-card .card-cta.ident:hover{background:var(--ident);color:var(--ink);border-color:var(--ident);}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:36px;}}
.step{position:relative;padding-right:40px;}
.step:not(:last-child)::after{
  content:"";position:absolute;top:26px;right:0;width:40px;height:1px;
  background:repeating-linear-gradient(90deg,var(--muted-2) 0 6px,transparent 6px 12px);
}
@media(max-width:820px){.step:not(:last-child)::after{display:none;}}
.step-index{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--paper);
  width:52px;height:52px;border-radius:50%;background:var(--ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
}
.step h4{font-family:'Space Grotesk',sans-serif;font-size:20px;margin-bottom:10px;font-weight:600;}
.step p{color:var(--muted);font-size:14.5px;max-width:280px;}

/* ---------- CTA ---------- */
.cta{
  background:var(--ink);color:var(--paper);border-bottom:none;
}
.cta-inner{
  display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
}
.cta h2{color:var(--paper);max-width:520px;}
.cta .section-desc{color:#A9AC9F;}
.cta .btn-primary{background:var(--call);border-color:var(--call);color:#fff;}
.cta .btn-primary:hover{background:#fff;color:var(--ink);border-color:#fff;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:44px;}}
.contact-line{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:14.5px;
}
.contact-line:last-child{border-bottom:1px solid var(--line);}
.contact-line span{color:var(--muted-2);}
.contact-line a:hover{color:var(--signal);}
form{display:flex;flex-direction:column;gap:14px;}
.field{
  border:1px solid var(--line);background:#fff;padding:14px 16px;
  font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);
}
.field:focus{outline:2px solid var(--signal);outline-offset:-1px;border-color:var(--signal);}
textarea.field{resize:vertical;min-height:90px;}
.consent{font-size:12px;color:var(--muted-2);display:flex;gap:8px;align-items:flex-start;margin-top:2px;}
.consent input{margin-top:3px;}
.status-message{font-family:'JetBrains Mono',monospace;font-size:13px;min-height:18px;}
.status-message.success{color:var(--ok);}
.status-message.error{color:var(--call);}

/* ---------- footer ---------- */
footer{padding:64px 0 36px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px;}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h6{font-family:'JetBrains Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin-bottom:16px;}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-grid ul a{font-size:14px;color:var(--muted);}
.footer-grid ul a:hover{color:var(--ink);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding-top:26px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted-2);
}