:root {
  --x-ground: #0f1417;
  --x-tint: #172025;
  --x-ink: #e8eef0;
  --x-soft: #9fb0b6;
  --x-primary: #3fb8af;
  --x-spot: #e08a5b;
  --x-hyper: #3fb8af;
  --x-on-primary: #0f1417;
  --x-ff-title: "Fraunces", Georgia, "Times New Roman", serif;
  --x-ff-body: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --x-fs-h1: clamp(35.2px, 1.055vw + 31.25px, 43.9px);
  --x-fs-h2: clamp(28.1px, 0.861vw + 24.87px, 35.2px);
  --x-fs-h3: clamp(22.5px, 0.679vw + 19.95px, 28.1px);
  --x-fs-h4: clamp(20.1px, 0.291vw + 19.01px, 22.5px);
  --x-rad: 8px;
  --bs-body-bg: var(--x-ground);
  --bs-body-bg-rgb: 15, 20, 23;
  --bs-body-color: var(--x-ink);
  --bs-body-color-rgb: 232, 238, 240;
  --bs-body-font-family: var(--x-ff-body);
  --bs-body-font-size: 1.125rem;
  --bs-body-line-height: 1.6;
  --bs-emphasis-color: var(--x-ink);
  --bs-emphasis-color-rgb: 232, 238, 240;
  --bs-heading-color: inherit;
  --bs-secondary-color: var(--x-soft);
  --bs-secondary-rgb: 159, 176, 182;
  --bs-tertiary-color: var(--x-soft);
  --bs-secondary-bg: var(--x-tint);
  --bs-secondary-bg-rgb: 23, 32, 37;
  --bs-tertiary-bg: var(--x-tint);
  --bs-tertiary-bg-rgb: 23, 32, 37;
  --bs-primary: var(--x-primary);
  --bs-primary-rgb: 63, 184, 175;
  --bs-link-color: var(--x-hyper);
  --bs-link-color-rgb: 63, 184, 175;
  --bs-link-hover-color: var(--x-ink);
  --bs-link-hover-color-rgb: 232, 238, 240;
  --bs-light-rgb: 232, 238, 240;
  --bs-dark-rgb: 23, 32, 37;
  --bs-border-color: color-mix(in srgb, var(--x-ink) 16%, var(--x-ground));
  --bs-border-radius: var(--x-rad);
  --bs-border-radius-sm: calc(var(--x-rad) * .6);
  --bs-border-radius-lg: calc(var(--x-rad) * 1.4);
  --bs-border-radius-xl: calc(var(--x-rad) * 1.8);
  --bs-focus-ring-color: color-mix(in srgb, var(--x-primary) 40%, transparent);
}

html {
  color-scheme: dark;
}

body {
  background: var(--x-ground);
  color: var(--x-ink);
  font-family: var(--x-ff-body);
  font-size: 1.125rem;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--x-ff-title);
  font-weight: 700;
  line-height: 1.15;
  color: inherit;
}

h1, .h1 { font-size: var(--x-fs-h1); }
h2, .h2 { font-size: var(--x-fs-h2); }
h3, .h3 { font-size: var(--x-fs-h3); }
h4, .h4 { font-size: var(--x-fs-h4); }

.btn-primary {
  --bs-btn-color: var(--x-on-primary);
  --bs-btn-bg: var(--x-primary);
  --bs-btn-border-color: var(--x-primary);
  --bs-btn-hover-color: var(--x-on-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--x-primary) 88%, #ffffff);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--x-primary) 88%, #ffffff);
  --bs-btn-active-color: var(--x-on-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--x-primary) 80%, #ffffff);
  --bs-btn-active-border-color: color-mix(in srgb, var(--x-primary) 80%, #ffffff);
  --bs-btn-disabled-color: var(--x-on-primary);
  --bs-btn-disabled-bg: var(--x-primary);
  --bs-btn-disabled-border-color: var(--x-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--x-hyper);
  --bs-btn-border-color: var(--x-primary);
  --bs-btn-hover-color: var(--x-on-primary);
  --bs-btn-hover-bg: var(--x-primary);
  --bs-btn-hover-border-color: var(--x-primary);
  --bs-btn-active-color: var(--x-on-primary);
  --bs-btn-active-bg: var(--x-primary);
  --bs-btn-active-border-color: var(--x-primary);
}

/* Bootstrap красит .bg-* только фоном, а текст наследуется: на .bg-primary
   выходил основной текст (до 1.2:1), на тёмной основе .bg-light — светлый
   текст на светлом (1:1). Здесь у каждой заливки своя пара из гарантированных,
   и ссылки со вторичным текстом внутри .bg-primary тоже берут onPrimary */
.bg-primary {
  color: var(--x-on-primary);
  --bs-body-color-rgb: 15, 20, 23;
  --bs-emphasis-color-rgb: 15, 20, 23;
  --bs-secondary-color: var(--x-on-primary);
  --bs-secondary-rgb: 15, 20, 23;
  --bs-link-color: var(--x-on-primary);
  --bs-link-color-rgb: 15, 20, 23;
  --bs-link-hover-color: var(--x-on-primary);
  --bs-link-hover-color-rgb: 15, 20, 23;
}

.bg-primary .btn-outline-primary {
  --bs-btn-color: var(--x-on-primary);
  --bs-btn-border-color: var(--x-on-primary);
  --bs-btn-hover-color: var(--x-primary);
  --bs-btn-hover-bg: var(--x-on-primary);
  --bs-btn-hover-border-color: var(--x-on-primary);
  --bs-btn-active-color: var(--x-primary);
  --bs-btn-active-bg: var(--x-on-primary);
  --bs-btn-active-border-color: var(--x-on-primary);
}

/* «Светлая» заливка — панель на обеих основах: на тёмной --bs-light-rgb
   равен цвету текста (он нужен .text-light), и фон совпадал бы с текстом */
.bg-light {
  background-color: var(--x-tint) !important;
  color: var(--x-ink);
}

.bg-body {
  color: var(--x-ink);
}

.bg-dark {
  color: var(--x-ink);
}

/* Панели и поля внутри заливки primary возвращают переменные корня: иначе
   ссылки и подсказки полей на белой карточке вышли бы цветом onPrimary */
.bg-primary :where(.bg-body, .bg-light, .card, .form-control, .form-select, .dropdown-menu, .list-group-item, .accordion-item) {
  --bs-body-color-rgb: 232, 238, 240;
  --bs-emphasis-color-rgb: 232, 238, 240;
  --bs-secondary-color: var(--x-soft);
  --bs-secondary-rgb: 159, 176, 182;
  --bs-link-color: var(--x-hyper);
  --bs-link-color-rgb: 63, 184, 175;
  --bs-link-hover-color: var(--x-ink);
  --bs-link-hover-color-rgb: 232, 238, 240;
}

:where(img[width][height]){height:auto}

.site-header {
  background-color: var(--x-ground);
  border-bottom: 1px solid var(--x-spot);
  padding-top: 12px;
  padding-bottom: 12px;
}
.site-header .navbar {
  padding-top: 0;
  padding-bottom: 0;
}
.site-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 0;
  padding: 0;
  color: var(--x-ink);
  font-family: var(--x-ff-title);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.1;
}
.site-header .navbar-brand img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
}
.site-header .navbar-brand span {
  white-space: nowrap;
}
.site-header .navbar-toggler {
  border: 1px solid var(--x-spot);
  border-radius: var(--x-rad);
  padding: 6px 10px;
  color: var(--x-ink);
}
.site-header .navbar-toggler:focus-visible,
.site-header .nav-link:focus-visible,
.site-header .navbar-brand:focus-visible {
  outline: 2px solid var(--x-hyper);
  outline-offset: 3px;
}
.site-header .navbar-toggler-icon {
  background-image: none;
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-header .navbar-toggler-icon::before {
  content: "\F479";
  font-family: "bootstrap-icons";
  font-size: 1.5rem;
  color: var(--x-ink);
  line-height: 1;
}
.site-header .nav-link {
  color: var(--x-soft);
  font-family: var(--x-ff-body);
  font-size: 1rem;
  padding: 10px 14px;
  border-radius: var(--x-rad);
  transition: color .2s ease, background-color .2s ease;
}
.site-header .nav-link:hover {
  color: var(--x-ink);
  background-color: var(--x-tint);
}
@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    margin-top: 12px;
    padding: 8px;
    background-color: var(--x-tint);
    border: 1px solid var(--x-spot);
    border-radius: var(--x-rad);
  }
  .site-header .nav-link {
    color: var(--x-ink);
  }
}
@media (max-width: 400px) {
  .site-header .navbar-brand {
    font-size: 1.1rem;
    gap: 8px;
  }
  .site-header .navbar-brand img {
    width: 38px;
    height: 38px;
  }
}

.site-footer {
  background: var(--x-tint);
  color: var(--x-ink);
  font-family: var(--x-ff-body);
  border-top: 1px solid var(--x-spot);
  padding: 56px 0 32px;
}
.site-footer h2,
.site-footer h3 {
  font-family: var(--x-ff-title);
  color: var(--x-ink);
}
.site-footer .footer-brand {
  font-size: var(--x-fs-h3);
  margin-bottom: 16px;
}
.site-footer .footer-title {
  font-size: var(--x-fs-h4);
  margin-bottom: 16px;
}
.site-footer p,
.site-footer li {
  color: var(--x-soft);
  max-width: 70ch;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer li {
  margin-bottom: 8px;
}
.site-footer a {
  color: var(--x-hyper);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer a:hover {
  color: var(--x-ink);
}
.site-footer a:focus-visible,
.consent-box a:focus-visible,
.consent-box .btn:focus-visible {
  outline: 2px solid var(--x-spot);
  outline-offset: 3px;
}
.site-footer .footer-bottom {
  border-top: 1px solid var(--x-soft);
  margin-top: 40px;
  padding-top: 24px;
  color: var(--x-soft);
  font-size: 18px;
}
.site-footer .footer-end-space {
  min-height: 32px;
}
.consent-box {
  background: var(--x-tint);
  color: var(--x-ink);
  font-family: var(--x-ff-body);
  border-top: 1px solid var(--x-spot);
  border-radius: var(--x-rad) var(--x-rad) 0 0;
  padding: 16px 0;
  max-height: 60vh;
  overflow-y: auto;
}
.consent-box h2 {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h4);
  color: var(--x-ink);
  margin-bottom: 8px;
}
.consent-box p,
.consent-box li {
  color: var(--x-soft);
  font-size: 18px;
  margin-bottom: 8px;
}
.consent-box ul {
  padding-left: 20px;
  margin-bottom: 12px;
}
.consent-box a {
  color: var(--x-hyper);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-box .consent-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.consent-box .consent-actions .btn {
  flex: 1 1 140px;
  max-width: 220px;
  border-radius: var(--x-rad);
}
@media (max-width: 575.98px) {
  .consent-box { padding: 12px 0; }
  .consent-box p, .consent-box li { font-size: 18px; margin-bottom: 6px; }
}

#contact-content {
  background: var(--x-ground);
  color: var(--x-ink);
  font-family: var(--x-ff-body);
  padding: 96px 0;
}
#contact-content .cc-title {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h1);
  color: var(--x-ink);
  line-height: 1.15;
  margin: 0 0 24px;
}
#contact-content .cc-lead {
  color: var(--x-soft);
  max-width: 62ch;
  line-height: 1.7;
  margin: 0 0 40px;
}
#contact-content .cc-h2 {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h2);
  color: var(--x-ink);
  line-height: 1.25;
  margin: 0 0 16px;
}
#contact-content .cc-h3 {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h3);
  color: var(--x-ink);
  line-height: 1.3;
  margin: 0 0 12px;
}
#contact-content .cc-panel {
  background: var(--x-tint);
  border: 1px solid var(--x-spot);
  border-radius: var(--x-rad);
  padding: 36px 32px;
}
#contact-content .cc-panel p,
#contact-content .cc-panel li {
  color: var(--x-soft);
  line-height: 1.7;
}
#contact-content .cc-list {
  padding-left: 20px;
  margin: 0 0 24px;
}
#contact-content .cc-list li {
  margin-bottom: 10px;
}
#contact-content .cc-list strong {
  color: var(--x-ink);
  font-weight: 600;
}
#contact-content .cc-label {
  display: block;
  color: var(--x-ink);
  margin-bottom: 8px;
  font-size: 18px;
}
#contact-content .cc-input {
  width: 100%;
  background: var(--x-ground);
  color: var(--x-ink);
  border: 1px solid var(--x-spot);
  border-radius: var(--x-rad);
  padding: 14px 16px;
  font-family: var(--x-ff-body);
  font-size: 18px;
  transition: border-color .2s ease;
}
#contact-content .cc-input::placeholder {
  color: var(--x-soft);
  opacity: .8;
}
#contact-content .cc-input:focus {
  outline: 3px solid var(--x-primary);
  outline-offset: 2px;
  border-color: var(--x-primary);
  background: var(--x-ground);
  color: var(--x-ink);
}
#contact-content textarea.cc-input {
  min-height: 180px;
  resize: vertical;
}
#contact-content .cc-note {
  color: var(--x-soft);
  line-height: 1.7;
  margin: 20px 0 0;
}
#contact-content .cc-mail {
  color: var(--x-hyper);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}
#contact-content .cc-mail:hover {
  color: var(--x-ink);
}
#contact-content .cc-mail:focus-visible,
#contact-content .btn:focus-visible,
#contact-content .cc-link:focus-visible {
  outline: 3px solid var(--x-primary);
  outline-offset: 3px;
}
#contact-content .cc-link {
  color: var(--x-hyper);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#contact-content .btn-primary {
  background: var(--x-primary);
  border-color: var(--x-primary);
  color: var(--x-on-primary);
  border-radius: var(--x-rad);
  padding: 14px 32px;
  font-size: 18px;
  font-family: var(--x-ff-body);
}
#contact-content .btn-primary:hover {
  background: var(--x-primary);
  border-color: var(--x-primary);
  color: var(--x-on-primary);
  opacity: .9;
}
#contact-content .cc-cta {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--x-spot);
}
#contact-content .cc-cta p {
  color: var(--x-soft);
  max-width: 62ch;
  line-height: 1.7;
  margin: 0 0 24px;
}
@media (max-width: 767.98px) {
  #contact-content { padding: 56px 0; }
  #contact-content .cc-panel { padding: 28px 20px; }
  #contact-content .cc-cta { margin-top: 48px; padding-top: 36px; }
}

.hero-x{background:var(--x-ground);color:var(--x-ink);min-height:100vh;display:flex;align-items:center;padding:56px 0;font-family:var(--x-ff-body)}
.hero-x .hero-x-title{font-family:var(--x-ff-title);font-size:var(--x-fs-h1);line-height:1.12;color:var(--x-ink);margin:0 0 20px;font-weight:600}
.hero-x .hero-x-sub{font-family:var(--x-ff-title);font-size:var(--x-fs-h3);line-height:1.3;color:var(--x-ink);margin:0 0 20px;font-weight:400}
.hero-x .hero-x-text{color:var(--x-soft);max-width:34em;line-height:1.65;margin:0 0 32px}
.hero-x .hero-x-btn{background:var(--x-primary);color:var(--x-on-primary);border:1px solid var(--x-primary);border-radius:var(--x-rad);padding:14px 28px;font-weight:600;display:inline-flex;align-items:center;gap:10px;text-decoration:none;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.hero-x .hero-x-btn:hover{background:var(--x-primary);color:var(--x-on-primary);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.45)}
.hero-x .hero-x-btn:focus-visible{outline:3px solid var(--x-spot);outline-offset:3px}
.hero-x .hero-x-media{border:1px solid var(--x-spot);border-radius:var(--x-rad);padding:8px;background:var(--x-tint)}
.hero-x .hero-x-img{display:block;aspect-ratio:3 / 2;width:100%;height:auto;object-fit:cover;border-radius:var(--x-rad)}
.hero-x .hero-x-icon{color:var(--x-spot);font-size:1.5rem;display:inline-block;margin-bottom:16px}
@media (max-width:991.98px){.hero-x{min-height:auto;padding:56px 0}.hero-x .hero-x-media{margin-top:12px}}

#story.about-preview {
  background-color: var(--x-ground);
  color: var(--x-ink);
  font-family: var(--x-ff-body);
  padding: 56px 0;
}
#story.about-preview h2 {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h2);
  color: var(--x-ink);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}
#story.about-preview .about-lead {
  color: var(--x-ink);
  line-height: 1.7;
  max-width: 62ch;
}
#story.about-preview .about-text {
  color: var(--x-soft);
  line-height: 1.7;
  max-width: 62ch;
}
#story.about-preview .about-link {
  color: var(--x-hyper);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
}
#story.about-preview .about-link:hover,
#story.about-preview .about-link:focus-visible {
  color: var(--x-ink);
}
#story.about-preview .about-link:focus-visible {
  outline: 2px solid var(--x-hyper);
  outline-offset: 3px;
  border-radius: 4px;
}
#story.about-preview .about-img {
  display: block;
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--x-rad);
  border: 1px solid var(--x-soft);
}
#story.about-preview .stack-panel {
  background-color: var(--x-tint);
  border: 1px solid var(--x-soft);
  border-radius: var(--x-rad);
  padding: 1.5rem;
}
#story.about-preview .stack-title {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h4);
  color: var(--x-ink);
  margin-bottom: 0.35rem;
}
#story.about-preview .stack-note {
  color: var(--x-soft);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
#story.about-preview .stack-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#story.about-preview .stack-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
#story.about-preview .stack-label {
  flex: 0 0 8.5rem;
  color: var(--x-soft);
  font-size: 1rem;
  line-height: 1.3;
}
#story.about-preview .stack-track {
  flex: 1 1 auto;
  height: 16px;
  display: flex;
}
#story.about-preview .stack-bar {
  display: block;
  height: 100%;
  border-radius: 4px;
  background-color: var(--x-primary);
}
#story.about-preview .bar-1 { width: 38%; opacity: 0.45; }
#story.about-preview .bar-2 { width: 54%; opacity: 0.6; }
#story.about-preview .bar-3 { width: 68%; opacity: 0.78; }
#story.about-preview .bar-4 { width: 82%; opacity: 1; }
#story.about-preview .bar-spot {
  width: 94%;
  height: 6px;
  background-color: var(--x-spot);
  opacity: 1;
}
#story.about-preview .stack-row-spot .stack-track {
  align-items: center;
}
@media (max-width: 575.98px) {
  #story.about-preview { padding: 48px 0; }
  #story.about-preview .stack-label { flex-basis: 6.5rem; }
}

#examples.gx-section {
  background-color: var(--x-ground);
  color: var(--x-ink);
  font-family: var(--x-ff-body);
  padding: 96px 0;
}
#examples .gx-intro {
  max-width: 680px;
  margin-bottom: 48px;
}
#examples .gx-title {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h2);
  color: var(--x-ink);
  line-height: 1.2;
  margin-bottom: 16px;
}
#examples .gx-lead {
  color: var(--x-soft);
  margin: 0;
  line-height: 1.6;
}
#examples .gx-card {
  background-color: var(--x-tint);
  border: 1px solid var(--x-soft);
  border-radius: var(--x-rad);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#examples .gx-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
#examples .gx-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-grow: 1;
}
#examples .gx-badge {
  display: inline-block;
  font-family: var(--x-ff-body);
  font-size: 16px;
  line-height: 1.3;
  padding: 4px 12px;
  border: 1px solid var(--x-spot);
  border-radius: var(--x-rad);
  color: var(--x-ink);
  background-color: var(--x-ground);
}
#examples .gx-card-title {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h4);
  color: var(--x-ink);
  line-height: 1.3;
  margin: 0;
}
#examples .gx-text {
  color: var(--x-soft);
  margin: 0;
  line-height: 1.6;
}
@media (max-width: 575.98px) {
  #examples.gx-section {
    padding: 64px 0;
  }
  #examples .gx-intro {
    margin-bottom: 32px;
  }
  #examples .gx-body {
    padding: 20px;
  }
}

#our-approach{background:var(--x-ground);color:var(--x-ink);padding:56px 0;font-family:var(--x-ff-body)}
#our-approach .oa-title{font-family:var(--x-ff-title);font-size:var(--x-fs-h2);color:var(--x-ink);margin-bottom:12px}
#our-approach .oa-lead{color:var(--x-soft);max-width:68ch;margin-bottom:32px}
#our-approach .oa-card{height:100%;background:var(--x-tint);border:1px solid var(--x-soft);border-radius:var(--x-rad);padding:20px;transition:transform .2s ease,border-color .2s ease}
#our-approach .oa-card:hover{transform:translateY(-4px);border-color:var(--x-primary)}
#our-approach .oa-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--x-spot);border-radius:var(--x-rad);color:var(--x-spot);font-size:1.2rem;margin-bottom:14px}
#our-approach .oa-card h3{font-family:var(--x-ff-title);font-size:var(--x-fs-h4);color:var(--x-ink);margin-bottom:8px}
#our-approach .oa-card p{color:var(--x-soft);margin:0}
#our-approach .oa-card:focus-within{border-color:var(--x-primary)}

#common-questions {
  background: var(--x-ground);
  color: var(--x-ink);
  padding: 56px 0;
  font-family: var(--x-ff-body);
}
#common-questions .faq-lead {
  max-width: 62ch;
  color: var(--x-soft);
  margin-bottom: 32px;
}
#common-questions h2 {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h2);
  color: var(--x-ink);
  margin-bottom: 16px;
  line-height: 1.2;
}
#common-questions .accordion {
  --bs-accordion-bg: var(--x-tint);
  --bs-accordion-color: var(--x-ink);
  --bs-accordion-border-color: var(--x-spot);
  --bs-accordion-btn-bg: var(--x-tint);
  --bs-accordion-btn-color: var(--x-ink);
  --bs-accordion-active-bg: var(--x-tint);
  --bs-accordion-active-color: var(--x-ink);
  --bs-accordion-btn-focus-box-shadow: none;
  max-width: 860px;
}
#common-questions .accordion-item {
  background: var(--x-tint);
  color: var(--x-ink);
  border: 1px solid var(--x-spot);
  border-radius: var(--x-rad);
  margin-bottom: 12px;
  overflow: hidden;
}
#common-questions .accordion-button {
  background: var(--x-tint);
  color: var(--x-ink);
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h4);
  line-height: 1.35;
  padding: 20px 22px;
  box-shadow: none;
}
#common-questions .accordion-button:not(.collapsed) {
  background: var(--x-tint);
  color: var(--x-ink);
  box-shadow: none;
}
#common-questions .accordion-button::after {
  filter: invert(1);
}
#common-questions .accordion-button:focus-visible {
  outline: 2px solid var(--x-primary);
  outline-offset: -2px;
}
#common-questions .accordion-body {
  background: var(--x-tint);
  color: var(--x-soft);
  padding: 4px 22px 22px;
  line-height: 1.65;
  max-width: 75ch;
}
#common-questions .accordion-body p {
  margin-bottom: 0;
}
#common-questions .faq-cta {
  margin-top: 32px;
}
#common-questions .faq-cta a.btn {
  background: var(--x-primary);
  color: var(--x-on-primary);
  border: 1px solid var(--x-primary);
  border-radius: var(--x-rad);
  padding: 12px 26px;
  font-family: var(--x-ff-body);
}
#common-questions .faq-cta a.btn:focus-visible {
  outline: 2px solid var(--x-hyper);
  outline-offset: 3px;
}
@media (max-width: 575.98px) {
  #common-questions { padding: 48px 0; }
  #common-questions .accordion-button { padding: 16px 16px; }
  #common-questions .accordion-body { padding: 4px 16px 18px; }
}

#services{background:var(--x-ground);color:var(--x-ink);padding:56px 0;font-family:var(--x-ff-body)}
#services .svc-head{max-width:720px;margin-bottom:40px}
#services .svc-head h2{font-family:var(--x-ff-title);font-size:var(--x-fs-h2);color:var(--x-ink);margin-bottom:16px;line-height:1.2}
#services .svc-head p{color:var(--x-soft);margin:0;line-height:1.7}
#services .svc-card{background:var(--x-tint);border:1px solid var(--x-soft);border-radius:var(--x-rad);padding:28px 24px;height:100%;display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease}
#services .svc-card:hover{transform:translateY(-4px);border-color:var(--x-primary)}
#services .svc-icon{width:48px;height:48px;border-radius:var(--x-rad);border:1px solid var(--x-spot);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--x-primary);font-size:1.4rem}
#services .svc-card h3{font-family:var(--x-ff-title);font-size:var(--x-fs-h4);color:var(--x-ink);margin-bottom:12px;line-height:1.3}
#services .svc-card p{color:var(--x-soft);margin:0;line-height:1.65}
#services .svc-cta{margin-top:40px}
#services .svc-cta p{color:var(--x-soft);max-width:640px;margin-bottom:20px;line-height:1.7}
#services .svc-cta .btn:focus-visible,#services .svc-card:focus-within{outline:2px solid var(--x-primary);outline-offset:3px}
@media (max-width:575px){#services{padding:48px 0}#services .svc-card{padding:24px 20px}}

#enquiry .x-contact {background:var(--x-ground);color:var(--x-ink);font-family:var(--x-ff-body);padding:56px 0}
#enquiry .x-contact .x-wrap {max-width:1140px;margin:0 auto;padding:0 16px}
#enquiry .x-contact h2 {font-family:var(--x-ff-title);font-size:var(--x-fs-h2);color:var(--x-ink);margin:0 0 16px;line-height:1.2}
#enquiry .x-contact h3 {font-family:var(--x-ff-title);font-size:var(--x-fs-h4);color:var(--x-ink);margin:0 0 12px;line-height:1.3}
#enquiry .x-contact .x-lead {color:var(--x-soft);max-width:68ch;line-height:1.7;margin:0 0 32px}
#enquiry .x-contact .x-panel {background:var(--x-tint);border:1px solid var(--x-soft);border-radius:var(--x-rad);padding:32px}
#enquiry .x-contact .x-panel-side {border-left:3px solid var(--x-spot)}
#enquiry .x-contact label {display:block;color:var(--x-ink);margin-bottom:6px;font-size:1rem}
#enquiry .x-contact .form-control {background:var(--x-ground);color:var(--x-ink);border:1px solid var(--x-soft);border-radius:var(--x-rad);padding:12px 14px;font-family:var(--x-ff-body);font-size:1rem}
#enquiry .x-contact .form-control::placeholder {color:var(--x-soft);opacity:1}
#enquiry .x-contact .form-control:focus {background:var(--x-ground);color:var(--x-ink);border-color:var(--x-primary);box-shadow:0 0 0 .2rem rgba(255,255,255,.25);outline:none}
#enquiry .x-contact textarea.form-control {min-height:170px;resize:vertical}
#enquiry .x-contact .btn-primary {background:var(--x-primary);border-color:var(--x-primary);color:var(--x-on-primary);border-radius:var(--x-rad);padding:12px 28px;font-family:var(--x-ff-body);font-size:1rem}
#enquiry .x-contact .btn-primary:hover, #enquiry .x-contact .btn-primary:focus {background:var(--x-primary);border-color:var(--x-primary);color:var(--x-on-primary);filter:brightness(1.12)}
#enquiry .x-contact .btn-primary:focus-visible {outline:2px solid var(--x-ink);outline-offset:3px}
#enquiry .x-contact .x-list {list-style:none;padding:0;margin:0 0 24px}
#enquiry .x-contact .x-list li {color:var(--x-soft);line-height:1.65;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
#enquiry .x-contact .x-list li:last-child {border-bottom:0}
#enquiry .x-contact .x-list strong {color:var(--x-ink);font-weight:600}
#enquiry .x-contact a.x-mail {color:var(--x-hyper);text-decoration:underline;word-break:break-all}
#enquiry .x-contact a.x-mail:focus-visible {outline:2px solid var(--x-hyper);outline-offset:3px}
#enquiry .x-contact .x-note {color:var(--x-soft);line-height:1.65;margin:0}
@media(min-width:992px){#enquiry .x-contact {padding:72px 0}#enquiry .x-contact .x-panel {padding:40px}}

#notice.disclaimer-section {
  background-color: var(--x-ground);
  color: var(--x-ink);
  padding: 56px 0;
  font-family: var(--x-ff-body);
}
#notice .disclaimer-panel {
  background-color: var(--x-tint);
  border: 1px solid var(--x-spot);
  border-radius: var(--x-rad);
  padding: 32px 24px;
}
#notice .disclaimer-icon {
  color: var(--x-spot);
  font-size: 2.25rem;
  line-height: 1;
  display: inline-block;
}
#notice .disclaimer-title {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h2);
  color: var(--x-ink);
  margin: 0 0 16px 0;
}
#notice .disclaimer-text {
  color: var(--x-soft);
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 72ch;
  margin: 0;
}
#notice .disclaimer-link {
  color: var(--x-hyper);
}
#notice .disclaimer-link:focus-visible {
  outline: 2px solid var(--x-primary);
  outline-offset: 3px;
}
@media (min-width: 768px) {
  #notice .disclaimer-panel {
    padding: 48px 48px;
  }
}

.ty-section {
  background: var(--x-ground);
  color: var(--x-ink);
  font-family: var(--x-ff-body);
  padding: 5rem 0;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.ty-section h1 {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h1);
  color: var(--x-ink);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.ty-lead {
  color: var(--x-ink);
  max-width: 34rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.ty-note {
  color: var(--x-soft);
  max-width: 34rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.ty-icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--x-rad);
  background: var(--x-tint);
  border: 2px solid var(--x-primary);
  color: var(--x-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
}
.ty-icon svg {
  width: 2.25rem;
  height: 2.25rem;
}
.ty-section .btn-primary {
  border-radius: var(--x-rad);
  padding: 0.75rem 1.75rem;
}
@media (max-width: 575.98px) {
  .ty-section {
    padding: 3rem 0;
  }
}

#portfolio-section {
  background: var(--x-ground);
  color: var(--x-ink);
  font-family: var(--x-ff-body);
  padding: 96px 0;
}
#portfolio-section .pf-wrap {
  max-width: 1140px;
}
#portfolio-section h1,
#portfolio-section h2,
#portfolio-section h3,
#portfolio-section h4 {
  font-family: var(--x-ff-title);
  color: var(--x-ink);
}
#portfolio-section h1 {
  font-size: var(--x-fs-h1);
  line-height: 1.12;
  margin: 0 0 24px;
  max-width: 18ch;
}
#portfolio-section .pf-lead {
  color: var(--x-soft);
  max-width: 62ch;
  margin: 0 0 20px;
  line-height: 1.65;
}
#portfolio-section .pf-note {
  color: var(--x-soft);
  max-width: 62ch;
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--x-spot);
  line-height: 1.6;
}
#portfolio-section .pf-block {
  margin-top: 56px;
}
#portfolio-section .pf-block h2 {
  font-size: var(--x-fs-h2);
  line-height: 1.2;
  margin: 0 0 16px;
  max-width: 24ch;
}
#portfolio-section .pf-block p {
  color: var(--x-soft);
  max-width: 68ch;
  line-height: 1.7;
  margin: 0;
}
#portfolio-section .pf-item {
  background: var(--x-tint);
  border: 1px solid var(--x-soft);
  border-radius: var(--x-rad);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#portfolio-section .pf-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
#portfolio-section .pf-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
#portfolio-section .pf-badge {
  align-self: flex-start;
  border: 1px solid var(--x-spot);
  color: var(--x-ink);
  border-radius: var(--x-rad);
  padding: 2px 12px;
  font-size: 1rem;
  margin-bottom: 14px;
}
#portfolio-section .pf-item h3 {
  font-size: var(--x-fs-h3);
  line-height: 1.25;
  margin: 0 0 12px;
}
#portfolio-section .pf-item p {
  color: var(--x-soft);
  line-height: 1.65;
  margin: 0 0 20px;
  flex: 1;
}
#portfolio-section .pf-more {
  align-self: flex-start;
}
#portfolio-section .btn:focus-visible,
#portfolio-section a:focus-visible {
  outline: 3px solid var(--x-spot);
  outline-offset: 3px;
}
#portfolio-section .modal-content {
  background: var(--x-tint);
  color: var(--x-ink);
  border: 1px solid var(--x-soft);
  border-radius: var(--x-rad);
}
#portfolio-section .modal-header,
#portfolio-section .modal-footer {
  border-color: var(--x-soft);
}
#portfolio-section .modal-title {
  font-family: var(--x-ff-title);
  color: var(--x-ink);
}
#portfolio-section .modal-body p {
  color: var(--x-soft);
  line-height: 1.7;
}
#portfolio-section .modal-body .pf-modal-badge {
  display: inline-block;
  border: 1px solid var(--x-spot);
  color: var(--x-ink);
  border-radius: var(--x-rad);
  padding: 2px 12px;
  margin-bottom: 16px;
}
#portfolio-section .modal-body img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--x-rad);
  margin-bottom: 20px;
}
#portfolio-section .pf-cta {
  margin-top: 64px;
  background: var(--x-tint);
  border: 1px solid var(--x-soft);
  border-radius: var(--x-rad);
  padding: 40px 28px;
}
#portfolio-section .pf-cta h2 {
  font-size: var(--x-fs-h2);
  margin: 0 0 14px;
  max-width: 26ch;
}
#portfolio-section .pf-cta p {
  color: var(--x-soft);
  max-width: 62ch;
  line-height: 1.65;
  margin: 0 0 24px;
}
@media (max-width: 575.98px) {
  #portfolio-section {
    padding: 64px 0;
  }
  #portfolio-section .pf-body {
    padding: 20px;
  }
  #portfolio-section .pf-cta {
    padding: 28px 20px;
  }
}

#about-main {
  background: var(--x-ground);
  color: var(--x-ink);
  font-family: var(--x-ff-body);
  padding: 56px 0;
}
#about-main .about-hero {
  padding: 48px 0 56px;
}
#about-main h1 {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h1);
  color: var(--x-ink);
  line-height: 1.15;
  margin-bottom: 28px;
  max-width: 20ch;
}
#about-main .about-lead {
  color: var(--x-soft);
  max-width: 68ch;
  line-height: 1.7;
  margin-bottom: 0;
}
#about-main h2 {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h2);
  color: var(--x-ink);
  line-height: 1.25;
  margin-bottom: 20px;
}
#about-main h3 {
  font-family: var(--x-ff-title);
  font-size: var(--x-fs-h3);
  color: var(--x-ink);
  line-height: 1.3;
  margin-bottom: 12px;
}
#about-main p {
  color: var(--x-soft);
  line-height: 1.7;
  max-width: 68ch;
}
#about-main .about-block {
  padding: 48px 0;
}
#about-main .about-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--x-rad);
  border: 1px solid var(--x-soft);
}
#about-main .about-tint {
  background: var(--x-tint);
  padding: 48px 0;
}
#about-main .about-panel {
  background: var(--x-tint);
  border: 1px solid var(--x-soft);
  border-radius: var(--x-rad);
  padding: 28px;
  height: 100%;
}
#about-main .about-tint .about-panel {
  background: var(--x-ground);
}
#about-main .about-panel p {
  margin-bottom: 0;
}
#about-main .about-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: aboutstep;
}
#about-main .about-steps li {
  position: relative;
  padding: 0 0 24px 52px;
  color: var(--x-soft);
  line-height: 1.7;
  max-width: 68ch;
  counter-increment: aboutstep;
}
#about-main .about-steps li::before {
  content: counter(aboutstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--x-primary);
  border-radius: var(--x-rad);
  color: var(--x-ink);
  font-family: var(--x-ff-title);
  display: flex;
  align-items: center;
  justify-content: center;
}
#about-main .about-steps li strong {
  color: var(--x-ink);
  font-weight: 600;
}
#about-main .about-cta {
  padding: 48px 0 8px;
}
#about-main .about-cta-box {
  background: var(--x-tint);
  border: 1px solid var(--x-soft);
  border-radius: var(--x-rad);
  padding: 40px 32px;
}
#about-main .about-cta-box p {
  margin-bottom: 24px;
}
#about-main .btn-primary {
  background: var(--x-primary);
  border-color: var(--x-primary);
  color: var(--x-on-primary);
  border-radius: var(--x-rad);
  padding: 12px 28px;
  font-family: var(--x-ff-body);
}
#about-main .btn-primary:hover {
  background: var(--x-primary);
  border-color: var(--x-primary);
  color: var(--x-on-primary);
  opacity: .88;
}
#about-main .btn-primary:focus-visible,
#about-main a:focus-visible {
  outline: 3px solid var(--x-ink);
  outline-offset: 3px;
}
#about-main a:not(.btn) {
  color: var(--x-hyper);
}
@media (max-width: 575.98px) {
  #about-main { padding: 32px 0; }
  #about-main .about-hero { padding: 24px 0 40px; }
  #about-main .about-cta-box { padding: 28px 20px; }
}

/* Цвет текста кнопок закреплён: правило блока вида «#about a { color: … }»
   по специфичности перебивало .btn-primary, и кнопка выходила светлым
   текстом на светлой заливке */
a.btn-primary, .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: var(--x-on-primary) !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--x-primary);
  outline-offset: 2px;
}

footer a {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Название в шапке набрано заголовочным шрифтом; крупное, оно выталкивает
   кнопку меню на вторую строку телефона */
@media (max-width: 575.98px) {
  .navbar-brand, .navbar-brand * {
    font-size: 1.25rem !important;
    line-height: 1.2;
  }
  .navbar-brand {
    min-width: 0;
    max-width: calc(100% - 64px);
    white-space: normal;
  }
}

footer small, footer .small {
  font-size: max(.875rem, 14px);
}

@keyframes enter-22 {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: none; }
}

.opening-62 > * {
  animation: enter-22 460ms cubic-bezier(.2, .7, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}