/* Braveexa — базові стилі документальних сторінок */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bx-deep: #0d3b3f;
  --bx-teal: #14595c;
  --bx-teal-soft: #2c7a7d;
  --bx-coral: #ff6b4a;
  --bx-coral-warm: #ff8f6b;
  --bx-sand: #fdf6f0;
  --bx-sand-deep: #f6e9df;
  --bx-panel: #ffffff;
  --bx-ink: #17282a;
  --bx-mute: #5d6f70;
  --bx-line: #e6d8cd;
  --bx-font-body: "Inter", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --bx-font-head: "Georgia", "Iowan Old Style", "Times New Roman", serif;
  --bx-r-s: 10px;
  --bx-r-m: 18px;
  --bx-r-l: 28px;
  --bx-sh-s: 0 8px 20px rgba(13, 59, 63, 0.07);
  --bx-sh-m: 0 16px 40px rgba(13, 59, 63, 0.11);
  --bx-sh-l: 0 28px 66px rgba(13, 59, 63, 0.17);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--bx-font-body);
  font-size: 16px;
  line-height: 1.74;
  color: var(--bx-ink);
  background:
    radial-gradient(ellipse at 92% -4%, rgba(255, 107, 74, 0.14), transparent 44%),
    radial-gradient(ellipse at 2% 10%, rgba(20, 89, 92, 0.11), transparent 38%),
    linear-gradient(180deg, #fdf6f0 0%, #f6e9df 100%);
  min-height: 100vh;
}

a {
  color: var(--bx-teal);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--bx-coral);
}

/* ---------- шапка ---------- */
.bx-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 16px 20px;
  background: rgba(253, 246, 240, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(13, 59, 63, 0.12);
}
.bx-topbar__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-topbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bx-topbar__glyph {
  width: 28px;
  height: 28px;
  display: block;
}
.bx-topbar__name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bx-deep);
}

/* ---------- шапка документа ---------- */
.bx-doc-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 24px 26px;
}
.bx-doc-head__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px;
  margin-bottom: 16px;
  border-radius: 999px;
  border: 1px solid rgba(20, 89, 92, 0.24);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--bx-sh-s);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bx-teal);
}
.bx-doc-head__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bx-coral);
}
.bx-doc-head__title {
  font-family: var(--bx-font-head);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.16;
  color: var(--bx-deep);
  max-width: 900px;
}
.bx-doc-head__title--accent {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.08em 0.26em 0.14em;
  color: #2b1006;
  background-image: linear-gradient(
    101deg,
    rgba(255, 107, 74, 0.5) 0%,
    rgba(255, 143, 107, 0.88) 16%,
    rgba(255, 107, 74, 0.7) 45%,
    rgba(255, 168, 122, 0.92) 68%,
    rgba(255, 107, 74, 0.74) 90%,
    rgba(255, 128, 92, 0.6) 100%
  );
  -webkit-clip-path: polygon(0.4% 14%, 99.6% 3%, 100% 87%, 0.2% 99%);
  clip-path: polygon(0.4% 14%, 99.6% 3%, 100% 87%, 0.2% 99%);
}
.bx-doc-head__sub {
  max-width: 700px;
  margin-top: 16px;
  font-size: 17px;
  color: var(--bx-mute);
}
.bx-doc-head__stamp {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 16px;
  border-left: 3px solid var(--bx-coral);
  background: rgba(255, 255, 255, 0.66);
  border-radius: 0 var(--bx-r-s) var(--bx-r-s) 0;
  font-size: 13px;
  color: var(--bx-teal);
}
.bx-doc-head__stamp strong {
  color: var(--bx-deep);
}

/* ---------- двоколонка: зміст + текст ---------- */
.bx-doc-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 76px;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.bx-doc-body__aside {
  position: sticky;
  top: 84px;
}

.bx-doc-body__main {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(253, 246, 240, 0.97) 100%
  );
  border: 1px solid rgba(13, 59, 63, 0.11);
  border-radius: var(--bx-r-l);
  box-shadow: var(--bx-sh-m);
  padding: 44px 46px;
}

.bx-doc-body__main > section {
  scroll-margin-top: 92px;
}
.bx-doc-body__main > section + section {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px dashed rgba(13, 59, 63, 0.14);
}

.bx-doc-body__main h2 {
  font-family: var(--bx-font-head);
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 29px);
  line-height: 1.24;
  color: var(--bx-deep);
  margin-bottom: 14px;
}
.bx-doc-body__main h2 .bx-doc-body__num {
  display: inline-block;
  min-width: 30px;
  margin-right: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--bx-deep);
  color: var(--bx-sand);
  font-family: var(--bx-font-body);
  font-size: 13px;
  font-weight: 800;
  vertical-align: middle;
}
.bx-doc-body__main h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--bx-teal);
  margin: 22px 0 9px;
}
.bx-doc-body__main p {
  color: var(--bx-mute);
  margin-bottom: 14px;
}
.bx-doc-body__main ul,
.bx-doc-body__main ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--bx-mute);
}
.bx-doc-body__main li {
  margin-bottom: 8px;
}
.bx-doc-body__main li::marker {
  color: var(--bx-coral);
}
.bx-doc-body__main strong {
  color: var(--bx-ink);
}

@media (max-width: 940px) {
  .bx-doc-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .bx-doc-body__aside {
    position: static;
    top: auto;
  }
  .bx-doc-body__main {
    padding: 30px 22px;
    border-radius: 22px;
  }
  .bx-doc-head {
    padding-top: 40px;
  }
}

/* ---------- підвал ---------- */
.bx-footer {
  margin-top: 20px;
  padding: 26px 20px 22px;
  background: var(--bx-deep);
  color: rgba(253, 246, 240, 0.72);
  text-align: center;
}
.bx-footer__inner {
  max-width: 900px;
  margin: 0 auto;
}
.bx-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-bottom: 14px;
}
.bx-footer__nav a {
  font-size: 12px;
  color: rgba(253, 246, 240, 0.78);
  border-bottom: 1px solid rgba(255, 107, 74, 0.4);
  padding-bottom: 2px;
}
.bx-footer__nav a:hover {
  color: var(--bx-coral-warm);
}
.bx-footer__legal {
  max-width: 760px;
  margin: 0 auto 12px;
  font-size: 11px;
  line-height: 1.75;
  color: rgba(253, 246, 240, 0.58);
}
.bx-footer__copy {
  font-size: 11px;
  color: rgba(253, 246, 240, 0.5);
}