header#site-header {
  position: fixed;
  top: 20px;
  left: 0;
  z-index: 10;
  width: 100%;
  transition: top 0.4s ease;
}

#site-header .header-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid rgba(70, 69, 81, 0.08);
  border-radius: 16px;
  background: #fff;
}

#site-header .header-logo,
#site-header .header-actions,
#site-header .btn-login,
#site-header .btn-register {
  display: inline-flex;
  align-items: center;
}

#site-header .header-logo img {
  display: block;
  width: 134px;
  height: 26px;
}

#site-header .header-actions { gap: 12px; }

#site-header .btn-login,
#site-header .btn-register {
  min-height: 40px;
  justify-content: center;
  padding: 9px 32px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

#site-header .btn-login { color: #1f1f1f; background: #f8f9fb; }
#site-header .btn-register { color: #f8f9fb; background: #1252d3; }
#site-header .btn-login:hover { color: #1252d3; }
#site-header .btn-register:hover { color: #1252d3; background: #f8f9fb; }
#site-header .btn-login:active,
#site-header .btn-register:active { transform: translateY(1px) scale(0.985); }
#site-header .mobile-block { display: none; }
#site-header a:focus-visible { outline: 3px solid rgba(18, 82, 211, 0.36); outline-offset: 3px; }

.site-breadcrumbs {
  position: relative;
  z-index: 4;
  padding-top: 116px;
  color: #666674;
  font-size: 14px;
  line-height: 20px;
}

.site-breadcrumbs__list {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-breadcrumbs__item {
  display: inline-flex;
  min-width: 0;
  align-items: center;
}

.site-breadcrumbs__item + .site-breadcrumbs__item::before {
  content: "/";
  flex: 0 0 auto;
  margin-right: 8px;
  color: #a4a4af;
}

.site-breadcrumbs__link {
  color: #315ca8;
  text-decoration: none;
  text-underline-offset: 3px;
}

.site-breadcrumbs__link:hover { text-decoration: underline; }
.site-breadcrumbs__link:focus-visible { outline: 3px solid rgba(18, 82, 211, 0.36); outline-offset: 3px; border-radius: 3px; }
.site-breadcrumbs__item--current { overflow: hidden; color: #464551; text-overflow: ellipsis; white-space: nowrap; }
.site-breadcrumbs ~ .hero-body { margin-top: 34px; }
.site-breadcrumbs ~ .hero-body .hero-description { padding-top: 0; }

@media (max-width: 576px) {
  header#site-header { top: 14px; }
  #site-header .header-body { padding: 12px 12px 12px 16px; border-radius: 10px; }
  #site-header .header-logo { max-width: 92px; }
  #site-header .header-logo img { width: 92px; height: auto; }
  #site-header .header-actions { gap: 8px; }
  #site-header .btn-login,
  #site-header .btn-register { min-height: 44px; padding: 11px 12px; font-size: 14px; line-height: 18px; }
  #site-header .mobile-block { display: inline; }
  #site-header .desktop-block { display: none; }
  .site-breadcrumbs { padding-top: 96px; font-size: 13px; line-height: 18px; }
  .site-breadcrumbs__list { gap: 6px; }
  .site-breadcrumbs__item + .site-breadcrumbs__item::before { margin-right: 6px; }
  .site-breadcrumbs ~ .hero-body { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  header#site-header,
  #site-header .btn-login,
  #site-header .btn-register { transition: none; }
}

/*
 * Shared vertical rhythm for the whole landing cluster.
 * This file is loaded after every page stylesheet, so the same spacing scale
 * is applied to the home page and all internal pages without page drift.
 */
:root {
  --layout-section-gap: clamp(76px, 6.5vw, 96px);
  --layout-section-pad: clamp(64px, 5.5vw, 76px);
  --layout-content-gap: clamp(28px, 2.4vw, 34px);
  --layout-flow-gap: clamp(28px, 3vw, 40px);
}

.block-cnt {
  margin-top: var(--layout-content-gap);
}

.universal-section,
.personal-section {
  margin-top: var(--layout-section-gap);
}

.personal-section {
  padding-bottom: var(--layout-section-gap);
}

.personal-columns {
  gap: var(--layout-flow-gap);
}

.reviews-section,
.quality-section,
.faq-section {
  padding-top: var(--layout-section-pad);
  padding-bottom: var(--layout-section-pad);
}

.site-breadcrumbs ~ .hero-body {
  margin-top: 30px;
}

@media (max-width: 992px) {
  :root {
    --layout-section-gap: clamp(68px, 8vw, 82px);
    --layout-section-pad: clamp(52px, 6.5vw, 64px);
    --layout-content-gap: 28px;
    --layout-flow-gap: 32px;
  }

  .personal-section {
    padding-bottom: var(--layout-section-pad);
  }
}

@media (max-width: 576px) {
  :root {
    --layout-section-gap: 64px;
    --layout-section-pad: 44px;
    --layout-content-gap: 22px;
    --layout-flow-gap: 24px;
  }

  .site-breadcrumbs ~ .hero-body {
    margin-top: 22px;
  }

  .personal-columns {
    gap: 28px;
  }
}