/* ==================== База (ваш исходный CSS) ==================== */
:root{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#142339;background:#f4f7fb;font-synthesis:none;color-scheme:light;
  --brand:#2153ce; --brand-dark:#1845b4; --brand-soft:#e8f0ff;
  --line:#dfe6ee; --line-soft:#eef2f7;
  --text:#142339; --muted:#5b6b80; --muted-2:#607088;
}
*{box-sizing:border-box}
body{margin:0}
button,input{font:inherit}
button{cursor:pointer}
button:disabled,fieldset:disabled button{cursor:wait;opacity:.58}
[hidden]{display:none!important}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand)}

/* ==================== Шапка ==================== */
.topbar{
  min-height:76px;display:flex;align-items:center;gap:20px;
  padding:0 max(24px,calc((100vw - 1060px)/2));
  border-bottom:1px solid #e1e7ef;background:#fff;font-size:15px;
}
.logo{
    outline: none;
    height: 50px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-weight:700}
.brand-name{font-size:16px}
.mark{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  color:#fff;background:var(--brand);font-size:18px;font-weight:700;
}
.topnav{display:flex;gap:20px;margin-left:24px;font-size:14px}
.topnav a{color:var(--muted);text-decoration:none;font-weight:600}
.topnav a:hover{color:var(--brand)}
.topnav a[aria-current=page]{color:var(--brand)}
.topbar-phone{
  margin-left:auto;color:#142339;text-decoration:none;font-weight:650;
  font-size:14px;white-space:nowrap;
}
.topbar-phone:hover{color:var(--brand)}

/* ==================== Основной контейнер ==================== */
main{max-width:1060px;margin:56px auto 28px;padding:0 24px}
.intro{margin-bottom:32px;max-width:760px}
.eyebrow{
  font-size:11px;font-weight:750;letter-spacing:1.6px;
  color:#42639d;margin:0 0 12px;text-transform:uppercase;
}
h1{font-size:38px;line-height:1.18;letter-spacing:-1.2px;margin:0 0 16px}
h2{font-size:23px;letter-spacing:-.5px;margin:0 0 8px;overflow-wrap:anywhere}
h3{font-size:15px;margin:0 0 8px}
p{line-height:1.6;margin:8px 0}
.muted{color:var(--muted);font-size:14px}

/* ==================== Кнопка VegaConnect ==================== */
@property --connect-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.connect-hero{
  display:flex;
  justify-content:center;
  margin:8px 0 40px;
}

.connect-btn{
  position:relative;
  display:inline-block;
  text-decoration:none;
  color:#fff;
  border-radius:22px;
  padding:2px;/* толщина радужной рамки */
  isolation:isolate;
  transition:transform .2s ease;
}
.connect-btn:hover{ transform:translateY(-2px); }
.connect-btn:active{ transform:translateY(0); }

/* --- Чёткая радужная рамка по контуру --- */
.connect-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px;                 /* та же толщина, что у .connect-btn */
  background:conic-gradient(
    from var(--connect-angle),
    #ff5f6d,
    #ffc371,
    #47e0a0,
    #4facfe,
    #a06bff,
    #ff5f6d
  );
  /* маска оставляет только рамку, центр прозрачный */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:connect-run 4s linear infinite;
  z-index:1;
  pointer-events:none;
}

/* --- Мягкое размытое свечение снаружи (тоже бежит по контуру) --- */
.connect-glow{
  position:absolute;
  inset:-10px;
  border-radius:30px;
  z-index:0;
  background:conic-gradient(
    from calc(var(--connect-angle) * -1),
    #ff5f6d,
    #ffc371,
    #47e0a0,
    #4facfe,
    #a06bff,
    #ff5f6d
  );
  filter:blur(22px);
  opacity:.6;
  animation:connect-run 4s linear infinite;
  pointer-events:none;
}

/* Анимация: цвета «обтекают» контур, а не вращают блок */
@keyframes connect-run{
  to{ --connect-angle:360deg; }
}

/* --- Внутренняя плашка --- */
.connect-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 28px 16px 22px;
  border-radius:20px;
  background:linear-gradient(135deg,#2153ce 0%,#3b6fe0 100%);
  box-shadow:0 10px 30px rgba(33,83,206,.35);
  will-change:transform;
}
.connect-btn:hover .connect-inner{
  background:linear-gradient(135deg,#2559d8 0%,#4a7ce6 100%);
}

.connect-icon{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  color:#fff;
  flex-shrink:0;
}
.connect-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.connect-text strong{ font-size:16px; font-weight:700; }
.connect-text small{ font-size:12px; opacity:.82; margin-top:3px; }

/* --- Уважение к системным настройкам --- */
@media (prefers-reduced-motion:reduce){
  .connect-btn::before,
  .connect-glow{
    animation:none;
  }
}

/* ==================== Блоки на главной ==================== */
.block{margin-top:40px}
.block-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:16px;flex-wrap:wrap;
}
.block-head h2{margin:0}
.link-all{
  color:var(--brand);text-decoration:none;font-weight:650;font-size:14px;
  white-space:nowrap;
}
.link-all:hover{text-decoration:underline}

/* ==================== Карточки услуг/товаров ==================== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.service-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:20px;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s;
  min-width:0;
}
.service-card:hover{
  border-color:#aac6ff;
  box-shadow:0 8px 24px rgba(36,52,74,.07);
  transform:translateY(-2px);
}
.service-card .icon{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-size:18px;
  font-weight:700;margin-bottom:14px;
}
.service-card .card-image{
  display:block;margin:-20px -20px 14px;
  border-radius:14px 14px 0 0;overflow:hidden;background:#f4f7fc;
  aspect-ratio:16/10;
}
.service-card .card-image img{
  width:100%;height:100%;object-fit:cover;
}
.service-card h3{font-size:16px;margin:0 0 6px;line-height:1.35}
.service-card p{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.service-card .price{
  margin-top:auto;font-weight:700;color:var(--text);font-size:15px;
  margin-bottom:6px;
}
.service-card .more{margin-top:auto;font-size:13px;color:var(--brand);font-weight:650}

/* ==================== Карточки контента ==================== */
.card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:28px;box-shadow:0 8px 30px rgba(36,52,74,.02);
}
.markdown h2{margin-top:24px}
.markdown h2:first-child{margin-top:0}
.markdown h3{margin-top:20px;font-size:16px}
.markdown ul,.markdown ol{padding-left:22px;line-height:1.7}
.markdown li{margin:4px 0}
.markdown code{
  background:var(--line-soft);padding:2px 6px;border-radius:5px;
  font-size:13px;
}
.markdown pre{
  background:#0f1c33;color:#e6eefc;padding:16px;border-radius:10px;
  overflow:auto;font-size:13px;
}
.markdown pre code{background:none;padding:0;color:inherit}
.markdown blockquote{
  margin:16px 0;padding:8px 16px;border-left:3px solid var(--brand);
  background:#f4f7fc;color:var(--muted);border-radius:0 8px 8px 0;
}
.markdown img{border-radius:12px;margin:16px 0}
.markdown table{
  border-collapse:collapse;width:100%;margin:16px 0;font-size:14px;
}
.markdown th,.markdown td{
  border-bottom:1px solid var(--line-soft);padding:10px 8px;text-align:left;
}
.markdown th{font-weight:650;color:var(--muted);font-size:13px}

/* ==================== Статьи ==================== */
.article-cover{
  width:100%;max-height:420px;object-fit:cover;
  border-radius:16px;margin:0 0 24px;
}

/* ==================== Список буллетов ==================== */
.bullets{list-style:none;padding:0;margin:12px 0 0}
.bullets li{
  position:relative;padding:10px 0 10px 28px;
  border-bottom:1px solid var(--line-soft);font-size:14px;
}
.bullets li:last-child{border-bottom:0}
.bullets li::before{
  content:"";position:absolute;left:4px;top:17px;
  width:8px;height:8px;border-radius:50%;background:var(--brand);
}

/* ==================== Шаги ==================== */
.steps{display:grid;gap:12px;margin-top:14px}
.step{display:flex;gap:14px;align-items:flex-start}
.step-num{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--brand);color:#fff;
  font-weight:700;font-size:14px;
}
.step h3{margin:4px 0 2px;font-size:15px}
.step p{margin:0}

/* ==================== Статистика ==================== */
.stats{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px 0;
}
.stats-4{grid-template-columns:repeat(4,1fr);padding:0}
.stats div{
  background:#f4f7fc;padding:16px;border-radius:10px;min-width:0;
}
.stats strong{display:block;font-size:26px;margin-bottom:5px;letter-spacing:-.5px}
.stats span{font-size:12px;color:var(--muted-2);line-height:1.5;display:block}

/* ==================== Формы ==================== */
fieldset{min-width:0;margin:0;padding:0;border:0}
label{
  display:block;font-size:14px;font-weight:600;
  margin-top:18px;margin-bottom:7px;
}
input:not([type=checkbox]){
  width:100%;height:46px;border:1px solid #c9d3e1;border-radius:8px;
  padding:10px 12px;color:var(--text);background:white;
}
input:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible{
  outline:3px solid #aac6ff;outline-offset:2px;
}
input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px #aac6ff55}
.hint{font-size:12px;color:var(--muted-2);line-height:1.5;margin:6px 0 0}
.optional{color:#758194;font-weight:400;font-size:12px;margin-left:5px}
.primary,.danger{
  width:100%;border:0;border-radius:8px;margin-top:24px;
  padding:13px 16px;font-size:14px;font-weight:650;color:white;
  background:var(--brand);
}
.primary:hover{background:var(--brand-dark)}
.danger{background:#b23838}
.danger:hover{background:#972c2c}

/* ==================== Уведомления ==================== */
.notice{
  padding:14px 18px;background:#e8f5ed;border:1px solid #b9dbc8;
  border-radius:10px;font-size:14px;margin:0 0 20px;
  overflow-wrap:anywhere;color:#1d5941;
}
.notice.error{background:#fff1f0;border-color:#f1c8c5;color:#942e2e}

/* ==================== Хлебные крошки ==================== */
.breadcrumbs{
  display:flex;gap:8px;font-size:13px;color:var(--muted);
  margin-bottom:20px;flex-wrap:wrap;
}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--brand)}
.breadcrumbs span:last-child{color:var(--text)}

/* ==================== Карточка товара ==================== */
.product-layout{
  display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;
}
.product-side{position:sticky;top:24px}
.product-price{font-size:26px;font-weight:700;letter-spacing:-.5px;margin-bottom:8px}
.specs{list-style:none;padding:0;margin:12px 0}
.specs li{
  display:flex;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13px;
}
.specs li:last-child{border-bottom:0}
.specs span{color:var(--muted)}
.product-form{margin-top:20px;padding-top:20px;border-top:1px solid var(--line-soft)}
.product-form .primary{margin-top:18px}

/* ==================== CTA ==================== */
.cta-card{background:linear-gradient(135deg,#f7faff 0%,#eef4ff 100%)}

/* ==================== Футер ==================== */
.site-footer{
  margin-top:64px;border-top:1px solid #e1e7ef;background:#fff;
}
.footer-inner{
  max-width:1060px;margin:0 auto;padding:40px 24px 24px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;
}
.footer-col{display:flex;flex-direction:column;gap:8px;font-size:14px}
.footer-col strong{font-size:16px}
.footer-col p{margin:0;color:var(--muted);font-size:13px;line-height:1.6;max-width:340px}
.footer-col a{color:var(--muted);text-decoration:none}
.footer-col a:hover{color:var(--brand)}
.footer-title{
  font-size:12px;text-transform:uppercase;letter-spacing:1.2px;
  color:#42639d;font-weight:750;margin-bottom:4px;
}
.footer-bottom{
  max-width:1060px;margin:0 auto;padding:16px 24px 28px;
  border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12px;color:#6c7c91;
}

/* ==================== Адаптив ==================== */
@media (max-width:880px){
  .product-layout{grid-template-columns:1fr}
  .product-side{position:static}
  .stats-4{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .topbar{min-height:64px;padding:12px 16px;gap:12px;flex-wrap:wrap}
  .topnav{margin-left:0;order:3;width:100%;gap:14px;font-size:13px}
  .topbar-phone{font-size:13px}
  main{margin:32px auto 16px;padding:0 16px}
  h1{font-size:32px}
  .card{padding:22px 18px}
  .services-grid{grid-template-columns:1fr}
  .stats,.stats-4{grid-template-columns:1fr 1fr;gap:10px}
  .stats div{padding:14px 12px}
  .footer-inner{grid-template-columns:1fr;gap:20px;padding:28px 16px 16px}
  .footer-bottom{padding:16px}
  .connect-inner{padding:14px 20px}
  .connect-text strong{font-size:15px}
}