/* belgeo template — design tokens from Figma (ML3SEiYrAoxGuMveaaXerf) */

:root {
    --c-accent: #9c9500;
    --c-accent-dark: #596426;
    --c-green: #308358;
    --c-text: #000;
    --c-text-soft: #2a2a2a;
    --c-label: #8b8b8b;
    --c-pill: #f5f5f5;
    --grad: linear-gradient(80deg, #9c9500 2%, #596426 86%);
    --radius: 42px;
    --font-head: 'Huninn', 'Comfortaa', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --font-card: 'Roboto', sans-serif;
    --fs-body: clamp(16px, 1.25vw, 24px);
    --fs-h2: clamp(28px, 2.5vw, 48px);
    --fs-num: clamp(32px, 2.7vw, 52px);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #fff;
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.3;
}

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; margin: 0; }
h2 { font-size: var(--fs-h2); }

.container {
    max-width: 1788px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 1200px) { .container { padding-left: 32px; padding-right: 32px; } }

.accent { color: var(--c-accent); }
.green { color: var(--c-green); }
.bg-label { color: var(--c-label); font-size: 16px; margin: 0 0 10px; }

/* Buttons */
.bg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: var(--radius);
    padding: 12px 16px;
    font-family: var(--font-head);
    font-size: 18px;
    color: #fff;
    cursor: pointer;
}
.bg-btn--gradient { background: var(--grad); color: #fff; }
.bg-btn--big { padding: 24px 16px; font-size: clamp(18px, 1.25vw, 24px); width: 100%; }
.bg-btn--outline {
    background: none;
    border: 2px solid var(--c-accent);
    color: var(--c-accent);
    justify-content: center;
    text-align: center;
}
.bg-btn-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    line-height: 0;
}
.bg-btn--pill { background: var(--c-pill); }
.bg-btn--glass { background: rgba(245, 245, 245, .2); }
.bg-btn--border { background: none; border: 1px solid #fff; }

/* Header */
.bg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 50px;
    padding-bottom: 0;
}
.bg-header__left, .bg-header__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bg-header__left { gap: 30px; }
.bg-header__logos { display: flex; align-items: center; gap: 16px; }
.bg-menu-toggle__icon { display: inline-flex; flex-direction: column; gap: 3px; width: 16px; }
.bg-menu-toggle__icon i { height: 3px; border-radius: 3px; background: #fff; }
.bg-search {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius);
    padding: 12px 16px;
    min-width: 240px;
}
@media (min-width: 1400px) { .bg-search { width: 463px; } }
.bg-search input[type="search"] {
    background: none;
    border: 0;
    outline: 0;
    color: #fff;
    font-family: var(--font-head);
    font-size: 18px;
    width: 100%;
}
.bg-search input::placeholder { color: #fff; }

/* Mega menu (Figma: «Меню/Раскрытие раздела …») */
.flip { transform: rotate(180deg); }

.bg-menu { position: static; }
.bg-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    background: #fff;
    padding: 24px 0 32px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, .08);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}
.bg-header { position: relative; }
.bg-menu:hover .bg-nav,
.bg-menu:focus-within .bg-nav,
.bg-menu.is-open .bg-nav { opacity: 1; visibility: visible; }

.bg-nav__inner { display: flex; gap: 80px; align-items: flex-start; }
.bg-nav__sections {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 236px;
}
.bg-nav__sections a {
    font-family: var(--font-body);
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 1.4;
    white-space: nowrap;
}
.bg-nav__section:hover > a,
.bg-nav__section:hover > .bg-nav__stub,
.bg-nav__section.is-active > a,
.bg-nav__section.is-active > .bg-nav__stub { color: var(--c-accent); }
.bg-nav__stub {
    font-family: var(--font-body);
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;
    color: var(--c-label);
}
.bg-nav__submenu .bg-nav__stub { white-space: normal; }
.bg-nav__divider { width: 1px; align-self: stretch; background: #c0c0c0; }
.bg-nav__submenus { flex: 1; }
.bg-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.bg-nav__submenu[hidden] { display: none; }
.bg-nav__submenu a {
    font-family: var(--font-body);
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 1.4;
}
.bg-nav__submenu a:hover { color: var(--c-accent); }

/* Menu button: bars turn into a cross when the menu is open */
.bg-menu-toggle { position: relative; }
.bg-menu-toggle__icon { transition: transform .15s ease; }
.bg-menu:hover .bg-menu-toggle__icon i:nth-child(1),
.bg-menu.is-open .bg-menu-toggle__icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bg-menu:hover .bg-menu-toggle__icon i:nth-child(2),
.bg-menu.is-open .bg-menu-toggle__icon i:nth-child(2) { opacity: 0; }
.bg-menu:hover .bg-menu-toggle__icon i:nth-child(3),
.bg-menu.is-open .bg-menu-toggle__icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.bg-menu-toggle__icon i { transition: transform .15s ease, opacity .15s ease; }

/* Hero */
.bg-hero { margin-top: 36px; }
.bg-hero__image {
    height: clamp(320px, 40vw, 771px);
    border-radius: var(--radius);
    background-size: cover;
    background-position: center 30%;
}
.bg-hero__title {
    text-align: center;
    font-size: clamp(24px, 2.9vw, 55px);
    margin: 40px auto 0;
}

/* Intro */
.bg-intro {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
    margin-top: 100px;
}
.bg-intro__col { border-top: 1px solid #c0c0c0; padding: 16px 12px; }
.bg-intro__col--mid { align-self: start; margin-top: 90px; border-top: 1px solid #c0c0c0; }
.bg-intro__col--slogan { border-top: 0; display: flex; flex-direction: column; gap: 40px; }
.bg-intro__slogan {
    font-family: var(--font-head);
    font-size: clamp(30px, 2.7vw, 52px);
    margin: 0;
    padding-bottom: 40px;
    border-bottom: 1px solid #c0c0c0;
}
.bg-intro p { margin: 0 0 16px; }

.bg-rule { border: 0; border-top: 1px solid #c0c0c0; margin: 100px auto 0; }

/* Section head with arrows */
.bg-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 12px;
}
.bg-arrows { display: flex; gap: 12px; }

/* News */
.bg-news { margin-top: 100px; }
.bg-news__track { display: flex; gap: 80px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.bg-news__track::-webkit-scrollbar { display: none; }
.bg-news-card {
    background: var(--c-pill);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex: 0 0 min(532px, 85vw);
    height: 465px;
    scroll-snap-align: start;
}
.bg-news-card--wide { flex: 0 0 min(1144px, 90vw); }
.bg-news-card__img { flex: 1 1 50%; min-width: 0; }
.bg-news-card__img img { width: 100%; height: 100%; object-fit: cover; }
.bg-news-card--wide .bg-news-card__img { flex: 1 1 50%; }
.bg-news-card__body {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 32px;
}
.bg-news-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 20px; color: #111; margin: 0 0 12px; }
.bg-news-card__intro { font-size: 16px; color: var(--c-text-soft); line-height: 1.5; overflow: hidden; }
.bg-news-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bg-news-card__meta time { font-family: var(--font-head); font-size: 13px; color: #7a7a7a; }
.bg-news__empty { padding: 32px 12px; color: var(--c-label); }

/* About */
.bg-about {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
    margin-top: 120px;
}
.bg-about__col h2 { margin-bottom: 48px; }
.bg-about__col--stat { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.bg-about__col--stat .bg-btn--outline { width: auto; align-self: center; min-width: 60%; padding: 24px 40px; }
.bg-about__col--stats { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.bg-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; }
.bg-stat__num { font-family: var(--font-head); font-size: var(--fs-num); color: var(--c-accent); }

/* Procedures */
.bg-proc {
    margin-top: 120px;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
}
.bg-proc::before { content: ''; position: absolute; inset: 0; background: rgba(6, 37, 21, .6); }
.bg-proc__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
}
/* Mockup layout: row 1 = heading, empty cell, card 6.24.1; rows 2-3 fill left to right */
.bg-proc__grid .bg-proc-card:nth-of-type(1) { grid-column: 3; grid-row: 1; }
.bg-proc__grid .bg-proc-card:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.bg-proc__grid .bg-proc-card:nth-of-type(3) { grid-column: 2; grid-row: 2; }
.bg-proc__grid .bg-proc-card:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.bg-proc__grid .bg-proc-card:nth-of-type(5) { grid-column: 1; grid-row: 3; }
.bg-proc__head h2 { text-transform: uppercase; border-bottom: 1px solid #fff; padding: 16px 12px; }
.bg-proc__head p { font-family: var(--font-head); padding: 16px 12px; margin: 0; }
.bg-proc-card {
    background: rgba(255, 255, 255, .2);
    border-radius: var(--radius);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: var(--font-card);
    min-height: 238px;
}
.bg-proc-card__top { display: flex; align-items: center; justify-content: space-between; }
.bg-proc-card__top strong { font-size: clamp(22px, 1.7vw, 32px); }

/* Resources */
.bg-resources { margin-top: 120px; }
.bg-resources__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
}
.bg-resources__title { text-transform: uppercase; padding: 16px 12px; order: -1; grid-column: 3; grid-row: 1; }
.bg-res-card {
    height: 243px;
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 32px;
}
.bg-res-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    background: linear-gradient(to top, rgba(0, 0, 0, .6) 55%, rgba(255, 255, 255, 0) 155%);
}
.bg-res-card .bg-btn-round { position: relative; }

.bg-dots { margin: 100px auto 0; text-align: center; }
.bg-dots img { width: 100%; height: 20px; object-fit: cover; }

/* Contacts */
.bg-contacts {
    display: grid;
    grid-template-columns: 1fr 2.15fr;
    gap: 80px;
    margin-top: 100px;
    align-items: start;
}
.bg-contacts__list h2 { padding: 32px 12px; }
.bg-contacts__list dl { margin: 0; padding: 16px 12px; display: flex; flex-direction: column; gap: 32px; }
.bg-contacts__list dt { color: var(--c-label); font-size: 16px; margin-bottom: 10px; }
.bg-contacts__list dd { margin: 0; display: flex; align-items: center; gap: 12px; }
.bg-contacts__card {
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 730px;
    display: flex;
}
.bg-contacts__card::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius); background: rgba(255, 255, 255, .8); }
.bg-contacts__card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 32px;
}
.bg-contacts__small { font-family: var(--font-head); font-size: 24px; margin: 0; }
.bg-contacts__big { font-family: var(--font-head); font-size: clamp(28px, 2.7vw, 52px); margin: 16px 0 0; }
.bg-contacts__req p:last-child { margin: 0; }

/* Promo */
.bg-promo { margin-top: 100px; }
.bg-promo__nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bg-promo__dots { flex: 0 1 176px; }
.bg-promo__banner {
    margin-top: 74px;
    height: 592px;
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 60px;
}
.bg-promo__card {
    background: rgba(55, 55, 55, .2);
    border-radius: 30px;
    padding: 32px;
    max-width: 544px;
    color: #fff;
    font-family: var(--font-card);
    display: flex;
    flex-direction: column;
    gap: 40px;
    backdrop-filter: blur(2px);
}
.bg-promo__card h3 { font-family: var(--font-card); font-weight: 700; font-size: clamp(24px, 1.7vw, 32px); }
.bg-promo__card p { margin: 0; }
.bg-promo__more { display: flex; align-items: center; justify-content: space-between; }

/* Footer */
.bg-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 85px;
    flex-wrap: wrap;
    margin-top: 120px;
    padding-top: 40px;
    padding-bottom: 60px;
}
.bg-footer__logos { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.bg-footer__small { font-family: var(--font-head); font-size: 16px; margin: 0 0 13px; }
.bg-footer__name { font-family: var(--font-head); font-size: 26px; margin: 0; }
.bg-footer__contacts { display: flex; flex-direction: column; gap: 24px; min-width: min(508px, 100%); }
.bg-footer__contacts p { margin: 0; display: flex; align-items: center; gap: 12px; }
.bg-footer__contacts .bg-label { display: block; }
.bg-footer__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bg-footer__social { display: flex; gap: 16px; }

/* Inner pages */
.bg-component { margin-top: 60px; min-height: 40vh; }
.bg-page-title { font-size: var(--fs-h2); padding: 16px 12px; }

.bg-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 24px;
}
.bg-news-card--stack { flex-direction: column; height: auto; }
.bg-news-card--stack .bg-news-card__img { display: block; height: 240px; flex: none; }
.bg-news-card--stack .bg-news-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bg-news-card--stack .bg-news-card__body { flex: 1 1 auto; padding: 24px; }
.bg-news-card__title { font-family: var(--font-body); font-weight: 700; font-size: 20px; color: #111; margin: 0 0 12px; }

.bg-pagination { display: flex; justify-content: center; margin: 60px 0; }
.bg-pagination ul { list-style: none; display: flex; gap: 12px; margin: 0; padding: 0; }
.bg-pagination a, .bg-pagination span {
    display: inline-flex;
    min-width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--c-pill);
    padding: 0 12px;
    font-size: 16px;
}
.bg-pagination .active span { background: var(--grad); color: #fff; }

.bg-article { max-width: 1144px; }
.bg-article__date { font-family: var(--font-head); color: #7a7a7a; font-size: 14px; padding: 0 12px; }
.bg-article__image { margin: 24px 0 0; }
.bg-article__image img { width: 100%; max-height: 592px; object-fit: cover; border-radius: var(--radius); }
.bg-article__body { padding: 16px 12px; }

/* Responsive */
@media (max-width: 1200px) {
    .bg-intro, .bg-about, .bg-proc__grid, .bg-resources__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .bg-proc__grid .bg-proc-card { grid-column: auto !important; grid-row: auto !important; }
    .bg-resources__title { grid-column: auto; grid-row: auto; }
    .bg-contacts { grid-template-columns: 1fr; }
    .bg-contacts__card { min-height: 520px; }
    .bg-news__track { gap: 40px; }
}
@media (max-width: 768px) {
    .bg-intro, .bg-about, .bg-proc__grid, .bg-resources__grid { grid-template-columns: 1fr; }
    .bg-intro__col--mid { margin-top: 0; }
    .bg-news-card, .bg-news-card--wide { flex-direction: column; height: auto; flex-basis: 85vw; }
    .bg-news-card__img { min-height: 220px; }
    .bg-promo__banner { padding: 24px; height: auto; }
    .bg-header { padding-top: 24px; }
    .bg-footer { gap: 40px; }
}