/* Monochrome theme aligned with doodle illustrations.
   Goal: less spacing, no glassmorphism, black/white UI with accent colors. */

:root {
  --color-bg: #fbfaf6;
  --color-surface: #ffffff;
  --color-surface-2: #f4f3ee;
  --color-text: #111111;
  --color-muted: rgba(17, 17, 17, 0.72);
  --color-border: rgba(17, 17, 17, 0.18);

  /* Accent colors */
  --color-primary: #0343df; /* “xkcd blue” */
  --color-primary-2: #2a62ff;
  --color-warning: #ffb000;
  --color-success: #16a34a;
  --color-on-primary: #ffffff;
  --color-on-primary-muted: rgba(255, 255, 255, 0.92);

  /* Shadows that match the illustration style */
  --shadow-sm: 8px 8px 0 rgba(0, 0, 0, 0.14);
  --shadow-md: 10px 10px 0 rgba(0, 0, 0, 0.16);
  --shadow-lg: 12px 12px 0 rgba(0, 0, 0, 0.18);
  --shadow-glass-inset: none;

  --surface-header-bg: rgba(251, 250, 246, 0.98);

  /* Disable glass surfaces */
  --surface-glass-bg: #ffffff;
  --surface-glass-bg-2: #ffffff;
  --surface-glass-highlight: rgba(255, 255, 255, 0);
  --surface-glass-streak: rgba(255, 255, 255, 0);
  --surface-glass-noise: rgba(0, 0, 0, 0);
  --border-glass: rgba(17, 17, 17, 0.18);
  --border-hover: rgba(17, 17, 17, 0.32);

  --surface-button-secondary: #ffffff;
  --surface-button-secondary-hover: var(--color-surface-2);
  --border-button-secondary-hover: rgba(17, 17, 17, 0.32);

  --surface-chip: #ffffff;
  --surface-chip-hover: var(--color-surface-2);
  --surface-chip-active: rgba(3, 67, 223, 0.10);
  --border-chip-active: rgba(3, 67, 223, 0.55);

  --surface-input-bg: #ffffff;
  --surface-input-bg-focus: #ffffff;
  --border-focus: rgba(3, 67, 223, 0.55);
  --shadow-focus: 0 0 0 4px rgba(3, 67, 223, 0.18);

  --surface-faq-bg: #ffffff;
  --surface-faq-open: rgba(3, 67, 223, 0.06);

  --surface-footer-bg: rgba(251, 250, 246, 0.98);

  --border-warning: rgba(17, 17, 17, 0.22);
  --border-referral: rgba(17, 17, 17, 0.22);
  --surface-warning-bg: #ffffff;
  --surface-referral-bg: #ffffff;
  --surface-warning-glow: transparent;
  --surface-referral-glow: transparent;

  --text-link: var(--color-primary);
}

body {
  background: var(--color-bg);
}

/* Reduce spacing between blocks */
.c-section:not(.c-hero) {
  padding: 56px 0;
  background-color: transparent;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .c-section:not(.c-hero) {
    padding: 46px 0;
  }
}

@media (max-width: 575.98px) {
  .c-section:not(.c-hero) {
    padding: 38px 0;
  }
}

.c-section__subhead {
  margin-top: 10px;
  font-size: 16px;
}

/* Kill glassmorphism blur everywhere it was used */
.c-header,
.c-card,
.c-faqItem {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .c-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Header: solid, minimal */
.c-header {
  background: var(--surface-header-bg);
  border-bottom: 1px solid rgba(17, 17, 17, 0.18);
}

.c-header.is-scrolled {
  box-shadow: none;
}

/* Mobile header: center logo + XKCD burger */
@media (max-width: 991.98px) {
  /* Keep the top divider fixed (menu appears below as a separate panel) */
  .c-header {
    border-bottom: none;
  }

  .c-nav {
    /* IMPORTANT: keep nav fixed to viewport (do not scroll with page) */
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    /* stable "top bar" height so logo can be centered vertically */
    height: 84px;
    min-height: 84px;
    padding-top: 0;
    padding-bottom: 0;
    background: var(--color-bg);
  }

  .c-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(17, 17, 17, 0.18);
    pointer-events: none;
  }

  .c-nav .container {
    position: relative;
    min-height: 84px;
  }

  .c-nav__brand {
    /* Keep logo pinned (should not "drop" when collapse opens) */
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2;
    margin: 0 !important;
  }

  /* Keep burger clickable above dropdown panel */
  .c-nav__toggle {
    position: relative;
    z-index: 3;
  }

  /* Make the expanded menu a panel BELOW the top bar (so logo won't shift) */
  .c-nav__collapse {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-offset, 84px);
    z-index: 1020;
    /* Opaque background (no translucency on mobile) */
    background: var(--color-bg) !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.18);
    padding: 16px 12px 18px;
    max-height: calc(100vh - var(--header-offset, 84px));
    overflow: auto;
  }

  /* Menu sections slightly lower */
  .c-nav__list {
    margin-top: 10px;
  }

  .c-nav__toggle {
    margin-left: auto;
    border: 2px solid rgba(17, 17, 17, 0.22);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
    width: 52px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .c-nav__toggle:active {
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
  }

  .c-nav__toggle .navbar-toggler-icon {
    width: 26px;
    height: 18px;
    background-image: none !important;
    background: linear-gradient(rgba(17, 17, 17, 0.92) 0 0) center/24px 2px no-repeat;
    position: relative;
  }

  .c-nav__toggle .navbar-toggler-icon::before,
  .c-nav__toggle .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    height: 2px;
    background: rgba(17, 17, 17, 0.92);
    border-radius: 999px;
    transform: translateX(-50%);
  }

  .c-nav__toggle .navbar-toggler-icon::before {
    top: 1px;
    width: 22px;
    transform: translateX(-50%) rotate(-1deg);
  }

  .c-nav__toggle .navbar-toggler-icon::after {
    bottom: 1px;
    width: 26px;
    transform: translateX(-50%) rotate(1deg);
  }
}

/* Keep illustration headers, remove colored blobs */
.c-hero::before {
  content: none !important;
}

/* Hero: pin background to bottom + remove huge bottom paddings from app.css */
.c-hero {
  /* Give the illustration its own "floor" so it won't sit under content */
  padding: 70px 0 260px;
  /* ensure illustration is always pinned to the bottom edge.
     NOTE: header-*.png files have transparent "margins" inside the image;
     we push the background slightly below the hero to trim that empty area. */
  --hero-bg-y: 100%;
  --hero-bg-y-offset: clamp(80px, 6vw, 140px);
  background-position: var(--hero-bg-x, 50%) calc(100% + var(--hero-bg-y-offset));
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .c-hero {
    padding: 70px 0 240px;
  }
}

@media (max-width: 575.98px) {
  .c-hero {
    padding: 70px 0 120px;
    --hero-bg-y-offset: clamp(30px, 6vw, 140px) !important;
  }
}

@media (min-width: 1300px) {
  .c-hero {
    padding: 70px 0 300px;
  }
}

@media (min-width: 1500px) {
  .c-hero {
    padding: 70px 0 320px;
  }
}

/* Links */
.c-link,
.c-card__link,
.c-footer__link {
  color: var(--text-link);
  text-decoration: none !important;
  border-bottom: 0 !important;
  padding-bottom: 0;
  transition: color 160ms var(--ease);
}

.c-link:hover,
.c-card__link:hover,
.c-footer__link:hover {
  text-decoration: none !important;
  color: var(--color-primary-2);
}

.c-link:active,
.c-card__link:active,
.c-footer__link:active {
  text-decoration: none !important;
  color: var(--color-primary);
}

.c-link:focus-visible,
.c-card__link:focus-visible,
.c-footer__link:focus-visible {
  text-decoration: none !important;
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 6px;
}

/* Underline ONLY text inside links */
.c-link .c-link__text,
.c-card__link .c-link__text,
.c-footer__link .c-link__text {
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.14em;
}

/* Buttons */
.c-btn {
  border: 2px solid var(--color-text);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.16);
  border-radius: var(--radius-md);
}

.c-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.16);
}

.c-btn:active {
  transform: translate(0, 0);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.16);
}

.c-btn--primary,
.c-btn--primary:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.c-btn--primary:hover {
  background: var(--color-primary-2);
}

.c-btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
}

.c-btn--secondary:hover {
  background: var(--color-surface-2);
}

/* Badges / chips */
.c-badge {
  border: 1px solid rgba(17, 17, 17, 0.18);
  background: var(--color-surface);
}

.c-badge--soft {
  background: rgba(3, 67, 223, 0.08);
  border-color: rgba(3, 67, 223, 0.55);
}

.c-badge--outline {
  background: transparent;
  border-color: rgba(17, 17, 17, 0.38);
  color: var(--color-text);
}

.c-chip {
  border: 1px solid rgba(17, 17, 17, 0.26);
  background: var(--color-surface);
  box-shadow: none;
}

.c-chip:hover {
  transform: none;
  box-shadow: none;
}

.c-chip--active,
.c-chip.is-active {
  background: rgba(3, 67, 223, 0.10);
  border-color: rgba(3, 67, 223, 0.55);
}

/* Cards (single outline, no double contour) */
.c-card {
  border: 2px solid var(--color-text);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(17, 17, 17, 0.16);
}

.c-card::after {
  content: none !important;
}

.c-card__body {
  padding: 18px;
}

.c-card__text,
.c-list__item,
.c-form__checkLabel,
.c-footer__copyright {
  color: var(--color-muted);
}

.c-card--glass {
  background: var(--color-surface);
  border-color: var(--color-text);
}

.c-card--service:hover,
.c-card--step:hover,
.c-card--article:hover {
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(17, 17, 17, 0.16);
  border-color: var(--color-text);
}

/* Cloud (audience panel) */
.c-cloud {
  border: 2px solid var(--color-text);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(17, 17, 17, 0.16);
  background: var(--color-surface);
}

.c-cloud--audience::before {
  opacity: 0;
}

/* Forms */
.c-form__control {
  border: 2px solid var(--color-text);
  background: var(--color-surface);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md);
}

.c-form__control:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus), 6px 6px 0 rgba(0, 0, 0, 0.12);
}

/* Dropdown language menu */
.c-lang__menu {
  border: 2px solid var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* Nav dropdown (More) */
.c-nav .dropdown-menu:not(.c-lang__menu) {
  border: 2px solid var(--color-text);
  box-shadow: none !important;
  background: var(--color-surface);
  padding: 8px;
}

.c-nav .dropdown-menu:not(.c-lang__menu) .dropdown-item {
  border-radius: 10px;
  color: var(--color-text);
}

.c-nav .dropdown-menu:not(.c-lang__menu) .dropdown-item:hover,
.c-nav .dropdown-menu:not(.c-lang__menu) .dropdown-item:focus {
  background: var(--color-surface-2);
}

/* Space between toggle and dropdown */
.dropdown-menu.dropdown-menu-end.c-lang__menu.show {
  margin-top: 12px;
}

.c-lang__item.is-active {
  border: 2px solid rgba(3, 67, 223, 0.62);
}

/* Dropdown spacing between items (requested) */
.dropdown-menu.dropdown-menu-end.c-lang__menu.show li {
  margin-top: 10px;
}

.dropdown-menu.dropdown-menu-end.c-lang__menu.show li:first-child {
  margin-top: 0;
}

/* Mobile: language dropdown should not go off-screen (use "inline" full-width menu) */
@media (max-width: 991.98px) {
  .c-nav__actions {
    width: 100%;
    position: relative;
  }

  /* Keep buttons in a row, but dropdown list should span full width */
  .c-lang {
    flex: 1 1 0;
    min-width: 0;
    /* keep positioning context for dropdown */
    position: relative;
  }

  .c-nav__consult {
    flex: 1 1 0;
    min-width: 0;
  }

  .c-lang__toggle {
    width: 100%;
    justify-content: space-between;
  }

  .c-nav__consult .c-btn {
    width: 100%;
  }

  /* Full-width language list (stretches under both buttons, grows menu height) */
  .c-nav__collapse.show .c-lang__menu.show,
  .c-nav__collapse.collapsing .c-lang__menu.show {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    /* 2 columns + gap-2 (8px) => full width of actions row */
    width: calc(200% + 8px) !important;
    max-width: none;
    min-width: 0;
    margin-top: 18px !important;
    overflow: visible;
    max-height: none;
  }

  /* Spacing between items in the mobile full-width menu */
  .c-nav__collapse.show .c-lang__menu.show li,
  .c-nav__collapse.collapsing .c-lang__menu.show li {
    margin-top: 8px;
  }

  .c-nav__collapse.show .c-lang__menu.show li:first-child,
  .c-nav__collapse.collapsing .c-lang__menu.show li:first-child {
    margin-top: 0;
  }
}

/* Consult CTA hint (small, dark-gray) */
.c-nav__consultHint {
  font-size: 12px;
  line-height: 1.15;
  color: rgba(17, 17, 17, 0.72);
  margin: 0 0 6px;
  text-align: right;
}

/* Consult CTA alignment */
.c-nav__consult {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

@media (min-width: 992px) {
  /* Override Bootstrap's `.align-items-lg-center { ... !important }` */
  .c-nav .c-nav__actions {
    align-items: center !important;
  }

  /* Keep hint above button without affecting header row alignment */
  .c-nav__consult {
    position: relative;
  }

  .c-nav__consultHint {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    margin: 0;
    text-align: right;
    max-width: 240px;
    white-space: normal;
  }
}

@media (max-width: 991.98px) {
  .c-nav__consult {
    align-items: flex-start;
  }

  .c-nav__consultHint {
    position: static;
    max-width: none;
    text-align: left;
    margin: 0 0 6px;
  }
}

/* Reality / referral boxes */
.c-reality__box,
.c-referral__box {
  border: 2px solid var(--color-text);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(17, 17, 17, 0.16);
  background: var(--color-surface);
  padding: 18px;
}

/* Reality/referral two-column boxes: center left column vertically */
@media (min-width: 992px) {
  .c-reality__box > .row,
  .c-referral__box > .row {
    align-items: center !important;
  }
}

/* FAQ (new design using <details>) */
.c-faq__list {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.c-faqItem {
  border: 2px solid var(--color-text);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(17, 17, 17, 0.16);
  overflow: hidden;
}

.c-faqItem + .c-faqItem {
  margin-top: 12px;
}

.c-faqItem summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 700;
  line-height: 1.25;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.c-faqItem summary::-webkit-details-marker {
  display: none;
}

.c-faqItem summary::after {
  content: "+";
  margin-left: auto;
  line-height: 1;
  font-weight: 900;
  font-size: 18px;
  color: rgba(17, 17, 17, 0.85);
}

.c-faqItem[open] summary::after {
  content: "–";
}

.c-faqItem__a {
  padding: 0 20px 18px;
  color: var(--color-muted);
}

/* Header menu (RU): keep equal gaps, shrink text if needed */
@media (min-width: 992px) {
  .c-nav__list {
    gap: 18px;
  }

  .c-nav__link {
    padding-left: 0 !important;
    padding-right: 0 !important;
    white-space: nowrap;
  }

  html[lang="ru"] .c-nav__link {
    font-size: clamp(12px, 0.95vw, 15px);
  }
}

/* Footer: tighter + monochrome */
.c-footer {
  background: var(--surface-footer-bg);
  padding: 30px 0;
  border-top: 2px solid rgba(17, 17, 17, 0.10);
}

.c-footer__bottom {
  border-top: 2px solid rgba(17, 17, 17, 0.10);
}