:root{
  --accent:#005bff;
  --bg:#f7f8fb;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial;color:var(--text);background:#fff}
a{color:var(--accent);text-decoration:none}
a:hover{
  text-decoration: none
}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

.logo { display: inline-flex; align-items: center; }

.logo img {
  height: 70px;       /* базовый размер логотипа */
  width: auto;        /* сохраняем пропорции */
  max-width: none;    /* не даём общему img {max-width:100%} растянуть по контейнеру */
  display: block;     /* убираем лишние пробелы снизу */
}

/* адаптив: можно варьировать высоту под экраны */
@media (min-width: 1280px) { .logo img { height: 70px; } }  /* крупные экраны */
@media (max-width: 640px)  { .logo img { height: 70px; } }  /* мобильные */

/* ====== NAVIGATION ====== */
.zk-nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.zk-nav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}
.zk-nav .logo {
  font-size: 20px;
  font-weight: 700;
  color: #051b54;
  text-decoration: none;
}
.zk-nav .nav-links {
  display: flex;
  gap: 20px;
}
.zk-nav .nav-links a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}
.zk-nav .nav-links a:hover {
  color: var(--accent);
}

/* бургер */
.zk-nav .burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.zk-nav .burger span {
  width: 24px;
  height: 3px;
  background: #051b54;
  border-radius: 2px;
  display: block;
}

/* мобильное меню */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid var(--border);
}
.mobile-menu a {
  padding: 12px 16px;
  text-decoration: none;
  color: #111827;
}
.mobile-menu a:hover {
  background: var(--bg);
  color: #005bff;
}

/* адаптив */
@media(max-width: 768px) {
  .zk-nav .nav-links { display: none; }
  .zk-nav .burger { display: flex; }
  .mobile-menu.active { display: flex; }
}

/* HERO + breadcrumbs */
.header-hero{
  background: linear-gradient(135deg, #051b54, var(--zk-blue-2));
  color: #fff;
  padding:28px 0;
  margin-bottom: 20px
}
.header-hero .breadcrumbs a{color:#c7d2fe99}
.header-hero .breadcrumbs{
  color:#c7d2fe99;
}
.header-hero .breadcrumbs a{
  color:#c7d2fe99;
}
.header-hero .breadcrumbs span{
  color:#fff;
}
.header-hero h1{color:#fff;margin:8px 0 0}
.breadcrumbs{font-size:14px;color:#ffffff;margin:12px 0}
.breadcrumbs a{color:var(--muted)}
h1{font-size:32px;margin:12px 0 18px}

/* Buttons */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:
  center;
  background:#005bff;
  color:#fff;
  border-radius:10px;
  padding:12px 18px;
  font-weight:600;
  box-shadow:0 1px 0 rgba(0,0,0,.06)
}
.btn.small {
  background: #005bff;
  color: #fff;  
  padding:8px 12px;
}
.btn:hover{text-decoration:none;opacity:.92}
/* Кнопка фильтра*/
.zk-sidebar .btn{
  display:block;/* на всю ширину сайдбара */
  width:100%;
  background: #005bff;
  color:#fff;
  border-radius:10px;
  padding:12px 18px;
  font-weight:600;
  box-shadow:0 8px 28px rgba(5,27,84,.06);
  border: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* кнопка в карточке на листинге и странице курса */
.actions{
  padding: 10px 0px 10px 0px;
  border-top: 1px solid rgba(7, 36, 86, 0.075)
}
/* Кнопка в карточке на листинге */
.zk-card .actions .btn {
  background: #005bff;
  color: #fff;               /* белый текст по умолчанию */
}

/* Кнопка в карточке на странице курса */
.zk-course .actions .btn {
  background: #005bff;
  color: #fff;               /* белый текст по умолчанию */
}

.zk-sidebar .btn:hover{
  text-decoration:none;
  opacity:.92;
}

.zk-sidebar .btn::-moz-focus-inner{ border:0; } /* Firefox */
/* ===== Listing layout ===== */
.zk-grid{display:grid;grid-template-columns:320px 1fr;gap:24px}
@media(max-width:900px){.zk-grid{grid-template-columns:1fr}}
.zk-sidebar{position:sticky;top:16px;border:1px solid var(--border);border-radius:12px;padding:16px;background:#fff;height:fit-content}
@media(max-width:900px){.zk-sidebar{position:static}}
.zk-filter h3{margin:0 0 8px;font-size:18px}
.zk-field{margin:12px 0}
/* Accordion in filter */
.zk-acc{border-top:1px solid var(--border); padding-top:8px; margin:8px 0}
.zk-acc:first-of-type{border-top:0; padding-top:0}
.zk-acc summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  padding:8px 0;
}
.zk-acc summary::-webkit-details-marker{display:none}
.zk-acc summary::after{
  content:"";
  width:10px;height:10px;
  border-right:2px solid #9aa4b2;
  border-bottom:2px solid #9aa4b2;
  transform:rotate(45deg);
  transition:transform .2s ease;
  margin-left:8px;
}
.zk-acc[open] summary::after{ transform:rotate(225deg); }
.zk-acc-body{ padding:4px 0 10px }
.zk-option{ display:block; margin:6px 0 }
.zk-field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.zk-field input[type=text],.zk-field input[type=number],.zk-field select{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.zk-hr{height:1px;background:var(--border);margin:12px 0}

/* ===== Card (как на скринах) ===== */
.zk-card{
  background:#fff;
  border: 1px solid var(--border, #e5e7eb); /* ← ОБВОДКА */
  border-radius:12px;
  padding:16px;
  margin-bottom: 10px;
}
.zk-card .zk-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.zk-card .zk-meta .item{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.zk-card .zk-meta .item strong{
  display:inline;
  margin:0;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}
.zk-card .zk-meta .item strong::after{
  content:":";
  margin-left:2px;
}
@media (max-width: 600px){
  .zk-card .zk-meta{ grid-template-columns:1fr; }
}

/* Название курса в карточке: не менять цвет и не подчеркивать на ховере */
.zk-card h3 a{
  color: var(--text);
  text-decoration: none;
}

.zk-card h3 a:hover,
.zk-card h3 a:focus,
.zk-card h3 a:active,
.zk-card h3 a:visited{
  color: var(--text);         /* оставляем тот же цвет */
  text-decoration: none;      /* убираем подчёркивание */
}
/* Сохраняем белый текст и выключаем подчёркивание на ховере/фокусе/активе */
.zk-card .actions .btn:hover,
.zk-card .actions .btn:focus,
.zk-card .actions .btn:active,
.zk-card .actions a:hover,
.zk-card .actions a:focus,
.zk-card .actions a:active {
  color: #fff !important;    /* пробиваем любые глобальные a:hover */
  text-decoration: none;
}

/* Если где-то глобально перекрашивают ссылки — подстрахуемся */
.zk-card .actions a {
  color: #fff !important;
}


/* chips над заголовком */
.zk-toplinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px
}
.chip{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  background:#eef2f7;
  color:#2b3b59;
  box-shadow:0 1px 0 rgba(5,27,84,.06) inset;
}
.chip:hover{
  background:#051b54;        /* требуемая заливка при ховере */
  color:#fff;
  text-decoration:none;
}

/* сетка атрибутов */
.zk-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;font-size:15px
}
@media(min-width:900px){
  .zk-meta{
    grid-template-columns:repeat(2,minmax(0,1fr))
    }
  }
.zk-meta .item strong{
  display:block;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  margin-bottom:2px
}

/* Контейнер страницы курса */
.zk-course{
  display:block;
  margin-bottom:20px;
}
.zk-course::after{
  content:"";
  display:block;
  clear:both;
  } /* clearfix */

/* Партнёр справа */
.zk-course .zk-partner{
  float:right;
  width:360px;
  margin:0 0 16px 24px; /* отступ слева и снизу */
}

/* Основная карточка слева от float.
   BFC (overflow:hidden) не даст ей «поднырнуть» под партнёра */
.zk-course .zk-main{ overflow:hidden; }

/* Ряды «Название: значение» в строку (как на листинге) */
.zk-course .zk-main .item{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.zk-course .zk-main .item strong{
  display:inline;
  margin:0;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}
.zk-course .zk-main .item strong::after{
  content:":";
  margin-left:2px;
}

/* Текст сразу под карточкой курса (обтекает партнёра) */
.course-content{
  margin-top:16px;
}

/* Мобильная версия: всё в колонку */
@media (max-width:1024px){
  .zk-course .zk-partner{
    float:none;
    width:auto;
    margin:16px 0 0;
  }
  .zk-course .zk-main{
    overflow:visible;
  }
}
/* --- mobile order: main, partner, content --- */
@media (max-width:1024px){
  /* отключаем float и включаем колонку */
  .zk-course{
    display:flex;
    flex-direction:column;
    gap:16px;              /* приятные отступы между блоками */
  }
  .zk-course .zk-partner{
    float:none;            /* на мобилке больше не плавает */
    width:auto;
    margin:0;              /* обнуляем боковые отступы */
    order:2;
  }
  .zk-course .zk-main{
    overflow:visible;      /* можно вернуть обычный поток */
    order:1;
  }
  .course-content{
    order:3;
    margin-top:0;
  }
}


.panel{border:1px solid var(--border);border-radius:12px;background:#fff;padding:16px}
.zk-attrs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){
  .zk-attrs{
    grid-template-columns:1fr
    }
  }
.zk-attrs .item strong{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-bottom:4px
}
.zk-partner .logo{
  width:140px;
  height:140px;
  object-fit:contain;
  margin:0 auto 12px;
  display:block
}
.zk-partner h3{
  margin:0 0 6px;
  text-align:center
}
.zk-partner .links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.muted{
  color:var(--muted)
}

/* chips */
.zk-toplinks{
  display:flex;
  gap:10px;
  margin:20px 0
}
.zk-toplinks .chip{
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  background:#eef2f7;
  color:#2b3b59
}
.zk-toplinks .chip:hover{
  background: linear-gradient(135deg, #051b54, var(--zk-blue-2));
  color:#fff;
  text-decoration:none
}

/* партнёрские ссылки сеткой */
.zk-partner .links{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:10px;
  margin:12px 0;
}
.zk-partner .links a{
  text-decoration: none
}
.zk-partner .links a:hover{
  color: #005bff;
  text-decoration: none

}
@media(max-width:700px){
.zk-partner .links{
  grid-template-columns:1fr
}
}

/* ===== Pagination ===== */
.zk-pagination{
margin-top:24px
}
.zk-pagination .nav-links{
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
}

/* обычные номера */
.zk-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  font-weight:600; line-height:1; text-decoration:none;
  color: var(--muted, #6b7280);
  border:1px solid transparent; background:transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.zk-pagination a.page-numbers:hover{
  border-color: var(--border, #e5e7eb);
  background: rgba(0,0,0,.03);
  color: var(--text, #111827);
  transform: translateY(-1px);
}

/* текущая страница — “пузырёк” */
.zk-pagination .page-numbers.current{
  color:#fff;
  background: var(--accent, #ff1650);      /* тот же акцент, что и у кнопки */
  border-color: transparent;
}

/* стрелки (пред/след) — компактные “уголки” */
.zk-pagination .prev, .zk-pagination .next{
  width:28px; height:28px; font-size:18px; line-height:1;
  color: var(--accent, #ff1650);
  border-radius:999px; border:1px solid transparent;
}
.zk-pagination a.prev:hover,
.zk-pagination a.next:hover{
  border-color: var(--border, #e5e7eb);
  background: rgba(0,0,0,.03);
}

/* Центрируем пагинацию под листингом */
.zk-pagination{
  width:100%;
  display:flex;
  justify-content:center;
  margin:24px auto 0;
  margin-bottom: 20px;
}
.zk-pagination .nav-links{
  display:flex;
  align-items:center;
  justify-content:center; /* на всякий случай */
}

/* Небольшой отступ между элементами пагинации */
.zk-pagination .nav-links {
  gap: 8px;              /* расстояние между цифрами/стрелками */
}

/* Фолбэк, если где-то gap не сработает */
.zk-pagination .page-numbers {
  margin: 0 6px;
}

/* адаптив */
@media (max-width:640px){
  .zk-pagination .nav-links{ gap:8px }
  .zk-pagination .page-numbers{ width:32px; height:32px; font-weight:600 }
}

    /* Scoped styles for the homepage */
    :root {
      --zk-blue-1: #2563eb;
      --zk-blue-2: #0ea5e9;
      --zk-bg: #0b57d0;
      --zk-gray: #f1f5f9;
      --zk-text: #0f172a;
      --zk-muted: #475569;
      --zk-radius: 18px;
    }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

    /* HERO */
    .zk-hero { margin: 28px 0 40px; }
    .zk-hero-card {
      background: linear-gradient(135deg, #051b54, var(--zk-blue-2));
      color: #fff;
      border-radius: 28px;
      padding: 36px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items: center;
    }
    .zk-hero p.hero-sub {
      margin: 0 0 18px 0;
      opacity: .9;
      font-size: clamp(14px, 1.8vw, 16px);
    }
    .zk-hero .hero-cards {
      display: grid;
      gap: 16px;
    }
    .zk-hero .hero-card {
      background: #fff;
      color: var(--zk-text);
      border-radius: 16px;
      padding: 16px 18px;
      box-shadow: 0 6px 18px rgba(0,0,0,.08);
    }
    .zk-hero .hero-card b { display: block; font-size: 16px; margin-bottom: 6px; }
    .zk-hero .hero-card small { color: var(--zk-muted); }

    /* DIRECTIONS */
    .zk-directions { margin: 48px 0; }
    .zk-section-title { font-size: clamp(24px, 4vw, 36px); margin: 0 0 20px 0; }
    .zk-dir-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    /* Hover effect for mini direction cards */
    .zk-directions .zk-dir-card{
      transition: background .25s ease, color .25s ease, transform .2s ease;
    }
    .zk-directions .zk-dir-card:hover{
      background: linear-gradient(135deg, #051b54, var(--zk-blue-2));
      color: #fff;
    }
    .zk-directions .zk-dir-card:hover .name,
    .zk-directions .zk-dir-card:hover a.more{
      color: #fff;
    }
    .zk-directions .zk-dir-card:hover a.more .arr{
      transform: translateX(4px);
    }
    .zk-dir-card {
      background: #f6f7fb; border-radius: 22px; padding: 18px; position: relative;
      display:flex; flex-direction:column; gap:18px; min-height:120px;
    }
    .zk-dir-card .name { font-weight: 600; color: var(--zk-text); }
    .zk-dir-card a.more {
      margin-top: auto; color: var(--zk-text); text-decoration:none; display:inline-flex; gap:8px; align-items:center;
    }
    .zk-dir-card a.more .arr{ transition: transform .2s ease }
    .zk-dir-card a.more:hover .arr{ transform: translateX(4px) }
    .zk-center { text-align:center; margin-top: 20px; }
    .zk-btn {
      display:inline-block; padding: 12px 22px; border-radius: 14px;
      background: var(--zk-blue-1); color:#fff; text-decoration:none; font-weight:600;
    }

    .zk-slider { position: relative; overflow: hidden; border-radius: 16px; background: #f1f5f9; }
    .zk-slides { display: flex; transition: transform .35s ease; }
    .zk-slide { min-width: 100%; aspect-ratio: 16/9; display:flex; align-items:center; justify-content:center; }
    .zk-slide img { width:100%; height:100%; object-fit:cover; display:block; }
    .zk-slide .ph { width:100%; height:100%; background:linear-gradient(135deg,#dbeafe,#bfdbfe); display:flex; align-items:center; justify-content:center; color:#1e293b; font-weight:700; }

    .zk-slider .nav {
      position:absolute; bottom:12px; right:12px; display:flex; gap:8px;
    }
    .zk-slider button {
      width:36px; height:36px; border-radius:50%; border:none; background:#e2e8f0; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }

/* FAQ */
.zk-faq { margin: 56px 0; }
.zk-faq .zk-accordion { display:flex; flex-direction:column; gap:12px; }
.zk-faq .zk-acc-item { background:#f6f7fb; border-radius:16px; overflow:hidden; }
.zk-faq .zk-acc-head { padding:16px 18px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.zk-faq .zk-acc-body { max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 18px; }
.zk-faq .zk-acc-item.active .zk-acc-body { max-height:320px; padding-bottom:16px; }


    /* Responsive */
    @media (max-width: 1024px){
      .zk-hero-card { grid-template-columns: 1fr; }
      .zk-dir-grid { grid-template-columns: repeat(3, 1fr); }
      .zk-feature-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px){
      .zk-dir-grid { grid-template-columns: repeat(1, 1fr); }
    }