/* ============================================
   Design Tokens — bel-memorial.by
   Source: temp/tokens.css
   ============================================ */

:root {
  /* ─── Colors: Primary ─── */
  --color-primary:            #025EBA;
  --color-primary-dark:       #00008B;
  --color-primary-hover:      #0064C9;
  --color-primary-light:      #3686F7;
  --color-primary-10:         rgba(2, 94, 186, 0.1);
  --color-primary-35:         rgba(2, 94, 186, 0.35);

  /* ─── Colors: Blue tints ─── */
  --color-blue-light:         #DDEEFF;
  --color-blue-mist:          #D6E7F7;
  --color-blue-pale:          #F4FAFF;
  --color-blue-near-white:    #FDFEFF;

  /* ─── Colors: Neutrals ─── */
  --color-black:              #0B0B0B;
  --color-text:               #0B0B0B;
  --color-text-secondary:     rgba(11, 11, 11, 0.5);
  --color-text-muted:         rgba(11, 11, 11, 0.52);
  --color-gray-350:           #B4B4B4;
  --color-border:             #D9D9D9;
  --color-white:              #FFFFFF;
  --color-bg-page:            #FDFEFF;
  --color-bg-section:         #F4FAFF;

  /* ─── Colors: Accents ─── */
  --color-red:                #B50F12;

  /* ─── Colors: Overlays ─── */
  --color-overlay-header:     rgba(11, 11, 11, 0.38);
  --color-overlay-dark-60:    rgba(11, 11, 11, 0.6);
  --color-overlay-dark-22:    rgba(11, 11, 11, 0.22);
  --color-overlay-dark-05:    rgba(11, 11, 11, 0.05);
  --color-white-05:           rgba(255, 255, 255, 0.05);
  --color-white-80:           rgba(255, 255, 255, 0.8);

  /* ─── Typography ─── */
  --font-primary:             'Manrope', sans-serif;
  --font-secondary:           'Open Sans', sans-serif;
  --font-size-xs:             10px;
  --font-size-sm:             12px;
  --font-size-base:           14px;
  --font-size-md:             16px;
  --font-size-lg:             18px;
  --font-size-xl:             20px;
  --font-size-2xl:            24px;
  --font-size-3xl:            26px;
  --font-size-4xl:            40px;
  --font-size-hero:           48px;

  /* ─── Spacing ─── */
  --spacing-xs:               5px;
  --spacing-sm:               10px;
  --spacing-md:               15px;
  --spacing-lg:               20px;
  --spacing-xl:               25px;
  --spacing-2xl:              30px;
  --spacing-3xl:              35px;
  --spacing-4xl:              40px;
  --spacing-5xl:              50px;
  --spacing-section:          100px;
  --container-padding:        200px;
  --container-max:            1200px;

  /* ─── Border Radius ─── */
  --radius-sm:                8px;
  --radius-md:                10px;
  --radius-lg:                15px;
  --radius-xl:                20px;
  --radius-pill:              30px;

  /* ─── Shadows ─── */
  --shadow-card:              0px 1px 8.5px 0px rgba(214, 231, 247, 0.5);
  --shadow-card-hover:        0px 1px 8.5px 0px rgba(214, 231, 247, 1);

  /* ─── Backdrop ─── */
  --blur-header:              blur(20.9px);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.37;
  color: var(--color-text);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  display: flex;
  flex-direction: column;
}
main{margin-top: 158px;}
@media (max-width: 768px) {
  main { margin-top: 60px; }
  body.mobile-menu-open { overflow: hidden; }
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

ul, ol {
  list-style: none;
}

button, input, textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
}

button {
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ─── Common button styles ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: var(--spacing-sm) 41px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.37;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

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

.btn--white {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.btn--outline-white {
  background-color: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

.btn--outline-primary {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* ─── Section titles ─── */
.section-title {
  font-family: var(--font-primary);
  font-size: var(--font-size-hero);
  font-weight: 700;
  line-height: 1.37;
  color: var(--color-text);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ─── Navigation arrows (common) ─── */
.nav-arrows {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.nav-arrows img {
  cursor: pointer;
}