/* Спільне для нових внутрішніх сторінок, чого ще немає в styles.css dizarm.io.
   Кандидати в styles.css, щоб працювало на всіх сторінках сайту. */

/* Хедер, що повернувся посеред сторінки, отримує білий фон — інакше на темних секціях
   чорні лого й пункти меню зливаються з фоном. Біля верху сторінки фон прозорий, як на сайті.
   .has-autohide ставить js/nav-autohide.js — на головній хедер ховає GSAP, і цей перехід там не потрібен. */
.nav.has-autohide { transition: transform .28s cubic-bezier(.16, 1, .3, 1), background-color .2s ease; }
.nav.is-floating { background-color: #fff; }

/* Мобільне меню (≤479): біла плашка .menu-wrp (fixed, z-index 1190) лежала поверх лого й кнопки «close»,
   і закрити меню тапом було неможливо. Успадковано з dizarm.io. */
@media screen and (max-width: 991px) {
  .nav .brand,
  .nav .mobile-menu-toggle { position: relative; z-index: 1191; }
}

/* Активний пункт меню підкреслений — як на сторінці Insights dizarm.io. */
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; }

/* Services ▾ — список послуг (js/nav-dropdown.js).
   Desktop: панель під пунктом, рамка 1px, рядки на волосяних лініях, наведення — інверсія, як у кнопок сайту.
   Mobile (≤479): у мобільному меню список розгортається під пунктом. */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font: inherit;
  cursor: pointer;
}
.nav-dropdown__chevron { flex: none; width: 1em; height: 1em; transition: transform .2s ease; }
.nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__chevron { transform: rotate(180deg); }
.nav-dropdown__list {
  position: absolute;
  z-index: 2;
  top: calc(100% + 1.5em);
  left: -1em;
  min-width: 18.75em;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #000;
}
.nav-dropdown__list::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.5em; }   /* місток для миші між пунктом і панеллю */
.nav-dropdown__list[hidden] { display: none; }
.nav-dropdown__list li + li { border-top: 1px solid #e5e7eb; }
.nav-dropdown__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: .875em 1em;
  color: #000;
  font-family: Worksans, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.0625em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown__arrow { flex: none; width: 1.125em; height: 1.125em; }
.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible { background: #000; color: #fff; }
.nav-dropdown__link:focus-visible { outline: 2px solid #6251c8; outline-offset: -4px; }

@media screen and (max-width: 991px) {
  .nav-dropdown { display: block; width: 100%; }
  /* Той самий вигляд, що в інших пунктів мобільного меню (.link-nav у styles.css): кнопка скидає шрифт. */
  .nav .nav-dropdown__toggle {
    width: 100%;
    min-height: 3.65em;
    border-bottom: 1px solid currentColor;
    color: inherit;
    font-family: Rg Standardbook, Arial, sans-serif;
    font-size: 1.25em;
    line-height: 1;
    text-transform: uppercase;
    text-align: left;
  }
  .nav-dropdown__chevron { width: 1em; height: 1em; }
  .nav-dropdown__list {
    position: static;
    min-width: 0;
    padding: .25em 0 .5em;
    border: 0;
    background: transparent;
  }
  .nav-dropdown__list::before { content: none; }
  .nav-dropdown__link { padding: .875em 0; white-space: normal; }
  .nav-dropdown__link:hover { background: transparent; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown__chevron { transition: none; }
}

/* Перехід до контенту для клавіатури. */
.skip-link {
  position: fixed;
  z-index: 1300;
  top: -100px;
  left: 16px;
  padding: 12px 20px;
  background: #fff;
  color: #000;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #000;
}
.skip-link:focus { top: 16px; }
main:focus { outline: none; }

/* Одне кільце фокусу для посилань і кнопок. :where() тримає специфічність на рівні класу сторінки,
   тож власні правила компонентів (картки, кнопка оферу) їх перекривають.
   Поля форм лишаються зі своїм станом фокусу; цілі програмного фокусу (tabindex="-1") без кільця. */
.partnership-page :where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.free-tools-page :where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid #6251c8; outline-offset: 3px; }
/* Чорні секції: біле кільце. */
.partnership-page :where(.section.dark) :where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.free-tools-page :where(.section.dark) :where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible { outline-color: #fff; }
/* Футер: аврора від темно-синього до майже білого — біле кільце з темною підкладкою читається на обох. */
.partnership-page :where(.section.ftr) :where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.free-tools-page :where(.section.ftr) :where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible { outline-color: #fff; box-shadow: 0 0 0 7px #16113d; }

/* Повідомлення форм отримують фокус після відправки (js/form-status.js). */
.form-success:focus, .form-error:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .nav.has-autohide { transition: none; }
}

/* Use the site's existing tablet menu breakpoint on every page. */
.nav .nav-dropdown__toggle{height:auto;min-height:0;border-radius:0;box-shadow:none;font-weight:inherit;text-transform:none}
.nav a[aria-current="location"],.nav .nav-dropdown__toggle[aria-current]{text-decoration:underline;text-underline-offset:.35em}
@media(max-width:991px){.nav .nav-dropdown__toggle{min-height:3.65em;text-transform:uppercase}.nav .menu-wrp{max-height:100dvh;overflow-y:auto;padding-bottom:2em}.nav .brand,.nav .mobile-menu-toggle{position:relative;z-index:1191}}
/* Keep the tablet layout and its JS visibility rules in sync (480–991px). */
@media screen and (max-width:991px){
  .nav{z-index:1200;font-size:16px;padding-block:20px}
  .nav>.container{width:calc(100% - 40px);max-width:none}
  .nav .logo{width:8.5em}
  .nav .button-main.m-hide{display:none}
  .nav .mobile-menu-toggle{display:block;color:#000;text-transform:uppercase;background:transparent;border:0;padding:0;margin:0;font:400 18px/1 'Rg Standardbook',Arial,sans-serif}
  .nav .menu-wrp{z-index:1190;display:flex;flex-direction:column;gap:0;position:fixed;inset:0;width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;overflow-y:auto;padding:112px 20px 32px;background:#fff;color:#000;opacity:0;pointer-events:none;transform:translateY(-20px);transition:opacity .25s ease,transform .25s ease}
  .nav .menu-wrp.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
  .nav .link-nav{display:flex;justify-content:space-between;align-items:center;min-height:3.65em;border-bottom:1px solid currentColor;font:400 20px/1 'Rg Standardbook',Arial,sans-serif;letter-spacing:-.04em;text-transform:uppercase;text-decoration:none;color:inherit}
  .nav .link-nav .text-body-2{font:inherit;letter-spacing:inherit;text-transform:inherit}
  .nav .nav-dropdown__toggle{min-height:3.65em}
  .nav .nav-dropdown__link{font-size:16px;letter-spacing:-.04em}
  html.mobile-menu-open,html.mobile-menu-open body{overflow:hidden}
  html.mobile-menu-open .nav{background:#fff;transform:translate3d(0,0,0)!important}
}
@media(prefers-reduced-motion:reduce){.nav .menu-wrp{transition:none}}
/* Services links to its page; the adjacent arrow opens the submenu. */
.nav-dropdown__heading{display:flex;align-items:center;gap:.25em}
.nav .nav-dropdown__heading .nav-dropdown__toggle{width:1.25em;min-height:1.5em;padding:0;justify-content:center;border:0;background:transparent}
@media(max-width:991px){.nav-dropdown__heading{border-bottom:1px solid currentColor;gap:1em}.nav .nav-dropdown__heading>.link-nav{flex:1;border:0}.nav .nav-dropdown__heading .nav-dropdown__toggle{width:2.5em;min-height:3.65em;align-self:stretch}}

/* Keep the navigation centered independently of logo and CTA widths. */
@media (min-width:992px){
  .nav .flex-h-space{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
  .nav .brand{justify-self:start}
  .nav .menu-wrp{align-items:center;justify-self:center}
  .nav .button-main.m-hide{justify-self:end}
  .nav .link-nav{display:inline-flex;align-items:center;line-height:1.5}
  .nav .link-nav .text-body-2{line-height:inherit}
  .nav .nav-dropdown__heading{align-items:center}
}

.nav .nav-dropdown__pending,.nav .nav-dropdown__pending:hover{color:#929292;background:transparent}
.nav-dropdown__status{flex:none;font-size:.7em;letter-spacing:0;white-space:nowrap}
@media(max-width:991px){.nav-dropdown__pending>span:first-child{min-width:0}.nav-dropdown__pending{gap:.75em}}

/* The language switch belongs to the shared navigation on every page. */
.nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:1.25em}
.language-switch{display:flex;align-items:center;gap:.35em;white-space:nowrap;font:400 .875em/1.5 Worksans,Arial,sans-serif;letter-spacing:0}
.language-switch a{color:#888;text-decoration:none}
.language-switch a[aria-current="true"]{color:#000;text-decoration:underline;text-underline-offset:.3em}
.language-switch a:focus-visible{outline:2px solid #6251c8;outline-offset:4px}
.language-switch>span{color:#bbb}
@media(min-width:992px){.nav .nav-actions{justify-self:end}}
@media(max-width:991px){.nav .nav-actions{position:relative;z-index:1191;margin-left:auto;margin-right:1.5em}.nav .nav-actions .button-main{display:none}.language-switch{font-size:14px}}
/* Latin display fonts have no Ukrainian glyphs: use a consistent Cyrillic face. */
html[lang="uk"] body{font-family:Arial,'Segoe UI',sans-serif}
html[lang="uk"] :is(h1,h2,h3,h4,.headline-1,.headline-2,.headline-3-24,.text-body-1,.text-body-2,.text-body-3,.button-main,.nav .link-nav){font-family:Arial,'Segoe UI',sans-serif}
html[lang="uk"] .nav .menu-wrp{gap:1em}
html[lang="uk"] .nav .link-nav{white-space:nowrap}
html[lang="uk"] .nav-dropdown__link{white-space:normal}
html[lang="uk"] .nav-dropdown__list{min-width:28em}
@media(max-width:991px){html[lang="uk"] .nav-dropdown__list{min-width:0}}

.section.home-news{display:block}.section.home-news[hidden]{display:none}.home-news .card-blog-item{color:inherit;text-decoration:none}.home-news .card-blog-item:focus-visible{outline:2px solid #9f94f3;outline-offset:8px}.home-news .card-blog-item:focus-visible .rotate-img-card-news{opacity:1;transform:translateY(0) rotate(-15deg)}